/**
 * Cart, checkout and account — Cart.dc.html, Checkout.dc.html, Account.dc.html.
 *
 * All three are core WooCommerce templates and this theme overrides none of
 * them. Core renders the cart as a table and the checkout as two stacked
 * columns of form rows; the canvas draws both as cards. So the table is turned
 * into a card list with grid, rather than replaced — which keeps every
 * `woocommerce_cart_*` and `woocommerce_checkout_*` hook, and every plugin that
 * prints a row or a field, working untouched.
 */

/* ============================ cart ============================ */

/**
 * Every rule below whose subject is a bare `.woocommerce` element is scoped to
 * `.hp-main`, and the scoping is load-bearing.
 *
 * `.woocommerce` is not a WooCommerce-page marker — it is a class plugins put
 * on their own widgets. FiboSearch puts it on the search widget in the site
 * header. So `.woocommerce-cart .woocommerce { display: grid }` did not select
 * the cart wrapper: it selected the cart wrapper AND the header's search box,
 * collapsing the search field to a 34px grid cell on the cart, checkout and
 * account pages, and nowhere else. That is why it read as a cart bug.
 *
 * The site header sits outside <main class="hp-main">, so requiring that
 * ancestor is what separates "the shop layout on this page" from "something
 * else on the page that happens to carry the class".
 */

.woocommerce-cart .hp-main .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--hp-space-8);
	align-items: start;
	padding-block: var(--hp-space-10);
}

.woocommerce-cart .hp-main .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

@media (max-width: 60rem) {
	.woocommerce-cart .hp-main .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* ---- the line items ----
 * Core's <table> becomes a stack of cards: every table element is reset to a
 * block and each row is laid out as its own grid.
 */

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

/* The header row labels columns that no longer exist. */
.woocommerce-cart table.shop_table thead {
	display: none;
}

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

.woocommerce-cart table.shop_table tr.cart_item {
	display: grid;
	/* Six cells: thumbnail, name, quantity, unit price, subtotal, remove.
	 * Five columns left the remove control wrapping onto a second row and
	 * stretching every card. */
	grid-template-columns: 5rem minmax(0, 1fr) auto auto auto auto;
	align-items: center;
	gap: var(--hp-space-4);
	margin-block-end: var(--hp-space-4);
	padding: var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}

.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail {
	order: 1;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-thumbnail img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
}

.woocommerce-cart table.shop_table tr.cart_item td.product-name {
	order: 2;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-name a {
	color: var(--hp-text);
}

/* The club and unit price the plugin prints under the name. */
.woocommerce-cart table.shop_table tr.cart_item td.product-name .hairport-club-pricing {
	margin-block-start: var(--hp-space-1);
	font-weight: 400;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-quantity {
	order: 3;
}

/* Core prints the per-unit price and the line subtotal. The canvas shows one
 * figure per row, so the per-unit column steps back rather than disappearing —
 * it still matters on a multi-quantity line. */
.woocommerce-cart table.shop_table tr.cart_item td.product-price {
	order: 4;
	font-size: var(--hp-text-sm);
	color: var(--hp-text-muted);
}

.woocommerce-cart table.shop_table tr.cart_item td.product-subtotal {
	order: 5;
	font-size: var(--hp-text-lg);
	font-weight: 800;
	white-space: nowrap;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-remove {
	order: 6;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: none;
	color: var(--hp-text-muted);
	font-size: 1.25rem;
	line-height: 1;
}

.woocommerce-cart table.shop_table tr.cart_item td.product-remove a.remove:hover {
	background: none;
	color: var(--hp-sale);
}

@media (max-width: 45rem) {
	.woocommerce-cart table.shop_table tr.cart_item {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
	}

	.woocommerce-cart table.shop_table tr.cart_item td.product-price {
		display: none;
	}
}

/* ---- the actions row ---- */

.woocommerce-cart table.shop_table tr:not(.cart_item) td.actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-4);
	padding-block-start: var(--hp-space-2);
}

.woocommerce-cart .coupon {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
}

.woocommerce-cart .coupon .input-text {
	width: 11rem;
	height: 3.125rem;
	padding-inline: var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	font-size: 0.9375rem;
}

/* ---- the totals card ---- */

.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals {
	width: auto;
	float: none;
}

.woocommerce-cart .cart_totals {
	padding: var(--hp-space-6);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 var(--hp-space-5);
	font-size: var(--hp-text-h3);
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals tbody,
.woocommerce-cart .cart_totals tr,
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	display: block;
	width: auto;
	padding: 0;
	border: none;
	background: none;
	text-align: start;
}

.woocommerce-cart .cart_totals table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp-space-4);
	padding-block: var(--hp-space-3);
	font-size: 0.9375rem;
}

.woocommerce-cart .cart_totals table tr th {
	font-weight: 400;
	color: var(--hp-text-muted);
}

.woocommerce-cart .cart_totals table tr.order-total {
	margin-block-start: var(--hp-space-2);
	padding-block-start: var(--hp-space-4);
	border-block-start: 1px solid var(--hp-border);
	font-size: var(--hp-text-md);
}

.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
	font-weight: 800;
	color: var(--hp-text);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: var(--hp-space-4) 0 0;
}

/* ============================ checkout ============================ */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--hp-space-8);
	align-items: start;
	padding-block: var(--hp-space-10);
}

@media (max-width: 60rem) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}
}

/* Each of core's blocks becomes one of the canvas's cards. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
	width: auto;
	float: none;
	padding: var(--hp-space-6);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}

.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-5);
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 var(--hp-space-5);
	font-size: var(--hp-text-h3);
}

/* Two fields to a row, with the wide ones spanning both. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hp-space-4);
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes {
	grid-column: 1 / -1;
}

@media (max-width: 34rem) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

.woocommerce-checkout .form-row {
	margin: 0;
	padding: 0;
}

/* ---- order review ---- */

.woocommerce-checkout #order_review {
	position: sticky;
	inset-block-start: var(--hp-space-6);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	display: block;
	width: auto;
	padding: 0;
	border: none;
	background: none;
	text-align: start;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp-space-4);
	padding-block: var(--hp-space-3);
	font-size: 0.9375rem;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item {
	border-block-end: 1px solid var(--hp-border);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr {
	color: var(--hp-text-muted);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	margin-block-start: var(--hp-space-2);
	padding-block-start: var(--hp-space-4);
	border-block-start: 1px solid var(--hp-border);
	color: var(--hp-text);
	font-size: var(--hp-text-md);
	font-weight: 800;
}

.woocommerce-checkout #payment {
	margin-block-start: var(--hp-space-5);
	padding-inline: 0;
	border: none;
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--hp-space-4);
	padding: 0;
	border: none;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
	padding: var(--hp-space-4);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	background: var(--hp-surface);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	margin: 0;
	font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box {
	flex-basis: 100%;
	margin: 0;
	padding: var(--hp-space-3) 0 0;
	background: none;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;
}

/* ============================ account ============================ */

.woocommerce-account .hp-main .woocommerce {
	padding-block: var(--hp-space-10);
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
}

.woocommerce-account:not(.logged-in) .hp-main .woocommerce {
	max-width: 30rem;
	margin-inline: auto;
}

/* Signed in: a rail of links beside the panel. */
.woocommerce-account.logged-in .hp-main .woocommerce {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--hp-space-8);
	align-items: start;
}

@media (max-width: 55rem) {
	.woocommerce-account.logged-in .hp-main .woocommerce {
		grid-template-columns: 1fr;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--hp-space-3) var(--hp-space-4);
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hp-surface-subtle);
	color: var(--hp-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--hp-brand);
	color: var(--hp-text-inverse);
}

/* The login and register forms are the canvas's two cards. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-MyAccount-content > form,
.woocommerce-account .woocommerce-Address-title + address {
	padding: var(--hp-space-6);
	margin: 0;
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-4);
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	margin: 0;
	padding: 0;
}

/* ---- orders table ---- */

.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td {
	padding: var(--hp-space-3);
	border-block-end: 1px solid var(--hp-border);
	text-align: start;
	font-size: 0.9375rem;
}

.woocommerce-account table.woocommerce-orders-table th {
	color: var(--hp-text-muted);
	font-weight: 600;
}

/* ============================ shared ============================ */

/* Core's notices, on every one of these pages. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
	margin: 0 0 var(--hp-space-5);
	padding: var(--hp-space-4) var(--hp-space-5);
	background: var(--hp-surface-subtle);
	border: none;
	border-inline-start: 3px solid var(--hp-accent);
	border-radius: var(--hp-radius);
	color: var(--hp-text);
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message {
	border-inline-start-color: var(--hp-success);
}

.woocommerce-error {
	border-inline-start-color: var(--hp-sale);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	height: 2.625rem;
	font-size: var(--hp-text-sm);
}

/* ---- checkout head ----
 * The artboard swaps the site header for a narrow bar on this page: wordmark,
 * a three-step indicator, and the secure-payment note. A checkout carrying full
 * navigation invites the shopper back out of it.
 */

.hp-checkout-focus .hp-header__announcement,
.hp-checkout-focus .hp-nav,
.hp-checkout-focus .hp-header__row > .hp-search-slot,
.hp-checkout-focus .hp-tabbar {
	display: none;
}

.hp-checkout-head {
	border-block-end: 1px solid var(--hp-border);
	margin-block-end: var(--hp-space-8);
}

.hp-checkout-head__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-6);
	padding-block: var(--hp-space-5);
}

.hp-checkout-head__brand {
	color: var(--hp-text);
	font-family: var(--hp-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hp-steps {
	display: flex;
	align-items: center;
	gap: var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-steps__item {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
	font-weight: 600;
}

/* A hairline between the steps, drawn by the item rather than an empty span. */
.hp-steps__item + .hp-steps__item::before {
	content: "";
	width: 1.5rem;
	height: 1px;
	margin-inline-end: var(--hp-space-3);
	background: var(--hp-border);
}

.hp-steps__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius-pill);
	font-size: var(--hp-text-xs);
	font-variant-numeric: tabular-nums;
}

.hp-steps__item.is-current {
	color: var(--hp-text);
}

.hp-steps__item.is-current .hp-steps__number {
	background: var(--hp-brand);
	border-color: var(--hp-brand);
	color: var(--hp-text-inverse);
}

.hp-checkout-head__secure {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	margin: 0;
	color: var(--hp-text-muted);
	font-size: var(--hp-text-sm);
}

.hp-icon--lock {
	width: 1rem;
	height: 1rem;
	background: currentColor;
	mask: var(--hp-icon-lock) center / contain no-repeat;
	-webkit-mask: var(--hp-icon-lock) center / contain no-repeat;
}

@media (max-width: 45rem) {
	.hp-steps__label {
		display: none;
	}

	.hp-checkout-head__secure {
		display: none;
	}
}

/* The place-order button, whether or not a .woocommerce wrapper is above it. */
.woocommerce-checkout #place_order,
#place_order {
	width: 100%;
	height: 3.25rem;
	margin-block-start: var(--hp-space-4);
	padding-inline: var(--hp-space-7);
	background: var(--hp-brand);
	border: none;
	border-radius: var(--hp-radius-pill);
	color: var(--hp-text-inverse);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-md);
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover,
#place_order:hover {
	background: var(--hp-brand-hover);
}

/* ---- the cart's own heading ----
 * page.php no longer prints the page title on these pages, so the cart states
 * its own — "העגלה שלי", as the artboard draws it. Core prints no heading of
 * its own on a full cart, so the theme supplies one from PHP; on the empty cart
 * core's own message becomes the whole panel.
 */

.hp-cart-title {
	margin: 0 0 var(--hp-space-6);
	font-size: var(--hp-text-h2);
}

.hp-cart-title__count {
	color: var(--hp-text-muted);
	font-size: var(--hp-text-md);
	font-weight: 400;
}

/* ---- empty cart ----
 * Core prints a plain info notice and a "return to shop" button. The artboard
 * has no empty state, so this is the same card vocabulary as the full cart:
 * one panel, centred, with the action as the theme's primary button.
 */

.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-size: var(--hp-text-md);
	color: var(--hp-text-muted);
	text-align: center;
}

.woocommerce-cart .cart-empty::before,
.woocommerce-cart .wc-empty-cart-message::before {
	content: none;
}

.woocommerce-cart .hp-main .woocommerce:has(.cart-empty),
.woocommerce-cart .hp-main .woocommerce:has(.wc-empty-cart-message) {
	display: block;
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--hp-space-14) var(--hp-space-8);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	text-align: center;
}

.woocommerce-cart .return-to-shop {
	margin: var(--hp-space-6) 0 0;
	text-align: center;
}

.woocommerce-cart .return-to-shop .button {
	display: inline-flex;
	height: var(--hp-control-height);
	padding-inline: var(--hp-space-7);
	background: var(--hp-brand);
	color: var(--hp-text-inverse);
	border-radius: var(--hp-radius-pill);
	font-weight: 600;
}

/* ---- the account and checkout pages need the same release ----
 * They are pages too, so without this they would inherit the prose column.
 */

.woocommerce-cart .hp-main .hp-container > .woocommerce,
.woocommerce-checkout .hp-main .hp-container > .woocommerce,
.woocommerce-account .hp-main .hp-container > .woocommerce {
	max-width: none;
}