/* ==========================================================================
   Udgoon PDP — WordPress shell adaptation
   --------------------------------------------------------------------------
   Everything inside #overlay-body is styled by the generated approved cascade
   (assets/css/approved-cascade.css) and must not be restyled here. This file
   only normalises the shell: the approved scene is a modal <dialog> that owns
   the viewport and scrolls internally, while a WordPress product route is a
   document.
   ========================================================================== */

html {
	background: var(--ug-deep);
	color-scheme: dark;
}

body.udgoon-pdp-scene {
	background: var(--ug-deep);
	color: #fff;
	overflow-x: hidden;
}

/* Flow instead of top-layer modal, with the dialog still the containing block
   for the absolutely positioned corner controls (as the UA dialog was). The
   entry animation is dropped: the scene is the page, not something opening. */
dialog#overlay {
	position: relative;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	overscroll-behavior: auto;
	animation: none;
}

dialog#overlay::backdrop {
	display: none;
}

dialog#overlay[open] {
	animation: none;
}

/* The approved header is in flow and scrolls away with the scene, exactly as it
   did inside the dialog; it only needs a positioned box for .overlay-close. */
dialog#overlay > .overlay-header {
	position: relative;
}

/* WordPress admin bar sits above the scene; the corner controls clear it. */
.admin-bar dialog#overlay > .overlay-close {
	top: 59px;
}

@media (max-width: 782px) {
	.admin-bar dialog#overlay > .overlay-close {
		top: 73px;
	}
}

/* The related rail closes the page; keep it clear of the viewport edge without
   inventing footer chrome that belongs to the global shell step. */
dialog#overlay > #overlay-body > .related-products:last-child {
	padding-bottom: 90px;
}

/* D1 — mobile gallery arrows.
   At <=600px the absolutely positioned "Enlarge photograph +" pill covers the
   right end of the strip, which is exactly where the two round gallery arrows
   sit, so it received their taps. Hide only those two buttons at that width.
   They keep their strip footprint (visibility, not display) so the approved
   composition does not re-flow: thumbnails, the centred view label and the zoom
   pill stay exactly where they were. Hidden elements are not hit-tested and are
   not focusable, so touch and keyboard both stop offering a dead control;
   gallery stepping stays available through the thumbnails, and ArrowLeft/Right
   on the focusable .gallery-main still works. Desktop/tablet (>=601px) and
   every other control are untouched. */
@media (max-width: 600px) {
	.product-gallery .gallery-arrows {
		visibility: hidden;
	}
}

/* D1 — the piece's name is the scene's <h1>.
   `approved-cascade.css` is generated from the approved frontend, where the name
   is an <h2>; the WordPress product route is a document whose only top-level
   heading is that name, so `parts/pdp-product.php` prints an <h1>. Two cascade
   rules reach the name and both are mirrored here for <h1> with the same values
   and the same breakpoint, so the rendered type, margins and flex order are
   identical:
     `dialog[data-scene="product"] h2`   — display face, weight, uppercase
     `dialog[data-scene=product] .product-details h2` — size, leading, spacing
   The cascade file itself stays generated — nothing is appended to it. */
dialog[data-scene=product] .product-details h1 {
	font: 800 42px/0.85 var(--display);
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0 0 45px;
	order: -2;
	max-width: 100%;
}

@media (max-width: 760px) {
	dialog[data-scene=product] .product-details h1 {
		font-size: 32px;
		margin-bottom: 25px;
	}
}

/* Fallback notice (only when a product record cannot be built). */
.udgoon-pdp-missing {
	min-height: 100vh;
	display: grid;
	place-content: center;
	gap: 14px;
	padding: 40px 2.5vw;
	text-align: center;
}

.udgoon-pdp-missing h1 {
	font-family: var(--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin: 0;
}

.udgoon-pdp-missing p {
	margin: 0;
	color: var(--ug-muted);
}