/**
 * Product Details Page
 *
 * Figma "Product Listing page" — 1440 frame, 1376 content, 32px gutters.
 * Column model: thumbs 136 | 10 | main 574 | 56 | summary 600.
 */

/* Unlike Home/PLP/About this template opens straight onto white content, so the
   overhanging header logo has nothing to sit over — the top padding has to clear
   it (and the Download App button, which hangs 51px and so is not the binding
   constraint) before the 40px gap the design actually calls for. */
.single-product-page {
	width: 100%;
	max-width: var(--header-content-max);
	margin: 0 auto;
	padding: calc(var(--header-logo-overhang) + 40px) var(--section-inline-pad) 56px;
	box-sizing: border-box;
}

.single-product-page__notices:empty {
	display: none;
}

/* ---------------------------------------------------------------- hero --- */

.single-product-page__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--pdp-summary-width);
	gap: var(--pdp-gap);
	align-items: start;
}

/* -------------------------------------------------------------- gallery --- */

.pdp-gallery {
	display: grid;
	grid-template-columns: var(--pdp-thumb-width) minmax(0, 1fr);
	gap: var(--pdp-thumb-rail-gap);
	align-items: start;
}

/* Single-image products drop the rail but keep the Figma image proportions
   rather than stretching across the whole gallery column. */
.pdp-gallery--single {
	grid-template-columns: minmax(0, 1fr);
}

.pdp-gallery--single .pdp-gallery__main {
	max-width: var(--pdp-main-width);
}

.pdp-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--pdp-thumb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-gallery__thumb {
	display: block;
	width: 100%;
	height: var(--pdp-thumb-height);
	padding: 0;
	border: 1px solid var(--color-border-card);
	border-radius: 2px;
	background: var(--color-bg-product-image);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.pdp-gallery__thumb:hover,
.pdp-gallery__thumb:focus-visible {
	border-color: var(--color-accent);
	outline: none;
}

.pdp-gallery__thumb.is-active {
	border-color: var(--color-accent);
}

/* Section-scoped: outweighs `.woocommerce img { height: auto }`, which applies
   on every product page and would otherwise collapse these to intrinsic size. */
.pdp-gallery .pdp-gallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdp-gallery__main {
	position: relative;
	background: var(--color-bg-product-image);
	border: 1px solid var(--color-border-card);
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: var(--pdp-main-ratio);
	min-height: 0;
}

.pdp-gallery__slide {
	margin: 0;
	width: 100%;
	height: 100%;
}

.pdp-gallery__slide[hidden] {
	display: none;
}

/* `woocommerce_single` is width-only (600px, crop off), so these keep the source
   portrait ratio — roughly 0.63 against the frame's 574/656 = 0.875. Filling the
   frame therefore overflows vertically by ~250px, and the default centre anchor
   would split that top and bottom, taking the model's head off. Anchor to the top
   so the crop comes out of the hem instead of the face. */
.pdp-gallery .pdp-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* -------------------------------------------------------------- summary --- */

.pdp-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.pdp-summary__badge {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pdp-summary__title {
	margin: 2px 0 0;
	font-family: var(--font-heading);
	font-size: var(--pdp-title-size);
	font-weight: 400;
	line-height: var(--pdp-title-lh);
	color: var(--color-heading);
}

.pdp-summary__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.pdp-summary__stars {
	display: inline-flex;
	align-items: center;
	gap: var(--pdp-star-gap);
	color: #e2970d;
}

.pdp-summary__star {
	width: var(--pdp-star-size);
	height: var(--pdp-star-size);
	color: var(--color-border-card);
}

.pdp-summary__star.is-filled {
	color: #e2970d;
}

.pdp-summary__reviews,
.pdp-summary__reviews:link,
.pdp-summary__reviews:visited {
	font-family: var(--font-lang);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--color-heading);
	text-decoration: none;
}

.pdp-summary__reviews:hover,
.pdp-summary__reviews:focus {
	text-decoration: underline;
}

.pdp-summary__price {
	margin-top: 14px;
	font-family: var(--font-body);
	font-size: var(--pdp-price-size);
	font-weight: 400;
	line-height: var(--pdp-price-lh);
	color: var(--color-heading);
}

.pdp-summary__price .woocommerce-Price-amount {
	font-weight: 400;
}

.pdp-summary__price del {
	opacity: 0.5;
	margin-right: 10px;
}

.pdp-summary__tax-note {
	margin: 4px 0 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 30px;
	color: var(--color-body-80);
}

.pdp-summary__tax-note a {
	color: var(--color-accent);
	text-decoration: none;
}

.pdp-summary__tax-note a:hover,
.pdp-summary__tax-note a:focus {
	text-decoration: underline;
}

/* ------------------------------------------------- variations (swatches) --- */

.pdp-form {
	width: 100%;
	margin-top: 24px;
}

.pdp-variations {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pdp-variations__heading {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 12px;
}

.pdp-variations__label {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-heading);
}

.pdp-variations__selected {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-heading);
	opacity: 0.6;
}

.pdp-variations__control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/*
 * WooCommerce's native <select> stays in the DOM — wc-add-to-cart-variation.js
 * reads and writes it — but is taken out of the visual flow.
 */
.pdp-variations__control select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pdp-swatches__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pdp-swatch-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-swatches--size .pdp-swatches__list {
	gap: var(--pdp-size-btn-gap);
}

.pdp-swatch {
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
}

/* Colour swatch — Figma Group 1116607084, Ellipse 5 over Ellipse 2.
   Ellipse 2 (the 23.06px fill) carries the gold hairline on every swatch — that
   stroke is what keeps white and cream readable against the white page, so it is
   not a selected-only decoration. Ellipse 5 (the 28px ring) is the selected
   affordance. The 22px fill centres in the 26px content box on exact pixels, so
   the two circles stay concentric at 1x. See --pdp-swatch-dot for why these are
   whole pixels rather than Figma's placed 23.06 / 0.823529. */
.pdp-swatch--color {
	display: grid;
	place-items: center;
	width: var(--pdp-swatch-size);
	height: var(--pdp-swatch-size);
	/* Height is fixed, so a flex shrink would squash these into literal ellipses
	   once a product carries enough colours to overflow the summary column. */
	flex-shrink: 0;
	border-radius: 50%;
	box-sizing: border-box;
	border: var(--pdp-swatch-ring-width) solid transparent;
	transition: border-color 0.2s ease;
}

.pdp-swatch--color .pdp-swatch__dot {
	display: block;
	width: var(--pdp-swatch-dot);
	height: var(--pdp-swatch-dot);
	border-radius: 50%;
	background: var(--pdp-swatch-color, var(--color-bg-placeholder));
	border: var(--pdp-swatch-ring-width) solid var(--color-pdp-swatch-ring);
	box-sizing: border-box;
}

.pdp-swatch--color.is-selected {
	border-color: var(--color-pdp-swatch-ring);
}

.pdp-swatch--color:hover,
.pdp-swatch--color:focus-visible {
	border-color: var(--color-accent);
	outline: none;
}

/* Size: 64 × 40 pill */
.pdp-swatch--size {
	display: grid;
	place-items: center;
	width: var(--pdp-size-btn-width);
	height: var(--pdp-size-btn-height);
	box-sizing: border-box;
	background: var(--color-pdp-size-bg);
	border: 1px solid var(--color-border-category);
	border-radius: var(--pdp-radius);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-heading);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pdp-swatch--size:hover,
.pdp-swatch--size:focus-visible {
	border-color: var(--color-accent);
	outline: none;
}

.pdp-swatch--size.is-selected {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pdp-swatch[disabled],
.pdp-swatch.is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
}

.pdp-size-guide,
.pdp-size-guide:link,
.pdp-size-guide:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-accent);
	text-decoration: none;
}

.pdp-size-guide:hover,
.pdp-size-guide:focus {
	text-decoration: underline;
}

.reset_variations {
	display: none;
}

/* ---------------------------------------------------------------- stock --- */

.pdp-stock {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 26px;
	color: var(--color-pdp-stock);
}

.pdp-stock__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.pdp-stock.is-out-of-stock {
	color: var(--color-body-80);
}

.pdp-stock strong {
	font-weight: 600;
}

/* -------------------------------------------------------------- actions --- */

.single_variation_wrap {
	width: 100%;
}

/* WooCommerce injects the matched variation's price/availability here; the
   summary already shows both, so keep it for screen readers only. */
.woocommerce-variation.single_variation {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
	width: 100%;
	max-width: var(--pdp-action-width);
}

/* Figma has no quantity stepper — the form posts the default of 1. */
.woocommerce-variation-add-to-cart .quantity {
	display: none;
}

.single-product-page .single_add_to_cart_button,
.single-product-page .pdp-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: var(--pdp-action-height);
	padding: 10px;
	box-sizing: border-box;
	border-radius: var(--pdp-radius);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Enough classes to outweigh WooCommerce's `.woocommerce button.button.alt`
 * (0,3,1) and its `.disabled` variant (0,4,1), which otherwise paint the button
 * the default purple. WooCommerce adds `.disabled` until a variation is picked.
 */
.single-product-page .single_add_to_cart_button.button.alt,
.single-product-page .single_add_to_cart_button.button.alt.disabled {
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	color: var(--color-white);
}

/* Inlined by the variation-add-to-cart-button template override.
   The label is uppercase, so its line box carries descender space no glyph uses
   and `align-items: center` settles the caps below the true optical centre while
   the icon sits on it — the icon then reads as riding high. Nudging the icon down
   by half the descender re-centres the pair against the caps. */
.single-product-page .pdp-cart-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	transform: translateY(3px);
}

.single-product-page .single_add_to_cart_button.button.alt:hover,
.single-product-page .single_add_to_cart_button.button.alt:focus {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-white);
}

/* Awaiting a variation choice — keep the brand colour, drop the affordance. */
.single-product-page .single_add_to_cart_button.button.alt.disabled,
.single-product-page .single_add_to_cart_button.button.alt:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.single-product-page .pdp-buy-now {
	background: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
}

.single-product-page .pdp-buy-now:hover,
.single-product-page .pdp-buy-now:focus {
	background: var(--color-accent);
	color: var(--color-white);
}

/* ---------------------------------------------------------- assurances --- */

.pdp-assurances {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 32px 0 0;
	padding: 24px 0 0;
	list-style: none;
}

.pdp-assurances__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* The four icons are drawn at different heights (25 / 26 / 23 / 24), so the row
   is boxed to the tallest and they are bottom-aligned on a shared baseline. Left
   to their intrinsic heights they would push each column's title to a different
   y and the four labels would no longer line up across the grid. */
.pdp-assurances__icon {
	display: flex;
	align-items: flex-end;
	height: 26px;
	color: var(--color-accent);
	line-height: 0;
	margin-bottom: 8px;
}

.pdp-assurances__title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-accent);
}

.pdp-assurances__text {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-body-76);
}

/* ----------------------------------------------------------------- tabs --- */

.pdp-tabs {
	margin-top: 64px;
	border-top: 1px solid var(--color-pdp-rule);
}

.pdp-tabs__nav {
	display: flex;
	align-items: stretch;
	gap: var(--pdp-tab-gap);
	/* The rule is an inset shadow, not a border, so it falls inside the scroll
	   box and the active tab's underline can reach it from bottom:0. As a border
	   it sat outside, the underline had to overhang to -1px to cover it, and that
	   1px became scrollable overflow — which is what raised the stray vertical
	   scrollbar, and also meant only half the underline was ever visible. */
	box-shadow: inset 0 -1px 0 var(--color-border-light);
	overflow-x: auto;
	/* Setting either axis away from `visible` computes the other to `auto`, not
	   `visible` — so the vertical axis has to be pinned explicitly. */
	overflow-y: hidden;
}

.pdp-tabs__tab {
	position: relative;
	padding: 18px 0;
	border: none;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: var(--pdp-tab-size);
	font-weight: 600;
	letter-spacing: var(--pdp-tab-tracking);
	text-transform: uppercase;
	color: var(--color-body-76);
	transition: color 0.2s ease;
}

.pdp-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pdp-tabs__tab:hover,
.pdp-tabs__tab:focus-visible {
	color: var(--color-accent);
	outline: none;
}

.pdp-tabs__tab.is-active {
	color: var(--color-accent);
}

.pdp-tabs__tab.is-active::after {
	opacity: 1;
}

.pdp-tabs__panel {
	padding-top: 40px;
}

.pdp-tabs__panel[hidden] {
	display: none;
}

.pdp-description {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 552px;
	gap: 64px;
	align-items: start;
}

.pdp-tabs__prose {
	font-family: var(--font-body);
	font-size: var(--pdp-prose-size);
	line-height: var(--pdp-prose-lh);
	color: var(--color-body-80);
}

.pdp-tabs__prose > :first-child {
	margin-top: 0;
}

.pdp-tabs__prose > :last-child {
	margin-bottom: 0;
}

.pdp-tabs__prose p {
	margin: 0 0 20px;
}

.pdp-tabs__prose ul,
.pdp-tabs__prose ol {
	margin: 0 0 20px;
	padding-left: 20px;
}

.pdp-tabs__prose li {
	margin-bottom: 8px;
}

/* --------------------------------------------------------- spec box --- */

.pdp-specs {
	background: var(--color-bg-cream-2);
	padding: var(--pdp-spec-box-pad);
	box-sizing: border-box;
}

.pdp-specs__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdp-specs__row {
	display: grid;
	grid-template-columns: 18px auto minmax(0, 1fr);
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 22px;
}

.pdp-specs__icon {
	color: var(--color-heading);
	line-height: 0;
	align-self: center;
}

.pdp-specs__label {
	font-weight: 600;
	color: var(--color-heading);
}

.pdp-specs__value {
	color: var(--color-body-76);
}

/* -------------------------------------------------------------- related --- */

.pdp-related {
	margin-top: 72px;
}

.pdp-related__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}

.pdp-related__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--pdp-related-heading-size);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-heading);
}

.pdp-related__divider {
	line-height: 0;
}

.pdp-related__grid {
	display: grid;
	grid-template-columns: repeat(var(--pdp-related-columns), minmax(0, 1fr));
	gap: var(--pdp-related-gap);
	align-items: stretch;
}

/* Related cards are narrower than the PLP's fixed 238.5px — let them flex. */
.pdp-related__grid .product-card--related {
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1199px) {
	.single-product-page__hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.pdp-description {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.pdp-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.single-product-page {
		padding: calc(var(--header-logo-overhang) + 32px) 24px 48px;
	}

	.pdp-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pdp-summary__title {
		font-size: 28px;
		line-height: 38px;
	}

	.pdp-summary__price {
		font-size: 26px;
		line-height: 38px;
	}
}

/* Matches header-nav.css: at 782px the logo returns to flow at 56px and stops
   overhanging, so the clearance above has to come back off. */
@media (max-width: 782px) {
	.single-product-page {
		padding-top: 32px;
	}
}

@media (max-width: 767px) {
	.single-product-page {
		padding: 24px 16px 40px;
	}

	.pdp-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Thumbnails become a horizontal strip under the main image. */
	.pdp-gallery__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		gap: 8px;
	}

	.pdp-gallery__thumb-item {
		flex: 0 0 84px;
	}

	.pdp-gallery__thumb {
		height: 100px;
	}

	.pdp-gallery__main {
		order: 1;
	}

	.pdp-assurances {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}

	.pdp-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.pdp-tabs__nav {
		gap: 24px;
	}

	.pdp-related__title {
		font-size: 26px;
	}
}