/* ============================================================
   GRIMSKULL — assets/css/woocommerce.css
   WooCommerce-specific overrides beyond theme.css
   ============================================================ */

/* ── Product image overflow clip for hover zoom ───────────── */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	overflow: hidden;
}

/* ── Ensure image container clips ────────────────────────── */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
	border-radius: 0;
}

/* ── Remove default WC product column float behaviour ─────── */
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product { float: none !important; width: auto !important; }

/* ── WC breadcrumb ────────────────────────────────────────── */
.woocommerce-breadcrumb {
	font-size: .8rem;
	color: var(--gbl-text-muted);
	margin-bottom: 20px;
}
.woocommerce-breadcrumb a { color: var(--gbl-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--gbl-primary); }
.woocommerce-breadcrumb .sep { margin: 0 4px; opacity: .4; }

/* ── Single product gallery ───────────────────────────────── */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	border-radius: var(--gbl-radius-lg);
	overflow: hidden;
}

.woocommerce div.product div.images .flex-viewport {
	border-radius: var(--gbl-radius-lg);
	overflow: hidden;
	border: 1px solid var(--gbl-border);
}

/* ── Single product summary spacing ──────────────────────── */
.woocommerce div.product .summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.woocommerce div.product .woocommerce-product-rating {
	margin: 0 !important;
}

/* ── Add to cart area ─────────────────────────────────────── */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 160px;
}

/* ── Stock status ─────────────────────────────────────────── */
.woocommerce div.product .stock {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.woocommerce div.product .stock.in-stock  { color: #2a9d2a; }
.woocommerce div.product .stock.out-of-stock { color: var(--gbl-primary); }

/* ── Rating stars ─────────────────────────────────────────── */
.woocommerce .star-rating { font-size: 1em; color: #f5a623; }

/* ── Filter widget (price slider) ────────────────────────── */
.woocommerce .price_slider { background: rgba(255,255,255,.15); }
.woocommerce .price_slider_amount .button {
	margin-top: 10px;
	padding: 6px 14px;
	font-size: .78rem;
}

/* ── Coupon input ─────────────────────────────────────────── */
.woocommerce-cart .coupon .input-text { max-width: 200px; }

/* ── Order overview ───────────────────────────────────────── */
.woocommerce-order-overview { list-style: none; padding: 0; }
.woocommerce-order-overview li {
	display: inline-block;
	margin-right: 20px;
	font-size: .88rem;
}

/* ── My account nav ───────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
	list-style: none; padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
	display: block; padding: 8px 14px;
	border-radius: var(--gbl-radius);
	font-weight: 500; font-size: .88rem;
	color: var(--gbl-text);
	transition: background var(--gbl-transition), color var(--gbl-transition);
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: rgba(161,35,36,.1);
	color: var(--gbl-primary);
}

/* ── Checkout fields ──────────────────────────────────────── */
.woocommerce-checkout .woocommerce-input-wrapper { width: 100%; }
.woocommerce form .form-row { margin-bottom: 14px; }

/* ── Variable product swatches (compatible) ───────────────── */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 6px 0;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations select {
	max-width: 220px;
}

/* ── Dark mode WC ─────────────────────────────────────────── */
[data-theme="dark"] .woocommerce table.shop_table {
	background: var(--gbl-surface);
}

[data-theme="dark"] .woocommerce .cart_totals,
[data-theme="dark"] .woocommerce .checkout_coupon {
	background: var(--gbl-surface);
	border-color: var(--gbl-border);
}