/**
 * GGD — single product page.
 *
 * The PDP has no Elementor template, so it renders through WooCommerce's stock
 * templates on Hello Elementor and inherits the kit's dark body: white 68px
 * title, Woo's purple add-to-cart, an olive price, grey related-product
 * buttons. This sheet puts it on the same footing as the shop archive.
 *
 * Tokens are the same ones .ggd-shop uses (Elementor globals, hex fallbacks),
 * so card radius, borders and button colours match the archive by value rather
 * than by eye. Selectors carry a body.single-product prefix to outrank Woo's
 * own rules on weight, not load order — same technique shop.css
 * uses, and no !important.
 *
 * Red is reserved for the sale badge and out-of-stock. Everything else is blue,
 * white and slate.
 */

body.single-product {
	--s-blue: var(--e-global-color-primary, #1D4ED8);
	--s-navy: var(--e-global-color-secondary, #1E3A8A);
	--s-tint: var(--e-global-color-be216fc, #EFF6FF);
	--s-ink: var(--e-global-color-text, #0F172A);
	--s-muted: var(--e-global-color-55d9783, #475569);
	--s-faint: var(--e-global-color-79860d8, #94A3B8);
	--s-white: var(--e-global-color-fba0803, #FFFFFF);
	--s-paper: var(--e-global-color-ced7ef0, #F8FAFC);
	--s-line: var(--e-global-color-2da9a21, #1E40AF2E);
	--s-line-soft: var(--e-global-color-ca37f13, #1E40AF1A);
	--s-red: #BE1E2D;
	--s-red-tint: #FEF2F2;

	color: var(--s-ink);
}

/* The shell paints body dark navy with !important (see the site Customizer CSS,
   SHELL). Every other page hides it behind an Elementor section background; the
   PDP has no Elementor template, so it showed through. Painting the content
   area rather than the body means no !important arms race. */
body.single-product .content-area,
body.single-product main.site-main {
	background: var(--s-white);
}

/* ---- page shell -------------------------------------------------------- */

body.single-product .site-main,
body.single-product main.site-main {
	max-width: 1240px;
	padding: 2rem 1.25rem 3.5rem;
	margin: 0 auto;
}

body.single-product .woocommerce-breadcrumb {
	margin: 0 0 1.5rem;
	font-size: 13px;
	color: var(--s-muted);
}

body.single-product .woocommerce-breadcrumb a {
	color: var(--s-muted);
	text-decoration: none;
}

body.single-product .woocommerce-breadcrumb a:hover {
	color: var(--s-blue);
	text-decoration: underline;
}

/* ---- gallery + summary ------------------------------------------------- */

/* Woo floats these at 48%; a grid keeps the columns level and lets the summary
   breathe on wide screens without the float clearing games. */
body.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 3rem;
	row-gap: 2.5rem;
	align-items: start;
}

body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary {
	width: auto;
	float: none;
	margin: 0;
}

body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related,
body.single-product div.product .upsells {
	grid-column: 1 / -1;
}

body.single-product .woocommerce-product-gallery {
	padding: 1rem;
	background: var(--s-paper);
	border: 1px solid var(--s-line-soft);
	border-radius: 12px;
}

body.single-product .woocommerce-product-gallery img {
	border-radius: 8px;
}

/* ---- summary ----------------------------------------------------------- */

body.single-product .product_title {
	margin: 0 0 0.75rem;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--s-ink);
}

body.single-product div.product .summary p.price,
body.single-product div.product .summary span.price,
body.single-product div.product .summary .price ins {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--s-ink);
	text-decoration: none;
}

body.single-product div.product .summary .price del {
	margin-right: 0.5rem;
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--s-faint);
}

body.single-product .ggd-poa {
	display: inline-block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--s-navy);
}

body.single-product .woocommerce-product-details__short-description {
	margin: 1.25rem 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--s-muted);
}

/* ---- stock + sale (the only red on the page) --------------------------- */

body.single-product span.onsale {
	min-height: 0;
	min-width: 0;
	padding: 0.3rem 0.7rem;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--s-white);
	background: var(--s-red);
	border-radius: 999px;
}

body.single-product div.product .stock.out-of-stock {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--s-red);
	background: var(--s-red-tint);
	border-radius: 6px;
}

body.single-product div.product .stock.in-stock {
	font-size: 13px;
	font-weight: 500;
	color: var(--s-muted);
}

/* ---- quantity + add to cart -------------------------------------------- */

body.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 1.5rem 0 0;
}

body.single-product .quantity input.qty {
	width: 72px;
	height: 44px;
	padding: 0 0.5rem;
	font-family: inherit;
	font-size: 15px;
	color: var(--s-ink);
	text-align: center;
	background: var(--s-white);
	border: 1px solid var(--s-line);
	border-radius: 8px;
}

body.single-product .quantity input.qty:focus {
	border-color: var(--s-blue);
	outline: 2px solid var(--s-tint);
	outline-offset: 0;
}

body.single-product div.product form.cart button.single_add_to_cart_button,
body.single-product a.button.ggd-enquire {
	height: 44px;
	padding: 0 1.4rem;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 44px;
	color: var(--s-white);
	background: var(--s-blue);
	border: 0;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

body.single-product div.product form.cart button.single_add_to_cart_button:hover,
body.single-product a.button.ggd-enquire:hover {
	color: var(--s-white);
	background: var(--s-navy);
}

/* ---- meta -------------------------------------------------------------- */

/* Woo prints SKU, category and tags as one run of links; they were all landing
   in brand red, which is most of the red on the page. Slate, blue on hover. */
body.single-product .product_meta {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	font-size: 13px;
	line-height: 1.9;
	color: var(--s-muted);
	border-top: 1px solid var(--s-line-soft);
}

body.single-product .product_meta a {
	color: var(--s-muted);
	text-decoration: underline;
	text-decoration-color: var(--s-line);
	text-underline-offset: 2px;
}

body.single-product .product_meta a:hover {
	color: var(--s-blue);
	text-decoration-color: currentColor;
}

/* ---- tabs -------------------------------------------------------------- */

body.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--s-line-soft);
}

body.single-product div.product .woocommerce-tabs ul.tabs::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.7rem 1rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--s-muted);
	border-bottom: 2px solid transparent;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--s-blue);
	border-bottom-color: var(--s-blue);
}

body.single-product .woocommerce-tabs .panel > h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--s-ink);
}

body.single-product table.shop_attributes th,
body.single-product table.shop_attributes td {
	padding: 0.65rem 0.8rem;
	font-size: 14px;
	color: var(--s-ink);
	border-bottom: 1px solid var(--s-line-soft);
}

body.single-product table.shop_attributes th {
	font-weight: 600;
	color: var(--s-muted);
	background: var(--s-paper);
}

body.single-product table.shop_attributes td {
	font-style: normal;
}

/* ---- related products — same card as the archive ----------------------- */

body.single-product .related > h2,
body.single-product .upsells > h2 {
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--s-ink);
}

body.single-product .related ul.products,
body.single-product .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 0;
}

body.single-product .related ul.products::before,
body.single-product .related ul.products::after {
	content: none;
}

body.single-product .related ul.products li.product,
body.single-product .upsells ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	padding: 0 0 1rem;
	margin: 0;
	overflow: hidden;
	background: var(--s-white);
	border: 1px solid var(--s-line-soft);
	border-radius: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product .related ul.products li.product:hover {
	border-color: var(--s-line);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}

body.single-product .related ul.products li.product img {
	margin: 0 0 0.9rem;
	padding: 0.9rem;
	background: var(--s-paper);
}

body.single-product .related ul.products li.product .woocommerce-loop-product__title {
	padding: 0 0.9rem;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--s-ink);
}

body.single-product .related ul.products li.product .price {
	padding: 0 0.9rem;
	margin: 0.35rem 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--s-ink);
}

body.single-product .related ul.products li.product .ggd-poa {
	padding: 0 0.9rem;
	font-size: 13px;
}

/* Button pinned to the card foot so uneven titles still line up. */
body.single-product .related ul.products li.product .button {
	width: calc(100% - 1.8rem);
	margin: auto 0.9rem 0;
	padding: 0.55rem 1rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--s-white);
	text-align: center;
	background: var(--s-blue);
	border: 0;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

body.single-product .related ul.products li.product .button:hover {
	color: var(--s-white);
	background: var(--s-navy);
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 900px) {
	body.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
	}

	body.single-product .product_title {
		font-size: 1.7rem;
	}
}