/* ==========================================================================
   U&U Hosiery — layout: header, homepage sections, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.u-announce {
	background: var(--u-olive);
	color: var(--u-cream);
	font-size: var(--u-fs-xs);
	overflow: hidden;
}

.u-announce__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--u-s4);
	min-height: var(--u-announce-h);
}

.u-announce__rotator {
	position: relative;
	flex: 1;
	height: var(--u-announce-h);
	overflow: hidden;
}

.u-announce__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--u-s2);
	opacity: 0;
	transform: translateY(60%);
	transition: opacity var(--u-t) var(--u-ease), transform var(--u-t) var(--u-ease-out);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
	pointer-events: none;
}

.u-announce__msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.u-announce__msg svg { color: var(--u-gold-soft); flex: none; }

.u-announce__aside {
	display: none;
	align-items: center;
	gap: var(--u-s4);
	color: rgba(247, 245, 242, 0.7);
}

.u-announce__aside a { color: rgba(247, 245, 242, 0.85); display: inline-flex; align-items: center; gap: 6px; }
.u-announce__aside a:hover { color: var(--u-gold-soft); }

@media (min-width: 900px) {
	.u-announce__aside { display: flex; }
	.u-announce__msg { justify-content: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.u-header {
	position: sticky;
	top: 0;
	z-index: var(--u-z-header);
	background: var(--u-cream);
	border-bottom: var(--u-border);
	transition: box-shadow var(--u-t) var(--u-ease), background var(--u-t) var(--u-ease);
}

.u-header.is-stuck { box-shadow: var(--u-shadow-md); background: rgba(247, 245, 242, 0.97); backdrop-filter: blur(8px); }

.u-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--u-s4);
	min-height: var(--u-header-h);
}

@media (min-width: 1000px) {
	.u-header__bar { grid-template-columns: minmax(180px, auto) minmax(0, 1fr) minmax(180px, auto); gap: var(--u-s6); }
}

/* Logo */
.u-logo { display: inline-flex; align-items: center; gap: 10px; }
.u-logo img, .u-logo svg { height: 38px; width: auto; }

.u-logo__text { display: flex; flex-direction: column; line-height: 1; }

.u-logo__name {
	font-family: var(--u-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--u-ink);
}

.u-logo__sub {
	margin-top: 3px;
	font-family: var(--u-font-head);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--u-gold-deep);
}

@media (max-width: 420px) {
	.u-logo__sub { display: none; }
	.u-logo__name { font-size: 1.25rem; }
}

/* Search */
.u-search { position: relative; display: none; }

@media (min-width: 1000px) {
	.u-search { display: block; }
}

.u-search__form {
	display: flex;
	align-items: center;
	gap: var(--u-s2);
	background: var(--u-paper);
	border: 1px solid var(--u-line-strong);
	border-radius: var(--u-r-pill);
	padding: 0 6px 0 16px;
	transition: border-color var(--u-t-fast) var(--u-ease), box-shadow var(--u-t-fast) var(--u-ease);
}

.u-search__form:focus-within { border-color: var(--u-olive); box-shadow: 0 0 0 3px rgba(46, 59, 44, 0.08); }
.u-search__icon { color: var(--u-muted); flex: none; display: flex; }

.u-search__input {
	flex: 1;
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
}

.u-search__input:focus { outline: none; }

.u-search__submit {
	flex: none;
	min-height: 34px;
	padding: 0 16px;
	background: var(--u-olive);
	color: var(--u-cream);
	border: 0;
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--u-t-fast) var(--u-ease);
}

.u-search__submit:hover { background: var(--u-ink); }

/* Autocomplete panel */
.u-ac {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: var(--u-z-mega);
	background: var(--u-paper);
	border: var(--u-border);
	border-radius: var(--u-r-md);
	box-shadow: var(--u-shadow-lg);
	overflow: hidden;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
}

.u-ac.is-open { display: block; }

.u-ac__head {
	padding: 10px 16px;
	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-muted);
	background: var(--u-cream-deep);
}

.u-ac__item {
	display: flex;
	align-items: center;
	gap: var(--u-s3);
	padding: 10px 16px;
	border-bottom: var(--u-border);
	transition: background var(--u-t-fast) var(--u-ease);
}

.u-ac__item:last-child { border-bottom: 0; }
.u-ac__item:hover,
.u-ac__item.is-active { background: var(--u-cream-deep); }

.u-ac__thumb {
	width: 44px;
	height: 55px;
	flex: none;
	object-fit: cover;
	border-radius: var(--u-r-xs);
	background: var(--u-cream-warm);
}

.u-ac__name { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 500; color: var(--u-ink); line-height: 1.3; }
.u-ac__price { font-size: var(--u-fs-xs); color: var(--u-muted); margin-top: 2px; }
.u-ac__empty { padding: 20px 16px; font-size: var(--u-fs-sm); color: var(--u-muted); text-align: center; }

/* Header actions */
.u-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

.u-actions .u-iconbtn[data-count]::after {
	content: attr(data-count);
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	background: var(--u-terracotta);
	color: #fff;
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-head);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.u-actions .u-iconbtn[data-count="0"]::after { display: none; }

.u-actions__search { display: inline-flex; }
.u-actions__burger { display: inline-flex; }

@media (min-width: 1000px) {
	.u-actions__search,
	.u-actions__burger { display: none; }
}

/* --------------------------------------------------------------------------
   Primary navigation + mega menu
   -------------------------------------------------------------------------- */

.u-nav { display: none; border-top: var(--u-border); }

@media (min-width: 1000px) {
	.u-nav { display: block; }
}

.u-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--u-s6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.u-nav__item { position: static; }

.u-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 14px 0;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--u-ink);
	position: relative;
	background: none;
	border: 0;
	cursor: pointer;
}

.u-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1.5px;
	background: var(--u-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--u-t) var(--u-ease-out);
}

.u-nav__link:hover::after,
.u-nav__item.is-open > .u-nav__link::after,
.u-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.u-nav__link--sale { color: var(--u-terracotta); font-weight: 600; }
.u-nav__link--sale::after { background: var(--u-terracotta); }

.u-nav__link svg { transition: transform var(--u-t) var(--u-ease); }
.u-nav__item.is-open > .u-nav__link svg { transform: rotate(180deg); }

/* Mega panel spans the full header width. */
.u-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--u-z-mega);
	background: var(--u-paper);
	border-top: var(--u-border);
	border-bottom: 1px solid var(--u-line-strong);
	box-shadow: var(--u-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--u-t) var(--u-ease), transform var(--u-t) var(--u-ease-out), visibility var(--u-t);
}

.u-nav__item.is-open .u-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.u-mega__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr);
	gap: var(--u-s7);
	padding-block: var(--u-s6);
}

.u-mega__col h3 {
	margin: 0 0 var(--u-s4);
	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-muted);
	padding-bottom: var(--u-s3);
	border-bottom: var(--u-border);
}

.u-mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.u-mega__links a {
	display: block;
	padding: 7px 0;
	font-size: 0.9375rem;
	color: var(--u-ink);
	transition: color var(--u-t-fast) var(--u-ease), padding-left var(--u-t-fast) var(--u-ease);
}

.u-mega__links a:hover { color: var(--u-olive); padding-left: 6px; }

.u-mega__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s4); }

.u-mega__tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--u-r-sm);
	overflow: hidden;
	background: var(--u-cream-deep);
}

.u-mega__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--u-t-slow) var(--u-ease-out); }
.u-mega__tile:hover img { transform: scale(1.05); }

.u-mega__tile span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--u-s5) var(--u-s3) var(--u-s3);
	background: linear-gradient(to top, rgba(28, 32, 26, 0.8), transparent);
	color: var(--u-cream);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 600;
}

/* Tone accent on the open mega panel — the only place the coding is overt. */
.u-mega[data-tone="men"] { border-top-color: var(--u-tone-men); border-top-width: 2px; }
.u-mega[data-tone="women"] { border-top-color: var(--u-tone-women); border-top-width: 2px; }
.u-mega[data-tone="islamic"] { border-top-color: var(--u-tone-islamic); border-top-width: 2px; }

/* --------------------------------------------------------------------------
   Mobile navigation drawer
   -------------------------------------------------------------------------- */

.u-mnav__search { margin-bottom: var(--u-s5); }
.u-mnav__list { list-style: none; margin: 0 0 var(--u-s5); padding: 0; }
.u-mnav__list > li { border-bottom: var(--u-border); }

.u-mnav__link,
.u-mnav__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--u-s3);
	padding: var(--u-s4) 0;
	background: none;
	border: 0;
	font-family: var(--u-font-head);
	font-size: 1rem;
	font-weight: 500;
	color: var(--u-ink);
	text-align: left;
	cursor: pointer;
}

.u-mnav__toggle svg { color: var(--u-muted); transition: transform var(--u-t) var(--u-ease); }
.u-mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.u-mnav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--u-t) var(--u-ease); }
.u-mnav__sub > div { overflow: hidden; }
.u-mnav__toggle[aria-expanded="true"] + .u-mnav__sub { grid-template-rows: 1fr; }

.u-mnav__sublist { list-style: none; margin: 0; padding: 0 0 var(--u-s4) var(--u-s4); border-left: 2px solid var(--u-gold-soft); }
.u-mnav__sublist a { display: block; padding: 8px 0; font-size: 0.9375rem; color: var(--u-muted); }
.u-mnav__sublist a:hover { color: var(--u-olive); }

.u-mnav__cta { display: flex; flex-direction: column; gap: var(--u-s3); }

.u-mnav__contact {
	margin-top: var(--u-s6);
	padding-top: var(--u-s5);
	border-top: var(--u-border);
	font-size: var(--u-fs-sm);
	color: var(--u-muted);
}

.u-mnav__contact a { display: flex; align-items: center; gap: var(--u-s2); padding: 6px 0; color: var(--u-ink); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.u-hero { position: relative; background: var(--u-olive); color: var(--u-cream); overflow: hidden; }

.u-hero__slides { position: relative; }

.u-hero__slide {
	display: grid;
	align-items: center;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--u-t-slow) var(--u-ease);
}

.u-hero__slide.is-active { position: relative; opacity: 1; visibility: visible; }

@media (min-width: 900px) {
	.u-hero__slide { grid-template-columns: 1.05fr 1fr; }
}

.u-hero__copy {
	position: relative;
	z-index: 2;
	padding-block: clamp(3rem, 8vw, 6rem);
	padding-inline: var(--u-gutter);
	max-width: 640px;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 900px) {
	.u-hero__copy {
		padding-inline: max(var(--u-gutter), calc((100vw - var(--u-maxw)) / 2 + var(--u-gutter)));
		margin-inline: 0;
		max-width: none;
	}
}

.u-hero__title {
	margin: 0 0 var(--u-s4);
	font-size: var(--u-fs-hero);
	color: var(--u-cream);
	line-height: 1.08;
}

.u-hero__title em {
	font-style: italic;
	color: var(--u-gold-soft);
}

.u-hero__sub {
	margin: 0 0 var(--u-s6);
	max-width: 46ch;
	color: rgba(247, 245, 242, 0.8);
	font-size: 1.0625rem;
}

.u-hero__cta { display: flex; flex-wrap: wrap; gap: var(--u-s3); }

.u-hero__media { position: relative; min-height: 300px; }

@media (max-width: 899px) {
	.u-hero__media { order: -1; aspect-ratio: 4 / 3; min-height: 0; }
}

.u-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim that blends the photograph into the olive copy column and then gets out
   of the way — it falls off inside the first fifth so the product stays legible. */
.u-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--u-olive) 0%,
		rgba(46, 59, 44, 0.94) 7%,
		rgba(46, 59, 44, 0.62) 20%,
		rgba(46, 59, 44, 0.28) 38%,
		rgba(46, 59, 44, 0.08) 58%,
		rgba(46, 59, 44, 0) 78%);
}

@media (max-width: 899px) {
	.u-hero__media::after { background: linear-gradient(to top, var(--u-olive) 4%, rgba(46, 59, 44, 0.15) 70%); }
}

/* Kept lighter than elsewhere — over the hero photograph it is a whisper. */
.u-hero__motif {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.09;
}

.u-hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--u-s5);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: var(--u-s2);
}

@media (min-width: 900px) {
	.u-hero__dots { left: max(var(--u-gutter), calc((100vw - var(--u-maxw)) / 2 + var(--u-gutter))); transform: none; }
}

.u-hero__dot {
	width: 28px;
	height: 3px;
	padding: 0;
	background: rgba(247, 245, 242, 0.32);
	border: 0;
	border-radius: var(--u-r-pill);
	cursor: pointer;
	transition: background var(--u-t) var(--u-ease);
}

.u-hero__dot[aria-selected="true"] { background: var(--u-gold); }

.u-hero__scroll {
	position: absolute;
	right: var(--u-gutter);
	bottom: var(--u-s5);
	z-index: 3;
	display: none;
	align-items: center;
	gap: var(--u-s2);
	color: rgba(247, 245, 242, 0.65);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	letter-spacing: var(--u-track-eyebrow);
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.u-hero__scroll { display: flex; }
}

.u-hero__scroll svg { animation: u-bob 2.2s var(--u-ease) infinite; }

@keyframes u-bob {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.u-hero__scroll svg { animation: none; }
}

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.u-cats { display: grid; gap: var(--u-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 760px) {
	.u-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u-s5); }
}

/* The first two tiles take double height on desktop so the grid has a rhythm
   rather than reading as six identical boxes. */
@media (min-width: 1000px) {
	.u-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; }
	.u-cats__tile:nth-child(1),
	.u-cats__tile:nth-child(2) { grid-row: span 2; }
}

.u-cats__tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--u-r-sm);
	background: var(--u-cream-deep);
}

@media (min-width: 1000px) {
	.u-cats__tile { aspect-ratio: auto; height: 100%; }
}

.u-cats__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 640ms var(--u-ease-out); }

@media (hover: hover) {
	.u-cats__tile:hover img { transform: scale(1.06); }
}

.u-cats__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 32, 26, 0.82) 0%, rgba(28, 32, 26, 0.25) 42%, rgba(28, 32, 26, 0.05) 100%);
	transition: background var(--u-t) var(--u-ease);
}

.u-cats__tile:hover::after { background: linear-gradient(to top, rgba(28, 32, 26, 0.88) 0%, rgba(28, 32, 26, 0.4) 55%, rgba(28, 32, 26, 0.12) 100%); }

.u-cats__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--u-s5);
	color: var(--u-cream);
}

.u-cats__name {
	display: block;
	font-family: var(--u-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.u-cats__meta {
	display: block;
	margin-top: 4px;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	color: rgba(247, 245, 242, 0.72);
}

.u-cats__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--u-s3);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--u-gold-soft);
}

.u-cats__go svg { transition: transform var(--u-t) var(--u-ease-out); }
.u-cats__tile:hover .u-cats__go svg { transform: translateX(4px); }

/* A hairline of the tone colour along the tile's bottom edge. */
.u-cats__tile::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	z-index: 3;
	background: var(--u-tone-neutral);
}

.u-cats__tile[data-tone="men"]::before { background: var(--u-tone-men); }
.u-cats__tile[data-tone="women"]::before { background: var(--u-tone-women); }
.u-cats__tile[data-tone="islamic"]::before { background: var(--u-tone-islamic); }
.u-cats__tile[data-tone="sale"]::before { background: var(--u-tone-sale); }

/* --------------------------------------------------------------------------
   Split promotional banners
   -------------------------------------------------------------------------- */

.u-split { display: grid; gap: var(--u-s4); }

@media (min-width: 860px) {
	.u-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s5); }
}

.u-split__panel {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 380px;
	padding: var(--u-s7) var(--u-s6);
	border-radius: var(--u-r-sm);
	overflow: hidden;
	isolation: isolate;
	color: var(--u-cream);
}

.u-split__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

.u-split__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Hosiery panel: cool, clean, product-forward. */
.u-split__panel--hosiery::before {
	background: linear-gradient(120deg, rgba(28, 32, 26, 0.9) 8%, rgba(46, 59, 44, 0.6) 55%, rgba(46, 59, 44, 0.2) 100%);
}

/* Islamic panel: warmer, gold-lit — a different mood, identical type system. */
.u-split__panel--islamic::before {
	background: linear-gradient(120deg, rgba(58, 44, 22, 0.9) 8%, rgba(120, 92, 40, 0.55) 58%, rgba(201, 162, 75, 0.2) 100%);
}

.u-split__inner { position: relative; max-width: 34ch; }
.u-split__title { margin: 0 0 var(--u-s3); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); color: var(--u-cream); }
.u-split__text { margin: 0 0 var(--u-s5); color: rgba(247, 245, 242, 0.82); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Offers / countdown
   -------------------------------------------------------------------------- */

.u-offer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--u-s5);
	margin-bottom: var(--u-s6);
}

.u-offer__timer { display: flex; flex-direction: column; gap: var(--u-s2); }

.u-offer__timer-label {
	display: flex;
	align-items: center;
	gap: 6px;
	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-soft);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.u-reviews { position: relative; }

.u-reviews__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(88vw, 380px), 1fr);
	gap: var(--u-s4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline: calc(var(--u-gutter) * -1);
	padding: 4px var(--u-gutter) var(--u-s4);
}

.u-reviews__rail::-webkit-scrollbar { display: none; }
.u-reviews__rail > * { scroll-snap-align: start; }

@media (min-width: 1000px) {
	.u-reviews__rail { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--u-s5); }
}

.u-review {
	display: flex;
	flex-direction: column;
	gap: var(--u-s3);
	padding: var(--u-s6);
	background: var(--u-paper);
	border: var(--u-border);
	border-radius: var(--u-r-sm);
	position: relative;
}

/* Oversized quote glyph in Playfair — an editorial detail, not a stock icon. */
.u-review::before {
	content: "“";
	position: absolute;
	top: 6px;
	right: 20px;
	font-family: var(--u-font-display);
	font-size: 5rem;
	line-height: 1;
	color: var(--u-gold);
	opacity: 0.18;
	pointer-events: none;
}

.u-review__text { margin: 0; color: var(--u-ink); font-size: 0.9375rem; line-height: 1.6; }

.u-review__product {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 5px 10px;
	background: var(--u-gold-wash);
	color: var(--u-gold-deep);
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: 0.6875rem;
	font-weight: 600;
}

.u-review__who {
	display: flex;
	align-items: center;
	gap: var(--u-s3);
	margin-top: auto;
	padding-top: var(--u-s4);
	border-top: var(--u-border);
}

.u-review__avatar {
	width: 40px;
	height: 40px;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--u-olive-tint);
	color: var(--u-olive);
	border-radius: var(--u-r-pill);
	font-family: var(--u-font-head);
	font-size: var(--u-fs-sm);
	font-weight: 700;
}

.u-review__name { font-family: var(--u-font-head); font-size: var(--u-fs-sm); font-weight: 600; color: var(--u-ink); }
.u-review__city { font-size: var(--u-fs-xs); color: var(--u-muted); }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.u-news {
	display: grid;
	gap: var(--u-s6);
	align-items: center;
	padding: var(--u-s8) var(--u-s6);
	background: var(--u-olive);
	color: var(--u-cream);
	border-radius: var(--u-r-md);
	position: relative;
	overflow: hidden;
}

@media (min-width: 860px) {
	.u-news { grid-template-columns: 1.1fr 1fr; padding: var(--u-s9) var(--u-s8); }
}

.u-news__motif { position: absolute; inset: 0; --motif-color: var(--u-gold); }
.u-news__inner { position: relative; z-index: 1; }
.u-news h2 { color: var(--u-cream); margin-bottom: var(--u-s3); }
.u-news p { color: rgba(247, 245, 242, 0.78); margin: 0; }

.u-news__form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--u-s3); }

@media (min-width: 520px) {
	.u-news__row { display: flex; gap: var(--u-s2); }
	.u-news__row .u-field { flex: 1; }
}

.u-news__note { font-size: var(--u-fs-xs); color: rgba(247, 245, 242, 0.6); }
.u-news__ok { display: none; font-size: var(--u-fs-sm); color: var(--u-gold-soft); }
.u-news.is-done .u-news__ok { display: block; }
.u-news.is-done .u-news__row { display: none; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.u-contact { display: grid; gap: var(--u-s6); }

@media (min-width: 860px) {
	.u-contact { grid-template-columns: 1fr 1.15fr; gap: var(--u-s8); align-items: start; }
}

.u-contact__cards { display: grid; gap: var(--u-s4); }

@media (min-width: 520px) {
	.u-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.u-contact__card {
	display: flex;
	gap: var(--u-s3);
	padding: var(--u-s5);
	background: var(--u-paper);
	border: var(--u-border);
	border-radius: var(--u-r-sm);
}

.u-contact__card--wide { grid-column: 1 / -1; }

.u-contact__icon {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: var(--u-olive-tint);
	color: var(--u-olive);
	border-radius: var(--u-r-pill);
}

.u-contact__label {
	margin: 0 0 2px;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--u-muted);
}

.u-contact__value { margin: 0; font-size: 0.9375rem; color: var(--u-ink); line-height: 1.5; }
.u-contact__value a { color: var(--u-ink); }
.u-contact__value a:hover { color: var(--u-gold-deep); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.u-footer { background: var(--u-olive); color: rgba(247, 245, 242, 0.78); }

.u-footer a { color: rgba(247, 245, 242, 0.78); }
.u-footer a:hover { color: var(--u-gold-soft); }

.u-footer__main { padding-block: var(--u-s9) var(--u-s7); display: grid; gap: var(--u-s7); }

@media (min-width: 760px) {
	.u-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
	.u-footer__main { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: var(--u-s6); }
}

.u-footer__title {
	margin: 0 0 var(--u-s4);
	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-soft);
}

.u-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.u-footer__list a { font-size: 0.9375rem; }

.u-footer__brand p { font-size: 0.9375rem; margin-bottom: var(--u-s4); max-width: 34ch; }

.u-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--u-s3); font-size: 0.9375rem; }
.u-footer__contact li { display: flex; gap: var(--u-s3); align-items: flex-start; }
.u-footer__contact svg { flex: none; color: var(--u-gold); margin-top: 2px; }

.u-footer__social { display: flex; gap: var(--u-s2); margin-top: var(--u-s5); }

.u-footer__social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(247, 245, 242, 0.22);
	border-radius: var(--u-r-pill);
	transition: background var(--u-t-fast) var(--u-ease), border-color var(--u-t-fast) var(--u-ease);
}

.u-footer__social a:hover { background: rgba(247, 245, 242, 0.1); border-color: var(--u-gold); }

.u-footer__pay { padding-block: var(--u-s5); border-top: 1px solid rgba(247, 245, 242, 0.14); }

.u-footer__pay-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--u-s4);
	justify-content: space-between;
}

.u-footer__pay-label { font-size: var(--u-fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247, 245, 242, 0.55); }
.u-footer__pay-icons { display: flex; flex-wrap: wrap; gap: var(--u-s2); }

.u-paychip {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	background: rgba(247, 245, 242, 0.94);
	color: var(--u-ink);
	border-radius: var(--u-r-xs);
	font-family: var(--u-font-head);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.u-footer__legal { padding-block: var(--u-s5); border-top: 1px solid rgba(247, 245, 242, 0.14); }

.u-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--u-s3) var(--u-s5);
	align-items: center;
	justify-content: space-between;
	font-size: var(--u-fs-xs);
	color: rgba(247, 245, 242, 0.55);
}

.u-footer__legal-row a { color: rgba(247, 245, 242, 0.7); }

.u-footer__newsletter .u-field {
	background: rgba(247, 245, 242, 0.08);
	border-color: rgba(247, 245, 242, 0.24);
	color: var(--u-cream);
}

.u-footer__newsletter .u-field::placeholder { color: rgba(247, 245, 242, 0.45); }
.u-footer__newsletter .u-field:focus { border-color: var(--u-gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18); }