/**
 * Ugett Store — base reset & typography.
 * Scoped to body.ug-store so it never leaks into wp-admin or the block editor.
 */

/* These stylesheets load only on storefront pages, so it is safe to paint the
   root black here — short pages never reveal a white strip below the footer.
   Also offset in-page anchor jumps for the sticky header. */
html {
	background: var(--ug-black);
	scroll-padding-top: calc(var(--ug-header) + 12px);
	/* Clip horizontal overflow at the root so the body is NOT turned into its
	   own scroll container — keeps position: sticky on the header reliable. */
	overflow-x: hidden;
}

body.ug-store {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--ug-black);
	color: var(--ug-text);
	font-family: var(--ug-font);
	font-size: 15.5px;
	line-height: 1.6;
	letter-spacing: var(--ug-tracking);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	display: flex;
	flex-direction: column;
}

/* Store chrome sits flush to the top edge — no gap above the announcement. */
body.ug-store > .ug-trust-bar { margin-top: 0; }

/* Main content grows so the footer always rests at the bottom edge. */
body.ug-store > main { flex: 1 0 auto; }

/* Footer is the final element: no trailing margin/padding below it. */
body.ug-store > .ug-footer { margin-bottom: 0; }
body.ug-store .ug-footer__bottom { padding-bottom: var(--ug-space-md); }

/* Ambient atmospheric background — crimson dusk + tactical grid */
body.ug-store::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 50% at 78% -10%, rgba(255, 70, 85, 0.14), transparent 55%),
		radial-gradient(ellipse 60% 45% at 8% 4%, rgba(120, 130, 150, 0.06), transparent 50%),
		radial-gradient(ellipse 90% 60% at 50% 120%, rgba(255, 70, 85, 0.05), transparent 55%);
	pointer-events: none;
	z-index: -1;
}

body.ug-store::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 75%);
	pointer-events: none;
	z-index: -1;
}

/* The ambient background layers sit at z-index:-1, so in-flow content paints
   above them automatically. No blanket positioning is forced on children —
   that previously out-specified fixed overlays (cart drawer, sticky bar) and
   dropped them into normal flow. */

/* Neutralise the parent TT4 block header/footer/canvas */
body.ug-store .wp-site-blocks > header,
body.ug-store .wp-site-blocks > footer,
body.ug-store .wp-site-blocks > .wp-block-template-part {
	display: none !important;
}
body.ug-store .wp-site-blocks,
body.ug-store #page {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

body.ug-store * {
	box-sizing: border-box;
}

body.ug-store h1,
body.ug-store h2,
body.ug-store h3,
body.ug-store h4 {
	font-family: var(--ug-font-display);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 0.5em;
	letter-spacing: 0.005em;
	text-transform: none;
}

body.ug-store p {
	margin: 0 0 1em;
	color: var(--ug-text-2);
}

body.ug-store a {
	color: inherit;
	text-decoration: none;
}

body.ug-store img {
	max-width: 100%;
	height: auto;
	display: block;
}

body.ug-store a:focus-visible,
body.ug-store button:focus-visible,
body.ug-store input:focus-visible,
body.ug-store textarea:focus-visible,
body.ug-store summary:focus-visible {
	outline: 2px solid var(--ug-red);
	outline-offset: 3px;
}

/* Layout container */
.ug-wrap {
	width: 100%;
	max-width: var(--ug-wrap);
	margin-inline: auto;
	padding-inline: var(--ug-gutter);
}

/* Screen-reader only */
.ug-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Eyebrow / label */
.ug-kicker,
.ug-section__label {
	display: inline-block;
	font-family: var(--ug-font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: var(--ug-tracking-wide);
	text-transform: uppercase;
	color: var(--ug-red);
}

/* Selection */
body.ug-store ::selection {
	background: var(--ug-red);
	color: #fff;
}

/* WooCommerce notices re-skinned to dark */
body.ug-store .woocommerce-message,
body.ug-store .woocommerce-info,
body.ug-store .woocommerce-error {
	background: var(--ug-surface) !important;
	color: var(--ug-text) !important;
	border-top: 2px solid var(--ug-red) !important;
	border-radius: var(--ug-radius);
}