/* =========================================================================
 * CART, CHECKOUT, ACCOUNT
 * =========================================================================
 * WooCommerce ships its own stylesheet and it does not know this brand: the
 * primary action was Woo purple (#7f54b3), secondary actions were grey chips,
 * inputs were 13px (which makes iOS zoom the page on focus) and the theme gave
 * the whole thing a 10px gutter.
 *
 * This is the same design system as the sandwich builder — the same cream
 * surfaces, tan rules, Oswald headings and red primary action — so the last
 * two steps of an order do not look like a different website from the first
 * six.
 *
 * Selectors are deliberately deep. Woo's own rules run to three and four
 * classes plus an element, and anything shallower loses to them silently.
 * ========================================================================= */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received {
	--hm-red:      #C5162E;
	--hm-red-dk:   #9E1024;
	--hm-forest:   #071F1B;
	--hm-green:    #12362F;
	--hm-ink:      #17201D;
	--hm-ink-soft: #5F6B65;
	--hm-tan:      #C9B99E;
	--hm-tan-soft: #E4D9C6;
	--hm-cream:    #F5EBDD;
	--hm-band:     #F2EBE1;
	--hm-surface:  #FFFDF9;
	--hm-radius:   10px;
	--hm-shop-max: 1360px;

	background: var(--hm-band);
}

/* ------------------------------------------------------------------ shell */

/*
 * The theme caps .site-main and gives it a 10px gutter, which on a phone puts
 * the cart table hard against both edges. Doubled class to clear the theme's
 * own (0,2,1) rule.
 */
.woocommerce-cart .site-main.site-main,
.woocommerce-checkout .site-main.site-main,
.woocommerce-account .site-main.site-main,
.woocommerce-order-received .site-main.site-main {
	width: min(var(--hm-shop-max), 100% - 32px);
	max-width: none;
	margin-inline: auto;
	padding: 28px 0 56px;
}

@media (max-width: 767px) {
	.woocommerce-cart .site-main.site-main,
	.woocommerce-checkout .site-main.site-main,
	.woocommerce-account .site-main.site-main,
	.woocommerce-order-received .site-main.site-main {
		width: min(var(--hm-shop-max), 100% - 28px);
		padding: 20px 0 40px;
	}
}

/* ------------------------------------------------------------------- type */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-order-received .entry-title {
	margin: 0 0 20px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 5vw, 2.375rem);
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--hm-forest);
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 14px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hm-forest);
}

/* ------------------------------------------------------------------ cards */

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
	padding: 18px;
	border: 1px solid var(--hm-tan-soft);
	border-radius: var(--hm-radius);
	background: var(--hm-surface);
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review { margin-top: 20px; }

@media (max-width: 767px) {
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-additional-fields,
	.woocommerce-checkout #order_review,
	.woocommerce-account .woocommerce-MyAccount-content { padding: 14px; }
}

/* ----------------------------------------------------------------- tables */

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

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 11px 8px;
	border-top: 0;
	border-bottom: 1px solid var(--hm-tan-soft);
	color: var(--hm-ink);
	font-size: .9375rem;
	line-height: 1.5;
}

.woocommerce table.shop_table thead th {
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hm-ink-soft);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { font-weight: 700; }

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	border-bottom: 0;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-size: 1.375rem;
	color: var(--hm-red);
}

/* The build shows as line-item meta. It is the whole sandwich, so it gets to
   be readable rather than 0.8125em grey. */
.woocommerce .shop_table .variation,
.woocommerce .shop_table dl.variation {
	margin: 6px 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--hm-ink-soft);
}

.woocommerce .shop_table dl.variation dt { font-weight: 700; color: var(--hm-ink); }
.woocommerce .shop_table dl.variation dd { margin: 0 0 2px; }

.woocommerce a.remove {
	width: 26px; height: 26px; line-height: 24px;
	color: var(--hm-ink-soft) !important;
	font-size: 1.125rem;
}

.woocommerce a.remove:hover { background: var(--hm-red); color: #fff !important; }

/* ---------------------------------------------------------------- buttons */

/*
 * Woo's primary is #7f54b3. Its own selectors run three classes deep, so
 * these do too, and #place_order is an id because Woo styles it as one.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .cart .button.checkout-button,
.woocommerce a.checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--hm-radius);
	background: var(--hm-red);
	color: #fff;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-shadow: none;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-account .woocommerce-Button:hover {
	background: var(--hm-red-dk);
	color: #fff;
}

.woocommerce a.checkout-button,
.woocommerce-checkout #place_order { width: 100%; }

/* Secondary: outline, so the eye still lands on the primary. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border: 1.5px solid var(--hm-tan);
	border-radius: var(--hm-radius);
	background: transparent;
	color: var(--hm-forest);
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	border-color: var(--hm-forest);
	background: var(--hm-forest);
	color: var(--hm-cream);
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce button.button[disabled] { opacity: .45; }

/* ----------------------------------------------------------------- fields */

/*
 * 16px is a floor, not a size: Safari zooms the page whenever a focused field
 * is under it and never zooms back out. Woo's own field rule is (0,3,2), so
 * this has to match it and then some.
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce #content table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon .input-text {
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid var(--hm-tan);
	border-radius: var(--hm-radius);
	background: #fff;
	color: var(--hm-ink);
	font-family: inherit;
	font-size: max(16px, 1rem);
	line-height: 1.4;
	box-shadow: none;
}

.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea { min-height: 96px; }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
	border-color: var(--hm-red);
	outline: none;
	box-shadow: 0 0 0 3px rgba(197, 22, 46, .18);
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	margin-bottom: 5px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hm-ink-soft);
}

.woocommerce form .form-row { margin-bottom: 14px; padding: 0; }
.woocommerce form .form-row .required { color: var(--hm-red); text-decoration: none; }

/* Woo puts the coupon field and its button in a flex-less row that collapses
   on a phone. */
.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	padding: 0 0 12px;
}

.woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 150px; width: auto; }
.woocommerce table.cart td.actions { padding: 14px 0 0; border-bottom: 0; }
.woocommerce table.cart td.actions .button { width: 100%; }

.woocommerce .quantity .qty {
	width: 74px;
	min-height: 48px;
	padding: 10px 6px;
	border: 1px solid var(--hm-tan);
	border-radius: var(--hm-radius);
	background: #fff;
	font-size: max(16px, 1rem);
	font-weight: 700;
	color: var(--hm-ink);
}

/* --------------------------------------------------------------- messages */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--hm-tan-soft);
	border-top: 3px solid var(--hm-green);
	border-radius: var(--hm-radius);
	background: var(--hm-surface);
	color: var(--hm-ink);
	font-size: .9375rem;
	line-height: 1.5;
}

.woocommerce-error { border-top-color: var(--hm-red); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

.woocommerce-form-coupon-toggle .woocommerce-info { border-top-color: var(--hm-tan); }

/* --------------------------------------------------------------- payments */

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

.woocommerce-checkout #payment ul.payment_methods {
	padding: 14px;
	border-bottom: 1px solid var(--hm-tan-soft);
}

.woocommerce-checkout #payment div.form-row { padding: 14px; }
.woocommerce-checkout #payment div.payment_box { background: var(--hm-surface); border-radius: 8px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* -------------------------------------------------------------- my account */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 8px 14px;
	border: 1px solid var(--hm-tan);
	border-radius: 999px;
	color: var(--hm-forest);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-color: var(--hm-red);
	background: var(--hm-red);
	color: #fff;
}

/* ------------------------------------------------------------ small screen */

@media (max-width: 767px) {
	/* Woo's responsive table puts the label in a ::before. It defaults to a
	   float, which lets long values collide with it. */
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		padding: 9px 0;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		float: none;
		flex: none;
		text-align: left;
		font-weight: 700;
		color: var(--hm-ink-soft);
	}

	.woocommerce table.shop_table_responsive tr td.product-remove { justify-content: flex-end; }

	/*
	 * Two cells are not label/value pairs and must not be flexed into one.
	 * The product cell carries the whole build as a definition list, and the
	 * actions cell carries the coupon field and Update Cart. Both need the
	 * full width and the left edge.
	 */
	.woocommerce table.shop_table_responsive tr td.product-name,
	.woocommerce-page table.shop_table_responsive tr td.product-name,
	.woocommerce table.shop_table_responsive tr td.actions,
	.woocommerce-page table.shop_table_responsive tr td.actions {
		display: block;
		/* woocommerce-smallscreen.css right-aligns every responsive cell with
		   !important, so this is the one place it has to be answered in kind. */
		text-align: left !important;
	}

	/* "Product:" adds nothing above the product's own name. */
	.woocommerce table.shop_table_responsive tr td.product-name::before,
	.woocommerce-page table.shop_table_responsive tr td.product-name::before { content: none; }

	.woocommerce table.shop_table_responsive tr td.product-name > a {
		display: block;
		font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
		font-weight: 600;
		font-size: 1.125rem;
		letter-spacing: .02em;
		text-transform: uppercase;
		color: var(--hm-forest);
		text-decoration: none;
	}

	.woocommerce .shop_table dl.variation,
	.woocommerce table.shop_table_responsive tr td.product-name > a { text-align: left !important; }

	.woocommerce .shop_table dl.variation dt,
	.woocommerce .shop_table dl.variation dd {
		display: inline;
		float: none;
		margin: 0;
		padding: 0;
	}

	.woocommerce .shop_table dl.variation dd::after { content: "\A"; white-space: pre; }
	.woocommerce .shop_table dl.variation dd p { display: inline; margin: 0; }

	.woocommerce table.cart td.actions .coupon { padding-bottom: 10px; }
	.woocommerce table.cart td.actions .button,
	.woocommerce table.cart td.actions .coupon .button { width: 100%; }

	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
}

/* Two columns on a desktop checkout rather than one very long one. */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; }
	.woocommerce-checkout form.checkout > #order_review { margin-top: 0; }
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
	.woocommerce-checkout .col2-set .col-2 { margin-top: 20px; }

	.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .cart-collaterals { width: 100%; margin-top: 0; }
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; margin-top: 0; }
}

/* =========================================================================
 * COLOR, RESTATED
 * =========================================================================
 * The rules above match WooCommerce's own selectors exactly — ".woocommerce
 * a.button.alt" is three classes and an element in both stylesheets — so the
 * tie went to whichever loaded last, which was Woo. Everything except the
 * colors landed, which is why the buttons came out the right size and shape
 * and still Woo purple.
 *
 * Prefixing with body.woocommerce-page settles it regardless of load order.
 * ========================================================================= */

body.woocommerce-page .woocommerce a.button.alt,
body.woocommerce-page .woocommerce button.button.alt,
body.woocommerce-page .woocommerce input.button.alt,
body.woocommerce-page .woocommerce a.checkout-button,
body.woocommerce-page .woocommerce #respond input#submit.alt,
body.woocommerce-checkout #place_order,
body.woocommerce-page .woocommerce-Button {
	background-color: var(--hm-red);
	color: #fff;
}

body.woocommerce-page .woocommerce a.button.alt:hover,
body.woocommerce-page .woocommerce button.button.alt:hover,
body.woocommerce-page .woocommerce input.button.alt:hover,
body.woocommerce-page .woocommerce a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-page .woocommerce-Button:hover {
	background-color: var(--hm-red-dk);
	color: #fff;
}

body.woocommerce-page .woocommerce a.button,
body.woocommerce-page .woocommerce button.button,
body.woocommerce-page .woocommerce input.button,
body.woocommerce-page .woocommerce #respond input#submit {
	background-color: transparent;
	color: var(--hm-forest);
}

body.woocommerce-page .woocommerce a.button:hover,
body.woocommerce-page .woocommerce button.button:hover,
body.woocommerce-page .woocommerce input.button:hover,
body.woocommerce-page .woocommerce #respond input#submit:hover {
	background-color: var(--hm-forest);
	color: var(--hm-cream);
}

/* Disabled Update Cart should read as unavailable, not as a second style. */
body.woocommerce-page .woocommerce button.button:disabled,
body.woocommerce-page .woocommerce button.button[disabled] {
	background-color: transparent;
	color: var(--hm-forest);
}