/* ==========================================================================
   Cart / checkout / order-complete skin.

   Loaded only when JWMHM_ShopSkin::active(), and every selector is prefixed
   .jwmhm-skin (or .hmsk- for markup this skin owns), so nothing here can leak
   onto a screen the skin is not covering.

   Specificity note, learned the hard way on this site: the Elementor kit
   styles every bare `button` red with 16px 28px of padding at (0,1,1). Any
   button rule here names the element as well as the class so it wins.
   ========================================================================== */

.jwmhm-skin {
	--sk-red:      #C5162E;
	--sk-red-dk:   #A5101F;
	--sk-forest:   #0E2A24;
	--sk-ink:      #17201D;
	--sk-soft:     #5F6B65;
	--sk-line:     #E8DFD2;
	--sk-card:     #FFFDFA;
	--sk-ground:   #F5EBDD;
	--sk-good:     #2F6B4F;
	--sk-radius:   14px;
	--sk-shadow:   0 1px 2px rgba(23, 32, 29, .04), 0 8px 20px rgba(23, 32, 29, .05);
}

/* The theme prints its own page title. The skin prints a title and a
   subtitle instead, so the theme's is hidden rather than duplicated. */
.jwmhm-skin .page-header,
.jwmhm-skin h1.entry-title { display: none !important; }

.jwmhm-skin .woocommerce { color: var(--sk-ink); }

/* -------------------------------------------------------------- page head */

.hmsk-head { margin: 0 0 22px; }

.hmsk-head__title {
	margin: 0 0 4px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4.5vw, 44px);
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--sk-ink);
}

.hmsk-head__sub { margin: 0; font-size: 1rem; color: var(--sk-soft); }

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

.jwmhm-skin .hmsk-card,
.jwmhm-skin .cart_totals,
.jwmhm-skin #order_review,
.jwmhm-skin .woocommerce-form-coupon-toggle,
.jwmhm-skin form.checkout_coupon,
.jwmhm-skin .woocommerce-additional-fields {
	margin: 0 0 16px;
	padding: 22px 24px;
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow);
}

.jwmhm-skin .hmsk-card__title,
.jwmhm-skin .cart_totals h2,
.jwmhm-skin #order_review_heading,
.jwmhm-skin .woocommerce-billing-fields h3,
.jwmhm-skin .hmsk-pickup-title {
	margin: 0 0 16px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sk-ink);
}

/* The order review heading is a sibling of the panel, not inside it. */
.jwmhm-skin #order_review_heading {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

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

.jwmhm-skin a.hmsk-btn,
.jwmhm-skin button.hmsk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 15px 22px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .8125rem;
	line-height: 1.2;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--sk-red);
	border: 1px solid var(--sk-red);
	border-radius: 8px;
	cursor: pointer;
}

.jwmhm-skin a.hmsk-btn:hover,
.jwmhm-skin button.hmsk-btn:hover { background: var(--sk-red-dk); border-color: var(--sk-red-dk); color: #fff; }

.jwmhm-skin a.hmsk-btn--ghost,
.jwmhm-skin button.hmsk-btn--ghost {
	color: var(--sk-red);
	background: transparent;
	border-color: var(--sk-red);
}

.jwmhm-skin a.hmsk-btn--ghost:hover { background: rgba(197, 22, 46, .06); color: var(--sk-red); }

.jwmhm-skin a.hmsk-btn--dark {
	color: #fff;
	background: var(--sk-forest);
	border-color: var(--sk-forest);
}

.jwmhm-skin a.hmsk-btn--dark:hover { background: #071F1B; border-color: #071F1B; }

/* WooCommerce's own primary buttons, matched to the above. */
.jwmhm-skin .wc-proceed-to-checkout a.checkout-button,
.jwmhm-skin #place_order {
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px 22px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sk-red);
	border: 1px solid var(--sk-red);
	border-radius: 8px;
}

.jwmhm-skin .wc-proceed-to-checkout { padding: 0; margin: 4px 0 0; }
.jwmhm-skin .hmsk-addmore { margin: 12px 0 0; }

/* A lock line under the primary action, as drawn. */
.jwmhm-skin .wc-proceed-to-checkout::after,
.jwmhm-skin .hmsk-place::after {
	content: "Secure checkout";
	display: block;
	margin: 10px 0 12px;
	font-size: .75rem;
	font-weight: 600;
	text-align: center;
	color: var(--sk-soft);
}

/* ================================================================== CART = */

.jwmhm-skin .woocommerce-cart-form { margin: 0; }

.jwmhm-skin table.shop_table.cart,
.jwmhm-skin table.shop_table.cart tbody,
.jwmhm-skin table.shop_table.cart tr,
.jwmhm-skin table.shop_table.cart td {
	display: block;
	width: auto;
	background: none;
	border: 0;
	padding: 0;
}

.jwmhm-skin table.shop_table.cart { border: 0; box-shadow: none; }
.jwmhm-skin table.shop_table.cart thead { display: none; }

/* Woo's responsive stylesheet labels every cell with a ::before. Inside a
   card those labels are noise. */
.jwmhm-skin table.shop_table.cart td::before { content: none !important; }

.jwmhm-skin table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto auto 32px;
	align-items: center;
	gap: 18px;
	margin: 0 0 14px;
	padding: 16px 18px;
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow);
}

.jwmhm-skin table.shop_table.cart td.product-thumbnail { grid-column: 1; }

.jwmhm-skin table.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: 10px;
}

.jwmhm-skin table.shop_table.cart td.product-name { grid-column: 2; align-items: stretch; }
.jwmhm-skin table.shop_table.cart td.product-price { display: none; }
.jwmhm-skin table.shop_table.cart td.product-subtotal { grid-column: 3; font-weight: 700; font-size: 1.0625rem; white-space: nowrap; }
.jwmhm-skin table.shop_table.cart td.product-quantity { grid-column: 4; }
.jwmhm-skin table.shop_table.cart td.product-remove { grid-column: 5; text-align: right; }

.jwmhm-skin table.shop_table.cart td.product-name > a {
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sk-red);
	text-decoration: none;
	border: 0;
}

.jwmhm-skin table.shop_table.cart td.product-name dl.variation { margin: 6px 0 0; font-size: .8125rem; line-height: 1.7; }

/* Quantity stepper, assembled by shopskin.js around Woo's number input. */
.jwmhm-skin .hmsk-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.jwmhm-skin button.hmsk-qty__btn {
	width: 38px;
	height: 40px;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sk-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.jwmhm-skin button.hmsk-qty__btn:hover { background: #F6EFE5; color: var(--sk-ink); }
.jwmhm-skin button.hmsk-qty__btn[disabled] { opacity: .35; cursor: default; }

.jwmhm-skin .hmsk-qty input.qty {
	width: 42px;
	height: 40px;
	padding: 0;
	font-size: 16px;
	text-align: center;
	color: var(--sk-ink);
	background: #fff;
	border: 0;
	border-left: 1px solid var(--sk-line);
	border-right: 1px solid var(--sk-line);
	border-radius: 0;
	-moz-appearance: textfield;
}

.jwmhm-skin .hmsk-qty input.qty::-webkit-outer-spin-button,
.jwmhm-skin .hmsk-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Update Cart is redundant once the stepper posts for you, but it stays in
   the DOM because the stepper clicks it. */
.jwmhm-skin button[name="update_cart"],
.jwmhm-skin input[name="update_cart"] { position: absolute; left: -9999px; }

.jwmhm-skin table.shop_table.cart td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 0 !important;
	color: transparent !important;
	background: none !important;
	border-radius: 8px;
}

.jwmhm-skin table.shop_table.cart td.product-remove a.remove::before {
	content: "";
	width: 17px;
	height: 17px;
	background: var(--sk-red);
	-webkit-mask: var(--sk-trash) center / contain no-repeat;
	mask: var(--sk-trash) center / contain no-repeat;
}

.jwmhm-skin {
	--sk-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

.jwmhm-skin table.shop_table.cart td.product-remove a.remove:hover { background: rgba(197, 22, 46, .08) !important; }

/* The coupon form is gone from the cart (it is offered on checkout instead), so
   the actions row now holds nothing but the off-screen Update Cart button the
   quantity stepper presses. It has to stay in the DOM and stay clickable, so
   strip the card off it and let it collapse rather than hiding it. */
.jwmhm-skin table.shop_table.cart td.actions {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Order summary rides along on scroll. The wrapper is a grid with
   align-items:start, so the column is already its own height rather than
   stretched to the track -- which is the usual reason sticky does nothing
   inside a grid. */
@media (min-width: 992px) {
	.jwmhm-skin .cart-collaterals {
		position: sticky;
		top: 24px;
		align-self: start;
	}

	/* body carries both classes, so this is a compound selector, not a descendant. */
	.jwmhm-skin.admin-bar .cart-collaterals { top: 56px; }
}

/* The coupon row, lifted out of the table into its own card. */
.jwmhm-skin table.shop_table.cart tr.actions,
.jwmhm-skin table.shop_table.cart td.actions {
	display: block;
	margin: 0;
	padding: 0;
}

.jwmhm-skin table.shop_table.cart td.actions {
	margin: 16px 0 0;
	padding: 18px 20px;
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow);
}

.jwmhm-skin .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jwmhm-skin .coupon::before {
	content: "Coupon code";
	flex: 0 0 auto;
	font-weight: 700;
	font-size: .875rem;
}

.jwmhm-skin .coupon input#coupon_code {
	flex: 1 1 180px;
	min-width: 0;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 16px;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
	background: #fff;
}

.jwmhm-skin .coupon button[name="apply_coupon"] {
	flex: 0 0 auto;
	width: auto;
	min-height: 44px;
	padding: 10px 22px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sk-red);
	background: transparent;
	border: 1px solid var(--sk-red);
	border-radius: 8px;
}

/* Order summary panel. */
.jwmhm-skin .cart_totals table.shop_table,
.jwmhm-skin .cart_totals table.shop_table td,
.jwmhm-skin .cart_totals table.shop_table th {
	display: revert;
	border: 0;
	background: none;
	padding: 9px 0;
	font-size: .9375rem;
}

.jwmhm-skin .cart_totals table.shop_table { width: 100%; border-collapse: collapse; }
.jwmhm-skin .cart_totals table.shop_table th { text-align: left; font-weight: 500; color: var(--sk-soft); }
.jwmhm-skin .cart_totals table.shop_table td { text-align: right; font-weight: 600; }

.jwmhm-skin .cart_totals tr.order-total th,
.jwmhm-skin .cart_totals tr.order-total td {
	padding-top: 14px;
	border-top: 1px solid var(--sk-line);
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	text-transform: uppercase;
	color: var(--sk-ink);
}

.jwmhm-skin .cart_totals tr.order-total td { color: var(--sk-red); }
.jwmhm-skin .cart-collaterals .cross-sells { display: none; }

/* The save-a-build block, carried over from the cart row work. */
.jwmhm-skin .jwmhm-acct__save {
	margin: 16px 0 0;
	padding: 18px 20px;
	background: var(--sk-card);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow);
}

/* ============================================================== CHECKOUT = */

.jwmhm-skin .woocommerce-billing-fields h3 { margin-top: 0; }
.jwmhm-skin .woocommerce-additional-fields h3 { display: none; }
.jwmhm-skin .hmsk-pickup-title { display: block; }
.jwmhm-skin #jwmhm-pickup h3 { display: none; }

.jwmhm-skin .hmsk-fieldgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.jwmhm-skin .hmsk-fieldgrid .form-row-wide,
.jwmhm-skin .hmsk-fieldgrid #billing_email_field,
.jwmhm-skin .hmsk-fieldgrid #billing_phone_field { grid-column: 1 / -1; }

/* Woo's layout sheet still forces width:47% + float on first/last rows; inside our grids they must fill their track. */
.jwmhm-skin form .hmsk-fieldgrid > .form-row,
.jwmhm-skin form .hmsk-billing__fields > .form-row {
	float: none;
	width: 100%;
}

.jwmhm-skin .form-row { margin: 0 0 16px; padding: 0; }

.jwmhm-skin .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sk-soft);
}

.jwmhm-skin .form-row input.input-text,
.jwmhm-skin .form-row textarea,
.jwmhm-skin .form-row select,
.jwmhm-skin .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	/* 16px or iOS zooms the page when a field takes focus. */
	font-size: 16px;
	line-height: 1.3;
	color: var(--sk-ink);
	background: #fff;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
}

.jwmhm-skin .form-row input.input-text:focus,
.jwmhm-skin .form-row select:focus {
	outline: none;
	border-color: var(--sk-red);
	box-shadow: 0 0 0 3px rgba(197, 22, 46, .14);
}

.jwmhm-skin .woocommerce-invalid input.input-text,
.jwmhm-skin .woocommerce-invalid select { border-color: var(--sk-red); }

/* The store, above the two pickup selects. */
.hmsk-store {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #FBF5EC;
	border: 1px solid var(--sk-line);
	border-radius: 10px;
}

.hmsk-store__pin { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sk-red); }
.hmsk-store__pin svg { width: 22px; height: 22px; }
.hmsk-store__text { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; }
.hmsk-store__text span { color: var(--sk-soft); }

.jwmhm-skin #jwmhm-pickup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.jwmhm-skin #jwmhm-pickup .jwmhm-pickup__none { grid-column: 1 / -1; }
.jwmhm-skin #jwmhm-pickup select { min-height: 48px; border-color: var(--sk-line); border-radius: 8px; }

/* Billing address, collapsed. */
.jwmhm-skin details.hmsk-billing { padding: 0; }

.jwmhm-skin .hmsk-billing__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
}

.jwmhm-skin .hmsk-billing__summary::-webkit-details-marker { display: none; }
.jwmhm-skin .hmsk-billing__summary .hmsk-card__title { display: block; margin: 0 0 2px; }
.hmsk-billing__note { display: block; font-size: .8125rem; color: var(--sk-soft); }
.hmsk-billing__chevron { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sk-soft); transition: transform .18s ease; }
.hmsk-billing__chevron svg { width: 22px; height: 22px; }
.jwmhm-skin details.hmsk-billing[open] .hmsk-billing__chevron { transform: rotate(180deg); }

.jwmhm-skin .hmsk-billing__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
	padding: 0 24px 8px;
}

.jwmhm-skin .hmsk-billing__fields .form-row-wide { grid-column: 1 / -1; }

/* Coupon toggle, as a quiet card. */
.jwmhm-skin .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: .9375rem;
	color: var(--sk-ink);
}

.jwmhm-skin .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }

/* Order panel. */
.jwmhm-skin #order_review table.shop_table,
.jwmhm-skin #order_review table.shop_table td,
.jwmhm-skin #order_review table.shop_table th,
.jwmhm-skin #order_review table.shop_table tr { border: 0; background: none; }

.jwmhm-skin #order_review table.shop_table { width: 100%; margin: 0; }
.jwmhm-skin #order_review table.shop_table thead { display: none; }

.jwmhm-skin #order_review table.shop_table td,
.jwmhm-skin #order_review table.shop_table th { padding: 11px 0; font-size: .9375rem; vertical-align: top; }

.jwmhm-skin #order_review tr.cart_item td { border-bottom: 1px solid #F1E9DC; }
.jwmhm-skin #order_review td.product-name { display: table-cell; font-weight: 600; }
.jwmhm-skin #order_review td.product-total { text-align: right; white-space: nowrap; font-weight: 600; }

.hmsk-itemmeta { margin: 4px 0 0; }
.hmsk-itemmeta__for { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--sk-ink); }
.hmsk-itemmeta__for span { margin-right: 5px; font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sk-soft); }
.hmsk-itemmeta__sum { margin: 2px 0 0; font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--sk-soft); }

.jwmhm-skin #order_review tfoot th { text-align: left; font-weight: 500; color: var(--sk-soft); }
.jwmhm-skin #order_review tfoot td { text-align: right; font-weight: 600; }

.jwmhm-skin #order_review tfoot tr.order-total th,
.jwmhm-skin #order_review tfoot tr.order-total td {
	padding-top: 14px;
	border-top: 1px solid var(--sk-line);
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3125rem;
	text-transform: uppercase;
}

.jwmhm-skin #order_review tfoot tr.order-total td { color: var(--sk-red); }

/* Tip pills. */
.jwmhm-skin .jwmhm-gratuity {
	margin: 20px 0 0;
	padding: 16px 18px 18px;
	background: #FDF8F1;
	border: 1px solid var(--sk-line);
	border-radius: 10px;
}
.jwmhm-skin .jwmhm-gratuity__label strong {
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.jwmhm-skin .jwmhm-gratuity__options {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.jwmhm-skin .jwmhm-gratuity__options li { margin: 0; }

.jwmhm-skin .jwmhm-gratuity__options label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 6px 4px;
	font-size: .875rem;
	font-weight: 600;
	text-align: center;
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
}

.jwmhm-skin .jwmhm-gratuity__options input { position: absolute; opacity: 0; pointer-events: none; }
.jwmhm-skin .jwmhm-gratuity__options input:checked + span,
.jwmhm-skin .jwmhm-gratuity__options label:has(input:checked) {
	color: #fff;
	background: var(--sk-red);
	border-color: var(--sk-red);
}

/* Payment. */
.hmsk-payhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; padding-top: 18px; border-top: 1px solid var(--sk-line); }
.hmsk-payhead .hmsk-card__title { margin: 0; }
.hmsk-payhead__cards { display: flex; gap: 5px; }
.hmsk-payhead__cards span {
	padding: 3px 7px;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sk-soft);
	background: #F4ECE1;
	border: 1px solid var(--sk-line);
	border-radius: 4px;
}

.jwmhm-skin #payment { background: none; border-radius: 0; }
.jwmhm-skin #payment ul.payment_methods { padding: 0; border: 0; }
.jwmhm-skin #payment div.form-row { padding: 16px 0 0; }
.jwmhm-skin #payment .payment_box { background: #FBF5EC; border-radius: 10px; }
.jwmhm-skin #payment .payment_box::before { display: none; }

.jwmhm-skin .woocommerce-terms-and-conditions-wrapper { margin: 4px 0 14px; font-size: .875rem; }

/* ========================================================= ORDER COMPLETE = */

.hmsk-ty { max-width: 1180px; margin: 0 auto; }
.hmsk-ty__hero { text-align: center; margin: 0 0 28px; }

.hmsk-ty__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 0 0 18px;
	color: #fff;
	background: var(--sk-forest);
	border: 3px solid var(--sk-red);
	border-radius: 50%;
}

.hmsk-ty__check svg { width: 34px; height: 34px; }

.hmsk-ty__title {
	margin: 0 0 8px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 46px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--sk-ink);
}

.hmsk-ty__sub { margin: 0 0 4px; color: var(--sk-soft); }

.hmsk-ty__num {
	display: inline-block;
	margin: 16px 0 0;
	padding: 9px 22px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sk-red);
	background: #FBF0F1;
	border: 1px solid rgba(197, 22, 46, .35);
	border-radius: 999px;
}

.hmsk-ty__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }

.hmsk-facts { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hmsk-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.hmsk-facts__ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--sk-red); }
.hmsk-facts__ico svg { width: 24px; height: 24px; }

.hmsk-note { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--sk-line); font-size: .875rem; color: var(--sk-soft); }

.hmsk-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hmsk-steps li { display: flex; gap: 12px; align-items: center; font-size: 1rem; }
.hmsk-steps li span {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: .9375rem;
	color: #fff;
	background: var(--sk-red);
	border-radius: 50%;
}

.hmsk-callout p { margin: 0; font-size: .9375rem; }
.hmsk-callout a { color: var(--sk-red); }

.hmsk-lines { margin: 0; padding: 0; list-style: none; }
.hmsk-lines__row { display: flex; gap: 14px; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #F1E9DC; }
.hmsk-lines__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hmsk-lines__name { font-weight: 600; font-size: .9375rem; }
.hmsk-lines__name span { color: var(--sk-soft); font-weight: 500; }
.hmsk-lines__for { font-size: .8125rem; font-weight: 700; }
.hmsk-lines__sum { font-size: .8125rem; color: var(--sk-soft); line-height: 1.5; }
.hmsk-lines__price { flex: 0 0 auto; font-weight: 600; font-size: .9375rem; white-space: nowrap; }

.hmsk-totals { width: 100%; margin: 14px 0 0; border-collapse: collapse; }
.hmsk-totals th, .hmsk-totals td { padding: 8px 0; border: 0; font-size: .9375rem; }
.hmsk-totals th { text-align: left; font-weight: 500; color: var(--sk-soft); }
.hmsk-totals td { text-align: right; font-weight: 600; }

.hmsk-totals tr:last-child th,
.hmsk-totals tr:last-child td {
	padding-top: 14px;
	border-top: 1px solid var(--sk-line);
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.3125rem;
	text-transform: uppercase;
}

.hmsk-totals tr:last-child td { color: var(--sk-red); }

.hmsk-paid { margin: 14px 0 18px; font-size: .875rem; color: var(--sk-soft); }
.hmsk-summary p { margin: 0 0 10px; }
.hmsk-summary p:last-child { margin-bottom: 0; }

/* ================================================================ PHONE = */

@media (max-width: 991px) {
	.hmsk-ty__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.jwmhm-skin .hmsk-card,
	.jwmhm-skin .cart_totals,
	.jwmhm-skin #order_review,
	.jwmhm-skin table.shop_table.cart td.actions,
	.jwmhm-skin .woocommerce-additional-fields,
	.jwmhm-skin .jwmhm-acct__save { padding: 18px 16px; }

	.jwmhm-skin .hmsk-billing__summary { padding: 18px 16px; }
	.jwmhm-skin .hmsk-billing__fields { padding: 0 16px 6px; }

	/* One column for every field pair. */
	.jwmhm-skin .hmsk-fieldgrid,
	.jwmhm-skin .hmsk-billing__fields,
	.jwmhm-skin #jwmhm-pickup { grid-template-columns: minmax(0, 1fr); }

	/* The item card: photo down the left, everything else beside it. */
	.jwmhm-skin table.shop_table.cart tr.cart_item {
		grid-template-columns: 76px minmax(0, 1fr) auto;
		gap: 12px 14px;
		padding: 14px;
	}

	.jwmhm-skin table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
	.jwmhm-skin table.shop_table.cart td.product-thumbnail img { width: 76px; height: 76px; }
	.jwmhm-skin table.shop_table.cart td.product-name { grid-column: 2 / span 2; grid-row: 1; }
	.jwmhm-skin table.shop_table.cart td.product-subtotal { grid-column: 2; grid-row: 2; }
	.jwmhm-skin table.shop_table.cart td.product-quantity { grid-column: 3; grid-row: 2; justify-self: end; }

	/* The bin goes on the name row, hard right, away from the stepper. */
	.jwmhm-skin table.shop_table.cart td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; }

	.jwmhm-skin .coupon { flex-direction: column; align-items: stretch; }
	.jwmhm-skin .coupon::before { margin-bottom: 2px; }
	.jwmhm-skin .coupon button[name="apply_coupon"] { width: 100%; }

	.jwmhm-skin .jwmhm-gratuity { padding: 14px 14px 16px; }
	.jwmhm-skin .jwmhm-gratuity__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.hmsk-payhead { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.hmsk-billing__chevron { transition: none; }
}

/* Every cell explicitly on row 1 at desktop. With columns assigned but no
   rows, grid auto-placement walks its cursor forward and pushes later cells
   onto new rows - which is how the bin ended up alone above the card and the
   price alone below it. */
@media (min-width: 768px) {
	.jwmhm-skin table.shop_table.cart tr.cart_item > td { grid-row: 1; }
}

/* ------------------------------------------------- checkout grid, corrected

   hm-brand lays form.checkout out as a two column grid. Adding the collapsed
   Billing Address card gave that grid a fourth child with no placement, and
   the separate "Your Order" heading was already sitting in row 1 beside the
   full height billing column, which pushes the order panel down the page.

   So: the heading is dropped and the panel carries its own title, the two left
   hand cards take rows 1 and 2 of column 1, and the panel spans both rows of
   column 2. */

.jwmhm-skin #order_review_heading { display: none !important; }

.jwmhm-skin #order_review::before {
	content: "Your Order";
	display: block;
	margin: 0 0 16px;
	font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sk-ink);
}

@media (min-width: 992px) {
	.jwmhm-skin.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1; }
	.jwmhm-skin.woocommerce-checkout form.checkout > details.hmsk-billing { grid-column: 1; grid-row: 2; }
	.jwmhm-skin.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 1 / span 2; }
}

/* The pickup heading has to outrank the blanket "hide the additional fields
   heading" rule above it, so it names the element as well as the class. */
.jwmhm-skin .woocommerce-additional-fields h3.hmsk-pickup-title { display: block; }

/* Shipping is switched off, so this wrapper is an empty card. */
.jwmhm-skin .woocommerce-shipping-fields { display: none; }

/* The order panel spans both rows and is far taller than the two cards beside
   it, so grid shares its surplus height between the rows and drops a 470px
   hole between Pickup Details and Billing Address. Pinning row 1 to its own
   content and giving row 2 the slack closes it. */
@media (min-width: 992px) {
	.jwmhm-skin.woocommerce-checkout form.checkout { grid-template-rows: max-content auto; }
}

/* hm-brand bands rows inside any shop_table; the summary table on the order
   complete page is not one of those. */
.jwmhm-skin .hmsk-totals tr,
.jwmhm-skin .hmsk-totals th,
.jwmhm-skin .hmsk-totals td { background: none; }

/* shopskin.js moves the Billing Address card inside #customer_details, so the
   checkout grid is back to one row and the order panel no longer spans. */
@media (min-width: 992px) {
	.jwmhm-skin.woocommerce-checkout form.checkout { grid-template-rows: auto; }
	.jwmhm-skin.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1; }
	.jwmhm-skin.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 1; }
}

.jwmhm-skin #customer_details > details.hmsk-billing { margin-top: 16px; }