/*
Theme Name: Pracownia Gitar
Theme URI: https://pracowniagitar.pl
Description: Motyw-dziecko Ollie dla Pracowni Gitar — ciemny grafit (#1E1D1D) + amber (#FFB000). Header/stopka i style marki; sklep WooCommerce + rezerwacje BookMint.
Author: Pracownia Gitar
Template: ollie
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: pracownia-gitar
*/

/* Kolory i typografia globalna idą przez theme.json.
   Tutaj metryki headera/stopki i ikony.

   ŹRÓDŁO WARTOŚCI: realny CSS Elementora z produkcji pracowniagitar.pl
   (kit post-10.css, header post-1862.css, stopka post-1655.css).
   UKŁAD: mockup z dev (design/mockup-landing.png).
   Font: Poppins — świadoma zmiana wobec produkcji (tam Montserrat). */

:root {
	/* Paleta „Beton": szarosc niesie plaszczyzny, pomarancz jest jedynym kolorem,
	   brazy schodza do tekstu. Zrodlo: prototyp prototypy/pracownia-warianty.html. */
	--pg-accent: #ff6633;        /* CTA, ikony, podkreslenia — jedyny kolor */
	--pg-accent-hover: #e24e1c;
	--pg-beton: #cccccc;         /* kolor wiodacy: pasek kontaktowy, ramki */
	--pg-ink: #4b4643;           /* ciemne pasy: nawigacja, stopka */
	--pg-ink-2: #565150;         /* kafle na ciemnym tle */
	--pg-text-soft: #ecebea;
	--pg-text-muted: #9c9895;
	--pg-line: #e4e4e4;
	/* Fonty jak w prototypie: naglowki Fraunces, tresc Plex Sans, liczby Plex Mono. */
	--pg-font-display: Fraunces, Georgia, "Times New Roman", serif;
	--pg-font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pg-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
	--pg-topbar-h: 40px;
	--pg-bar-h: 77px;
	/* Gdzie zatrzymują się elementy przyklejone przy przewijaniu: pod paskiem
	   nawigacji, z odstępem. Pasek admina WP dokłada swoje 32px (niżej). */
	--pg-sticky-top: calc(var(--pg-bar-h) + 28px);
}

/* ---------------------------------------------------------------
   STICKY — przy przewijaniu zostaje sam pasek grafit, amber odjeżdża.
   Sticky działa tylko w obrębie rodzica, a nasze paski siedzą w <header>
   o wysokości ~117px — dlatego przyklejamy CAŁY <header> z ujemnym top
   równym wysokości topbara. Efekt: amber wysuwa się poza ekran,
   czarny pasek zatrzymuje się na górze.
   --------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: calc(-1 * var(--pg-topbar-h));
	z-index: 100;
}

/* pasek admina WP jest fixed dopiero od 783px */
.admin-bar .site-header {
	top: calc(32px - var(--pg-topbar-h));
}

.admin-bar {
	--pg-sticky-top: calc(var(--pg-bar-h) + 28px + 32px);
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: calc(-1 * var(--pg-topbar-h));
	}

	/* Poniżej 783px pasek admina zjeżdża razem ze stroną, więc nic nie dokłada. */
	.admin-bar {
		--pg-sticky-top: calc(var(--pg-bar-h) + 28px);
	}
}

/* ---------------------------------------------------------------
   IKONY (maski SVG — kolor dziedziczony z tekstu)
   --------------------------------------------------------------- */

.pg-ico::before,
.pg-cart a::before,
.pg-cta .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pg-ico--pin::before {
	width: 11px;
	height: 14px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.pg-ico--phone::before {
	width: 14px;
	height: 14px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.58.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.58.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
}

.pg-ico--mail::before {
	width: 15px;
	height: 15px;
	-webkit-mask-image: 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%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 6.5 9 6.5 9-6.5'/%3E%3C/svg%3E");
	mask-image: 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%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 6.5 9 6.5 9-6.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   TOPBAR — produkcja: tło #FFB000, padding 5px 20px, tekst 14px/600
   --------------------------------------------------------------- */

.pg-topbar {
	padding-top: 0;
	padding-bottom: 0;
}

.pg-topbar__row {
	min-height: var(--pg-topbar-h);
	padding: 5px 0;
	gap: 24px;
}

.pg-topbar p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pg-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.pg-topbar a {
	color: inherit;
	text-decoration: none;
}

.pg-topbar a:hover {
	text-decoration: underline;
}

/* adres + telefon jako jeden blok po lewej */
.pg-topbar__left {
	gap: 24px;
}

.pg-topbar__right {
	gap: 20px;
}

/* ---------------------------------------------------------------
   PRZEŁĄCZNIK JĘZYKA — własny dropdown na <details> (shortcode)
   --------------------------------------------------------------- */

.pg-topbar nav {
	line-height: 1.4;
}

.pg-lang {
	position: relative;
	line-height: 1;
}

/* przycisk */
.pg-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 11px 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--pg-ink);
	border: 1px solid rgba(75, 70, 67, 0.4);
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pg-lang__btn::-webkit-details-marker {
	display: none;
}

.pg-lang__btn:hover {
	background-color: rgba(75, 70, 67, 0.09);
	border-color: var(--pg-ink);
}

.pg-lang[open] .pg-lang__btn {
	background-color: var(--pg-ink);
	border-color: var(--pg-ink);
	color: #fff;
}

.pg-lang__globe,
.pg-lang__chevron {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.pg-lang__chevron {
	width: 11px;
	height: 11px;
	stroke-width: 2.4;
	transition: transform 0.18s ease;
}

.pg-lang[open] .pg-lang__chevron {
	transform: rotate(180deg);
}

/* panel */
.pg-lang__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	right: 0;
	min-width: 148px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--pg-ink);
	border: 1px solid rgba(255, 102, 51, 0.35);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.pg-lang__menu::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 16px;
	width: 9px;
	height: 9px;
	background-color: var(--pg-ink);
	border-left: 1px solid rgba(255, 102, 51, 0.35);
	border-top: 1px solid rgba(255, 102, 51, 0.35);
	transform: rotate(45deg);
}

.pg-lang__item {
	margin: 0;
}

.pg-lang__item a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pg-lang__item a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--pg-accent);
	text-decoration: none;
}

.pg-lang__code {
	min-width: 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pg-accent);
}

.pg-lang__item.is-current a {
	background-color: rgba(75, 70, 67, 0.12);
}

.pg-lang__item.is-current .pg-lang__name::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 7px;
	vertical-align: -1px;
	background-color: var(--pg-accent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* shortcode w części szablonu nie ma opakowania — wyrównanie w rzędzie */
.pg-topbar__right > p {
	margin: 0;
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------
   PASEK GŁÓWNY — produkcja: tło #1E1D1D, padding 10px 0, wys. 77px
   --------------------------------------------------------------- */

.pg-bar {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid var(--pg-line);
}

.pg-bar__row {
	min-height: var(--pg-bar-h);
	padding: 10px 0;
	gap: 32px;
}

/* Logo w pasku: wersja na jasne tło, prosto z plików marki.
   Wymiar bierzemy z WYSOKOŚCI, nie z szerokości — nowy układ znaku jest
   bardziej kwadratowy niż poprzedni, a to wysokość decyduje o rytmie paska. */
.pg-bar .pg-logo {
	display: inline-flex;
	line-height: 0;
	padding: 5px 0 10px;
}

.pg-bar .pg-logo img {
	height: 54px;
	width: auto;
}

.pg-bar__right {
	gap: 40px;
}

/* Menu — produkcja: 16px/600, odstęp 42px, margines 20px od koszyka */
.pg-nav {
	gap: 42px;
	margin-right: 20px;
}

.pg-nav .wp-block-navigation__container {
	gap: 42px;
}

.pg-nav .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 600;
	color: var(--pg-ink);
	text-decoration: none;
	white-space: nowrap;
}

.pg-nav .wp-block-navigation-item__content:hover,
.pg-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--pg-accent);
}

/* Bieżąca strona i hover = sam kolor amber, bez podkreślenia.
   Rdzeń WP podkreśla oba stany regułą o TAKIEJ SAMEJ specyficzności,
   a ładuje się później — dlatego selektor musi być o klasę dłuższy
   (stąd prefiks .pg-bar). */
.pg-bar .pg-nav .wp-block-navigation-item .wp-block-navigation-item__content,
.pg-bar .pg-nav .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.pg-bar .pg-nav .wp-block-navigation-item .wp-block-navigation-item__content:focus,
.pg-bar .pg-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	text-decoration: none;
}

/* --- MENU MOBILNE (nakładka) ---
   Produkcja: tło #1E1D1D, linki białe 16px/600 — odtwarzamy to samo.
   Rdzeń WP przełącza nakładkę dopiero poniżej 600px, a my chowamy menu
   już poniżej 781px (reszta paska też się tam przełącza), więc
   przełączenie hamburgera wymuszamy własną regułą niżej. */

.pg-nav .wp-block-navigation__responsive-container-open {
	color: var(--pg-ink);
	padding: 4px;
}

/* Krzyzyk zamykajacy siedzi w ciemnej nakladce, wiec zostaje bialy. */
.pg-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
	padding: 4px;
}

.pg-nav .wp-block-navigation__responsive-container-open:hover,
.pg-nav .wp-block-navigation__responsive-container-close:hover {
	color: var(--pg-accent);
}

.pg-nav .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* Rdzeń WP rysuje hamburger z DWÓCH kresek — podmieniamy na klasyczne trzy
   równej grubości. Maska CSS, więc ikona dziedziczy kolor (biały / amber). */
.pg-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.pg-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.25' width='18' height='1.9' rx='0.95'/%3E%3Crect x='3' y='11.05' width='18' height='1.9' rx='0.95'/%3E%3Crect x='3' y='16.85' width='18' height='1.9' rx='0.95'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.25' width='18' height='1.9' rx='0.95'/%3E%3Crect x='3' y='11.05' width='18' height='1.9' rx='0.95'/%3E%3Crect x='3' y='16.85' width='18' height='1.9' rx='0.95'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 22px 20px 40px;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	/* pierwsza pozycja musi zaczynać się pod krzyżykiem zamykania */
	padding-top: 44px;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 2px;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: -2px;
	border-radius: 8px;
	color: var(--pg-accent);
}

.pg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.pg-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: var(--pg-accent);
}

/* Koszyk (układ z mockupu: sama ikona torby) */
.pg-cart {
	margin: 0;
	display: flex;
	align-items: center;
}

.pg-cart a {
	display: inline-flex;
	align-items: center;
	color: var(--pg-ink);
	text-decoration: none;
}

.pg-cart a:hover {
	color: var(--pg-accent);
}

.pg-cart a::before {
	width: 20px;
	height: 23px;
	-webkit-mask-image: 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='M5.5 8h13l1 12.5H4.5L5.5 8z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
	mask-image: 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='M5.5 8h13l1 12.5H4.5L5.5 8z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
}

/* CTA „Umów wizytę" — produkcja: 16/600, radius 39px, hover #E49E01.
   Na mobile etykieta skraca się do „Rezerwuj" (patrz media query). */
.pg-cta {
	margin: 0;
}

.pg-cta__short {
	display: none;
}

.pg-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	border-radius: 39px;
	white-space: nowrap;
}

.pg-cta .wp-block-button__link:hover {
	background-color: var(--pg-accent-hover);
}

.pg-cta .wp-block-button__link::before {
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 1.5v2h10v-2h2v2h1.5A1.5 1.5 0 0 1 22 5v15.5A1.5 1.5 0 0 1 20.5 22h-17A1.5 1.5 0 0 1 2 20.5V5a1.5 1.5 0 0 1 1.5-1.5H5v-2h2zM4 9v11h16V9H4zm3 2.5h2.5V14H7v-2.5zm5 0h2.5V14H12v-2.5zm5 0h2.5V14H17v-2.5zM7 16h2.5v2.5H7V16zm5 0h2.5v2.5H12V16z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 1.5v2h10v-2h2v2h1.5A1.5 1.5 0 0 1 22 5v15.5A1.5 1.5 0 0 1 20.5 22h-17A1.5 1.5 0 0 1 2 20.5V5a1.5 1.5 0 0 1 1.5-1.5H5v-2h2zM4 9v11h16V9H4zm3 2.5h2.5V14H7v-2.5zm5 0h2.5V14H12v-2.5zm5 0h2.5V14H17v-2.5zM7 16h2.5v2.5H7V16zm5 0h2.5v2.5H12V16z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   STOPKA — wg projektu „Beton": logo z podpisem na górze, cztery
   równe kafle wyrównane do lewej, pasek dolny z copyrightem i linkami.
   Godziny zostają na dotychczasowym komponencie (dziś + cały tydzień).
   --------------------------------------------------------------- */

.pg-footer {
	padding-top: 54px;
	padding-bottom: 28px;
	color: #fff;
}

/* logo + tagline — jedyny wyśrodkowany blok stopki */
/* Wiersz z logo: po lewej dowod (ocena Google), na srodku logo z podpisem,
   po prawej akcja. Boczne kolumny 1fr trzymaja logo dokladnie na srodku. */
.pg-footer__brand {
	display: grid;
	/* Trzy RÓWNE kolumny. Przy `1fr auto 1fr` środkowa brała tylko tyle, ile
	   potrzebuje podpis (ok. 25%), a boczne rosły do ~36% — przez co ich środki,
	   a więc i wyśrodkowane w nich ocena i przycisk, przesuwały się do środka.
	   `1fr` ma minimum `auto`, więc przy ciasnym ekranie logo nadal się zmieści. */
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	gap: 16px;
	padding-bottom: 34px;
	text-align: center;
}

.pg-footer__proof {
	grid-column: 1;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	text-align: center;
}

/* Ocena Google: komponent i style ma teraz wtyczka „Pracownia Opinie".
   Motyw odpowiada wyłącznie za miejsce w siatce (.pg-footer__proof). */

.pg-footer__identity {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Przycisk jest TEN SAM co w hero — shortcode bookminta, więc jego wygląd
   (kolor, promień, treść „najbliższy wolny termin") ustawia wtyczka.
   Motyw odpowiada tylko za ustawienie kolumny i podpis nad przyciskiem. */
.pg-footer__cta {
	grid-column: 3;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* Podpis jak etykiety kafli — ten sam krój roli w stopce. */
.pg-footer__cta-label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--pg-beton);
}

.pg-footer__brand .wp-block-site-logo {
	line-height: 0;
	margin: 0;
}

.pg-footer__brand .wp-block-site-logo img {
	width: 220px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.pg-footer__tagline {
	margin: 0;
	font-family: var(--pg-font-display);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pg-beton);
}

/* ---- kafle ---- */
.pg-tiles {
	gap: 16px;
	align-items: stretch;
}

.pg-tile {
	flex: 1 1 260px;
	display: grid;
	gap: 10px;
	align-content: start;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 22px 18px;
	text-align: left;
}

.pg-tile__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--pg-beton);
}

.pg-tile__value {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.pg-tile__value a {
	color: inherit;
	text-decoration: none;
}

.pg-tile__value a:hover {
	color: var(--pg-beton);
}

/* ---- godziny wewnątrz kafla ---- */
.pg-tile .pg-hours {
	margin: 0;
}

.pg-hours__summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	list-style: none;
}

.pg-hours__summary::-webkit-details-marker {
	display: none;
}

/* po rozwinięciu tydzień ZASTĘPUJE dzisiejszy dzień — inaczej by się dublował */
.pg-hours__week[open] .pg-hours__state,
.pg-hours__week[open] .pg-hours__detail {
	display: none;
}

.pg-hours__week[open] .pg-hours__toggle {
	margin-top: 0;
}

.pg-hours__state {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--pg-accent);
}

.pg-hours__detail {
	font-family: var(--pg-font-mono, ui-monospace, "Cascadia Mono", monospace);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

.pg-hours__toggle {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pg-accent);
	cursor: pointer;
}

.pg-hours__toggle::-webkit-details-marker {
	display: none;
}

.pg-hours__toggle:hover {
	text-decoration: underline;
}

.pg-hours__toggle-hide {
	display: none;
}

.pg-hours__week[open] .pg-hours__toggle-show {
	display: none;
}

.pg-hours__week[open] .pg-hours__toggle-hide {
	display: inline;
}

.pg-hours__list {
	margin: 0;
	display: grid;
	gap: 6px;
}

.pg-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

.pg-hours__row.is-closed .pg-hours__time {
	color: rgba(255, 255, 255, 0.5);
}

.pg-hours__row.is-today {
	color: var(--pg-accent);
	font-weight: 600;
}

.pg-hours__row.is-today .pg-hours__time {
	color: var(--pg-accent);
}

.pg-hours__day,
.pg-hours__time {
	margin: 0;
}

.pg-hours__time {
	font-family: var(--pg-font-mono, ui-monospace, "Cascadia Mono", monospace);
	color: rgba(255, 255, 255, 0.7);
}

/* ---- pasek dolny: copyright z lewej, linki z prawej ---- */
/* Rdzeń WP zeruje marginesy dzieci w layoucie flex, więc rozsunięcie
   copyrightu i linków robimy na kontenerze, a nie przez margin-left:auto. */
.pg-footer .pg-footer__bottom {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	gap: 14px;
	justify-content: space-between;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.62);
}

.pg-footer__copy {
	margin: 0;
}

.pg-footer__links {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pg-footer__links a {
	color: inherit;
	text-decoration: none;
}

.pg-footer__links a:hover {
	color: var(--pg-beton);
}

/* ---------------------------------------------------------------
   KOMPONENTY BOOKMINTA OSADZONE W MOTYWIE
   Wtyczka ma własne tokeny, ale na tej stronie ma mówić językiem motywu:
   pigułka jak przyciski w nagłówku i hero oraz biały tekst na pomarańczu.
   --------------------------------------------------------------- */

/* Bookmint liczy kolor tekstu na akcencie automatycznie (kontrast WCAG) i dla
   #ff6633 wychodzi mu prawie czarny. W motywie ten przycisk ma biały tekst.
   Podwójna klasa daje wyższą specyficzność niż styl inline wtyczki,
   niezależnie od kolejności wczytywania arkuszy. */
.bmf.bmf {
	--bmf-on-accent: #fff;
}

/* Promień kontrolek ustawia sama wtyczka (Wygląd → Krawędzie = „Pigułka”),
   więc motyw już go nie nadpisuje. */

/* ---------------------------------------------------------------
   KARTY USŁUG (strona główna, [pg_uslugi styl="karty"])
   Zdjęcie z tytułem, a zakres wysuwa się pod kursorem. Na urządzeniach
   bez myszy zakres jest widoczny od razu — obietnica „zobacz pełen zakres"
   nie może zależeć od najechania, którego na dotyku nie ma.
   --------------------------------------------------------------- */
/* Główka sekcji: sygnet z logo po lewej, cienka kreska, teksty do lewej. */
.pg-glowka {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 28px;
}

.pg-glowka__znak {
	flex: none;
	height: 78px;
	width: auto;
}

.pg-glowka__kreska {
	flex: none;
	width: 1px;
	/* Kreska rośnie z tekstem, a nie z sygnetem — stąd stretch, nie stała wysokość. */
	align-self: stretch;
	background-color: var(--pg-line);
}

.pg-glowka__tytul {
	margin: 0;
	font-size: 38px;
	line-height: 1.12;
}

.pg-glowka__dopisek {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--pg-accent);
}

.pg-karty {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pg-karta {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
}

.pg-karta img,
.pg-karta__pusta {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.pg-karta__pusta {
	background-color: var(--pg-ink);
}

.pg-karta:hover img {
	transform: scale(1.06);
}

/* Nakładka ciemnieje pod kursorem, żeby wysunięty zakres był czytelny. */
.pg-karta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(54, 38, 28, 0) 30%, rgba(54, 38, 28, 0.92) 100%);
	transition: background 0.4s ease;
}

.pg-karta:hover::after,
.pg-karta:focus-visible::after {
	background: linear-gradient(180deg, rgba(54, 38, 28, 0.35) 0%, rgba(54, 38, 28, 0.95) 60%);
}

.pg-karta__tresc {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px 22px;
}

.pg-karta__tytul {
	font-family: var(--pg-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.pg-karta__zakres {
	display: grid;
	gap: 7px;
	max-height: 0;
	padding-top: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s ease, opacity 0.3s ease, padding-top 0.45s ease;
}

.pg-karta:hover .pg-karta__zakres,
.pg-karta:focus-visible .pg-karta__zakres {
	max-height: 200px;
	padding-top: 14px;
	opacity: 1;
}

.pg-karta__punkt {
	display: flex;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.4;
}

.pg-karta__punkt::before {
	content: '';
	flex: none;
	width: 5px;
	height: 5px;
	margin-top: 8px;
	border-radius: 50%;
	background-color: var(--pg-accent);
}

.pg-karta__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 16px;
	padding: 10px 18px;
	border-radius: 999px;
	background-color: var(--pg-accent);
	font-size: 13.5px;
	font-weight: 700;
}

.pg-karta:hover .pg-karta__cta {
	background-color: var(--pg-accent-hover);
}

/* Bez myszy nie ma najechania — zakres pokazujemy od razu. */
@media (hover: none) {
	.pg-karta__zakres {
		max-height: 200px;
		padding-top: 14px;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------
   ZAJAWKA „O PRACOWNI" (ciemny przerywnik na stronie głównej)
   Krótka wizytówka pracowni z odesłaniem na stronę „O nas". Ciemny pas
   rozbija ciąg jasnych sekcji między kartami usług a procesem.
   --------------------------------------------------------------- */
.pg-opracowni {
	background-color: var(--pg-ink);
	color: var(--pg-text-soft);
}

.pg-opracowni .pg-glowka__tytul {
	color: #fff;
}

.pg-opracowni .pg-glowka__kreska {
	background-color: rgba(255, 255, 255, 0.22);
}

/* Sygnet jest ciemny, na grafitowym tle odwracamy go na biel. */
.pg-opracowni .pg-glowka__znak {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.pg-opracowni__uklad {
	gap: 64px;
}

.pg-opracowni__tekst {
	margin: 22px 0 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: #cfc9c5;
}

.pg-opracowni__foto img {
	display: block;
	border-radius: 14px;
}

/*
 * Zdjęcia w jasnych sekcjach „O nas". Zaokrąglenie dla .pg-onas__foto jest
 * zapisane tylko wewnątrz .pg-duo, a strona składa je ze zwykłych kolumn,
 * więc tam nigdy nie działało. Ta sama wartość co w sekcjach ciemnych.
 */
.pg-onas__foto img {
	display: block;
	border-radius: 14px;
}

/* Reszta przycisków na stronie to pigułki, ten ma wyglądać tak samo. */
.pg-opracowni .wp-block-button__link {
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
}

/* ---------------------------------------------------------------
   PROCES („Porozmawiajmy o Twoim instrumencie")
   Główka siedzi w lewej szpalcie i towarzyszy przewijaniu, kroki lecą
   jedną kolumną po prawej. Oś z sygnetami rysuje CSS, więc w treści
   strony zostają same bloki tekstu, edytowalne bez dotykania kodu.
   --------------------------------------------------------------- */
.pg-proces__uklad {
	gap: 70px;
}

.pg-proces__kolumna {
	position: sticky;
	top: var(--pg-sticky-top);
	/* Rdzeń WP trzyma na bloku kolumn `align-items: normal !important`, więc
	   szpalty domyślnie rozciągają się na całą wysokość rzędu, a rozciągnięty
	   element nie ma po czym jechać. Wyjmujemy z tego samą szpaltę główki,
	   bo `align-self` na dziecku nie jest objęte tamtą regułą. */
	align-self: flex-start;
}

.pg-proces__lead {
	margin: 22px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
}

.pg-proces__przypis {
	margin: 30px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pg-text-muted);
}

.pg-krok {
	position: relative;
	padding: 0 0 34px 56px;
}

.pg-krok:last-child {
	padding-bottom: 0;
}

/* Sygnet zastępuje pinezkę ze starej wersji sekcji. */
.pg-krok::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 28px;
	background: url("assets/logo/pg-znak.svg") no-repeat center / contain;
}

/* Oś biegnie od sygnetu do następnego kroku; ostatni jej nie potrzebuje. */
.pg-krok::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 34px;
	bottom: 0;
	width: 1px;
	background-color: var(--pg-line);
}

.pg-krok:last-child::after {
	display: none;
}

.pg-krok__nr {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pg-accent);
}

.pg-krok__tytul {
	margin: 0 0 8px;
	font-size: 23px;
	line-height: 1.2;
}

.pg-krok__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 1.72;
}

/* ---------------------------------------------------------------
   PASEK OBSŁUGIWANYCH INSTRUMENTÓW (pod hero)
   Wąski pas na całą szerokość: nazwy rozdzielone sygnetem z logo,
   przesuwające się w pętli. Lista jest w kodzie dwa razy, więc
   przesunięcie o 50% wraca do punktu wyjścia bez szwu.
   --------------------------------------------------------------- */
/* WordPress wstawia odstęp między blokami najwyższego poziomu (block gap);
   pasek ma dotykać hero, więc ten odstęp zerujemy. */
.pg-pasek-wrap {
	margin-block-start: 0;
}

.pg-pasek {
	overflow: hidden;
	background-color: var(--pg-ink);
	color: #fff;
}

.pg-pasek__tor {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 18px 0;
	white-space: nowrap;
	width: max-content;
	animation: pg-pasek-jedzie 45s linear infinite;
}

/* Druga kopia listy siedzi w jednym span, więc dziedziczy układ toru. */
.pg-pasek__tor > span[aria-hidden] {
	display: flex;
	align-items: center;
	gap: 26px;
}

.pg-pasek__nazwa {
	font-size: 14.5px;
	letter-spacing: 0.02em;
}

.pg-pasek__znak {
	width: 12px;
	height: auto;
	opacity: 0.7;
	/* Sygnet jest ciemny — na grafitowym tle odwracamy go na biel. */
	filter: brightness(0) invert(1);
}

/* Najechanie zatrzymuje ruch, żeby dało się przeczytać. */
.pg-pasek:hover .pg-pasek__tor {
	animation-play-state: paused;
}

@keyframes pg-pasek-jedzie {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.pg-pasek__tor {
		animation: none;
	}
}

/* ---------------------------------------------------------------
   WPIS USŁUGI
   Zdjęcie idzie na całą szerokość jako tło nagłówka, z tytułem na nim.
   Treść i rezerwacja stoją pod spodem w dwóch kolumnach — dzięki temu
   nie ma pustej szpalty, a zdjęcie pracuje, zamiast wisieć z boku.
   --------------------------------------------------------------- */
.pg-uh {
	min-height: 420px;
	align-items: flex-end;
}

.pg-uh__nad {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pg-accent);
}

.pg-uh__tytul {
	margin: 0;
	font-size: 60px;
	line-height: 1.02;
	color: #fff;
}

.pg-uh__lead {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--pg-text-soft);
}

/* ---- treść ---- */
.pg-utresc {
	/* Odstęp szpalt jak na stronach bookmint (38 px), a sama szpalta
	   rezerwacji ma w treści wpisu stałe 372 px — tyle, ile karta bookmint. */
	gap: 38px;
	align-items: flex-start;
	padding-top: 56px;
	padding-bottom: 10px;
}

.pg-utresc p {
	font-size: 16.5px;
	line-height: 1.75;
}

.pg-utresc__podtytul {
	margin: 32px 0 14px;
	font-size: 28px;
	line-height: 1.2;
}

.pg-utresc ul {
	margin: 0;
	padding-left: 20px;
}

.pg-utresc li {
	margin-bottom: 8px;
	/* Bez tego punkty brałyby bazowy rozmiar motywu i byłyby większe od akapitów. */
	font-size: 16.5px;
	line-height: 1.6;
}

/* Kolumna z rezerwacją towarzyszy tekstowi przy przewijaniu. */
.pg-urez {
	position: sticky;
	top: var(--pg-sticky-top);
}

.pg-urez__nad,
.pg-upas__nad {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pg-ink-2);
}

.pg-urez__tytul,
.pg-upas__tytul {
	margin: 0 0 8px;
	font-family: var(--pg-font-display);
	font-size: 26px;
	line-height: 1.2;
}

.pg-urez__tekst,
.pg-upas__tekst {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pg-ink-2);
}

/* ---- pasek rezerwacji na całą szerokość (wariant poziomy) ---- */
.pg-upas {
	margin-top: 40px;
	padding-top: 44px;
	padding-bottom: 48px;
}

/* ---- blok kierujący do rezerwacji (lewa kolumna) ----
   Zaczepia wzrok pod listą i mówi wprost, co zrobić dalej. Strzałka wskazuje
   w bok na desktopie i w dół na telefonie, bo tam widget ląduje pod spodem. */
.pg-rezinfo {
	display: flex;
	gap: 16px;
	margin-top: 34px;
	padding: 22px 24px;
	background-color: var(--pg-tint);
	border-left: 3px solid var(--pg-accent);
	border-radius: 0 14px 14px 0;
}

.pg-rezinfo__ikona {
	flex: none;
	width: 34px;
	height: 34px;
	color: var(--pg-accent);
}

.pg-rezinfo__ikona svg {
	width: 100%;
	height: 100%;
	display: block;
}

.pg-rezinfo__nad {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pg-ink-2);
}

.pg-rezinfo__tytul {
	margin: 0 0 8px;
	font-family: var(--pg-font-display);
	font-size: 22px;
	line-height: 1.2;
}

.pg-rezinfo__tekst {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pg-ink-2);
}

.pg-rezinfo__wskaz {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pg-accent);
}

.pg-rezinfo__wskaz .pg-mobile { display: none; }

/* ---- zajawki pozostałych usług ----
   Tytuł leży na zdjęciu, tak jak w nagłówku usługi. Kafle jadą w poziomym
   torze: nadmiar chowa się za krawędzią zamiast rozpychać stronę w dół.
   Strzałki pojawiają się dopiero, gdy jest co przewijać, i tylko na myszy. */
.pg-usluga__stopka {
	margin-top: 64px;
	padding-top: 34px;
	/* Oddech przed stopką witryny — bez tego kafle kleiły się do ciemnego pasa. */
	padding-bottom: 80px;
	border-top: 1px solid var(--pg-line);
}

.pg-usluga__stopka-tytul {
	margin: 0 0 22px;
	font-size: 32px;
	line-height: 1.2;
}

.pg-inne {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pg-inne__tor {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 2px;
}

.pg-inne__tor::-webkit-scrollbar {
	display: none;
}

/* Karta w torze to ta sama karta co na stronie glownej, tylko wezsza.
   27% z kontenera 1140 px daje ~308 px, czyli 3,5 karty w widoku: czwarta
   wystaje zza krawedzi i widac, ze tor da sie przewinac. */
.pg-inne__tor .pg-karta {
	flex: 0 0 clamp(240px, 27%, 310px);
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	border-radius: 10px;
}

/* ---- strzałki ---- */
.pg-inne__nav {
	display: none;
	flex: none;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid var(--pg-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--pg-ink-2);
	cursor: pointer;
}

.pg-inne.ma-przewijanie .pg-inne__nav {
	display: grid;
}

.pg-inne__nav:hover:not(:disabled) {
	border-color: var(--pg-accent);
	color: var(--pg-accent);
}

.pg-inne__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------------------------------------------------------------
   RESPONSYWNOŚĆ — produkcja: kontener 1024px (≤1024) i 767px (≤767)
   --------------------------------------------------------------- */

@media (max-width: 860px) {
	.pg-uh {
		min-height: 320px;
	}

	.pg-uh__tytul {
		font-size: 36px;
	}

	.pg-utresc__podtytul {
		font-size: 24px;
	}

	/* Przyklejona kolumna nie ma sensu, gdy wszystko stoi w jednej szpalcie. */
	.pg-urez {
		position: static;
	}

	.pg-rezinfo__wskaz .pg-desktop { display: none; }
	.pg-rezinfo__wskaz .pg-mobile { display: inline; }

	.pg-karty {
		grid-template-columns: 1fr;
	}

	/* Na telefonie sygnet zostaje obok tytułu, tylko mniejszy — układ ma
	   wyglądać tak samo jak na desktopie. */
	.pg-glowka {
		gap: 15px;
	}

	.pg-glowka__znak {
		height: 56px;
	}

	.pg-glowka__tytul {
		font-size: 28px;
	}

	.pg-glowka__dopisek {
		font-size: 15px;
	}

	/* W jednej szpalcie główka nie ma za czym jechać. */
	.pg-proces__kolumna {
		position: static;
	}

	.pg-krok {
		padding-left: 46px;
	}

	/* Na dotyku tor przewija się palcem, strzałki tylko zabierałyby miejsce. */
	.pg-inne.ma-przewijanie .pg-inne__nav {
		display: none;
	}

	.pg-inne__tor .pg-karta {
		flex-basis: 70%;
	}

	/* Jedna kolumna; `order` stawia logo na gorze, niezaleznie od kolejnosci w kodzie. */
	.pg-footer__brand {
		grid-template-columns: 1fr;
		justify-items: center;
		/* W jednej kolumnie 18px zlewalo logo, ocene i przycisk w jeden blok. */
		gap: 30px;
	}

	.pg-footer__identity {
		grid-column: 1;
		order: 1;
	}

	.pg-footer__proof {
		grid-column: 1;
		order: 2;
		justify-self: center;
		align-items: center;
		text-align: center;
	}

	.pg-footer__cta {
		grid-column: 1;
		order: 3;
		justify-self: center;
	}

	/* Kafle takze stoja w slupku — 16px bylo za ciasne. */
	.pg-tiles {
		gap: 22px;
	}
}

@media (max-width: 1100px) {
	.pg-bar__right {
		gap: 24px;
	}

	.pg-nav,
	.pg-nav .wp-block-navigation__container {
		gap: 28px;
	}

	.pg-cta .wp-block-button__link {
		padding: 0 18px;
	}
}

@media (max-width: 781px) {
	:root {
		--pg-topbar-h: 48px;
	}

	/* Wyższy pasek — przełącznik i telefon muszą mieć wygodny cel dotykowy
	   (WCAG 2.5.8: min. 44×44px). */
	.pg-topbar__row {
		min-height: var(--pg-topbar-h);
		padding: 4px 0;
		gap: 12px;
		flex-wrap: nowrap;
	}

	/* na mobile zostaje telefon po lewej + przełącznik języka po prawej */
	.pg-topbar p.pg-topbar__addr {
		display: none;
	}

	.pg-topbar p {
		font-size: 15px;
		white-space: nowrap;
	}

	.pg-topbar__left {
		gap: 0;
		min-width: 0;
	}

	.pg-topbar__left a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}

	/* CZARNY PASEK — wszystko musi zmieścić się w 390px */
	.pg-bar__row {
		gap: 12px;
	}

	.pg-bar .pg-logo img {
		height: 38px;
	}

	.pg-bar__right {
		gap: 14px;
	}

	/* Hamburger zamiast pozycji menu już od 781px (rdzeń: dopiero 600px) */
	.pg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.pg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.pg-nav {
		margin-right: 0;
	}

	/* CTA skraca się do „Rezerwuj" */
	.pg-cta__long {
		display: none;
	}

	.pg-cta__short {
		display: inline;
	}

	.pg-cta .wp-block-button__link {
		padding: 0 16px;
		font-size: 15px;
	}

	.pg-lang__btn {
		gap: 7px;
		min-height: 36px;
		padding: 0 14px 0 13px;
		font-size: 13px;
	}

	.pg-lang__globe {
		width: 15px;
		height: 15px;
	}

	.pg-lang__chevron {
		width: 12px;
		height: 12px;
	}

	.pg-lang__menu {
		min-width: 172px;
		top: calc(100% + 10px);
	}

	.pg-lang__item a {
		padding: 12px;
		font-size: 14px;
	}

	.pg-footer {
		padding-top: 50px;
		padding-bottom: 30px;
	}

	.pg-footer__legal {
		gap: 24px;
	}

	/* kafle: dwa w rzędzie, a przy bardzo wąskim ekranie jeden */
	.pg-tile {
		flex: 1 1 calc(50% - 8px);
	}

	.pg-tile--hours {
		flex: 1 1 100%;
	}
}

/* Tekst tylko dla czytników ekranu (gdyby motyw nadrzędny nie definiował) */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Bez odstępu między nagłówkiem, treścią i stopką — rdzeń WP wstawia
   tu block-gap regułą `.wp-site-blocks > * + *`. Selektor musi mieć
   dwie klasy, żeby ją przebić. */
.wp-site-blocks > .pg-main,
.wp-site-blocks > .bmf-main,
.wp-site-blocks > .site-footer,
.wp-site-blocks > .site-header {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------
   HERO — zdjęcie na pełną szerokość, treść po lewej bez karty.
   Czytelność daje gradient 90deg gaszący lewą stronę kadru
   (ta sama technika co na produkcji, tylko łagodniejszy).
   --------------------------------------------------------------- */

/* własny kontener 1140px — rdzeń WP wymusza margin-inline:auto !important
   na dzieciach układu „constrained", więc tam nie da się wyrównać do lewej */
.pg-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.pg-hero__content {
	max-width: 560px;
}

/* Odstęp 20px. Reguła musi iść PRZED zerowaniem marginesów pojedynczych
   elementów, inaczej `margin: 0` ją zjada (ta sama specyficzność). */
.pg-hero__content > * {
	margin: 0;
}

.pg-hero__content > * + * {
	margin-top: 20px;
}

.pg-hero .pg-hero__title {
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	color: #f6f6f5;
}

.pg-hero__lead {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.2px;
	color: rgba(255, 255, 255, 0.82);
}

/* gwiazdki + opinie */
.pg-hero__rating {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pg-hero__stars {
	display: inline-flex;
	gap: 2px;
}

.pg-hero__stars svg {
	width: 16px;
	height: 16px;
	/* Ten sam akcent co przyciski — przygaszony odcień gubił się na zdjęciu. */
	fill: var(--pg-accent);
}

.pg-hero__rating-text {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.78);
}

/* przyciski */
.pg-hero__cta {
	margin-top: 28px;
	gap: 14px;
}

.pg-hero__ghost .wp-block-button__link {
	border: 2px solid rgba(255, 255, 255, 0.5);
	background-color: transparent;
	color: #fff;
}

.pg-hero__ghost .wp-block-button__link:hover {
	border-color: var(--pg-accent);
	color: var(--pg-accent);
	background-color: transparent;
}

@media (max-width: 1024px) {
	.pg-hero {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	.pg-hero__content {
		max-width: 60%;
	}
}

@media (max-width: 781px) {
	.pg-hero {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	/* na wąskim ekranie gradient musi gasić całą szerokość kadru */
	.pg-hero .wp-block-cover__gradient-background {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.85) 100%) !important;
	}

	.pg-hero__content {
		max-width: 100%;
	}

	.pg-hero .pg-hero__title {
		font-size: 30px;
		line-height: 1.2;
	}

	.pg-hero__lead {
		font-size: 14px;
		line-height: 1.5;
	}
}

/* ------------------------------------------------------------------ *
 * Pola formularzy
 *
 * Ollie obramowuje pola kolorem liczonym z presetu `tertiary`, którego
 * nasza paleta nie ma. Nieznana zmienna unieważnia całą deklarację
 * `border`, więc pola zostawały bez ramki (widoczny był tylko cień pod
 * spodem). Ustawiamy obramowanie na kolorach marki.
 * ------------------------------------------------------------------ */
input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
select,
textarea {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	padding: 11px 13px;
	box-shadow: none;
}

input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):hover,
select:hover,
textarea:hover {
	border-color: var(--wp--preset--color--beton);
}

input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	outline-offset: 0;
}

input::placeholder,
textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}

/* Pola wtyczki rezerwacji dziedziczą to samo obramowanie, ale mają własne
   odstępy i promień z tokenów bookminta. */
.bmf input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.bmf select,
.bmf textarea {
	border-radius: var(--bmf-radius-md, 10px);
	padding: 11px 12px;
}

/* ------------------------------------------------------------------ *
 * Treść stron (regulamin, polityka prywatności, „o nas")
 *
 * Domyślny rozmiar Ollie dla treści wpisu to ~18,6 px, czyli wyraźnie
 * więcej niż tekst w sekcjach strony. Wyrównujemy do 16 px.
 * ------------------------------------------------------------------ */
.page .wp-block-post-content p,
.page .wp-block-post-content li {
	font-size: 16px;
	line-height: 1.65;
}

/* ------------------------------------------------------------------ *
 * Przyciski do kanałów w sieci ([pg_social])
 * ------------------------------------------------------------------ */
.pg-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.pg-social__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.pg-social__btn:hover,
.pg-social__btn:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}

.pg-social__ikona {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
	transition: background-color .18s ease, color .18s ease;
}

.pg-social__btn:hover .pg-social__ikona,
.pg-social__btn:focus-visible .pg-social__ikona {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Na ciemnym pasie przyciski też muszą być czytelne. */
.pg-opracowni .pg-social__btn {
	border-color: rgba(255, 255, 255, .22);
	background-color: transparent;
	color: #fff;
}

.pg-opracowni .pg-social__ikona {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

/* Nagłówki wewnątrz ciemnego pasa muszą być jasne (dotyczy też sekcji „Poznajmy się"). */
.pg-opracowni h2,
.pg-opracowni h3,
.pg-opracowni h4 {
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Nagłówek strony (tytuł wpisu/strony)
 *
 * Ollie daje 112 px odstępu nad i pod tytułem, przez co między paskiem
 * nawigacji a pierwszą sekcją robi się pusty ekran. Nasze sekcje mają
 * własne 84 px, więc tutaj wystarczy dużo mniej.
 * ------------------------------------------------------------------ */
.page .wp-site-blocks > .wp-block-group.alignwide {
	/* Ollie wpisuje te 112 px stylem liniowym w szablonie, więc trzeba go przebić. */
	padding-top: 44px !important;
	padding-bottom: 28px !important;
}

/* ------------------------------------------------------------------ *
 * Dwie kolumny w sekcjach budowanych w kodzie (strona kategorii)
 * ------------------------------------------------------------------ */
.pg-duo {
	display: flex;
	align-items: center;
	gap: 48px;
}

.pg-duo__kol {
	flex: 1 1 0;
	min-width: 0;
}

/* Tylko zdjęcia sekcji — sygnet w główce ma własny rozmiar i nie wolno go ruszać. */
.pg-duo .pg-opracowni__foto,
.pg-duo .pg-onas__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

@media (max-width: 880px) {
	.pg-duo {
		flex-direction: column;
		gap: 28px;
	}
}

/* ------------------------------------------------------------------ *
 * Zgody na ciasteczka
 *
 * Pływająca zakładka Complianz zasłania róg strony. Chowamy ją, ale
 * zostawiamy w kodzie — to jej przycisk otwiera okno zgód, wywoływany
 * z odnośnika „Ustawienia ciasteczek" w stopce (assets/js/zgody.js).
 * ------------------------------------------------------------------ */
#cmplz-manage-consent {
	/* Element zostaje w kodzie (jego przycisk otwiera okno zgód), ale jest
	   niewidoczny i nie łapie kliknięć. */
	position: fixed !important;
	left: -9999px !important;
	bottom: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* ==================================================================== *
 * SKLEP: zajawki produktów, strona produktu, moje konto
 *
 * Wartości te same co w reszcie motywu: karty 14 px, pigułki 999 px,
 * nagłówki Fraunces, liczby Plex Mono, akcent jako jedyny kolor.
 * ==================================================================== */

:root {
	--pg-accent-soft: color-mix(in srgb, var(--pg-accent) 10%, #fff);
	--pg-accent-ring: color-mix(in srgb, var(--pg-accent) 30%, #fff);
}

/* --- Siatka produktów ------------------------------------------------ */
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-template > li.wc-block-product {
	margin: 0;
	padding: 0;
	max-width: none;
	width: auto;
}

/* --- Karta produktu -------------------------------------------------- */
.pg-produkt-karta {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.pg-produkt-karta:hover {
	border-color: var(--pg-beton);
	transform: translateY(-3px);
}

/* Zdjęcie wypełnia kadr: bez marginesu, przycięte do kwadratu. */
.pg-produkt-karta__foto {
	margin: 0;
	position: relative;
	overflow: hidden;
}

.pg-produkt-karta__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.45s ease;
}

.pg-produkt-karta:hover .pg-produkt-karta__foto img {
	transform: scale(1.05);
}

.pg-produkt-karta__promocja {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background-color: var(--pg-accent);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}

.pg-produkt-karta__tresc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 18px 18px 20px;
}

.pg-produkt-karta__linia {
	font-family: var(--pg-font-mono);
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--pg-text-muted);
	margin: 0;
}

.pg-produkt-karta__linia a {
	color: inherit;
	text-decoration: none;
}

.pg-produkt-karta__tytul {
	font-family: var(--pg-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

.pg-produkt-karta__tytul a {
	color: inherit;
	text-decoration: none;
}

.pg-produkt-karta__dol {
	margin-top: auto;
	gap: 12px;
}

.pg-produkt-karta__cena,
.pg-produkt-karta__cena .wc-block-components-product-price {
	font-family: var(--pg-font-mono);
	font-size: 17px;
	font-weight: 500;
	margin: 0;
}

.pg-produkt-karta__cta .wp-block-button__link,
.pg-produkt-karta__cta a.button,
.pg-produkt-karta__cta button {
	padding: 10px 18px;
	border: 1px solid var(--pg-accent);
	border-radius: 999px;
	background-color: var(--pg-accent);
	color: #fff;
	font-family: var(--pg-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.pg-produkt-karta__cta .wp-block-button__link:hover,
.pg-produkt-karta__cta a.button:hover,
.pg-produkt-karta__cta button:hover {
	background-color: var(--pg-accent-hover);
	border-color: var(--pg-accent-hover);
}

/* --- Strona produktu ------------------------------------------------- */
.pg-produkt__glowne {
	align-items: flex-start;
}

.pg-produkt__galeria .wc-block-product-gallery-large-image {
	padding: 36px;
	background-color: var(--wp--preset--color--tint);
	border-radius: 14px;
}

.pg-produkt__galeria .wc-block-product-gallery-large-image img {
	border-radius: 8px;
}

.pg-produkt__galeria .wc-block-product-gallery-thumbnails {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.pg-produkt__galeria .wc-block-product-gallery-thumbnails__thumbnail {
	padding: 10px;
	background-color: var(--wp--preset--color--tint);
	border: 1px solid transparent;
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	width: auto;
}

.pg-produkt__galeria .wc-block-product-gallery-thumbnails__thumbnail:hover {
	border-color: var(--pg-beton);
}

.pg-produkt__szczegoly {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pg-produkt__linia {
	font-family: var(--pg-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pg-text-muted);
	margin: 0;
}

.pg-produkt__linia a {
	color: inherit;
	text-decoration: none;
}

.pg-produkt__tytul {
	font-family: var(--pg-font-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
}

.pg-produkt__cenowy {
	gap: 14px;
}

.pg-produkt__cena,
.pg-produkt__cena .wc-block-components-product-price {
	font-family: var(--pg-font-mono);
	font-size: 26px;
	font-weight: 500;
	margin: 0;
}

.pg-produkt__stan {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--pg-line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink-soft);
	font-size: 12.5px;
	font-weight: 600;
}

.pg-produkt__opis {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* Przycisk zakupu w tym samym języku co reszta strony. */
.pg-produkt .wc-block-add-to-cart-with-options button,
.pg-produkt .wc-block-add-to-cart-with-options .wp-block-button__link,
.pg-produkt .single_add_to_cart_button {
	padding: 13px 26px;
	border: 1px solid var(--pg-accent);
	border-radius: 999px;
	background-color: var(--pg-accent);
	color: #fff;
	font-family: var(--pg-font-ui);
	font-size: 14.5px;
	font-weight: 700;
}

.pg-produkt .wc-block-add-to-cart-with-options button:hover,
.pg-produkt .single_add_to_cart_button:hover {
	background-color: var(--pg-accent-hover);
	border-color: var(--pg-accent-hover);
}

/* --- Pasek zaufania -------------------------------------------------- */
.pg-zaufanie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 4px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	overflow: hidden;
}

.pg-zaufanie__pole {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
}

.pg-zaufanie__pole + .pg-zaufanie__pole {
	border-left: 1px solid var(--pg-line);
}

.pg-zaufanie__ikona {
	width: 22px;
	height: 22px;
	margin-bottom: 5px;
	color: var(--pg-accent);
}

.pg-zaufanie__tytul {
	font-size: 13.5px;
	font-weight: 700;
}

.pg-zaufanie__opis {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pg-text-muted);
}

/* --- Zakładki i inne produkty ---------------------------------------- */
.pg-produkt__zakladki {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--pg-line);
}

.pg-produkt__inne {
	margin-top: 56px;
}

.pg-produkt__inne-tytul {
	font-family: var(--pg-font-display);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 20px;
}

/* --- Moje konto ------------------------------------------------------ */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 38px;
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 10px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background-color: var(--wp--preset--color--tint);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--pg-accent-soft);
	color: var(--pg-accent-hover);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--white);
}

.woocommerce-account table.shop_table th {
	padding: 12px 18px;
	background-color: var(--wp--preset--color--tint);
	border-bottom: 1px solid var(--pg-line);
	font-family: var(--pg-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pg-text-muted);
	text-align: left;
}

.woocommerce-account table.shop_table td {
	padding: 15px 18px;
	border-top: 1px solid var(--pg-line);
	font-size: 14.5px;
}

.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number,
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-date,
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-total {
	font-family: var(--pg-font-mono);
	font-size: 13.5px;
}

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account form.login,
.woocommerce-account form.register {
	padding: 24px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--pg-line);
	border-radius: 14px;
}

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.woocommerce-account .button,
.woocommerce-account button[type="submit"] {
	padding: 11px 22px;
	border: 1px solid var(--pg-accent);
	border-radius: 999px;
	background-color: var(--pg-accent);
	color: #fff;
	font-family: var(--pg-font-ui);
	font-size: 13.5px;
	font-weight: 700;
}

.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover {
	background-color: var(--pg-accent-hover);
	border-color: var(--pg-accent-hover);
}

/* --- Pola formularzy: lista rozwijana i zaznaczenia ------------------- */
select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4643' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 17px;
	padding-right: 38px;
	appearance: none;
	cursor: pointer;
}

textarea {
	min-height: 120px;
	line-height: 1.55;
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	width: 20px;
	height: 20px;
	flex: none;
	margin: 1px 8px 0 0;
	border: 1.5px solid var(--pg-beton);
	border-radius: 5px;
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--pg-accent);
	border-color: var(--pg-accent);
}

input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

input[type="radio"]:checked {
	box-shadow: inset 0 0 0 4px #fff;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--pg-accent-ring);
}

@media (max-width: 900px) {
	.wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.pg-zaufanie {
		grid-template-columns: 1fr;
	}

	.pg-zaufanie__pole + .pg-zaufanie__pole {
		border-left: 0;
		border-top: 1px solid var(--pg-line);
	}

	.woocommerce-account .woocommerce,
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.pg-produkt__tytul {
		font-size: 27px;
	}
}

@media (max-width: 620px) {
	.wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

/* --- Zakup: ilość i przycisk ----------------------------------------- *
 * WooCommerce stawia przycisk przed licznikiem sztuk i renderuje plus
 * oraz minus jako zwykłe przyciski, więc bez tego łapała je reguła
 * pigułki i robiły się z nich trzy pomarańczowe klocki. Licznik wraca
 * na lewo i staje się jedną ramką, przycisk zabiera resztę szerokości.
 * --------------------------------------------------------------------- */

.pg-produkt .wc-block-add-to-cart-with-options .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.pg-produkt .wc-block-add-to-cart-with-options__quantity-selector {
	order: -1;
}

.pg-produkt .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	height: 100%;
	border: 1px solid var(--pg-line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
}

.pg-produkt .wc-block-components-quantity-selector__button {
	width: 42px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--pg-font-ui);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.pg-produkt .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background-color: transparent;
	color: var(--pg-accent);
}

.pg-produkt .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.4;
	cursor: default;
}

.pg-produkt .wc-block-components-quantity-selector__input {
	width: 42px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--pg-font-mono);
	font-size: 15px;
	text-align: center;
	appearance: textfield;
	box-shadow: none;
}

.pg-produkt .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.pg-produkt .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.pg-produkt .wc-block-components-quantity-selector__input:focus,
.pg-produkt .wc-block-components-quantity-selector__input:hover {
	border: 0;
	outline: none;
	box-shadow: none;
}

.pg-produkt .wc-block-components-product-button {
	flex: 1 1 200px;
	margin: 0;
}

.pg-produkt .wc-block-components-product-button__button,
.pg-produkt .wc-block-add-to-cart-with-options .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	text-align: center;
}

/* --- Karta produktu: wyrównanie do lewej ----------------------------- *
 * Grupa w układzie „constrained" dziedziczy wyśrodkowanie po Ollie,
 * a cena z przyciskiem nie rozjeżdżały się na boki, bo klasa układu
 * bloku nie zawsze dojeżdża do gotowej strony. Ustawiamy wprost.
 * --------------------------------------------------------------------- */

.pg-produkt-karta__tresc,
.pg-produkt-karta__tresc > *,
.pg-produkt-karta__linia,
.pg-produkt-karta__tytul,
.pg-produkt-karta__cena {
	text-align: left;
}

.pg-produkt-karta__dol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pg-produkt-karta__cta {
	margin: 0;
}

/* --- Korekty zakresu ------------------------------------------------- *
 * Karty „inne produkty" leżą wewnątrz strony produktu, więc reguły pisane
 * pod przycisk zakupu łapały także przyciski w kartach i rozciągały je na
 * całą szerokość. Reguły przycisku zakupu zawężamy do samego bloku
 * zakupowego, a przyciskom plus i minus przywracamy wygląd ramki.
 * --------------------------------------------------------------------- */

.pg-produkt .wc-block-add-to-cart-with-options .wc-block-components-product-button {
	flex: 1 1 200px;
	margin: 0;
}

.pg-produkt .wc-block-add-to-cart-with-options .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	text-align: center;
}

/* Karta produktu ma własny, wąski przycisk. */
.pg-produkt-karta .wc-block-components-product-button {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.pg-produkt-karta .wc-block-components-product-button__button {
	display: inline-flex;
	width: auto;
	min-height: 0;
	padding: 10px 18px;
	border: 1px solid var(--pg-accent);
	border-radius: 999px;
	background-color: var(--pg-accent);
	color: #fff;
	font-family: var(--pg-font-ui);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
}

.pg-produkt-karta .wc-block-components-product-button__button:hover {
	background-color: var(--pg-accent-hover);
	border-color: var(--pg-accent-hover);
}

/* Treść karty trzyma się lewej krawędzi. */
.wc-block-product-template .pg-produkt-karta__tresc,
.wc-block-product-template .pg-produkt-karta__tresc .wp-block-post-title,
.wc-block-product-template .pg-produkt-karta__tresc .wp-block-post-terms,
.wc-block-product-template .pg-produkt-karta__tresc .wc-block-components-product-price {
	text-align: left;
}

/* Plus i minus: przezroczyste, w jednej ramce z polem liczby. */
.pg-produkt .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	width: 42px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink-soft);
	font-size: 18px;
	font-weight: 500;
}

.pg-produkt .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background-color: transparent;
	color: var(--pg-accent);
}

.pg-produkt .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:disabled {
	background-color: transparent;
	opacity: 0.4;
}

/* Grupa karty nie korzysta z globalnego odstepu strony. */
.pg-produkt-karta.has-global-padding,
.pg-produkt-karta__tresc.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.pg-produkt-karta__tresc {
	padding: 18px 18px 20px;
}

/* Karty w wierszu maja rowna wysokosc. */
.wc-block-product-template > li.wc-block-product {
	display: flex;
}

.wc-block-product-template > li.wc-block-product > .pg-produkt-karta {
	width: 100%;
}

/* --- Moje konto: szerokość i układ ----------------------------------- *
 * Szablon strony konta nie ogranicza treści do kontenera, więc tytuł i
 * zawartość rozjeżdżały się na całą szerokość okna. Siatka z menu po
 * lewej ma sens dopiero po zalogowaniu, bo gość widzi sam formularz.
 * --------------------------------------------------------------------- */

.woocommerce-account .wp-block-post-title,
.woocommerce-account .woocommerce {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account .woocommerce {
	display: block;
}

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 38px;
	align-items: start;
}

.woocommerce-account .woocommerce > h2 {
	max-width: 520px;
	margin: 0 0 16px;
	font-family: var(--pg-font-display);
	font-size: 24px;
	font-weight: 600;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	max-width: 520px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14.5px;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 14px;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}

/* Nadpisujemy szerokosc ustawiana przez style WooCommerce. */
.woocommerce-account .entry-content > .woocommerce {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Licznik sztuk: liczba bez własnej ramki -------------------------- *
 * Ogólna reguła pól formularzy jest zbudowana z czterech wykluczeń, więc
 * ma wyższą wagę niż zwykły selektor klasy i wracała z ramką oraz
 * promieniem wokół liczby. Powtarzamy te same wykluczenia, żeby wygrać.
 * --------------------------------------------------------------------- */

.pg-produkt .wc-block-components-quantity-selector input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]) {
	width: 44px;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--pg-font-mono);
	font-size: 15px;
	text-align: center;
	appearance: textfield;
}

.pg-produkt .wc-block-components-quantity-selector input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):hover,
.pg-produkt .wc-block-components-quantity-selector input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):focus {
	border: 0;
	outline: none;
	box-shadow: none;
	background-color: transparent;
}

/* --- Moje konto: rozmieszczenie w siatce ------------------------------ *
 * WooCommerce wstawia przed menu pusty pojemnik na komunikaty. Bez
 * wskazania kolumn zajmował on pierwszą komórkę i przesuwał menu do
 * szerokiej kolumny, a treść pod spód. Ustawiamy kolumny wprost.
 * --------------------------------------------------------------------- */

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
}

/* Lista menu bez odstępów dziedziczonych po stylach treści. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ikony w menu, ten sam zestaw co w panelu rezerwacji. */
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
	content: '';
	flex: none;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--pg-ikona-menu) center / contain no-repeat;
	mask: var(--pg-ikona-menu) center / contain no-repeat;
}

.woocommerce-MyAccount-navigation-link--dashboard a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18M6 11h12M8 15h8M10 19h4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10 12 4l8 6v10H4z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.3 3.1-5 7-5s7 1.7 7 5'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	--pg-ikona-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12H5M10 7l-5 5 5 5M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	margin-top: 6px;
	padding-top: 15px;
	border-top: 1px solid var(--pg-line);
	border-radius: 0;
	color: var(--pg-text-muted);
}

/* Treść konta: akapity i odnośniki w rytmie reszty strony. */
.woocommerce-account .woocommerce-MyAccount-content p {
	font-size: 15px;
	line-height: 1.65;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-row: 2;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-row: 3;
	}
}

/* Link w menu konta musi byc kontenerem flex, inaczej ikona sie zapada. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 11px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	display: inline-block;
}

/* --- Moje konto: adresy ---------------------------------------------- *
 * WooCommerce układa te dwa bloki na pływakach z szerokością 48%, co
 * zderzało się z naszą siatką i rozrzucało karty po skosie. Pływaki
 * wyłączamy, szerokość oddajemy siatce.
 * --------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--pg-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.woocommerce-account .woocommerce-Address-title .edit {
	padding: 8px 16px;
	border: 1px solid var(--pg-beton);
	border-radius: 999px;
	font-family: var(--pg-font-ui);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* Formularz adresu: dwie kolumny jak w projekcie. */
.woocommerce-account .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.woocommerce-account .woocommerce-address-fields .form-row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-account .woocommerce-address-fields .form-row-wide,
.woocommerce-account .woocommerce-address-fields .notes {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-address-fields label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

/* --- Adresy: rozmieszczenie wprost ----------------------------------- *
 * Automatyczne układanie w siatce stawiało pierwszą kartę w drugiej
 * kolumnie, więc nie zdajemy się na nie i wskazujemy komórki.
 * --------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Addresses > .woocommerce-Address:nth-of-type(1) {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-Addresses > .woocommerce-Address:nth-of-type(2) {
	grid-column: 2;
	grid-row: 1;
}

/* --- Pole wyboru: stały rozmiar -------------------------------------- *
 * Style formularzy rozciągały je na całą szerokość wiersza, bo reguła
 * szerokości pól ma wyższą wagę. Granice min i max wygrywają z szerokością.
 * --------------------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
	min-width: 20px;
	max-width: 20px;
	min-height: 20px;
	max-height: 20px;
	flex: none;
	vertical-align: middle;
}

/* --- Logowanie: karta na środku -------------------------------------- */

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2 {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.login,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.register {
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 16px;
	font-size: 14.5px;
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	margin: 0;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce-Addresses > .woocommerce-Address:nth-of-type(1),
	.woocommerce-account .woocommerce-Addresses > .woocommerce-Address:nth-of-type(2) {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --- Pole wyboru i przełącznik: ostateczny kształt -------------------- *
 * Arkusze Ollie i WooCommerce zerowały nam ramkę i dokładały odstęp
 * wewnętrzny, przez co pole rozlewało się w kreskę. Wagę podnosimy
 * powtórzonym atrybutem, a odstęp zerujemy razem z modelem pudełka.
 * --------------------------------------------------------------------- */

input[type="checkbox"][type="checkbox"],
input[type="radio"][type="radio"] {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	min-width: 20px;
	max-width: 20px;
	min-height: 20px;
	max-height: 20px;
	padding: 0;
	margin: 0;
	flex: none;
	appearance: none;
	border: 1.5px solid var(--pg-beton);
	border-radius: 5px;
	background-color: var(--wp--preset--color--white);
	vertical-align: middle;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type="radio"][type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"][type="checkbox"]:checked,
input[type="radio"][type="radio"]:checked {
	background-color: var(--pg-accent);
	border-color: var(--pg-accent);
}

input[type="checkbox"][type="checkbox"]:checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

input[type="radio"][type="radio"]:checked {
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--white);
}

input[type="checkbox"][type="checkbox"]:focus-visible,
input[type="radio"][type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--pg-accent-ring);
}

/* --- Nagłówek karty adresu ------------------------------------------- *
 * Przy dłuższej nazwie przycisk schodził do drugiego wiersza i tytuł
 * odjeżdżał na prawo. Układamy oba od lewej, z zawijaniem.
 * --------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Address-title {
	justify-content: flex-start;
}

/* --- Logowanie i rejestracja obok siebie ----------------------------- *
 * Po włączeniu rejestracji WooCommerce wstawia dwie kolumny w pojemniku
 * `#customer_login`. Układamy je w siatce i wskazujemy komórki wprost,
 * bo automatyczne rozmieszczanie stawiało pierwszą kartę po prawej.
 * --------------------------------------------------------------------- */

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account #customer_login > .col-1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account #customer_login > .col-2 {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-account #customer_login > div {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 14px;
	font-family: var(--pg-font-display);
	font-size: 22px;
	font-weight: 600;
	text-align: left;
}

.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	max-width: none;
	margin: 0;
	height: 100%;
}

.woocommerce-account #customer_login form.register p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	font-size: 13px;
	line-height: 1.6;
	color: var(--pg-text-muted);
}

@media (max-width: 900px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr;
	}

	.woocommerce-account #customer_login > .col-1,
	.woocommerce-account #customer_login > .col-2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ==================================================================== *
 * Strona kontaktu
 *
 * Układ jak na produkcji: po lewej dane i godziny, po prawej mapa.
 * Kolory i kroje nasze, z palety Beton.
 * ==================================================================== */

.pg-kontakt {
	align-items: flex-start;
	padding-top: 44px;
	padding-bottom: 72px;
}

.pg-kontakt__etykieta {
	display: inline-flex;
	align-items: center;
	margin: 0 0 22px;
	padding: 9px 20px;
	border: 1px solid var(--pg-beton);
	border-radius: 999px;
	font-family: var(--pg-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.pg-kontakt__tytul {
	margin: 0 0 30px;
	font-family: var(--pg-font-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.1;
}

.pg-kontakt__dane {
	display: grid;
	gap: 16px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.pg-kontakt__wiersz {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.pg-kontakt__ikona {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--pg-accent);
}

.pg-kontakt__wiersz a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pg-kontakt__wiersz a:hover {
	color: var(--pg-accent);
	border-bottom-color: var(--pg-accent);
}

.pg-kontakt__podtytul {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
}

/* Komponent godzin na jasnym tle strony, nie w ciemnej stopce. */
.pg-kontakt .pg-hours {
	margin-bottom: 30px;
}

.pg-kontakt .pg-hours__week {
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
}

.pg-kontakt .pg-hours__summary {
	padding: 14px 18px;
}

.pg-kontakt .pg-hours__list {
	padding: 0 18px 14px;
}

.pg-kontakt__cta {
	margin-top: 4px;
}

/* --- Mapa ------------------------------------------------------------ */
.pg-mapa {
	width: 100%;
	min-height: 320px;
	border: 1px solid var(--pg-line);
	border-radius: 14px;
	overflow: hidden;
	background-color: var(--wp--preset--color--tint);
	z-index: 0;
}

/* Leaflet wstawia własne kontrolki: dopasowujemy je do reszty strony. */
.pg-mapa .leaflet-control-zoom a {
	color: var(--wp--preset--color--ink);
	border-radius: 8px;
}

.pg-mapa .leaflet-control-attribution {
	font-size: 10.5px;
	background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
	.pg-kontakt {
		padding-top: 28px;
		padding-bottom: 48px;
	}

	.pg-kontakt__tytul {
		font-size: 32px;
	}

	.pg-mapa {
		min-height: 300px;
		height: 320px !important;
	}
}

/* --- Godziny na stronie kontaktu ------------------------------------- *
 * Komponent powstał pod ciemną stopkę i ma biały tekst, więc na białej
 * karcie znikał. Tutaj wracamy do kolorów treści, a przełącznik zwijania
 * chowamy, bo tydzień i tak jest rozwinięty.
 * --------------------------------------------------------------------- */

.pg-kontakt .pg-hours__summary,
.pg-kontakt .pg-hours__toggle {
	display: none;
}

.pg-kontakt .pg-hours__list {
	padding: 6px 18px 16px;
	gap: 0;
}

.pg-kontakt .pg-hours__row {
	padding: 11px 0;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}

.pg-kontakt .pg-hours__row + .pg-hours__row {
	border-top: 1px solid var(--pg-line);
}

.pg-kontakt .pg-hours__row.is-closed .pg-hours__time,
.pg-kontakt .pg-hours__row.is-closed {
	color: var(--pg-text-muted);
}

.pg-kontakt .pg-hours__row.is-today,
.pg-kontakt .pg-hours__row.is-today .pg-hours__time {
	color: var(--pg-accent);
	font-weight: 700;
}

.pg-kontakt .pg-hours__time {
	font-family: var(--pg-font-mono);
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
}

/* Ocena w hero pochodzi teraz z wtyczki opinii, a nie z pięciu gwiazdek wpisanych
   na sztywno w treści strony. Wartości poniżej są przepisane jeden do jednego
   z .pg-hero__rating i .pg-hero__rating-text, żeby zmiana źródła danych nie
   ruszyła wyglądu. Wtyczka domyślnie układa ocenę w kolumnie i centruje, więc
   wracamy do rzędu wyrównanego do lewej. */
.pg-hero__content .pg-hero__proof {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.pg-hero__content .pg-hero__proof .pg-rating__score {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.78);
}

/* Karty opinii w sekcji na stronie glownej: ciemne, jak pasy nawigacji i stopki.
   Kolory wziete wprost z palety motywu, nie dobierane na nowo. Wtyczka celowo
   maluje karty przezroczystym odcieniem currentColor, wiec tlo i ramke
   ustawiamy tu wprost, a wyzsza waga selektora (.pg-opinie .pg-review)
   przebija regule wtyczki. */
.pg-opinie .pg-review {
	background: var(--pg-ink);
	border-color: var(--pg-ink);
	color: #fff;
}

.pg-opinie .pg-review__text {
	color: var(--pg-text-soft);
	opacity: 1;
}

.pg-opinie .pg-review__when {
	color: var(--pg-text-muted);
}

/* Nagłówki bookminta krojem nagłówkowym motywu.
   Wtyczka w trybie dziedziczenia zostawia nagłówki przy foncie tekstu, bo nie
   wie, że u nas nagłówki są szeryfowe. Krój bierzemy z tej samej zmiennej,
   której używa reszta strony, więc zmiana palety typograficznej obejmie też
   listing i stronę usługi. Panele i tytuły kart zostają przy foncie tekstu,
   bo to etykiety wewnątrz komponentów, a nie nagłówki sekcji. */
.bmf .bmf-h1,
.bmf .bmf-h2,
.bmf .bmf-h3,
.bmf .bmf-sec__title,
.bmf .bmf-card__title,
.bmf .bmf-hero__title {
	font-family: var(--pg-font-display);
}