/*
 * The merch store (inc/shop.php, 0.16.0). Loaded only on store pages (shop, products, cart, checkout, My Account)
 * and the "under construction" page. On top of Kadence's own WooCommerce styles; the brand tokens come from
 * hellpdesk.css. Text on light backgrounds is Ember Deep, never bright Ember (rule 2).
 */

/* 1. The product grid: products as ticket cards ------------------------------------------------- */

.hd-store ul.products li.product {
	padding: 14px 14px 22px;
	border-radius: var(--hd-radius-card);
	background: var(--hd-paper);
	box-shadow: var(--hd-shadow-ticket);
	transition: transform .2s ease, box-shadow .2s ease;
}

.hd-store ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 48px rgba(28, 22, 22, .18);
}

.hd-store ul.products li.product img {
	border-radius: calc(var(--hd-radius-card) - 6px);
	background: var(--hd-charcoal);
}

.hd-store ul.products li.product .button {
	white-space: nowrap;
}

.hd-store ul.products li.product .woocommerce-loop-product__title {
	font: 800 20px/1.2 var(--hd-font);
	letter-spacing: -.01em;
	color: var(--hd-charcoal);
}

.hd-store .price,
.hd-store .price ins,
.hd-store .woocommerce-Price-amount {
	font-family: var(--hd-font);
	font-weight: 800;
	color: var(--hd-ember-deep);
	text-decoration: none;
}

.hd-store .price del,
.hd-store .price del .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--hd-ash);
}

.hd-store .onsale {
	border-radius: var(--hd-radius-pill);
	background: var(--hd-charcoal);
	color: var(--hd-ember);
	font: 800 var(--hd-label)/1 var(--hd-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* The page title over the grid, like the other archives. */
.hd-store .woocommerce-products-header__title,
.hd-store .product_title {
	font-family: var(--hd-font);
	font-weight: 900;
	letter-spacing: -.035em;
	color: var(--hd-charcoal);
}

/* 2. A product ---------------------------------------------------------------------------------- */

.hd-store .woocommerce-product-gallery img {
	border-radius: var(--hd-radius-card);
	background: var(--hd-charcoal);
}

.hd-store .summary .woocommerce-product-details__short-description {
	font-size: var(--hd-body);
	line-height: 1.55;
	color: var(--hd-charcoal-2);
}

.hd-store table.variations th.label {
	font: 600 var(--hd-label)/1.2 var(--hd-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-ash);
}

.hd-store :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea) {
	border: 1.5px solid var(--hd-ash-brand);
	border-radius: var(--hd-radius-input);
	background: var(--hd-white);
	color: var(--hd-charcoal);
}

.hd-store :is(select, input, textarea):focus-visible {
	outline: 3px solid var(--hd-focus);
	outline-offset: 2px;
}

/* Kadence prints the SKU / category / tag line in palette 6 (Line, #DDD3CC: nearly invisible on Paper). */
.hd-store.woocommerce div.product .product_meta > span {
	font-size: var(--hd-label);
	color: var(--hd-ash);
}

.hd-store.woocommerce div.product .product_meta > span a {
	color: var(--hd-ember-deep);
}

.hd-store .woocommerce-tabs ul.tabs li a {
	font: 800 var(--hd-small)/1.2 var(--hd-font);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hd-store .woocommerce-tabs ul.tabs li.active a {
	color: var(--hd-ember-deep);
}

/* 3. Cart, checkout and My Account: paper cards ---------------------------------------------------- */

.hd-store :is(.woocommerce-cart-form, .cart_totals, .woocommerce-checkout-review-order, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register, #customer_details) {
	padding: clamp(18px, 3vw, 32px);
	border-radius: var(--hd-radius-card);
	background: var(--hd-paper);
	box-shadow: var(--hd-shadow-ticket);
}

.hd-store table.shop_table {
	border-color: var(--hd-line);
	border-radius: var(--hd-radius-input);
}

.hd-store table.shop_table :is(th, td) {
	border-color: var(--hd-line);
}

.hd-store table.shop_table thead th,
.hd-store .cart_totals h2,
.hd-store #order_review_heading,
.hd-store .woocommerce-billing-fields h3,
.hd-store .woocommerce-shipping-fields h3 {
	font: 600 var(--hd-label)/1.2 var(--hd-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-ash);
}

.hd-store .woocommerce-MyAccount-navigation ul {
	padding: 0;
	list-style: none;
}

.hd-store .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid var(--hd-line);
	font-weight: 700;
	color: var(--hd-charcoal);
	text-decoration: none;
}

.hd-store .woocommerce-MyAccount-navigation .is-active a {
	color: var(--hd-ember-deep);
}

/* 4. Notices: Charcoal text, an Ember Deep edge -------------------------------------------------- */

.hd-store :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
	border: 0;
	border-left: 4px solid var(--hd-ember-deep);
	border-radius: var(--hd-radius-input);
	background: var(--hd-bone-2);
	color: var(--hd-charcoal);
}

.hd-store .woocommerce-error {
	border-left-color: var(--hd-charcoal);
}

/* 5. "The Company Store is under construction" (template-parts/shop/coming-soon.php) ----------- */

.hd-store-closed {
	max-width: 760px;
	margin: clamp(32px, 6vw, 72px) auto;
	padding: var(--hd-card-pad);
	border-radius: var(--hd-radius-card);
	background: var(--hd-paper);
	box-shadow: var(--hd-shadow-ticket);
}

.hd-store-closed__title {
	margin: 10px 0 18px;
	font: 900 var(--hd-h1)/1.02 var(--hd-font);
	letter-spacing: -.035em;
	text-wrap: balance;
	color: var(--hd-charcoal);
}

.hd-store-closed p {
	font-size: var(--hd-body);
	line-height: 1.55;
	color: var(--hd-charcoal-2);
}

.hd-store-closed .hd-store-closed__status {
	margin: 0 0 22px;
}

.hd-store-closed .hd-store-closed__actions {
	margin: 28px 0 0;
}