/*
 * Product page (single product).
 * Layout: gallery left, summary right; tabs, upsells and related products full width below.
 * Selectors are scoped under .single-product div.product so they win over WooCommerce's default CSS.
 */

.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: start;
}

/* Gallery */
.single-product div.product div.images.woocommerce-product-gallery {
	float: none; width: 100%; margin: 0; min-width: 0;
}
.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product div.images img {
	width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff;
}
.single-product div.product .flex-viewport { border-radius: var(--radius-lg); }
.single-product div.product div.images .flex-control-thumbs {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0;
}
.single-product div.product div.images .flex-control-thumbs li { float: none; width: auto; margin: 0; }
.single-product div.product div.images .flex-control-thumbs li img { border-radius: var(--radius); opacity: .6; }
.single-product div.product div.images .flex-control-thumbs li img.flex-active,
.single-product div.product div.images .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--color-primary); }
.single-product div.product .woocommerce-product-gallery__trigger {
	top: var(--space-3); right: var(--space-3); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
}

/* Sale badge (text set in inc/woocommerce.php → "-24%") */
.single-product div.product span.onsale {
	position: absolute; z-index: 9; top: var(--space-4); left: var(--space-4); right: auto; margin: 0;
	min-width: 0; min-height: 0; padding: 0.3em 0.7em; line-height: 1.2;
	border-radius: var(--radius-sm); background: var(--color-primary); color: #fff;
	font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}

/* Summary */
.single-product div.product div.summary { float: none; width: auto; margin: 0; min-width: 0; }
.single-product div.product .product_title {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: var(--fw-semibold); line-height: 1.25; margin-bottom: var(--space-3);
}
.single-product div.product .woocommerce-product-rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-sm); }
.single-product div.product .woocommerce-product-rating .star-rating { float: none; margin: 0; }
.single-product div.product p.price,
.single-product div.product span.price {
	display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
	margin: 0 0 var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border);
	color: var(--color-text); font-size: var(--fs-xl); font-weight: var(--fw-semibold);
}
.single-product div.product p.price del { order: 2; opacity: 1; color: var(--color-faint); font-size: var(--fs-md); font-weight: var(--fw-regular); }
.single-product div.product p.price ins { order: 1; color: var(--color-primary); text-decoration: none; }
.single-product div.product .woocommerce-product-details__short-description { color: var(--color-text); line-height: 1.7; margin-bottom: var(--space-5); }
.single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.single-product div.product .stock { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-success); }
.single-product div.product .stock.out-of-stock { color: var(--color-primary); }

/* Add to cart */
.single-product div.product form.cart {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3);
	margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-soft);
}
.single-product div.product form.cart::before,
.single-product div.product form.cart::after { display: none; }
.single-product div.product form.cart div.quantity { float: none; margin: 0; }
.single-product div.product form.cart .qty {
	width: 5rem; height: 100%; min-height: 3rem; padding: 0 var(--space-2); text-align: center; font-size: var(--fs-base); background: #fff;
}
.single-product div.product form.cart .button {
	float: none; flex: 1; min-height: 3rem; padding-inline: var(--space-6);
	border-radius: var(--radius); background: var(--color-action); color: var(--color-action-text); font-size: var(--fs-base); font-weight: var(--fw-semibold);
}
.single-product div.product form.cart .button:hover { background: var(--color-action-dark); }

/* Variable products */
.single-product div.product form.cart.variations_form { display: block; }
.single-product div.product form.cart .variations { width: 100%; margin-bottom: var(--space-3); border-collapse: collapse; }
.single-product div.product form.cart .variations th,
.single-product div.product form.cart .variations td { padding: var(--space-2) 0; text-align: left; vertical-align: middle; }
.single-product div.product form.cart .variations select { width: 100%; min-width: 12rem; }
.single-product div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.single-product div.product form.cart .reset_variations { font-size: var(--fs-sm); margin-left: var(--space-2); }

/* Meta */
.single-product div.product .product_meta { display: grid; gap: var(--space-1); font-size: var(--fs-sm); color: var(--color-muted); }
.single-product div.product .product_meta a { color: var(--color-text); }
.single-product div.product .product_meta a:hover { color: var(--color-primary); }

/* Tabs */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells { grid-column: 1 / -1; }
.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex; gap: var(--space-6); margin: 0 0 var(--space-5); padding: 0; overflow-x: auto;
	border-bottom: 1px solid var(--color-border);
}
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: var(--space-3) 0; color: var(--color-muted); font-weight: var(--fw-medium); white-space: nowrap;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-primary); }
.single-product div.product .woocommerce-tabs .panel { margin: 0; max-width: 900px; line-height: 1.7; }
.single-product div.product .woocommerce-tabs .panel > h2:first-child { display: none; }
.single-product div.product .woocommerce-tabs .panel img { height: auto; border-radius: var(--radius); }
.single-product div.product table.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.single-product div.product table.woocommerce-product-attributes th,
.single-product div.product table.woocommerce-product-attributes td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; font-style: normal; }
.single-product div.product table.woocommerce-product-attributes th { width: 30%; font-weight: var(--fw-medium); }
.single-product div.product table.woocommerce-product-attributes td p { margin: 0; }

/* Related / upsells */
.single-product div.product .related > h2,
.single-product div.product .upsells > h2 {
	font-size: var(--fs-lg); font-weight: var(--fw-medium); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}

@media (max-width: 860px) {
	.single-product div.product { grid-template-columns: 1fr; gap: var(--space-5); }
	.single-product div.product form.cart .button { flex-basis: 60%; }
}