:root {
	--teiser-ink: #080909;
	--teiser-graphite: #141516;
	--teiser-stone: #222324;
	--teiser-ivory: #f1eee7;
	--teiser-muted: #a6a39b;
	--teiser-champagne: #c7ad7d;
	--font-body-family: "DM Sans", sans-serif;
	--font-heading-family: "Italiana", Georgia, serif;
}

html[lang^='ar'] {
	--font-body-family: "Noto Kufi Arabic", sans-serif;
	--font-heading-family: "Noto Kufi Arabic", sans-serif;
	--font-body-weight: 400;
	--font-heading-weight: 500;
}

.color-background-1 {
	--color-background: 8, 9, 9;
	--gradient-background: #080909;
	--color-foreground: 241, 238, 231;
	--color-background-contrast: 57, 58, 58;
	--color-button: 199, 173, 125;
	--color-button-text: 8, 9, 9;
	--color-secondary-button: 8, 9, 9;
	--color-secondary-button-text: 241, 238, 231;
	--color-link: 241, 238, 231;
}

.color-background-2,
.color-accent-1 {
	--color-background: 20, 21, 22;
	--gradient-background: #141516;
	--color-foreground: 241, 238, 231;
	--color-background-contrast: 63, 64, 64;
	--color-button: 199, 173, 125;
	--color-button-text: 8, 9, 9;
	--color-secondary-button: 20, 21, 22;
	--color-secondary-button-text: 241, 238, 231;
	--color-link: 241, 238, 231;
}

.color-inverse {
	--color-background: 241, 238, 231;
	--gradient-background: #f1eee7;
	--color-foreground: 8, 9, 9;
	--color-button: 8, 9, 9;
	--color-button-text: 241, 238, 231;
	--color-secondary-button: 241, 238, 231;
	--color-secondary-button-text: 8, 9, 9;
	--color-link: 8, 9, 9;
}

.color-accent-2 {
	--color-background: 34, 35, 36;
	--gradient-background: #222324;
	--color-foreground: 241, 238, 231;
	--color-button: 199, 173, 125;
	--color-button-text: 8, 9, 9;
	--color-link: 241, 238, 231;
}

body {
	color: var(--teiser-ivory);
	background: var(--teiser-ink);
	letter-spacing: 0;
}

.section-header {
	z-index: 20;
}

.header-wrapper,
.utility-bar {
	color: var(--teiser-ivory);
	background: var(--teiser-ink);
}

.header-wrapper {
	transition: background-color 220ms ease, border-color 220ms ease;
}

.scrolled-past-header .header-wrapper {
	background-color: rgba(8, 9, 9, 0.97);
	backdrop-filter: blur(8px);
}

.header-wrapper--border-bottom,
.utility-bar--bottom-border {
	border-color: rgba(241, 238, 231, 0.13);
}

.header,
.header__heading-link,
.header__icon,
.header__menu-item,
.header__active-menu-item {
	color: var(--teiser-ivory);
}

.header {
	min-height: 7.2rem;
	gap: 1.6rem;
}

.header__heading {
	margin: 0;
}

.header__menu-item {
	font-size: 1.25rem;
	font-weight: 500;
}

.header__icons {
	gap: 0.4rem;
}

.header__icon {
	width: 4.4rem;
	height: 4.4rem;
}

.header__icon .icon {
	width: 2rem;
	height: 2rem;
}

@media screen and (min-width: 990px) {
	.header {
		grid-template-areas: "icons heading menu";
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.header > .header__heading,
	.header > .header__heading-link {
		grid-area: heading;
		justify-self: center;
		margin: 0;
		text-align: center;
	}

	.header .header__heading-link {
		margin: 0;
	}

	.header .header__icons {
		grid-area: icons;
		justify-self: start;
		padding-right: 0;
		padding-left: 0.8rem;
	}

	.header header-drawer {
		grid-area: menu;
		justify-self: end;
		margin: 0 0.8rem 0 0;
	}
}

.teiser-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.8rem;
	color: var(--teiser-ivory);
	text-decoration: none;
}

.teiser-wordmark__name {
	font-family: var(--font-heading-family);
	font-size: 3.2rem;
	line-height: 1;
}

.teiser-wordmark__descriptor {
	color: var(--teiser-champagne);
	font-size: 0.9rem;
	font-weight: 600;
}

.utility-bar {
	min-height: 3.2rem;
	font-size: 1.1rem;
}

.announcement-bar__message {
	margin: 0;
	padding-right: 3rem;
	color: var(--teiser-muted);
	font-family: var(--font-body-family);
	font-size: 1.05rem;
	font-weight: 500;
}

.header-wrapper .header__icon:hover,
.header-wrapper .header__menu-item:hover,
.footer a:hover {
	color: var(--teiser-champagne);
}

.footer {
	margin-top: 0;
	border-top: 1px solid rgba(241, 238, 231, 0.16);
	color: var(--teiser-ivory);
	background: var(--teiser-ink);
}

.footer__content-top {
	padding-top: 7rem;
	padding-bottom: 6rem;
}

.footer__content-bottom {
	border-top-color: rgba(241, 238, 231, 0.14);
}

.footer__blocks-wrapper {
	align-items: start;
}

.footer__block--brand {
	max-width: 34rem;
	margin: 0;
	padding-right: 3rem;
}

.footer__brand-name {
	margin: 0 0 1rem;
	color: var(--teiser-ivory);
	font-family: var(--font-heading-family);
	font-size: 3.8rem;
	font-weight: 400;
}

.footer__brand-note {
	max-width: 30rem;
	color: var(--teiser-muted);
	font-size: 1.35rem;
	line-height: 1.7;
}

.footer__block--brand .link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	text-decoration-color: rgba(199, 173, 125, 0.55);
	text-underline-offset: 0.5rem;
}

.footer-block__heading {
	color: var(--teiser-ivory);
	font-family: var(--font-body-family);
	font-size: 1.2rem;
	font-weight: 600;
}

.footer a,
.footer__copyright,
.footer__copyright a {
	color: var(--teiser-muted);
}

.footer .list-payment__item .icon {
	filter: grayscale(1);
}

.footer__content-bottom-wrapper {
	gap: 2rem;
}

.focus-inset:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--teiser-champagne);
	outline-offset: 3px;
}

@media screen and (max-width: 749px) {
	.header {
		min-height: 6.4rem;
		gap: 0.5rem;
		padding-right: 1.6rem;
		padding-left: 1.6rem;
	}

	.header__menu-item {
		font-size: 1.15rem;
	}

	.teiser-wordmark {
		gap: 0.5rem;
	}

	.teiser-wordmark__name {
		font-size: 2.7rem;
	}

	.footer__content-top {
		padding-top: 4.5rem;
		padding-bottom: 3.5rem;
	}

	.footer__block--brand {
		margin-bottom: 3.5rem;
		padding-right: 0;
	}

	.footer__content-bottom-wrapper {
		gap: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-wrapper {
		transition: none;
	}
}
/* TEISER UAE — Arabic-first storefront */
html[lang="ar"] body, html[dir="rtl"] body { direction: rtl; }
html[lang="ar"] .teiser-hero__content, html[dir="rtl"] .teiser-hero__content { text-align: right; }
html[lang="ar"] .teiser-craftsmanship__content, html[dir="rtl"] .teiser-craftsmanship__content { text-align: right; }
