/* ============================================================
   PWD Product Grid — Single Product consistency
   ------------------------------------------------------------
   Styles WooCommerce's single-product elements (add to cart,
   price, sale badge, quantity, title, and the default
   related/up-sell product loops) to match the PWD Product Grid
   card style, for a consistent look between the shop archive and
   the single product page.

   Loads on every single-product page (default layout or a Theme
   Builder template). The --pwd-pg-sp-* variables are set inline
   from the grid's own style settings, so these elements track
   whatever colours the grid is configured with.

   Scoped under .single-product.woocommerce div.product so it
   beats WooCommerce's bundled CSS on specificity, while staying
   overridable by higher-specificity / inline Elementor styling.
   ============================================================ */

/* ── Add to cart button ─────────────────────────────────── */
.single-product.woocommerce div.product form.cart .button,
.single-product.woocommerce div.product .single_add_to_cart_button {
	background-color: var(--pwd-pg-sp-cart-bg, #3b82f6) !important;
	color: var(--pwd-pg-sp-cart-color, #ffffff) !important;
	border: none !important;
	border-radius: var(--pwd-pg-sp-cart-radius, 6px) !important;
	font-weight: 600;
	padding: 12px 28px;
	transition: all 0.2s ease;
}

.single-product.woocommerce div.product form.cart .button:hover,
.single-product.woocommerce div.product .single_add_to_cart_button:hover {
	background-color: var(--pwd-pg-sp-cart-hover-bg, #2563eb) !important;
	color: var(--pwd-pg-sp-cart-hover-color, #ffffff) !important;
}

/* ── Quantity input ─────────────────────────────────────── */
.single-product.woocommerce div.product form.cart .quantity .qty {
	border: 1px solid var(--pwd-pg-sp-box-border, #e5e7eb);
	border-radius: var(--pwd-pg-sp-cart-radius, 6px);
	padding: 10px 8px;
}

/* ── Product title ──────────────────────────────────────── */
.single-product.woocommerce div.product .product_title {
	color: var(--pwd-pg-sp-title-color, #1f2937);
}

/* ── Price ──────────────────────────────────────────────── */
.single-product.woocommerce div.product p.price,
.single-product.woocommerce div.product div.price {
	color: var(--pwd-pg-sp-price-color, #1f2937);
}

.single-product.woocommerce div.product .price del {
	opacity: 0.6;
}

.single-product.woocommerce div.product .price ins {
	text-decoration: none;
	color: var(--pwd-pg-sp-sale-price-color, #ef4444);
}

/* ── Sale badge ─────────────────────────────────────────── */
.single-product.woocommerce span.onsale {
	background-color: var(--pwd-pg-sp-sale-badge-bg, #ef4444) !important;
	color: var(--pwd-pg-sp-sale-badge-color, #ffffff) !important;
	border-radius: var(--pwd-pg-sp-badge-radius, 4px);
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 6px 10px;
	font-weight: 600;
}

/* ── Default related / up-sell product loops ────────────────
   (when the PWD Related Products widget is not used, match the
   grid card's button, price and rounding) */
.single-product.woocommerce .related.products ul.products li.product .button,
.single-product.woocommerce .up-sells ul.products li.product .button {
	background-color: var(--pwd-pg-sp-cart-bg, #3b82f6) !important;
	color: var(--pwd-pg-sp-cart-color, #ffffff) !important;
	border-radius: var(--pwd-pg-sp-cart-radius, 6px) !important;
	border: none !important;
	font-weight: 600;
	transition: all 0.2s ease;
}

.single-product.woocommerce .related.products ul.products li.product .button:hover,
.single-product.woocommerce .up-sells ul.products li.product .button:hover {
	background-color: var(--pwd-pg-sp-cart-hover-bg, #2563eb) !important;
	color: var(--pwd-pg-sp-cart-hover-color, #ffffff) !important;
}

.single-product.woocommerce .related.products ul.products li.product img,
.single-product.woocommerce .up-sells ul.products li.product img {
	border-radius: var(--pwd-pg-sp-box-radius, 8px);
}

.single-product.woocommerce .related.products ul.products li.product .price ins,
.single-product.woocommerce .up-sells ul.products li.product .price ins {
	text-decoration: none;
	color: var(--pwd-pg-sp-sale-price-color, #ef4444);
}

/* ── Section headings (Related / You may also like) ─────── */
.single-product.woocommerce .related.products > h2,
.single-product.woocommerce .up-sells > h2 {
	color: var(--pwd-pg-sp-title-color, #1f2937);
}