/**
 * AfriÉlan Studio — Single product page (assets/css/product.css)
 * Gallery left, details right (sticky), tabs, then "You may also like".
 * Colours, fonts and radius come only from design-tokens.css (--brand-*).
 * Markup: single-product.php + inc/product-page.php.
 * WooCommerce's own float/width rules for the gallery and summary are
 * overridden with !important on purpose (they would split the page 48/48).
 */

/* ---- 0. edge-to-edge page, one breadcrumb ---- */
body.single-product .site-content > .ast-container { padding-left: 0; padding-right: 0; }
body.single-product .woocommerce-breadcrumb,
body.single-product .ast-breadcrumbs-wrapper { display: none; }

.ael-pdp-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px var(--ael-gutter) 72px;
	box-sizing: border-box;
}
.ael-pdp-wrap .woocommerce-notices-wrapper { margin: 0 0 14px; }

.ael-pdp-crumbs {
	margin: 0 0 22px;
	font-family: var(--brand-font-body);
	font-size: .78rem;
	color: var(--brand-ink-soft);
}
.ael-pdp-crumbs a { color: inherit; text-decoration: none; }
.ael-pdp-crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.ael-pdp-crumbs [aria-current] { color: var(--brand-ink); }
.ael-pdp-crumbs .ael-crumb-sep { margin: 0 8px; opacity: .5; }

/* ---- 1. two columns ---- */
.ael-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.ael-pdp__gallery { position: relative; min-width: 0; }
.ael-pdp__summary {
	position: sticky;
	top: 24px;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}
body.admin-bar .ael-pdp__summary { top: 56px; }

/* ---- 2. gallery: thumbnails down the left of the main photo ---- */
.ael-pdp .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	opacity: 1 !important;
}
.ael-pdp .woocommerce-product-gallery:has(.flex-control-thumbs) {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.ael-pdp .woocommerce-product-gallery .flex-viewport { grid-column: 2; grid-row: 1; min-width: 0; border-radius: var(--brand-radius); background: var(--brand-surface); }
.ael-pdp .woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 640px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}
.ael-pdp .woocommerce-product-gallery .flex-control-thumbs li { float: none; width: 100%; margin: 0; }
.ael-pdp .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid transparent;
	border-radius: var(--brand-radius);
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease;
}
.ael-pdp .woocommerce-product-gallery .flex-control-thumbs img:hover,
.ael-pdp .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--brand-ink); }
.ael-pdp .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
.ael-pdp .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	background: var(--brand-surface);
	border-radius: 999px;
}
.ael-pdp span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--brand-accent);
	font-family: var(--brand-font-body);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--brand-accent-ink);
}

/* ---- 3. summary text ---- */
.ael-pdp-cat {
	display: inline-block;
	margin: 0 0 8px;
	font-family: var(--brand-font-body);
	font-size: .85rem;
	color: var(--brand-ink-soft);
	text-decoration: none;
}
.ael-pdp-cat:hover { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }
.ael-pdp .product_title {
	margin: 0 0 12px;
	font-family: var(--brand-font-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--brand-ink);
}
.ael-pdp .woocommerce-product-rating { margin: 0 0 8px; font-size: .85rem; }
.ael-pdp .woocommerce-product-rating .woocommerce-review-link { color: var(--brand-ink-soft); }
.ael-pdp p.price,
.ael-pdp .price {
	margin: 0 0 14px;
	font-family: var(--brand-font-body);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--brand-ink);
}
.ael-pdp .price del { margin-right: 8px; font-size: .9em; font-weight: 400; color: var(--brand-ink-soft); }
.ael-pdp .price ins { text-decoration: none; background: none; }
.ael-pdp-fulfil {
	margin: 0 0 14px;
	font-family: var(--brand-font-body);
	font-size: .85rem;
	color: var(--brand-ink-soft);
}
.ael-pdp-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid var(--brand-line);
	border-left: 3px solid var(--brand-accent);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .85rem;
	line-height: 1.55;
	color: var(--brand-ink);
}
.ael-pdp-note a { color: var(--brand-accent); }

.ael-pdp-desc { margin: 0 0 22px; font-family: var(--brand-font-body); font-size: .95rem; line-height: 1.7; color: var(--brand-ink); }
.ael-pdp-desc__body > :first-child { margin-top: 0; }
.ael-pdp-desc__body > :last-child { margin-bottom: 0; }
.ael-pdp-desc__body p { margin: 0 0 .8em; }
.ael-pdp-desc__body ul, .ael-pdp-desc__body ol { margin: 0 0 .8em 1.2em; padding: 0; }
.ael-pdp-desc.is-clamped .ael-pdp-desc__body {
	max-height: 9.5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 65%, transparent);
	mask-image: linear-gradient(#000 65%, transparent);
}
.ael-pdp-desc__toggle {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--brand-font-body);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--brand-ink);
	cursor: pointer;
}
.ael-pdp-desc__toggle:hover { background: none; color: var(--brand-accent); }

/* ---- 4. options (sizes become buttons) + quantity + buttons ---- */
.ael-pdp form.cart { margin: 0 0 22px; }
.ael-pdp table.variations { width: 100%; margin: 0 0 16px; border: 0; border-collapse: collapse; }
.ael-pdp table.variations tr { display: block; margin: 0 0 14px; }
.ael-pdp table.variations th,
.ael-pdp table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.ael-pdp table.variations th.label { padding: 0 0 8px; }
.ael-pdp table.variations th.label label {
	font-family: var(--brand-font-body);
	font-size: .9rem;
	font-weight: 600;
	color: var(--brand-ink);
}
.ael-var-current { margin-left: 6px; font-weight: 400; color: var(--brand-ink-soft); }
.ael-pdp table.variations select.ael-chips-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ael-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ael-chip {
	min-width: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: .88rem;
	line-height: 1;
	color: var(--brand-ink);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ael-chip:hover { border-color: var(--brand-ink); background: var(--brand-surface); color: var(--brand-ink); }
.ael-chip.is-selected,
.ael-chip.is-selected:hover { border-color: var(--brand-ink); background: var(--brand-ink); color: var(--brand-accent-ink); }
.ael-chip:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ael-chip.is-unavailable { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.ael-pdp .reset_variations { display: inline-block; margin-top: 10px; font-size: .8rem; color: var(--brand-ink-soft); }
.ael-pdp .woocommerce-variation-description p,
.ael-pdp .woocommerce-variation-availability p.stock { margin: 0 0 10px; font-size: .88rem; color: var(--brand-ink-soft); }
.ael-pdp .woocommerce-variation-price { margin: 0 0 8px; }
.ael-pdp p.stock { margin: 0 0 12px; font-size: .88rem; }

/* qty + Add to cart on one row, Buy now under it */
.ael-pdp form.cart:not(.variations_form),
.ael-pdp .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.ael-pdp .quantity { flex: 0 0 112px; margin: 0; }
.ael-pdp .quantity .qty {
	width: 100%;
	height: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 8px;
	border: 1px solid var(--brand-line);
	border-radius: var(--brand-radius);
	background: var(--brand-surface);
	font-family: var(--brand-font-body);
	font-size: 1rem;
	text-align: center;
	color: var(--brand-ink);
}
.ael-pdp .single_add_to_cart_button {
	flex: 1 1 calc(100% - 122px);
	min-height: 48px;
	margin: 0;
	padding: 14px 20px;
	border: 1px solid var(--brand-ink);
	border-radius: var(--brand-radius);
	background: var(--brand-ink);
	font-family: var(--brand-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ael-pdp .single_add_to_cart_button:hover { background: var(--brand-accent); border-color: var(--brand-accent); }
.ael-pdp .single_add_to_cart_button.ael-buy-now { flex: 1 1 100%; border-color: var(--brand-accent); background: var(--brand-accent); }
.ael-pdp .single_add_to_cart_button.ael-buy-now:hover { border-color: var(--brand-ink); background: var(--brand-ink); }
.ael-pdp .single_add_to_cart_button.disabled,
.ael-pdp .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
.ael-pdp .single_add_to_cart_button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ael-pdp .woocommerce-variation-add-to-cart-disabled .quantity { opacity: .5; }

/* meta + share */
.ael-pdp .product_meta {
	display: grid;
	gap: 4px;
	margin: 0 0 18px;
	padding: 16px 0 0;
	border-top: 1px solid var(--brand-line);
	font-family: var(--brand-font-body);
	font-size: .82rem;
	color: var(--brand-ink-soft);
}
.ael-pdp .product_meta > span { display: block; border: 0; padding: 0; }
.ael-pdp .product_meta a { color: var(--brand-ink); }
.ael-pdp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: var(--brand-font-body); font-size: .82rem; color: var(--brand-ink-soft); }
.ael-pdp-share a,
.ael-pdp-share button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--brand-ink);
	cursor: pointer;
}
.ael-pdp-share a:hover,
.ael-pdp-share button:hover { background: none; color: var(--brand-accent); }

/* ---- 5. tabs ---- */
.ael-pdp__lower { margin-top: clamp(40px, 6vw, 72px); }
.ael-tabs { margin: 0 0 clamp(40px, 6vw, 72px); }
.ael-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--brand-line);
}
.ael-tabs__tab {
	margin: 0 0 -1px;
	padding: 12px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	font-family: var(--brand-font-body);
	font-size: .95rem;
	font-weight: 500;
	color: var(--brand-ink-soft);
	cursor: pointer;
}
.ael-tabs__tab:hover { background: none; color: var(--brand-ink); }
.ael-tabs__tab[aria-selected="true"] { border-bottom-color: var(--brand-ink); color: var(--brand-ink); font-weight: 600; }
.ael-tabs__tab:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ael-tabs__panel { max-width: 780px; font-family: var(--brand-font-body); font-size: .95rem; line-height: 1.75; color: var(--brand-ink); }
.ael-tabs__panel[hidden] { display: none; }
.ael-tabs__panel > :first-child { margin-top: 0; }
.ael-tabs__panel a { color: var(--brand-accent); }
.ael-tabs__panel table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.ael-tabs__panel table.woocommerce-product-attributes th,
.ael-tabs__panel table.woocommerce-product-attributes td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--brand-line); background: none; text-align: left; font-style: normal; }
.ael-tabs__panel table.woocommerce-product-attributes th { width: 34%; font-weight: 600; }
.ael-tabs__panel table.woocommerce-product-attributes p { margin: 0; }
.ael-tabs__panel .commentlist { margin: 0; padding: 0; list-style: none; }
.ael-tabs__panel .woocommerce-Reviews-title,
.ael-tabs__panel #reply-title { font-family: var(--brand-font-display); font-size: 1.3rem; font-weight: 500; }

/* ---- 6. you may also like ---- */
.ael-related__title {
	margin: 0 0 24px;
	font-family: var(--brand-font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 500;
	color: var(--brand-ink);
}
.ael-related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-content: stretch;
	gap: 36px 20px;
}

/* ---- 7. smaller screens ---- */
@media (max-width: 900px) {
	.ael-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ael-pdp__summary { position: static; }
	.ael-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
}
@media (max-width: 600px) {
	.ael-pdp-wrap { padding-top: 12px; }
	/* thumbnails drop under the photo as a swipe row */
	.ael-pdp .woocommerce-product-gallery:has(.flex-control-thumbs) { grid-template-columns: minmax(0, 1fr); }
	.ael-pdp .woocommerce-product-gallery .flex-viewport { grid-column: 1; }
	.ael-pdp .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.ael-pdp .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 68px; width: 68px; }
	.ael-tabs__nav { gap: 4px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.ael-chip, .ael-pdp .single_add_to_cart_button, .ael-pdp .woocommerce-product-gallery .flex-control-thumbs img { transition: none; }
}