/* ==========================================================================
   LOUDcpt — WooCommerce

   Loaded after WooCommerce's own stylesheets, so everything here is an
   override or an addition.

   1. WooCommerce colour variables
   2. Buttons, notices, forms
   3. Product cards and grids
   4. Shop and category pages
   5. Product page  (including the layering fix — read the note there)
   6. Cart drawer
   7. Cart, checkout, account
   ========================================================================== */

/* 1. WooCommerce colour variables
   ========================================================================== */

:root {
	--wc-primary: var(--soot);
	--wc-primary-text: #ffffff;
	--wc-secondary: var(--ash);
	--wc-secondary-text: var(--soot);
	--wc-highlight: var(--ember);
	--wc-highligh-text: var(--on-ember);
	--wc-subtext: var(--smoke);
	--wc-form-border-color: var(--field-line);
	--wc-form-border-radius: 0;
	--wc-card-border-radius: 0;

	/* The accent, darkened until it is readable as small text on white. */
	--ember-ink: color-mix(in srgb, var(--ember) 68%, #000);
}

/* 2. Buttons, notices, forms
   ========================================================================== */

.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,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.drawer--cart a.button,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.9rem;
	border: 1px solid var(--btn-bg);
	border-radius: 0;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-text);
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: var(--caps-tracking);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.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,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.drawer--cart a.button:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover {
	border-color: var(--ember);
	background: var(--ember);
	color: var(--on-ember);
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover {
	border-color: var(--line);
	background: var(--ash);
	color: var(--smoke);
	opacity: 1;
}

.woocommerce a.button.loading,
.woocommerce button.button.loading {
	opacity: 0.65;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 0;
	border-left: 2px solid var(--soot);
	border-radius: 0;
	background: var(--ash);
	color: var(--soot);
}

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

.woocommerce-error {
	border-left-color: var(--ember);
}

.woocommerce-error::before {
	color: var(--ember-ink);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	min-height: 2.25rem;
	padding: 0.4rem 1.1rem;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--soot);
}

.woocommerce .star-rating::before {
	color: var(--line);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	border-color: var(--field-line);
	border-radius: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 0.3rem;
	line-height: 1.4;
}

.select2-container--default .select2-selection--single {
	height: 3rem;
	border-color: var(--field-line);
	border-radius: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 0.9rem;
	line-height: calc(3rem - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(3rem - 2px);
	right: 0.5rem;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border-color: var(--line);
	border-radius: 0;
}

/* 3. Product cards and grids
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3rem) var(--gap);
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce's float clearers would otherwise become grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

body .woocommerce ul.products li.product,
body.woocommerce ul.products li.product,
body .woocommerce-page ul.products li.product,
body.woocommerce-page ul.products li.product,
body .woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product {
	position: relative;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

@media (min-width: 700px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce ul.products.columns-2,
	.woocommerce-page ul.products.columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.woocommerce ul.products.columns-5,
	.woocommerce-page ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Card */

.card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	margin-bottom: 0.95rem;
	background: var(--ash);
}

.card-ratio-portrait .card-media {
	aspect-ratio: 4 / 5;
}

.bg-ash .card-media {
	background: var(--paper);
}

.card-media__link {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce ul.products li.product .card-media img,
.woocommerce-page ul.products li.product .card-media img {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 7%;
	object-fit: contain;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Photos shot on white melt into the card instead of sitting in a white box. */
.card-blend .card-media img {
	mix-blend-mode: multiply;
}

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

.woocommerce ul.products li.product .card-media .onsale,
.woocommerce span.onsale,
.card-flag {
	position: absolute;
	top: 0.75rem;
	right: auto;
	left: 0.75rem;
	z-index: var(--z-raised);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.32rem 0.6rem;
	border-radius: 0;
	background: var(--ember);
	color: var(--on-ember);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

.card-flag--soldout {
	right: 0.75rem;
	left: auto;
	background: var(--soot);
	color: #fff;
}

/* Add to cart: slides up over the image for pointer users. */
.woocommerce ul.products li.product .card-media .button,
.woocommerce ul.products li.product .card-media .added_to_cart {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: var(--z-raised);
	min-height: 2.75rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	border-color: var(--soot);
	background: var(--paper);
	color: var(--soot);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.22s, transform 0.22s, background-color 0.2s, color 0.2s;
}

.woocommerce ul.products li.product:hover .card-media .button,
.woocommerce ul.products li.product:focus-within .card-media .button,
.woocommerce ul.products li.product .card-media .button.loading,
.woocommerce ul.products li.product .card-media .added_to_cart {
	opacity: 1;
	transform: none;
}

.woocommerce ul.products li.product .card-media .button:hover {
	border-color: var(--soot);
	background: var(--soot);
	color: #fff;
}

.woocommerce ul.products li.product .card-media .button.added {
	display: none;
}

.woocommerce ul.products li.product .card-media .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--soot);
	background: var(--soot);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-decoration: none;
	text-transform: uppercase;
}

@media (hover: none) {
	/* On touch screens a tap opens the product, so the hover button stays out of the way. */
	.woocommerce ul.products li.product .card-media .button:not(.loading) {
		display: none;
	}
}

.card-no-cart .card-media .button,
.card-no-cart .card-media .added_to_cart {
	display: none !important;
}

.card-info {
	display: block;
	color: var(--fg);
	text-decoration: none;
}

.card-brand {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--fg-muted);
	font-size: 0.68rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.35rem;
	padding: 0;
	font-family: var(--font-text);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
	text-wrap: pretty;
}

.card-info:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-decoration-color: var(--ember);
	text-underline-offset: 0.2em;
}

.woocommerce ul.products li.product .card-info .price,
.woocommerce-page ul.products li.product .card-info .price {
	display: block;
	margin: 0;
	color: var(--fg);
	font-size: 0.97rem;
	font-weight: 400;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	margin-right: 0.35em;
	color: var(--fg-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--ember-ink);
	font-weight: 600;
	text-decoration: none;
}

.bg-dark ul.products li.product .price ins {
	color: var(--amber);
}

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

/* Sideways-scrolling rows on the homepage */

.carousel__viewport ul.products,
.woocommerce .carousel__viewport ul.products[class*="columns-"] {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.carousel__viewport ul.products::-webkit-scrollbar {
	display: none;
}

body .carousel__viewport ul.products li.product,
body .woocommerce .carousel__viewport ul.products[class*="columns-"] li.product {
	flex: 0 0 calc((100% - var(--gap) * 1.25) / 2.25);
	scroll-snap-align: start;
}

@media (min-width: 700px) {
	body .carousel__viewport ul.products li.product,
	body .woocommerce .carousel__viewport ul.products[class*="columns-"] li.product {
		flex-basis: calc((100% - var(--gap) * 2) / 3);
	}
}

@media (min-width: 1000px) {
	body .carousel__viewport ul.products li.product,
	body .woocommerce .carousel__viewport ul.products[class*="columns-"] li.product {
		flex-basis: calc((100% - var(--gap) * 3) / 4);
	}
}

/* 4. Shop and category pages
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 1.5rem;
	color: var(--smoke);
	font-size: 0.82rem;
}

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

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--soot);
	text-decoration: underline;
}

.breadcrumb-sep {
	margin-inline: 0.55em;
	opacity: 0.6;
}

.woocommerce-products-header {
	max-width: 52rem;
	margin: clamp(0.5rem, 2vw, 1.5rem) auto clamp(2rem, 4vw, 3.25rem);
	text-align: center;
}

.woocommerce-products-header .page-title {
	margin: 0;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
	margin-top: 1rem;
	color: var(--smoke);
}

.woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

.woocommerce .woocommerce-result-count {
	margin: 0 0 1.5rem;
	padding-top: 0.65rem;
	color: var(--smoke);
	font-size: 0.9rem;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 1.5rem;
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	min-height: 2.75rem;
	padding-block: 0.5rem;
	font-size: 0.9rem;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	min-width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	padding: 0 0.5rem;
	border: 1px solid transparent;
	background: none;
	color: var(--soot);
	font-size: 0.95rem;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	border-color: var(--line);
	background: none;
	color: var(--soot);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--soot);
	background: none;
	color: var(--soot);
}

/* Filters: a drawer on small screens, a quiet column on large ones. */

.shop-filters-toggle {
	width: 100%;
	margin-bottom: 1.5rem;
}

.shop-filters .widget {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.shop-filters .widget:last-child {
	border-bottom: 0;
}

@media (min-width: 1000px) {
	.shop-layout {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		align-items: start;
		gap: clamp(2rem, 4vw, 4rem);
	}

	.shop-filters-toggle,
	.shop-filters .drawer__head {
		display: none;
	}

	.shop-layout > .shop-filters.drawer {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
		z-index: auto;
		width: auto;
		max-height: calc(100vh - var(--header-h) - 3rem);
		overflow-y: auto;
		background: none;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.shop-layout > .shop-filters .drawer__body {
		overflow: visible;
		padding: 0;
	}
}

/* 5. Product page
   ==========================================================================

   LAYERING — why product descriptions used to end up in the wrong place.

   WooCommerce gives its gallery controls large z-index values (the zoom
   button is 99, the sale badge 9), floats the gallery and the summary, and
   leaves the description tabs unpositioned. Add a sticky header, a sticky
   buy box or a description pasted from a page builder with its own z-index,
   and things start sliding over or under each other: the description hides
   behind the gallery, or its content scrolls over the header.

   The fix here is structural rather than a pile of bigger numbers:

   1. The whole page content is sealed (.site-main, in main.css), so nothing
      on a product page can rise above the header, a drawer or the age gate.
   2. The product is laid out with CSS grid, not floats, so the description
      always starts below the gallery and the summary. Nothing has to "clear".
   3. Inside the product, each part gets an explicit place on a three-step
      scale: gallery and summary (1), then badges (2), then the description,
      upsells and related products (2, and later in the page so they win ties).
   4. The gallery and each description panel are sealed too, so WooCommerce's
      99 and anything inside a pasted description stay inside their own box.
   ========================================================================== */

.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5.5rem);
	isolation: isolate;
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* Everything that isn't the gallery or the summary spans the full width, below them. */
.single-product div.product > :not(.woocommerce-product-gallery):not(.summary):not(.onsale) {
	position: relative;
	z-index: var(--z-above);
	grid-column: 1 / -1;
	min-width: 0;
	background: var(--paper);
}

.single-product.woocommerce div.product div.images,
.single-product.woocommerce div.product div.summary,
.single-product.woocommerce-page div.product div.images,
.single-product.woocommerce-page div.product div.summary {
	position: relative;
	z-index: var(--z-raised);
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

/* Sealed: the zoom button's z-index of 99 now only competes inside the gallery. */
.single-product.woocommerce div.product div.images {
	isolation: isolate;
}

.single-product div.product > .onsale {
	z-index: var(--z-above);
}

@media (min-width: 900px) {
	.product-sticky-summary.single-product.woocommerce div.product div.summary {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}
}

/* Gallery */

/* The grey sits on each slide (not only the wrapper) so the photo blends with it
   even once the slider has promoted the slide to its own layer. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	background: var(--ash);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image {
	overflow: hidden;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
}

.card-blend.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img {
	mix-blend-mode: multiply;
}

.woocommerce div.product div.images .zoomImg {
	background: var(--paper);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.6rem;
	margin-top: 0.6rem;
	overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
	background: var(--ash);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 0.55;
	transition: opacity 0.2s;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	outline: 1px solid var(--soot);
	outline-offset: -1px;
}

/* Summary */

.product-brand {
	margin: 0 0 0.7rem;
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

.product-brand a {
	color: var(--smoke);
	text-decoration: none;
}

.product-brand a:hover {
	color: var(--soot);
	text-decoration: underline;
	text-decoration-color: var(--ember);
}

.woocommerce div.product .product_title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 3.3vw, 3rem);
	line-height: 1.07;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--soot);
	font-size: 1.35rem;
}

.woocommerce div.product p.price del {
	font-size: 1.05rem;
}

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

.woocommerce-product-details__short-description {
	margin-block: 1.25rem 1.75rem;
	color: var(--smoke);
}

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

.woocommerce div.product form.cart {
	margin: 0 0 1.5rem;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	display: none;
}

.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	flex: 0 0 5.5rem;
	margin: 0;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 100%;
	height: 3.4rem;
	padding-inline: 0.4rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	float: none;
	flex: 1 1 12rem;
	min-height: 3.4rem;
}

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart table.variations {
	margin-bottom: 1rem;
}

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

.woocommerce div.product form.cart table.variations th label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

.woocommerce div.product form.cart table.variations select {
	min-width: 0;
	margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--smoke);
	font-size: 0.85rem;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-bottom: 1rem;
}

.woocommerce div.product .stock {
	color: var(--soot);
	font-size: 0.9rem;
}

.woocommerce div.product .out-of-stock {
	color: var(--ember-ink);
	font-weight: 600;
}

.product-note {
	margin: 0;
	padding: 0;
	color: var(--smoke);
	font-size: 0.9rem;
	list-style: none;
}

.product-note li {
	position: relative;
	margin-bottom: 0.3rem;
	padding-left: 1.5rem;
}

.product-note li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 0.8rem;
	height: 1px;
	background: currentColor;
}

.woocommerce div.product .product_meta {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	color: var(--smoke);
	font-size: 0.85rem;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 0.2rem;
}

/* Description, details, reviews — as tabs */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(1.25rem, 3vw, 2.75rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	overflow: visible;
	border-bottom: 1px solid var(--line);
}

.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 {
	display: none;
}

/* WooCommerce stacks its tabs with z-index 0 and 2; flat tabs need none. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	z-index: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	position: relative;
	padding: 1rem 0;
	color: var(--smoke);
	font-size: 0.76rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--flame);
}

/*
 * Each panel is sealed. Whatever is pasted into a description — tables,
 * videos, page-builder markup with its own z-index — stays inside the panel.
 */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	position: relative;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0;
	isolation: isolate;
	/* Anything too wide to shrink (a many-column table, say) scrolls inside the
	   panel instead of pushing the whole page sideways. */
	overflow-x: auto;
	overflow-wrap: break-word;
	scroll-margin-top: calc(var(--header-h) + 5rem);
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--reviews,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information {
	max-width: 52rem;
}

.woocommerce div.product .woocommerce-Tabs-panel img,
.woocommerce div.product .woocommerce-Tabs-panel iframe,
.woocommerce div.product .woocommerce-Tabs-panel video,
.woocommerce div.product .woocommerce-Tabs-panel table {
	max-width: 100%;
}

.woocommerce table.shop_attributes {
	border: 0;
	border-top: 1px solid var(--line);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 0.8rem 0.5rem 0.8rem 0;
	border-bottom: 1px solid var(--line);
	background: none !important;
	font-style: normal;
}

.woocommerce table.shop_attributes th {
	width: 12rem;
	font-weight: 650;
}

.woocommerce table.shop_attributes td p {
	padding: 0;
}

/* …or one after another */

.product-info-stack {
	border-bottom: 1px solid var(--line);
}

.woocommerce div.product .product-info-stack .product-info-stack__section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	gap: 1rem;
	margin: 0;
	padding-block: clamp(2rem, 4vw, 3.25rem);
	border-top: 1px solid var(--line);
}

.product-info-stack__section > * {
	margin: 0;
}

.product-info-stack__title {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.product-info-stack__body {
	min-width: 0;
}

.product-info-stack__body > :last-child {
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.woocommerce div.product .product-info-stack .product-info-stack__section {
		grid-template-columns: 16rem minmax(0, var(--measure));
		gap: clamp(2rem, 5vw, 5rem);
	}
}

/* Reviews */

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

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border-color: var(--line);
	border-radius: 0;
}

.woocommerce #review_form #respond .comment-reply-title {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
}

/* Related and upsells */

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
	text-align: center;
}

/* 6. Cart drawer
   ========================================================================== */

.drawer--cart .drawer__body {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.drawer--cart .widget_shopping_cart_content {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
}

#cart-drawer ul.woocommerce-mini-cart {
	flex: 1;
	margin: 0;
	padding: 0 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

#cart-drawer ul.woocommerce-mini-cart li {
	position: relative;
	min-height: 6.75rem;
	margin: 0;
	padding: 1.1rem 2rem 1.1rem 5.75rem;
	border-bottom: 1px solid var(--line);
}

#cart-drawer ul.woocommerce-mini-cart li a:not(.remove) {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

#cart-drawer ul.woocommerce-mini-cart li img {
	position: absolute;
	top: 1.1rem;
	left: 0;
	float: none;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0;
	border: 1px solid var(--line);
	object-fit: contain;
}

#cart-drawer ul.woocommerce-mini-cart li a.remove {
	position: absolute;
	top: 0.9rem;
	right: -0.4rem;
	left: auto;
	display: grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 0;
	background: none;
	color: var(--smoke) !important;
	font-size: 1.4rem;
	font-weight: 400;
}

#cart-drawer ul.woocommerce-mini-cart li a.remove:hover {
	background: none;
	color: var(--soot) !important;
}

#cart-drawer .quantity,
#cart-drawer dl.variation {
	color: var(--smoke);
	font-size: 0.9rem;
}

#cart-drawer dl.variation {
	margin: 0 0 0.25rem;
	padding: 0;
	border: 0;
}

#cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 1.1rem 1.5rem;
	border-top: 1px solid var(--line);
}

#cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0 1.5rem 1.5rem;
}

#cart-drawer .woocommerce-mini-cart__buttons .button {
	width: 100%;
	margin: 0;
}

#cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
	border-color: var(--soot);
	background: transparent;
	color: var(--soot);
}

#cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--soot);
	color: #fff;
}

#cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 3rem 1.5rem;
	color: var(--smoke);
	text-align: center;
}

/* 7. Cart, checkout, account
   ========================================================================== */

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	padding: 0.9rem 0.75rem;
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: var(--caps-tracking);
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: 1rem 0.75rem;
	border-top: 1px solid var(--line);
}

.woocommerce table.shop_table td.product-name a {
	text-decoration: none;
}

.woocommerce-cart table.cart img {
	width: 5rem;
	background: var(--ash);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 12rem;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	min-height: 3.4rem;
	margin-bottom: 0;
	font-size: 0.78rem;
}

.woocommerce-checkout #payment {
	border-radius: 0;
	background: var(--ash);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--paper);
	color: var(--soot);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--paper);
}

.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	min-height: 3.4rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.8rem 0;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 650;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ember);
}

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button {
	min-height: 3.4rem;
}