/* =========================================================================
   Palais Royal — nadpisania WooCommerce
   ========================================================================= */

/* Reset domyslnych stylow Woo, ktore gryza sie z projektem */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--pr-cream-soft);
	border-top: 2px solid var(--pr-wine);
	color: var(--pr-navy);
	font-size: 14px;
	line-height: 1.6;
	padding: 16px 20px 16px 48px;
	list-style: none;
	margin: 0 0 24px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { color: var(--pr-wine); top: 17px; left: 20px; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--pr-wine);
	color: var(--pr-cream-soft);
	font-family: var(--pr-sans);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border-radius: 0;
	padding: 15px 28px;
	line-height: 1.2;
	transition: background .2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--pr-wine-dark); color: var(--pr-cream-soft); }

.woocommerce .button.disabled,
.woocommerce button.button:disabled { opacity: .45; }

.woocommerce .price,
.woocommerce .pr-product p.price,
.woocommerce .pr-product span.price { color: var(--pr-wine); }

.woocommerce .quantity input.qty {
	border: 1px solid var(--pr-line-strong);
	background: var(--pr-cream-soft);
	height: 52px;
	font-family: var(--pr-sans);
	color: var(--pr-navy);
}

/* Formularze Woo */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
	border: 1px solid var(--pr-line-strong);
	background: var(--pr-cream-soft);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--pr-sans);
	font-size: 14.5px;
	color: var(--pr-navy);
	height: auto;
	line-height: 1.4;
}
.woocommerce form .form-row label {
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pr-muted);
	margin-bottom: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; color: var(--pr-navy); padding-left: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

/* Koszyk */
.woocommerce-cart .pr-page__title { margin-bottom: 8px; }
.woocommerce table.shop_table {
	border: 1px solid var(--pr-line);
	border-radius: 0;
	border-collapse: collapse;
	background: var(--pr-cream-soft);
}
.woocommerce table.shop_table th {
	font-size: 11px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--pr-muted);
	font-weight: 400;
	padding: 16px 14px;
	border-bottom: 1px solid var(--pr-line);
}
.woocommerce table.shop_table td { padding: 20px 14px; border-top: 1px solid var(--pr-line-soft); font-size: 14.5px; }
.woocommerce table.shop_table td.product-name a { font-family: var(--pr-serif); font-size: 19px; color: var(--pr-navy); }
.woocommerce table.shop_table td.product-name a:hover { color: var(--pr-wine); }
.woocommerce table.shop_table img { width: 64px; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals { background: var(--pr-cream-soft); border: 1px solid var(--pr-line); padding: 26px 28px; }
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce .cart_totals h2 {
	font-family: var(--pr-serif); font-weight: 600; font-size: 24px;
	color: var(--pr-navy); margin: 0 0 18px; text-transform: none; letter-spacing: 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
	border: 1px solid var(--pr-line-strong);
	background: var(--pr-cream-soft);
	padding: 13px 14px;
	width: 220px;
}

/* Checkout */
.woocommerce-checkout h3 {
	font-family: var(--pr-serif); font-weight: 600; font-size: 26px;
	color: var(--pr-navy); margin: 0 0 20px;
}
.woocommerce-checkout #payment { background: var(--pr-cream-soft); border: 1px solid var(--pr-line); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--pr-line); padding: 20px 24px; }
.woocommerce-checkout #payment div.form-row { padding: 20px 24px; }
.woocommerce-checkout #payment div.payment_box { background: var(--pr-cream); border-radius: 0; font-size: 13.5px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--pr-cream); }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { font-size: 15px; }
.woocommerce-checkout-review-order-table tfoot .order-total .amount { font-family: var(--pr-serif); font-size: 26px; color: var(--pr-wine); }

/* Moje konto */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 25%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pr-line); background: var(--pr-cream-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--pr-line-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 14px 20px; font-size: 14px;
	letter-spacing: .4px; color: var(--pr-body);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--pr-wine); background: var(--pr-cream); }
.woocommerce-account .woocommerce-MyAccount-content { width: 71%; }

/* Ceny netto B2B */
.pr-price-net { display: block; font-size: 12px; color: var(--pr-muted); letter-spacing: .4px; margin-top: 4px; font-family: var(--pr-sans); }
.pr-b2b-badge {
	display: inline-block; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
	background: var(--pr-navy); color: var(--pr-cream); padding: 4px 10px; margin-bottom: 14px;
}

/* Sortowanie / wyniki */
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count { margin: 0; float: none; }
.woocommerce .woocommerce-ordering select {
	border: 1px solid rgba(30, 40, 67, .22);
	background: transparent;
	padding: 8px 14px;
	font-family: var(--pr-sans);
	font-size: 13px;
	color: var(--pr-navy);
}

/* Siatka produktow Woo -> karta Palais Royal.
   Selektory celowo bez prefiksu .woocommerce — siatka dziala tez tam,
   gdzie Woo nie dodaje swojej klasy do body (shortcode, blok, podglad). */
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce dokleja do ul.products clearfix (::before i ::after z content: " ").
   W siatce CSS Grid pseudoelementy sa pelnoprawnymi komorkami — ::before zajmuje
   pierwsze miejsce w rzedzie i wyglada to tak, jakby pierwszy produkt zniknal.
   Selektor Woo (.woocommerce ul.products::before) jest bardziej szczegolowy niz
   samo ul.products, a ".woocommerce" bywa i na <body>, i na wrapperze shortcode'u
   — stad !important zamiast zgadywania. content: none nie generuje ich wcale. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: inherit; }

ul.products.pr-cols-4,
ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }

/* Wiersz zakupu: ilosc i "Dodaj do koszyka" obok siebie.
 *
 * WooCommerce zostawia form.cart jako zwykly blok, wiec licznik ilosci
 * rozpychal sie na cala szerokosc kolumny, a przycisk spadal pod niego.
 * Warianty i produkty grupowane trzymaja w formularzu tabele, wiec lapiemy
 * tylko formularz prosty, a dla wariantow ten sam uklad na wewnetrznym
 * kontenerze WooCommerce. */
.pr-product__summary form.cart:not(.variations_form):not(.grouped_form),
.pr-product__summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 18px;
}
.pr-product__summary form.cart .pr-qty,
.pr-product__summary form.cart .quantity { flex: none; margin: 0; }
.woocommerce .pr-product__summary form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-width: 220px;
	/* min-height zamiast height, zeby align-items: stretch zrownal przycisk
	   z ramka licznika (52 px srodka + 2 px obramowania). */
	min-height: 52px;
	padding: 0 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	letter-spacing: 1.5px;
}

/* Galeria produktu
 *
 * Selektory szly wczesniej przez "div.product", a szablon produktu opakowuje
 * strone w <main class="pr-product product"> — regula nie lapala i miniatury
 * WooCommerce zostawaly goła lista <ol> z numerami "1." "2.". Kotwica to teraz
 * .pr-product, czyli klasa, ktora naprawde jest w markupie. */
.woocommerce .pr-product div.images .flex-control-thumbs,
.pr-product__gallery .flex-control-thumbs {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.pr-product__gallery .flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pr-product__gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	opacity: .62;
	border: 1px solid rgba(30, 40, 67, .14);
	background: var(--pr-cream-soft);
	transition: opacity .18s ease, border-color .18s ease;
}
.pr-product__gallery .flex-control-thumbs li img:hover { opacity: .88; }
.pr-product__gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--pr-wine);
}

/* Lupa lightboxa — mala plakietka w rogu zamiast surowej ikony motywu. */
.pr-product__gallery .woocommerce-product-gallery__trigger {
	/* WooCommerce ustawia pozycjonowanie regula na "div.product", ktora nie
	   lapie naszego <main class="pr-product">, wiec lupa zostawala statyczna
	   i wypadala nad zdjeciem po lewej. Kotwiczymy ja sami w rogu galerii. */
	position: absolute;
	top: 14px;
	right: 14px;
	left: auto;
	bottom: auto;
	margin: 0;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border-radius: 50%;
	color: var(--pr-wine);
	background: var(--pr-cream-soft);
	border: 1px solid rgba(124, 30, 52, .22);
	transition: background .18s ease, border-color .18s ease;
}
.pr-product__gallery .woocommerce-product-gallery__trigger:hover {
	background: var(--pr-cream-deep);
	border-color: var(--pr-wine);
}
/* Ikona z zestawu motywu (inc/icons.php) wstawiana w miejsce emoji przez
   initGalleryZoom() w theme.js. Dziedziczy kolor przycisku przez currentColor. */
.pr-product__gallery .woocommerce-product-gallery__trigger .pr-icon { display: block; }

/* Zakladki produktu — chowamy, dane sa w sekcji "Szczegoly wina" */
.woocommerce .pr-product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--pr-line); }
.woocommerce .pr-product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce .pr-product .woocommerce-tabs ul.tabs li {
	background: transparent; border: none; border-radius: 0; margin: 0 24px 0 0; padding: 0;
}
.woocommerce .pr-product .woocommerce-tabs ul.tabs li::before,
.woocommerce .pr-product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce .pr-product .woocommerce-tabs ul.tabs li a {
	font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--pr-muted); font-weight: 400; padding: 12px 0;
}
.woocommerce .pr-product .woocommerce-tabs ul.tabs li.active a { color: var(--pr-wine); border-bottom: 1px solid var(--pr-wine); }

@media (max-width: 1000px) {
	ul.products,
	ul.products.pr-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
	.woocommerce-account .woocommerce-MyAccount-content { margin-top: 28px; }
}

@media (max-width: 560px) {
	ul.products,
	ul.products.pr-cols-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.woocommerce table.shop_table_responsive tr td { padding: 12px; }
	.woocommerce-cart table.cart td.actions .coupon .input-text { width: 100%; margin-bottom: 10px; }
}

/* -------------------------------------------------------------------------
 * Sciezka zakupowa — koszyk i kasa na cala szerokosc kontenera
 *
 * Koszyk i zamowienie to bloki WooCommerce wstawione w zwykla strone, wiec
 * lapala je miara kolumny tekstu (860 px). Formularz zamowienia scisnal sie
 * wtedy do polowy ekranu, a podsumowanie do waskiego paska przy krawedzi.
 * Tresc tych dwoch stron to tabela i formularz, nie akapity — dostaja cala
 * szerokosc kontenera (1280 px), a miara tekstu zostaje dla reszty stron.
 * ---------------------------------------------------------------------- */
.woocommerce-cart .pr-page__body,
.woocommerce-checkout .pr-page__body { max-width: none; }

/* -------------------------------------------------------------------------
 * Przyciski i kontrolki w koszyku oraz w kasie
 *
 * Kolory przyciskow ustawia theme.json (styles.elements.button) — to jedno
 * miejsce dla frontu i dla edytora. WooCommerce sprawdza, czy motyw opisuje
 * przycisk w theme.json, i jesli tak, dokłada do <body> klase
 * "woocommerce-block-theme-has-button-styles", a wlasne style przyciskow
 * wycofuje. Do czasu, az to wykrycie zadziala (albo gdy wtyczka je kiedys
 * zmieni), reguly ponizej trzymaja wyglad niezaleznie od tego przelacznika.
 *
 * Wysokosc wychodzi z samego wypelnienia, bez min-height. WooCommerce ustawia
 * swoje "min-height: 3em" selektorem z prefiksem body, ktorego nie da sie
 * przebic bez wojny na specyficznosc — a przy tym wypelnieniu i tak nie ma
 * czego podnosic, wiec przycisk wyglada tak samo w obu ukladach.
 * ---------------------------------------------------------------------- */
.wc-block-components-button:not(.is-link) {
	background-color: var(--pr-wine);
	color: var(--pr-cream-soft);
	border: 0;
	border-radius: 0;
	padding: 18px 30px;
	font-family: var(--pr-sans);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):active {
	background-color: var(--pr-wine-dark);
	color: var(--pr-cream-soft);
}
/* Fokus rysowany obwodka, nie zmiana tla — inaczej przycisk po kliknieciu
   zostaje ciemniejszy do konca wizyty. */
.wc-block-components-button:not(.is-link):focus-visible {
	box-shadow: 0 0 0 2px var(--pr-cream), 0 0 0 4px var(--pr-wine);
	outline: none;
}

/* Glowne wezwanie w obu krokach idzie na cala szerokosc kolumny. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

/* Drobne kontrolki: licznik ilosci, kosz przy pozycji, rozwijane panele
   i powrot do koszyka. Domyslnie sa szarobezowe i gina na tle tekstu. */
.wc-block-components-quantity-selector__button { color: var(--pr-wine); }
.wc-block-components-quantity-selector__button:hover { color: var(--pr-wine-dark); }
.wc-block-cart-item__remove-link:hover,
.wc-block-components-panel__button:hover { color: var(--pr-wine); }
.wc-block-components-checkout-return-to-cart-button { color: var(--pr-wine); }

/* Pola wyboru sposobu dostawy i platnosci — bez tego przegladarka rysuje je
   swoim systemowym niebieskim, jedynym takim kolorem na calej stronie. */
.wc-block-checkout input[type="radio"],
.wc-block-checkout input[type="checkbox"],
.wc-block-cart input[type="radio"],
.wc-block-cart input[type="checkbox"] { accent-color: var(--pr-wine); }