/* ==========================================================================
   MBAK Commerce — woocommerce.css
   Product cards · Shop archive · Single product · Cart/checkout basics
   Depends on tokens.css + main.css + layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shop archive header + toolbar
   -------------------------------------------------------------------------- */
.woocommerce-products-header { margin-bottom: var(--space-5); }
.woocommerce-products-header__title { font-size: var(--fs-3xl); }
.term-description { color: var(--color-text-muted); margin-top: var(--space-3); max-width: 70ch; }

.woocommerce-result-count { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.woocommerce-ordering { margin-bottom: var(--space-5); }
.woocommerce-ordering select { max-width: 280px; }

/* Toolbar row above the grid (result count + ordering) */
.woocommerce-page-main .woocommerce-result-count,
.woocommerce-page-main .woocommerce-ordering { display: inline-block; vertical-align: middle; }
.woocommerce-page-main .woocommerce-ordering { float: right; }

/* --------------------------------------------------------------------------
   Product grid container

   WooCommerce's default stylesheet floats li.product and gives it a percentage
   width. We override decisively (theme CSS prints after Woo's, plus !important
   on the float/width reset) so the custom CSS-grid + card design always wins.
   -------------------------------------------------------------------------- */
.woocommerce ul.products:not(.product-carousel__track),
ul.products:not(.product-carousel__track) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.woocommerce ul.products.columns-2:not(.product-carousel__track) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3:not(.product-carousel__track) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4:not(.product-carousel__track) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Neutralise Woo's float-grid so items sit in real grid cells. */
.woocommerce ul.products li.product,
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

@media (max-width: 480px) {
	.woocommerce ul.products:not(.product-carousel__track),
	ul.products:not(.product-carousel__track) { grid-template-columns: 1fr; }
}

/* Subcategory tiles in the loop */
li.product-category { text-align: center; }
li.product-category h2 { font-size: var(--fs-md); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */
li.product.product-card {
	position: relative;
	background: var(--color-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
	margin: 0;
}
li.product.product-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); border-color: var(--color-border-strong); }

.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface); overflow: hidden; }
.product-card__media-link { display: block; width: 100%; height: 100%; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
li.product.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__flash { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; }
.product-card__stockflag { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }

.product-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.product-card__cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.product-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.product-card__title a { color: var(--color-text); }
.product-card__title a:hover { color: var(--color-accent-strong); }

.product-card__body .star-rating { font-size: 0.92em; margin: 0; }
.product-card__foot { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.product-card__foot .price { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--color-text); }
.product-card__foot .button { padding: 0.5em 1em; font-size: var(--fs-sm); }
.product-card__foot .added_to_cart { font-size: var(--fs-sm); width: 100%; text-align: center; }

/* Price formatting (shared) */
.price del { color: var(--color-text-faint); font-weight: var(--fw-regular); margin-right: 0.35em; }
.price ins { text-decoration: none; color: var(--color-sale); }
.price .amount { white-space: nowrap; }

/* WooCommerce star rating — keep Woo's font/layout, just brand the colour. */
.star-rating { color: var(--color-star); }
.star-rating::before { color: var(--color-border-strong); }

/* --------------------------------------------------------------------------
   Shop 30/70 layout + filters + toolbar
   -------------------------------------------------------------------------- */
.woocommerce-products-header { margin-bottom: var(--space-6); }

.shop-layout {
	display: grid;
	grid-template-columns: 30% minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}
.shop-main { min-width: 0; }

/* Filter sidebar */
.shop-filters-wrap { position: sticky; top: calc(var(--header-height) + 12px); }
.shop-filters {
	background: var(--color-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	max-height: calc(100vh - var(--header-height) - 32px);
	overflow-y: auto;
}
.shop-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.shop-filters__title { font-size: var(--fs-lg); }
.shop-filters__reset { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.filter-group { border: 0; padding: var(--space-4) 0 0; margin: 0; border-top: 1px solid var(--color-border); }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); padding: 0; margin-bottom: var(--space-3); }
.filter-group input[type="search"] { width: 100%; }

.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); max-height: 196px; overflow-y: auto; }
.filter-check { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-regular); font-size: var(--fs-sm); cursor: pointer; padding: 2px 0; }
.filter-check input { width: auto; flex: 0 0 auto; }
.filter-check > span:first-of-type { flex: 1; }
.filter-count { color: var(--color-text-faint); font-size: var(--fs-xs); }
.filter-group .filter-check + .filter-check { margin-top: var(--space-1); }

.filter-price { display: flex; align-items: center; gap: var(--space-2); }
.filter-price input { width: 100%; }

.shop-filters__actions { margin-top: var(--space-5); }

/* Results toolbar */
.shop-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--space-3); margin-bottom: var(--space-5);
	padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.shop-toolbar .woocommerce-result-count { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.shop-ordering select { min-width: 200px; }

/* Loading state */
.shop-results { position: relative; transition: opacity var(--transition); }
.shop-results.is-loading { opacity: 0.5; pointer-events: none; }
.shop-results.is-loading::after {
	content: ""; position: absolute; top: 80px; left: 50%; width: 36px; height: 36px;
	margin-left: -18px; border-radius: 50%;
	border: 3px solid var(--color-border); border-top-color: var(--color-accent);
	animation: mbak-spin 0.7s linear infinite;
}
@keyframes mbak-spin { to { transform: rotate(360deg); } }

.shop-empty { text-align: center; padding: var(--space-8) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.shop-empty p { color: var(--color-text-muted); margin-bottom: var(--space-4); }

@media (max-width: 991px) {
	.shop-layout { grid-template-columns: 1fr; }
	.shop-filters-wrap { position: static; }
	.shop-filters { max-height: none; }
	.filter-list { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.shop-results.is-loading::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	list-style: none;
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-5);
	border: 1px solid transparent;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.woocommerce-message { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.woocommerce-info { background: var(--color-accent-soft); color: var(--color-accent-strong); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.woocommerce-error { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.woocommerce-pagination { margin-top: var(--space-7); }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; list-style: none; padding: 0; border: 0; }
.woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 var(--space-3);
	border-radius: var(--radius); border: 1px solid var(--color-border); color: var(--color-text);
	transition: all var(--transition-fast);
}
.woocommerce-pagination .page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.woocommerce-pagination .page-numbers.current { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #fff; }

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */
.single-product div.product { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-7); align-items: start; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .up-sells { grid-column: 1 / -1; }
.single-product div.product > .onsale { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; }

/* onsale generic */
.onsale { background: var(--color-danger-soft); color: var(--color-danger); border-radius: var(--radius-pill); padding: 0.25em 0.8em; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* Gallery */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery img { border-radius: var(--radius-lg); }
.woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding: 0; list-style: none; }
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img { border-radius: var(--radius); cursor: pointer; opacity: 0.7; transition: opacity var(--transition-fast); }
.woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce-product-gallery .flex-control-thumbs .flex-active img { opacity: 1; }
.woocommerce-product-gallery__trigger { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; background: var(--color-bg); border-radius: var(--radius-pill); width: 40px; height: 40px; display: grid; place-items: center; box-shadow: var(--shadow-2); }

/* Summary */
.summary .product_title { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.summary .woocommerce-product-rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.summary .woocommerce-product-rating .woocommerce-review-link { color: var(--color-text-muted); font-size: var(--fs-sm); }
.summary .price { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); display: block; margin-bottom: var(--space-4); }
.summary .woocommerce-product-details__short-description { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.summary .stock { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.summary .stock.in-stock { color: var(--color-success); }
.summary .stock.out-of-stock { color: var(--color-danger); }
.product_meta { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-text-muted); display: grid; gap: var(--space-1); }
.product_meta a { color: var(--color-text-muted); }
.product_meta a:hover { color: var(--color-accent-strong); }

/* Add to cart form */
.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.single-product form.cart .quantity { display: inline-flex; align-items: center; }
.quantity .qty {
	width: 84px; text-align: center;
	border-radius: var(--radius);
}

/* Quantity stepper enhancement (added by main.js) */
.quantity--stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.quantity--stepper .qty { width: 56px; border: 0; border-radius: 0; padding: 0.6em 0; -moz-appearance: textfield; }
.quantity--stepper .qty::-webkit-outer-spin-button, .quantity--stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 40px; border: 0; background: var(--color-surface); color: var(--color-text); font-size: 1.2em; line-height: 1; cursor: pointer; transition: background var(--transition-fast); }
.qty-btn:hover { background: var(--color-surface-2); color: var(--color-accent-strong); }
.single_add_to_cart_button { padding: 0.85em 1.8em; }
.woocommerce-grouped-product-list { width: 100%; border-collapse: collapse; }
.woocommerce-grouped-product-list td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); }

/* Variations */
.variations { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.variations td, .variations th { padding: var(--space-2) 0; text-align: left; vertical-align: top; }
.variations td.label { width: 30%; font-weight: var(--fw-semibold); padding-right: var(--space-3); }
.variations select { width: 100%; }
.reset_variations { display: inline-block; margin-left: var(--space-2); font-size: var(--fs-sm); }
.woocommerce-variation-price .price { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.woocommerce-variation-availability { margin-bottom: var(--space-2); }

/* Tabs */
.woocommerce-tabs { margin-top: var(--space-8); }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--color-border); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: var(--space-3) var(--space-4); font-weight: var(--fw-semibold); color: var(--color-text-muted); border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--color-accent-strong); border-bottom-color: var(--color-accent); }
.woocommerce-Tabs-panel h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.shop_attributes { width: 100%; border-collapse: collapse; }
.shop_attributes th, .shop_attributes td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.shop_attributes th { width: 30%; }

/* Related / upsells */
.related > h2, .upsells > h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.related, .upsells { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--color-border); }

/* Reviews */
#reviews .commentlist { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
#reviews .comment_container { display: flex; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
#reviews .comment-text .star-rating { margin-bottom: var(--space-2); }
.comment-form-rating .stars a { color: var(--color-star); }

@media (max-width: 860px) {
	.single-product div.product { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* --------------------------------------------------------------------------
   Cart & checkout (light styling — not deeply customized)
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart, .woocommerce table.shop_table {
	width: 100%; border-collapse: collapse; background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.woocommerce table.shop_table thead th { background: var(--color-surface); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.cart_totals h2, .woocommerce-checkout h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.woocommerce .cart-collaterals { margin-top: var(--space-6); }
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce-checkout #payment { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	border-radius: var(--radius-pill);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--color-accent-strong); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--color-accent-press); }