/* ============================================================================
 * Struxa shop UI -- shop / category pages, cart, checkout.
 *
 * Enqueued by inc/struxa-shop/struxa-shop-ui.php on WooCommerce pages only,
 * after struxa-design-system.css, whose tokens (--font-ui, --font-display,
 * --t-*, --struxa-gold ...) it uses throughout.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * Fonts.
 *
 * WoodMart's components read their fonts from custom properties
 * (--wd-text-font etc.), and its Theme Settings set those to Cormorant
 * Garamond -- the display face -- so every cart label, price, table heading
 * and product name came out in a small decorative serif. Re-pointing the
 * properties on the page content (not :root) puts the shop, cart and
 * checkout on the UI face while the header and footer keep their look.
 * Headings that are meant to be serif set --font-display themselves.
 * ------------------------------------------------------------------------ */
.wd-page-content {
	--wd-text-font: var(--font-ui);
	--wd-title-font: var(--font-ui);
	--wd-entities-title-font: var(--font-ui);
	--wd-widget-title-font: var(--font-ui);
	font-family: var(--font-ui);
}

/* ---------------------------------------------------------------------------
 * Shop / category header (markup from struxa_shop_archive_head()).
 * ------------------------------------------------------------------------ */
.struxa-archive-head {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 clamp(24px, 3vw, 40px);
	padding-bottom: clamp(20px, 2.5vw, 32px);
	border-bottom: 1px solid var(--line-1, rgba(255, 255, 255, 0.07));
}

.struxa-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow, 0.6875rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t-4, rgba(255, 255, 255, 0.4));
}

.struxa-crumbs a {
	color: var(--t-3, rgba(255, 255, 255, 0.55));
	transition: color 150ms ease;
}

.struxa-crumbs a:hover,
.struxa-crumbs a:focus-visible {
	color: var(--struxa-gold, #C5A059);
}

.struxa-crumbs [aria-current] {
	color: var(--t-2, rgba(255, 255, 255, 0.74));
}

.struxa-archive-title {
	margin: 0.45em 0 0.15em;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--tr-head, -0.021em);
	color: var(--t-1, #fff);
	text-wrap: balance;
}

.struxa-archive-count {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-sm, 0.9375rem);
	color: var(--t-3, rgba(255, 255, 255, 0.55));
}

.struxa-archive-desc {
	max-width: 65ch;
	margin-top: 1rem;
	font-family: var(--font-ui);
	font-size: var(--fs-sm, 0.9375rem);
	line-height: 1.6;
	color: var(--t-2, rgba(255, 255, 255, 0.74));
}

.struxa-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.struxa-cat-pills a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--t-2, rgba(255, 255, 255, 0.74));
	white-space: nowrap;
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.struxa-cat-pills a:hover,
.struxa-cat-pills a:focus-visible {
	border-color: var(--struxa-gold, #C5A059);
	color: #fff;
}

.struxa-cat-pills a.is-active {
	background: var(--struxa-gold, #C5A059);
	border-color: var(--struxa-gold, #C5A059);
	color: #0d0d0d;
}

/* On a phone the category buttons scroll sideways in one row instead of
   stacking into a tall block above the products. */
@media (max-width: 640px) {
	.struxa-cat-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	.struxa-cat-pills::-webkit-scrollbar { display: none; }
}

/* The price-range filter sat on its own under the last row of products.
   Most of the range is quote-only, so filtering by price is not useful here,
   and on its own below the grid it read as leftover debris. */
.struxa-premium-shop .sidebar-container {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Cart / checkout page heading (markup from the woocommerce_before_cart and
 * woocommerce_before_checkout_form hooks).
 * ------------------------------------------------------------------------ */
.struxa-page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin: clamp(24px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line-1, rgba(255, 255, 255, 0.07));
}

.struxa-page-head h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--tr-head, -0.021em);
	color: var(--t-1, #fff);
}

.struxa-page-head-link {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--struxa-gold, #C5A059);
}

.struxa-page-head-link:hover,
.struxa-page-head-link:focus-visible {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Cart table and totals: one UI face, readable sizes, real buttons.
 * ------------------------------------------------------------------------ */
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
	font-family: var(--font-ui) !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--t-4, rgba(255, 255, 255, 0.4)) !important;
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	color: var(--t-2, rgba(255, 255, 255, 0.74));
	vertical-align: middle;
}

.woocommerce-cart td.product-name a {
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--t-1, #fff);
}

.woocommerce-cart td.product-name a:hover {
	color: var(--struxa-gold, #C5A059);
}

.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name .variation * {
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--t-3, rgba(255, 255, 255, 0.55));
}

.woocommerce-cart .product-price .amount,
.woocommerce-cart .product-subtotal .amount,
.cart_totals .amount,
.woocommerce-checkout-review-order .amount {
	font-family: var(--font-ui);
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .product-subtotal .amount {
	font-weight: 600;
	color: var(--struxa-gold, #C5A059);
}

.cart_totals h2 {
	font-family: var(--font-display) !important;
	font-size: 1.75rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--tr-head, -0.021em) !important;
	text-transform: none !important;
	color: var(--t-1, #fff) !important;
}

/* .woocommerce-cart ... table.shop_table: the totals box is itself a
   shop_table, so these need to out-rank the table-heading rule above. */
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	font-family: var(--font-ui) !important;
	font-size: 0.875rem !important;
	color: var(--t-2, rgba(255, 255, 255, 0.74)) !important;
}

.woocommerce-cart .cart_totals table.shop_table th {
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.woocommerce-cart .cart_totals table.shop_table .order-total th,
.woocommerce-cart .cart_totals table.shop_table .order-total .amount {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: var(--t-1, #fff) !important;
}

.woocommerce-cart .cart_totals table.shop_table .order-total .amount {
	color: var(--struxa-gold, #C5A059) !important;
}

/* Shipping line: the method and the destination on their own lines. */
.cart_totals .woocommerce-shipping-methods li,
.cart_totals .woocommerce-shipping-destination {
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Buttons: tall enough to hit with a thumb, text large enough to read. */
.woocommerce-cart .button,
.woocommerce-cart button.button,
.woocommerce-checkout .button {
	min-height: 46px;
	padding: 0 22px !important;
	font-family: var(--font-ui) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	font-size: 1rem !important;
}

.woocommerce-cart .coupon .input-text {
	min-height: 46px;
	font-family: var(--font-ui);
	font-size: 0.875rem;
}