/* ============================================================
   ARAM Natura B2B — KATALOG + KARTA PRODUKTU (shop.css)
   Odtworzenie 1:1 makiet: docs/design-ref/katalog.dc.html
   oraz docs/design-ref/produkt.dc.html.

   Buduje na ds.css (tokeny :root, .eyebrow, .pcard/.addb, .stepper,
   details.faq, .reveal/.in, .imgzoom, .container-1340). NIE redefiniuje
   tych klas — tylko korzysta z nich i dokłada warstwę sklepu.

   Wszystkie kolory przez zmienne --cream-*, --ink, --accent, --green…
   Bez Fraunces/Inter — jedyna rodzina to Figtree (z ds.css/body).
   Respektuje prefers-reduced-motion (gate reveal + wyłączenie ruchu).
   ============================================================ */

/* ============================================================
   0) REVEAL — brama lokalna sklepu (.aram-shop-js dodaje shop.js)
   Niezależna od globalnego .aram-js wtyczki. Bez JS: treść widoczna.
   ============================================================ */
.aram-shop-js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .85s var(--ease), transform .85s var(--ease);
	/* BEZ trwałego `will-change` — na karcie produktu obejmuje sekcje powiązanych
	   produktów i wszystkie .pcard POD akordeonem; trzymanie ich na stałych
	   warstwach GPU powoduje migotanie/repaint przy ruchu kursora w ich okolicy
	   („mruganie poza FAQ”). will-change ma być chwilowe, nie stałe. */
}
.aram-shop-js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }
.aram-shop-js .aram-grid > [data-reveal]:nth-child(3n+2) { transition-delay: .05s; }
.aram-shop-js .aram-grid > [data-reveal]:nth-child(3n+3) { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
	.aram-shop-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   1) POWŁOKA — offset pod stały header + kontener 1340
   Header jest position:fixed (.aram-hd, ~78px solid). Treść sklepu
   musi go ominąć; mockupowy padding górny (56/64px) liczymy NA RAZIE
   ponad wysokością headera (--header-h).
   ============================================================ */
.aram-shop,
.aram-product {
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-shop *,
.aram-product * { box-sizing: border-box; }

/* ---------- FULL-BLEED ----------
   Szablony klasyczne Woo renderują treść wewnątrz
   <main class="aram-main wp-block-group is-layout-constrained"> (header.php),
   co kapuje bezpośrednie dzieci do contentSize (1200px z theme.json). Nie możemy
   edytować header.php/theme.json, więc neutralizujemy to techniką 100vw: sekcja
   rozlewa się na CAŁĄ szerokość okna (tło pełnej szerokości), a wewnętrzny
   kontener .aram-bleed__inner centruje treść do 1340px. Działa też, gdy rodzic
   NIE jest constrained (margin/padding się zerują w naturalny sposób). */
.aram-bleed {
	width: 100vw;
	/* !important pokonuje rdzeniową regułę layoutu WP:
	   .is-layout-constrained > :where(...) { max-width:…; margin-left/right:auto !important }
	   (header.php owija treść w .aram-main.is-layout-constrained — nieedytowalny). */
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.aram-bleed__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

/* Katalog: tło kremowe (jak body), pełna szerokość. */
.aram-shop {
	background: var(--cream-bg);
}
.aram-shop .aram-shop__inner {
	padding-top: calc(var(--header-h) + 56px);
	padding-bottom: 100px;
}

/* Karta produktu: pełnoszerokościowe tło --cream-2 + wewnętrzny kontener.
   overflow:visible nadpisuje niezamierzoną regułę pluginu aram-b2b
   (plugins/aram-b2b/assets/css/front.css .aram-product { overflow:hidden } —
   to inny komponent, karta produktu w gridzie katalogu, ale ta sama nazwa
   klasy koliduje z <main class="aram-product"> na stronie pojedynczego
   produktu). overflow:hidden na tym przodku łamał position:sticky galerii
   (.aram-psticky) — sticky liczy się względem najbliższego przodka z
   overflow innym niż visible, więc zamiast trzymać się viewportu, "sticky"
   przyklejał się do tego (nieograniczonego wysokościowo) kontenera i wypadał
   z niego natychmiast przy scrollu. */
.aram-product {
	background: var(--cream-2);
	overflow: visible;
}
.aram-product .aram-product__inner {
	padding-top: calc(var(--header-h) + 64px);
	padding-bottom: 100px;
}

/* ============================================================
   2) KATALOG — breadcrumb
   ============================================================ */
.aram-shop__crumb {
	font-size: 13px;
	color: var(--text-faint);
	margin-bottom: 28px;
}
.aram-shop__crumb a { color: var(--text-faint); transition: color .3s var(--ease); }
.aram-shop__crumb a:hover { color: var(--accent); }
.aram-shop__crumb .is-current { color: var(--ink-text); }

/* ---------- Nagłówek: H + licznik + sort ---------- */
.aram-shop__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}
.aram-shop__title {
	font-size: clamp(30px, 4vw, 56px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
}
.aram-shop__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }
.aram-shop__head-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.aram-shop__count {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0;
}
.aram-shop__count strong { color: var(--ink-text); font-weight: 600; }

/* Sort jako natywny select stylizowany na „Sortuj: Polecane ▾” */
.aram-shop__sort { display: inline-flex; align-items: center; }
.aram-shop__sort label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.aram-shop__sort select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1A17' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right center;
	background-size: 12px 12px;
	padding: 0 20px 0 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-text);
	cursor: pointer;
}
/* accent-ink zamiast accent: obwódka wymaga 3:1 (1.4.11/2.4.13) — accent
   daje tylko 2.2:1 na jasnym tle sklepu, accent-ink 7.5+:1 (AAA). */
.aram-shop__sort select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; }

/* ---------- Chipy aktywnych filtrów ---------- */
.aram-shop__active {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.aram-shop__active-label { font-size: 13px; color: var(--text-faint); }
.aram-chipf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--line-2);
	padding: 7px 12px;
	border-radius: var(--r-pill);
	color: var(--ink-text);
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.aram-chipf:hover { border-color: var(--field-3); box-shadow: 0 4px 14px -8px rgba(20,19,15,.3); }
.aram-chipf svg { display: block; }
.aram-shop__clear {
	font-size: 13px;
	color: var(--accent);
	font-weight: 600;
	margin-left: 6px;
	transition: color .3s var(--ease);
}
.aram-shop__clear:hover { color: var(--accent-ink); }

/* ---------- Ciemny baner B2B (ciężarówka + CTA) ---------- */
.aram-shop__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--ink);
	color: var(--cream-bg);
	border-radius: 12px;
	padding: 24px 32px;
	margin-bottom: 38px;
	flex-wrap: wrap;
}
.aram-shop__banner-main { display: flex; align-items: center; gap: 20px; }
.aram-shop__banner-ic {
	width: 48px; height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(254,132,12,.094); /* #FE840C18 */
	display: flex; align-items: center; justify-content: center;
}
.aram-shop__banner-ic svg { display: block; }
.aram-shop__banner-title { font-size: 18px; font-weight: 500; }
.aram-shop__banner-sub { font-size: 13.5px; color: var(--text-on-dark); }
.aram-shop__banner-cta {
	font-size: 14px;
	font-weight: 600;
	background: var(--accent);
	/* ink zamiast #fff — 2.46:1 → 7.08:1 AAA (patrz ds.css .aram-hd__cta). */
	color: var(--ink);
	padding: 13px 26px;
	border-radius: var(--r-pill);
	white-space: nowrap;
	transition: transform .4s var(--ease-spring), box-shadow .4s ease;
}
.aram-shop__banner-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254,132,12,.6); }

/* Belka „Więcej znaczy taniej" (aram_theme_render_pricing_bar) — lista reguł
   faktycznie aktywnych na platformie, jako chipy zawijające się w wierszu pod
   nagłówkiem/lead .aram-shop__banner. Ten sam ciemny kontener co reszta banera. */
.aram-rules-bar .aram-shop__banner-sub { margin-bottom: 4px; }
.aram-rules-bar__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.aram-rules-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--text-on-dark);
}
.aram-rules-bar__item svg { flex-shrink: 0; color: var(--accent); }

/* ============================================================
   3) KATALOG — layout 230px / 1fr
   ============================================================ */
.aram-shop__body {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 48px;
	align-items: start;
}

/* ---------- Sidebar filtrów (align/margin: patrz sekcja 13) ---------- */
.aram-filters__group {
	border-bottom: 1px solid var(--line-2);
	padding-bottom: 22px;
	margin-bottom: 22px;
}
.aram-filters__group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.aram-filters__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
	color: var(--ink-text);
	text-transform: uppercase;
}
.aram-filters__list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	font-size: 14.5px;
	color: #3a3833;
}
/*
 * .aram-fopt — teraz <label> owijający prawdziwy <input type="checkbox">
 * (klasa .aram-fopt__input, wizualnie ukryty) zamiast linku <a> — pozwala
 * zaznaczyć KILKA opcji naraz, zastosowywanych dopiero przyciskiem „Zastosuj
 * filtry" (submit formularza .aram-filters). Stan zaznaczenia sterowany
 * natywnym :checked (bez potrzeby dodawania/zdejmowania klasy JS-em) —
 * ptaszek SVG w .aram-fopt__box widoczny wyłącznie gdy input jest checked.
 */
.aram-fopt {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	color: inherit;
	transition: color .25s var(--ease);
}
.aram-fopt:hover { color: var(--ink-text); }
/* Input natywny: zachowany w DOM (focus/aria/klawiatura), wizualnie ukryty —
   nie display:none, żeby fokus klawiaturą pozostał widoczny i dostępny. */
.aram-fopt__input {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.aram-fopt__box {
	width: 18px; height: 18px;
	flex-shrink: 0;
	border-radius: 5px;
	border: 1.5px solid var(--field-3);
	display: flex; align-items: center; justify-content: center;
	transition: background .25s var(--ease), border-color .25s var(--ease);
}
.aram-fopt__box svg { display: none; }
.aram-fopt__input:checked ~ .aram-fopt__box {
	background: var(--accent);
	border-color: var(--accent);
	/* Ptaszek dziedziczy przez currentColor (svg stroke="currentColor") —
	   biały dawał 2.46:1 (FAIL 3:1 dla obiektów graficznych, 1.4.11), ink = 7.08:1 (AAA). */
	color: var(--ink);
}
.aram-fopt__input:checked ~ .aram-fopt__box svg { display: block; }
/* Fokus klawiaturą (Tab) na checkboxie — widoczna obwódka na kwadraciku.
   accent-ink zamiast accent (2.2:1 FAIL → 7.5+:1 AAA, patrz --accent-ink). */
.aram-fopt__input:focus-visible ~ .aram-fopt__box {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}
.aram-fopt__count { color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Akcje sidebaru: „Zastosuj filtry” + „Wyczyść wszystkie” ---------- */
.aram-filters__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--line-2);
}
.aram-filters__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--accent);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	padding: 13px 20px;
	border: none;
	border-radius: var(--r-pill);
	cursor: pointer;
	font-family: inherit;
}
.aram-filters__reset {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	transition: color .25s var(--ease);
}
.aram-filters__reset:hover { color: var(--accent-ink); }

/* Suwak ceny netto (dwa uchwyty — wizualny + opcjonalnie sterowany JS) */
.aram-range__track {
	height: 3px;
	background: var(--field-2);
	border-radius: 2px;
	position: relative;
	margin: 0 3px 12px;
}
.aram-range__fill {
	position: absolute;
	top: 0; height: 3px;
	background: var(--accent);
	border-radius: 2px;
}
.aram-range__knob {
	position: absolute;
	top: -5px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--accent);
	transform: translateX(-50%);
	cursor: grab;
	touch-action: none;
	z-index: 2;
}
/* Strefa dotykowa ≥24×24 (WCAG 2.5.8 Target Size Minimum) — wizualna kropka
   zostaje 13px, niewidoczny ::before tylko rozszerza obszar kliku/dotyku
   (zdarzenia na pseudo-elemencie trafiają w hosta, więc JS nie wymaga zmian). */
.aram-range__knob::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	transform: translate(-50%, -50%);
}
.aram-range__knob:active { cursor: grabbing; }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-range__knob:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.aram-range__labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
/* Ręczne pola zakresu ceny (noscript fallback) */
.aram-range__manual { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.aram-range__manual input {
	width: 64px;
	font-family: inherit;
	font-size: 13px;
	padding: 7px 8px;
	border: 1.5px solid var(--field-1);
	border-radius: 8px;
	background: #fff;
}
.aram-range__manual button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
	border: none;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: var(--ink);
	cursor: pointer;
}

/* ============================================================
   4) KATALOG — grid 3 kolumny kart .pcard
   ============================================================ */
.aram-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ---------- Karta .pcard (wspólny markup z home/shortcode) ---------- */
.pcard {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.pcard__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	position: relative;
	background: var(--cream-2);
}
.pcard__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* Nakładki/badge (PAKIET 1) — do 2 naraz, sztaplowane pionowo: priorytet
   bestseller > nowość (sprzedaż/świeżość), osobno BIO (certyfikacja) i
   niski stan (pilność). Pozycjonowanie na wrapperze, pigułki same są
   statyczne w przepływie flex — prostsze niż liczyć offsety per badge. */
.pcard__badges {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.pcard__badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
/* Kolor tekstu OSOBNO per wariant — biały na zieleni daje 5.7:1 (AA), ale na
   akcencie tylko 2.46:1 (FAIL); na akcencie/ink tekst musi być odwrotny
   (7:1+, AAA). Niski stan: biało tło + terakota (~8.7:1, AAA). */
.pcard__badge--bio  { background: var(--green); color: #fff; }
.pcard__badge--new  { background: var(--accent); color: var(--ink); }
.pcard__badge--best { background: var(--ink); color: var(--accent); }
.pcard__badge--low  { background: #fff; color: #A6431F; box-shadow: inset 0 0 0 1px rgba(166,67,31,.35); }

/* ---------- Serduszko ulubionych (kafelek katalogu) ---------- */
.aram-fav {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 3;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.92);
	color: var(--text-muted-2, #3E3B34);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: transform .25s var(--ease, ease), color .2s ease, background .2s ease;
}
/* Obszar klikalny powiększony do 44×44 (WCAG 2.5.5 AAA) bez zmiany rozmiaru
   wizualnego (34×34) — niewidoczny pseudo-element ::before. */
.aram-fav::before {
	content: "";
	position: absolute;
	inset: -5px;
}
.aram-fav:hover { background: #fff; transform: scale(1.08); }
.aram-fav:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.aram-fav svg { display: block; pointer-events: none; }
.aram-fav.is-active { color: var(--accent); }
.aram-fav.is-bump { animation: aramFavBump .4s var(--ease, ease); }
/* Usunięcie z ulubionych: tylko delikatny shrink (bez rozprysku cząstek). */
.aram-fav.is-shrink { animation: aramFavShrink .28s var(--ease, ease); }
@keyframes aramFavShrink {
	0% { transform: scale(1); }
	50% { transform: scale(.88); }
	100% { transform: scale(1); }
}

/* Modyfikator „mały" — miniatura 62×62 w tabeli „Najczęściej zamawiane"
   (sekcja 04 strony głównej, class-shortcodes.php::ds_render_table).
   22×22 wizualnie (przestrzeń ograniczona miniaturą 62×62 — 44×44 by
   nachodziło na sąsiednie komórki tabeli); obszar klikalny powiększony do
   28×28 przez ::before — świadomie AA (24×24), nie AAA, z powodu layoutu. */
.aram-fav--sm { top: 4px; right: 4px; width: 22px; height: 22px; }
.aram-fav--sm svg { width: 12px; height: 12px; }
.aram-fav--sm::before { inset: -3px; }

@keyframes aramFavBump {
	0% { transform: scale(1); }
	40% { transform: scale(1.28); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.aram-fav.is-bump,
	.aram-fav.is-shrink { animation: none; }
}

.pcard__expiry { font-size: 11px; color: var(--text-faint); margin: -8px 0 10px; }

/* „Ogląda X klientów” — lekki licznik (aram_theme_viewers_count), pokazywany
   tylko na części kafli, patrz PAKIET 1. */
.pcard__viewers {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--accent-ink, #b85e06);
	margin: -8px 0 10px;
}
.pcard__viewers svg { flex-shrink: 0; display: block; }

.pcard__body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard__cat { font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
.pcard__name {
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 14px;
	min-height: 40px;
	color: var(--ink-text);
}
.pcard__name a { color: inherit; }
/* Klikalność całej karty z fokusem na nazwie (a11y). */
.pcard__name a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pcard__foot {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}
.pcard__price-val { font-size: 20px; font-weight: 500; color: var(--ink-text); font-variant-numeric: tabular-nums; }
.pcard__price-unit { font-size: 11px; color: var(--text-faint); }
.pcard__srp { display: block; margin-top: 2px; }

/* Okrągły „+” (dodaj do koszyka) — na hover obrót przez .addb (ds.css).
   Rozmiar wizualny zostaje 38×38 (spójny z kartą), ale obszar KLIKALNY
   powiększony do 44×44 przez niewidoczny pseudo-element (::before) —
   WCAG 2.5.5 (AAA, 44×44) bez zmiany layoutu/wyglądu karty. */
.pcard__add {
	width: 38px; height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--accent);
	/* ink zamiast #fff — glif "+" biały na akcencie = 2.46:1 (FAIL), ink = 7.08:1 (AAA). */
	color: var(--ink);
	border: none;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	z-index: 2;
	padding: 0;
	line-height: 1;
	font-family: inherit;
}
.pcard__add::before {
	content: "";
	position: absolute;
	inset: -3px;
}
.pcard__add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Lock — „Zaloguj się, by zobaczyć cenę” */
.pcard__lock {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--cream-2);
	border-radius: var(--r-pill);
	padding: 10px 14px;
	width: 100%;
	position: relative;
	z-index: 2;
	transition: background .3s var(--ease);
}
.pcard__lock:hover { background: var(--cream-3); }
.pcard__lock svg { flex-shrink: 0; display: block; }
.pcard__lock span { font-size: 12px; color: var(--text-muted-2); }

/* Mini-form quick-add wewnątrz karty (zachowuje akcję/nonce WC). */
.pcard__form { margin: 0; position: relative; z-index: 2; }
.pcard__add.loading { opacity: .55; pointer-events: none; }
.pcard__add.added { background: var(--green); }

/* ============================================================
   4bis) QUICK-ADD — popover ilości (desktop) / bottom-sheet (mobile)
   Otwierany klikiem na .pcard__add (okrągły „+” kafelka katalogu).
   Markup wstrzykiwany przez shop.js (bindQuickAddPopup), jeden popover
   reużywany dla wszystkich kart. Zamyka: ESC, klik poza, „Dodaj do koszyka”.
   ============================================================ */
.aram-qpop {
	position: fixed;
	z-index: 1200;
	width: 280px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 70px -24px rgba(21, 20, 15, .38), 0 2px 10px rgba(21, 20, 15, .08);
	border: 1px solid var(--line-1);
	padding: 18px;
	font-family: 'Figtree', system-ui, sans-serif;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px) scale(.98);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.aram-qpop.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.aram-qpop * { box-sizing: border-box; }

.aram-qpop__overlay {
	position: fixed;
	inset: 0;
	z-index: 1190;
	background: transparent;
	opacity: 0;
	visibility: hidden;
}
.aram-qpop__overlay.is-open { visibility: visible; }

.aram-qpop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.aram-qpop__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink-text); }
.aram-qpop__close {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	background: var(--cream-2);
	border: none;
	border-radius: 50%;
	color: var(--text-muted);
	cursor: pointer;
}
.aram-qpop__close:hover { background: var(--cream-3); color: var(--ink-text); }
.aram-qpop__close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.aram-qpop__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aram-qpop__unit { font-size: 12px; color: var(--text-faint); }

.aram-qpop .stepper { flex-shrink: 0; }
.aram-qpop .aram-qty__input {
	width: 46px; height: 42px;
	border: none;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	background: transparent;
	font-family: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
	color: var(--ink-text);
}
.aram-qpop .aram-qty__input::-webkit-outer-spin-button,
.aram-qpop .aram-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aram-qpop .stepper .b:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

.aram-qpop__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 0;
	border-top: 1px dashed var(--line-2);
	margin-bottom: 14px;
}
.aram-qpop__total-lbl { font-size: 12px; color: var(--text-muted); }
.aram-qpop__total-val { font-size: 19px; font-weight: 600; color: var(--ink-text); font-variant-numeric: tabular-nums; }
/* Przeliczanie progu rabatowego w locie (patrz shop.js updateTotal/fetchPriceForQty) — spójne z .aram-qpop__submit.is-loading. */
.aram-qpop__total-val.is-loading { opacity: .55; }

/* Pasek postępu progu rabatowego wewnątrz popovera ilości (patrz shop.js
   bindQuickAddPopup renderTierProgress) — węższy kontekst niż buy-box. */
.aram-qpop .aram-tprog { margin-bottom: 14px; }
.aram-qpop .aram-tprog__msg { font-size: 12px; }

.aram-qpop__submit {
	width: 100%;
	height: 46px;
	border: none;
	border-radius: var(--r-pill);
	background: var(--accent);
	/* ink zamiast #fff (2.46:1 FAIL → 7.08:1 AAA). */
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.aram-qpop__submit:hover { filter: brightness(.96); }
.aram-qpop__submit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.aram-qpop__submit.is-loading { opacity: .6; pointer-events: none; }
.aram-qpop__submit.is-added { background: var(--green); }

/* Mobile: bottom-sheet full-width zamiast popovera przy karcie. */
@media (max-width: 640px) {
	.aram-qpop {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		top: auto;
		width: 100%;
		max-width: 100%;
		border-radius: 20px 20px 0 0;
		padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
		transform: translateY(100%);
		box-shadow: 0 -20px 60px -20px rgba(21, 20, 15, .3);
	}
	.aram-qpop.is-open { transform: translateY(0); }
	.aram-qpop__overlay.is-open { background: rgba(21, 20, 15, .38); }
}

@media (prefers-reduced-motion: reduce) {
	.aram-qpop { transition: none; }
}

/* ============================================================
   5) KATALOG — paginacja (okrągłe przyciski)
   ============================================================ */
/* UWAGA specyficzność: domyślny arkusz WooCommerce styluje paginację
   selektorami `.woocommerce nav.woocommerce-pagination ul li ...`, które
   wygrywały z naszymi (szare sklejone pudełka dobite do lewej). Poniższe
   selektory celowo powtarzają nav/ul/li, żeby ZAWSZE nadpisać Woo. */
.aram-shop__pagination {
	margin-top: 48px;
	/* Div paginacji jest 3. dzieckiem grida .aram-shop__body — auto-placement
	   wrzucał go do kolumny SIDEBARA (przyciski dobite do lewej). Ma być
	   wycentrowany pod siatką produktów (2. kolumna). */
	grid-column: 2;
}
@media (max-width: 980px) {
	.aram-shop__pagination { grid-column: 1; } /* body = 1 kolumna */
}
.aram-shop__pagination nav.woocommerce-pagination { text-align: center; }
.aram-shop__pagination nav.woocommerce-pagination ul,
.aram-pager {
	display: flex !important;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	white-space: normal;
}
.aram-shop__pagination nav.woocommerce-pagination ul li {
	border: 0 !important;
	margin: 0;
	float: none;
	overflow: visible;
}
.aram-shop__pagination nav.woocommerce-pagination ul li a.page-numbers,
.aram-shop__pagination nav.woocommerce-pagination ul li span.page-numbers,
.aram-pager__btn {
	width: 44px; height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #00000018;
	background: #fff;
	color: var(--ink-text);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 0;
	min-width: 0;
	text-decoration: none;
	transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.aram-shop__pagination nav.woocommerce-pagination ul li a.page-numbers:hover,
.aram-pager__btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: #fff;
	transform: translateY(-2px);
}
.aram-shop__pagination nav.woocommerce-pagination ul li span.page-numbers.current,
.aram-pager__btn.is-current {
	background: var(--ink-text);
	border-color: var(--ink-text);
	color: #fff;
}
.aram-shop__pagination nav.woocommerce-pagination ul li span.page-numbers.dots,
.aram-pager__btn.is-dots { border: 1px solid #00000018; color: var(--text-faint); background: #fff; }

/* ---------- Pusty stan ---------- */
.aram-empty { text-align: center; padding: clamp(48px, 8vw, 110px) 22px; grid-column: 1 / -1; }
.aram-empty img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; margin: 0 auto 22px; opacity: .7; }
.aram-empty__title { font-size: clamp(24px, 3vw, 34px); font-weight: 300; letter-spacing: -0.02em; margin: 0 0 10px; }
.aram-empty__text { color: var(--text-muted); margin: 0 0 22px; }
.aram-empty .btn-fill {
	display: inline-block;
	background: var(--accent); color: var(--ink);
	font-size: 14px; font-weight: 600;
	padding: 13px 26px; border-radius: var(--r-pill);
}

/* ============================================================
   6) KARTA PRODUKTU — breadcrumb
   ============================================================ */
.aram-pcrumb { font-size: 13px; color: var(--text-faint); margin-bottom: 32px; }
.aram-pcrumb a { color: var(--text-faint); transition: color .3s var(--ease); }
.aram-pcrumb a:hover { color: var(--accent); }
.aram-pcrumb .is-current { color: var(--ink-text); }

/* ---------- Layout split 0.92fr / 1.08fr ----------
   align-items: stretch (domyślne grid) — .aram-pleft musi mieć wysokość
   całego wiersza (czyli tyle co .aram-pright), żeby wewnętrzny sticky
   (.aram-psticky) mógł „jechać” aż do końca kolumny prawej zamiast
   odklejać się w połowie, gdy galeria jest niższa niż treść po prawej. */
.aram-psplit {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: 56px;
	align-items: stretch;
}

/* ============================================================
   7) KARTA — lewa sticky: zdjęcie + miniatury + „Do pobrania”
   .aram-pleft: rozciągnięty na pełną wysokość wiersza grid (bez position).
   .aram-psticky: właściwy sticky wewnątrz — odkleja się dokładnie na końcu
   .aram-psplit (czyli PRZED sekcją „Pełny opis (SEO)”, bo ta sekcja jest
   poza kontenerem dwukolumnowym w znaczniku).
   ============================================================ */
.aram-pleft {
	display: flex;
	flex-direction: column;
}
.aram-psticky {
	position: sticky;
	top: calc(var(--header-h) + 12px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.aram-pstage {
	aspect-ratio: 1;
	border-radius: var(--r-card);
	overflow: hidden;
	position: relative;
	background: #fff;
	margin: 0;
}
.aram-pstage img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nakładki/badge karty produktu (PAKIET 1) — do 3 naraz, sztaplowane pionowo
   nad galerią (bestseller/nowość, BIO, niski stan). Analogiczne do
   .pcard__badges w kaflu katalogu. */
.aram-pstage__badges {
	position: absolute;
	top: 18px; left: 18px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.aram-pstage__badge {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
.aram-pstage__badge--bio  { background: var(--green); color: #fff; }
.aram-pstage__badge--new  { background: var(--accent); color: var(--ink); }
.aram-pstage__badge--best { background: var(--ink); color: var(--accent); }
.aram-pstage__badge--low  { background: #fff; color: #A6431F; box-shadow: inset 0 0 0 1px rgba(166,67,31,.35); }

.aram-pthumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 14px;
}
.aram-pthumb {
	aspect-ratio: 1;
	border-radius: 5px;
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--cream-2);
	cursor: pointer;
	padding: 0;
	transition: border-color .3s var(--ease);
}
.aram-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aram-pthumb.is-active { border-color: var(--accent); }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-pthumb:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Karta „Do pobrania” */
.aram-pdl {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 12px;
	padding: 18px 20px;
}
.aram-pdl__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-text);
	margin-bottom: 4px;
}
.aram-pdl__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--line-1);
	color: var(--ink-text);
	transition: color .25s var(--ease);
}
.aram-pdl__link:hover { color: var(--accent-ink); }
.aram-pdl__link svg { flex-shrink: 0; color: var(--accent); display: block; }
.aram-pdl__link span { font-size: 13.5px; }
.aram-pdl__link .muted { color: var(--text-faint); }

/* ============================================================
   8) KARTA — prawa kolumna: nagłówek + buy box
   ============================================================ */
.aram-pright { min-width: 0; }
.aram-pright__cat { font-size: 13px; color: var(--green); font-weight: 600; margin-bottom: 12px; }
.aram-pright__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.aram-pright__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}
.aram-pright__fav {
	/* MUSI być relative (nie static): base .aram-fav ma ::before {position:absolute;
	   inset:-5px} jako powiększacz strefy kliknięcia. Przy position:static ::before
	   pozycjonuje się względem najbliższego pozycjonowanego przodka (.aram-product =
	   cała strona) i inset:-5px rozciąga NIEWIDZIALNY ::before na cały ekran, zjadając
	   kliknięcia w akordeon i buy-box („mruga i nie klika"). relative zamyka ::before
	   w obrębie przycisku. */
	position: relative;
	flex-shrink: 0;
	margin-top: 4px;
	width: 44px; height: 44px;
	background: var(--cream-2, #EFE9DD);
}
.aram-pright__fav:hover { background: var(--cream-3, #E9E1D0); }
.aram-pright__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }

/* Akcje obok tytułu produktu: serduszko ulubionych + „Dodaj do listy". */
.aram-pright__head-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-top: 4px;
}
.aram-pright__head-actions .aram-pright__fav { margin-top: 0; }

/* „Dodaj do listy" (buy-box) — pill z ikoną + etykietą, spójny z .aram-fav
   kolorystycznie, ale szerszy (ma tekst). Popover renderowany JS-owo
   (aram-account/assets/shopping-lists.js, klasa .aram-sl-pop). */
.aram-addlist {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: none;
	background: var(--cream-2, #EFE9DD);
	color: var(--text-muted-2, #75716A);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.aram-addlist:hover { background: var(--cream-3, #E9E1D0); color: var(--accent-ink, #b85e06); }
.aram-addlist svg { flex-shrink: 0; }

@media (max-width: 560px) {
	.aram-addlist__txt { display: none; }
	.aram-addlist { width: 44px; height: 44px; padding: 0; justify-content: center; }
}
.aram-pright__lead {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--text-muted-2);
	margin: 0 0 28px;
	max-width: 60ch;
}

/* „Ogląda X klientów” — lekki licznik (aram_theme_viewers_count), PAKIET 1. */
.aram-pright__viewers {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent-ink, #b85e06);
	margin: -18px 0 24px;
}
.aram-pright__viewers svg { flex-shrink: 0; display: block; }

/* ---------- Buy box (biała karta) ---------- */
.aram-buy {
	background: #fff;
	border-radius: var(--r-card);
	padding: 26px;
	margin-bottom: 22px;
}
.aram-buy__priceline {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.aram-buy__price {
	font-size: 38px;
	font-weight: 400;
	color: var(--ink-text);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.aram-buy__price-unit { font-size: 14px; color: var(--text-faint); }
.aram-buy__srp { margin: -14px 0 22px; }
.aram-buy__disc {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--green-dark);
	font-weight: 600;
	background: rgba(117,135,69,.094); /* #75874518 */
	padding: 6px 13px;
	border-radius: var(--r-pill);
}

/* ---------- Pasek postępu „ile brakuje do niższej ceny" (progi rabatowe) ----------
   Współdzielony przez buy-box karty produktu, koszyk/checkout (wariant
   --compact) i popup ilości (wariant --compact, wewnątrz .aram-qpop).
   Wygląd 1:1 z istniejącym paskiem darmowej dostawy (.aram-cart__ship-track/
   -fill w cart-totals.php) — spójny język wizualny „postępu do korzyści". */
.aram-tprog { margin-bottom: 22px; }
.aram-tprog__track {
	height: 6px;
	background: var(--field-1);
	border-radius: 100px;
	overflow: hidden;
}
.aram-tprog__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), #ffa748);
	border-radius: 100px;
	transition: width .5s var(--ease);
}
.aram-tprog__msg {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--green-darker);
	display: flex;
	align-items: center;
	gap: 6px;
}
.aram-tprog__msg--best svg { flex-shrink: 0; color: var(--green); }
.aram-tprog--compact { margin-bottom: 0; }
.aram-tprog--compact .aram-tprog__track { height: 4px; }
.aram-tprog--compact .aram-tprog__msg { font-size: 12px; margin-top: 5px; }

/* Lock w buy boxie (gość) */
.aram-buy__lock {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}
.aram-buy__lock svg { flex-shrink: 0; color: var(--text-muted); }
.aram-buy__lock-txt { font-size: 15px; color: var(--ink-text); }
.aram-buy__lock-txt a { color: var(--green); font-weight: 600; border-bottom: 1px solid currentColor; }
.aram-buy__lock-txt a:hover { color: var(--accent); }

/* Siatka Jednostka / Karton (MOQ usunięte z UI — PAKIET 1) */
.aram-buy__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line-1);
	margin-bottom: 22px;
}
.aram-buy__spec-k { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; }
.aram-buy__spec-v { font-size: 14.5px; font-weight: 500; color: var(--ink-text); }

/* Akcja: stepper + duży przycisk */
.aram-buy__order {
	display: flex;
	gap: 12px;
	align-items: center;
}
/* Stepper-lg na bazie .stepper (ds.css) — większe pola */
.aram-buy__order .stepper { flex-shrink: 0; }
.aram-buy__order .stepper .b { width: 42px; height: 48px; font-size: 20px; }
.aram-buy__order .stepper input.aram-qty__input {
	width: 48px;
	border: none;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-text);
	background: transparent;
	font-family: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}
.aram-buy__order .stepper input.aram-qty__input::-webkit-outer-spin-button,
.aram-buy__order .stepper input.aram-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* outline:none bezpieczny TYLKO z zamiennikiem: pierścień do wnętrza pola,
   widoczny mimo braku własnej ramki inputu (2.4.7/2.4.13). */
.aram-buy__order .stepper input.aram-qty__input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--accent-ink);
	border-radius: 4px;
}

.aram-buy__cta {
	flex: 1;
	border: none;
	cursor: pointer;
	background: var(--accent);
	/* ink zamiast #fff (2.46:1 FAIL → 7.08:1 AAA) — svg wewnątrz dziedziczy
	   przez currentColor, patrz `.aram-buy__cta svg` niżej. */
	color: var(--ink);
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	padding: 15px;
	border-radius: var(--r-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	transition: transform .4s var(--ease-spring), box-shadow .4s ease;
}
.aram-buy__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254,132,12,.6); }
.aram-buy__cta svg { display: block; }
.aram-buy__cta.loading { opacity: .6; pointer-events: none; }
.aram-buy__cta.added { background: var(--green); }

/* CTA gość (załóż konto) — pełna szerokość */
.aram-buy__cta--guest { width: 100%; }

.aram-buy__status {
	font-size: 12.5px;
	color: var(--green-dark);
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.aram-buy__status svg { flex-shrink: 0; display: block; }

/* CTA „Porozmawiaj z opiekunem” → strona Kontakt (formularz → lead w CRM) */
.aram-buy__advisor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 16px;
	border: 1.5px solid var(--line-1);
	border-radius: var(--r-pill, 100px);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-text);
	background: var(--cream-2, #FAF8F4);
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.aram-buy__advisor svg { flex-shrink: 0; color: var(--green); }
.aram-buy__advisor:hover {
	border-color: var(--green);
	color: var(--green-dark);
	background: rgba(117,135,69,.08);
}

/* ============================================================
   9) KARTA — akordeon details.faq (Opis/Skład/…/Hurt)
   .faq sam w sobie z ds.css; tutaj kontener + tabele.
   ============================================================ */
.aram-pacc { margin-bottom: 22px; }
.aram-pacc__eyebrow { margin-bottom: 6px; display: block; }
/* Ostatni details domyka dolną linią. */
.aram-pacc details.faq:last-of-type { border-bottom: 1px solid var(--line-3); }

/* Tabela wewnątrz .faq .body (Specyfikacja / Hurt) */
.aram-spectab {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 9px 20px;
	font-size: 14px;
}
.aram-spectab dt { color: var(--text-faint); margin: 0; }
.aram-spectab dd { margin: 0; color: var(--ink-text); }
.aram-pacc .body p { margin: 0 0 12px; }
.aram-pacc .body p:last-child { margin-bottom: 0; }
.aram-pacc .body b { color: var(--ink-text); }

/* Ciemna karta „Gwarancja jakości” */
.aram-guarantee {
	background: var(--ink);
	color: var(--cream-bg);
	border-radius: 12px;
	padding: 22px 24px;
}
.aram-guarantee__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}
.aram-guarantee__list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.aram-guarantee__item { display: flex; align-items: center; gap: 11px; }
.aram-guarantee__item svg { flex-shrink: 0; color: var(--green-soft); display: block; }

/* ---------- Newsletter na karcie produktu (.aram-pnews) ----------
   Kompaktowy pasek na SAMYM DOLE prawej kolumny (patrz single-product.php) —
   celowo lekki: jeden wiersz e-mail+CTA na desktopie, bez konkurowania z
   buy-boxem powyżej (to sklep B2B, nie blog). Ton „info" spójny z boxem
   informacyjnym rejestracji (tło zielone 7%, ramka 19%). */
.aram-pnews {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: rgba(117,135,69,.07);
	border: 1px solid rgba(117,135,69,.19);
	border-radius: var(--r-card, 12px);
	padding: 18px 20px;
	margin-top: 22px;
}
.aram-pnews__ic {
	flex-shrink: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	color: var(--green);
}
.aram-pnews__body { flex: 1; min-width: 0; }
.aram-pnews__text { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-text); }
.aram-pnews__row { display: flex; gap: 10px; flex-wrap: wrap; }
.aram-pnews__input {
	flex: 1;
	min-width: 180px;
	font-family: inherit;
	font-size: 13.5px;
	padding: 10px 13px;
	border: 1.5px solid var(--field-1);
	border-radius: 9px;
	background: #fff;
	color: var(--ink-text);
}
.aram-pnews__input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.aram-pnews__input[aria-invalid="true"] { border-color: #b4453a; }
.aram-pnews__submit {
	flex-shrink: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	background: var(--accent);
	border: none;
	border-radius: 9px;
	padding: 10px 18px;
	cursor: pointer;
	transition: filter .2s var(--ease);
}
.aram-pnews__submit:hover { filter: brightness(.96); }
.aram-pnews__submit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.aram-pnews__submit.is-loading { opacity: .6; pointer-events: none; }
.aram-pnews__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--text-muted);
	cursor: pointer;
}
.aram-pnews__consent input {
	flex-shrink: 0;
	width: 15px; height: 15px;
	margin-top: 1px;
	accent-color: var(--green);
	cursor: pointer;
}
.aram-pnews__consent input[aria-invalid="true"] + span { color: #b4453a; }
.aram-pnews__feedback { margin: 8px 0 0; font-size: 12px; color: #b4453a; min-height: 0; }
.aram-pnews__feedback:empty { display: none; }
.aram-pnews__success {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--green-darker);
}
.aram-pnews__success svg { flex-shrink: 0; color: var(--green); }
.aram-pnews__success:focus-visible { outline: none; }
@media (max-width: 560px) {
	.aram-pnews { flex-direction: column; }
	.aram-pnews__row { flex-direction: column; align-items: stretch; }
	.aram-pnews__submit { width: 100%; }
}

/* ============================================================
   10) KARTA — pełny opis SEO (wyśrodkowany, max 900)
   ============================================================ */
.aram-seo {
	max-width: 900px;
	margin: 90px auto 0;
	padding-top: 60px;
	border-top: 1px solid var(--line-2);
}
.aram-seo__eyebrow { margin-bottom: 22px; display: block; }
.aram-seo h2 {
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 0 0 26px;
	text-wrap: balance;
}
.aram-seo h2 em { font-weight: 500; font-style: normal; color: var(--accent-ink); }
.aram-seo > p {
	font-size: 17px;
	line-height: 1.8;
	color: #3a3833;
	margin: 0 0 20px;
}
.aram-seo h3 {
	font-size: 23px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 40px 0 12px;
}
.aram-seo h3 + p,
.aram-seo p { font-size: 16px; line-height: 1.8; color: var(--text-muted-2); margin: 0 0 18px; }
.aram-seo__fig { border-radius: 12px; overflow: hidden; margin: 36px 0; }
.aram-seo__fig img { width: 100%; display: block; }
.aram-seo__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 36px 0;
}
.aram-seo__duo .aram-seo__fig { aspect-ratio: 4/5; margin: 0; }
.aram-seo__duo .aram-seo__fig img { width: 100%; height: 100%; object-fit: cover; }
.aram-seo__list {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.aram-seo__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #3a3833;
}
.aram-seo__list svg { flex-shrink: 0; margin-top: 3px; color: var(--green); display: block; }

/* ============================================================
   11) KARTA — powiązane „Często zamawiane razem”
   ============================================================ */
.aram-prelated { margin-top: 84px; }
.aram-prelated__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 16px;
}
.aram-prelated__title {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0;
}
.aram-prelated__link {
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1.5px solid var(--ink-text);
	padding-bottom: 5px;
	color: var(--ink-text);
	transition: color .25s var(--ease), border-color .25s var(--ease);
}
.aram-prelated__link:hover { color: var(--accent); border-color: var(--accent); }
.aram-prelated__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
/* Karty powiązane reużywają .pcard; drobne dopasowanie paddingu jak w makiecie. */
.aram-prelated__grid .pcard__body { padding: 17px 19px; }
.aram-prelated__grid .pcard__name { font-size: 15px; margin-bottom: 12px; min-height: 39px; }
.aram-prelated__grid .pcard__price-val { font-size: 19px; font-weight: 600; }

/* ---------- „Ostatnio oglądane” (cookie aram_recent) ----------
   Ten sam markup/spacing co „Często zamawiane razem" — spójna sekcja na
   dole karty produktu. */
.aram-recent { margin-top: 64px; }
.aram-recent__head { margin-bottom: 28px; }
.aram-recent__title {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0;
}
.aram-recent__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.aram-recent__grid .pcard__body { padding: 17px 19px; }
.aram-recent__grid .pcard__name { font-size: 15px; margin-bottom: 12px; min-height: 39px; }
.aram-recent__grid .pcard__price-val { font-size: 19px; font-weight: 600; }

/* ============================================================
   12) RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width: 1100px) {
	.aram-shop__body { grid-template-columns: 200px 1fr; gap: 32px; }
	.aram-grid { gap: 20px; }
}
@media (max-width: 980px) {
	/* Karta produktu → jedna kolumna, lewa przestaje być sticky.
	   (Próg 980px > wymagane 860px z zadania klienta — sticky jest więc
	   wyłączone już przed 860px, w całym zakresie mobile/tablet.) */
	.aram-psplit { grid-template-columns: 1fr; gap: 36px; }
	.aram-pleft { display: block; }
	.aram-psticky { position: static; top: auto; }
	.aram-prelated__grid { grid-template-columns: repeat(2, 1fr); }
	.aram-recent__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
	/* Katalog: sidebar nad gridem (collapsywny przez <details>). */
	.aram-shop__body { grid-template-columns: 1fr; gap: 28px; }
	.aram-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.aram-grid { grid-template-columns: 1fr; }
	.aram-prelated__grid { grid-template-columns: 1fr; }
	.aram-recent__grid { grid-template-columns: 1fr; }
	.aram-buy { padding: 22px; }
	.aram-buy__price { font-size: 32px; }
	.aram-shop__banner { padding: 22px 24px; }
	.aram-shop__banner-cta { width: 100%; text-align: center; }

	/* Mniejszy padding górny powłoki sklepu/produktu/konta na mobile. */
	.aram-shop .aram-shop__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 64px; }
	.aram-product .aram-product__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 64px; }

	/* Baner B2B: ikona+tekst w pionie, nie rozpycha. */
	.aram-shop__banner-main { flex-direction: column; align-items: flex-start; gap: 14px; }

	/* Nagłówek katalogu: tytuł i meta w pionie. */
	.aram-shop__head { gap: 12px; }
	.aram-shop__title { font-size: clamp(26px, 8vw, 40px); }

	/* Miniatury produktu: 4 → 5 w jednym rzędzie bywa ciasne; zostaw 4 ale mniejsze odstępy. */
	.aram-pthumbs { gap: 10px; }

	/* Specyfikacja produktu (Jednostka/Karton) — mniejszy odstęp na tablecie. */
	.aram-buy__specs { gap: 12px; }
	.aram-buy__spec-v { font-size: 13.5px; }

	/* Tabela specyfikacji w akordeonie (160px + 1fr) — węższa etykieta. */
	.aram-spectab { grid-template-columns: 120px 1fr; gap: 8px 14px; }

	/* Powiązane karty — pełna szerokość już ustawiona wyżej. */
}

/* Bardzo wąsko (≤400px): wiersz zamawiania (stepper + duży CTA) → stack,
   bo stepper(~150px)+CTA nie mieszczą się obok siebie. Specyfikacja 1 kol. */
@media (max-width: 400px) {
	.aram-buy__order { flex-wrap: wrap; }
	.aram-buy__order .stepper { width: 100%; justify-content: center; }
	.aram-buy__order .aram-buy__cta { width: 100%; flex: 1 0 100%; }
	.aram-buy__specs { grid-template-columns: 1fr 1fr; }
	.aram-buy__price { font-size: 30px; }
	.aram-buy__priceline { gap: 8px; }
	.aram-buy__disc { margin-left: 0; }

	/* Cennik logowania: padding panelu mniejszy. */
	.aram-auth__panel { padding: 40px 20px; }
}

/* ============================================================
   13) Sidebar collapsywny na mobile (progressive)
   Na desktopie filtry zawsze widoczne; <880px chowamy pod <summary>.
   ============================================================ */
.aram-filters { align-self: start; margin: 0; }
.aram-filters__toggle { display: none; }
@media (max-width: 880px) {
	.aram-filters__details {
		display: block;
		border: 1px solid var(--line-2);
		border-radius: 12px;
		padding: 0;
		overflow: hidden;
	}
	.aram-filters__details[open] { padding-bottom: 22px; }
	.aram-filters__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		list-style: none;
		cursor: pointer;
		padding: 16px 18px;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ink-text);
	}
	.aram-filters__toggle::-webkit-details-marker { display: none; }
	.aram-filters__toggle::after {
		content: "";
		width: 10px; height: 10px;
		border-right: 2px solid var(--ink-text);
		border-bottom: 2px solid var(--ink-text);
		transform: rotate(45deg);
		transition: transform .3s var(--ease);
	}
	.aram-filters__details[open] .aram-filters__toggle::after { transform: rotate(-135deg); }
	.aram-filters__group { padding: 0 18px 22px; margin: 0 0 22px; }
	.aram-filters__group:first-of-type { padding-top: 4px; }
	/* Przycisk „Zastosuj filtry” zostaje widoczny nawet gdy panel jest zwinięty
	   (poza <details>) — z odstępem od karty filtrów zamiast wbudowanego borderu. */
	.aram-filters__actions { margin-top: 16px; padding-top: 0; border-top: none; }
}

/* ============================================================
   14) PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.pcard, .pcard .addb, .aram-pthumb, .aram-chipf,
	.aram-buy__cta, .aram-shop__banner-cta, .pcard__add,
	.aram-pdl__link, .aram-pager__btn {
		transition: none !important;
	}
	.pcard:hover,
	.aram-shop-js .pcard:hover { transform: none !important; }
	.pcard:hover .addb { transform: none; }
}

/* ============================================================
   15) LOGOWANIE / REJESTRACJA (myaccount/form-login.php)
   Full-bleed split: lewa foto marki, prawa formularz na --cream-bg.
   ============================================================ */
.aram-auth {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	min-height: calc(100vh - var(--header-h));
	background: var(--cream-bg);
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-auth * { box-sizing: border-box; }
.aram-auth__media {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 320px;
}
.aram-auth__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21,20,15,.12) 0%, rgba(21,20,15,.66) 100%);
}
.aram-auth__media-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	padding: clamp(32px, 4vw, 64px);
	color: var(--cream-bg);
	max-width: 560px;
}
.aram-auth__media-h {
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: 14px 0 12px;
	color: #fff;
}
.aram-auth__media-p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; max-width: 44ch; }

.aram-auth__panel {
	display: flex;
	align-items: center;
	padding: clamp(48px, 5vw, 80px) clamp(28px, 5vw, 96px);
}
.aram-auth__inner { width: 100%; max-width: 440px; margin: 0 auto; }
.aram-auth__inner--two { max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.aram-auth__col { min-width: 0; }
.aram-auth__col--register { border-left: 1px solid var(--line-2); padding-left: clamp(32px, 4vw, 64px); }
.aram-auth__eyebrow { color: var(--green); display: block; margin-bottom: 14px; }
.aram-auth__title {
	font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 10px;
}
.aram-auth__lead { font-size: 14.5px; color: var(--text-muted); margin: 0 0 26px; line-height: 1.6; }
.aram-auth__hint { font-size: 13.5px; color: var(--text-muted-2); margin: 0 0 18px; line-height: 1.6; }

.aram-auth__note {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	background: rgba(117,135,69,.07);
	border: 1px solid rgba(117,135,69,.19);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 26px;
}
.aram-auth__note svg { flex-shrink: 0; margin-top: 1px; }
.aram-auth__note span { font-size: 13px; color: var(--green-darker); line-height: 1.5; }

.aram-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 4px 0 22px;
}
.aram-auth__lost { font-size: 13px; color: var(--green); font-weight: 600; }
.aram-auth__lost:hover { color: var(--accent); }

/* Wiersz z linkiem wyśrodkowanym pod przyciskiem (form-lost-password.php:
   „Wróć do logowania" — pojedynczy link, bez checkboxa obok, więc justify
   center zamiast space-between odziedziczonego z .aram-auth__row bazowego). */
.aram-auth__row--center { justify-content: center; margin: 18px 0 0; }

/* ---------- Ekran potwierdzenia (lost-password-confirmation.php) ----------
   Karta wyśrodkowana w tej samej kolumnie co formularz logowania/resetu —
   ikonka koperty w kółku (odbiór wzoru z .aram-thankyou__ic), reszta treści
   dziedziczy .aram-auth__eyebrow/__title/__lead/__note już zdefiniowane wyżej. */
.aram-auth__col--confirm { text-align: center; }
.aram-auth__col--confirm .aram-auth__eyebrow { text-align: center; }
.aram-auth__col--confirm .aram-auth__note { text-align: left; }
.aram-auth__col--confirm .aram-btn { width: auto; padding-left: 34px; padding-right: 34px; }
.aram-auth__confirm-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: rgba(117, 135, 69, .12);
	color: var(--green-darker);
	margin-bottom: 18px;
}

/* ---------- Pola formularzy (wspólne dla auth i edycji konta) ---------- */
.aram-field { display: block; margin: 0 0 18px; }
.aram-form label,
.aram-field label,
.woocommerce-MyAccount-content form .form-row label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--ink-text);
}
/* Specyfika dobrana, by pokonać WooCommerce
   (.woocommerce form .form-row .input-text = 0,3,0) oraz style pól motywu blokowego.
   Stąd kontekstowe prefiksy .aram-auth / .aram-account / .woocommerce form. */
.aram-input,
.aram-auth .aram-input,
.aram-auth .aram-form .input-text,
.aram-auth .woocommerce-form .form-row .input-text,
.aram-account .aram-input,
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea,
.woocommerce form .aram-form .input-text,
.woocommerce-account .woocommerce form .form-row .input-text {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	padding: 13px 15px;
	border: 1.5px solid var(--field-1);
	border-radius: var(--r-input);
	background: #fff;
	color: var(--ink-text);
	line-height: 1.3;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.aram-input:focus,
.aram-auth .aram-form .input-text:focus,
.aram-account .aram-input:focus,
.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce form .form-row .input-text:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(254,132,12,.16);
}

/* Przycisk „pokaż hasło" (WC core, .show-password-input wstawiany przez
   password-strength-meter.js do pól type=password) renderuje się 22×22 —
   WCAG 2.5.8 Target Size Minimum wymaga ≥24×24. min-width/height nie zmienia
   wyglądu ikony (background-image WC), tylko powiększa klikalny box. */
.show-password-input { min-width: 24px; min-height: 24px; }

/* Checkbox (zielony) jak w makiecie rejestracji */
.aram-check { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: #3a3833; cursor: pointer; }
.aram-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.aram-check__box {
	width: 19px; height: 19px;
	flex-shrink: 0;
	margin-top: 1px;
	border-radius: 5px;
	border: 1.5px solid var(--field-3);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.aram-check__box svg { display: none; }
.aram-check input:checked + .aram-check__box { background: var(--green); border-color: var(--green); }
.aram-check input:checked + .aram-check__box svg { display: block; }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-check input:focus-visible + .aram-check__box { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Przyciski formularzy konta (specyfika ponad WooCommerce button).
   ink zamiast #fff: biały na akcencie = 2.46:1 (FAIL 4.5:1 — 15px/600 NIE
   kwalifikuje się jako "duży tekst", próg to 18.66px bold), ink = 7.08:1 (AAA).
   Obejmuje logowanie/rejestrację/zmianę danych konta/wiele przycisków Woo. */
.aram-btn,
.aram-auth .aram-btn,
.aram-auth .woocommerce-form .button,
.woocommerce-account .woocommerce .aram-btn,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	background: var(--accent);
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: transform .4s var(--ease-spring), box-shadow .4s ease;
}
.aram-auth .woocommerce-form .button:hover,
.woocommerce-MyAccount-content .button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254,132,12,.6); }
.aram-btn { width: 100%; }
.aram-auth__inner--two .aram-btn { width: 100%; }

/* ============================================================
   16) KONTO — pulpit (myaccount/my-account.php + navigation + dashboard)
   ============================================================ */
.aram-account {
	background: var(--cream-bg);
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-account * { box-sizing: border-box; }
.aram-account .aram-account__inner { padding-top: calc(var(--header-h) + 48px); padding-bottom: 96px; }
.aram-account__head { margin-bottom: 34px; }
.aram-account__eyebrow { color: var(--green); display: block; margin-bottom: 12px; }
.aram-account__title {
	font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0;
}
.aram-account__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }

.aram-account__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

/* ---------- Nawigacja (biała karta) ---------- */
.aram-anav {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 12px;
	padding: 14px;
	position: sticky;
	top: calc(var(--header-h) + 16px);
}
.aram-anav__status {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	line-height: 1.4;
	padding: 12px 12px;
	border-radius: 9px;
	margin-bottom: 12px;
}
.aram-anav__status svg { flex-shrink: 0; margin-top: 1px; }
.aram-anav__status--ok { background: rgba(117,135,69,.1); color: var(--green-darker); }
.aram-anav__status--pending { background: rgba(254,132,12,.1); color: var(--accent-ink); }
.aram-anav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.aram-anav li { margin: 0; border: 0; }
.aram-anav li a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-muted-2);
	transition: background .2s var(--ease), color .2s var(--ease);
}
.aram-anav li a:hover { background: var(--cream-2); color: var(--ink-text); }
.aram-anav li.is-active > a,
.aram-anav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
	background: var(--ink);
	color: var(--cream-bg);
}
.aram-anav li a[aria-current="page"] { background: var(--ink); color: var(--cream-bg); }

/* ---------- Treść konta ---------- */
.aram-account__content { min-width: 0; }
.aram-account__content > h2,
.aram-account__content > h3 {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}
.aram-account__content p { font-size: 15px; line-height: 1.7; color: var(--text-muted-2); }
.aram-account__content a { color: var(--accent-ink); }
.aram-account__content a:hover { color: var(--accent); }

/* Tabela zamówień WooCommerce w stylu systemu */
.aram-account__content table.woocommerce-orders-table,
.aram-account__content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 12px;
	overflow: hidden;
	font-size: 14px;
}
.aram-account__content table.shop_table th {
	background: var(--ink);
	color: var(--cream-bg);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 14px 16px;
	text-align: left;
}
.aram-account__content table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid var(--line-1);
	color: var(--ink-text);
}
.aram-account__content table.shop_table tr:hover td { background: var(--cream-3); }
.aram-account__content .woocommerce-Button,
.aram-account__content .button { white-space: nowrap; }

/* ---------- Pulpit (dashboard.php) ---------- */
.aram-dash__hello { font-size: 14.5px; color: var(--text-muted); margin: 0 0 22px; }
.aram-dash__hello strong { color: var(--ink-text); }
/* Link „Wyloguj się": bez tej reguły dziedziczył kolor akapitu (WCAG 1.4.3
   FAIL, zmierzone 1.32:1) i nie miał podkreślenia (WCAG 1.4.1 — link
   rozpoznawalny tylko po kolorze). accent-ink na jasnym tle daje 7.5+:1. */
.aram-dash__logout-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.aram-dash__logout-link:hover,
.aram-dash__logout-link:focus-visible { color: var(--ink-text); }
.aram-dash__banner {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 26px;
}
.aram-dash__banner strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.aram-dash__banner span { font-size: 13.5px; line-height: 1.55; }
.aram-dash__banner svg { flex-shrink: 0; margin-top: 1px; }
.aram-dash__banner--ok { background: rgba(117,135,69,.1); color: var(--green-darker); }
.aram-dash__banner--ok strong { color: var(--green-dark); }
.aram-dash__banner--pending { background: rgba(254,132,12,.09); color: var(--accent-ink); }

.aram-dash__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.aram-dash__tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 12px;
	padding: 22px 22px 24px;
	color: var(--ink-text);
	transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.aram-dash__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.aram-dash__tile-ic {
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--cream-2);
	color: var(--accent-ink);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 12px;
}
.aram-dash__tile strong { font-size: 16px; font-weight: 600; }
.aram-dash__tile small { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.aram-dash__tile--feature { background: var(--ink); color: var(--cream-bg); border-color: var(--ink); grid-column: span 2; }
.aram-dash__tile--feature small { color: var(--text-on-dark); }
.aram-dash__tile--feature .aram-dash__tile-ic { background: rgba(254,132,12,.16); color: var(--accent); }

/* ============================================================
   17) KONTO — responsywność
   ============================================================ */
@media (max-width: 980px) {
	.aram-auth { grid-template-columns: 1fr; }
	.aram-auth__media { min-height: 240px; }
	.aram-auth__inner--two { grid-template-columns: 1fr; gap: 36px; }
	.aram-auth__col--register { border-left: none; border-top: 1px solid var(--line-2); padding-left: 0; padding-top: 36px; }
	.aram-account__layout { grid-template-columns: 1fr; gap: 24px; }
	.aram-anav { position: static; }
	.aram-dash__tile--feature { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.aram-auth__row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.aram-auth__row--center { align-items: center; }
	.aram-auth__col--confirm .aram-btn { width: 100%; }
	.aram-account .aram-account__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 64px; }

	/* Kafle pulpitu — bezpieczne minimum, by nie wymuszać scrolla na 360px
	   (auto-fill minmax(220px) potrafi przekroczyć wąską kolumnę). */
	.aram-dash__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.aram-dash__tile { padding: 18px 16px 20px; }
	.aram-dash__tile--feature { grid-column: 1 / -1; }
	.aram-dash__tile strong { font-size: 15px; }

	/* Tabela zamówień konta — pozwól na scroll wewnątrz (reguła globalna w ds.css). */
	.aram-account__content table.shop_table { font-size: 13px; }
	.aram-account__content table.shop_table th,
	.aram-account__content table.shop_table td { padding: 11px 12px; }
}

/* ≤400px: kafle pulpitu w 1 kolumnie (na naprawdę wąskich telefonach). */
@media (max-width: 400px) {
	.aram-dash__grid { grid-template-columns: 1fr; }
	.aram-auth__inner { max-width: none; }
}

/* ---------- prefers-reduced-motion (konto) ---------- */
@media (prefers-reduced-motion: reduce) {
	.aram-dash__tile, .aram-input, .aram-anav li a { transition: none !important; }
	.aram-dash__tile:hover { transform: none; }
}

/* ============================================================
   18) MINI-CART W HEADERZE — ikona + badge + drawer z prawej
   Ikona w .aram-hd__actions (obok „Moje konto"). Kolor dziedziczy
   z headera (białe nad hero, ciemne po scrollu — jak login/nav).
   Drawer: panel z prawej + overlay; pasek darmowej dostawy; CTA.
   ============================================================ */
.aram-mc { position: relative; display: flex; align-items: center; }

/* Ikona koszyka (przycisk-link) */
.aram-hd__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	color: var(--cream-card);
	transition: color .5s ease, transform .35s var(--ease-spring);
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}
.aram-hd.is-solid .aram-hd__cart { color: var(--ink-text); }
.aram-hd__cart:hover { color: var(--accent); }
/* Pierścień fokusu dwukontekstowy jak reszta headera (ds.css): --accent dawał
   tylko 2.2:1 (FAIL 3:1) na obu tłach. Jasny nad hero, ink po scrollu. */
.aram-hd__cart:focus-visible { outline: 2px solid var(--cream-card); outline-offset: 2px; border-radius: 8px; }
.aram-hd.is-solid .aram-hd__cart:focus-visible { outline-color: var(--ink); }
.aram-hd__cart-ic { display: block; }

/* Badge liczby pozycji (chowany, gdy 0). ink zamiast #fff: liczba biała na
   akcencie w 11px = 2.46:1 (FAIL 4.5:1), ink = 7.08:1 (AAA). */
.aram-hd__cart-badge {
	position: absolute;
	top: 2px; right: 0;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	border-radius: 100px;
	background: var(--accent);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--cream-bg);
	transform: scale(0);
	transition: transform .35s var(--ease-spring);
	pointer-events: none;
}
.aram-hd.is-solid .aram-hd__cart-badge { box-shadow: 0 0 0 2px #fff; }
.aram-hd__cart.has-items .aram-hd__cart-badge { transform: scale(1); }

/* Bump przy dodaniu (klasa dokładana przez shop.js) */
.aram-hd__cart.is-bump { animation: aramCartBump .55s var(--ease-spring); }
@keyframes aramCartBump {
	0% { transform: scale(1); }
	30% { transform: scale(1.22) rotate(-6deg); }
	55% { transform: scale(.94) rotate(3deg); }
	100% { transform: scale(1) rotate(0); }
}

/* Overlay
   UWAGA: element żyje wewnątrz <header> (position:fixed), a .aram-hd.is-solid
   ma backdrop-filter — to tworzy containing block dla fixed-descendants, więc
   `inset:0` (a zwłaszcza `bottom:0`) liczyłby się względem NISKIEGO boxa
   headera (~74px), a nie viewportu — overlay renderował się jako wąski pasek
   pod headerem zamiast pełnoekranowego tła, i klik poza panelem (poniżej
   headera) nie trafiał w [data-aram-cart-close]. Dlatego wysokość jest
   jawna (100dvh), tak jak już robi to .aram-mc__panel niżej — omija problem
   niezależnie od containing blocka. */
.aram-mc__overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100dvh;
	background: rgba(21, 20, 15, .42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s var(--ease);
	z-index: 1090;
}
.aram-mc.is-open .aram-mc__overlay { opacity: 1; visibility: visible; }

/* Panel drawera */
.aram-mc__panel {
	position: fixed;
	top: 0; right: 0;
	width: min(420px, 92vw);
	height: 100dvh;
	background: var(--cream-bg);
	color: var(--ink-text);
	display: flex;
	flex-direction: column;
	box-shadow: -28px 0 60px -30px rgba(21, 20, 15, .5);
	transform: translateX(100%);
	transition: transform .46s var(--ease-spring);
	z-index: 1100;
	font-family: 'Figtree', system-ui, sans-serif;
	will-change: transform;
}
/* Bez tego `display:flex` bije atrybut `hidden` (UA `display:none`), więc
   panel zamknięty poza ekranem (translateX(100%)) zostaje w drzewie layoutu
   i łapie fokus Tabem mimo zamknięcia — patrz plugins/aram-a11y/assets/css/aram-a11y.css. */
.aram-mc__panel[hidden] { display: none; }
.aram-mc.is-open .aram-mc__panel { transform: translateX(0); }
.aram-mc__panel * { box-sizing: border-box; }

.aram-mc__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--line-2);
	flex-shrink: 0;
}
.aram-mc__panel-title {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink-text);
}
.aram-mc__close {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	border-radius: 8px;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.aram-mc__close:hover { background: var(--cream-2); color: var(--ink-text); }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-mc__close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Ciało (scroll) — to jest cel fragmentu AJAX */
.aram-mc__panel-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Pasek darmowej dostawy */
.aram-mc__ship {
	padding: 16px 24px;
	background: var(--cream-2);
	border-bottom: 1px solid var(--line-1);
	flex-shrink: 0;
}
.aram-mc__ship-text {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--text-muted-2);
	margin-bottom: 10px;
	line-height: 1.4;
}
.aram-mc__ship-text svg { flex-shrink: 0; color: var(--green); display: block; }
.aram-mc__ship-text strong { color: var(--ink-text); font-weight: 600; }
.aram-mc__ship-em { color: var(--accent-ink); font-weight: 600; }
.aram-mc__ship.is-reached .aram-mc__ship-text { color: var(--green-darker); }
.aram-mc__ship.is-reached .aram-mc__ship-text svg { color: var(--green); }
.aram-mc__ship-track {
	height: 6px;
	background: var(--field-1);
	border-radius: 100px;
	overflow: hidden;
}
.aram-mc__ship-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), #ffa748);
	border-radius: 100px;
	transition: width .6s var(--ease);
}
.aram-mc__ship.is-reached .aram-mc__ship-fill { background: linear-gradient(90deg, var(--green), var(--green-soft)); }

/* Lista pozycji */
.aram-mc__list {
	list-style: none;
	margin: 0;
	padding: 8px 24px;
	display: flex;
	flex-direction: column;
}
.aram-mc__item {
	display: grid;
	grid-template-columns: 56px 1fr 26px;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line-1);
}
.aram-mc__item:last-child { border-bottom: none; }
.aram-mc__item-media {
	width: 56px; height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cream-2);
	display: block;
	flex-shrink: 0;
}
.aram-mc__item-media img,
.aram-mc__thumb {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.aram-mc__item-main { min-width: 0; }
.aram-mc__item-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink-text);
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.aram-mc__item-name:hover { color: var(--accent-ink); }
.aram-mc__item-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.aram-mc__item-qty { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aram-mc__item-line { font-size: 14px; font-weight: 600; color: var(--ink-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aram-mc__item-remove {
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-faint);
	border-radius: 6px;
	transition: background .2s var(--ease), color .2s var(--ease);
	flex-shrink: 0;
}
.aram-mc__item-remove:hover { background: var(--cream-2); color: #b4453a; }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-mc__item-remove:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* Stopka panelu (suma + CTA) — przyklejona na dole */
.aram-mc__foot {
	margin-top: auto;
	padding: 18px 24px 22px;
	border-top: 1px solid var(--line-2);
	background: var(--cream-card);
	flex-shrink: 0;
}
.aram-mc__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 4px;
}
.aram-mc__subtotal span { font-size: 14px; color: var(--text-muted-2); }
.aram-mc__subtotal strong { font-size: 22px; font-weight: 600; color: var(--ink-text); font-variant-numeric: tabular-nums; }
.aram-mc__vatnote { font-size: 11.5px; color: var(--text-faint); margin: 0 0 16px; line-height: 1.4; }
.aram-mc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aram-mc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	transition: transform .35s var(--ease-spring), box-shadow .35s ease, background .25s ease, border-color .25s ease;
}
.aram-mc__btn--ghost {
	background: transparent;
	border: 1.5px solid var(--field-1);
	color: var(--ink-text);
}
.aram-mc__btn--ghost:hover { border-color: var(--ink-text); }
/* ink zamiast #fff (2.46:1 FAIL → 7.08:1 AAA). */
.aram-mc__btn--fill {
	background: var(--accent);
	color: var(--ink);
	border: 1.5px solid var(--accent);
}
.aram-mc__btn--fill:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(254, 132, 12, .6); }

/* Pusty mini-cart */
.aram-mc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 30px;
	margin: auto 0;
}
.aram-mc__empty-ic {
	width: 76px; height: 76px;
	border-radius: 50%;
	background: var(--cream-2);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.aram-mc__empty-title { font-size: 19px; font-weight: 400; color: var(--ink-text); margin: 0 0 8px; }
.aram-mc__empty-text { font-size: 14px; color: var(--text-muted); margin: 0 0 24px; line-height: 1.6; max-width: 30ch; }
/* ink zamiast #fff (2.46:1 FAIL → 7.08:1 AAA). */
.aram-mc__empty-cta {
	display: inline-flex;
	align-items: center;
	background: var(--accent);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: var(--r-pill);
	transition: transform .35s var(--ease-spring), box-shadow .35s ease;
}
.aram-mc__empty-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(254, 132, 12, .6); }

@media (prefers-reduced-motion: reduce) {
	.aram-mc__panel, .aram-mc__overlay, .aram-hd__cart, .aram-hd__cart-badge,
	.aram-mc__ship-fill, .aram-mc__btn { transition: none !important; }
	.aram-hd__cart.is-bump { animation: none !important; }
}

/* ============================================================
   19) ADD-TO-CART UX (katalog .pcard + sekcja 04) — stan „Dodano ✓"
   ============================================================ */
.pcard__add.is-added,
.aram-qadd .addb.is-added { background: var(--green) !important; }
.pcard__add.is-loading,
.aram-qadd .addb.is-loading { opacity: .6; pointer-events: none; }
.aram-qadd .addb { transition: background .3s var(--ease), transform .3s var(--ease-spring); }

/* Stepper sekcji 04 (aram-qadd) — wygląd spójny z kartą produktu */
.aram-qadd .stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--field-1);
	border-radius: var(--r-pill);
	background: #fff;
	overflow: hidden;
}
.aram-qadd .stepper .b {
	width: 36px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--ink-text);
	cursor: pointer;
	user-select: none;
	background: transparent;
	transition: background .2s var(--ease);
}
.aram-qadd .stepper .b:hover { background: var(--cream-2); }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-qadd .stepper .b:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.aram-qadd .aram-qty__input::-webkit-outer-spin-button,
.aram-qadd .aram-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* outline:none bezpieczny TYLKO z zamiennikiem (2.4.7/2.4.13). */
.aram-qadd .aram-qty__input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--accent-ink);
	border-radius: 4px;
}

/* ============================================================
   20) STRONA KOSZYKA (/koszyk/) — reskin shortcode [woocommerce_cart]
   Pełna szerokość (.aram-bleed) + wewn. 1340 wyśrodkowany.
   ============================================================ */
.aram-cart {
	background: var(--cream-bg);
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-cart * { box-sizing: border-box; }
.aram-cart .aram-cart__inner {
	padding-top: calc(var(--header-h) + 48px);
	padding-bottom: 96px;
}
.aram-cart__head { margin-bottom: 32px; }
.aram-cart__eyebrow { color: var(--green); display: block; margin-bottom: 12px; }
.aram-cart__title {
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
}
.aram-cart__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }

.aram-cart__grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
}

/* ---------- Lista pozycji (tabela) ---------- */
.aram-cart__items { min-width: 0; }
.aram-cart__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	overflow: hidden;
}
.aram-cart__table thead th {
	background: var(--ink);
	color: var(--text-on-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	padding: 15px 18px;
}
.aram-cart__table thead th.product-price,
.aram-cart__table thead th.product-subtotal { text-align: right; }
.aram-cart__table thead th.product-quantity { text-align: center; }

.aram-cart__row td {
	padding: 18px;
	border-top: 1px solid var(--line-1);
	vertical-align: middle;
}
.aram-cart__row:first-child td { border-top: none; }

/* Kolumna PRODUKT: miniatura 68px + blok tekstu obok (flex), nazwa z sensowną
   min-szerokością i normalnym zawijaniem (nie łamanie co słowo w kolumnę). */
.aram-cart__cell-name { min-width: 280px; }
.aram-cart__product {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.aram-cart__product-info { min-width: 0; flex: 1 1 auto; }
.aram-cart__thumb {
	display: block;
	flex: 0 0 auto;
	width: 68px; height: 68px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cream-2);
}
.aram-cart__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aram-cart__cat {
	display: block;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aram-cart__name {
	display: block;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink-text);
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}
a.aram-cart__name:hover { color: var(--accent-ink); }

/* Podpowiedź progu/kartonu — POD nazwą, w kolumnie PRODUKT (nie przy sumie).
   `white-space: normal` jawnie — WooCommerce core (.shop_table_responsive)
   ustawia nowrap na komórkach tabeli domyślnie, co obcinało/wypychało poza
   kartę dłuższy tekst podpowiedzi na mobile. */
.aram-cart__product-info .aram-tier-hint,
.aram-cart__product-info .aram-case-pack-hint {
	display: block;
	white-space: normal;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
}
/* Pasek postępu progu rabatowego (aram-tprog--compact) w tej samej kolumnie —
   szerokość ograniczona do karty produktu, nie do całej komórki tabeli. */
.aram-cart__product-info .aram-tprog { max-width: 260px; margin-top: 6px; }
.aram-cart__cell-price { text-align: right; white-space: nowrap; }
.aram-cart__cell-price .woocommerce-Price-amount,
.aram-cart__cell-price bdi { font-size: 15px; font-weight: 500; color: var(--ink-text); }
.aram-cart__price-unit { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.aram-cart__cell-sub { text-align: right; white-space: nowrap; }
.aram-cart__cell-sub .woocommerce-Price-amount,
.aram-cart__cell-sub bdi { font-size: 16px; font-weight: 600; color: var(--ink-text); }
.aram-cart__cell-remove { width: 44px; text-align: center; }
.aram-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	color: var(--text-faint);
	position: relative;
	transition: background .2s var(--ease), color .2s var(--ease);
}
/* Obszar klikalny powiększony do 44×44 (WCAG 2.5.5 AAA) bez zmiany rozmiaru
   wizualnego (32×32) — komórka tabeli (.aram-cart__cell-remove) jest już
   44px szeroka, ::before dopełnia w pionie. */
.aram-cart__remove::before { content: ""; position: absolute; inset: -6px; }
.aram-cart__remove:hover { background: var(--cream-2); color: #b4453a; }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-cart__remove:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* Stepper ilości w koszyku (krok 1) */
.aram-cart__cell-qty { text-align: center; }
.aram-cart__stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--field-1);
	border-radius: var(--r-pill);
	background: #fff;
	overflow: hidden;
}
.aram-cart__step {
	width: 34px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--ink-text);
	font-size: 17px;
	cursor: pointer;
	transition: background .2s var(--ease);
}
.aram-cart__step:hover { background: var(--cream-2); }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). Wysokość 42→44px
   (WCAG 2.5.5 AAA); szerokość 34px zostaje (pigułka steppera wąska z natury,
   ale wysokość 44px już domyka minimalny obszar dotykowy w jednym wymiarze
   + szerokość >24px spełnia AA 2.5.8 na pewno). */
.aram-cart__step:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.aram-cart__stepper .qty,
.aram-cart__qty-input {
	width: 46px !important;
	border: none !important;
	background: transparent !important;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-text);
	font-family: inherit;
	padding: 0 !important;
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none !important;
}
.aram-cart__qty-input::-webkit-outer-spin-button,
.aram-cart__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* outline:none bezpieczny TYLKO z zamiennikiem (2.4.7/2.4.13) — pierścień do
   wnętrza pola, mimo braku własnej ramki (`border:none!important` wyżej). */
.aram-cart__qty-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink) !important; border-radius: 4px; }

/* Wiersz akcji (kupon + aktualizuj) */
.aram-cart__actions { padding: 16px 18px !important; background: var(--cream-3); }
.aram-cart__coupon { display: inline-flex; gap: 8px; vertical-align: middle; }
.aram-cart__coupon-input {
	width: 170px !important;
	font-size: 14px;
	padding: 11px 14px !important;
	border: 1.5px solid var(--field-1) !important;
	border-radius: var(--r-pill) !important;
	background: #fff !important;
	font-family: inherit;
}
.aram-cart__coupon-input:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(254, 132, 12, .15) !important; }
.aram-cart__coupon-btn,
.aram-cart__update,
.aram-cart__save-list {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1.5px solid var(--field-1);
	background: #fff;
	color: var(--ink-text);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.aram-cart__coupon-btn:hover,
.aram-cart__update:hover,
.aram-cart__save-list:hover { border-color: var(--ink-text); }
.aram-cart__update { float: right; }
.aram-cart__save-list { float: right; margin-right: 10px; border-color: transparent; background: var(--cream-2, #EFE9DD); }
.aram-cart__save-list:hover { background: var(--cream-3, #E9E1D0); border-color: transparent; }
.aram-cart__continue {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted-2);
	transition: color .25s var(--ease), gap .25s var(--ease);
}
.aram-cart__continue:hover { color: var(--accent); gap: 12px; }

/* ---------- Karta podsumowania ---------- */
.aram-cart__collaterals { min-width: 0; }
/* FIX nakładania: WooCommerce core narzuca `.cart_totals { float: right; }`
   (klasyczny layout koszyka) — nasza karta ma też klasę `cart_totals`, więc
   dziedziczyła ten float. Floatowany element wypada z normalnego przepływu,
   przez co następny sibling w aside (.aram-xsell „Warto domówić") renderował
   się od góry kontenera, WIZUALNIE NACHODZĄC na kartę podsumowania (pływająca
   karta rysowała się NAD nim). `float: none` przywraca normalny blokowy
   przepływ — sticky + kolejność DOM wystarczą do poprawnego układu. */
.aram-cart__summary,
.cart_totals.aram-cart__summary {
	float: none !important;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	padding: 24px;
	position: sticky;
	top: calc(var(--header-h) + 16px);
	width: 100% !important;
}
.aram-cart__summary-title {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--ink-text);
}

/* Blok „Twoje korzyści": pasek darmowej dostawy + (opcjonalnie) pasek progu
   rabatu od wartości zamówienia — stack pionowy, jednolity styl kart cream. */
.aram-cart__perks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.aram-cart__ship {
	background: var(--cream-2);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 0;
}
.aram-cart__ship-text {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-muted-2);
	margin-bottom: 9px;
	line-height: 1.4;
}
.aram-cart__ship-text svg { flex-shrink: 0; color: var(--green); }
.aram-cart__ship-text strong { color: var(--ink-text); font-weight: 600; }
.aram-cart__ship.is-reached .aram-cart__ship-text { color: var(--green-darker); }
.aram-cart__ship-track { height: 6px; background: var(--field-1); border-radius: 100px; overflow: hidden; }
.aram-cart__ship-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffa748); border-radius: 100px; transition: width .6s var(--ease); }
.aram-cart__ship.is-reached .aram-cart__ship-fill { background: linear-gradient(90deg, var(--green), var(--green-soft)); }

/* Drugi pasek — próg rabatu od wartości zamówienia — akcent „spark” (odróżnia
   się ikoną/tonem od dostawy, ale ta sama konstrukcja karty/paska). */
.aram-cart__ship--ov .aram-cart__ship-text svg { color: var(--accent-ink); }
.aram-cart__ship--ov .aram-cart__ship-fill { background: linear-gradient(90deg, var(--accent-ink), var(--accent)); }

/* Tabela kwot podsumowania */
.aram-cart__totals-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.aram-cart__totals-table th,
.aram-cart__totals-table td {
	padding: 11px 0;
	border-bottom: 1px solid var(--line-1);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}
.aram-cart__totals-table th { color: var(--text-muted-2); font-weight: 500; }
.aram-cart__totals-table td { text-align: right; color: var(--ink-text); font-weight: 500; }
.aram-cart__totals-table .order-total th { font-size: 15px; font-weight: 600; color: var(--ink-text); }
.aram-cart__totals-table .order-total td { border-bottom: none; }
.aram-cart__totals-table .order-total td .woocommerce-Price-amount,
.aram-cart__totals-table .order-total td bdi { font-size: 21px; font-weight: 700; color: var(--ink-text); }
.aram-cart__totals-table .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* CTA „Przejdź do kasy" (accent) — bije domyślny WC button.
   ink zamiast #fff: biały na akcencie = 2.46:1 (FAIL 4.5:1), ink = 7.08:1 (AAA). */
.aram-cart__checkout { margin-top: 4px; }
.aram-cart__checkout .checkout-button,
.aram-cart__checkout a.button,
.cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--accent) !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
	font-weight: 600 !important;
	padding: 16px !important;
	border-radius: var(--r-pill) !important;
	border: none !important;
	text-align: center;
	transition: transform .35s var(--ease-spring), box-shadow .35s ease !important;
}
.aram-cart__checkout .checkout-button:hover,
.aram-cart__checkout a.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254, 132, 12, .6); }
.aram-cart__assurance {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}
.aram-cart__assurance svg { flex-shrink: 0; margin-top: 1px; color: var(--green); }

/* ---------- Pusty koszyk ---------- */
.aram-cart--empty .aram-cart__inner { padding-top: calc(var(--header-h) + 80px); padding-bottom: 120px; }
.aram-cart-empty {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 16px;
	padding: clamp(40px, 6vw, 72px) 32px;
}
.aram-cart-empty__ic {
	width: 92px; height: 92px;
	border-radius: 50%;
	background: var(--cream-2);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}
.aram-cart-empty__title { font-size: clamp(24px, 3vw, 32px); font-weight: 300; letter-spacing: -0.02em; margin: 0 0 12px; }
.aram-cart-empty__text { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin: 0 0 26px; }
/* ink zamiast #fff (2.46:1 FAIL → 7.08:1 AAA). */
.aram-cart-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--accent);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	transition: transform .35s var(--ease-spring), box-shadow .35s ease, gap .25s ease;
}
.aram-cart-empty__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254, 132, 12, .6); gap: 13px; }

/* ---------- Koszyk: responsywność ---------- */
@media (max-width: 1024px) {
	.aram-cart__grid { grid-template-columns: 1fr; gap: 28px; }
	.aram-cart__summary,
	.cart_totals.aram-cart__summary { position: static; }
}
@media (max-width: 680px) {
	.aram-cart .aram-cart__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 64px; }

	/* Tabela koszyka → karty (mobile): nagłówek ukryty, wiersz w bloku, bez
	   absolutnego pozycjonowania miniatury (już we flex .aram-cart__product). */
	.aram-cart__table thead { display: none; }
	.aram-cart__table,
	.aram-cart__table tbody,
	.aram-cart__row { display: block; width: 100%; }
	.aram-cart__row {
		position: relative;
		border: 1px solid var(--line-1);
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 14px;
	}
	.aram-cart__row td { display: block; border: none !important; padding: 2px 0; }
	/* Kolumna PRODUKT: label „Produkt:” (WC core responsive table ::before)
	   zbędny — miniatura+nazwa już czytelnie identyfikują wiersz jako kartę. */
	.aram-cart__cell-name { min-width: 0; padding-right: 40px !important; }
	.aram-cart__cell-name::before { content: none !important; display: none !important; }
	.aram-cart__product { align-items: flex-start; }
	.aram-cart__thumb { width: 56px; height: 56px; }
	/* Eyebrow kategorii: 1 linia z ellipsis, ale zostawiamy miejsce na „×” —
	   już zapewnia `padding-right` na komórce; nazwa zawija się normalnie
	   (bez łamania co słowo) zamiast być ucinana jednowierszowo. */
	.aram-cart__cat { max-width: 100%; }
	.aram-cart__name { white-space: normal; }
	.aram-cart__cell-price::before { content: attr(data-title) ": "; color: var(--text-faint); font-size: 12px; }
	.aram-cart__cell-price,
	.aram-cart__cell-sub { text-align: left; margin-top: 10px; }
	.aram-cart__cell-price .aram-cart__price-unit { display: inline; }
	.aram-cart__cell-qty { text-align: left; margin-top: 10px; }
	.aram-cart__cell-remove { position: absolute; top: 12px; right: 12px; width: auto; }
	.aram-cart__actions-row td { padding: 14px !important; }
	.aram-cart__update,
	.aram-cart__save-list { float: none; margin-top: 10px; margin-right: 0; width: 100%; }
	.aram-cart__coupon { display: flex; width: 100%; }
	.aram-cart__coupon-input { flex: 1; width: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
	.aram-cart__ship-fill, .aram-cart__checkout .checkout-button,
	.aram-cart-empty__cta, .aram-cart__continue { transition: none !important; }
}

/* „Zamów ponownie" — przycisk w podglądzie zamówienia (view-order.php) i
   kolumnie akcji listy zamówień (orders.php, przez .aram-acc-btn--sm). */
.aram-acc-view-order__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}
.aram-acc-view-order__reorder,
.aram-acc-view-order__document { margin-top: 0; }

/* ---------- Cross-sell „Warto domówić" (cart/cross-sells.php) ----------
   Rail KOMPAKTOWY, renderowany bezpośrednio pod kartą Podsumowania (aside
   sidebar koszyka, wołany z cart-totals.php) — lista pionowa 3–4 pozycji,
   nie siatka .pcard pełnej szerokości. Miniatura 48px, nazwa 1-linijkowa
   z ellipsis, cena netto, „+” otwiera istniejący popup ilości (shop.js). */
.aram-xsell {
	clear: both;
	margin-top: 20px;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	padding: 18px;
}
.aram-xsell__head { margin-bottom: 12px; }
.aram-xsell__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ink-text);
}
.aram-xsell__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aram-xsell__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	border-radius: 10px;
	transition: background .2s var(--ease);
}
.aram-xsell__item:hover { background: var(--cream-2); }
.aram-xsell__item + .aram-xsell__item { border-top: 1px solid var(--line-1); }
.aram-xsell__thumb {
	flex: 0 0 auto;
	display: block;
	width: 48px; height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cream-2);
}
.aram-xsell__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aram-xsell__info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.aram-xsell__name {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aram-xsell__name:hover { color: var(--accent-ink); }
.aram-xsell__price { font-size: 12px; color: var(--text-muted-2); font-weight: 500; }
.aram-xsell__price-unit { font-weight: 400; color: var(--text-faint); }
.aram-xsell__form { flex: 0 0 auto; margin: 0; }
.aram-xsell__add {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1.5px solid var(--field-1);
	background: #fff;
	color: var(--ink-text);
	font-size: 17px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-spring);
}
/* Obszar klikalny powiększony do 44×44 (WCAG 2.5.5 AAA) bez zmiany rozmiaru
   wizualnego (30×30) — niewidoczny pseudo-element. */
.aram-xsell__add::before { content: ""; position: absolute; inset: -7px; }
/* ink zamiast #fff na hover: "+" biały na akcencie = 2.46:1 (FAIL), ink = 7.08:1 (AAA). */
.aram-xsell__add:hover { border-color: var(--accent); background: var(--accent); color: var(--ink-text); transform: scale(1.06); }
/* accent-ink zamiast accent na focus-ring (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-xsell__add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.aram-xsell__item, .aram-xsell__add { transition: none !important; }
}

/* ============================================================
   20bis) STRONA CHECKOUT (/checkout/) — reskin shortcode [woocommerce_checkout]
   Layout 2 kolumny: formularz | karta podsumowania sticky (jak koszyk).
   Pola billing/shipping reużywają .aram-acc-grid/.aram-acc-field/.aram-input
   (te same klasy co myaccount/form-edit-address.php) — spójny wygląd pól.
   ============================================================ */
.aram-checkout {
	background: var(--cream-bg);
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-checkout * { box-sizing: border-box; }
.aram-checkout .aram-checkout__inner {
	padding-top: calc(var(--header-h) + 48px);
	padding-bottom: 96px;
}
.aram-checkout__head { margin-bottom: 28px; }
.aram-checkout__eyebrow { color: var(--green); display: block; margin-bottom: 12px; }
.aram-checkout__title {
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
}
.aram-checkout__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }

/* ---------- Logowanie gościa / kupon (before_checkout_form) ---------- */
.aram-checkout__precart:empty { display: none; }
.aram-checkout__precart .woocommerce-info,
.aram-checkout__precart .woocommerce-form-coupon-toggle .woocommerce-info {
	background: var(--cream-2);
	border: none;
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 13.5px;
	color: var(--text-muted-2);
	margin-bottom: 16px;
}
.aram-checkout__coupon-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.aram-checkout__coupon-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.aram-checkout__coupon-form .form-row { margin: 0; }
.aram-checkout__coupon-form .input-text {
	padding: 12px 16px !important;
	border: 1.5px solid var(--field-1) !important;
	border-radius: var(--r-pill) !important;
	background: #fff !important;
	font-family: inherit;
	min-width: 220px;
}
.aram-checkout__coupon-form .input-text:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(254, 132, 12, .15) !important; }

/* ---------- Grid principal ---------- */
.aram-checkout__grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 40px;
	align-items: start;
}
.aram-checkout__col--form { min-width: 0; }
/* FIX układu przy błędzie walidacji: `.aram-checkout__grid` to sam <form> —
   WooCommerce (checkout.js `submit_error`/AJAX update_order_review) wstrzykuje
   komunikat błędu przez `$form.prepend('<div class="woocommerce-NoticeGroup
   woocommerce-NoticeGroup-checkout">…')`, czyli jako NOWE, trzecie dziecko
   gridu. Bez tej reguły auto-placement CSS grid wepchnąłby powiadomienie w
   pierwszą kolumnę/wiersz, a kolumny formularz/podsumowanie „rozjeżdżają się”
   (formularz trafia w miejsce podsumowania, podsumowanie spada niżej w lewą
   kolumnę) — dokładnie tam, gdzie klienci najczęściej porzucają koszyk
   (błędny NIP/adres). Komunikat ma zawsze zajmować całą szerokość grida. */
.aram-checkout__grid > .woocommerce-NoticeGroup,
.aram-checkout__grid > .woocommerce-error,
.aram-checkout__grid > .woocommerce-message,
.aram-checkout__grid > .woocommerce-info {
	grid-column: 1 / -1;
}

/* Sekcje formularza (billing/shipping/uwagi) — karty białe jak reszta systemu.
   Zabezpieczenie: gdy sekcja nie ma treści (np. inny hook doda pusty wrapper),
   karta się nie renderuje zamiast wisieć jako pusty biały kafelek. */
.aram-checkout__panel {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 20px;
}
.aram-checkout__panel:empty { display: none; margin: 0; padding: 0; border: none; }
.aram-checkout__panel-title {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--ink-text);
}
.aram-checkout__panel-title .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.aram-checkout__checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; color: var(--text-muted-2); cursor: pointer; }
.aram-checkout__checkbox input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Pola: dziedziczą .aram-acc-grid/.aram-acc-field/.aram-input z account.css
   (wtyczki aram-account) — te same klasy co formularz adresu w koncie. */
.aram-checkout__panel .aram-acc-grid { margin: 0; }
.aram-checkout__panel .create-account.aram-acc-grid { margin-top: 14px; }
.aram-checkout__panel .validate-required label,
.aram-checkout__panel .aram-acc-field label { font-size: 13px; font-weight: 500; color: var(--text-muted-2); margin-bottom: 6px; display: block; }
.aram-checkout__panel .required { color: var(--accent-ink); text-decoration: none; }
.aram-checkout__panel select.aram-input { appearance: auto; }
.aram-checkout__panel .woocommerce-input-wrapper { display: block; }
/* Podpowiedź pod polem (np. NIP → KSeF) — `woocommerce_form_field()` renderuje
   `<span class="description">` po polu, gdy `args['description']` ustawione. */
.aram-checkout__panel .woocommerce-input-wrapper + .description,
.aram-checkout__panel span.description {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-faint);
	line-height: 1.5;
}

/* Karty podsumowania/płatności (kolumna prawa, sticky) */
.aram-checkout__col--summary { min-width: 0; }
.aram-checkout__summary-sticky {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	padding: 24px;
	position: sticky;
	top: calc(var(--header-h) + 16px);
}
.aram-checkout__section-title {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--ink-text);
}

/* Tabela pozycji zamówienia w podsumowaniu */
.aram-checkout__table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.aram-checkout__table thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-faint);
	text-align: left;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--line-1);
}
.aram-checkout__table thead th.product-total { text-align: right; }
.aram-checkout__row td { padding: 12px 0; border-bottom: 1px solid var(--line-1); vertical-align: top; }
.aram-checkout__cell-name { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.aram-checkout__thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--cream-2); flex-shrink: 0; }
.aram-checkout__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aram-checkout__name-wrap {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-text);
	min-width: 0;
	flex: 1 1 auto;
}
/* Nazwa: 2 linie max z ellipsis (nie łamanie co słowo w wąskiej kolumnie);
   wariant „× N” w tej samej linii (wrap naturalny, nie osobny wiersz sztywno). */
.aram-checkout__name-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: normal;
	overflow-wrap: anywhere;
}
.aram-checkout__qty { color: var(--text-faint); font-weight: 500; white-space: nowrap; }
.aram-checkout__cell-total { text-align: right; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink-text); }
/* Podpowiedź progu/kartonu pod nazwą — mniejszy druk, ton „green” jak w koszyku. */
.aram-checkout__name-wrap .aram-tier-hint,
.aram-checkout__name-wrap .aram-case-pack-hint {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.4;
}
.aram-checkout__name-wrap .aram-tprog { max-width: 220px; margin-top: 5px; }
.aram-checkout__name-wrap .aram-tprog__msg { font-size: 11.5px; }

/* Totals (subtotal/dostawa/fee/podatek/razem) — reużywa stylu koszyka */
.aram-checkout__table + table.shop_table,
.aram-checkout__col--summary table.shop_table.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	padding: 11px 0;
	border-bottom: 1px solid var(--line-1);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}
.woocommerce-checkout-review-order-table tfoot th { color: var(--text-muted-2); font-weight: 500; }
.woocommerce-checkout-review-order-table tfoot td { text-align: right; color: var(--ink-text); font-weight: 500; }
.woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 15px; font-weight: 600; color: var(--ink-text); }
.woocommerce-checkout-review-order-table tfoot .order-total td { border-bottom: none; }
.woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table tfoot .order-total td bdi { font-size: 21px; font-weight: 700; color: var(--ink-text); }
.woocommerce-checkout-review-order-table .fee th { color: var(--green-darker); }
.woocommerce-checkout-review-order-table .fee td { color: var(--green-darker); font-weight: 600; }

/* Podpowiedzi progów rabatowych B2B (Cart_Rules::tier_hint / order_value_hint) */
.aram-tier-hint,
.aram-case-pack-hint { color: var(--green-darker); font-weight: 500; }
.aram-order-value-hint {
	background: var(--cream-2);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 12.5px;
	color: var(--green-darker);
	margin: 4px 0 16px;
}

/* ---------- Płatność: metody jako karty/radio ---------- */
/* Nadpisanie tła #payment core WooCommerce (rgba fioletowo-szara, ok. #816e99
   przy 14% — „obcy” odcień z domyślnego arkusza Woo) na transparentne: karty
   metod (.aram-checkout__method) już mają własne białe tło, wrapper nie
   potrzebuje żadnego koloru. */
#payment.woocommerce-checkout-payment,
#payment.aram-checkout__payment,
.woocommerce-checkout #payment,
.aram-checkout__payment {
	background: transparent !important;
}
.aram-checkout__payment { margin-top: 20px; }
.aram-checkout__methods { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aram-checkout__methods::before,
.aram-checkout__methods li::before { content: none !important; display: none !important; }
.aram-checkout__method {
	border: 1.5px solid var(--line-1);
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s var(--ease), background .2s var(--ease);
	overflow: hidden;
}
.aram-checkout__method.is-selected,
.aram-checkout__method:has(.aram-checkout__method-radio:checked) { border-color: var(--accent); background: rgba(254, 132, 12, .04); }
.aram-checkout__method-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aram-checkout__method-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-text);
}
.aram-checkout__method-radio-ic {
	width: 19px; height: 19px;
	border-radius: 50%;
	border: 1.5px solid var(--field-1);
	flex-shrink: 0;
	position: relative;
	transition: border-color .2s var(--ease);
}
.aram-checkout__method-radio:checked + .aram-checkout__method-label .aram-checkout__method-radio-ic { border-color: var(--accent); }
.aram-checkout__method-radio:checked + .aram-checkout__method-label .aram-checkout__method-radio-ic::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--accent);
}
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-checkout__method-radio:focus-visible + .aram-checkout__method-label { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.aram-checkout__method-title img { vertical-align: middle; margin-left: 6px; }

/* Ikony/plakietki metod płatności (przelew/za pobraniem/szybki przelew-BLIK)
   — dokładane przez Aram\B2B\Payment_Methods::gateway_icon() jako
   `$gateway->get_icon()`, renderowane zaraz po tytule w .aram-checkout__method-label. */
.aram-pay-ic {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--cream-2);
	color: var(--text-muted-2);
	flex-shrink: 0;
}
.aram-checkout__method-radio:checked + .aram-checkout__method-label .aram-pay-ic--bolt,
.aram-pay-ic--bolt { background: rgba(254, 132, 12, .12); color: var(--accent-ink); }
.aram-pay-badge {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted-2);
	background: var(--cream-2);
	border-radius: 100px;
	padding: 3px 8px;
	margin-left: 6px;
	line-height: 1.4;
}
@media (max-width: 480px) {
	.aram-pay-badge { display: none; }
}

/* Nadpisanie domyślnego szaro-fioletowego tła WooCommerce (#payment ul.payment_methods
   li .payment_box → core ustawia własne background/::before "dymek"). Specyficzność
   dobrana, by pokonać selektory core (#payment ...) — kremowe tło ds, bez trójkąta. */
#payment.woocommerce-checkout-payment.aram-checkout__payment ul.payment_methods li.aram-checkout__method .payment_box.aram-checkout__method-box,
.woocommerce-checkout #payment div.payment_box.aram-checkout__method-box,
.aram-checkout__method-box {
	background: var(--cream-2) !important;
	padding: 0 16px 16px 47px;
	font-size: 13.5px;
	color: var(--text-muted-2);
	line-height: 1.6;
}
.aram-checkout__method-box::before { display: none !important; content: none !important; }
.aram-checkout__method-box p:first-child { margin-top: 0; }
.aram-checkout__method-box a { color: var(--accent-ink); font-weight: 600; }

/* CTA + regulamin */
.aram-checkout__terms-wrap { margin-bottom: 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
/* Linki „polityka prywatności” / „regulamin” wstrzykiwane przez WooCommerce
   ([privacy_policy]/[terms] w treści zgody) — bez tego dziedziczą globalny
   reset `a{color:inherit;text-decoration:none}` z ds.css i są nierozróżnialne
   od zwykłego tekstu. */
.aram-checkout__terms-wrap a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.aram-checkout__terms-wrap a:hover { color: var(--ink-text); }
.aram-checkout__terms-row { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 8px; }
.aram-checkout__terms-row label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.aram-checkout__terms-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.aram-checkout__place-order { margin-top: 4px; }
/* "Złóż zamówienie" — najważniejszy CTA na stronie. ink zamiast #fff:
   biały na akcencie = 2.46:1 (FAIL 4.5:1), ink = 7.08:1 (AAA). */
.aram-checkout__submit,
button.aram-checkout__submit.button.alt {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--accent) !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 18px !important;
	border-radius: var(--r-pill) !important;
	border: none !important;
	text-align: center;
	cursor: pointer;
	transition: transform .35s var(--ease-spring), box-shadow .35s ease !important;
}
.aram-checkout__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(254, 132, 12, .6); }
.aram-checkout__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Komunikaty WooCommerce (błędy walidacji) w checkout — zob. też blok globalny
   „21bis) POWIADOMIENIA WOOCOMMERCE” (koniec pliku) dla stylu na całym sklepie;
   reguły tutaj to warstwa dodatkowa specyficzna dla kontekstu checkout. */
.aram-checkout .woocommerce-error li { margin: 0; padding: 2px 0; }

/* ---------- Checkout: responsywność ---------- */
@media (max-width: 1024px) {
	.aram-checkout__grid { grid-template-columns: 1fr; gap: 28px; }
	.aram-checkout__summary-sticky { position: static; }
}
@media (max-width: 680px) {
	.aram-checkout .aram-checkout__inner { padding-top: calc(var(--header-h) + 28px); padding-bottom: 64px; }
	.aram-checkout__panel,
	.aram-checkout__summary-sticky { padding: 18px; }
	.aram-checkout__coupon-form .input-text { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.aram-checkout__submit { transition: none !important; }
}

/* ============================================================
   20ter) THANK-YOU (checkout/thankyou.php) — karta „Dziękujemy za zamówienie”
   ============================================================ */
.aram-thankyou {
	background: var(--cream-bg);
	color: var(--ink-text);
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-thankyou .aram-thankyou__inner {
	padding-top: calc(var(--header-h) + 64px);
	padding-bottom: 96px;
	max-width: 760px;
	margin: 0 auto;
}
.aram-thankyou__card {
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 20px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	margin-bottom: 28px;
}
.aram-thankyou__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(117, 135, 69, .12);
	color: var(--green-darker);
	margin-bottom: 18px;
}
.aram-thankyou__ic--failed { background: #FBEEEC; color: #9A3B2E; }
.aram-thankyou__eyebrow { color: var(--green); display: block; margin-bottom: 10px; }
.aram-thankyou__title {
	font-size: clamp(26px, 3.6vw, 42px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 14px;
}
.aram-thankyou__title em { font-weight: 500; font-style: normal; color: var(--accent-ink); }
.aram-thankyou__lead { font-size: 15px; color: var(--text-muted-2); line-height: 1.65; max-width: 520px; margin: 0 auto 28px; }

.aram-thankyou__overview {
	list-style: none;
	margin: 0 0 30px;
	padding: 20px;
	background: var(--cream-2);
	border-radius: 14px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	text-align: left;
}
.aram-thankyou__stat { display: flex; flex-direction: column; gap: 4px; }
.aram-thankyou__stat-k { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.aram-thankyou__stat-v { font-size: 15px; font-weight: 600; color: var(--ink-text); }

.aram-thankyou__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.aram-thankyou__details { margin-top: 8px; }
.aram-thankyou__details .woocommerce-order-details__title,
.aram-thankyou__details h2 {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.aram-thankyou__details table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line-1);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 24px;
}
.aram-thankyou__details table.shop_table th,
.aram-thankyou__details table.shop_table td { padding: 14px 18px; border-bottom: 1px solid var(--line-1); font-size: 14px; }
.aram-thankyou__details table.shop_table thead th { background: var(--ink); color: var(--text-on-dark); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.aram-thankyou__details table.shop_table tfoot th { color: var(--text-muted-2); font-weight: 500; text-align: left; }
.aram-thankyou__details table.shop_table tfoot td { text-align: right; font-weight: 600; color: var(--ink-text); }
.aram-thankyou__details address { font-style: normal; line-height: 1.6; }

@media (max-width: 680px) {
	.aram-thankyou .aram-thankyou__inner { padding-top: calc(var(--header-h) + 24px); }
	.aram-thankyou__card { padding: 28px 20px; border-radius: 16px; }
	.aram-thankyou__overview { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   15) MOJE KONTO — nadpisania szablonów Woo domyślnych (adresy, szczegóły
   konta, zamówienia, podgląd zamówienia, pobrania). Uzupełnia komponenty
   `.aram-acc-*` już zdefiniowane w plugins/aram-account/assets/account.css
   (panel/form/grid/field/btn/table/status/empty) — TU dokładamy tylko to,
   czego tam brakuje: karty adresów, fieldset zmiany hasła, notatki
   zamówienia oraz dociągnięcie stylu do tabel Woo renderowanych przez hooki
   rdzenia (order-details / order-downloads), które nie mają własnej klasy
   `.aram-acc-table`, ale żyją w tym samym `.woocommerce-MyAccount-content`.
   Ładuje się PO account.css wtyczki (patrz functions.php: aram-shop zależy
   od aram-ds, oba enqueue'owane po pluginach) — może bezpiecznie rozszerzać.
   ============================================================ */

/* ---------- Adresy: karty rozliczeniowy/dostawa (my-address.php) ---------- */
.aram-acc-addr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.aram-acc-addr-card { display: flex; flex-direction: column; gap: 14px; }
.aram-acc-addr-card__head { display: flex; align-items: center; gap: 12px; }
.aram-acc-addr-card__ic {
	width: 38px; height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--cream-2, #EFE9DD);
	color: var(--accent-ink, #b85e06);
	display: flex; align-items: center; justify-content: center;
}
.aram-acc-addr-card__title { font-size: 16px; font-weight: 600; margin: 0; color: var(--ink, #15140F); }
.aram-acc-addr-card__body {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted-2, #5a564e);
	flex: 1;
}
.aram-acc-addr-card .aram-acc-actions { margin-top: 0; }

/* ---------- Szczegóły konta: fieldset „Zmiana hasła" (form-edit-account.php) ----------
   .aram-acc-panel już daje tło/border/radius/padding (account.css wtyczki) —
   tu tylko reset przeglądarkowego <fieldset> (min-width auto rozpycha grid)
   i odstęp od bloku pól powyżej. */
.aram-acc-fieldset {
	margin: 20px 0 0;
	min-width: 0;
}
.aram-acc-fieldset__legend {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted, #7a766c);
	padding: 0 0 4px;
	margin-bottom: 4px;
}

/* ---------- Podgląd zamówienia: box wysyłki/śledzenia (Shipping_Tracking) ----------
   Renderowany na `woocommerce_view_order` (priorytet 5, przed tabelą pozycji)
   wewnątrz .aram-acc-order-details — patrz class-shipping-tracking.php. */
.aram-acc-tracking { margin-bottom: 20px; }
.aram-acc-tracking__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ink, #15140F);
}
.aram-acc-tracking__title svg { color: var(--accent, #FE840C); }
.aram-acc-tracking__line { margin: 0 0 12px; font-size: 14px; color: var(--ink-text, #1A1A17); }
.aram-acc-tracking__cta { display: inline-flex; }

/* Ikonka śledzenia w kolumnie numeru na liście „Zamówienia" (orders.php). */
.aram-acc-tracking__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 8px;
	border-radius: 999px;
	background: rgba(254,132,12,.12);
	color: var(--accent-ink, #7A3D04);
	vertical-align: middle;
}
/* ink zamiast #fff na hover: biały na akcencie = 2.46:1 (FAIL), ink = 7.08:1 (AAA). */
.aram-acc-tracking__badge:hover { background: var(--accent, #FE840C); color: var(--ink, #15140F); }

/* ---------- Podgląd zamówienia: notatki (view-order.php) ---------- */
.aram-acc-order-notes { margin-bottom: 24px; }
.aram-acc-order-notes__title { font-size: 16px; font-weight: 600; margin: 0 0 14px; color: var(--ink, #15140F); }
.aram-acc-order-notes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.aram-acc-order-note { border-top: 1px solid var(--line-1, rgba(0,0,0,.07)); padding-top: 14px; }
.aram-acc-order-note:first-child { border-top: none; padding-top: 0; }
.aram-acc-order-note__meta { font-size: 12px; color: var(--text-muted, #7a766c); margin: 0 0 4px; }
.aram-acc-order-note .woocommerce-OrderUpdate-description { font-size: 14px; line-height: 1.65; color: var(--ink-text, #1A1A17); }
.aram-acc-order-note .woocommerce-OrderUpdate-description p:last-child { margin-bottom: 0; }

/* ---------- Podgląd zamówienia: tabela pozycji/adresy/płatność renderowane
   przez `do_action('woocommerce_view_order', ...)` (order/order-details.php,
   poza zakresem nadpisań myaccount/) — dociągamy do wyglądu panelu bez
   nadpisywania samego szablonu, żeby nie duplikować logiki cen/adresów. ---------- */
.aram-acc-order-details table.shop_table,
.aram-acc-order-details table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line-1, rgba(0,0,0,.07));
	border-radius: 14px;
	overflow: hidden;
	font-size: 14px;
	margin-bottom: 24px;
}
/* `thead` (nie goły `th`!) — WooCommerce w tfoot tej samej tabeli renderuje
   też <th scope="row"> jako etykiety wierszy podsumowania (Kwota/Razem/Metoda
   płatności/Działania). Gdyby reguła łapała każdy `th`, tfoot dostawałby to
   samo ciemne tło co nagłówek, a jego kolor tekstu bije inna, bardziej
   specyficzna reguła (`.aram-thankyou__details table.shop_table tfoot th`
   na stronie „Dziękujemy”) — efekt: ciemny tekst na ciemnym tle, nieczytelne.
   Ten sam bug dotyczyłby /moje-konto/zamowienia/{id}/ (view-order.php), bo
   tam nie ma kontrującej reguły wcale. */
.aram-acc-order-details table.shop_table thead th {
	background: var(--ink, #15140F);
	color: var(--cream-bg, #F6F2EA);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 13px 16px;
	text-align: left;
}
.aram-acc-order-details table.shop_table tfoot th {
	font-weight: 500;
	text-align: left;
	color: var(--text-muted-2, #3E3B34);
	background: transparent;
}
.aram-acc-order-details table.shop_table tfoot td { text-align: right; font-weight: 600; }
.aram-acc-order-details table.shop_table td {
	padding: 13px 16px;
	border-top: 1px solid var(--line-1, rgba(0,0,0,.07));
	color: var(--ink-text, #1A1A17);
}
.aram-acc-order-details address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-muted-2, #5a564e);
}
.aram-acc-order-details .woocommerce-column__title { font-size: 16px; font-weight: 600; color: var(--ink, #15140F); margin: 0 0 12px; }
.aram-acc-order-details .woocommerce-customer-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }

/* ---------- Pliki do pobrania: tabela `order/order-downloads.php` (hook
   `woocommerce_available_downloads`, poza zakresem nadpisań myaccount/) —
   dociągnięta wewnątrz .aram-acc-tablewrap (patrz downloads.php). ---------- */
.aram-acc-tablewrap table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.aram-acc-tablewrap table.shop_table th {
	background: var(--ink, #15140F);
	color: var(--cream-bg, #F6F2EA);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 13px 16px;
	text-align: left;
	white-space: nowrap;
}
.aram-acc-tablewrap table.shop_table td {
	padding: 13px 16px;
	border-top: 1px solid var(--line-1, rgba(0,0,0,.07));
	color: var(--ink-text, #1A1A17);
	vertical-align: middle;
}
.aram-acc-tablewrap table.shop_table tbody tr:hover td { background: var(--cream-3, #FBF8F2); }
.aram-acc-tablewrap .woocommerce-MyAccount-downloads-file { white-space: nowrap; }

/* Dopełnienie statusu rzadko spotykanego (checkout niedokończony na blokach). */
.aram-acc-status--checkout-draft { background: rgba(0,0,0,.06); color: #555; }

/* ---------- Responsywność (≤860px / ≤560px), spójna z resztą panelu ---------- */
@media (max-width: 860px) {
	.aram-acc-addr-grid { grid-template-columns: 1fr; }
	.aram-acc-order-details .woocommerce-customer-details { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	/* Tabele bez dedykowanego wrappera kartowego (order-details/downloads) —
	   przewijalne w poziomie zamiast rozjeżdżania panelu (dopełnienie reguły
	   globalnej z ds.css, tu z węższym selektorem specyficznym dla konta). */
	.aram-acc-order-details table.shop_table,
	.aram-acc-tablewrap table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Tabela zamówień (orders.php) → karty na wąskich ekranach, tak samo jak
	 * .aram-acc-table--invoices/--pricelist w account.css wtyczki (ten sam
	 * mechanizm td::before + attr(data-label); orders.php już renderuje
	 * data-label na każdej komórce). Dodane TU (nie w account.css, poza
	 * zakresem edycji) jako rozszerzenie tej samej rodziny komponentu.
	 */
	.aram-acc-table--orders,
	.aram-acc-table--orders thead,
	.aram-acc-table--orders tbody,
	.aram-acc-table--orders tr,
	.aram-acc-table--orders th,
	.aram-acc-table--orders td { display: block; width: 100%; }
	.aram-acc-table--orders thead { display: none; }
	.aram-acc-table--orders tr {
		border-top: 1px solid var(--line-1, rgba(0,0,0,.07));
		padding: 8px 4px;
	}
	.aram-acc-table--orders th,
	.aram-acc-table--orders td {
		border: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 10px 16px;
		padding: 7px 12px;
		text-align: right;
	}
	.aram-acc-table--orders th[data-label]::before,
	.aram-acc-table--orders td[data-label]::before {
		content: attr(data-label);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--text-faint, #9A958A);
		text-align: left;
	}
	/* Akcje (przyciski „Zobacz/Zapłać/Anuluj”) zawijają się pod etykietą,
	   pełna szerokość dostępnego miejsca zamiast wypychania wiersza. */
	.aram-acc-table--orders td.woocommerce-orders-table__cell-order-actions {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.aram-acc-table--orders td.woocommerce-orders-table__cell-order-actions .aram-acc-btn { flex: 0 0 auto; }
}

/* ============================================================
   20) WYSZUKIWARKA (lupka w headerze) — nazwa / SKU / EAN
   Przycisk .aram-hd__search (desktop) + .aram-drawer__search (mobile,
   wewnątrz drawera nawigacji) otwierają WSPÓLNY panel .aram-search__panel
   (overlay pod headerem na desktopie, pełnoekranowy na mobile). JS:
   bindSearch() w shop.js. Ceny/lock renderowane z tej samej ścieżki co
   katalog (Aram\B2B\Search + helpery motywu) — patrz aram-b2b-helpers.php.
   ============================================================ */
/* Wariant KONTRASTOWY (a11y): kółko wypełnione ink + jasna ikona w środku —
   zawsze widoczne, niezależnie od stanu headera (transparent nad hero /
   is-solid po scrollu). Poprzednio ikona dziedziczyła `currentColor` jak
   reszta akcji (cream nad hero → zlewała się z jasnym tłem zdjęcia).
   Obszar klikalny 44×44 (WCAG 2.5.5 AAA), kontrast ikona/tło 17.4:1 (AAA),
   hover = akcent z ciemną ikoną (7.5:1, AAA), focus-visible = pierścień
   ink 2px na kremowym tle (15.6:1) niezależny od stanu headera. */
.aram-hd__search {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--cream-card);
	transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-spring);
	flex-shrink: 0;
}
.aram-hd__search:hover {
	background: var(--accent);
	color: var(--ink);
	transform: translateY(-1px);
}
.aram-hd__search:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 50%;
}
.aram-hd.is-solid .aram-hd__search:focus-visible { outline-color: var(--ink-text); }
@media (prefers-reduced-motion: reduce) {
	.aram-hd__search { transition: background .01ms, color .01ms; }
	.aram-hd__search:hover { transform: none; }
}

/* ---------- Link „Ulubione" w headerze (widoczny tylko zalogowanym — .aram-acc-user) ---------- */
.aram-hd__favlink {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--cream-card);
	transition: color .5s ease;
	flex-shrink: 0;
}
.aram-hd.is-solid .aram-hd__favlink { color: var(--ink-text); }
.aram-hd__favlink:hover { color: var(--accent); }
/* Pierścień fokusu dwukontekstowy jak reszta headera — patrz .aram-hd__cart. */
.aram-hd__favlink:focus-visible { outline: 2px solid var(--cream-card); outline-offset: 2px; border-radius: 50%; }
.aram-hd.is-solid .aram-hd__favlink:focus-visible { outline-color: var(--ink); }
.aram-hd__favlink svg { display: block; }

.aram-search { position: relative; display: flex; }

/* UWAGA: jak .aram-mc__overlay wyżej — element jest wewnątrz <header>, a
   .aram-hd.is-solid ma backdrop-filter (containing block dla fixed). `inset:0`
   liczyłby wysokość względem niskiego boxa headera zamiast viewportu →
   overlay wąski pasek pod headerem, klik poza panelem (poniżej headera) nie
   zamykał wyszukiwarki przez tło. Jawna wysokość (100dvh) omija problem. */
.aram-search__overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100dvh;
	background: rgba(21, 20, 15, .42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--ease), visibility .35s var(--ease);
	z-index: 1090;
}
.aram-search.is-open .aram-search__overlay { opacity: 1; visibility: visible; }

.aram-search__panel {
	position: fixed;
	top: var(--header-h, 78px);
	left: 50%;
	transform: translate(-50%, -14px);
	width: min(640px, calc(100vw - 48px));
	max-height: min(70vh, 560px);
	background: var(--cream-bg);
	color: var(--ink-text);
	border-radius: var(--r-card);
	box-shadow: 0 40px 80px -30px rgba(21, 20, 15, .45);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
	z-index: 1100;
	font-family: 'Figtree', system-ui, sans-serif;
}
.aram-search.is-open .aram-search__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.aram-search__panel * { box-sizing: border-box; }

.aram-search__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line-2);
	color: var(--text-muted);
	flex-shrink: 0;
	transition: box-shadow .2s var(--ease);
}
/* Pole jest bez własnej ramki (wtopione w pasek) — fokus musi więc być
   widoczny na CAŁYM pasku (:focus-within), inaczej Tab do inputu nie dawał
   ŻADNEGO wskaźnika (2.4.7/2.4.13). Pierścień do wnętrza (inset), by nie
   wychodzić poza zaokrąglony róg panelu. */
.aram-search__bar:focus-within {
	box-shadow: inset 0 0 0 2px var(--accent-ink);
}
.aram-search__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	color: var(--ink-text);
	min-width: 0;
}
/* Wskaźnik fokusu przeniesiony na wrapper (.aram-search__bar:focus-within) —
   input sam w sobie nie ma ramki, więc domyślny outline wygląda źle wtopiony
   w pasek; usunięcie jest bezpieczne TYLKO dlatego, że zamiennik istnieje. */
.aram-search__input:focus { outline: none; }
.aram-search__input::placeholder { color: var(--text-faint); }
.aram-search__close {
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	border-radius: 8px;
	flex-shrink: 0;
	transition: background .25s var(--ease), color .25s var(--ease);
}
.aram-search__close:hover { background: var(--cream-2); color: var(--ink-text); }
/* accent-ink zamiast accent (2.2:1 FAIL 3:1 → 7.5+:1 AAA). */
.aram-search__close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.aram-search__results {
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: 8px;
}
.aram-search__empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--text-muted);
	font-size: 14.5px;
}
.aram-search__empty-title { margin: 0 0 6px; color: var(--ink-text); font-weight: 500; }
.aram-search__empty-hint { margin: 0; }
.aram-search__empty-link {
	color: var(--accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aram-search__empty-link:hover { color: var(--ink-text); }
.aram-search__empty-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }

/* Stopka dymka: „Zobacz wszystkie wyniki” — prowadzi na pełną stronę wyników
   (`/?s=…&post_type=product`, katalog z filtrami/sortowaniem/paginacją).
   Widoczna zarówno przy trafieniach (więcej niż limit podpowiedzi), jak i
   przy zerze wyników (patrz renderResults() w shop.js). */
.aram-search__footer {
	padding: 10px 16px 14px;
	text-align: center;
	border-top: 1px solid var(--line-2);
}
.aram-search__viewall {
	display: inline-block;
	color: var(--accent-ink);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}
.aram-search__viewall:hover { text-decoration: underline; text-underline-offset: 2px; }
.aram-search__viewall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }

/* Podpowiedź gdy wyniki pochodzą z fuzzy fallbacku (literówka w zapytaniu,
   np. „rokitnk” → „rokitnikowy”) — informuje, że dopasowanie jest przybliżone. */
.aram-search__fuzzy-hint {
	margin: 4px 8px 8px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--text-muted);
	background: var(--cream-2);
	border-radius: 8px;
}
.aram-search__result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	transition: background .2s var(--ease);
}
.aram-search__result:hover,
.aram-search__result.is-active { background: var(--cream-2); }
.aram-search__thumb {
	width: 48px; height: 48px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--cream-2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.aram-search__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aram-search__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.aram-search__title {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aram-search__sku { font-size: 12.5px; color: var(--text-muted); }
.aram-search__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-text);
	white-space: nowrap;
	flex-shrink: 0;
}
.aram-search__lock {
	font-size: 12.5px;
	color: var(--text-muted);
	white-space: normal;
	line-height: 1.35;
	flex-shrink: 0;
	width: 108px;
	text-align: right;
}

/* Przycisk w drawerze mobilnym (ukryty na desktopie). */
.aram-drawer__search {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--cream-2);
	border: none;
	border-radius: var(--r-pill);
	padding: 12px 18px;
	margin: 4px 0 18px;
	color: var(--text-muted);
	font-size: 14.5px;
	cursor: pointer;
}

@media (max-width: 980px) {
	.aram-hd__search { display: none; } /* Tylko desktop — mobile używa przycisku w drawerze. */
	.aram-drawer__search { display: inline-flex; }

	.aram-search__panel {
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100%; height: 100vh; height: 100dvh; max-width: 100%; max-height: 100dvh;
		transform: none;
		border-radius: 0;
	}
	.aram-search.is-open .aram-search__panel { transform: none; }
	.aram-search__results { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.aram-search__panel, .aram-search__overlay { transition: none !important; }
}

/* ============================================================
   20) MIKROINTERAKCJE „AWWWARDS" — fly-to-cart, burst ulubionych,
   toast globalny, press-state, hover kafelków, stagger wyszukiwarki,
   highlight wiersza mini-cart. Wszystko transform/opacity, gated
   prefers-reduced-motion (patrz bloki @media na końcu sekcji).
   ============================================================ */

/* ---------- 20.1 FLY-TO-CART — klon miniatury lecący do koszyka ----------
   Tworzony/usuwany przez shop.js (flyToCart()). Klon jest position:fixed,
   pointer-events:none (nie blokuje kliknięć), animowany Web Animations API
   (transform + opacity), więc te reguły ustawiają tylko wygląd bazowy. */
.aram-fly {
	position: fixed;
	z-index: 9600;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	pointer-events: none;
	box-shadow: 0 18px 40px -12px rgba(21, 20, 15, .45), 0 2px 10px rgba(21, 20, 15, .18);
	background: var(--cream-2);
	will-change: transform, opacity;
}
.aram-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 20.2 TOAST globalny sklepu ----------
   Kolejka „max 1 naraz”: nowy toast nadpisuje treść istniejącego (shop.js).
   Dolny-środek na mobile, dolny-prawy na desktop. */
.aram-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 14px);
	max-width: calc(100vw - 32px);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ink-text, #15140F);
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	padding: 13px 20px;
	border-radius: var(--r-pill, 100px);
	box-shadow: 0 20px 44px -16px rgba(21, 20, 15, .45);
	opacity: 0;
	visibility: hidden;
	z-index: 9700;
	transition: opacity .3s var(--ease), transform .3s var(--ease-spring), visibility .3s var(--ease);
	pointer-events: none;
}
.aram-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.aram-toast__icon { flex-shrink: 0; display: flex; color: var(--accent); }
.aram-toast__icon svg { display: block; }
@media (min-width: 641px) {
	.aram-toast {
		left: auto;
		right: 28px;
		bottom: 28px;
		transform: translateY(14px);
	}
	.aram-toast.is-visible { transform: translateY(0); }
}

/* ---------- 20.3 BURST ulubionych — mikro-cząstki ----------
   Kontener wstrzykiwany chwilowo wokół .aram-fav (position:absolute, inset:0,
   pointer-events:none), sprzątany po animacji przez shop.js. */
.aram-fav-burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	overflow: visible;
}
.aram-fav-burst__p {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	will-change: transform, opacity;
}
.aram-fav-burst__p--green { background: var(--green); }

/* ---------- 20.4 PRESS-STATE globalny — .btn-fill i akcje ----------
   active → scale(.97) szybki (60ms), niezależny od hover/lift (transform
   łączony w JS byłby nadmiarowy — active nadpisuje tylko przy kliknięciu,
   przeglądarka anuluje po puszczeniu, więc nie koliduje z transition hover). */
.btn-fill:active,
.aram-buy__cta:not(.loading):active,
.pcard__add:not(.loading):active,
.aram-qpop__submit:not(.is-loading):active,
.aram-mc__btn:active,
.aram-fav:active {
	transform: scale(.97);
	transition-duration: .06s;
}

/* ---------- 20.5 POPUP ILOŚCI — transform-origin od przycisku „+” ----------
   Origin ustawiany JS-owo (--aram-qpop-origin) tuż przed otwarciem, żeby
   scale „wyrastał” z miejsca kliknięcia zamiast ze środka karty. Wyjście
   symetryczne, ale szybsze (150ms) — patrz .aram-qpop.is-closing. */
.aram-qpop {
	transform-origin: var(--aram-qpop-origin, center top);
}
.aram-qpop.is-closing {
	transition-duration: .15s, .15s, .15s;
}
@media (max-width: 640px) {
	.aram-qpop { transform-origin: center bottom; }
}

/* ---------- 20.6 KARTY PRODUKTÓW — obrazek scale w hover (desktop) ----------
   .pcard już ma lift (translateY -7px, ds.css) + quick-add "+” (.addb) już
   rośnie/obraca się w hover (ds.css .pcard:hover .addb — rotate 90° scale
   1.08, zachowane bez zmian). Dokładamy tu TYLKO zoom obrazka w kontenerze
   overflow:hidden (.pcard__media), 200ms, spójne z resztą hover kafelka.

   FIX SPECYFICZNOŚCI: karty katalogu mają [data-reveal] (scroll-reveal) i po
   ujawnieniu dostają .is-visible — reguła „.aram-shop-js [data-reveal].is-visible
   { transform: none }” (specyficzność 0,3,0) jest SILNIEJSZA niż bazowe
   „.pcard:hover { transform: translateY(-7px) }” (0,2,0) z ds.css, więc lift
   był realnie zerowany po zakończeniu reveal (bug sprzed tej zmiany — karta
   nigdy się nie unosiła po wjechaniu w viewport). Powtórzenie reguły ze
   scope'em .aram-shop-js podnosi specyficzność do (0,3,0) i — będąc niżej w
   pliku — wygrywa remis, przywracając unoszenie/cień bez ruszania ds.css. */
.aram-shop-js .pcard:hover { transform: translateY(-7px); box-shadow: var(--shadow-card); }
.pcard__media img { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.pcard:hover .pcard__media img { transform: scale(1.04); }
}

/* ---------- 20.7 LUPKA — stagger wyników ----------
   shop.js dokłada style="--i:0/1/2…" na każdy .aram-search__result (max 8);
   kaskada opacity/translateY co ~30ms/pozycję. */
.aram-search__result {
	opacity: 0;
	transform: translateY(6px);
	animation: aramSearchIn .32s var(--ease) forwards;
	animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes aramSearchIn {
	to { opacity: 1; transform: none; }
}

/* ---------- 20.8 MINI-CART — highlight-flash wiersza po dodaniu ---------- */
.aram-mc__item.is-flash {
	animation: aramMcFlash 1s var(--ease) both;
}
@keyframes aramMcFlash {
	0% { background: rgba(254, 132, 12, .08); }
	100% { background: transparent; }
}

/* ---------- 20.9 GATE prefers-reduced-motion ----------
   Zero lotu, zero burst, zero staggeru — treść/stan widoczne od razu. */
@media (prefers-reduced-motion: reduce) {
	.aram-fly { display: none !important; }
	.aram-fav-burst { display: none !important; }
	.aram-toast { transition: none !important; }
	.btn-fill:active,
	.aram-buy__cta:not(.loading):active,
	.pcard__add:not(.loading):active,
	.aram-qpop__submit:not(.is-loading):active,
	.aram-mc__btn:active,
	.aram-fav:active { transform: none; }
	.pcard__media img { transition: none !important; }
	.pcard:hover .pcard__media img { transform: none !important; }
	.aram-search__result {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.aram-mc__item.is-flash { animation: none !important; background: transparent !important; }
}

/* ============================================================
   21bis) POWIADOMIENIA WOOCOMMERCE (globalne, sklep/koszyk/checkout/konto)
   Domyślne `.woocommerce-message/.woocommerce-info/.woocommerce-error` core
   WooCommerce (zielony gradient / szary / czerwony z natywnym stylem Woo) —
   przefarbowane na ds: karta radius 14, Figtree, ikonka w kółku, bez linków
   „wc-forward” w domyślnym stylu Woo. Specyficzność podniesiona (`.woocommerce
   ul.woocommerce-error`, atrybut `role` itp.) tak jak przy paginacji, żeby
   pokonać arkusz Woo. NIE dotyka `.aram-dash__banner` (panel klienta, osobny
   komponent — inny agent).
   ============================================================ */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce ul.woocommerce-error,
.woocommerce div.woocommerce-message,
.woocommerce div.woocommerce-info,
ul.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	list-style: none !important;
	background: var(--cream-2) !important;
	border: none !important;
	color: var(--text-muted-2) !important;
	border-radius: 14px !important;
	padding: 15px 18px !important;
	margin: 0 0 20px !important;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; content: none !important; }
/* Ikonka w kółku, kolor wg typu komunikatu (sukces zielony marki / info cream / błąd czerwony stonowany). */
.woocommerce-message,
.woocommerce-error {
	position: relative;
	padding-left: 50px !important;
}
.woocommerce-message::after,
.woocommerce-error::after {
	content: '';
	position: absolute;
	left: 16px; top: 14px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}
.woocommerce-message {
	color: var(--green-darker) !important;
	background: rgba(117, 135, 69, .1) !important;
}
.woocommerce-message::after {
	background-color: rgba(117, 135, 69, .18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5b2f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}
.woocommerce-error {
	color: #9A3B2E !important;
	background: #FBEEEC !important;
}
.woocommerce-error::after {
	background-color: rgba(154, 59, 46, .14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A3B2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='16.2' r='.6' fill='%239A3B2E' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}
.woocommerce-error li,
.woocommerce-message li { margin: 0; padding: 2px 0; list-style: none !important; }
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	flex-shrink: 0;
	background: var(--ink-text) !important;
	color: #fff !important;
	font-size: 12.5px !important;
	font-weight: 600;
	padding: 8px 16px !important;
	border-radius: var(--r-pill) !important;
}

/* Powiadomienia AJAX koszyka (update_cart/quantity_update) — WooCommerce
   renderuje je jako komponent BLOKOWY (`wc-block-components-notice-banner`),
   NIE klasyczny `.woocommerce-error` — inny markup, więc osobny zestaw
   selektorów. Domyślnie: czerwona/szara ramka + tło core, bez zaokrągleń,
   umieszczone na samej górze strony (poza `.aram-cart`) — przefarbowane tu
   na te same tony ds (karta radius 14, ikonka w kółku zamiast surowego SVG). */
.woocommerce-notices-wrapper .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	border-radius: 14px !important;
	border: none !important;
	padding: 15px 18px !important;
	margin: 0 0 20px !important;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	box-shadow: none !important;
}
.wc-block-components-notice-banner > svg {
	flex-shrink: 0;
	width: 22px; height: 22px;
	border-radius: 50%;
	padding: 4px;
	box-sizing: content-box;
}
.wc-block-components-notice-banner.is-error {
	color: #9A3B2E !important;
	background: #FBEEEC !important;
}
.wc-block-components-notice-banner.is-error > svg { background: rgba(154, 59, 46, .14); fill: #9A3B2E; }
.wc-block-components-notice-banner.is-success {
	color: var(--green-darker) !important;
	background: rgba(117, 135, 69, .1) !important;
}
.wc-block-components-notice-banner.is-success > svg { background: rgba(117, 135, 69, .18); fill: var(--green-darker); }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	color: var(--text-muted-2) !important;
	background: var(--cream-2) !important;
}
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-warning > svg { background: rgba(0,0,0,.06); fill: var(--text-muted-2); }
.wc-block-components-notice-banner__content { flex: 1 1 auto; }
.wc-block-components-notice-banner .wc-block-components-button {
	margin-left: auto;
	flex-shrink: 0;
}

/* ============================================================
   22) „ZOBACZ KOSZYK” po quick-add (WooCommerce core: <a class="added_to_cart
   wc-forward">). WC core (assets/js/frontend/add-to-cart.js,
   AddToCartHandler.updateButton) wstawia ten link jako SIBLING zaraz PO
   klikniętym przycisku add-to-cart przy KAŻDYM evencie `added_to_cart` —
   także tym, który shop.js odpala ręcznie po WŁASNYM AJAX-ie (submitQuickAdd),
   żeby zadziałały fragments/mini-cart (patrz shop.js ~L354). Bez stylu
   renderuje się jako goły, niepodkreślony-ale-nieopisany link tuż obok
   pełnego pomarańczowego CTA „Dodaj do koszyka" — poniżej wariant
   SECONDARY/outline, spójny z przyciskami platformy (pill, Figtree,
   focus-visible AAA jak reszta CTA w tym pliku).
   ============================================================ */
a.added_to_cart.wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	margin-left: 10px;
	flex-shrink: 0;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-text) !important;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
a.added_to_cart.wc-forward:hover {
	border-color: var(--accent);
	color: var(--accent-ink) !important;
	background: rgba(254, 132, 12, .08);
}
a.added_to_cart.wc-forward:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Wewnątrz popovera ilości (.aram-qpop, patrz §4bis) — „Dodaj do koszyka”
   (.aram-qpop__submit) jest pełnej szerokości, więc sibling ląduje w nowej
   linii pod przyciskiem: traktujemy go jako drugorzędną akcję, wyśrodkowaną,
   bez ramki (popover ma tylko 280px — pigułka z obwódką byłaby stłoczona). */
.aram-qpop a.added_to_cart.wc-forward {
	display: flex;
	width: 100%;
	height: auto;
	margin: 10px 0 0;
	padding: 2px 0 0;
	border: none;
	background: none;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Buy-box karty produktu (.aram-buy__order, rząd flex stepper + CTA) —
   pigułka outline obok pełnego CTA, bez kurczenia się w rzędzie flex. */
.aram-buy__order a.added_to_cart.wc-forward { margin-left: 10px; }

/* Okrągłe „+” katalogu/strony głównej (.pcard__form) i tabela „Szybkie
   zamawianie” (.aram-qadd/.aram-qtable__row) — zbyt mało miejsca na pigułkę
   w ciasnym układzie o stałej szerokości; popover ilości (.aram-qpop) i tak
   przejmuje ten przepływ (shop.js::bindQuickAddPopup przechwytuje submit
   tych formularzy), więc link tu w praktyce się nie pojawia — ukryty
   defensywnie na wypadek wariantu bez popupu, żeby nie łamał siatki. */
.pcard__form a.added_to_cart.wc-forward,
.aram-qadd a.added_to_cart.wc-forward,
.aram-qtable__row a.added_to_cart.wc-forward {
	display: none;
}