/* === Commerce pages === */

/* Product archives, single product and the enquiry form. */

/*
 * Product archive grid (the product-collection block's Commerce grid style): the
 * source's loop grid, 3/2/1 columns 30px apart, each card in a 10px pad with 10px
 * more under its caption. Below the cards the source's masonry packs the rows
 * without a gap (commerce.js lifts a card under a shorter one); on phones the single
 * column keeps 30px between cards. The card front is 550px tall (440px up to
 * 1024px, 4:5 on phones), the photo cropped to fill it (on phones drawn at 130% of
 * the card's width and centred, as the source's background-size: 130% auto, so a
 * landscape photo leaves white above and below); products without a photo show the
 * white frame only.
 */
.wp-block-woocommerce-product-collection.is-style-commerce-grid .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 30px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .wc-block-product-template > li.wc-block-product {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 10px 10px 20px;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child {
	height: 550px;
	aspect-ratio: auto;
	background: var(--wp--preset--color--base);
}

/* The title is inline text on its 24px line; the source's title widget sets it 1px
   lower than that line box does. */
.wp-block-woocommerce-product-collection.is-style-commerce-grid .wp-block-post-title {
	position: relative;
	top: 1px;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .wp-block-post-title a {
	display: inline;
}

/* A product without a material label drops the label line: its card is 21px shorter,
   as the source's loop item without the label widget. */
.wp-block-woocommerce-product-collection.is-style-commerce-grid :where(.wp-block-post-title + p:empty) {
	display: none;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .wc-block-product-template > li.wc-block-product:has(> p:empty) {
	padding-bottom: 21px;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child .wc-block-components-product-image a {
	display: block;
	height: 100%;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child img.woocommerce-placeholder {
	visibility: hidden;
}

/* The back's frame fades from the kit's #c36 to the link hover colour #336 as the
   back fades in (the source's flip box transitions all its properties over 0.3s);
   the card's inline frame colour is the hover end. VIEW sits 1px lower than the
   flex centring puts it, as the source's back title does. */
.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:nth-child(2) {
	border-color: #c36 !important;
	transition: opacity 0.3s, border-color 0.3s;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .wp-block-tillander-flip-card:is(:hover, :focus-within) .tillander-flip-card__inner > .wp-block-group:nth-child(2) {
	border-color: #336 !important;
}

.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:nth-child(2) .wp-block-read-more {
	position: relative;
	top: 1px;
}

@media (width <= 1024px) {
	.wp-block-woocommerce-product-collection.is-style-commerce-grid .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child {
		height: 440px;
	}
}

@media (width <= 767px) {
	.wp-block-woocommerce-product-collection.is-style-commerce-grid .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 30px;
	}

	.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.wp-block-woocommerce-product-collection.is-style-commerce-grid .tillander-flip-card__inner > .wp-block-group:first-child img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 130%;
		max-width: none;
		height: auto;
		transform: translate(-50%, -50%);
	}
}

/*
 * Single product (the beige band's Commerce product style), as the source's product
 * template: the classic gallery full-column (Woo's gallery block caps itself at
 * 512px and floats the gallery) with its thumbnails four to a row 50px under the
 * photo and 2em under them, the zoom button 16px in; the price in Conso Special.
 */
.wp-block-group.is-style-commerce-product .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.wp-block-group.is-style-commerce-product .wp-block-woocommerce-product-image-gallery div.woocommerce-product-gallery {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 0 2em;
}

.wp-block-group.is-style-commerce-product .woocommerce-product-gallery .flex-viewport:not(:last-child),
.wp-block-group.is-style-commerce-product .woocommerce-product-gallery__wrapper:not(:last-child) {
	margin-bottom: 50px;
}

.wp-block-group.is-style-commerce-product .woocommerce-product-gallery__trigger {
	top: 16px;
	right: 16px;
}

.wp-block-group.is-style-commerce-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.wp-block-group.is-style-commerce-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 25%;
	margin: 0;
	padding: 0;
}

/* The source's text widgets keep their last paragraph's 0.9rem bottom margin inside
   the widget, so it adds to the 20px between widgets; the price likewise, its widget
   as wide as the price. */
.wp-block-group.is-style-commerce-product :is(.wp-block-woocommerce-product-summary, .wp-block-woocommerce-product-price) {
	display: flow-root;
}

.wp-block-group.is-style-commerce-product .wp-block-woocommerce-product-price {
	width: fit-content;
}

.wp-block-group.is-style-commerce-product .wc-block-components-product-summary p {
	margin: 0 0 14.4px;
}

.wp-block-group.is-style-commerce-product .wc-block-components-product-price {
	margin-bottom: 14.4px;
}

/* An empty lead-time line (inc/commerce.php) keeps its own gap: as its own formatting
   context its margins do not collapse into the next block's. */
.wp-block-group.is-style-commerce-product p:empty {
	display: flow-root;
}

/* The source shows no add-to-cart button: simple products show no form, variable
   products their attribute selects (the form as wide as its table) and the chosen
   variation's price centred under them, 20px over the hidden button row. */
.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form {
	width: fit-content;
	max-width: 100%;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.cart:not(.variations_form),
.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.cart .single_add_to_cart_button {
	display: none;
}

/* Woo's variation script shows the quantity with an inline display on every pick. */
.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.cart .quantity {
	display: none !important;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.variations_form {
	display: block;
	margin: 0;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.variations_form table.variations {
	display: table;
	width: 100%;
	margin: 0 0 14.4px;
	font-size: 14.4px;
	line-height: 1.5;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.variations_form table.variations :is(th, td) {
	padding: 1px 15px 1px 0;
	line-height: 2em;
	text-align: left;
	vertical-align: top;
}

.is-style-commerce-product table.variations label {
	display: inline-block;
	margin: 0;
	line-height: 1;
	vertical-align: middle;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.variations_form table.variations select {
	width: 100%;
	height: auto;
	min-width: 75%;
	max-width: 100%;
	margin-right: 1em;
	padding: 8px 43.2px 8px 16px;
	border: 1px solid;
	border-radius: 0;
	background-color: transparent;
	color: #000;
	font-family: var(--wp--preset--font-family--futura-pt);
	font-size: 14.4px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form form.variations_form .reset_variations {
	font-size: 0.83em;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation {
	margin: 0;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation-price {
	width: fit-content;
	margin-inline: auto;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation-price .price {
	font-size: 1.25em;
	line-height: 1.5;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation-add-to-cart {
	display: block;
}

.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation-add-to-cart-enabled {
	padding-top: 20px;
}

/* PRODUCT DETAILS: the source's nested accordion, pulled 10px left at the column's
   width — the title 10px in, a 15px plus (a minus when open) 10px after it; the
   attribute rows in a 20px-padded panel. */
.wp-block-details.is-style-commerce-details {
	box-sizing: border-box;
	width: 100%;
}

.wp-block-details.is-style-commerce-details > summary {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px;
	color: #000;
	font-family: var(--wp--preset--font-family--futura-pt);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0.4px;
	list-style: none;
	cursor: pointer;
}

.wp-block-details.is-style-commerce-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-commerce-details:not([open]) > summary::after {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M492 236H276V20a20 20 0 0 0-40 0v216H20a20 20 0 0 0 0 40h216v216a20 20 0 0 0 40 0V276h216a20 20 0 0 0 0-40z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.wp-block-details.is-style-commerce-details[open] > summary::after {
	content: "";
	width: 24px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4.25 12a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1-.75-.75z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.wp-block-details.is-style-commerce-details .woocommerce-tabs ul.tabs,
.wp-block-details.is-style-commerce-details .woocommerce-Tabs-panel h2 {
	display: none;
}

.wp-block-details.is-style-commerce-details > .wp-block-woocommerce-product-details {
	margin: 0;
}

.wp-block-details.is-style-commerce-details .woocommerce-tabs {
	margin: 0;
	padding: 0;
}

.wp-block-details.is-style-commerce-details .wp-block-woocommerce-product-details .woocommerce-tabs .woocommerce-Tabs-panel {
	margin: 0;
	padding: 20px;
}

/* Woo's attribute table: 1.618em under it, the values in italics, label and value
   on one baseline. */
.wp-block-details.is-style-commerce-details table.shop_attributes {
	width: 100%;
	margin: 0 0 1.618em;
	border: 0;
	border-collapse: collapse;
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14.4px;
	line-height: 1.5;
	text-align: left;
}

.wp-block-details.is-style-commerce-details table.shop_attributes :is(th, td) {
	box-sizing: border-box;
	border: 0;
	background: none;
	vertical-align: baseline;
}

.wp-block-details.is-style-commerce-details table.shop_attributes th {
	width: 100px;
	padding: 8px;
	font-weight: 700;
	text-align: left;
}

.wp-block-details.is-style-commerce-details table.shop_attributes td {
	padding: 0 0 0 10px;
	font-style: italic;
}

.wp-block-details.is-style-commerce-details table.shop_attributes td p {
	margin: 0;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--futura-pt);
	font-weight: 300;
}

/* Woo's small-screen sheet (up to 768px) stacks each label over its value. */
@media (width <= 768px) {
	.wp-block-details.is-style-commerce-details table.shop_attributes tr,
	.wp-block-details.is-style-commerce-details table.shop_attributes :is(th, td) {
		display: block;
	}

	.wp-block-details.is-style-commerce-details table.shop_attributes th {
		padding: 0.5em 0.5em 0.25em;
	}

	.wp-block-details.is-style-commerce-details table.shop_attributes td {
		padding: 0.25em 0.5em 0.5em 10px;
	}

	.wp-block-details.is-style-commerce-details table.shop_attributes td p {
		padding: 0;
	}
}

/* CURIOUS ABOUT THIS PIECE?: open by default; a black bar with near-white type when
   open or hovered, the form in a 1px black frame under it. */
.wp-block-details.is-style-commerce-enquiry > summary {
	padding: 10px;
	border: 1px solid #000;
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.wp-block-details.is-style-commerce-enquiry > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-commerce-enquiry[open] > summary,
.wp-block-details.is-style-commerce-enquiry > summary:hover {
	background: #000;
	color: #fdfdfd;
}

.wp-block-details.is-style-commerce-enquiry > .tillander-form {
	margin: 0;
	padding: 20px;
	border: 1px solid #000;
}

/* The enquiry form (inc/enquiry-form.php): fields stacked full width or in halves. */
.tillander-form__fields {
	display: flex;
	flex-wrap: wrap;
}

.tillander-form__field {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	box-sizing: border-box;
}

.tillander-form__field--half {
	flex-basis: 50%;
}

.tillander-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tillander-form__submit,
.tillander-form__note {
	flex: 0 0 100%;
}

/* The product enquiry, as the source's Elementor form: labels above in Futura
   Medium, 40px fields on 56% white, the product line framed, a full-width black
   SEND that shrinks on hover (0.3s). */
.wp-block-details.is-style-commerce-enquiry .tillander-form__field {
	margin-bottom: 10px;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field--product {
	margin-bottom: 30px;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field label {
	margin: 0;
	padding-bottom: 7px;
	color: #000;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.4px;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 0;
	background: rgb(255 255 255 / 56%);
	color: #9b9b9b;
	font-family: var(--wp--preset--font-family--futura-pt);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field textarea {
	padding: 5px 14px;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field :is(input, textarea)::placeholder {
	color: inherit;
	opacity: 0.6;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__field input:disabled {
	border: 1px solid #000;
	color: #000;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__button {
	width: 100%;
	min-height: 40px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: #000;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.375px;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.3s;
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__button:hover {
	transform: scale(0.9);
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__message {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--body);
}

.wp-block-details.is-style-commerce-enquiry .tillander-form__message--danger {
	color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details.is-style-commerce-enquiry .tillander-form__button {
		transition: none;
	}
}

/* Commerce: cart, checkout and account. */

/* Live renders cart, checkout and account in hello-biz's .site-main: a stepped
   container (1140/800/600/500px, 10px gutters below 576px) in #333 text. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main {
	box-sizing: border-box;
	max-width: 1140px;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
}

/* hello-biz's .alignwide (margin-inline: -80px) shifts the cart block left without
   widening it. */
.woocommerce-cart main .wp-block-woocommerce-cart {
	margin-right: 80px;
	margin-left: -80px;
	padding-top: 2em;
}

/* Live has only core's default presets; Woo's cart and checkout components size from them. */
:is(.woocommerce-cart, .woocommerce-checkout) main :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) {
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--style--block-gap: 24px;
}

/* hello-biz base element styles and the kit's typography. Selectors sit one element above
   hello's own specificity, so Woo's component styles still override them as on live. */
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(*, ::before, ::after) {
	box-sizing: border-box;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0.5rem 1rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: inherit;
	color: inherit;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(h2, h3) {
	font-family: var(--wp--preset--font-family--conso);
	font-weight: 200;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(a) {
	color: #c36;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(a):hover {
	color: #336;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main table {
	width: 100%;
	margin-block-end: 15px;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.9em;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(td, th) {
	padding: 15px;
	border: 1px solid hsl(0deg 0% 50% / 50.2%);
	line-height: 1.5;
	vertical-align: top;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(caption + thead, thead:first-child) tr:first-child :is(td, th) {
	border-block-start: 1px solid hsl(0deg 0% 50% / 50.2%);
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(label) {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(button, input, optgroup, select, textarea) {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(input:is([type="email"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"]), select, textarea) {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid #666;
	border-radius: 3px;
	transition: all 0.3s;
}

/* Core's default button element (live has no theme.json), at core's own specificity. */
:where(.woocommerce-cart main, .woocommerce-checkout main, .woocommerce-account main) :is(.wp-element-button, .wp-block-button__link) {
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	border-width: 0;
	border-radius: 0;
	background-color: #32373c;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	text-transform: inherit;
}

:where(.woocommerce-cart main, .woocommerce-checkout main, .woocommerce-account main) :is(.wp-block-button__link) {
	border-radius: 9999px;
	transition-duration: 0s;
}

/* hello-biz buttons. A bare `button` stays under core's button element; [type="button"] and
   [type="submit"] match its specificity and follow it, as theme.css follows the global
   styles on live. */
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main button,
:where(.woocommerce-cart main, .woocommerce-checkout main, .woocommerce-account main) :is([type="button"], [type="submit"]) {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid #c36;
	border-radius: 3px;
	background-color: transparent;
	color: #c36;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	transition: all 0.3s;
	user-select: none;
}

/* hello's button hover stays under Woo's component rules (they load after it on live). */
:where(.woocommerce-cart main, .woocommerce-checkout main, .woocommerce-account main) :is(button, [type="button"], [type="submit"]):where(:hover, :focus) {
	background-color: #c36;
	color: #fff;
	text-decoration: none;
}

/* The kit's button typography (.elementor-kit-6 button) outranks Woo's component styles. */
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-block-post-content button,
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-block-post-content :is(input[type="button"], input[type="submit"]) {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* hello-biz underlines every link in the page content (.page-content a). */
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-block-post-content :is(a) {
	text-decoration: underline;
}

/* The empty-cart dots keep the browser's grey hr colour. */
.woocommerce-cart main hr.wp-block-separator {
	color: gray;
}

/* WP's sizes="auto" lazy thumbnails carry contain-intrinsic-size: 3000px 1500px, which
   stretches their shrink-to-fit link; live's thumbnails are 300px intrinsic. */
.woocommerce-cart main .wc-block-grid__product-image :is(img) {
	contain-intrinsic-size: 300px;
}

/* Live's header CSS sets the price currency symbol in Futura PT 500 (cart, checkout,
   account and the chosen variation's price). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main .woocommerce-Price-currencySymbol,
.wp-block-group.is-style-commerce-product .wp-block-add-to-cart-form .woocommerce-variation-price .woocommerce-Price-currencySymbol {
	font-family: "Futura PT", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 500;
	font-synthesis: none;
	letter-spacing: 0;
}

/* The kit's cart customisations: "Jewelry" column label, black product names, prices and
   totals, a renamed totals heading and an outlined Proceed button that fills on hover. */
.woocommerce-cart main th.wc-block-cart-items__header-image > span {
	display: none;
}

.woocommerce-cart main th.wc-block-cart-items__header-image::before {
	content: "Jewelry";
}

.woocommerce-cart main a.wc-block-components-product-name {
	color: #000;
	text-decoration: none;
}

:is(.woocommerce-cart, .woocommerce-checkout) main span.wc-block-components-product-price__value,
.woocommerce-cart main :is(h2.wc-block-cart__totals-title, span.wc-block-components-totals-item__label, tr.wc-block-cart-items__header) {
	color: #000;
}

/* Live's footer script sets h2s rendered in Futura (this one) to 1rem. */
.woocommerce-cart main h2.wc-block-cart__totals-title {
	font-size: 1rem;
	visibility: hidden;
}

.woocommerce-cart main h2.wc-block-cart__totals-title::before {
	content: "Shopping  cart total";
	visibility: visible;
}

.woocommerce-cart main a.wc-block-cart__submit-button {
	background: #fff;
	color: #000;
	text-decoration: none;
	transition: 300ms;
}

.woocommerce-cart main a.wc-block-cart__submit-button:hover {
	background: #000;
	color: #fff;
}

/* hello's paragraph margins; the kit sets every paragraph in futura-PT 300 (!important),
   over Woo's component weights. */
:where(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main :is(p) {
	margin-block: 0 0.9rem;
	font-family: var(--wp--preset--font-family--futura-pt) !important;
	font-weight: 300 !important;
}

/* Place Order: Woo's own 18px 30px padding and the kit's black outline, filled on hover. */
.woocommerce-checkout main .wc-block-components-button.wc-block-components-checkout-place-order-button {
	padding: 18px 30px;
	border-color: #000;
	color: #000;
}

.woocommerce-checkout main .wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	border-color: #000;
	background: #000;
	color: #fff;
}

/* Woo's address-card Edit (a span with type="button") keeps hello's padding but Woo's
   borderless, inherited text, which on live wins hello's [type="button"] rule by load order. */
.woocommerce-checkout main .wc-block-components-address-card__edit {
	border: 0;
	color: inherit;
	font-size: inherit;
}

@media (width < 1200px) {
	:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main {
		max-width: 800px;
	}
}

@media (width < 992px) {
	:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main {
		max-width: 600px;
	}
}

@media (width < 768px) {
	:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main {
		max-width: 500px;
	}
}

@media (width < 576px) {
	:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main {
		max-width: none;
		padding-inline: 10px;
	}
}