/*
 * Locale-aware storefront shell, layered after the approved theme and Living styles.
 * Hebrew/Arabic are RTL, English/Russian are LTR. Nothing is visually reordered
 * with row-reverse: browser, tab order and screen readers follow the document.
 * Uses the existing brand tokens and approved icon/logo assets.
 */

.site-header .header-row {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: clamp(0.5rem, 1.25vw, 1rem);
}

.site-header .header-tools,
.site-header .site-menu,
.site-header .brand {
	min-inline-size: 0;
}

.site-header .site-menu > summary,
.site-header .cart-link {
	gap: 0.4rem;
	white-space: nowrap;
}

.site-header .cart-link [data-basket-count] {
	flex: none;
}

.site-header .header-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(11rem, 17rem) max-content;
	column-gap: clamp(0.6rem, 1.6vw, 1.6rem);
	row-gap: 0.5rem;
	align-items: center;
}

.site-header .header-bottom .main-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	/* The header stops widening at about 1600px; the gap and the type below stop growing there too, so the
	   Hebrew bar keeps one row on wide screens instead of dropping its last link. */
	gap: 0.15rem clamp(0.65rem, 1.25vw, 1.1rem);
	min-inline-size: 0;
}

.site-header .header-bottom .main-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-block-size: 44px;
	padding-block: 0.35rem;
	font-size: clamp(0.84rem, 0.76rem + 0.17vw, 0.93rem);
	line-height: 1.35;
	text-align: start;
}

.site-header .header-bottom .header-search {
	inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
}

.site-header .header-bottom .header-search input {
	inline-size: 100%;
	min-inline-size: 0;
}

.site-header .header-bottom .lang-switch {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.15rem;
	min-inline-size: 0;
}

.site-header .lang-switch a {
	white-space: nowrap;
}

.site-header :is(.main-nav, .site-menu nav) a {
	overflow-wrap: normal;
}

/* The real hero photo has flowers on the left and readable dark green on the
 * right. Place LTR copy on that dark area without reversing the copy itself. */
html[dir='ltr'] .zf-living-home .zf-living-hero__inner {
	display: flex;
	justify-content: flex-end;
}

html[dir='ltr'] .zf-living-home .zf-living-hero__content {
	inline-size: min(55%, 600px);
	max-inline-size: 600px;
	text-align: start;
}

.zf-living-home .zf-living-hero h1 {
	line-height: 1.12;
	/* Never split a brand headline into bloom-ing or рас-цветает. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: balance;
}

html[lang='en'] .zf-living-home .zf-living-hero h1 {
	font-size: clamp(2.75rem, 4.65vw, 5rem);
}

html[lang='ru'] .zf-living-home .zf-living-hero h1 {
	font-size: clamp(2.65rem, 4.3vw, 4.65rem);
}

html[lang='ar'] .zf-living-home .zf-living-hero h1 {
	font-size: clamp(2.65rem, 4.8vw, 4.95rem);
}

/* Fredoka is self-hosted for Hebrew and Latin. Cyrillic/Arabic use a coherent
 * system stack instead of mixing Latin-only headings with fallback glyphs. */
html:is([lang='ru'], [lang='ar']) :is(h1, h2, h3, h4),
html:is([lang='ru'], [lang='ar'])
	:where(.zf-living-home, .zf-living-pdp)
	:is(h1, h2, h3) {
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Arial,
		sans-serif;
	letter-spacing: normal;
}

.zf-living-home .zf-living-category__name,
.zf-living-home .home-guide-card__copy h3,
.zf-living-home .home-contact-card h2,
.site-footer .footer-top :is(p, a, .footer-heading) {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.zf-living-home .zf-living-category__name {
	line-height: 1.35;
	text-align: center;
}

.zf-living-home .home-guide-card__copy,
.zf-living-home .home-contact-card,
.site-footer .footer-top > * {
	min-inline-size: 0;
}

.site-footer {
	text-align: start;
}

.site-footer .footer-contact__text {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

.site-footer .footer-contact__text bdi[dir='ltr'] {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 70rem) {
	.site-header .header-bottom {
		grid-template-columns: minmax(0, 1fr) max-content;
	}
	.site-header .header-bottom .main-nav {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.site-header .header-bottom .header-search {
		grid-column: 1;
		grid-row: 2;
	}
	.site-header .header-bottom .lang-switch {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (max-width: 60rem) {
	html[dir='ltr'] .zf-living-home .zf-living-hero__content {
		inline-size: min(60%, 600px);
	}
}

@media (max-width: 42rem) {
	.site-header .header-row {
		grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(
				44px,
				1fr
			);
		gap: 0.3rem;
	}
	.site-header .header-tools {
		gap: 0.2rem;
	}
	.site-header .header-date {
		display: none;
	}
	.site-header .brand {
		inline-size: max-content;
		max-inline-size: 100%;
		font-size: clamp(1.02rem, 4.5vw, 1.4rem);
	}
	.site-header .header-bottom {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
		margin-block-start: 0.65rem;
	}
	.site-header .header-bottom .header-search {
		grid-column: 1;
		grid-row: 1;
	}
	.site-header .header-bottom .main-nav {
		grid-column: 1;
		grid-row: 2;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.85rem;
		inline-size: 100%;
		padding-block: 0.15rem;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: thin;
	}
	.site-header .header-bottom .main-nav a {
		flex: none;
		white-space: nowrap;
	}
	.site-header .header-bottom .lang-switch {
		grid-column: 1;
		grid-row: 3;
		inline-size: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	html[dir='ltr'] .zf-living-home .zf-living-hero__content {
		inline-size: 100%;
		max-inline-size: 100%;
	}
	html[lang='en'] .zf-living-home .zf-living-hero h1,
	html[lang='ru'] .zf-living-home .zf-living-hero h1,
	html[lang='ar'] .zf-living-home .zf-living-hero h1 {
		font-size: clamp(2.4rem, 8.2vw, 3.5rem);
	}
	.zf-living-home .home-guide-card__copy h3 {
		font-size: clamp(1rem, 3.8vw, 1.125rem);
	}
}

@media (max-width: 28rem) {
	.site-header .site-menu__label,
	.site-header .cart-link > span:not([data-basket-count]) {
		display: none;
	}
	.site-header .site-menu > summary,
	.site-header .cart-link {
		justify-content: center;
		min-inline-size: 44px;
		min-block-size: 44px;
	}
	.site-header .header-tools {
		justify-self: end;
	}
}