/**
 * Gardenia Herbals — WooCommerce styles.
 *
 * Layered on top of WooCommerce's default stylesheet (woocommerce-general),
 * overriding only presentation. Stage 2 scope: buttons, sale badge, price
 * and the product loop grid used by the homepage and shop archives.
 * Shop, single product (stage 4) and cart (stage 5 phase 1) sections follow;
 * checkout and account layouts come in later stages.
 */

/* Buttons --------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--gh-color-primary);
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--gh-transition), color var(--gh-transition), border-color var(--gh-transition);
}

.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,
.woocommerce input.button.alt:hover {
	border-color: var(--gh-color-primary-dark);
	background: var(--gh-color-primary-dark);
	color: var(--gh-color-bg);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.alt.disabled {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
	opacity: 0.5;
}

.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Sale badge & price ---------------------------------------------------- */

.woocommerce span.onsale {
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--gh-color-primary);
	font-weight: 600;
}

.woocommerce .price del {
	color: var(--gh-color-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce .price ins {
	text-decoration: none;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--gh-color-primary);
}

/* Product loop grid ----------------------------------------------------- */

/* WooCommerce lays out loops with floats and clearfix pseudo-elements;
   replace with CSS grid and hide the pseudo-elements so they don't become
   empty grid cells. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
	margin: 0 0 2rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

@media (min-width: 768px) {
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: relative;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: var(--gh-color-text);
	text-decoration: none;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0 0 1rem;
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
	aspect-ratio: 1;
	object-fit: cover;
	box-shadow: none;
	transition: transform 400ms ease;
}

.woocommerce ul.products li.product a:hover img {
	transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	padding: 0;
	margin: 0 0 0.35rem;
	font-family: var(--gh-font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--gh-color-primary);
}

.woocommerce ul.products li.product .price {
	margin-bottom: 1rem;
	font-size: 1rem;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto;
	border-color: var(--gh-color-primary);
	background: transparent;
	color: var(--gh-color-primary);
	font-size: 0.875rem;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce ul.products li.product .button.loading {
	opacity: 0.6;
}

/* Homepage product cards (template-parts/woocommerce/product-card.php) ---

   Two columns up to 959px, four from 960px. Images sit in a fixed square
   and titles reserve two lines, so mixed image ratios and long names don't
   shift the grid. */

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.product-card {
	--gh-star: #d9971e; /* Decorative only; the rating is announced as text. */
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(0.5rem, 1.2vw, 0.75rem);
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
	transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
}

.product-card:hover {
	border-color: var(--gh-color-accent);
	box-shadow: var(--gh-shadow);
}

.product-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-surface);
	aspect-ratio: 1;
}

.product-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	/* Lets white-backed packshots sit on the soft background. */
	mix-blend-mode: multiply;
	transition: transform 400ms ease;
}

.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.product-card__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.25rem 0.65rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-primary-dark);
	color: var(--gh-color-bg);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	pointer-events: none;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 0.85rem 0.25rem 0.25rem;
}

.product-card__meta {
	overflow: hidden;
	margin: 0 0 0.25rem;
	color: var(--gh-color-muted);
	font-size: 0.75rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	min-height: calc(2 * 1.35em);
	margin: 0 0 0.5rem;
	font-family: var(--gh-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.product-card__title a {
	color: var(--gh-color-text);
	text-decoration: none;
}

.product-card__title a:hover {
	color: var(--gh-color-primary);
}

.product-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4rem;
	margin: 0 0 0.4rem;
	color: var(--gh-color-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.product-card__price del {
	color: var(--gh-color-muted);
	font-size: 0.875em;
	font-weight: 400;
}

.product-card__price ins {
	text-decoration: none;
}

.product-card__rating {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.5rem;
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
	line-height: 1;
}

.product-card__stars {
	position: relative;
	display: inline-block;
	font-size: 0.95rem;
	line-height: 1;
	white-space: nowrap;
}

.product-card__stars::before,
.product-card__stars::after {
	content: "\2605\2605\2605\2605\2605";
}

.product-card__stars::before {
	color: var(--gh-color-border);
}

.product-card__stars::after {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: var(--rating, 0%);
	color: var(--gh-star);
}

.product-card__actions {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

/* Add to cart is the only action; the Buy Now plugin's button is hidden. */
.product-card__actions .wsb-button {
	display: none !important;
}

.product-card__cart {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0 0 0 0.85rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--gh-transition), border-color var(--gh-transition), color var(--gh-transition);
}

.product-card__cart .icon {
	width: 18px;
	height: 18px;
}

.product-card__cart-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-right: 0.55rem;
	color: var(--gh-color-primary);
}

.product-card__cart-label {
	flex: 1;
	min-width: 0;
	padding-block: 0.5rem;
}

.product-card__cart-arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	width: 40px;
	border-left: 1px solid var(--gh-color-border);
	color: var(--gh-color-primary);
	transition: border-color var(--gh-transition);
}

.product-card__cart:hover,
.product-card__cart:focus-visible {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.product-card__cart:hover .product-card__cart-icon,
.product-card__cart:hover .product-card__cart-arrow,
.product-card__cart:focus-visible .product-card__cart-icon,
.product-card__cart:focus-visible .product-card__cart-arrow {
	border-color: rgb(255 255 255 / 0.3);
	color: currentColor;
}

.product-card__cart.loading {
	cursor: progress;
	opacity: 0.6;
}

.product-card__cart.added .product-card__cart-icon {
	color: inherit;
}

/* "View cart" link inserted by WooCommerce after an AJAX add. Pinned over
   the image corner (opposite the sale badge) so the row height never shifts. */
.product-card__actions .added_to_cart {
	position: absolute;
	top: clamp(1rem, 1.7vw, 1.35rem);
	right: clamp(1rem, 1.7vw, 1.35rem);
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.25rem 0.75rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm);
	color: var(--gh-color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.product-card__actions .added_to_cart:hover {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

/* Narrow phones: drop the arrow segment so the label has room. */
@media (max-width: 399px) {
	.product-card__cart {
		padding-right: 0.6rem;
		font-size: 0.8125rem;
	}

	.product-card__cart-icon {
		margin-right: 0.4rem;
	}

	.product-card__cart-arrow {
		display: none;
	}
}

.product-grid__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	border: 1px dashed var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-surface);
	color: var(--gh-color-muted);
	text-align: center;
}

.product-grid__empty .icon {
	width: 32px;
	height: 32px;
	color: var(--gh-color-primary);
}

.product-grid__empty p {
	margin: 0;
}

/* Shop promotional banners (template-parts/woocommerce/shop-promo.php) ---

   Three image cards at the top of the shop and category archives. One
   column below 768px, three from 768px. Every card shares one aspect ratio,
   so heights stay equal whatever image is uploaded. */

.shop-promo {
	--gh-shop-promo-gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.shop-promo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gh-shop-promo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-promo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	/* No min-height alongside aspect-ratio: it would turn into a minimum
	   width and push cards past the viewport. */
	height: clamp(13.5rem, 58vw, 17rem);
	overflow: hidden;
	border-radius: var(--gh-radius-lg);
	background: var(--gh-color-primary-dark);
	color: var(--gh-color-bg);
	isolation: isolate;
}

@media (min-width: 480px) and (max-width: 767px) {
	.shop-promo-card {
		height: clamp(15rem, 46vw, 18rem);
	}
}

@media (min-width: 768px) {
	.shop-promo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Taller cards in the compact three-up range so two-line headings fit. */
	.shop-promo-card {
		height: auto;
		aspect-ratio: 4 / 5;
	}
}

@media (min-width: 1024px) {
	.shop-promo-card {
		aspect-ratio: 10 / 9;
	}
}

/* Full-bleed image with a bottom-up shade that keeps the white text
   readable on any photo. */
.shop-promo-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.shop-promo-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(16 34 25 / 0.82) 0%, rgb(16 34 25 / 0.45) 38%, rgb(16 34 25 / 0) 68%),
		linear-gradient(to bottom, rgb(16 34 25 / 0.18) 0%, rgb(16 34 25 / 0) 30%);
}

.shop-promo-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

/* Placeholder art keeps its subject right of centre. */
.shop-promo-card__image--placeholder {
	object-position: 70% 40%;
}

.shop-promo-card:hover .shop-promo-card__image {
	transform: scale(1.04);
}

.shop-promo-card__label {
	position: absolute;
	top: clamp(0.85rem, 1.6vw, 1.25rem);
	left: clamp(0.85rem, 1.6vw, 1.25rem);
	max-width: calc(100% - 5.5rem);
	margin: 0;
	padding: 0.4rem 0.95rem;
	overflow: hidden;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm);
	color: var(--gh-color-text);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shop-promo-card__body {
	padding: clamp(1rem, 2vw, 1.5rem);
	padding-right: clamp(1rem, 3vw, 2rem);
}

.shop-promo-card__title {
	max-width: 15ch;
	margin: 0 0 0.35rem;
	color: var(--gh-color-bg);
	font-size: clamp(1.375rem, 2.3vw, 1.875rem);
	font-weight: 500;
	line-height: 1.12;
	text-shadow: 0 1px 12px rgb(16 34 25 / 0.35);
	overflow-wrap: break-word;
}

.shop-promo-card__text {
	margin: 0;
	color: rgb(255 255 255 / 0.92);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Compact three-up range: smaller type so headings fit two lines. */
@media (min-width: 768px) and (max-width: 1023px) {
	.shop-promo-card__title {
		font-size: 1.3125rem;
	}

	.shop-promo-card__text {
		font-size: 0.8125rem;
	}

	.shop-promo-card__label {
		padding: 0.35rem 0.75rem;
		font-size: 0.75rem;
	}
}

/* The link stays unpositioned so its overlay spans the whole card; the
   circular arrow is placed top-right on its own. */
.shop-promo-card__link {
	color: var(--gh-color-primary);
	text-decoration: none;
}

.shop-promo-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.shop-promo-card__arrow {
	position: absolute;
	top: clamp(0.7rem, 1.4vw, 1.1rem);
	right: clamp(0.7rem, 1.4vw, 1.1rem);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm);
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.shop-promo-card__arrow .icon {
	width: 18px;
	height: 18px;
	transition: transform var(--gh-transition);
}

.shop-promo-card:hover .shop-promo-card__arrow,
.shop-promo-card__link:focus-visible .shop-promo-card__arrow {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.shop-promo-card:hover .shop-promo-card__arrow .icon,
.shop-promo-card__link:focus-visible .shop-promo-card__arrow .icon {
	transform: translateX(2px);
}

/* Focus ring on the whole card, outside the clipped corners. */
.shop-promo-card__link:focus-visible {
	outline: none;
}

.shop-promo-card:has(.shop-promo-card__link:focus-visible) {
	outline: 3px solid var(--gh-color-primary);
	outline-offset: 3px;
}

@supports not selector(:has(*)) {
	.shop-promo-card:focus-within {
		outline: 3px solid var(--gh-color-primary);
		outline-offset: 3px;
	}
}

/* Store wrapper spacing (classic archive/single templates). */
.store-content {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* Shop archives (stage 3 phase 4): banners sit close under the header, as
   in the mockup, and the results end one modest gap above the footer
   instead of wrapper padding plus the full section space. */
.gardenia-shop-archive .store-content {
	padding-block: clamp(1.25rem, 3vw, 2rem) 0;
}

.gardenia-shop-archive .site-footer {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

.gardenia-shop-archive .woocommerce-breadcrumb {
	margin-bottom: 0.5rem;
}

.gardenia-shop-archive .woocommerce-products-header__title {
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* Shop toolbar (gardenia_shop_toolbar) -----------------------------------

   WooCommerce's result count and sorting form in one row above the grid.
   Below 560px they stack, with the select full width. */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	padding-bottom: clamp(0.75rem, 1.8vw, 1rem);
	border-bottom: 1px solid var(--gh-color-border);
}

.woocommerce .shop-toolbar .woocommerce-result-count,
.woocommerce .shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce .shop-toolbar .woocommerce-result-count {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--gh-color-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.woocommerce .shop-toolbar .woocommerce-ordering {
	position: relative;
	flex: 0 0 auto;
}

.woocommerce .shop-toolbar .woocommerce-ordering select {
	width: auto;
	min-width: 13.5rem;
	min-height: 44px;
	padding: 0.5rem 2.5rem 0.5rem 0.9rem;
	font-size: 0.875rem;
	cursor: pointer;
	appearance: none;
}

/* The global field focus style (border + 15% glow) is faint; shop controls
   get the theme's standard 2px ring for keyboard users as well. */
.woocommerce .shop-toolbar .woocommerce-ordering select:focus-visible,
.price-filter__field input:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

/* No-JavaScript sort button (gardenia_shop_toolbar), beside the select. */
.woocommerce .shop-toolbar .woocommerce-ordering:has(.shop-sort-submit) {
	display: flex;
	gap: 0.5rem;
}

.woocommerce .shop-toolbar .woocommerce-ordering:has(.shop-sort-submit) select {
	flex: 1 1 auto;
}

.woocommerce .shop-toolbar .woocommerce-ordering:has(.shop-sort-submit)::after {
	right: calc(1rem + 4.5rem);
}

.shop-sort-submit {
	flex: 0 0 4rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--gh-color-primary-dark);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-primary-dark);
	color: var(--gh-color-bg);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.shop-sort-submit:hover {
	background: var(--gh-color-primary);
}

/* Chevron drawn in CSS so it follows the text colour token. */
.woocommerce .shop-toolbar .woocommerce-ordering::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid var(--gh-color-muted);
	border-bottom: 1.5px solid var(--gh-color-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* Below 560px: the count on its own line, then "Filters" and sorting side
   by side. The select wraps to its own full-width line when there is less
   than 12.5rem for it (320px phones), so long option labels aren't clipped. */
@media (max-width: 559px) {
	.shop-toolbar {
		gap: 0.6rem;
	}

	.woocommerce .shop-toolbar .woocommerce-result-count {
		flex-basis: 100%;
	}

	.woocommerce .shop-toolbar .woocommerce-ordering {
		flex: 1 1 12.5rem;
	}

	.woocommerce .shop-toolbar .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
	}
}

/* Shop archive grid (.shop-loop, template-parts/woocommerce/loop-product.php)

   Uses the homepage product card. Columns follow the width of the grid's
   own container, not the viewport, so the grid keeps working once a
   sidebar narrows it: one column below 300px of grid width (320px
   phones, where two cards are ~130px and button labels wrap), two from
   300px (360px phones up), three from 600px.

   On archive pages the body has the .woocommerce class, so WooCommerce's
   own loop, button, price and badge rules (and the generic loop rules
   above) reach the card. The block below resets just those properties so
   the card looks the same as on the homepage. */

.shop-loop {
	container: shop-loop / inline-size;
}

.woocommerce .shop-loop > ul.products {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

@container shop-loop (min-width: 300px) {
	.woocommerce .shop-loop > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container shop-loop (min-width: 600px) {
	.woocommerce .shop-loop > ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.woocommerce ul.products[class*="columns-"] li.product-card {
	padding: clamp(0.5rem, 1.2vw, 0.75rem);
}

.woocommerce ul.products li.product-card .product-card__media img {
	height: 100%;
	margin: 0;
	border-radius: 0;
	background: none;
	aspect-ratio: auto;
	object-fit: contain;
	transform: none;
}

.woocommerce ul.products li.product-card:hover .product-card__media img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product-card .product-card__badge {
	top: 0.6rem;
	right: auto;
	left: 0.6rem;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.25rem 0.65rem;
	background: var(--gh-color-primary-dark);
	font-size: 0.75rem;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.woocommerce ul.products li.product-card .product-card__price {
	display: flex;
	margin: 0 0 0.4rem;
	color: var(--gh-color-text);
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product-card .product-card__price del {
	display: inline;
	color: var(--gh-color-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product-card .product-card__price ins {
	display: inline;
	font-weight: inherit;
}

.woocommerce ul.products li.product-card .product-card__cart {
	position: static;
	display: flex;
	align-self: stretch;
	justify-content: flex-start;
	margin: 0;
	padding: 0 0 0 0.85rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
	font-size: 0.875rem;
	line-height: 1.2;
}

.woocommerce ul.products li.product-card .product-card__cart:hover,
.woocommerce ul.products li.product-card .product-card__cart:focus-visible {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce ul.products li.product-card .product-card__cart.loading {
	padding-right: 0;
	opacity: 0.6;
}

/* WooCommerce's spinner and tick glyphs; the card shows loading by fading
   and the result with its "View cart" link, as on the homepage. */
.woocommerce ul.products li.product-card .product-card__cart::after {
	content: none;
}

.woocommerce ul.products li.product-card .added_to_cart {
	display: inline-flex;
	margin: 0;
	padding: 0.25rem 0.75rem;
	font-size: 0.8125rem;
}

@media (max-width: 399px) {
	.woocommerce ul.products li.product-card .product-card__cart {
		padding-right: 0.6rem;
		font-size: 0.8125rem;
	}
}

/* Shop layout and sidebar (inc/shop-sidebar.php, stage 3 phase 3) --------

   The layout opens just above the notices and toolbar, so the banners,
   breadcrumb and title stay full width and the sidebar lines up with the
   toolbar. 1024px+: products left (~72%), sidebar right (~28%).
   768–1023px: sidebar below the products, sections in two columns.
   Below 768px: with JavaScript the sidebar is a drawer opened by the
   toolbar's "Filters" button; without it, it stays below the products. */

.shop-layout {
	--gh-sidebar-gap: clamp(1.5rem, 2.6vw, 2.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3rem);
}

.shop-layout__main {
	min-width: 0;
}

.shop-sidebar {
	min-width: 0;
	padding-top: clamp(1.5rem, 4vw, 2rem);
	border-top: 1px solid var(--gh-color-border);
}

/* Balanced columns rather than a grid: grid rows left a hole under the
   short price filter. Sections never split across columns; source (and
   reading) order is unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
	.shop-sidebar__panel {
		columns: 2;
		column-gap: var(--gh-sidebar-gap);
	}

	.shop-sidebar__panel > * {
		break-inside: avoid;
	}
}

@media (min-width: 1024px) {
	.shop-layout {
		grid-template-columns: minmax(0, 72fr) minmax(15.5rem, 28fr);
		gap: 0;
		align-items: start;
	}

	.shop-layout__main {
		padding-right: var(--gh-sidebar-gap);
	}

	.shop-sidebar {
		padding: 0 0 0 var(--gh-sidebar-gap);
		border-top: 0;
		border-left: 1px solid var(--gh-color-border);
	}
}

/* Pagination (WooCommerce's loop/pagination.php; arrows from
   gardenia_pagination_args()) --------------------------------------------

   Square 44px targets in the Gardenia palette: bordered pages, filled
   active page, green hover, the global focus ring. Centred under the grid. */

.woocommerce nav.woocommerce-pagination {
	margin: 0;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: normal;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	overflow: visible;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color var(--gh-transition), border-color var(--gh-transition), color var(--gh-transition);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-secondary);
	color: var(--gh-color-primary-dark);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-bg);
	color: var(--gh-color-primary-dark);
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

/* The "…" gap is not a control: no box. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
	min-width: 1.5rem;
	padding: 0;
	border-color: transparent;
	background: none;
	color: var(--gh-color-muted);
}

/* Reset WooCommerce's "ul li span" padding, which also reaches this span. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers__arrow {
	display: inline-flex;
	min-width: 0;
	padding: 0;
	color: var(--gh-color-primary);
}

.page-numbers__arrow .icon {
	width: 18px;
	height: 18px;
}

.page-numbers.prev .page-numbers__arrow {
	transform: scaleX(-1);
}

.rtl .page-numbers.prev .page-numbers__arrow {
	transform: none;
}

.rtl .page-numbers.next .page-numbers__arrow {
	transform: scaleX(-1);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover .page-numbers__arrow {
	color: inherit;
}

/* WooCommerce notices on the shop and archives ----------------------------

   Core markup, behaviour and icons; only the colours move to the palette.
   Errors keep a red accent so they stay distinct from confirmations. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--gh-color-primary);
	border-radius: 0 0 var(--gh-radius-sm) var(--gh-radius-sm);
	background: var(--gh-color-surface);
	color: var(--gh-color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--gh-color-primary);
}

.woocommerce-error {
	border-top-color: #b42318;
}

.woocommerce-error::before {
	color: #b42318;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--gh-color-primary-dark);
	font-weight: 600;
}

/* "View cart" and similar buttons inside a notice: compact, on the right. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	min-height: 40px;
	padding: 0.5rem 1.1rem;
	font-size: 0.875rem;
}

.gardenia-shop-archive .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 1rem;
}

/* Drawer header: only shown in drawer mode. */
.shop-sidebar__head {
	display: none;
}

/* Sidebar sections. */
.shop-widget {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
	padding: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--gh-color-border);
}

.shop-widget__title {
	margin: 0 0 1rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

/* "Filters" toggle in the toolbar. */
.shop-filter-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color var(--gh-transition), color var(--gh-transition);
}

.shop-filter-toggle .icon {
	width: 18px;
	height: 18px;
	color: var(--gh-color-primary);
}

.shop-filter-toggle:hover {
	border-color: var(--gh-color-primary);
	color: var(--gh-color-primary);
}

.shop-filter-toggle[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.shop-filter-toggle {
		display: none;
	}
}

@media (max-width: 559px) {
	.shop-filter-toggle {
		flex: 1 1 auto;
	}
}

/* Price filter ---------------------------------------------------------- */

.price-filter__slider {
	--min-pct: 0%;
	--max-pct: 100%;
	--thumb: 18px;
	position: relative;
	height: 28px;
	margin: 0 calc(var(--thumb) / 2) 0.75rem;
}

.price-filter__slider[hidden] {
	display: none;
}

.price-filter__track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 3px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-border);
	transform: translateY(-50%);
}

.price-filter__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--min-pct);
	right: calc(100% - var(--max-pct));
	border-radius: inherit;
	background: var(--gh-color-primary);
}

/* Two native range inputs stacked on one track. The inputs ignore the
   pointer so only the handles are grabbable; they overhang the track by
   half a handle so each handle's centre sits on its value. */
.price-filter__thumb {
	position: absolute;
	top: 0;
	left: calc(var(--thumb) / -2);
	width: calc(100% + var(--thumb));
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.price-filter__thumb:focus {
	outline: none;
}

.price-filter__thumb::-webkit-slider-runnable-track {
	height: 28px;
	background: transparent;
}

.price-filter__thumb::-moz-range-track {
	height: 28px;
	background: transparent;
}

.price-filter__thumb::-webkit-slider-thumb {
	width: var(--thumb);
	height: var(--thumb);
	margin-top: calc((28px - var(--thumb)) / 2);
	border: 2px solid var(--gh-color-primary);
	border-radius: 50%;
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow var(--gh-transition);
}

.price-filter__thumb::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--thumb);
	height: var(--thumb);
	border: 2px solid var(--gh-color-primary);
	border-radius: 50%;
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm);
	cursor: grab;
	pointer-events: auto;
}

.price-filter__thumb:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.price-filter__thumb:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgb(33 107 78 / 0.25);
}

.price-filter__thumb:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgb(33 107 78 / 0.25);
}

/* Both handles at the top end: the minimum must stay on top to move. */
.price-filter__slider.is-min-on-top .price-filter__thumb--min {
	z-index: 1;
}

/* Number fields: the control without JavaScript. */
.price-filter__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.price-filter.is-enhanced .price-filter__fields {
	display: none;
}

.price-filter__field {
	margin: 0;
}

.price-filter__field label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
}

.price-filter__field input {
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
}

.price-filter__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.price-filter__values {
	margin: 0;
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.price-filter__apply {
	min-height: 44px;
	padding: 0.5rem 1.6rem;
	border: 1px solid var(--gh-color-primary-dark);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-primary-dark);
	color: var(--gh-color-bg);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--gh-transition), border-color var(--gh-transition);
}

.price-filter__apply:hover,
.price-filter__apply:focus-visible {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
}

.price-filter__reset {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Product categories ---------------------------------------------------- */

.shop-categories,
.shop-categories__children {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-categories__children {
	margin: 0.15rem 0 0.35rem 1.25rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--gh-color-border);
}

.shop-categories__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.35rem 0.65rem;
	border-radius: var(--gh-radius-pill);
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.shop-categories__link:hover {
	background: var(--gh-color-surface);
	color: var(--gh-color-primary);
}

.shop-categories__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--gh-color-border);
	border-radius: 50%;
	color: var(--gh-color-primary);
}

.shop-categories__icon .icon {
	width: 14px;
	height: 14px;
}

.shop-categories__name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.shop-categories__count {
	flex-shrink: 0;
	min-width: 2rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg);
	color: var(--gh-color-muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.shop-categories__item.is-current > .shop-categories__link {
	background: var(--gh-color-secondary);
	color: var(--gh-color-primary-dark);
	font-weight: 600;
}

.shop-categories__item.is-current > .shop-categories__link .shop-categories__icon {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.shop-categories__item.is-current > .shop-categories__link .shop-categories__count {
	border-color: transparent;
}

.shop-categories__item.is-ancestor > .shop-categories__link {
	color: var(--gh-color-primary-dark);
	font-weight: 600;
}

/* Best sellers ---------------------------------------------------------- */

.mini-products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-product {
	position: relative;
	min-height: calc(3.75rem + 1.5rem);
	padding: 0.75rem 0 0.75rem 4.6rem;
	border-bottom: 1px solid var(--gh-color-border);
}

.mini-product:first-child {
	min-height: calc(3.75rem + 0.75rem);
	padding-top: 0;
}

.mini-product:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* The thumbnail sits in the link (one tab stop) but is placed against
   the list item, so the price can follow the name below it. */
.mini-product__media {
	position: absolute;
	top: 0.75rem;
	left: 0;
	display: block;
	width: 3.75rem;
	height: 3.75rem;
	overflow: hidden;
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-surface);
}

.mini-product:first-child .mini-product__media {
	top: 0;
}

.woocommerce .mini-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mini-product__link {
	display: block;
	color: var(--gh-color-text);
	text-decoration: none;
}

.mini-product__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mini-product__link:hover .mini-product__name {
	color: var(--gh-color-primary);
}

.woocommerce .mini-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4rem;
	margin-top: 0.3rem;
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce .mini-product__price del {
	color: var(--gh-color-muted);
	font-size: 0.875em;
	font-weight: 400;
}

.woocommerce .mini-product__price ins {
	font-weight: inherit;
	text-decoration: none;
}

/* Sidebar banner -------------------------------------------------------- */

.sidebar-promo {
	position: relative;
	display: flex;
	min-height: 14rem;
	overflow: hidden;
	border-radius: var(--gh-radius-lg);
	background: var(--gh-color-surface);
	isolation: isolate;
}

.sidebar-promo__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sidebar-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

/* A photo gets a soft wash from the left so the dark text stays readable. */
.sidebar-promo--photo .sidebar-promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(244 249 245 / 0.94) 0%, rgb(244 249 245 / 0.7) 45%, rgb(244 249 245 / 0) 75%);
}

.sidebar-promo__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.1rem, 2vw, 1.4rem);
}

.sidebar-promo__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--gh-color-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The left ~60% is kept for text; the artwork sits on the right. */
.sidebar-promo__title {
	max-width: 62%;
	margin: 0 0 1rem;
	font-size: clamp(1.3125rem, 1.8vw, 1.5rem);
	line-height: 1.15;
	hyphens: manual;
}

.sidebar-promo__button {
	min-height: 44px;
	margin-top: auto;
	padding: 0.55rem 1.1rem;
	font-size: 0.875rem;
}

.sidebar-promo__button .icon {
	width: 16px;
	height: 16px;
}

/* Mobile drawer (JavaScript only; shop-filters.js sets .has-drawer) ----- */

@media (max-width: 767px) {
	.shop-layout.has-drawer .shop-sidebar {
		position: fixed;
		inset: 0;
		z-index: 1001;
		padding: 0;
		border: 0;
		background: rgb(16 34 25 / 0.45);
		opacity: 0;
		visibility: hidden;
	}

	.shop-layout.has-drawer .shop-sidebar.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* Transitions only once the drawer is set up, so the switch from the
	   inline sidebar on page load doesn't animate. */
	.shop-layout.drawer-ready .shop-sidebar {
		transition: opacity 220ms ease, visibility 0s linear 220ms;
	}

	.shop-layout.drawer-ready .shop-sidebar.is-open {
		transition: opacity 220ms ease;
	}

	.shop-layout.drawer-ready .shop-sidebar__panel {
		transition: transform 260ms ease;
	}

	.shop-layout.has-drawer .shop-sidebar__panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(22rem, 88vw);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 1.25rem 2rem;
		background: var(--gh-color-bg);
		box-shadow: var(--gh-shadow);
		transform: translateX(100%);
	}

	.shop-layout.has-drawer .shop-sidebar.is-open .shop-sidebar__panel {
		transform: none;
	}

	.shop-layout.has-drawer .shop-sidebar__panel:focus {
		outline: none;
	}

	.shop-layout.has-drawer .shop-sidebar__head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin: 0 -1.25rem 1.25rem;
		padding: 0.75rem 0.75rem 0.75rem 1.25rem;
		border-bottom: 1px solid var(--gh-color-border);
		background: var(--gh-color-bg);
	}

	.shop-sidebar__title {
		margin: 0;
		font-size: 1.25rem;
	}

	.shop-sidebar__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--gh-color-text);
		cursor: pointer;
	}

	.shop-sidebar__close:hover {
		background: var(--gh-color-surface);
		color: var(--gh-color-primary);
	}

	html.shop-drawer-open {
		overflow: hidden;
	}
}

/* The admin bar is fixed from 601px; keep the drawer below it. */
@media (min-width: 601px) and (max-width: 767px) {
	.admin-bar .shop-layout.has-drawer .shop-sidebar {
		top: 46px;
	}
}

/* Single product: breadcrumb, gallery and purchase panel (stage 4 phase 1)

   inc/single-product.php and assets/js/single-product.js. Layered over
   WooCommerce's single-product markup. The details tabs are styled at the
   end of this file (phase 2), followed by up-sells and related products
   (phase 3). */

.single-product div.product {
	--gh-star: #d9971e; /* Decorative only; the rating is also given as text. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: clamp(1.75rem, 4vw, 3rem);
}

/* WooCommerce's clearfix would become empty grid items. */
.single-product div.product::before,
.single-product div.product::after {
	content: none;
}

.single-product div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}

@media (min-width: 960px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.single-product div.product > .product-gallery {
		grid-column: 1;
	}

	.single-product div.product > .summary {
		grid-column: 2;
	}
}

.single-product .store-content {
	padding-top: clamp(1.25rem, 3vw, 2.25rem);
}

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

.product-breadcrumb-bar {
	border-bottom: 1px solid var(--gh-color-border);
	background: var(--gh-color-surface);
}

.woocommerce .product-breadcrumb-bar .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.4rem;
	margin: 0;
	padding-block: 0.75rem;
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.woocommerce .product-breadcrumb-bar .woocommerce-breadcrumb a {
	color: var(--gh-color-text);
	text-decoration: none;
}

.woocommerce .product-breadcrumb-bar .woocommerce-breadcrumb a:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

.woocommerce-breadcrumb__sep {
	display: inline-flex;
	color: var(--gh-color-muted);
}

.woocommerce-breadcrumb__sep .icon {
	width: 14px;
	height: 14px;
	transform: rotate(-90deg);
}

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

.product-gallery {
	position: relative;
	min-width: 0;
}

.woocommerce div.product .product-gallery div.images {
	float: none;
	width: auto;
	margin: 0;
}

/* The main image frame: FlexSlider's viewport with several images, the
   plain wrapper with one image or the placeholder. */
.product-gallery .flex-viewport,
.product-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-lg);
	background: var(--gh-color-surface);
}

.woocommerce div.product .product-gallery div.images img {
	display: block;
	width: 100%;
	height: auto;
}

.product-gallery .woocommerce-product-gallery__image--placeholder img {
	opacity: 0.85;
}

.woocommerce .product-gallery span.onsale {
	top: 1rem;
	left: 1rem;
	z-index: 3;
	padding: 0.4rem 0.9rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Lightbox button (added by WooCommerce; icon swapped in by the theme
   script). Opens WooCommerce's PhotoSwipe viewer. */
.woocommerce div.product .product-gallery div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm), 0 0 0 1px var(--gh-color-border);
	color: var(--gh-color-primary);
	text-indent: 0;
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.woocommerce div.product .product-gallery div.images .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .product-gallery div.images .woocommerce-product-gallery__trigger::after {
	content: none;
}

.woocommerce div.product .product-gallery div.images .woocommerce-product-gallery__trigger:hover {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce-product-gallery__trigger .icon {
	width: 20px;
	height: 20px;
}

/* Previous / next arrows on the main image (pointer shortcut). */
.product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: var(--gh-color-bg);
	box-shadow: var(--gh-shadow-sm), 0 0 0 1px var(--gh-color-border);
	color: var(--gh-color-text);
	transition: opacity var(--gh-transition), color var(--gh-transition);
}

.product-gallery .flex-direction-nav a:hover {
	color: var(--gh-color-primary);
}

.product-gallery .flex-direction-nav .flex-prev {
	left: 1rem;
}

.product-gallery .flex-direction-nav .flex-next {
	right: 1rem;
}

.product-gallery .flex-direction-nav .icon {
	width: 20px;
	height: 20px;
}

.product-gallery .flex-direction-nav .flex-prev .icon {
	transform: rotate(90deg);
}

.product-gallery .flex-direction-nav .flex-next .icon {
	transform: rotate(-90deg);
}

.product-gallery .flex-direction-nav .flex-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Thumbnails. */
.woocommerce div.product .product-gallery div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.5vw, 0.875rem);
	margin: clamp(0.625rem, 1.5vw, 0.875rem) 0 0;
	padding: 0;
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs::before,
.woocommerce div.product .product-gallery div.images .flex-control-thumbs::after {
	content: none;
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs li img {
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-surface);
	opacity: 1;
	transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs li img:hover {
	border-color: var(--gh-color-accent);
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--gh-color-primary);
	box-shadow: 0 0 0 1px var(--gh-color-primary);
}

.woocommerce div.product .product-gallery div.images .flex-control-thumbs li img:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 3px;
}

/* Purchase panel ----------------------------------------------------- */

.woocommerce div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.product-summary__category {
	margin: 0 0 0.4rem;
	color: var(--gh-color-muted);
	font-size: 0.875rem;
}

.product-summary__category a {
	color: inherit;
	text-decoration: none;
}

.product-summary__category a:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

.woocommerce div.product .summary .product_title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.375rem);
	line-height: 1.15;
}

.woocommerce div.product .summary .woocommerce-product-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
	margin-bottom: 1rem;
}

.woocommerce div.product .summary .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
	font-size: 1rem;
}

.woocommerce div.product .summary .star-rating::before,
.woocommerce div.product .summary .star-rating span::before {
	color: var(--gh-star);
}

.woocommerce div.product .summary .woocommerce-review-link {
	color: var(--gh-color-muted);
	font-size: 0.875rem;
	text-decoration: none;
}

.woocommerce div.product .summary .woocommerce-review-link:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

.product-summary__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	margin-bottom: 1.25rem;
}

.woocommerce div.product .product-summary__price-row p.price {
	margin: 0;
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
}

/* WooCommerce fades del with opacity, which drops the muted colour below
   4.5:1; keep it opaque. */
.woocommerce div.product .summary p.price del {
	margin-right: 0.35rem;
	font-size: 0.7em;
	font-weight: 400;
	opacity: 1;
}

.woocommerce div.product .summary p.price ins {
	font-weight: 700;
}

.product-summary__discount {
	padding: 0.3rem 0.75rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-secondary);
	color: var(--gh-color-primary-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.woocommerce div.product .summary .woocommerce-product-details__short-description {
	margin-bottom: 1.5rem;
	color: var(--gh-color-text);
}

.woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* Purchase controls: WooCommerce's form for the product type. */
.product-purchase {
	margin-bottom: 1.5rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--gh-color-border);
}

.product-purchase > :last-child,
.woocommerce div.product .product-purchase form.cart {
	margin-bottom: 0;
}

.woocommerce div.product .product-purchase form.cart:not(.variations_form),
.woocommerce div.product .product-purchase .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.woocommerce div.product .product-purchase form.cart::before,
.woocommerce div.product .product-purchase form.cart::after,
.woocommerce div.product .product-purchase .woocommerce-variation-add-to-cart::before,
.woocommerce div.product .product-purchase .woocommerce-variation-add-to-cart::after {
	content: none;
}

/* Grouped products: the product table takes the full row. */
.woocommerce div.product .product-purchase form.cart > table {
	flex: 1 1 100%;
	margin: 0;
}

/* Stock status as a small pill. */
.woocommerce div.product .product-purchase .stock {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0.3rem 0.8rem;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-secondary);
	color: var(--gh-color-primary-dark);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce div.product .product-purchase .stock.out-of-stock {
	background: #fdecea;
	color: #a12a1f;
}

.woocommerce div.product .product-purchase .stock.available-on-backorder {
	background: #fdf3e1;
	color: #7a4b00;
}

/* Quantity: bordered field; − and + buttons when the script has run. */
.woocommerce div.product .product-purchase div.quantity {
	float: none;
	margin: 0;
}

.woocommerce div.product .product-purchase .quantity .qty {
	width: 5rem;
	min-height: 48px;
	text-align: center;
}

.product-purchase .quantity.has-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg);
}

.product-purchase .quantity.has-stepper:focus-within {
	border-color: var(--gh-color-primary);
}

.woocommerce div.product .product-purchase .quantity.has-stepper .qty {
	width: 3rem;
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-weight: 600;
	appearance: textfield;
	-moz-appearance: textfield;
}

.product-purchase .quantity.has-stepper .qty::-webkit-inner-spin-button,
.product-purchase .quantity.has-stepper .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.quantity__step {
	display: grid;
	place-items: center;
	width: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--gh-radius-pill);
	background: transparent;
	color: var(--gh-color-text);
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.quantity__step:hover:not(:disabled) {
	background: var(--gh-color-surface);
	color: var(--gh-color-primary);
}

.quantity__step:disabled {
	color: var(--gh-color-muted);
	opacity: 0.45;
	cursor: not-allowed;
}

.quantity__step .icon {
	width: 18px;
	height: 18px;
}

/* Add to Cart fills the rest of the quantity row. */
.woocommerce div.product .product-purchase form.cart .button {
	float: none;
	min-height: 48px;
}

.woocommerce div.product .product-purchase .single_add_to_cart_button {
	flex: 1 1 9rem;
	gap: 0.5rem;
}

/* Cart icon on Add to Cart (not on external "Buy product" links). */
.woocommerce div.product:not(.product-type-external) .product-purchase .single_add_to_cart_button::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.6a1.5 1.5 0 0 0 1.5 1.2h8.2a1.5 1.5 0 0 0 1.5-1.1L20.5 8H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.25'/%3E%3Ccircle cx='17' cy='19.5' r='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.6a1.5 1.5 0 0 0 1.5 1.2h8.2a1.5 1.5 0 0 0 1.5-1.1L20.5 8H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.25'/%3E%3Ccircle cx='17' cy='19.5' r='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Buy Now: full width under the quantity row, outlined. */
.woocommerce div.product .product-purchase button.button.gardenia-buy-now {
	flex: 1 1 100%;
	gap: 0.5rem;
	border-color: var(--gh-color-primary);
	background: var(--gh-color-surface);
	color: var(--gh-color-primary);
}

.woocommerce div.product .product-purchase button.button.gardenia-buy-now:hover {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce div.product .product-purchase button.button.gardenia-buy-now.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce div.product .product-purchase button.button.gardenia-buy-now.disabled:hover {
	background: var(--gh-color-surface);
	color: var(--gh-color-primary);
}

.gardenia-buy-now .icon {
	width: 20px;
	height: 20px;
}

/* Variable products: one labelled select per attribute, stacked. */
.woocommerce div.product .product-purchase form.cart .variations {
	margin-bottom: 0.5rem;
}

.woocommerce div.product .product-purchase form.cart .variations tr {
	display: block;
	margin-bottom: 1rem;
}

.woocommerce div.product .product-purchase form.cart .variations th,
.woocommerce div.product .product-purchase form.cart .variations td {
	display: block;
	padding: 0;
	line-height: 1.4;
	text-align: start;
}

.woocommerce div.product .product-purchase form.cart .variations th {
	margin-bottom: 0.4rem;
}

.woocommerce div.product .product-purchase form.cart .variations label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: capitalize;
}

.woocommerce div.product .product-purchase form.cart .variations select {
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.woocommerce div.product .product-purchase form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.woocommerce div.product .product-purchase .single_variation {
	margin-bottom: 1rem;
}

.woocommerce div.product .product-purchase .single_variation:empty {
	margin: 0;
}

.woocommerce div.product .product-purchase .woocommerce-variation-price .price {
	font-size: 1.25rem;
}

.woocommerce div.product .product-purchase .woocommerce-variation-availability .stock {
	margin-bottom: 0;
}

/* Meta (SKU, categories, tags) and share row. */
.woocommerce div.product .summary .product_meta {
	display: grid;
	gap: 0.35rem;
	color: var(--gh-color-muted);
	font-size: 0.9375rem;
}

.woocommerce div.product .summary .product_meta > span {
	display: block;
}

.woocommerce div.product .summary .product_meta .sku,
.woocommerce div.product .summary .product_meta a {
	color: var(--gh-color-text);
}

.woocommerce div.product .summary .product_meta a:hover {
	color: var(--gh-color-primary);
}

.product-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-top: 0.5rem;
	color: var(--gh-color-muted);
	font-size: 0.9375rem;
}

.product-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-share__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--gh-color-text);
	cursor: pointer;
	transition: background-color var(--gh-transition), color var(--gh-transition);
}

.product-share__link:hover,
.product-share__link.is-copied {
	background: var(--gh-color-surface);
	color: var(--gh-color-primary);
}

.product-share__link .icon {
	width: 18px;
	height: 18px;
}

.product-share__status {
	color: var(--gh-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Trust indicators (template-parts/woocommerce/single-product-trust.php). */
.trust-list--product {
	margin-top: 1.75rem;
	gap: 1rem;
}

.trust-list--product .trust-list__item {
	gap: 0.5rem;
	font-size: 0.75rem;
}

.trust-list--product .trust-list__item .icon {
	width: 28px;
	height: 28px;
}

/* Single product: details tabs (stage 4 phase 2)

   WooCommerce's tabs, description, attributes table, reviews list and
   review form (inc/single-product.php wraps and relabels them). Without
   JavaScript all panels show in turn and the tab bar is in-page links. */

.product-details {
	min-width: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0 clamp(0.25rem, 1.5vw, 1rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: 0 clamp(0.5rem, 2vw, 1.25rem);
	overflow: visible;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.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,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 52px;
	padding: 0.75rem clamp(0.5rem, 1.5vw, 1rem);
	border-radius: var(--gh-radius-sm);
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	transition: color var(--gh-transition);
}

/* Active underline, sitting on the bar's bottom border. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--gh-color-primary);
	transform: scaleX(0);
	transition: transform var(--gh-transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--gh-color-primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
	transform: scaleX(1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: -4px;
}

/* Narrow screens: tabs share the bar equally and long labels wrap, so the
   bar never scrolls or overflows. */
@media (max-width: 599px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 0;
		padding: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: 1 1 0;
		min-width: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 0.625rem 0.375rem;
		font-size: 0.875rem;
	}
}

/* Panels. They carry .entry-content, whose centred 760px column is for
   posts; here content starts at the left edge like the tab bar. */
.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

.woocommerce div.product .woocommerce-tabs .panel:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 6px;
	border-radius: var(--gh-radius-sm);
}

.woocommerce-tabs .entry-content > * {
	max-width: none;
	margin-inline: 0;
}

.no-js .woocommerce-tabs .panel + .panel {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.woocommerce-tabs .panel > h2:first-child,
.woocommerce #reviews #comments h2.woocommerce-Reviews-title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	line-height: 1.2;
}

.woocommerce-tabs .panel > :last-child {
	margin-bottom: 0;
}

/* Description: the product's own content, kept to a readable measure. */
.woocommerce-Tabs-panel--description > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
	max-width: 90ch;
}

.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
	margin: 0 0 1.1em;
}

.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
	padding-inline-start: 1.35rem;
}

.woocommerce-Tabs-panel--description li + li {
	margin-top: 0.35em;
}

.woocommerce-Tabs-panel--description li::marker {
	color: var(--gh-color-primary);
}

.woocommerce-Tabs-panel--description > h2:not(:first-child),
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
	margin: 1.6em 0 0.6em;
	line-height: 1.3;
}

.woocommerce-Tabs-panel--description > h2:not(:first-child) {
	font-size: 1.5rem;
}

.woocommerce-Tabs-panel--description h3 {
	font-size: 1.25rem;
}

.woocommerce-Tabs-panel--description h4 {
	font-size: 1.0625rem;
}

.woocommerce-Tabs-panel--description blockquote {
	margin: 0 0 1.1em;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--gh-color-accent);
	color: var(--gh-color-muted);
}

.woocommerce-Tabs-panel--description :is(img, video, iframe, embed, object) {
	max-width: 100%;
}

.woocommerce-Tabs-panel--description img {
	height: auto;
	border-radius: var(--gh-radius);
}

/* Tables in descriptions scroll inside themselves on small screens. */
.woocommerce-Tabs-panel--description table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.woocommerce-Tabs-panel--description :is(th, td) {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--gh-color-border);
	text-align: start;
}

/* Additional information: WooCommerce's attributes table. */
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
	width: 100%;
	max-width: 760px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
	padding: 0.85rem clamp(0.875rem, 2.5vw, 1.25rem);
	border: 0;
	border-bottom: 1px solid var(--gh-color-border);
	background: transparent;
	font-style: normal;
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
	width: 38%;
	background: var(--gh-color-surface);
	color: var(--gh-color-text);
	font-weight: 600;
}

/* Attribute names are stored as typed (the sample "color", say); match the
   capitalised variation labels in the purchase panel. */
.woocommerce div.product .woocommerce-tabs table.shop_attributes th::first-letter {
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:last-child th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* Below 768px WooCommerce's small-screen stylesheet stacks each row; give
   the label the full width above its value. */
@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
		width: auto;
		padding-bottom: 0.5rem;
		border-bottom: 0;
		font-size: 0.875rem;
	}

	.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
		padding-top: 0.5rem;
	}

	.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:last-child th {
		border-bottom: 0;
	}
}

/* Reviews: list beside the form on wide screens, stacked below. */
.woocommerce #reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
}

.woocommerce #reviews > .clear {
	display: none;
}

@media (min-width: 960px) {
	.woocommerce #reviews {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}
}

.woocommerce #reviews #comments ol.commentlist {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li.review,
.woocommerce #reviews #comments ol.commentlist li.comment {
	padding: clamp(1rem, 2.5vw, 1.25rem);
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: none;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gh-color-secondary);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
}

.woocommerce #reviews .star-rating::before,
.woocommerce #reviews .star-rating span::before {
	color: var(--gh-star);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.4rem;
	margin: 0 0 0.5rem;
	color: var(--gh-color-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
	color: var(--gh-color-text);
	font-weight: 600;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__verified {
	color: var(--gh-color-primary);
	font-style: normal;
	font-weight: 600;
}

.woocommerce-review__awaiting-approval {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: var(--gh-radius-pill);
	background: #fdf3e1;
	color: #7a4b00;
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 600;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p {
	margin: 0 0 0.6em;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* Store replies, nested under a review. */
.woocommerce #reviews #comments ol.commentlist ul.children {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding-inline-start: clamp(1rem, 5vw, 3.5rem);
}

.woocommerce #reviews #comments ol.commentlist ul.children li.comment {
	background: var(--gh-color-surface);
}

.woocommerce #reviews #comments .woocommerce-pagination {
	margin-top: 1.5rem;
}

.woocommerce #reviews .woocommerce-noreviews {
	margin: 0;
}

/* Review form (or the "verified owners only" note). */
.woocommerce #review_form #respond,
.woocommerce #reviews .woocommerce-verification-required {
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-surface);
}

.woocommerce #reviews .woocommerce-verification-required {
	color: var(--gh-color-muted);
}

.woocommerce #review_form #respond .comment-reply-title {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--gh-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce #review_form #respond p,
.woocommerce #review_form #respond .comment-form-rating {
	margin: 0 0 1rem;
}

.woocommerce #review_form #respond .comment-notes {
	color: var(--gh-color-muted);
	font-size: 0.875rem;
}

.woocommerce #review_form #respond label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.woocommerce #review_form #respond .required {
	color: #b42318;
	text-decoration: none;
}

.woocommerce #reviews #comment {
	height: auto;
	min-height: 140px;
	resize: vertical;
}

/* Without JavaScript the plain rating select remains. */
.woocommerce #review_form #respond #rating {
	max-width: 16rem;
}

.woocommerce #review_form #respond p.stars {
	margin: 0;
	line-height: 1;
}

.woocommerce #review_form #respond p.stars span {
	display: inline-flex;
	gap: 0.25rem;
}

.woocommerce #review_form #respond p.stars a {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--gh-radius-sm);
	color: var(--gh-star);
	font-size: 1.75rem;
}

.woocommerce #review_form #respond p.stars a:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

.woocommerce #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.woocommerce #review_form #respond .comment-form-cookies-consent input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0.15rem 0 0;
	accent-color: var(--gh-color-primary);
}

.woocommerce #review_form #respond .comment-form-cookies-consent label {
	margin: 0;
	color: var(--gh-color-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.woocommerce #review_form #respond .form-submit {
	margin: 0;
}

.woocommerce #review_form #respond .form-submit input#submit {
	width: 100%;
}

@media (min-width: 600px) and (max-width: 959px) {
	.woocommerce #review_form #respond .form-submit input#submit {
		width: auto;
	}
}

/* Single product: up-sells and related products (stage 4 phase 3)

   WooCommerce's up-sells and related loops (inc/single-product.php), shown
   with the theme's product card under a section header. The card rules in
   "Shop archive grid" above already reset WooCommerce's loop styles for
   ul.products, so the cards match the homepage and shop. Two columns up to
   959px, four from 960px: four products never leave a single orphan card
   on a row of three. */

.product-recommendations {
	min-width: 0;
}

/* The product page ends one modest gap above the footer, as the shop
   archives do, instead of wrapper padding plus the full section space. */
.single-product .store-content {
	padding-bottom: 0;
}

.single-product .site-footer {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Up-sells then related: a rule between them keeps the two rows apart. */
.product-recommendations + .product-recommendations {
	padding-top: clamp(1.75rem, 4vw, 3rem);
	border-top: 1px solid var(--gh-color-border);
}

.product-recommendations .section-header {
	align-items: baseline;
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* Same size as the "Product Description" heading above. */
.product-recommendations .section-title {
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	line-height: 1.2;
}

.product-recommendations .section-link {
	font-size: 0.9375rem;
}

/* The section header already gives the heading. */
.woocommerce div.product .product-recommendations > section.products {
	margin: 0;
}

.woocommerce .product-recommendations ul.products[class*="columns-"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0;
}

@media (min-width: 960px) {
	.woocommerce .product-recommendations ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Card titles are h3 here, which WooCommerce pads and resizes in loops
   ("ul.products li.product h3"); the padding let a third line of a long
   name show under the two-line clamp. */
.woocommerce ul.products li.product-card h3.product-card__title {
	padding: 0;
	font-size: 0.9375rem;
}

/* WooCommerce styles prices inside div.product for the purchase panel
   (larger, green); keep the card's own price. */
.woocommerce div.product .product-recommendations .product-card__price {
	margin: 0 0 0.4rem;
	color: var(--gh-color-text);
	font-size: 1rem;
}

/* Card keyboard focus: the same green ring as the rest of the page. */
.product-recommendations .product-card__title a:focus-visible,
.product-recommendations .product-card__cart:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

/* Cart (stage 5 phase 1)
   ------------------------------------------------------------------------
   WooCommerce's classic cart (cart.php, cart-totals.php, cart-shipping.php,
   cart-empty.php) inside the theme's cart page header
   (template-parts/woocommerce/cart-page.php, inc/cart.php). Items form on the
   left and totals on the right from 1200px; one column below that (a
   two-column split at 1024px left the product name too narrow). Up to
   768px (WooCommerce's small-screen breakpoint) each item row becomes a
   card. */

.cart-page {
	padding-block: clamp(1.25rem, 3vw, 2rem) 0;
}

.woocommerce-cart .site-footer {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Page header ------------------------------------------------------------ */

.cart-page__header {
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* The current page (plain text in WooCommerce's trail) in green; links in
   the text colour. */
.cart-page .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.4rem;
	margin: 0 0 clamp(0.75rem, 2vw, 1rem);
	color: var(--gh-color-primary);
	font-size: 0.875rem;
	line-height: 1.4;
}

.cart-page .woocommerce-breadcrumb a {
	color: var(--gh-color-text);
	text-decoration: none;
}

.cart-page .woocommerce-breadcrumb a:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

.cart-page__title {
	margin: 0 0 0.35rem;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.1;
}

.cart-page__intro {
	margin: 0;
	color: var(--gh-color-muted);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.cart-page__intro[hidden] {
	display: none;
}

/* Notices sit full width above the columns. */
.cart-page .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 1.25rem;
}

.cart-page .woocommerce-notices-wrapper > :last-child {
	margin-bottom: 0;
}

/* Layout ----------------------------------------------------------------- */

.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 1200px) {
	.cart-layout {
		grid-template-columns: minmax(0, 69fr) minmax(0, 31fr);
	}

	/* Anything hooked around the form stays in the main column. */
	.cart-layout > * {
		grid-column: 1;
	}

	/* One row: the items form and bundle share .cart-main beside it. Spanning
	   more rows added their empty gaps under the bundle. */
	.cart-layout > .cart-collaterals {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Items form ------------------------------------------------------------- */

.woocommerce .woocommerce-cart-form {
	min-width: 0;
	margin: 0;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
	overflow: hidden;
}

.woocommerce table.shop_table.cart {
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce table.shop_table.cart th,
.woocommerce table.shop_table.cart td {
	padding: 1.25rem 0.75rem;
	border-top: 1px solid var(--gh-color-border);
	vertical-align: middle;
}

.woocommerce table.shop_table.cart thead th {
	padding-block: 0.9rem;
	border-top: 0;
	background: var(--gh-color-surface);
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
}

.woocommerce table.shop_table.cart th:first-child,
.woocommerce table.shop_table.cart td:first-child {
	padding-left: 1.25rem;
}

.woocommerce table.shop_table.cart th:last-child,
.woocommerce table.shop_table.cart td:last-child {
	padding-right: 1.25rem;
}

.woocommerce table.shop_table.cart .product-remove {
	width: 3.75rem;
}

.woocommerce-cart table.cart .product-thumbnail {
	width: calc(96px + 1.5rem);
	min-width: 0;
}

/* Price, quantity and subtotal shrink to their content; the name takes the
   rest of the row. */
.woocommerce table.shop_table.cart .product-price,
.woocommerce table.shop_table.cart .product-quantity,
.woocommerce table.shop_table.cart .product-subtotal {
	width: 1%;
	white-space: nowrap;
}

.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal {
	padding-inline: 1rem;
}

/* Remove: round icon button. WooCommerce paints it red with !important. */
.woocommerce table.shop_table.cart a.remove {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--gh-color-border);
	border-radius: 50%;
	background: var(--gh-color-bg);
	color: var(--gh-color-text) !important;
	font-size: 1rem;
	transition: background-color var(--gh-transition), border-color var(--gh-transition), color var(--gh-transition);
}

.woocommerce table.shop_table.cart a.remove:hover {
	border-color: #b42318;
	background: #fef3f2;
	color: #b42318 !important;
}

.woocommerce table.shop_table.cart a.remove .icon {
	width: 18px;
	height: 18px;
}

/* Thumbnail: square frame; WooCommerce's placeholder when there's no image. */
.woocommerce-cart table.cart .product-thumbnail a {
	display: block;
	width: 96px;
	border-radius: var(--gh-radius-sm);
}

.woocommerce-cart table.cart .product-thumbnail img {
	display: block;
	width: 96px;
	height: 96px;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-surface);
	object-fit: cover;
}

/* Name, category, description and variation details. */
.woocommerce table.shop_table.cart td.product-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.woocommerce table.shop_table.cart td.product-name > a {
	color: var(--gh-color-text);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.woocommerce table.shop_table.cart td.product-name > a:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

.cart-item__category,
.cart-item__description {
	display: block;
	color: var(--gh-color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cart-item__category {
	margin-top: 0.25rem;
}

.cart-item__description {
	display: -webkit-box;
	margin-top: 0.15rem;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce table.shop_table.cart td.product-name dl.variation {
	margin: 0.4rem 0 0;
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.woocommerce table.shop_table.cart td.product-name dl.variation dt {
	margin: 0 0.25rem 0 0;
	font-weight: 600;
}

.woocommerce table.shop_table.cart td.product-name dl.variation dd {
	margin: 0;
	padding: 0;
}

.woocommerce table.shop_table.cart td.product-name dl.variation dd p {
	margin: 0;
}

.woocommerce table.shop_table.cart td.product-name .backorder_notification {
	margin: 0.4rem 0 0;
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
}

.woocommerce table.shop_table.cart td.product-price {
	font-weight: 500;
}

.woocommerce table.shop_table.cart td.product-subtotal {
	color: var(--gh-color-text);
	font-weight: 600;
}

/* Quantity: plain number field without JavaScript; − field + with it. */
.woocommerce table.shop_table.cart .quantity .qty {
	width: 4.5rem;
	min-height: 44px;
	padding: 0.4rem;
	text-align: center;
}

.woocommerce-cart-form .quantity.has-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
}

.woocommerce-cart-form .quantity.has-stepper:focus-within {
	border-color: var(--gh-color-primary);
}

.woocommerce table.shop_table.cart .quantity.has-stepper .qty {
	width: 2.75rem;
	min-height: 42px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--gh-color-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-weight: 600;
	appearance: textfield;
	-moz-appearance: textfield;
}

.woocommerce table.shop_table.cart .quantity.has-stepper .qty:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: -2px;
}

.woocommerce-cart-form .quantity.has-stepper .qty::-webkit-inner-spin-button,
.woocommerce-cart-form .quantity.has-stepper .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.woocommerce-cart-form .quantity__step {
	width: 40px;
	border-radius: 0;
}

.woocommerce-cart-form .quantity__step:focus-visible {
	position: relative;
	outline-offset: -2px;
}

/* Fixed quantity (sold individually): the number, with a note. */
.cart-qty-fixed {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.3;
}

.cart-qty-fixed__value {
	font-weight: 600;
}

.cart-qty-fixed__note {
	color: var(--gh-color-muted);
	font-size: 0.75rem;
}

/* Coupon and Update cart, under the items. WooCommerce floats the coupon
   left and right-aligns the cell. */
.woocommerce table.shop_table.cart td.actions {
	padding: 1rem 1.25rem;
	background: var(--gh-color-bg);
	text-align: right;
}

.woocommerce table.shop_table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	float: left;
	max-width: 100%;
}

/* WooCommerce's clearfix would become empty flex items. */
.woocommerce table.shop_table.cart td.actions .coupon::before,
.woocommerce table.shop_table.cart td.actions .coupon::after {
	display: none;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	float: none;
	width: 16rem;
	min-height: 46px;
	margin: 0;
	padding: 0.6rem 1rem 0.6rem 2.75rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356695e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.4V4.5a1 1 0 0 1 1-1h7.9l8.1 8.1a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E") no-repeat 1rem center / 18px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: var(--gh-color-primary);
	box-shadow: 0 0 0 3px rgb(33 107 78 / 0.15);
}

/* The global field focus (border + faint glow) is too subtle here, as on
   the shop toolbar. */
.woocommerce-cart table.cart td.actions .coupon .input-text:focus-visible,
.woocommerce table.shop_table.cart .quantity:not(.has-stepper) .qty:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text.has-error,
.woocommerce-cart table.cart td.actions .coupon .input-text.has-error:focus {
	border-color: #b42318;
}

.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice {
	flex-basis: 100%;
	margin: 0;
	color: #b42318;
	font-size: 0.875rem;
	text-align: left;
}

.woocommerce table.shop_table.cart td.actions .button {
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.65rem 1.5rem;
	border-radius: var(--gh-radius-sm);
}

/* Apply coupon: outlined green. */
.woocommerce table.shop_table.cart td.actions .coupon .button {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-bg);
	color: var(--gh-color-primary);
}

.woocommerce table.shop_table.cart td.actions .coupon .button:hover {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

/* Update cart: outlined neutral, with a refresh icon. WooCommerce disables
   it until a quantity changes. */
.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
	border-color: var(--gh-color-text);
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
	border-color: var(--gh-color-primary);
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"]:disabled {
	border-color: var(--gh-color-border);
	background: var(--gh-color-bg);
	color: var(--gh-color-muted);
	opacity: 1;
	cursor: not-allowed;
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"]::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.5 7.5 0 0 0 6.2 7.2L4.5 9'/%3E%3Cpath d='M4.5 4.5V9H9'/%3E%3Cpath d='M4.5 13.5a7.5 7.5 0 0 0 13.3 3.3l1.7-1.8'/%3E%3Cpath d='M19.5 19.5V15H15'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.5 7.5 0 0 0 6.2 7.2L4.5 9'/%3E%3Cpath d='M4.5 4.5V9H9'/%3E%3Cpath d='M4.5 13.5a7.5 7.5 0 0 0 13.3 3.3l1.7-1.8'/%3E%3Cpath d='M19.5 19.5V15H15'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* SMS Alert's "Share cart" button, printed after the cart table. */
.woocommerce-cart #smsalert_share_cart {
	display: none;
}

/* Totals panel ----------------------------------------------------------- */

.woocommerce .cart-collaterals {
	min-width: 0;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
}

.woocommerce .cart-collaterals .cart_totals h2 {
	margin: 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gh-color-border);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

.woocommerce-cart .cart-collaterals .cart_totals table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
	padding: 0.9rem 0;
	border-top: 1px solid var(--gh-color-border);
	color: var(--gh-color-text);
	line-height: 1.5;
	vertical-align: top;
}

.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child th,
.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child td {
	border-top: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals table th {
	width: auto;
	padding-right: 1rem;
	font-weight: 500;
	text-align: left;
}

.woocommerce-cart .cart-collaterals .cart_totals table td {
	text-align: right;
}

.woocommerce-cart .cart-collaterals .cart_totals table small,
.woocommerce-cart .cart-collaterals .cart_totals p small {
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
}

/* Coupon lines: the discount and WooCommerce's [Remove] link. */
.woocommerce-cart .cart-collaterals .cart_totals .cart-discount td {
	color: var(--gh-color-primary);
}

.woocommerce-cart .cart-collaterals .cart_totals .cart-discount a {
	color: var(--gh-color-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.woocommerce-cart .cart-collaterals .cart_totals .cart-discount a:hover {
	color: #b42318;
}

/* Shipping: WooCommerce's methods, messages, destination and calculator. */
.woocommerce-cart .cart-collaterals .cart_totals .shipping td {
	color: var(--gh-color-muted);
}

.woocommerce-cart .cart-collaterals .cart_totals .shipping td p {
	margin: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals .shipping td p + p,
.woocommerce-cart .cart-collaterals .cart_totals .shipping td p + form,
.woocommerce-cart .cart-collaterals .cart_totals .shipping td ul + p {
	margin-top: 0.4rem;
}

.cart-shipping-note {
	font-size: 0.875rem;
	text-align: right;
}

.woocommerce-cart .cart-collaterals ul#shipping_method {
	margin: 0;
	color: var(--gh-color-text);
}

.woocommerce-cart .cart-collaterals ul#shipping_method li {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
	text-indent: 0;
}

.woocommerce-cart .cart-collaterals ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce-cart .cart-collaterals ul#shipping_method li input {
	margin: 0;
	accent-color: var(--gh-color-primary);
}

.woocommerce-cart .cart-collaterals ul#shipping_method li label {
	font-weight: 400;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-button {
	color: var(--gh-color-primary);
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-form {
	margin: 0.75rem 0 0;
	text-align: left;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-form p {
	margin: 0 0 0.6rem;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-form .button {
	width: 100%;
	border-radius: var(--gh-radius-sm);
}

/* Total. */
.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
	padding-block: 1rem;
	vertical-align: baseline;
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total th {
	font-size: 1.25rem;
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total td strong {
	color: var(--gh-color-primary);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total td small {
	display: block;
	margin-top: 0.25rem;
}

/* Proceed to checkout: full-width dark green with an arrow. */
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	padding: 0.25rem 0 0;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	gap: 0.6rem;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0.85rem 1.25rem;
	border-radius: var(--gh-radius-sm);
	font-size: 1.0625rem;
	text-align: center;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	transition: transform var(--gh-transition);
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover .icon {
	transform: translateX(3px);
}

/* Cart totals and trust indicators (stage 5 phase 2)
   ------------------------------------------------------------------------
   Amounts line up as figures; the pending-shipping row (inc/cart.php) reads
   like WooCommerce's own shipping messages. Trust indicators
   (template-parts/woocommerce/cart-trust.php) sit under Proceed to checkout:
   three centred columns with thin dividers, or one row each with the icon
   beside its label on the narrowest screens. */

.woocommerce-cart .cart-collaterals .cart_totals table td {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.woocommerce-cart .cart-collaterals .cart_totals .shipping--pending td {
	font-size: 0.875rem;
}

/* Narrow panels: long fee or coupon labels would otherwise squeeze the
   shipping options and amounts into a sliver. */
@media (max-width: 480px) {
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th {
		width: 40%;
	}
}

/* One equal column per item, however many labels are set. */
.trust-list--cart {
	grid-template-columns: none;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0;
	margin-top: 1.25rem;
}

.trust-list--cart .trust-list__item {
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.45rem;
	padding: 0.15rem 0.5rem;
	color: var(--gh-color-text);
	font-size: 0.8125rem;
	text-align: center;
}

.trust-list--cart .trust-list__item + .trust-list__item {
	border-left: 1px solid var(--gh-color-border);
}

.trust-list--cart .trust-list__item .icon {
	width: 28px;
	height: 28px;
}

@media (max-width: 399px) {
	.trust-list--cart {
		grid-auto-flow: row;
		gap: 0.75rem;
	}

	.trust-list--cart .trust-list__item {
		flex-direction: row;
		gap: 0.75rem;
		padding: 0;
		text-align: left;
	}

	.trust-list--cart .trust-list__item + .trust-list__item {
		border-left: 0;
	}

	.trust-list--cart .trust-list__item .icon {
		width: 24px;
		height: 24px;
	}
}

/* Empty cart ------------------------------------------------------------- */

.cart-page .wc-empty-cart-message .cart-empty {
	margin: 0;
	padding: clamp(2rem, 6vw, 3.5rem) 1.5rem 1rem;
	border: 1px solid var(--gh-color-border);
	border-bottom: 0;
	border-radius: var(--gh-radius) var(--gh-radius) 0 0;
	background: var(--gh-color-surface);
	font-size: 1.125rem;
	text-align: center;
}

.cart-page .wc-empty-cart-message .cart-empty::before {
	position: static;
	display: block;
	margin: 0 auto 0.75rem;
	font-size: 2rem;
}

.cart-page .return-to-shop {
	margin: 0;
	padding: 0.5rem 1.5rem clamp(2rem, 6vw, 3rem);
	border: 1px solid var(--gh-color-border);
	border-top: 0;
	border-radius: 0 0 var(--gh-radius) var(--gh-radius);
	background: var(--gh-color-surface);
	text-align: center;
}

/* Small screens (WooCommerce's small-screen stylesheet, up to 768px) ----- */

@media (max-width: 768px) {
	/* Each item: thumbnail, name block and remove button on top; price,
	   quantity and subtotal as labelled rows below. */
	.woocommerce table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		column-gap: 0.875rem;
		padding: 1rem;
		border-top: 1px solid var(--gh-color-border);
	}

	.woocommerce table.shop_table.cart tbody tr.cart_item:first-child {
		border-top: 0;
	}

	.woocommerce table.shop_table.cart tr.cart_item td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
		text-align: left !important;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-cart table.cart .product-thumbnail a,
	.woocommerce-cart table.cart .product-thumbnail img {
		width: 72px;
		height: 72px;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-name {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-remove {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-name::before {
		display: none;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-price,
	.woocommerce table.shop_table.cart tr.cart_item td.product-quantity,
	.woocommerce table.shop_table.cart tr.cart_item td.product-subtotal {
		display: flex;
		grid-column: 1 / -1;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding-top: 0.6rem;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-price {
		margin-top: 0.9rem;
		padding-top: 0.9rem;
		border-top: 1px dashed var(--gh-color-border);
	}

	.woocommerce table.shop_table.cart tr.cart_item td::before {
		content: attr(data-title);
		float: none;
		color: var(--gh-color-muted);
		font-weight: 500;
	}

	.woocommerce table.shop_table.cart tr.cart_item td.product-remove::before,
	.woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail::before {
		display: none;
	}

	.cart-qty-fixed {
		align-items: flex-end;
		text-align: right;
	}

	/* Coupon field and buttons fill the width. */
	.woocommerce table.shop_table.cart tbody tr:last-child {
		border-top: 1px solid var(--gh-color-border);
	}

	.woocommerce table.shop_table.cart td.actions {
		padding: 1rem;
		border: 0;
	}

	.woocommerce table.shop_table.cart td.actions .coupon {
		float: none;
		padding-bottom: 0.75rem;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1 1 10rem;
		width: auto;
	}

	.woocommerce table.shop_table.cart td.actions .coupon .button {
		flex: 1 1 auto;
		width: auto;
	}

	.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
		display: flex;
		width: 100%;
	}

	/* Totals keep their two-column rows (WooCommerce stacks them). */
	.woocommerce-cart .cart-collaterals .cart_totals table tr {
		display: table-row;
	}

	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr th,
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td {
		display: table-cell;
		background: none;
	}

	.woocommerce-cart .cart-collaterals .cart_totals table td {
		text-align: right !important;
	}

	.woocommerce-cart .cart-collaterals .cart_totals table td::before {
		display: none;
	}
}

@media (max-width: 400px) {
	.woocommerce table.shop_table.cart tr.cart_item {
		grid-template-columns: 60px minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		padding-inline: 0.875rem;
	}

	.woocommerce-cart table.cart .product-thumbnail a,
	.woocommerce-cart table.cart .product-thumbnail img {
		width: 60px;
		height: 60px;
	}

	.woocommerce table.shop_table.cart td.actions {
		padding-inline: 0.875rem;
	}
}

/* Narrower tables (769–1279px): a smaller thumbnail leaves the name room. */
@media (min-width: 769px) and (max-width: 1279px) {
	.woocommerce-cart table.cart .product-thumbnail {
		width: calc(72px + 1.5rem);
	}

	.woocommerce-cart table.cart .product-thumbnail a,
	.woocommerce-cart table.cart .product-thumbnail img {
		width: 72px;
		height: 72px;
	}
}

/* Cart suggestions (stage 5 phase 3)
   ------------------------------------------------------------------------
   "Usually Bought Together" under the items form and "You May Also Like"
   under the totals panel (inc/cart-suggestions.php). Both are cards like
   the totals panel. The bundle lays its products out in a row with plus
   signs when its own width allows (a container query, so the sidebar
   breakpoint does not matter), otherwise as a list. Empty sections are
   hidden placeholders. */

/* Items form and bundle share the main column; the totals column cannot
   stretch the space between them. */
.cart-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	min-width: 0;
}

.cart-bundle[hidden],
.cart-bundle__item[hidden],
.cart-recs[hidden] {
	display: none;
}

.cart-bundle,
.cart-recs {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius);
	background: var(--gh-color-bg);
}

.cart-bundle__title,
.cart-recs__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.2;
}

/* Headings take focus only when the section they head is redrawn. */
.cart-bundle__title:focus,
.cart-recs__title:focus,
.cart_totals h2:focus {
	outline: none;
}

/* Bundle ----------------------------------------------------------------- */

.cart-bundle {
	container-type: inline-size;
}

.cart-bundle__header {
	margin-bottom: 1.25rem;
}

.cart-bundle__text {
	margin: 0.35rem 0 0;
	color: var(--gh-color-muted);
	font-size: 0.9375rem;
}

.cart-bundle__items {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-bundle__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

/* Stacked: the plus sign sits on the border between two cards. */
.cart-bundle__plus {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 32px;
	height: 32px;
	margin-block: -0.6rem;
	border: 1px solid var(--gh-color-border);
	border-radius: 50%;
	background: var(--gh-color-bg);
	color: var(--gh-color-text);
}

.cart-bundle__plus .icon {
	width: 18px;
	height: 18px;
}

.cart-bundle__card {
	display: grid;
	grid-template-columns: auto 64px minmax(0, 1fr);
	align-items: center;
	gap: 0.875rem;
	height: 100%;
	min-height: 88px;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--gh-color-border);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	cursor: pointer;
	transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
}

.cart-bundle__card:hover,
.cart-bundle__card.is-selected {
	border-color: var(--gh-color-accent);
}

.cart-bundle__card.is-selected {
	box-shadow: var(--gh-shadow-sm);
}

.cart-bundle__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--gh-color-primary);
	cursor: pointer;
}

/* The global input:focus reset (meant for text fields, which get a border
   glow) would leave the box with no focus indicator. */
.cart-bundle__check:focus-visible {
	outline: 2px solid var(--gh-color-primary);
	outline-offset: 2px;
}

.cart-bundle__card:has(.cart-bundle__check:focus-visible) {
	border-color: var(--gh-color-primary);
}

.cart-bundle__media,
.cart-rec__media {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-surface);
}

.woocommerce .cart-bundle__media img,
.woocommerce .cart-rec__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cart-bundle__info,
.cart-rec__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

/* Up to three lines, so a long name cannot stretch every card in the row;
   the full name is still read out with the checkbox. */
.cart-bundle__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: break-word;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.woocommerce .cart-bundle__price,
.woocommerce .cart-rec__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4rem;
	color: var(--gh-color-primary);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce .cart-bundle__price del,
.woocommerce .cart-rec__price del {
	color: var(--gh-color-muted);
	font-size: 0.875em;
	font-weight: 400;
}

.woocommerce .cart-bundle__price ins,
.woocommerce .cart-rec__price ins {
	font-weight: inherit;
	text-decoration: none;
}

/* Row: equal cards side by side when each keeps about 200px for its
   checkbox, image and name (below that, names broke mid-word), the plus
   signs centred in the gaps between them. Two cards from 560px, three from
   780px; four always stack. Only shown cards count: the script hides all
   but two (three on 2000px+ screens). */
@container (min-width: 560px) {
	.cart-bundle__items:not(:has(> :nth-child(3 of :not([hidden])))) {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 3.25rem;
	}

	.cart-bundle__items:not(:has(> :nth-child(3 of :not([hidden])))) .cart-bundle__item {
		position: relative;
	}

	.cart-bundle__items:not(:has(> :nth-child(3 of :not([hidden])))) .cart-bundle__plus {
		position: absolute;
		top: 50%;
		left: calc(-1.625rem - 18px);
		width: 36px;
		height: 36px;
		margin: -18px 0 0;
	}
}

@container (min-width: 780px) {
	.cart-bundle__items:not(:has(> :nth-child(4 of :not([hidden])))) {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 3.25rem;
	}

	.cart-bundle__items:not(:has(> :nth-child(4 of :not([hidden])))) .cart-bundle__item {
		position: relative;
	}

	.cart-bundle__items:not(:has(> :nth-child(4 of :not([hidden])))) .cart-bundle__plus {
		position: absolute;
		top: 50%;
		left: calc(-1.625rem - 18px);
		width: 36px;
		height: 36px;
		margin: -18px 0 0;
	}
}

/* Summary: total and button on a pale green panel. */
.cart-bundle__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-top: 1.25rem;
	padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--gh-color-secondary);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-surface);
}

.cart-bundle__summary-text {
	flex: 1 1 16rem;
	min-width: 0;
}

.cart-bundle__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
	color: var(--gh-color-text);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.cart-bundle__total-amount {
	color: var(--gh-color-primary);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cart-bundle__message,
.cart-bundle__nojs {
	margin: 0.3rem 0 0;
	color: var(--gh-color-muted);
	font-size: 0.9375rem;
}

/* Without JavaScript the total cannot follow the boxes; say so. */
.js .cart-bundle__nojs {
	display: none;
}

.woocommerce button.button.cart-bundle__submit {
	flex: 0 0 auto;
	gap: 0.6rem;
	min-height: 54px;
	padding: 0.85rem 1.75rem;
	border-radius: var(--gh-radius-sm);
	font-size: 1.0625rem;
}

.woocommerce button.button.cart-bundle__submit .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.woocommerce button.button.cart-bundle__submit:disabled {
	cursor: not-allowed;
}

.woocommerce button.button.cart-bundle__submit[aria-busy="true"] {
	cursor: progress;
	opacity: 0.75;
}

.cart-bundle__form.is-busy .cart-bundle__card {
	cursor: progress;
	opacity: 0.7;
}

@container (max-width: 559px) {
	.woocommerce button.button.cart-bundle__submit {
		width: 100%;
	}
}

@container (max-width: 359px) {
	.cart-bundle__card {
		grid-template-columns: auto 52px minmax(0, 1fr);
		gap: 0.75rem;
		padding-inline: 0.75rem;
	}

	.cart-bundle__media {
		width: 52px;
		height: 52px;
	}
}

/* Recommendations -------------------------------------------------------- */

.cart-collaterals .cart-recs {
	margin-top: 1.5rem;
}

.cart-recs__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 0.5rem;
}

.cart-recs__all {
	min-height: 44px;
	color: var(--gh-color-primary);
	font-size: 0.9375rem;
}

.cart-recs__all:hover {
	text-decoration: underline;
}

.cart-recs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-rec {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem;
	padding-block: 0.875rem;
	border-top: 1px solid var(--gh-color-border);
}

.cart-rec:first-child {
	padding-top: 0.25rem;
	border-top: 0;
}

.cart-rec:last-child {
	padding-bottom: 0;
}

.cart-rec__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--gh-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cart-rec__name:hover {
	color: var(--gh-color-primary);
	text-decoration: underline;
}

/* Add: outlined green, like Apply coupon. */
.woocommerce .cart-recs a.button.cart-rec__add {
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 0.95rem;
	border-color: var(--gh-color-primary);
	border-radius: var(--gh-radius-sm);
	background: var(--gh-color-bg);
	color: var(--gh-color-primary);
	font-size: 0.9375rem;
	white-space: nowrap;
}

.woocommerce .cart-recs a.button.cart-rec__add:hover,
.woocommerce .cart-recs a.button.cart-rec__add:focus-visible {
	background: var(--gh-color-primary);
	color: var(--gh-color-bg);
}

.woocommerce .cart-recs a.button.cart-rec__add .icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Add is the only action; buttons plugins inject here (Buy Now) are hidden. */
.cart-rec__action > :not(.cart-rec__add, .added_to_cart, .screen-reader-text) {
	display: none !important;
}

/* WooCommerce's spinner and tick glyphs: loading fades the button instead;
   the section is redrawn once the cart refreshes. */
.woocommerce .cart-recs a.button.cart-rec__add::after {
	content: none;
}

.woocommerce .cart-recs a.button.cart-rec__add.loading {
	padding-right: 0.95rem;
	cursor: progress;
	opacity: 0.6;
}

/* Narrow phones: the button drops below the name. */
@media (max-width: 359px) {
	.cart-rec {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 0.6rem 0.75rem;
	}

	.cart-rec__media {
		grid-row: span 2;
		width: 56px;
		height: 56px;
	}

	.cart-rec__action {
		grid-column: 2;
	}
}