/*
 * HWD Commerce - layout and WooCommerce polish.
 * Written only against theme.json tokens (--wp--preset--*, --wp--custom--*), so each
 * client child theme restyles everything by changing token values, not this file.
 */

:root {
	--hwd-header-h: 76px;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Header, main and footer sit flush; main's own padding does the spacing. */
.wp-site-blocks > * { margin-block-start: 0; }

.site-main {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--dark-contrast);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header__bar {
	min-height: var(--hwd-header-h);
	gap: 24px;
}
.site-header a { color: inherit; text-decoration: none; }
.site-header__actions { gap: 20px; }
.site-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--dark-contrast);
	padding: calc(var(--hwd-header-h) + 8px) clamp(20px, 4.2vw, 64px) 32px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
}
.site-header .wc-block-mini-cart__button,
.site-header .wc-block-customer-account a,
.site-header .wp-block-navigation__responsive-container-open {
	color: inherit;
}
.site-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

/* ---------- Footer ---------- */
.site-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: 28px;
	background: var(--wp--preset--color--dark);
	color: color-mix(in srgb, var(--wp--preset--color--dark-contrast) 82%, transparent);
	font-size: var(--wp--preset--font-size--small);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Product listings ---------- */
.wc-block-product-template .wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
}
.wc-block-product-template .wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wc-block-product-template .wc-block-components-product-image:hover img { transform: scale(1.03); }
.wp-block-post-title a { color: inherit; text-decoration: none; }
.wc-block-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.05;
}
/* WooCommerce's default templates (related products, etc.) size titles with a preset class,
   which WordPress marks !important. Display fonts need the larger step to read as a title. */
.wc-block-product-template .wp-block-post-title.has-medium-font-size,
.wc-block-product-template .wp-block-post-title.has-small-font-size {
	font-size: var(--wp--preset--font-size--large) !important;
}
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	font-variant-numeric: tabular-nums;
}
.wc-block-components-product-price del { color: var(--wp--preset--color--muted); font-weight: 500; }
.wc-block-components-product-price ins { text-decoration: none; }

/* Sale / notice badges in the accent color */
.wc-block-components-product-sale-badge,
.wc-block-components-product-badge {
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-weight: 700;
}

/* ---------- Single product ---------- */
.woocommerce-product-gallery {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
}
.woocommerce-product-gallery .flex-control-thumbs li img {
	border-radius: var(--wp--custom--radius--small);
}
.wp-block-add-to-cart-form .quantity .qty,
.wc-block-components-quantity-selector {
	border-radius: var(--wp--custom--radius--pill);
}
.wp-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.wp-block-add-to-cart-form .quantity .qty {
	min-height: 52px;
	width: 5em;
	border: 1.5px solid var(--wp--preset--color--border);
	text-align: center;
	font: inherit;
}
.wp-block-add-to-cart-form .single_add_to_cart_button { min-height: 52px; }

/* Product details tabs */
.wp-block-woocommerce-product-details .wc-tabs {
	display: flex;
	gap: 24px;
	padding: 0;
	border-bottom: 1.5px solid var(--wp--preset--color--border);
	list-style: none;
}
.wp-block-woocommerce-product-details .wc-tabs li a {
	display: block;
	padding: 12px 0;
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	text-decoration: none;
}
.wp-block-woocommerce-product-details .wc-tabs li.active a {
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary);
}
/* The tab already names its panel; WooCommerce repeats it as a heading. Keep it for screen readers. */
.woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Checkout header: logo/site title and a way back to the cart, nothing else */
.site-header--checkout .wc-block-cart-link {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.site-header--checkout .wc-block-cart-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Cart & checkout blocks ---------- */
.site-main .wp-block-woocommerce-checkout { padding-top: 0; }
.wc-block-components-button:not(.is-link) {
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
}
/* Step and panel titles: small headings read better in the body face than a display face. */
h2.wc-block-components-title.wc-block-components-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}
/* Sentence case instead of WooCommerce's all-caps table headers */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header,
.wc-block-cart .wc-block-cart__totals-title {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: 12px;
}
.wc-block-components-totals-footer-item,
.wc-block-components-order-summary-item__total-price {
	font-variant-numeric: tabular-nums;
}

/* ---------- Notices ---------- */
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--medium);
}