/* ==========================================================================
   AL-PDP — product detail page on the AL design system (B-PDP).
   Scope: everything under body.al-pdp (set by al-pdp.php on is_product()).
   Design of record: docs/pdp-design-spec.md
   ========================================================================== */

/* ---------- Summary column typography ---------- */

.al-pdp .summary-inner { font-family: var(--al-font-sans); }

.al-pdp h1.product_title {
	font-family: var(--al-font-sans);
	font-size: clamp(20px, 2.2vw, var(--al-fs-2xl));
	font-weight: var(--al-fw-bold);
	line-height: var(--al-lh-tight);
	color: var(--al-ink-900);
	margin-bottom: var(--al-sp-2);
}

/* Brand chip (top of summary, mirrors the card's .al-b-brand) */
.al-pdp .al-pp-brandrow { margin-bottom: var(--al-sp-1); }
.al-pdp .al-pp-brand {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--al-line-300);
	border-radius: var(--al-radius-pill);
	background: var(--al-bg-000);
	font-size: var(--al-fs-xs);
	font-weight: var(--al-fw-semibold);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--al-blue-700);
}
.al-pdp .al-pp-brand:hover { border-color: var(--al-blue-500); background: var(--al-blue-050); color: var(--al-blue-700); }

/* Reference row: SKU · EAN · MPN — mono, copy-on-click */
.al-pdp .al-pp-refs { display: flex; flex-wrap: wrap; gap: var(--al-sp-2); margin: 0 0 var(--al-sp-3); }
.al-pdp .al-pp-ref {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--al-line-200);
	border-radius: var(--al-radius-sm);
	background: var(--al-bg-100);
	font-size: var(--al-fs-xs);
	color: var(--al-ink-500);
	cursor: copy;
	transition: border-color var(--al-dur-fast) var(--al-ease);
}
.al-pdp .al-pp-ref b { font-family: var(--al-font-mono); font-weight: var(--al-fw-semibold); color: var(--al-ink-900); }
.al-pdp .al-pp-ref:hover { border-color: var(--al-blue-500); }
.al-pdp .al-pp-ref:hover .al-pp-ref-ico { color: var(--al-blue-700); }
.al-pdp .al-pp-ref.copied { border-color: var(--al-success-500); background: var(--al-success-100); }
/* visible copy icon + "Αντιγράφηκε!" bubble on click (owner 07-11: make the function obvious) */
.al-pdp .al-pp-ref { position: relative; }
.al-pdp .al-pp-ref-ico { align-self: center; color: var(--al-ink-400); transition: color var(--al-dur-fast) var(--al-ease); }
.al-pdp .al-pp-ref.copied::after {
	content: attr(data-copied);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	padding: 3px 10px;
	border-radius: var(--al-radius-sm);
	background: var(--al-ink-900);
	color: #fff;
	font-size: var(--al-fs-xs);
	font-weight: var(--al-fw-semibold);
	white-space: nowrap;
	pointer-events: none;
	z-index: 5;
}

/* Price */
.al-pdp .summary .price {
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-2xl);
	font-weight: var(--al-fw-bold);
	color: var(--al-price);
}
.al-pdp .summary .price del { color: var(--al-price-strike); font-size: var(--al-fs-lg); font-weight: var(--al-fw-regular); }
.al-pdp .summary .price ins { text-decoration: none; }

.al-pdp .al-pp-pricectx { display: flex; flex-direction: column; gap: 2px; margin: calc(-1 * var(--al-sp-2)) 0 var(--al-sp-3); font-size: var(--al-fs-xs); color: var(--al-ink-500); }
.al-pdp .al-pp-rrp { color: var(--al-ink-700); }
.al-pdp .al-pp-rrp .woocommerce-Price-amount { font-family: var(--al-font-mono); font-weight: var(--al-fw-semibold); }
.al-pdp .al-pp-rrp em { font-style: normal; color: var(--al-ink-400); }

/* Availability + dispatch block */
.al-pdp .al-pp-avail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--al-sp-2) var(--al-sp-4);
	padding: var(--al-sp-3) var(--al-sp-4);
	margin: 0 0 var(--al-sp-3);
	background: var(--al-bg-100);
	border-radius: var(--al-radius-md);
	font-size: var(--al-fs-sm);
}
.al-pdp .al-pp-avail .al-stock { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--al-fw-semibold); }
.al-pdp .al-pp-avail .al-dot { width: 8px; height: 8px; border-radius: 50%; }
.al-pdp .al-pp-avail .al-stock.ok  { color: var(--al-instock); }
.al-pdp .al-pp-avail .al-stock.ok .al-dot { background: var(--al-instock); }
.al-pdp .al-pp-avail .al-stock.low { color: var(--al-lowstock); }
.al-pdp .al-pp-avail .al-stock.low .al-dot { background: var(--al-lowstock); }
.al-pdp .al-pp-avail .al-stock.out { color: var(--al-outstock); }
.al-pdp .al-pp-avail .al-stock.out .al-dot { background: var(--al-outstock); }
.al-pdp .al-pp-ship { color: var(--al-ink-700); font-size: var(--al-fs-xs); }

/* Hide Woodmart's own inline stock line — the availability block replaces it */
.al-pdp .summary p.stock { display: none; }

/* Buy area: one row = qty + add-to-cart (+ carton), MOQ hint below */
.al-pdp form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-sp-3); }
.al-pdp form.cart > * { flex: 0 0 auto; width: auto; }
.al-pdp form.cart .quantity { order: 1; }
.al-pdp form.cart .single_add_to_cart_button { order: 2; }
.al-pdp form.cart .al-pp-boxadd { order: 3; }
.al-pdp form.cart .al-pp-moq { order: 4; flex-basis: 100%; }
.al-pdp form.cart .quantity input.qty { font-family: var(--al-font-mono); font-size: var(--al-fs-md); }
.al-pdp .al-pp-moq {
	font-size: var(--al-fs-xs);
	color: var(--al-ink-500);
}
.al-pdp .al-pp-boxadd {
	padding: 9px 14px;
	border: 1px dashed var(--al-line-300);
	border-radius: var(--al-radius-sm);
	background: var(--al-bg-000);
	font-size: var(--al-fs-xs);
	font-weight: var(--al-fw-semibold);
	color: var(--al-ink-700);
	cursor: pointer;
	transition: border-color var(--al-dur-fast) var(--al-ease), background var(--al-dur-fast) var(--al-ease);
}
.al-pdp .al-pp-boxadd:hover { border-color: var(--al-blue-500); background: var(--al-blue-050); }

/* Add-to-cart: canonical navy, disabled state actually looks disabled (audit item #3) */
.al-pdp .single_add_to_cart_button {
	border-radius: var(--al-radius-sm);
	font-weight: var(--al-fw-semibold);
}
.al-pdp .single_add_to_cart_button.disabled,
.al-pdp .single_add_to_cart_button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Variation form: two clean rows (owner 07-11 — the flexed form wrapped «+ Κιβώτιο» and
   printed «Εκκαθάριση» over the stepper): row 1 = variation select, row 2 = qty + ATC + box */
.al-pdp form.cart.variations_form { display: block; }
.al-pdp form.cart.variations_form table.variations { margin: 0 0 var(--al-sp-2); }
.al-pdp .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--al-sp-3);
}
/* Woodmart gives the buy-row children 100% widths — reset so qty + ATC + box share one row */
.al-pdp .woocommerce-variation-add-to-cart > * { flex: 0 0 auto; width: auto; margin: 0; }
.al-pdp .woocommerce-variation-add-to-cart .al-pp-moq { flex-basis: 100%; order: 5; }
.al-pdp .variations select { width: 100%; max-width: 420px; border-radius: var(--al-radius-sm); }
.al-pdp table.variations th.label { padding-right: var(--al-sp-3); }
/* the clear-selection link sits under the select, never over the buy row */
.al-pdp .wd-reset-var { position: static; display: block; margin-top: 4px; height: auto; }
.al-pdp .wd-reset-var .reset_variations { font-size: var(--al-fs-xs); color: var(--al-ink-500); }

/* Meta row: keep the category, dedupe the SKU (reference row owns it) */
.al-pdp .product_meta .sku_wrapper { display: none; }
.al-pdp .product_meta { font-size: var(--al-fs-xs); color: var(--al-ink-500); }

/* Gallery: frame the MAIN image only; thumbnails get their own bordered tiles with an
   active state (owner 07-11: one border around everything read as a single confusing box) */
.al-pdp .wd-gallery-images { border: 1px solid var(--al-line-200); border-radius: var(--al-radius-md); overflow: hidden; background: #fff; }
.al-pdp .woocommerce-product-gallery img { mix-blend-mode: multiply; }
.al-pdp .wd-gallery-thumb { padding: 2px; }
.al-pdp .wd-gallery-thumb .wd-carousel-item {
	border: 1px solid var(--al-line-200);
	border-radius: var(--al-radius-sm);
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	transition: border-color var(--al-dur-fast) var(--al-ease);
}
.al-pdp .wd-gallery-thumb .wd-carousel-item:hover { border-color: var(--al-blue-500); }
.al-pdp .wd-gallery-thumb .wd-carousel-item.wd-thumb-active { border-color: var(--al-blue-700); box-shadow: inset 0 0 0 1px var(--al-blue-700); }
/* 4 thumbs in view instead of 3 (smaller tiles scan faster; Woodmart's JS reads this
   var from COMPUTED style, so the override also drives the carousel's slidesPerView) */
.al-pdp .wd-gallery-thumb .wd-carousel { --wd-col-lg: 4 !important; --wd-col-md: 4 !important; }

/* ---------- Sections (stacked + anchor nav; accordion ≤1024) ---------- */

.al-pp-secs { margin-top: var(--al-sp-6); }

/* Description + specs share a row on wide screens (only when BOTH exist — .al-duo set in
   PHP). The spec sheet becomes a compact card beside the description instead of a second
   full-width band of mostly empty space. */
@media (min-width: 1200px) {
	.al-pp-secs.al-duo { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--al-sp-8); align-items: start; }
	.al-pp-secs.al-duo > .al-pp-toc { grid-column: 1 / -1; }
	.al-pp-secs.al-duo > #psec-desc { grid-column: 1; }
	.al-pp-secs.al-duo > #psec-specs {
		grid-column: 2;
		background: var(--al-bg-000);
		border: 1px solid var(--al-line-200);
		border-radius: var(--al-radius-md);
		padding: var(--al-sp-4) var(--al-sp-5);
	}
	.al-pp-secs.al-duo > #psec-specs .al-psec-h { font-size: var(--al-fs-md); margin-bottom: var(--al-sp-3); }
	.al-pp-secs.al-duo > .al-psec:not(#psec-desc):not(#psec-specs) { grid-column: 1 / -1; }
}

.al-pp-toc {
	display: flex;
	flex-wrap: wrap;
	gap: var(--al-sp-2);
	margin-bottom: var(--al-sp-5);
	padding-bottom: var(--al-sp-3);
	border-bottom: 1px solid var(--al-line-200);
}
.al-pp-toc a {
	padding: 6px 14px;
	border: 1px solid var(--al-line-200);
	border-radius: var(--al-radius-pill);
	font-size: var(--al-fs-sm);
	font-weight: var(--al-fw-semibold);
	color: var(--al-ink-700);
	transition: all var(--al-dur-fast) var(--al-ease);
}
.al-pp-toc a:hover { border-color: var(--al-blue-500); color: var(--al-blue-700); background: var(--al-blue-050); }
.al-pp-toc a i { font-style: normal; color: var(--al-ink-400); font-weight: var(--al-fw-regular); }

.al-psec { margin-bottom: var(--al-sp-6); scroll-margin-top: 120px; }
.al-psec-h {
	display: flex;
	align-items: center;
	gap: var(--al-sp-2);
	font-family: var(--al-font-sans);
	font-size: var(--al-fs-lg);
	font-weight: var(--al-fw-bold);
	color: var(--al-ink-900);
	padding-bottom: var(--al-sp-2);
	border-bottom: 2px solid var(--al-line-200);
	margin-bottom: var(--al-sp-4);
}
.al-psec-n { color: var(--al-ink-400); font-weight: var(--al-fw-regular); font-size: var(--al-fs-sm); }
.al-psec-chev { display: none; }

.al-pp-desc { font-size: var(--al-fs-sm); line-height: var(--al-lh-base); color: var(--al-ink-700); max-width: 900px; }
.al-pp-desc :is(h2,h3,h4) { font-family: var(--al-font-sans); color: var(--al-ink-900); }
/* responsive video embeds inside descriptions (installation/demo videos) */
.al-pp-desc .al-video { max-width: 720px; aspect-ratio: 16 / 9; margin: var(--al-sp-3) 0; }
.al-pp-desc .al-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--al-radius-md); }

/* Spec table: compact single-column list — no zebra, no heavy grid (owner 07-11: the
   striped 900px table was mostly empty space and its background looked foreign) */
.al-pdp .woocommerce-product-attributes { width: 100%; max-width: 620px; margin: 0; border-collapse: collapse; background: none; }
/* Woodmart lays each row out as flex (label left, value right) — keep that, but the
   separator lives on the ROW: per-cell border-bottoms only underline their own text */
.al-pdp .woocommerce-product-attributes tr { border-bottom: 1px solid var(--al-line-200); }
.al-pdp .woocommerce-product-attributes tr:last-child { border-bottom: 0; }
.al-pdp .woocommerce-product-attributes th,
.al-pdp .woocommerce-product-attributes td {
	text-align: left;
	padding: 8px 12px 8px 0;
	border: 0;
	background: none;
	font-size: var(--al-fs-sm);
	font-style: normal;
}
.al-pdp .woocommerce-product-attributes td { padding-right: 0; }
.al-pdp .woocommerce-product-attributes th { width: 42%; font-weight: var(--al-fw-medium); color: var(--al-ink-500); }
.al-pdp .woocommerce-product-attributes td { color: var(--al-ink-900); }
.al-pdp .woocommerce-product-attributes td p { margin: 0; font-size: inherit; }
/* kill the legacy «ί» tooltip pseudo-element hack wherever it survives */
.al-pdp .woocommerce-product-attributes th::after,
.al-pdp .woocommerce-product-attributes td::after { content: none !important; }

/* Info tooltip (spec labels): same dark bubble language as the copy feedback */
.al-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	border: 1px solid var(--al-ink-400);
	border-radius: 50%;
	font-size: 10px;
	font-weight: var(--al-fw-bold);
	font-style: normal;
	line-height: 1;
	color: var(--al-ink-500);
	cursor: help;
	position: relative;
	vertical-align: middle;
}
.al-tip:hover, .al-tip:focus { border-color: var(--al-blue-500); color: var(--al-blue-700); outline: 0; }
.al-tip:hover::after, .al-tip:focus::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 260px;
	padding: 8px 12px;
	border-radius: var(--al-radius-sm);
	background: var(--al-ink-900);
	color: #fff;
	font-size: var(--al-fs-xs);
	font-weight: var(--al-fw-regular);
	line-height: var(--al-lh-base);
	white-space: normal;
	text-align: left;
	pointer-events: none;
	z-index: 20;
}

/* Fitment */
.al-pp-fit-h { font-size: var(--al-fs-md); font-weight: var(--al-fw-semibold); color: var(--al-ink-900); margin: var(--al-sp-4) 0 var(--al-sp-2); }
.al-pp-chips { display: flex; flex-wrap: wrap; gap: var(--al-sp-2); max-width: 1000px; }
/* collapsed/expanded tail is a CLASS toggle — display:contents keeps the extra chips in
   the same wrap flow, but it also overrides [hidden], so the attribute can't be used */
.al-pp-chips-more { display: contents; }
.al-pp-chips-more.is-collapsed { display: none; }
.al-pp-chip {
	padding: 4px 12px;
	border: 1px solid var(--al-line-200);
	border-radius: var(--al-radius-pill);
	background: var(--al-bg-000);
	font-size: var(--al-fs-xs);
	color: var(--al-ink-700);
}
.al-pp-chips-toggle {
	padding: 4px 12px;
	border: 1px solid var(--al-blue-500);
	border-radius: var(--al-radius-pill);
	background: var(--al-blue-050);
	font-size: var(--al-fs-xs);
	font-weight: var(--al-fw-semibold);
	color: var(--al-blue-700);
	cursor: pointer;
}
.al-pp-fit-note { margin-top: var(--al-sp-3); font-size: var(--al-fs-xs); color: var(--al-ink-500); }

/* Documents */
.al-pp-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-sp-2); }
.al-pp-docs a {
	display: inline-flex;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--al-line-200);
	border-radius: var(--al-radius-sm);
	font-size: var(--al-fs-sm);
	font-weight: var(--al-fw-semibold);
	color: var(--al-blue-700);
}
.al-pp-docs a:hover { border-color: var(--al-blue-500); background: var(--al-blue-050); }

/* FAQ */
.al-pp-faq details { border: 1px solid var(--al-line-200); border-radius: var(--al-radius-md); margin-bottom: var(--al-sp-2); max-width: 900px; }
.al-pp-faq summary { padding: 12px 16px; font-size: var(--al-fs-sm); font-weight: var(--al-fw-semibold); color: var(--al-ink-900); cursor: pointer; }
.al-pp-faq details > div { padding: 0 16px 12px; font-size: var(--al-fs-sm); color: var(--al-ink-700); }

/* ---------- Recommendation rails ---------- */

.al-pp-recs { margin-top: var(--al-sp-6); }
.al-pp-rec { margin-bottom: var(--al-sp-8); }
.al-sec-h2 {
	font-family: var(--al-font-sans);
	font-size: var(--al-fs-xl);
	font-weight: var(--al-fw-bold);
	color: var(--al-ink-900);
	margin-bottom: var(--al-sp-4);
}
.al-pp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--al-sp-4);
}
.al-pp-grid .al-card { min-width: 0; }
/* Reassert the card-button palette: on the PDP Woodmart's late-printed part CSS wins the
   specificity TIE against al-home.css's .al-btn-* (same 0,1,0; theme prints later here,
   unlike the homepage) — the +Καλάθι buttons rendered grey */
.al-pdp .al-btn-blue { background: var(--al-blue-700); color: #fff; }
.al-pdp .al-btn-blue:hover { background: var(--al-blue-800); color: #fff; }
.al-pdp .al-btn-primary { background: var(--al-amber-500); color: var(--al-ink-900); }
.al-pdp .al-btn-primary:hover { background: var(--al-amber-600); }
.al-pdp .al-btn-ghost { background: #fff; border: 1px solid var(--al-line-300); color: var(--al-ink-900); }
.al-pdp .al-btn-ghost:hover { border-color: var(--al-blue-500); color: var(--al-blue-700); }
@media (max-width: 1100px) { .al-pp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .al-pp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--al-sp-2); } }

/* ---------- Sticky add-to-cart (Woodmart native, token skin) ---------- */

.al-pdp .wd-sticky-btn {
	background: #fff;
	border-top: 1px solid var(--al-line-200);
	box-shadow: var(--al-shadow-3);
}
.al-pdp .wd-sticky-btn .wd-entities-title { font-family: var(--al-font-sans); font-size: var(--al-fs-sm); font-weight: var(--al-fw-semibold); }
.al-pdp .wd-sticky-btn .price { font-family: var(--al-font-mono); font-weight: var(--al-fw-bold); font-size: var(--al-fs-lg); line-height: 1; color: var(--al-price); }
.al-pdp .wd-sticky-btn .button { border-radius: var(--al-radius-sm); font-weight: var(--al-fw-semibold); min-height: var(--al-tap-min); }
/* price + controls on one centred baseline (owner: price floated off the text line) */
.al-pdp .wd-sticky-btn-cart { display: flex; align-items: center; gap: var(--al-sp-3); }
/* variable products: compact in-bar variation select injected by al-pdp.js — the
   theme's «Επιλέξτε επιλογές» scroll-up link is replaced entirely */
.al-pdp .wd-sticky-btn-cart .al-sticky-var {
	min-width: 170px;
	max-width: 240px;
	height: 40px;
	padding: 0 28px 0 10px;
	border: 1px solid var(--al-line-300);
	border-radius: var(--al-radius-sm);
	font-size: var(--al-fs-sm);
}
.al-pdp .wd-sticky-btn-cart .al-sticky-add { white-space: nowrap; }
.al-pdp .wd-sticky-btn-cart .al-sticky-add[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Mobile / tablet ---------- */

@media (max-width: 1024px) {
	/* Sections become accordions (JS adds .al-acc; consistent across ALL sections) */
	.al-pp-toc { display: none; }
	.al-psec { margin-bottom: 0; border-bottom: 1px solid var(--al-line-200); }
	.al-psec-h {
		margin-bottom: 0;
		padding: 14px 4px;
		border-bottom: 0;
		font-size: var(--al-fs-md);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.al-psec-chev {
		display: block;
		margin-left: auto;
		width: 9px; height: 9px;
		border-right: 2px solid var(--al-ink-500);
		border-bottom: 2px solid var(--al-ink-500);
		transform: rotate(45deg);
		transition: transform var(--al-dur-fast) var(--al-ease);
	}
	.al-psec.open .al-psec-chev { transform: rotate(225deg); }
	.al-psec-body { display: none; padding: 0 4px var(--al-sp-4); }
	.al-psec.open .al-psec-body { display: block; }

	.al-pdp .woocommerce-product-attributes th { width: 40%; }
}

@media (max-width: 768px) {
	.al-pdp h1.product_title { font-size: var(--al-fs-xl); }
	.al-pdp .summary .price { font-size: var(--al-fs-xl); }
	.al-pdp .al-pp-avail { padding: var(--al-sp-2) var(--al-sp-3); gap: var(--al-sp-1) var(--al-sp-3); }
	.al-pp-chips { max-height: none; }
	.al-pdp .variations select { max-width: 100%; }
}