/* ==========================================================================
   Checkout — Shopify-style two-column: form left, sticky order summary right.
   Styles WooCommerce's native field markup (p.form-row etc.) so the WC
   checkout JS keeps working untouched.
   ========================================================================== */

.hw-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: 3rem;
	align-items: start;
}

@media (max-width: 989px) {
	.hw-checkout__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.hw-checkout__aside {
		order: -1; /* summary first on mobile, Shopify-style collapsed look */
	}
}

.hw-checkout__main {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* Flat sections (round 3): no cards — headings + whitespace, Shopify-style */
.hw-checkout__section {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.hw-checkout__heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.hw-checkout__signin-link {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--hw-accent, #32432d);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Logged-in account row (Shopify-style) */
.hw-checkout__account {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.hw-checkout__account-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hw-checkout__account-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hw-checkout__account-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.6;
	font-weight: 700;
}

.hw-checkout__account-email {
	font-weight: 600;
	font-size: 0.95rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hw-checkout__account-logout {
	margin-left: auto;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--hw-accent, #32432d);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* Signed in: the contact email is the account email — hide the input
   (it stays in the DOM, prefilled, so WC validation passes untouched). */
.hw-checkout--logged-in #billing_email_field {
	display: none;
}

.hw-checkout__section:empty {
	display: none;
}

.hw-checkout__heading {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 1rem;
}

/* ---------- WC native fields → Vuetify OUTLINED text fields ----------
   The label notches ONTO the border when the field has a value or focus
   (the chip is a split gradient: page cream above the border line, field
   white below); empty fields rest the label centered placeholder-style.
   Bigger, vertically-centered text — the owner's mobile-readability call.
   Keys on :placeholder-shown (checkout-pickup.php blanks placeholders). */

.hw-checkout {
	--hw-notch-bg: linear-gradient(
		180deg,
		#faf7f0 calc(50% - 2px),
		#ffffff calc(50% + 2px)
	);
}

.hw-checkout .form-row {
	margin: 0 0 0.95rem;
	padding: 0;
	display: block;
	position: relative;
}

.hw-checkout .form-row label {
	position: absolute;
	top: 0;
	left: 0.75rem;
	transform: translateY(-50%);
	z-index: 2;
	margin: 0;
	background: var(--hw-notch-bg, #fff);
	border-radius: 4px;
	padding: 0 0.35rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	opacity: 0.8;
	line-height: 1.25;
	pointer-events: none;
	max-width: calc(100% - 1.9rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: top 0.12s ease, font-size 0.12s ease, transform 0.12s ease,
		background 0.12s ease;
}

/* Empty + unfocused → the label rests where the value will go */
.hw-checkout .form-row:has(input.input-text:placeholder-shown):not(:focus-within) label {
	top: 50%;
	left: 0.95rem;
	transform: translateY(-50%);
	font-size: 1rem;
	font-weight: 500;
	opacity: 0.5;
	background: transparent;
	padding: 0;
}

.hw-checkout .form-row:has(textarea:placeholder-shown):not(:focus-within) label {
	top: 1.1rem;
	left: 0.95rem;
	transform: none;
	font-size: 1rem;
	font-weight: 500;
	opacity: 0.5;
	background: transparent;
	padding: 0;
}

.hw-checkout .form-row .woocommerce-input-wrapper {
	display: block;
}

.hw-checkout .form-row input.input-text,
.hw-checkout .form-row textarea,
.hw-checkout .form-row select,
.hw-checkout .form-row .select2-selection {
	width: 100%;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	padding: 0 0.95rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	background: var(--hw-card, #fff);
	box-sizing: border-box;
	transition: border-color 0.12s linear, box-shadow 0.12s linear;
}

.hw-checkout .form-row textarea {
	padding-top: 1rem;
	min-height: 7rem;
}

.hw-checkout .form-row input.input-text:focus,
.hw-checkout .form-row textarea:focus,
.hw-checkout .form-row select:focus {
	outline: none;
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
}

/* iOS Safari keeps its own native control chrome on a <select> (the system-blue
   tint on the value text + arrow) unless -webkit-appearance is reset — desktop
   browsers render it themed without this, iPad does not. Mirror the pickup
   select's iOS-safe styling so the country/state/etc. dropdowns stay on-brand
   even when the JS overlay that rebuilds the billing selects hasn't run. */
.hw-checkout .form-row select {
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2332432d'%3E%3Cpath d='M5.25 7.5L10 12.25l4.75-4.75z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 18px;
}

/* two-up first/last name etc. */
.hw-checkout .form-row-first,
.hw-checkout .form-row-last {
	width: calc(50% - 0.45rem);
	display: inline-block;
	vertical-align: top;
}

.hw-checkout .form-row-first {
	margin-right: 0.9rem;
}

@media (max-width: 599px) {
	.hw-checkout .form-row-first,
	.hw-checkout .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

.hw-checkout .woocommerce-billing-fields h3,
.hw-checkout .woocommerce-additional-fields h3 {
	font-size: 0.95rem;
	font-weight: 800;
	margin: 0 0 0.75rem;
}

/* hide WC's own "Billing details" duplicate heading — we have our own */
.hw-checkout .woocommerce-billing-fields > h3 {
	display: none;
}

.hw-checkout .required {
	color: #b3261e;
	text-decoration: none;
}

/* Billing-email typo/domain advisory ("Did you mean …@gmail.com?") inserted
   under #billing_email at checkout. Advisory only — never blocks the order. */
.hw-email-advisory {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #b45309;
}

/* Newsletter opt-in above Place Order (unchecked by default, CASL).
   IMPORTANT: this renders INSIDE WooCommerce's <div class="form-row place-order">, so the
   checkout's floating-label rule (.hw-checkout .form-row label, ~L143) was hijacking the
   label — absolute-positioning it (which collapsed this row's height and floated it over the
   privacy text), painting notch-white behind it, truncating the text (nowrap/ellipsis) and
   setting pointer-events:none so the label couldn't be clicked. Everything below is scoped to
   the #ids so it outranks that 2-class rule and fully undoes it. Do NOT downgrade to .class. */
#hw-checkout-optin {
	position: relative;
	z-index: 2;
	margin: 1.25rem 0 1rem;
	padding: 0;
	border: 0;
	background: transparent;
}

#hw-checkout-optin label {
	position: static;
	transform: none;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	opacity: 1;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	pointer-events: auto;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* Split mode shows two opt-ins (newsletter + promotions) — space them apart. */
#hw-checkout-optin label + label {
	margin-top: 0.55rem;
}

/* Clean, Vuetify-style box. ID beats the theme's global checkbox + form-row input rules. */
#hw_news_optin,
#hw_promo_optin {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 5px;
	background: var(--hw-card, #fff);
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	position: static;
	transition: background 0.15s ease, border-color 0.15s ease;
}
#hw_news_optin:hover,
#hw_promo_optin:hover {
	border-color: var(--hw-accent, #32432d);
}
/* Crisp SVG tick (centered) instead of a CSS-border checkmark — renders cleanly at any size. */
#hw_news_optin:checked,
#hw_promo_optin:checked {
	background: var(--hw-accent, #32432d)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 12px 12px no-repeat;
	border-color: var(--hw-accent, #32432d);
}
#hw_news_optin:focus-visible,
#hw_promo_optin:focus-visible {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: 2px;
}

/* WooCommerce "I have read and agree to the terms" checkbox — appears at checkout once a Terms
   page is set (woocommerce_terms_page_id). It's REQUIRED, so it must be clickable. The same
   floating-label rule that broke the newsletter opt-in hijacks its label too; scope to the
   wrapper + #terms to undo it and match the newsletter checkbox look. */
.hw-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 1.25rem 0 1rem;
}
.hw-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
	padding: 0;
}
.hw-checkout .woocommerce-terms-and-conditions-wrapper .form-row label {
	position: static;
	transform: none;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	opacity: 1;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	pointer-events: auto;
	cursor: pointer;
}
.hw-checkout #terms {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 5px;
	background: var(--hw-card, #fff);
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	position: static;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.hw-checkout #terms:hover {
	border-color: var(--hw-accent, #32432d);
}
.hw-checkout #terms:checked {
	background: var(--hw-accent, #32432d)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 12px 12px no-repeat;
	border-color: var(--hw-accent, #32432d);
}
.hw-checkout #terms:focus-visible {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: 2px;
}
.hw-checkout .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--hw-accent, #32432d);
	font-weight: 700;
	text-decoration: underline;
}
.hw-checkout .woocommerce-terms-and-conditions-wrapper .required {
	color: #b3261e;
	border: 0;
	text-decoration: none;
}

/* Every checkout checkbox/radio (ship-to-different, create-account, payment
   methods, …) takes the brand accent instead of iOS system blue. Note:
   accent-color needs iPadOS/iOS 15.4+; older devices still fall back to blue. */
.hw-checkout input[type="checkbox"],
.hw-checkout input[type="radio"] {
	accent-color: var(--hw-accent, #32432d);
}

/* ---------- Pickup picker ---------- */

.pickup-picker {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pickup-picker__label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	opacity: 0.85;
}

/* Vuetify OUTLINED fields — label notched on the border, value centered,
   full width matching the segmented Pickup control. */
.pickup-field {
	position: relative;
	display: block;
	width: 100%;
	min-height: 56px;
	background: var(--hw-card, #fff);
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	box-sizing: border-box;
	text-align: left;
	font: inherit;
	padding: 0;
	transition: border-color 0.12s linear, box-shadow 0.12s linear;
}

.pickup-field:focus-within,
.pickup-field--btn:focus-visible {
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
	outline: none;
}

.pickup-field__label {
	position: absolute;
	top: 0;
	left: 0.75rem;
	transform: translateY(-50%);
	background: var(--hw-notch-bg, #fff);
	border-radius: 4px;
	padding: 0 0.35rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	opacity: 0.8;
	line-height: 1.25;
	pointer-events: none;
	margin: 0;
}

.pickup-field__select {
	width: 100%;
	min-height: 53px;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	padding: 0 2.6rem 0 0.95rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2332432d'%3E%3Cpath d='M5.25 7.5L10 12.25l4.75-4.75z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 18px;
	border-radius: 12px;
	box-sizing: border-box;
}

.pickup-field--btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0 0.95rem;
	cursor: pointer;
	min-height: 56px;
	font-size: 1rem;
}

/* VSelect inside checkout matches the 56px outlined fields
   (border/radius come from VSelect's --hw-field-* defaults) */
.hw-checkout .vsel--outlined .vsel__btn {
	min-height: 56px;
	font-size: 1rem;
	font-weight: 500;
}

.hw-checkout .vsel--outlined .vsel__label {
	font-size: 0.74rem;
	opacity: 0.8;
	color: inherit;
}

.pickup-field__value {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
}

.pickup-field__value .mdi-calendar-month-outline {
	color: var(--hw-accent, #32432d);
	font-size: 1.15rem;
}

.pickup-field__chev {
	margin-left: auto;
	opacity: 0.5;
}

.pickup-picker__address,
.pickup-picker__single-loc {
	margin-top: 0.4rem;
	font-size: 0.88rem;
	opacity: 0.85;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

/* "Not available at this location" — shown when the chosen pickup location
   can't fulfill a cart item. */
.pickup-picker__unavailable {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-top: 0.5rem;
	padding: 0.85rem 1rem;
	border: 1.5px solid #e2b0aa;
	background: #fbf0ee;
	border-radius: 12px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #7a2d22;
}

.pickup-picker__unavailable .mdi {
	font-size: 1.25rem;
	color: #b3402f;
	flex: 0 0 auto;
	line-height: 1.4;
}

.pickup-picker__unavailable-fix {
	display: block;
	margin-top: 0.25rem;
	color: #8a5b54;
}

/* Equal-size pill chips, aligned rows + columns (owner: "pick the biggest
   one and make them all that size"). */
.pickup-picker__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 0.5rem;
}

.pickup-picker__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 46px;
	border: 1.5px solid var(--color-border, #d8d2c7);
	background: var(--hw-card, #fff);
	border-radius: 14px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	cursor: pointer;
	transition: border-color 0.12s, box-shadow 0.12s;
}

.pickup-picker__slot-time {
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.15;
}

/* Small anonymous busyness note under the time — muted so the time stays the
   focus (fuller detail lives in the pill's tooltip). */
.pickup-picker__slot-note {
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1.1;
	opacity: 0.65;
}

/* Last spot on a capped time — an amber "hurry" cue (Shopify-style scarcity). */
.pickup-picker__slot-note.is-low {
	color: #b26a00;
	opacity: 0.95;
	font-weight: 600;
}
.pickup-picker__slot.is-active .pickup-picker__slot-note.is-low {
	color: #ffd7a1;
}

.pickup-picker__slot:hover:not(:disabled) {
	border-color: var(--hw-accent, #32432d);
}

.pickup-picker__slot.is-active {
	background: var(--hw-accent, #32432d);
	border-color: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
}

.pickup-picker__slot.is-active .pickup-picker__slot-note {
	opacity: 0.85;
}

.pickup-picker__slot.is-full {
	opacity: 0.7;
	cursor: not-allowed;
	background: #faf8f5;
}

.pickup-picker__slot.is-full .pickup-picker__slot-time {
	text-decoration: line-through;
}

.pickup-picker__slot.is-full .pickup-picker__slot-note {
	color: #b3261e;
	opacity: 0.9;
}

.pickup-picker__hint {
	font-size: 0.9rem;
	opacity: 0.75;
}

.pickup-picker__hint--closed {
	color: #b45309;
	font-weight: 600;
	opacity: 1;
}

.pickup-picker__chosen {
	margin: 0;
	font-size: 0.9rem;
	background: color-mix(in srgb, var(--hw-accent, #32432d) 7%, var(--hw-card, #fff));
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
}

/* Backorder: item(s) the customer can buy now but that aren't in stock yet, so
   no pickup time can be promised. Informational amber (not an error) + a small
   email/phone contact-method toggle. */
.pickup-picker__backorder {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	border: 1.5px solid #e6c486;
	background: #fdf6e6;
	border-radius: 12px;
	color: #6a4e12;
}

.pickup-picker__backorder-head {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.92rem;
	line-height: 1.5;
}

.pickup-picker__backorder-head .mdi {
	font-size: 1.3rem;
	color: #b8860b;
	flex: 0 0 auto;
	line-height: 1.35;
}

.pickup-picker__backorder-sub {
	display: block;
	margin-top: 0.25rem;
	color: #7d5e1c;
}

.pickup-picker__contact-label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 0.45rem;
	color: #5c4413;
}

.pickup-picker__contact-opts {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pickup-picker__contact-opt {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1.5px solid #e0d2a6;
	background: var(--hw-card, #fff);
	border-radius: 999px;
	padding: 0.5rem 1.15rem;
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	color: #6a4e12;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.pickup-picker__contact-opt .mdi {
	font-size: 1.05rem;
}

.pickup-picker__contact-opt:hover {
	border-color: var(--hw-accent, #32432d);
}

.pickup-picker__contact-opt.is-active {
	background: var(--hw-accent, #32432d);
	border-color: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
}

/* ---------- Order summary (right rail) ---------- */

.hw-checkout__summary {
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
	border-radius: var(--radius-block, 12px);
	padding: 1.5rem;
	position: sticky;
	top: 90px;
}

@media (max-width: 989px) {
	.hw-checkout__summary {
		position: static;
	}
}

.hw-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	font-size: 0.92rem;
}

.hw-checkout table.shop_table th,
.hw-checkout table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--color-border, #eee7db);
	padding: 0.6rem 0;
	text-align: left;
	vertical-align: top;
}

.hw-checkout table.shop_table td:last-child,
.hw-checkout table.shop_table th:last-child {
	text-align: right;
}

.hw-checkout table.shop_table tfoot .order-total td,
.hw-checkout table.shop_table tfoot .order-total th {
	font-size: 1.1rem;
	font-weight: 800;
	border-bottom: none;
	padding-top: 0.9rem;
}

.hw-checkout .product-name .variation,
.hw-checkout .product-name dl {
	font-size: 0.78rem;
	opacity: 0.7;
	margin: 0.15rem 0 0;
}

.hw-checkout .product-name dl dt,
.hw-checkout .product-name dl dd {
	display: inline;
	margin: 0;
	font-weight: 500;
}

/* ---------- Payment box ---------- */

.hw-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.hw-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--color-border, #eee7db);
}

.hw-checkout #payment ul.payment_methods li {
	margin-bottom: 0.5rem;
}

.hw-checkout #payment div.payment_box {
	background: #f6f3ee;
	border-radius: 10px;
	padding: 0.9rem 1rem;
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

.hw-checkout #payment .woocommerce-privacy-policy-text {
	font-size: 0.8rem;
	/* Muted via colour, not opacity — opacity also dimmed the link, hiding it. */
	color: rgba(0, 0, 0, 0.6);
}
.hw-checkout #payment .woocommerce-privacy-policy-text a {
	color: var(--hw-accent, #32432d);
	font-weight: 700;
	text-decoration: underline;
}
/* Passive terms-consent line by the Place Order button (Local Line / Clover style — small + subtle,
   no checkbox, no privacy paragraph). */
.hw-checkout #payment .hw-checkout-terms-consent {
	font-size: 0.72rem;
	color: rgba(0, 0, 0, 0.5);
	line-height: 1.4;
	margin: 0.5rem 0 0;
}
.hw-checkout #payment .hw-checkout-terms-consent a {
	color: var(--hw-accent, #32432d);
	font-weight: 600;
	text-decoration: underline;
}

.hw-checkout #place_order {
	width: 100%;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	border: none;
	border-radius: 10px;
	padding: 1rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	margin-top: 1rem;
}

.hw-checkout #place_order:hover {
	filter: brightness(1.12);
}

/* ---------- Thank-you page ---------- */

/* One wide white order-status surface (not a narrow floating card): a left-aligned
   success hero across the top, then a two-column body — order details on the left,
   the order-summary receipt panel on the right — so everything lives on the one
   white area and the width is used like a professional order-complete page. */
.hw-thankyou {
	/* Fill the site content width (same as the header, breadcrumb and footer)
	   so the confirmation reads as one full white area, not a narrow card
	   floating on the store background. */
	max-width: var(--theme-max-width, 1680px);
	margin: 2rem auto 3rem;
	background: var(--hw-card, #fff);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 16px;
	padding: 2.5rem 2.75rem 2.75rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
}

@media (max-width: 700px) {
	.hw-thankyou {
		padding: 1.75rem 1.4rem 2rem;
		border-radius: 14px;
		margin: 1.25rem auto 2rem;
	}
}

.hw-thankyou__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: 2.5rem;
	align-items: start;
	margin-top: 1.6rem;
}

@media (max-width: 820px) {
	.hw-thankyou__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}
}

.hw-thankyou__details {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	min-width: 0;
}

/* Bill-to / ship-to / payment — quiet labelled blocks in the left column. */
.hw-thankyou__info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1.25rem;
}

.hw-thankyou__info-block h3,
.hw-thankyou__ordernote h3 {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	opacity: 0.5;
}

.hw-thankyou__info-block p,
.hw-thankyou__ordernote p {
	margin: 0;
	line-height: 1.6;
	opacity: 0.85;
}

.hw-thankyou__summary {
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 820px) {
	.hw-thankyou__summary {
		position: static;
	}
}

/* Cardless thank-you: flat blocks separated by whitespace + hairline rules,
   Shopify order-status style. The only card in the whole flow is the
   out-of-house unsubscribe page (owner call). */
.hw-thankyou__banner {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 1rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 0 1.4rem;
	border-bottom: 1px solid var(--color-border, #e5e0d8);
}

/* Circular success badge — a green check in a soft disc, sitting left of the copy. */
.hw-thankyou__banner > .mdi {
	flex: 0 0 auto;
	font-size: 2.1rem;
	color: #2f7d39;
	line-height: 1;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: rgba(47, 125, 57, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hw-thankyou__banner--failed > .mdi {
	color: #b3261e;
	background: rgba(179, 38, 30, 0.1);
}

.hw-thankyou__banner h2 {
	margin: 0 0 0.35rem;
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hw-thankyou__banner p {
	margin: 0;
	opacity: 0.72;
	max-width: 34rem;
}

.hw-thankyou__pickup {
	display: flex;
	gap: 1rem;
	background: transparent;
	border-radius: 0;
	padding: 0;
	align-items: flex-start;
}

.hw-thankyou__pickup > .mdi {
	font-size: 1.8rem;
	color: var(--hw-accent, #32432d);
}

.hw-thankyou__pickup h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 800;
}

.hw-thankyou__pickup p {
	margin: 0 0 0.2rem;
}

.hw-thankyou__address {
	display: block;
	font-size: 0.9rem;
	opacity: 0.75;
}

.hw-thankyou__when {
	font-weight: 700;
}

/* Backorder follow-up card — same flat, ruled layout as the pickup card but in
   the informational amber used at checkout (no promised time, we'll reach out). */
.hw-thankyou__backorder {
	display: flex;
	gap: 1rem;
	padding: 0;
	align-items: flex-start;
}

.hw-thankyou__backorder > .mdi {
	font-size: 1.8rem;
	color: #b8860b;
}

.hw-thankyou__backorder h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 800;
}

.hw-thankyou__backorder p {
	margin: 0 0 0.2rem;
}

.hw-thankyou__backorder-items {
	opacity: 0.85;
}

/* ---------- Invoice-style order summary (mirrors the in-house AccountOrderDetail) ----------
   Rendered flat inside the .hw-thankyou card: status + total, bill/ship blocks,
   ruled item rows with thumbnails, right-aligned totals. */
.hw-inv {
	/* Order-summary panel — softly shaded so it reads as the receipt within the
	   white surface, sitting in the right column of the two-column body. */
	margin-top: 0;
	background: #f7f6f2;
	border: 1px solid var(--color-border, #e5e0d8);
	border-radius: 14px;
	padding: 1.35rem 1.4rem 1.5rem;
}

.hw-inv__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--color-border, #e5e0d8);
}

.hw-inv__head-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.hw-inv__meta {
	font-size: 0.92rem;
	opacity: 0.6;
}

.hw-inv__head-total {
	text-align: right;
	display: flex;
	flex-direction: column;
}

.hw-inv__head-total span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.55;
	font-weight: 700;
}

.hw-inv__head-total strong {
	font-size: 1.5rem;
	font-weight: 800;
}

.hw-inv__status {
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: rgba(0, 0, 0, 0.06);
}

.hw-inv__status--completed,
.hw-inv__status--picked-up { background: rgba(50, 67, 45, 0.12); color: var(--hw-accent, #32432d); }
.hw-inv__status--processing { background: rgba(255, 165, 0, 0.14); color: #b86a00; }
.hw-inv__status--on-hold { background: rgba(255, 200, 0, 0.16); color: #946800; }
.hw-inv__status--pending,
.hw-inv__status--pending-payment { background: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.6); }
.hw-inv__status--cancelled,
.hw-inv__status--failed,
.hw-inv__status--refunded { background: rgba(180, 0, 0, 0.09); color: #a00; }

.hw-inv__addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-border, #e5e0d8);
}

.hw-inv__block h3,
.hw-inv__note h3 {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	opacity: 0.5;
}

.hw-inv__block p {
	margin: 0;
	line-height: 1.6;
	opacity: 0.85;
}

.hw-inv__items {
	padding: 0.25rem 0 0;
}

.hw-inv__item {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 0.8rem 0;
}

.hw-inv__item + .hw-inv__item {
	border-top: 1px solid var(--color-border, #e5e0d8);
}

.hw-inv__item-amount {
	margin-left: auto;
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
	padding-left: 0.5rem;
}

.hw-inv__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hw-inv__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 7px;
}

/* Qty pill overlapping the thumbnail's top-right, Shopify order-summary style. */
.hw-inv__qty-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	font-size: 0.72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.hw-inv__thumb-ph {
	opacity: 0.25;
	font-size: 1.1rem;
}

.hw-inv__item-info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.hw-inv__item-name {
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.hw-inv__item-name:hover {
	text-decoration: underline;
}

.hw-inv__item-meta {
	font-size: 0.8rem;
	opacity: 0.6;
}

.hw-inv__totals {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 100%;
	border-top: 1px solid var(--color-border, #e5e0d8);
	padding-top: 0.9rem;
	margin-top: 0.5rem;
}

.hw-inv__totals-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.92rem;
	opacity: 0.8;
}

.hw-inv__totals-row.is-grand {
	border-top: 1px solid var(--color-border, #e5e0d8);
	padding-top: 0.55rem;
	margin-top: 0.3rem;
	font-size: 1.15rem;
	font-weight: 800;
	opacity: 1;
}

.hw-inv__actions {
	margin-top: 1.1rem;
	display: flex;
	justify-content: flex-end;
}

.hw-inv__note {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border, #e5e0d8);
}

.hw-inv__note p {
	margin: 0;
	line-height: 1.6;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.hw-inv__thumb {
		width: 46px;
		height: 46px;
	}
}

.hw-thankyou__claim {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-border, #e5e0d8);
	border-radius: 0;
	padding: 1.25rem 0 0;
}

.hw-thankyou__claim h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 800;
}

.hw-thankyou__claim p {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	opacity: 0.9;
}

.hw-thankyou__claim-form {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.hw-thankyou__claim-form input {
	flex: 1 1 240px;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	font: inherit;
}

.hw-thankyou__claim .button,
.hw-thankyou__claim-form .button {
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	border: none;
	border-radius: 10px;
	padding: 0.7rem 1.2rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hw-thankyou__claim-msg {
	color: #b3261e;
	font-size: 0.85rem;
	margin: 0.5rem 0 0;
}

.hw-thankyou__facts {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-border, #e5e0d8);
	border-radius: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem 1.5rem;
}

.hw-thankyou__facts li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.hw-thankyou__facts span {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.6;
	font-weight: 700;
}

/* order details table below the banner (woocommerce_thankyou hook output) */
.hw-thankyou ~ .woocommerce-order-details,
.hw-thankyou .woocommerce-order-details {
	margin-top: 1.75rem;
}

/* WooCommerce's default order-details + customer-details tables render raw on
   the order-received page — theme them to match the banner/facts cards above. */
.hw-thankyou .woocommerce-order-details__title,
.hw-thankyou .woocommerce-column__title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 0.85rem;
	color: var(--hw-text, #1d271d);
}
.hw-thankyou .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 0.95rem;
}
.hw-thankyou .woocommerce-table--order-details th,
.hw-thankyou .woocommerce-table--order-details td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: top;
}
.hw-thankyou .woocommerce-table--order-details thead th {
	background: transparent;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(0, 0, 0, 0.55);
	border-bottom-color: rgba(0, 0, 0, 0.18);
}
.hw-thankyou .woocommerce-table--order-details td.product-total,
.hw-thankyou .woocommerce-table--order-details th.product-total,
.hw-thankyou .woocommerce-table--order-details tfoot th:last-child,
.hw-thankyou .woocommerce-table--order-details tfoot td:last-child {
	text-align: right;
	white-space: nowrap;
}
.hw-thankyou .woocommerce-table--order-details tfoot th {
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}
.hw-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
.hw-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 800;
	font-size: 1.02rem;
	color: var(--hw-text, #1d271d);
	border-bottom: none;
}
.hw-thankyou .woocommerce-table--order-details a {
	color: var(--hw-accent, #32432d);
	text-decoration: none;
	font-weight: 600;
}
.hw-thankyou .woocommerce-table--order-details a:hover {
	text-decoration: underline;
}
/* Pay / Cancel (and any) action buttons rendered with the order. */
.hw-thankyou .woocommerce-order .button,
.hw-thankyou .woocommerce-order-details .button {
	display: inline-block;
	margin: 0.2rem 0.4rem 0.2rem 0;
	padding: 0.55rem 1.05rem;
	border-radius: 8px;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	border: 1.5px solid var(--hw-accent, #32432d);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
}
.hw-thankyou .woocommerce-order .button:hover,
.hw-thankyou .woocommerce-order-details .button:hover {
	filter: brightness(1.12);
}
/* Billing / shipping address blocks WC prints below the table. */
.hw-thankyou .woocommerce-customer-details {
	margin-top: 1.5rem;
}
.hw-thankyou .woocommerce-customer-details address {
	font-style: normal;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	line-height: 1.6;
}

/* ==========================================================================
   Round 2 (owner feedback): Shopify-Local two-tone layout, gateway tabs
   instead of radios, select polish, mobile summary toggle.
   ========================================================================== */

/* ---------- Round 3: Shopify hard-cut two-tone, full-bleed ---------- */

/* No big "Checkout" H1 — the sections carry their own headings. (Also hides
   the stray page H1 on the order-received endpoint, which has its banner.) */
body.woocommerce-checkout .gutter-bottom--page {
	display: none;
}

/* The grey rail runs flush to the footer — drop the global bottom gutter
   (but not on the thank-you page, which is normal content). The #main id
   matches overrides.css's specificity. */
body.woocommerce-checkout:not(.woocommerce-order-received) main.main-content,
body.woocommerce-checkout:not(.woocommerce-order-received) #main.main-content {
	padding-bottom: 0;
}

/* …and flush to the breadcrumb row above: the two-tone grid provides its own
   inner padding, so the container's vertical gutter just leaves a cream gap
   over the grey. */
body.woocommerce-checkout:not(.woocommerce-order-received) .main-content .container--vertical-space-small {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.hw-checkout__grid {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 42%);
	gap: 0;
	align-items: stretch;
}

.hw-checkout__main {
	width: 100%;
	max-width: 660px;
	justify-self: end;
	box-sizing: border-box;
	padding: 2.25rem 3.5rem 5rem 1.5rem;
	gap: 2.25rem;
}

.hw-checkout__aside {
	background: #f0eee9;
	border-left: 1px solid #e0ddd5;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.hw-checkout__summary {
	background: transparent;
	border: none;
	/* Fill the grey panel rather than sitting as a narrow 480px column with whitespace (and a
	   floating scrollbar) to the right. A roomy cap keeps it sane on very wide screens. */
	max-width: 760px;
	box-sizing: border-box;
	padding: 2.25rem 2.25rem 3rem 2.75rem;
	position: sticky;
	top: 90px;
	/* Short screens: keep the whole summary in view and let IT scroll (independently of the left
	   column) when the item list is taller than the viewport, so the totals + Place order never
	   get cut off below the fold. Only scrolls when the content actually overflows. */
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 989px) {
	.hw-checkout__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.hw-checkout__main {
		max-width: none;
		justify-self: stretch;
		padding: 1.5rem 1.25rem 4rem;
	}
	.hw-checkout__aside {
		border-left: none;
		display: none;
	}
	.hw-checkout__aside.is-open {
		display: block;
	}
	.hw-checkout__summary {
		max-width: none;
		position: static;
		padding: 1.25rem;
		max-height: none;
		overflow: visible;
	}
	/* The toggle reads as a full-width grey strip, Shopify-mobile style */
	.hw-checkout__summary-toggle {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: auto;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		padding: 0.9rem 1.25rem;
	}
}

/* ---------- Mobile "Show order summary" toggle ---------- */

.hw-checkout__summary-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #f0eee9;
	border: 1px solid #e0ddd5;
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	margin-bottom: 1rem;
}

.hw-checkout__summary-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--hw-accent, #32432d);
	font-weight: 600;
}

.hw-checkout__summary-chev {
	transition: transform 0.18s ease;
}

@media (max-width: 989px) {
	.hw-checkout__summary-toggle {
		display: flex;
	}
}

/* ---------- Select polish (province etc.) ---------- */

.hw-checkout .form-row select,
.hw-checkout select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2332432d'%3E%3Cpath d='M5.25 7.5L10 12.25l4.75-4.75z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 18px;
	padding-right: 2.5rem;
	cursor: pointer;
}

.hw-checkout .form-row input.input-text {
	min-height: 56px;
}

/* select2 (if WC swaps the country/state field) */
.hw-checkout .select2-container--default .select2-selection--single {
	min-height: 56px;
	display: flex;
	align-items: center;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
}

/* ---------- Payment: gateways as big buttons, no radios ---------- */

.hw-checkout #payment ul.payment_methods {
	border-bottom: none;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hw-checkout #payment ul.payment_methods > li {
	margin: 0;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	background: var(--hw-card, #fff);
	overflow: hidden;
	transition: border-color 0.15s linear, box-shadow 0.15s linear;
}

.hw-checkout #payment ul.payment_methods > li:has(> input:checked) {
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1.5px var(--hw-accent, #32432d);
}

.hw-checkout #payment ul.payment_methods > li > input[name="payment_method"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hw-checkout #payment ul.payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 1rem 1.1rem;
	margin: 0;
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
}

.hw-checkout #payment ul.payment_methods > li > label img {
	max-height: 26px;
	width: auto;
}

/* Selected gateway body: Shopify's gray panel (the white option header sits
   on top; field boxes stay white on the gray). */
.hw-checkout #payment div.payment_box {
	background: #f0eee9;
	border-top: 1px solid #e0ddd5;
	border-radius: 0;
	margin: 0;
	padding: 1.1rem 1.1rem 0.9rem;
}

/* Saved tokens inside a gateway: clean rows, hidden radios */
.hw-checkout .woocommerce-SavedPaymentMethods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.hw-checkout .woocommerce-SavedPaymentMethods li {
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 10px;
	background: var(--hw-card, #fff);
	padding: 0;
}

.hw-checkout .woocommerce-SavedPaymentMethods li:has(input:checked) {
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
}

.hw-checkout .woocommerce-SavedPaymentMethods label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 0.9rem;
	margin: 0;
	width: 100%;
	cursor: pointer;
	font-size: 0.92rem;
	font-weight: 600;
}

/* Round 3: NO radio circles anywhere — saved cards select like buttons,
   the chosen one gets an accent border + check mark. The radios stay in the
   DOM (hidden) because wc-checkout.js and the gateway JS listen to them. */
.hw-checkout .woocommerce-SavedPaymentMethods input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hw-checkout .woocommerce-SavedPaymentMethods li {
	position: relative;
}

.hw-checkout .woocommerce-SavedPaymentMethods label {
	position: relative;
	padding-right: 2.8rem;
}

.hw-checkout .woocommerce-SavedPaymentMethods li:has(input:checked) label::after,
.hw-checkout #payment ul.payment_methods > li:has(> input:checked) > label::after {
	content: "";
	width: 20px;
	height: 20px;
	margin-left: auto;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2332432d'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hw-checkout .woocommerce-SavedPaymentMethods li:has(input:checked) label::after {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
}

/* ---------- Enhanced native selects (Country / Province) ----------
   The native select hides; the button is the visual field. The form-row's
   floating label still overlays it (selects are always-floated). */
.hw-checkout .form-row select.hw-nselect-native {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.hw-nselect {
	position: relative;
}

.hw-nselect__btn {
	width: 100%;
	min-height: 56px;
	background: var(--hw-card, #fff);
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.85rem 0 0.95rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	box-sizing: border-box;
	transition: border-color 0.12s linear, box-shadow 0.12s linear;
}

.hw-nselect.is-open .hw-nselect__btn,
.hw-nselect__btn:focus-visible {
	outline: none;
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
}

.hw-nselect__value {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hw-nselect__chev {
	opacity: 0.55;
	font-size: 1.25rem;
	transition: transform 0.15s ease;
}

.hw-nselect.is-open .hw-nselect__chev {
	transform: rotate(180deg);
}

.hw-nselect__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 85;
}

/* "Show all cards (N)" fold-out under the first three saved cards */
.hw-checkout .hw-saved-more-li {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.hw-checkout .hw-saved-more {
	border: none;
	background: transparent;
	color: var(--hw-accent, #32432d);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.35rem 0.2rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Clover new-card form (hosted-field iframes) ----------
   Labels here are plain stacked labels (they can't float into an iframe),
   so unwind the global floating-label treatment inside the payment box. */
.hw-checkout #payment .payment_box .form-row,
.hw-checkout #payment .payment_box fieldset {
	margin: 0 0 0.9rem;
	border: 0;
	padding: 0;
}

.hw-checkout #payment .payment_box .form-row {
	position: static;
}

.hw-checkout #payment .payment_box .form-row label {
	position: static;
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0.8;
	margin: 0 0 0.35rem;
	max-width: none;
	transform: none;
	pointer-events: auto;
	background: transparent;
	padding: 0;
}

/* The container IS the visual input: Clover mounts a 150px-tall iframe by
   default — the box clips it to input height and draws the border. */
.hw-checkout .ccp-hosted-field,
.ccp-hosted-field {
	background: var(--hw-card, #fff);
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	min-height: 52px;
	height: 52px;
	padding: 3px 12px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow: hidden;
	transition: border-color 0.12s linear;
}

.ccp-hosted-field:hover {
	border-color: color-mix(in srgb, var(--hw-accent, #32432d) 45%, #d8d2c7);
}

.ccp-hosted-field iframe {
	width: 100% !important;
	height: 44px !important;
	border: 0;
	display: block;
}

/* expiry / cvv side by side with a clean gutter */
.hw-checkout #payment .payment_box .form-row-first,
.hw-checkout #payment .payment_box .form-row-last {
	width: calc(50% - 0.45rem);
	display: inline-block;
	vertical-align: top;
}

.hw-checkout #payment .payment_box .form-row-first {
	margin-right: 0.9rem;
}

/* card error strip + save-card checkbox */
.hw-checkout .ccp-card-errors:not(:empty) {
	color: #b3261e;
	font-size: 0.88rem;
	margin: 0.25rem 0 0.5rem;
}

.hw-checkout #payment .payment_box .woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.hw-checkout #payment .payment_box .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--hw-accent, #32432d);
	margin: 0;
}

.hw-checkout #payment .payment_box .woocommerce-SavedPaymentMethods-saveNew label {
	position: static;
	display: inline;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0.9;
	pointer-events: auto;
	transform: none;
	background: transparent;
	padding: 0;
}

/* ---------- Pickup calendar (popover) + time chip polish ---------- */

.pickup-picker__row--date {
	position: relative;
}

.pickup-cal {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	width: 312px;
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e0d9cd);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14);
	padding: 0.9rem;
}

.pickup-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.pickup-cal__head strong {
	font-size: 0.95rem;
}

.pickup-cal__head button {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pickup-cal__head button:hover:not(:disabled) {
	background: rgba(50, 67, 45, 0.08);
}

.pickup-cal__head button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.pickup-cal__dows {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	opacity: 0.55;
	margin-bottom: 0.25rem;
}

.pickup-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.pickup-cal__day {
	position: relative;
	aspect-ratio: 1;
	border: none;
	border-radius: 50%;
	background: transparent;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pickup-cal__day:hover:not(:disabled) {
	background: rgba(50, 67, 45, 0.1);
}

.pickup-cal__day.is-out {
	opacity: 0.35;
}

.pickup-cal__day:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

/* Bookable days stay full-strength + tinted — even next month's market days peeking into this
   grid — so several upcoming pickup dates read as "available", not just the one in-month day. */
.pickup-cal__day.is-available {
	opacity: 1;
	font-weight: 600;
	background: rgba(50, 67, 45, 0.08);
}
.pickup-cal__day.is-available:hover {
	background: rgba(50, 67, 45, 0.16);
}

.pickup-cal__day.is-today {
	box-shadow: inset 0 0 0 1.5px var(--hw-accent, #32432d);
}

.pickup-cal__day.is-selected {
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	font-weight: 700;
}

/* Dot under a day that already holds pickups — a quiet "this day is busy" cue. */
.pickup-cal__dot {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--hw-accent, #32432d);
	pointer-events: none;
}
.pickup-cal__day.is-selected .pickup-cal__dot {
	background: var(--hw-card, #fff);
}

/* Time chips: roomier targets — every slot visible, no scroll (owner call) */
.pickup-picker__slots {
	padding: 2px;
}

.pickup-picker__slot {
	padding: 0.55rem 0.4rem;
	font-size: 0.92rem;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* Thank-you locked state (sign in to view) */
.hw-thankyou__locked-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.9rem !important;
}

.hw-thankyou__cta {
	display: inline-flex;
	align-items: center;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	font-weight: 700;
	border-radius: 999px;
	padding: 0.65rem 1.4rem;
	text-decoration: none;
}

.hw-thankyou__cta:hover {
	filter: brightness(1.12);
	color: var(--hw-on-accent, #fff);
}

.hw-thankyou__cta--ghost {
	background: var(--hw-card, #fff);
	color: var(--hw-accent, #32432d);
	border: 1.5px solid var(--hw-accent, #32432d);
}

.hw-thankyou__cta--ghost:hover {
	background: rgba(50, 67, 45, 0.07);
	color: var(--hw-accent, #32432d);
	filter: none;
}

/* ==========================================================================
   Round 3 components: segmented order-type control + Shopify order summary
   ========================================================================== */

/* ---------- Segmented control (pageflows reference) ---------- */

.hw-segmented {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
	margin: 0 0 1.15rem;
}

.hw-segmented__opt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	padding: 0.95rem 1.1rem;
	background: var(--hw-card, #fff);
	font-weight: 700;
	font-size: 0.95rem;
}

.hw-segmented__opt > .mdi {
	font-size: 1.25rem;
	opacity: 0.8;
}

.hw-segmented__opt.is-active {
	border-color: var(--hw-accent, #32432d);
	box-shadow: 0 0 0 1px var(--hw-accent, #32432d);
	background: color-mix(in srgb, var(--hw-accent, #32432d) 5%, var(--hw-card, #fff));
}

.hw-segmented__check {
	margin-left: auto;
	color: var(--hw-accent, #32432d);
	opacity: 1 !important;
}

/* ---------- Order summary (Shopify-style rows) ---------- */

.hw-osum__items {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.hw-osum__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: center;
}

.hw-osum__thumb {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: var(--hw-card, #fff);
	border: 1px solid #e0ddd5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hw-osum__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 9px;
}

.hw-osum__qty {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(50, 67, 45, 0.88);
	color: var(--hw-on-accent, #fff);
	font-size: 0.74rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hw-osum__name {
	font-weight: 600;
	font-size: 0.93rem;
	display: block;
}

.hw-osum__info .variation,
.hw-osum__info dl {
	font-size: 0.78rem;
	opacity: 0.7;
	margin: 0.15rem 0 0;
}

.hw-osum__info dl dt,
.hw-osum__info dl dd {
	display: inline;
	margin: 0;
	font-weight: 500;
}

.hw-osum__price {
	font-weight: 600;
	font-size: 0.93rem;
	white-space: nowrap;
}

/* Discount code — Shopify position: between items and totals */
.hw-osum__coupon {
	display: flex;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
}

.hw-osum__coupon-input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	background: var(--hw-card, #fff);
	box-sizing: border-box;
}

.hw-osum__coupon-input:focus {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: -1px;
}

.hw-osum__coupon-apply {
	border: 0;
	border-radius: 10px;
	background: #dcd8cd;
	color: #3a382f;
	font: inherit;
	font-weight: 700;
	padding: 0 1.3rem;
	cursor: pointer;
}

.hw-osum__coupon-apply:hover {
	background: #cfcabd;
}

.hw-osum__coupon-apply:disabled {
	opacity: 0.6;
	cursor: wait;
}

.hw-osum__coupon-msg {
	font-size: 0.85rem;
	margin: -0.5rem 0 1rem;
	opacity: 0.85;
}

.hw-osum__coupon-msg.is-error {
	color: #b3261e;
	opacity: 1;
}

/* ---------- Expansion panels: reward points + discount code (slide-down) ----------
   Transparent — they sit ON the summary panel and use its background, rather than being
   their own white cards (the owner's call, most visible on the desktop rail). */
.hw-osum__points,
.hw-osum__coupon-panel {
	margin: 0 0 1.1rem;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 12px;
	background: transparent;
	overflow: hidden;
}
.hw-osum__points-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.8rem 1rem;
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
/* Keyboard focus (e.g. Shift+Tab) — accent ring, not the browser's default blue. */
.hw-osum__points-toggle:focus-visible {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: -2px;
	border-radius: 12px;
}
.hw-osum__points-head {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 0.95rem;
}
.hw-osum__points-head .mdi {
	color: var(--hw-accent, #32432d);
	font-size: 1.1rem;
}
.hw-osum__points-bal {
	margin-left: auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hw-accent, #32432d);
	white-space: nowrap;
}
.hw-osum__points-chev {
	font-size: 1.2rem;
	opacity: 0.5;
	transition: transform 0.25s ease;
}
.hw-osum__points.is-open .hw-osum__points-chev,
.hw-osum__coupon-panel.is-open .hw-osum__points-chev {
	transform: rotate(180deg);
}
.hw-osum__points-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.hw-osum__points.is-open .hw-osum__points-body,
.hw-osum__coupon-panel.is-open .hw-osum__points-body {
	max-height: 300px;
}
/* Discount toggle has no balance pill like points does, so its chevron would sit right next to
   the label. Push it to the right edge so it lines up with the points chevron. */
.hw-osum__coupon-panel .hw-osum__points-chev {
	margin-left: auto;
}
/* Discount panel body padding (the points body gets its padding from its own controls). */
.hw-osum__coupon-wrap {
	padding: 0.25rem 1rem 0.85rem;
}
.hw-osum__coupon-wrap .hw-osum__coupon {
	margin: 0;
}
.hw-osum__coupon-wrap .hw-osum__coupon-msg {
	margin: 0.55rem 0 0;
}
.hw-osum__points-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.1rem 1rem 0.7rem;
}
.hw-osum__points-slider {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--hw-accent, #32432d);
	cursor: pointer;
}
/* Free-floating circles around the slider — matches the cart line stepper. */
.hw-osum__points-step {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(29, 39, 29, 0.35);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hw-osum__points-step:hover {
	background: var(--hw-accent, #32432d);
	border-color: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
}
.hw-osum__points-step:focus-visible {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: 2px;
}
.hw-osum__points-step .mdi {
	font-size: 1rem;
}
.hw-osum__points-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0 1rem 0.9rem;
	font-size: 0.9rem;
}
.hw-osum__points-applied {
	font-weight: 600;
}
.hw-osum__points-eq {
	opacity: 0.5;
	margin: 0 0.15rem;
}
.hw-osum__points-dollar {
	color: var(--hw-accent, #32432d);
	font-weight: 700;
}
.hw-osum__points-max {
	flex: 0 0 auto;
	border: 0;
	border-radius: 8px;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	padding: 0.42rem 0.95rem;
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
.hw-osum__points-max:hover {
	filter: brightness(1.1);
}
.hw-osum__points-max:focus-visible {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: 2px;
}
/* Tiny syncing spinner beside the applied amount while the points change saves to the server. */
.hw-osum__points-sync {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: 0.45rem;
	vertical-align: -2px;
	border: 2px solid color-mix(in srgb, var(--hw-accent, #32432d) 22%, transparent);
	border-top-color: var(--hw-accent, #32432d);
	border-radius: 50%;
	animation: hw-osum-spin 0.6s linear infinite;
}
@keyframes hw-osum-spin {
	to { transform: rotate(360deg); }
}
.hw-osum__points-error {
	margin: 0.1rem 1rem 0.7rem;
	font-size: 0.8rem;
	color: #b3261e;
}

/* Totals */
.hw-osum__totals {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	border-top: 1px solid #e0ddd5;
	padding-top: 1.1rem;
	font-size: 0.93rem;
}

.hw-osum__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.hw-osum__row--total {
	font-size: 1.18rem;
	font-weight: 800;
	padding-top: 0.45rem;
}

.hw-osum__row--coupon .mdi {
	opacity: 0.7;
}

.hw-osum__row--coupon .woocommerce-remove-coupon {
	font-size: 0.78rem;
	margin-left: 0.4rem;
	color: #b3261e;
}

/* ==========================================================================
   Pickup self-scheduler page (?hw-pickup-schedule={order_key})
   ========================================================================== */

.hw-schedule {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem 0 2rem;
}

.hw-schedule__card {
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
	border-radius: var(--radius-block, 12px);
	padding: 2rem;
}

.hw-schedule__card--notice {
	text-align: center;
}

.hw-schedule__card--notice > .mdi {
	font-size: 2.4rem;
	color: var(--hw-accent, #32432d);
}

.hw-schedule__done-icon {
	color: #2f7d39 !important;
}

.hw-schedule__card h1,
.hw-schedule__title {
	font-size: 1.45rem;
	font-weight: 800;
	margin: 0.25rem 0 0.5rem;
}

.hw-schedule__order {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	opacity: 0.75;
}

.hw-schedule__current {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	background: color-mix(in srgb, var(--hw-accent, #32432d) 7%, var(--hw-card, #fff));
	border-radius: 10px;
	padding: 0.75rem 0.95rem;
	font-size: 0.92rem;
	margin: 0 0 1.25rem;
}

.hw-schedule__confirm {
	width: 100%;
	margin-top: 1.5rem;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	border: none;
	border-radius: 10px;
	padding: 1rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
}

.hw-schedule__confirm:hover {
	filter: brightness(1.12);
}

.hw-schedule__confirm:disabled {
	opacity: 0.6;
	cursor: wait;
}

.hw-schedule__msg {
	color: #b3261e;
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

/* Busyness hint under the chosen pickup slot */
.pickup-picker__busy {
	margin: -0.4rem 0 0;
	font-size: 0.85rem;
	color: #8a6d3b;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

/* ---------- Mobile: order summary relocated above the Place Order button ----------
   On narrow screens JS moves .hw-checkout__summary into the payment box, just above the
   place-order row (Shopify-style). The Vue summary's own collapsible bar replaces the
   "Your order" heading, so hide that; add a separator from the payment methods. */
@media (max-width: 989px) {
	#order_review_heading {
		display: none;
	}
	/* A proper card (full outline, rounded), matching the payment-method boxes above it —
	   not a half-outline strip. The Vue summary's bar/body provide the inner padding. */
	.hw-checkout__summary {
		padding: 0;
		margin: 1.4rem 0;
		border: 1.5px solid var(--color-border, #d8d2c7);
		border-radius: 12px;
		background: var(--hw-card, #fff);
		overflow: hidden;
	}
}