/*
 * Otour brand layer.
 *
 * Only token values and brand-specific touches; structure comes from the
 * Egstore theme. Store-wide colours (primary, text, price, card buttons) are
 * Customizer settings. The homepage uses the theme's light palette; only its
 * hero and the features band (after the categories) keep the demo's dark
 * look.
 *
 * Palette: midnight #192c27, surface #1e352f, elevated #243e37,
 * pearl #f2f7f6, frost #e6f0ee, slate #365951, emerald #007f5f,
 * botanical #55a630.
 */

/* Header menu as in the Otour demo, on every page: text links without a
   box and one underline that slides to the item under the pointer (or
   keyboard focus) and back to the current page's item (assets/store.js).
   Featured items ("عنصر مميز") keep their star and colour, no underline of
   their own. */
.eg-header__nav {
	position: relative;
}

.eg-header__menu {
	gap: 2.2rem;
}

.eg-header__menu > li > a,
.eg-header__menu > li > a:hover,
.eg-header__menu > li.current-menu-item > a,
.eg-header__menu > li.current-menu-ancestor > a,
.eg-header__menu > li.is-featured > a,
.eg-header__menu > li.is-featured > a:hover,
.eg-header__menu > li.is-featured.current-menu-item > a,
.eg-header__menu > li.is-featured.current-menu-ancestor > a {
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.eg-header__menu > li.is-featured > a,
.eg-header__menu > li.is-featured > a:hover,
.eg-header__menu > li.is-featured.current-menu-item > a,
.eg-header__menu > li.is-featured.current-menu-ancestor > a {
	color: var(--eg-color-primary);
}

/* A link to a section of the page ("عوالم العطور" → /#catalogue) is marked
   current by WordPress on that page; only the page's own item is. */
.eg-header__menu > li.current-menu-item:not(.is-featured) > a[href*="#"] {
	color: var(--eg-color-muted);
}

.eg-header__menu > li.current-menu-item:not(.is-featured) > a[href*="#"]:hover {
	color: var(--eg-color-ink);
}

/* The sliding underline. store.js sets its width and offset. */
.otour-menu-indicator {
	position: absolute;
	inset-block-end: 0.45rem;
	/* Physical left: store.js measures from the nav's left edge. */
	left: 0;
	inline-size: var(--otour-indicator-width, 0px);
	block-size: 2px;
	background: var(--eg-color-primary);
	opacity: 0;
	pointer-events: none;
	transform: translateX(var(--otour-indicator-x, 0px));
}

.otour-menu-indicator.is-shown {
	opacity: 1;
}

/* No slide on the first placement; animated from then on. */
.otour-menu-indicator.is-ready {
	transition:
		transform var(--eg-duration-base, 200ms) var(--eg-ease-standard, ease),
		inline-size var(--eg-duration-base, 200ms) var(--eg-ease-standard, ease),
		opacity var(--eg-duration-fast, 150ms) ease;
}

@media (prefers-reduced-motion: reduce) {
	.otour-menu-indicator.is-ready {
		transition: none;
	}
}

/* "العطور الأصلية والإصدارات المميزة" on one line: the theme caps section
   titles at 18ch. Down to 24px on narrow phones so it still fits at 360px;
   narrower screens wrap rather than overflow. */
#new-arrivals .eg-product-collection__heading h2 {
	max-inline-size: none;
	font-size: clamp(1.5rem, 5vw, 3.5rem);
}

/* Homepage section headings (title, description and the button opposite):
   the button in the theme's button colours (Customizer primary and its
   hover), and a divider under the heading, before the products, in the
   theme's border colour and opacity ("شفافية الحدود"). */
body.home .eg-product-collection__header,
body.home .eg-category-showcase__header {
	padding-block-end: var(--eg-space-5);
	border-block-end: 1px solid var(--eg-color-border);
}

body.home .eg-product-collection__action,
body.home .eg-category-showcase__toggle {
	border-color: transparent;
	color: var(--eg-color-inverse);
	background: var(--eg-color-primary);
}

body.home .eg-product-collection__action:hover,
body.home .eg-category-showcase__toggle:hover {
	border-color: transparent;
	color: var(--eg-color-inverse);
	background: var(--eg-color-primary-dark);
}

/* Phones: heading and button side by side (two columns), the button small.
   The title always holds one line, at one size for every section that
   fits the longest title ("العطور الأصلية والإصدارات المميزة" beside a ~75px
   button at 360px; the arrow icon is dropped there); the description may
   take two lines. */
@media (max-width: 47.99rem) {
	body.home .eg-product-collection__header,
	body.home .eg-category-showcase__header {
		flex-direction: row;
		align-items: end;
		gap: var(--eg-space-3);
	}

	body.home .eg-product-collection__heading,
	body.home .eg-category-showcase__heading {
		flex: 1;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--eg-space-1);
		min-inline-size: 0;
	}

	body.home .eg-product-collection__heading h2,
	body.home .eg-category-showcase__heading h2,
	body.home #new-arrivals .eg-product-collection__heading h2 {
		max-inline-size: none;
		overflow: hidden;
		font-size: clamp(1rem, 4.7vw, 1.5rem);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.home .eg-product-collection__heading p,
	body.home .eg-category-showcase__heading p {
		display: -webkit-box;
		overflow: hidden;
		font-size: var(--eg-text-sm);
		line-height: 1.6;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	body.home .eg-product-collection__action,
	body.home .eg-category-showcase__toggle {
		gap: var(--eg-space-1);
		min-block-size: 2rem;
		padding: var(--eg-space-1) var(--eg-space-3);
		font-size: var(--eg-text-xs);
	}

	body.home .eg-product-collection__action-icon {
		display: none;
	}
}

/* Categories ("عوالم النفحات", #catalogue) as in the demo: a full-width band
   that loops on its own and stops while pointed at, without arrows. Cards
   enter and leave at the screen edges. store.js adds .is-otour-marquee;
   without it (no script, reduced motion) the band scrolls by hand. */
#catalogue {
	overflow-x: clip;
}

#catalogue .eg-category-showcase__controls {
	display: none !important;
}

#catalogue .eg-category-showcase__track {
	margin-inline: calc(50% - 50vw);
	padding-inline: 1rem;
}

#catalogue.is-otour-marquee .eg-category-showcase__track {
	inline-size: max-content;
	padding-inline: 0;
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
	/* A CSS animation runs on the compositor: no script per frame. store.js
	   sets the distance of one set of cards and the matching duration. */
	animation: otour-marquee var(--otour-marquee-duration, 60s) linear infinite;
	animation-play-state: paused;
}

/* Runs only while on screen, and stops while pointed at or focused. */
#catalogue.is-otour-marquee.is-in-view .eg-category-showcase__track {
	animation-play-state: running;
}

#catalogue.is-otour-marquee.is-in-view .eg-category-showcase__track:hover,
#catalogue.is-otour-marquee.is-in-view .eg-category-showcase__track:focus-within {
	animation-play-state: paused;
}

/* "عرض الكل" (the theme's .is-expanded): the band stops and becomes the
   theme's grid; the looping copies step aside. */
#catalogue.is-expanded .eg-category-showcase__track {
	inline-size: auto;
	margin-inline: 0;
	padding-inline: 0;
	animation: none;
	transform: none;
}

#catalogue.is-expanded .eg-category-showcase__item[inert] {
	display: none;
}

@keyframes otour-marquee {
	to {
		transform: translate3d(var(--otour-marquee-shift, 0px), 0, 0);
	}
}

/* Homepage: the theme's light palette, like every other page. Only the hero
   and the features band keep the demo's dark "midnight forest" look. */
body.home .eg-hero,
body.home .eg-features {
	--eg-color-canvas: #192c27;
	--eg-color-surface: #1e352f;
	--eg-color-surface-hover: #243e37;
	--eg-color-ink: #f2f7f6;
	--eg-color-muted: #a9c0ba;
	--eg-color-line: rgb(230 240 238 / 0.12);
	/* Aliases resolve where they are declared (:root), so restate them here. */
	--eg-color-text: var(--eg-color-ink);
	--eg-color-text-muted: var(--eg-color-muted);
	/* Borders: frost at the Customizer's border opacity ("شفافية الحدود",
	   12% at the 30% default). */
	--eg-color-border: color-mix(in oklch, rgb(230 240 238 / 0.4) var(--eg-border-opacity, 30%), transparent);
	/* Inherited text colour is computed on <body>; restate it for the scope. */
	color: var(--eg-color-ink);
}

/* Hero: text side (right in RTL) darkened for legibility. */
body.home .eg-hero {
	--eg-hero-min-height: clamp(30rem, 82vh, 48rem);
	--eg-hero-overlay: linear-gradient(to left, rgb(25 44 39 / 0.94), rgb(25 44 39 / 0.6) 55%, rgb(25 44 39 / 0.2));
	--eg-hero-accent: #007f5f;
	--eg-hero-accent-text: #f2f7f6;
}

[dir="ltr"] body.home .eg-hero {
	--eg-hero-overlay: linear-gradient(to right, rgb(25 44 39 / 0.94), rgb(25 44 39 / 0.6) 55%, rgb(25 44 39 / 0.2));
}

/* Phones: the text is centred (mobile_align), so the whole cover darkens
   evenly instead of one side. */
@media (max-width: 47.99rem) {
	body.home .eg-hero,
	[dir="ltr"] body.home .eg-hero {
		--eg-hero-overlay: linear-gradient(to top, rgb(25 44 39 / 0.94), rgb(25 44 39 / 0.72));
	}
}

body.home .eg-hero__eyebrow {
	color: #55a630;
}

/* Desktop: the title on one line. Its room widens; the description, search
   and suggestions keep the theme's width. */
@media (min-width: 64rem) {
	body.home .eg-hero__content {
		max-inline-size: 64rem;
	}

	body.home .eg-hero__title {
		white-space: nowrap;
	}

	body.home .eg-hero__search,
	body.home .eg-hero__suggestions {
		max-inline-size: 40rem;
	}
}

/* Features band (after the categories). */
body.home .eg-features {
	--eg-features-bg: #10201b;
	--eg-features-icon-bg: #1e352f;
	--eg-features-icon: #55a630;
	border-block: 1px solid var(--eg-color-border);
}

/* Phones: two features a row instead of one. */
@media (max-width: 47.99rem) {
	body.home .eg-features__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--eg-space-6) var(--eg-space-4);
	}

	body.home .eg-features__item-title {
		font-size: var(--eg-text-base);
	}
}