/* =========================================================================
   Daruport — WooCommerce surface styles (shop, product, cart, checkout).
   Loaded only on store pages by inc/enqueue.php. Fleshed out in Phase 3.
   Uses the same design tokens from main.css.
   ========================================================================= */

/* Product grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce ul.products li.product {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-4);
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	text-align: center;
	transition: box-shadow var(--transition);
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product img { margin-bottom: var(--space-3); }
.woocommerce ul.products li.product .price { color: var(--color-primary-dark); font-weight: 700; }
.woocommerce ul.products li.product .button { margin-top: var(--space-3); }

/* NOTE: the single-product page is fully laid out by the custom template
   (woocommerce/content-single-product.php + template-parts/product/*) using
   Tailwind, so the old `.single-product div.product` two-column grid was
   removed — it was forcing the stacked custom sections into two columns. */

/* ACF custom sections (legacy hooks — harmless if unused) */
.product-highlights ul { padding-inline-start: var(--space-5); }
.product-specs table { width: 100%; border-collapse: collapse; }
.product-specs th,
.product-specs td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); }
.product-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block: var(--space-3); }
.product-badge {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: var(--space-1) var(--space-3);
	font-size: var(--fs-100);
}

/* Brand archive header */
.brand-archive__logo { margin-bottom: var(--space-4); }
.brand-archive__logo img { max-height: 96px; width: auto; }