/*
 * AverionHair Product Page.
 *
 * Ported from the React storefront's /product/[slug]. Tokens fall back to the child theme's own
 * --avh-* value first and to a literal second, so a site running both never drifts.
 *
 * HEADINGS STATE THEIR OWN COLOUR. An inherited colour loses to any theme rule matching the element
 * itself, at any specificity - that is what inheritance means, and it is how the account plugin
 * ended up with a black heading on a black card.
 */

.avh-pd-active {
	--avh-pd-ink: var(--avh-black, #191410);
	--avh-pd-muted: color-mix(in srgb, var(--avh-pd-ink) 60%, transparent);
	--avh-pd-faint: color-mix(in srgb, var(--avh-pd-ink) 42%, transparent);
	--avh-pd-line: color-mix(in srgb, var(--avh-pd-ink) 12%, transparent);
	--avh-pd-hair: color-mix(in srgb, var(--avh-pd-ink) 8%, transparent);
	--avh-pd-gold: var(--avh-gold, #c29a4f);
	--avh-pd-bronze: var(--avh-bronze, #9d7b43);
	--avh-pd-cream: var(--avh-cream, #f7f1e6);
	--avh-pd-nude: var(--avh-nude, #ece0cf);
	--avh-pd-pure: var(--avh-pure, #fffdf9);
	--avh-pd-radius: var(--avh-radius-lg, 16px);
	/* One definite height for the whole quantity control - see the note on .quantity. */
	--avh-pd-qty-h: 2.75rem;
	--avh-pd-shadow: var(--avh-shadow-soft, 0 1px 2px rgba(25, 20, 16, .04), 0 8px 24px -12px rgba(25, 20, 16, .12));
	--avh-pd-font-heading: var(--avh-font-heading, "Fraunces", Georgia, "Times New Roman", serif);
	--avh-pd-font-body: var(--avh-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
	--avh-pd-ease: var(--avh-ease-luxe, cubic-bezier(0.16, 1, 0.3, 1));
}

/* --- Breadcrumb ----------------------------------------------------------------------------- */

.avh-pd-active .woocommerce-breadcrumb {
	margin: 0 0 1.15rem;
	color: var(--avh-pd-faint);
	font-family: var(--avh-pd-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.01em;
}

.avh-pd-active .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.avh-pd-active .woocommerce-breadcrumb a:hover {
	color: var(--avh-pd-gold);
}

/* --- The two columns ------------------------------------------------------------------------ */

/*
 * WooCommerce still ships a FLOAT layout for these two (the gallery is 48% left, the summary 48%
 * right). Overriding the container to a grid rather than nudging the floats means the two columns
 * are the same height, the gallery can be sticky, and nothing has to be cleared.
 */
.avh-pd-active div.product {
	display: grid;
	gap: 2rem;
	font-family: var(--avh-pd-font-body);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.avh-pd-active div.product {
		gap: 2.5rem;
		/* 1.05 / 0.95, as the React page - the gallery gets the slightly wider half. */
		grid-template-columns: 1.05fr 0.95fr;
		align-items: start;
	}
}

.avh-pd-active div.product::before,
.avh-pd-active div.product::after {
	content: none;
}

.avh-pd-active div.product > .woocommerce-product-gallery,
.avh-pd-active div.product > .summary {
	width: auto;
	min-width: 0;
	margin: 0;
	float: none;
	clear: none;
}

/*
 * Anything else a theme or plugin prints as a direct child of div.product - a tab strip, an
 * upsell block, our own standards section - spans both columns instead of becoming a third one.
 * The account plugin's lesson: never let a do_action() print straight into a grid, because you do
 * not control how many elements come out of it.
 */
.avh-pd-active div.product > *:not(.woocommerce-product-gallery):not(.summary) {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.avh-pd-active div.product > .woocommerce-product-gallery {
		position: sticky;
		top: var(--avh-pd-sticky-top, 6rem);
	}
}

/* --- Gallery -------------------------------------------------------------------------------- */

.avh-pd-gallery .woocommerce-product-gallery {
	position: relative;
}

.avh-pd-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	border: 1px solid var(--avh-pd-hair);
	border-radius: var(--avh-pd-radius);
	background: var(--avh-pd-nude);
	box-shadow: var(--avh-pd-shadow);
	overflow: hidden;
}

/*
 * 4:5, the storefront's portrait crop. object-fit rather than a fixed height, so a landscape
 * photograph is cropped to the frame instead of letterboxed inside it with two bands of nude.
 */
.avh-pd-gallery .woocommerce-product-gallery__image img,
.avh-pd-gallery .woocommerce-product-gallery__wrapper > a img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* The thumbnail rail. */
.avh-pd-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.avh-pd-gallery .flex-control-thumbs li {
	width: auto;
	margin: 0;
	list-style: none;
}

.avh-pd-gallery .flex-control-thumbs img {
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--avh-pd-line);
	border-radius: 10px;
	object-fit: cover;
	opacity: 1;
	cursor: pointer;
	transition: border-color 200ms var(--avh-pd-ease);
}

.avh-pd-gallery .flex-control-thumbs img:hover {
	border-color: color-mix(in srgb, var(--avh-pd-ink) 32%, transparent);
}

.avh-pd-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--avh-pd-gold);
	box-shadow: 0 0 0 1px var(--avh-pd-gold);
}

/* Woo's zoom hint sits over the corner of the frame; it belongs inside the rounded box. */
.avh-pd-gallery .woocommerce-product-gallery__trigger {
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

/* --- The info column ------------------------------------------------------------------------ */

.avh-pd-active .summary {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.avh-pd__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--avh-pd-bronze);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.avh-pd__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.avh-pd__eyebrow a:hover {
	color: var(--avh-pd-gold);
}

/*
 * MODERATE, not enormous. The storefront deliberately dropped this from 4xl/5xl: a product name is
 * read once and then lived beside a price, and a huge serif title pushes the price and the buy
 * button below the fold on a phone.
 */
.avh-pd-active .summary .product_title,
.avh-pd-active .summary h1.entry-title {
	margin: 0;
	padding: 0;
	color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-heading);
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.95rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.avh-pd__subtitle {
	margin: 0.6rem 0 0;
	color: color-mix(in srgb, var(--avh-pd-ink) 55%, transparent);
	font-size: 0.9rem;
	line-height: 1.55;
}

.avh-pd__subtitle p {
	margin: 0 0 0.5rem;
}

.avh-pd__subtitle p:last-child {
	margin-bottom: 0;
}

.avh-pd-active .summary .price {
	margin: 1rem 0 0;
	color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-body);
	font-size: 1.35rem;
	font-weight: 500;
	/* Tabular, so a price does not jitter sideways as a variation is chosen. */
	font-variant-numeric: tabular-nums;
}

.avh-pd-active .summary .price del {
	margin-right: 0.4rem;
	color: var(--avh-pd-faint);
	font-size: 0.85em;
	font-weight: 400;
}

.avh-pd-active .summary .price ins {
	text-decoration: none;
}

.avh-pd-active .summary .stock {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
}

.avh-pd-active .summary .stock.in-stock {
	color: var(--avh-success, #2f7a4f);
}

.avh-pd-active .summary .stock.out-of-stock {
	color: var(--avh-danger, #a8392f);
}

.avh-pd__anchor {
	display: block;
	/* Offset so the sticky header does not cover the button we just scrolled to. */
	scroll-margin-top: 7rem;
}

/* --- Variation swatches --------------------------------------------------------------------- */

.avh-pd-active .variations {
	width: 100%;
	margin: 1.1rem 0 0;
	border: 0;
}

.avh-pd-active .variations tr,
.avh-pd-active .variations th,
.avh-pd-active .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.avh-pd-active .variations .label {
	margin-bottom: 0.45rem;
}

.avh-pd-active .variations .label label {
	color: var(--avh-pd-ink);
	font-size: 0.85rem;
	font-weight: 500;
}

.avh-pd-active .variations .value {
	margin-bottom: 1.1rem;
}

/*
 * The select is hidden ONLY once the script has swapped in the swatches, never in this stylesheet.
 * Hidden here it would vanish for everybody whose script was blocked or still downloading - and
 * the swatches do nothing without it, so those visitors would have no way to choose a variation
 * at all. Same rule as the checkout plugin's update button.
 */
.avh-pd-active .variations .is-avh-swapped select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.avh-pd__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
 * Buttons state their own background, border and colour. Blocksy styles every <button> as a filled
 * gold pill - which is how the navbar's search submit became a featureless gold circle with a gold
 * icon drawn on it.
 */
.avh-pd__swatch {
	position: relative;
	min-width: 2.75rem;
	margin: 0;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--avh-pd-line);
	border-radius: 10px;
	background: var(--avh-pd-pure);
	color: color-mix(in srgb, var(--avh-pd-ink) 75%, transparent);
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 200ms var(--avh-pd-ease);
}

.avh-pd__swatch:hover {
	border-color: color-mix(in srgb, var(--avh-pd-ink) 40%, transparent);
}

.avh-pd__swatch.is-selected {
	border-color: var(--avh-pd-ink);
	background: var(--avh-pd-ink);
	color: var(--avh-pd-pure);
}

/* Shade circles. */
.avh-pd__swatch.is-shade {
	width: 2.5rem;
	min-width: 0;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--avh-pd-ink) 15%, transparent);
}

.avh-pd__swatch.is-shade:hover {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--avh-pd-ink) 40%, transparent);
}

.avh-pd__swatch.is-shade.is-selected {
	box-shadow: 0 0 0 2px var(--avh-pd-ink), 0 0 0 4px var(--avh-pd-cream);
}

.avh-pd__swatch-tick {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.6rem;
	height: 0.35rem;
	border-left: 2px solid var(--avh-pd-pure);
	border-bottom: 2px solid var(--avh-pd-pure);
	opacity: 0;
	transform: rotate(-45deg) translateY(-15%);
}

.avh-pd__swatch.is-selected .avh-pd__swatch-tick {
	opacity: 1;
}

/* A tick on a pale shade has to be dark or it is invisible - the hair table says which are light. */
.avh-pd__swatch.is-light .avh-pd__swatch-tick {
	border-color: color-mix(in srgb, var(--avh-pd-ink) 70%, transparent);
}

/* Sold out, as Woo's own engine reports it. */
.avh-pd__swatch[disabled],
.avh-pd__swatch.is-unavailable {
	color: var(--avh-pd-faint);
	cursor: not-allowed;
}

.avh-pd__swatch.is-unavailable:not(.is-shade) .avh-pd__swatch-label {
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--avh-pd-ink) 40%, transparent);
}

.avh-pd__swatch-out {
	display: none;
}

.avh-pd__swatch.is-shade.is-unavailable .avh-pd__swatch-out {
	position: absolute;
	inset: 0;
	display: block;
	margin: auto;
	width: 2.9rem;
	height: 1px;
	background: color-mix(in srgb, var(--avh-pd-ink) 60%, transparent);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	transform: rotate(45deg);
}

/* A single-valued attribute is a spec line, not a control - there is nothing to choose. */
.avh-pd__spec {
	margin: 0.15rem 0 0;
	color: color-mix(in srgb, var(--avh-pd-ink) 55%, transparent);
	font-size: 0.85rem;
}

.avh-pd__spec-value {
	color: color-mix(in srgb, var(--avh-pd-ink) 80%, transparent);
}

/* --- Buy row -------------------------------------------------------------------------------- */

.avh-pd-active .summary form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 1.1rem 0 0;
}

.avh-pd-active .summary form.variations_form {
	display: block;
}

.avh-pd-active .summary .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1rem;
}

/*
 * THE QUANTITY STEPPER. Reported twice, and the second report is the instructive one.
 *
 * First live render: the box read "-1", the theme's minus button drawn on top of the number. Themes
 * that add their own plus and minus position them ABSOLUTELY inside .quantity, so an input sized and
 * centred as though it were alone has its value hidden underneath one of them.
 *
 * My first fix pulled them into normal flow - and produced "+ - [1]", because flow order is DOM
 * order and I had not said what the order should be. Fixing the position of something without
 * fixing its ORDER just changes which way it is wrong.
 *
 * So this stops treating them as three separate controls. The .quantity box owns the frame - one
 * border, one radius, one background, and ONE HEIGHT - the children own none of it, and each child
 * is given an explicit `order`, which makes the theme's DOM order irrelevant.
 */
.avh-pd-active .summary .quantity {
	display: inline-flex;
	/*
	 * ONE DEFINITE HEIGHT, and no reliance on `stretch`.
	 *
	 * Fourth report on this control, and this is what was left: everything sat at the top of the
	 * pill with the dividers running only part of its height. `align-items: stretch` does nothing to
	 * a flex item that already has a definite height - and the theme gives its buttons one - so
	 * instead of stretching, they were simply parked at the start of the cross axis. Stretch cannot
	 * be argued with; it can only be made unnecessary.
	 *
	 * So the frame states its height, every child is told to fill it, and nothing depends on which
	 * element happens to be tallest.
	 */
	height: var(--avh-pd-qty-h);
	align-items: center;
	box-sizing: border-box;
	/*
	 * THE BOX IS RESET, not just decorated. Third report on this control, and this is what the
	 * frame-round-empty-space came from: the theme sizes .quantity itself - its own padding and its
	 * own width - so drawing a border and a radius on it without clearing those draws the frame
	 * round a box considerably larger than the three controls inside it.
	 */
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--avh-pd-line);
	border-radius: 999px;
	background: var(--avh-pd-pure);
	line-height: 1;
}

/*
 * ANY WRAPPER THE THEME NESTS INSIDE .quantity IS DISSOLVED.
 *
 * This is the other half of the same fault. Blocksy does not put the buttons and the input directly
 * in .quantity - it wraps them - so `.quantity > *` reached only that wrapper. The frame was drawn
 * on the outside, the wrapper did not fill it, and the buttons kept the theme's own background
 * because the reset never got down to them.
 *
 * `display: contents` removes the wrapper from the box tree so its children become flex items of
 * the frame itself, which is what every rule below is written against. It is safe here precisely
 * because the wrapper carries no border, background or padding of its own once reset - dissolving
 * an element that did would throw its decoration away.
 */
/*
 * The fallback FIRST, then the dissolve. Two rules of equal specificity, so the later wins where it
 * is understood - and an engine that does not know `display: contents` drops that one declaration
 * and keeps this, laying the wrapper's children out in a row that fills the frame. Which is the
 * whole point: it degrades to nearly right rather than back to a frame round empty space.
 */
.avh-pd-active .summary .quantity > div,
.avh-pd-active .summary .quantity > span[class*="quantity"],
.avh-pd-active .summary .quantity > span[class*="qty"],
.avh-pd-active .summary .quantity > span[class*="arrows"] {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	/*
	 * The wrapper has to fill the frame too on this path, or its children's `height: 100%` resolves
	 * against a content-height box and the dividers come up short again - the same symptom, one
	 * level down.
	 */
	height: 100%;
}

.avh-pd-active .summary .quantity > div,
.avh-pd-active .summary .quantity > span[class*="quantity"],
.avh-pd-active .summary .quantity > span[class*="qty"],
.avh-pd-active .summary .quantity > span[class*="arrows"] {
	display: contents;
}

/*
 * `position: static` and not relative, deliberately: an absolutely positioned child is out of flow
 * entirely, so `order` would not apply to it and the overlap would come back.
 */
.avh-pd-active .summary .quantity > *,
.avh-pd-active .summary .quantity > div > * {
	position: static;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/*
 * Written at DOUBLED class specificity rather than with !important.
 *
 * A theme's own height on these is exactly what broke the alignment, and its selector is likely to
 * be as specific as ours - `.woocommerce div.product form.cart .quantity .minus` is not unusual.
 * Doubling the body class outranks that without taking the property away from a site that wants to
 * set its own, which is the same trade the product card made for its widget layout.
 */
.avh-pd-active.avh-pd-active .summary .quantity button,
.avh-pd-active.avh-pd-active .summary .quantity a.plus,
.avh-pd-active.avh-pd-active .summary .quantity a.minus,
.avh-pd-active.avh-pd-active .summary .quantity .plus,
.avh-pd-active.avh-pd-active .summary .quantity .minus,
.avh-pd-active.avh-pd-active .summary .quantity .ct-increase,
.avh-pd-active.avh-pd-active .summary .quantity .ct-decrease,
.avh-pd-active.avh-pd-active .summary .quantity input.qty {
	box-sizing: border-box;
	height: 100%;
	min-height: 0;
	max-height: none;
	align-self: stretch;
}

/*
 * The screen-reader label is Woo's, and it must not take part in the row.
 *
 * Pinned rather than trusted to the theme's .screen-reader-text: a theme that has redefined that
 * class - or not defined it at all inside a flex parent - turns "Quantity" into a visible word
 * sitting inside the frame. The checkout plugin pins it for the same reason.
 */
.avh-pd-active .summary .quantity > label,
.avh-pd-active .summary .quantity label.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.avh-pd-active .summary .quantity button,
.avh-pd-active .summary .quantity a.plus,
.avh-pd-active .summary .quantity a.minus,
.avh-pd-active .summary .quantity .plus,
.avh-pd-active .summary .quantity .minus,
.avh-pd-active .summary .quantity .ct-increase,
.avh-pd-active .summary .quantity .ct-decrease,
.avh-pd-active .summary .quantity input[type="button"] {
	display: inline-flex;
	width: 2.4rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	/*
	 * States its own BACKGROUND as well as its colour, on the element itself.
	 *
	 * Relying on the `> *` reset above was the bug: with a wrapper in between it never reached the
	 * buttons, so they kept Blocksy's filled gold pill - which is also how the navbar's submit icon
	 * ended up gold-on-gold and invisible. A control in this suite never inherits its appearance.
	 */
	border: 0;
	background: transparent;
	box-shadow: none;
	color: color-mix(in srgb, var(--avh-pd-ink) 60%, transparent);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

/* Minus left, number middle, plus right - whatever order the theme wrote them in. */
.avh-pd-active .summary .quantity a.minus,
.avh-pd-active .summary .quantity .minus,
.avh-pd-active .summary .quantity .ct-decrease {
	order: 0;
	border-right: 1px solid var(--avh-pd-line);
}

.avh-pd-active .summary .quantity input.qty {
	order: 1;
}

.avh-pd-active .summary .quantity a.plus,
.avh-pd-active .summary .quantity .plus,
.avh-pd-active .summary .quantity .ct-increase {
	order: 2;
	border-left: 1px solid var(--avh-pd-line);
}

.avh-pd-active .summary .quantity button:hover,
.avh-pd-active .summary .quantity .plus:hover,
.avh-pd-active .summary .quantity .minus:hover,
.avh-pd-active .summary .quantity .ct-increase:hover,
.avh-pd-active .summary .quantity .ct-decrease:hover {
	background: color-mix(in srgb, var(--avh-pd-ink) 6%, transparent);
	color: var(--avh-pd-ink);
}

/*
 * The number states everything that makes a value visible. The checkout plugin learned this twice:
 * a theme restyling .qty for its own stepper can zero any one of these, and the failure is silent -
 * the field is present, focusable and submitting the right number while showing nothing.
 */
.avh-pd-active .summary .quantity input.qty {
	width: 2.75rem;
	min-width: 2.25rem;
	flex: 0 1 auto;
	/*
	 * NO VERTICAL PADDING. The height is the frame's now, so padding here is added to a box that is
	 * already 100% tall and pushes the digits below the centre line - which is the version of this
	 * bug that looks like a rounding error and is not.
	 */
	padding: 0 0.25rem;
	line-height: normal;
	color: var(--avh-pd-ink);
	-webkit-text-fill-color: var(--avh-pd-ink);
	font-family: inherit;
	font-size: 0.9rem;
	text-align: center;
	appearance: textfield;
	opacity: 1;
	visibility: visible;
}

.avh-pd-active .summary .quantity input.qty::-webkit-outer-spin-button,
.avh-pd-active .summary .quantity input.qty::-webkit-inner-spin-button {
	/* The theme has given us buttons; the browser's own spinners beside them are a third control
	   for the same number, and on a 2.75rem field they crowd out the digits. */
	appearance: none;
	margin: 0;
}

.avh-pd-active .summary .quantity input.qty:focus {
	outline: none;
}

.avh-pd-active .summary .quantity:focus-within {
	border-color: var(--avh-pd-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--avh-pd-gold) 20%, transparent);
}

/* A read-only quantity (min === max) is a number, not a control - and never an empty box. */
.avh-pd-active .summary .quantity input.qty[readonly] {
	background: transparent;
}

.avh-pd-active .summary button.single_add_to_cart_button {
	flex: 1 1 12rem;
	max-width: 20rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid var(--avh-pd-ink);
	border-radius: 999px;
	background: var(--avh-pd-ink);
	color: var(--avh-pd-pure);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 220ms var(--avh-pd-ease);
}

.avh-pd-active .summary button.single_add_to_cart_button:hover {
	background: color-mix(in srgb, var(--avh-pd-ink) 85%, var(--avh-pd-gold));
}

.avh-pd-active .summary button.single_add_to_cart_button.disabled,
.avh-pd-active .summary button.single_add_to_cart_button:disabled {
	border-color: var(--avh-pd-line);
	background: color-mix(in srgb, var(--avh-pd-ink) 25%, transparent);
	cursor: not-allowed;
}

.avh-pd__wishlist {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	padding: 0.8rem 1.15rem;
	border: 1px solid var(--avh-pd-line);
	border-radius: 999px;
	background: var(--avh-pd-pure);
	color: color-mix(in srgb, var(--avh-pd-ink) 75%, transparent);
	font-family: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 200ms var(--avh-pd-ease);
}

.avh-pd__wishlist:hover {
	border-color: var(--avh-pd-gold);
	color: var(--avh-pd-gold);
}

.avh-pd__wishlist[aria-pressed="true"] {
	border-color: var(--avh-pd-gold);
	color: var(--avh-pd-gold);
}

.avh-pd__wishlist[aria-pressed="true"] svg {
	fill: var(--avh-pd-gold);
}

.avh-pd__wishlist-note {
	flex: 1 1 100%;
	margin: 0;
	color: var(--avh-pd-muted);
	font-size: 0.8rem;
}

/* --- Availability ----------------------------------------------------------------------------- */

.avh-pd__availability {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

/* The suite's list-marker reset, listed rather than blanket - see the note by .avh-pd__highlights. */
.avh-pd__availability-item::before,
.avh-pd__availability-item::after {
	content: none;
}

.avh-pd__availability-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--avh-pd-muted);
	font-size: 0.8rem;
	list-style: none;
}

.avh-pd__availability-item svg {
	flex: 0 0 auto;
}

.avh-pd__availability-item.is-available svg {
	color: var(--avh-pd-gold);
}

.avh-pd__availability-item.is-available .avh-pd__availability-state {
	color: color-mix(in srgb, var(--avh-pd-ink) 72%, transparent);
}

.avh-pd__availability-item.is-unavailable svg {
	color: var(--avh-pd-muted);
	opacity: 0.55;
}

.avh-pd__availability-item.is-unavailable .avh-pd__availability-state {
	color: var(--avh-pd-muted);
	text-decoration: line-through;
}

/* --- Highlights ----------------------------------------------------------------------------- */

.avh-pd__highlights {
	display: grid;
	gap: 0.6rem 1.25rem;
	margin: 1.25rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--avh-pd-line);
	grid-template-columns: 1fr;
	list-style: none;
}

@media (min-width: 480px) {
	.avh-pd__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.avh-pd__highlights li {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	margin: 0;
	color: color-mix(in srgb, var(--avh-pd-ink) 72%, transparent);
	font-size: 0.85rem;
	line-height: 1.35;
	list-style: none;
}

/* The suite's list-marker reset, listed rather than blanket: a bare li::before{content:none} would
   also delete decoration we draw ourselves elsewhere. */
.avh-pd__highlights li::before,
.avh-pd__highlights li::after {
	content: none;
}

.avh-pd__highlights svg {
	flex: 0 0 auto;
	color: var(--avh-pd-gold);
}

/* --- Accordions ----------------------------------------------------------------------------- */

.avh-pd__accordions {
	margin: 1.35rem 0 0;
	border-top: 1px solid var(--avh-pd-line);
	border-bottom: 1px solid var(--avh-pd-line);
}

.avh-pd__accordion + .avh-pd__accordion {
	border-top: 1px solid var(--avh-pd-line);
}

.avh-pd__accordion > summary {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 0;
	color: color-mix(in srgb, var(--avh-pd-ink) 88%, transparent);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	cursor: pointer;
	list-style: none;
}

.avh-pd__accordion > summary::-webkit-details-marker,
.avh-pd__accordion > summary::marker {
	display: none;
	content: "";
}

.avh-pd__accordion-mark {
	position: relative;
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	transition: transform 250ms var(--avh-pd-ease);
}

.avh-pd__accordion-mark::before,
.avh-pd__accordion-mark::after {
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--avh-pd-gold);
	content: "";
}

.avh-pd__accordion-mark::before { width: 100%; height: 1.5px; }
.avh-pd__accordion-mark::after { width: 1.5px; height: 100%; }

.avh-pd__accordion[open] .avh-pd__accordion-mark {
	transform: rotate(45deg);
}

.avh-pd__accordion-body {
	padding: 0 0 1rem;
	max-width: 42rem;
	color: color-mix(in srgb, var(--avh-pd-ink) 70%, transparent);
	font-size: 0.88rem;
	line-height: 1.65;
}

.avh-pd__accordion-body > :first-child { margin-top: 0; }
.avh-pd__accordion-body > :last-child { margin-bottom: 0; }
.avh-pd__accordion-body p { margin: 0 0 0.75rem; }
.avh-pd__accordion-body ul { margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: disc; }
.avh-pd__accordion-body li { margin-bottom: 0.25rem; }

/* Woo's additional-information table lives in one of these panels. */
.avh-pd__accordion-body table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
}

.avh-pd__accordion-body table.shop_attributes th,
.avh-pd__accordion-body table.shop_attributes td {
	padding: 0.4rem 0;
	border: 0;
	border-bottom: 1px solid var(--avh-pd-hair);
	background: none;
	font-size: 0.85rem;
	text-align: left;
}

.avh-pd__accordion-body table.shop_attributes th {
	width: 35%;
	color: var(--avh-pd-muted);
	font-weight: 400;
}

.avh-pd__inline-link {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	color: var(--avh-pd-bronze);
	font-weight: 500;
	text-decoration: none;
}

.avh-pd__inline-link:hover {
	color: var(--avh-pd-gold);
}

/* --- The standards -------------------------------------------------------------------------- */

.avh-pd__standards {
	margin: 2.5rem 0 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--avh-pd-hair);
	font-family: var(--avh-pd-font-body);
}

.avh-pd__standards-head {
	max-width: 40rem;
}

.avh-pd__standards h2 {
	margin: 0.75rem 0 0;
	color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-heading);
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.15rem);
	font-weight: 400;
	line-height: 1.15;
}

.avh-pd__standards-lede {
	margin: 0.85rem 0 0;
	color: var(--avh-pd-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.avh-pd__standards-grid {
	display: grid;
	gap: 1.1rem;
	margin-top: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.avh-pd__standards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.avh-pd__standards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.avh-pd__standard {
	padding: 1.35rem;
	border: 1px solid var(--avh-pd-hair);
	border-radius: var(--avh-pd-radius);
	background: var(--avh-pd-cream);
	box-shadow: var(--avh-pd-shadow);
}

.avh-pd__standard-icon {
	display: flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--avh-pd-gold) 12%, transparent);
	color: var(--avh-pd-gold);
}

.avh-pd__standard h3 {
	margin: 1rem 0 0;
	color: color-mix(in srgb, var(--avh-pd-ink) 88%, transparent);
	font-family: var(--avh-pd-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.avh-pd__standard p {
	margin: 0.5rem 0 0;
	color: var(--avh-pd-muted);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* --- Reviews -------------------------------------------------------------------------------- */

.avh-pd__reviews {
	margin: 2.25rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--avh-pd-hair);
	font-family: var(--avh-pd-font-body);
}

.avh-pd__reviews h2,
.avh-pd__reviews h3 {
	color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-heading);
	font-weight: 400;
}

/* --- The sticky buy bar --------------------------------------------------------------------- */

.avh-pd__sticky {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 30;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.85rem 1rem;
	/* env() so a bottom-pinned bar clears an iPhone home indicator. */
	padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--avh-pd-line);
	background: color-mix(in srgb, var(--avh-pd-pure) 94%, transparent);
	backdrop-filter: blur(8px);
	font-family: var(--avh-pd-font-body);
}

@media (min-width: 640px) {
	/* Desktop has the real button in view; a fixed bar there covers content for no gain. */
	.avh-pd__sticky { display: none; }
}

.avh-pd__sticky-price {
	color: var(--avh-pd-ink);
	font-size: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.avh-pd__sticky-price del { display: none; }
.avh-pd__sticky-price ins { text-decoration: none; }

.avh-pd__sticky-button {
	display: inline-flex;
	flex: 1 1 auto;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.25rem;
	border-radius: 999px;
	background: var(--avh-pd-ink);
	color: var(--avh-pd-pure);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
}

/* Room for the bar, so it never covers the last thing on the page. */
@media (max-width: 639px) {
	.avh-pd-active.avh-pd-has-sticky {
		padding-bottom: 5.5rem;
	}
}

/* --- Keeping the theme out of it ------------------------------------------------------------ */

/*
 * Only under .avh-pd-reset, so a shop can switch it off. These are the theme's own elements around
 * our markup - there is no template to swap for them, so CSS is the only lever.
 */
.avh-pd-reset .product .entry-title:not(.product_title),
.avh-pd-reset .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__trigger {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.avh-pd__swatch,
	.avh-pd__wishlist,
	.avh-pd__accordion-mark,
	.avh-pd-gallery .flex-control-thumbs img,
	.avh-pd-active .summary button.single_add_to_cart_button {
		transition: none;
	}
}


/* --- Reclaiming the width from the sidebar -------------------------------------------------- */

/*
 * The sidebar is unhooked in PHP, but the theme's content column is still sized as though it were
 * there - so the product sat in two thirds of the page with a third of empty space beside it.
 * These are the theme's own wrappers; there is no template to swap for them.
 */
.avh-pd-full .content-area,
.avh-pd-full .ct-container,
.avh-pd-full .site-main,
.avh-pd-full #primary,
.avh-pd-full .woocommerce-page .content-area {
	width: 100%;
	max-width: none;
	float: none;
	grid-template-columns: minmax(0, 1fr);
}

.avh-pd-full #secondary,
.avh-pd-full .sidebar-primary,
.avh-pd-full .widget-area,
.avh-pd-full .ct-sidebar {
	display: none;
}

/* --- The review form ------------------------------------------------------------------------ */

/*
 * Reported on the first live render as an unstyled block: a bold "Reviews", a bare textarea and the
 * theme's gold pill submit. Woo owns this markup (comments_template()) and there is no template of
 * ours to put it in, so it is styled where it stands.
 *
 * EVERY HEADING STATES ITS OWN COLOUR. An inherited one loses to any theme rule matching the
 * element itself - the account plugin's black-on-black lesson.
 */
.avh-pd__reviews #reviews h2,
.avh-pd__reviews .woocommerce-Reviews-title,
.avh-pd__reviews #reply-title {
	margin: 0 0 0.9rem;
	color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-heading);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
}

.avh-pd__reviews #reply-title {
	margin-top: 1.4rem;
	font-size: 1.05rem;
}

.avh-pd__reviews .woocommerce-noreviews,
.avh-pd__reviews .comment-notes {
	margin: 0 0 0.9rem;
	color: var(--avh-pd-muted);
	font-size: 0.9rem;
}

.avh-pd__reviews .commentlist {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.avh-pd__reviews .commentlist li {
	margin: 0 0 1rem;
	padding: 1.25rem;
	border: 1px solid var(--avh-pd-hair);
	border-radius: var(--avh-pd-radius);
	background: var(--avh-pd-cream);
	list-style: none;
}

.avh-pd__reviews .comment-form {
	max-width: 34rem;
}

.avh-pd__reviews .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: color-mix(in srgb, var(--avh-pd-ink) 75%, transparent);
	font-size: 0.8rem;
	font-weight: 500;
}

.avh-pd__reviews .comment-form p {
	margin: 0 0 0.85rem;
}

/*
 * The textarea and the text inputs assert background AND colour at doubled specificity. The
 * footer's newsletter field is the reason: a theme setting its own background on inputs at a higher
 * specificity turns typed text invisible, and nothing on screen suggests why.
 */
.avh-pd__reviews .comment-form textarea,
.avh-pd__reviews .comment-form input[type="text"],
.avh-pd__reviews .comment-form input[type="email"],
.avh-pd__reviews .comment-form .comment-form-comment textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--avh-pd-line);
	border-radius: 10px;
	background: var(--avh-pd-pure);
	color: var(--avh-pd-ink);
	-webkit-text-fill-color: var(--avh-pd-ink);
	font-family: var(--avh-pd-font-body);
	font-size: 0.9rem;
	line-height: 1.55;
}

.avh-pd__reviews .comment-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.avh-pd__reviews .comment-form textarea:focus,
.avh-pd__reviews .comment-form input:focus {
	border-color: var(--avh-pd-gold);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--avh-pd-gold) 22%, transparent);
}

/* The star rating: gold, and larger than the theme's default 1em. */
.avh-pd__reviews .stars a,
.avh-pd__reviews p.stars a {
	color: var(--avh-pd-gold);
	font-size: 1.05rem;
	text-decoration: none;
}

.avh-pd__reviews .comment-form-rating label {
	display: inline-block;
	margin-right: 0.6rem;
}

/* The submit button matches Add to cart rather than the theme's own pill. */
.avh-pd__reviews .comment-form .submit,
.avh-pd__reviews #respond input#submit {
	padding: 0.75rem 1.6rem;
	border: 1px solid var(--avh-pd-ink);
	border-radius: 999px;
	background: var(--avh-pd-ink);
	color: var(--avh-pd-pure);
	font-family: var(--avh-pd-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
}

.avh-pd__reviews .comment-form .submit:hover,
.avh-pd__reviews #respond input#submit:hover {
	background: color-mix(in srgb, var(--avh-pd-ink) 85%, var(--avh-pd-gold));
}

/* --- Whatever breadcrumb the theme prints --------------------------------------------------- */

/*
 * The crumb ARRAY is filtered in PHP, which reshapes WooCommerce's breadcrumb. A theme that prints
 * its OWN breadcrumb - Blocksy does - is a different element that filter never reaches, so it keeps
 * saying "Home". These selectors at least make it match the design; the settings screen says
 * plainly that the Shop swap only applies to WooCommerce's own.
 */
.avh-pd-active .ct-breadcrumbs,
.avh-pd-active .breadcrumbs,
.avh-pd-active nav[aria-label="Breadcrumb"] {
	color: var(--avh-pd-faint);
	font-family: var(--avh-pd-font-body);
	font-size: 0.75rem;
}

.avh-pd-active .ct-breadcrumbs a,
.avh-pd-active .breadcrumbs a,
.avh-pd-active nav[aria-label="Breadcrumb"] a {
	color: inherit;
	text-decoration: none;
}

.avh-pd-active .ct-breadcrumbs a:hover,
.avh-pd-active .breadcrumbs a:hover,
.avh-pd-active nav[aria-label="Breadcrumb"] a:hover {
	color: var(--avh-pd-gold);
}

/* --- Closing the gaps that are not ours ----------------------------------------------------- */

/*
 * Reported as "reduce all the white spaces". Tightening our own margins only got part of the way,
 * because the largest gaps on the page belonged to markup we do not own: WooCommerce's review
 * wrappers each carry their own generous margin, and they nest - #reviews inside #comments inside
 * #respond inside #review_form_wrapper - so four separate margins stack into one large void
 * between "There are no reviews yet" and "Be the first to review".
 *
 * Collapsed here rather than in our own rules, because our rules cannot reach inside them.
 */
/*
 * SCOPED INSIDE OUR OWN WRAPPER, and that is not tidiness - it is a bug I wrote and caught.
 *
 * An id selector outranks a class, so a bare `.avh-pd-active #reviews { margin: 0 }` also matched
 * the section this plugin renders (Woo's template emits that id inside it) and zeroed the very
 * spacing the rule above sets. Written as a descendant of .avh-pd__reviews it can only reach
 * WooCommerce's wrappers, which is all it was ever meant to do.
 */
.avh-pd__reviews #reviews,
.avh-pd__reviews #comments,
.avh-pd__reviews #respond,
.avh-pd__reviews #review_form,
.avh-pd__reviews #review_form_wrapper,
.avh-pd__reviews .woocommerce-Reviews {
	margin: 0;
	padding: 0;
}

.avh-pd__reviews .form-submit,
.avh-pd__reviews .comment-form .form-submit {
	margin: 0.35rem 0 0;
	padding: 0;
}

/*
 * WooCommerce gives div.product a bottom margin sized for the tab strip that used to follow it.
 * The tabs are accordions now and live inside the info column, so that margin is a gap under
 * nothing.
 */
.avh-pd-active div.product {
	margin-bottom: 0;
}

/* SKU and category. Real information, so it stays - but it is a footnote, not a section. */
.avh-pd-active .product_meta {
	margin: 1.1rem 0 0;
	padding: 0;
	font-size: 0.78rem;
	line-height: 1.7;
}

.avh-pd-active .product_meta > span {
	display: block;
	color: var(--avh-pd-muted);
}

.avh-pd-active .product_meta a {
	color: inherit;
	text-decoration: none;
}

.avh-pd-active .product_meta a:hover {
	color: var(--avh-pd-gold);
}

/*
 * Woo's own notices sit above the summary and reserve space even when empty on some themes.
 * Nothing is hidden - an empty element simply stops holding a gap open.
 */
.avh-pd-active .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * The theme's own top padding is DELIBERATELY LEFT ALONE.
 *
 * I wrote a rule zeroing it, with a comment saying it should be reduced rather than removed - the
 * comment was right and the rule contradicted it. The page needs to breathe away from a sticky
 * header, the gap above the breadcrumb was never one of the large ones, and every big void on this
 * page was between sections further down. Removing space that was not the problem is how a tidy-up
 * turns into a cramped page.
 */

.avh-pd-active .summary > :last-child {
	margin-bottom: 0;
}