/**
 * Product description styles — "Zisti kto si!"
 *
 * Everything is namespaced under .zks-pd (plus the two .zks-price-* / .zks-inquiry-*
 * helpers used in the product summary). No bare element selectors: the previous
 * per-product <style> blocks used naked `.section`, `.hero-section` and `ul, ol`,
 * which collided with Betheme's own layout classes.
 *
 * Fonts are deliberately NOT declared — Fraunces (headings) and Afacad (body) are
 * inherited from the theme. Colours, radii and spacing follow the Betheme options
 * (coral #ffa797, cream #faf6ea, brown #3d2f24, 8px buttons, 12px cards).
 */

/*
 * Tokens live on :root, not on .zks-pd — the enquiry button is rendered in the
 * product summary, outside the description wrapper, and would otherwise resolve
 * every var() to nothing (white text on no background = invisible).
 * This stylesheet only loads on product pages, so :root scope is safe.
 */
:root {
	--zks-coral: #ffa797;
	--zks-coral-strong: #ff7f6c;
	--zks-cream: #faf6ea;
	--zks-brown: #3d2f24;
	--zks-text: #595351;
	--zks-blue: #527fb2;
	--zks-teal: #2bb59e;
	--zks-card-shadow: 0 24px 40px -4px rgba(12, 12, 13, 0.08);
}

.zks-pd {
	color: var(--zks-text, #595351);
}

.zks-pd p {
	margin: 0 0 16px;
}

.zks-pd p:last-child {
	margin-bottom: 0;
}

/* --- Lead paragraph ---------------------------------------------------- */

.zks-pd__lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--zks-brown);
	margin-bottom: 44px !important;
}

/* --- Blocks ------------------------------------------------------------ */

.zks-pd__block {
	margin-bottom: 64px;
}

.zks-pd__block--cream {
	background: var(--zks-cream);
	border-radius: 12px;
	padding: 44px 32px;
}

.zks-pd__block > h2 {
	margin: 0 0 24px;
	padding-bottom: 16px;
	position: relative;
}

.zks-pd__block > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 62px;
	height: 2px;
	background: var(--zks-coral);
}

/* --- Card grid --------------------------------------------------------- */

/* Fixed 2 columns: every product has exactly four cards, and auto-fit was
   breaking them into an unbalanced 3 + 1 at common widths. */
.zks-pd__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 32px;
}

.zks-pd__card {
	background: #fff;
	border-radius: 12px;
	padding: 32px 24px;
	box-shadow: var(--zks-card-shadow);
}

.zks-pd__card h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.zks-pd__card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* --- Checklist --------------------------------------------------------- */

.zks-pd__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px 32px;
}

.zks-pd__list li {
	position: relative;
	padding-left: 32px;
	line-height: 1.6;
	margin: 0;
}

.zks-pd__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--zks-coral);
	box-shadow: inset 0 0 0 4px #fff;
}

/* --- Numbered steps ---------------------------------------------------- */

.zks-pd__steps {
	list-style: none;
	counter-reset: zks-step;
	margin: 24px 0 0;
	padding: 0;
}

.zks-pd__steps li {
	counter-increment: zks-step;
	position: relative;
	padding-left: 64px;
	margin: 0 0 24px;
	line-height: 1.6;
	min-height: 44px;
}

.zks-pd__steps li:last-child {
	margin-bottom: 0;
}

.zks-pd__steps li::before {
	content: counter(zks-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--zks-coral);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Call to action ---------------------------------------------------- */

.zks-pd__cta {
	background: var(--zks-cream);
	border-radius: 12px;
	padding: 44px 32px;
	text-align: center;
	margin-bottom: 64px;
}

.zks-pd__cta p {
	font-size: 20px;
	line-height: 1.5;
	color: var(--zks-brown);
	max-width: 640px;
	margin: 0 auto 24px;
}

.zks-pd__btn,
.zks-inquiry-btn {
	display: inline-block;
	background: var(--zks-coral, #ffa797);
	color: #fff !important;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	padding: 16px 32px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.zks-pd__btn:hover,
.zks-pd__btn:focus,
.zks-inquiry-btn:hover,
.zks-inquiry-btn:focus {
	background: var(--zks-coral-strong, #ff7f6c);
	color: #fff !important;
}

.zks-pd__cta-note {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	color: var(--zks-text);
}

/* --- FAQ --------------------------------------------------------------- */

.zks-pd__faq-item {
	border-top: 1px solid #ece5d8;
	padding: 24px 0;
}

.zks-pd__faq-item:last-child {
	border-bottom: 1px solid #ece5d8;
}

.zks-pd__faq-item h3 {
	font-size: 22px;
	line-height: 1.35;
	margin: 0 0 12px;
}

.zks-pd__faq-item p {
	margin: 0;
	line-height: 1.65;
}

/* --- Related services -------------------------------------------------- */

.zks-pd__related {
	background: #fff;
	border: 2px solid var(--zks-cream);
	border-radius: 12px;
	padding: 32px;
	margin-bottom: 64px;
}

.zks-pd__related h2 {
	margin: 0 0 16px;
	font-size: 28px;
}

.zks-pd__related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.zks-pd__related li {
	margin: 0;
	line-height: 1.6;
}

.zks-pd__related a {
	font-weight: 700;
	color: var(--zks-coral-strong);
	text-decoration: none;
	border-bottom: 2px solid var(--zks-cream);
}

.zks-pd__related a:hover {
	border-bottom-color: var(--zks-coral);
}

/* --- Stats ------------------------------------------------------------- */

.zks-pd__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.zks-pd__stat {
	background: var(--zks-cream);
	border-radius: 12px;
	padding: 32px 16px;
	text-align: center;
}

.zks-pd__stat b {
	display: block;
	font-size: 40px;
	line-height: 1.1;
	color: var(--zks-coral-strong);
	margin-bottom: 8px;
}

.zks-pd__stat span {
	display: block;
	font-size: 15px;
	color: var(--zks-text);
}

/* --- Disclaimer -------------------------------------------------------- */

.zks-pd__note {
	font-size: 14px;
	line-height: 1.6;
	color: #8a827f;
	border-left: 2px solid var(--zks-coral);
	padding-left: 16px;
}

/* --- Price on request (product summary + shop loop) -------------------- */

.zks-price-request {
	display: inline-block;
	font-weight: 700;
	color: var(--zks-coral-strong, #ff7f6c);
}

.zks-inquiry-wrap {
	margin: 16px 0 24px;
}

/*
 * Betheme's shop tiles draw a hover "add to cart" icon from hardcoded markup
 * with no filter to hook, and it only checks is_in_stock(), not
 * is_purchasable(). WooCommerce omits the "purchasable" class on products with
 * no price, so hide the icon on exactly those tiles — the enquiry button takes
 * its place.
 */
.woocommerce li.product:not(.purchasable) .image_links a.add_to_cart_button,
li.product:not(.purchasable) .image_links a.add_to_cart_button {
	display: none !important;
}


.zks-inquiry-note {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	color: #595351;
}

/* --- Responsive -------------------------------------------------------- */

@media only screen and (max-width: 959px) {
	.zks-pd__block {
		margin-bottom: 44px;
	}

	.zks-pd__block--cream,
	.zks-pd__cta {
		padding: 32px 24px;
	}

	.zks-pd__lead {
		font-size: 18px;
	}
}

@media only screen and (max-width: 767px) {
	.zks-pd__grid,
	.zks-pd__list,
	.zks-pd__related ul {
		grid-template-columns: 1fr;
	}

	.zks-pd__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.zks-pd__block--cream,
	.zks-pd__cta,
	.zks-pd__related {
		padding: 24px 16px;
	}

	.zks-pd__steps li {
		padding-left: 56px;
	}

	.zks-pd__btn,
	.zks-inquiry-btn {
		font-size: 15px;
		padding: 15px 19px;
	}
}