/* WooCommerce, dressed to match the rest of the site.
   Loaded only on shop, product, cart, checkout and account pages.

   This file was written against the v2 palette and kept referencing three tokens that v3
   deleted — gold, ivory and charcoal. A var() pointing at a property that does not exist
   resolves to nothing, so those rules had quietly stopped applying: the shop's prices had
   no colour, the button labels no colour, the page titles no colour. They now use the v3
   tokens. If you add a rule here, check the slug exists in theme.json first. */

.woocommerce-page main,
.woocommerce main { padding-block: var(--wp--preset--spacing--40); }

/* ---------- breadcrumbs ---------- */
.hos-crumbs {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	margin-bottom: var(--wp--preset--spacing--30);
}
.hos-crumbs a { color: var(--wp--preset--color--smoke); }
.hos-crumbs a:hover { color: var(--wp--preset--color--pink-deep); }

/* ---------- page titles ---------- */
.woocommerce-products-header__title,
.product_title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.08;
	font-size: var(--wp--preset--font-size--heading-lg);
	color: var(--wp--preset--color--graphite);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------- catalogue grid ---------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.2rem, 2.4vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair);
	padding: clamp(1.8rem, 3vw, 2.4rem);
	display: flex;
	flex-direction: column;
	gap: .8rem;
	position: relative;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-7px);
	box-shadow: 0 26px 54px rgba(20, 16, 14, .1);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 300;
	line-height: 1.22;
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--graphite);
}
.woocommerce ul.products li.product img {
	margin-bottom: .6rem;
	border-radius: 4px;
}
/*
 * No photograph, no grey box.
 *
 * The clinic has brand and portrait shots and no course photography, and may never have
 * any. WooCommerce fills the gap with a placeholder graphic, which reads as a missing
 * image rather than a card that was never meant to have one. The treatment cards solved
 * this by being text led; the course cards do the same.
 */
.woocommerce ul.products li.product img.woocommerce-placeholder { display: none; }

/* WooCommerce puts the image, title and price inside one anchor, so the price is a child
   of that link rather than of the card. Left alone, `margin-top: auto` on the price has
   nothing to push against and a two line title drops one card's price and button lower
   than its neighbours'. Making the link a growing flex column gives the auto margin its
   free space back, and every card's price lands on the same line. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	flex: 1 1 auto;
}
.woocommerce ul.products li.product .button {
	margin-top: .9rem;
	margin-bottom: 0;
	align-self: flex-start;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.7rem;
	/* A course price is read, not admired, so it takes the readable rose. */
	color: var(--wp--preset--color--rose-ink);
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--hos-hair);
	margin-top: auto;
}
/* A struck-through "was" price should read as context, not as the headline. */
.woocommerce .price del {
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--body);
	font-size: .82rem;
	margin-right: .6em;
	opacity: 1;
}
.woocommerce .price ins {
	text-decoration: none;
	background: none;
	color: var(--wp--preset--color--rose-ink);
}

/* ---------- sale badge ---------- */
.woocommerce span.onsale {
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--blush);
	font-family: var(--wp--preset--font-family--body);
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 400;
	border-radius: 999px;
	padding: .55em 1.3em;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
	top: -11px;
	right: 1.4rem;
	left: auto;
	margin: 0;
}

/* ---------- buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 1.15em 2.4em;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background .45s ease, color .45s ease, transform .45s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	/* Same inversion as every other button on the site: black rests, pink lifts. */
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--noir);
	transform: translateY(-2px);
}

/* ---------- single product ---------- */

/* A course with no photograph drops the gallery entirely (see inc/woocommerce.php) and the
   summary takes the full width, rather than leaving half the page as an empty grey square.

   Two things had to be right before this rule took effect, and both were quietly wrong.

   Both body classes sit on the same element, so they are written compound. Separating them
   with a space asks for a .woocommerce inside a .hos-product-no-image, which does not
   exist, and the rule never applies while still reading correctly in the file.

   And #content is in here because the theme's own wrapper is <main id="content">, which
   turns on WooCommerce's `.woocommerce #content div.product div.summary`. That selector
   carries an id, so it outranks any number of classes. The giveaway was that margin and
   max-width came through — WooCommerce does not set those — while float and width did
   not. */
.hos-product-no-image.woocommerce #content div.product div.summary,
.hos-product-no-image.woocommerce-page #content div.product div.summary,
.hos-product-no-image.woocommerce div.product div.summary,
.hos-product-no-image.woocommerce-page div.product div.summary {
	width: 100%;
	float: none;
	margin: 0;
	max-width: 46rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.85;
	color: var(--wp--preset--color--smoke);
	margin-bottom: var(--wp--preset--spacing--20);
}
.woocommerce div.product form.cart { margin-block: var(--wp--preset--spacing--20); }
.woocommerce div.product form.cart .quantity { margin-right: 1rem; }
.woocommerce div.product .quantity input {
	border: 1px solid var(--hos-hair);
	border-radius: 999px;
	padding: .9em 1em;
	font-family: var(--wp--preset--font-family--body);
	background: transparent;
}
.hos-course-note {
	font-size: .82rem;
	line-height: 1.9;
	color: var(--wp--preset--color--mist);
	padding-left: 1rem;
	border-left: 1px solid var(--hos-hair);
	margin-top: var(--wp--preset--spacing--20);
	max-width: 34em;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: var(--wp--preset--spacing--20); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--hos-hair); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 1.6rem 0 0;
	/* WooCommerce ships these with margin: 0 -5px to make its bevelled tabs overlap. With
	   the bevels removed that margin just pulls the first tab five pixels off the left of
	   the container, and its first letter gets clipped. */
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
	padding: .8em 0;
	font-weight: 400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--graphite); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--wp--preset--font-size--heading-md); }

/* Related products heading */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-md);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ---------- notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--blush);
	border-top-color: var(--wp--preset--color--pink-deep);
	color: var(--wp--preset--color--graphite);
	border-radius: 4px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--rose-ink); }

/* ---------- cart and checkout ---------- */
.woocommerce table.shop_table {
	border-radius: 4px;
	border-color: var(--hos-hair);
}
.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--body);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wp--preset--color--smoke);
}
.woocommerce-checkout h3,
.woocommerce-cart h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--heading-md);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1px solid var(--hos-hair);
	border-radius: 4px;
	padding: .9em 1em;
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--white);
}
.woocommerce form .form-row label {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
	.woocommerce a.button:hover, .woocommerce button.button:hover { transform: none; }
}