/**
 * Brand overrides for native WooCommerce markup.
 *
 * Goal: align the default classes that Woo emits inside [woocommerce_cart],
 * [woocommerce_checkout], [woocommerce_my_account] and the single product page
 * with the Gaba Elite design tokens (variables.css). We target Woo's own classes,
 * so this works even when Woo is updated.
 */

/* ---------- Reset Astra/Woo defaults to match our box model & spacing ---------- */
.woocommerce,
.woocommerce-page {
	font-family: var(--font-sans);
	color: var(--color-black);
}

.woocommerce a {
	color: inherit;
}

/* ---------- Buttons (Woo) → adopt our .btn primary look ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.875rem 2rem;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	background-color: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: 0;
	transition:
		background-color var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--color-black-soft);
	color: var(--color-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* ---------- Form fields ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	width: 100%;
	padding: 0.875rem 1rem;
	font-size: var(--text-base);
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
	color: var(--color-black);
	border-radius: 0;
	min-height: 48px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--color-black);
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-xs);
	color: var(--color-gray-900);
}

.woocommerce form .form-row .required {
	color: var(--color-black);
	text-decoration: none;
}

/* ---------- Notices / messages ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--color-off-white);
	border-top: 2px solid var(--color-black);
	padding: var(--space-md) var(--space-lg);
	color: var(--color-black);
	border-radius: 0;
	margin-bottom: var(--space-lg);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--color-black);
}

/*
 * ---------- CART & CHECKOUT ----------
 *
 * Intentionally left to WooCommerce + Astra defaults.
 *
 * Previous attempts to override the cart/checkout layout (CSS grid + float
 * neutralization) consistently fought against Woo's float-based markup and
 * Astra's wrappers, producing broken visuals. The pragmatic decision is to
 * let Woo render its native [woocommerce_cart] and [woocommerce_checkout]
 * shortcodes as-is.
 *
 * Stripe (`.StripeElement`, `.wc-stripe-elements-field`) and PayPal
 * (`.paypal-buttons`) inject their own scripts and inline styles when the
 * matching plugins are active — no defensive CSS is required from the theme.
 *
 * Brand basics (typography, button shape, form-row borders, notices) are
 * still applied above via the generic `.woocommerce` selectors.
 */

/* ---------- MY ACCOUNT ---------- */
.page-account .woocommerce {
	display: grid;
	gap: var(--space-2xl);
}

@media (min-width: 1024px) {
	.page-account .woocommerce {
		grid-template-columns: 240px 1fr;
		gap: var(--space-3xl);
		align-items: start;
	}
}

.page-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}

.page-account .woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--color-border);
}

.page-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--space-md) 0;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gray-600);
	transition: color var(--transition-fast);
}

.page-account .woocommerce-MyAccount-navigation ul li a:hover,
.page-account .woocommerce-MyAccount-navigation ul li.is-active a,
.page-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	color: var(--color-black);
	font-weight: 500;
}

.page-account .woocommerce-MyAccount-content {
	max-width: 720px;
}

.page-account .woocommerce-MyAccount-content h1,
.page-account .woocommerce-MyAccount-content h2 {
	font-size: var(--text-2xl);
	font-weight: 300;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-sm);
}

.page-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.page-account table.shop_table thead th {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gray-600);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-sm);
	text-align: left;
}

.page-account table.shop_table tbody td {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-gray-900);
}

/* ---------- SINGLE PRODUCT ---------- */
.page-single-product .product {
	display: grid;
	gap: var(--space-2xl);
	padding-block: var(--space-section);
}

@media (min-width: 768px) {
	.page-single-product .product {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-3xl);
		align-items: start;
	}
}

.page-single-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.page-single-product .product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.page-single-product .product_title {
	font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-sm);
}

.page-single-product .price {
	font-size: var(--text-xl);
	color: var(--color-black);
	margin-bottom: var(--space-md);
}

.page-single-product .price del {
	color: var(--color-gray-400);
	margin-right: var(--space-xs);
}

.page-single-product .woocommerce-product-details__short-description {
	color: var(--color-gray-600);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-lg);
}

.page-single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	margin-bottom: var(--space-lg);
}

.page-single-product form.cart .quantity .qty {
	width: 80px;
	height: 48px;
	min-height: 48px;
	border: 1px solid var(--color-border);
	text-align: center;
	border-radius: 0;
}

.page-single-product .product_meta {
	font-size: var(--text-sm);
	color: var(--color-gray-600);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-md);
}

.page-single-product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--space-2xl);
}

.page-single-product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--color-border);
	margin: 0 0 var(--space-lg) 0;
	padding: 0;
	display: flex;
	gap: var(--space-md);
}

.page-single-product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.page-single-product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

.page-single-product .woocommerce-tabs ul.tabs li::before,
.page-single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.page-single-product .woocommerce-tabs ul.tabs li a {
	padding: var(--space-sm) 0;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gray-600);
	border-bottom: 2px solid transparent;
}

.page-single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

.page-single-product .related.products {
	grid-column: 1 / -1;
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.page-single-product .related.products > h2 {
	font-size: var(--text-2xl);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-lg);
}

/* ---------- WooCommerce pagination ---------- */
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	margin-top: var(--space-xl);
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: none;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	color: var(--color-gray-600);
	background: transparent;
	font-size: var(--text-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* ---------- Result count + ordering inside our toolbar ---------- */
.products-toolbar p.woocommerce-result-count {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-gray-600);
	letter-spacing: 0.02em;
}

.products-toolbar form.woocommerce-ordering select {
	border: 1px solid var(--color-border);
	background-color: transparent;
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	min-height: 44px;
	border-radius: 0;
	color: var(--color-gray-900);
}

/* ---------- CART DRAWER — WooCommerce mini-cart inside .cart-drawer__woo ---------- */
.cart-drawer__woo .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cart-drawer__woo .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: var(--space-sm);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	align-items: start;
}

.cart-drawer__woo .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
}

.cart-drawer__woo .woocommerce-mini-cart-item img {
	width: 72px;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background-color: var(--color-cream);
}

.cart-drawer__woo .woocommerce-mini-cart-item a.remove {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gray-400);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: var(--space-xs);
	display: inline-block;
}

.cart-drawer__woo .woocommerce-mini-cart-item a.remove:hover {
	color: var(--color-black);
}

.cart-drawer__woo .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding-block: var(--space-md);
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.cart-drawer__woo .woocommerce-mini-cart__total strong {
	font-weight: 500;
}

.cart-drawer__woo .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
}

.cart-drawer__woo .woocommerce-mini-cart__buttons .button {
	width: 100%;
	min-height: 48px;
}

.cart-drawer__woo .woocommerce-mini-cart__buttons .checkout {
	background-color: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.cart-drawer__woo .woocommerce-mini-cart__empty-message {
	padding-block: var(--space-xl);
	color: var(--color-gray-600);
	margin: 0;
}