/* ==========================================================================
   Wygląd sklepu od 16.10.2026 — przeniesiony z klikalnej makiety planu rozwoju
   (marketing/analizy/2026-10-09-plan-rozwoju/makieta-klikalna/, zaakceptowanej
   przez właściciela 16.10.2026; klasy mk-… makiety to tu g-…). Historia zmian
   wyglądu i decyzje właściciela: README makiety. Ten arkusz wczytuje się po
   main.css: dawne strony (konto, kasa, strony informacyjne) zostają na swoich
   klasach, a nowe układy używają klas g-….
   ==========================================================================
   Gifciak — jasny, przejrzysty układ (białe panele na jasnym tle,
   duża wyszukiwarka, pasek kategorii, karta produktu z bocznym podsumowaniem).
   Własny arkusz napisany od zera. Barwy, krój i logo — Gifciak:
   granat #071E3D, błękit #65C6ED (akcent), róż (przyciski i plakietki z białym
   napisem), Poppins (od 18.10.2026, wcześniej Schibsted Grotesk).
   Paleta z marketing/marka/kolory.md (od 11.10.2026).
   ========================================================================== */

:root {
	--ink: #071e3d;
	--ink-2: #163058;
	--blue: #65C6ED;
	--blue-hover: #49B5DF;
	--blue-text: #176488;
	--blue-soft: #eaf7fd;
	/* Róż z języka Gifciaka — w palecie marki od 11.10.2026 (kolory.md) */
	--pink: #ec2a8e;
	--pink-text: #c2186b;
	--pink-soft: #fdeaf3;
	/* Róż przycisków i plakietek: odcień #EC2A8E przyciemniony tak, żeby biały napis
	   miał 4,6 : 1 (sam #EC2A8E ma 3,97 : 1 — za mało dla drobnego tekstu) */
	--pink-btn: #db1f84;
	--paper: #ffffff;
	/* Tło strony pod białymi panelami i kartami — właściciel 11.10.2026: „jako tło strony zrób kolor #f9f9f9”,
	   18.10.2026 ciut ciemniej, żeby białe kafelki bardziej się odróżniały: #f4f4f4 */
	--bg: #f4f4f4;
	--mist: #f1f4f8;
	--mist-2: #e6ebf2;
	--line: #dfe5ed;
	--line-2: #c9d2de;
	--text: #22304a;
	--muted: #5a6780;
	--ok: #1c7a4c;
	--danger: #b3261e;
	--font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--r-s: 8px;
	--r: 12px;
	--r-l: 16px;
	--max: 100rem;
	--gut: clamp(1rem, 3vw, 2.5rem);
	--foto: #ffffff;
	--cien: 0 1px 2px rgba(7, 30, 61, .05), 0 6px 20px rgba(7, 30, 61, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 9rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
/* Duże ekrany: szerszy kontener i trochę większe litery (wszystko w rem skaluje się razem) */
@media (min-width: 1800px) { html { font-size: 106.25%; } }
@media (min-width: 2300px) { html { font-size: 118.75%; } }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3 { margin: 0 0 .5em; color: var(--ink); line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-underline-offset: 3px; }
/* Po najechaniu nigdzie nie dokładamy podkreślenia — zmienia się tylko kolor (właściciel 11.10.2026) */
a:not([class]):hover { color: var(--pink-text); }
.g-link-btn:hover { color: var(--pink-text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.g-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-in { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
body.g-zablokuj { overflow: hidden; }

/* ---------- Przyciski i pola ---------- */
.g-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 2.75rem; padding: .6rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--r-s);
	font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.g-btn .icon { width: 1.1rem; height: 1.1rem; }
.g-btn--glowny { background: var(--pink-btn); color: #fff; }
.g-btn--obrys { border-color: var(--pink-btn); background: #fff; color: var(--pink-text); }
.g-btn--obrys:hover { border-color: var(--pink-text); background: var(--pink-soft); color: var(--pink-text); }
.g-btn--jasny { border-color: var(--line-2); background: #fff; color: var(--ink); }
.g-btn--jasny:hover { border-color: var(--ink); }
.g-btn--duzy { min-height: 3.25rem; padding: .75rem 1.6rem; font-size: 1.02rem; }
.g-btn--maly { min-height: 2.25rem; padding: .35rem .8rem; font-size: .85rem; }
.g-btn--pelny { width: 100%; }
.g-btn:disabled { opacity: .5; cursor: not-allowed; }
.g-link-btn { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-link-btn .icon { width: 1rem; height: 1rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
	width: 100%; min-height: 2.75rem; padding: .55rem .8rem; border: 1.5px solid var(--line-2); border-radius: var(--r-s);
	background: #fff; color: var(--ink); font-size: max(1rem, 16px);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(101, 198, 237, .35); }
input::placeholder, textarea::placeholder { color: #8a95a8; }
.g-ikbtn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; text-decoration: none; position: relative; }
.g-ikbtn:hover { background: var(--mist); }
.g-ikbtn--okragly { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mist); }
.g-ikbtn--okragly:hover { background: var(--mist-2); }


/* ---------- Pasek górny, nagłówek, menu ---------- */
.g-top { background: var(--mist); color: var(--text); font-size: .82rem; }
.g-top__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.25rem; }
.g-top__linki { display: flex; gap: 1.5rem; }
.g-top a { color: var(--ink); text-decoration: none; font-weight: 600; }
.g-top a:hover { color: var(--blue); }
.g-top__fakty { display: flex; gap: 1.5rem; margin: 0; }
.g-top__fakty span, .g-top__fakty a { display: inline-flex; align-items: center; gap: .4rem; }
.g-top .icon { width: 1rem; height: 1rem; color: var(--blue-text); }
.g-header { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 0 var(--line); }
.g-header__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 5rem; }
.g-logo img { width: 9rem; transform: translateY(-14%); }
.g-szukaj { position: relative; flex: 1; max-width: 52rem; }
.g-szukaj input { min-height: 3rem; padding-right: 3rem; border-color: var(--line-2); }
.g-szukaj button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: var(--r-s); background: var(--pink-btn); color: #fff; cursor: pointer; }
.g-header__akcje { display: flex; align-items: center; gap: .75rem; }
.g-koszyk-btn { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.g-licznik { position: absolute; right: -.2rem; bottom: -.15rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px; background: var(--pink-btn); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; box-shadow: 0 0 0 2px #fff; }
/* Menu główne pod wyszukiwarką (wygląd: blok „Biel i układ jak OpenGift” niżej) */
.g-nav__lista { display: flex; gap: .25rem clamp(.25rem, 1.2vw, 1rem); margin: 0; padding: 0; list-style: none; }
.g-nav__lista > li { position: relative; }
.g-nav__lista > li > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: 0 .85rem; border-bottom: 3px solid transparent; color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none; }
.g-nav__lista .icon { width: 1.15rem; height: 1.15rem; }
.g-nav__chev { width: .85rem !important; height: .85rem !important; margin-left: -.15rem; transform: rotate(90deg); color: #c9d3e3 !important; }
.g-szuflada { position: fixed; inset: 0; z-index: 90; background: rgba(7, 30, 61, .45); }
.g-szuflada__panel { display: flex; flex-direction: column; width: min(22rem, 88vw); height: 100%; background: #fff; overflow-y: auto; }
.g-szuflada__head { display: flex; justify-content: space-between; align-items: center; padding: .75rem .75rem .75rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.g-szuflada ul { margin: 0; padding: .5rem 1.25rem; list-style: none; }
.g-szuflada li { border-bottom: 1px solid var(--line); }
.g-szuflada li a { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; color: var(--ink); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.g-szuflada li a .icon { color: var(--blue-text); }
.g-szuflada li a[aria-current] { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.g-szuflada__chev { margin-left: auto; color: var(--muted) !important; }
.g-szuflada__stopka { display: grid; gap: .75rem; margin-top: auto; padding: 1.25rem; background: var(--mist); }
.g-szuflada__stopka a { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; text-decoration: none; }

/* ---------- Strona: panele, okruszki, sekcje ---------- */
.g-strona { padding-top: 1.25rem; padding-bottom: 3rem; }
.g-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.g-okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: 1.1rem; color: var(--muted); font-size: .9rem; }
.g-okruszki a { color: var(--muted); text-decoration: none; }
.g-okruszki a:hover { color: var(--pink-text); }
.g-okruszki span[aria-current] { color: var(--ink); font-weight: 600; }
.g-okruszki__sep { width: .9rem; height: .9rem; color: var(--line-2); }
.g-sekcja { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.g-sekcja__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.g-sekcja__head h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
.g-wiecej { display: inline-flex; align-items: center; gap: .25rem; color: var(--blue-text); font-weight: 700; text-decoration: none; }
.g-wiecej:hover { color: var(--pink-text); }
.g-nadtytul { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; color: var(--blue-text); font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.g-akcent { color: var(--blue-text); }
.g-akcje { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.g-zielony { color: var(--ok); font-weight: 600; }
.g-czerwony { color: var(--danger); font-weight: 600; }
.g-zielony .icon, .g-czerwony .icon { width: 1rem; height: 1rem; vertical-align: -.2em; margin-right: .2rem; }
.g-podpowiedz { margin: .5rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.g-podpowiedz .icon { width: 1rem; height: 1rem; vertical-align: -.2em; margin-right: .3rem; color: var(--blue-text); }
.g-uwaga { padding: .6rem .8rem; border-radius: var(--r-s); background: var(--mist); color: var(--muted); font-size: .85rem; }
.g-opc { color: var(--muted); font-weight: 400; }
.g-h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1rem; }
.g-h3 { margin: 1.5rem 0 .75rem; font-size: 1.15rem; }
.g-info { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: var(--r-s); background: var(--mist); color: var(--ink); font-size: .87rem; }
.g-info--blekit { background: var(--blue-soft); }
.g-info--ok { background: #e8f5ee; color: #0d4a2c; font-weight: 600; }
.g-info--blad { background: #fdecea; color: var(--danger); font-weight: 600; }
.g-lista-ok { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.g-lista-ok li { display: flex; align-items: flex-start; gap: .5rem; }
.g-lista-ok .icon { width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--blue-text); }
.g-chipy { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.g-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .9rem; border: 1.5px solid var(--line-2); border-radius: 99px; background: #fff; color: var(--ink); font-size: .87rem; font-weight: 600; text-decoration: none; }
.g-chip:hover { border-color: var(--ink); }
.g-chip.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.g-pusto { padding: 2rem; text-align: center; }

/* ---------- Strona główna ---------- */
.g-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; }
.g-hero__tytul { margin: 0 0 .45em; font-size: clamp(2.6rem, 1.4rem + 4vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.g-hero__tytul--sredni { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); letter-spacing: -.03em; line-height: 1.08; }
.g-hero__lead { max-width: 36rem; margin-bottom: 1.5rem; color: var(--muted); font-size: 1.1rem; }
.g-znak { position: relative; display: inline-block; padding: .02em .16em .1em; }
.g-ramka { position: absolute; inset: 0; border: 2.5px dashed var(--blue); border-radius: 2px; pointer-events: none; }
.g-ramka i { position: absolute; width: .6rem; height: .6rem; border: 2px solid var(--blue); border-radius: 2px; background: #fff; }
.g-ramka i:nth-child(1) { top: -.35rem; left: -.35rem; } .g-ramka i:nth-child(2) { top: -.35rem; right: -.35rem; }
.g-ramka i:nth-child(3) { bottom: -.35rem; left: -.35rem; } .g-ramka i:nth-child(4) { bottom: -.35rem; right: -.35rem; }
.g-atuty { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; color: var(--ink); font-weight: 600; }
.g-atuty li { display: inline-flex; align-items: center; gap: .4rem; }
.g-atuty .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-text); stroke-width: 2.4; }
.g-hero__wizual { position: relative; display: flex; justify-content: center; }
.g-pracownia { position: relative; width: min(100%, 25rem); padding: 1rem 1rem 1.15rem; border: 1px solid var(--line); border-radius: 1.5rem; background: #fff; box-shadow: 0 20px 50px -24px rgba(7, 30, 61, .35); }
.g-hero__gifciak { position: absolute; left: -1.5rem; bottom: -1rem; width: 8.5rem; pointer-events: none; }
.g-hero__wizual--kalk { justify-content: flex-end; }

.g-wejscia { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.g-wejscie { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; align-items: center; gap: 1.25rem; padding: 1.5rem 1.75rem; color: var(--ink); text-decoration: none; transition: box-shadow .15s ease; }
.g-wejscie:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-wejscie__tekst { display: grid; gap: .4rem; }
.g-wejscie__tekst .g-nadtytul { margin: 0; }
.g-wejscie strong { font-size: 1.45rem; line-height: 1.15; }
.g-wejscie__tekst > span:not(.g-nadtytul):not(.g-wejscie__wiecej) { color: var(--muted); }
.g-wejscie__wiecej { display: inline-flex; align-items: center; gap: .25rem; color: var(--blue-text); font-weight: 700; }
.g-wejscie img, .g-wejscie__svg { width: 9rem; }
.g-wejscie--granat { background: var(--ink); color: #fff; }
.g-wejscie--granat strong { color: #fff; }
.g-wejscie--granat .g-wejscie__tekst > span:not(.g-nadtytul):not(.g-wejscie__wiecej) { color: #c9d3e3; }
.g-wejscie--granat .g-nadtytul, .g-wejscie--granat .g-wejscie__wiecej { color: var(--blue); }
.g-wejscie--granat .g-wejscie__svg { border-radius: var(--r); background: #fff; }

.g-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.g-kafel { display: flex; flex-direction: column; gap: .85rem; padding: .75rem .75rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; color: var(--ink); text-align: center; text-decoration: none; transition: box-shadow .15s ease; }
.g-kafel:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-kafel__tytul { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.g-kafel__obraz { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--foto); }
.g-kafel__obraz img, .g-kafel__obraz svg { width: 100%; max-width: 13rem; margin: 0 auto; }
.g-kafel--pytanie .g-kafel__obraz { align-content: center; gap: .75rem; padding: 1rem; border: 1.5px dashed var(--line-2); background: #fff; color: var(--muted); }
.g-kafel--pytanie .icon { width: 2rem; height: 2rem; color: var(--blue-text); }

.g-zakladki { display: flex; flex-wrap: wrap; gap: .5rem; }
.g-zakladki [role="tab"] { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1.5px solid var(--line-2); border-radius: var(--r-s) var(--r-s) 0 0; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; }
.g-zakladki [role="tab"][aria-selected="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blue); }
.g-zakladki--linia [role="tab"] { min-height: 2.5rem; padding: .25rem 0; margin-right: 1.5rem; border: 0; border-radius: 0; background: none; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 700; color: var(--muted); }
.g-zakladki--linia [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--blue); }
.g-zakladki--linia .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-text); }

/* Karty produktów */
.g-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.g-karta { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.g-karta:hover { border-color: var(--line-2); box-shadow: var(--cien); }
.g-karta__media { position: relative; display: grid; place-items: center; margin: .75rem .75rem 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--foto); }
.g-karta__media > :not(.g-plakietki) { width: 100%; height: 100%; }
.g-karta__media svg { display: block; width: 100%; height: 100%; }
.g-plakietki { position: absolute; top: .9rem; left: .9rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .3rem; }
.g-plakietka { display: inline-flex; align-items: center; padding: .15rem .55rem; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.g-karta__tresc { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: .9rem 1.1rem 1.1rem; }
.g-karta__tytul { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.g-karta__tytul a { color: var(--ink); text-decoration: none; }
.g-karta__tytul a::after { content: ""; position: absolute; inset: 0; }
.g-karta__tytul a:hover { color: var(--pink-text); }
.g-kropki { display: flex; margin: 0; padding: 0; list-style: none; }
.g-kropki li + li { margin-left: -.2rem; }
.g-kropka { display: block; width: 1rem; height: 1rem; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .15); }
.g-karta__kolory-tekst { margin: 0; color: var(--muted); font-size: .82rem; }
.g-karta__cena { margin: auto 0 0; color: var(--ink); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.g-karta__cena small { color: var(--muted); font-size: .85rem; font-weight: 500; letter-spacing: 0; }
.g-karta__seria { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.45; }
.g-karta__seria strong { color: var(--ink); }

/* Proces i pytania */
.g-proces { margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-proces__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end; margin-bottom: 1.75rem; }
.g-proces__head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
/* Sam nagłówek bez opisu obok — na całą szerokość, żeby dłuższy tytuł nie łamał się w połowie panelu */
.g-proces__head h2:only-child { grid-column: 1 / -1; }
.g-proces__head p { margin: 0; color: var(--muted); }
.g-kroki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.g-kroki li { display: grid; align-content: start; gap: .3rem; }
.g-kroki strong { color: var(--ink); font-size: 1.05rem; }
.g-kroki span:last-child { color: var(--muted); font-size: .95rem; }
.g-kroki__nr { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .35rem; border: 2px solid var(--blue); border-radius: 50%; background: #fff; color: var(--ink); font-weight: 700; }
.g-pytania { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem 3rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-pytania h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-pytania p { color: var(--muted); }
.g-pytania__gifciak { width: 8rem; }
/* Kreska tylko między pytaniami — nigdy nad pierwszym ani pod ostatnim (właściciel 11.10.2026) */
.g-faq details + details { border-top: 1px solid var(--line); }
.g-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 0; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary .icon { color: var(--blue-text); transition: transform .2s ease; }
.g-faq details[open] summary .icon { transform: rotate(45deg); }
.g-faq p { margin: -.25rem 0 1.1rem; color: var(--muted); }

/* ---------- Katalogi ---------- */
.g-katalog { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.g-filtry { position: sticky; top: 9.5rem; padding: .25rem 1.25rem 0 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.g-filtry h2 { margin: 1.25rem 0 .5rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.g-filtry h2:first-child { margin-top: 0; }
.g-filtry ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.g-filtr { display: flex; align-items: center; gap: .6rem; min-height: 2.25rem; padding: .2rem .5rem; margin-inline: -.5rem; border-radius: var(--r-s); color: var(--text); text-decoration: none; }
.g-filtr:hover { background: var(--mist); }
.g-filtr.is-on { color: var(--ink); font-weight: 700; }
.g-filtr__box { display: grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--line-2); border-radius: 4px; background: #fff; color: #fff; }
.g-filtr__box .icon { width: .8rem; height: .8rem; opacity: 0; }
.g-filtr.is-on .g-filtr__box { border-color: var(--ink); background: var(--ink); }
.g-filtr.is-on .g-filtr__box .icon { opacity: 1; }
.g-filtr__licz { margin-left: auto; color: var(--muted); font-size: .8rem; font-weight: 500; }
.g-filtry__firma { display: flex; gap: .6rem; margin: 1.5rem 0 0; padding: .9rem; border-radius: var(--r); background: var(--blue-soft); font-size: .87rem; line-height: 1.45; }
.g-filtry__firma .icon { color: var(--blue-text); }
.g-filtry__firma a { font-weight: 700; }
.g-katalog__head { padding: 0; margin-bottom: 1.25rem; border: 0; }
.g-katalog__head h1 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.g-katalog__head > p { max-width: 60rem; color: var(--muted); }
.g-pasek-listy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.g-pasek-listy select { width: auto; min-height: 2.4rem; padding-block: .25rem; font-size: .9rem; }
.g-naklad { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); }
.g-naklad .g-chip { min-height: 2rem; padding-inline: .7rem; font-size: .82rem; }

/* ---------- Karta produktu ---------- */
.g-produkt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3.5vw, 3.5rem); align-items: start; padding: 0; border: 0; }
.g-produkt__info { max-width: 42rem; counter-reset: krok; }
.g-galeria { position: sticky; top: 9.5rem; }
.g-galeria__glowna { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--foto); }
.g-galeria__glowna svg { width: 100%; max-height: min(38rem, 72vh); }
.g-galeria__notka { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; }
.g-galeria__miniatury { display: flex; gap: .6rem; margin-top: .75rem; }
.g-galeria__miniatury button { width: 5.5rem; aspect-ratio: 1; padding: .3rem; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--foto); cursor: pointer; }
.g-galeria__miniatury button svg { width: 100%; height: 100%; }
.g-galeria__miniatury button[aria-pressed="true"] { border-color: var(--ink); }
.g-produkt__tytul { margin-bottom: .6rem; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); font-weight: 700; }
.g-produkt__symbol { margin: 0 0 1rem; color: var(--muted); font-size: .87rem; font-weight: 600; }
.g-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin: 0 0 .25rem; }
.g-cena strong { color: var(--ink); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.g-cena > span:not(.g-przyklad) { color: var(--muted); }
.g-produkt__wcenie { margin: 0 0 1.5rem; color: var(--muted); font-size: .95rem; }
.g-pole__etykieta { display: block; margin: 0 0 .45rem; color: var(--ink); font-weight: 700; font-size: .92rem; }
.g-pole__etykieta span { font-weight: 500; color: var(--muted); }
.g-kolory { margin-bottom: 1.25rem; }
.g-kwadraty { display: flex; flex-wrap: wrap; gap: .5rem; }
.g-kw { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--r-s); background: var(--k); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); color: #fff; cursor: pointer; }
.g-kw .icon { width: 1.35rem; height: 1.35rem; opacity: 0; stroke-width: 2.6; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); }
.g-kw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.g-kw[aria-pressed="true"] .icon { opacity: 1; }
.g-kw:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px var(--line-2); }
.g-kwadraty--male .g-kw { width: 2rem; height: 2rem; border-radius: 6px; }
.g-kwadraty--male .g-kw .icon { width: 1rem; height: 1rem; }
.g-kw--maly { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 5px; cursor: default; }
.g-stan-mag { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: .75rem 0 0; font-size: .9rem; }
.g-ile { margin-bottom: 1.25rem; padding: 1rem; border-radius: var(--r); background: var(--mist); }
.g-ile__wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.g-ile__suma { margin: 0; color: var(--text); }
.g-ile__suma strong { color: var(--ink); font-size: 1.15rem; }
.g-ile__info { margin: .5rem 0 0; color: var(--muted); font-size: .85rem; }
.g-ile__info:empty { display: none; }
.g-ilosc { display: inline-flex; align-items: stretch; height: 2.75rem; border: 1.5px solid var(--line-2); border-radius: var(--r-s); background: #fff; }
.g-ilosc button { display: grid; place-items: center; width: 2.6rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.g-ilosc button:hover { background: var(--mist); }
.g-ilosc .icon { width: 1rem; height: 1rem; }
.g-ilosc input { width: 4.25rem; min-height: 0; height: 100%; padding: 0; border: 0; border-inline: 1px solid var(--line); border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.g-ilosc input::-webkit-outer-spin-button, .g-ilosc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g-ilosc input:focus { box-shadow: none; }

.g-zakres { min-width: 0; margin: 1.25rem 0; padding: 0; border: 0; }
.g-zakres__opcja { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-bottom: .5rem; padding: .65rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-s); background: #fff; cursor: pointer; }
.g-zakres__opcja:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.g-zakres__opcja input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); }
.g-zakres__opcja strong { display: block; color: var(--ink); }
.g-zakres__opcja small { color: var(--muted); }
.g-zakres__opcja em { font-style: normal; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Blok projektu */
.g-projekt { margin: 0 0 1.25rem; padding: 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r); }
.g-projekt__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.g-projekt__head h2 { margin: 0; font-size: 1.15rem; }
.g-stan { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 99px; background: var(--mist); color: var(--muted); font-size: .78rem; font-weight: 700; }
.g-stan--ok { background: #e8f5ee; color: #0d4a2c; }
.g-stan .icon { width: .95rem; height: .95rem; }
.g-projekt__opis { color: var(--text); }
.g-projekt__zapis { margin: .5rem 0; padding: .5rem .7rem; border-radius: var(--r-s); background: var(--mist); color: var(--ink); font-size: .87rem; }
.g-tryby { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1.1rem; padding: .25rem; border-radius: var(--r); background: var(--mist); }
.g-tryby [role="tab"] { min-height: 2.5rem; padding: .4rem .85rem; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); font-weight: 700; cursor: pointer; }
.g-tryby [role="tab"]:hover { color: var(--ink); }
.g-tryby [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(7, 30, 61, .14); }
.g-pole { margin-bottom: .9rem; }
.g-pigulki { display: flex; flex-wrap: wrap; gap: .4rem; }
.g-pigulki button { min-height: 2.4rem; padding: .35rem .9rem; border: 1.5px solid var(--line-2); border-radius: 99px; background: #fff; color: var(--ink); font-size: .87rem; font-weight: 700; cursor: pointer; }
.g-pigulki button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.g-logo-pole { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 2px dashed var(--line-2); border-radius: var(--r-s); background: var(--mist); }
.g-logo-pole.is-dodane { border-style: solid; background: #fff; }
.g-logo-pole__img { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 6px; background: var(--mist); color: var(--ink); font-size: .65rem; font-weight: 700; letter-spacing: .05em; }
.g-logo-pole__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.g-logo-pole__opis { display: grid; flex: 1 1 12rem; gap: .1rem; }
.g-logo-pole__opis small { color: var(--muted); font-size: .8rem; }
.g-logo-pole__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.g-logo-pole__akcje label { cursor: pointer; }
.g-fonty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.g-font { display: grid; justify-items: center; gap: .1rem; padding: .5rem .35rem; border: 1.5px solid var(--line-2); border-radius: var(--r-s); background: #fff; color: var(--ink); cursor: pointer; }
.g-font[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.g-font__probka { font-size: 1.45rem; line-height: 1.1; }
.g-font__nazwa { color: var(--muted); font-size: .76rem; }
.g-fonty--kompakt .g-font__probka { font-size: 1.2rem; }
.g-limit { display: flex; gap: .75rem; padding: .85rem .95rem; border-radius: var(--r-s); background: var(--blue-soft); }
.g-limit > .icon { color: var(--blue-text); margin-top: .1rem; }
.g-limit p { margin: 0 0 .5rem; }
.g-limit__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.g-kreator-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .95rem 1.1rem; border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; transition: background-color .15s ease; }
.g-kreator-btn:hover { background: var(--ink-2); color: #fff; }
.g-kreator-btn > .icon:first-child { box-sizing: content-box; width: 1.35rem; height: 1.35rem; padding: .6rem; border-radius: 50%; background: var(--blue); color: var(--ink); }
.g-kreator-btn strong { display: block; font-size: 1.02rem; }
.g-kreator-btn small { color: rgba(255, 255, 255, .8); font-size: .82rem; }
.g-kreator-btn > .icon:last-child { color: var(--blue); }
.g-zapisany { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .9rem; margin-top: .9rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--r); }
.g-zapisany svg { width: 100%; border-radius: 6px; background: var(--mist); }
.g-zapisany strong { display: block; color: var(--ink); }
.g-zapisany small { color: var(--muted); font-size: .82rem; }

.g-info-zakupu { display: grid; gap: .45rem; margin: 1rem 0; padding: 0; list-style: none; color: var(--text); font-size: .88rem; }
.g-info-zakupu li { display: flex; align-items: center; gap: .55rem; }
.g-info-zakupu .icon { width: 1.15rem; height: 1.15rem; color: var(--blue-text); }
.g-progi-box { margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: var(--r); }
.g-progi-box summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.g-progi-box summary::-webkit-details-marker { display: none; }
.g-progi-box summary .icon:first-child { color: var(--blue-text); }
.g-progi-box summary span { display: grid; }
.g-progi-box summary small { color: var(--muted); font-size: .82rem; }
.g-progi-box__chev { transform: rotate(90deg); color: var(--muted); transition: transform .15s ease; }
.g-progi-box[open] .g-progi-box__chev { transform: rotate(-90deg); }
.g-progi-box > div { padding: 0 1rem 1rem; }
.g-progi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.g-progi__kol { display: grid; grid-template-rows: auto auto; padding: 0; margin: 0; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink); text-align: center; font: inherit; }
.g-progi__kol:last-child { border-right: 0; }
.g-progi__kol > * { display: grid; place-items: center; min-height: 2.75rem; padding: .4rem .15rem; }
.g-progi__kol > :first-child { border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.g-progi__kol strong { font-size: .88rem; white-space: nowrap; }
.g-progi__kol--naglowek { background: var(--mist); color: var(--muted); font-size: .8rem; font-weight: 700; }
button.g-progi__kol { cursor: pointer; }
button.g-progi__kol:hover { background: var(--mist); }
.g-progi__kol.is-aktywny { position: relative; background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.g-ramka-firma { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--r); background: var(--blue-soft); }
.g-ramka-firma__ik { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--blue-text); }
.g-ramka-firma h2 { margin: 0 0 .15rem; font-size: 1.05rem; }
.g-ramka-firma p { margin: 0; color: var(--text); font-size: .92rem; }

.g-opis { margin-top: 1.25rem; padding: 0 0 1.5rem; overflow: hidden; }
.g-opis .g-zakladki { padding: 1.25rem 1.5rem 0; border-bottom: 1px solid var(--line-2); }
.g-opis .g-zakladki [role="tab"] { margin-bottom: -1px; }
.g-opis__tresc { max-width: 60rem; padding: 1.5rem 1.5rem 0; }
.g-opis__tresc h2 { font-size: 1.25rem; }
.g-spec { margin: 0; }
.g-spec div { display: grid; grid-template-columns: minmax(8rem, 32%) 1fr; gap: 1rem; padding: .7rem 0; }
.g-spec div + div { border-top: 1px solid var(--line); }
.g-spec dt { color: var(--muted); }
.g-spec dd { margin: 0; color: var(--ink); font-weight: 600; }
.g-pasek-zakupu { display: none; }

/* ---------- Karta firmowa: galeria | informacje | podsumowanie ---------- */
.g-firma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 1.25rem; align-items: start; }
.g-firma__glowny { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; padding: 0; border: 0; }
.g-firma__boczna { position: sticky; top: 9.5rem; display: grid; gap: 1rem; }
.g-podsum { padding: 1.25rem; }
.g-podsum__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1rem; }
.g-podsum__head h2 { margin: 0; font-size: 1.1rem; }
.g-podsum__cena { margin: 0; color: var(--muted); }
.g-podsum__cena strong { color: var(--blue-text); font-size: 1.6rem; font-weight: 700; }
.g-podsum__etykiety { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .5rem; padding-bottom: .4rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.g-podsum__etykiety span:last-child { text-align: right; }
.g-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kolor usun" "ilosc wartosc"; align-items: center; gap: .5rem .75rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.g-wiersz .g-wiersz__kolor { grid-area: kolor; }
.g-wiersz .g-ilosc { grid-area: ilosc; }
.g-wiersz .g-wiersz__wartosc { grid-area: wartosc; }
.g-wiersz .g-wiersz__usun { grid-area: usun; }
.g-wiersz.is-aktywny .g-wiersz__kolor select { border-color: var(--ink); }
.g-wiersz__kolor { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.g-wiersz__kolor select { min-height: 2.4rem; padding: .2rem .35rem; font-size: .85rem; }
.g-wiersz .g-ilosc { height: 2.4rem; }
.g-wiersz .g-ilosc button { width: 2.1rem; }
.g-wiersz .g-ilosc input { width: 3.25rem; }
.g-wiersz__wartosc { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.g-wiersz__usun { width: 2rem; height: 2rem; color: var(--muted); }
.g-link-plus { display: inline-flex; align-items: center; gap: .35rem; margin: .5rem 0 .75rem; padding: 0; border: 0; background: none; color: var(--blue-text); font-weight: 700; cursor: pointer; }
.g-link-plus .icon { width: 1.1rem; height: 1.1rem; }
.g-podsum__dl { display: grid; gap: .4rem; margin: 0 0 .75rem; padding: .75rem 0; border-block: 1px solid var(--line); font-size: .87rem; }
.g-podsum__dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; }
.g-podsum__dl dt { color: var(--muted); }
.g-podsum__dl dd { margin: 0; color: var(--ink); font-weight: 600; }
.g-podsum__razem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.g-podsum__razem strong { color: var(--ink); font-size: 1.5rem; font-weight: 700; }
.g-podsum__rabat { margin: .25rem 0 1rem; color: var(--muted); font-size: .85rem; }
.g-podsum__termin { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .75rem 0 0; color: var(--text); font-size: .87rem; text-align: center; }
.g-podsum__termin .icon { width: 1.05rem; height: 1.05rem; color: var(--blue-text); }
.g-doradca { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.g-doradca img { width: 5rem; height: 5rem; border-radius: 50%; background: var(--mist); object-fit: contain; }
.g-doradca div { display: grid; gap: .3rem; justify-items: start; }
.g-doradca span { color: var(--muted); font-size: .85rem; }
.g-od1 { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 0 .25rem; color: var(--muted); font-size: .87rem; }
.g-od1 .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-text); }
.g-od1 a { color: var(--ink); font-weight: 600; }

/* ---------- „Dla firm” ---------- */
.g-hero--firmy { grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 25rem); }
.g-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.g-tekst { padding: clamp(1.25rem, 3vw, 2rem); }
.g-tekst h2 { font-size: 1.35rem; }
.g-tekst p { margin: 0; color: var(--text); }
.g-wycena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); scroll-margin-top: 9rem; }
.g-wycena__tekst { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.g-wycena__tekst img { width: 9rem; border-radius: 50%; background: var(--mist); }
.g-wycena h2 { font-size: 1.6rem; }
.g-form { display: grid; gap: .9rem; padding: 1.25rem; border-radius: var(--r); background: var(--mist); }
.g-form label { display: grid; gap: .35rem; color: var(--ink); font-weight: 700; font-size: .9rem; }
.g-form__wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* ---------- „Zaprojektuj sam” ---------- */
.g-kreator-start { padding: clamp(1.25rem, 3vw, 2.25rem); }
.g-kreator-start__head { max-width: 50rem; margin-bottom: 1.5rem; }
.g-kreator-start__head h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.g-kreator-start__head p { color: var(--muted); font-size: 1.05rem; }
.g-tryby-opis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.g-tryby-opis > div { padding: 1.25rem; border-radius: var(--r); background: var(--mist); }
.g-tryby-opis h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; }
.g-tryby-opis h2 .icon { color: var(--blue-text); }
.g-tryby-opis p { color: var(--text); }
.g-demo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.g-demo__obraz { overflow: hidden; border-radius: var(--r); background: var(--foto); }
.g-demo__obraz svg { width: 100%; }
.g-demo__pola input { margin-bottom: .9rem; }
.g-demo__pola .g-fonty { margin-bottom: 1rem; }
.g-wybor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.g-wybor__el { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; color: var(--ink); text-decoration: none; }
.g-wybor__el:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.g-wybor__obraz { display: block; overflow: hidden; border-radius: var(--r-s); background: var(--foto); }
.g-wybor__obraz svg { width: 100%; }
.g-wybor__tekst { display: grid; gap: .25rem; }
.g-wybor__tekst > span { color: var(--muted); font-size: .88rem; }
.g-wybor__tekst .g-wybor__cena { color: var(--ink); font-weight: 700; }

/* ---------- Koszyk ---------- */
.g-koszyk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 1.25rem; align-items: start; }
.g-koszyk__lista { padding: .5rem 1.5rem 1.25rem; }
.g-koszyk__lista > ul { margin: 0; padding: 0; list-style: none; }
.g-linia { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.g-linia__obraz { display: block; align-self: start; padding: .35rem; border-radius: var(--r); background: var(--foto); }
.g-linia__obraz svg { width: 100%; display: block; }
.g-linia__oferta { margin: 0 0 .35rem; }
.g-linia h2 { margin: 0 0 .35rem; font-size: 1rem; }
.g-linia h2 a { color: var(--ink); text-decoration: none; }
.g-linia h2 a:hover { color: var(--pink-text); }
.g-linia__meta { margin: 0 0 .6rem; padding: 0; list-style: none; color: var(--text); font-size: .85rem; line-height: 1.55; }
.g-linia__meta b { color: var(--ink); font-weight: 600; }
.g-linia__kolory { display: grid; gap: .45rem; }
.g-linia__kolor { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; }
.g-linia__kolor .g-ilosc { height: 2.4rem; margin-left: .25rem; }
.g-linia__akcje { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; font-size: .88rem; }
.g-linia__akcje a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.g-linia__akcje .icon { width: 1rem; height: 1rem; }
.g-linia__cena { display: grid; align-content: start; justify-items: end; gap: .1rem; text-align: right; }
.g-linia__cena strong { color: var(--ink); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.g-linia__cena small { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.g-koszyk__porada { display: flex; gap: .4rem; margin-top: 1rem; }
.g-sumy { margin: 0; }
.g-sumy div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.g-sumy dt small { display: block; color: var(--muted); font-size: .78rem; }
.g-sumy dd { margin: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.g-sumy__razem { margin-top: .5rem; padding-top: .8rem !important; border-top: 1px solid var(--line); font-size: 1.2rem; }
.g-sumy__razem dt, .g-sumy__razem dd { font-weight: 700; color: var(--ink); }
.g-podsum--koszyk .g-btn { margin-top: 1rem; }
.g-podsum--koszyk { position: sticky; top: 9.5rem; }
.g-pusty-koszyk { display: grid; justify-items: center; gap: .5rem; padding: clamp(2rem, 6vw, 4rem) 1.5rem; text-align: center; }
.g-pusty-koszyk img { width: 9rem; }
.g-pusty-koszyk p { max-width: 36rem; color: var(--muted); }


/* ---------- Komunikaty, okna, stopka ---------- */
.g-komunikaty { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .6rem; width: min(25rem, calc(100vw - 2rem)); pointer-events: none; }
.g-komunikat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem; padding: .85rem .6rem .85rem .9rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 16px 40px rgba(7, 30, 61, .16); font-size: .9rem; pointer-events: auto; opacity: 0; transform: translateY(.75rem); transition: opacity .25s ease, transform .3s ease; }
.g-komunikat.is-in { opacity: 1; transform: none; }
.g-komunikat__ik { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ok); color: #fff; }
.g-komunikat__ik .icon { width: 1rem; height: 1rem; }
.g-komunikat__tresc { display: grid; gap: .3rem; color: var(--ink); }
.g-komunikat__tresc > span { color: var(--muted); }
.g-komunikat__akcje { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .3rem; }
.g-okno { width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: var(--r-l); background: #fff; color: var(--text); box-shadow: 0 24px 64px rgba(7, 30, 61, .3); text-align: center; }
.g-okno::backdrop { background: rgba(7, 30, 61, .45); }
.g-okno__fig { width: 5.5rem; margin: 0 auto .5rem; }
.g-okno__tytul { font-size: 1.2rem; }
.g-okno__tekst { margin-bottom: 1.25rem; }
.g-okno__tekst p { margin: 0 0 .6rem; }
.g-okno__akcje { display: grid; gap: .5rem; }
.g-okno__x { position: absolute; top: .5rem; right: .5rem; }
.g-okno__podglad { margin: 0 auto .75rem; max-width: 18rem; padding: .5rem; border-radius: var(--r); background: var(--mist); }
.g-okno__lista { margin: 0 0 .6rem; padding: 0; list-style: none; color: var(--ink); font-weight: 700; }
.g-stopka { margin-top: 3rem; padding: 3rem 0 1.5rem; background: var(--ink); color: #c9d3e3; font-size: .92rem; }
.g-stopka__siatka { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.g-stopka img { width: 8.5rem; margin-bottom: 1rem; }
.g-stopka h2 { color: #fff; font-size: 1rem; }
.g-stopka ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.g-stopka a { color: #e4eaf3; text-decoration: none; }
.g-stopka a:hover { color: var(--blue); }
.g-stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; }
.g-stopka__dol p { margin: 0; }

/* ==========================================================================
   Tablet i telefon
   ========================================================================== */
@media (max-width: 1180px) {
	.g-top__linki { display: none; }
	.g-nav { display: none; }
	.g-header__in { flex-wrap: wrap; gap: .5rem 1rem; min-height: 0; padding-block: .6rem; }
	.g-logo { margin-right: auto; }
	.g-logo img { width: 7.5rem; }
	.g-szukaj { order: 3; flex-basis: 100%; max-width: none; }
	.g-szukaj input { min-height: 2.75rem; }
	.g-filtry, .g-galeria, .g-firma__boczna, .g-podsum--koszyk { top: 8.5rem; }
	.g-firma { grid-template-columns: minmax(0, 1fr); }
	.g-firma__boczna { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.g-firma__boczna .g-od1 { grid-column: 1 / -1; }
	.g-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.g-edytor__cialo { grid-template-columns: 4.75rem minmax(0, 1fr) 17rem; }
}
@media (max-width: 960px) {
	.g-hero, .g-hero--firmy { grid-template-columns: minmax(0, 1fr); }
	.g-hero__wizual--kalk { justify-content: stretch; }
	.g-hero__gifciak { left: 0; width: 6.5rem; }
	.g-wejscia, .g-dwa, .g-wycena, .g-tryby-opis, .g-demo, .g-wybor, .g-pytania, .g-proces__head { grid-template-columns: minmax(0, 1fr); }
	.g-katalog { grid-template-columns: minmax(0, 1fr); }
	.g-filtry { position: static; }
	.g-produkt, .g-firma__glowny { grid-template-columns: minmax(0, 1fr); }
	.g-galeria { position: static; }
	.g-koszyk { grid-template-columns: minmax(0, 1fr); }
	.g-podsum--koszyk { position: static; }
	.g-stopka__siatka { grid-template-columns: 1fr 1fr; }
	.g-edytor__cialo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
	.g-edytor__narzedzia { order: 2; flex-direction: row; justify-content: space-around; padding: .35rem; box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); }
	.g-edytor__narzedzia button { flex: 1; }
	.g-edytor__scena { order: 1; }
	.g-edytor__panel { order: 3; box-shadow: none; }
	.g-pasek-zakupu {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: space-between; align-items: center; gap: .75rem;
		padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(7, 30, 61, .12);
	}
	.g-pasek-zakupu > span { display: grid; }
	.g-pasek-zakupu strong { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
	.g-pasek-zakupu small { color: var(--muted); font-size: .78rem; }
	.g-pasek-zakupu .g-btn { flex: 1; max-width: 14rem; }
	body:has(.g-pasek-zakupu) .g-stopka { padding-bottom: 6rem; }
	body:has(.g-pasek-zakupu) .g-komunikaty { bottom: 5.5rem; }
}
@media (max-width: 640px) {
	body { font-size: 15px; }
	.g-top__fakty a { display: none; }
	.g-koszyk-btn__kwota { display: none; }
	.g-header__akcje { gap: .35rem; }
	.g-ikbtn--okragly { width: 2.5rem; height: 2.5rem; }
	.g-hero { padding: 1.25rem; }
	.g-hero__tytul { font-size: clamp(2.5rem, 10vw, 3.2rem); }
	.g-akcje .g-btn { flex: 1 1 100%; }
	.g-hero__gifciak { display: none; }
	.g-wejscie { grid-template-columns: minmax(0, 1fr) 5.5rem; padding: 1.25rem; }
	.g-wejscie img, .g-wejscie__svg { width: 5.5rem; }
	.g-wejscie strong { font-size: 1.2rem; }
	.g-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.g-karta__tresc { padding: .5rem .75rem .9rem; }
	.g-karta__tytul { font-size: .88rem; }
	.g-karta__cena { font-size: 1.1rem; }
	.g-plakietki { top: .5rem; left: .5rem; }
	.g-plakietka { font-size: .66rem; padding: .1rem .4rem; }
	.g-kafle { gap: .6rem; }
	.g-kroki { grid-template-columns: minmax(0, 1fr); }
	.g-firma__boczna { grid-template-columns: minmax(0, 1fr); }
	.g-progi { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.g-progi__kol--naglowek { display: none; }
	.g-progi__kol { border-bottom: 1px solid var(--line); }
	.g-linia { grid-template-columns: 5rem minmax(0, 1fr); gap: .9rem; }
	.g-linia__cena { grid-column: 2; justify-items: start; text-align: left; }
	.g-form__wiersz { grid-template-columns: minmax(0, 1fr); }
	.g-wycena__tekst { grid-template-columns: minmax(0, 1fr); }
	.g-wycena__tekst img { width: 6rem; }
	.g-stopka__siatka { grid-template-columns: minmax(0, 1fr); }
	.g-podsum__etykiety { display: none; }
	.g-edytor__bar { flex-wrap: wrap; }
	.g-edytor__tytul { order: 3; flex-basis: 100%; }
	.g-edytor__zapis { display: none; }
	.g-edytor__bar .g-btn--glowny { margin-left: auto; }
	.g-tryby { grid-template-columns: minmax(0, 1fr); }
	.g-zakres__opcja { grid-template-columns: auto minmax(0, 1fr); }
	.g-zakres__opcja em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ==========================================================================
   Zdjęcia i wizualizacje (grafiki z 9.10.2026)
   Strona jest biała, produkty stoją na bieli. Mnożenie kolorów łączy prawie
   białe tło wizualizacji z tłem strony, więc nie widać krawędzi obrazka.
   Podpis „Wizualizacja” jest tekstem HTML (zasada strategii: aranżacje
   podpisujemy), ale cichym — nie konkuruje z produktem.
   ========================================================================== */
.g-wizualizacja { position: relative; display: block; width: 100%; min-width: 0; }
.g-wizualizacja > img { display: block; width: 100%; height: auto; object-fit: contain; }
.g-wizualizacja > svg { width: 100%; }
.g-karta__media img, .g-karta__media svg, .g-galeria img, .g-galeria svg, .g-kafel__obraz img, .g-linia__obraz svg,
.g-linia__obraz img, .g-demo__obraz svg, .g-wybor__obraz img, .g-wybor__obraz svg, .g-zapisany svg { mix-blend-mode: multiply; }
.g-wizualizacja__etykieta { position: absolute; right: .5rem; bottom: .45rem; z-index: 2; padding: .05rem .35rem; border-radius: 4px; background: rgba(255, 255, 255, .7); color: #6b7689; font-size: .68rem; line-height: 1.4; pointer-events: none; }

/* ---------- Strona główna: produkty, podgląd napisu ---------- */

.g-sekcja--produkty { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.g-siatka--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }


/* Numerowane kroki na karcie produktu: 1 Kolor, 2 Liczba sztuk… */
.g-krok::before { counter-increment: krok; content: counter(krok); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; vertical-align: .1em; }
.g-projekt__head h2.g-krok::before { vertical-align: .15em; }

/* Kafle, karty, galeria */
.g-kafel__obraz { position: relative; }
.g-kafel__obraz > .g-wizualizacja { position: absolute; inset: 0; }
.g-kafel__obraz .g-wizualizacja > img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.g-karta__media .g-wizualizacja > img { width: 100%; height: 100%; }
.g-galeria__glowna > .g-wizualizacja > img { max-height: min(38rem, 72vh); }
.g-galeria__miniatury .g-wizualizacja, .g-galeria__miniatury .g-wizualizacja > img { width: 100%; height: 100%; }
.g-galeria__miniatury .g-wizualizacja__etykieta, .g-linia__obraz .g-wizualizacja__etykieta, .g-wybor__obraz .g-wizualizacja__etykieta, .g-zapisany .g-wizualizacja__etykieta { display: none; }
.g-kolory-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.g-galeria__glowna .g-kolory-foto img { max-height: 19rem; }
.g-galeria__miniatury .g-kolory-foto { height: 100%; }
.g-galeria__miniatury .g-kolory-foto > .g-wizualizacja { min-height: 0; }

@media (max-width: 1180px) {
	.g-siatka, .g-siatka--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.g-filtry { padding: 0; border-right: 0; }
}
@media (max-width: 640px) {
	.g-sekcja--produkty .g-sekcja__head > .g-wiecej { display: none; }
	.g-zakladki--linia [role="tab"] { margin-right: 1rem; font-size: 1.05rem; }
	.g-siatka, .g-siatka--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.g-karta__media { margin: .5rem .5rem 0; }
	.g-atuty { gap: .4rem 1rem; margin-top: 1.25rem; font-size: .92rem; }
	.g-ramka-firma { grid-template-columns: auto minmax(0, 1fr); }
	.g-ramka-firma .g-btn { grid-column: 1 / -1; }
	.g-kafel__tytul { font-size: .92rem; }
}
.g-hero--firmy { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem); }
.g-hero--firmy .g-hero__tytul--sredni { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); }
.g-hero--firmy .g-kalk { padding: 1rem 1.15rem; }

/* ==========================================================================
   Biel i układ jak OpenGift (10.10.2026, wieczór)
   Właściciel: „więcej bieli, wzoruj się na OpenGift, ale bez szarego tła”.
   Strona jest biała; panele i karty mają cienką ramkę zamiast szarego tła.
   Granat tylko w cienkim pasku na górze i w stopce, błękit — przyciski,
   ikony i drobne akcenty. Układ jak w OpenGift: szeroki baner, rząd kart
   kategorii, zakładki z produktami, dwa panele z wyborem drogi.
   ========================================================================== */

/* Cienki granatowy pasek na górze, białe menu pod wyszukiwarką */
/* W granatowym pasku napisy białe (także „Darmowa dostawa”), ikony dostawy i telefonu różowe,
   a linki po najechaniu różowe — właściciel 11.10.2026. Jaśniejszy róż marki #EC2A8E, bo na
   granacie ma 4,2 : 1 (#DB1F84 tylko 3,6 : 1). */
.g-top { background: var(--ink); color: #fff; }
.g-top a { color: #fff; transition: color .15s ease; }
.g-top a:hover { color: var(--pink); }
.g-top .icon { color: var(--pink); }
.g-nav { position: relative; background: #fff; border-top: 1px solid var(--line); }
/* Pozycje menu: granatowy tekst i granatowe ikony. Bieżący i otwarty dział — kreska
   bez podświetlenia tła, na samej dolnej linii nagłówka (zachodzi na nią o 1 px, więc nie
   ma białej przerwy). Po najechaniu tylko kolor napisu. Właściciel 11.10.2026. */
.g-nav__lista > li > a, .g-nav__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; margin: 0 0 -1px; padding: 0 .85rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer; }
/* Po najechaniu, w bieżącym i w otwartym dziale napis, ikona (razem z akcentem) i strzałka
   są różowe, w tym samym różu co kreska i przyciski #DB1F84 (właściciel 11.10.2026: „zamiast
   niebieskiego to różowy”; biały/różowy 4,62 : 1). */
.g-nav__lista > li > a:hover, .g-nav__btn:hover { background: none; color: var(--pink-btn); }
.g-nav__lista > li > [aria-current], .g-nav__btn[aria-expanded="true"] { border-bottom-color: var(--pink-btn); background: none; color: var(--pink-btn); }
.g-nav__lista > li > a:hover .ik-f, .g-nav__btn:hover .ik-f, .g-nav__lista > li > [aria-current] .ik-f, .g-nav__btn[aria-expanded="true"] .ik-f { fill: currentColor; stroke: currentColor; }
.g-nav__lista > li > a:hover .ik-a, .g-nav__btn:hover .ik-a, .g-nav__lista > li > [aria-current] .ik-a, .g-nav__btn[aria-expanded="true"] .ik-a { stroke: currentColor; }
.g-nav__lista .icon { width: 1.3rem; height: 1.3rem; color: inherit; stroke-width: 1.4; transition: color .15s ease; }
.g-nav__chev { color: inherit !important; stroke-width: 1.8 !important; transition: transform .15s ease; }
.g-nav__lista > li > a, .g-nav__btn { transition: color .15s ease, border-color .15s ease; }
.g-nav__btn[aria-expanded="true"] .g-nav__chev { transform: rotate(-90deg); }

/* Mega menu Gifciaka: pływająca karta z zaokrągleniem pod menu (strona dookoła
   przygaszona granatem), pozycje w wierszach z okrągłą grafiką i opisem, grupy
   linków, karta z Gifciakiem po prawej, na dole „Zobacz wszystkie” i fakty */
.g-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding-top: .6rem; }
.g-mega[hidden] { display: none; }
.g-mega__karta { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; max-height: calc(100vh - 10rem); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; box-shadow: 0 24px 60px rgba(7, 30, 61, .2); }
.g-mega__glowna { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem 1.5rem 0; }
.g-mega__tresc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem 2.5rem; flex: 1; }
.g-mega__karta--bez-grup .g-mega__tresc { grid-template-columns: minmax(0, 1fr); }
.g-mega__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .25rem .75rem; margin: 0; padding: 0; list-style: none; }
.g-mega__karta--bez-grup .g-mega__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Pozycja mega menu bez podświetlenia tła: po najechaniu pojawia się wokół niej cienka
   przerywana różowa ramka, a okrąg kółka robi się różowy (właściciel 11.10.2026). Ramka jest
   cały czas, tylko przezroczysta, więc nic nie przeskakuje. */
.g-mega__poz { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: .55rem .65rem; border: 1.5px dashed transparent; border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.g-mega__poz:hover { border-color: var(--pink-btn); }
/* Okrągłe ikony w menu: biały środek i cienki błękitny przerywany okrąg. Okrąg rysuje CSS
   (grafika „kółka” z grafiki-chatgpt.md p. 12 ma sam przedmiot), żeby po najechaniu na pozycję
   w mega menu albo w menu bocznym mógł zmienić kolor na różowy. */
/* Dwukolorowe ikony: akcent w jasnym błękicie marki (ik-f — wypełniony, ik-a — sama kreska) */
.icon .ik-f { fill: var(--blue); stroke: var(--blue); }
.icon .ik-a { stroke: var(--blue); }
.g-kolko { --k: 3.75rem; display: grid; place-items: center; flex: none; width: var(--k); height: var(--k); overflow: hidden; border: 1.5px dashed var(--blue); border-radius: 50%; background: #fff; transition: border-color .15s ease; }
.g-kolko img { width: 100%; height: 100%; object-fit: contain; }
.g-mega__poz:hover .g-kolko, .g-mega__poz:focus-visible .g-kolko, .g-szuflada .g-szuflada__pod a:hover .g-kolko, .g-szuflada .g-szuflada__pod a:focus-visible .g-kolko { border-color: var(--pink-btn); }
.g-kolko img.g-zapas { transform: scale(1.1); }
.g-kolko img.g-zapas-foto { width: 62%; height: 62%; transform: none; }
.g-kolko .icon { width: 40%; height: 40%; color: var(--ink); }
.g-mega__poz strong { display: block; font-size: .98rem; font-weight: 700; line-height: 1.3; }
.g-mega__poz small { display: block; margin-top: .1rem; color: var(--muted); font-size: .85rem; line-height: 1.35; }
.g-mega__poz:hover strong { color: var(--pink-text); }
.g-mega__grupy { columns: 2; column-gap: 2rem; padding: .55rem 0 0; }
.g-mega__grupa { break-inside: avoid; margin-bottom: 1rem; }
.g-mega__grupa :is(h2, .g-mega__grupa-tytul) { margin: 0 0 .25rem; line-height: 1.3; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.g-mega__grupa ul { margin: 0; padding: 0; list-style: none; }
.g-mega__grupa a { display: block; padding: .25rem 0; color: var(--ink); font-size: .93rem; font-weight: 500; text-decoration: none; }
.g-mega__grupa .g-plakietka { margin-left: .4rem; vertical-align: .1em; }
.g-mega__grupa a:hover { color: var(--pink-text); }
.g-mega__stopka { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1rem; padding: .85rem 0 1rem; border-top: 1px solid var(--line); }
.g-mega__stopka .g-wiecej { margin-right: auto; }
.g-mega__stopka p { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: .85rem; }
.g-mega__stopka p .icon { width: 1rem; height: 1rem; color: var(--blue-text); }
.g-mega__polecenie { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.5rem; }
.g-mega__polecenie--roz { background: var(--pink-soft); }
.g-mega__polecenie--blekit { background: var(--blue-soft); }
.g-mega__polecenie img { width: 6.5rem; height: 6.5rem; object-fit: contain; margin-bottom: .25rem; }
.g-mega__polecenie :is(h2, .g-mega__polecenie-tytul) { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.g-mega__polecenie p { margin: 0 0 .5rem; color: var(--text); font-size: .9rem; line-height: 1.45; }
.g-zaslona { position: fixed; inset: 0; z-index: 35; background: rgba(7, 30, 61, .3); }
.g-zaslona[hidden] { display: none; }
@media (max-width: 1240px) {
	.g-mega__karta { grid-template-columns: minmax(0, 1fr) 14rem; }
	.g-mega__tresc { grid-template-columns: minmax(0, 1fr); }
	.g-mega__grupy { columns: 3; }
}

/* Ikony obok granatowego tekstu też granatowe */
.g-zakladki--linia .icon, .g-atuty .icon, .g-kat__obraz--ikona .icon { color: var(--ink); }

/* Strona główna: jeden szeroki baner */
.g-glowny { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; }
.g-glowny__tekst { padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.5rem, 3.5vw, 3.5rem); }
.g-glowny__tytul { margin: 0 0 .3em; font-size: clamp(2.4rem, 1.4rem + 2.2vw, 3.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.g-glowny__lead { max-width: 36rem; margin-bottom: 1.25rem; color: var(--muted); font-size: 1.05rem; }
.g-glowny .g-akcje { margin: 0; }
.g-glowny .g-atuty { gap: .5rem 1.25rem; margin-top: 1.25rem; font-size: .92rem; }
/* Baner: Gifciak wskazuje nasz kalendarz „Zaprojektuj sam” z motywem „Tu Twój projekt” (zdjęcie produktu) */
.g-glowny__scena { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; height: clamp(17rem, 21vw, 21rem); padding: 1rem 1.5rem 0 0; }
.g-glowny__gifciak { position: relative; z-index: 1; flex: none; width: auto; height: 72%; margin-right: -2.5rem; }
.g-glowny__produkt { display: block; height: 100%; }
.g-glowny__produkt .g-okladka, .g-glowny__produkt > img { height: 100%; }

/* Popularne kategorie: białe karty z ramką w jednym przewijanym rzędzie */
.g-kategorie { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.g-kategorie .g-sekcja__head { margin-bottom: .75rem; }
.g-karuzela { position: relative; }
.g-karuzela__lista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * .75rem) / 8); gap: .75rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.g-karuzela__lista::-webkit-scrollbar { display: none; }
.g-karuzela__lista > li { scroll-snap-align: start; }
.g-kat { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: .35rem; height: 100%; padding: .75rem .6rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.g-kat:hover { border-color: var(--line-2); box-shadow: var(--cien); }
.g-kat__nazwa { min-height: 2.5em; }
.g-kat__obraz { display: block; align-self: end; width: 100%; max-width: 5.5rem; aspect-ratio: 1; }
.g-kat__obraz img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.2); transition: transform .2s ease; }
.g-kat:hover .g-kat__obraz img { transform: scale(1.27); }
.g-kat__obraz--ikona { display: grid; place-items: center; }
.g-kat__obraz--ikona .icon { width: 2.25rem; height: 2.25rem; color: var(--blue-text); }
.g-karuzela__btn { position: absolute; top: 50%; right: -.9rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--cien); transform: translateY(-50%); cursor: pointer; }
.g-karuzela__btn:hover { border-color: var(--ink); }
.g-karuzela__btn[hidden] { display: none; }
.g-karuzela__btn .icon { width: 1.1rem; height: 1.1rem; }
.g-karuzela__btn--wstecz { right: auto; left: -.9rem; }
.g-karuzela__btn--wstecz .icon { transform: rotate(180deg); }

/* Dwie drogi: prezent albo zamówienie z logo */
.g-drogi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.g-droga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow: hidden; color: var(--ink); text-decoration: none; }
.g-droga__tekst { display: grid; justify-items: start; gap: .4rem; padding: 1.5rem 1.75rem; }
.g-droga strong { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.2; }
.g-droga__tekst > span:not(.g-btn) { color: var(--muted); }
.g-droga .g-btn { margin-top: .6rem; }
.g-droga > .g-wizualizacja { align-self: stretch; height: 100%; min-height: 12rem; }
.g-droga > .g-wizualizacja > img { width: 100%; height: 100%; object-fit: cover; }

/* Panele i ramki: biel z cienką linią zamiast kolorowego albo szarego tła */
.g-filtry__firma, .g-ramka-firma { border: 1px solid var(--line); background: #fff; }
.g-ramka-firma__ik { border: 1px solid var(--line); }
.g-ile, .g-form, .g-wynik, .g-tryby-opis > div, .g-info, .g-uwaga, .g-projekt__zapis { border: 1px solid var(--line); background: #fff; }
.g-limit, .g-info--blekit { border: 1px solid var(--blue); background: #fff; }
.g-szuflada__stopka { border-top: 1px solid var(--line); background: #fff; }

/* Etapy zamówienia nad koszykiem */
.g-koszyk__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-bottom: 1.25rem; }
.g-koszyk__head .g-h1 { margin: 0; }
.g-etapy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; font-weight: 600; }
.g-etapy li { display: flex; align-items: center; gap: .5rem; }
.g-etapy li + li::before { content: ""; width: 1.75rem; height: 2px; margin-right: .25rem; border-radius: 2px; background: var(--line); }
.g-etapy span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--muted); font-size: .82rem; font-weight: 700; }
.g-etapy li[aria-current] { color: var(--ink); }
.g-etapy li[aria-current] span { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Szuflada na telefonie: podkategorie pod każdym działem */
.g-szuflada .g-szuflada__pod { margin: -.35rem 0 .6rem; padding: 0 0 0 2.25rem; }
.g-szuflada .g-szuflada__pod li { border: 0; }
.g-szuflada .g-szuflada__pod a { min-height: 2.4rem; color: var(--text); font-size: .95rem; font-weight: 500; }

@media (min-width: 1700px) {
	.g-karuzela__lista { grid-auto-columns: calc((100% - 9 * .75rem) / 10); }
}
@media (max-width: 1180px) {
	.g-karuzela__lista { grid-auto-columns: calc((100% - 5 * .75rem) / 6); }
}
@media (max-width: 960px) {
	.g-glowny { grid-template-columns: minmax(0, 1fr) 40%; }
	.g-karuzela__lista { grid-auto-columns: calc((100% - 3 * .75rem) / 4); }
	.g-drogi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	/* Telefon jak w OpenGift: baner bez zdjęcia, wyśrodkowany; kategorie przewijane palcem */
	.g-glowny { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.g-glowny > .g-glowny__scena { display: none; }
	.g-glowny__tekst { padding: 1.25rem 1rem; }
	.g-glowny__tytul { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
	.g-glowny__lead { margin-inline: auto; margin-bottom: 1rem; font-size: .95rem; }
	.g-glowny .g-akcje { justify-content: center; gap: .5rem; }
	.g-glowny .g-akcje .g-btn { flex: 1 1 auto; min-height: 2.9rem; padding-inline: .75rem; font-size: .92rem; }
	.g-glowny .g-atuty { justify-content: center; gap: .35rem 1rem; margin-top: 1rem; font-size: .85rem; }
	.g-karuzela__lista { grid-auto-columns: 8.25rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	.g-karuzela__btn { display: none; }
	.g-kat { font-size: .82rem; }
	.g-kategorie .g-sekcja__head > .g-wiecej { display: none; }
	.g-zakladki--linia { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.g-zakladki--linia::-webkit-scrollbar { display: none; }
	.g-zakladki--linia [role="tab"] { flex: none; }
	.g-zakladki--linia [role="tab"] .icon { display: none; }
	.g-droga { grid-template-columns: minmax(0, 1fr) 36%; }
	.g-droga__tekst { padding: 1rem; }
	.g-droga > .g-wizualizacja { min-height: 9rem; }
	.g-etapy { font-size: .85rem; }
	.g-etapy li + li::before { width: .9rem; }
}

/* ==========================================================================
   Granat, błękit i róż (11.10.2026)
   Nowa kolorystyka marki: granat #071E3D, błękit #65C6ED (C w logo, kokardka
   i brwi Gifciaka), róż z języka Gifciaka (przyciski i plakietki). Właściciel:
   „możesz używać granatu, niebieskiego oraz różu, żeby było wesoło”.
   Biel zostaje bazą; kolor w akcentach i w dwóch panelach dróg.
   Róż #EC2A8E tylko w dużych napisach i ozdobach (3,97 : 1 na bieli),
   przyciski i plakietki — #DB1F84 z białym napisem (4,6 : 1), drobny różowy
   tekst #C2186B (5,77 : 1).
   ========================================================================== */

/* Hasło: słowo „znak” różowe w błękitnej ramce zaznaczenia jak w kreatorze */
.g-glowny__tytul .g-znak { color: var(--pink); }
.g-akcent { color: var(--pink-text); }

/* Przyciski i wyróżniki (plakietki) różowe z białym napisem — właściciel 11.10.2026:
   „chciałbym, aby przyciski były różowe na stronie, i z białym tekstem, wyróżniki też”.
   Drugi przycisk obok głównego: biały z różową ramką i różowym napisem. */
.g-plakietka--roz { border-color: var(--pink-btn); background: var(--pink-btn); color: #fff; }
/* Etykiety oferty dla firm (z logo, nakład) w podstawowym błękicie marki z białym napisem, jak
   różowe — decyzja właściciela 12.10.2026 (świadomie mimo kontrastu 1,93 : 1, zapis w kolory.md) */
.g-plakietka--firma { border-color: var(--blue); background: var(--blue); color: #fff; }

/* Pełny różowy przycisk po najechaniu: biały z różową ramką i różowym napisem
   (właściciel 11.10.2026). Tylko przy myszy — na telefonie stuknięcie nie zostawia
   przycisku w stanie „po najechaniu”. */
@media (hover: hover) {
	.g-btn--glowny:not(:disabled):hover { border-color: var(--pink-btn); background: #fff; color: var(--pink-text); }
	.g-szukaj button:hover { background: #fff; color: var(--pink-text); box-shadow: inset 0 0 0 1.5px var(--pink-btn); }
}

/* Licznik koszyka różowy — widać go od razu */
.g-licznik { background: var(--pink-btn); color: #fff; }

/* Kroki „Tak zamówisz”: różowe kółka z granatową cyfrą */
.g-kroki__nr { border-color: var(--pink); }

/* Karty kategorii i kafelki menu: różowa ramka po wskazaniu */
.g-kat:hover { border-color: var(--pink); }

/* Dwie drogi: prezenty na jasnym różu, firmy na jasnym błękicie */
.g-droga--roz { border-color: transparent; background: var(--pink-soft); }
.g-droga--blekit { border-color: transparent; background: var(--blue-soft); }
.g-droga--roz strong { color: var(--pink-text); }
.g-droga--blekit strong { color: var(--blue-text); }

/* Pasek makiety: żółta notatka, żeby nie mylił się z różem marki */
.g-pasek-makiety { border-bottom-color: #c9a227; background: #fff8dc; color: #5c4400; }
.g-pasek-makiety .g-link-btn { color: #5c4400; }
.g-przyklad { border-color: #c9a227; background: #fff8dc; color: #5c4400; }


/* ==========================================================================
   Karta produktu — czytelnie dla klienta i dla firmy (11.10.2026)
   Właściciel: „mało czytelna i intuicyjna zarówno dla klienta detalicznego,
   jak i firmowego”. Jeden układ dla obu ofert, jak w OpenGift: galeria |
   wybór krok po kroku | stałe podsumowanie. Kroki to nagłówki z numerem
   i cienką linią, bez ramek w ramkach; ilość zmienia się w jednym miejscu,
   podsumowanie tylko pokazuje wynik.
   ========================================================================== */
.g-kp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(18.5rem, 21rem); gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }
.g-kp__podsum { position: sticky; top: 9.5rem; display: grid; gap: 1rem; }
.g-kp__glowa { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.g-kp__plakietki { display: flex; gap: .4rem; margin: 0 0 .6rem; }
.g-kp .g-produkt__tytul { margin: 0 0 .6rem; font-size: clamp(1.45rem, 1.15rem + .8vw, 1.95rem); line-height: 1.2; }
.g-kp__cena { margin: 0; color: var(--muted); }
.g-kp__cena strong { margin-right: .35rem; color: var(--ink); font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; }
.g-kp__wcenie { margin: .3rem 0 0; color: var(--muted); font-size: .92rem; }

/* Kroki: numer w błękitnym kółku, cienka linia między krokami */
.g-kp__kroki { counter-reset: krok; }
.g-kp__krok { min-width: 0; margin: 0; padding: 1.25rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.g-kp__kroki > :last-child, .g-kp__kroki > :last-child > .g-kp__krok { border-bottom: 0; }
.g-kp__krok-tytul { display: flex; align-items: center; margin: 0 0 .85rem; padding: 0; color: var(--ink); font-size: 1.1rem; font-weight: 700; }
.g-kp__krok-tytul > span { margin-left: .35rem; color: var(--muted); font-weight: 500; }
.g-kp .g-krok::before { width: 1.75rem; height: 1.75rem; margin-right: .6rem; background: var(--blue); color: var(--ink); font-size: .85rem; vertical-align: 0; }
.g-kp .g-projekt__head { margin-bottom: .85rem; }
.g-kp .g-projekt__head .g-kp__krok-tytul { margin: 0; }
/* legenda pola wyboru płynie jak zwykły nagłówek (bez przerwy pod spodem) */
.g-kp legend.g-kp__krok-tytul { float: left; width: 100%; }
.g-kp .g-zakres__opcje { display: grid; clear: both; gap: .5rem; }
.g-kp .g-zakres__opcja { margin: 0; padding: .55rem .85rem; border-width: 1px; }
.g-kp .g-zakres__opcja:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--blue-soft); }
.g-kp .g-ile__wiersz { gap: .5rem 1rem; }
.g-kp .g-progi-box { margin: 1rem 0 0; }
.g-kp__podtytul { margin: 1rem 0 .5rem; color: var(--text); font-size: .92rem; font-weight: 600; }
.g-kp .g-link-plus { margin: .35rem 0 0; }
.g-kp .g-stan-mag { margin-top: .6rem; }

/* Nakład firmy w kroku: kolor | ilość | wartość | usuń */
.g-kp .g-wiersz { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "kolor ilosc wartosc usun"; padding: .55rem 0; }
.g-kp .g-wiersz:first-child { border-top: 0; }
.g-kp .g-wiersz__wartosc { min-width: 6.5rem; }

/* Pełny kreator: jeden link na końcu kroku zamiast zakładek */
.g-kp__kreator { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r); background: var(--blue-soft); color: var(--ink); text-decoration: none; }
.g-kp__kreator:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.g-kp__kreator strong { display: block; font-size: .95rem; }
.g-kp__kreator small { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.g-kp__kreator > .icon { width: 1.3rem; height: 1.3rem; color: var(--blue-text); }

/* Podsumowanie: tylko wynik wyboru, cena i przycisk */
.g-kp .g-podsum { padding: 1.25rem; }
.g-kp .g-podsum__head { margin-bottom: .5rem; }
.g-podsum__kolory { display: grid; gap: .45rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .9rem; }
.g-podsum__kolory li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.g-podsum__kolory strong { color: var(--ink); }
.g-kp .g-podsum__dl div { grid-template-columns: 5.5rem minmax(0, 1fr); }
.g-kp .g-info-zakupu { margin: 1rem 0 0; font-size: .85rem; }
.g-kp .g-ramka-firma { grid-template-columns: auto minmax(0, 1fr); margin: 0; padding: 1rem; }
.g-kp .g-ramka-firma .g-btn { grid-column: 1 / -1; justify-self: start; }
.g-kp .g-ramka-firma h2 { font-size: 1rem; }
.g-kp .g-ramka-firma p { font-size: .87rem; }

/* Opis i specyfikacja obok siebie, pytania pod nimi — bez zakładek */
.g-kp-opis { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.g-kp-opis > section { padding: 1.5rem; }
.g-kp-opis h2 { margin: 0 0 .75rem; font-size: 1.2rem; }
.g-kp-opis p { color: var(--text); }
.g-kp-opis__faq { grid-column: 1 / -1; }

@media (max-width: 1240px) {
	.g-kp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.g-kp__podsum { grid-column: 2; position: static; }
}
@media (max-width: 960px) {
	.g-kp { grid-template-columns: minmax(0, 1fr); }
	.g-kp__podsum { grid-column: auto; }
	.g-kp-opis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.g-kp .g-wiersz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kolor usun" "ilosc wartosc"; }
	.g-kp-opis > section { padding: 1.1rem; }
}


/* ==========================================================================
   Menu boczne (hamburger) także na komputerze — 11.10.2026
   Właściciel: „dodaj po lewej stronie dodatkowo wysuwane menu … również na
   dużych ekranach, co ułatwi poszukiwania”. Przycisk „Menu” po lewej od logo
   na każdym ekranie; panel wysuwa się z lewej: działy, podkategorie z kółkami
   (jak w mega menu), „wszystkie” w każdym dziale, pomoc i kontakt.
   Potem: „trochę więcej przestrzeni … za mało oddechu” — wyższe wiersze,
   większe odstępy między działami i szerszy panel.
   ========================================================================== */
.g-ikbtn.g-header__menu { display: inline-flex; gap: .45rem; width: auto; height: 2.75rem; padding: 0 1rem 0 .8rem; border: 1px solid var(--line-2); border-radius: 99px; background: #fff; font: inherit; font-size: .95rem; font-weight: 700; }
.g-ikbtn.g-header__menu:hover, .g-ikbtn.g-header__menu[aria-expanded="true"] { border-color: var(--ink); background: var(--blue-soft); }
.g-header__menu .icon { width: 1.25rem; height: 1.25rem; }
.g-szuflada__panel { width: min(26rem, 90vw); box-shadow: 0 0 40px rgba(7, 30, 61, .25); }
.g-szuflada:not([hidden]) { animation: g-zaciemnij .2s ease-out; }
.g-szuflada:not([hidden]) .g-szuflada__panel { animation: g-wysun .22s ease-out; }
@keyframes g-wysun { from { transform: translateX(-100%); } }
@keyframes g-zaciemnij { from { background-color: rgba(7, 30, 61, 0); } }
.g-szuflada .g-szuflada__head { padding: 1rem 1rem 1rem 1.5rem; }
.g-szuflada > .g-szuflada__panel > ul { padding: .5rem 1.5rem 1rem; }
.g-szuflada > .g-szuflada__panel > ul > li { padding-bottom: 1rem; }
.g-szuflada > .g-szuflada__panel > ul > li + li { padding-top: .25rem; }
.g-szuflada > .g-szuflada__panel > ul > li > a { min-height: 3.75rem; font-size: 1.08rem; }
.g-szuflada > .g-szuflada__panel > ul > li > a > .icon:first-child { width: 1.4rem; height: 1.4rem; stroke-width: 1.4; }
.g-szuflada li a:hover { color: var(--pink-text); }
.g-szuflada .g-szuflada__pod { display: grid; gap: .4rem; margin: 0; padding: 0; }
.g-szuflada .g-szuflada__pod a { gap: 1rem; min-height: 3.25rem; font-size: 1rem; line-height: 1.3; }
.g-szuflada .g-kolko { --k: 2.75rem; }
.g-szuflada .g-szuflada__wszystkie { margin-top: .35rem; }
.g-szuflada .g-szuflada__wszystkie a { gap: .3rem; min-height: 2.75rem; color: var(--blue-text); font-weight: 700; }
.g-szuflada .g-szuflada__wszystkie a:hover { color: var(--pink-text); }
.g-szuflada .g-szuflada__wszystkie a .icon { width: 1rem; height: 1rem; }
.g-szuflada__pomoc { padding: 1.25rem 1.5rem 1.5rem; }
.g-szuflada__pomoc h2 { margin: 0 0 .5rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.g-szuflada .g-szuflada__pomoc ul { display: grid; gap: .25rem; padding: 0; }
.g-szuflada .g-szuflada__pomoc li { border: 0; }
.g-szuflada .g-szuflada__pomoc a { min-height: 2.75rem; color: var(--text); font-size: 1rem; font-weight: 500; }
.g-szuflada .g-szuflada__stopka { gap: 1rem; padding: 1.5rem; }
@media (max-width: 1180px) {
	/* Na tablecie i telefonie sama ikona, jak dotąd (napis „Menu” zostaje dla czytników ekranu) */
	.g-ikbtn.g-header__menu { display: inline-grid; width: 2.5rem; height: 2.5rem; margin-left: -.5rem; padding: 0; border: 0; border-radius: var(--r-s); background: none; }
	.g-header__menu-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ==========================================================================
   Zakładki i menu boczne w różu jak menu główne — 11.10.2026
   Właściciel: „zakładki też na różowo, też ikonki … ładniejsze i lżejsze, to samo
   w wysuwanym menu”. Wybrana zakładka: różowy napis, ikona i kreska #DB1F84;
   po najechaniu tylko kolor. Ikony cienkie (1,4), granatowe z jasnobłękitnym
   akcentem; w podświetleniu cała ikona różowa. Panele „Prezenty” i „Gadżety
   z logo” bez ramki i cienia po najechaniu (właściciel tego samego dnia).
   ========================================================================== */
.g-zakladki [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--pink-btn); }
.g-zakladki--linia [role="tab"] { transition: color .15s ease; }
.g-zakladki--linia [role="tab"]:hover, .g-zakladki--linia [role="tab"][aria-selected="true"] { color: var(--pink-btn); }
.g-zakladki--linia [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--pink-btn); }
.g-zakladki--linia [role="tab"] .icon { width: 1.3rem; height: 1.3rem; color: var(--ink); stroke-width: 1.4; }
.g-zakladki--linia [role="tab"]:hover .icon, .g-zakladki--linia [role="tab"][aria-selected="true"] .icon { color: var(--pink-btn); }
.g-zakladki--linia [role="tab"]:hover .ik-f, .g-zakladki--linia [role="tab"][aria-selected="true"] .ik-f { fill: currentColor; stroke: currentColor; }
.g-zakladki--linia [role="tab"]:hover .ik-a, .g-zakladki--linia [role="tab"][aria-selected="true"] .ik-a { stroke: currentColor; }

.g-szuflada > .g-szuflada__panel > ul > li > a { transition: color .15s ease; }
.g-szuflada > .g-szuflada__panel > ul > li > a > .icon:first-child { color: var(--ink); }
.g-szuflada li a[aria-current] { text-decoration: none; }
.g-szuflada li a:hover, .g-szuflada li a[aria-current], .g-szuflada .g-szuflada__wszystkie a:hover, .g-szuflada__stopka a:hover { color: var(--pink-btn); }
.g-szuflada > .g-szuflada__panel > ul > li > a:hover > .icon:first-child, .g-szuflada > .g-szuflada__panel > ul > li > a[aria-current] > .icon:first-child { color: var(--pink-btn); }
.g-szuflada > .g-szuflada__panel > ul > li > a:hover .ik-f, .g-szuflada > .g-szuflada__panel > ul > li > a[aria-current] .ik-f { fill: currentColor; stroke: currentColor; }
.g-szuflada > .g-szuflada__panel > ul > li > a:hover .ik-a, .g-szuflada > .g-szuflada__panel > ul > li > a[aria-current] .ik-a { stroke: currentColor; }
.g-szuflada__stopka .icon { width: 1.3rem; height: 1.3rem; color: var(--ink); stroke-width: 1.4; }
.g-szuflada__stopka a:hover .icon { color: var(--pink-btn); }
.g-szuflada__stopka a:hover .ik-a { stroke: currentColor; }
.g-szuflada__head .icon, .g-szuflada__chev { stroke-width: 1.4; }


/* ==========================================================================
   Okienka i sekcje bez szarych ramek — 12.10.2026
   Właściciel: „pokaż mi wszystkie te okienka, sekcje, tak jak są, z białym
   tłem, ale bez ramek szarych”. Białe panele i karty na tle strony (--bg) nie mają
   ramki (przezroczysta, więc nic się nie przesuwa); karta produktu po
   najechaniu dostaje tylko cień. Ramki zostają w polach formularzy,
   przyciskach i wyborach oraz w ramkach wewnątrz białych paneli (tabela
   progów, formularz wyceny, wynik kalkulatora), bo tam to jedyne, co oddziela
   treść od bieli dookoła.
   ========================================================================== */
.g-panel, .g-karta, .g-glowny, .g-kat, .g-galeria__glowna, .g-filtry__firma, .g-ramka-firma, .g-kalk { border-color: transparent; }
.g-karta:hover { border-color: transparent; }


/* ==========================================================================
   Rząd produktów jak karuzela na telefonie — 12.10.2026
   Właściciel: „na telefonach produkty powinny układać się jeden obok drugiego
   jak w karuzeli i możliwy powinien być ich scroll … różowy pasek scrolla,
   żeby użytkownik wiedział, że trzeba przesunąć”. Dotyczy siatek na 5 kart
   (zakładki na głównej, ostatnio oglądane); listy w katalogu zostają siatką.
   Widać dokładnie dwie karty, bez brzegu trzeciej (właściciel: „maksymalnie
   dwa widoczne kafelki”); o tym, że rząd się przesuwa, mówi pasek: jasnoróżowy
   tor, suwak #DB1F84 szerokości widocznej części (js/app.js, MK.przewijaki).
   ========================================================================== */
.g-przewijak { display: none; }
@media (max-width: 640px) {
	.g-siatka--5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - .6rem) / 2); gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.g-siatka--5::-webkit-scrollbar { display: none; }
	.g-siatka--5 > .g-karta { scroll-snap-align: start; }
	.g-przewijak { display: block; position: relative; width: 7.5rem; height: 4px; margin: 1rem auto 0; overflow: hidden; border-radius: 99px; background: var(--pink-soft); }
	.g-przewijak[hidden] { display: none; }
	.g-przewijak__suwak { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--pink-btn); }
}


/* ==========================================================================
   Panel filtrów w katalogu — 13.10.2026
   Właściciel: „ten element nie może być przyczepiony do ekranu, bo jak będzie
   dłuższa lista, to będzie się rozjeżdżać; zaokrąglić pudełko z białym tłem,
   porobić ładnie paddingi i dostosować do ekranów”. Filtry to zwykły biały,
   zaokrąglony panel, który przewija się razem ze stroną. Na tablecie grupy
   stoją obok siebie, na telefonie jedna pod drugą.
   ========================================================================== */
.g-katalog { grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; }
.g-filtry { position: static; top: auto; padding: 1.5rem 1.5rem 1.6rem; border: 0; border-radius: var(--r-l); background: #fff; }
.g-filtry__grupa + .g-filtry__grupa { margin-top: 1.5rem; }
.g-filtry h2 { margin: 0 0 .6rem; }
.g-filtry ul { gap: .2rem; }
.g-filtr { margin-inline: -.6rem; padding: .25rem .6rem; }
.g-filtry__firma { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
@media (max-width: 1180px) {
	.g-katalog { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.25rem; }
	.g-filtry { padding: 1.25rem 1.25rem 1.4rem; }
}
@media (max-width: 960px) {
	.g-katalog { grid-template-columns: minmax(0, 1fr); }
	.g-filtry { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1.25rem 1.75rem; padding: 1.25rem 1.5rem 1.4rem; }
	.g-filtry__grupa + .g-filtry__grupa { margin-top: 0; }
	.g-filtry__firma { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 640px) {
	.g-filtry { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 1.1rem 1.25rem; }
}

/* Filtry zależne od siebie — 13.10.2026: opcja, po której lista byłaby pusta,
   jest wyszarzona i nieklikalna; na pustej liście wybrane filtry do usunięcia */
.g-filtr.is-off, .g-chip.is-off { opacity: .42; cursor: default; }
.g-filtr.is-off:hover { background: none; }
.g-chip.is-off:hover { border-color: var(--line-2); }
.g-pusto__filtry { justify-content: center; margin: 1rem 0; }
.g-chip--usun { gap: .4rem; }
.g-chip--usun .icon { width: .85rem; height: .85rem; }
.g-chip--usun:hover { border-color: var(--pink-btn); color: var(--pink-text); }

/* ==========================================================================
   Karta produktu od 1 sztuki — czysto, bez powtórzeń (13.10.2026)
   Właściciel: „rzeczy powtarzające się… musi być bardzo czysto i intuicyjnie”,
   wzór: OpenGift i megakoszulki.pl. Duża galeria | jedno białe pudełko
   zakupu: nazwa i cena, kolor, napis, miejsce graweru, ilość obok przycisku,
   jedna linia o dostawie. Bez osobnego podsumowania i bez numerów kroków.
   ========================================================================== */
.g-kp--detal { grid-template-columns: minmax(0, 1fr) minmax(22rem, 34rem); }
/* Mniejsze nazwy produktów na obu kartach (właściciel 13.10.2026: „tytuły chciałbym mniejsze”) */
.g-kp .g-produkt__tytul { font-size: clamp(1.2rem, 1.05rem + .4vw, 1.45rem); line-height: 1.3; }
.g-kp__kup { padding: clamp(1.25rem, 2.2vw, 2rem); }
.g-kp--detal .g-kp__glowa { margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
.g-kp--detal .g-kp__kroki { display: grid; gap: 1.6rem; }
.g-kp--detal .g-kp__krok { padding: 0; border: 0; }
.g-kp--detal .g-krok::before { display: none; }
.g-kp--detal .g-kp__krok-tytul { margin-bottom: .6rem; font-size: .95rem; }
.g-kp--detal .g-pole__etykieta { font-size: .95rem; }
.g-kp--detal .g-pole:last-of-type { margin-bottom: 0; }
.g-kp--detal .g-projekt__opis { margin: 0 0 .9rem; }
.g-projekt__stan { margin: 0 0 .75rem; }
.g-kp--detal .g-zakres__opcje { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.g-kp--detal .g-zakres__opcja { grid-template-columns: auto minmax(0, 1fr); row-gap: .1rem; }
.g-kp--detal .g-zakres__opcja input { grid-row: span 2; }
.g-kp--detal .g-zakres__opcja small { display: none; }
.g-kp--detal .g-zakres__opcja em { grid-column: 2; color: var(--muted); font-size: .85rem; font-weight: 500; }
.g-kp__koszyk { display: flex; gap: .75rem; }
.g-kp__koszyk .g-ilosc { flex: none; height: auto; }
.g-kp__koszyk .g-btn { flex: 1; }
.g-kp--detal .g-ile__suma { margin: .65rem 0 0; font-size: .92rem; }
.g-kp--detal .g-ile__suma:empty { display: none; }
.g-kp--detal .g-ile__suma small { color: var(--muted); font-size: .85rem; }
.g-kp--detal .g-progi-box { margin: 1rem 0 0; border: 0; }
.g-kp--detal .g-progi-box summary { padding: 0; }
.g-kp--detal .g-progi-box > div { padding: .75rem 0 0; }
.g-kp__dostawa, .g-kp__firma { display: flex; align-items: flex-start; gap: .55rem; margin: .85rem 0 0; color: var(--text); font-size: .88rem; line-height: 1.45; }
.g-kp__dostawa .icon, .g-kp__firma .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--blue-text); }
/* Realizacja ekspresowa (od 21.10.2026, gifciak-sklep/includes/ekspres.php): to samo pole na karcie produktu,
   w koszyku i w kasie (assets/dostawa.js), wybrane jak opcja zakresu na karcie */
.gifciak-ekspres { margin: 0 0 1rem; }
.gifciak-ekspres__opcja { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; margin: 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; cursor: pointer; }
.gifciak-ekspres__opcja:hover { border-color: var(--ink); }
.gifciak-ekspres.is-wybrany .gifciak-ekspres__opcja { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--blue-soft); }
.gifciak-ekspres__opcja input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--ink); }
.gifciak-ekspres__tekst { display: grid; gap: .15rem; color: var(--text); font-size: .86rem; line-height: 1.45; }
.gifciak-ekspres__tekst strong { display: flex; align-items: center; gap: .35rem; color: var(--ink); font-size: .95rem; }
.gifciak-ekspres__tekst strong .icon { width: 1rem; height: 1rem; color: var(--pink-text); }
.gifciak-ekspres__uwaga { margin: .45rem .1rem 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.gifciak-ekspres .gifciak-punkt__blad { margin: .45rem .1rem 0; }
.g-kp__ekspres { margin: 1rem 0 0; }
html:not(.js) .g-kp__ekspres { display: none; }
.wc-block-cart .wc-block-components-order-meta > .gifciak-ekspres { order: 2; }
.gifciak-ekspres--kasa { margin: 1rem 0 0; }
.gifciak-krok-opcje .gifciak-ekspres--kasa { margin: 0; }
.gifciak-krok-opcje .gifciak-ekspres + .gifciak-ekspres { margin-top: .75rem; }
/* Zgoda na prośbę o opinię jest w kroku „Opcje dodatkowe” — pole WooCommerce pod adresem chowamy (od 22.10.2026) */
.wc-block-checkout:has(.gifciak-zgoda-opinia) .wc-block-components-address-form__gifciak-prosba-o-opinie { display: none; }
/* Kod rabatowy w koszyku i kasie (22.10.2026, właściciel: pole i przycisk „rozjechane”): jedna wysokość 3rem, pole
   jak w formularzach sklepu, przycisk z różową obwódką jak drugie przyciski; nieaktywny — szary, bez bladego błękitu */
.wc-block-components-totals-coupon__form { display: flex; align-items: stretch; gap: .5rem; }
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input { flex: 1 1 auto; min-width: 0; margin: 0; }
.wc-block-components-totals-coupon__form .wc-block-components-text-input input { box-sizing: border-box; height: 3rem !important; min-height: 3rem !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-s) !important; color: var(--ink); }
.wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* main.css ustawia przyciski WooCommerce z !important (błękitne tło) — tu tylko w polu kodu rabatowego */
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button.wc-block-components-button { flex: none; box-sizing: border-box; height: 3rem !important; min-height: 3rem !important; margin: 0; padding: 0 1.25rem; border: 1.5px solid var(--pink-btn) !important; border-radius: var(--r-s) !important; background: #fff !important; box-shadow: none; color: var(--pink-text) !important; font-size: .95rem !important; font-weight: 600 !important; opacity: 1; }
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button.wc-block-components-button:not(:disabled):hover { background: var(--pink-soft) !important; color: var(--pink-text) !important; }
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button.wc-block-components-button:disabled { border-color: var(--line-2) !important; background: #fff !important; color: var(--muted) !important; cursor: not-allowed; }
.gifciak-uwagi { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
/* Karta produktu (22.10.2026, właściciel: „— albo —” między uproszczonym kreatorem a przyciskiem pełnego):
   linia, „albo” i linia nad przyciskiem kreatora, tylko gdy obok jest prosty formularz wtyczki */
.xdw-editor.is-ready ~ .xdw-own--below::before { content: "albo"; display: flex; align-items: center; justify-content: center; margin: .35rem 0 .9rem; color: var(--muted); font-size: .85rem; font-weight: 500; background: linear-gradient(var(--line), var(--line)) left center / calc(50% - 2rem) 1px no-repeat, linear-gradient(var(--line), var(--line)) right center / calc(50% - 2rem) 1px no-repeat; }
.g-kp__firma { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.g-kp__firma a { font-weight: 700; }
.g-kp__kreator-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; transition: color .15s ease; }
.g-kp__kreator-link .icon { width: 1.1rem; height: 1.1rem; color: var(--blue-text); }
.g-kp__kreator-link .icon:last-child { width: .85rem; height: .85rem; }
.g-kp__kreator-link:hover { color: var(--pink-text); }
@media (max-width: 1240px) {
	.g-kp--detal { grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); }
}
@media (max-width: 960px) {
	.g-kp--detal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.g-kp__koszyk .g-ilosc button { width: 2.25rem; }
	.g-kp__koszyk .g-ilosc input { width: 2.75rem; }
	.g-kp__koszyk .g-btn { padding-inline: .75rem; font-size: 1rem; white-space: nowrap; }
	.g-kp__koszyk .g-btn .icon { display: none; }
}

/* Gotowy wzór: „Edytuj grawer lub stwórz własny” — 13.10.2026. Zamiast granatowego
   bloku z opisem jeden przycisk drugiego rzędu (biały, różowa ramka) pod kolorem;
   po zmianach w kreatorze nad nim krótka informacja o projekcie */
.g-edytuj { min-height: 3rem; }
.g-edytuj .icon { width: 1.15rem; height: 1.15rem; }
.g-projekt__twoj { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .25rem .6rem; margin: 0 0 .75rem; padding: .75rem .9rem; border-radius: var(--r); background: var(--blue-soft); color: var(--text); font-size: .9rem; line-height: 1.45; }
.g-projekt__twoj > .icon { width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--blue-text); }
.g-projekt__twoj strong { display: block; color: var(--ink); }
.g-projekt__twoj .g-stan { grid-column: 2; justify-self: start; }
/* Ten sam przycisk w prawym górnym rogu zdjęcia gotowego wzoru (13.10.2026) */
@media (max-width: 960px) { .g-galeria:has(.g-galeria__edytuj) { position: relative; top: auto; } }
.g-galeria__edytuj { position: absolute; top: .75rem; right: .75rem; z-index: 3; box-shadow: 0 4px 14px rgba(7, 30, 61, .12); }
.g-galeria__edytuj .icon { width: 1rem; height: 1rem; }

/* Rabaty na karcie od 1 sztuki — pionowa lista zamiast poziomej tabelki (13.10.2026) */
.g-progi-lista { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.g-progi-lista__wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.75rem; align-items: baseline; gap: 1rem; width: 100%; padding: .55rem .75rem; border: 0; border-radius: var(--r-s); background: none; box-shadow: inset 0 0 0 1px transparent; color: var(--text); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; }
.g-progi-lista__wiersz:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.g-progi-lista strong { color: var(--ink); font-weight: 700; text-align: right; }
.g-progi-lista small { margin-left: .1rem; color: var(--muted); font-size: .8rem; font-weight: 500; }
.g-progi-lista em { color: #1d7a45; font-style: normal; font-weight: 700; font-size: .85rem; text-align: right; }
.g-progi-lista__wiersz.is-aktywny { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 700; }
.g-progi-lista__wiersz.is-aktywny em { color: var(--blue-text); }
.g-progi-lista__info { margin: .6rem .75rem 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
@media (max-width: 640px) {
	.g-progi-lista__wiersz { grid-template-columns: minmax(0, 1fr) auto 4.75rem; gap: .6rem; padding-inline: .6rem; }
}

/* Koszty dostawy na kartach produktu — 13.10.2026 (wzór: megakoszulki.pl) */
.g-dostawa { grid-column: 1 / -1; padding: 1.5rem; scroll-margin-top: 10rem; }
.g-dostawa__wstep { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.g-dostawa__kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.g-dostawa__kafel { display: grid; justify-items: center; align-content: start; gap: .15rem; padding: 1rem .75rem; border: 1px solid var(--line); border-radius: var(--r); text-align: center; }
.g-dostawa__kafel img { width: 56px; height: 36px; margin-bottom: .45rem; border-radius: 6px; }
.g-dostawa__kafel strong { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
.g-dostawa__kafel span { color: var(--text); font-size: .88rem; font-weight: 600; line-height: 1.3; }
.g-dostawa__kafel small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.g-dostawa__wiecej { display: none; margin-top: 1rem; }
@media (max-width: 640px) {
	.g-dostawa { padding: 1.1rem; }
	.g-dostawa__kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-dostawa__kafle.is-zwiniete > :nth-child(n + 5) { display: none; }
	.g-dostawa__wiecej { display: inline-flex; }
}
/* Suma przy kilku sztukach — dwa wiersze z oddechem (13.10.2026) */
.g-kp--detal .g-ile__suma { display: grid; gap: .35rem; margin: 1rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); font-size: .92rem; line-height: 1.4; }
.g-ile__razem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--text); }
.g-ile__razem strong { color: var(--ink); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.g-ile__szt { color: var(--muted); }
.g-kp--detal .g-ile__suma small { color: var(--muted); font-size: .84rem; }
.g-kp--detal .g-ile__suma .g-ile__szt + small { margin-top: .2rem; padding-top: .55rem; border-top: 1px solid var(--line); }
/* „Im więcej sztuk, tym taniej” z oddechem nad i pod (właściciel 13.10.2026) */
.g-kp--detal .g-progi-box { margin-top: 1.5rem; }
.g-kp--detal .g-progi-box + .g-kp__dostawa { margin-top: 1.5rem; }

/* Mniejsze kwadraty kolorów na kartach produktu (właściciel 13.10.2026: „za duże są”, potem
   „jeszcze mniejsze”): 24 px zamiast 44 px, zaznaczony kolor z granatową obwódką także po najechaniu */
.g-kp .g-kwadraty { gap: .55rem; }
.g-kp .g-kwadraty:not(.g-kwadraty--male) .g-kw { width: 1.5rem; height: 1.5rem; border-radius: 5px; }
.g-kp .g-kwadraty:not(.g-kwadraty--male) .g-kw .icon { width: .8rem; height: .8rem; stroke-width: 2.6; }
.g-kw[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
/* Konto i koszyk zawsze przy prawej krawędzi treści (właściciel 13.10.2026) — wyszukiwarka
   ma najwyżej 52 rem, więc na szerokich ekranach ikony zostawały w środku */
.g-header__akcje { margin-left: auto; }

/* Jeden rytm odstępów w pudełku zakupu karty od 1 sztuki (właściciel 13.10.2026: „odsuń od góry
   i sprawdź, czy wszystko poniżej jest ładnie odsunięte i wyrównane”):
   między krokami 28 px · etykieta → pole 10 px · pole → podpowiedź 14 px · między polami kroku 18 px
   · w części zakupu: przycisk → suma 14 px, dalej po 24 px */
.g-kp--detal .g-kp__kroki { gap: 1.75rem; }
.g-kp--detal .g-kp__krok-tytul, .g-kp--detal .g-pole__etykieta { margin: 0 0 .625rem; line-height: 1.3; }
.g-kp--detal .g-stan-mag { margin-top: .875rem; }
.g-kp--detal .g-pole { margin-bottom: 1.125rem; }
.g-kp--detal .g-projekt > .g-pole:last-of-type { margin-bottom: 0; }
.g-kp--detal .g-kp__kreator-link { display: flex; width: fit-content; margin-top: .875rem; }
.g-kp--detal .g-ile__suma { margin-top: .875rem; }

/* Ten sam rytm odstępów na karcie z logo (właściciel 13.10.2026: „zrób tak samo odstępy”):
   kroki z numerami, bez kresek między nimi; między krokami 28 px · tytuł → pole 10 px · pole →
   podpowiedź 14 px („Na stanie”, „Dodaj kolejny kolor”, kreator) · między polami kroku 18 px;
   w podsumowaniu 10 / 14 px */
.g-kp--firma .g-kp__glowa { margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
.g-kp--firma .g-kp__kroki { display: grid; gap: 1.75rem; }
.g-kp--firma .g-kp__krok { padding: 0; border: 0; }
.g-kp--firma .g-kp__krok-tytul, .g-kp--firma .g-pole__etykieta { margin: 0 0 .625rem; }
.g-kp--firma .g-pole__etykieta { line-height: 1.3; }
.g-kp--firma .g-projekt__head { margin-bottom: .625rem; }
.g-kp--firma .g-stan-mag { margin-top: .875rem; }
.g-kp--firma .g-link-plus { display: flex; width: fit-content; margin: .875rem 0 0; }
.g-kp--firma .g-kp__podtytul { margin: 1.125rem 0 .625rem; }
.g-kp--firma .g-pole { margin-bottom: 1.125rem; }
.g-kp--firma .g-projekt > .g-pole:last-of-type { margin-bottom: 0; }
.g-kp--firma .g-kp__kreator { margin-top: .875rem; }
.g-kp--firma .g-podsum__head { margin-bottom: .625rem; }
.g-kp--firma .g-podsum__kolory, .g-kp--firma .g-podsum__dl { margin-bottom: .875rem; }
.g-kp--firma .g-podsum__rabat { margin: .375rem 0 1.125rem; }
.g-kp--firma .g-podsum__termin { margin-top: .875rem; }

/* ==========================================================================
   Rzędy produktów jako karuzela na każdym ekranie — 13.10.2026
   Właściciel: „wszędzie karuzelę, aby wyświetlić więcej produktów” (ostatnio
   oglądane, „Może Ci się spodobać”, „Inne gadżety z logo”, zakładki na
   głównej, „Popularne gadżety z logo”). 5 kart na komputerze, 4 na laptopie,
   3 na tablecie, 2 na telefonie; strzałki po bokach (bez nich na telefonie)
   i różowy pasek przewijania pod rzędem, gdy kart jest więcej, niż widać.
   ========================================================================== */
.g-rzad { position: relative; }
.g-siatka--5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1.25rem) / 5); gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: .25rem 1rem; margin-block: -.25rem -1rem; }
.g-siatka--5::-webkit-scrollbar { display: none; }
.g-siatka--5 > .g-karta { scroll-snap-align: start; }
.g-rzad .g-karuzela__btn { top: calc(50% - 1rem); }
.g-przewijak { display: block; position: relative; width: 7.5rem; height: 4px; margin: 1rem auto 0; overflow: hidden; border-radius: 99px; background: var(--pink-soft); }
.g-przewijak[hidden] { display: none; }
.g-przewijak__suwak { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--pink-btn); }
@media (max-width: 1180px) {
	.g-siatka--5 { grid-auto-columns: calc((100% - 3 * 1.25rem) / 4); }
}
@media (max-width: 960px) {
	.g-siatka--5 { grid-auto-columns: calc((100% - 2 * 1rem) / 3); gap: 1rem; }
}
@media (max-width: 640px) {
	.g-siatka--5 { grid-auto-columns: calc((100% - .6rem) / 2); gap: .6rem; }
	.g-rzad .g-karuzela__btn { display: none; }
}

/* Opis i specyfikacja w jednym panelu z zakładkami (13.10.2026) */
.g-kp-info { grid-column: 1 / -1; padding: 1.25rem 1.5rem 1.5rem; }
.g-kp-info__zakladki { margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.g-kp-info__zakladki [role="tab"] { min-height: 2.75rem; padding-block: .35rem .6rem; }
.g-kp-info__panel > p { max-width: 48rem; margin: 0; }
.g-kp-info .g-spec { max-width: 48rem; }
@media (max-width: 640px) {
	.g-kp-info { padding: 1rem 1.1rem 1.25rem; }
}

/* ==========================================================================
   Lżejsze tytuły — 13.10.2026
   Właściciel: „tytuły zakładek i ogólnie tytuły sekcji na stronie są za grube”.
   Nagłówki stron i sekcji, zakładki, tytuły kroków, etykiety pól, pytania
   i tytuły kart „dróg” mają grubość 600 zamiast 700–800; duże hasła na
   banerach 700 zamiast 800. Ceny i kwoty zostają grube — to liczby, nie
   tytuły. Wybraną zakładkę wyróżnia kolor i różowa kreska, nie grubość.
   ========================================================================== */
html body :is(h1, h2, h3, .g-produkt__tytul, .g-kp__krok-tytul, .g-pole__etykieta, .g-kafel__tytul, .g-faq summary, .g-kroki strong, .g-droga strong, .g-mega__grupa h2, .g-mega__grupa-tytul, .g-szuflada__pomoc h2, .g-zakres__opcja strong) { font-weight: 600; }
html body :is(.g-hero__tytul, .g-glowny__tytul) { font-weight: 700; }
html body .g-zakladki [role="tab"], html body .g-zakladki [role="tab"][aria-selected="true"], html body .g-tryby [role="tab"] { font-weight: 600; }

/* ==========================================================================
   Nagłówek przyklejony i niższy — 13.10.2026
   Właściciel: „górna część nagłówka z wyszukiwarką, menu i koszykiem powinna
   być przyklejona przy przewijaniu, ale niższa, aby nie zajmowała za dużo
   ekranu”. #g-naglowek nie zamyka już nagłówka w sobie (display: contents),
   więc przyklejenie działa na całej stronie; pasek makiety, granatowy pasek
   i menu działów przewijają się normalnie. Na komputerze 64 px zamiast 80 px.
   ========================================================================== */
#g-naglowek { display: contents; }
.g-header__in { min-height: 4rem; }
/* Menu działów nad przyciemnieniem strony (35), pod przyklejonym nagłówkiem (40) */
.g-nav { z-index: 38; box-shadow: 0 1px 0 var(--line); }
.g-galeria, .g-kp__podsum, .g-firma__boczna, .g-podsum--koszyk { top: 5rem; }
@media (min-width: 1181px) {
	.g-logo img { width: 8.25rem; }
	.g-szukaj input { min-height: 2.6rem; }
	.g-szukaj button { width: 2.1rem; height: 2.1rem; }
	.g-header .g-ikbtn--okragly { width: 2.5rem; height: 2.5rem; }
	.g-ikbtn.g-header__menu { height: 2.5rem; }
}
@media (max-width: 1180px) {
	.g-header__in { min-height: 0; padding-block: .45rem; row-gap: .4rem; }
	.g-szukaj input { min-height: 2.6rem; }
	.g-szukaj button { width: 2.1rem; height: 2.1rem; }
	.g-firma__boczna, .g-podsum--koszyk { top: 7.25rem; }
}
/* Przyklejony nagłówek: delikatny cień na dolnej krawędzi (13.10.2026) */
.g-header { transition: box-shadow .2s ease; }
.g-header.is-przyklejony { box-shadow: 0 1px 0 var(--line), 0 8px 18px -10px rgba(7, 30, 61, .22); }

/* ==========================================================================
   Wyszukiwarka na telefonie i tablecie — 13.10.2026
   Właściciel: „na urządzeniach mobilnych wyszukiwarka w formie ikonki z lupką,
   a po kliknięciu w trybie pełnoekranowym, podobnie jak na OpenGift”. Do
   1180 px pole znika z nagłówka (nagłówek ma jeden wiersz), lupa obok konta
   i koszyka otwiera wyszukiwanie na cały ekran: pole (16 px, bez powiększania
   na iPhonie) i zamknięcie na górze, pod spodem popularne wyszukiwania
   i kategorie. Zamyka krzyżyk, Escape, wyszukanie i każdy link.
   ========================================================================== */
.g-header__lupa { display: none; }
.g-szukaj-pelny { position: fixed; inset: 0; z-index: 95; overflow-y: auto; background: #fff; overscroll-behavior: contain; }
.g-szukaj-pelny[hidden] { display: none; }
.g-szukaj-pelny__gora { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .5rem; padding: .6rem var(--gut); background: #fff; box-shadow: 0 1px 0 var(--line); }
.g-szukaj-pelny .g-szukaj { order: 0; flex: 1 1 auto; max-width: none; }
.g-szukaj-pelny .g-szukaj input { min-height: 2.75rem; font-size: max(16px, 1rem); }
.g-szukaj-pelny__tresc { padding: 1.25rem var(--gut) 2rem; }
.g-szukaj-pelny__tresc :is(h2, .g-szukaj-pelny__tytul) { margin: 0 0 .75rem; font-weight: 600; line-height: 1.3; color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.g-szukaj-pelny__tresc .g-chipy { margin: 0 0 1.75rem; }
.g-szukaj-pelny__tresc .g-chip { gap: .35rem; }
.g-szukaj-pelny__tresc .g-chip .icon { width: .9rem; height: .9rem; color: var(--muted); }
.g-szukaj-pelny__kategorie { margin: 0; padding: 0; list-style: none; }
.g-szukaj-pelny__kategorie li + li { border-top: 1px solid var(--line); }
.g-szukaj-pelny__kategorie a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.g-szukaj-pelny__kategorie a:hover { color: var(--pink-text); }
.g-szukaj-pelny__kategorie .icon { width: 1rem; height: 1rem; color: var(--muted); }
@media (max-width: 1180px) {
	.g-header .g-szukaj { display: none; }
	.g-header__lupa { display: inline-grid; }
}

/* ==========================================================================
   Karta z uproszczonym kreatorem w trzech kolumnach — 13.10.2026
   Właściciel: „na desktopach 3-kolumnowy układ, uproszczony kreator pomiędzy
   zdjęciem a kolumną »Dodaj do koszyka«; pod nim przycisk »Edytuj grawer lub
   stwórz własny« i krótkie wyjaśnienie; na zdjęciu w prawym rogu »Edytuj
   grawer«”. Komputer: zdjęcie | Twój grawer | nazwa, cena, kolor + koszyk.
   Tablet: zdjęcie | (nazwa i kolor, Twój grawer, koszyk). Telefon: jedno pod
   drugim w tej samej kolejności. Gotowe wzory zostają w dwóch kolumnach.
   ========================================================================== */
.g-kp--trzy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(20rem, 23.5rem); grid-template-areas: "galeria glowa koszyk"; }
/* Karta z logo: galeria, nazwa i „Twoje logo” w .g-kp__lewa (display: contents poza szerokim ekranem) */
.g-kp__lewa { display: contents; }
:is(.g-kp--trzy, .g-kp--trzy > .g-kp__lewa) > .g-kp__galeria { grid-area: galeria; }
:is(.g-kp--trzy, .g-kp--trzy > .g-kp__lewa) > .g-kp__kup--glowa { grid-area: glowa; }
.g-kp--trzy > .g-kp__kup--koszyk { grid-area: koszyk; }
/* „Edytuj szablon” w środkowej kolumnie pod kolorem i miejscem graweru, oddzielone kreską */
.g-kp--trzy .g-kp__projekt { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.g-kp__projekt-tytul { margin: 0; font-size: 1.15rem; }
.g-kp--detal .g-projekt .g-edytuj { margin-top: 1.5rem; }
.g-edytuj__opis { margin: .625rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
@media (max-width: 1240px) {
	.g-kp--trzy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "galeria glowa" "galeria koszyk"; grid-template-rows: auto 1fr; row-gap: 1rem; }
}
@media (max-width: 960px) {
	.g-kp--trzy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeria" "glowa" "koszyk"; grid-template-rows: none; }
}

/* Uproszczony kreator jasno opisany (właściciel 13.10.2026): nad polami „Edytuj szablon”
   z jednym zdaniem, przed pełnym kreatorem kreska z „lub” */
.g-kp__projekt-glowa { margin: 0 0 1.25rem; }
.g-kp__projekt-glowa p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }
.g-lub { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; color: var(--muted); font-size: .85rem; }
.g-lub::before, .g-lub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-kp--detal .g-projekt .g-lub + .g-edytuj { margin-top: 1rem; }
/* Węższa kolumna koszyka: zwarty licznik, napis przycisku w jednej linii (bez ikony);
   gdy i tak brakuje miejsca, przycisk przechodzi pod licznik */
.g-kp--trzy .g-kp__koszyk { flex-wrap: wrap; }
.g-kp--trzy .g-kp__koszyk .g-ilosc button { width: 2.25rem; }
.g-kp--trzy .g-kp__koszyk .g-ilosc input { width: 2.9rem; }
.g-kp--trzy .g-kp__koszyk .g-btn { flex: 1 1 auto; min-width: max-content; padding-inline: 1rem; white-space: nowrap; }
.g-kp--trzy .g-kp__koszyk .g-btn .icon { display: none; }
/* Pudełko zakupu przyklejone przy przewijaniu w trzech kolumnach (właściciel 13.10.2026) — tuż pod
   przyklejonym nagłówkiem, jak galeria; gdy po rozwinięciu rabatów jest wyższe niż okno, przewija się
   w środku, więc nic się nie ucina. Na tablecie i telefonie stoi pod nazwą i kolorem, bez przyklejania. */
@media (min-width: 1241px) {
	.g-kp--trzy > .g-kp__kup--koszyk { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
}
/* Węższe przerwy między kolumnami kart produktu (właściciel 13.10.2026: „mniejsze przerwy między
   kolumnami, aby sekcje były szersze — na każdym widoku, detalicznych i dla firm”): 16 px */
.g-kp, .g-kp--detal, .g-kp--trzy, .g-kp--firma { column-gap: var(--kp-odstep, 1rem); }
/* Galeria przyklejona przy przewijaniu (właściciel 13.10.2026: „przy zjeżdżaniu do prostego kreatora nie
   widać graweru na produkcie”). Kolumna galerii ma wysokość całego wiersza, więc przyklejona galeria
   (top 5rem) jedzie razem z formularzem — na obu kartach, od 1 sztuki i z logo */
:is(.g-kp, .g-kp > .g-kp__lewa) > .g-kp__galeria { align-self: stretch; }
/* W trzech kolumnach zdjęcie razem z miniaturami mieści się w oknie pod nagłówkiem, więc przy wpisywaniu
   napisu podgląd graweru jest cały widoczny */
@media (min-width: 1241px) {
	.g-kp--trzy .g-galeria__glowna svg, .g-kp--trzy .g-galeria__glowna > .g-wizualizacja > img { max-height: min(26rem, calc(100vh - 18rem)); }
}

/* ==========================================================================
   Trochę mniejsze czcionki; koszyk w trzech kolumnach bez rozjazdów — 13.10.2026
   Właściciel: „całość — możemy pozmniejszać trochę czcionki, aby wszystko było
   bardziej czytelne, w zasięgu wzroku” i „tu mamy jakiś błąd, rozjazd” (lista
   rabatów łamała się w wąskiej kolumnie, licznik sztuk przeskakiwał nad
   przycisk, pudełko przewijało się w środku).
   ========================================================================== */
/* Od 961 px podstawa 15 px zamiast 16 px (tekst, odstępy i przyciski w rem maleją o ok. 6%), na dużych
   ekranach 16 / 18 px zamiast 17 / 19 px. Telefon bez zmian — pola formularzy muszą mieć ≥ 16 px. */
@media (min-width: 961px) { html { font-size: 93.75%; } }
@media (min-width: 1800px) { html { font-size: 100%; } }
@media (min-width: 2300px) { html { font-size: 112.5%; } }
/* Lista rabatów: liczba sztuk, cena i rabat zawsze w jednej linii */
.g-progi-lista__wiersz { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: .6rem; padding-inline: .5rem; }
.g-progi-lista__wiersz > span, .g-progi-lista__wiersz strong, .g-progi-lista__wiersz em { white-space: nowrap; }
.g-progi-lista__wiersz em { min-width: 3rem; }
/* Kolumna koszyka trochę szersza; licznik sztuk na całą szerokość nad przyciskiem */
/* tylko na szerokim ekranie — na tablecie i telefonie zostają układy z media queries wyżej */
@media (min-width: 1241px) { .g-kp--trzy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(23rem, 25rem); } }
.g-kp--trzy .g-kp__koszyk { flex-direction: column; flex-wrap: nowrap; gap: .625rem; }
.g-kp--trzy .g-kp__koszyk .g-ilosc { width: 100%; height: 2.75rem; }
.g-kp--trzy .g-kp__koszyk .g-ilosc button { width: 3rem; }
.g-kp--trzy .g-kp__koszyk .g-ilosc input { flex: 1; width: auto; }
.g-kp--trzy .g-kp__koszyk .g-btn { width: 100%; min-width: 0; }
.g-kp--trzy .g-kp__koszyk .g-btn .icon { display: inline-block; }
@media (min-width: 1241px) {
	.g-kp--trzy > .g-kp__kup--koszyk { top: var(--koszyk-top, 5rem); max-height: none; overflow: visible; }
}
/* Linki w menu bocznym zostają wygodne do dotknięcia (≥ 44 px) także przy mniejszej podstawie */
.g-szuflada .g-szuflada__wszystkie a, .g-szuflada .g-szuflada__pomoc a { min-height: max(2.75rem, 44px); }

/* ==========================================================================
   Model oferty — 13.10.2026 (strategia właściciela)
   „Zaprojektuj sam” (nasza grafika, pełny kreator) w każdym rodzaju; szablony
   z uproszczonym kreatorem; gotowe wzory. W ofercie dla firm na listach cena
   „od” (z progu dla największego nakładu), jak na opengift.pl.
   ========================================================================== */
.g-projekt--wlasny .g-edytuj__opis { margin-top: .625rem; }

/* ==========================================================================
   Karta z logo prościej — 13.10.2026
   Właściciel: „czy sekcja zakupowa nie jest zbyt skomplikowana? ma być bardzo
   intuicyjnie”. Układ karty od 1 sztuki (.g-kp--detal.g-kp--trzy): zdjęcie |
   nazwa, cena „od”, kolor, miejsce graweru, „Twoje logo” | przyklejone pudełko
   zakupu. Kolejne kolory dopiero po „Dodaj kolejny kolor” (wiersz na kolor).
   ========================================================================== */
.g-kp--logo .g-wiersze { display: grid; }
.g-kp--logo .g-wiersz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kolor usun" "ilosc wartosc"; gap: .5rem .75rem; padding: .75rem 0; }
.g-kp--logo .g-wiersz:first-child { padding-top: 0; border-top: 0; }
.g-kp--logo .g-wiersz--jeden { display: block; padding: 0; }
.g-kp--logo .g-wiersz__kolor select { min-height: 2.5rem; }
.g-kp--logo .g-link-plus { align-self: flex-start; margin: 0; }
.g-kp--logo .g-kp__firma + .g-kp__firma { margin-top: .6rem; padding-top: 0; border-top: 0; }
/* Licznik w wąskim wierszu koloru: pole liczby nie wypycha przycisków − i + */
.g-kp--trzy .g-kp__koszyk .g-ilosc button { flex: none; }
.g-kp--trzy .g-kp__koszyk .g-ilosc input { min-width: 0; }

/* ==========================================================================
   Karta z logo na telefonie — 13.10.2026
   Jak opengift.pl na telefonie: zakup zawsze pod ręką w dolnym pasku, a treść
   po kolei — zdjęcie, nazwa z ceną, kolor i miejsce graweru, liczba sztuk
   z sumą i rabatami, „Twoje logo”. Na komputerze „Twoje logo” to dalszy ciąg
   środkowego panelu (jeden biały panel), na tablecie pod nim jest koszyk.
   ========================================================================== */
:is(.g-kp--logo, .g-kp--logo > .g-kp__lewa) > .g-kp__kup--logo { grid-area: logo; }
@media (min-width: 1181px) {
	:is(.g-kp--logo, .g-kp--logo > .g-kp__lewa) > .g-kp__kup--glowa { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	:is(.g-kp--logo, .g-kp--logo > .g-kp__lewa) > .g-kp__kup--logo { padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (min-width: 1241px) {
	.g-kp--logo { grid-template-areas: "galeria glowa koszyk" "galeria logo koszyk"; grid-template-rows: auto 1fr; row-gap: 0; }
}
@media (min-width: 1181px) and (max-width: 1240px) {
	.g-kp--logo { grid-template-areas: "galeria glowa" "galeria logo" "galeria koszyk"; grid-template-rows: auto auto 1fr; row-gap: 0; }
	.g-kp--logo > .g-kp__kup--koszyk { margin-top: var(--kp-odstep, 1rem); }
}
@media (max-width: 960px) {
	.g-kp--logo { grid-template-areas: "galeria" "glowa" "koszyk" "logo"; }
	.g-kp--logo .g-kp__projekt { margin-top: 0; padding-top: 0; border-top: 0; }
	/* „Do koszyka” jest w dolnym pasku, więc w treści go nie powtarzamy */
	.g-kp--logo .g-kp__koszyk [data-do-koszyka] { display: none; }
}

/* ==========================================================================
   Galeria trzyma kształt — 13.10.2026
   Właściciel: „jak przełączy się na inne zdjęcie, które jest mniejsze, to cały
   układ przeskakuje”. Pole zdjęcia ma stały kształt (4 : 5, najwyżej jak
   dotąd), a każdy widok — produkt, zbliżenie graweru, wszystkie kolory —
   mieści się w nim dopasowany i wyśrodkowany.
   ========================================================================== */
.g-galeria__glowna { width: 100%; aspect-ratio: 4 / 5; max-height: min(38rem, 72vh); min-height: 0; }
.g-galeria__glowna > *, .g-galeria__glowna > .g-wizualizacja { width: 100%; height: 100%; min-height: 0; }
.g-galeria__glowna svg, .g-galeria__glowna > .g-wizualizacja > svg { width: 100%; height: 100%; max-height: none; }
.g-galeria__glowna > .g-wizualizacja > img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.g-galeria__glowna .g-kolory-foto { grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100%; }
.g-galeria__glowna .g-kolory-foto > .g-wizualizacja { height: 100%; min-height: 0; }
.g-galeria__glowna .g-kolory-foto img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
@media (min-width: 1241px) {
	.g-kp--trzy .g-galeria__glowna { max-height: min(26rem, calc(100vh - 18rem)); }
	.g-kp--trzy .g-galeria__glowna svg, .g-kp--trzy .g-galeria__glowna > .g-wizualizacja > img { max-height: none; }
}

/* ==========================================================================
   Mniej kulfoniasto — 13.10.2026
   Właściciel: „dużo rzeczy jest kulfoniastych, np. opcja dodawania kolejnego
   koloru, te wielkie pola do wprowadzania ilości mogą dezorientować”.
   Rozmiary jak w dużych sklepach: licznik ilości ok. 7 rem obok przycisku
   (nie na całą szerokość), liczba półgruba, linki pomocnicze mniejsze
   i lżejsze, niższe kafelki krojów i miejsca graweru, pole logo w jednym
   wierszu, w formularzach zwykły (niepogrubiony) wpisany tekst.
   ========================================================================== */
.g-ilosc { height: 2.5rem; }
.g-ilosc button { width: 2.25rem; }
.g-ilosc input { width: 3rem; font-weight: 600; }
/* Karta produktu: licznik obok „Dodaj do koszyka”, oba tej samej wysokości */
.g-kp--trzy .g-kp__koszyk { flex-direction: row; align-items: stretch; }
.g-kp--trzy .g-kp__koszyk .g-ilosc { flex: none; width: 7rem; height: 2.875rem; }
.g-kp--trzy .g-kp__koszyk .g-ilosc button { width: 2.1rem; }
.g-kp--trzy .g-kp__koszyk .g-btn { flex: 1; width: auto; min-width: 0; min-height: 2.875rem; padding-block: .5rem; padding-inline: .75rem; }
.g-kp--trzy .g-kp__koszyk .g-btn .icon { display: none; }
/* Karta z logo: jeden kolor — licznik i przycisk w jednym wierszu, „Dodaj kolejny kolor” pod spodem;
   kilka kolorów — wiersze na całą szerokość, przycisk pod nimi */
.g-kp--logo .g-kp__koszyk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .625rem; }
.g-kp--logo .g-wiersze { grid-column: 1; grid-row: 1; }
.g-kp--logo .g-kp__koszyk > [data-do-koszyka] { grid-column: 2; grid-row: 1; }
.g-kp--logo .g-link-plus { grid-column: 1 / -1; grid-row: 2; }
.g-kp--logo .g-wiersze:has(.g-wiersz + .g-wiersz) { grid-column: 1 / -1; }
.g-kp--logo .g-wiersze:has(.g-wiersz + .g-wiersz) ~ [data-do-koszyka] { grid-column: 1 / -1; grid-row: 3; }
.g-kp--logo .g-wiersz .g-ilosc { height: 2.5rem; }
.g-kp--logo .g-wiersz--jeden .g-ilosc { height: 2.875rem; }
.g-kp--logo .g-wiersz__kolor select { min-height: 2.25rem; }
.g-wiersz__wartosc { font-weight: 700; }
/* Linki pomocnicze („Dodaj kolejny kolor”) mniejsze i lżejsze */
.g-link-plus { gap: .3rem; font-size: .875rem; font-weight: 600; }
.g-link-plus .icon { width: .95rem; height: .95rem; }
/* Kroje napisu i miejsce graweru niższe */
.g-font { gap: 0; padding: .35rem .3rem; }
.g-font__probka { font-size: 1.15rem; }
.g-font__nazwa { font-size: .7rem; }
.g-zakres__opcja { gap: .6rem; padding: .5rem .75rem; }
.g-zakres__opcja strong, .g-zakres__opcja em, .g-zakres__opcja small { line-height: 1.35; }
/* Pole logo w jednym wierszu */
.g-logo-pole { flex-wrap: nowrap; gap: .6rem; padding: .5rem .6rem; border-width: 1px; }
.g-logo-pole__opis { flex: 1 1 auto; min-width: 0; }
.g-logo-pole__opis small { font-size: .75rem; }
.g-logo-pole__akcje { flex: none; flex-direction: column; align-items: flex-end; gap: .2rem; }
.g-logo-pole__akcje .g-link-btn { font-size: .78rem; }
/* Formularze: wpisany tekst zwykłą czcionką; kalkulator z licznikiem zwykłej szerokości */
.g-form input, .g-form textarea, .g-form select { font-weight: 400; }
.g-kalk .g-ilosc { width: 9rem; }
.g-kalk .g-ilosc input { min-width: 0; }

/* ==========================================================================
   „Dla firm”: baner na całą szerokość zamiast kalkulatora — 13.10.2026
   Zdjęcie: aranżacja naszej realizacji (logo SPEED-DREW, biblioteka mediów) po prawej,
   tekst na jasnym tle po lewej.
   ========================================================================== */
/* wysokość z szerokości ekranu, nie aspect-ratio — przy max-height zwężałoby baner */
.g-baner { position: relative; display: grid; align-items: center; height: clamp(24rem, 32vw, 34rem); overflow: hidden; border-radius: var(--r-l); background: #f6f6f4; }
.g-baner > .g-wizualizacja { position: absolute; inset: 0; height: 100%; }
.g-baner > .g-wizualizacja > img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 55%; }
.g-baner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .75) 30%, rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.g-baner__tekst { position: relative; z-index: 2; box-sizing: border-box; width: min(38rem, 47%); padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3.5vw, 3.25rem); }
.g-baner .g-hero__tytul { font-size: clamp(1.9rem, 1rem + 1.7vw, 2.6rem); }
.g-baner .g-akcje { flex-wrap: nowrap; }
.g-baner .g-akcje .g-btn { white-space: nowrap; }
.g-baner__tekst .g-hero__lead { margin-bottom: 1.25rem; }
.g-baner .g-atuty { margin-top: 1.25rem; }
@media (max-width: 760px) {
	.g-baner { display: block; height: auto; background: #fff; }
	.g-baner .g-akcje { flex-wrap: wrap; }
	.g-baner::before { display: none; }
	.g-baner > .g-wizualizacja { position: relative; height: 13rem; }
	.g-baner > .g-wizualizacja > img { object-position: 78% 50%; }
	.g-baner__tekst { width: auto; padding: 1.25rem 1rem 1.5rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
	.g-baner__tekst { width: 60%; }
	.g-baner::before { background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, 0) 70%); }
	.g-baner .g-akcje { flex-wrap: wrap; }
}

/* ==========================================================================
   Lżej — pogrubienia i wiersze kolorów — 13.10.2026
   Właściciel: „tutaj jest jeszcze kulfoniasto; sprawdź całą stronę pod
   względem kulfoniastości i zbyt dużych pogrubień”. Jedna skala: hasła
   banerów i ceny 700 (zamiast 800/900), tytuły 600 (bez zmian), przyciski,
   linki, plakietki, etykiety i wyróżnienia 600, reszta tekstu zwykła.
   ========================================================================== */
strong, b { font-weight: 600; }
.g-btn, .g-wiecej, .g-filtr.is-on, .g-plakietka, .g-nadtytul, .g-kroki__nr,
.g-kp__firma a, .g-od1 a, .g-strona p a:not(.g-btn), .g-form label,
.g-zakres__opcja strong, .g-zakres__opcja em, .g-progi-lista__wiersz strong, .g-progi-lista__wiersz em,
.g-wiersz__wartosc, .g-linia__cena small, .g-logo-pole__img, .g-progi-lista__wiersz span, .g-stan { font-weight: 600; }
/* ceny i kwoty: 700 */
.g-kp__cena strong, .g-karta__cena, .g-ile__razem strong, .g-pasek-zakupu strong, .g-wybor__cena,
.g-linia__cena strong, .g-sumy__razem dd, .g-dostawa__kafel strong, .g-wynik__suma strong { font-weight: 700; }
.g-btn--duzy { min-height: 3rem; padding: .65rem 1.4rem; font-size: 1rem; }

/* Wiersze kolorów na karcie z logo w jednej linii: kolor | licznik | kwota | kosz, bez kresek */
.g-kp--logo .g-wiersze { gap: .4rem; }
/* bez kwoty w wierszu — sumę pokazuje ramka „Razem” pod przyciskiem, a lista kolorów ma miejsce na całą nazwę */
.g-kp--logo .g-wiersz { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "kolor ilosc usun"; align-items: center; gap: .5rem; padding: 0; border-top: 0; }
.g-kp--logo .g-wiersz--jeden { display: block; }
.g-kp--logo .g-wiersz__kolor { gap: .3rem; }
.g-kp--logo .g-wiersz__kolor .g-kw--maly { flex: none; width: .9rem; height: .9rem; }
.g-kp--logo .g-wiersz__kolor select { width: 100%; min-width: 0; min-height: 2.25rem; padding: .15rem 1.4rem .15rem .4rem; font-size: .85rem; }
.g-kp--logo .g-wiersz:not(.g-wiersz--jeden) .g-ilosc { width: auto; height: 2.25rem; }
.g-kp--logo .g-wiersz:not(.g-wiersz--jeden) .g-ilosc button { width: 1.9rem; }
.g-kp--logo .g-wiersz:not(.g-wiersz--jeden) .g-ilosc input { flex: none; width: 2.4rem; font-size: .9rem; }
.g-kp--logo .g-wiersz__wartosc { min-width: 4.25rem; font-size: .85rem; }
.g-kp--logo .g-wiersz__usun { width: 1.6rem; height: 1.6rem; }
.g-kp--logo .g-wiersz__usun .icon { width: 1rem; height: 1rem; }

/* Licznik mieści 5 cyfr (np. 10000) — liczba nie chowa się pod przyciskami − i + (właściciel 13.10.2026) */
/* pole ma 16 px (iPhone), więc „10000” potrzebuje ok. 3,6 rem */
.g-ilosc input { width: 3.75rem; padding: 0 .15rem; font-variant-numeric: tabular-nums; }
.g-kp--trzy .g-kp__koszyk .g-ilosc { width: 8.25rem; }
.g-kp--logo .g-wiersz:not(.g-wiersz--jeden) .g-ilosc input { width: 3.75rem; }

/* ==========================================================================
   Karta z logo: cena „od” przy pustej liczbie sztuk — 15.10.2026
   Jak na opengift.pl: pod nazwą nie ma ceny; w pudełku zakupu „od X zł za
   sztukę” (największy nakład) i puste pole liczby sztuk; po wpisaniu liczby
   cena dla nakładu z rabatem i „Razem”. Na telefonie dolny pasek: cena, licznik
   i „Do koszyka”, po wpisaniu liczby kwota i „Szczegóły”.
   ========================================================================== */
.g-kp__cena--zakup { margin: 0 0 .75rem; }
.g-kp__cena--zakup strong { font-size: 1.5rem; }
.g-pasek__info, .g-pasek__wiersz, .g-pasek__ilosc { display: none; }
@media (max-width: 960px) {
	.g-pasek-zakupu--logo { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .55rem; }
	.g-pasek-zakupu--logo .g-pasek__info { display: flex; align-items: baseline; gap: .3rem; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
	.g-pasek-zakupu--logo .g-pasek__info strong { color: var(--ink); font-size: 1.1rem; }
	.g-pasek-zakupu--logo .g-pasek__wiecej { display: inline-flex; align-items: center; gap: .15rem; margin-left: auto; color: var(--blue-text); font-size: .85rem; font-weight: 600; }
	.g-pasek__wiecej .icon { width: .9rem; height: .9rem; transform: rotate(-90deg); }
	.g-pasek-zakupu--logo .g-pasek__wiersz { display: flex; align-items: stretch; gap: .6rem; }
	.g-pasek-zakupu--logo .g-pasek__ilosc { display: flex; align-items: center; flex: none; }
	.g-pasek-zakupu--logo .g-ilosc { width: 8.25rem; height: 2.75rem; }
	.g-pasek-zakupu--logo .g-ilosc input { flex: 1; width: auto; min-width: 0; }
	.g-pasek-zakupu--logo .g-btn { flex: 1; max-width: none; }
	body:has(.g-pasek-zakupu--logo) .g-stopka { padding-bottom: 9rem; }
	body:has(.g-pasek-zakupu--logo) .g-komunikaty { bottom: 8.5rem; }
	/* liczba sztuk jest w dolnym pasku — w pudełku zakupu nie powtarzamy licznika przy jednym kolorze */
	.g-kp--logo .g-wiersz--jeden { display: none; }
}

/* ==========================================================================
   Sklep (WordPress) — elementy, których makieta nie miała, 16.10.2026
   ========================================================================== */
/* Wyszukiwarka w nagłówku z podpowiedziami pod polem (assets/js/wyglad.js) */
.g-szukaj-box { position: relative; flex: 1; max-width: 52rem; }
.g-szukaj-box .g-szukaj { max-width: none; }
.g-szukaj__wyniki[hidden] { display: none; }
.g-szukaj__wyniki--rozwijane { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 70; max-height: min(34rem, 70vh); overflow-y: auto; padding: .75rem; border-radius: var(--r); background: #fff; box-shadow: 0 18px 48px rgba(7, 30, 61, .18); }
.g-szukaj__stan { margin: 0 0 .5rem; color: var(--muted); font-size: .85rem; }
.g-szukaj__lista { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.g-szukaj__produkt { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .4rem .5rem; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.g-szukaj__produkt:hover, .g-szukaj__produkt:focus-visible { background: var(--pink-soft); color: var(--pink-text); }
.g-szukaj__produkt img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: 6px; background: #fff; }
.g-szukaj__nazwa { display: grid; font-size: .92rem; line-height: 1.3; }
.g-szukaj__nazwa small { color: var(--muted); font-size: .78rem; }
.g-szukaj__cena { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.g-szukaj__cena del { color: var(--muted); font-weight: 400; }
.g-szukaj__wszystkie { margin-top: .6rem; }
.g-szukaj-pelny .g-szukaj__wyniki { padding-top: .25rem; }
@media (max-width: 1180px) { .g-header .g-szukaj-box { display: none; } }

/* Licznik koszyka (klasa header-cart__count — liczbę wpisuje skrypt z ciasteczka i odświeża main.js) */
.g-koszyk-btn .header-cart__count { position: absolute; top: auto; right: -.2rem; bottom: -.15rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px; background: var(--pink-btn); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; box-shadow: 0 0 0 2px #fff; }
.g-koszyk-btn .header-cart__count[data-count="0"] { display: none; }
.g-koszyk-btn:hover { color: var(--pink-text); }

/* Kółko z ikoną zamiast grafiki (np. „Zaprojektuj sam”, wycena) */
.g-kolko--ikona { background: var(--blue-soft); }

/* Stopka: kontakt, logotypy płatności i przewoźników */
.g-stopka__marka p { max-width: 30rem; }
.g-stopka__kontakt { margin-top: 1rem !important; }
.g-stopka__kontakt a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.g-stopka__kontakt .icon { width: 1rem; height: 1rem; color: var(--pink); }
.g-stopka__kontakt small { color: #9fb0c8; }
.g-stopka__plakietki { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; }
.g-stopka__plakietki .badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.g-stopka .badges__logo img { width: 3.5rem; height: auto; margin: 0; }
.g-stopka .badges__logo { display: grid; place-items: center; min-width: 3.5rem; min-height: 2.25rem; padding: .15rem; border-radius: 6px; background: #fff; color: var(--ink); }

/* Dawne strony (konto, kasa, strony informacyjne) na tle strony (--bg) pod nowym nagłówkiem */
.site-main { min-height: 50vh; }

/* Karta produktu na liście (gifciak_product_card): zdjęcie z maską wzoru albo z motywem
   „Tu Twój projekt” (main.css, .motif), kropki kolorów zmieniają zdjęcie po najechaniu (main.js) */
.g-karta__media { container-type: inline-size; }
.g-karta__media .card__img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.g-karta:hover .card__img, .g-karta:hover .card__art { transform: scale(1.03); }
/* Plakietka „Zaprojektuj sam: napis, logo, grafika” u dołu zdjęcia, jak na gifciak.pl */
.g-karta__media > .card__hint { z-index: 1; width: auto; height: auto; }
.g-karta__media .card__hint svg { width: 1rem; height: 1rem; }
.g-karta .card__art { transition: transform .35s ease; }
.g-kropki { position: relative; z-index: 1; flex-wrap: wrap; align-items: center; row-gap: .3rem; }
button.g-kropka { padding: 0; border: 0; cursor: pointer; }
.g-kropka[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.g-kropki__wiecej { margin-left: .45rem !important; color: var(--muted); font-size: .78rem; }
.g-karta .rating, .g-karta .card-rating { position: relative; z-index: 1; }
.g-karta__cena del { color: var(--muted); font-size: .9rem; font-weight: 400; }
.g-karta__cena ins { text-decoration: none; }
.g-karta__cena .price-lowest, .g-karta__cena small.price-lowest { display: block; font-size: .72rem; font-weight: 400; }

/* ==========================================================================
   Katalog — listy WooCommerce (sklep, kategorie, kolekcje, wyszukiwarka) w układzie
   makiety: biały panel filtrów z lewej (na telefonie wysuwany, sklep.js), nagłówek listy,
   pasek z liczbą produktów i sortowaniem, siatka 4 kart. Klasy filtrów zostają (inc/filters.php).
   ========================================================================== */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: 1.1rem; color: var(--muted); font-size: .9rem; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--pink-text); text-decoration: none; }
.breadcrumbs__sep { display: inline-block; width: .9rem; height: .9rem; overflow: hidden; color: transparent; font-size: 0; background: var(--line-2); -webkit-mask: var(--g-chev) center / contain no-repeat; mask: var(--g-chev) center / contain no-repeat; }
:root { --g-chev: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
/* Kategorie i filtry (właściciel 19.10.2026: „filtry powinny być cały czas widoczne, pod przyciskiem tylko
   na mobilnych”, potem: „pasek filtrów scrollowany jest do kitu, pasek zawsze musi być cały w całości
   widoczny”, wzór megakoszulki.pl, „pasek wolałbym jednak, aby miał białe tło”): od 960 px biały panel
   z lewej, cały rozwinięty i przewijany razem ze stroną (bez przyklejania i własnego paska przewijania) —
   grupy z wyraźnym tytułem oddzielone cienką linią tylko między sobą; węziej szuflada „Filtry” (sklep.css,
   sklep.js), bez JS — blok nad produktami. Po kliknięciu w panelu strona wraca w to samo miejsce (sklep.js). */
@media (min-width: 960px) {
	.page-body--shop .shop-layout { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
	.page-body--shop .shop-filters { position: static; max-height: none; overflow: visible; padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--r-l); background: #fff; }
	.page-body--shop .shop-filters .filter-section + .filter-section { margin-top: 1.25rem; padding-top: 1.25rem; }
	.page-body--shop .shop-filters .filter-section__title { font-size: 1.05rem; }
}
@media (min-width: 1280px) { .page-body--shop .shop-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; } }
@media (min-width: 1440px) { .page-body--shop .shop-layout { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2.5rem; } }
@media (max-width: 959px) { .page-body--shop .shop-layout { display: block; } }
html:not(.js) .shop-filters { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--r-l); background: #fff; }
.filter-section { padding: 0; border-top: 0; }
.filter-section + .filter-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.filter-section__title { margin: 0 0 .45rem; color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.filter-section summary .filter-section__title { margin: 0; }
.filter-section[open] summary { margin-bottom: .2rem; }
.cat-tree__link, .facet__opt { min-height: 2.25rem; padding: .25rem .6rem; margin-inline: -.6rem; color: var(--text); font-weight: 400; }
.cat-tree__link:hover, .facet__opt:hover { background: var(--mist); color: var(--ink); }
.cat-tree__link[aria-current="page"], .facet__opt.is-active, .facet__opt[aria-current="page"] { background: none; color: var(--ink); font-weight: 600; }
.cat-tree__count, .facet__count { color: var(--muted); font-size: .8rem; font-weight: 500; }
.facet__box { width: 1.15rem; height: 1.15rem; border-color: var(--line-2); border-radius: 4px; }
.facet__toggle { color: var(--ink); font-weight: 600; }
.shop-filters .gfk--filtry { margin-top: 1.5rem; }
.shop-filters .g-filtry__firma { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); background: none; }
.shop-head { margin-bottom: 1.25rem; }
.shop-head .page-title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 600; }
.shop-head__desc { max-width: 60rem; font-size: 1rem; }
.shop-toolbar { padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.shop-toolbar .woocommerce-ordering select { min-height: 2.4rem; font-size: .9rem; }
/* Obok panelu filtrów: 4 karty w rzędzie od 1280 px, 3 węziej, 2 na telefonie */
.page-body--shop ul.products, .page-body--shop .shop-layout__main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1279px) { .page-body--shop ul.products, .page-body--shop .shop-layout__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 640px) { .page-body--shop ul.products, .page-body--shop .shop-layout__main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
ul.products li.product > .g-karta { height: 100%; }
.page-body--shop .woocommerce-pagination { margin-top: 2rem; }


/* ==========================================================================
   Karta produktu (woocommerce/content-single-product.php): formularz WooCommerce
   i pola wtyczki XDesigner w pudełku zakupu z makiety. Kolejność jak w makiecie:
   kolor → przycisk kreatora → liczba sztuk obok „Dodaj do koszyka” → suma → rabaty
   → termin i dostawa → oferta z logo.
   ========================================================================== */
.page-body--product { padding-top: 1.25rem; padding-bottom: 1rem; }
.g-kp { margin: 0; }
.g-kp .g-kp__krok-tytul { margin: 0 0 .6rem; color: var(--ink); font-size: .95rem; font-weight: 600; }
.g-kp .g-kp__krok-tytul span { font-weight: 400; }
.g-kp .g-kwadraty { gap: .6rem; }
a.g-kw { text-decoration: none; }
.g-kp .rating-link--product { display: inline-flex; margin: -.25rem 0 .5rem; }
.g-kp__cena--promocja { color: var(--ink); font-size: 1.4rem; font-weight: 700; }
.g-kp__cena--promocja del { color: var(--muted); font-size: 1rem; font-weight: 400; }
.g-kp__cena--promocja ins { text-decoration: none; }
.g-kp__cena--promocja .price-lowest, .g-kp__cena--promocja small { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.g-zielony { color: var(--ok); }
.g-czerwony { color: var(--danger); }
.g-stan-mag .icon { width: 1rem; height: 1rem; margin-right: .3rem; vertical-align: -.15em; }
.g-stan-mag:empty { display: none; }
.g-stan-mag--wariant { margin-top: .75rem; }

/* Galeria: stały kształt 4 : 5, zdjęcie wyśrodkowane (makieta 13.10.2026); przyklejona na komputerze */
.g-kp__galeria .g-galeria { position: sticky; top: 5.25rem; }
.g-kp__galeria .g-galeria__glowna { position: relative; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.25rem) 8%; border-radius: var(--r-l); background: #fff; }
.g-kp__galeria .g-galeria__glowna > .preview { width: 100%; max-width: min(30rem, 100%); }
.g-kp__galeria .stage-embed { position: absolute; inset: 0; z-index: 2; background: #fff; }
.g-kp__galeria .stage-embed[hidden] { display: none; }
.g-kp__galeria .stage-photo { position: absolute; inset: 0; z-index: 3; margin: 0; background: #fff; }
.g-kp__galeria .stage-photo[hidden] { display: none; }
.g-kp__galeria .stage-photo img { width: 100%; height: 100%; object-fit: contain; }
.g-kp__galeria .stage-photo__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-kp__galeria .stage-nav { z-index: 4; }
.g-kp__galeria .g-galeria__miniatury { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; }
.g-kp__galeria .product-gallery { display: flex; gap: .6rem; overflow-x: auto; scrollbar-width: none; }
.g-kp__galeria .product-gallery__thumb { flex: none; width: 5.5rem; aspect-ratio: 1; padding: .3rem; border: 1.5px solid transparent; border-radius: var(--r); background: #fff; cursor: pointer; }
.g-kp__galeria .product-gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }
.g-kp__galeria .product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.g-kp__galeria .product-gallery__cover { position: relative; display: block; height: 100%; margin-inline: auto; }
.g-kp__galeria .product-gallery__cover img { width: 100%; height: 100%; object-fit: contain; }
.g-galeria__edytuj[hidden] { display: none; }
@media (max-width: 960px) { .g-kp__galeria .g-galeria { position: relative; top: auto; } }

/* Formularz: wybór koloru wariantu (main.js zamienia listę na kwadraty) */
.g-kp__kup form.cart { margin: 0; }
.g-kp__kup table.variations { display: block; width: 100%; margin: 0 0 1.6rem; border: 0; }
.g-kp__kup table.variations tbody, .g-kp__kup table.variations tr { display: block; }
.g-kp__kup table.variations th, .g-kp__kup table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.g-kp__kup table.variations label { display: block; margin: 0 0 .6rem; color: var(--ink); font-size: .95rem; font-weight: 600; }
.g-kp__kup table.variations .selected-value { font-weight: 400; text-transform: lowercase; }
.g-kp__kup table.variations select.is-enhanced { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.g-kp__kup .reset_variations { display: none !important; }
.g-kp__kup .swatches--variation { display: flex; flex-wrap: wrap; gap: .6rem; }
.g-kp__kup .swatch { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 5px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; }
.g-kp__kup .swatch:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px var(--line-2); }
.g-kp__kup .swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.g-kp__kup .swatch:disabled { opacity: .35; cursor: not-allowed; }
.g-kp__kup .single_variation_wrap .woocommerce-variation { display: none !important; }
.g-kp__kup .stock { display: none; }

/* Pola kreatora i koszyk: przycisk kreatora na całą szerokość, pod nim liczba sztuk obok „Dodaj do koszyka” */
.g-kp__kup .woocommerce-variation-add-to-cart, .g-kp__kup form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.g-kp__kup .xdw { flex: 1 0 100%; order: -1; margin: 0 0 .85rem; }
.g-kp__kup .xdw-own { margin: 0; }
.g-kp__kup .xdw-own__button, .g-kp__kup .xdw-own__button.button {
	display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3rem; padding: .6rem 1.25rem;
	border: 1.5px solid var(--pink-btn); border-radius: var(--r-s); background: #fff; color: var(--pink-text);
	font: 600 .95rem/1.2 var(--font); text-decoration: none; text-align: center; box-shadow: none;
}
.g-kp__kup .xdw-own__button:hover { border-color: var(--pink-text); background: var(--pink-soft); color: var(--pink-text); }
.g-kp__kup .xdw-own__button svg { width: 1.15rem; height: 1.15rem; }
.g-kp__kup .xdw-own small, .g-kp__kup .xdw-own__opis { display: block; margin: .625rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.g-kp__kup .xdw-own__down { color: var(--danger); }
.g-kp__kup .xdw-design { margin: 0; padding: .75rem .9rem; border-radius: var(--r); background: var(--blue-soft); color: var(--ink); font-size: .9rem; }
.g-kp__kup .xdw-design img { max-width: 5rem; border-radius: 6px; }
.g-kp__kup .quantity { flex: none; }
.g-kp__kup .single_add_to_cart_button, .g-kp__kup .single_add_to_cart_button.button {
	flex: 1 1 10rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin: 0; padding: .65rem 1.4rem;
	border: 1.5px solid var(--pink-btn); border-radius: var(--r-s); background: var(--pink-btn); color: #fff; font: 600 1rem/1.2 var(--font); cursor: pointer;
}
.g-kp__kup .single_add_to_cart_button:hover { background: #fff; color: var(--pink-text); }
.g-kp__kup .single_add_to_cart_button.disabled { opacity: .5; }

/* Licznik sztuk (woocommerce/global/quantity-input.php) w stylu makiety: zwarty, obok przycisku */
.g-kp__kup .qty-stepper, .g-strona .qty-stepper { display: inline-flex; align-items: stretch; height: 3rem; border: 1.5px solid var(--line-2); border-radius: var(--r-s); background: #fff; }
.g-kp__kup .qty-stepper button, .g-strona .qty-stepper button { display: grid; place-items: center; width: 2.4rem; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer; }
.g-kp__kup .qty-stepper button:hover { background: var(--mist); }
.g-kp__kup .qty-stepper input.qty, .g-strona .qty-stepper input.qty { width: 3.75rem; min-height: 0; height: 100%; padding: 0; border: 0; border-inline: 1px solid var(--line); border-radius: 0; font-size: max(1rem, 16px); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; }
.g-kp__kup .qty-stepper input.qty::-webkit-outer-spin-button, .g-kp__kup .qty-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g-kp__kup .qty-stepper input.qty:focus { box-shadow: none; }

/* Suma, rabaty, dostawa */
.g-kp--detal .g-kp__zakup .g-ile__suma { display: grid; gap: .35rem; margin: .9rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r); }
.g-kp--detal .g-kp__zakup .g-ile__suma:empty { display: none; }
.g-ile__razem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--ink); }
.g-ile__razem strong { font-size: 1.2rem; font-weight: 700; }
.g-ile__szt { color: var(--muted); font-size: .88rem; }
.g-najnizsza strong { color: var(--ink); }

/* Pod kartą: opis i specyfikacja w zakładkach, koszty dostawy, pytania */
.g-kp-opis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.g-kp-info { padding: 0 0 1.5rem; }
.g-kp-info__zakladki { padding: .75rem 1.5rem 0; border-bottom: 1px solid var(--line); }
.g-kp-info__zakladki [role="tab"] { margin-bottom: -1px; }
.g-kp-info__panel { max-width: 48rem; padding: 1.25rem 1.5rem 0; }
.g-kp-info__panel .prose h3 { font-size: 1.05rem; }
.g-kp-info__kolekcje { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.g-kp-info__wnetrze { margin-top: 1.5rem; }
.g-dostawa { padding: 1.5rem; }
.g-dostawa h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.g-dostawa__wstep { color: var(--muted); }
.g-dostawa__kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.g-dostawa__kafel { display: grid; justify-items: start; gap: .2rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.g-dostawa__kafel img { width: 3.5rem; height: auto; margin-bottom: .35rem; }
.g-dostawa__kafel strong { color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.g-dostawa__kafel span { color: var(--text); font-size: .88rem; }
.g-dostawa__kafel small { color: var(--muted); font-size: .8rem; }
.g-dostawa__wiecej { margin-top: .9rem; }
@media (max-width: 640px) { .g-dostawa__kafle.is-zwiniete > li:nth-child(n+5) { display: none; } }
@media (min-width: 641px) { .g-dostawa__wiecej { display: none; } }
.g-kp-opis__faq { padding: 1.5rem; }
.g-kp-opis__faq h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.g-pasek-zakupu[hidden] { display: none !important; }
@media (min-width: 961px) { .g-pasek-zakupu:not(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) { display: none !important; } }
.g-link-btn { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Opinie pod kartą w szerokości strony */
.page-body--product .product-reviews { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Przycisk pełnego kreatora (wtyczka XDesigner) bez dawnej granatowej karty — biały z różową ramką */
.g-kp__kup .xdw-own { position: static; display: block; order: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; }
.g-kp__kup .xdw-own:hover { background: none; }
.g-kp__kup .xdw-own__button::before, .g-kp__kup .xdw-own__button::after { content: none; display: none; }
.woocommerce .g-kp__kup .xdw-own__button.button, .woocommerce .g-kp__kup .xdw-own__button.button:hover { display: flex; width: 100%; min-height: 3rem; padding: .6rem 1.25rem; border: 1.5px solid var(--pink-btn); text-align: center; font-size: .95rem; font-weight: 600; }
.woocommerce .g-kp__kup .xdw-own__button.button { background: #fff; color: var(--pink-text); }
.woocommerce .g-kp__kup .xdw-own__button.button:hover { border-color: var(--pink-text); background: var(--pink-soft); color: var(--pink-text); }
.woocommerce .g-kp__kup .xdw-own__button svg { position: static; box-sizing: border-box; width: 1.15rem; height: 1.15rem; padding: 0; translate: none; border-radius: 0; background: none; color: inherit; }
.g-kp__kup .xdw-own small { color: var(--muted); font-size: .85rem; text-align: left; }

/* Kwadraty kolorów wariantu (main.js) w stylu makiety: 24 px, zaokrąglenie 5 px */
.g-kp__kup .swatches--variation .swatch { width: 1.5rem; height: 1.5rem; border-radius: 5px; }
.g-kp__kup .swatches--variation .swatch::before { display: none; }

/* Przyciski w całym sklepie w różu marki (decyzja 11.10.2026): główny różowy z białym napisem,
   po najechaniu biały z różową ramką; drugi — biały z różową ramką */
.btn--primary, .woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button.button,
.woocommerce div.product form.cart .single_add_to_cart_button { border: 1.5px solid var(--pink-btn); background: var(--pink-btn); color: #fff; font-weight: 600; }
.btn--primary:hover, .woocommerce .button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button.button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover { border-color: var(--pink-btn); background: #fff; color: var(--pink-text); }
.btn--secondary, .woocommerce .button, .woocommerce button.button, .woocommerce a.button { border: 1.5px solid var(--pink-btn); background: #fff; color: var(--pink-text); font-weight: 600; }
.btn--secondary:hover, .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { border-color: var(--pink-text); background: var(--pink-soft); color: var(--pink-text); }
.woocommerce div.product form.cart .single_add_to_cart_button { min-height: 3rem; font-size: 1rem; }
@media (min-width: 641px) { .g-dostawa .g-dostawa__wiecej { display: none; } }
.g-kp__kup form.cart { padding: 0; }
.g-kp__kup form.cart .quantity { margin: 0; }
/* Galeria karty produktu: reguły galerii z makiety (rysunki SVG na całe pole) nie dotyczą zdjęć sklepu */
.g-kp__galeria .g-galeria__glowna { aspect-ratio: auto; max-height: none; }
.g-kp__galeria .g-galeria__glowna > .preview { height: auto; }
.g-kp__galeria .g-galeria__glowna > .stage-nav { width: 2.75rem; height: 2.75rem; }
.g-kp__galeria .g-galeria__glowna .stage-nav svg { width: 1.15rem; height: 1.15rem; max-height: none; }
.g-kp__galeria .g-galeria__glowna > .stage-embed, .g-kp__galeria .g-galeria__glowna > .stage-photo { width: auto; height: auto; }
.g-kp__galeria .g-galeria__miniatury .product-gallery__nav { width: 2.25rem; height: 2.25rem; aspect-ratio: auto; padding: 0; border-radius: 50%; }

/* Karta z logo (template-parts/karta-firma.php): przycisk kreatora jest w „Twoje logo”, więc w pudełku
   zakupu zostają tylko pola wtyczki (projekt po powrocie z kreatora) */
.g-kp--logo .g-kp__kup--koszyk .xdw-own { display: none; }
.g-kp--logo .g-kp__kup--koszyk .xdw { margin: 0 0 .25rem; }
.g-kp--logo .g-kp__kup--koszyk .xdw:empty { display: none; }
.g-kp--logo .g-kp__cena--zakup { margin: 0 0 .9rem; color: var(--muted); }
.g-kp--logo .g-kp__cena--zakup strong { margin-right: .3rem; color: var(--ink); font-size: 1.5rem; font-weight: 700; }
.g-kp--logo .g-kp__projekt .g-edytuj { margin-top: .25rem; }
.g-kp__projekt-glowa p { color: var(--muted); }
@media (max-width: 960px) { .g-kp--logo .g-kp__kup--koszyk form.cart .quantity { display: none; } }
/* (od 20.10.2026 pasek z logo także na komputerze — reguły na końcu pliku) */
/* Wąska kolumna koszyka (karta z logo, trzy kolumny): zwarty licznik, przycisk w jednej linii */
.g-kp--trzy .g-kp__kup--koszyk .qty-stepper button { width: 2.1rem; }
.g-kp--trzy .g-kp__kup--koszyk .qty-stepper input.qty { width: 3.4rem; }
.g-kp--trzy .g-kp__kup--koszyk .single_add_to_cart_button { flex-basis: 8rem; padding-inline: .9rem; white-space: nowrap; }
/* „Dla firm”: formularz wyceny w białym panelu bez drugiej karty z cieniem */
.g-wycena .quote { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.g-wycena__kontakt { display: grid; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.g-wycena__kontakt a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.g-wycena__kontakt a:hover { color: var(--pink-text); }
.g-wycena__kontakt .icon { width: 1.05rem; height: 1.05rem; color: var(--blue-text); }
.g-firma-tresc { margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.g-kat__obraz--ikona { display: grid; place-items: center; }
.g-kat__obraz--ikona .icon { width: 2rem; height: 2rem; color: var(--blue-text); }
/* „Zaprojektuj sam”: wybór produktu ze zdjęciem i znakiem „Zaprojektuj sam” */
.g-wybor__obraz { position: relative; aspect-ratio: 4 / 5; }
.g-wybor__obraz img { width: 100%; height: 100%; object-fit: contain; }
.g-plakietki--wybor { position: static; margin-bottom: .2rem; }
/* Panele z tekstem (porady, wskazówki do logo) — tekst w wygodnej szerokości */
.g-firma-tresc > :not(h2) { max-width: 48rem; }
.g-firma-tresc h2 { font-size: 1.25rem; }
/* Dawne strony (kontakt, informacje, konto, kasa) w tej samej szerokości co nagłówek i stopka */
.container { max-width: var(--max); padding-inline: var(--gut); }

/* Koszyk i kasa (bloki WooCommerce) w układzie makiety: białe panele na tle strony, etapy nad nimi */
.g-koszyk__head .page-title { margin: 0; }
.g-etapy li.is-zrobione span { border-color: var(--ok); background: var(--ok); color: #fff; }
.g-etapy a { color: inherit; text-decoration: none; }
.g-etapy a:hover { color: var(--pink-text); }
/* Koszyk i zamówienie (bloki WooCommerce) w panelach wyglądu z 16.10.2026: lista produktów i podsumowanie
   to dwa białe panele z jednym marginesem wewnętrznym, oba od góry (lista nie rozciąga się do wysokości
   podsumowania); w zamówieniu kroki formularza są już kartami, więc bez drugiej ramki wokół nich. */
.wc-block-components-sidebar-layout.wc-block-cart, .wc-block-components-sidebar-layout.wc-block-checkout { align-items: flex-start; }
.wc-block-cart.wc-block-components-sidebar-layout > .wc-block-cart__main,
.wc-block-cart.wc-block-components-sidebar-layout > .wc-block-cart__sidebar,
.wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__sidebar {
	box-sizing: border-box; align-self: flex-start; padding: clamp(1rem, 2.2vw, 1.5rem); border-radius: var(--r-l); background: #fff;
}
.wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__main { padding: 0; background: none; }
.wc-block-cart.wc-block-components-sidebar-layout.is-large > .wc-block-cart__main { width: calc(65% - .75rem); margin-right: 1.5rem; }
.wc-block-cart.wc-block-components-sidebar-layout.is-large > .wc-block-cart__sidebar { width: calc(35% - .75rem); padding-left: clamp(1rem, 2.2vw, 1.5rem); }
.wc-block-checkout.wc-block-components-sidebar-layout.is-large > .wc-block-checkout__main { width: calc(60% - .75rem); margin-right: 1.5rem; }
.wc-block-checkout.wc-block-components-sidebar-layout.is-large > .wc-block-checkout__sidebar { width: calc(40% - .75rem); }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) > :is(.wc-block-cart__main, .wc-block-cart__sidebar) { width: 100%; }
.wc-block-cart.wc-block-components-sidebar-layout:not(.is-large) > .wc-block-cart__sidebar { margin-top: 1rem; }
.wc-block-checkout.wc-block-components-sidebar-layout:not(.is-large) > .wc-block-checkout__sidebar { width: 100%; margin-bottom: 1rem; }
/* Wnętrze podsumowania bez własnych marginesów WooCommerce — tekst, linie i kwoty w jednej kolumnie */
.wc-block-cart__sidebar :is(.wc-block-components-totals-item, .wc-block-components-totals-coupon, .wc-block-components-panel, .wc-block-components-totals-shipping, .gifciak-dostawa-kasa),
.wc-block-checkout__sidebar :is(.wc-block-components-order-summary, .wc-block-components-totals-item, .wc-block-components-totals-coupon, .wc-block-components-panel, .gifciak-dostawa-kasa) { padding-inline: 0; }
.wc-block-cart__sidebar > *, .wc-block-checkout__sidebar > * { margin-inline: 0; background: none; }
.wc-block-cart .wc-block-cart__totals-title { padding-top: 0; }
.wc-block-cart .wc-block-cart-items { width: 100%; }
/* Przyciski „Przejdź do płatności” i „Kupuję i płacę” w różu marki, jak „Dodaj do koszyka” */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link), .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
	border: 1.5px solid var(--pink-btn) !important; border-radius: var(--r) !important; background: var(--pink-btn) !important; color: #fff !important; font-weight: 600 !important;
}
@media (hover: hover) {
	.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover,
	.wc-block-components-button.wc-block-cart__submit-button:not(.is-link):hover, .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover { background: #fff !important; color: var(--pink-text) !important; }
}
/* Dane pozycji jedna pod drugą (bez ukośników między nimi); na końcu przycisk „Dodaj / Edytuj grawer” */
.wc-block-components-product-details { display: grid; gap: .15rem; }
.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }
.wc-block-components-product-details__zmiana-projektu { order: 99; margin-top: .5rem; }
/* Przycisk na samym końcu danych pozycji — także pod kolorem (osobna lista wariantu WooCommerce) */
.wc-block-components-product-metadata { display: flex; flex-direction: column; gap: .15rem; }
.wc-block-components-product-metadata > .wc-block-components-product-details:has(.wc-block-components-product-details__zmiana-projektu) { order: 2; }
/* Kreski tylko między wierszami listy produktów: koszyk od 18.10.2026 na końcu pliku */
/* Telefon: zwijane podsumowanie zamówienia ma własne marginesy WooCommerce */
.wc-block-checkout.wc-block-components-sidebar-layout:not(.is-large) > .wc-block-checkout__sidebar { padding: 0; }
.wc-block-components-product-details__zmiana-projektu .wc-block-components-product-details__name { display: none; }
/* Kasa: podsumowanie bez „Edytuj grawer” i „Dodaj inny kolor” (właściciel 21.10.2026) — zostają w koszyku i koszyku z boku */
.wc-block-checkout .wc-block-components-product-details__zmiana-projektu { display: none; }
.g-pozycja-grawer, .wc-block-components-product-details .g-pozycja-grawer {
	display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1.5px solid var(--pink-btn); border-radius: var(--r-s);
	background: #fff; color: var(--pink-text) !important; font-size: .85rem; font-weight: 600; line-height: 1.2; text-decoration: none !important;
}
.g-pozycja-grawer::before {
	content: ""; width: .95rem; height: .95rem; background: currentColor;
	-webkit-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.1-4.6L15.6 4.9a2.1 2.1 0 0 1 3 0l.5.5a2.1 2.1 0 0 1 0 3L8.6 18.9 4 20zM13.6 6.9l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.1-4.6L15.6 4.9a2.1 2.1 0 0 1 3 0l.5.5a2.1 2.1 0 0 1 0 3L8.6 18.9 4 20zM13.6 6.9l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) { .g-pozycja-grawer:hover { background: var(--pink-btn); color: #fff !important; } }
/* Karta po powrocie z kreatora dla pozycji z koszyka: wyjaśnienie nad przyciskiem */
.g-zastap { display: flex; gap: .5rem; align-items: flex-start; width: 100%; margin: 0 0 .75rem; padding: .6rem .75rem; border-radius: var(--r-s); background: var(--blue-soft); color: var(--text); font-size: .88rem; }
.g-zastap .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--blue-text); }
/* Etapy zamówienia na telefonie w jednym wierszu pod tytułem */
@media (max-width: 640px) {
	.g-koszyk__head { flex-direction: column; align-items: flex-start; gap: .6rem; }
	.g-koszyk__head .g-etapy { flex-wrap: nowrap; gap: .35rem; font-size: .78rem; white-space: nowrap; }
	.g-koszyk__head .g-etapy span { width: 1.4rem; height: 1.4rem; font-size: .72rem; }
	.g-koszyk__head .g-etapy li { gap: .35rem; }
	.g-koszyk__head .g-etapy li + li::before { width: .6rem; margin-right: 0; }
}

/* Sekcje z treścią z poprzedniej wersji sklepu (SEO): aranżacje, grawer na zlecenie, kreator, „Dla firm” */
.g-panel-sekcja { margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-panel-sekcja__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end; margin-bottom: 1.75rem; }
.g-panel-sekcja__head h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-panel-sekcja__head p { margin: 0 0 .5rem; color: var(--muted); }
.g-panel-sekcja__head .g-akcje { margin-top: .75rem; align-items: center; }
.g-cechy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; }
.g-cechy li { display: grid; align-content: start; gap: .35rem; }
.g-cechy .icon { width: 1.6rem; height: 1.6rem; color: var(--blue-text); }
.g-cechy h3 { margin: .25rem 0 0; font-size: 1rem; font-weight: 600; }
.g-cechy p { margin: 0; color: var(--muted); font-size: .92rem; }
.g-inspiracje > .section__title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 600; }
.g-inspiracje .inspiracje__intro { max-width: 48rem; color: var(--muted); }
.g-dwa--tekst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.g-dwa--tekst > .g-firma-tresc { margin-top: 0; }
.g-kp-info__wiecej { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.g-kp-info__wiecej h3 { margin: 0 0 .5rem; font-size: 1rem; }
.g-kp-info__wiecej ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) {
	.g-panel-sekcja__head, .g-dwa--tekst { grid-template-columns: minmax(0, 1fr); }
	.g-cechy, .g-panel-sekcja#grawer-na-zlecenie .g-cechy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.g-cechy, .g-panel-sekcja#grawer-na-zlecenie .g-cechy { grid-template-columns: minmax(0, 1fr); }
}
.g-inspiracje.inspiracje { padding-block: clamp(1.5rem, 4vw, 2.75rem); background: #fff; }

/* ==========================================================================
   Zdjęcia naszych produktów zamiast grafik z makiety (16.10.2026, prośba właściciela:
   produkty jak na gifciak.pl). Kafelki kategorii i menu — zdjęcie pierwszego produktu,
   produkt „Zaprojektuj sam” z motywem „Tu Twój projekt” (main.css, .motif).
   ========================================================================== */
.g-okladka { position: relative; display: block; height: 100%; max-width: 100%; margin-inline: auto; }
.g-okladka > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Zdjęcie ma w kafelku od razu swoje pełne miejsce (dawniej pole 5,5 rem powiększone o 20 % wystawało poza
   siebie i zasłaniało nazwę i ramkę), a po najechaniu rośnie tylko o 6 % — nie dochodzi do nazwy ani do
   ramki (20.10.2026). */
.g-kat__obraz:not(.g-kat__obraz--ikona) { max-width: 6.6rem; margin-top: .35rem; }
.g-kat__obraz > img, .g-kat__obraz > .g-okladka { transform: none; transition: transform .2s ease; }
.g-kat:hover .g-kat__obraz > img, .g-kat:hover .g-kat__obraz > .g-okladka { transform: scale(1.06); }
.g-kat__obraz .g-okladka > img, .g-kat:hover .g-kat__obraz .g-okladka > img { transform: none; mix-blend-mode: multiply; }
.g-kolko > img { width: 100%; height: 100%; object-fit: contain; }
.g-wybor__obraz > .motif { transition: none; }
/* Aranżacje na banerach i w dwóch drogach: zdjęcia z tłem, bez mieszania z kolorem panelu */
.g-wizualizacja--foto > img { mix-blend-mode: normal; }
.g-droga > .g-wizualizacja--foto { position: relative; }
.g-droga > .g-wizualizacja--foto > img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 40%; }
.g-droga--blekit > .g-wizualizacja--foto > img { object-position: 50% 30%; }
.g-baner > .g-wizualizacja--foto { left: 44%; width: auto; }
.g-baner > .g-wizualizacja--foto > img { object-fit: cover; object-position: 50% 62%; }
@media (max-width: 760px) {
	.g-baner > .g-wizualizacja--foto { left: auto; width: 100%; }
}

/* Opis produktu na całą szerokość sekcji (prośba właściciela 16.10.2026, jak strony bez wąskiej kolumny);
   parametry „Wymiary i wnętrze” na komputerze w dwóch kolumnach, kreski tylko między wierszami kolumny */
.g-kp-info__panel, .g-kp-info__panel > p, .g-kp-info .prose, .g-kp-info .g-spec { max-width: none; }
/* Specyfikacja (od 22.10.2026, gifciak_spec_html()): kafelki z najważniejszymi faktami i karty według tematu,
   w kartach etykieta nad wartością — łatwiej przeczytać niż długą tabelę w dwóch kolumnach */
.g-spec-skrot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.g-spec-skrot li { display: grid; gap: .2rem; padding: 1rem 1.15rem; border-radius: var(--r); background: var(--blue-soft); }
.g-spec-skrot span { color: var(--blue-text); font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.g-spec-skrot strong { color: var(--ink); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.g-spec-grupy { columns: 2 20rem; column-gap: 1.25rem; }
.g-spec-grupa { break-inside: avoid; margin: 0 0 1.25rem; padding: 1.15rem 1.25rem .6rem; border-radius: var(--r); background: var(--mist); }
.g-spec-grupa h3 { margin: 0 0 .35rem; color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.g-kp-info .g-spec-grupa .g-spec { display: block; max-width: none; }
.g-kp-info .g-spec-grupa .g-spec div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding: .6rem 0; border-top: 0; }
.g-kp-info .g-spec-grupa .g-spec div + div { border-top: 1px solid var(--line); }
.g-spec-grupa dt { color: var(--muted); font-size: .85rem; }
.g-spec-grupa dd { color: var(--ink); font-size: .95rem; font-weight: 500; line-height: 1.45; }
@media (min-width: 900px) {
	.g-kp-info .g-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
	.g-kp-info .g-spec div + div { border-top: 0; }
	.g-kp-info .g-spec div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Karta z polem imienia (edytor na karcie): gdy podgląd z kreatora zastąpi zdjęcie (main.js chowa
   #product-preview), ramka galerii bierze wysokość z podglądu, a nie zapada się do paska */
.g-kp__galeria .g-galeria__glowna:has(> .preview[hidden]) > .stage-embed:not([hidden]) { position: relative; inset: auto; width: 100%; max-width: min(30rem, 100%); height: auto; aspect-ratio: 4 / 5; }
.g-kp__galeria .g-galeria__glowna:has(> .preview[hidden]):has(> .stage-embed[hidden]) { min-height: min(38rem, 72vh); }

/* Przyciski pełnego kreatora na kartach produktów (pudełko zakupu i „Twoje logo” na karcie z logo),
   18.10.2026, prośba właściciela („wszędzie taki efekt”): te same kolory, ale większe, ze strzałką
   i — dopóki nie ma projektu — z dwoma delikatnymi błyskami obwódki, gdy pierwszy raz pojawią się
   na ekranie (wyglad.js; bez ruchu przy prefers-reduced-motion). Przycisk na zdjęciu zostaje mały. */
.g-kp .g-edytuj,
.woocommerce .g-kp .g-kp__kup .xdw-own__button.button {
	min-height: 3.6rem; border-width: 2px; font-size: 1.06rem; font-weight: 700;
}
.g-kp .g-edytuj .icon,
.woocommerce .g-kp .g-kp__kup .xdw-own__button.button svg { width: 1.35rem; height: 1.35rem; }
.g-kp .g-edytuj::after,
.woocommerce .g-kp .g-kp__kup .xdw-own__button.button::after {
	content: ""; display: block; position: static; flex: none; width: 1.2rem; height: 1.2rem; margin-left: .1rem; translate: none;
	background: currentColor;
	-webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat;
	transition: translate .15s ease;
}
.g-kp .g-edytuj:hover::after,
.woocommerce .g-kp .g-kp__kup .xdw-own__button.button:hover::after { translate: .25rem 0; }
@keyframes g-blysk {
	0% { box-shadow: 0 0 0 0 rgba(219, 31, 132, .45); }
	70%, 100% { box-shadow: 0 0 0 .6rem rgba(219, 31, 132, 0); }
}
.g-blysk { animation: g-blysk 1.3s ease-out 2; }

/* ---------- Koszyk od 18.10.2026 (prośba właściciela: przejrzyście, układ jak na OpenGift.pl, bez kopiowania) ----------
   Nad koszykiem jedno zdanie Gifciaka (cart.review, wariant kompakt) i „Wróć do zakupów” nad tytułem (page.php).
   Lista: tabelka Produkt | Ilość | Cena za szt. | Łącznie | usuń, gdy lista ma co najmniej 46 rem; węższa — produkt
   nad ilością i kwotą. Podsumowanie w jednej kolumnie (kolejność stylem): tytuł, komunikaty (pasek do darmowej
   dostawy), kwoty, „Dostawa: od …” i „Do zapłaty” (gifciak-sklep, assets/dostawa.js), „Dostawa i płatność”,
   kod rabatowy, termin, zwrot, telefon, logotypy płatności. Sposób dostawy wybiera się w kasie.
   Telefon: pasek z kwotą i przyciskiem (dostawa.js) zamiast przyklejonego przycisku WooCommerce. */
.g-koszyk__tytul { display: grid; gap: .4rem; }
.g-koszyk__wroc { display: inline-flex; align-items: center; gap: .25rem; justify-self: start; color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.g-koszyk__wroc .icon { width: 1rem; height: 1rem; }
.g-koszyk__wroc:hover { color: var(--pink-text); }
.wc-page [data-gfk="cart.review"] { margin: 0 0 1rem; padding: .5rem 1rem .5rem .6rem; border-color: transparent; border-radius: var(--r-l); background: #fff; }

/* Lista produktów — wąska (telefon, tablet): zdjęcie | nazwa, cena za sztukę, dane; pod spodem ilość | łącznie */
.wc-block-cart .wc-block-cart__main { container: g-koszyk / inline-size; }
.wc-block-cart .wc-block-cart__main :is(table.wc-block-cart-items, .wc-block-cart-items > tbody) { display: block; width: 100%; margin: 0; border: 0; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row {
	display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: start; gap: .35rem 1rem;
	padding: 1.25rem 0; border: 0;
}
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row:first-child { padding-top: 0; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row:last-child { padding-bottom: 0; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row + .wc-block-cart-items__row { border-top: 1px solid var(--line); }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__product,
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap { display: contents; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > * { grid-column: 2 / -1; min-width: 0; margin: 0; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__image { grid-column: 1; grid-row: 1 / span 3; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { grid-row: 1; font-weight: 600; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices { grid-row: 2; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price::after { content: " / szt."; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata { grid-row: 3; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { grid-column: 1 / 3; grid-row: 4; margin-top: .6rem; }
.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__total { grid-column: 3; grid-row: 4; align-self: center; margin-top: .6rem; text-align: right; font-weight: 700; white-space: nowrap; }

/* Lista produktów — szeroka: tabelka z nagłówkami kolumn (nagłówek „Szczegóły” WooCommerce niesie napisy
   „Ilość” i „Cena za szt.”, czytnik ekranu czyta jego ukryty tekst) */
@container g-koszyk (min-width: 46rem) {
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items > thead { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items :is(.wc-block-cart-items__header, .wc-block-cart-items__row) {
		display: grid; grid-template-columns: 6rem minmax(0, 1fr) 8rem 6.5rem 7rem 2.5rem; column-gap: 1.25rem; align-items: start;
	}
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header { padding: 0 0 .75rem; border-bottom: 1px solid var(--line); }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header > th { display: block; padding: 0; border: 0; text-align: left; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header > .wc-block-cart-items__header-image { grid-column: 1 / 3; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header > .wc-block-cart-items__header-product { display: grid; grid-column: 3 / 5; grid-template-columns: 8rem 6.5rem; column-gap: 1.25rem; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header-product::before { content: "Ilość"; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header-product::after { content: "Cena za szt."; text-align: right; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header > .wc-block-cart-items__header-total { grid-column: 5; text-align: right; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row:first-child { padding-top: 1.25rem; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > * { grid-column: 2; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata { grid-row: 2; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__prices { grid-column: 4; grid-row: 1; justify-self: end; padding-top: .7rem; color: var(--text); font-size: .95rem; text-align: right; white-space: nowrap; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price::after { content: none; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap > .wc-block-cart-item__quantity { display: contents; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity > * { grid-column: 3; grid-row: 1; margin: 0; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity > .wc-block-cart-item__remove-link { grid-column: 6; justify-self: end; }
	.wc-block-cart .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__total { grid-column: 5; grid-row: 1; align-self: start; margin: 0; padding-top: .7rem; }
}

/* Podsumowanie: jedna kolumna, kolejność stylem (bloki WooCommerce i wstawki są rodzeństwem dzięki display: contents) */
.wc-block-cart .wp-block-woocommerce-cart-totals-block { display: flex; flex-direction: column; }
.wc-block-cart .wp-block-woocommerce-cart-totals-block > .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .slot-wrapper,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .slot-wrapper > .wc-block-components-order-meta { display: contents; }
.wc-block-cart .wp-block-woocommerce-cart-totals-block > *, .wc-block-cart .wp-block-woocommerce-cart-order-summary-block > *,
.wc-block-cart .wc-block-components-order-meta > * { order: 6; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-cart__totals-title { order: 1; }
.wc-block-cart .wc-block-components-order-meta > .gifciak-infos { order: 2; margin: 0 0 1rem; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-totals-block { order: 3; padding: 0; border: 0; }
.wc-block-cart .wc-block-components-order-meta > .gifciak-suma--dostawa { order: 4; }
.wc-block-cart .wc-block-components-order-meta > .gifciak-suma--razem { order: 5; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:not(.gifciak-suma):has(> .wc-block-components-totals-footer-item) { order: 5; }
.wc-block-cart .wp-block-woocommerce-cart-totals-block > .wc-block-cart__submit { order: 7; margin: 1rem 0 0; }
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wp-block-woocommerce-cart-order-summary-coupon-form-block { order: 8; margin-top: 1.5rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.wc-block-cart .wp-block-woocommerce-cart-totals-block > .cart-trust { order: 9; }
/* Dostawę i sumę z najtańszą stawką pokazuje gifciak-sklep — wtedy bez wierszy WooCommerce */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block:has(.gifciak-suma--dostawa) .wp-block-woocommerce-cart-order-summary-shipping-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block:has(.gifciak-suma--razem) > .wc-block-components-totals-wrapper:not(.gifciak-suma):has(> .wc-block-components-totals-footer-item) { display: none; }
.wc-block-cart .gifciak-suma .wc-block-components-totals-item { flex-wrap: wrap; }
.wc-block-cart .gifciak-suma .wc-block-components-totals-item__description { flex-basis: 100%; margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.wc-block-cart .gifciak-suma--razem .wc-block-components-totals-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) { font-size: var(--step-1); font-weight: 700; }
.wc-block-cart .wc-block-cart__totals-title { padding-bottom: 1rem; font-weight: 700; }

/* Pod przyciskiem: termin, zwrot, telefon i małe logotypy płatności (inc/woocommerce.php) */
.cart-trust { display: grid; gap: 1rem; margin: 0; padding: 1.25rem 0 0; }
.cart-trust__lista { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.cart-trust__platnosci { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.cart-trust .cart-trust__platnosci li { display: grid; place-items: center; width: 3.25rem; height: 2.1rem; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cart-trust__platnosci img { display: block; width: 100%; height: 100%; padding: .25rem .3rem; box-sizing: border-box; object-fit: contain; }
.cart-trust .cart-trust__platnosci .icon { width: 1.2rem; height: 1.2rem; color: var(--ink); }

/* Telefon: pasek z kwotą i przyciskiem, gdy WooCommerce rysuje przyklejony przycisk (wąski koszyk) */
.gifciak-pasek-koszyka { display: none; }
.wc-block-cart .wc-block-cart__submit-container--sticky { display: none !important; }
body:has(.wc-block-cart__submit-container--sticky) .gifciak-pasek-koszyka {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: .75rem;
	padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(7, 30, 61, .12);
}
body:has(.wc-block-cart__submit-container--sticky) .gifciak-pasek-koszyka ~ .gifciak-pasek-koszyka { display: none; }
body:has(.wc-block-cart__submit-container--sticky) .g-stopka { padding-bottom: 6.5rem; }
body:has(.wc-block-cart__submit-container--sticky) .g-komunikaty { bottom: 5.5rem; }
.gifciak-pasek-koszyka__info { display: grid; justify-items: start; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gifciak-pasek-koszyka__info small { color: var(--muted); font-size: .78rem; }
.gifciak-pasek-koszyka__info strong { color: var(--ink); font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.gifciak-pasek-koszyka__info span { color: var(--pink-text); font-size: .8rem; font-weight: 600; }
.gifciak-pasek-koszyka__dalej {
	display: inline-flex; flex: 1; align-items: center; justify-content: center; max-width: 15rem; min-height: 3rem; margin-left: auto; padding: .6rem 1rem;
	border: 1.5px solid var(--pink-btn); border-radius: var(--r); background: var(--pink-btn); color: #fff; font-weight: 600; text-align: center; text-decoration: none;
}
@media (hover: hover) { .gifciak-pasek-koszyka__dalej:hover { background: #fff; color: var(--pink-text); } }

/* ---------- Typografia od 18.10.2026: Poppins, lżej i odrobinę mniejsza ----------
   Prośba właściciela: „dajmy Poppins i dodatkowo odchudźmy trochę niektóre elementy, ew. pomniejszmy … chcę
   standardy, które są najbardziej polecane”. Poppins jest szerszy i ma wyższe małe litery niż Schibsted Grotesk,
   więc te same rozmiary wyglądały w nim większe. Skala (zalecenia czytelności sklepów: tekst ≥ 15–16 px,
   wysokość wiersza ok. 1,6, nazwy produktów 14–15 px, ceny 16–18 px, przyciski ≥ 44 px):
   tekst 400, nazwy produktów, menu i etykiety 500, nagłówki, ceny i przyciski 600 (grubszych plików nie ma —
   fonts.css). Pola formularzy na telefonie zostają ≥ 16 px. */
html { font-synthesis-weight: none; }
.g-hero__tytul, .g-glowny__tytul { letter-spacing: -.025em; }
.g-sekcja__head h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.g-h1 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); }
.g-kp .g-produkt__tytul { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); line-height: 1.35; }
/* Mocniej niż reguła półgrubych nagłówków wyżej (html body :is(h3, .g-faq summary …)) — tytuł karty to h3 */
html body .g-karta .g-karta__tytul { font-size: .94rem; font-weight: 500; line-height: 1.45; }
.g-karta__cena { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
.g-karta__cena small { font-size: .78rem; font-weight: 400; }
.g-nav__lista > li > a, .g-nav__btn { font-weight: 500; }
@media (max-width: 640px) {
	html body .g-karta .g-karta__tytul { font-size: .84rem; }
	.g-karta__cena { font-size: 1rem; }
	.g-karta__cena small { font-size: .74rem; }
}
/* Lżej także drobne elementy, które w Poppins wyglądały „kulfoniasto”: zalety pod hasłem, nazwy kategorii,
   nieaktywne zakładki produktów, przyciski filtrów. Aktywna zakładka zostaje półgruba. */
.g-atuty { font-weight: 500; }
.g-kat { font-weight: 500; }
html body .g-zakladki--linia [role="tab"]:not([aria-selected="true"]) { font-weight: 500; }
.filter-toggle { font-weight: 500; }
@media (max-width: 640px) {
	/* Cena na karcie w dwóch liniach: kwota, pod nią „za 1 szt. z grawerem” (dopisek nie łamie się w połowie) */
	.g-karta__cena small { display: block; margin-top: .1rem; line-height: 1.35; }
	.g-zakladki--linia [role="tab"] { font-size: 1rem; }
	.g-hero__tytul { font-size: clamp(2.2rem, 9vw, 2.8rem); }
	.shop-head__desc { font-size: .95rem; }
}

/* ---------- „Zaprojektuj sam” od 19.10.2026 (page-templates/kreator.php): od razu produkty do personalizacji ----------
   Krótki nagłówek z faktami, rodzaje produktów jako przyciski (gdy jest ich kilka), siatki kart z przyciskiem
   „Projektuj” (prosto do kreatora), karta znakowania na zlecenie, trzy kroki, pytania i tekst strony. */
.g-kreator-glowa { margin: 0 0 1.25rem; }
.g-kreator-glowa h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.g-kreator-glowa > p { max-width: 48rem; margin: 0; color: var(--muted); }
.g-kreator-glowa .g-atuty { margin-top: .9rem; color: var(--ink); font-size: .92rem; }
.g-kreator-rodzaj { margin-top: 1.25rem; }
.g-karta__cta { margin-top: .75rem; min-height: 2.6rem; font-size: .92rem; }
.g-karta__cta .icon { width: 1rem; height: 1rem; }
/* Karta usługi w siatce produktów: znakowanie na przedmiocie klienta */
.g-karta--usluga {
	display: grid; align-content: center; justify-items: start; gap: .5rem; padding: 1.25rem; border-radius: var(--r-l);
	background: var(--pink-soft); color: var(--ink); text-decoration: none;
}
.g-karta--usluga__ikona { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; color: var(--pink-text); }
.g-karta--usluga__ikona .icon { width: 1.35rem; height: 1.35rem; }
.g-karta--usluga strong { font-size: 1.02rem; font-weight: 600; }
.g-karta--usluga > span:not(.g-wiecej):not(.g-karta--usluga__ikona) { color: var(--text); font-size: .9rem; line-height: 1.5; }
.g-karta--usluga:hover strong, .g-karta--usluga:hover .g-wiecej { color: var(--pink-text); }
.g-kroki--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cztery kroki (strona główna „Od projektu do paczki”): w rzędzie, na tablecie 2 × 2, na telefonie jeden pod drugim */
.g-kroki--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .g-kroki--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g-kroki--4 { grid-template-columns: minmax(0, 1fr); } }
/* „Od projektu do paczki” na stronie głównej (21.10.2026, właściciel: „trochę bardziej efektowna”): kroki jako
   jasne karty z ikoną w białym kółku i różowym numerem, połączone przerywaną błękitną linią jak droga paczki;
   ostatni krok (wysyłka) na jasnym różu. Pod spodem przyciski: kreator i oferta z logo. */
.g-kroki--ikony { gap: 1rem 2rem; }
.g-kroki--ikony .g-etap { position: relative; gap: .45rem; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--r); background: var(--mist); }
.g-kroki--ikony .g-etap:last-child { background: var(--pink-soft); }
.g-kroki--ikony .g-etap strong { font-size: 1.1rem; }
.g-etap__ikona { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .55rem; border-radius: 50%; background: #fff; color: var(--blue-text); }
.g-etap:last-child .g-etap__ikona { color: var(--pink-text); }
.g-etap__ikona .icon { width: 1.75rem; height: 1.75rem; }
.g-kroki .g-etap__ikona .g-etap__nr { position: absolute; top: -.2rem; right: -.4rem; display: grid; place-items: center; min-width: 1.55rem; height: 1.55rem; padding: 0 .3rem; border: 2px solid var(--mist); border-radius: 999px; background: var(--pink-btn); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1; }
.g-kroki .g-etap:last-child .g-etap__nr { border-color: var(--pink-soft); }
.g-proces__stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; }
.g-proces__stopka .g-akcje { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.g-proces__stopka .g-proces__pomoc { margin: 0; }
@media (min-width: 1181px) {
	/* Przerywana linia od ikony do ikony następnego kroku (nad kartą obok, pod jej ikoną) */
	.g-kroki--ikony .g-etap:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: calc(1.4rem + 1.75rem - 1px); left: calc(1.3rem + 3.5rem + .9rem); right: calc(-2rem - .5rem); height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); }
}
@media (max-width: 640px) {
	/* Telefon: ikona i tytuł w jednym rzędzie, opis pod nimi na całą szerokość karty — krótsza sekcja */
	.g-kroki--ikony .g-etap { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem .9rem; padding: 1.1rem 1rem 1.2rem; }
	.g-kroki--ikony .g-etap__ikona { width: 3rem; height: 3rem; margin: 0; }
	.g-kroki--ikony .g-etap > span:last-child { grid-column: 1 / -1; }
	.g-etap__ikona .icon { width: 1.5rem; height: 1.5rem; }
	.g-proces__stopka .g-akcje, .g-proces__stopka .g-btn { width: 100%; }
}
.g-proces__pomoc { margin: 1.25rem 0 0; color: var(--muted); }
.g-kreator-tekst { margin-top: 1.25rem; }
@media (max-width: 640px) {
	.g-kroki--3 { grid-template-columns: minmax(0, 1fr); }
	.g-karta__cta { min-height: 2.4rem; padding-inline: .5rem; font-size: .85rem; }
	.g-karta--usluga { grid-column: 1 / -1; }
}

/* Rząd przycisków (rodzaje produktów, pokrewne kolekcje i podkategorie nad listą) — przewijany palcem na telefonie */
.g-pokrewne { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.g-pokrewne__el {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .95rem; border: 1px solid var(--line-2);
	border-radius: 99px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 500; white-space: nowrap; text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.g-pokrewne__el:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-pokrewne__el[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.g-pokrewne__licz { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.g-pokrewne__el[aria-current="page"] .g-pokrewne__licz { color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) {
	.g-pokrewne { flex-wrap: nowrap; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); overflow-x: auto; scrollbar-width: none; }
	.g-pokrewne::-webkit-scrollbar { display: none; }
}

/* Listy od 19.10.2026: wstęp pod H1 zwinięty do dwóch linii z „Więcej” (wyglad.js; bez JS cały tekst),
   rząd przycisków .g-pokrewne (wyżej; .g-rzad to karuzela produktów), karta „Zaprojektuj sam” na początku list, które jej nie mają */
.js .shop-head__desc.is-zwiniety { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.js .shop-head__desc.is-zwiniety p { display: inline; margin: 0; }
.shop-head__wiecej { margin-top: .25rem; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shop-head__wiecej:hover { color: var(--pink-text); }
.shop-layout__main .g-pokrewne { margin-bottom: 1rem; }
@media (min-width: 960px) { .shop-layout__main .g-pokrewne--kategorie { display: none; } }
.g-pokrewne__el[hidden] { display: none; }
.g-pokrewne__wiecej { border-style: dashed; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }

/* Karta produktu od 19.10.2026 (właściciel): zdjęcie i miniatury w jednej białej sekcji; miniatury z cienką
   ramką, wybrana — granatową. Opis pod przyciskiem kreatora z oddechem (WooCommerce ustawia przyciskom
   float: left, przez co opis zaczynał się tuż pod ramką), rząd „ilość + Dodaj do koszyka” na całą szerokość
   (puste ::before/::after z clearfixu WooCommerce były w nim dodatkowymi odstępami). */
.g-kp__galeria .g-galeria { padding-bottom: clamp(.75rem, 1.6vw, 1.1rem); border-radius: var(--r-l); background: #fff; }
.g-kp__galeria .g-galeria__glowna { border-radius: var(--r-l) var(--r-l) 0 0; }
.g-kp__galeria .g-galeria__miniatury { margin-top: 0; padding-inline: clamp(.75rem, 1.6vw, 1.1rem); }
.g-kp__galeria .product-gallery__thumb { border-color: var(--line); }
.g-kp__galeria .product-gallery__thumb:hover { border-color: var(--line-2); }
.g-kp__galeria .product-gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }
.woocommerce .g-kp .g-kp__kup .xdw-own__button.button { float: none; }

/* Karta produktu od 20.10.2026 (właściciel):
   - zdjęcie z galerii bez „obwoluty” — bez białego pola z cieniem i zaokrągleniem wokół zdjęcia (gifciak.css),
     zdjęcie mieści się w polu galerii (wiersz siatki nie rośnie do naturalnej wysokości zdjęcia),
   - na dużym ekranie miniatury w kolumnie z lewej, przewijane w pionie, bez strzałek i wygaszeń krawędzi,
   - opinie klientów w białym panelu jak pozostałe sekcje karty, bez kreski nad nimi. */
.g-kp__galeria .stage-photo { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.g-kp__galeria .stage-photo__zoom { display: grid; place-items: center; min-height: 0; }
.g-kp__galeria .stage-photo__zoom img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; background: none; }
.powieksz__caption:empty { display: none; }
/* Powiększenie (20.10.2026, właściciel): „Zamknij” w prawym górnym rogu ekranu, nie na zdjęciu (zasłaniał
   jego róg i strzałkę „dalej”); okno niżej, żeby przycisk nigdy na nie nie nachodził. Zdjęcie bez szarego tła. */
.powieksz { max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); }
.powieksz img { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); background: none; }
.powieksz__close { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); z-index: 5; box-shadow: 0 4px 14px rgba(7, 30, 61, .25); }
.powieksz__close:hover { color: var(--pink-text); }
/* Telefon: strzałki i licznik w rzędzie pod zdjęciem (na wąskim zdjęciu licznik wchodził pod strzałkę) */
@media (max-width: 640px) {
	.powieksz__obraz:has(> .powieksz__nav:not([hidden])) { padding-bottom: 3.5rem; }
	.powieksz__nav { top: auto; bottom: 0; translate: none; }
	.powieksz__nav--prev { left: calc(50% - 5.5rem); }
	.powieksz__nav--next { right: calc(50% - 5.5rem); }
	.powieksz__licznik { top: auto; bottom: .45rem; left: 50%; translate: -50% 0; background: none; }
}
@media (min-width: 1100px) {
	.g-kp__galeria .g-galeria:has(> .g-galeria__miniatury) { display: grid; grid-template-columns: auto minmax(0, 1fr); padding-bottom: 0; }
	.g-kp__galeria .g-galeria:has(> .g-galeria__miniatury) > .g-galeria__glowna { grid-column: 2; grid-row: 1; border-radius: 0 var(--r-l) var(--r-l) 0; }
	.g-kp__galeria .g-galeria > .g-galeria__miniatury { grid-column: 1; grid-row: 1; align-items: stretch; height: 0; min-height: 100%; margin: 0; padding: clamp(.75rem, 1.6vw, 1.1rem) 0 clamp(.75rem, 1.6vw, 1.1rem) clamp(.75rem, 1.6vw, 1.1rem); }
	.g-kp__galeria .g-galeria > .g-galeria__miniatury .product-gallery { flex-direction: column; height: 100%; padding: .125rem; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; -webkit-mask-image: none; mask-image: none; }
	.g-kp__galeria .g-galeria > .g-galeria__miniatury .product-gallery__nav { display: none; }
	/* Karta „Dla firm” w trzech kolumnach: niższe zdjęcie, więc mniejsze miniatury (pięć bez przewijania) */
	.g-kp--trzy .g-kp__galeria .g-galeria > .g-galeria__miniatury .product-gallery__thumb { flex-basis: 4.25rem; width: 4.25rem; height: 4.25rem; }
}
.single-product .reviews { margin-top: var(--kp-odstep, 1.25rem); padding: clamp(1.25rem, 2.5vw, 2rem); border: 0; border-radius: var(--r-l); background: #fff; }
.g-kp__kup .xdw-own small[id^="xdw-own-note"], .g-kp__kup .xdw-own__opis { margin: .8rem 0 .4rem; }
.woocommerce .g-kp .g-kp__kup form.cart::before, .woocommerce .g-kp .g-kp__kup form.cart::after,
.woocommerce .g-kp .g-kp__kup .woocommerce-variation-add-to-cart::before, .woocommerce .g-kp .g-kp__kup .woocommerce-variation-add-to-cart::after { content: none; display: none; }

/* Panel „Produkty” z zakładkami (od 19.10.2026, menu bez działu „Prezenty”, inc/nawigacja.php): zakładki z lewej
   na jasnym tle — wybrana na białym tle, półgrubo i na różowo (bez pasków z boku); obok rodzaje produktów albo
   kolekcje wybranej grupy w trzech kolumnach z małym zdjęciem; z prawej karta z Gifciakiem. Menu boczne: grupy
   kolekcji rozwijane pod „Produktami”. */
.g-mega__karta--zakladki { grid-template-columns: 15rem minmax(0, 1fr) 17rem; }
.g-mega__taby { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .75rem; border-right: 1px solid var(--line); background: var(--mist); }
.g-mega__tab {
	display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 2.75rem;
	padding: .5rem .75rem; border: 0; border-radius: var(--r); background: none; color: var(--ink);
	font: inherit; font-size: .95rem; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer;
}
.g-mega__tab .icon { width: 1rem; height: 1rem; color: var(--muted); }
.g-mega__tab:hover { color: var(--pink-text); }
.g-mega__tab[aria-selected="true"] { background: #fff; color: var(--pink-text); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 30, 61, .06); }
.g-mega__tab[aria-selected="true"] .icon { color: var(--pink-text); }
.g-mega__panel { display: flex; flex-direction: column; flex: 1; }
/* Rodzaje produktów: rząd okrągłych zdjęć na całą szerokość (przy kilkunastu rodzajach kilka rzędów), pod nim grupy linków */
.g-mega__karta--zakladki .g-mega__tresc { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.g-mega__karta--zakladki .g-mega__tresc > .g-mega__lista { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.g-mega__karta--zakladki .g-mega__grupy { columns: 4 10rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.g-mega__panel[hidden] { display: none; }
.g-mega__lista--kolekcje { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .5rem; }
.g-mega__lista--kolekcje .g-mega__poz { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .65rem; padding: .35rem .5rem; }
.g-mega__lista--kolekcje .g-kolko { --k: 2.75rem; }
.g-mega__lista--kolekcje .g-mega__poz strong { font-size: .92rem; font-weight: 500; }
.g-mega__lista--kolekcje .g-mega__poz[aria-current="page"] strong { color: var(--pink-text); font-weight: 600; }
.g-mega__lista--kolekcje + .g-mega__stopka { margin-top: auto; }
@media (max-width: 1240px) {
	.g-mega__karta--zakladki { grid-template-columns: 13rem minmax(0, 1fr) 14rem; }
}
.g-szuflada__grupy { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.g-szuflada__grupy-tytul { margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.g-szuflada__grupy details + details { border-top: 1px solid var(--line); }
.g-szuflada__grupy summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; color: var(--ink); font-size: 1rem; font-weight: 500; cursor: pointer; list-style: none; }
.g-szuflada__grupy summary::-webkit-details-marker { display: none; }
.g-szuflada__grupy summary .icon { width: 1rem; height: 1rem; color: var(--muted); rotate: 90deg; transition: rotate .2s ease; }
.g-szuflada__grupy details[open] summary .icon { rotate: -90deg; }
.g-szuflada .g-szuflada__grupy ul { display: grid; gap: 0; margin: 0 0 .5rem; padding: 0 0 0 .75rem; }
.g-szuflada .g-szuflada__grupy li { border: 0; }
.g-szuflada .g-szuflada__grupy li a { min-height: 2.5rem; color: var(--text); font-size: .95rem; font-weight: 400; }
.g-szuflada .g-szuflada__grupy li a:hover { color: var(--pink-text); }
.g-szuflada__prezenty { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; margin-top: .25rem; color: var(--blue-text); font-weight: 700; text-decoration: none; }
.g-szuflada__prezenty:hover { color: var(--pink-text); }
.g-szuflada__prezenty .icon { width: 1rem; height: 1rem; }

/* Koszyk i zamówienie (właściciel 19.10.2026): mniejszy odstęp między listą a podsumowaniem, dzięki czemu
   podsumowanie jest szersze. WooCommerce daje układowi gap 48 px i podsumowaniu stałe 360 px (flex),
   więc szerokości z procentów wyżej nie działały. */
.wc-block-components-sidebar-layout.is-large:is(.wc-block-cart, .wc-block-checkout) { gap: 1.25rem; }
.wc-block-components-sidebar-layout.is-large:is(.wc-block-cart, .wc-block-checkout) > .wc-block-components-main { width: auto; margin-right: 0; }
.wc-block-components-sidebar-layout.is-large:is(.wc-block-cart, .wc-block-checkout) > .wc-block-components-sidebar { flex: 0 0 min(27.5rem, 34%); width: auto; }

/* Kafelek produktu: po najechaniu przybliżenie do wzoru graweru (jak na megakoszulki.pl, właściciel
   19.10.2026) — zdjęcie, wzór i motyw „Tu Twój projekt” powiększają się razem wokół środka pola graweru
   (--zx, --zy, --zs z gifciak_product_card()), więc wzór widać duży na prawdziwej okładce. Tylko mysz;
   na telefonie i przy ograniczonym ruchu bez przybliżenia. */
.g-karta__media--zoom :is(.card__img, .card__art, .card__motif) { transform-origin: var(--zx, 50%) var(--zy, 50%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.g-karta__media--zoom :is(.card__img, .card__art, .card__motif) { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
	/* Cała karta to jeden link (warstwa tytułu nad zdjęciem), więc przybliżenie włącza najechanie na kafelek. */
	.g-karta:hover .g-karta__media--zoom :is(.card__img, .card__art, .card__motif) { transform: scale(var(--zs, 1.03)); }
	.g-karta:hover .g-karta__media--zoom .card__hint { opacity: 0; transition: opacity .2s ease; }
}
/* Panel z linkami zamiast filtrów (kolekcje na „Prezentach”, gifciak_panel_grupa_html()) — bez pól wyboru */
.facet--linki .facet__opt { gap: .5rem; }
.facet--linki .facet__opt[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Pasek filtrów nad produktami (od 19.10.2026, jak na opengift.pl; gifciak_filtry_gora_html()) ----------
   Właściciel: „po lewej kategorie i podstawowe filtry jak kolor, resztę filtrów do góry, filtry muszą mieć gdzieś
   wyświetlanie aktywnych filtrów i możliwość ich usuwania”. Biały pasek: listy rozwijane („Rodzina i przyjaciele”,
   „Zawody”, „Zainteresowania i humor”, „Cena”) z liczbą wybranych, z prawej liczba produktów i sortowanie; pod spodem
   „Wybrane filtry” z usuwaniem i „Wyczyść wszystko”. Na telefonie: „Filtry” (szuflada z wszystkimi filtrami) i sortowanie. */
.g-filtry-gora { margin: 0 0 1.25rem; padding: .55rem .7rem; border-radius: var(--r-l); background: #fff; }
.g-filtry-gora__rzad { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.g-filtry-gora__listy { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1 1 auto; min-width: 0; }
.g-filtry-gora__prawa { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.g-filtry-gora__ile { margin: 0; color: var(--muted); font-size: .88rem; white-space: nowrap; }
.g-filtry-gora .woocommerce-ordering { margin: 0; }
.g-filtry-gora .woocommerce-ordering select { min-height: 2.5rem; font-size: .9rem; }
.g-fl { position: relative; }
.g-fl__btn {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .7rem .35rem .85rem;
	border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer;
}
.g-fl__btn:hover, .g-fl.is-open .g-fl__btn { background: var(--mist); }
.g-fl__btn .icon { width: 1rem; height: 1rem; color: var(--muted); rotate: 90deg; transition: rotate .2s ease; }
.g-fl.is-open .g-fl__btn .icon { rotate: -90deg; }
.g-fl__btn.is-wybrane { color: var(--pink-text); font-weight: 600; }
.g-fl__licz { display: grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--pink-btn); color: #fff; font-size: .72rem; font-weight: 600; }
.g-fl__panel {
	position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30; width: max-content; min-width: 16rem; max-width: min(38rem, calc(100vw - 2rem));
	max-height: min(30rem, 70vh); overflow-y: auto; overscroll-behavior: contain; padding: .7rem 1.1rem .8rem;
	border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; box-shadow: 0 18px 40px rgba(7, 30, 61, .16);
}
.g-fl__panel[hidden] { display: none; }
.g-fl--lewo .g-fl__panel { left: auto; right: 0; }
.g-fl__panel .facet--dluga { display: block; columns: 2 13rem; column-gap: 1.75rem; }
.g-fl__panel .facet--dluga > li { break-inside: avoid; }
.g-fl__panel .price-filter { width: 18rem; }
.g-filtry-gora__wybrane { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin-top: .55rem; padding: .7rem .15rem .15rem; border-top: 1px solid var(--line); }
.g-filtry-gora__etykieta { color: var(--muted); font-size: .9rem; }
.g-filtry-gora .active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.g-filtry-gora .active-filters__clear { color: var(--pink-text); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
	/* Na komputerze „Dla kogo” i cena są w pasku — w panelu z lewej tylko kategorie i kolor */
	.page-body--shop .filter-section--szuflada { display: none; }
	/* Pokrewne kolekcje i podkategorie są w pasku i w panelu — rząd przycisków tylko na telefonie */
	.shop-layout__main .g-pokrewne { display: none; }
}
@media (max-width: 959px) {
	.g-filtry-gora { padding: .5rem; }
	.g-filtry-gora__listy { display: none; }
	.g-filtry-gora__ile { display: none; }
	/* „Filtry” i sortowanie w jednym wierszu */
	.g-filtry-gora__rzad { flex-wrap: nowrap; gap: .5rem; }
	.g-filtry-gora .filter-toggle { flex: none; }
	.g-filtry-gora__prawa { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
	.g-filtry-gora .woocommerce-ordering, .g-filtry-gora .woocommerce-ordering select { width: 100%; max-width: 16rem; }
	.g-filtry-gora__wybrane { margin-top: .45rem; padding-top: .55rem; }
}
/* Tytuł paska filtrów (komputer): ikona lejka i „Filtry”, oddzielony od list cienką kreską */
.g-filtry-gora__tytul { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 0 1rem 0 .35rem; border-right: 1px solid var(--line); color: var(--ink); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.g-filtry-gora__tytul .icon { width: 1.15rem; height: 1.15rem; color: var(--pink-text); }
@media (max-width: 959px) { .g-filtry-gora__tytul { display: none; } }
/* Jeden wiersz paska także przy ok. 1300 px: węższe przyciski list i pole sortowania tylko tak szerokie jak napis */
.g-filtry-gora__rzad { column-gap: .6rem; }
.g-fl__btn { padding-inline: .6rem .5rem; }
.g-filtry-gora .woocommerce-ordering select { width: auto; max-width: 15rem; padding-right: 2.2em; }
@media (max-width: 1365px) { .g-filtry-gora__prawa .g-filtry-gora__ile { display: none; } }
/* Telefon: pole sortowania mieści się obok „Filtry (N)” — długi napis („…od najwyższej”) się skraca,
   zamiast wypychać pasek poza ekran */
@media (max-width: 959px) {
	.g-filtry-gora .woocommerce-ordering { min-width: 0; }
	.g-filtry-gora .woocommerce-ordering select { width: 100%; max-width: 16rem; }
}

/* Koszyk: „Zaprojektuj kolejny produkt” pod koszykiem (19.10.2026, po kreatorze klient ląduje w koszyku) */
.g-koszyk-dalej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.25rem; padding: 1.1rem 1.4rem; border-radius: var(--r-l); background: #fff; }
.g-koszyk-dalej[hidden] { display: none; }
.g-koszyk-dalej p { margin: 0; color: var(--text); font-size: .95rem; }
.g-koszyk-dalej p strong { color: var(--ink); font-weight: 600; }
.g-koszyk-dalej__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.g-koszyk-dalej .g-btn .icon { width: 1.05rem; height: 1.05rem; }
@media (max-width: 640px) { .g-koszyk-dalej { padding: 1rem; } .g-koszyk-dalej__przyciski .g-btn { width: 100%; justify-content: center; } }
/* main.js przenosi go pod listę produktów (biały panel) — do tego czasu niewidoczny pod całym koszykiem */
.js .wp-block-woocommerce-cart + .g-koszyk-dalej { display: none; }
.wc-block-cart__main .g-koszyk-dalej { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--blue-soft); }
/* Tabela nie jest już ostatnia w kolumnie, więc WooCommerce dorysowałby kreskę pod każdym wierszem — także
   pod ostatnim. Wiersze dzieli kreska między nimi (wyżej, .wc-block-cart-items__row + .wc-block-cart-items__row). */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row { border-bottom: 0; }

/* Pasek zakupu karty produktu (20.10.2026, właściciel): na telefonie i na komputerze, gdy „Dodaj do koszyka”
   zniknie z ekranu (wyglad.js) — kwota, liczba sztuk, przycisk kreatora („Projektuj / Edytuj grawer”, adres jak
   przycisk na zdjęciu) i „Do koszyka”. Komputer: jeden rząd na szerokość strony z nazwą produktu; telefon:
   kwota i kreator nad liczbą sztuk i „Do koszyka”. */
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: block; padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(7, 30, 61, .12); }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo)[hidden], :is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) [hidden] { display: none; }
/* Karta „Dla firm”: cena „od” albo kwota w przycisku (przewija do pudełka zakupu); „Szczegóły” tylko bez kreatora */
.g-pasek-zakupu--logo .g-pasek__info { display: block; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: .9rem; line-height: 1.35; text-align: left; cursor: pointer; }
.g-pasek-zakupu--logo .g-pasek__info strong { color: var(--ink); font-size: 1.1rem; }
.g-pasek-zakupu--logo:has(.g-pasek__kreator) .g-pasek__wiecej { display: none; }
/* Licznik tej samej wysokości co przyciski paska (karta z logo i zwykła karta) */
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-ilosc { width: auto; height: 2.75rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-ilosc input { flex: none; width: 3.25rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__in { display: flex; align-items: center; gap: .75rem 1rem; width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__opis { display: grid; flex: 1; min-width: 0; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__nazwa { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__cena strong { color: var(--ink); font-size: 1.1rem; font-weight: 700; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__cena small { color: var(--muted); font-size: .85rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-btn { flex: none; max-width: none; min-height: 2.75rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__kreator .icon { width: 1rem; height: 1rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__koszyk { min-width: 12rem; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-ilosc { flex: none; }
:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-ilosc input { width: 3.25rem; }
body.g-z-paskiem .g-stopka { padding-bottom: 6rem; }
body.g-z-paskiem .g-komunikaty { bottom: 5.5rem; }
@media (max-width: 960px) {
	/* trzy kolumny: kwota (zawija się) i kreator nad licznikiem i „Do koszyka” — szerokość kwoty nie ściska przycisków */
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "opis opis kreator" "liczba koszyk koszyk"; gap: .5rem .6rem; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__in:not(:has(.g-pasek__kreator:not([hidden]))) { grid-template-areas: "opis opis opis" "liczba koszyk koszyk"; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) :is(.g-pasek__kreator, .g-pasek__koszyk) { white-space: nowrap; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__nazwa { display: none; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__opis { grid-area: opis; align-self: center; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__kreator { grid-area: kreator; justify-self: end; min-height: 2.25rem; padding: .35rem .8rem; font-size: .85rem; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__liczba { grid-area: liczba; }
	:is(.g-pasek-zakupu--detal, .g-pasek-zakupu--logo) .g-pasek__koszyk { grid-area: koszyk; min-width: 0; }
	body.g-z-paskiem .g-stopka { padding-bottom: 9rem; }
	body.g-z-paskiem .g-komunikaty { bottom: 8.5rem; }
}

/* Przyciski bez cieni (20.10.2026, właściciel: „przyciski nie mają mieć cieni”) — strzałki karuzel i galerii,
   powiększenie, „Edytuj grawer” na zdjęciu, wybrana zakładka menu. Okrągłe przyciski na zdjęciach odcina od
   tła ramka. Ramki rysowane cieniem wewnętrznym (miniatury, kółka kolorów, progi rabatów) zostają. */
.g-karuzela__btn, .karuzela__nav, .stage-nav, .product-gallery__nav, .powieksz__nav, .powieksz__close, .g-galeria__edytuj, .g-mega__tab[aria-selected="true"] { box-shadow: none; }

/* Karta z logo na komputerze (20.10.2026, właściciel): galeria i środkowa kolumna (nazwa, kolor, „Twoje logo”)
   w jednym białym panelu (.g-kp__lewa), bez przerwy — oddziela je tylko cienka kreska, która nie dochodzi do
   krawędzi. Odstęp zostaje przed kolumną koszyka. Panel i koszyk są przyklejone (top 5rem, pod nagłówkiem),
   więc przy przewijaniu stoi krótsza kolumna, a dłuższa się przewija — do końca dłuższej. Tablet i telefon —
   bez zmian (.g-kp__lewa ma tam display: contents). */
@media (min-width: 1241px) {
	.g-kp--logo { grid-template-columns: minmax(0, 1fr) var(--kp-odstep, 1rem) minmax(23rem, 25rem); grid-template-areas: "lewa . koszyk"; grid-template-rows: auto; column-gap: 0; }
	.g-kp--logo > .g-kp__lewa { position: sticky; top: 5rem; display: grid; grid-area: lewa; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "galeria glowa" "galeria logo"; grid-template-rows: min-content auto; align-self: start; border-radius: var(--r-l); background: #fff; }
	.g-kp--logo > .g-kp__kup--koszyk { position: sticky; top: 5rem; align-self: start; }
	.g-kp__lewa > .g-kp__galeria { position: relative; }
	.g-kp__lewa > .g-kp__galeria .g-galeria { position: static; background: none; }
	.g-kp__lewa > .g-kp__galeria::after { content: ""; position: absolute; top: 1.5rem; right: 0; bottom: 1.5rem; z-index: 1; width: 1px; background: var(--line); }
	.g-kp__lewa > :is(.g-kp__kup--glowa, .g-kp__kup--logo) { background: none; }
	.g-kp__lewa > .g-kp__kup--logo { align-self: stretch; }
}

/* Karta produktu: jeden odstęp między białymi panelami (20.10.2026, właściciel: „wyrównaj wszystkie odstępy”) —
   między kolumnami, nad opisem, między panelami opisu i nad opiniami (dawniej 15, 19 i 33 px). Pudełko zakupu bez
   marginesu WooCommerce pod spodem (2em): przez niego przyklejony panel obok kończył się 30 px niżej niż koszyk.
   Komputer 1,25 rem, tablet i telefon 1 rem (jak odstęp między panelami ułożonymi jeden pod drugim). */
.single-product { --kp-odstep: 1.25rem; }
@media (max-width: 960px) { .single-product { --kp-odstep: 1rem; } }
.woocommerce div.g-kp > div.g-kp__kup.summary { margin-bottom: 0; }
.single-product .g-kp-opis { margin-top: var(--kp-odstep); gap: var(--kp-odstep); }
/* Zwykła karta produktu (dwie kolumny): pudełko zakupu przyklejone jak galeria (ten sam top), więc przy
   przewijaniu stoi krótsza kolumna, a na końcu obie kończą się w jednej linii. */
@media (min-width: 961px) {
	.g-kp--detal:not(.g-kp--trzy) > .g-kp__kup.summary { position: sticky; top: 5.25rem; align-self: start; }
}
/* Link do kreatora w komunikacie „Najpierw zaprojektuj personalizację…” (wyglad.js) — w kolorze komunikatu */
[data-xdw-error] a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Karta z logo na telefonie (20.10.2026, właściciel): cena „od” i „Dodaj do koszyka” są w dolnym pasku, więc
   w pudełku zakupu ich nie powtarzamy (formularz zostaje — z niego dodaje pasek i w nim są komunikaty wtyczki);
   nazwa z kolorem i pudełko z tabelą cen to jeden biały panel z cienką kreską między częściami. */
@media (max-width: 960px) {
	.g-kp--logo .g-kp__kup--koszyk .g-kp__cena--zakup, .woocommerce .g-kp--logo .g-kp__kup--koszyk form.cart .single_add_to_cart_button { display: none; }
	.g-kp--logo .g-kp__lewa > .g-kp__kup--glowa { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	.g-kp--logo > .g-kp__kup--koszyk { margin-top: calc(-1 * var(--kp-odstep, 1rem)); padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
	.g-kp--logo > .g-kp__kup--koszyk::before { content: ""; display: block; height: 1px; margin-bottom: 1.25rem; background: var(--line); }
}

/* Opis produktu na telefonie (20.10.2026, właściciel): zakładki jako akordeon — nagłówek z plusem nad każdym
   panelem jak w „Pytaniach i odpowiedziach”, kreska tylko między sekcjami (wyglad.js otwiera i zamyka). */
.g-kp-info__akordeon { display: none; }
@media (max-width: 767px) {
	.g-kp-info { padding: 0 1.1rem; }
	.g-kp-info__zakladki { display: none; }
	.g-kp-info__akordeon { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.05rem 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer; }
	.g-kp-info__akordeon .icon { flex: none; color: var(--blue-text); transition: transform .2s ease; }
	.g-kp-info__akordeon[aria-expanded="true"] .icon { transform: rotate(45deg); }
	.g-kp-info__akordeon:hover { color: var(--pink-text); }
	.g-kp-info__panel + .g-kp-info__akordeon { border-top: 1px solid var(--line); }
	.g-kp-info__panel { padding: 0 0 1.25rem; }
}

/* Koszty dostawy (20.10.2026, właściciel): logo, cena i nazwa przewoźnika na środku kafelka; na telefonie dwa
   kafelki w rzędzie (pierwsze cztery, reszta pod „Pokaż więcej”). */
.g-dostawa__kafel { justify-items: center; align-content: start; text-align: center; }
@media (max-width: 640px) { .g-dostawa__kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Paski miniatur i karuzela inspiracji bez przezroczystego wygaszenia na brzegach (20.10.2026, właściciel) —
   to, co dalej, pokazuje strzałka. */
.product-gallery, .inspiracje--karuzela .inspiracje__grid { -webkit-mask-image: none; mask-image: none; }

/* Kilka kolorów z tą samą personalizacją (20.10.2026, jak na opengift.pl, assets/js/kolory.js): wiersze
   „Kolor | Ilość szt. | Wartość” zamiast samego licznika, „Dodaj kolejny kolor” z oknem „Dodaj kolory”,
   „Łącznie”; na telefonie „Podsumowanie” z dolnego paska na cały ekran. Kolory w podsumowaniu mają
   zaznaczone kwadraty na karcie. */
/* !important: skrypt wariantów WooCommerce po wybraniu wariantu wpisuje polu liczby display: block w atrybut style */
.woocommerce .g-kp__kup--kolory form.cart div.quantity { display: none !important; }
.woocommerce .g-kp__kup--kolory form.cart .single_add_to_cart_button { flex: 1 1 100%; width: 100%; }
.g-kolory-wybor { display: grid; flex: 1 1 100%; width: 100%; margin: 0 0 1rem; padding: 0; }
.g-kolory-wybor__glowa, .g-kolory-wybor__wiersz { display: grid; grid-template-columns: 2.6rem auto minmax(0, 1fr) 1.75rem; align-items: center; column-gap: .65rem; }
.g-kolory-wybor__glowa { padding-bottom: .3rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.g-kolory-wybor__glowa span:nth-child(3) { text-align: right; }
.g-kolory-wybor__wiersz { padding: .45rem 0; }
.g-kolory-wybor__wiersz + .g-kolory-wybor__wiersz { border-top: 1px solid var(--line); }
.g-kolory-wybor__kolor { display: block; width: 1.75rem; height: 1.75rem; border-radius: 6px; background: var(--k); box-shadow: inset 0 0 0 1px rgba(7, 30, 61, .15); }
.g-ilosc.g-kolory-wybor__licznik { height: 2.25rem; border-width: 1px; }
.g-kolory-wybor__licznik button { width: 2rem; }
.g-kolory-wybor__licznik .icon { width: .9rem; height: .9rem; }
.g-kolory-wybor__licznik input { width: 2.75rem; font-size: 1rem; }
.g-kolory-wybor__wartosc { justify-self: end; color: var(--ink); font-weight: 600; white-space: nowrap; }
.g-kolory-wybor__usun { display: grid; place-items: center; justify-self: end; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.g-kolory-wybor__usun:hover { color: var(--pink-text); }
.g-kolory-wybor__usun .icon { width: 1.1rem; height: 1.1rem; }
.g-kolory-wybor__dodaj { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; margin-top: .25rem; padding: .25rem 0; border: 0; background: none; color: var(--pink-text); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.g-kolory-wybor__dodaj .icon { width: 1rem; height: 1rem; }
.g-kolory-wybor__dodaj:hover { color: var(--pink-hover, #c2186b); }
.g-kolory-wybor__razem { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--text); }
.g-kolory-wybor__razem strong { color: var(--ink); font-size: 1.15rem; }
.g-kolory-wybor__razem[hidden], .g-kolory-wybor__blad[hidden] { display: none; }
.g-kolory-wybor__blad { margin: .25rem 0 0; font-size: .9rem; font-weight: 600; }
/* Kolory z podsumowania mają biały znaczek na kwadracie, wybrany na karcie — dodatkowo obwódkę (jak na opengift.pl) */
.g-kw.is-w-podsumowaniu .icon { opacity: 1; }
.swatches--variation .swatch.is-w-podsumowaniu::after { content: ""; position: absolute; inset: 0; background: center / 62% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); pointer-events: none; }

.g-okno-kolory, .g-arkusz-kolory { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 4rem); padding: 0; border: 0; border-radius: var(--r-l); background: #fff; color: var(--text); }
.g-okno-kolory[open], .g-arkusz-kolory[open] { display: flex; flex-direction: column; }
.g-okno-kolory::backdrop, .g-arkusz-kolory::backdrop { background: rgba(7, 30, 61, .55); }
.g-okno-kolory__glowa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.g-okno-kolory__glowa h2 { margin: 0; font-size: 1.2rem; }
.g-okno-kolory__zamknij { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer; }
.g-okno-kolory__lista { flex: 1; margin: 0; padding: 0 1.25rem; overflow-y: auto; list-style: none; }
.g-okno-kolory__lista li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; padding: .75rem 0; }
.g-okno-kolory__lista li + li { border-top: 1px solid var(--line); }
.g-okno-kolory__opis { display: grid; gap: .1rem; min-width: 0; }
.g-okno-kolory__opis strong { color: var(--ink); }
.g-okno-kolory__opis span { font-size: .82rem; }
.g-okno-kolory__stopka { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.g-okno-kolory__stopka p { margin: 0; }
.g-okno-kolory__stopka .g-btn { min-width: 9rem; }
.g-arkusz-kolory__tresc { flex: 1; padding: 1rem 1.25rem; overflow-y: auto; }
.g-arkusz-kolory__tresc .g-kolory-wybor { margin: 0; }
.g-arkusz-kolory__stopka .g-btn { flex: 1; }
.g-pasek__podsum { display: none; }
/* Pasek z kolorami (od 1 sztuki, właściciel 20.10.2026): zamiast ceny przycisk „Podsumowanie” — kwadraty kolorów,
   nazwa koloru albo suma sztuk, kwota; otwiera okno z wierszami kolorów i „Dodaj kolejny kolor”. Licznik sztuk
   zostaje na swoim miejscu od początku (właściciel); znika dopiero przy kilku kolorach (--wiele), bo wtedy
   sztuki każdego koloru zmienia się w „Podsumowaniu”. */
.g-pasek-zakupu--kolory :is(.g-pasek__cena, .g-pasek__info), .g-pasek-zakupu--wiele .g-pasek__liczba { display: none; }
.g-pasek-zakupu--kolory .g-pasek__podsum { display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; min-height: 2.75rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--mist); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.g-pasek-zakupu--kolory .g-pasek__podsum:hover { border-color: var(--line-2); }
.g-pasek__podsum-ile { overflow: hidden; color: var(--text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.g-pasek__podsum-kwota { margin-left: auto; color: var(--ink); font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.g-pasek__podsum .icon { flex: none; width: 1rem; height: 1rem; transform: rotate(-90deg); color: var(--ink); }
.g-pasek__kropki { display: inline-flex; flex: none; gap: .2rem; }
.g-pasek__kropki span { width: .9rem; height: .9rem; border-radius: 3px; background: var(--k); box-shadow: inset 0 0 0 1px rgba(7, 30, 61, .2); }
@media (min-width: 961px) {
	/* Komputer: nazwa produktu, „Podsumowanie”, kreator, licznik (jeden kolor) i „Do koszyka” w jednym rzędzie */
	.g-pasek-zakupu--kolory .g-pasek__opis { display: flex; align-items: center; gap: 1rem; }
	.g-pasek-zakupu--kolory .g-pasek__nazwa { flex: 1; order: 1; min-width: 0; }
	.g-pasek-zakupu--kolory .g-pasek__podsum { flex: none; order: 2; width: auto; min-width: 15rem; max-width: 26rem; }
}
@media (max-width: 960px) {
	.g-arkusz-kolory, .g-okno-kolory { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
	/* Jeden kolor: układ paska bez zmian — „Podsumowanie” w miejscu ceny, obok kreator, niżej licznik i „Do koszyka” */
	.g-pasek-zakupu--kolory:not(.g-pasek-zakupu--wiele) .g-pasek__opis { align-self: stretch; }
	.g-pasek-zakupu--kolory:not(.g-pasek-zakupu--wiele) .g-pasek__podsum { height: 100%; min-height: 2.25rem; padding: .2rem .6rem; gap: .45rem; line-height: 1.2; }
	/* Kilka kolorów: dwa rzędy — „Podsumowanie” na całą szerokość oraz kreator i „Do koszyka” */
	.g-pasek-zakupu.g-pasek-zakupu--wiele .g-pasek__in, .g-pasek-zakupu.g-pasek-zakupu--wiele .g-pasek__in:not(:has(.g-pasek__kreator:not([hidden]))) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "opis opis" "kreator koszyk"; row-gap: .45rem; }
	.g-pasek-zakupu.g-pasek-zakupu--wiele .g-pasek__in:not(:has(.g-pasek__kreator:not([hidden]))) { grid-template-areas: "opis opis" "koszyk koszyk"; }
	.g-pasek-zakupu--wiele .g-pasek__koszyk, .g-pasek-zakupu--wiele .g-pasek__kreator { min-height: 2.75rem; }
}

/* Koszyk: „Dodaj inny kolor” obok „Edytuj grawer” (inc/koszyk-kolory.php, assets/js/koszyk-kolory.js) */
.g-pozycja-kolory, .wc-block-components-product-details .g-pozycja-kolory { display: inline-flex; align-items: center; gap: .35rem; margin-left: .35rem; padding: .4rem .2rem; color: var(--pink-text) !important; font-size: .85rem; font-weight: 600; line-height: 1.2; text-decoration: none !important; }
.g-pozycja-kolory::before { content: "+"; font-size: 1.05rem; line-height: 1; }
.g-pozycja-kolory:hover { color: var(--pink-hover, #c2186b) !important; }
.g-okno-kolory__produkt { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; }
.g-okno-kolory__info { margin: 0; padding: .75rem 1.25rem; background: var(--blue-soft); color: var(--text); font-size: .88rem; }
.g-okno-kolory__laduje { color: var(--muted); }
.g-okno-kolory__blad { margin: .5rem 1.25rem 0; }
.g-szary { color: var(--muted); }

/* Karta z logo: „Podsumowanie” (małe, pogrubione) i cena w jednym rzędzie nad wierszami kolorów */
.g-kp__podsum-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin: 0 0 .75rem; }
.g-kp__podsum-glowa .g-kp__cena--zakup { margin: 0; }
.g-kp__podsum-tytul { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; }

/* Okienka (np. „Dodano do koszyka”): główny przycisk („Przejdź do kasy”) różowy jak przyciski sklepu, nie błękitny
   (właściciel 20.10.2026); drugi („Zobacz koszyk”) zostaje z obrysem. */
.toast__action { background: var(--pink-btn); color: #fff; }
.toast__action:hover { background: var(--pink-text); color: #fff; }

/* Kafelki produktów (20.10.2026, właściciel: „za długie odległości bez sensu”): cena zaraz pod kolorami, nie
   dociskana do dołu karty — karty w rzędzie mają wysokość najwyższej, więc przy krótszej nazwie nad ceną
   zostawała pustka; wolne miejsce zostaje teraz na dole karty. */
.g-karta .g-karta__cena { margin-top: .1rem; }
/* Nazwa w kafelku: zawsze miejsce na 3 linie, dłuższa ucięta wielokropkiem (właściciel 20.10.2026) — kafelki w rzędzie
   są równe, a kolory i cena na tej samej wysokości. Pełna nazwa zostaje w HTML (wyszukiwarki, czytniki ekranu)
   i w podpowiedzi linku. Nakładka linku (::after) należy do karty, więc ucięcie jej nie obcina. */
html body .g-karta .g-karta__tytul { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; min-height: calc(3em * 1.45); }
/* Kółka kolorów na listach sklepu: bez marginesu WooCommerce dla list w produktach (.woocommerce .products ul — 1em pod spodem) */
.woocommerce .products .g-karta ul.g-kropki { margin: 0; }

/* Telefon (20.10.2026, właściciel): logo z lewej, przycisk menu po prawej (za ikonami szukania, konta i koszyka);
   menu boczne wysuwa się wtedy z prawej strony, od przycisku. */
@media (max-width: 960px) {
	.g-header__in > .g-logo { order: 1; }
	.g-header__in > .g-header__akcje { order: 2; }
	.g-header__in > .g-header__menu { order: 3; margin-right: -.5rem; margin-left: -.35rem; }
	.g-szuflada__panel { margin-left: auto; }
	.g-szuflada:not([hidden]) .g-szuflada__panel { animation-name: g-wysun-prawo; }
	@keyframes g-wysun-prawo { from { transform: translateX(100%); } }
}
/* Telefon i tablet (do 960 px): przy koszyku sama ikona z licznikiem, bez napisu „Koszyk”; przycisk menu trochę większy */
@media (max-width: 960px) {
	.g-koszyk-btn__kwota { display: none; }
	.g-ikbtn.g-header__menu { width: 2.85rem; height: 2.85rem; }
	.g-header__menu .icon { width: 1.6rem; height: 1.6rem; }
}

/* Lista podmieniana bez przeładowania (assets/js/lista.js, 20.10.2026): w trakcie wczytywania produkty
   lekko przygasają — dopiero po chwili, więc przy szybkim wczytaniu nic nie mruga. */
[data-shop-layout].is-ladowanie ul.products, [data-shop-layout].is-ladowanie .woocommerce-pagination { opacity: .45; transition: opacity .2s ease .15s; }
[data-shop-layout].is-ladowanie { cursor: progress; }

/* Znakowanie na zlecenie na stronie głównej (21.10.2026, właściciel: „bardziej efektowna i bardziej
   intuicyjna”): z lewej co zrobimy i przycisk wyceny, z prawej cztery kroki zlecenia na mgle, pod spodem
   wizualizacje graweru na materiałach (kafelki prowadzą do opisu materiałów na podstronie usługi). */
.g-zlecenie { --zl-pad: clamp(1.5rem, 4vw, 2.75rem); margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: var(--zl-pad); }
.g-zlecenie__gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 3rem; align-items: center; }
.g-zlecenie__wstep h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.g-zlecenie__wstep > p:not(.g-nadtytul):not(.g-akcje) { margin: 0; color: var(--text); font-size: 1.02rem; }
.g-zlecenie__wstep .g-akcje { align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.g-zlecenie__jak { padding: 1.5rem 1.6rem 1.6rem; border-radius: var(--r); background: var(--mist); }
.g-zlecenie__jak-tytul { margin: 0 0 1rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.g-zlecenie__kroki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.g-zlecenie__kroki li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; }
.g-zlecenie__kroki li > span:last-child { display: grid; gap: .2rem; }
.g-zlecenie__kroki strong { color: var(--ink); font-size: 1rem; font-weight: 600; }
.g-zlecenie__kroki li > span:last-child > span { color: var(--muted); font-size: .92rem; }
.g-zlecenie__nr { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--pink-btn); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1; }
.g-zlecenie__materialy { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.g-zlecenie__materialy a { position: relative; display: block; overflow: hidden; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.g-zlecenie__foto { display: block; aspect-ratio: 4 / 3; background: var(--mist); }
.g-zlecenie__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.g-zlecenie__material { position: absolute; left: .5rem; bottom: .5rem; padding: .2rem .55rem; border-radius: 999px; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.g-zlecenie__materialy a:hover .g-zlecenie__foto img, .g-zlecenie__materialy a:focus-visible .g-zlecenie__foto img { transform: scale(1.06); }
.g-zlecenie__materialy a:hover .g-zlecenie__material { color: var(--pink-text); }
@media (prefers-reduced-motion: reduce) {
	.g-zlecenie__foto img { transition: none; }
	.g-zlecenie__materialy a:hover .g-zlecenie__foto img { transform: none; }
}
@media (max-width: 1180px) {
	.g-zlecenie__materialy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Węższy ekran: najpierw co zrobimy i zdjęcia materiałów, potem kroki zlecenia na całą szerokość */
	.g-zlecenie { display: flex; flex-direction: column; }
	.g-zlecenie__gora { display: contents; }
	.g-zlecenie__wstep { order: 1; }
	.g-zlecenie__materialy { order: 2; margin-top: 1.5rem; }
	.g-zlecenie__jak { order: 3; margin-top: 1.5rem; }
}
@media (max-width: 640px) {
	.g-zlecenie__jak { padding: 1.2rem 1.1rem 1.3rem; }
	.g-zlecenie__kroki { grid-template-columns: minmax(0, 1fr); }
	.g-zlecenie__wstep .g-btn { width: 100%; }
	/* Telefon: materiały w przewijanym rzędzie, widać fragment następnego kafelka */
	.g-zlecenie__materialy { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; margin-inline: calc(var(--zl-pad) * -1); padding: 0 var(--zl-pad) .25rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--zl-pad); scrollbar-width: none; }
	.g-zlecenie__materialy::-webkit-scrollbar { display: none; }
	.g-zlecenie__materialy li { scroll-snap-align: start; }
}

/* Podstrona „Grawerowanie laserowe na zlecenie” (21.10.2026, właściciel: dostosować do całej strony, efektowniej,
   przejrzyście i intuicyjnie; page-templates/grawer-na-zlecenie.php). Białe panele w odstępach jak na stronie
   „Dla firm”, baner ze zdjęciem z prawej, kroki jak „Od projektu do paczki”, karty materiałów, cena z Gifciakiem. */
.g-strona--zlecenie > .g-panel { margin-top: 1.25rem; }
.g-zl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.g-zl-hero .g-hero__lead { max-width: 34rem; }
.g-zl-hero .g-atuty { gap: .5rem 1.25rem; }
.g-zl-hero__foto { overflow: hidden; border-radius: var(--r-l); }
.g-zl-hero__foto > img { aspect-ratio: 4 / 3; object-fit: cover; }
.g-kroki h3 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.g-zl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .75rem 3rem; align-items: start; margin-bottom: 1.75rem; }
.g-zl-head h2, .g-zl-co h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.g-zl-head p { margin: 0; color: var(--text); }
.g-zl-uwaga { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem !important; padding: .8rem 1rem; border-radius: var(--r-s); background: #eaf7fd; font-size: .92rem; }
.g-zl-uwaga .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--blue-text); }
.g-zl-materialy, .g-zl-co, .g-zl-cena { padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-zl-mat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.g-zl-mat__karta { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.g-zl-mat__foto > img { aspect-ratio: 4 / 3; object-fit: cover; }
.g-zl-mat__tresc { display: grid; align-content: start; gap: .65rem; padding: 1.1rem 1.25rem 1.3rem; }
.g-zl-mat__tresc h3 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.g-zl-mat__np { margin: 0; color: var(--muted); font-size: .92rem; }
.g-zl-mat__lista { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.g-zl-mat__lista li { padding: .2rem .6rem; border-radius: 999px; background: var(--mist); color: var(--text); font-size: .8rem; line-height: 1.45; }
.g-zl-mat__wiecej summary { display: inline-flex; align-items: center; gap: .3rem; color: var(--blue-text); font-size: .92rem; font-weight: 600; list-style: none; cursor: pointer; }
.g-zl-mat__wiecej summary::-webkit-details-marker { display: none; }
.g-zl-mat__wiecej summary:hover { color: var(--pink-text); }
.g-zl-mat__wiecej summary .icon { width: 1rem; height: 1rem; transform: rotate(90deg); transition: transform .2s ease; }
.g-zl-mat__wiecej[open] summary .icon { transform: rotate(-90deg); }
.g-zl-mat__wiecej p { margin: .55rem 0 0; color: var(--text); font-size: .92rem; }
.g-zl-przeslij { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; margin-top: 1.5rem; padding: 1.4rem 1.6rem; border-radius: var(--r); background: #eaf7fd; }
.g-zl-przeslij h3 { margin: 0 0 .4rem; color: var(--ink); font-size: 1.15rem; font-weight: 600; }
.g-zl-przeslij p { margin: 0 0 .3rem; color: var(--text); font-size: .95rem; }
.g-zl-przeslij .g-btn { flex: none; }
.g-zl-co h2 { margin-bottom: 1.5rem; }
.g-zl-co__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.g-zl-co__lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .9rem; }
.g-zl-co__ikona { display: grid; grid-row: span 2; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #eaf7fd; color: var(--blue-text); }
.g-zl-co__ikona .icon { width: 1.4rem; height: 1.4rem; }
.g-zl-co__lista h3 { margin: .1rem 0 .25rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.g-zl-co__lista p { margin: 0; color: var(--muted); font-size: .92rem; }
.g-zl-cena { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
.g-zl-cena__tekst h2 { margin: 0 0 .75rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-zl-cena__tekst p + h2 { margin-top: 1.75rem; }
.g-zl-cena__tekst p { color: var(--text); }
.g-zl-cena__box { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem 1.25rem; padding: 1.75rem; border-radius: var(--r); background: var(--pink-soft); }
.g-zl-cena__box img { grid-row: span 3; width: 6.5rem; height: auto; }
.g-zl-cena__box p { margin: 0; color: var(--text); }
.g-zl-cena__box .g-zl-cena__duzy { color: var(--ink); font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.g-zl-cena__box .g-btn { justify-self: start; margin-top: .5rem; }
.g-zl-wycena__tekst h2 { margin: 0 0 .75rem; }
.g-zl-wycena__tekst > p:not(.g-nadtytul) { color: var(--text); }
.g-zl-dalej { margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: dalej; }
.g-zl-dalej li { position: relative; margin: 0 0 .75rem; padding-left: 2.6rem; color: var(--text); counter-increment: dalej; }
.g-zl-dalej li::before { content: counter(dalej); position: absolute; top: -.05rem; left: 0; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--pink-btn); color: #fff; font-size: .85rem; font-weight: 700; }
.g-zl-kontakt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.g-zl-kontakt p { margin: 0; color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
	.g-zl-mat__wiecej summary .icon { transition: none; }
}
@media (max-width: 1180px) {
	.g-zl-mat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-zl-co__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Cena: ramka „Najpierw ustalmy szczegóły” pod tekstem, na całą szerokość */
	.g-zl-cena { grid-template-columns: minmax(0, 1fr); }
	.g-zl-cena__box { justify-self: stretch; }
}
@media (max-width: 960px) {
	.g-zl-hero, .g-zl-cena, .g-zl-head { grid-template-columns: minmax(0, 1fr); }
	.g-zl-przeslij { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.g-zl-co__lista { grid-template-columns: minmax(0, 1fr); }
	/* Telefon: karty materiałów w przewijanym rzędzie (widać kawałek następnej) zamiast sześciu pod sobą */
	.g-zl-mat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .9rem; overflow-x: auto; margin-inline: -1.5rem; padding: 0 1.5rem .3rem; scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem; scrollbar-width: none; }
	.g-zl-mat::-webkit-scrollbar { display: none; }
	.g-zl-mat__karta { scroll-snap-align: start; }
	.g-zl-hero .g-akcje .g-btn, .g-zl-przeslij .g-btn { width: 100%; }
	.g-zl-cena__box { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.2rem; }
	.g-zl-cena__box img { display: none; }
	.g-zl-przeslij { padding: 1.2rem 1.1rem; }
	.g-zl-przeslij .g-btn { padding-inline: .9rem; font-size: .95rem; white-space: nowrap; }
}
@media (min-width: 961px) {
	/* Opis obok długiego formularza wyceny zostaje na ekranie przy przewijaniu */
	.g-zl-wycena { align-items: start; }
	.g-zl-wycena__tekst { position: sticky; top: 6rem; }
}

/* Strony informacyjne w nowym wyglądzie (21.10.2026, właściciel: Kontakt, Dostawa i płatności, Jak zamówić
   „dostosować do całości naszej strony, intuicyjnie i wygodnie dla klienta”): baner z nadtytułem i skrótami,
   białe panele, klikalne kafelki z ikonami, kafelki przewoźników i płatności z ustawień sklepu. */
.g-strona--info > .g-panel { margin-top: 1.25rem; }
.g-info-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.g-info-hero .g-hero__tytul { margin-bottom: .6rem; }
.g-info-hero .g-hero__lead { max-width: 40rem; margin-bottom: 0; }
.g-info-hero .g-akcje { margin-top: 1.5rem; }
.g-info-hero__bok { justify-self: center; }
.g-info-hero__bok > img { display: block; width: min(15rem, 100%); height: auto; }
.g-info-skroty { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.g-info-skroty a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; }
.g-info-skroty a:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-info-skroty .icon { width: 1rem; height: 1rem; color: var(--blue-text); }
.g-info-panel { padding: clamp(1.5rem, 4vw, 2.75rem); scroll-margin-top: 7rem; }
.g-info-panel > h2, .g-info-head h2 { margin: 0 0 .75rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-info-panel > p, .g-info-head p { max-width: 52rem; color: var(--text); }
.g-info-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem 3rem; align-items: start; margin-bottom: 1.5rem; }
.g-info-head h2 { margin: 0; }
.g-info-head p { margin: 0; }
/* Klikalne kafelki (W czym możemy pomóc?) */
.g-info-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.g-info-karta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; height: 100%; padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); text-decoration: none; }
.g-info-karta:hover { border-color: var(--pink-btn); }
.g-info-karta:hover strong { color: var(--pink-text); }
.g-info-karta strong { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.g-info-karta small { display: block; margin-top: .15rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.g-info-karta > .icon { width: 1.1rem; height: 1.1rem; color: var(--pink-text); }
.g-ikona-kolo { display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #eaf7fd; color: var(--blue-text); }
.g-ikona-kolo .icon { width: 1.4rem; height: 1.4rem; }
/* Kontakt: e-mail i telefon jako duże kafelki */
.g-kanaly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.g-kanal { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.1rem 1.25rem; border-radius: var(--r); background: var(--mist); color: var(--ink); text-decoration: none; }
.g-kanal:hover strong { color: var(--pink-text); }
.g-kanal .g-ikona-kolo { width: 3.2rem; height: 3.2rem; background: #fff; color: var(--pink-text); }
.g-kanal small { display: block; color: var(--muted); font-size: .85rem; }
.g-kanal strong { display: block; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.g-kanal em { display: block; color: var(--muted); font-size: .85rem; font-style: normal; }
.g-info-dwa { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.g-info-dwa h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-info-dwa h3 { margin: 1.25rem 0 .35rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.g-info-dwa h2 + h3 { margin-top: 0; }
.g-info-dwa p { margin: 0; color: var(--text); }
.g-adres { padding: 1.4rem 1.5rem; border-radius: var(--r); background: var(--mist); }
.g-adres h2 { margin-bottom: .75rem; font-size: 1.2rem; }
.g-adres address { color: var(--text); font-style: normal; line-height: 1.7; }
.g-adres address strong { color: var(--ink); font-size: 1.05rem; }
.g-adres p { margin-top: 1rem; font-size: .92rem; }
/* Dostawa: fakty w banerze, kafelki przewoźników, oś czasu wysyłki, kafelki płatności */
.g-info-fakty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.g-info-fakty li { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: var(--r); background: var(--mist); }
.g-info-fakty .g-ikona-kolo { width: 2.6rem; height: 2.6rem; background: #fff; color: var(--pink-text); }
.g-info-fakty strong { display: block; color: var(--ink); font-size: .98rem; font-weight: 600; line-height: 1.3; }
.g-info-fakty small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.g-strona--info .g-dostawa__kafle { margin-top: 1.25rem; }
.g-dostawa__darmo { display: inline-block; margin-top: .4rem; padding: .1rem .5rem; border-radius: 999px; background: #e8f6ee; color: #1b6b3a; font-size: .78rem; font-weight: 600; }
.g-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; counter-reset: os; }
.g-os li { position: relative; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--mist); counter-increment: os; }
.g-os li::before { content: counter(os); display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin-bottom: .55rem; border-radius: 50%; background: var(--pink-btn); color: #fff; font-size: .85rem; font-weight: 700; }
.g-os strong { display: block; color: var(--ink); font-size: .98rem; font-weight: 600; }
.g-os small { display: block; margin-top: .15rem; color: var(--muted); font-size: .85rem; }
.g-platnosci { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.g-platnosci li { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: .92rem; font-weight: 600; }
.g-platnosci img { width: 56px; height: 36px; object-fit: contain; }
.g-platnosci .icon { width: 1.6rem; height: 1.6rem; color: var(--blue-text); }
.g-info-wskazowka { display: flex; align-items: flex-start; gap: .75rem; margin: 1.5rem 0 0; padding: 1rem 1.2rem; border-radius: var(--r); background: #eaf7fd; color: var(--text); }
.g-info-wskazowka .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--blue-text); }
.g-info-wskazowka a { color: var(--ink); font-weight: 600; }
/* Jak zamówić: wiedza w kafelkach, zachęta na końcu */
.g-info-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 1.25rem 0 0; }
.g-info-siatka > div { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--r); }
.g-info-siatka h2 { margin: 0 0 .45rem; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.g-info-siatka p { margin: 0; color: var(--text); font-size: .95rem; }
.g-info-siatka a { color: var(--ink); font-weight: 600; }
.g-kroki--5 h2 { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.g-kroki--5 a { color: var(--ink); font-weight: 600; }
.g-info-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--pink-soft); }
.g-info-cta img { width: 7rem; height: auto; }
.g-info-cta h2 { margin: 0 0 .35rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.g-info-cta p { margin: 0; color: var(--text); }
@media (max-width: 1180px) {
	.g-info-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-os { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-kroki--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.g-info-hero, .g-info-dwa, .g-info-head { grid-template-columns: minmax(0, 1fr); }
	.g-info-hero__bok { justify-self: start; }
	.g-info-fakty { grid-template-columns: minmax(0, 1fr); }
	.g-info-cta { grid-template-columns: auto minmax(0, 1fr); }
	.g-info-cta .g-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
	.g-info-karty, .g-kanaly, .g-info-siatka, .g-os { grid-template-columns: minmax(0, 1fr); }
	.g-kroki--5 { grid-template-columns: minmax(0, 1fr); }
	.g-info-hero .g-akcje .g-btn, .g-info-cta .g-btn { width: 100%; }
	.g-info-cta { grid-template-columns: minmax(0, 1fr); }
	.g-info-cta img { display: none; }
	/* Telefon: bez dużego Gifciaka w banerze — od razu widać fakty i skróty */
	.g-info-hero__bok:has(> img) { display: none; }
}

/* Formularz wyceny: licznik sztuk tej samej wysokości co pola obok (Telefon), na każdej stronie z formularzem
   (grawer na zlecenie, Dla firm, kontakt) — właściciel 21.10.2026 */
.g-strona .quote .qty-stepper { height: 2.75rem; min-height: 0; }
.g-strona .quote .qty-stepper button { width: 2.6rem; }
.g-info-kotwica { scroll-margin-top: 7rem; }
.g-info-hero__bok > img[width="260"] { width: min(13rem, 100%); }
@media (min-width: 1181px) {
	.g-os--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.g-zl-co__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* „Dla firm” (21.10.2026, właściciel: tak samo do poprawy): przy małym katalogu karty produktów i linki
   (rodzaje z logo, cały katalog, wycena innego gadżetu) w jednym panelu; progi rabatów z ustawień obok
   „Co wpływa na cenę?”; wycena jak przy grawerze na zlecenie (klasy g-zl-wycena). */
.g-firma-oferta { margin-top: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.g-firma-oferta .g-sekcja__head { margin-bottom: 1.25rem; }
.g-firma-oferta__siatka { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
.g-firma-oferta__produkty { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 15rem)); gap: 1rem; }
.g-firma-oferta__produkty .g-karta { height: 100%; border: 1px solid var(--line); }
.g-firma-oferta__linki { grid-template-columns: minmax(0, 1fr) !important; align-content: start; margin: 0; }
.g-strona--firmy .g-proces { margin-top: 1.25rem; }
.g-firma-cena--progi { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.g-progi-kafle { padding: 1.25rem 1.35rem; border-radius: var(--r); background: var(--mist); }
.g-progi-kafle__tytul { margin: 0 0 .85rem; color: var(--ink); font-weight: 600; }
.g-progi-kafle ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.g-progi-kafle li { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: var(--r-s); background: #fff; }
.g-progi-kafle strong { color: var(--pink-text); font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.g-progi-kafle span { color: var(--muted); font-size: .88rem; }
@media (max-width: 960px) {
	.g-firma-oferta__siatka, .g-firma-cena--progi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.g-firma-oferta__produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menu boczne od 21.10.2026 (właściciel: wygodniejsze, intuicyjne i czytelne; inc/nawigacja.php gifciak_szuflada_html):
   „Zaprojektuj sam” na górze, działy jako rozwijane wiersze, pomoc w kafelkach z ikonami, kontakt na dole.
   Reguły z .g-szuflada (ul, li, a) zerowane wyższą szczegółowością (.g-szuflada .g-mm …). */
.g-szuflada .g-mm { width: min(25rem, 92vw); }
.g-szuflada .g-mm .g-szuflada__head { position: sticky; top: 0; z-index: 2; background: #fff; }
.g-mm__tresc { display: grid; gap: 1.25rem; padding: 1rem 1.25rem 1.5rem; }
.g-szuflada .g-mm__cta { justify-content: center; gap: .5rem; width: 100%; min-height: 3rem; font-size: 1.02rem; }
.g-szuflada .g-mm__cta .icon { width: 1.15rem; height: 1.15rem; color: #fff; }
.g-szuflada .g-mm ul { margin: 0; padding: 0; list-style: none; }
.g-szuflada .g-mm li { border: 0; }
.g-szuflada .g-mm__dzialy { display: grid; gap: .5rem; }
.g-szuflada .g-mm__dzialy > li { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.g-szuflada .g-mm__wiersz { display: flex; align-items: center; gap: .8rem; min-height: 3.4rem; padding: 0 1rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
.g-szuflada .g-mm__wiersz::-webkit-details-marker { display: none; }
.g-szuflada .g-mm__wiersz > .icon:first-child { width: 1.35rem; height: 1.35rem; color: var(--blue-text); stroke-width: 1.5; }
.g-szuflada .g-mm__chev { width: 1.05rem; height: 1.05rem; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.g-szuflada details.g-mm__dzial > summary .g-mm__chev { transform: rotate(90deg); }
.g-szuflada details.g-mm__dzial[open] > summary .g-mm__chev { transform: rotate(-90deg); }
.g-szuflada details.g-mm__dzial[open] > summary { background: var(--mist); }
.g-szuflada .g-mm__wiersz:hover, .g-szuflada .g-mm__wiersz[aria-current] { color: var(--pink-text); }
.g-szuflada .g-mm__wiersz:hover > .icon:first-child, .g-szuflada .g-mm__wiersz[aria-current] > .icon:first-child { color: var(--pink-btn); }
.g-szuflada .g-mm__pod { display: grid; gap: .85rem; padding: .85rem 1rem 1rem; border-top: 1px solid var(--line); }
.g-szuflada .g-mm__rodzaje { display: grid; gap: .25rem; }
.g-szuflada .g-mm__rodzaje a { display: flex; align-items: center; gap: .85rem; min-height: 3rem; color: var(--text); font-size: .98rem; font-weight: 500; line-height: 1.3; text-decoration: none; }
.g-szuflada .g-mm__rodzaje a:hover { color: var(--pink-text); }
.g-szuflada .g-mm .g-kolko { --k: 2.6rem; }
.g-szuflada .g-mm__wszystkie { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; color: var(--blue-text); font-weight: 700; text-decoration: none; }
.g-szuflada .g-mm__wszystkie:hover { color: var(--pink-text); }
.g-szuflada .g-mm__wszystkie .icon { width: 1rem; height: 1rem; }
.g-szuflada .g-mm__etykieta { margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.g-szuflada .g-mm__grupy { padding-top: .85rem; border-top: 1px solid var(--line); }
.g-szuflada .g-mm__grupa + .g-mm__grupa { border-top: 1px solid var(--line); }
.g-szuflada .g-mm__grupa summary { display: flex; align-items: center; gap: .5rem; min-height: 2.9rem; color: var(--ink); font-size: .98rem; font-weight: 600; list-style: none; cursor: pointer; }
.g-szuflada .g-mm__grupa summary::-webkit-details-marker { display: none; }
.g-szuflada .g-mm__grupa summary .icon { width: 1rem; height: 1rem; margin-left: auto; color: var(--muted); transform: rotate(90deg); transition: transform .2s ease; }
.g-szuflada .g-mm__grupa[open] summary .icon { transform: rotate(-90deg); }
.g-mm__ile { padding: .05rem .45rem; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: .75rem; font-weight: 600; }
.g-szuflada .g-mm__grupa ul { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 0 .85rem; }
.g-szuflada .g-mm__grupa li a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .9rem; font-weight: 500; text-decoration: none; }
.g-szuflada .g-mm__grupa li a:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-szuflada .g-mm__pomoc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.g-szuflada .g-mm__pomoc a { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; height: 100%; min-height: 4.75rem; padding: .8rem .9rem; border-radius: var(--r); background: var(--mist); color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.g-szuflada .g-mm__pomoc a .icon { width: 1.3rem; height: 1.3rem; color: var(--blue-text); }
.g-szuflada .g-mm__pomoc a:hover { color: var(--pink-text); }
.g-szuflada .g-mm__kontakt { display: grid; gap: .25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.g-szuflada .g-mm__kontakt a { display: flex; align-items: center; gap: .7rem; min-height: 2.9rem; color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.g-szuflada .g-mm__kontakt a .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--blue-text); stroke-width: 1.5; }
.g-szuflada .g-mm__kontakt a:hover { color: var(--pink-text); }
@media (prefers-reduced-motion: reduce) {
	.g-szuflada .g-mm__chev, .g-szuflada .g-mm__grupa summary .icon { transition: none; }
}

/* Stopka od 21.10.2026 (właściciel: ładniejsza, czytelniejsza i intuicyjna; footer.php): opis i kontakt w dwóch
   kafelkach z lewej, trzy kolumny linków z prawej, płatności i dostawa z podpisami na jednakowych białych
   plakietkach, na dole prawa autorskie i linki prawne. Po najechaniu tylko zmiana koloru. */
.g-stopka { padding: 3.5rem 0 1.5rem; }
.g-stopka__gora { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 2.5rem 4rem; }
.g-stopka__marka img { width: 8.5rem; margin-bottom: 1.1rem; }
.g-stopka__marka p { margin: 0; color: #c9d3e3; line-height: 1.6; }
.g-stopka .g-stopka__kontakt { display: grid; gap: .6rem; max-width: 22rem; margin: 1.5rem 0 0 !important; }
.g-stopka .g-stopka__kanal { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); background: rgba(255, 255, 255, .05); color: #fff; font-weight: 400; text-decoration: none; }
.g-stopka .g-stopka__kanal:hover { border-color: rgba(255, 255, 255, .3); }
.g-stopka .g-stopka__kanal:hover strong { color: var(--blue); }
.g-stopka__ikona { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.g-stopka__ikona .icon { width: 1.15rem; height: 1.15rem; color: var(--blue); }
.g-stopka__kanal small { display: block; color: #9fb0c8; font-size: .78rem; }
.g-stopka__kanal strong { display: block; color: #fff; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
/* Profile marki pod kontaktem (od 22.10.2026): okrągłe przyciski jak kafelki kontaktu, po najechaniu tylko kolor */
.g-stopka__social { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.25rem; }
.g-stopka__social p { margin: 0; color: #9fb0c8; font-size: .85rem; }
.g-stopka__social ul { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.g-stopka__social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; }
.g-stopka__social a:hover { border-color: rgba(255, 255, 255, .3); color: var(--blue); }
.g-stopka__social .icon { width: 1.2rem; height: 1.2rem; }
.g-stopka__kolumny { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.g-stopka__kolumny h2 { margin: 0 0 1rem; color: #fff; font-size: .98rem; font-weight: 600; }
.g-stopka__kolumny ul { gap: .7rem; }
.g-stopka__kolumny a { color: #c9d3e3; }
.g-stopka__kolumny a:hover, .g-stopka__prawne a:hover, .g-stopka__dol a:hover { color: #fff; }
.g-stopka__plakietki { display: flex; flex-wrap: wrap; gap: 1.5rem 3.5rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.g-stopka__grupa > p { margin: 0 0 .7rem; color: #9fb0c8; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.g-stopka .g-stopka__plakietki .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* Plakietki w proporcjach plików 56×36; plakietka z wtyczki sklepu (własne tło i margines) wypełnia całe pole */
.g-stopka .g-stopka__plakietki .badges li { display: grid; place-items: center; box-sizing: border-box; width: 4.4rem; min-width: 0; height: auto; min-height: 0; aspect-ratio: 56 / 36; padding: .3rem .45rem; overflow: hidden; border: 0; border-radius: 8px; background: #fff; color: var(--ink); }
.g-stopka .g-stopka__plakietki .badges .badges__plakietka { padding: 0; background: none; }
/* Brzeg obrazka pod zaokrąglonym rogiem — bez cienkiej obwódki z wygładzania krawędzi */
.g-stopka .g-stopka__plakietki .badges .badges__plakietka img { width: calc(100% + 2px); max-width: none; height: calc(100% + 2px); margin: -1px; }
.g-stopka .g-stopka__plakietki .badges img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.g-stopka .g-stopka__plakietki .badges .icon { width: 1.7rem; height: 1.7rem; color: var(--ink); stroke-width: 2; }
.g-stopka .g-stopka__plakietki .badges__tekst { width: auto; height: 2.83rem; aspect-ratio: auto; padding-inline: .6rem; font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; }
.g-stopka__dol { align-items: center; margin-top: 2rem; color: #9fb0c8; font-size: .85rem; }
.g-stopka .g-stopka__prawne { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.g-stopka__prawne a, .g-stopka__dol a { color: #c9d3e3; }
@media (max-width: 960px) {
	.g-stopka__gora { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.g-stopka { padding-top: 2.5rem; }
	.g-stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
	.g-stopka__kolumny nav:last-child { grid-column: 1 / -1; }
	.g-stopka .g-stopka__kontakt { max-width: none; }
	.g-stopka__plakietki { gap: 1.25rem; }
	/* Pięciu przewoźników w jednym rzędzie także na wąskim telefonie (marginesy strony 2 × 1 rem, 4 odstępy) */
	.g-stopka .g-stopka__plakietki .badges li { width: min(4.4rem, calc((100vw - 4rem) / 5)); }
	.g-stopka .g-stopka__plakietki .badges .badges__tekst { width: auto; }
	.g-stopka__dol { flex-direction: column; align-items: flex-start; }
}

/* Strony z treścią (regulamin, polityka prywatności, zwroty; page.php) od 21.10.2026: baner i treść w białym panelu */
.g-dok-hero { grid-template-columns: minmax(0, 1fr); padding: clamp(1.25rem, 3vw, 2.25rem); }
.g-dok-hero .g-hero__tytul { margin-bottom: .35rem; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.g-dok-hero__data { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; }
.g-dok { padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-dok .doc { margin: 0; }
.g-dok .doc__aside { top: 6.5rem; }

/* O nas (21.10.2026): kafelki „Co robimy” po dwa, „Jak pracujemy” z ikonami */
.g-onas-lead2 { max-width: 40rem; margin: .85rem 0 0; color: var(--muted); }
.g-info-karta h3 { margin: 0; color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.g-info-karta:hover h3 { color: var(--pink-text); }
@media (min-width: 1181px) {
	.g-info-karty--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.g-onas-jak li { align-items: center; }
.g-onas-jak li p { margin: 0; color: var(--text); font-size: .95rem; }

/* Kontakt: formularz pod banerem (właściciel 21.10.2026). Z lewej krótko, o co pytać i co dołączyć, z prawej
   formularz (template-parts/quote-form.php, rodzaj „kontakt”) bez drugiej karty z cieniem. */
.g-kontakt-pisz { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start; scroll-margin-top: 6rem; }
.g-kontakt-pisz__wstep { position: sticky; top: 6rem; }
.g-kontakt-pisz__wstep h2 { margin: 0 0 .6rem; }
.g-kontakt-pisz__wstep > p { color: var(--text); }
.g-kontakt-pisz__lista { display: grid; gap: .9rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.g-kontakt-pisz__lista li { display: flex; align-items: flex-start; gap: .85rem; color: var(--text); line-height: 1.5; }
.g-kontakt-pisz__lista .g-ikona-kolo { width: 2.5rem; height: 2.5rem; }
.g-kontakt-pisz__lista .g-ikona-kolo .icon { width: 1.2rem; height: 1.2rem; }
.g-kontakt-pisz__lista a { font-weight: 600; }
.g-kontakt-pisz .quote { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.g-kontakt-pisz .quote--done { padding: 1.5rem; border-radius: var(--r); background: var(--mist); }
.g-kontakt-pisz .quote__rodo { margin: 0 0 1rem; }
.g-kontakt-pisz .quote select { width: 100%; }
@media (max-width: 960px) {
	.g-kontakt-pisz { grid-template-columns: minmax(0, 1fr); }
	.g-kontakt-pisz__wstep { position: static; }
}
@media (max-width: 640px) {
	.g-kontakt-pisz .quote__row { grid-template-columns: minmax(0, 1fr); }
}
.g-nowrap { white-space: nowrap; }

/* ==========================================================================
   Blog (21.10.2026, inc/blog.php): lista (/blog/, tematy), artykuł, najnowsze artykuły na stronie głównej.
   Białe panele na tle strony, różowe akcenty, po najechaniu tylko zmiana koloru (bez cieni i powiększeń).
   ========================================================================== */
.g-strona--blog > .g-panel, .g-strona--blog > .g-blog-lista { margin-top: 1.25rem; }
.g-blog-hero__strona { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
.g-blog-tematy { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.g-blog-tematy a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: .92rem; font-weight: 600; text-decoration: none; }
.g-blog-tematy a:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-blog-tematy a[aria-current] { border-color: var(--pink-btn); background: var(--pink-btn); color: #fff; }

/* Karta artykułu: cała karta klikalna (link w tytule rozciągnięty na kartę) */
.g-wpisy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.g-blog-lista .g-wpisy { margin-top: 1.25rem; }
.g-wpis { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l); background: var(--paper); }
.g-wpis__obraz { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.g-wpis__obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-wpis__obraz--brak .icon { width: 2.5rem; height: 2.5rem; color: var(--blue-text); }
.g-wpis__tresc { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.25rem 1.35rem 1.4rem; }
.g-wpis__temat { margin: 0; color: var(--pink-text); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-wpis__tytul { margin: 0; color: var(--ink); font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.g-wpis__tytul a { color: inherit; text-decoration: none; }
.g-wpis__tytul a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.g-wpis:hover .g-wpis__tytul, .g-wpis:focus-within .g-wpis__tytul { color: var(--pink-text); }
.g-wpis__tytul a:focus-visible { outline: none; }
.g-wpis:focus-within { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.g-wpis__zajawka { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.55; }
.g-wpis__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding-top: .35rem; color: var(--muted); font-size: .82rem; }
.g-wpis--duzy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.g-wpis--duzy .g-wpis__obraz { aspect-ratio: 16 / 10; }
.g-wpis--duzy .g-wpis__tresc { justify-content: center; gap: .75rem; padding: clamp(1.5rem, 4vw, 3rem); }
.g-wpis--duzy .g-wpis__tytul { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; }
.g-wpis--duzy .g-wpis__zajawka { font-size: 1.02rem; }
.g-wpis--duzy .g-wpis__meta { margin-top: .25rem; }
.g-wpis--duzy .g-wiecej { margin-top: .5rem; }

/* Stronicowanie */
.g-stronicowanie { margin-top: 2rem; }
.g-stronicowanie ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.g-stronicowanie li > .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.g-stronicowanie a.page-numbers:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-stronicowanie li > .page-numbers.current { border-color: var(--pink-btn); background: var(--pink-btn); color: #fff; }
.g-stronicowanie li > .page-numbers.dots { border-color: transparent; background: none; }
.g-stronicowanie .icon { width: 1rem; height: 1rem; }

.g-blog-cta .g-akcje { margin: 0; }
.g-blog-pusto p { margin: 0; color: var(--muted); }

/* Strona główna: najnowsze artykuły */
.g-blog-najnowsze .g-sekcja__head { align-items: end; margin-bottom: 1.5rem; }
.g-blog-najnowsze .g-nadtytul { margin-bottom: .4rem; }
.g-blog-najnowsze .g-sekcja__head h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.g-blog-najnowsze .g-wpis { border: 1px solid var(--line); }

/* Artykuł */
/* Artykuł w kolumnie do 72rem na środku strony: treść ok. 46rem (wygodna długość wiersza) i spis treści obok */
/* Artykuł na całą szerokość jak inne podstrony (właściciel 21.10.2026: „bardzo wąski”), tekst na całą szerokość panelu */
.g-artykul__glowa { margin-top: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); }
.g-artykul__glowa .g-nadtytul a { color: inherit; text-decoration: none; }
.g-artykul__glowa .g-nadtytul a:hover { color: var(--pink-text); }
.g-artykul__glowa .g-hero__tytul { max-width: 52rem; margin-bottom: 1rem; }
.g-artykul__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; color: var(--muted); font-size: .92rem; }
.g-artykul__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.g-artykul__meta .icon { width: 1.05rem; height: 1.05rem; color: var(--blue-text); }
.g-artykul__autor { color: var(--ink); font-weight: 600; }
.g-artykul__uklad { display: grid; grid-template-columns: minmax(0, 1fr) clamp(19rem, 12rem + 10vw, 24rem); gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
.g-artykul__tresc { padding: clamp(1.5rem, 4vw, 3rem); }
.g-artykul__skrot { margin: 0 0 1.75rem; padding: 1.25rem 1.4rem; border-radius: var(--r); background: #eaf7fd; }
.g-artykul__skrot p { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.6; }
.g-artykul__skrot .g-artykul__skrot-tytul { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; color: var(--blue-text); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-artykul__skrot-tytul .icon { width: 1.05rem; height: 1.05rem; }
/* Obrazek wyróżniający z boku nagłówka (jak obrazek nagłówka innych podstron), na telefonie pod tytułem */
.g-artykul__glowa--obraz { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.75rem 3rem; align-items: center; }
.g-artykul__obraz { margin: 0; }
.g-artykul__obraz img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r); object-fit: cover; }
.g-artykul__obraz figcaption, .g-artykul__prose figcaption { margin-top: .5rem; color: var(--muted); font-size: .85rem; }
.g-artykul__prose { max-width: none; color: var(--text); font-size: 1.06rem; line-height: 1.75; }
.g-artykul__prose > :first-child { margin-top: 0; }
.g-artykul__prose h2 { margin: 2.25rem 0 .75rem; color: var(--ink); font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); line-height: 1.3; scroll-margin-top: 6.5rem; }
.g-artykul__prose h3 { margin: 1.75rem 0 .5rem; color: var(--ink); font-size: 1.18rem; line-height: 1.35; scroll-margin-top: 6.5rem; }
.g-artykul__prose p, .g-artykul__prose ul, .g-artykul__prose ol { margin: 0 0 1.1rem; }
.g-artykul__prose ul, .g-artykul__prose ol { padding-left: 1.4rem; }
.g-artykul__prose li::marker { color: var(--pink-text); font-weight: 700; }
.g-artykul__prose a { color: var(--ink); font-weight: 600; text-decoration-color: var(--pink-btn); text-underline-offset: 3px; }
.g-artykul__prose a:hover { color: var(--pink-text); }
.g-artykul__prose strong { color: var(--ink); }
.g-artykul__prose img { height: auto; border-radius: var(--r); }
.g-artykul__prose figure { margin: 1.75rem 0; }
.g-artykul__prose blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border: 0; border-radius: var(--r); background: var(--mist); color: var(--ink); font-size: 1.08rem; }
.g-artykul__prose blockquote p:last-child { margin-bottom: 0; }
.g-artykul__prose table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; }
.g-artykul__prose th, .g-artykul__prose td { padding: .7rem .85rem; text-align: left; vertical-align: top; }
.g-artykul__prose thead th { background: var(--mist); color: var(--ink); }
.g-artykul__prose tr + tr td, .g-artykul__prose tbody tr:first-child td { border-top: 1px solid var(--line); }
.g-artykul__prose .wp-block-table { overflow-x: auto; }
/* Tabela w artykule zostaje tabelą także na telefonie (przewijana w bok), bez pasków z opisu produktu (gifciak.css)
   i z kreskami tylko między wierszami */
.g-artykul__prose :is(th, td) { border-bottom: 0; background: none; overflow-wrap: normal; }
.g-artykul__prose tr:nth-child(odd) > * { background: none; }
.g-artykul__prose thead th, .g-artykul__prose thead tr:nth-child(odd) > th { background: var(--mist); }
@media (max-width: 520px) {
	.g-artykul__prose table { display: table; min-width: 100%; width: max-content; max-width: none; }
	.g-artykul__prose tbody { display: table-row-group; }
	.g-artykul__prose thead { display: table-header-group; }
	.g-artykul__prose tr { display: table-row; }
	.g-artykul__prose :is(th, td) { display: table-cell; width: auto; padding: .6rem .7rem; }
	.g-artykul__prose td { padding-top: .6rem; }
}
.g-artykul__prose details { padding: .9rem 0; }
.g-artykul__prose details + details { border-top: 1px solid var(--line); }
.g-artykul__prose summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink); font-weight: 600; list-style: none; cursor: pointer; }
.g-artykul__prose summary::-webkit-details-marker { display: none; }
.g-artykul__prose summary::after { content: "+"; flex: none; color: var(--pink-text); font-size: 1.4rem; font-weight: 400; line-height: 1; }
.g-artykul__prose details[open] summary::after { content: "‘2"; }
.g-artykul__prose summary:hover { color: var(--pink-text); }
.g-artykul__prose details[open] summary { margin-bottom: .5rem; }
.g-artykul__stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; max-width: none; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.g-artykul__podpis { display: flex; align-items: flex-start; gap: .9rem; max-width: 30rem; }
.g-artykul__podpis p { margin: 0 0 .35rem; color: var(--text); font-size: .95rem; }
.g-artykul__podpis .g-artykul__podpis-kto { color: var(--muted); }
.g-artykul__podpis-kto strong { color: var(--ink); }
.g-artykul__bok { position: sticky; top: 6rem; display: grid; gap: 1.25rem; }
.g-artykul__bok-tytul { margin: 0 0 .75rem; color: var(--ink); font-size: 1rem; font-weight: 700; }
.g-artykul__spis { padding: 1.4rem 1.5rem; }
.g-artykul__spis ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; }
.g-artykul__spis li::marker { color: var(--muted); }
.g-artykul__spis a { color: var(--text); font-size: .92rem; line-height: 1.4; text-decoration: none; }
.g-artykul__spis a:hover { color: var(--pink-text); }
.g-artykul__zacheta { padding: 1.4rem 1.5rem 1.5rem; background: var(--pink-soft); }
.g-artykul__zacheta img { float: right; width: 4.5rem; height: auto; margin: -.25rem -.25rem .25rem .5rem; }
.g-artykul__zacheta p { margin: 0 0 1rem; color: var(--text); font-size: .92rem; line-height: 1.5; }
.g-artykul__zacheta .g-artykul__bok-tytul { margin-bottom: .5rem; color: var(--ink); font-size: 1.05rem; }
.g-artykul__zacheta .g-btn { clear: both; }
.g-artykul__produkty, .g-artykul__powiazane { margin-top: clamp(2rem, 4vw, 3rem); }

/* Menu boczne: kafelek „Blog i poradniki” jako piąty — na całą szerokość */
.g-szuflada .g-mm__pomoc li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.g-szuflada .g-mm__pomoc li:last-child:nth-child(odd) a { min-height: 3.25rem; flex-direction: row; align-items: center; }

@media (max-width: 1180px) {
	.g-artykul__uklad { grid-template-columns: minmax(0, 1fr) 16rem; }
}
@media (max-width: 960px) {
	.g-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-wpis--duzy { grid-template-columns: minmax(0, 1fr); }
	.g-wpis--duzy .g-wpis__obraz { aspect-ratio: 16 / 10; min-height: 0; }
	.g-artykul__uklad { grid-template-columns: minmax(0, 1fr); }
	.g-artykul__glowa--obraz { grid-template-columns: minmax(0, 1fr); }
	.g-artykul__bok { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.g-wpisy, .g-artykul__bok { grid-template-columns: minmax(0, 1fr); }
	.g-blog-najnowsze .g-wpisy { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	.g-blog-najnowsze .g-wpisy::-webkit-scrollbar { display: none; }
	.g-blog-najnowsze .g-wpis { scroll-snap-align: start; }
	.g-artykul__prose { font-size: 1.02rem; }
	.g-artykul__stopka .g-btn { width: 100%; }
}

/* Koszyk wysuwany z boku (21.10.2026, inc/mini-koszyk.php, assets/js/mini-koszyk.js): <dialog> na cały ekran,
   biały panel z prawej, przyciemnione tło. Po najechaniu tylko zmiana koloru, przyciski bez cieni. */
/* overflow: clip — okno nie jest przewijane: przy otwarciu przeglądarka ustawia kursor na „Zamknij”, który w pierwszej
   klatce wjazdu jest jeszcze za prawą krawędzią, i przewijała całe okno w bok — panel skakał po ekranie (21.10.2026) */
.g-mkoszyk { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; overflow: clip; border: 0; background: transparent; color: var(--text); }
.g-mkoszyk::backdrop { background: rgba(7, 30, 61, .45); }
/* Szerokość: 27rem na mniejszych ekranach, na szerokich więcej (ok. 32rem przy 1440 px, do 37rem) — właściciel 21.10.2026 */
.g-mkoszyk__panel { display: flex; flex-direction: column; width: min(100%, clamp(27rem, 21rem + 12vw, 37rem)); height: 100%; margin-left: auto; background: #fff; overflow: hidden; }
/* Blokada przewijania strony tylko tam, gdzie pasek przewijania nie zajmuje miejsca (telefon) — mini-koszyk.js */
html.g-mkoszyk-otwarty { overflow: hidden; }
.g-mkoszyk[open] .g-mkoszyk__panel { animation: g-mkoszyk-wjazd .25s ease-out; }
@keyframes g-mkoszyk-wjazd { from { transform: translateX(100%); } to { transform: none; } }
@keyframes g-mkoszyk-tlo { from { opacity: 0; } to { opacity: 1; } }
.g-mkoszyk[open]::backdrop { animation: g-mkoszyk-tlo .25s ease-out; }
.g-mkoszyk.is-zamyka .g-mkoszyk__panel { animation: g-mkoszyk-wyjazd .22s ease-in forwards; }
.g-mkoszyk.is-zamyka::backdrop { animation: g-mkoszyk-tlo-out .22s ease-in forwards; }
@keyframes g-mkoszyk-wyjazd { from { transform: none; } to { transform: translateX(100%); } }
@keyframes g-mkoszyk-tlo-out { from { opacity: 1; } to { opacity: 0; } }
.g-mkoszyk__panel { will-change: transform; }
/* Szkielet dwóch pozycji do czasu wczytania koszyka */
.g-mkoszyk__szkielet { display: grid; gap: 1px; padding: 0 1.25rem; }
.g-mkoszyk__szkielet > span { display: block; height: 7.5rem; margin: 1rem 0 0; border-radius: var(--r-s); background: linear-gradient(90deg, var(--mist) 0 4.5rem, transparent 4.5rem 5.4rem, var(--mist) 5.4rem); opacity: .8; }
.g-mkoszyk__ok { margin: 1rem 1.25rem 0; padding: .75rem 1rem; border-radius: var(--r-s); background: #edf7f1; color: #134d31; font-size: .92rem; font-weight: 600; }
/* Opcje pozycji jak w koszyku: „Edytuj grawer”, „Dodaj inny kolor” */
.g-mkoszyk__akcje { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.g-mkoszyk__akcja { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; color: var(--pink-text); font-size: .85rem; font-weight: 600; text-decoration: none; }
.g-mkoszyk__akcja:hover { color: var(--ink); }
.g-mkoszyk__akcja .icon { width: .95rem; height: .95rem; }
.g-mkoszyk__glowa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.g-mkoszyk__glowa h2 { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--ink); font-size: 1.2rem; }
.g-mkoszyk__glowa h2 .icon { width: 1.3rem; height: 1.3rem; color: var(--pink-btn); }
.g-mkoszyk__ile:not(:empty) { padding: .1rem .55rem; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: .8rem; font-weight: 600; }
.g-mkoszyk__zamknij { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.g-mkoszyk__zamknij:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-mkoszyk__zamknij .icon { width: 1.1rem; height: 1.1rem; }
.g-mkoszyk__tresc { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.g-mkoszyk__tresc.is-laduje { opacity: .6; transition: opacity .2s ease .15s; }
.g-mkoszyk__laduje { margin: 2rem 1.25rem; color: var(--muted); text-align: center; }
.g-mkoszyk__blad { margin: 1rem 1.25rem 0; padding: .75rem 1rem; border-radius: var(--r-s); background: #fdeeed; color: #7d1a14; font-size: .92rem; font-weight: 600; }
.g-mkoszyk__blad a { color: inherit; }
.g-mkoszyk__lista { margin: 0; padding: 0 1.25rem; list-style: none; }
.g-mkoszyk__pozycja { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: 1rem 0; }
.g-mkoszyk__pozycja + .g-mkoszyk__pozycja { border-top: 1px solid var(--line); }
.g-mkoszyk__pozycja.is-zmiana { opacity: .55; }
.g-mkoszyk__zdjecie { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-s); background: var(--mist); }
.g-mkoszyk__zdjecie img { display: block; width: 100%; height: 100%; object-fit: contain; }
.g-mkoszyk__opis { display: grid; gap: .3rem; min-width: 0; }
.g-mkoszyk__nazwa { color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
a.g-mkoszyk__nazwa:hover { color: var(--pink-text); }
.g-mkoszyk__szczegoly { color: var(--muted); font-size: .82rem; }
.g-mkoszyk__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; }
.g-mkoszyk__ilosc { display: inline-flex; align-items: stretch; height: 2.5rem; border: 1.5px solid var(--line-2, var(--line)); border-radius: var(--r-s); background: #fff; }
.g-mkoszyk__ilosc button { display: grid; place-items: center; width: 2.4rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.g-mkoszyk__ilosc button:hover:not(:disabled) { color: var(--pink-text); }
.g-mkoszyk__ilosc button:disabled { color: #b8c3d3; cursor: default; }
.g-mkoszyk__ilosc .icon { width: 1rem; height: 1rem; }
.g-mkoszyk__liczba { display: grid; place-items: center; min-width: 2.25rem; padding: 0 .25rem; border-inline: 1px solid var(--line); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-mkoszyk__szt { color: var(--muted); font-size: .9rem; }
.g-mkoszyk__cena { color: var(--ink); font-weight: 700; white-space: nowrap; }
.g-mkoszyk__cena del { color: var(--muted); font-weight: 400; }
.g-mkoszyk__cena ins { text-decoration: none; }
.g-mkoszyk__usun { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.g-mkoszyk__usun:hover:not(:disabled) { color: var(--pink-text); }
.g-mkoszyk__usun .icon { width: 1.1rem; height: 1.1rem; }
.g-mkoszyk__stopka { position: sticky; bottom: 0; display: grid; gap: .65rem; margin-top: auto; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); background: #fff; }
.g-mkoszyk__info { margin: 0; padding: .7rem .85rem; border-radius: var(--r-s); background: #eaf7fd; color: var(--ink); font-size: .88rem; line-height: 1.4; }
.g-mkoszyk__info p { margin: 0; }
.g-mkoszyk__info p, p.g-mkoszyk__info { display: flex; align-items: flex-start; gap: .5rem; }
.g-mkoszyk__info .icon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: var(--blue-text); }
.g-mkoszyk__info--dostawa-ok .gifciak-info__pasek > span { background: var(--ok); }
.g-mkoszyk__info .gifciak-info__pasek > span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.g-mkoszyk__info--rabat { background: var(--pink-soft); }
.g-mkoszyk__info--rabat .icon { color: var(--pink-text); }
.g-mkoszyk__suma { display: grid; gap: .35rem; margin: .25rem 0 0; }
.g-mkoszyk__suma > div { display: flex; justify-content: space-between; gap: 1rem; }
.g-mkoszyk__suma dt { color: var(--text); }
.g-mkoszyk__suma dd { margin: 0; color: var(--ink); font-weight: 700; }
.g-mkoszyk__suma > div:first-child dd { font-size: 1.15rem; }
.g-mkoszyk__uwaga { margin: 0; color: var(--muted); font-size: .8rem; }
.g-mkoszyk__dalej { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.5rem; padding: 0; border: 0; background: none; color: var(--blue-text); font: inherit; font-weight: 700; cursor: pointer; }
.g-mkoszyk__dalej:hover { color: var(--pink-text); }
.g-mkoszyk__dalej .icon { width: 1rem; height: 1rem; }
.g-mkoszyk__pusto { display: grid; justify-items: center; gap: .6rem; margin: auto 0; padding: 2rem 1.5rem; text-align: center; }
.g-mkoszyk__pusto img { width: 6rem; height: auto; }
.g-mkoszyk__pusto-tytul { margin: 0; color: var(--ink); font-size: 1.2rem; font-weight: 700; }
.g-mkoszyk__pusto p:not(.g-mkoszyk__pusto-tytul) { margin: 0 0 .5rem; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
	.g-mkoszyk[open] .g-mkoszyk__panel, .g-mkoszyk[open]::backdrop, .g-mkoszyk.is-zamyka .g-mkoszyk__panel, .g-mkoszyk.is-zamyka::backdrop { animation: none; }
}
@media (min-width: 1280px) {
	.g-mkoszyk__pozycja { grid-template-columns: 5.25rem minmax(0, 1fr) auto; gap: 1rem; }
	.g-mkoszyk__zdjecie { width: 5.25rem; }
	.g-mkoszyk__lista, .g-mkoszyk__szkielet { padding-inline: 1.5rem; }
	.g-mkoszyk__glowa, .g-mkoszyk__stopka { padding-inline: 1.5rem; }
}
@media (max-width: 480px) {
	.g-mkoszyk__panel { width: 100%; }
	.g-mkoszyk__pozycja { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .75rem; padding: .85rem 0; }
	.g-mkoszyk__zdjecie { width: 4rem; }
	.g-mkoszyk__akcje { gap: 0 .75rem; }
	.g-mkoszyk__akcja { min-height: 1.9rem; font-size: .8rem; }
	/* Telefon: niższa stopka, żeby lista miała miejsce — „Zobacz koszyk” i „Kontynuuj zakupy” obok siebie */
	.g-mkoszyk__stopka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .75rem 1rem 1rem; }
	.g-mkoszyk__stopka > * { grid-column: 1 / -1; }
	.g-mkoszyk__stopka > [data-mkoszyk-pelny], .g-mkoszyk__stopka > .g-mkoszyk__dalej { grid-column: auto; }
	.g-mkoszyk__stopka > [data-mkoszyk-pelny] { min-height: 2.75rem; padding-inline: .5rem; font-size: .92rem; }
	.g-mkoszyk__info { padding: .5rem .7rem; font-size: .8rem; }
	.g-mkoszyk__info .gifciak-info__pasek { margin-top: .35rem; }
	.g-mkoszyk__suma { gap: .15rem; margin: 0; }
	.g-mkoszyk__uwaga { display: none; }
	.g-mkoszyk__stopka .g-btn--duzy { min-height: 3rem; }
}

/* Banery z grafikami A1–A3 (21.10.2026, assets/img/banery/, marketing/materialy/2026-10-21-banery/) */
/* Baner główny: Gifciak wskazuje trzy kalendarze — napis, monogram, logo */
.g-glowny__scena--kompozycja { height: clamp(18rem, 23vw, 23rem); padding: 1rem 1.25rem .75rem 0; }
.g-glowny__scena--kompozycja .g-glowny__gifciak { height: 70%; margin-right: -3.25rem; }
.g-glowny__kompozycja { display: block; height: 100%; }
.g-glowny__kompozycja > img { display: block; width: auto; height: 100%; max-width: none; }
/* Kafelki „Gotowe wzory” i „Gadżety reklamowe z logo” (od 21.10.2026, właściciel: „ładniejsze, żeby całość pasowała”):
   białe panele jak reszta strony głównej, zdjęcie 3:2 jako zaokrąglona karta w środku panelu, ikona w kółku przy
   tytule, różowy przycisk; bez etykiet przy zdjęciach. Po najechaniu tylko zmiana koloru przycisku. */
.g-droga--poziomo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; gap: 0; padding: .75rem; border: 1px solid transparent; background: #fff; }
.g-droga--roz.g-droga--poziomo, .g-droga--blekit.g-droga--poziomo { border-color: transparent; background: #fff; }
.g-droga--poziomo .g-droga__tekst { align-content: center; gap: .55rem; padding: 1.25rem 1.5rem 1.25rem 1.25rem; }
.g-droga--poziomo .g-droga__tekst > .g-ikona-kolo { margin-bottom: .2rem; }
.g-droga--roz.g-droga--poziomo .g-ikona-kolo { background: var(--pink-soft); color: var(--pink-text); }
.g-droga--blekit.g-droga--poziomo .g-ikona-kolo { background: #eaf7fd; color: var(--blue-text); }
.g-droga--poziomo strong { color: var(--ink); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); text-wrap: balance; }
.g-droga--roz.g-droga--poziomo strong, .g-droga--blekit.g-droga--poziomo strong { color: var(--ink); }
.g-droga--poziomo .g-droga__tekst > span:not(.g-btn):not(.g-ikona-kolo) { color: var(--text); line-height: 1.55; }
.g-droga--poziomo .g-btn { margin-top: .5rem; }
.g-droga__foto { position: relative; display: block; min-height: 15rem; overflow: hidden; border-radius: calc(var(--r-l) - 4px); background: var(--mist); }
.g-droga__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (hover: hover) {
	.g-droga--poziomo:hover .g-btn--glowny { border-color: var(--pink-btn); background: #fff; color: var(--pink-text); }
}
@media (max-width: 960px) and (min-width: 641px) {
	.g-droga--poziomo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	.g-droga__foto { min-height: 14rem; }
}
@media (max-width: 640px) {
	.g-droga--poziomo { grid-template-columns: minmax(0, 1fr); padding: .6rem; }
	.g-droga--poziomo > .g-droga__foto { order: -1; min-height: 0; aspect-ratio: 3 / 2; }
	.g-droga--poziomo .g-droga__tekst { padding: 1rem .6rem .75rem; }
	.g-droga--poziomo .g-btn { justify-self: stretch; }
	.g-droga--poziomo .g-droga__tekst > .g-ikona-kolo { display: none; }
}

/* „Dla firm”: baner jako biały panel, zdjęcie SPEED-DREW jako zaokrąglona karta z prawej (21.10.2026) */
.g-baner--karta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; height: auto; padding: .75rem; background: #fff; }
.g-baner--karta::before { display: none; }
.g-baner--karta > .g-wizualizacja, .g-baner--karta > .g-wizualizacja--foto { position: relative; inset: auto; left: auto; order: 2; width: auto; height: auto; min-height: clamp(21rem, 27vw, 27rem); overflow: hidden; border-radius: calc(var(--r-l) - 4px); background: var(--mist); }
.g-baner--karta > .g-wizualizacja > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.g-baner--karta .g-baner__tekst { order: 1; align-self: center; width: auto; padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.25rem, 3vw, 2.75rem); }
@media (max-width: 960px) {
	.g-baner--karta { grid-template-columns: minmax(0, 1fr); }
	.g-baner--karta > .g-wizualizacja, .g-baner--karta > .g-wizualizacja--foto { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
	.g-baner--karta .g-baner__tekst { padding: 1.25rem .75rem 1rem; }
}

/* „Zaprojektuj sam”: Gifciak wskazuje kalendarz z motywem „Tu Twój projekt” (21.10.2026) */
.g-kreator-scena { display: flex; align-items: flex-end; justify-content: center; height: clamp(16rem, 20vw, 19rem); }
.g-kreator-scena__gifciak { position: relative; z-index: 1; flex: none; width: auto; height: 72%; margin-right: -2.25rem; }
.g-kreator-scena__produkt { display: block; height: 100%; }
.g-kreator-scena__produkt > img, .g-kreator-scena__produkt .g-okladka { display: block; width: auto; height: 100%; }
@media (max-width: 960px) {
	.g-info-hero__bok.g-kreator-scena { display: none; }
}

/* Karta produktu: „Przykładowe realizacje” (21.10.2026, inc/realizacje.php) — karuzela zdjęć, powiększenie po kliknięciu */
.g-realizacje { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.g-realizacje .g-sekcja__head p { margin: .35rem 0 0; color: var(--muted); }
.g-realizacje__lista { grid-auto-columns: calc((100% - 3 * .75rem) / 4); }
.g-realizacje__foto { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--mist); cursor: zoom-in; }
.g-realizacje__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-realizacje__foto:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.g-realizacje__podpis { margin: .5rem .15rem 0; color: var(--text); font-size: .88rem; line-height: 1.4; }
.g-realizacje .g-karuzela__btn { top: calc(50% - 1rem); }
/* Nasze paczki (od 21.10.2026, inc/paczki.php): na stronie głównej trzy pasy — nagłówek (jak „Od projektu do
   paczki”), szeroki rząd zdjęć i dwie ramki obok siebie (bez pustych miejsc obok zdjęć, właściciel 21.10.2026);
   na stronie „Nasze paczki” siatka wszystkich zdjęć. Typografia jak w „Znakowaniu na zlecenie”. */
.g-paczki { margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-paczki__glowa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 3rem; align-items: start; margin-bottom: 1.75rem; }
.g-paczki__glowa h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.g-paczki__glowa p:not(.g-nadtytul) { margin: 0; color: var(--text); font-size: 1.02rem; }
.g-paczki__wiecej { display: flex; justify-content: flex-end; margin: 1.25rem 0 0; }
.g-paczki__lista { grid-auto-columns: calc((100% - 3 * .75rem) / 4); }
.g-paczki__foto { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--r); background: var(--mist); cursor: zoom-in; }
.g-paczki__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-paczki__foto:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.g-paczki .g-karuzela__btn { top: 50%; }
.g-paczki__dol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.g-paczki__dol > * { margin: 0; padding: 1.5rem 1.6rem 1.6rem; border-radius: var(--r); background: var(--mist); }
.g-paczki__prosba p, .g-paczki__ekipa p { margin: 0; color: var(--muted); font-size: .92rem; }
.g-paczki__prosba .g-paczki__prosba-tytul, .g-paczki__ekipa .g-paczki__ekipa-tytul { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--ink); font-size: 1.05rem; font-weight: 600; }
:is(.g-paczki__prosba-tytul, .g-paczki__ekipa-tytul) .icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--pink-text); }
/* Zaproszenie do zdjęcia z paczką: hasztag i przyciski profili (białe, cienka ramka, bez cieni) */
.g-paczki__ekipa .g-paczki__ekipa-linki { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.g-paczki__hasztag { padding: .35rem .75rem; border-radius: 99px; background: var(--pink-soft); color: var(--pink-text); font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.g-paczki__profil { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.g-paczki__profil:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.g-info-hero .g-paczki__ekipa { max-width: 46rem; margin: 1.25rem 0 0; }
.g-paczki--strona h2 { margin: 0 0 1.25rem; }
.g-paczki__siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.g-paczki__cta .g-akcje { margin: 0; justify-content: center; }
@media (max-width: 960px) {
	.g-paczki__glowa { grid-template-columns: minmax(0, 1fr); }
	.g-paczki__lista { grid-auto-columns: calc((100% - 2 * .75rem) / 3); }
	.g-paczki__dol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.g-paczki__dol > * { padding: 1.2rem 1.1rem 1.3rem; }
	.g-paczki__lista { grid-auto-columns: 70%; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	.g-paczki__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}
/* Powiększenie zdjęć (opinie, realizacje, nasze paczki — main.js), od 21.10.2026 (właściciel: „ładniejszy,
   pełnoekranowy, dopasowany do naszej strony”): cały ekran w kolorze tła strony, zdjęcie na środku z zaokrąglonymi
   rogami, białe okrągłe przyciski z cienką ramką (bez cieni, po najechaniu tylko kolor), miniatury na dole */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: var(--bg); }
.lightbox__gora { display: flex; align-items: center; gap: 1rem; padding: .85rem var(--gut); }
.lightbox__tytul { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; }
.lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: .75rem; min-height: 0; margin: 0; padding: 0 calc(var(--gut) + 3.75rem) 1rem; }
.lightbox__img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: var(--r); background: #fff; object-fit: contain; transition: opacity .2s; }
.lightbox__img.is-laduje { opacity: .4; }
.lightbox__caption { color: var(--text); font-size: .92rem; line-height: 1.45; text-align: center; }
.lightbox__caption[hidden] { display: none; }
.lightbox__btn { position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.lightbox__btn:hover { border-color: var(--pink-btn); color: var(--pink-text); }
.lightbox__btn .icon { width: 1.25rem; height: 1.25rem; }
.lightbox__close { position: static; flex: none; width: 2.75rem; height: 2.75rem; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: var(--gut); }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__next { right: var(--gut); }
.lightbox__btn[hidden] { display: none; }
.lightbox__miniatury { display: flex; justify-content: safe center; gap: .5rem; overflow-x: auto; padding: .25rem var(--gut) 1rem; scrollbar-width: none; }
.lightbox__miniatury[hidden] { display: none; }
.lightbox__miniatura { flex: none; width: 3.75rem; height: 3.75rem; padding: 0; overflow: hidden; border: 2px solid var(--paper); border-radius: var(--r-s); background: #fff; cursor: pointer; }
.lightbox__miniatura:hover { border-color: var(--line); }
.lightbox__miniatura[aria-current="true"] { border-color: var(--ink); }
.lightbox__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox :focus-visible { outline: 3px solid var(--blue-text); outline-offset: 2px; }
@media (max-width: 640px) {
	.lightbox__figure { padding: 0 .75rem .75rem; }
	.lightbox__prev, .lightbox__next { width: 2.6rem; height: 2.6rem; }
	.lightbox__prev { left: .5rem; }
	.lightbox__next { right: .5rem; }
	.lightbox__miniatura { width: 3rem; height: 3rem; }
}
.g-paczki--strona { display: block; }
.g-paczki--strona h2 { margin: 0 0 1.25rem; }
.g-paczki__siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.g-paczki__cta .g-akcje { margin: 0; justify-content: center; }
@media (max-width: 1180px) {
	.g-paczki { grid-template-columns: minmax(0, 1fr); }
	.g-paczki__wstep { max-width: 46rem; }
}
@media (max-width: 640px) {
	.g-paczki__prosba { padding: 1.2rem 1.1rem 1.3rem; }
	.g-paczki__lista { grid-auto-columns: 70%; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	.g-paczki__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}
@media (max-width: 960px) {
	.g-realizacje__lista { grid-auto-columns: calc((100% - 2 * .75rem) / 3); }
}
@media (max-width: 640px) {
	.g-realizacje__lista { grid-auto-columns: 70%; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
	.g-realizacje .g-karuzela__btn { display: none; }
}
.g-realizacje__podpis { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Podziękowanie za zamówienie (od 22.10.2026, woocommerce/checkout/thankyou.php; właściciel: „dostosuj jeszcze
   bardziej pod styl naszej strony”): białe panele g-panel, typografia stron informacyjnych, kroki jak „Od projektu
   do paczki” (bieżący krok różowy), dane do przelewu i szczegóły zamówienia w takich samych panelach */
.g-dzieki { display: grid; gap: 1.25rem; }
.g-dzieki > * { margin: 0 !important; }
.g-dzieki__glowa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.g-dzieki__glowa .g-hero__tytul { margin: 0 0 .75rem; }
.g-dzieki__dalej { max-width: 44rem; margin: 0 0 1.25rem; color: var(--text); }
.g-dzieki__gifciak { width: clamp(8rem, 15vw, 12rem); margin-right: clamp(0rem, 3vw, 2rem); }
.g-dzieki .thanks-bubble { max-width: 38rem; margin: 0; padding: 1rem 1.25rem .9rem; border-radius: var(--r); background: var(--mist); box-shadow: none; }
.g-dzieki .thanks-bubble::before { display: none; }
.g-dzieki .thanks-bubble__text { color: var(--ink); font-size: 1.05rem; }
.g-dzieki .thanks-bubble__more { color: var(--blue-text); text-decoration: none; font-weight: 600; }
.g-dzieki .thanks-bubble__more:hover { color: var(--pink-text); }
.g-dzieki__dane { padding: 1.25rem clamp(1.25rem, 3vw, 2.25rem); }
.g-dzieki__dane dl { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); margin: 0; }
.g-dzieki__dane dt { color: var(--muted); font-size: .85rem; }
.g-dzieki__dane dd { margin: .2rem 0 0; color: var(--ink); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.g-dzieki__kroki { padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-dzieki__kroki h2, .thanks.g-dzieki :is(.wc-bacs-bank-details-heading, .woocommerce-order-details__title, .woocommerce-column__title) { margin: 0 0 1.25rem; color: var(--ink); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 600; }
.g-dzieki__etapy .g-etap:last-child { background: var(--mist); }
.g-dzieki__etapy .g-etap:last-child .g-etap__ikona { color: var(--blue-text); }
.g-kroki.g-dzieki__etapy .g-etap:last-child .g-etap__nr { border-color: var(--mist); }
.g-dzieki__etapy .g-etap.is-teraz { background: var(--pink-soft); }
.g-dzieki__etapy .g-etap.is-teraz .g-etap__ikona { color: var(--pink-text); }
.g-kroki.g-dzieki__etapy .g-etap.is-teraz .g-etap__nr { border-color: var(--pink-soft); }
.g-kroki.g-dzieki__etapy .g-etap.is-zrobione .g-etap__nr { background: var(--ok); }
.g-dzieki__etapy .g-etap:not(.is-zrobione):not(.is-teraz) .g-etap__nr { background: var(--muted); }
.g-dzieki__etapy .g-etap__nr .icon { width: .8rem; height: .8rem; stroke-width: 3; }
.g-dzieki__termin { margin: 1.25rem 0 0; }
.thanks.g-dzieki :is(.woocommerce-bacs-bank-details, .woocommerce-order-details, .woocommerce-customer-details) { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-color: transparent; border-radius: var(--r-l); }
.thanks.g-dzieki > p { padding: 1rem 1.25rem; border-radius: var(--r); background: var(--blue-soft); color: var(--text); }
.g-dzieki__koniec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); }
.g-dzieki__koniec .g-paczki__ekipa { margin: 0; }
.g-dzieki__akcje { margin: 0; justify-content: flex-end; }
@media (max-width: 1180px) {
	.g-dzieki__dane dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.g-dzieki__email { grid-column: span 2; }
}
@media (max-width: 760px) {
	.g-dzieki__glowa { grid-template-columns: minmax(0, 1fr); }
	.g-dzieki__gifciak { order: -1; width: 7rem; margin: 0; }
	.g-dzieki__dane dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-dzieki__email { grid-column: 1 / -1; }
	.g-dzieki__koniec { grid-template-columns: minmax(0, 1fr); }
	.g-dzieki__akcje { justify-content: flex-start; }
}

/* Karta produktu (22.10.2026, właściciel: „na wąskich ekranach, jak jest już wersja mobilna, sekcje jedna pod
   drugą”): od szerokości, przy której nagłówek przechodzi w wersję mobilną (1180 px), panele karty (galeria, nazwa
   i kolor, zakup, logo) układają się jeden pod drugim jak na telefonie — bez pustego miejsca obok galerii. Galeria
   ma wtedy ograniczoną szerokość, żeby pionowe zdjęcie nie zajmowało kilku ekranów. */
@media (min-width: 961px) and (max-width: 1180px) {
	.g-kp, .g-kp--detal { grid-template-columns: minmax(0, 1fr); }
	.g-kp--trzy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeria" "glowa" "koszyk"; grid-template-rows: none; }
	.g-kp--logo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeria" "glowa" "koszyk" "logo"; grid-template-rows: none; }
	.g-kp--logo > .g-kp__kup--koszyk { margin-top: 0; }
	.g-kp--logo .g-kp__projekt { margin-top: 0; padding-top: 0; border-top: 0; }
	.g-kp__podsum { grid-column: auto; position: static; }
	.g-kp-opis { grid-template-columns: minmax(0, 1fr); }
	.g-galeria, .g-kp__galeria .g-galeria { position: relative; top: auto; }
	.g-kp__galeria { border-radius: var(--r-l); background: var(--paper); }
	.g-kp__galeria .g-galeria { max-width: 44rem; margin-inline: auto; background: none; }
}

/* Lista sortowania na tablecie i telefonie: 16 px, żeby iPhone nie powiększał strony po dotknięciu (przegląd 22.10.2026) */
@media (max-width: 1023px) {
	select.orderby, .woocommerce-ordering select { font-size: 16px; }
}