/* ==========================================================================
   Udgoon browse route — 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: the toolbar,
   dropdowns, density icons, browse grid, browse card and browse note rules
   already exist there, scoped by `.catalogue-page` and `data-scene=browse`.

   This file only normalises the shell. The approved browse scene is a modal
   <dialog> that owns the viewport and scrolls internally; a shop or category
   route is a document, so the dialog becomes plain flow and the page itself
   scrolls.
   ========================================================================== */

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

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

/* Flow instead of top-layer modal, keeping the dialog as the containing block
   for the corner controls (as the UA dialog was). The entry animation is
   dropped: the catalogue is the page, not something opening on top of one. */
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 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;
}

/* The controls are one GET form: a <form> is not a layout box the approved
   cascade knows about, so its box must be transparent to the grid. */
#catalogue-form {
	display: block;
	margin: 0;
}

/* Cards the current filter hides are printed for the browser and for crawlers;
   the hidden attribute decides whether they take a cell. */
.browse-card[hidden] {
	display: none;
}

/* Grid density is a per-visit choice; until the controller has run, the
   approved default (4 desktop, 2 mobile) is what the cascade already sets. */

/* 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;
	}
}

/* At <=760px the approved browse scene is a white field with dark type
   (`dialog[data-scene=browse]` in the cascade). On a real route the dialog is
   the page, so the document behind it must be white too, and the page should
   not advertise a dark colour scheme for a light surface. */
@media (max-width: 760px) {
	html,
	body.udgoon-catalogue-scene {
		background: #fff;
		color: #080808;
	}

	html {
		color-scheme: light;
	}
}

/* The browse note closes the page; keep it clear of the viewport edge without
   inventing footer chrome that belongs to the global shell step. */
dialog#overlay .browse-note {
	margin-bottom: 0;
}

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

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

.udgoon-catalogue-missing p {
	margin: 0;
	color: var(--ug-muted);
}
/* PILOT (kaftans): crawlable category intro. A short muted paragraph under the
   toolbar, using the same muted tone as the browse note. */
.catalogue-page .catalogue-intro {
	max-width: 620px;
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ug-muted);
}

@media (max-width: 760px) {
	.catalogue-page .catalogue-intro {
		font-size: 12px;
		margin-top: 12px;
	}
}

/* ACQ-SEO-KAFTANS-01 guide: begin */
/* ACQ-SEO-KAFTANS-01: Kaftans buying guide.
   Reuses the existing archive design language: the browse-note's hairline
   top border and muted body tone, the theme's heading treatment (--display,
   uppercase), and the shared --line / --ug-* tokens. No new typeface, colour
   or layout system is introduced. */
.catalogue-page .udg-kaftan-buying-guide {
	max-width: 620px;
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.catalogue-page .udg-kaftan-buying-guide h2 {
	margin: 0 0 14px;
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ug-highlight);
}

.catalogue-page .udg-kaftan-buying-guide p {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ug-muted);
}

.catalogue-page .udg-kaftan-buying-guide ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.catalogue-page .udg-kaftan-buying-guide li {
	padding: 0 0 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ug-muted);
}

/* The archive ground is --ug-deep (#24113b); links must be light against it, so
   they use the near-white mist token, with the archive's lime highlight on
   hover/focus. Card titles use plain white and the toolbar H1 uses the lime. */
.catalogue-page .udg-kaftan-buying-guide a {
	color: var(--ug-mist);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.catalogue-page .udg-kaftan-buying-guide a:hover,
.catalogue-page .udg-kaftan-buying-guide a:focus-visible {
	color: var(--ug-highlight);
}

.catalogue-page .udg-kaftan-buying-guide a:focus-visible {
	outline: 2px solid var(--ug-highlight);
	outline-offset: 3px;
}

@media (max-width: 760px) {
	.catalogue-page .udg-kaftan-buying-guide {
		margin-top: 25px;
		padding-top: 15px;
	}

	.catalogue-page .udg-kaftan-buying-guide h2 {
		font-size: 16px;
	}

	.catalogue-page .udg-kaftan-buying-guide p,
	.catalogue-page .udg-kaftan-buying-guide li {
		font-size: 12px;
	}
}
/* ACQ-SEO-KAFTANS-01 guide: end */