/* ==========================================================================
   Single Product page — loaded on every WooCommerce single product view
   ========================================================================== */

.mrk-breadcrumb { font-family: var(--mrk-font-mono); font-size: 0.75rem; color: rgba(244,244,244,0.4); padding: 1.5rem 0 0; }
.mrk-breadcrumb a { color: rgba(244,244,244,0.5); text-decoration: none; }
.mrk-breadcrumb a:hover { color: var(--mrk-volt); }
.mrk-breadcrumb span { margin: 0 0.4rem; }
.mrk-breadcrumb-current { color: rgba(244,244,244,0.7); }

.mrk-product-page { padding-bottom: 3rem; }

/* Product summary / gallery container from WooCommerce, restyled to the
   "design stage" dark card look from the Base44 source. */
.single-product div.product {
	display: flex; flex-wrap: wrap; gap: 3rem; padding-top: 2rem;
}
.single-product div.product .woocommerce-product-gallery {
	flex: 1 1 55%; min-width: 320px;
	background: var(--mrk-charcoal); border-radius: var(--mrk-radius);
	padding: 2rem; position: sticky; top: 90px;
}
.single-product div.product .summary {
	flex: 1 1 38%; min-width: 280px;
}

.single-product .product_title { font-family: var(--mrk-font-heading); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.02em; color: var(--mrk-ghost-white); }

.mrk-design-id-badge { margin: 0.75rem 0 1.25rem; }
.mrk-design-id-badge code {
	font-family: var(--mrk-font-mono); font-size: 0.8rem; color: var(--mrk-volt);
	background: var(--mrk-obsidian); padding: 0.4rem 0.75rem; border-radius: var(--mrk-radius);
	border: 0.5px solid rgba(209,255,0,0.2);
}

.single-product .woocommerce-product-details__short-description {
	font-size: 0.875rem; color: rgba(244,244,244,0.6); line-height: 1.65;
	padding-bottom: 1.25rem; margin-bottom: 1.25rem;
	border-bottom: 0.5px solid rgba(244,244,244,0.08);
}

.single-product p.price {
	font-family: var(--mrk-font-mono); font-size: 1.4rem; color: var(--mrk-volt); font-weight: 700;
}

/* Variation form / swatches — override the plugin's default grey styling
   with the site's actual brand colors, without touching the plugin file. */
.mrk-swatch { border-color: rgba(244,244,244,0.15) !important; }
.mrk-swatch:hover { border-color: var(--mrk-volt) !important; }
.mrk-swatch-selected { border-color: var(--mrk-volt) !important; box-shadow: 0 0 0 1px var(--mrk-volt); }
.mrk-swatch-color.mrk-swatch-fallback-text {
	background: var(--mrk-charcoal); color: rgba(244,244,244,0.8); font-family: var(--mrk-font-mono);
}

.single-product .quantity input.qty {
	background: var(--mrk-charcoal); border: 0.5px solid rgba(244,244,244,0.15); color: var(--mrk-ghost-white);
	border-radius: var(--mrk-radius); padding: 0.6rem;
}

.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button.alt {
	background: var(--mrk-volt) !important; color: var(--mrk-obsidian) !important;
	font-family: var(--mrk-font-heading); font-weight: 700; border-radius: var(--mrk-radius) !important;
	border: none !important; padding: 0.9rem 2rem !important; text-transform: uppercase; letter-spacing: 0.03em;
}
.single-product .single_add_to_cart_button:hover { opacity: 0.85; }

.mrk-custom-cta {
	margin-top: 3rem; padding: 1.5rem; text-align: center;
	background: var(--mrk-charcoal); border-radius: var(--mrk-radius); border: 0.5px solid rgba(244,244,244,0.06);
}
.mrk-custom-cta p { font-size: 0.875rem; color: rgba(244,244,244,0.6); margin-bottom: 0.75rem; }

@media (max-width: 782px) {
	.single-product div.product .woocommerce-product-gallery { position: static; }
}