/* ==========================================================================
   Product pages (Point N, N-1, out-of-stock, sticky cart)
   ==========================================================================

   Migrated out of the Customizer's "Additional CSS" field, which lives only in
   the database: not in git, not deployed by pushing code, and installed only by
   running a per-feature script on each target. That is why five unrelated
   features silently reverted on www.mmspecs.com - the PHP that depends on this
   CSS shipped, and the CSS did not. See CLAUDE.md, "Site CSS lives in git".

   Edit these files, commit, push. There is no install step.
   ========================================================================== */

/* "Out of stock" was an absolute overlay bar sitting across the bottom of
   the product photo, on top of the glasses artwork (Astra default).
   Switching it into normal document flow instead (position:static) broke
   on live pages: Astra's WooCommerce grid JS equalizes each row's image
   box to a fixed pixel height after load, and the extra text pushed past
   that height and overlapped the title below it. Kept it absolutely
   positioned (so it can't add height to that box) but turned it into a
   small badge in the image's top-left corner instead of a full-width bar,
   so it no longer sits over the glasses. */
.page-id-2065 .woocommerce ul.products li.product .ast-shop-product-out-of-stock {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	background: #b00020;
	color: #fff;
	font-weight: 600;
	text-transform: none;
	font-size: 0.75em;
	padding: 4px 10px;
	border-radius: 20px;
	text-align: center;
}

/* Point N - product page mobile fixes */

/* The gallery and buy box still weren't stacking correctly on mobile after
   a flex-basis attempt, so this forces the actual box model directly on
   both siblings - block + full width overrides whatever positioning
   (flex or otherwise) was causing the buy box's first line ("Men, Women")
   to squeeze into leftover space beside the still-wide gallery item. */
@media (max-width: 767px) {
	.single-product .woo-variation-product-gallery,
	.single-product .summary.entry-summary {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Astra's sticky "Add to Cart" bar sits fixed to the bottom of the viewport
   on the product page - confirmed via screenshot this happens on desktop too,
   not just mobile - and was covering the footer's last row (the social
   icons) with no reserved space to clear it. Applied without a width limit
   since the sticky bar isn't mobile-only here.
   Scoped to .ast-sticky-cart-active (added via body_class in the mu-plugin,
   mirroring Astra's own is_purchasable()/is_in_stock() check) - applying
   this unconditionally left a large empty gap above the footer on
   out-of-stock products, where Astra never renders the sticky bar at all. */
.single-product.ast-sticky-cart-active .site-footer {
	padding-bottom: 100px;
}

/* Point N-1 - "Related products" (WooCommerce's own automatic output on
   every product page, not editable in wp-admin/Elementor) styled to match
   the /models/ page's cleaner 3-column layout - same breathing room,
   typography, and "Out of stock" badge treatment, same underlying
   [products]-style markup so the same recipe applies directly. */
.related.products ul.products {
	column-gap: 48px;
	row-gap: 56px;
}

.related.products ul.products li.product {
	margin-bottom: 0;
}

.related.products ul.products li.product a img {
	margin-bottom: 22px;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05em;
	font-weight: 600;
	margin-bottom: 8px;
	letter-spacing: 0.3px;
}

.related.products ul.products li.product .price {
	font-size: 0.95em;
	color: #555;
	margin-bottom: 0;
}

.related.products {
	padding-top: 10px;
	padding-bottom: 30px;
}

@media (max-width: 767px) {
	.related.products ul.products {
		column-gap: 24px;
		row-gap: 36px;
	}
}

.related.products ul.products li.product .ast-shop-product-out-of-stock {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	background: #b00020;
	color: #fff;
	font-weight: 600;
	text-transform: none;
	font-size: 0.75em;
	padding: 4px 10px;
	border-radius: 20px;
	text-align: center;
}