/*
 * product.css — karta produktu (szablon single-product).
 *
 * Odpowiada projektowi „Oliwa z Hiszpanii - strona produktu": galeria po
 * lewej, kolumna zakupowa po prawej, pod nimi zakładki (Opis / Informacje
 * żywieniowe / Opinie) i sekcja „Podobne produkty".
 *
 * Arkusz ładowany po `cart` — patrz lista $sheets w
 * functions.php. Kolejność ma znaczenie: cart.css stroi pole ilości i zakładki
 * WooCommerce przy tej samej specyficzności, więc ten arkusz musi iść po nim.
 */

/* -------------------------------------------------------------------------
   Siatka karty produktu
   ---------------------------------------------------------------------- */

.oliwa-product__main {
	align-items: flex-start;
}

.oliwa-product__summary>* {
	margin-block: 0;
}

/* Nadtytuł (kategoria) nie jest linkiem w projekcie, ale w WordPressie jest —
   dziedziczenie koloru trzyma go w jednej barwie z resztą nadtytułu. */
.oliwa-product__summary .oliwa-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.oliwa-product__summary .oliwa-eyebrow a:hover {
	color: var(--wp--preset--color--accent-deep);
}

.oliwa-product__summary .wp-block-post-title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	line-height: var(--leading-tight);
	margin: 0;
}

.oliwa-product__summary .wp-block-post-excerpt {
	max-width: var(--measure-prose);
}

.oliwa-product__summary .wp-block-post-excerpt p {
	margin: 0;
	text-wrap: pretty;
}

/* Cena: aktualna w oliwce, przekreślona poprzednia w rozmiarze tekstu.
   Bez `opacity` — wygaszamy kolorem, żeby kontrast został policzalny. */
.oliwa-product__summary .wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.oliwa-product__summary .wc-block-components-product-price__value {
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	line-height: 1.1;
}

.oliwa-product__summary .wc-block-components-product-price del,
.oliwa-product__summary .wc-block-components-product-price__regular {
	color: var(--text-muted);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
}

/* -------------------------------------------------------------------------
   Galeria

   Blok galerii WooCommerce to flexslider: duże zdjęcie w `.woocommerce-product-gallery__image`,
   miniatury w `.flex-control-thumbs`. Produkt bez zdjęć dodatkowych nie
   renderuje listy miniatur — layout nie ma wtedy pustego pasa.
   ---------------------------------------------------------------------- */

.oliwa-product__gallery .woocommerce-product-gallery__wrapper {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	margin: 0;
	overflow: hidden;
}

.oliwa-product__gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 5 / 6;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.oliwa-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}

.oliwa-product__gallery .flex-control-thumbs li {
	margin: 0;
	width: 92px;
}

.oliwa-product__gallery .flex-control-thumbs img {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	cursor: pointer;
	height: 92px;
	object-fit: cover;
	opacity: 1;
	transition: border-color var(--duration-base) var(--easing-standard);
	width: 92px;
}

/* Aktywna miniatura — ta sama złota obwódka co aktywna zakładka. */
.oliwa-product__gallery .flex-control-thumbs img.flex-active,
.oliwa-product__gallery .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Plakietka promocji: 16 px od krawędzi kadru, jak w listingu. */
.oliwa-product__gallery .woocommerce-product-gallery {
	position: relative;
}

/* -------------------------------------------------------------------------
   Formularz zakupu

   `wc_get_stock_html()` jest echo-wane wewnątrz formularza, dlatego stan
   magazynowy stylujemy tutaj, a nie jako osobny blok.
   ---------------------------------------------------------------------- */

.oliwa-product__summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
}

.oliwa-product__summary .stock {
	align-items: center;
	color: var(--wp--preset--color--ok);
	display: flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	margin: 0;
	width: 100%;
}

.oliwa-product__summary .stock::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: var(--icon-sm);
	-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: var(--icon-sm);
}

.oliwa-product__summary .stock.out-of-stock {
	color: var(--wp--preset--color--sale);
}

/* Stepper ilości. Przyciski dokłada assets/js/quantity.js; bez skryptu
   zostaje samo pole, więc reguły muszą działać w obu wariantach. */
.oliwa-product__summary .quantity {
	align-items: center;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	display: flex;
	flex: none;
	height: var(--control-h-md);
	overflow: hidden;
}

.oliwa-product__summary .quantity .qty {
	appearance: textfield;
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	height: 100%;
	min-height: 0;
	padding: 0;
	text-align: center;
	width: 48px;
}

.oliwa-product__summary .quantity .qty::-webkit-inner-spin-button,
.oliwa-product__summary .quantity .qty::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}

.oliwa-qty__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--text-base);
	height: 100%;
	line-height: 1;
	padding: 0;
	transition: background-color var(--duration-fast) var(--easing-standard);
	width: 36px;
}

.oliwa-qty__button:hover {
	background: var(--wp--preset--color--base-alt);
}

.oliwa-qty__button:focus-visible {
	box-shadow: var(--focus-ring-shadow);
	outline: 1px solid var(--wp--preset--color--accent);
}

/* Przycisk „Dodaj do koszyka" wypełnia resztę wiersza — w projekcie stoi
   w jednym rzędzie ze stepperem i sięga prawej krawędzi kolumny. */
.oliwa-product__summary form.cart .single_add_to_cart_button {
	align-items: center;
	display: flex;
	flex: 1 1 220px;
	gap: var(--space-2);
	justify-content: center;
	min-height: var(--control-h-lg);
}

.oliwa-product__summary form.cart .single_add_to_cart_button::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: var(--icon-sm);
	-webkit-mask-image: var(--ico-bag);
	mask-image: var(--ico-bag);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: var(--icon-sm);
}

/* -------------------------------------------------------------------------
   Parametry produktu (blok oliwa/product-specs)
   ---------------------------------------------------------------------- */

.oliwa-specs {
	background: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: var(--radius-card);
	/* `separate`, nie `collapse`: w modelu zlewających się obramowań padding
	   tabeli jest z definicji ignorowany, więc wiersze dotykałyby krawędzi
	   kremowego prostokąta. border-spacing zerujemy, bo odstęp między
	   wierszami daje dolny padding komórek. */
	border-collapse: separate;
	border-spacing: 0;
	padding: var(--pad-card);
	width: 100%;
}

/* Wiersze zostają wierszami tabeli — bez `display: flex`, które w Chrome
   i Safari odbiera tabeli semantykę (czytnik ekranu przestaje zapowiadać
   nagłówek wiersza). Rozjazd etykieta/wartość robi wyrównanie kolumn. */
.oliwa-specs th,
.oliwa-specs td {
	border: 0;
	font-size: var(--text-sm);
	padding: 0 0 var(--space-3);
	vertical-align: baseline;
}

.oliwa-specs tr:last-child th,
.oliwa-specs tr:last-child td {
	padding-bottom: 0;
}

.oliwa-specs th {
	color: var(--text-muted);
	font-weight: var(--weight-regular);
	text-align: left;
}

.oliwa-specs td {
	color: var(--wp--preset--color--primary);
	font-weight: var(--weight-medium);
	text-align: right;
}

/* -------------------------------------------------------------------------
   Pasek zaufania — trzy fakty z ikoną, pod tabelą parametrów.
   ---------------------------------------------------------------------- */

.oliwa-trust__item {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	margin: 0;
}

.oliwa-trust__item::before {
	background-color: var(--wp--preset--color--accent-deep);
	content: "";
	flex: none;
	height: var(--icon-md);
	margin-top: 2px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: var(--icon-md);
}

.oliwa-trust__item--truck::before {
	-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

.oliwa-trust__item--shield::before {
	-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.oliwa-trust__item--leaf::before {
	-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Zakładki

   woocommerce.css ładuje się PO arkuszach theme'u (WooCommerce kolejkuje go
   na wp_enqueue_scripts, theme na enqueue_block_assets), a jego reguły dla
   zakładek mają specyficzność (0,4,3):
   `.woocommerce div.product .woocommerce-tabs ul.tabs li`. Przy równej wadze
   wygrałby arkusz późniejszy, więc każdy selektor poniżej ma co najmniej pięć
   klas. Bez tego zostają domyślne „zakładki teczkowe": szare tło, zaokrąglone
   rogi i pseudoelementy rysujące wyoblenia.

   Projekt ma pasek tekstowy: wersaliki, hairline pod całą szerokością,
   aktywna pozycja podkreślona 2 px złota.
   ---------------------------------------------------------------------- */

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs {
	background: transparent;
	border-bottom: 1px solid var(--hairline);
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	list-style: none;
	/* Odstęp do treści zakładki wisi na LIŚCIE, nie na panelu. Woo zeruje
	   padding panelu regułą `.woocommerce div.product .woocommerce-tabs .panel`;
	   margines listy nie ma konkurencji w żadnym arkuszu Woo, więc odstęp
	   trzyma się bez wyścigu na specyficzność. */
	margin: 0 0 var(--space-10);
	padding: 0;
}

/* Woo rysuje linię pod zakładkami własnym ::before — mamy border-bottom. */
.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs::before {
	display: none;
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0 0 var(--space-3);
}

/* Wyoblenia „teczki" po bokach zakładki. */
.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li::before,
.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li::after {
	display: none;
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li a {
	color: var(--text-muted);
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	padding: 0;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	transition: color var(--duration-base) var(--easing-standard);
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li a:hover {
	color: var(--wp--preset--color--primary);
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li.active {
	background: transparent;
	border-bottom-color: var(--wp--preset--color--accent);
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper ul.tabs.wc-tabs li.active a {
	color: var(--wp--preset--color--primary);
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper .woocommerce-Tabs-panel {
	margin: 0;
	max-width: var(--measure-prose);
	padding: 0;
}

/* Blok ma hideTabTitle, ale panel opinii i tak drukuje własny nagłówek. */
.woocommerce .oliwa-product__tabs .wc-tabs-wrapper .woocommerce-Tabs-panel--description>h2 {
	display: none;
}

.woocommerce .oliwa-product__tabs .wc-tabs-wrapper .woocommerce-Tabs-panel p {
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   Tabela wartości odżywczych (zakładka „Informacje żywieniowe")

   Wersja UI z projektu „Oliwa z Hiszpanii - informacje zywieniowe": pełna
   siatka hairline zamiast pasów zebry, pionowa linia między kolumnami,
   scalony pasek „Tłuszcz 100 g w tym:" i wartości w jednej kolumnie po
   prawej. Grupy wierszy to kolejne <tbody> — linia pod grupą jest mocniejsza
   niż odstęp między wierszami w środku grupy, tak jak na etykiecie butelki.
   ---------------------------------------------------------------------- */

.oliwa-nutrition__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	margin: 0 0 var(--space-2);
}

.oliwa-nutrition__note {
	color: var(--text-muted);
	font-size: var(--text-sm);
	margin: 0 0 var(--space-6);
}

.oliwa-nutrition {
	background: var(--surface-card);
	border: 1px solid var(--hairline-strong);
	border-collapse: collapse;
	/* `fixed` trzyma kolumnę wartości na stałej szerokości — bez tego
	   „3700 kJ / 900 kcal" rozpycha ją kosztem nazw składników. */
	table-layout: fixed;
	width: 100%;
}

.oliwa-nutrition tbody {
	border-bottom: 1px solid var(--hairline-strong);
}

.oliwa-nutrition tbody:last-child {
	border-bottom: 0;
}

.oliwa-nutrition th,
.oliwa-nutrition td {
	border: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: top;
}

/* Nazwa składnika — kolumna szeroka, oddzielona pionową linią. */
.oliwa-nutrition th {
	border-right: 1px solid var(--hairline-strong);
	color: var(--wp--preset--color--contrast);
	font-weight: var(--weight-regular);
}

.oliwa-nutrition td {
	color: var(--wp--preset--color--primary);
	font-weight: var(--weight-medium);
	width: 30%;
}

/* Wiersze wewnątrz grupy stoją ciasno — grupa czyta się jako jeden blok
   („w tym" pod tłuszczem), a rozstrzela ją dopiero linia kolejnego tbody. */
.oliwa-nutrition tbody tr+tr th,
.oliwa-nutrition tbody tr+tr td {
	padding-top: var(--space-1);
}

.oliwa-nutrition tbody tr:not(:last-child) th,
.oliwa-nutrition tbody tr:not(:last-child) td {
	padding-bottom: var(--space-1);
}

/* Pasek scalony na obie kolumny — „Tłuszcz 100 g w tym:". */
.oliwa-nutrition__section td {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-align: center;
	text-transform: uppercase;
	width: auto;
}

/* -------------------------------------------------------------------------
   Podobne produkty
   ---------------------------------------------------------------------- */

.oliwa-product__related h2 {
	font-family: var(--font-display);
	margin: 0 0 var(--space-8);
}

/* -------------------------------------------------------------------------
   Telefon: galeria nad kolumną zakupową, przycisk na całą szerokość.
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.oliwa-product__summary form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.oliwa-product__gallery .flex-control-thumbs li,
	.oliwa-product__gallery .flex-control-thumbs img {
		height: 72px;
		width: 72px;
	}
}