/**
 * Single product page restyle — loaded only on WooCommerce single product
 * pages. The page itself is built with Elementor's Theme Builder, not a
 * plain template, so most rules here target that template's own generated
 * element classes (.elementor-element-XXXXXXX) rather than restructuring
 * markup. Matches the site's brand: navy #1a2e44 / orange #e8501a,
 * DM Sans + DM Serif Display — consistent with cart.css and checkout.css.
 *
 * See includes/snippets/product-page-style.php for why specific elements
 * below are targeted by their generated Elementor IDs (un-hiding Add to
 * Cart, hiding the orphaned "QTY" heading, resizing the image column)
 * instead of via the Elementor editor.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ── Constrain + center the breadcrumb, title/image row, and short
   description — none of them have a max-width set in the Elementor
   template, so they render full browser width, leaving a huge gap between
   the text column and the image on wide screens (and a mismatched-looking
   page overall). ── */
.elementor-element-45af440,
.elementor-element-dad2160,
.elementor-element-bf92574 {
	max-width: 1160px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── Undo Elementor's "hidden on every breakpoint" setting on the Add to
   Cart widget's wrapping container only (.elementor-element-bdf87d2) — see
   product-page-style.php for details. Scoped to this one element's own
   generated class so no other legitimately-hidden element site-wide is
   affected. ── */
.elementor-element-bdf87d2.elementor-hidden-desktop,
.elementor-element-bdf87d2.elementor-hidden-tablet,
.elementor-element-bdf87d2.elementor-hidden-mobile {
	display: flex !important;
}

/* The "QTY" heading above the add-to-cart widget doesn't fit the approved
   design (no such label in it) and has nothing else to label since the
   quantity input now sits inside the restyled add-to-cart row below. */
.elementor-element-8cc5e60 {
	display: none !important;
}

.single-product .product_title,
.single-product .wsc-product-category,
.single-product .elementor-widget-woocommerce-product-content,
.single-product .wsc-product-price,
.single-product .wsc-attrs-row,
.single-product .variations_form {
	font-family: 'DM Sans', sans-serif;
}

/* ── [westate_product_page] shortcode — self-contained layout, no
   dependency on Elementor's own container structure. Everything inside it
   (price, size dropdown, quantity, add-to-cart) reuses the same classes
   and product-page.js enhancement as the Elementor-widget version above. ── */
.wsc-product-page {
	max-width: 1160px;
	margin: 0 auto;
	padding: 48px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	flex-wrap: wrap;
}
.wsc-product-page__info {
	flex: 1;
	min-width: 300px;
}
.wsc-product-page__title {
	font-family: 'DM Serif Display', serif;
	font-size: 2.5rem;
	font-weight: 800;
	color: #1a2e44;
	line-height: 1.15;
	margin: 0 0 16px;
}
.wsc-product-page__desc {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.94rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 440px;
	margin: 0 0 24px;
}
.wsc-product-page__desc p { margin: 0 0 12px; }
.wsc-product-page__desc p:last-child { margin-bottom: 0; }

/* Fixed-size box — identical width/height for every product regardless of
   the source photo's own dimensions — with the image centered inside via
   object-fit: contain, so odd aspect ratios (a coiled hose vs. a small
   fitting) never get cropped. */
.wsc-product-page__image {
	width: 380px;
	height: 475px;
	flex-shrink: 0;
	background: transparent;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.wsc-product-page__image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.wsc-product-page { gap: 32px; padding: 32px 20px; }
	.wsc-product-page__image { width: 100%; max-width: 380px; }
}

/* ── Category label + title ── */
.wsc-product-category {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #e8501a;
	margin-bottom: 10px;
}
.single-product h1.product_title.entry-title {
	font-family: 'DM Serif Display', serif;
	font-size: 2.5rem;
	font-weight: 800;
	color: #1a2e44;
	line-height: 1.15;
	margin: 0 0 16px;
}

/* ── Description (Elementor "Product Content" widget) ── */
.single-product .elementor-widget-woocommerce-product-content {
	font-size: 0.94rem;
	line-height: 1.6;
	color: #6b7280;
	max-width: 440px;
	margin: 0 0 24px;
}
.single-product .elementor-widget-woocommerce-product-content p {
	margin: 0 0 12px;
}
.single-product .elementor-widget-woocommerce-product-content p:last-child {
	margin-bottom: 0;
}

/* ── Price + Size row (assembled by product-page.js from the price block
   below and the custom size control, so they sit side by side like the
   approved design instead of price-then-form-below) ── */
.wsc-attrs-row {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: nowrap;
	margin-bottom: 24px;
}
.wsc-attrs-row .wsc-attr,
.wsc-attrs-row .wsc-attr--price {
	flex: 0 0 auto;
}
/* Not scoped to .wsc-attrs-row — the Price label (.wsc-attr--price) sits in
   its own row above Size/Quantity, not inside .wsc-attrs-row, but needs the
   exact same label styling. */
.wsc-attr-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 8px;
	line-height: 1;
}
.wsc-product-price .price,
.wsc-product-price .price .woocommerce-Price-amount,
.wsc-product-price .price bdi,
.wsc-product-price .price ins {
	font-family: 'DM Sans', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	color: #1a2e44 !important;
	text-decoration: none;
}
.wsc-product-price .price del,
.wsc-product-price .price del .woocommerce-Price-amount,
.wsc-product-price .price del bdi {
	color: #9ca3af !important;
	font-size: 0.7em;
	font-weight: 400;
	text-decoration: line-through;
}

/* ── Custom Size dropdown (progressive enhancement over the real
   attribute <select> — see product-page.js). The native <table> stays
   visible as a fallback until JS confirms it built the custom control. ── */
.variations_form table.variations { border: none; }
.variations_form.wsc-enhanced table.variations,
.variations_form.wsc-enhanced .reset_variations_alert {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wsc-size-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	min-width: 130px;
	height: 44px !important;
	box-sizing: border-box !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #1a2e44 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 999px !important;
	padding: 0 16px 0 18px !important;
	background: #fff !important;
	box-shadow: 0 2px 8px rgba(26, 46, 68, 0.06) !important;
	cursor: pointer;
}
.wsc-size-toggle:hover { border-color: #d1d5db !important; box-shadow: 0 4px 12px rgba(26, 46, 68, 0.09) !important; background: #fff !important; }
.wsc-size-toggle svg { flex-shrink: 0; stroke: #6b7280; }

.wsc-size-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 170px;
	background: #fff;
	border-top: 2px solid #e8501a;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(26, 46, 68, 0.14);
	overflow: hidden;
	z-index: 10;
}
.wsc-size-option {
	padding: 12px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #1a2e44;
	cursor: pointer;
	border-bottom: 1px solid #f1f2f5;
}
.wsc-size-option:last-child { border-bottom: none; }
.wsc-size-option:hover,
.wsc-size-option.is-selected { background: #fdf0e9; }

/* WooCommerce's own AJAX-populated variation price — product-page.js syncs
   its content into .wsc-product-price instead, so this would otherwise
   show a redundant second price once a variation is selected. */
.single-product .woocommerce-variation-price {
	display: none;
}

/* ── Quantity + Add to cart row ── */
.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.single-product .quantity {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid #d1d5db !important;
	border-radius: 999px !important;
	padding: 0 6px !important;
	height: 44px !important;
	box-sizing: border-box !important;
	width: fit-content;
	background: #fff !important;
	box-shadow: none !important;
}
.single-product .quantity input.qty {
	width: 28px !important;
	border: none !important;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: #1a2e44;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
}
.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single-product .wsc-qty-btn {
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	flex-shrink: 0;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #4b5563 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	cursor: pointer;
}
.single-product .wsc-qty-btn svg { width: 12px; height: 12px; stroke: currentColor; }
.single-product .wsc-qty-btn:hover { background: #f3f4f6 !important; }

.single-product .single_add_to_cart_button {
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: #1a2e44 !important;
	color: #fff !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	padding: 15px 28px !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}
.single-product .single_add_to_cart_button:hover { background: #0e1e3d !important; }
.single-product .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

.single-product p.stock.out-of-stock {
	font-size: 0.85rem;
	font-weight: 600;
	color: #dc3545;
}

/* ── Product image column ── */
.elementor-element-f64ab17 {
	width: 380px !important;
	max-width: 100%;
	flex-shrink: 0;
}
.elementor-element-f64ab17 .woocommerce-product-gallery {
	aspect-ratio: 4 / 5;
	background: transparent;
	border-radius: 8px;
	overflow: hidden;
}
.elementor-element-f64ab17 .woocommerce-product-gallery__wrapper,
.elementor-element-f64ab17 .woocommerce-product-gallery__image,
.elementor-element-f64ab17 .woocommerce-product-gallery__image a {
	height: 100%;
}
.elementor-element-f64ab17 .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Short description section (below the main two-column row) ── */
.single-product .woocommerce-product-details__short-description,
.single-product .elementor-widget-woocommerce-product-short-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9rem;
	line-height: 1.7;
	color: #444;
	max-width: 700px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.elementor-element-f64ab17 {
		width: 100% !important;
	}
	.wsc-attrs-row { gap: 24px; flex-wrap: wrap; }
}