/* MUART.PL — style motywu
   Układ odwzorowany z obecnej strony muart.pl (kontener 1276 px, kolaż w hero, siatka produktów,
   pas z opiniami, newsletter, stopka w 5 kolumnach). Mobile-first: bazowe style są dla telefonu. */

/* ---------- fonty jak na muart.pl: Roboto (tekst) + Archivo Narrow (tytuły, ceny, przyciski); lokalnie, bez Google Fonts ---------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokeny ---------- */
:root {
  --bg: #ffffff;
  --ink: #333333;
  --text: #444444;
  --muted: #666666;
  --soft: #6e6e6e;
  --dark: #313537;
  --dark-hover: #4a4f52;
  --line: #646464;
  --field-line: rgb(0 0 0 / 0.1);
  --photo-bg: #f0eff0;

  --font: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo Narrow", "Arial Narrow", Roboto, sans-serif;

  --container: 1276px;
  --pad: 1rem;              /* margines boczny na telefonie */
  --gap: 0.625rem;          /* odstęp kafli w kolażu */
  --section: 3rem;          /* odstęp między sekcjami */
}
@media (min-width: 48em) {
  :root { --pad: 1.5rem; --gap: 0.75rem; }
}
@media (min-width: 64em) {
  :root { --gap: 1.25rem 0.75rem; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 0.875rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--dark); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* widoczność ustawiana w panelu (strony, sekcje, menu): telefon/tablet = poniżej 64em, jak przełączanie nagłówka */
@media (max-width: 63.99em) { .hide-mobile { display: none !important; } }
@media (min-width: 64em) { .hide-desktop { display: none !important; } }
.skip { position: absolute; left: var(--pad); top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--dark); color: #fff; }
.skip:focus { top: 0.5rem; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* tytuł sekcji: wersaliki z podkreśleniem, na środku (jak „NASZE PRODUKTY”) */
.section-title { text-align: center; }
.section-title span {
  position: relative; display: inline-block; padding: 0 0.4rem 0.6rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.5rem;
}
.section-title span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-color, #3a3a3a);
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) 250ms;
}

/* ---------- nagłówek ---------- */
/* telefon: logo po lewej, konto i koszyk po prawej, pod spodem czarny pasek „MENU” */
.header { background: var(--bg); }
.header__bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  min-height: 5.75rem;
}
.header__nav { display: none; }
.header__logo img { width: 4.5rem; height: auto; }
.header__right { display: flex; justify-content: flex-end; align-items: center; margin-right: -0.6rem; }
.header__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.75rem; min-height: 2.75rem; }
.header__logout { display: contents; }  /* formularz wylogowania (POST + CSRF) nie psuje układu przycisków */
.header a, .drawer a { transition: opacity 180ms ease; }

.header__menubar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 2.75rem; padding-inline: var(--pad);
  background: #232323; color: #fff;
  font-size: 0.9375rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
}
.header__menubar .icon { width: 1.5rem; height: 1.5rem; }

@media (min-width: 64em) {
  .header__bar { grid-template-columns: 1fr auto 1fr; min-height: 6.6875rem; padding-inline: calc(var(--pad) + 0.5625rem); }  /* 107 px */
  .header__menubar { display: none; }
  /* odstęp od 36 px (1024) do 60 px (1440 i więcej); link nigdy nie łamie się w środku, nadmiar linków z panelu przechodzi cały do drugiego wiersza */
  .header__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .header__nav { display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 5.77vw - 23px, 3.75rem); padding-right: 1.5rem; }
  .header__nav a { display: inline; font-size: 0.8125rem; text-transform: uppercase; line-height: 1.5rem; white-space: nowrap; color: var(--ink); }
  /* konto, wylogowanie, koszyk: ikony jak na telefonie (licznik w koszyku), nazwa w podpowiedzi pod ikoną (data-tip) */
  .header__right { gap: 1.25rem; margin-right: 0; padding-right: 1.75rem; }
  .header__right .icon { width: 1.375rem; height: 1.375rem; }
  .cart-count { right: 0.2rem; bottom: 0.45rem; }
  .header__btn[data-tip]::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 0.25rem); left: 50%; translate: -50% -0.25rem;
    padding: 0.3rem 0.55rem; background: var(--dark); color: #fff; white-space: nowrap;
    font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, translate 160ms ease, visibility 0s linear 160ms;
  }
  .header__btn[data-tip]:hover::after, .header__btn[data-tip]:focus-visible::after { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
  .header__logo img { width: 5.6875rem; }  /* 91 px */
  /* komputer: nagłówek przyklejony (stała wysokość — zmniejszanie przy przewijaniu powodowałoby skoki treści);
     po zjechaniu w dół delikatny cień (.is-stuck z muart.js). --header-h przesuwa inne przyklejone elementy i kotwice. */
  :root { --header-h: 6.6875rem; }
  html { scroll-padding-top: var(--header-h); }
  .header { position: sticky; top: 0; z-index: 30; transition: box-shadow 250ms ease; }
  .header.is-stuck { box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 10px 24px -18px rgb(0 0 0 / 0.35); }
}
@media (hover: hover) and (pointer: fine) {
  .header a:hover, .drawer a:hover { opacity: 0.6; }
  .drawer .drawer__main a:hover { opacity: 1; background-size: 100% 100%; }
}

/* menu mobilne: panel z prawej (natywny <dialog>: pułapka fokusu i Esc za darmo). Pudrowe tło i smuga pudru u góry, główne linki krojem tytułów, wybrany link z pudrową kreską */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(20rem, 84vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0;
  background: #fbf6f2; color: var(--ink); isolation: isolate;
  flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.drawer::before {  /* puder wysypany na górę panelu, za tytułem i głównymi linkami */
  content: ""; position: absolute; top: -1.1rem; right: -1rem; z-index: -1; width: 11.5rem; aspect-ratio: 440 / 326;
  background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
}
.drawer[open] { display: flex; }
.drawer::backdrop { background: rgb(46 32 26 / 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html:has(.drawer[open]) { overflow: hidden; }  /* strona pod menu się nie przewija */

.drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-inline: 1.25rem; padding: 1.5rem 0 0.5rem;
}
.drawer__head h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }
.drawer__close { margin-right: -0.6rem; }
.drawer__main { padding: 0.5rem 1.25rem 1.25rem; }
.drawer__main a {
  display: inline-block; padding: 0.3rem 0.35rem 0.25rem; margin-inline: -0.35rem;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; color: #2b2523;
  background: linear-gradient(transparent 66%, #f0d8c9 66% 90%, transparent 90%) left / 0 100% no-repeat; transition: background-size 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer__main a[aria-current="page"], .drawer__main a:active { background-size: 100% 100%; }
.drawer__group { position: relative; padding: 1rem 1.25rem 0.7rem; }
.drawer__group::before, .drawer__contact::before {  /* linia oddzielająca: rysuje się przy otwarciu */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #ecdcd1; transform-origin: right;
}
.drawer__group h3 { margin-bottom: 0.2rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #8a6552; }
.drawer__group a { display: inline-block; padding-block: 0.4rem; font-size: 0.9375rem; color: #3a3230; }
.drawer__group a[aria-current="page"] { text-decoration: underline; text-decoration-color: #d9a98f; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.drawer__contact {
  display: grid; gap: 0.1rem; margin-top: auto;
  position: relative; padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: #f6ebe3; font-size: 0.8125rem; color: #5f4b42;
}
.drawer__contact::after {  /* jak w stopce: mały puder wysypany na górną krawędź */
  content: ""; position: absolute; top: -1.85rem; right: 0.75rem; width: 5.5rem; aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
.drawer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; }
.drawer__contact .icon { width: 1rem; height: 1rem; color: #a06f58; }

.header__menubar { transition: background-color 180ms ease; }
.header__menubar:active { background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: drawer-in 480ms cubic-bezier(0.16, 1, 0.3, 1); }
  .drawer[open]::before { animation: drawer-powder 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }  /* puder opada, gdy panel już wjeżdża */
  .drawer[open]::backdrop { animation: backdrop-in 400ms ease; }
  /* pozycje wjeżdżają po kolei (--d nadaje JS) */
  .drawer[open] [data-drawer-item] { animation: drawer-item 600ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(140ms + var(--d, 0) * 45ms); }
  .drawer[open] .drawer__group::before, .drawer[open] .drawer__contact::before { animation: line-in 700ms cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(180ms + var(--d, 0) * 45ms); }
  /* zamykanie: JS dodaje .is-closing i zamyka <dialog> po animacji */
  .drawer.is-closing { animation: drawer-out 280ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
  .drawer.is-closing::backdrop { animation: backdrop-out 280ms ease forwards; }
}
@keyframes drawer-powder { from { opacity: 0; transform: translate(0.75rem, -1.25rem) scale(1.08); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
@keyframes drawer-item { from { opacity: 0; transform: translateX(24px); } }
@keyframes line-in { from { transform: scaleX(0); } }

/* ---------- dolny pasek (telefon/tablet): półprzezroczysty, wysuwa się, gdy nagłówek zniknie z ekranu ----------
   Ikony zebrane pośrodku (Koszyk, Menu, Konto), podpisy zwykłymi literami. Kolejne pozycje: <a|button class="bottom-bar__item">. */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 4.5rem; justify-content: center; gap: 1rem;
  padding: 0.375rem var(--pad) calc(0.375rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgb(0 0 0 / 0.06);
  transform: translateY(100%); visibility: hidden;
  transition: transform 300ms ease, visibility 0s linear 300ms;
}
.bottom-bar.is-visible { transform: none; visibility: visible; transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
@supports not (backdrop-filter: blur(1px)) {
  .bottom-bar { background: rgb(255 255 255 / 0.96); }
}
.bottom-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 3.25rem; color: var(--ink);
  font-size: 0.8125rem; font-weight: 400; line-height: 1;
  transition: opacity 180ms ease, transform 140ms ease;
}
.bottom-bar__item:active { transform: scale(0.94); }
.bottom-bar__item .icon { width: 1.375rem; height: 1.375rem; stroke-width: 1.4; }
.bottom-bar__icon { position: relative; }
/* liczba produktów: czerwone kółko z białą cyfrą, nachodzi na prawy dolny róg ikony koszyka (dolny pasek i nagłówek na telefonie) */
.bottom-bar__badge, .cart-count {
  position: absolute; min-width: 1.125rem; height: 1.125rem; padding-inline: 0.3rem; border-radius: 999px;
  background: #c0182f; color: #fff; box-shadow: 0 0 0 2px #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; letter-spacing: 0; text-align: center;
}
.bottom-bar__badge { right: -0.55rem; bottom: -0.3rem; }
.header__btn { position: relative; }
.cart-count { right: 0.05rem; bottom: 0.35rem; }
/* sesja zalogowanej klientki (js/session.js): kropka na ikonie konta w kolorze pozostałego czasu (2 h zielona … 0 czerwona) */
.session-dot { position: absolute; top: 0.5rem; right: 0.45rem; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--session-color, rgb(42 157 90)); box-shadow: 0 0 0 2px #fff; pointer-events: none; transition: background-color 1.5s linear; }
.bottom-bar__badge[data-count="0"], .cart-count[data-count="0"] { display: none; }
@media (max-width: 63.99em) {
  body { padding-bottom: 4.25rem; }  /* pasek nie zasłania końca stopki */
  /* przy jasnej stopce to miejsce należy do niej (bez białego paska pod spodem) */
  body:has(.site-footer--tint) { padding-bottom: 0; }
  .site-footer--tint { padding-bottom: 4.25rem; }
}
@media (min-width: 64em) {
  .bottom-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-bar, .bottom-bar.is-visible { transition: none; }
}

/* ---------- hero: kolaż (duży kafel ze sliderem + 2 kolumny po 2 kafle) ---------- */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 0.25rem; }
.collage__main { grid-column: 1 / -1; aspect-ratio: 1; }
.collage__col { display: flex; flex-direction: column; gap: var(--gap); }
.tile { position: relative; overflow: hidden; background: var(--photo-bg); margin: 0; }
.tile picture, .tile img, .tile video { width: 100%; height: 100%; }
.tile img, .tile video { object-fit: cover; }
.tile--short { aspect-ratio: 289 / 280; }
.tile--tall { aspect-ratio: 289 / 386; }

/* napisy na kafelkach (pozycje i rozmiary z oryginału) */
.tile__text { position: absolute; color: #fff; text-align: center; pointer-events: none; text-shadow: 0 1px 10px rgb(0 0 0 / 0.28); }
.tile__box { text-shadow: none; }
.tile__text--ready {
  left: 14%; bottom: 12%; text-align: left;
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 2.52rem); font-weight: 100; letter-spacing: 1px; line-height: 1.2;
  color: rgb(255 255 255 / 0.6); text-transform: uppercase;
}
.tile__text--style { left: 0; right: 0; top: 41%; }
.tile__text--style small { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 3px; line-height: 1.5rem; }
.tile__text--style strong { display: block; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.44rem); font-weight: 400; letter-spacing: 3px; line-height: 1.2; }
.tile__box {
  left: 9%; right: 9%; padding: 0.9rem 0.5rem;
  color: #444; font-size: 0.765rem; letter-spacing: 2px; line-height: 1.5rem;
}
.tile__box--created { top: 41%; background: rgb(255 255 255 / 0.49); }
.tile__box--created small { display: block; font-size: inherit; color: #595959; }
.tile__box--created strong { display: block; font-size: 0.81rem; font-weight: 500; letter-spacing: 3px; }
.tile__box--detail { bottom: 5%; background: rgb(255 255 255 / 0.41); }
.tile__text--drop { right: 7%; bottom: 11%; font-size: 0.9rem; font-weight: 500; letter-spacing: 2px; line-height: 1; }

/* slider w dużym kaflu */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.slider-ui { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.25rem; color: #fff; }
.slider-ui .icon { width: 1.125rem; height: 1.125rem; }
.slide-pause { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
.slide-pause .icon--play, .slide-pause[aria-pressed="true"] .icon--pause { display: none; }
.slide-pause[aria-pressed="true"] .icon--play { display: block; }

/* kropki (jak w opiniach na obecnej stronie) */
.dots { display: flex; align-items: center; }
.dots button { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 2.25rem; }
.dots button::before {
  content: ""; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%;
  transition: width 200ms ease, height 200ms ease, background-color 200ms ease;
}
.dots button[aria-current="true"]::before { width: 14px; height: 14px; background: currentColor; }

@media (min-width: 48em) {
  /* 680 : 289 : 289, wysokość 686 przy szerokości 1276 */
  .collage { grid-template-columns: 680fr 289fr 289fr; aspect-ratio: 1276 / 686; padding-top: 0.3125rem; }
  .collage__main { grid-column: auto; aspect-ratio: auto; }
  .tile--short, .tile--tall { aspect-ratio: auto; min-height: 0; }
  .tile--short { flex: 280 1 0; }
  .tile--tall { flex: 386 1 0; }
  .tile__box { font-size: clamp(0.65rem, 0.4rem + 0.45vw, 0.765rem); }
}

/* ---------- produkty ---------- */
.products { padding-top: var(--section); }
.products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin-top: 1.25rem; }
.card__media { position: relative; display: block; aspect-ratio: 232 / 302; overflow: hidden; background: var(--photo-bg); }
.card__media > a { display: block; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1); }
.card__add {
  position: absolute; right: 5px; bottom: 5px;
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  background: var(--dark); color: #fff;
  transition: opacity 200ms ease, transform 200ms ease, background-color 180ms ease;
}
.card__add .icon { width: 1rem; height: 1rem; }
.card__add:active { transform: scale(0.94); }
.card__info { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: 1.4375rem; }
.card__name { font-size: 0.875rem; font-weight: 400; color: #5e5e5e; line-height: 1.27; }
.card__price { font-family: var(--font-display); font-size: 1.125rem; font-style: italic; color: var(--ink); white-space: nowrap; }

/* ---------- /sklep (shop/category): karty obok siebie także na telefonie — klientka wybiera rozmiar, porównuje oba naraz.
   Kontener węższy niż strona (64rem), żeby zdjęcia 4:5 nie były wyższe niż ekran; po najechaniu zbliżenie napisu. ---------- */
.shop { max-width: calc(64rem + 2 * var(--pad)); padding-block: 1.5rem 1rem; }
@media (min-width: 64em) { .shop { padding-top: 2.5rem; } }
.shop__head { margin-bottom: 1.75rem; }
.shop__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; }
.shop__lead { max-width: 34rem; margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.shop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.75rem; }
@media (min-width: 48em) { .shop__grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.5rem 2rem; } }
.shop-card { display: flex; flex-direction: column; height: 100%; }
.shop-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.shop-card__hover { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms ease; }
@media (hover: hover) and (pointer: fine) {
  .shop-card:hover .shop-card__hover { opacity: 1; }
  .shop-card:hover .shop-card__media img { transform: scale(1.03); }
}
.shop-card__info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-top: 1rem; }
.shop-card__name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400; line-height: 1.25; letter-spacing: 1.5px; text-transform: uppercase; color: #373737; }
.shop-card__name a::after { content: ""; position: absolute; inset: 0; }  /* cała karta prowadzi do produktu (przycisk jest nad tym) */
.shop-card { position: relative; }
.shop-card__price { font-family: var(--font-display); font-size: 1.125rem; font-style: italic; color: var(--ink); white-space: nowrap; }
.shop-card__size { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--soft); }
.shop-card__buy { position: relative; z-index: 1; margin-top: auto; padding-top: 1rem; }
.btn.shop-card__add { width: 100%; min-height: 2.75rem; }
@media (min-width: 48em) {
  .shop-card__name { font-size: 1.125rem; }
  .shop-card__price { font-size: 1.375rem; }
  .shop-card__size { font-size: 0.875rem; }
  .btn.shop-card__add { min-height: 3rem; font-size: 0.8125rem; letter-spacing: 2px; }
}

/* „Który rozmiar wybrać?” — jasny pas z pudrem na krawędzi (jak na innych stronach), porównanie w cm i okno tabeli rozmiarów */
.shop__sizes { position: relative; display: grid; gap: 1.5rem; margin-top: 4rem; padding: 2rem 1.5rem; background: #f5f5f3; }
.shop__sizes::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: calc(100% - 1.25rem); width: clamp(7rem, 12vw, 9.5rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 48em) { .shop__sizes { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: center; gap: 3rem; padding: 2.5rem 3rem; } }
.shop__sizes-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.shop__sizes-text p { max-width: 30rem; margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.btn.shop__guide { margin-top: 1.25rem; }
.shop__compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.shop__compare th, .shop__compare td { padding: 0.75rem 0.5rem; text-align: left; }
.shop__compare thead th { padding-top: 0; border-bottom: 1px solid var(--dark); font-family: var(--font-display); font-size: 0.875rem; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.shop__compare tbody tr + tr > * { border-top: 1px solid #e0e0dc; }
.shop__compare tbody th { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; color: var(--ink); }
.shop__compare td { color: var(--text); }

/* fakty pod spodem: dostawa i zwroty + materiał w jednym pasku (te same listy co na karcie produktu) */
.shop__facts { display: grid; gap: 0.5rem; margin-top: 2.5rem; }
.shop__facts .pdp__perks, .shop__facts .pdp__quality { margin: 0; }
@media (min-width: 64em) {
  .shop__facts { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; }
  .shop__facts .pdp__perks { padding: 0; border: 0; }
  .shop__facts .pdp__quality { padding: 0; border: 0; justify-content: flex-end; gap: 2.5rem; }
}
@media (min-width: 48em) {
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.875rem; }
}
@media (min-width: 64em) {
  .products__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* przycisk koszyka w prawym dolnym rogu zdjęcia (5 px od krawędzi) pojawia się po najechaniu */
@media (hover: hover) and (pointer: fine) {
  .card__add { opacity: 0; }
  .card:hover .card__add, .card__add:focus-visible { opacity: 1; }
  .card__add:hover { background: var(--dark-hover); }
  .card:hover .card__media img { transform: scale(1.04); }
}

/* ---------- mapa strony (/mapa-strony): jasny pas „Sklep” z produktami (puder na krawędzi), niżej grupy linków z opisem ---------- */
.sitemap { max-width: calc(64rem + 2 * var(--pad)); padding-block: 1.5rem 1rem; }
@media (min-width: 64em) { .sitemap { padding-top: 2.5rem; } }
.sitemap__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; }
.sitemap__lead { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.sitemap__group-title { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.sitemap__group-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.sitemap__note { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.4; color: var(--soft); }
.sitemap__shop { position: relative; margin-top: 3rem; padding: 1.75rem 1.5rem; background: #f5f5f3; }
.sitemap__shop::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: calc(100% - 1.25rem); width: clamp(7rem, 12vw, 9.5rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 48em) { .sitemap__shop { padding: 2.25rem 2.5rem; } }
.sitemap__products { display: grid; gap: 1rem; }
@media (min-width: 48em) { .sitemap__products { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; } }
.sitemap__product { display: flex; align-items: center; gap: 1rem; }
.sitemap__product picture { flex: none; width: 4rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.sitemap__product img { width: 100%; height: 100%; object-fit: cover; }
.sitemap__product-name { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; color: #373737; }
@media (hover: hover) and (pointer: fine) { .sitemap__product:hover .sitemap__product-name, .sitemap__group a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.sitemap__groups { display: grid; gap: 2.25rem 2rem; margin-top: 2.5rem; padding-bottom: 1rem; }
@media (min-width: 40em) { .sitemap__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .sitemap__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sitemap__group { padding-top: 1.25rem; border-top: 1px solid #e6e6e6; }
.sitemap__group li + li { margin-top: 0.875rem; }
.sitemap__group a { font-size: 0.9375rem; color: var(--ink); }

/* ---------- opinie: ciemny pas ---------- */
.opinions {
  position: relative; margin-top: var(--section);
  padding-block: 2rem 1rem; color: #fff; text-align: center;
  background: #3b3b3b;
}
.opinions__bg { position: absolute; inset: 0; overflow: hidden; }
.opinions__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.opinions__bg::before {  /* maska: ciemniej tylko pod tekstem, boki jasne – zdjęcie widać, tekst czytelny */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 60% 85% at 50% 52%, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.42) 55%, rgb(0 0 0 / 0.12));
}
.opinions__bg::after {  /* ziarno filmowe: szum SVG, bez dodatkowego pliku */
  content: ""; position: absolute; inset: -40px; z-index: 2; opacity: 0.22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.opinions .section-title span { --line-color: #fff; }
.opinions__inner { position: relative; }
.opinions__stage { position: relative; display: grid; margin: 1.5rem auto 0; max-width: 44rem; padding-inline: 2.75rem; }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.quote.is-active { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }
.quote blockquote { text-shadow: 0 1px 10px rgb(0 0 0 / 0.45); font-size: 0.9375rem; font-style: italic; font-weight: 300; letter-spacing: 0.4px; line-height: 1.8; }
.quote figcaption { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 300; }
.opinions__arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: #fff;
  transition: transform 180ms ease;
}
.opinions__arrow--prev { left: -0.5rem; }
.opinions__arrow--next { right: -0.5rem; }
.opinions .dots { justify-content: center; margin-top: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .opinions__arrow--prev:hover { transform: translateX(-4px); }
  .opinions__arrow--next:hover { transform: translateX(4px); }
}
@media (min-width: 64em) {
  .opinions { min-height: 21.5625rem; padding-block: 2rem 0.9rem; }  /* 345 px */
  .opinions__stage { position: static; padding-inline: 0; margin-top: 2.3rem; }
  .opinions__inner { max-width: calc(var(--container) + 2 * var(--pad)); }
  .opinions__arrow--prev { left: calc(var(--pad) + 3.4rem); top: 8.75rem; }
  .opinions__arrow--next { right: calc(var(--pad) + 3.4rem); top: 8.75rem; }
  .opinions .dots { margin-top: 1.75rem; }
  .newsletter { padding-top: 4.3rem; }
}

/* ---------- karta produktu (wzór: karta na muart.pl): zdjęcie z miniaturami z lewej, zakup z prawej, zakładki niżej ----------
   Typografia jak w oryginale: nazwa i cena Archivo Narrow 22 px (cena kursywą), opis Roboto 16 px. */
.pdp { display: grid; gap: 1.75rem; padding-top: 0.75rem; }
@media (min-width: 64em) {
  .pdp { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: 3.75rem; align-items: start; padding-top: 1.5rem; }
  .pdp__info { position: sticky; top: calc(var(--header-h, 0px) + 1.5rem); padding-top: 1.75rem; }
}
.pdp__info { max-width: 34rem; }
/* powrót do sklepu: stan aktywny jak w zakładkach karty (kreska 2 px), strzałka odsuwa się w stronę, w którą prowadzi */
.pdp-back {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin-block: -0.5rem -1.25rem;
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.pdp-back .icon { width: 1.25rem; height: 1.25rem; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.pdp-back span { position: relative; }
.pdp-back span::after { content: ""; position: absolute; left: 0; right: 2px; bottom: -0.3rem; height: 2px; background: var(--dark); transform: scaleX(0); transform-origin: right; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.pdp-back:active .icon { transform: translateX(-4px); }
.pdp-back:active span::after, .pdp-back:focus-visible span::after { transform: scaleX(1); transform-origin: left; }
.pdp-back:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pdp-back:hover .icon { transform: translateX(-4px); }
  .pdp-back:hover span::after { transform: scaleX(1); transform-origin: left; }
}
@media (min-width: 64em) { .pdp-back { margin-block: -0.75rem -3rem; } }
@media (prefers-reduced-motion: reduce) { .pdp-back .icon, .pdp-back span::after { transition: none; } }

.pdp__main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); touch-action: pan-y; }
/* zasłona z poprzednim zdjęciem: muart.js odsuwa ją w stronę nawigacji, odsłaniając nowe */
.pdp__veil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* przesuwana kreska aktywnego elementu (muart.js: slideBar) — miniatury i zakładki; zastępuje kreskę każdego elementu */
[data-gallery], [data-tabs] { position: relative; }
.slide-bar { position: absolute; top: 0; left: 0; z-index: 1; height: 2px; background: var(--dark); pointer-events: none; }
.slide-bar.is-ready { transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), width 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.has-slide-bar .pdp__thumb::after, .has-slide-bar .pdp-tabs__tab::after { display: none; }
@media (prefers-reduced-motion: reduce) { .slide-bar.is-ready { transition: none; } }
.pdp__main img, .pdp__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp__main [hidden] { display: none; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.pdp__thumb { position: relative; display: block; width: 100%; padding-bottom: 0.4375rem; }
.pdp__thumb picture { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.pdp__thumb img, .pdp__thumb video { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 220ms ease; }
.pdp__thumb[aria-current="true"] video { opacity: 1; }
/* miniatura filmu: znak „odtwórz” na środku */
.pdp__play { position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.25rem; translate: -50% -50%; color: #fff; fill: #fff;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5)); pointer-events: none; }
.pdp__thumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dark);
  transform: scaleX(0); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp__thumb[aria-current="true"] img { opacity: 1; }
.pdp__thumb[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .pdp__thumb:hover img { opacity: 1; } }

.pdp__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; color: #373737; }
.pdp__price { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.375rem; font-style: italic; line-height: 1.2; color: var(--ink); }
.pdp__tax { margin-top: 0.125rem; font-family: var(--font-display); font-size: 0.8125rem; font-style: italic; color: #707070; }
/* promocja: cena regularna przekreślona + najniższa cena z 30 dni (Omnibus) — na karcie, w sklepie i na stronie głównej */
.pdp__was { margin-right: 0.35em; color: #707070; font-size: 0.85em; text-decoration-thickness: 1px; }
.pdp__omnibus { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.4; color: #707070; }
.pdp__lead { margin-top: 2rem; font-size: 1rem; line-height: 1.45; color: var(--muted); }
.pdp__lead strong { font-weight: 700; color: #555; }

.pdp__guide-btn {
  display: inline-flex; align-items: center; height: 2.375rem; margin-top: 2.25rem; padding: 0 1rem;
  border: 2px solid var(--ink); font-size: 0.8125rem; color: var(--muted);
  transition: background-color 180ms ease, color 180ms ease;
}
.pdp__guide-btn:hover { background: var(--ink); color: #fff; }

.pdp__buy { display: flex; gap: 2.25rem; margin-top: 1rem; }
.qty__input {
  width: 3.75rem; height: 2.875rem; border: 1px solid var(--dark); border-radius: 0; background: var(--bg);
  text-align: center; font-size: 0.9375rem; color: var(--dark); -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add { min-height: 2.875rem; padding: 0 1.5rem; font-size: 0.9375rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.pdp__stock { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); }
.pdp__stock .icon { width: 0.9rem; height: 0.9rem; stroke-width: 1.8; color: var(--ink); }
.pdp__stock.is-out { color: #8c2f1f; }

.pdp__perks { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid #e6e6e6; font-size: 0.875rem; color: var(--muted); }
.pdp__perks li { display: flex; align-items: center; gap: 0.75rem; }
.pdp__perks li + li { margin-top: 0.5rem; }
.pdp__perks .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--ink); }
.pdp__quality { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #e6e6e6; }
.pdp__quality li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; line-height: 1.35; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); }
.pdp__quality img { width: auto; height: 2.5rem; }
.pdp__quality li:last-child img { height: 2rem; }

/* zakładki: jasny pas jak na muart.pl; bez JS widać wszystkie panele z nagłówkami */
.pdp-tabs { margin-top: 3.5rem; padding: 2rem 1rem 2.5rem; background: #fafafa; }
@media (min-width: 64em) { .pdp-tabs { margin-top: 5rem; padding: 3.5rem 4rem 4rem; } }
/* akcent jak na pozostałych stronach: puder wysypany na górną krawędź pasa (z dala od ceny i przycisku zakupu) */
.pdp-tabs::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: calc(100% - 1.25rem); width: clamp(7rem, 12vw, 10rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
/* telefon: równa siatka 2×2 (każda zakładka to pole z linią pod spodem); od tabletu: rząd jak na muart.pl */
.pdp-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp-tabs__list .pdp-tabs__tab {
  display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.5rem;
  border-bottom: 1px solid #e2e2e2; font-size: 0.8125rem; letter-spacing: 1px; text-align: center; white-space: normal;
}
@media (min-width: 48em) {
  .pdp-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.5rem; }
  .pdp-tabs__list .pdp-tabs__tab { min-height: 0; padding: 0.75rem 0.875rem; border-bottom: 0; font-size: 0.9375rem; letter-spacing: 1.5px; white-space: nowrap; }
}
html:not(.js) .pdp-tabs__list { display: none; }
.pdp-tabs__tab {
  position: relative; padding: 0.75rem 0.875rem; font-size: 0.9375rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text); white-space: nowrap; transition: color 180ms ease;
}
.pdp-tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dark);
  transform: scaleX(0); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-tabs__tab[aria-selected="true"] { color: var(--ink); }
.pdp-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.pdp-tabs__panel { max-width: 69rem; margin-inline: auto; padding-top: 2rem; }
.pdp-tabs__title { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.js .pdp-tabs__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .pdp-tabs__panel + .pdp-tabs__panel { margin-top: 1.5rem; }
.pdp-features { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.pdp-features li::before { content: "•"; margin-right: 0.4rem; }
.rte { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.rte p + p { margin-top: 1.375rem; }
.rte strong { font-weight: 700; color: #555; }
.rte ul { list-style: disc; }

/* okno (natywny <dialog data-modal>): Esc, przycisk i klik w tło zamykają */
.modal {
  width: min(46rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0;
  border: 0; background: #fefefe; color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.modal--wide { width: min(81rem, calc(100vw - 2rem)); }
.modal::backdrop { background: rgb(0 0 0 / 0.7); }
html:has(.modal[open]) { overflow: hidden; }
/* zamykanie: napis „ZAMKNIJ” wersalikami z rozstrzeleniem (jak „MENU”) + cienki krzyżyk, który obraca się po najechaniu */
.modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.75rem; background: #fefefe;
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
  transition: color 180ms ease;
}
.modal__close .icon { width: 0.875rem; height: 0.875rem; stroke-width: 1.5; color: var(--ink); transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.modal__close:hover, .modal__close:focus-visible { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .modal__close:hover .icon { transform: rotate(90deg); } }
/* okno ze stroną treści (partials/page-modal: regulamin, polityka przy zgodach): duże, pasek z tytułem przyklejony u góry,
   stała wysokość (bez skoku po wczytaniu); telefon — cały ekran */
.modal--page { width: min(64rem, calc(100vw - 2rem)); height: calc(100dvh - 2rem); }
@media (max-width: 47.99em) { .modal--page { width: 100vw; height: 100dvh; max-height: 100dvh; } }
.modal__bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem; border-bottom: 1px solid #e6e6e6; background: #fefefe;
}
.modal__title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; color: #414141; }
@media (min-width: 48em) { .modal__title { font-size: 1.125rem; letter-spacing: 2px; } }
.modal__page [id] { scroll-margin-top: 5rem; }  /* kotwice ze spisu treści nie chowają nagłówka pod paskiem */
.modal__bar .modal__close { position: static; flex: none; }
.modal__page { padding: 1.5rem 1.25rem 3rem; }
@media (min-width: 48em) { .modal__page { padding: 2rem 3rem 3.5rem; } }
.modal__page h1 { display: none; }  /* tytuł dokumentu jest w pasku */
.modal__page:empty::before { content: ""; display: block; height: 12rem; background: linear-gradient(90deg, #f5f5f3, #fafaf9, #f5f5f3); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 380ms cubic-bezier(0.16, 1, 0.3, 1); }
  .modal[open]::backdrop { animation: backdrop-in 300ms ease; }
  .modal.is-closing { animation: modal-out 200ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
  .modal.is-closing::backdrop { animation: backdrop-out 200ms ease forwards; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(1rem); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(0.5rem); } }

/* tabela rozmiarów: plansza z lewej, zakładki i tabela z prawej (na telefonie najpierw tabela) */
.size-guide { display: grid; gap: 1.5rem; padding: 3.5rem 1rem 1.5rem; }
@media (min-width: 48em) { .size-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding: 3rem 2rem 2rem 3rem; } }
.size-guide > :only-child { grid-column: 1 / -1; }
.size-guide__board { order: 1; }
@media (min-width: 48em) { .size-guide__board { order: 0; } }
.size-guide__board img { width: 100%; max-width: 40rem; margin-inline: auto; }
.size-guide .pdp-tabs__list .pdp-tabs__tab { font-size: 1rem; letter-spacing: 0; text-transform: none; }
.size-guide__panel { padding-top: 2rem; font-size: 1rem; line-height: 1.5; color: var(--muted); overflow-x: auto; }
.size-guide__panel p { margin-top: 2.5rem; }
.size-guide__panel > .rte:first-child > :first-child { margin-top: 0; }
.size-guide__panel ul, .size-guide__panel ol { margin-top: 1rem; padding-left: 1.25rem; }
.size-guide__panel ol { list-style: decimal; }
.size-guide__panel h2, .size-guide__panel h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.size-guide__panel h2 + p, .size-guide__panel h3 + p { margin-top: 1rem; }
.size-table { width: 100%; border-collapse: collapse; border: 1px solid #e6e6e6; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.size-table thead th { padding: 0.75rem 1rem; background: var(--dark); color: #fff; font-weight: 500; text-align: center; }
.size-table .size-table__title th { text-align: left; border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.size-table tbody th, .size-table td { padding: 0.75rem 1rem; border-top: 1px solid #e6e6e6; color: var(--muted); text-align: center; }
.size-table tbody th { text-align: left; font-weight: 700; color: var(--ink); }

/* ---------- strony treści (O nas, regulamin...): HTML z panelu w typografii jak na muart.pl ----------
   nagłówki Archivo Narrow, tekst Roboto 16/24; wyrównanie do lewej (oryginał justował — rozjeżdżało wyrazy na telefonie) */
.cms { padding-block: 1rem 3rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
@media (min-width: 64em) { .cms { padding-top: 1.5rem; } }
.cms h1, .cms h2, .cms h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; color: #555; text-wrap: balance; }
.cms h1 { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem); }
.cms h2 { margin-block: 1.25rem; font-size: 1.5rem; }
.cms h3 { margin-block: 1.125rem; font-size: 1.17rem; }
.cms p { margin-bottom: 1.5rem; }
.cms strong { font-weight: 700; color: #555; }
.cms img { max-width: 100%; }
.cms a { text-decoration: underline; text-underline-offset: 3px; }
.cms ul { margin-bottom: 1.5rem; padding-left: 1.25rem; list-style: disc; }
.cms__title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: #555; }

/* ---------- kontakt (wzór: muart.pl/kontakt): zdjęcie + formularz, niżej dane firmy ---------- */
.contact { display: grid; grid-template-areas: "img" "title" "form"; gap: 1.75rem; padding-top: 1rem; }
.contact__img { grid-area: img; position: relative; }
.contact__title { grid-area: title; }
.contact__form { grid-area: form; }
.contact__img img { width: 100%; aspect-ratio: 623 / 424; object-fit: cover; }
/* komputer: tytuł nad formularzem, zdjęcie od pierwszego pola do dołu przycisku (wysokość wyznacza formularz) */
@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: ". title" "img form"; gap: 2.5rem 1.25rem; padding-top: 1.75rem; }
  .contact__img img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
.contact__title { font-family: var(--font-display); font-size: 1.5625rem; font-weight: 400; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; }

/* przyciski w treści stron (HTML z panelu): bez podkreślenia linków .cms; --ghost = drugi, obrysowany */
.cms a.btn { text-decoration: none; color: #fff; }
.cms a.btn--ghost, .btn.btn--ghost { border: 1px solid var(--dark); background: none; color: var(--dark); }
@media (hover: hover) and (pointer: fine) { .cms a.btn--ghost:hover, .btn.btn--ghost:hover { background: var(--dark); color: #fff; } }

/* ---------- strona Bezpieczeństwo (HTML z panelu, migracja 020): klasy .security__* ----------
   Jasne płaszczyzny #f5f5f3 i puder (jak toasty i koszyk) zamiast ramek; na komputerze nagłówek sekcji obok tekstu. */
/* nagłówek wspólny ze stronami zasad (.legal__hero — regulamin, polityka prywatności, dostawy, zwroty; migracja 023) */
.security__hero, .legal__hero { position: relative; padding: 7rem 1.5rem 2rem; background: #f5f5f3; }
.security__hero { margin-bottom: 3rem; }
.security__hero::after, .legal__hero::after {
  content: ""; position: absolute; top: -0.25rem; right: -0.5rem; width: 11rem; aspect-ratio: 440 / 326;
  background: url("../img/cart-puder.webp") center / contain no-repeat;
}
.cms .security__hero h1, .cms .legal__hero h1 { margin: 0 0 1.25rem; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); color: #414141; }
.cms .security__hero p { max-width: 36rem; margin-bottom: 0; }
.cms .legal__hero > :last-child { margin-bottom: 0; }
@media (min-width: 40em) {
  .security__hero, .legal__hero { padding: clamp(2rem, 5vw, 4rem); padding-right: clamp(14rem, 30vw, 26rem); }
  .security__hero::after, .legal__hero::after { top: 50%; right: 0; width: clamp(12rem, 26vw, 24rem); translate: 0 -50%; }
}
/* dokument prawny w czytelnym układzie (.legal — polityka prywatności, migracja 024): spis treści, numer tylko przy sekcji,
   tabele „cel | podstawa”, listy w dwóch kolumnach; na telefonie wiersz tabeli to blok z etykietą (data-label) */
.legal__intro { margin-bottom: 2.5rem; }
.cms .legal__meta { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
.legal__meta span { padding: 0.5rem 0.875rem; background: #fff; font-size: 0.9375rem; }
.legal__toc { margin-bottom: 3rem; }
.cms .legal__toc h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.cms .legal__toc ol { margin: 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: 3rem; }
.legal__toc li, .legal__cols li { break-inside: avoid; }
.cms .legal__toc a { display: inline-block; padding-block: 0.3rem; color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cms .legal__toc a:hover { color: #000; text-decoration: underline; } }
.legal__section { margin-bottom: 3.5rem; scroll-margin-top: 1rem; }  /* sekcje oddziela odstęp i nagłówek, nie linia */
.cms .legal__section h2 { margin-top: 0; }
.cms .legal__section h3 { margin-top: 2rem; }
.cms .legal__section > p, .cms .legal__section > ul:not(.legal__cols) { max-width: 50rem; }  /* wiersz do ~90 znaków */
.cms .legal__section li + li { margin-top: 0.375rem; }
.legal__split { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 48em) { .legal__split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.legal__box { padding: 1.75rem; background: #f5f5f3; }
.cms .legal__box h3 { margin-top: 0; }
.cms .legal__box > :last-child, .cms .legal__split > div > :last-child, .cms .legal__section > :last-child { margin-bottom: 0; }
.legal__cards { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 40em) { .legal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .legal__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.legal__cards > div { padding: 1.5rem; border: 1px solid #dddddd; }
.cms .legal__cards h3 { margin-top: 0; }
.cms .legal__cards ul { margin-bottom: 0; }
.cms .legal__cols { columns: 2 18rem; column-gap: 3rem; }
.legal__table { width: 100%; margin-block: 1.5rem; border-collapse: collapse; }
.legal__table th { padding: 0 1.5rem 0.75rem 0; text-align: left; font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: #414141; }
.legal__table td { padding: 1rem 1.5rem 1rem 0; vertical-align: top; }
.legal__table tbody tr + tr td { border-top: 1px solid #e6e6e6; }  /* linie tylko między wierszami */
.legal__table td:first-child { width: 58%; }
.legal__table td strong { display: block; margin-bottom: 0.25rem; }
@media (max-width: 47.99em) {
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal__table tr { display: block; padding-block: 1rem; }
  .legal__table tbody tr + tr { border-top: 1px solid #e6e6e6; }
  .legal__table tbody tr + tr td { border-top: 0; }
  .legal__table td, .legal__table td:first-child { display: block; width: auto; padding: 0; border: 0; }
  .legal__table td + td { margin-top: 0.5rem; }
  .legal__table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: #555; }
}
/* jasne ramki w treści zasad: mały puder wysypany na górną krawędź */
.legal__note { position: relative; }
.legal__note::before {
  content: ""; position: absolute; right: 1rem; bottom: calc(100% - 1rem); width: 5.5rem; aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
/* dokumenty Przelewy24 w oknie przy płatności (P24DocumentFormatter): numery punktów są częścią treści („ust. 15”), nie ozdobą */
.cms .legal--doc .legal__meta:first-child { margin-top: 0; }  /* regulamin nie ma tytułu nad źródłem */
.legal--doc .legal__section ol, .legal--doc .legal__section ul { max-width: 50rem; margin-bottom: 1.5rem; padding-left: 1.75rem; }
.legal--doc .legal__section ol { list-style: decimal; }
.legal--doc .legal__section ol[type="a"] { list-style: lower-alpha; }
.legal--doc .legal__section ul { list-style: disc; }
.legal--doc .legal__section ol:has(+ ol) { margin-bottom: 0.375rem; }  /* P24 dzieli jedną listę na kilka (start=11, 17…): czytają się jak jedna */
.legal--doc .legal__section li > ol, .legal--doc .legal__section li > ul, .legal--doc .legal__section ol > ol, .legal--doc .legal__section li > div > ul { margin-block: 0.5rem 0.75rem; }
.legal--doc li::marker { color: #555; font-variant-numeric: tabular-nums; }
.cms .legal--doc li p { margin-bottom: 0.75rem; }
.cms .legal--doc li > :last-child { margin-bottom: 0; }
.legal--doc .legal__box { max-width: 50rem; margin-bottom: 1.5rem; }
.cms .legal--doc .legal__box p { margin-bottom: 0.25rem; }
.legal__notes { max-width: 50rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; font-size: 0.875rem; }
.cms .legal__notes p { margin-bottom: 0.75rem; }
.security__cards { display: grid; gap: 1rem; margin-bottom: 4rem; }
@media (min-width: 40em) { .security__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* 2×2, bez osieroconej karty */
@media (min-width: 64em) { .security__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* telefon: ikona obok tekstu — cztery karty nie rozciągają strony */
.security__card { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem; border: 1px solid #dddddd; }
.security__icon, .dash__icon { grid-row: span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #f5f5f3; color: var(--dark); }
.security__icon svg, .dash__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cms .security__card h3 { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; color: #414141; }
.cms .security__card p { margin: 0; }
@media (min-width: 40em) {
  .security__card { display: block; padding: 1.75rem; }
  .security__icon { margin-bottom: 0.5rem; }
}
.security__text { margin-bottom: 3rem; padding-top: 2.25rem; border-top: 1px solid #dddddd; }
.cms .security__text h2 { margin-top: 0; }
@media (min-width: 64em) {
  .security__text { display: grid; grid-template-columns: 17rem minmax(0, 46rem); column-gap: 4rem; }
  .cms .security__text h2 { grid-row: 1 / span 9; align-self: start; position: sticky; top: calc(var(--header-h, 0px) + 1.5rem); margin-bottom: 0; }
  .security__text p { grid-column: 2; }
}
.security__end { position: relative; margin-top: 4rem; padding: clamp(2rem, 4vw, 3.5rem); background: #f5f5f3; }
.security__end::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: calc(100% - 1.25rem); width: clamp(7rem, 12vw, 10rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat;
}
.cms .security__end h2 { margin-top: 0; }
.security__end p { max-width: 46rem; }
.cms .security__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }

/* ---------- formularz odstąpienia od umowy: wersja online PDF-u (adresat na szarym tle, etykiety wersalikami jak w PDF) ---------- */
.withdrawal { max-width: calc(54rem + 2 * var(--pad)); padding-block: 1rem 3rem; color: var(--muted); }
@media (min-width: 64em) { .withdrawal { padding-top: 1.75rem; } }
.withdrawal__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.withdrawal__title { margin-top: 0.75rem; font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem); font-weight: 400; line-height: 1.2; color: #555; }
.withdrawal__lead { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; }
.withdrawal__lead a, .wform__info a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.withdrawal__to { margin-block: 1.75rem; padding: 1.25rem 1.5rem; background: #f5f5f3; font-size: 0.9375rem; line-height: 1.6; }
.withdrawal__to h2 { margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.withdrawal__to strong { font-size: 1rem; color: var(--ink); }
.wform { position: relative; display: grid; gap: 1.25rem 1rem; }
@media (min-width: 40em) { .wform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wform__group--full, .wform__statement, .wform__submit { grid-column: 1 / -1; } }
.wform fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.wform__statement { font-size: 0.9375rem; line-height: 1.6; color: var(--ink); }
.wform__group { display: grid; gap: 0.5rem; align-content: start; }
.wform__label { padding: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--soft); }
.wform__label span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.wform .field__error { margin-top: 0; }
/* odstąpienie: wiersz „produkt ▾ | ilość szt. | ×” + „Dodaj kolejny produkt” (muart.js, [data-items]) */
.witem { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 2.25rem; gap: 0.5rem; align-items: center; }
@media (min-width: 40em) { .witem { grid-template-columns: minmax(0, 1fr) 6.5rem 2.75rem; } }
.witem .field--select select { padding: 0 2.25rem 0 1rem; }  /* telefon: cała nazwa produktu mieści się w liście */
.witem .field--select::after { right: 0.875rem; }
.field.witem__qty input { padding: 0 2rem 0 0.5rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.witem__qty input::-webkit-inner-spin-button, .witem__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.witem__qty span { position: absolute; right: 0.875rem; font-size: 0.8125rem; color: var(--soft); pointer-events: none; }
.witem__remove { display: grid; place-items: center; width: 100%; height: 3.25rem; color: var(--muted); transition: color 180ms ease; }
.witem__remove .icon { width: 1rem; height: 1rem; }
.witem__remove:hover, .witem__remove:focus-visible { color: var(--ink); }
.witem:only-of-type .witem__remove { visibility: hidden; }  /* jedynego wiersza się nie usuwa */
.witem__add { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.875rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.witem__add[hidden] { display: none; }
.witem__add .icon { width: 1rem; height: 1rem; }
.wform__address { display: grid; gap: 0.75rem; }
/* reklamacja: wybór zamówienia (lista + „Wybierz”, z JS zmiana listy wysyła formularz) i wiersze „produkt | sztuki / z zamówienia” */
.wform--pick { margin-bottom: 1.5rem; }
.wform__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.wform__pick .btn { height: 3.25rem; }
.wform__pick .btn[hidden] { display: none; }
.citem { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.75rem; align-items: center; }
.citem + .citem { margin-top: 0.5rem; }
.citem__name { font-size: 0.9375rem; color: var(--ink); }
.cphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 0.5rem; }
.cphotos[hidden] { display: none; }
.cphotos li { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #f5f5f3; font-size: 0.6875rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.cphotos img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 40em) { .wform__address { grid-template-columns: 9rem minmax(0, 1fr); } .wform__street { grid-column: 1 / -1; } }
.wform__address legend { margin-bottom: 0.5rem; }
.wform__address > div { display: grid; gap: 0.5rem; align-content: start; }
.wform__hint { font-size: 0.8125rem; line-height: 1.5; color: var(--soft); }
.wform__info { font-size: 0.75rem; line-height: 1.5; color: var(--soft); }
.wform .wform__submit { min-height: 2.75rem; padding: 0 1.75rem; }

/* ---------- koszyk: strona /koszyk i panel boczny — jeden widok (cart/content), układ od szerokości pojemnika ----------
   wąsko (telefon, panel): lista, pod nią podsumowanie; szeroko: lista + przyklejone podsumowanie po prawej */
.cart-page { padding-block: 1rem 4rem; }
@media (min-width: 64em) { .cart-page { padding-top: 1.75rem; } }
.cart-page__title {
  margin-bottom: 1.5rem; font-family: var(--font-display); font-size: clamp(1.5625rem, 1.3rem + 0.9vw, 2rem); font-weight: 400;
  line-height: 1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141;
}
.cart-page__title span { color: var(--soft); }
.cart { container-type: inline-size; font-variant-numeric: tabular-nums; }
.cart__layout { display: grid; gap: 2rem; }
@container (min-width: 50rem) {
  .cart__layout { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 3.5rem; align-items: start; }
  .cart__summary { position: sticky; top: calc(var(--header-h, 0px) + 1.5rem); }
  .cart .cart-line { grid-template-columns: 8.75rem minmax(0, 1fr); column-gap: 1.75rem; padding-block: 1.75rem; }
  .cart .cart-line__name { font-size: 1.1875rem; }
  .cart .cart-line__del { top: 1.5rem; }
  .cart .cart-line__total { bottom: 1.75rem; font-size: 1.1875rem; }
}

/* komunikat po akcji (dodano, kod, limit sztuk) */

/* pozycja: zdjęcie 4:5 | nazwa, rozmiar, ilość | wartość; wąsko: „Usuń” w prawym górnym rogu, wartość na wysokości ilości */
.cart__items { border-top: 1px solid #dedede; }
.cart-line { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid #dedede; }
.cart-line__del { position: absolute; top: 1rem; right: 0; }
.cart-line__total { position: absolute; right: 0; bottom: 1.25rem; line-height: 2.5rem; }
.cart-line__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f5f5f3; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.cart-line__body { display: flex; flex-direction: column; min-width: 0; }
.cart-line__name { padding-right: 3rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.cart-line__meta { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--soft); }
.cart-line__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: auto; padding-top: 1rem; }
.cart-line__total { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.5px; color: var(--ink); white-space: nowrap; }
.cart-line__remove { padding: 0.25rem 0; background: none; border: 0; font-size: 0.8125rem; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .cart-line__img:hover img { transform: scale(1.04); }
  .cart-line__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .cart-line__remove:hover { color: var(--ink); }
}

/* ilość: − [n] + */
.stepper { display: inline-flex; align-items: stretch; height: 2.5rem; border: 1px solid #d1d1d1; background: #fff; }
.stepper__btn { display: grid; place-items: center; width: 2.5rem; background: none; border: 0; color: var(--ink); cursor: pointer; transition: background-color 160ms ease; }
.stepper__btn .icon { width: 0.875rem; height: 0.875rem; }
.stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper__btn:focus-visible, .stepper__input:focus-visible { outline: 2px solid var(--dark); outline-offset: -2px; }
.stepper__input { width: 2.75rem; padding: 0; border: 0; border-inline: 1px solid #e6e6e6; background: none; text-align: center; font-size: 0.9375rem; color: var(--ink); appearance: textfield; -moz-appearance: textfield; }
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
@media (hover: hover) and (pointer: fine) { .stepper__btn:not(:disabled):hover { background: #f5f5f3; } }

/* podsumowanie */
.cart__summary { padding: 1.5rem; background: #f5f5f3; }
@container (min-width: 50rem) { .cart__summary { padding: 2rem; } }
.cart__summary-title { margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.cart__rows { display: grid; gap: 0.875rem; font-size: 0.9375rem; color: var(--muted); }
.cart__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cart__rows dt span { color: var(--soft); }
.cart__rows dt small { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--soft); }
.cart__rows dd { color: var(--ink); white-space: nowrap; }
.cart__row--discount dd { color: #24502c; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #d6d6d4; }
.cart__total span { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.cart__total strong { font-family: var(--font-display); font-size: 1.875rem; font-weight: 400; line-height: 1; color: var(--ink); }
.cart__problem { margin-top: 0.75rem; font-size: 0.8125rem; color: #a3311d; } /* jak .field__error */
.cart__vat { margin-top: 0.375rem; text-align: right; font-size: 0.75rem; color: var(--soft); }
.cart .cart__checkout { width: 100%; gap: 0.75rem; min-height: 3.25rem; margin-top: 1.5rem; font-size: 0.875rem; letter-spacing: 2px; }
.checkout__submit .icon, .cart__checkout .icon { width: 1.125rem; height: 1.125rem; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) { .cart__checkout:hover .icon { transform: translateX(4px); } }
.cart .cart__view { width: 100%; min-height: 2.75rem; margin-top: 0.625rem; }
.cart__perks { display: grid; gap: 0.625rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #d6d6d4; font-size: 0.8125rem; color: var(--muted); }
.cart__perks li { display: flex; align-items: center; gap: 0.625rem; }
.cart__perks .icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--ink); }

/* kod rabatowy */
.cart-code { margin-top: 1.25rem; font-size: 0.875rem; }
.cart-code summary { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; color: var(--ink); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.cart-code summary::-webkit-details-marker { display: none; }
.cart-code summary::after { content: ""; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }
.cart-code[open] summary::after { transform: translateY(1px) rotate(225deg); }
.cart-code__form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.cart-code__input { flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.875rem; border: 1px solid #d1d1d1; background: #fff; font-size: 0.9375rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.cart-code__input::placeholder { letter-spacing: 0; text-transform: none; color: #6a6a6a; }
.cart-code__input:focus-visible { outline: none; border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.cart .cart-code__btn { min-height: 2.75rem; }
.cart-code--applied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; color: var(--muted); }
.cart-code__chip { display: inline-block; margin-right: 0.5rem; padding: 0.25rem 0.5rem; border: 1px dashed var(--dark); font-size: 0.75rem; letter-spacing: 1.5px; color: var(--ink); }

/* pusty koszyk */
.cart-empty { display: grid; justify-items: center; gap: 1.25rem; padding-block: 3rem 2rem; text-align: center; }
.cart-empty__icon { width: 3rem; height: 3rem; stroke-width: 1; color: var(--soft); }
.cart-empty__title { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.cart-empty .cart-empty__btn { min-height: 2.75rem; padding: 0 1.75rem; }
.cart-page__more { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid #dedede; }
.cart-page__more-title { margin-bottom: 1.5rem; text-align: center; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.cart-page__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); justify-content: center; gap: 1.5rem 1rem; }

/* telefon: przyklejony pasek „Do zapłaty + Przejdź dalej” zamiast dolnego paska menu */
.cart-bar { display: none; }
@media (max-width: 63.99em) {
  .cart-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.75rem var(--pad) calc(0.75rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.94); border-top: 1px solid #e2e2e2;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cart-bar.is-hidden { transform: translateY(110%); }
  .cart-bar p { display: grid; gap: 0.125rem; }
  .cart-bar span { font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .cart-bar strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; line-height: 1; color: var(--ink); }
  .cart-bar .btn { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.8125rem; letter-spacing: 1.5px; }
  body:has(.cart-bar) .bottom-bar { display: none; }
  body:has(.cart-bar) .site-footer { padding-bottom: 5.5rem; }
}

/* panel boczny koszyka (<dialog>): te same animacje co menu */
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(27rem, 92vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: var(--ink);
  flex-direction: column; overflow: hidden;
}
.cart-drawer[open] { display: flex; }
.cart-drawer::backdrop { background: rgb(0 0 0 / 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
html:has(.cart-drawer[open]) { overflow: hidden; }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-inline: 1.25rem; padding: 1.5rem 0 1rem; }
.cart-drawer__head h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.cart-drawer__head .header__btn { margin-right: -0.6rem; }
.cart-drawer__body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem; }
/* panel: lista u góry, podsumowanie przy dolnej krawędzi także przy krótkiej liście */
.cart--panel, .cart--panel .cart__layout { flex: 1; display: flex; flex-direction: column; }
.cart--panel .cart__summary { margin-top: auto; }
/* akcent jak w toastach: puder wysypany na górną krawędź podsumowania. Jest w przepływie (koniec listy, dosunięty do dołu),
   więc przy długiej liście przewija się z nią i nie zasłania produktów; ujemny margines zjada odstęp (gap) i zachodzi na krawędź */
.cart--panel .cart__items { flex: 1; display: flex; flex-direction: column; }
.cart--panel .cart__items::after {
  content: ""; position: relative; z-index: 1; width: 6.5rem; aspect-ratio: 168 / 124; margin: auto 0.5rem calc(-2rem - 1.25rem) auto;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
.cart-drawer__body:empty::before { content: ""; display: block; height: 8rem; margin-top: 1rem; background: linear-gradient(90deg, #f5f5f3, #fafaf9, #f5f5f3); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.cart--panel .cart-line { grid-template-columns: 5rem minmax(0, 1fr); }
/* panel: podsumowanie przyklejone na dole, przycisk zawsze widoczny */
.cart--panel .cart__summary { position: sticky; bottom: 0; margin-inline: -1.25rem; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.06); }
.cart--panel .cart__summary-title { display: none; }
.cart--panel .cart__total { margin-top: 1rem; padding-top: 1rem; }
.cart--panel .cart__total strong { font-size: 1.5rem; }
.cart--panel .cart__checkout { margin-top: 1rem; }
/* pusty panel: duży puder (zamiast ikony torby) z napisem pośrodku, na dole szary pas z przyciskiem — jak podsumowanie pełnego koszyka */
.cart--panel .cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; }
.cart--panel .cart-empty::before {
  content: ""; width: min(13.75rem, 70%); aspect-ratio: 440 / 326; margin-top: auto;
  background: url("../img/cart-puder.webp") center / contain no-repeat;
}
.cart--panel .cart-empty__icon { display: none; }
.cart--panel .cart-empty__title { margin: 1.5rem 0 auto; }
.cart--panel .cart-empty__foot {
  align-self: stretch; margin: 2.5rem -1.25rem 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  background: #f5f5f3; box-shadow: 0 -8px 24px rgb(0 0 0 / 0.06);
}
.cart--panel .cart-empty__btn { width: 100%; min-height: 3.25rem; font-size: 0.875rem; letter-spacing: 2px; }  /* jak .cart__checkout */
@media (prefers-reduced-motion: no-preference) {
  .cart--panel .cart-empty::before { animation: swatch 900ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both; }
}

/* zapytanie w toku: kwoty przygasają, klikanie wstrzymane */
[data-cart-host].is-busy { pointer-events: none; }
[data-cart-host].is-busy :is(.cart-line__total, .cart__rows dd, .cart__total strong) { opacity: 0.35; transition: opacity 200ms ease 120ms; }

@media (prefers-reduced-motion: no-preference) {
  .cart-drawer[open] { animation: drawer-in 480ms cubic-bezier(0.16, 1, 0.3, 1); }
  .cart-drawer[open]::backdrop { animation: backdrop-in 400ms ease; }
  .cart-drawer.is-closing { animation: drawer-out 280ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
  .cart-drawer.is-closing::backdrop { animation: backdrop-out 280ms ease forwards; }
  /* kwoty po zmianie „osiadają”: z lekkiego rozmycia na miejsce */
  .is-changed { animation: settle 520ms cubic-bezier(0.16, 1, 0.3, 1); }
  .cart-line.is-leaving { animation: line-out 260ms cubic-bezier(0.55, 0, 1, 0.45) forwards; }
  .is-bump { animation: bump 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes settle { from { opacity: 0; filter: blur(6px); transform: translateY(0.3em); } }
@keyframes line-out { to { opacity: 0; transform: translateX(1.5rem); } }
@keyframes bump { 40% { transform: scale(1.35); } }
@keyframes shimmer { to { background-position: -200% 0; } }

.cform { position: relative; display: grid; gap: 1.25rem; }
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; display: flex; align-items: center; min-height: 3.25rem; border: 1px solid #d1d1d1; background: #fefefe; transition: border-color 180ms ease, box-shadow 180ms ease; }
.field:focus-within { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.field:has([aria-invalid="true"]), .input [aria-invalid="true"] { border-color: #a3311d; }
.consent:has([aria-invalid="true"]) { color: #a3311d; }
.field select, .field input, .field textarea { width: 100%; height: 3.25rem; padding: 0 1.25rem; border: 0; background: none; font-size: 0.9375rem; color: #555; }
.field select:focus-visible, .field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field ::placeholder { color: #6a6a6a; opacity: 1; }
.field--select select { appearance: none; padding-right: 3rem; cursor: pointer; }
.field--select::after { content: ""; position: absolute; right: 1.25rem; top: 50%; border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0; transform: translateY(-50%); pointer-events: none; }
.field--icon .icon { position: absolute; left: 1.25rem; top: 1.125rem; width: 1rem; height: 1rem; color: var(--muted); }
.field--icon input, .field--icon textarea { padding-left: 2.875rem; }
.field textarea { height: 6.25rem; padding-top: 0.9rem; resize: vertical; align-self: stretch; }
.field--icon:has(textarea) { align-items: flex-start; }
.field--file { gap: 1rem; padding: 0.5rem; }
.field__file-btn {
  display: inline-flex; align-items: center; flex: none; height: 2.25rem; padding: 0 1.25rem; background: var(--dark); color: #fff; cursor: pointer;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 1.5px; text-transform: uppercase; transition: background-color 180ms ease;
}
.field__file-btn:hover { background: var(--dark-hover); }
.field--file input:focus-visible + .field__file-btn { outline: 2px solid var(--dark); outline-offset: 2px; }
.field__file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: #555; }
.field__error { margin-top: -0.75rem; font-size: 0.8125rem; color: #a3311d; }
.cform__consent { font-size: 0.75rem; }
.cform .cform__submit { min-height: 2.5rem; padding: 0 1.5rem; }

.contact-info { display: grid; gap: 1.75rem; padding-block: 3.5rem 1rem; }
@media (min-width: 48em) { .contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .contact-info { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; padding-top: 8rem; } } /* tyle kolumn, ile pozycji: telefon i Instagram bywają puste */
.contact-info__item { display: flex; align-items: flex-start; gap: 1rem; }
@media (min-width: 64em) { .contact-info__item { flex-direction: column; gap: 2.25rem; } }
.contact-info .icon { flex: none; width: 2.75rem; height: 2.75rem; stroke-width: 1.1; color: var(--ink); }
.contact-info h2 { margin-bottom: 0.75rem; font-size: 1rem; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; color: #414141; }
@media (min-width: 64em) { .contact-info h2 { margin-bottom: 1.25rem; } }
.contact-info__company { margin-top: 0.75rem; }
.contact-info p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.contact-info a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404: ilustracja (puder + pędzel), nagłówek wersalikami z szerokim światłem, przycisk jak w projekcie ---------- */
.not-found { display: grid; justify-items: center; padding-block: 2.5rem 4rem; text-align: center; }
@media (min-width: 48em) { .not-found { padding-block: 4rem 6rem; } }
.not-found__art { width: min(40rem, 100%); }
.not-found__art img { width: 100%; }
.not-found__title {
  margin-top: 2rem; font-size: clamp(1.0625rem, 0.8rem + 1.2vw, 1.625rem); font-weight: 400; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
.not-found__text { margin-top: 1.5rem; font-size: 1rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--text); }
.not-found .not-found__btn { justify-self: center; min-height: 3.25rem; margin-top: 2.25rem; padding: 0 3rem; font-size: 0.9375rem; letter-spacing: 2px; }
.not-found .not-found__btn:hover { background: var(--dark-hover); }

/* ---------- strona komunikatu (błąd, „w przygotowaniu”); strony treści: etap 3, układ jak na muart.pl ---------- */
.notice { padding-block: var(--section); text-align: center; }
.notice p { max-width: 32rem; margin: 1.25rem auto 0; }
.notice .btn { margin-top: 1.75rem; }
.notice pre { max-width: 100%; margin-top: 2rem; padding: 1rem; overflow-x: auto; text-align: left; font-size: 0.75rem; background: #f4f4f4; }

/* ---------- newsletter ---------- */
/* podstrony: newsletter i stopka na jasnym pasie (odcień bloku „Piękno jest w detalach”), żeby strona nie była cała biała */
.site-footer--tint { margin-top: var(--section); background: #f5f5f3; }
.newsletter { padding-top: 3rem; text-align: center; }
.newsletter .section-title span { padding-bottom: 0; letter-spacing: 4px; }
.newsletter .section-title span::after { display: none; }
.newsletter__form {
  position: relative; width: min(19.9375rem, 100%); margin: 1.5rem auto 0;  /* 319 px */
  border-bottom: 1px solid var(--line);
}
.newsletter__form input {
  width: 100%; height: 3.25rem; padding: 0 3rem 0 1.25rem; border: 0; background: transparent;
  font-size: 1.125rem; color: var(--ink);
}
.newsletter__form input::placeholder { color: var(--ink); opacity: 1; }
/* pod polem: zapis z potwierdzeniem w e-mailu (double opt-in) + polityka prywatności */
.newsletter__note { width: min(19.9375rem, 100%); margin: 0.625rem auto 0; font-size: 0.75rem; line-height: 1.5; color: var(--soft); }
.newsletter__note a { color: var(--soft); text-decoration: underline; text-underline-offset: 2px; }
.btn.newsletter-page__btn { width: 100%; }
.newsletter__form button { position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%; display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; transition: transform 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .newsletter__form button:hover { transform: translateX(4px); }
}

/* ---------- stopka: 5 kolumn ---------- */
.footer { padding-block: 2.75rem 1.75rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.footer__col h2 {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; line-height: 1.5rem; color: var(--ink);
  margin-bottom: 0.5rem;
}
.footer__col a, .footer__col li { font-size: 0.8125rem; letter-spacing: 0.5px; color: var(--text); }
.footer__col li a { display: inline-block; line-height: 2.03rem; }
.footer__contact, .footer__form { grid-column: 1 / -1; }
.footer__contact ul { display: grid; gap: 0.6rem; margin-top: 1rem; }
.footer__contact li a { display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1.4; letter-spacing: 0.1px; }
.footer__contact .icon { width: 1.0625rem; height: 1.0625rem; }

.contact-form { display: grid; gap: 0.9rem; }
.input { position: relative; }
.input .icon { position: absolute; left: 1rem; top: 0.75rem; width: 0.8rem; height: 0.8rem; color: var(--muted); }
.input input, .input textarea {
  width: 100%; padding: 0.45rem 0.75rem 0.45rem 2.2rem;
  border: 1px solid var(--field-line); border-radius: 3px; background: #fff;
  font-size: 1rem; color: var(--ink);  /* min. 16 px: iOS nie przybliża pola */
}
.input input { height: 2.375rem; }
.input textarea { height: 4.6875rem; resize: vertical; }
.input ::placeholder { color: var(--muted); }
/* stopka na jasnym tle (podstrony): pola „wtopione” w tło — półprzezroczyste, sama linia u dołu jak w newsletterze;
   przy fokusie bieleją i linia ciemnieje */
.site-footer--tint .input input, .site-footer--tint .input textarea {
  border: 0; border-bottom: 1px solid #cfcfca; border-radius: 0; background: rgb(255 255 255 / 0.45);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.site-footer--tint .input input:focus, .site-footer--tint .input textarea:focus { background: #fff; border-bottom-color: var(--ink); }
.site-footer--tint .input [aria-invalid="true"] { border-bottom-color: #a3311d; }
/* każda stopka (też biała na stronie głównej i karcie produktu): mały puder nad formularzem */
.footer__form { position: relative; }
.footer__form::before {
  content: ""; position: absolute; top: -1.75rem; right: 0; width: 5.5rem; aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.75rem; line-height: 1.33; color: var(--soft); }
.consent input { flex: none; width: 0.875rem; height: 0.875rem; margin: 0.15rem 0 0; accent-color: var(--dark); }
.btn {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.1rem; background: var(--dark); color: #fff;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 400;
  transition: background-color 180ms ease, transform 140ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--dark-hover); }
  .footer__col li a:hover, .footer__contact a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
}
.footer__copy { margin-top: 3rem; text-align: center; font-size: 0.8125rem; letter-spacing: 0.3px; color: var(--muted); }

/* telefon: cztery grupy w siatce 2×2 o równym rytmie (dane kontaktowe jak lista linków, bez osieroconej kolumny),
   formularz pod cienką linią, przycisk na całą szerokość (pod kciukiem) */
@media (max-width: 47.99em) {
  .footer__cols { row-gap: 2.25rem; }
  .footer__contact { grid-column: auto; }
  .footer__contact ul { gap: 0; margin-top: 0; }
  .footer__contact li a { line-height: 2.03rem; }
  .footer__form { padding-top: 2.25rem; border-top: 1px solid rgb(0 0 0 / 0.08); }
  .footer__form .btn { justify-self: stretch; min-height: 3rem; }
}
@media (min-width: 48em) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__contact { grid-column: auto; }
}
@media (min-width: 64em) {
  .footer { padding-top: 2.8rem; }
  .footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }  /* 5 x 239 px */
  .footer__form { grid-column: auto; }
  .footer__col h2 { margin-bottom: 1rem; }
  .footer__contact ul { margin-top: 2.6rem; }
  .btn { min-height: 2rem; }
  .footer__copy { margin-top: 5.6rem; }
}

/* ---------- ruch: komponent [data-reveal] (treść widoczna także bez JS) ----------
   Użycie:
     <div data-reveal>…</div>                  wjazd z dołu (domyślnie)
     data-reveal="up|down|left|right|fade|zoom|blur|mask"
                                               mask = odsłonięcie od dołu + zdjęcie lekko „oddala się”
     style="--i:2"                             kolejność: opóźnienie 90 ms × i
     <ul data-reveal-group="up">…</ul>         dzieci pojawiają się po kolei (JS nadaje im data-reveal i --i)
   Tytuł sekcji z data-reveal dorysowuje podkreślenie. Leniwie ładowane zdjęcia płynnie się pojawiają po doczytaniu.
   Ruch wyłącza się przy prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition: opacity 800ms ease, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms ease, clip-path 1200ms cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal=""], .js [data-reveal="up"] { transform: translateY(28px); }
  .js [data-reveal="down"] { transform: translateY(-28px); }
  .js [data-reveal="left"] { transform: translateX(-40px); }
  .js [data-reveal="right"] { transform: translateX(40px); }
  .js [data-reveal="zoom"] { transform: scale(0.92); }
  .js [data-reveal="blur"] { filter: blur(12px); transform: scale(1.02); }
  .js [data-reveal="mask"] { opacity: 1; clip-path: inset(100% 0 0 0); }
  .js [data-reveal="mask"] img { transform: scale(1.18); transition: transform 1800ms cubic-bezier(0.33, 1, 0.68, 1); transition-delay: inherit; }
  .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  /* clip-path tylko w wariancie mask: na innych przycinałby wystające dzieci (np. strzałki opinii) */
  .js [data-reveal="mask"].is-in { clip-path: inset(0); }
  .js [data-reveal="mask"].is-in img { transform: none; }

  .js .section-title[data-reveal] span::after { transform: scaleX(0); }
  .js .section-title[data-reveal].is-in span::after { transform: none; }

  .js img.lazy-fade { opacity: 0; transition: opacity 700ms ease; }
  .js img.lazy-fade.is-loaded { opacity: 1; }

  /* ziarno „drga” jak na kliszy */
  .opinions__bg::after { animation: grain 0.9s steps(6) infinite; }

  .slide.is-active img { will-change: transform; }  /* ruch kamery: kenburns.js */
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-12px, 8px); } 40% { transform: translate(10px, -14px); }
  60% { transform: translate(-6px, 16px); } 80% { transform: translate(14px, 4px); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .quote { transition: none; }
}

.footer__credit { margin-top: 0.5rem; text-align: center; font-size: 0.6875rem; color: var(--muted); }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- konto: rejestracja (wąska kolumna na środku, pola jak w pozostałych formularzach) ---------- */
.account { max-width: calc(34rem + 2 * var(--pad)); padding-block: 1.5rem 4rem; }
@media (min-width: 64em) { .account { padding-top: 2.5rem; } }

/* ---------- akcent „puder” na stronach (jak toasty, koszyk, Bezpieczeństwo): img/cart-puder.webp, img/toast-puder.webp ---------- */
/* konto (rejestracja, później logowanie i reset hasła): puder obok tytułu, w prawym górnym rogu kolumny */
.account { position: relative; }
.account::before {
  content: ""; position: absolute; top: 0.5rem; right: var(--pad); width: clamp(6.5rem, 14vw, 9.5rem); aspect-ratio: 440 / 326;
  background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 64em) { .account::before { top: 0.75rem; right: calc(var(--pad) - 8rem); } }  /* obok kolumny, nie na tekście */
/* telefon: puder nad tytułem, we własnym miejscu — dłuższy opis pod tytułem (np. odzyskiwanie hasła) nie wchodzi pod puder */
@media (max-width: 47.99em) {
  .account:not(.account--login, .account--dash) { padding-top: 5rem; }
  .account::before { top: 0.25rem; width: 7.5rem; }
}
.account__lead strong { color: var(--ink); overflow-wrap: anywhere; }
/* kontakt: puder przy tytule nad formularzem, dosunięty do prawej, nad polem wyboru tematu */
.contact__title { position: relative; }
.contact__title::after {
  content: ""; position: absolute; right: 0; bottom: -0.375rem; width: 5rem; aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 64em) { .contact__title::after { width: 6.25rem; } }  /* telefon: mniejszy — nad tytułem jest zdjęcie */
/* O nas (klasy z migracji 021–022): puder w rogu jasnego panelu (komputer — na telefonie pod panelem jest zdjęcie),
   zdanie końcowe (rozmiar tekstu jak na muart.pl) na jasnym pasie z pudrem na krawędzi */
.about__intro { position: relative; }
@media (min-width: 64em) {
  .about__intro::after {
    content: ""; position: absolute; right: 1.5rem; bottom: -1.75rem; width: 10rem; aspect-ratio: 440 / 326;
    background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
  }
}
.about__end { position: relative; margin-top: 4.5rem; padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); background: #f5f5f3; }
.about__end::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: calc(100% - 1.25rem); width: clamp(7rem, 12vw, 10rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat;
}
.cms .about__end p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .account::before, .contact__title::after { animation: swatch 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }
}
.account__title { font-family: var(--font-display); font-size: clamp(1.5625rem, 1.3rem + 0.9vw, 2rem); font-weight: 400; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; }
.account__lead { margin-block: 0.75rem 2rem; font-size: 0.9375rem; color: var(--muted); }
.account__lead a, .step__lead a, .consent a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.account .account__submit, .checkout .checkout__submit { grid-column: 1 / -1; justify-self: stretch; gap: 0.75rem; min-height: 3.25rem; font-size: 0.875rem; letter-spacing: 2px; }

/* ---------- logowanie: formularz + jasny panel dla nowych klientów (komputer: dwie kolumny; puder na krawędzi panelu) ---------- */
.account--login { max-width: calc(60rem + 2 * var(--pad)); }
.account--login::before, .account--dash::before { display: none; }  /* puder jest tu na panelu / pasie */
.login { display: grid; gap: 3rem; }
@media (min-width: 48em) { .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.login__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.login__forgot { font-size: 0.8125rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.login__aside { position: relative; padding: 2rem 1.5rem; background: #f5f5f3; }
@media (min-width: 48em) { .login__aside { margin-top: 5.25rem; padding: 2.5rem; } }  /* równo z pierwszym polem formularza */
.login__aside::before {
  content: ""; position: absolute; right: 1.5rem; bottom: calc(100% - 1.25rem); width: 7.5rem; aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}
.login__aside-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.login__perks { display: grid; gap: 0.75rem; margin: 1.5rem 0 1.75rem; font-size: 0.9375rem; line-height: 1.45; color: var(--text); }
.login__perks li { display: flex; align-items: flex-start; gap: 0.75rem; }
.login__perks .icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; stroke-width: 1.8; color: var(--ink); }
.btn.login__register { width: 100%; min-height: 3.25rem; font-size: 0.875rem; letter-spacing: 2px; }
.login__guest { margin-top: 1rem; text-align: center; font-size: 0.8125rem; color: var(--soft); }
/* odzyskiwanie hasła: jasna ramka „Sprawdź skrzynkę” / „Link wygasł”, powrót do logowania */
.reset__sent { display: grid; gap: 0.75rem; margin-block: 0.75rem 1.75rem; padding: 1.5rem; background: #f5f5f3; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.reset__sent strong { color: var(--ink); overflow-wrap: anywhere; }
.reset__sent-title { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 1.5px; text-transform: uppercase; color: #414141; }
.btn.reset__again { width: 100%; }
.reset__back { margin-top: 1.5rem; font-size: 0.875rem; }
.reset__back a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- konto /konto: jasny pas z powitaniem i pudrem, skróty (ikona w kółku jak na stronie Bezpieczeństwo), ostatnie zamówienia ---------- */
.account--dash { max-width: calc(64rem + 2 * var(--pad)); }
/* telefon: puder nad tytułem (tekst ma całą szerokość); od tabletu: z prawej, na wysokości tekstu */
.dash__hero { position: relative; padding: 6.5rem 1.5rem 2rem; background: #f5f5f3; }
.dash__hero::after {
  content: ""; position: absolute; right: -0.5rem; top: -0.25rem; width: 10.5rem; aspect-ratio: 440 / 326;
  background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 48em) {
  .dash__hero { padding: 3rem clamp(14rem, 30vw, 22rem) 3rem 3rem; }
  .dash__hero::after { right: 0; top: 50%; width: clamp(12rem, 24vw, 17rem); translate: 0 -50%; }
}
.dash__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; }
.dash__lead { max-width: 34rem; margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--text); }
.dash__contact { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); overflow-wrap: break-word; }
.dash__tiles { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 48em) { .dash__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash__tile { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1.25rem; border: 1px solid #dddddd; transition: border-color 180ms ease; }
@media (min-width: 48em) { .dash__tile { display: block; padding: 1.75rem; } .dash__icon { margin-bottom: 1rem; } }
@media (hover: hover) and (pointer: fine) { .dash__tile:hover { border-color: var(--dark); } }
.dash__tile-title { display: block; font-family: var(--font-display); font-size: 1.1875rem; color: #414141; }
.dash__tile-text { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.dash__orders { margin-top: 3.5rem; }
.dash__heading { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.dash__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding-block: 1rem; border-top: 1px solid #e6e6e6; font-size: 0.9375rem; }
@media (min-width: 48em) { .dash__list li { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; } }
.dash__number { font-weight: 700; color: var(--ink); }
.dash__date, .dash__status { color: var(--muted); }
.dash__status.is-pending { color: #8c2f1f; }
.dash__total { justify-self: end; font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
.dash__more { display: inline-block; margin-top: 1rem; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.dash__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border: 1px solid #e6e6e6; color: var(--text); }
.dash__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; font-size: 0.875rem; }
.dash__foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.field--password input { padding-right: 5rem; }
.field__reveal { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); padding: 0.5rem 0.75rem; background: none; border: 0; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.field__reveal:focus-visible { outline: 2px solid var(--dark); outline-offset: -2px; }
/* wskaźnik siły hasła (account/password-field, muart.js): pasek 4 części + lista wymagań z .env odhaczana na bieżąco;
   bez JS zostaje sama lista jako informacja */
.pwmeter { --pw: #c0182f; display: grid; gap: 0.5rem; }
.pwmeter[data-score="2"] { --pw: #b7791f; }
.pwmeter[data-score="3"] { --pw: #6f8a45; }
.pwmeter[data-score="4"] { --pw: #3f7a4f; }
.pwmeter__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.pwmeter__bar span { height: 0.25rem; background: #e6e6e6; transition: background-color 220ms ease; }
.pwmeter[data-score="1"] .pwmeter__bar span:nth-child(-n + 1),
.pwmeter[data-score="2"] .pwmeter__bar span:nth-child(-n + 2),
.pwmeter[data-score="3"] .pwmeter__bar span:nth-child(-n + 3),
.pwmeter[data-score="4"] .pwmeter__bar span { background: var(--pw); }
.pwmeter__level { font-size: 0.8125rem; color: var(--soft); }
.pwmeter__level strong { font-weight: 500; color: var(--ink); }
.pwmeter:not([data-score="0"]) .pwmeter__level strong { color: var(--pw); }
html:not(.js) .pwmeter__bar, html:not(.js) .pwmeter__level { display: none; }
.pwmeter__rules { display: grid; gap: 0.375rem 1.5rem; font-size: 0.8125rem; line-height: 1.3; color: var(--soft); }
@media (min-width: 40em) { .pwmeter__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pwmeter__rules li { position: relative; padding-left: 1.5rem; transition: color 180ms ease; }
.pwmeter__rules li::before { content: ""; position: absolute; left: 0; top: 0.0625rem; width: 0.9375rem; height: 0.9375rem; border: 1px solid #c4c4c4; border-radius: 50%; transition: background-color 180ms ease, border-color 180ms ease; }
.pwmeter__rules li.is-met { color: var(--ink); }
.pwmeter__rules li.is-met::before { border-color: #3f7a4f; background: #3f7a4f; }
.pwmeter__rules li.is-met::after { content: ""; position: absolute; left: 0.3125rem; top: 0.25rem; width: 0.25rem; height: 0.5rem; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* ---------- zamówienie: kroki po lewej, podsumowanie po prawej (przyklejone); telefon: skrót do podsumowania ---------- */
.checkout { padding-block: 1rem 4rem; }
@media (min-width: 64em) { .checkout { padding-top: 1.75rem; } }
.checkout__layout { display: grid; gap: 2.5rem; }
@media (min-width: 64em) {
  .checkout__layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: 0 4rem; align-items: start; }
  .checkout__summary { position: sticky; top: calc(var(--header-h, 0px) + 1.5rem); grid-column: 2; grid-row: 1 / span 2; }
  .checkout__layout > .step--last { grid-column: 1; }
  .checkout__mini { display: none !important; }
}
.checkout__mini { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; padding: 0.875rem 1rem; background: #f5f5f3; font-size: 0.875rem; color: var(--ink); }
.checkout__mini span { text-decoration: underline; text-underline-offset: 3px; }
.checkout__mini strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.step { padding-block: 1.75rem; border-top: 1px solid #dedede; }
.step:first-of-type { padding-top: 1.25rem; }
.step__title { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.step__no { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dark); color: #fff; font-family: var(--font); font-size: 0.875rem; letter-spacing: 0; }
.step__lead { margin: -0.5rem 0 1.25rem; font-size: 0.875rem; color: var(--muted); }
.step--last { display: grid; gap: 1.25rem; }
.checkout__pay { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout__pay[hidden] { display: none; }
.checkout__form > .checkout__pay .step:first-of-type { padding-top: 1.75rem; } /* krok w ramce pola: odstęp jak pozostałe kroki */
[data-checkout-summary].is-busy :is(.cart__rows dd, .cart__total strong) { opacity: 0.35; transition: opacity 200ms ease 120ms; }
.checkout__company { display: grid; gap: 1.25rem 1rem; }
@media (min-width: 40em) { .checkout__company { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.checkout__company[hidden] { display: none; }
.checkout__recipient { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.checkout__toggle { font-size: 0.9375rem; color: var(--ink); }
.checkout__terms { font-size: 0.8125rem; }
.option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #d1d1d1; }
.option.is-selected { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.option .icon { width: 1.5rem; height: 1.5rem; }
.option p { display: grid; gap: 0.125rem; font-size: 0.8125rem; color: var(--soft); }
.option strong { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.option__price { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
/* paczkomat: wybrany punkt, kod (wpisany albo z mapy), przycisk okna z Geowidgetem InPost (mapa ładowana dopiero po otwarciu) */
.locker { display: grid; gap: 1rem; margin-top: 1.25rem; }
.locker__chosen { display: grid; gap: 0.125rem; padding: 1rem 1.25rem; border: 1px solid var(--dark); box-shadow: inset 0 0 0 1px var(--dark); font-size: 0.8125rem; color: var(--soft); }
.locker__chosen strong { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.locker__row { display: grid; gap: 0.75rem; align-items: start; }
@media (min-width: 40em) { .locker__row { grid-template-columns: minmax(0, 1fr) auto; } .locker__map { margin-top: 1.6875rem; } }
.locker__chosen[hidden], .locker__map[hidden] { display: none; }
.locker__map { min-height: 3.375rem; width: 100%; } /* wysokość jak .field z ramką; telefon — cała szerokość */
.locker__save { margin-top: 1rem; }
.acc-locker { max-width: 40rem; }
.acc-locker .locker { margin-top: 0; }
.acc-locker__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.option__logo { width: 3rem; height: 3rem; object-fit: contain; } /* = wysokość .field z ramką */
.locker-modal { width: min(72rem, calc(100vw - 2rem)); height: calc(100dvh - 2rem); overflow: hidden; }
@media (max-width: 47.99em) { .locker-modal { width: 100vw; height: 100dvh; max-height: 100dvh; } }
.locker-modal__map { height: 100%; padding-top: 4.25rem; }
.locker-modal__map inpost-geowidget { display: block; height: 100%; }
.step__slot { margin-top: 0.75rem; padding: 1.25rem; border: 1px dashed #c8c8c8; background: #fafaf9; text-align: center; font-size: 0.8125rem; color: var(--soft); }
.checkout__items { display: grid; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #d6d6d4; font-size: 0.875rem; color: var(--ink); }
.checkout__items li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.checkout__thumb { position: relative; display: block; aspect-ratio: 4 / 5; background: #fff; }
.checkout__thumb img { width: 100%; height: 100%; object-fit: cover; }
.checkout__qty { position: absolute; top: -0.5rem; right: -0.5rem; display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.25rem; border-radius: 0.6875rem; background: var(--dark); color: #fff; font-size: 0.6875rem; }
.checkout__name { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; }
.checkout__edit { display: inline-block; margin-top: 1rem; font-size: 0.8125rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- zamówienie przyjęte: jasny pas z numerem i pudrem (jak powitanie w koncie), postęp, produkty | dostawa i faktura ---------- */
.placed { max-width: calc(64rem + 2 * var(--pad)); padding-block: 1.5rem 4.5rem; }
@media (min-width: 64em) { .placed { padding-top: 2.5rem; } }
.placed__hero { position: relative; display: grid; justify-items: start; gap: 1rem; padding: 6.5rem 1.5rem 2rem; background: #f5f5f3; }
.placed__hero::after {
  content: ""; position: absolute; right: -0.5rem; top: -0.25rem; width: 10.5rem; aspect-ratio: 440 / 326;
  background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
}
@media (min-width: 48em) {
  .placed__hero { padding: 3rem clamp(14rem, 30vw, 22rem) 3rem 3rem; }
  .placed__hero::after { right: 0; top: 50%; width: clamp(12rem, 24vw, 17rem); translate: 0 -50%; }
}
.placed__mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--dark); color: #fff; }
.placed__mark .icon { width: 1.375rem; height: 1.375rem; stroke-width: 1.8; }
.placed__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; text-wrap: balance; }
.placed__number { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid #dcdcd8; }
.placed__number span { font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.placed__number strong { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 400; letter-spacing: 1.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.placed__lead { font-size: 0.9375rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.placed__lead strong { font-weight: 500; color: var(--ink); }
.placed__progress { margin-block: 2.5rem; }
.placed__grid { display: grid; gap: 1rem; }
@media (min-width: 48em) { .placed__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.placed__items .checkout__items { margin-bottom: 0; padding-top: 0.5rem; border-bottom-color: #e6e6e6; }
.placed__items .checkout__items li { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.placed__items .checkout__thumb { background: #f5f5f3; }
.placed__items .checkout__name a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .placed__items .checkout__name a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.placed__locker { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.placed__locker .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--ink); }
.placed__locker strong { font-weight: 500; color: var(--ink); }
.placed__subtitle { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; }
.acc-note.placed__note { margin-block: 1rem 0; }  /* .acc-note (niżej w pliku) ma margines pod spodem */
.placed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; }
.placed__actions .btn { min-height: 3.25rem; padding: 0 2rem; font-size: 0.875rem; letter-spacing: 2px; }
.placed__ask { margin-left: auto; font-size: 0.875rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .placed__ask:hover { color: var(--ink); } }
@media (max-width: 47.99em) {
  .placed__actions .btn { flex: 1 1 100%; }
  .placed__ask { margin: 0.5rem auto 0; }
}

/* ---------- strefa klienta (/konto/*): zakładki konta, nagłówek strony, sekcje danych, karty adresów, zamówienia, zwroty ---------- */
.acc { position: relative; max-width: calc(64rem + 2 * var(--pad)); padding-block: 1.5rem 4.5rem; }
@media (min-width: 64em) { .acc { padding-top: 2.5rem; } }

/* zakładki: jak na karcie produktu — wersaliki z rozstrzeleniem, ciemna kreska pod bieżącą; telefon — przewijany pasek */
.acc-nav { display: flex; gap: 1.75rem; margin-bottom: 2.25rem; border-bottom: 1px solid #e6e6e6; overflow-x: auto; scrollbar-width: none; }
.acc-nav::-webkit-scrollbar { display: none; }
.account--dash .acc-nav { margin-bottom: 1.5rem; }
.acc-nav__link { position: relative; flex: none; padding: 0.875rem 0; font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 180ms ease; }
.acc-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dark); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.acc-nav__link[aria-current] { color: var(--ink); }
.acc-nav__link[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .acc-nav__link:hover { color: var(--ink); } }
@media (min-width: 48em) { .acc-nav { gap: 2.5rem; } .acc-nav__link { font-size: 0.875rem; } }

.acc__head { position: relative; margin-bottom: 2rem; }
.acc__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
@media (min-width: 64em) {
  .acc__head:not(.acc__head--row)::after {
    content: ""; position: absolute; right: 0; bottom: -0.5rem; width: 8.5rem; aspect-ratio: 440 / 326;
    background: url("../img/cart-puder.webp") center / contain no-repeat; pointer-events: none;
  }
}
.acc__title { font-family: var(--font-display); font-size: clamp(1.5625rem, 1.3rem + 0.9vw, 2rem); font-weight: 400; line-height: 1.1; letter-spacing: 2.5px; text-transform: uppercase; color: #414141; overflow-wrap: anywhere; }
.acc__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.acc__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.acc__back .icon { width: 0.75rem; height: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .acc__back:hover { color: var(--ink); } }
.btn.acc__submit { grid-column: 1 / -1; justify-self: start; min-height: 3rem; padding: 0 2rem; font-size: 0.8125rem; letter-spacing: 2px; }
.btn.acc__danger { border-color: #a3311d; color: #a3311d; }
@media (hover: hover) and (pointer: fine) { .btn.acc__danger:hover { background: #a3311d; color: #fff; } }
.btn.acc__danger-fill { background: #a3311d; }
@media (hover: hover) and (pointer: fine) { .btn.acc__danger-fill:hover { background: #87281a; } }

/* /konto/dane: sekcje „nagłówek | formularz” (jak strona Bezpieczeństwo) */
.acc-row { display: grid; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid #e6e6e6; }
@media (min-width: 64em) { .acc-row { grid-template-columns: 17rem minmax(0, 38rem); gap: 4rem; padding-block: 2.5rem; } }
.acc-row__title, .acc-block__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.acc-row__text { max-width: 32ch; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.acc-static { display: flex; align-items: center; min-height: 3.25rem; padding: 0 1.25rem; background: #f5f5f3; font-size: 0.9375rem; color: var(--text); overflow-wrap: anywhere; }
.acc-facts { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.acc-facts li { padding-left: 1rem; text-indent: -1rem; }
.acc-facts li::before { content: "•"; display: inline-block; width: 1rem; text-indent: 0; color: var(--muted); }

/* okno potwierdzenia (usunięcie konta, adresu, odbiorcy) */
.acc-modal { width: min(28rem, calc(100vw - 2rem)); }
.acc-modal__body { display: grid; gap: 1rem; padding: 2.75rem 1.75rem 1.75rem; }
.acc-modal__title { padding-right: 6rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.15; letter-spacing: 2px; text-transform: uppercase; color: #414141; }
.acc-modal__text { font-size: 0.9375rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.acc-modal__text:empty { display: none; }
.acc-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; }
.acc-modal__actions .btn { min-height: 2.875rem; padding: 0 1.5rem; }

/* /konto/adresy: bloki z kartami; ostatnia karta (przerywana ramka) dodaje nowy wpis */
.acc-block + .acc-block { margin-top: 3.5rem; }
.acc-block__head { margin-bottom: 1.25rem; }
.acc-block__text { max-width: 62ch; margin-top: 0.4rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.acc-cards { display: grid; gap: 1rem; }
@media (min-width: 40em) { .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .acc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acc-card { display: flex; flex-direction: column; gap: 0.75rem; min-height: 12rem; padding: 1.5rem; border: 1px solid #dddddd; }
.acc-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-family: var(--font-display); font-size: 1.1875rem; color: #414141; overflow-wrap: anywhere; }
.acc-badge { padding: 0.2rem 0.5rem; background: #f0f0ee; font-family: var(--font); font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.acc-card__lines { font-size: 0.9375rem; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.acc-card__missing { color: #8c2f1f; }
.acc-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: auto; padding-top: 0.875rem; border-top: 1px solid #efefef; font-size: 0.8125rem; }
.acc-card__actions form { display: contents; }
.acc-card__actions a, .acc-card__actions button { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .acc-card__actions a:hover, .acc-card__actions button:hover { color: var(--ink); } }
.acc-card--add { padding: 0; border-style: dashed; border-color: #c9c9c9; transition: border-color 180ms ease; }
.acc-card--add a { display: grid; flex: 1; place-content: center; justify-items: center; gap: 0.75rem; padding: 1.5rem; font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.acc-card--add .icon { box-sizing: content-box; width: 1.125rem; height: 1.125rem; padding: 0.875rem; border-radius: 50%; background: #f5f5f3; color: var(--ink); stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) { .acc-card--add:hover { border-color: var(--dark); } .acc-card--add:hover a { color: var(--ink); } }

/* formularz adresu / odbiorcy */
.acc-form { max-width: 40rem; }
.acc-form__company { display: grid; gap: 1.25rem 1rem; }
.acc-form__company[hidden] { display: none; }
@media (min-width: 40em) { .acc-form__company { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.acc-form__toggle { font-size: 0.9375rem; color: var(--ink); }
.acc-form__toggle input { width: 1rem; height: 1rem; margin-top: 0.1rem; }
.acc-form__toggle small { font-size: 0.8125rem; color: var(--muted); }
.acc-form__company > .wform__group--full { grid-column: 1 / -1; }
.acc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.5rem; }
.acc-form__actions .btn.acc__submit { grid-column: auto; }
.acc-form__cancel { font-size: 0.875rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* statusy zamówień i zwrotów: spokojne tła; ciepłe = czeka na klientkę albo sklep, zielone = gotowe */
.acc-status { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; background: #f0f0ee; font-size: 0.6875rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.acc-status--new, .acc-status--w-new, .acc-status--w-awaiting { background: #f8eee8; color: #7a3a1d; }
.acc-status--shipped, .acc-status--completed, .acc-status--w-received, .acc-status--w-refunded, .acc-status--w-resolved { background: #e9f3ec; color: #1f5f3c; }
.acc-status--cancelled, .acc-status--returned, .acc-status--w-rejected { background: #f3f3f3; color: var(--muted); }

/* /konto/zamowienia: wiersz = link do szczegółów; telefon — dwie linie + pozycje */
.acc-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num total" "date status" "items items"; gap: 0.4rem 1rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid #e6e6e6; }
.acc-orders li:last-child .acc-order { border-bottom: 1px solid #e6e6e6; }
.acc-order__number { grid-area: num; font-weight: 700; color: var(--ink); }
.acc-order__date { grid-area: date; font-size: 0.875rem; color: var(--muted); }
.acc-order__items { grid-area: items; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--text); }
.acc-order .acc-status { grid-area: status; justify-self: end; }
.acc-order__total { grid-area: total; justify-self: end; font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
.acc-order__go { display: none; }
@media (min-width: 48em) {
  .acc-order { grid-template-columns: 11rem 6.5rem minmax(0, 1fr) auto 7rem 1rem; grid-template-areas: "num date items status total go"; gap: 1.5rem; padding: 1.25rem 0.75rem; transition: background-color 180ms ease; }
  .acc-order__go { display: block; grid-area: go; width: 0.875rem; height: 0.875rem; color: var(--muted); }
}
@media (hover: hover) and (pointer: fine) { .acc-order:hover { background: #fafafa; } .acc-order:hover .acc-order__number { text-decoration: underline; text-underline-offset: 3px; } }
.acc-empty { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1.5rem; border: 1px dashed #d1d1d1; text-align: center; color: var(--text); }
.acc-empty .icon { box-sizing: content-box; width: 1.375rem; height: 1.375rem; padding: 1rem; border-radius: 50%; background: #f5f5f3; color: var(--ink); stroke-width: 1.25; }
.acc-empty .btn { justify-self: center; }

/* szczegóły zamówienia: postęp (sześć kroków Order::FLOW), produkty i kwoty, dostawa, faktura */
.acc-progress { margin-bottom: 2.5rem; }
/* skala koloru kroków: ciemnożółty → pomarańcz → … → zieleń; --from = kolor poprzedniego kroku, więc przebyta droga tworzy ciągły pas */
.acc-progress li:nth-child(1) { --from: #f9edc0; --tint: #f9edc0; --mark: #c9a227; }
.acc-progress li:nth-child(2) { --from: #f9edc0; --tint: #fce0bf; --mark: #e08a2e; }
.acc-progress li:nth-child(3) { --from: #fce0bf; --tint: #f8e8bd; --mark: #cda634; }
.acc-progress li:nth-child(4) { --from: #f8e8bd; --tint: #ebedc3; --mark: #a3ab3c; }
.acc-progress li:nth-child(5) { --from: #ebedc3; --tint: #d8ebc6; --mark: #6fae4f; }
.acc-progress li:nth-child(6) { --from: #d8ebc6; --tint: #bfe3c0; --mark: #3f9a4a; }
/* telefon i tablet: pionowa lista z kropkami (pełne nazwy kroków), data po prawej */
.acc-progress li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem 0.6rem 1.75rem; }
.acc-progress li::before { content: ""; position: absolute; left: 0.625rem; top: 50%; width: 0.5rem; height: 0.5rem; border: 1px solid #c4c4c4; border-radius: 50%; translate: 0 -50%; background: #fff; }
.acc-progress li.is-done, .acc-progress li.is-current { background: linear-gradient(180deg, var(--from), var(--tint)); }
.acc-progress li.is-done::before, .acc-progress li.is-current::before { border-color: var(--mark); background: var(--mark); }
.acc-progress__label { font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.acc-progress li.is-done .acc-progress__label { color: var(--ink); }
.acc-progress li.is-current .acc-progress__label { font-weight: 700; color: var(--ink); }
.acc-progress__date { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-progress li.is-done .acc-progress__date, .acc-progress li.is-current .acc-progress__date { color: var(--ink); }
/* komputer: sześć kroków w rzędzie z kreską u góry, bez odstępów, żeby kolory przechodziły jeden w drugi */
@media (min-width: 64em) {
  .acc-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .acc-progress li { display: grid; align-content: start; gap: 0.2rem; padding: 0.75rem; border-top: 2px solid #e6e6e6; }
  .acc-progress li::before { display: none; }
  .acc-progress li.is-done, .acc-progress li.is-current { border-top-color: var(--mark); background: linear-gradient(90deg, var(--from), var(--tint)); }
  .acc-progress__label { font-size: 0.75rem; letter-spacing: 1px; }
  .acc-progress__date { font-size: 0.75rem; }
}
.acc-order-grid { display: grid; gap: 1rem; }
@media (min-width: 48em) { .acc-order-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .acc-panel--wide { grid-column: 1 / -1; } }
.acc-panel { padding: 1.5rem; border: 1px solid #e6e6e6; }
.acc-panel__title { margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #414141; }
.acc-panel__lines { font-size: 0.9375rem; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.acc-panel__lines + .acc-panel__lines { margin-top: 0.75rem; }
.acc-panel__meta { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.acc-panel__link { display: inline-block; margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-panel__link--file { display: inline-flex; align-items: center; gap: 0.5rem; }
.acc-panel__link--file svg { flex: none; }
.acc-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9375rem; }
.acc-items li:first-child { padding-top: 0; }
.acc-items__name { color: var(--ink); }
.acc-items__qty { grid-row: 2; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-items__total { grid-row: 1 / span 2; align-self: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-sum { display: grid; gap: 0.35rem; margin-top: 1rem; font-size: 0.9375rem; }
.acc-sum div { display: flex; justify-content: space-between; gap: 1rem; }
.acc-sum dt { color: var(--muted); }
.acc-sum dt small { margin-left: 0.35rem; font-size: 0.8125rem; color: var(--soft); }
.acc-sum dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-sum .acc-sum__total { align-items: baseline; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid #e6e6e6; }
.acc-sum__total dt { color: var(--ink); }
.acc-sum__total dd { font-family: var(--font-display); font-size: 1.375rem; }
.acc-note { margin-block: 0 2rem; padding: 1rem 1.25rem; background: #f5f5f3; font-size: 0.9375rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.acc-order-grid + .acc-note { margin-block: 1rem 0; }
.acc-note a, .acc-howto a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-foot { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; font-size: 0.875rem; }
.acc-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .acc-foot a:hover { color: var(--ink); } }

/* /konto/zwroty: jasny pas „jak zwrócić” z pudrem na krawędzi (trzy kroki — kolejność ma znaczenie), zgłoszenia */
.acc-howto { position: relative; margin-bottom: 3.5rem; padding: 2rem 1.5rem; background: #f5f5f3; }
@media (min-width: 48em) { .acc-howto { padding: 2.5rem; } }
.acc-howto::before {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 3rem); top: calc(100% - 1.5rem); width: clamp(7rem, 12vw, 9.5rem); aspect-ratio: 168 / 124;
  background: url("../img/toast-puder.webp") center / contain no-repeat; pointer-events: none;
}  /* na dolnej krawędzi — u góry jest przycisk „Odstąp od umowy” */
.acc-howto__steps { display: grid; gap: 1.25rem; margin-block: 1.5rem; counter-reset: step; }
@media (min-width: 64em) { .acc-howto__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.acc-howto__steps li { position: relative; padding-left: 2.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text); counter-increment: step; }
.acc-howto__steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.1rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem;
  border: 1px solid var(--dark); border-radius: 50%; font-family: var(--font-display); font-size: 0.9375rem; color: var(--ink);
}
.acc-howto__steps strong { display: block; margin-bottom: 0.15rem; font-weight: 700; color: var(--ink); }
.acc-howto__more { font-size: 0.875rem; }
.acc-returns { display: grid; gap: 1rem; margin-top: 1.25rem; }
.acc-return { padding: 1.25rem 1.5rem; border: 1px solid #e6e6e6; }
.acc-return__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.acc-return__order { font-weight: 700; color: var(--ink); }
.acc-return__items { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text); }
.acc-return__date { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.acc-return__answer { margin-top: 0.75rem; padding: 0.75rem 1rem; background: #f5f5f3; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.acc-return__answer strong { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.acc__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acc-block__empty { margin-top: 1.25rem; padding: 1.5rem; border: 1px dashed #d1d1d1; font-size: 0.9375rem; color: var(--muted); }

/* pulpit konta: cztery skróty (telefon: jeden pod drugim, tablet: 2×2, komputer: rząd) */
@media (min-width: 48em) { .dash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .dash__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
a.dash__number { text-decoration: underline; text-underline-offset: 3px; }

/* płatność Przelewy24: kafelki metod (zaznaczenie na radiu, logo z serwera P24), kod BLIK, więcej banków; strona płatności */
.pay { display: grid; gap: 1rem; }
.pay__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40em) { .pay__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pay__tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.5rem; min-height: 5.5rem; padding: 0.75rem 0.5rem; border: 1px solid #d1d1d1; background: #fff; text-align: center; cursor: pointer; }
.pay__tile:hover { border-color: #8f8f8f; }
.pay__tile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pay__tile:has(input:checked) { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.pay__tile:has(input:focus-visible) { outline: 2px solid var(--dark); outline-offset: 2px; }
.pay__logo { display: block; width: 100%; height: 2.25rem; }
.pay__logo img { width: 100%; height: 100%; object-fit: contain; }
.pay__name { font-size: 0.75rem; line-height: 1.25; color: var(--ink); }
.pay__blik { max-width: 16rem; }
.pay__blik[hidden] { display: none; }
.pay__blik input { font-size: 1.25rem; letter-spacing: 0.3em; }
.pay__more summary { cursor: pointer; font-size: 0.875rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pay__more .pay__grid { margin-top: 0.75rem; }
.paypage__grid { display: grid; gap: 1.5rem; align-items: start; margin-top: 2rem; }
.paypage__grid[hidden] { display: none; }
@media (min-width: 64em) { .paypage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3rem; } }
.paypage__form { display: grid; gap: 1.5rem; }
.paypage__form .checkout__submit { justify-self: stretch; width: 100%; }
.paypage__spinner { display: block; width: 2.5rem; height: 2.5rem; margin: 0 0 1rem; border: 3px solid #d6d6d4; border-top-color: var(--dark); border-radius: 50%; animation: pay-spin 0.9s linear infinite; }
.paypage__spinner[hidden] { display: none; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .paypage__spinner { animation-duration: 3s; } }

/* ---------- prace konserwacyjne: strona czarna jak koszulka; światło przesuwa się po materiale, napis raz wyłania się z czerni, raz w niej znika ---------- */
.maintenance { min-height: 100svh; background: #0b0b0b; color: #f2f1ee; }
.maintenance ::selection { background: #f2f1ee; color: #0b0b0b; }
.maintenance__main { position: relative; display: grid; min-height: 100svh; overflow: hidden; background: #0b0b0b; } /* własne tło: logo mieszane z nim (screen) znika w czerni bez prostokąta */
.maintenance__photo { display: block; height: 46svh; min-height: 15rem; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.maintenance__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.maintenance__text { position: relative; display: grid; justify-items: start; align-content: start; padding: 0 var(--pad, 1.25rem) calc(2.5rem + env(safe-area-inset-bottom)); }
.maintenance__logo { position: absolute; top: calc(-46svh + 1.25rem); left: var(--pad, 1.25rem); width: 4.25rem; height: auto; filter: invert(1); mix-blend-mode: screen; }
.maintenance__title { max-width: 20ch; font-family: var(--font-display); font-size: clamp(2.5rem, 11.5vw, 3.25rem); font-weight: 400; line-height: 1.04; letter-spacing: 0.015em; text-transform: uppercase; text-wrap: balance; color: #fff; }
.maintenance__lead { max-width: 34ch; margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: #d2d1cd; }
.maintenance__cart { margin-top: 0.75rem; font-size: 0.9375rem; color: #a9a8a4; }
.maintenance__retry { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; margin-top: 1.75rem; padding-inline: 1.75rem; border: 1px solid #f2f1ee; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; transition: background-color 200ms ease, color 200ms ease; }
.maintenance__retry:active { background: #f2f1ee; color: #0b0b0b; }
.maintenance__retry:focus-visible, .maintenance__contact a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.maintenance__contact { margin-top: 1.5rem; font-size: 0.875rem; color: #a9a8a4; }
.maintenance__contact a { color: #f2f1ee; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .maintenance__retry:hover { background: #f2f1ee; color: #0b0b0b; } }
@media (min-width: 64em) {
  .maintenance__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .maintenance__photo { grid-column: 2; grid-row: 1; height: 100svh; min-height: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
  .maintenance__photo img { object-position: 50% 42%; }
  .maintenance__text { grid-column: 1; grid-row: 1; align-content: center; padding: 2.5rem 0 2.5rem clamp(3rem, 8vw, 8.5rem); }  /* bez z-index: logo mieszane z tłem (screen) straciłoby tło pod sobą */
  .maintenance__logo { position: static; width: 5.6875rem; margin-bottom: clamp(1.5rem, 5vh, 3.5rem); }
  .maintenance__title { font-size: clamp(3rem, 4.5vw, 4.5rem); }
  .maintenance__lead { max-width: 36ch; margin-top: 1.75rem; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .maintenance__photo img { animation: maintenance-light 7s ease-in-out infinite alternate; }
}
@keyframes maintenance-light { from { filter: brightness(0.62); } to { filter: brightness(1.42); } }

/* zalogowana administracja ogląda sklep w trakcie prac */
.maintenance-bar { padding: 0.5rem 1rem; background: #8f1d14; font-size: 0.8125rem; text-align: center; color: #fff; }
.maintenance-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- blog: lista w układzie „Pion 4:5” (duże zdjęcia jak na karcie produktu), wpis ze spokojną kolumną do czytania ---------- */
.header__nav--right { flex-wrap: nowrap; margin-right: auto; padding: 0 0 0 clamp(1.5rem, 5.77vw - 23px, 3.75rem); }
.header__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: #d9a98f; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.blog { padding-block: 1.25rem 3rem; }
.blog__head { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.blog__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.9rem + 1.5vw, 2.75rem); font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.blog__tabs { display: flex; gap: 1.5rem; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); overflow-x: auto; scrollbar-width: none; font-size: 0.8125rem; letter-spacing: 0.4px; text-transform: uppercase; }
.blog__tabs::-webkit-scrollbar { display: none; }
.blog__tabs a { flex: none; padding-block: 0.5rem; color: var(--muted); white-space: nowrap; }
.blog__tabs a[aria-current="page"] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.blog__search { display: flex; align-items: center; border-bottom: 1px solid var(--field-line); }
.blog__search input { flex: 1; min-width: 0; height: 2.75rem; padding: 0; border: 0; background: none; font-size: 1rem; color: var(--ink); }
.blog__search input:focus { outline: none; }
.blog__search:focus-within { border-bottom-color: var(--ink); }
.blog__search input::placeholder { color: var(--muted); opacity: 1; }
.blog__search input::-webkit-search-cancel-button { display: none; }
.blog__search button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; color: var(--ink); }
.blog__search .icon { width: 1.25rem; height: 1.25rem; }
.blog__found { margin-bottom: 1.5rem; color: var(--muted); }
.blog__found a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem 0.875rem; }
.blog__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 2rem; margin-top: 3rem; font-size: 0.875rem; color: var(--muted); }
.blog__pager a { color: var(--ink); text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.4px; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 48em) {
  .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .blog { padding-top: 1.75rem; padding-inline: calc(var(--pad) + 0.5625rem); }
  .blog__head { grid-template-columns: auto minmax(0, 1fr) 13rem; align-items: baseline; gap: 2.75rem; margin-bottom: 1.5rem; }
  .blog__tabs { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; gap: 0 2.5rem; overflow: visible; }
  .blog__search { align-self: end; }
  .blog__search input { font-size: 0.875rem; }
  .blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 0.875rem; }
}

.post-card__link { display: block; color: inherit; }
.post-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.post-card__title { margin-top: 0.875rem; font-family: var(--font-display); font-size: 1.5625rem; font-weight: 500; line-height: 1.12; text-transform: uppercase; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.post-card__meta { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.3px; color: var(--muted); }
.post-card__meta a { color: inherit; }
.post-card__meta a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .post-card__link:hover .post-card__media img { transform: scale(1.03); }
}

.home-blog { margin-block: var(--section); }
.home-blog .section-title { margin-bottom: 2rem; }
.home-blog__more { margin-top: 2rem; text-align: center; }

.post { padding-bottom: 2.5rem; }
.post ::selection { background: #e9cdbf; color: #222; }
.post__preview { padding: 0.5rem 1rem; background: #111; font-size: 0.8125rem; text-align: center; color: #fff; }
.post__open { display: grid; gap: 1.5rem; padding-top: 1.25rem; }
.post__intro { display: flex; flex-direction: column; }
.post__crumbs { font-size: 0.8125rem; color: var(--muted); }
.post__crumbs a { color: inherit; }
.post__crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post__title { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(2.375rem, 1.75rem + 2.7vw, 4.25rem); font-weight: 500; line-height: 1.03; text-transform: uppercase; color: #222; text-wrap: balance; overflow-wrap: anywhere; }
.post__lead { max-width: 36rem; margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.55; color: var(--text); }
.post__meta { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }
.post__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.post__cover { margin: 0 calc(-1 * var(--pad)); }
.post__cover img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--photo-bg); }
.post__cover figcaption { margin-top: 0.5rem; padding-inline: var(--pad); font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.post__body { display: grid; gap: 2rem; padding-top: 2.25rem; }
.post__toc { padding-bottom: 1.5rem; border-bottom: 1px solid var(--field-line); }
.post__toc h2 { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.post__toc ol { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.35; }
.post__toc a { color: var(--muted); }
.post__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post__text { min-width: 0; max-width: 44rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.post__text > * + * { margin-top: 1.25rem; }
.post__text p a, .post__text li a, .post__text td a, .post__sources a, .post__callout a { color: var(--ink); text-decoration: underline; text-decoration-color: #d9a98f; text-underline-offset: 3px; }
.post__text a:focus-visible, .post__toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.post__text h2 { margin-top: 2.75rem; scroll-margin-top: 1rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; line-height: 1.12; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.post__text h3 { margin-top: 2rem; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.post__text h2 + *, .post__text h3 + * { margin-top: 0.875rem; }
.post__text ul, .post__text ol { padding-left: 1.25rem; }
.post__text ul { list-style: disc; }
.post__text ol { list-style: decimal; }
.post__text li + li { margin-top: 0.4rem; }
.post__text li::marker { color: #b98a72; }
.post__text blockquote { margin-block: 2.25rem; padding-block: 1.5rem; border-block: 1px solid var(--ink); }
.post__text blockquote p { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.25; color: var(--ink); }
.post__text blockquote cite { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-style: normal; color: var(--muted); }
.post__text hr { width: 4rem; height: 1px; margin-block: 2.5rem; border: 0; background: var(--ink); }
.post__callout { padding: 1.25rem 1.375rem; background: #fbf6f2; color: var(--ink); }
.post__figure, .post__gallery { margin-block: 2rem; }
.post__figure img, .post__figure video { display: block; width: 100%; height: auto; background: var(--photo-bg); }
.post__gallery > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.post__gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--photo-bg); }
.post__gallery--odd img:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.post__text figcaption { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.post__credit { display: inline-block; }
.post__table { margin-block: 2rem; overflow-x: auto; }
.post__table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.post__table th, .post__table td { padding: 0.625rem 0.75rem 0.625rem 0; border-bottom: 1px solid var(--field-line); text-align: left; vertical-align: top; }
.post__table th { font-weight: 500; color: var(--ink); border-bottom-color: var(--ink); }
.post__embed { aspect-ratio: 16 / 9; background: #111; }
.post__embed a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; height: 100%; color: #fff; font-size: 0.875rem; }
.post__embed svg { width: 3.5rem; height: 3.5rem; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.post__embed a:hover svg { transform: scale(1.08); }
.post__embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.post__event { margin-block: 2rem; padding: 1.5rem; background: #111; color: #e9e7e3; }
.post__event > * + * { margin-top: 0.375rem; }
.post__event-date { font-size: 0.8125rem; letter-spacing: 0.4px; color: #c9c6c1; }
.post__event-name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.1; text-transform: uppercase; color: #fff; }
.post__event-place { color: #c9c6c1; }
.post__event a { display: inline-block; margin-top: 0.75rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.post__product { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-block: 2rem; padding-block: 0.875rem; border-block: 1px solid var(--field-line); color: var(--ink); }
.post__product img { width: 4.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--photo-bg); }
.post__product-name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.15; text-transform: uppercase; }
.post__product-price { font-family: var(--font-display); font-size: 1.0625rem; }
.post__product:hover .post__product-name { text-decoration: underline; text-underline-offset: 3px; }
.post__text > .post__foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.post__foot > * + * { margin-top: 1.5rem; }
.post__text .post__tags { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; list-style: none; font-size: 0.875rem; }
.post__text .post__tags li { margin: 0; }
.post__tags a { color: var(--muted); }
.post__tags a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post__text .post__sources h2 { margin: 0; font-size: 0.8125rem; letter-spacing: 1.5px; }
.post__text .post__sources ul { margin-top: 0.5rem; padding: 0; list-style: none; font-size: 0.875rem; }
.post__share { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--ink); font-size: 0.875rem; }
.post__share .icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
.post__share:hover span { text-decoration: underline; text-underline-offset: 3px; }
.post__next { display: grid; gap: 1rem; margin-top: 2.5rem; }
.post__next-link { display: block; padding-block: 0.875rem; border-top: 1px solid var(--ink); color: var(--ink); }
.post__next-link small { display: block; font-size: 0.75rem; color: var(--muted); }
.post__next-link span { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.15; text-transform: uppercase; }
.post__next-link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.post-related { padding-block: 2rem 3.5rem; }
.post-related__title { margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
@media (min-width: 48em) {
  .post__next { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .post__next-link--older { grid-column: 2; text-align: right; }
}
@media (min-width: 64em) {
  .post__open { grid-template-columns: minmax(0, 1fr) 26rem; gap: 3rem; padding-top: 1.75rem; padding-inline: calc(var(--pad) + 0.5625rem); }
  .post__intro { padding-bottom: 0.25rem; }
  .post__crumbs { margin-bottom: auto; }
  .post__title { margin-top: 3rem; }
  .post__cover { margin: 0; }
  .post__cover figcaption { padding-inline: 0; }
  .post__body { justify-content: center; grid-template-columns: minmax(0, 44rem); padding-top: 3.5rem; padding-inline: calc(var(--pad) + 0.5625rem); }
  .post__body--toc { grid-template-columns: 14rem minmax(0, 44rem); justify-content: start; gap: 4rem; }
  .post__toc { position: sticky; top: 1.5rem; align-self: start; padding-bottom: 0; border-bottom: 0; }
  .post__next, .post-related { padding-inline: calc(var(--pad) + 0.5625rem); }
  .post-related { padding-block: 2.5rem 4rem; }
}
.post__expired { padding: 0.75rem var(--pad); background: #fbf6f2; font-size: 0.9375rem; text-align: center; color: var(--ink); }
.post__expired a { text-decoration: underline; text-decoration-color: #d9a98f; text-underline-offset: 3px; }