/* ==========================================================================
   Gifciak — motyw sklepu
   Kolory z logo: granat #071E3D i złoto #C49A5E. Jeden krój: Schibsted Grotesk.
   Jedyny „głośny” element to podgląd graweru na zdjęciu; reszta ma być cicha i czytelna.
   ========================================================================== */

:root {
	--ink: #071e3d;
	--ink-2: #163058;
	--gold: #c49a5e;
	--gold-hover: #b3884b;
	--gold-text: #85652f;
	--paper: #ffffff;
	--mist: #f1f4f8;
	--mist-2: #e6ebf2;
	--line: #d9e0ea;
	--text: #22304a;
	--muted: #5a6780;
	--ok: #1c7a4c;
	--danger: #b3261e;

	--font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-classic: "Cormorant Garamond", Georgia, serif;
	--font-script: "Great Vibes", cursive;

	--step--1: 0.875rem;
	--step-0: 1rem;
	--step-1: 1.125rem;
	--step-2: 1.375rem;
	--step-3: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
	--step-4: clamp(2.1rem, 1.3rem + 3vw, 3.5rem);

	--radius-s: 8px;
	--radius: 12px;
	--radius-l: 20px;
	/* Wymiary w rem: na szerokim ekranie rosną razem z tekstem (patrz html niżej) */
	--container: 84rem;
	--gutter: clamp(1rem, 4vw, 3rem);
	--header-h: 4.5rem;
	--section-y: clamp(3.5rem, 7vw, 6rem);
	--shadow-lift: 0 1px 2px rgba(7, 30, 61, .06), 0 8px 24px rgba(7, 30, 61, .08);

	/* Gwiazdki ocen: ciepłe złoto, wyraźniejsze niż logo (gwiazdka na białym tle musi być czytelna) */
	--star: #d4952b;
	--star-off: #d9e0ea;
	--star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E");
	--arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Reset / podstawy ---------- */

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

/*
 * Na szerokich ekranach cała strona płynnie rośnie: 16 px do 1280 px szerokości,
 * 18 px przy 1920, 20 px od 2560 (monitory 27" 1440p). Odstępy i szerokości są
 * w rem, więc proporcje zostają, a tekst da się czytać bez wpatrywania.
 * Procenty liczą się od ustawienia przeglądarki — powiększenie czcionki działa dalej.
 */
html {
	font-size: clamp(100%, 75% + .3125vw, 125%);
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
p { margin: 0 0 1em; }
p, li, dd, summary { text-wrap: pretty; } /* bez pojedynczych słów w ostatniej linii */

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-2); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

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

.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	z-index: 1000; top: .5rem; left: .5rem;
	padding: .75rem 1rem; background: var(--paper); color: var(--ink);
	box-shadow: var(--shadow-lift);
}

.icon { width: 1.375rem; height: 1.375rem; flex: none; }

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

/* ---------- Przyciski i pola ---------- */

.btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 3rem;
	padding: .75em 1.5em;
	border: 0;
	border-radius: var(--radius-s);
	font: 700 var(--step-0)/1.2 var(--font);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button.button {
	background: var(--gold);
	color: var(--ink);
}
.btn--primary:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button.button:hover { background: var(--gold-hover); color: var(--ink); }

.btn--secondary,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button { background: var(--ink); color: #fff; }
.btn--secondary:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: var(--ink-2); color: #fff; }

.btn--sm { min-height: 2.625rem; padding: .55em 1.1em; font-size: var(--step--1); }
.btn--lg { min-height: 3.5rem; padding: .9em 1.9em; font-size: var(--step-1); }

.link-btn {
	padding: 0; border: 0; background: none;
	font: 600 var(--step-0)/1.4 var(--font);
	color: var(--ink);
	text-decoration: underline; text-underline-offset: 4px;
	cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }

.field { margin-bottom: 1.1rem; }
.field label,
.field__label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--ink); }
.field__req { color: var(--danger); }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { margin: .35rem 0 0; font-size: var(--step--1); color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], textarea, select {
	width: 100%;
	min-height: 3.125rem;
	padding: .7em .9em;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	background: #fff;
	color: var(--ink);
	font: 400 var(--step-1)/1.3 var(--font);
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, textarea:hover, select:hover { border-color: #b8c3d3; }
/* Telefony i tablety: tekst w polach co najmniej 16 px — przy mniejszym Safari na iPhonie
   powiększa stronę po dotknięciu pola. Mniejsze pola (sortowanie, filtr ceny) mają to samo niżej. */
@media (max-width: 1024px), (pointer: coarse) {
	input:not([type]), input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { font-size: max(1rem, 16px); }
}

/* Liczby bez strzałek przeglądarki — ilość zmienia się przyciskami „−” i „+” (.qty-stepper) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Ilość: „−  1  +” w jednej ramce — karta produktu, koszyk, formularze wyceny */
.qty-stepper {
	display: inline-flex; align-items: stretch; min-height: 3.125rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.qty-stepper:hover { border-color: #b8c3d3; }
.qty-stepper:has(input:focus) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(196, 154, 94, .35); }
.qty-stepper input[type="number"],
.woocommerce .qty-stepper .qty {
	flex: 1 1 auto; width: 3.25rem; min-width: 0; min-height: 0; padding: 0 .25rem;
	border: 0; border-radius: 0; background: none; box-shadow: none;
	text-align: center; font-weight: 700; font-size: var(--step-1);
}
.qty-stepper input[type="number"]:focus { box-shadow: none; }
.qty-stepper__btn {
	display: grid; place-items: center; flex: none; width: 2.75rem; padding: 0;
	border: 0; border-radius: calc(var(--radius-s) - 2px); background: none; color: var(--ink);
	cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.qty-stepper__btn:hover { background: var(--mist); }
.qty-stepper__btn:disabled { background: none; color: #b8c3d3; cursor: default; }
.qty-stepper__btn:focus-visible { outline-offset: -3px; }
.qty-stepper__btn .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.qty-stepper--field { display: flex; width: 100%; }

/* Koszyk (blok WooCommerce) — ten sam wygląd co .qty-stepper */
html body .wc-block-components-quantity-selector {
	width: 7.75rem; min-height: 2.875rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
html body .wc-block-components-quantity-selector::after { display: none; }
html body .wc-block-components-quantity-selector:hover { border-color: #b8c3d3; }
html body .wc-block-components-quantity-selector:has(input:focus) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(196, 154, 94, .35); }
html body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-width: 0; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none;
	color: var(--ink); font: 700 var(--step-0)/1 var(--font); text-align: center;
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	flex: none; width: 2.5rem; min-width: 0; padding: 0; margin: 0;
	border-radius: calc(var(--radius-s) - 2px); background: none; color: var(--ink);
	font: 400 1.375rem/1 var(--font); opacity: 1; cursor: pointer; transition: background-color .15s ease;
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--mist); }
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: #b8c3d3; background: none; cursor: default; }
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; box-shadow: none; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(196, 154, 94, .35); }

/* ---------- Pasek promocji ---------- */

.promo-bar { background: var(--ink); color: #fff; font-size: var(--step--1); }
.promo-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.5rem; }
.promo-bar__msg { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.promo-bar__msg .icon { color: var(--gold); width: 1.125rem; height: 1.125rem; }
.promo-bar__usp { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; color: #c9d3e3; }
.promo-bar__usp li { display: flex; align-items: center; gap: .375rem; }
.promo-bar__usp .icon { width: 1.125rem; height: 1.125rem; }

/* ---------- Nagłówek ---------- */

.site-header {
	position: sticky; top: 0; z-index: 50;
	border-bottom: 1px solid var(--line);
}
/*
 * Tło z rozmyciem na osobnej warstwie: backdrop-filter na samym nagłówku
 * robi z niego punkt odniesienia dla position: fixed i menu mobilne
 * zamykałoby się w wysokości paska zamiast wypełnić ekran.
 */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(8px);
}
.admin-bar .site-header { top: 32px; } /* pasek WP ma stałe 32 px */
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }

.site-logo img { width: 9.375rem; height: auto; }

.site-nav { margin: 0 auto 0 .75rem; }
.site-nav__list { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.site-nav__list a {
	display: block; padding: .5rem .75rem; border-radius: var(--radius-s);
	font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.site-nav__list a:hover { background: var(--mist); }
/* Części szuflady z menu (telefon, tablet) — na komputerze niewidoczne */
.site-nav__head, .site-nav__search, .site-nav__foot, .site-nav__expand, .site-nav__backdrop,
.site-nav__list .menu-item--all { display: none; }

/* Podmenu (kategorie, kolekcje, pozycje z panelu): rozwija się po najechaniu i po wejściu klawiaturą */
.site-nav__list > li { position: relative; }
.site-nav__list > .menu-item-has-children > a { display: inline-flex; align-items: center; gap: .3rem; }
.site-nav__list > .menu-item-has-children > a::after {
	content: ""; width: .4rem; height: .4rem; margin-top: -.2rem;
	border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; opacity: .55;
}
.site-nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	min-width: 17rem; margin: 0; padding: .5rem; list-style: none;
	border: 1px solid var(--line); border-radius: var(--radius-s);
	background: #fff; box-shadow: var(--shadow-lift);
	visibility: hidden; opacity: 0; translate: 0 -4px;
	transition: opacity .15s ease, translate .15s ease, visibility 0s linear .15s;
}
.site-nav__list .sub-menu a { padding: .55rem .75rem; font-weight: 500; }
.site-nav__list .sub-menu .current-menu-item > a { font-weight: 700; }
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }

/* Mega menu „Wszystkie produkty” (inc/menu.php): panel na całą szerokość pod nagłówkiem —
   rodzaje produktów, „Dla kogo” i karta „Zaprojektuj sam”. Otwiera się po najechaniu
   (z krótkim opóźnieniem, żeby nie migał przy przejeżdżaniu kursorem) i z klawiatury. */
.site-nav__list > .menu-item--mega { position: static; }
.mega {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
	border-top: 1px solid var(--line); background: #fff; box-shadow: 0 24px 48px rgba(7, 30, 61, .12);
	visibility: hidden; opacity: 0; translate: 0 -6px;
	transition: opacity .18s ease, translate .18s ease, visibility 0s linear .18s;
}
/* Pas nad panelem: kursor przechodzi z „Wszystkie produkty” do panelu bez zamknięcia */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.5rem; }
.site-nav__list > .menu-item--mega:hover > .mega,
.site-nav__list > .menu-item--mega:focus-within > .mega { visibility: visible; opacity: 1; translate: 0; transition-delay: .08s; }
.site-nav__list > .menu-item--mega.is-closed > .mega { visibility: hidden; opacity: 0; transition-delay: 0s; }
/* Otwarty panel: „Wszystkie produkty” podświetlone, strzałka w górę */
.site-nav__list > .menu-item--mega:is(:hover, :focus-within):not(.is-closed) > a { background: var(--mist); }
.site-nav__list > .menu-item--mega:is(:hover, :focus-within):not(.is-closed) > a::after { rotate: 225deg; margin-top: .2rem; }
/* Pod otwartym panelem strona lekko przygasa — panel nie miesza się z treścią pod spodem */
.mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(7, 30, 61, .22); pointer-events: none; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; padding-block: 1.75rem 2rem; }
.mega__group { padding-right: clamp(1.5rem, 3vw, 3rem); }
.mega__group + .mega__group { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); }
.mega__title { margin: 0 0 .875rem; color: var(--gold-text); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mega__tiles, .mega__list, .mega__colors { margin: 0; padding: 0; list-style: none; }
.site-nav__list .mega a { white-space: normal; }
.mega .icon { flex: none; transition: translate .15s ease; }

/* Rodzaje produktów: kafelki ze zdjęciem, nazwą i jednym zdaniem opisu */
.mega__tiles { display: grid; gap: .75rem; }
.site-nav__list .mega__tile {
	display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem .75rem .75rem;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	color: var(--ink); line-height: 1.35;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.site-nav__list .mega__tile:hover, .site-nav__list .mega__tile[aria-current] { border-color: var(--ink); background: #fff; box-shadow: var(--shadow-lift); }
.mega__thumb { flex: none; width: 4.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius-s); overflow: hidden; background: var(--mist-2); }
.mega__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mega__tile-text { display: grid; flex: 1; gap: .25rem; min-width: 0; }
.mega__tile-name { font-size: 1.0625rem; font-weight: 700; }
.mega__tile-desc { color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.45; }
.mega__tile .icon { width: 1.25rem; height: 1.25rem; color: var(--muted); }
.mega__tile:hover .icon { translate: 3px 0; color: var(--ink); }

/* Dla kogo: krótkie nazwy kolekcji, strzałka przy każdej */
.site-nav__list .mega__list a {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin-inline: -.75rem; padding: .625rem .75rem; border-radius: var(--radius-s);
	color: var(--ink); font-weight: 500; line-height: 1.35;
}
.site-nav__list .mega__list a:hover, .site-nav__list .mega__list a[aria-current] { background: var(--mist); }
.site-nav__list .mega__list a[aria-current] { font-weight: 700; }
.mega__list .icon { width: 1.125rem; height: 1.125rem; color: var(--muted); }
.mega__list a:hover .icon { translate: 3px 0; color: var(--ink); }
.site-nav__list .mega__more a { justify-content: flex-start; gap: .5rem; margin-top: .375rem; font-weight: 700; }
.mega__more .icon { color: var(--ink); }

/* Karta „Zaprojektuj sam” */
.mega__promo {
	display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1.25rem;
	margin-left: clamp(1rem, 2vw, 2rem); padding: 1.25rem; border-radius: var(--radius-l); background: var(--mist);
}
.site-nav__list .mega__media { position: relative; display: block; padding: 0; border-radius: var(--radius-s); overflow: hidden; background: var(--mist-2); }
.site-nav__list .mega__media:hover { background: var(--mist-2); }
.mega__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mega__promo-title { margin: 0 0 .375rem; color: var(--ink); font-size: var(--step-1); font-weight: 800; }
.mega__text { margin: 0 0 .875rem; color: var(--text); font-size: var(--step--1); line-height: 1.5; }
.mega__label { margin: 0 0 .5rem; color: var(--muted); font-size: .8125rem; font-weight: 700; }
.mega__colors { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.site-nav__list .mega__dot {
	display: block; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%;
	background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--mist);
	transition: box-shadow .15s ease;
}
.site-nav__list .mega__dot:hover, .site-nav__list .mega__dot:focus-visible { background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--mist), 0 0 0 4px var(--ink); outline: 0; }
.site-nav__list .mega__btn { display: inline-flex; min-height: 2.75rem; padding: .625rem 1.125rem; background: var(--gold); color: var(--ink); font-size: var(--step--1); }
.site-nav__list .mega__btn:hover { background: var(--gold-hover); color: var(--ink); }
.mega__btn .icon { width: 1.125rem; height: 1.125rem; }

/* Dół panelu: cały katalog */
.mega__foot { border-top: 1px solid var(--line); background: var(--mist); }
.mega__foot .container { padding-block: .75rem; }
.site-nav__list .mega__all {
	display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 0;
	color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold);
	text-decoration-thickness: 2px; text-underline-offset: .35em;
}
.site-nav__list .mega__all:hover { background: none; text-decoration-color: var(--ink); }
.mega__all .icon { width: 1rem; height: 1rem; }
.mega__all:hover .icon { translate: 3px 0; }
@media (max-width: 1320px) and (min-width: 1181px) {
	/* Węższy komputer: karta „Zaprojektuj sam” bez zdjęcia, żeby kolumny nie ścisnęły tekstu */
	.mega__promo { grid-template-columns: minmax(0, 1fr); }
	.site-nav__list .mega__media { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mega, .mega .icon, .mega__tile { transition: none; } }

.site-header__actions { display: flex; align-items: center; gap: .25rem; }

.icon-btn {
	position: relative;
	display: inline-grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	border: 0; border-radius: var(--radius-s);
	background: none; color: var(--ink);
	cursor: pointer;
}
.icon-btn:hover { background: var(--mist); color: var(--ink); }

.header-cart__count {
	position: absolute; top: 3px; right: 1px;
	min-width: 1.1875rem; height: 1.1875rem; padding: 0 .3125rem;
	border-radius: 10px;
	background: var(--gold); color: var(--ink);
	font-size: .6875rem; font-weight: 800; line-height: 1.1875rem; text-align: center;
}
.header-cart__count[data-count="0"] { display: none; }

.site-header__cta { margin-left: .5rem; white-space: nowrap; }
/* „Zobacz produkty” powtarza „Sklep” — na średnich ekranach ustępuje miejsca menu */
@media (max-width: 1280px) { .site-header__cta { display: none; } }
.nav-toggle { display: none; }

.search-panel { border-top: 1px solid var(--line); background: #fff; }
.search-panel[hidden] { display: none; }
.search-panel__form { display: flex; gap: .625rem; padding-block: .875rem; }
.search-panel__form input { flex: 1; }

/* Wyszukiwarka w treści (404, widżety) — ten sam rząd pola i przycisku co w nagłówku */
.search-form { display: flex; gap: .625rem; }
.search-form input[type="search"] { flex: 1; min-width: 0; }
.search-form .btn { flex: none; }

/*
 * Telefon i tablet: menu to szuflada wysuwana z lewej (od strony przycisku),
 * nad przyciemnioną stroną. U góry „Menu” i krzyżyk, pod nim wyszukiwarka,
 * potem pozycje — te z podmenu rozwijają się po dotknięciu (strzałka), a na
 * dole konto i telefon. Zamyka ją krzyżyk, dotknięcie tła, Esc i wybór linku.
 */
@media (max-width: 1180px) {
	.promo-bar__usp { display: none; }
	.nav-toggle { display: inline-grid; margin-left: -.625rem; }
	.site-logo { margin-right: auto; }
	.site-logo img { width: 8rem; }

	.site-nav {
		position: fixed; inset: 0 auto 0 0; z-index: 70;
		display: flex; flex-direction: column;
		width: min(23rem, 88vw); margin: 0;
		background: #fff; box-shadow: 0 0 40px rgba(7, 30, 61, .2);
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-102%); visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.site-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
	.admin-bar .site-nav { top: var(--wp-admin--admin-bar--height, 32px); }
	.site-nav__backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(7, 30, 61, .45); }
	body.nav-open { overflow: hidden; }

	.site-nav__head {
		position: sticky; top: 0; z-index: 1;
		display: flex; flex: none; align-items: center; gap: .25rem;
		min-height: var(--header-h); padding: 0 .625rem 0 1.25rem;
		border-bottom: 1px solid var(--line); background: #fff;
	}
	.site-nav__title { min-width: 0; color: var(--ink); font-size: var(--step-1); font-weight: 800; }
	.site-nav__close { margin-left: auto; }
	.site-nav__search { display: flex; flex: none; gap: .5rem; margin: 1rem 1.25rem .25rem; }
	.site-nav__search input { flex: 1; min-width: 0; min-height: 2.875rem; padding-inline: 1.125rem; border-radius: 999px; }
	.site-nav__search-btn {
		display: grid; flex: none; place-items: center; width: 2.875rem; height: 2.875rem;
		border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer;
	}
	.site-nav__search-btn:hover { background: var(--ink-2); }
	.site-nav__search-btn .icon { width: 1.25rem; height: 1.25rem; }

	.site-nav__list { flex: none; flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.5rem; }
	.site-nav__list > li { border-bottom: 1px solid var(--line); }
	.site-nav__list a { white-space: normal; }
	.site-nav__list > li > a,
	.site-nav__expand {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
		min-height: 3.5rem; padding: .75rem 0; border-radius: 0;
		font: 700 var(--step-1)/1.3 var(--font); color: var(--ink); text-align: left;
	}
	.site-nav__list > li > a:hover { background: none; text-decoration: underline; text-underline-offset: .3em; }
	.site-nav__list > .current-menu-item > a { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .35em; }
	/* Pozycja z podmenu: zamiast linku przycisk ze strzałką, który otwiera podmenu na całą
	   szufladę (strona rodzica jest w podmenu jako „Wszystkie …”). W nagłówku szuflady
	   pojawia się wtedy strzałka powrotu i nazwa sekcji. */
	.site-nav__list > .menu-item-has-children > a { display: none; }
	.site-nav__expand { border: 0; background: none; cursor: pointer; }
	.site-nav__expand .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--muted); }
	.site-nav__expand:hover span { text-decoration: underline; text-underline-offset: .3em; }
	.site-nav__list > :is(.current-menu-ancestor, .current-menu-parent) > .site-nav__expand span { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .35em; }
	.site-nav__back { display: none; margin-left: -.625rem; }
	.site-nav__back .icon { rotate: 180deg; }
	.site-nav.is-sub .site-nav__back { display: inline-grid; }
	.site-nav.is-sub .site-nav__search,
	.site-nav.is-sub .site-nav__list > li:not(.is-active),
	.site-nav.is-sub .site-nav__list > .is-active > .site-nav__expand { display: none; }
	.site-nav.is-sub .site-nav__list > .is-active { border-bottom: 0; }
	.site-nav.is-sub .site-nav__list { padding-top: .25rem; }

	.site-nav__list .sub-menu {
		position: static; display: none; min-width: 0; margin: 0; padding: 0;
		border: 0; border-radius: 0; background: none; box-shadow: none;
		visibility: visible; opacity: 1; translate: 0; transition: none;
	}
	.site-nav__list > .is-active > .sub-menu { display: block; animation: nav-in .2s ease; }
	.site-nav__list .sub-menu li { border-bottom: 1px solid var(--line); }
	.site-nav__list .sub-menu a {
		display: flex; align-items: center; min-height: 3.25rem; padding: .75rem 0;
		border-radius: 0; color: var(--ink); font-size: var(--step-1); font-weight: 600;
	}
	.site-nav__list .sub-menu a:hover { background: none; text-decoration: underline; text-underline-offset: .3em; }
	.site-nav__list .sub-menu .current-menu-item > a { font-weight: 800; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .35em; }
	.site-nav__list .sub-menu .menu-item--all { display: block; }
	@keyframes nav-in { from { opacity: 0; transform: translateX(1.5rem); } }

	/* Mega menu w szufladzie: na górze „Zobacz wszystkie produkty”, potem kafelki rodzajów,
	   „Dla kogo” i karta „Zaprojektuj sam” bez zdjęcia */
	.mega {
		position: static; display: none; margin: 0; padding: 0 0 1rem; border: 0;
		background: none; box-shadow: none; visibility: visible; opacity: 1; translate: 0; transition: none;
	}
	.mega::before, .mega::after { content: none; }
	.site-nav__list > .is-active > .mega { display: flex; flex-direction: column; animation: nav-in .2s ease; }
	.mega .container { padding-inline: 0; }
	.mega__inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0 0; }
	.mega__group, .mega__group + .mega__group { padding: 0; border: 0; }
	.mega__foot { order: -1; border: 0; background: none; }
	.mega__foot .container { padding: 0; }
	.site-nav__list .mega__all {
		display: flex; justify-content: space-between; width: 100%; min-height: 3.25rem; padding: .75rem 0;
		border-bottom: 1px solid var(--line); border-radius: 0; text-decoration: none;
	}
	.mega__all .icon { width: 1.25rem; height: 1.25rem; }
	.mega__title { margin: 0 0 .625rem; }
	.mega__tiles { gap: .625rem; }
	.site-nav__list .mega__tile { gap: .875rem; padding: .625rem; }
	.mega__tile > .icon { display: none; }
	.mega__thumb { width: 3.5rem; }
	.mega__tile-name { font-size: 1rem; }
	.mega__tile-desc { font-size: .8125rem; }
	.mega__list li { border-bottom: 1px solid var(--line); }
	.mega__list li:first-child { border-top: 1px solid var(--line); }
	.site-nav__list .mega__list a { min-height: 3rem; margin: 0; padding: .625rem 0; border-radius: 0; font-size: 1rem; }
	.site-nav__list .mega__list a:hover, .site-nav__list .mega__list a[aria-current] { background: none; }
	.mega__list .mega__more { border-bottom: 0; }
	.site-nav__list .mega__more a { margin-top: .25rem; }
	.mega__promo { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 1rem 1rem 1.125rem; border-radius: var(--radius); }
	.site-nav__list .mega__media { display: none; }
	.site-nav__list .mega__dot { width: 2rem; height: 2rem; }

	.site-nav__foot {
		display: grid; flex: none; gap: .875rem; margin-top: auto;
		padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
		background: var(--mist);
	}
	.site-nav__account, .site-nav__contact a { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); font-weight: 700; text-decoration: none; }
	.site-nav__account:hover, .site-nav__contact a:hover { text-decoration: underline; text-underline-offset: .3em; }
	.site-nav__foot .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--gold-text); }
	.site-nav__contact { display: grid; gap: .125rem; margin: 0; color: var(--muted); font-size: var(--step--1); }
	.site-nav__contact span { padding-left: 1.875rem; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
	.site-nav, .site-nav.is-open { transition: none; }
	.site-nav__list > .is-active > :is(.sub-menu, .mega) { animation: none; }
}

@media (max-width: 1180px) and (min-width: 641px) { .site-header__cta { display: inline-flex; } }
@media (max-width: 640px) {
	.site-header__cta { display: none; }
	.promo-bar__msg { font-size: .8rem; }
}
/* Najwęższe telefony (320–400 px): przycisk menu, logo i trzy ikony mieszczą się w jednym rzędzie */
@media (max-width: 400px) {
	.site-header__inner { gap: .5rem; }
	.site-logo img { width: 7rem; }
	.site-header__actions { gap: 0; }
	.site-header__actions .icon-btn { width: 2.5rem; }
}

/* ---------- Podgląd graweru na zdjęciu produktu ---------- */

/*
 * Zdjęcia produktów mają białe tło; multiply sprawia, że znika ono na każdym
 * jasnym tle sekcji. Mieszamy całą figurę, a nie samo zdjęcie: obrócona figura
 * tworzy własny kontekst warstw i zdjęcie w środku nie miałoby z czym się mieszać.
 * Napis leży w polu graweru ustawionym w produkcie (w %).
 */
.preview { position: relative; margin: 0; width: 100%; mix-blend-mode: multiply; }
.preview__img { width: 100%; height: auto; }

.preview__area {
	position: absolute;
	left: var(--x); top: var(--y); width: var(--w); height: var(--h);
	display: grid; place-items: center;
	container-type: size;
	pointer-events: none;
}

.preview__text {
	display: flex; flex-direction: column; align-items: center; gap: .3em;
	max-width: 100%;
	text-align: center;
	color: var(--engrave, #b9a27a);
	/* ślad lasera: lekko wgłębiony — ciemna krawędź u góry, światło u dołu */
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .1);
	overflow-wrap: anywhere;
	text-wrap: balance;
	transition: color .35s ease;
}

.preview__line { line-height: 1.1; }
.preview__line:empty { display: none; }
.preview__line--1 { font-size: 13cqi; }
.preview__line--2, .preview__line--3 { font-size: 7.5cqi; opacity: .95; }

.preview__text[data-font="klasyczny"] { font-family: var(--font-classic); font-weight: 600; letter-spacing: .02em; }
.preview__text[data-font="nowoczesny"] { font-family: var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.preview__text[data-font="nowoczesny"] .preview__line--1 { font-size: 9cqi; }
.preview__text[data-font="nowoczesny"] .preview__line--2,
.preview__text[data-font="nowoczesny"] .preview__line--3 { font-size: 5.6cqi; letter-spacing: .2em; }
.preview__text[data-font="odreczny"] { font-family: var(--font-script); font-weight: 400; }
.preview__text[data-font="odreczny"] .preview__line--1 { font-size: 16cqi; line-height: 1; }
.preview__text[data-font="odreczny"] .preview__line--2,
.preview__text[data-font="odreczny"] .preview__line--3 { font-family: var(--font-classic); font-size: 7.5cqi; }

/* Podgląd „na żywo” — krótki błysk lasera przy każdej zmianie tekstu */
.preview--live .preview__text.is-engraving { animation: engrave .5s ease-out; }
@keyframes engrave {
	0% { color: #fff4dc; text-shadow: 0 0 10px rgba(255, 214, 150, .9), 0 0 2px #fff; }
	100% { color: var(--engrave); }
}

/* ---------- Próbki kolorów (karta produktu, rodzina kolorów) ---------- */

.swatches { display: flex; flex-wrap: wrap; gap: .625rem; }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch::before {
	content: "";
	display: block;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 4px var(--line);
	transition: box-shadow .15s ease;
}
.swatch:hover::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 4px #9aa7ba; }
.swatch:has(input:checked)::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.swatch:has(input:focus-visible)::before { outline: 3px solid var(--gold); outline-offset: 6px; }

/* ---------- Ramka zaznaczenia (jak w edytorze) — hasło, banery, demo kreatora ---------- */

/*
 * Ramka zaznaczenia jak w edytorze (i pole znakowania na produkcie):
 * przerywana linia i cztery uchwyty. Ta sama w haśle i na ilustracjach.
 */
.mark-frame { position: absolute; inset: 0; border: 2px dashed var(--frame, var(--gold)); border-radius: 2px; pointer-events: none; }
.mark-frame i { position: absolute; width: .5rem; height: .5rem; border: 2px solid var(--frame, var(--gold)); border-radius: 2px; background: var(--paper); }
.mark-frame i:nth-child(1) { top: -.3rem; left: -.3rem; }
.mark-frame i:nth-child(2) { top: -.3rem; right: -.3rem; }
.mark-frame i:nth-child(3) { bottom: -.3rem; left: -.3rem; }
.mark-frame i:nth-child(4) { bottom: -.3rem; right: -.3rem; }


/* ---------- Sekcje ---------- */

.section__link { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; text-decoration: none; }
.section__link:hover { text-decoration: underline; }
.section__link .icon { width: 1.125rem; height: 1.125rem; }

.section { padding: var(--section-y) 0; }
.products-section + .steps-section { padding-top: 0; }
.section__title { font-size: var(--step-3); max-width: 28ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section__head .section__title { margin-bottom: 0; }

.products-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Kroki — to naprawdę sekwencja, więc numery zostają */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step h3 { font-size: var(--step-2); margin-bottom: .35em; }
.step p { color: var(--muted); margin: 0; max-width: 36ch; }
.step__num {
	display: grid; place-items: center;
	width: 2.75rem; height: 2.75rem; margin-bottom: 1.125rem;
	border: 2px solid var(--gold); border-radius: 50%;
	color: var(--ink); font-weight: 800; font-size: var(--step-1);
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Specyfikacja */
.specs { margin: 0 0 1.75rem; }
.specs__row { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.specs__row:first-child { border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; color: var(--ink); }

/* Grawer na zlecenie — sekcja na stronie głównej */
.engrave-section { background: var(--mist); }
.eyebrow {
	display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .75rem;
	font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-text);
}
.eyebrow .icon { width: 1.25rem; height: 1.25rem; }
.eyebrow--light { color: var(--gold); }
/* Nadtytuł nad obiema kolumnami; tytuł i tekst obok zaczynają się na jednej linii bazowej */
.engrave__head {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.25rem clamp(2rem, 6vw, 5rem); align-items: baseline;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.engrave__head .engrave__eyebrow { grid-column: 1 / -1; margin: 0 0 -.5rem; }
.engrave__title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.engrave__title span { background: linear-gradient(transparent 62%, rgba(196, 154, 94, .45) 62% 90%, transparent 90%); }
.engrave__lead { font-size: var(--step-1); margin-bottom: 1.25rem; }
.engrave__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.5rem; }
.engrave__benefits {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem clamp(1.25rem, 3vw, 2.25rem);
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; padding: 0; list-style: none;
}
.engrave__benefits li { display: grid; grid-template-columns: auto 1fr; gap: 2px .75rem; align-content: start; }
.engrave__benefits .icon { grid-row: span 2; width: 1.875rem; height: 1.875rem; color: var(--gold-text); }
.engrave__benefits strong { color: var(--ink); font-size: var(--step-1); line-height: 1.25; }
.engrave__benefits p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) {
	.engrave__head { grid-template-columns: 1fr; }
	.engrave__benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .engrave__benefits { grid-template-columns: 1fr; } }

/*
 * Tablica materiałów: faktury z samych gradientów (bez zdjęć) i przykładowy
 * grawer w kolorze, jaki daje laser na danym materiale (--mark).
 * Po wjechaniu w ekran próbki „wypalają się” po kolei (main.js dodaje klasy).
 */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.625rem, 1.6vw, 1.125rem); margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat {
	--mark: #2f353c; --mark-shadow: none;
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; place-items: center;
	aspect-ratio: 4 / 3; padding: .875rem .875rem 2.125rem;
	border-radius: var(--radius);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(7, 30, 61, .1), 0 12px 28px rgba(7, 30, 61, .14);
}
.mat__engrave {
	display: flex; flex-direction: column; align-items: center; gap: .25rem;
	color: var(--mark); text-shadow: var(--mark-shadow);
	text-align: center; line-height: 1.05;
}
.mat__engrave span { font-size: clamp(1.1rem, .8rem + 1vw, 1.5rem); }
.mat__engrave--script span { font-family: var(--font-script); font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.mat__engrave--classic span { font-family: var(--font-classic); font-weight: 600; }
.mat__engrave--modern span { font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: clamp(.75rem, .6rem + .5vw, .95rem); }
.mat__engrave--monogram span {
	display: grid; place-items: center; width: 2.3em; height: 2.3em;
	border: 2px solid currentColor; border-radius: 50%;
	font-family: var(--font-classic); font-weight: 600; letter-spacing: .06em;
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
}
.mat__engrave .icon { width: clamp(1.625rem, 3vw, 2.25rem); height: clamp(1.625rem, 3vw, 2.25rem); }
.mat__engrave small { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.mat__name {
	position: absolute; left: .625rem; bottom: .625rem;
	padding: 2px .5625rem; border-radius: 99px;
	background: rgba(255, 255, 255, .88); color: var(--ink);
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.mat--steel {
	--mark: #2c3239; --mark-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .15);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .035) 1px 2px, transparent 2px 4px),
		linear-gradient(125deg, #eef1f4 0%, #aeb6bf 32%, #e6eaee 52%, #9aa3ad 74%, #d8dde2 100%);
}
.mat--wood {
	--mark: #4a2511; --mark-shadow: 0 1px 0 rgba(255, 220, 170, .35);
	background:
		repeating-linear-gradient(92deg, transparent 0 7px, rgba(120, 60, 20, .16) 7px 8px, transparent 8px 15px, rgba(90, 45, 15, .12) 15px 17px),
		radial-gradient(ellipse at 30% 40%, rgba(255, 225, 170, .4), transparent 60%),
		linear-gradient(180deg, #dcaa73, #c0834a);
}
.mat--leather {
	--mark: #2a130a; --mark-shadow: 0 1px 0 rgba(255, 200, 150, .18);
	background:
		radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
		radial-gradient(circle, rgba(0, 0, 0, .14) 0 1px, transparent 1.5px) 3px 4px / 9px 9px,
		radial-gradient(ellipse at 40% 30%, #8d5733, #5b3119 75%);
}
.mat--leather::before { content: ""; position: absolute; inset: 9px; z-index: -1; border: 1.5px dashed rgba(240, 200, 160, .45); border-radius: 8px; }
.mat--anodized {
	--mark: #eef2f5; --mark-shadow: 0 0 6px rgba(255, 255, 255, .25);
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, #2e343b, #14181c 60%, #272d34);
}
.mat--slate {
	--mark: #dde2e6; --mark-shadow: 0 1px 0 rgba(0, 0, 0, .45);
	background:
		radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .09), transparent 50%),
		repeating-linear-gradient(170deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
		linear-gradient(160deg, #4b5258, #2b3136);
}
.mat--glass {
	--mark: rgba(255, 255, 255, .95); --mark-shadow: 0 0 1px rgba(0, 50, 40, .7), 0 1px 3px rgba(0, 40, 30, .35);
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .28) 0 16%, transparent 16% 30%, rgba(255, 255, 255, .12) 30% 34%, transparent 34%),
		radial-gradient(ellipse at 50% 120%, #0b5a49, #1b7860 45%, #2f9a7c);
}
.mat--acrylic {
	--mark: rgba(255, 255, 255, .93); --mark-shadow: 0 0 1px rgba(0, 0, 40, .45);
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .26) 0 20%, transparent 20%),
		linear-gradient(135deg, #3558d6, #1c339e);
}
.mat--ceramic {
	--mark: #3a2c24;
	background:
		radial-gradient(ellipse at 30% 20%, #fff, transparent 55%),
		linear-gradient(160deg, #f5f2ed, #dbd4ca);
}

.mat--photo { padding: 0; background: var(--mist-2); }
.mat__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mat--photo:hover .mat__photo { transform: scale(1.04); }
.mat--photo .mat__name { z-index: 1; }

/* „Wypalanie” próbek: wiązka przesuwa się po płytce, grawer rozgrzewa się i stygnie */
.board.is-waiting .mat__engrave { opacity: 0; }
.board.is-engraving .mat__engrave { animation: mat-burn 1.1s ease-out both; animation-delay: calc(var(--i, 0) * 140ms + 250ms); }
.board.is-engraving .mat__photo { animation: mat-photo 1.1s ease-out both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
@keyframes mat-photo {
	0% { filter: brightness(.8) saturate(.85); }
	40% { filter: brightness(1.12) saturate(1.05); }
	100% { filter: none; }
}
.board.is-engraving .mat::after {
	content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 3px;
	background: linear-gradient(180deg, transparent, #fff2d6 30%, #ffd08a 50%, #fff2d6 70%, transparent);
	box-shadow: 0 0 14px 4px rgba(255, 196, 110, .7);
	opacity: 0;
	animation: mat-beam .9s ease-in-out both; animation-delay: calc(var(--i, 0) * 140ms);
}
@keyframes mat-beam {
	0% { left: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
@keyframes mat-burn {
	0% { opacity: 0; filter: blur(3px); }
	35% { opacity: 1; filter: none; color: #fff4dc; text-shadow: 0 0 10px rgba(255, 200, 120, .95), 0 0 2px #fff; }
	100% { opacity: 1; color: var(--mark); text-shadow: var(--mark-shadow); }
}

/* B2B */
.b2b { background: var(--ink); color: #d4dcea; padding: var(--section-y) 0; }
.b2b__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.b2b__title { color: #fff; font-size: var(--step-3); max-width: 22ch; }
.b2b__lead { font-size: var(--step-1); max-width: 50ch; margin-bottom: 1.6rem; }
.b2b__list { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.b2b__list li {
	display: flex; align-items: center; gap: .875rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
	color: #fff; font-weight: 600;
}
.b2b__list .icon { color: var(--gold); width: 1.625rem; height: 1.625rem; }
@media (max-width: 860px) { .b2b__grid { grid-template-columns: 1fr; } }

/* FAQ: na szerokim ekranie tytuł po lewej, pytania po prawej — w tej samej siatce co reszta strony */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-layout__head { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.faq-layout__head .section__title { margin-bottom: .6em; }
.faq-layout__head p { margin: 0; color: var(--muted); max-width: 32ch; }
.faq-layout__head a { font-weight: 700; }
@media (max-width: 900px) {
	.faq-layout { grid-template-columns: 1fr; }
	.faq-layout__head { position: static; }
}
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.25rem 0;
	font-weight: 700; font-size: var(--step-1); line-height: 1.35; color: var(--ink);
	cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq__item summary .icon { transition: transform .2s ease; color: var(--gold-text); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item p { margin: -.25rem 0 1.375rem; color: var(--muted); max-width: 65ch; }

/* Końcowe CTA */
.final-cta { padding-top: 0; }
.final-cta__inner { display: grid; justify-items: center; text-align: center; }
.final-cta__title { font-size: var(--step-3); }
.final-cta p { color: var(--muted); font-size: var(--step-1); max-width: 52ch; margin-bottom: 1.75rem; text-wrap: balance; }

/* Pomoc */
.help { background: var(--mist); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.help__inner { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.help__title { font-size: var(--step-2); }
.help__text { color: var(--muted); max-width: 52ch; margin: 0; }
.help__contacts { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.help__contacts a {
	display: flex; align-items: center; gap: .875rem;
	padding: 1rem 1.5rem;
	border-radius: var(--radius); background: #fff;
	text-decoration: none; box-shadow: var(--shadow-lift);
}
.help__contacts .icon { color: var(--gold-text); }
.help__contacts span { display: flex; flex-direction: column; line-height: 1.3; }
.help__contacts small { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 860px) { .help__inner { grid-template-columns: 1fr; } }

/* ---------- Stopka ---------- */

.site-footer { background: var(--ink); color: #b9c4d6; padding: clamp(3rem, 5vw, 4.5rem) 0 1.75rem; font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem clamp(2rem, 4vw, 4rem); }
.site-footer__brand img { width: 8.75rem; margin-bottom: 1rem; }
.site-footer__brand p { max-width: 32ch; }
.site-footer h2 { color: #fff; font-size: var(--step-0); margin-bottom: .875rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li { margin-bottom: .625rem; }
.site-footer a { color: #dfe6f1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem !important; }
.badges li { margin: 0 !important; padding: .3125rem .625rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; color: #fff; font-size: .8rem; font-weight: 600; }
/* Logo płatności albo przewoźnika na białej plakietce jak w kasie; przewoźnicy mają gotowe plakietki z własnym tłem */
.badges .badges__logo {
	display: grid; place-items: center; box-sizing: border-box; width: 3.5rem; height: 2.25rem; padding: .375rem .4375rem;
	border: 0; background: #fff; color: var(--ink); overflow: hidden;
}
.badges__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.badges .badges__logo--plakietka { padding: 0; }
.badges__logo--plakietka img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.badges__logo .icon { width: 1.5rem; height: 1.5rem; }
.site-footer__legal { margin-top: clamp(2.5rem, 4vw, 3.5rem); font-size: var(--step--1); }
.site-footer__legal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__legal p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Strony ---------- */

.page-body { padding-top: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-title { font-size: var(--step-3); }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.4em; }
.prose li { margin-bottom: .4em; }

/* Blok tekstu na całą szerokość strony: nagłówek po lewej, tekst po prawej (strony ofertowe) */
.prose--split.container { max-width: var(--container); }
@media (min-width: 901px) {
	/* Te same kolumny co pytania (FAQ) niżej na stronie. */
	.prose--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
	.prose--split > * { grid-column: 2; max-width: 50rem; }
	.prose--split > h2 { grid-column: 1; max-width: 20ch; margin-top: 0; }
	.prose--split > h2:not(:first-child), .prose--split > h2:not(:first-child) + * { margin-top: 2.25rem; }
	.prose--split:not(:has(> h2)) { grid-template-columns: minmax(0, 1fr); }
	.prose--split:not(:has(> h2)) > * { grid-column: 1; }
}

/* ---------- Karta produktu ---------- */

.page-body--product { padding-top: clamp(1.25rem, 3vw, 2.5rem); }

.product-page__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }

.product-page__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
/* Kolumny siatki nie rozpychają strony szerokim rzędem miniatur ani długimi napisami */
.product-page__media, .product-page__summary { min-width: 0; }
.admin-bar .product-page__media { top: calc(var(--header-h) + 32px + 1.5rem); }
.product-page__stage {
	display: grid; place-items: center;
	padding: clamp(1rem, 3vw, 2rem) 8% clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--radius-l);
	background: var(--mist);
}
.preview--product { max-width: 32.5rem; }
.product-page__stage-note { margin: .375rem 0 0; font-size: var(--step--1); color: var(--muted); }

.product-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.product-photos a { display: block; border-radius: var(--radius-s); background: var(--mist); overflow: hidden; }
.product-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }

.product-page__summary .product_title { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); line-height: 1.3; margin-bottom: .5em; overflow-wrap: break-word; }

/* Ocena pod nazwą: gwiazdki, średnia i link do opinii */
.rating-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 .875rem; color: var(--ink); text-decoration: none; }
.rating-link .stars { font-size: 1.125rem; }
.rating-link strong { font-weight: 800; }
.rating-link span:last-child { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rating-link:hover span:last-child { color: var(--ink); }
.woocommerce div.product .product-page__summary p.price,
.woocommerce div.product .product-page__summary span.price,
.product-page__summary .woocommerce-variation-price .price {
	display: block; margin: 0 0 1rem;
	color: var(--ink); font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em;
}
.price-from { font-size: .6em; font-weight: 500; color: var(--muted); }
/* Najniższa cena z 30 dni przed obniżką (wtyczka sklepu, tylko przy promocji) — tuż pod ceną. */
.price-lowest { display: block; margin-top: .25rem; color: var(--muted); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.price-lowest .amount { color: var(--ink); font-weight: 700; white-space: nowrap; }
.buy-bar__price .price-lowest { display: none; } /* pasek pokazuje samą cenę — bez informacji o obniżce */
.product-page__summary .single_variation_wrap .woocommerce-variation-price .price { font-size: var(--step-2); margin: 0 0 .75rem; }
.product-page__summary .price del { color: var(--muted); font-size: .6em; font-weight: 500; }
.product-page__summary .price ins { text-decoration: none; }
.product-page__summary .woocommerce-product-details__short-description { margin-bottom: 1.5rem; color: var(--text); font-size: var(--step-1); line-height: 1.6; }
.product-page__summary .woocommerce-product-details__short-description p { max-width: 60ch; }

/* Warianty */
.woocommerce div.product form.cart { margin: 0; }
.variations { width: 100%; margin: 0 0 .5rem; border: 0; border-collapse: collapse; }
.variations tr { display: block; margin-bottom: 1.125rem; }
.variations th, .variations td { position: relative; display: block; padding: 0; text-align: left; }
.variations th label { display: block; margin-bottom: .5rem; font-weight: 600; color: var(--ink); }
.variations th .selected-value { font-weight: 400; color: var(--muted); }
/* Ukryty select pod kafelkami — WooCommerce daje mu min-width: 75%, co przewijało stronę w bok */
.woocommerce div.product form.cart .variations select.is-enhanced { position: absolute; top: 0; left: 0; width: 1px; min-width: 0; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.reset_variations { display: none !important; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
	min-height: 2.875rem; padding: .5rem 1.125rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s);
	background: #fff; color: var(--ink);
	font: 600 var(--step-0)/1.2 var(--font);
	cursor: pointer;
}
.pill:hover { border-color: #9aa7ba; }
.pill[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pill:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.swatches--variation .swatch { border: 0; padding: 0; background: none; }
.swatches--variation .swatch[aria-checked="true"]::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 5px var(--ink); }

/* Personalizacja — wygląd elementów wtyczki „XDesigner dla WooCommerce” */
.xdw { flex: 1 0 100%; margin: .25rem 0 .25rem; }
.xdw__title { font-weight: 800; font-size: var(--step-1); color: var(--ink); }

/* Prosty formularz (bez kreatora albo gdy kreator nie odpowie) */
.xdw-form {
	margin: 0 0 1.25rem; padding: 1.25rem;
	border: 1.5px solid var(--line); border-radius: var(--radius);
	background: #fff;
}
.xdw-form__title { padding: 0 .375rem; margin-left: -.375rem; font-weight: 800; font-size: var(--step-1); color: var(--ink); }
.xdw-field { margin-bottom: 1.1rem; }
.xdw-field label,
.xdw-label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--ink); }
.xdw-req { color: var(--danger); }
.xdw-opt { font-weight: 400; color: var(--muted); }
.xdw-hint { margin: .35rem 0 0; font-size: var(--step--1); color: var(--muted); }

.xdw-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.xdw-fonts__option {
	position: relative;
	display: flex !important; flex-direction: column; align-items: center; gap: 2px;
	margin: 0 !important; padding: .625rem .375rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s);
	cursor: pointer; font-weight: 400 !important;
}
.xdw-fonts__option:hover { border-color: #9aa7ba; }
.xdw-fonts__option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.xdw-fonts__option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.xdw-fonts__sample { font-size: 1.7rem; line-height: 1.1; color: var(--ink); }
.xdw-fonts__sample[data-font="klasyczny"] { font-family: var(--font-classic); font-weight: 600; }
.xdw-fonts__sample[data-font="nowoczesny"] { font-family: var(--font); font-weight: 600; font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; }
.xdw-fonts__sample[data-font="odreczny"] { font-family: var(--font-script); font-size: 2rem; }
.xdw-fonts__name { font-size: var(--step--1); color: var(--muted); }

/* Edytor z kreatora */
.xdw-editor__loading {
	display: grid; place-items: center;
	min-height: 13.75rem; padding: 1.25rem;
	border: 1.5px solid var(--line); border-radius: var(--radius);
	color: var(--muted);
	background: linear-gradient(90deg, #fff 0, var(--mist) 50%, #fff 100%) 0 0 / 200% 100%;
}
.xdw-error { border-radius: var(--radius-s); }

/* Podgląd z kreatora w miejscu zdjęcia (data-xdw-preview-slot) */
.stage-embed { width: 100%; max-width: 32.5rem; aspect-ratio: 4 / 5; }
.stage-embed[hidden] { display: none; }

.btn--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.btn--block { width: 100%; }

/* „Zaprojektuj sam w pełnym kreatorze” — osobna, wyraźna ścieżka NAD edytorem
   (granatowa karta z ikoną i strzałką; cała karta klikalna), żeby klient jej nie przeoczył.
   Kolejność zmienia tylko CSS (order) — znaczniki są wtyczki. */
.xdw { display: flex; flex-direction: column; }
.xdw__title { order: -2; }
.xdw-own {
	position: relative; order: -1;
	display: grid; gap: .3rem;
	margin: 0 0 1.25rem; padding: 1.125rem 3.5rem 1.125rem 5rem;
	border-radius: var(--radius); background: var(--ink); color: #fff;
	box-shadow: 0 12px 28px -14px rgba(7, 30, 61, .6);
	transition: background-color .15s ease;
}
.xdw-own:hover { background: var(--ink-2); }
.xdw-own:has(.xdw-own__button:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.woocommerce .xdw-own__button.button,
.woocommerce .xdw-own__button.button:hover {
	position: static; display: block; width: auto; min-height: 0; padding: 0;
	border: 0; background: none; color: #fff; text-align: left;
	font-size: var(--step-1); font-weight: 800; line-height: 1.25;
}
.xdw-own__button:focus-visible { outline: none; }
.xdw-own__button::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.xdw-own__button::after {
	content: ""; position: absolute; top: 50%; right: 1.25rem;
	width: 1.5rem; height: 1.5rem; translate: 0 -50%;
	background: var(--gold);
	-webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat;
	transition: translate .15s ease;
}
.xdw-own:hover .xdw-own__button::after { translate: .25rem -50%; }
.woocommerce .xdw-own__button svg {
	position: absolute; top: 50%; left: 1rem;
	box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .75rem;
	translate: 0 -50%; border-radius: 50%;
	background: var(--gold); color: var(--ink);
}
.xdw-own small { color: rgba(255, 255, 255, .82); font-size: var(--step--1); line-height: 1.45; text-align: left; }
@media (max-width: 480px) {
	.xdw-own { padding: 1rem 2.75rem 1rem 4.25rem; }
	.woocommerce .xdw-own__button svg { left: .875rem; width: 1.25rem; height: 1.25rem; padding: .625rem; }
	.xdw-own__button::after { right: .875rem; }
}

.family { margin: 0 0 1.125rem; }
.family .field__label { margin-bottom: .5rem; }
.family .field__label strong { font-weight: 400; color: var(--muted); }
.family .swatch[aria-current="true"]::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 5px var(--ink); }

/* Projekt z pełnego kreatora */
.xdw-design {
	display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center;
	margin: 0 0 1rem; padding: .875rem;
	border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff;
}
.xdw-design img { width: 100%; border-radius: var(--radius-s); background: var(--mist); }
.xdw-design small { color: var(--muted); }
.xdw-design a { font-size: var(--step--1); }

/* Ilość + przycisk */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: .625rem; }
.woocommerce .quantity .qty { width: 5.25rem; min-height: 3.5rem; text-align: center; font-weight: 700; }
.woocommerce div.product form.cart .qty-stepper { min-height: 3.5rem; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 3.5rem; font-size: var(--step-1); }
.woocommerce div.product form.cart .button.disabled { opacity: .55; cursor: not-allowed; }
.woocommerce div.product form.cart .single_add_to_cart_button.is-loading { opacity: .7; cursor: progress; }
.woocommerce-variation-availability p.stock { margin: 0 0 .5rem; font-weight: 600; }
.woocommerce div.product p.stock.in-stock { color: var(--ok); }

/* Na telefonie licznik nie zabiera miejsca podpisowi przycisku zakupu. */
@media (max-width: 480px) {
	.woocommerce div.product form.cart .quantity .qty { width: 3rem; }
	.woocommerce div.product form.cart .single_add_to_cart_button { flex-basis: 10rem; font-size: 1rem; padding-inline: 1rem; }
	.product-page .gfk__toggle { max-width: 100%; }
}

.dispatch {
	display: flex; align-items: center; gap: .625rem;
	margin: 1rem 0 0; padding: .75rem .875rem;
	border-radius: var(--radius-s);
	background: #edf7f1; color: #135c38;
}
.dispatch strong { color: #0d4a2c; }

.promise-list { display: grid; gap: .625rem; margin: 1.125rem 0 0; padding: 0; list-style: none; color: var(--text); }
.promise-list li { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.45; }
.promise-list .icon { color: var(--gold-text); margin-top: -1px; }
.promise-list a { font-weight: 700; }

.product-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.product-details h2 { font-size: var(--step-2); }

.buy-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -6px 24px rgba(7, 30, 61, .12);
}
.buy-bar[hidden] { display: none; }
.buy-bar__price .price { color: var(--ink); font-weight: 800; font-size: var(--step-1); }
.buy-bar .btn { flex: 1; max-width: 18.75rem; }
@media (min-width: 901px) { .buy-bar { display: none !important; } }

@media (max-width: 900px) {
	.product-page__grid { grid-template-columns: 1fr; }
	.product-page__media { position: static; }
	.product-page__stage { padding: .25rem 6% .5rem; }
	.product-page__stage-note { display: none; }
	.product-details { grid-template-columns: 1fr; }
	.single-product .site-footer { padding-bottom: 6rem; }
}

/* ---------- WooCommerce: komunikaty, archiwum, konto ---------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	margin: 0 0 1.5rem !important;
	border-radius: var(--radius-s) !important;
	border-top: 0 !important;
	font-size: var(--step-0);
}
.woocommerce-message { background: #edf7f1 !important; color: #134d31 !important; }
.woocommerce-error { background: #fdeeed !important; color: #7d1a14 !important; }
.woocommerce-info { background: var(--mist) !important; color: var(--ink) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: inherit !important; }

/* Powiadomienia jako okienka w prawym dolnym rogu (main.js: toast) */
.toasts {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
	display: grid; gap: .625rem; width: min(24rem, calc(100vw - 2rem));
	pointer-events: none;
}
.toast {
	display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .75rem;
	padding: .875rem .75rem .875rem 1rem;
	border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; color: var(--text); box-shadow: var(--shadow-lift);
	font-size: var(--step--1); line-height: 1.45;
	pointer-events: auto;
	opacity: 0; translate: 0 .75rem; transition: opacity .25s ease, translate .25s ease;
}
.toast.is-in { opacity: 1; translate: 0; }
.toast__icon { width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--ok); }
/* „Dodano do koszyka”: żywy, cieszący się Gifciak zamiast ikony (assets/js/gifciak.js) */
.toast--gifciak { align-items: center; padding-left: .75rem; }
.toast--gifciak .toast__icon { display: none; }
.toast__gifciak { width: 4.5rem; margin: -.625rem 0 -.375rem; }
.toast--info .toast__icon { color: var(--ink); }
.toast--error .toast__icon { color: var(--danger); }
.toast__body { display: grid; gap: .5rem; min-width: 0; color: var(--ink); font-weight: 600; }
.toast__body p, .toast__body ul { margin: 0; }
.toast__body ul { padding-left: 1.1rem; }
.toast__body a:not(.toast__action) { color: inherit; }
.toast__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.toast__action {
	padding: .45rem .95rem; border-radius: var(--radius-s);
	background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none;
}
.toast__action:hover { background: var(--gold-hover); color: var(--ink); }
.toast__link { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.toast__close {
	display: grid; place-items: center; width: 2rem; height: 2rem; margin: -.25rem 0 0;
	padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: var(--muted); cursor: pointer;
}
.toast__close:hover { background: var(--mist); color: var(--ink); }
@media (max-width: 600px) { .toasts { right: 1rem; left: 1rem; width: auto; bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; translate: 0; } }
/* Telefon: nad przyklejonym paskiem „Do koszyka” karty produktu */
@media (max-width: 900px) { body:has(.buy-bar:not([hidden])) .toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* Krótkie komunikaty koszyka i kasy blokowej (np. „usunięto z koszyka”) — w tym samym miejscu i stylu */
.wc-block-components-notices__snackbar.components-snackbar-list,
.wc-block-components-notices__snackbar {
	left: auto !important; right: 1.25rem !important; bottom: 1.25rem !important;
	width: min(24rem, calc(100vw - 2rem)) !important; z-index: 90 !important;
}
.wc-block-components-notices__snackbar .components-snackbar {
	width: 100%; max-width: none; min-width: 0;
	padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; color: var(--ink); box-shadow: var(--shadow-lift);
	font: 600 var(--step--1)/1.45 var(--font);
}
.wc-block-components-notices__snackbar .components-snackbar__content { color: var(--ink); }
@media (max-width: 600px) {
	.wc-block-components-notices__snackbar.components-snackbar-list,
	.wc-block-components-notices__snackbar { right: 1rem !important; left: 1rem !important; width: auto !important; }
}

/* Pytanie przed dodaniem do koszyka bez projektu (inc/woocommerce.php, main.js) */
.confirm-dialog {
	width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem 1.5rem 1.375rem; border: 0; border-radius: var(--radius-l);
	background: #fff; color: var(--text); box-shadow: 0 24px 64px rgba(7, 30, 61, .25);
	text-align: center;
}
.confirm-dialog::backdrop { background: rgba(7, 30, 61, .45); }
.confirm-dialog[open] { animation: confirm-in .2s ease-out; }
@keyframes confirm-in { from { opacity: 0; translate: 0 .75rem; } }
.confirm-dialog__fig { position: relative; width: 5rem; margin: 0 auto .5rem; }
.confirm-dialog__title { margin: 0 0 .5rem; font-size: var(--step-1); color: var(--ink); }
.confirm-dialog__text { margin: 0 0 1.25rem; color: var(--text); line-height: 1.55; }
.confirm-dialog__actions { display: grid; gap: .625rem; }
.confirm-dialog__actions .btn { width: 100%; }
.confirm-dialog__close {
	position: absolute; top: .625rem; right: .625rem;
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
	border: 0; border-radius: var(--radius-s); background: none; color: var(--muted); cursor: pointer;
}
.confirm-dialog__close:hover { background: var(--mist); color: var(--ink); }
.confirm-dialog__close .icon { width: 1.25rem; height: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog[open] { animation: none; } }

/* Siatka produktów — sklep, kategorie, strona główna, podobne produkty */
ul.products,
.woocommerce ul.products {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.2vw, 2rem);
	margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
ul.products li.product,
.woocommerce ul.products li.product { width: auto; margin: 0; padding: 0; float: none; text-align: left; }
@media (max-width: 1100px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Strona główna, „Własny projekt”: rząd kolorów okładki (6 → 3 → 2 w rzędzie) */
@media (min-width: 1101px) { ul.products--colors { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(.875rem, 1.6vw, 1.5rem); } }
.products-section + .products-section--own { padding-top: 0; }

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media {
	position: relative; display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	background: var(--mist);
	overflow: hidden;
}
.card__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.card:hover .card__img { transform: scale(1.03); }
/* Gotowy wzór na okładce w innym kolorze: kształt wzoru (maska) w kolorze śladu grawera. */
.card__art { position: absolute; inset: 0; pointer-events: none; transition: transform .35s ease; }
.card:hover .card__art { transform: scale(1.03); }
.card__art::before {
	content: ""; position: absolute;
	left: var(--x); top: var(--y); width: var(--w); height: var(--h);
	background: var(--engrave);
	-webkit-mask: var(--mask) center / 100% 100% no-repeat;
	mask: var(--mask) center / 100% 100% no-repeat;
}
.card__badge {
	position: absolute; left: .75rem; top: .75rem;
	padding: .25rem .625rem; border-radius: 99px;
	background: #fff; color: var(--ink);
	font-size: .78rem; font-weight: 700; line-height: 1.4;
	box-shadow: 0 1px 2px rgba(7, 30, 61, .08);
}
.card__badge--sale { background: var(--danger); color: #fff; }

/*
 * Produkt z własnym napisem: na środku okładki motyw „Tu Twój projekt” (inc/template-tags.php,
 * gifciak_motif) w odcieniu śladu grawera okładki, a pod zdjęciem podpowiedź, że projekt
 * robi klient. Warstwa ma rozmiar zdjęcia, więc powiększa się razem z nim.
 */
.card__media { container-type: inline-size; }
.motif { position: absolute; inset: 0; pointer-events: none; }
/* Odcień śladu okładki rozjaśniony o 30 %: motyw to oznaczenie miejsca na projekt, więc ma być
   czytelny także na czarnej i czerwonej okładce; lekkie wgłębienie jak przy napisie w podglądzie. */
.motif { filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .35)) drop-shadow(0 1px 0 rgba(255, 255, 255, .14)); }
.motif::before {
	content: ""; position: absolute;
	left: var(--x); top: var(--y); width: var(--w); height: var(--h);
	background: var(--engrave);
	background: color-mix(in srgb, var(--engrave) 70%, #fff);
	-webkit-mask: var(--motif) center / contain no-repeat;
	mask: var(--motif) center / contain no-repeat;
}
.card__motif { transition: transform .35s ease; }
.card:hover .card__motif { transform: scale(1.03); }
/* Podgląd na karcie produktu: motyw, dopóki klient nie wpisze własnego napisu (main.js) */
.preview--motif .preview__area { visibility: hidden; }
.preview:not(.preview--motif) > .preview__motif { display: none; }
.card__hint {
	position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: .375rem;
	max-width: calc(100% - 1rem); padding: .3125rem .75rem .3125rem .5625rem;
	border-radius: 99px; background: var(--ink); color: #fff;
	font-size: .78rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
	box-shadow: 0 4px 12px rgba(7, 30, 61, .2);
}
.card__hint .icon { width: 1rem; height: 1rem; color: var(--gold); }
@container (max-width: 300px) { .card__hint-more { display: none; } }
/* Dwie kolumny na wąskim telefonie: plakietka „Zaprojektuj sam” bez ucinania */
@container (max-width: 170px) { .card__hint { gap: .25rem; padding-inline: .4rem .55rem; font-size: .72rem; } .card__hint .icon { width: .875rem; height: .875rem; } }
.card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 2px 0; flex: 1; }
.card__title { margin: 0; font-size: clamp(.875rem, .84rem + .15vw, .96875rem); font-weight: 600; line-height: 1.4; overflow-wrap: break-word; hyphens: auto; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 5; } /* całe zdjęcie klikalne */
.card__title a:hover { text-decoration: underline; }
.card__price { margin: auto 0 0; color: var(--ink); font-weight: 800; font-size: var(--step-1); }
.card__rating { display: flex; align-items: center; gap: .375rem; margin: 0; color: var(--muted); font-size: var(--step--1); }
.card__rating > span { flex: none; white-space: nowrap; }
.card__rating-avg { color: var(--ink); font-weight: 700; } /* nie <strong>: WooCommerce robi z niego blok w li.product */
.card__price .price-from { font-size: .8em; }
.card__colors { display: flex; align-items: center; gap: .375rem; margin: 2px 0 0 -.3125rem; }
.card__colors-more { font-size: var(--step--1); font-weight: 600; color: var(--muted); }

.dots { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dot {
	position: relative; z-index: 1; /* ponad klikalnym zdjęciem karty */
	display: block; width: 1.625rem; height: 1.625rem; padding: 0;
	border: 0; border-radius: 50%;
	background: none; cursor: pointer;
}
.dot::before {
	content: ""; position: absolute; inset: 5px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.dot:hover::before, .dot[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 3px var(--ink); }
@media (max-width: 560px) { .dot { width: 1.5rem; height: 1.5rem; } }
.dot--static { cursor: default; }
.dot--static:hover::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.custom-card {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .75rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1.5px dashed var(--line); border-radius: var(--radius);
	color: var(--muted);
}
.custom-card .icon { width: 2.25rem; height: 2.25rem; color: var(--gold-text); }
.custom-card__title { font-size: var(--step-2); margin: 0 0 .3em; }
.custom-card p { font-size: .95rem; margin: 0; max-width: 46ch; }
.custom-card--span-2 { grid-column: span 2; }
.custom-card--span-3 { grid-column: span 3; }
.custom-card--span-4 { grid-column: 1 / -1; }
/* Szeroka karta (mały katalog): ikona, tekst i przycisk w jednym rzędzie */
@media (min-width: 1101px) {
	.custom-card--span-3, .custom-card--span-4 { flex-direction: row; align-items: center; gap: 1.5rem; padding-inline: clamp(1.75rem, 4vw, 3.5rem); }
	.custom-card--span-3 .custom-card__copy, .custom-card--span-4 .custom-card__copy { flex: 1; }
}
@media (max-width: 1100px) { .custom-card[class*="--span-"] { grid-column: 1 / -1; } }
/* Tablet (3 kolumny) i telefon (2 kolumny): karta wypełnia puste miejsce w ostatnim rzędzie zamiast
   zostawiać dziurę i schodzić pod spód (klasy t/m liczy front-page.php). */
@media (min-width: 761px) and (max-width: 1100px) {
	.custom-card.custom-card--t1 { grid-column: auto; padding: 1.25rem; }
	.custom-card.custom-card--t2 { grid-column: span 2; }
	/* Wąska karta: przycisk w jednej linii („Zaprojektuj od zera”). */
	.custom-card.custom-card--t1 .btn { padding-inline: .875rem; font-size: var(--step--1); white-space: nowrap; }
}
@media (max-width: 760px) { .custom-card.custom-card--m1 { grid-column: auto; } }

/* Nagłówek listy, kategorie, sortowanie */
.page-body--shop { padding-top: clamp(1.25rem, 3vw, 2rem); }
.shop-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.shop-head .page-title { margin-bottom: .3em; }
.shop-head__desc { max-width: 65ch; color: var(--muted); font-size: var(--step-1); }
.shop-head__desc p:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.chips--home { margin: 0 0 1.5rem; }
.chip {
	display: inline-flex; align-items: center; gap: .375rem;
	min-height: 2.5rem; padding: .375rem 1rem;
	border: 1.5px solid var(--line); border-radius: 99px;
	background: #fff; color: var(--ink);
	font-weight: 600; font-size: .95rem; text-decoration: none;
}
.chip:hover { border-color: #9aa7ba; color: var(--ink); text-decoration: none; }
.chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip__count { color: var(--muted); font-weight: 500; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.shop-toolbar .woocommerce-result-count { margin: 0; color: var(--muted); font-size: var(--step--1); }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar .woocommerce-ordering select { width: auto; min-height: 2.625rem; padding: .4em 2.2em .4em .8em; font-size: var(--step--1); }
/* Paginacja: duże pola do kliknięcia zamiast drobnych kwadracików WooCommerce */
html .woocommerce nav.woocommerce-pagination { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
html .woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin: 0; border: 0; }
html .woocommerce nav.woocommerce-pagination ul li { float: none; border: 0; overflow: visible; }
html .woocommerce nav.woocommerce-pagination ul li a,
html .woocommerce nav.woocommerce-pagination ul li span {
	display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff;
	color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none;
}
html .woocommerce nav.woocommerce-pagination ul li a:hover,
html .woocommerce nav.woocommerce-pagination ul li a:focus { border-color: #9aa7ba; background: #fff; color: var(--ink); }
html .woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--ink); background: var(--ink); color: #fff; }
.woocommerce-info.woocommerce-no-products-found { margin-top: .5rem !important; }
.no-products-help { color: var(--muted); }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); font-size: var(--step--1); color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs__sep { color: var(--line); }

.related.products, .upsells.products { margin-top: clamp(3rem, 7vw, 5.5rem); }
.related.products > h2, .upsells.products > h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }

/* Moje konto i zwroty: assets/css/konto.css (ładowany tylko na tych stronach) */

.woocommerce form .form-row label { font-weight: 600; color: var(--ink); }

/* ---------- Koszyk i zamówienie (bloki WooCommerce) ---------- */

.wc-page { font-family: var(--font); }
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 3.5rem;
	border-radius: var(--radius-s) !important;
	background: var(--gold) !important;
	color: var(--ink) !important;
	font-weight: 700 !important;
	font-size: var(--step-1) !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--gold-hover) !important; }
.wc-block-components-product-name { color: var(--ink) !important; font-weight: 700; text-decoration: none; }
.wc-block-components-product-details { color: var(--muted); }
.wc-block-components-product-details__name { font-weight: 600; color: var(--text); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 800; color: var(--ink); }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input { border-radius: var(--radius-s) !important; }
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title { font-size: var(--step-3); }
/* Pusty koszyk: dwa przyciski obok siebie, na telefonie jeden pod drugim — z odstępem i tej samej szerokości */
.wp-block-woocommerce-empty-cart-block p:has(> .btn) { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.wp-block-woocommerce-empty-cart-block p > .btn { min-width: 13.5rem; }

/* Koszyk w wyglądzie sklepu: lista jak karty produktu, podsumowanie w jasnej karcie */
.wc-block-cart .wc-block-cart-items { border-collapse: collapse; }
.wc-block-cart .wc-block-cart-items th {
	padding: 0 0 .75rem; border-bottom: 1px solid var(--line);
	font: 700 var(--step--1)/1.3 var(--font); letter-spacing: .04em; color: var(--muted);
}
.wc-block-cart .wc-block-cart-items td { padding-block: 1.25rem; border-top: 1px solid var(--line); vertical-align: top; }
.wc-block-cart .wc-block-cart-items tbody tr:first-child td { border-top: 0; }
.wc-block-cart.is-large .wc-block-cart-items .wc-block-cart-items__row:last-child td { border-bottom: 1px solid var(--line); }
.wc-block-cart.is-large .wc-block-cart-items td.wc-block-cart-item__total { display: table-cell; text-align: right; }
.wc-block-cart .wc-block-cart-item__image { width: 7rem; padding-right: 1.25rem; }
.wc-block-cart .wc-block-cart-item__image a { display: block; border-radius: var(--radius-s); }
.wc-block-cart .wc-block-cart-item__image img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain;
	padding: .25rem; border-radius: var(--radius-s); background: var(--mist);
	transition: box-shadow .15s ease;
}
.wc-block-cart .wc-block-cart-item__image a:hover img { box-shadow: 0 0 0 2px var(--ink); }
.wc-block-cart .wc-block-cart-item__wrap { display: grid; gap: .375rem; }
.wc-block-cart .wc-block-components-product-name { font-size: var(--step-0); line-height: 1.35; }
.wc-block-cart .wc-block-components-product-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-block-cart .wc-block-cart-item__prices { color: var(--muted); font-size: var(--step--1); }
.wc-block-cart .wc-block-components-product-metadata { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.wc-block-cart .wc-block-cart-item__quantity { display: flex; align-items: center; gap: .75rem; margin-top: .375rem; }
.wc-block-cart .wc-block-cart-item__remove-link {
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0;
	border-radius: var(--radius-s); color: var(--muted); transition: background-color .15s ease, color .15s ease;
}
.wc-block-cart .wc-block-cart-item__remove-link:hover { background: var(--mist); color: var(--danger); }
.wc-block-cart .wc-block-cart-item__total { font-weight: 800; color: var(--ink); }

.wc-block-cart .wc-block-cart__sidebar {
	align-self: start; padding: clamp(1.125rem, 2.5vw, 1.5rem);
	border-radius: var(--radius); background: var(--mist);
}
.wc-block-cart .wc-block-cart__totals-title {
	margin: 0; padding: 0 0 .875rem; border: 0;
	font: 800 var(--step-1)/1.25 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper { padding-block: .875rem; border-top: 1px solid var(--line); }
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:empty { display: none; }
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after { display: none; }
.wc-block-cart .wc-block-components-panel__button { font-weight: 600; color: var(--ink); }
.wc-block-cart .wc-block-components-totals-item__label { color: var(--text); }
.wc-block-cart.is-large .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart.is-large .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--step-1); }
/* Telefon i tablet: WooCommerce układa wiersz w siatce — linia pod całym produktem, nie pod komórkami */
.wc-block-cart:not(.is-large) .wc-block-cart-items td { border: 0; }
.wc-block-cart:not(.is-large) .wc-block-cart-items .wc-block-cart-items__row { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.wc-block-cart:not(.is-large) .wc-block-cart-item__image { width: 5.5rem; padding-right: 1rem; }
/* Kolumna z opisem bierze resztę szerokości (WooCommerce daje jej stałe 132 px, na 320 px wiersz wychodził poza ekran) */
.wc-block-cart:not(.is-large) .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
.wc-block-cart:not(.is-large) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2 / 3; }
.wc-block-cart:not(.is-large) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 3 / 4; padding-left: .75rem; }
.wc-block-cart .wc-block-cart__submit { margin: .5rem 0 0; }

/* Wybór dostawy w koszyku (gifciak-sklep, assets/dostawa.js): nad sumą, zamiast
   wiersza WooCommerce z samą nazwą wybranej metody */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block { display: flex; flex-direction: column; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .slot-wrapper { order: 1; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > :has(> .wc-block-components-totals-footer-item) { order: 2; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block:has(.gifciak-dostawa) .wp-block-woocommerce-cart-order-summary-shipping-block { display: none; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block { padding: 0; border: 0; }
.gifciak-dostawa { margin: 0 0 .875rem; padding: 0; border: 0; min-width: 0; }
.gifciak-dostawa__tytul { margin: 0 0 .625rem; padding: 0; font-weight: 700; color: var(--ink); }
.gifciak-dostawa__lista { display: grid; gap: .5rem; }
/* Kafelek: wybór, logo przewoźnika w plakietce (jak logo płatności), nazwa z podpowiedzią, cena.
   Zaznaczony ma pierścień na zewnątrz — ramka wszędzie tej samej grubości. Punkt odbioru w kafelku. */
.gifciak-dostawa__kafel {
	border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gifciak-dostawa__kafel:hover { border-color: #b8c3d3; }
.gifciak-dostawa__kafel.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gifciak-dostawa__opcja {
	display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
	padding: .75rem .875rem; cursor: pointer;
}
.gifciak-dostawa__kafel:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.gifciak-dostawa__opcja input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); }
.gifciak-dostawa__ikona {
	display: grid; place-items: center; width: 3.5rem; height: 2.25rem; overflow: hidden;
	border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
/* Logo przewoźnika: plakietka 56×36 z własnym tłem (gifciak-sklep, assets/przewoznicy) */
.gifciak-dostawa__ikona--logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gifciak-dostawa__ikona svg, .gifciak-punkt__ikona svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gifciak-dostawa__nazwa { display: grid; gap: .125rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.gifciak-dostawa__nazwa small { font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.gifciak-dostawa__cena { font-weight: 700; color: var(--ink); white-space: nowrap; }
.gifciak-dostawa.is-busy .gifciak-dostawa__kafel { opacity: .6; cursor: progress; }
/* „Pokaż więcej sposobów dostawy” pod kafelkami: małe logo ukrytych przewoźników i strzałka */
.gifciak-dostawa__wiecej {
	display: flex; align-items: center; gap: .625rem; width: 100%; margin-top: .5rem; padding: .625rem .875rem;
	border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--ink);
	font: 700 var(--step--1)/1.35 var(--font); text-align: left; cursor: pointer;
	transition: border-color .15s ease;
}
.gifciak-dostawa__wiecej:hover { border-color: #b8c3d3; }
.gifciak-dostawa__wiecej:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gifciak-dostawa__wiecej > span:first-child { flex: 1 1 auto; min-width: 0; }
.gifciak-dostawa__wiecej-loga { display: flex; flex: none; gap: .25rem; }
.gifciak-dostawa__wiecej-loga img { display: block; width: 1.75rem; height: 1.125rem; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.gifciak-dostawa__wiecej-ikona { display: grid; flex: none; transition: transform .15s ease; }
.gifciak-dostawa__wiecej.is-open .gifciak-dostawa__wiecej-ikona { transform: rotate(180deg); }
.gifciak-dostawa__wiecej-ikona svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Bardzo wąski koszyk: bez plakietki, żeby nazwa i cena miały miejsce */
@media (max-width: 359px) {
	.gifciak-dostawa__opcja { grid-template-columns: auto minmax(0, 1fr) auto; }
	.gifciak-dostawa__opcja .gifciak-dostawa__ikona { display: none; }
}

/* Punkt odbioru (gifciak-sklep, assets/dostawa.js): pod zaznaczonym kafelkiem w koszyku i w kroku
   „Opcje wysyłki” w kasie. Okno z mapą ma własny styl (assets/punkty.css). */
.gifciak-punkt { margin: 0 .875rem .875rem; }
.gifciak-punkt__ikona { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mist); color: var(--ink); }
.gifciak-punkt__wybierz {
	display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem .875rem;
	border: 1.5px dashed #b8c3d3; border-radius: var(--radius-s); background: var(--mist);
	color: var(--ink); font: 700 var(--step-0)/1.3 var(--font); text-align: left; cursor: pointer;
}
.gifciak-punkt__wybierz:hover { border-color: var(--ink); background: #fff; }
.gifciak-punkt__wybierz span:last-child { display: grid; gap: .125rem; }
.gifciak-punkt__wybierz small { font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.gifciak-punkt__wybierz .gifciak-punkt__ikona { background: #fff; }
.gifciak-punkt.is-wybrany {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; padding: .75rem .875rem;
	border-radius: var(--radius-s); background: var(--mist);
}
.gifciak-punkt__tekst { display: grid; gap: .125rem; flex: 1; min-width: 0; font-size: var(--step--1); line-height: 1.45; color: var(--text); }
.gifciak-punkt__tekst small { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.gifciak-punkt__tekst strong { font-size: var(--step-0); color: var(--ink); overflow-wrap: anywhere; }
.gifciak-punkt__godziny { color: var(--muted); }
.gifciak-punkt .gifciak-nowrap { white-space: nowrap; }
.gifciak-punkt__zmien {
	flex: none; padding: .25rem 0; border: 0; background: none; color: var(--ink);
	font: 700 var(--step--1)/1.4 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.gifciak-punkt :is(.gifciak-punkt__wybierz, .gifciak-punkt__zmien):focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gifciak-punkt.has-error .gifciak-punkt__wybierz { border-color: var(--danger); border-style: solid; }
.gifciak-punkt__blad { flex-basis: 100%; margin: .5rem 0 0; font-size: var(--step--1); font-weight: 600; color: var(--danger); }
/* Kasa, „Opcje wysyłki”: kafelki jak w koszyku — logo przewoźnika w plakietce (gifciak-sklep podaje
   --gifciak-dostawa-ikona dla każdej metody), nazwa, cena po prawej */
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label-group { display: flex; align-items: center; gap: .875rem; }
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label-group::before {
	content: ""; flex: none; box-sizing: border-box; width: 3.5rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 6px;
	background: #fff var(--gifciak-dostawa-ikona, none) center / cover no-repeat;
}
.wc-block-checkout__shipping-option .wc-block-components-radio-control__label { flex: 1 1 auto; min-width: 0; }
.wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label { flex: none; margin-left: auto; font-weight: 700; color: var(--ink); white-space: nowrap; }
.wc-block-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option .wc-block-components-radio-control__input { top: 50%; margin-top: -10px; }
/* Kasa: punkt pod listą metod w kroku „Opcje wysyłki” — bez wcięcia kafelka */
.wc-block-checkout .gifciak-punkt-kasa { margin-top: .75rem; }
.wc-block-checkout .gifciak-punkt-kasa .gifciak-punkt { margin: 0; }

/* ---------- Kasa (blok WooCommerce) w wyglądzie sklepu ----------
   Kroki jako białe karty z numerem (licznik CSS pomija ukryte kroki), pola jak w formularzach
   sklepu, płatność jako karty wyboru, podsumowanie w jasnej karcie jak w koszyku. */
.wc-block-checkout .wc-block-checkout__form { counter-reset: krok; }
.wc-block-checkout .wc-block-components-checkout-step {
	margin: 0 0 1rem; padding: clamp(1.125rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.wc-block-checkout .wc-block-components-checkout-step::after { display: none; }
.wc-block-checkout .wc-block-components-checkout-step__container { padding: 0; }
.wc-block-checkout .wc-block-components-checkout-step__heading-container { margin: 0 0 1rem; }
.wc-block-checkout .wc-block-components-checkout-step__heading { margin: 0; }
.wc-block-checkout .wc-block-components-checkout-step__title {
	display: flex; align-items: center; gap: .75rem; margin: 0;
	font: 800 var(--step-1)/1.25 var(--font); color: var(--ink);
}
.wc-block-checkout .wc-block-components-checkout-step__title::before {
	counter-increment: krok; content: counter(krok);
	display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem;
	border-radius: 50%; background: var(--ink); color: #fff; font: 700 var(--step--1)/1 var(--font);
}
.wc-block-checkout .wc-block-components-checkout-step__description { margin: -.5rem 0 1rem; color: var(--muted); font-size: var(--step--1); }
.wc-block-checkout .wc-block-checkout__order-notes { padding-block: .75rem; }
.wc-block-checkout .wc-block-components-checkout-step__content > .wc-block-components-notices:empty { display: none; }

/* Pola */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea {
	border: 1.5px solid var(--line) !important; border-radius: var(--radius-s) !important;
	background: #fff; color: var(--ink); box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wc-block-checkout .wc-block-components-text-input input:hover,
.wc-block-checkout .wc-block-components-textarea:hover { border-color: #b8c3d3 !important; }
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus {
	border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(196, 154, 94, .35) !important; outline: none;
}
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select__label { color: var(--muted); }
.wc-block-checkout .wc-block-components-text-input.has-error input { border-color: var(--danger) !important; }
.wc-block-checkout .wc-block-components-validation-error { color: var(--danger); font-size: var(--step--1); }
.wc-block-checkout .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout .wc-block-components-checkout-step__content a { color: var(--ink); text-underline-offset: 3px; }
.wc-block-checkout .wc-block-checkout__guest-checkout-notice { color: var(--muted); font-size: var(--step--1); }

/* Pola wyboru */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid #b8c3d3; border-radius: 5px; background: #fff;
}
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { border-color: var(--ink); background: var(--ink); }
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #fff; }
.wc-block-checkout .wc-block-components-checkbox__label { color: var(--text); }
/* Kilka pól wyboru pod sobą — z odstępem, nie sklejone. */
.wc-block-checkout .wc-block-components-address-form .wc-block-components-checkbox + .wc-block-components-checkbox { margin-top: .875rem; }
/* Faktura na firmę (gifciak-sklep, includes/faktura.php): kod pocztowy i miejscowość w jednym
   wierszu, jak w adresie do wysyłki */
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; }
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form > * { flex: 0 0 100%; }
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form > :first-child { margin-top: 0; }
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form > :is(.wc-block-components-address-form__gifciak-firma-kod, .wc-block-components-address-form__gifciak-firma-miasto) { flex: 1 0 calc(50% - 12px); }
@media (max-width: 359px) {
	.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form > [class*="gifciak-firma-"] { flex-basis: 100%; }
}
/* Bez osobnego kroku „Dodatkowe informacje o zamówieniu” (5.10.2026: poza fakturą nic tam nie ma).
   Blok stoi zaraz za adresami, więc bez nagłówka i własnej karty staje się dolną częścią kroku
   z adresem do wysyłki albo, gdy klient podaje inne dane płatnika, kroku „Dane płatnika”.
   Ukryty nagłówek nie nabija numeru kroku. */
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-checkout-step__heading-container { display: none; }
.wc-block-checkout .wc-block-components-checkout-step:has(+ .wc-block-checkout__order-fields) {
	margin-bottom: 0; padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.wc-block-checkout .wc-block-components-checkout-step + .wc-block-checkout__order-fields {
	padding-top: .875rem; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}

/* Płatność: kafelki z logo po lewej. Ramki rysuje tylko kafelek — WooCommerce dokłada linie ::after
   i wewnętrzny cień, który białe tło etykiety zasłaniało u góry (u dołu ramka wychodziła grubsza).
   Zaznaczony kafelek ma pierścień na zewnątrz, więc ramka ma wszędzie tę samą grubość. */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout .wc-block-components-radio-control__option::after { display: none; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control__option {
	margin: 0 0 .5rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
	box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option:last-child,
.wc-block-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option:last-child { margin-bottom: 0; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option:hover,
.wc-block-checkout .wc-block-components-radio-control > .wc-block-components-radio-control__option:hover { border-color: #b8c3d3; }
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) !important;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-radio-control__input { border-color: #b8c3d3; }
.wc-block-checkout .wc-block-components-radio-control__input:checked { border-color: var(--ink); }
.wc-block-checkout .wc-block-components-radio-control__input:checked::before { background: var(--ink); }
.wc-block-checkout .wc-block-components-radio-control__label { font-weight: 700; color: var(--ink); }
.wc-block-checkout .wc-block-components-radio-control-accordion-content { color: var(--text); font-size: var(--step--1); line-height: 1.55; }

/* Wiersz kafelka: wybór, logo w jednakowej plakietce, nazwa. Opis wybranej płatności pod nazwą. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { padding: .875rem 1rem .875rem 3rem; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label {
	display: flex; align-items: center; gap: .875rem; font-size: var(--step-0); line-height: 1.3;
}
.wc-block-checkout__payment-method .payu-block-method-logo,
.wc-block-checkout__payment-method .wc-block-components-radio-control__label:not(:has(img))::before {
	order: -1; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 3.5rem; height: 2.25rem; margin: 0;
	border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.wc-block-checkout__payment-method .payu-block-method-logo img {
	display: block; width: auto; max-width: 2.625rem; height: auto; max-height: 1.375rem; margin: 0; object-fit: contain;
}
/* Przelew tradycyjny i inne płatności bez logo: ikonka banku w tej samej plakietce */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label:not(:has(img))::before {
	content: "";
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071e3d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20.5 8h-17z'/%3E%3Cpath d='M6 11v6M10 11v6M14 11v6M18 11v6M3.5 20h17'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control { container: platnosci / inline-size; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { padding: 0 1rem 1rem calc(3rem + 3.5rem + .875rem); }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content:empty { display: none; }
/* Wąski kafelek (telefon, kasa w dwóch kolumnach na tablecie): opis od plakietki, nie od nazwy */
@container platnosci (max-width: 32rem) {
	.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content { padding-left: 3rem; }
}

/* Zgody i przycisk */
.wc-block-checkout .wc-block-checkout__terms { margin: .5rem 0 1rem; padding: 0; border: 0; color: var(--muted); font-size: var(--step--1); }
.wc-block-checkout .wc-block-checkout__terms::before { display: none; }
.wc-block-checkout .wc-block-checkout__terms a { color: var(--ink); }
.wc-block-checkout .wc-block-checkout__actions { padding: 0; }
.wc-block-checkout .wc-block-checkout__actions_row { padding: 0; }

/* Podsumowanie po prawej — jasna karta jak w koszyku */
.wc-block-checkout .wc-block-checkout__sidebar {
	align-self: start; padding: clamp(1.125rem, 2.5vw, 1.5rem) .5rem;
	border-radius: var(--radius); background: var(--mist);
}
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { border: 0; border-radius: 0; }
.wc-block-checkout .wc-block-components-checkout-order-summary__title { padding: 0 16px .5rem; }
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text { font: 800 var(--step-1)/1.25 var(--font); color: var(--ink); }
/* Tytuł w jednej linii z produktami poniżej i pogrubiony jak „Podsumowanie koszyka” (WooCommerce dodaje mu wcięcie i wagę 500) */
.wc-block-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { margin: 0 0 .5rem; font-weight: 800; }
/* Telefon: podsumowanie zwinięte nad formularzem — jeden pasek w karcie, bez podwójnych linii */
.wc-block-checkout.is-mobile .wc-block-checkout__sidebar { padding: 0; }
.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__title { padding: .875rem 1rem; border: 0; }
.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { margin: 0; font-size: var(--step-0); font-weight: 700; }
.wc-block-checkout.is-mobile .wc-block-components-checkout-order-summary__content { padding: 0 1rem .5rem; border-bottom: 0; }
/* Puste wiersze sumy (rabat, opłata, miejsce na dodatki) nie rysują podwójnych linii */
.wc-block-components-totals-wrapper:empty,
.wc-block-components-totals-wrapper.slot-wrapper:has(> .wc-block-components-order-meta:empty) { display: none; }
.wc-block-checkout .wc-block-components-order-summary-item__image > img { border-radius: var(--radius-s); background: #fff; }
.wc-block-checkout .wc-block-components-order-summary-item__quantity { border: 0; background: var(--ink); color: #fff; box-shadow: none; }
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { border-top: 1px solid var(--line); }
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--step-1); }
/* Komputer i tablet (klasę rozmiaru WooCommerce daje wewnętrznemu .wc-block-components-sidebar-layout
   dopiero po zmierzeniu — bez niej, np. na telefonie przy ładowaniu, te reguły nie działają): jeden margines w karcie jak w „Podsumowaniu koszyka” — linie, kupon, sumy i informacja
   o dostawie zaczynają się i kończą tam, gdzie tekst (WooCommerce dokłada wierszom własne 16 px). */
.wc-block-components-sidebar-layout.wc-block-checkout:is(.is-small, .is-medium, .is-large) .wc-block-checkout__sidebar { padding: clamp(1.125rem, 2.5vw, 1.5rem); }
.wc-block-components-sidebar-layout.wc-block-checkout:is(.is-small, .is-medium, .is-large) .wc-block-components-checkout-order-summary__title { margin: 0; padding: 0 0 .875rem; }
/* Bez podwójnej linii pod „Dodaj kupony” — blok sum ma własną linię nad pierwszym wierszem (tak samo w koszyku). */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block { padding: 0; border: 0; }
.wc-block-components-sidebar-layout.wc-block-checkout:is(.is-small, .is-medium, .is-large) .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { margin: 0; }
.wc-block-components-sidebar-layout.wc-block-checkout:is(.is-small, .is-medium, .is-large) .wc-block-checkout__sidebar :is(.wc-block-components-order-summary, .wc-block-components-totals-coupon, .wc-block-components-totals-item, .gifciak-dostawa-kasa) { padding-inline: 0; }
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper { padding-block: .875rem; }
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper::after { display: none; }
.wc-block-checkout .wc-block-components-panel__button { font-weight: 600; color: var(--ink); }
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-totals-item__label { color: var(--text); }
/* Telefon: rozwinięte podsumowanie nad formularzem ma margines z karty — wiersze bez własnych 16 px. */
.wc-block-checkout.is-mobile .wc-block-checkout__sidebar :is(.wc-block-components-order-summary, .wc-block-components-totals-coupon, .wc-block-components-totals-item, .gifciak-dostawa-kasa) { padding-inline: 0; }
/* …i linia między „Dodaj kupony” a „Kwota” jak na komputerze (WooCommerce zdejmuje ją pierwszemu wierszowi sum). */
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content.is-open .wp-block-woocommerce-checkout-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child { border-top: 1px solid var(--line); }
/* Telefon: podsumowanie w kroku 5 — ta sama jasna karta co w koszyku i na komputerze, zamiast cienkiej ramki. */
.wc-block-checkout .checkout-order-summary-block-fill { padding: 1rem clamp(1rem, 4vw, 1.25rem); border: 0; border-radius: var(--radius); background: var(--mist); }
.wc-block-checkout .checkout-order-summary-block-fill :is(.wc-block-components-order-summary, .wc-block-components-totals-coupon, .wc-block-components-totals-item, .gifciak-dostawa-kasa) { padding-inline: 0; }
.wc-block-checkout .checkout-order-summary-block-fill .wc-block-components-totals-wrapper { padding-block: .875rem; border-top: 1px solid var(--line); }
.wc-block-checkout .checkout-order-summary-block-fill .wc-block-components-totals-wrapper::after { display: none; }
.wc-block-checkout .checkout-order-summary-block-fill > .wc-block-components-totals-wrapper:first-child { padding-top: 0; border-top: 0; }
.wc-block-checkout .checkout-order-summary-block-fill .wc-block-components-totals-item__label { color: var(--text); }
/* Ostatni wiersz (dostawa i informacja o progu) bez dodatkowego pustego pasa u dołu karty. */
.wc-block-checkout :is(.checkout-order-summary-block-fill, .wc-block-checkout__sidebar) .wc-block-components-totals-wrapper.slot-wrapper:last-child { padding-bottom: 0; }
.wc-block-checkout :is(.checkout-order-summary-block-fill, .wc-block-checkout__sidebar) .gifciak-infos { margin-bottom: 0; padding-bottom: 0; }

/* ---------- Podziękowanie za zamówienie (woocommerce/checkout/thankyou.php) ---------- */
.thanks-hero {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 3rem);
	margin: 0 0 1.25rem; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: var(--radius-l);
	background: radial-gradient(ellipse at 15% 85%, rgba(196, 154, 94, .22) 0, transparent 55%), var(--mist);
}
.thanks-hero__fig { position: relative; width: clamp(8rem, 18vw, 13rem); }
.thanks-hero__fig::after {
	content: ""; position: absolute; left: 12%; right: 12%; bottom: -.25rem; z-index: -1;
	height: .9rem; border-radius: 50%; background: rgba(7, 30, 61, .14); filter: blur(4px);
}
.thanks-hero__eyebrow { margin: 0 0 .25rem; color: var(--gold-text); font-weight: 700; font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; }
.thanks-hero__title { margin: 0 0 1rem; font-size: var(--step-3); color: var(--ink); }
.thanks-bubble {
	position: relative; margin: 0 0 1rem; padding: 1rem 1.25rem .875rem;
	border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lift);
}
.thanks-bubble::before {
	content: ""; position: absolute; left: -.55rem; top: 1.25rem;
	border: .6rem solid transparent; border-left: 0; border-right-color: #fff;
}
.thanks-bubble__text {
	margin: 0 0 .5rem; color: var(--ink); font-weight: 600; font-size: var(--step-1); line-height: 1.45;
	transition: opacity .22s ease, translate .22s ease;
}
.thanks-bubble__text.is-out { opacity: 0; translate: 0 .35rem; }
.thanks-bubble__more {
	padding: 0; border: 0; background: none; color: var(--gold-text);
	font: 700 var(--step--1)/1.4 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.thanks-bubble__more:hover { color: var(--ink); }
.thanks-hero__next { max-width: 40rem; margin: 0; color: var(--text); line-height: 1.6; }

.woocommerce ul.order_details.thanks-overview,
.thanks-overview {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem;
	margin: 0 0 1.25rem; padding: 0; list-style: none;
}
.woocommerce ul.order_details.thanks-overview::before, .woocommerce ul.order_details.thanks-overview::after { display: none; }
.woocommerce ul.order_details.thanks-overview li,
.thanks-overview li {
	float: none; margin: 0; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
	background: #fff; color: var(--muted); font-size: var(--step--1); text-transform: none; line-height: 1.4;
}
.woocommerce ul.order_details.thanks-overview li strong,
.thanks-overview li strong { display: block; margin-top: .25rem; color: var(--ink); font-size: var(--step-0); overflow-wrap: anywhere; }

.thanks-steps {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
	margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: none;
}
.thanks-steps__item {
	position: relative; display: grid; align-content: start; gap: .2rem; padding: 1rem; /* start: tytuły kroków w jednej linii, choć opisy mają różną długość */
	border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
}
.thanks-steps__item strong { color: var(--ink); }
.thanks-steps__item small { color: var(--muted); font-size: var(--step--1); line-height: 1.4; }
.thanks-steps__dot {
	display: grid; place-items: center; width: 1.875rem; height: 1.875rem; margin-bottom: .375rem;
	border-radius: 50%; background: var(--mist); color: var(--ink); font-weight: 700; font-size: var(--step--1);
}
.thanks-steps__dot .icon { width: 1rem; height: 1rem; }
.thanks-steps__item.is-done .thanks-steps__dot { background: var(--ok); color: #fff; }
.thanks-steps__item.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.thanks-steps__item.is-current .thanks-steps__dot { background: var(--ink); color: #fff; }

/* Dane do przelewu i szczegóły zamówienia pod spodem — karty */
.thanks .woocommerce-bacs-bank-details,
.thanks .woocommerce-order-details,
.thanks .woocommerce-customer-details {
	margin: 0 0 1.25rem; padding: clamp(1.125rem, 2.5vw, 1.5rem);
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.thanks .wc-bacs-bank-details-heading,
.thanks .woocommerce-order-details__title,
.thanks .woocommerce-column__title { margin: 0 0 .875rem; font-size: var(--step-1); color: var(--ink); }
.thanks .woocommerce-order-details .shop_table { margin: 0; border: 0; border-radius: 0; }
.thanks .woocommerce-order-details .shop_table th,
.thanks .woocommerce-order-details .shop_table td { padding: .75rem 0; border-color: var(--line); }

@media (min-width: 901px) { .woocommerce ul.order_details.thanks-overview li.email { grid-column: span 2; } }
@media (max-width: 900px) { .thanks-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.thanks-hero { grid-template-columns: 1fr; text-align: center; }
	.thanks-hero__fig { margin: 0 auto; width: 8rem; }
	.thanks-bubble { text-align: left; }
	.thanks-bubble::before { left: 50%; top: -.55rem; translate: -50% 0; border: .6rem solid transparent; border-top: 0; border-bottom-color: #fff; }
	.thanks-hero__next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .thanks-bubble__text { transition: none; } }
/* „Informacje dodatkowe” (np. dane do faktury) w potwierdzeniu zamówienia: WooCommerce daje
   kolumnie wartości szerokość treści (max-content), co rozpycha stronę na telefonie */
body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); border-color: var(--line); border-radius: var(--radius-s);
}
body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt { color: var(--muted); font-weight: 600; border-color: var(--line); }
body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd { color: var(--ink); overflow-wrap: anywhere; border-color: var(--line); }
@media (max-width: 600px) {
	body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list { grid-template-columns: minmax(0, 1fr); }
	body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt { padding-bottom: 0; border-bottom: 0; }
	body .woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd { padding-top: .25rem; }
}

/* Pasek do darmowej dostawy w koszyku (gifciak-sklep, assets/dostawa.js) */
.gifciak-info__pasek { display: block; height: .4rem; margin-top: .5rem; overflow: hidden; border-radius: 99px; background: rgba(7, 30, 61, .1); }
.gifciak-info__pasek > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .4s ease; }
.gifciak-info--dostawa-ok .gifciak-info__pasek > span { background: var(--ok); }

/* Kasa: mniej pól — jeden kraj sprzedaży (body.gifciak-jeden-kraj). Dane płatnika są domyślnie
   takie same jak adres do wysyłki; po odznaczeniu pola pod adresem pojawia się krok „Dane płatnika”. */
.gifciak-jeden-kraj .wc-block-checkout .wc-block-components-address-form__country { display: none; }
.wc-block-checkout .wc-block-checkout__use-address-for-billing { margin-top: 1.25rem; }

/* Koszyk: pewność przed płatnością pod przyciskiem (inc/woocommerce.php, main.js) */
.cart-trust { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--text); }
.cart-trust li { display: flex; align-items: center; gap: .5rem; }
.cart-trust .icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--gold-text); }
.cart-trust a { color: inherit; }
/* Zamówienie z personalizacją: wyjątek od zwrotu nad przyciskiem (main.js) */
.checkout-zwrot { display: flex; align-items: flex-start; gap: .625rem; margin: 0 0 1.25rem; padding: .875rem 1rem; border-radius: var(--radius-s); background: var(--mist); color: var(--text); font-size: var(--step--1); line-height: 1.5; }
.checkout-zwrot .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--gold-text); }
.checkout-zwrot strong { color: var(--ink); }

/* Kasa: dostawa wybrana w koszyku — bez kroku „Opcje wysyłki”, w podsumowaniu linia z „Zmień” */
.gifciak-dostawa-wybrana .wp-block-woocommerce-checkout-shipping-methods-block { display: none; }
.gifciak-dostawa-kasa {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem;
	margin: 0 0 .75rem; padding: 0 16px; font-size: var(--step--1); color: var(--text);
}
.wc-block-components-totals-wrapper .gifciak-dostawa-kasa { padding: 0 16px; }
.gifciak-dostawa-kasa strong { color: var(--ink); }
.gifciak-dostawa-kasa__zmien {
	padding: 0; border: 0; background: none; color: var(--ink); font: 700 var(--step--1)/1.4 var(--font);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Faktura w kasie: „Uzupełnij z GUS” pod polem NIP (gifciak-sklep, assets/faktura.js) */
.gifciak-gus { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .875rem; margin: .5rem 0 0; }
.gifciak-gus__button {
	padding: .5rem .875rem; border: 1.5px solid var(--ink); border-radius: var(--radius-s);
	background: #fff; color: var(--ink); font: 700 var(--step--1)/1.2 var(--font); cursor: pointer;
}
.gifciak-gus__button:hover { background: var(--ink); color: #fff; }
.gifciak-gus__button:disabled { opacity: .6; cursor: progress; }
.gifciak-gus__status { flex: 1 1 14rem; margin: 0; font-size: var(--step--1); color: var(--muted); }
.gifciak-gus__status:empty { display: none; }
.gifciak-gus__status.is-ok { color: var(--ok); }
.gifciak-gus__status.is-error { color: var(--danger); }

/* Powiększony podgląd miniatury po najechaniu (main.js) */
.cart-zoom {
	position: fixed; z-index: 60; width: min(18rem, 60vw); margin: 0; padding: .5rem;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
	box-shadow: var(--shadow-lift); pointer-events: none;
	opacity: 0; transition: opacity .15s ease;
}
.cart-zoom.is-open { opacity: 1; }
.cart-zoom img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--radius-s); background: var(--mist); }
.cart-zoom figcaption { margin: .5rem .25rem .125rem; font-size: var(--step--1); color: var(--muted); }

/* ---------- Podstrona: grawerowanie laserowe na zlecenie ---------- */

.btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .4); }
.btn--outline:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.btn .icon { width: 1.25rem; height: 1.25rem; }

.breadcrumbs--light, .breadcrumbs--light a { color: #9fb0c8; }
.breadcrumbs--light a:hover { color: #fff; }
.breadcrumbs--light .breadcrumbs__sep { color: #4a5f80; }

.svc-hero {
	position: relative; overflow: hidden;
	padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 6rem);
	background: radial-gradient(ellipse at 85% 30%, #163a6e 0, transparent 55%), var(--ink);
	color: #d4dcea;
}
.svc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.svc-hero__title { color: #fff; font-size: var(--step-4); line-height: 1.03; letter-spacing: -0.03em; max-width: 15ch; margin-bottom: .35em; text-wrap: balance; }
.svc-hero__lead { font-size: var(--step-1); max-width: 52ch; margin-bottom: 1.625rem; }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.625rem; }
.svc-hero__cta .btn--lg { padding-inline: 1.4em; }
/* Sąsiednie białe sekcje — bez podwójnego odstępu */
.svc-who + .svc-why, .svc-price + .faq-section, .svc-price + .svc-content, .svc-content + .faq-section { padding-top: 0; }
/* Zalety pod przyciskami: w rzędzie, a gdy brakuje miejsca — w kolejnej linii (nie ucinamy tekstu) */
.svc-hero__trust { display: flex; flex-wrap: wrap; gap: .625rem 1.75rem; margin: 0; padding: 0; list-style: none; color: #fff; font-weight: 600; }
.svc-hero__trust li { display: flex; align-items: center; gap: .5rem; }
.svc-hero__trust .icon { width: 1.25rem; height: 1.25rem; color: var(--gold); }

/* Płytka ze stali, na której laser „wypala” napis */
.svc-hero__visual { display: grid; gap: 1.375rem; justify-items: center; }
.plate {
	width: min(100%, 28.75rem); aspect-ratio: 16 / 10;
	display: flex; flex-direction: column; justify-content: center; gap: .375rem; padding: 1.5rem;
	border-radius: var(--radius-l);
	transform: rotate(-2deg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.plate::before { /* otwory montażowe */
	content: ""; position: absolute; inset: 14px;
	background:
		radial-gradient(circle at 5px 5px, #7d868f 0 4px, transparent 5px) top left / 10px 10px no-repeat,
		radial-gradient(circle at 5px 5px, #7d868f 0 4px, transparent 5px) top right / 10px 10px no-repeat,
		radial-gradient(circle at 5px 5px, #7d868f 0 4px, transparent 5px) bottom left / 10px 10px no-repeat,
		radial-gradient(circle at 5px 5px, #7d868f 0 4px, transparent 5px) bottom right / 10px 10px no-repeat;
}
.plate__line { position: relative; align-self: center; }
.plate__text {
	display: block; padding: 0 .15em;
	font-family: var(--font-script); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1.1;
	color: var(--mark); text-shadow: var(--mark-shadow);
	animation: plate-reveal 6s ease-in-out infinite;
}
.plate__beam {
	position: absolute; top: 50%; left: 0; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem;
	border-radius: 50%; background: #fff; opacity: 0;
	box-shadow: 0 0 8px 3px #ffe1a6, 0 0 26px 10px rgba(255, 170, 70, .75), 0 0 60px 18px rgba(255, 140, 40, .35);
	animation: plate-beam 6s ease-in-out infinite;
}
.plate__small { align-self: center; color: var(--mark); text-shadow: var(--mark-shadow); font-size: .8rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; }
@keyframes plate-reveal {
	0% { clip-path: inset(0 100% 0 0); opacity: 1; }
	55%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
	100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes plate-beam {
	0% { left: 0; top: 40%; opacity: 0; }
	5% { opacity: 1; }
	15% { top: 62%; }
	25% { top: 38%; }
	35% { top: 64%; }
	45% { top: 42%; }
	55% { left: 100%; top: 55%; opacity: 1; }
	60%, 100% { left: 100%; opacity: 0; }
}
.plate-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; max-width: 28.75rem; }
.plate-chip {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .3125rem .75rem .3125rem .375rem; border-radius: 99px;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
	color: #fff; font-size: .85rem; font-weight: 600;
}
.plate-chip__swatch { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

@media (max-width: 900px) {
	.svc-hero__grid { grid-template-columns: 1fr; }
	.svc-hero__visual { order: 1; }
	.plate { width: min(100%, 23.75rem); }
}
@media (max-width: 760px) { .svc-hero__trust { flex-direction: column; } }
@media (max-width: 480px) {
	.svc-hero__cta .btn { width: 100%; }
}

/* Nagłówek sekcji: tytuł po lewej, tekst po prawej — pierwsze linie na jednej linii bazowej */
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem clamp(1.5rem, 5vw, 4rem); align-items: baseline; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.svc-head .section__title { margin: 0; }
.svc-head p { margin: 0; color: var(--muted); font-size: var(--step-1); }
.svc-head__text { display: grid; gap: .75rem; }
@media (max-width: 860px) { .svc-head { grid-template-columns: 1fr; } }

.svc-mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.svc-mat { display: flex; flex-direction: column; border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-lift); overflow: hidden; }
.svc-mat__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-mat__swatch { display: block; aspect-ratio: auto; height: 6rem; padding: 0; border-radius: 0; box-shadow: none; }
.svc-mat__body { padding: 1.25rem 1.375rem 1.375rem; }
.svc-mat h3 { font-size: var(--step-2); margin-bottom: .75rem; }
.svc-mat__list { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .875rem; padding: 0; list-style: none; }
.svc-mat__list li { padding: 3px .625rem; border-radius: 99px; background: var(--mist); color: var(--ink); font-size: .88rem; font-weight: 600; }
.svc-mat__examples { margin: 0; color: var(--muted); font-size: .93rem; }
.svc-mat__examples strong { color: var(--ink); }
.svc-note { margin: 1.5rem 0 0; color: var(--muted); max-width: 80ch; }
@media (max-width: 960px) { .svc-mats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-mats { grid-template-columns: 1fr; } }

.svc-what, .svc-steps { background: var(--mist); }
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.875rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.svc-card { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--radius); background: #fff; }
.svc-card .icon { width: 2.125rem; height: 2.125rem; color: var(--gold-text); margin-bottom: .875rem; }
.svc-card h3 { font-size: var(--step-1); margin-bottom: .3em; }
.svc-card p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-cards { grid-template-columns: 1fr; } }

.check-list { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 2rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--gold); }
.check-list li::after {
	content: ""; position: absolute; left: .4375rem; top: calc(.15em + .375rem); width: .5625rem; height: .3125rem;
	border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}

.svc-who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.75rem); }
.svc-who__card { padding: clamp(1.5rem, 3.4vw, 2.75rem); border-radius: var(--radius-l); background: var(--mist); }
.svc-who__card > .icon { width: 2.5rem; height: 2.5rem; color: var(--gold-text); margin-bottom: 1rem; }
.svc-who__card h3 { font-size: var(--step-2); margin-bottom: 1.125rem; }
.svc-who__card--dark { background: var(--ink); color: #d4dcea; }
.svc-who__card--dark h3 { color: #fff; }
.svc-who__card--dark > .icon { color: var(--gold); }
@media (max-width: 760px) { .svc-who__grid { grid-template-columns: 1fr; } }

.svc-why__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.svc-why__list .icon { width: 2.125rem; height: 2.125rem; color: var(--gold-text); margin-bottom: .875rem; }
.svc-why__list h3 { font-size: var(--step-1); margin-bottom: .35em; }
.svc-why__list p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .svc-why__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-why__list { grid-template-columns: 1fr; } }

.svc-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.875rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; counter-reset: svc-step; }
.svc-steps__list li { counter-increment: svc-step; padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--radius); background: #fff; }
.svc-steps__list li::before {
	content: counter(svc-step);
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
	border: 2px solid var(--gold); border-radius: 50%;
	color: var(--ink); font-weight: 800; font-size: var(--step-1);
}
.svc-steps__list h3 { font-size: var(--step-1); margin-bottom: .35em; }
.svc-steps__list p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .svc-steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-steps__list { grid-template-columns: 1fr; } }

.svc-price__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.svc-price__lead { font-size: var(--step-1); }
.svc-price__box { padding: clamp(1.5rem, 3.4vw, 2.5rem); border-radius: var(--radius-l); border: 2px solid var(--gold); text-align: center; }
.svc-price__big { margin: 0 0 .2em; color: var(--ink); font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.svc-price__box p:not(.svc-price__big) { color: var(--muted); }
@media (max-width: 860px) { .svc-price__grid { grid-template-columns: 1fr; } }

.svc-final { padding: clamp(3.5rem, 8vw, 6rem) 0; background: radial-gradient(ellipse at 15% 20%, #163a6e 0, transparent 55%), var(--ink); color: #d4dcea; }
.svc-final__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.svc-final__copy { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.svc-final h2 { color: #fff; font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.03em; }
.svc-final__lead { font-size: var(--step-1); max-width: 46ch; }
.svc-final__next { display: grid; gap: .75rem; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; counter-reset: next; }
.svc-final__next li { counter-increment: next; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; color: #fff; }
.svc-final__next li::before {
	content: counter(next);
	display: grid; place-items: center; width: 2rem; height: 2rem;
	border: 1.5px solid var(--gold); border-radius: 50%;
	color: var(--gold); font-weight: 800; font-size: .9rem;
}
.svc-final__contact { display: grid; gap: .5rem; padding-top: 1.375rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.svc-final__contact p { margin: 0; color: #9fb0c8; }
.svc-final__contact a { display: inline-flex; align-items: center; gap: .625rem; color: #fff; font-weight: 700; text-decoration: none; }
.svc-final__contact a:hover { text-decoration: underline; }
.svc-final__contact .icon { width: 1.25rem; height: 1.25rem; color: var(--gold); }
@media (max-width: 900px) {
	.svc-final__grid { grid-template-columns: 1fr; }
	.svc-final__copy { position: static; }
}

/* Formularz wyceny */
.quote { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius-l); background: #fff; color: var(--text); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.quote__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .quote__row { grid-template-columns: 1fr; } }
.quote label small { font-weight: 400; color: var(--muted); }
.quote label > span[aria-hidden], .quote .field--check span[aria-hidden] { color: var(--danger); }
.quote input::placeholder, .quote textarea::placeholder { color: #8a95a8; }
.quote textarea { min-height: 6.875rem; resize: vertical; }
.quote__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote__alert { margin: 0 0 1rem; padding: .75rem .875rem; border-radius: var(--radius-s); background: #fdecea; color: var(--danger); font-weight: 600; }
.quote .field.is-invalid input, .quote .field.is-invalid textarea, .quote .field.is-invalid .drop, .quote .field.is-invalid .qty-stepper { border-color: var(--danger); }
.field__error { margin: .35rem 0 0; color: var(--danger); font-size: var(--step--1); font-weight: 600; }

.drop {
	position: relative; display: grid; justify-items: center; gap: .375rem;
	padding: 1.375rem 1.125rem; border: 2px dashed var(--line); border-radius: var(--radius);
	background: var(--mist); text-align: center; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.quote .drop { display: grid; font-weight: 400; margin: 0; } /* ponad .field label { display: block } */
.drop:hover, .drop.is-over { border-color: var(--gold); background: #fbf6ee; }
.drop:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.drop .icon { width: 2rem; height: 2rem; color: var(--gold-text); }
.drop__title { color: var(--ink); font-weight: 700; }
.drop__hint { color: var(--muted); font-size: var(--step--1); max-width: 46ch; }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop__files { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .625rem; margin: .625rem 0 0; padding: 0; list-style: none; }
.drop__files:empty { display: none; }
.drop__file { position: relative; display: grid; align-content: end; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-s); background: var(--mist-2); }
.drop__file img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop__file-name { position: relative; padding: .25rem .375rem; background: rgba(7, 30, 61, .72); color: #fff; font-size: .7rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop__file--doc { place-items: center; align-content: center; gap: .25rem; padding: .5rem; }
.drop__file--doc .icon { width: 1.625rem; height: 1.625rem; color: var(--gold-text); }
.drop__file--doc .drop__file-name { background: none; color: var(--ink); white-space: normal; text-align: center; }
.drop__remove {
	position: absolute; top: .25rem; right: .25rem; z-index: 1;
	display: grid; place-items: center; width: 1.625rem; height: 1.625rem; padding: 0;
	border: 0; border-radius: 50%; background: rgba(7, 30, 61, .8); color: #fff; cursor: pointer;
}
.drop__remove .icon { width: .875rem; height: .875rem; }

.field--check label { display: grid; grid-template-columns: 1.375rem 1fr; gap: .625rem; font-weight: 400; color: var(--text); font-size: var(--step--1); }
.field--check input { width: 1.25rem; height: 1.25rem; margin: 1px 0 0; accent-color: var(--ink); }
.quote__submit { display: grid; gap: .625rem; margin-top: .375rem; }
.quote__submit .btn { width: 100%; }
.quote__submit p { margin: 0; color: var(--muted); font-size: var(--step--1); text-align: center; }
.quote.is-sending [data-quote-submit] { opacity: .7; pointer-events: none; }

.quote--done { display: grid; justify-items: center; gap: .5rem; text-align: center; padding-block: clamp(2.25rem, 5vw, 4rem); }
.quote--done > .icon { width: 3.5rem; height: 3.5rem; padding: .75rem; border-radius: 50%; background: var(--ok); color: #fff; }
.quote--done h3 { font-size: var(--step-3); margin: .5rem 0 0; }
.quote--done p { max-width: 42ch; color: var(--muted); }

/* ---------- Opinie klientów ---------- */

/* Gwiazdki: pięć gwiazdek z maski, wypełnienie = ocena (--rating w %) */
.stars {
	display: inline-block; flex: none;
	width: 5.5em; height: 1.1em; vertical-align: -.2em;
	background: linear-gradient(90deg, var(--star) var(--rating, 0%), var(--star-off) 0);
	-webkit-mask: var(--star-mask) 0 50% / 1.1em 1.1em repeat-x;
	mask: var(--star-mask) 0 50% / 1.1em 1.1em repeat-x;
}

/* Pod zdjęciem produktu: zdjęcia od klientów */
.ugc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
.ugc-strip__list { display: flex; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.ugc-strip__list button { display: block; width: 3.5rem; height: 3.5rem; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-s); background: var(--mist); cursor: zoom-in; }
.ugc-strip__list img { width: 100%; height: 100%; object-fit: cover; }
.ugc-strip__link { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.ugc-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ugc-strip__link .icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 900px) { .ugc-strip { display: none; } } /* na telefonie nie odsuwamy nazwy i ceny od zdjęcia — ocena pod nazwą prowadzi do opinii ze zdjęciami */

/* Pasek zaufania: ocena sklepu, Google/Allegro, liczba zamówień — każdy z linkiem do źródła */
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0 0; color: var(--text); font-size: var(--step--1); line-height: 1.4; }
.trust__item { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
a.trust__item:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.trust__item strong { color: var(--ink); font-weight: 800; }
.trust__item .stars { font-size: 1rem; }
.trust__item .icon { width: 1.25rem; height: 1.25rem; color: var(--gold-text); }
.trust--product { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--line); }
.trust--page { margin-top: 1rem; }

/* Sekcja opinii na karcie produktu */
.reviews {
	display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.4fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start;
	margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line);
}
.reviews__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.25rem; }
.admin-bar .reviews__aside { top: calc(var(--header-h) + 32px + 1.5rem); }
.reviews__title { margin: 0; font-size: var(--step-2); }
.reviews__lead { margin: 0; color: var(--muted); }
.reviews__write { justify-self: start; }
.reviews__write .icon { width: 1.125rem; height: 1.125rem; }
.reviews__main { display: grid; gap: 1.5rem; min-width: 0; }
.reviews__notice { display: flex; align-items: center; gap: .625rem; margin: 0; padding: .875rem 1rem; border-radius: var(--radius-s); background: #edf7f1; color: #135c38; font-weight: 600; }
.reviews__empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--mist); }
.reviews__empty > .icon { width: 2.25rem; height: 2.25rem; color: var(--gold-text); }
.reviews__empty p { margin: 0; max-width: 60ch; }
.reviews__empty .btn { white-space: nowrap; }
@media (max-width: 600px) {
	.reviews__empty { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 1.25rem; }
	.reviews__empty p:has(> .btn) { grid-column: 2; }
}
@media (max-width: 900px) {
	.reviews { grid-template-columns: 1fr; }
	.reviews__aside { position: static; }
}

/* Średnia i rozkład gwiazdek (paski filtrują listę) */
.reviews-score { display: flex; align-items: center; gap: 1rem; }
.reviews-score__avg { margin: 0; color: var(--ink); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.reviews-score__avg span { color: var(--muted); font-size: .4em; font-weight: 600; letter-spacing: 0; }
.reviews-score .stars { font-size: 1.25rem; }
.reviews-score__count { margin: .3rem 0 0; color: var(--muted); font-size: var(--step--1); }
.reviews-bars { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.reviews-bars__row {
	display: grid; grid-template-columns: 2.25rem 1fr 2rem; align-items: center; gap: .625rem;
	width: 100%; padding: .375rem .5rem; border: 0; border-radius: var(--radius-s);
	background: none; color: var(--text); font: 600 var(--step--1)/1 var(--font); cursor: pointer;
}
.reviews-bars__row:hover:not(:disabled), .reviews-bars__row[aria-pressed="true"] { background: var(--mist); }
.reviews-bars__row[aria-pressed="true"] .reviews-bars__label { color: var(--ink); text-decoration: underline; }
.reviews-bars__row:disabled { opacity: .5; cursor: default; }
.reviews-bars__label { white-space: nowrap; }
.reviews-bars__track { height: .5rem; overflow: hidden; border-radius: 99px; background: var(--mist-2); }
.reviews-bars__track span { display: block; height: 100%; border-radius: inherit; background: var(--star); }
.reviews-bars__n { color: var(--muted); font-weight: 500; text-align: right; }

/* „Jak sprawdzamy opinie?” (obowiązek informacyjny) */
.reviews-policy { color: var(--muted); font-size: var(--step--1); line-height: 1.55; }
.reviews-policy summary { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.reviews-policy summary::-webkit-details-marker { display: none; }
.reviews-policy summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.reviews-policy summary .icon { width: 1.125rem; height: 1.125rem; color: var(--ok); }
.reviews-policy p { margin: .625rem 0 0; }

/* Lista: galeria, filtry, opinie */
.reviews-list { display: grid; gap: 1.25rem; }
.reviews-list > .reviews-list__status { position: absolute; }

/* Zdjęcia od klientów */
.reviews-gallery__title { margin: 0 0 .75rem; font-size: var(--step-0); }
.reviews-gallery__title span { color: var(--muted); font-weight: 500; }
.reviews-gallery__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.reviews-gallery__item { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-s); background: var(--mist); cursor: zoom-in; }
.reviews-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.reviews-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 560px) { .reviews-gallery__list { grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .375rem; } }
.reviews-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7, 30, 61, .6); color: #fff; font-size: var(--step-1); font-weight: 800; }

/* Filtry i sortowanie */
.reviews-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.reviews-toolbar__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
button.chip { font-family: var(--font); cursor: pointer; }
.chip .icon { width: 1rem; height: 1rem; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip[aria-pressed="true"] .chip__count { color: rgba(255, 255, 255, .75); }
.reviews-toolbar__sort { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--step--1); }
.reviews-toolbar__sort select { width: auto; min-height: 2.625rem; padding: .4em 2.2em .4em .8em; font-size: var(--step--1); }
@media (max-width: 1024px), (pointer: coarse) {
	.shop-toolbar .woocommerce-ordering select, .reviews-toolbar__sort select { font-size: max(1rem, 16px); }
}

/* Jedna opinia */
.review { display: grid; gap: .5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.review[hidden] { display: none; }
.reviews-list__items > .review:not([hidden]) ~ .review:not([hidden]) { border-top: 1px solid var(--line); }
.reviews-list__items > .review { border-top: 0; }
.review__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .25rem .75rem; }
.review__avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mist-2); color: var(--ink); font-weight: 800; }
.review__who { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .75rem; margin: 0; }
.review__author { color: var(--ink); }
.review__verified { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); font-size: var(--step--1); font-weight: 600; }
.review__verified .icon { width: 1rem; height: 1rem; }
.review__date { color: var(--muted); font-size: var(--step--1); white-space: nowrap; }
.review__rating { margin: .25rem 0 0; line-height: 1; }
.review__rating .stars { font-size: 1.05rem; }
.review__product { margin: 0; color: var(--muted); font-size: var(--step--1); }
.review__product a { color: var(--ink); font-weight: 600; text-decoration: none; }
.review__product a:hover { text-decoration: underline; }
.review--clamp .review__product { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.review__text p { max-width: 70ch; margin: 0 0 .6em; }
.review__text p:last-child { margin-bottom: 0; }
.review__photos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.review__photos a { display: block; width: 5.5rem; height: 5.5rem; overflow: hidden; border-radius: var(--radius-s); background: var(--mist); cursor: zoom-in; }
.review__photos img { width: 100%; height: 100%; object-fit: cover; }
.review__reply { margin: .75rem 0 0; padding: .875rem 1rem; border-radius: var(--radius-s); background: var(--mist); }
.review__reply-who { margin: 0 0 .25rem; color: var(--ink); font-size: var(--step--1); font-weight: 700; }
.review__reply p:last-child { margin-bottom: 0; }
@media (max-width: 480px) { .review__date { grid-column: 2; } }
.reviews-list__empty { margin: 1rem 0 0; color: var(--muted); }
.reviews-list__more { margin: 1rem 0 0; text-align: center; }

/* Strona główna: najnowsze opinie jako karty */
.reviews-home { background: var(--mist); }
.reviews-home__score { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: -.75rem 0 1.75rem; color: var(--muted); }
.reviews-home__score .stars { font-size: 1.25rem; }
.reviews-home__score strong { color: var(--ink); font-size: var(--step-1); }
.reviews-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.reviews-home__grid .review { align-content: start; padding: 1.5rem; border: 0; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-lift); }
/* Wąska karta: data pod imieniem, „Zweryfikowany zakup” w jednej linii. */
.reviews-home__grid .review__date { grid-column: 2; }
.reviews-home__grid .review__verified { white-space: nowrap; }
.review--clamp .review__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
@media (max-width: 1000px) { .reviews-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reviews-home__grid { grid-template-columns: 1fr; } }

/* Formularz opinii */
.review-form-wrap[hidden] { display: none; }
.review-form { padding: clamp(1.25rem, 3vw, 2rem); border: 1.5px solid var(--line); border-radius: var(--radius-l); background: #fff; }
.review-form-wrap { scroll-margin-top: calc(var(--header-h) + 1rem); }
.review-form__title { margin: 0 0 1rem; font-size: var(--step-2); }
.review-form__buyer { display: flex; align-items: flex-start; gap: .625rem; margin: 0 0 1.25rem; padding: .75rem .875rem; border-radius: var(--radius-s); background: #edf7f1; color: #135c38; font-size: var(--step--1); font-weight: 600; }
.review-form__buyer .icon { width: 1.25rem; height: 1.25rem; }
.review-form__order { min-width: 0; margin: 0 0 1.25rem; padding: 1rem 1.125rem .125rem; border: 1.5px dashed var(--line); border-radius: var(--radius); }
.review-form__order legend { margin-left: -.375rem; padding: 0 .375rem; color: var(--ink); font-weight: 800; }
.review-form__order > .field__hint { margin: 0 0 1rem; }
.review-form label small, .review-form .field__label small { font-weight: 400; color: var(--muted); }
.review-form label > span[aria-hidden], .review-form legend span[aria-hidden], .review-form .field--check span[aria-hidden] { color: var(--danger); }
.review-form textarea { min-height: 8rem; resize: vertical; }
.review-form input::placeholder, .review-form textarea::placeholder { color: #8a95a8; }
.review-form .drop { display: grid; margin: 0; font-weight: 400; }
.review-form .field.is-invalid input, .review-form .field.is-invalid textarea, .review-form .field.is-invalid .drop, .review-form__order.is-invalid input { border-color: var(--danger); }
.review-form.is-sending [data-review-submit] { opacity: .7; pointer-events: none; }
.review-form--done { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.review-form--done > .icon { width: 3.5rem; height: 3.5rem; padding: .75rem; border-radius: 50%; background: var(--ok); color: #fff; }
.review-form--done h3 { margin: .5rem 0 0; font-size: var(--step-2); }
.review-form--done p { max-width: 46ch; margin: 0; color: var(--muted); }

/* Wybór oceny: gwiazdki (radio 1–5), wypełniane do wskazanej lub wybranej */
.rate { min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.rate__stars { display: inline-flex; gap: .125rem; vertical-align: middle; }
.rate__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rate__stars label { position: relative; display: block; width: 2.75rem; height: 2.75rem; margin: 0; border-radius: var(--radius-s); cursor: pointer; }
.rate__stars label::before {
	content: ""; position: absolute; inset: .2rem;
	background: var(--star-off);
	-webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
	transition: background-color .1s ease, transform .1s ease;
}
.rate__stars label:hover::before { transform: scale(1.08); }
.rate__stars input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 0; }
.rate__stars:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1)::before,
.rate__stars:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2)::before,
.rate__stars:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3)::before,
.rate__stars:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4)::before,
.rate__stars:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5)::before { background: var(--star); }
.rate__stars.rate__stars:has(label:hover) label:nth-of-type(n)::before { background: var(--star-off); }
.rate__stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1)::before,
.rate__stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2)::before,
.rate__stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3)::before,
.rate__stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4)::before,
.rate__stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5)::before { background: var(--star); }
.rate__hint { margin-left: .5rem; color: var(--muted); font-size: var(--step--1); font-weight: 600; vertical-align: middle; }
.rate.is-invalid .rate__stars label::before { background: #f1c4bf; }

/* Powiększenie zdjęć klientów (przewijanie między opiniami) */
.lightbox { width: min(100vw - 2rem, 72rem); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: #0b1220; color: #fff; }
.lightbox::backdrop { background: rgba(4, 10, 22, .86); }
.lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(88dvh, 62rem); margin: 0; }
.lightbox__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox__caption { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.125rem; font-size: var(--step--1); }
.lightbox__caption span:last-child { color: rgba(255, 255, 255, .65); white-space: nowrap; }
.lightbox__btn { position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__prev, .lightbox__next { top: calc(50% - 1.5rem); }
.lightbox__prev { left: .75rem; }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: .75rem; }
.lightbox__btn[hidden] { display: none; }

/* Strona „Opinie klientów” */
.reviews-page__head { max-width: 52rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.reviews-page__lead { margin: 0; color: var(--muted); font-size: var(--step-1); }
.reviews-page__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.reviews-page__list { min-width: 0; }
.reviews-page__summary { display: grid; gap: 1rem; max-width: 28rem; margin-bottom: 1.75rem; }
.reviews-page__aside { display: grid; gap: 1.5rem; }
/* Przyklejona tylko na wysokim ekranie — formularz i zasady mają razem ok. 950 px, na niższym ich dół byłby niedostępny aż do końca listy. */
@media (min-width: 901px) and (min-height: 68rem) { .reviews-page__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.review-lookup { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--radius-l); background: var(--mist); scroll-margin-top: calc(var(--header-h) + 1rem); }
.review-lookup h2 { font-size: var(--step-2); }
.review-lookup > p { color: var(--text); }
.review-lookup__form .btn { width: 100%; }
.review-lookup__items { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.review-lookup__items li { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: .375rem .75rem; padding: .75rem; border-radius: var(--radius-s); background: #fff; }
.review-lookup__items img { grid-row: span 2; width: 3.5rem; height: auto; border-radius: 6px; }
.review-lookup__items span { color: var(--ink); font-weight: 600; font-size: var(--step--1); line-height: 1.35; }
.review-lookup__items .btn, .review-lookup__items em { justify-self: start; }
.review-lookup__items em { color: var(--ok); font-size: var(--step--1); font-style: normal; font-weight: 600; }
@media (max-width: 900px) {
	.reviews-page__grid { grid-template-columns: 1fr; }
}

/* Moje konto → zamówienie: „Oceń produkty” */
.order-reviews { margin: 2rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--mist); }
.order-reviews h2 { font-size: var(--step-2); }
.order-reviews ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.order-reviews li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; border-radius: var(--radius-s); background: #fff; }
.order-reviews em { color: var(--ok); font-style: normal; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	/* Pętle i wypalanie próbek: od razu stan końcowy */
	.plate__text, .board .mat__engrave { animation: none !important; opacity: 1 !important; }
	.plate__beam, .board .mat::after { display: none; }
}

/* ---------- Strona „Dziękujemy”: dane do przelewu, szczegóły zamówienia i adresy w stylu sklepu ---------- */
/* Dane do przelewu: lista „etykieta — wartość” zamiast poziomego paska WooCommerce. */
.thanks .wc-bacs-bank-details-account-name { display: none; } /* odbiorca jest wierszem listy (gifciak-sklep, przelew.php) */
.thanks ul.wc-bacs-bank-details { display: grid; margin: 0; padding: 0; list-style: none; }
.thanks ul.wc-bacs-bank-details li {
	float: none; display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: .125rem 1rem; align-items: baseline;
	margin: 0; padding: .7rem 0; border: 0; border-top: 1px solid var(--line);
	color: var(--muted); font-size: var(--step--1); line-height: 1.45; text-transform: none; letter-spacing: 0;
}
.thanks ul.wc-bacs-bank-details li:first-child { border-top: 0; padding-top: 0; }
.thanks ul.wc-bacs-bank-details li:last-child { padding-bottom: 0; }
.thanks ul.wc-bacs-bank-details li strong { display: block; margin: 0; color: var(--ink); font-size: var(--step-0); font-weight: 700; line-height: 1.45; text-transform: none; overflow-wrap: anywhere; }
.thanks ul.wc-bacs-bank-details li.account_number strong { letter-spacing: .02em; }
@media (max-width: 560px) { .thanks ul.wc-bacs-bank-details li { grid-template-columns: minmax(0, 1fr); } }

/* Szczegóły zamówienia: miniatura obok nazwy, kwoty w prawej kolumnie, wyróżniona suma. */
.thanks .woocommerce-table--order-details { width: 100%; table-layout: auto; border-collapse: collapse; }
.thanks .woocommerce-table--order-details thead th { padding-top: 0; color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.thanks .woocommerce-table--order-details :is(th, td).product-total,
.thanks .woocommerce-table--order-details tfoot td { width: 1%; padding-left: 1rem; text-align: right; white-space: nowrap; }
.thanks .woocommerce-table--order-details td.product-total { vertical-align: top; color: var(--ink); font-weight: 700; }
.thanks .order_item td { padding-block: 1rem; vertical-align: top; }
.thanks .konto-pozycja { display: flex; align-items: flex-start; gap: .875rem; }
.thanks .konto-pozycja__img { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: var(--radius-s); background: var(--mist); }
.thanks .konto-pozycja__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thanks .konto-pozycja__nazwa { padding-top: .125rem; line-height: 1.4; }
.thanks .konto-pozycja__nazwa a { color: var(--ink); font-weight: 700; text-decoration: none; }
.thanks .konto-pozycja__nazwa a:hover { text-decoration: underline; }
.thanks .order_item .product-quantity { display: block; margin: .125rem 0 0 4.375rem; color: var(--muted); font-size: var(--step--1); font-weight: 600; }
.thanks .order_item .wc-item-meta { margin: .375rem 0 0 4.375rem; padding: 0; list-style: none; color: var(--text); font-size: var(--step--1); line-height: 1.45; }
.thanks .order_item .wc-item-meta li { margin: 0 0 .125rem; }
.thanks .order_item .wc-item-meta .wc-item-meta-label { float: none; margin-right: .25rem; color: var(--ink); font-weight: 600; }
.thanks .order_item .wc-item-meta p { display: inline; margin: 0; }
.thanks .woocommerce-table--order-details tfoot th { color: var(--text); font-size: var(--step--1); font-weight: 500; text-align: left; }
.thanks .woocommerce-table--order-details tfoot td { color: var(--ink); font-weight: 600; }
.thanks .woocommerce-table--order-details tfoot .shipped_via { display: block; color: var(--muted); font-size: var(--step--1); font-weight: 400; white-space: normal; }
.thanks .woocommerce-table--order-details tfoot tr:has(.gifciak-razem) :is(th, td) { color: var(--ink); font-size: var(--step-1); font-weight: 800; }
.thanks .woocommerce-table--order-details tfoot tr:has(.order-actions--heading) :is(th, td) { padding-top: 1rem; border-bottom: 0; vertical-align: middle; }
.thanks .woocommerce-table--order-details .order-actions-button {
	display: inline-flex; align-items: center; min-height: 2.5rem; padding: .5rem 1rem;
	border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--ink);
	font: 700 var(--step--1)/1.2 var(--font); text-decoration: none; white-space: nowrap;
}
.thanks .woocommerce-table--order-details .order-actions-button:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
/* Komórka produktu jako siatka: miniatura po lewej, nazwa, „× 1” i teksty wzoru jedno pod drugim obok niej. */
.thanks .order_item td.product-name { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: .875rem; align-items: start; }
.thanks .order_item .konto-pozycja { display: contents; }
.thanks .order_item .konto-pozycja__img { grid-row: 1 / span 3; }
.thanks .order_item .konto-pozycja__nazwa,
.thanks .order_item .product-quantity,
.thanks .order_item .wc-item-meta { grid-column: 2; margin-left: 0; }
@media (min-width: 641px) { .thanks .woocommerce-table--order-details tfoot .shipped_via { white-space: nowrap; } }
/* Telefon: wiersze zamiast kolumn tabeli — nazwy produktów nie dzielą szerokości z przyciskiem zwrotu. */
@media (max-width: 560px) {
	.thanks .woocommerce-table--order-details,
	.thanks .woocommerce-table--order-details :is(tbody, tfoot) { display: block; }
	.thanks .woocommerce-table--order-details thead { display: none; }
	.thanks .woocommerce-table--order-details tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; border-top: 1px solid var(--line); }
	.thanks .woocommerce-table--order-details tbody tr:first-child { border-top: 0; }
	.thanks .woocommerce-table--order-details.shop_table :is(th, td) { width: auto; border: 0; }
	.thanks .woocommerce-table--order-details td.product-name { display: grid; padding-right: 0; }
	.thanks .woocommerce-table--order-details tfoot :is(th, td) { padding-block: .75rem; }
	.thanks .woocommerce-table--order-details tfoot tr:has(.order-actions--heading) { align-items: center; }
	.thanks .order_item td.product-name { grid-template-columns: 2.75rem minmax(0, 1fr); }
	.thanks .konto-pozycja__img { width: 2.75rem; height: 2.75rem; }
}

/* Adresy: dwie kolumny w jednej karcie (na telefonie jedna pod drugą), bez ramek i ikon WooCommerce. */
.thanks .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.thanks .woocommerce-customer-details .woocommerce-columns::before,
.thanks .woocommerce-customer-details .woocommerce-columns::after { display: none; }
.thanks .woocommerce-customer-details .woocommerce-column { float: none; width: auto; max-width: none; margin: 0; padding: 0; }
.thanks .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; color: var(--text); font-style: normal; line-height: 1.6; }
.thanks .woocommerce-customer-details :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { margin: .375rem 0 0; padding: 0; overflow-wrap: anywhere; }
.thanks .woocommerce-customer-details :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before { display: none; }
@media (max-width: 640px) { .thanks .woocommerce-customer-details .woocommerce-columns { grid-template-columns: minmax(0, 1fr); } }
/* Dane do faktury (gifciak-sklep, includes/faktura.php) pod adresami w tej samej karcie */
.thanks .woocommerce-customer-details :is(.gifciak-faktura-dane, .gifciak-punkt-dane) { margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.thanks .woocommerce-customer-details :is(.gifciak-faktura-dane, .gifciak-punkt-dane) address { overflow-wrap: anywhere; }
.gifciak-punkt-dane__godziny { color: var(--muted); }
/* Inne pola kasy („Informacje dodatkowe” WooCommerce) — nagłówek jak przy adresach, z odstępem */
.woocommerce-customer-details .wc-block-order-confirmation-additional-fields-wrapper { margin: 1.25rem 0 0; }
.woocommerce-customer-details .wc-block-order-confirmation-additional-fields-wrapper > h2 { margin: 0 0 .875rem; font-size: var(--step-1); color: var(--ink); }
/* Telefon: kafelki z numerem, datą, kwotą i płatnością po dwa w rzędzie, e-mail na całą szerokość. */
@media (max-width: 560px) {
	.thanks ul.order_details.thanks-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
	.thanks .thanks-overview li { width: auto; min-width: 0; margin: 0; }
	.thanks .thanks-overview li.email { grid-column: 1 / -1; }
	.thanks .thanks-overview li strong { overflow-wrap: anywhere; }
}

/* Komunikaty WooCommerce z przyciskiem (np. „Potwierdź adres email” nad zamówieniami w koncie):
   przycisk za tekstem, a na wąskim ekranie pod nim — WooCommerce przesuwa go w prawo i na telefonie
   zasłaniał tekst. */
body :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):has(> .button) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1rem; }
body :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):has(> .button) > .button { float: none; order: 2; margin: 0; }
body :is(.woocommerce-info, .woocommerce-message, .woocommerce-error):has(> .button)::after { content: none; } /* clearfix WooCommerce byłby pustą pozycją z odstępem przed przyciskiem */

/* Tablet w pionie: koszyk w jednej kolumnie — WooCommerce od 700 px stawia podsumowanie obok produktów,
   a przy 768 px ma ono ok. 240 px (łamany przycisk płatności, dostawa w trzech liniach). */
@media (min-width: 601px) and (max-width: 860px) {
	.wc-block-cart.wc-block-components-sidebar-layout { flex-direction: column; }
	.wc-block-cart.wc-block-components-sidebar-layout > .wc-block-components-main { width: 100%; padding-inline: 0; }
	/* Karta podsumowania zachowuje własny margines wewnętrzny (jak w .wc-block-cart__sidebar). */
	.wc-block-cart.wc-block-components-sidebar-layout > .wc-block-components-sidebar { width: 100%; margin-top: 1.5rem; padding-inline: clamp(1.125rem, 2.5vw, 1.5rem); }
}

/* „Może Ci się spodobać” i „Polecamy też” przy 3 kolumnach (tablet): 3 produkty zamiast 4,
   bez czwartego samotnie w nowym rzędzie. */
@media (min-width: 761px) and (max-width: 1100px) {
	:is(.related, .upsells).products ul.products > li:nth-child(n+4) { display: none; }
}

/* Tablet w pionie: zamówienie zostaje w dwóch kolumnach (formularz z podsumowaniem obok i przyciskiem
   na końcu), ale podsumowanie dostaje 42% zamiast 35% — przy 768 px miało ok. 250 px i nazwa produktu
   łamała się na dziesięć wierszy. */
@media (min-width: 701px) and (max-width: 960px) {
	.wc-block-components-sidebar-layout.wc-block-checkout.is-large > .wc-block-components-main { width: 58%; }
	.wc-block-components-sidebar-layout.wc-block-checkout.is-large > .wc-block-components-sidebar { width: 42%; }
}

/* „Dziękujemy”: kafelki z numerem, datą, kwotą, płatnością i e-mailem bez dziur w siatce. Tablet i węższy
   komputer: 3 + 3 (e-mail na dwie kolumny, bez płatności — na cały rząd); od 1200 px wszystko w jednym
   rzędzie, e-mail podwójnej szerokości. Wcześniej e-mail zostawał sam w drugim rzędzie, a przy 768 px
   łamał się w środku adresu. */
@media (min-width: 561px) {
	.thanks ul.order_details.thanks-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.thanks ul.order_details.thanks-overview li.email { grid-column: span 2; }
	.thanks ul.order_details.thanks-overview li.email:nth-child(4) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.thanks ul.order_details.thanks-overview { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.thanks ul.order_details.thanks-overview li.email:nth-child(n) { grid-column: span 2; }
}

/* „Dziękujemy” przy płatności PayU: blok wtyczki „Poczekaj na wynik płatności” jako karta jak komunikaty
   sklepu, zamiast dużego logo i nagłówków nad podziękowaniem. */
#payu-payment-status { display: grid; gap: .375rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--mist); }
#payu-payment-status > .payu-payment-status-title { gap: .625rem; margin: 0; color: var(--ink); font-size: var(--step-0); }
#payu-payment-status > .payu-payment-status-title > img { width: auto; height: 1.5rem; }
#payu-payment-status > #payu-payment-status-waiting > h3 { gap: .5rem; margin: 0; color: var(--text); font-size: var(--step--1); font-weight: 600; }
#payu-preloader > output > img { width: 1.125rem; height: 1.125rem; }
#payu-payment-status-result-pay-link .button { margin-top: .25rem; }