/* =========================================================================
   rl-product.css — single product page.

   ⚠ TRAP: `.woocommerce div.product div.summary{float:right;width:48%}` from
   woocommerce-layout.css squeezes the info column to ~269px inside its own
   560px grid track. A FLOAT is ignored inside grid but the PERCENTAGE is not,
   so the column silently collapses while the markup stays perfect. Same defect
   class as the account sidebar collapsing to 78px from
   `.woocommerce-MyAccount-navigation{width:30%}`. Neutralised below and
   MEASURED in tools/verify-product.py — never assumed.
   ====================================================================== */

.rl-pdp{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,7vw,5rem)}
.rl-pdp__inner{width:min(1900px,100% - 2rem);margin-inline:auto}

/* ---------- breadcrumb ---------- */
.rl-pdp__crumbs{
	display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
	font-family:var(--font-body);font-weight:600;
	text-transform:uppercase;letter-spacing:.14em;font-size:.625rem;
	color:hsl(var(--muted-foreground));
	margin-bottom:clamp(1rem,3vw,2rem);
}
.rl-pdp__crumbs a{color:inherit;text-decoration:none}
.rl-pdp__crumbs a:hover{color:hsl(var(--foreground));text-decoration:underline}
.rl-pdp__crumbcur{color:hsl(var(--foreground))}

/* ---------- layout ---------- */
.rl-pdp__grid{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	gap:clamp(1.5rem,4vw,3rem);
	align-items:start;
}
@media (min-width:900px){
	.rl-pdp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ⚠ THE FIX. float:none alone is not enough — the 48% width is what actually
   collapses the column inside a grid track. Both must go, and the selector has
   to outrank `.woocommerce div.product div.summary` (0,3,0). */
.woocommerce div.product .rl-pdp__summary,
.rl-pdp .rl-pdp__summary,
.rl-pdp__grid > .rl-pdp__summary{
	float:none;
	width:auto;
	max-width:none;
	min-width:0;
	margin:0;
	clear:none;
}
.woocommerce div.product .rl-pdp__media,
.rl-pdp .rl-pdp__media{float:none;width:auto;margin:0;min-width:0}

/* Kill the clearfix-as-grid-item on the PDP wrapper too — this pseudo-element
   pattern has already occupied cell 1 twice on this build. */
.rl-pdp__grid::before,.rl-pdp__grid::after,
.rl-pdp::before,.rl-pdp::after{content:none;display:none}

/* ---------- media ---------- */
.rl-pdp__media{border:2px solid hsl(var(--foreground));background:hsl(var(--background));padding:1rem}
.rl-pdp__img{display:block;width:100%;height:auto;max-width:100%}
.rl-pdp__img--placeholder{
	display:grid;place-items:center;aspect-ratio:1;
	background:hsl(var(--muted));
	font-family:var(--font-body);text-transform:uppercase;
	letter-spacing:.18em;font-size:.6875rem;color:hsl(var(--muted-foreground));
}
.rl-pdp__thumbs{
	list-style:none;margin:1rem 0 0;padding:0;
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;
}
.rl-pdp__thumbs::before,.rl-pdp__thumbs::after{content:none;display:none}
.rl-pdp__thumbs img{display:block;width:100%;height:auto;border:2px solid hsl(var(--foreground))}

/* ---------- summary ---------- */
.rl-pdp__entry{
	margin:0 0 .5rem;
	font-family:var(--font-body);font-weight:600;
	text-transform:uppercase;letter-spacing:.14em;font-size:.625rem;
	color:hsl(var(--muted-foreground));
	font-variant-numeric:tabular-nums;
}
.rl-pdp__title{
	font-family:var(--font-heading);font-weight:900;
	text-transform:uppercase;letter-spacing:.01em;
	font-size:clamp(1.75rem,4vw,3rem);line-height:1.02;
	margin:0 0 .75rem;color:hsl(var(--foreground));
}
.rl-pdp__collection{margin:0 0 1rem;font-size:.8125rem}
.rl-pdp__collection a{color:hsl(var(--foreground));text-decoration:underline}
.rl-pdp__price{
	font-family:var(--font-heading);font-weight:900;
	font-size:clamp(1.5rem,3vw,2.25rem);
	font-variant-numeric:tabular-nums;
	margin:0 0 1.25rem;color:hsl(var(--foreground));
}
.rl-pdp__price .woocommerce-Price-amount{white-space:nowrap}
.rl-pdp__desc{margin:0 0 1.5rem;line-height:1.6;color:hsl(var(--foreground))}
.rl-pdp__desc p{margin:0 0 .75rem}

.rl-pdp__lab{margin:0 0 1.5rem}

/* ---------- add to cart ---------- */
.rl-pdp__cart{
	border:2px solid hsl(var(--foreground));
	box-shadow:6px 6px 0 0 rgba(0,0,0,1);
	padding:clamp(1rem,2.5vw,1.5rem);
	background:hsl(var(--background));
	margin-bottom:1.5rem;
}
.rl-pdp__cart form.cart{margin:0;display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.rl-pdp__cart form.cart::before,.rl-pdp__cart form.cart::after{content:none;display:none}
.rl-pdp__cart .quantity{display:flex;align-items:center}
.rl-pdp__cart .quantity input.qty{
	width:5rem;padding:.625rem .5rem;text-align:center;
	border:2px solid hsl(var(--foreground));border-radius:0;
	background:hsl(var(--background));color:hsl(var(--foreground));
	font-family:var(--font-body);font-weight:700;font-variant-numeric:tabular-nums;
}
/* ⚠ THE `.alt` AND THE `body.single-product` PREFIX ARE BOTH LOAD-BEARING.
   WooCommerce renders this button as `class="single_add_to_cart_button button alt"`
   and paints it with
     `.woocommerce button.button.alt { background-color: #7f54b3 }`  -> (0,3,1)
   which is Woo's stock purple. The old selector here was
     `.rl-pdp__cart button.single_add_to_cart_button`               -> (0,2,1)
   and lost, so EVERY product page shipped a lilac Woo button while this rule
   sat in the stylesheet looking correct. A tie would lose too — woocommerce.css
   loads after this file — hence going to (0,4,1). Same trap as the cart table
   resets in rl-cart.css. Do not shorten these selectors.

   Behaviour matches `.rl-btn--primary` (rl-tokens.css:272), which is itself the
   source's button: black, inverting to white-on-black-border with a hard shadow
   on hover, pressing into the shadow on active. */
body.single-product .rl-pdp__cart button.single_add_to_cart_button.alt{
	flex:1 1 12rem;
	border:2px solid transparent;
	background:hsl(var(--primary));
	color:hsl(var(--primary-foreground));
	font-family:var(--font-button);
	text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;
	padding:.75rem 1.25rem;border-radius:0;cursor:pointer;
	box-shadow:none;
	transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease;
}
body.single-product .rl-pdp__cart button.single_add_to_cart_button.alt:hover{
	background:hsl(var(--primary-foreground));
	color:hsl(var(--primary));
	border-color:hsl(var(--foreground));
	box-shadow:var(--shadow-hard-4);
}
body.single-product .rl-pdp__cart button.single_add_to_cart_button.alt:active{
	transform:translate(4px,4px);box-shadow:none;
}
/* Woo disables this until a variation is chosen. Say so, rather than offering a
   button that looks ready and silently does nothing. */
body.single-product .rl-pdp__cart button.single_add_to_cart_button.alt:disabled,
body.single-product .rl-pdp__cart button.single_add_to_cart_button.alt.disabled{
	opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;
	background:hsl(var(--primary));color:hsl(var(--primary-foreground));
	border-color:transparent;
}

/* variation selects */
.rl-pdp__cart table.variations{width:100%;margin:0 0 1rem;border:0;border-collapse:collapse}
.rl-pdp__cart table.variations th,
.rl-pdp__cart table.variations td{border:0;padding:0 0 .625rem;text-align:left;vertical-align:middle}
.rl-pdp__cart table.variations th.label label{
	font-family:var(--font-body);font-weight:700;
	text-transform:uppercase;letter-spacing:.14em;font-size:.625rem;
	color:hsl(var(--muted-foreground));
}
.rl-pdp__cart table.variations select{
	width:100%;padding:.5rem .625rem;border-radius:0;
	border:2px solid hsl(var(--foreground));
	background:hsl(var(--background));color:hsl(var(--foreground));
	font-family:var(--font-body);font-weight:600;font-size:.8125rem;
}
.rl-pdp__cart .woocommerce-variation-price{
	font-family:var(--font-heading);font-weight:900;
	font-size:1.25rem;font-variant-numeric:tabular-nums;
	margin-bottom:.75rem;
}
.rl-pdp__cart .reset_variations{
	font-size:.625rem;text-transform:uppercase;letter-spacing:.14em;
	color:hsl(var(--muted-foreground));
}
/* HARD RULE 10: nothing here may render an out-of-stock state. */
.rl-pdp__cart .stock.out-of-stock,
.rl-pdp__cart .wc-no-matching-variations{display:none}

/* ---------- meta ---------- */
.rl-pdp__meta{
	margin:0;display:grid;grid-template-columns:auto 1fr;
	gap:.375rem 1rem;font-size:.75rem;
}
.rl-pdp__meta dt{
	font-family:var(--font-body);font-weight:700;
	text-transform:uppercase;letter-spacing:.14em;font-size:.625rem;
	color:hsl(var(--muted-foreground));
}
.rl-pdp__meta dd{margin:0;color:hsl(var(--foreground))}

/* ---------- related ---------- */
.rl-pdp .related.products{margin-top:clamp(3rem,7vw,5rem)}
.rl-pdp .related.products::before,.rl-pdp .related.products::after{content:none;display:none}
.rl-pdp .related.products > h2{
	font-family:var(--font-heading);font-weight:900;
	text-transform:uppercase;letter-spacing:.02em;
	font-size:clamp(1.25rem,3vw,1.875rem);
	margin:0 0 clamp(1rem,3vw,1.75rem);
}
.rl-pdp .related.products ul.products{
	list-style:none;margin:0;padding:0;display:grid;
	grid-template-columns:repeat(1,minmax(0,1fr));
	gap:clamp(1rem,2vw,1.5rem);
}
@media (min-width:640px){.rl-pdp .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rl-pdp .related.products ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rl-pdp .related.products ul.products li.product{float:none;width:auto;margin:0;min-width:0}
.rl-pdp .related.products ul.products::before,
.rl-pdp .related.products ul.products::after{content:none;display:none}