/* ==========================================================================
   U&U Hosiery — base: reset, typography, utilities, WordPress block overrides
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--u-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--u-cream);
	color: var(--u-ink);
	font-family: var(--u-font-body);
	font-size: var(--u-fs-body);
	line-height: var(--u-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	overflow-x: hidden;
}

body.u-noscroll { overflow: hidden; }

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Typographic scale --------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--u-s3);
	color: var(--u-ink);
	font-family: var(--u-font-display);
	font-weight: 600;
	line-height: var(--u-lh-tight);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1 { font-size: var(--u-fs-hero); }
h2 { font-size: var(--u-fs-section); }
h3 { font-size: var(--u-fs-sub); }

h4, h5, h6 {
	font-family: var(--u-font-head);
	letter-spacing: 0;
	line-height: var(--u-lh-snug);
}

h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

h6 {
	font-size: var(--u-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--u-track-eyebrow);
	color: var(--u-muted);
}

p { margin: 0 0 var(--u-s4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--u-olive);
	text-decoration: none;
	transition: color var(--u-t-fast) var(--u-ease);
}

a:hover { color: var(--u-gold-deep); }

strong, b { font-weight: 600; }

small { font-size: var(--u-fs-sm); }

ul, ol { margin: 0 0 var(--u-s4); padding-left: 1.15em; }

hr {
	border: 0;
	border-top: var(--u-border);
	margin: var(--u-s6) 0;
}

/* Never fall below 14px for anything a customer has to read. */
input, select, textarea, button {
	font-family: inherit;
	font-size: var(--u-fs-body);
	color: inherit;
}

/* iOS zooms the viewport when a focused input is under 16px — keep form fields at 16. */
input, select, textarea { font-size: 1rem; }

/* ---- Focus: visible, on-brand, never removed ---------------------------- */

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--u-gold-deep);
	outline-offset: 2px;
	border-radius: var(--u-r-xs);
}

.u-skip {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -120%);
	z-index: var(--u-z-toast);
	background: var(--u-olive);
	color: var(--u-cream);
	padding: var(--u-s3) var(--u-s5);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	border-radius: 0 0 var(--u-r-md) var(--u-r-md);
	transition: transform var(--u-t) var(--u-ease-out);
}

.u-skip:focus { transform: translate(-50%, 0); color: var(--u-cream); }

/* ---- Layout primitives --------------------------------------------------- */

.u-wrap {
	width: 100%;
	max-width: var(--u-maxw);
	margin-inline: auto;
	padding-inline: var(--u-gutter);
}

.u-wrap--narrow { max-width: var(--u-maxw-narrow); }

.u-section { padding-block: var(--u-section-y); }
.u-section--lg { padding-block: var(--u-section-y-lg); }
.u-section--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }

.u-band-cream { background: var(--u-cream-deep); }
.u-band-paper { background: var(--u-paper); }
.u-band-olive { background: var(--u-olive); color: var(--u-cream); }
.u-band-olive h1,
.u-band-olive h2,
.u-band-olive h3 { color: var(--u-cream); }

.u-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Shared type flourishes --------------------------------------------- */

/* Eyebrow: uppercase micro-label preceded by a short gold rule. This pairing is
   used at the top of every section and is the strongest repeated brand signal. */
.u-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--u-s3);
	margin: 0 0 var(--u-s2);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	letter-spacing: var(--u-track-eyebrow);
	text-transform: uppercase;
	color: var(--u-gold-deep);
}

.u-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--u-gold);
	flex: none;
}

.u-eyebrow--center { justify-content: center; }
.u-band-olive .u-eyebrow { color: var(--u-gold-soft); }
.u-band-olive .u-eyebrow::before { background: var(--u-gold); }

.u-lede {
	max-width: 56ch;
	color: var(--u-muted);
	font-size: 1.0625rem;
}

.u-band-olive .u-lede { color: rgba(247, 245, 242, 0.78); }

.u-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--u-s2);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
	color: var(--u-olive);
	border-bottom: 1px solid var(--u-line-strong);
	padding-bottom: 3px;
	transition: border-color var(--u-t-fast) var(--u-ease), color var(--u-t-fast) var(--u-ease);
}

.u-textlink:hover { color: var(--u-gold-deep); border-color: var(--u-gold); }
.u-textlink svg { transition: transform var(--u-t) var(--u-ease-out); }
.u-textlink:hover svg { transform: translateX(3px); }

.u-band-olive .u-textlink { color: var(--u-cream); border-color: rgba(247, 245, 242, 0.3); }
.u-band-olive .u-textlink:hover { color: var(--u-gold-soft); border-color: var(--u-gold); }

/* Section header: title left, "view all" right, dropping to stacked on mobile. */
.u-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--u-s4);
	margin-bottom: var(--u-s6);
	flex-wrap: wrap;
}

.u-sechead__title {
	margin: 0;
	font-size: var(--u-fs-section);
}

/* ---- The house motif ----------------------------------------------------
   Khatam — the eight-point star formed by two overlapping squares. It is the
   shared vocabulary of Islamic tilework and of the block-print textiles the
   hosiery line has always been sold alongside, which is exactly why it is the
   right mark for a shop that sells both. Drawn as a hairline outline and used
   only as texture: never loud enough to compete with a product photograph. */

.u-motif {
	--motif-size: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: var(--motif-size) var(--motif-size);
	background-repeat: repeat;
	opacity: 0.16;
}

.u-rule-gold {
	width: 46px;
	height: 2px;
	background: var(--u-gold);
	border: 0;
	margin: var(--u-s4) 0;
}

/* ---- WordPress block sanding -------------------------------------------- */

.wp-block-group.alignfull { margin-inline: 0; }

.wp-site-blocks > * { margin-block: 0; }

.entry-content > * + * { margin-top: var(--u-s5); }

.wp-block-image img { border-radius: var(--u-r-sm); }

/* Post/page body copy keeps a comfortable measure. */
.u-prose { max-width: 68ch; }
.u-prose h2 { margin-top: var(--u-s7); }
.u-prose h3 { margin-top: var(--u-s6); }

/* Screen-reader-only WooCommerce noise we render ourselves. */
.woocommerce-breadcrumb + .woocommerce-products-header { margin-top: 0; }