/* Melora — homepage-only styles (loaded only on the front page). */

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

.announcement-bar {
	background: var(--wp--preset--color--mist);
	padding: 10px var(--wp--preset--spacing--lg);
}
.announcement-bar p {
	margin: 0;
	color: var(--wp--preset--color--forest);
}
.announcement-bar__tag {
	background: none;
	padding: 0;
	color: var(--wp--preset--color--energy-deep);
	font-weight: 700;
}

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

.home-hero {
	padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
}
.home-hero h1 {
	/* Hero H1: the one H1 on the site allowed to run large — ~28px on
	   mobile, capped at 42px on desktop. */
	font-size: clamp(28px, 23px + 2vw, 42px);
	line-height: 1.25;
}
.home-hero__grid {
	gap: var(--wp--preset--spacing--3xl);
	align-items: center;
}
.home-hero__copy {
	flex: 1 1 480px;
	min-width: 280px;
}
.home-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--leaf);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
.home-hero__lead {
	max-width: 520px;
	margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--muted);
}
.home-hero__panel {
	flex: 0 1 300px;
	min-width: 220px;
	max-width: 320px;
	padding: var(--wp--preset--spacing--xl);
	text-align: center;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--forest);
	border-radius: var(--wp--custom--radius--organic);
}
.home-hero__panel-logo img {
	display: inline-block;
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) var(--wp--custom--radius--md) var(--wp--custom--radius--sm);
	object-fit: cover;
}
.home-hero__panel-word {
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--yekan-bakh);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.06em;
}
.home-hero__panel-sub {
	margin: 4px 0 0;
	color: rgba(252, 253, 252, 0.6);
	font-size: 11px;
	letter-spacing: 0.2em;
}

/* ---------- Section rhythm shared by dynamic sections ---------- */

.melora-dynamic-section {
	padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
}
.home-categories__head,
.home-products__head {
	margin-bottom: var(--wp--preset--spacing--lg);
}
.home-products__subhead {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
}

/* ---------- Product carousels (پرفروش‌ها / تازه‌ترین‌ها) ----------
   Real prev/next carousel, not a scroll area: .melora-carousel__viewport
   clips overflow and .melora-carousel__track is moved with transform, so
   there is nothing for a finger or mouse drag to scroll — no native
   swipe/drag exists to misbehave. Buttons step by one full "page" (the
   number of currently visible columns) and wrap at both ends without
   cloning any card — going past the last page jumps the index back to 0.
   The track runs its own isolated left-to-right flow (direction: ltr)
   regardless of the page's RTL direction, which is what makes the index
   math unambiguous; the buttons stay positioned by logical (RTL-aware)
   properties, so "prev" still reads naturally on the right and "next" on
   the left, matching every other RTL carousel convention. */

.melora-carousel {
	position: relative;
}
.melora-carousel__viewport {
	overflow: hidden;
	direction: ltr;
}
.melora-carousel__track.wc-block-product-template,
.melora-carousel__track .wc-block-product-template {
	display: flex !important; /* overrides the shared .melora-product-grid
		display:grid rule — a carousel track is one row, not a wrapping grid. */
	flex-wrap: nowrap;
	direction: ltr;
	transition: transform 0.35s ease;
}
.melora-carousel__track .wc-block-product-template > li.wc-block-product {
	flex: 0 0 calc((100% - (var(--melora-grid-cols) - 1) * var(--wp--preset--spacing--lg)) / var(--melora-grid-cols));
	width: auto !important; /* overrides the shared 100%-of-grid-cell rule */
}
.melora-carousel__button {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--forest);
	font-size: 18px;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(18, 61, 46, 0.14);
}
.melora-carousel__button:hover {
	background: var(--wp--preset--color--mist);
	border-color: var(--wp--preset--color--leaf);
}
.melora-carousel__button--prev {
	inset-inline-start: -14px;
}
.melora-carousel__button--next {
	inset-inline-end: -14px;
}
@media (max-width: 768px) {
	.melora-carousel__button--prev {
		inset-inline-start: 2px;
	}
	.melora-carousel__button--next {
		inset-inline-end: 2px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.melora-carousel__track.wc-block-product-template,
	.melora-carousel__track .wc-block-product-template {
		transition: none;
	}
}

/* ---------- Category cards ---------- */

.home-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.home-categories__grid li {
	margin: 0;
}
.home-categories__grid a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.home-categories__grid a:hover {
	border-color: var(--wp--preset--color--leaf);
	transform: translateY(-2px);
}
.home-categories__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--mist);
}
.home-categories__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-categories__placeholder {
	font-family: var(--wp--preset--font-family--yekan-bakh);
	font-size: 28px;
	color: var(--wp--preset--color--leaf);
}
.home-categories__name {
	display: block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ---------- Promo cards (two small, editable, non-committal) ---------- */

.home-promos {
	padding: var(--wp--preset--spacing--xl) 0;
}
.home-promos__grid {
	gap: var(--wp--preset--spacing--lg);
}
.home-promo-card {
	height: 100%;
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--md);
}
.home-promo-card--forest {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--forest);
}
.home-promo-card--soft {
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
}
.home-promo-card__tag {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding: 4px 14px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.home-promo-card--forest .home-promo-card__tag {
	background: var(--wp--preset--color--energy-deep);
	color: var(--wp--preset--color--paper);
}
.home-promo-card--soft .home-promo-card__tag {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--forest);
}
.home-promo-card__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.home-promo-card--forest .home-promo-card__title {
	color: var(--wp--preset--color--paper);
}
.home-promo-card__text {
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.home-promo-card--forest .home-promo-card__text {
	color: rgba(252, 253, 252, 0.78);
}
.home-promo-card--soft .home-promo-card__text {
	color: var(--wp--preset--color--muted);
}
.home-promo-card__link a {
	font-weight: 500;
}
.home-promo-card--forest .home-promo-card__link a {
	color: var(--wp--preset--color--paper);
}

/* ---------- Purchase-benefit bar (only the two verified shipping facts) ---------- */

.home-benefits {
	padding: var(--wp--preset--spacing--lg) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.home-benefits__grid {
	gap: var(--wp--preset--spacing--md);
}
.home-benefits__item {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.home-benefits__title {
	margin: 0;
	color: var(--wp--preset--color--forest);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.home-benefits__title::before {
	content: "✓";
	margin-inline-end: 6px;
	color: var(--wp--preset--color--leaf);
	font-weight: 700;
}

/* ---------- Why Melora ---------- */

.home-why {
	padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
	text-align: center;
}
.home-why__grid {
	margin-top: var(--wp--preset--spacing--lg);
	gap: var(--wp--preset--spacing--lg);
}
.home-why__mark {
	margin: 0 0 var(--wp--preset--spacing--2xs);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--yekan-bakh);
}

/* ---------- Brand intro ---------- */

.home-about {
	padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
	text-align: center;
}
.home-about__rule {
	width: 48px;
	margin: var(--wp--preset--spacing--sm) auto var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--gold);
	opacity: 1;
}
.home-about__text {
	color: var(--wp--preset--color--muted);
	line-height: 1.9;
}

/* ---------- Instagram CTA ---------- */

.home-instagram {
	padding: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
	text-align: center;
}
.home-instagram__text {
	margin: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.home-categories__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.home-hero__grid {
		flex-direction: column;
	}
	.home-hero__panel {
		max-width: none;
		width: 100%;
	}
	.home-why__grid {
		flex-wrap: wrap;
	}
	.home-why__grid .wp-block-column {
		flex-basis: 45% !important;
	}
}

@media (max-width: 480px) {
	.home-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-why__grid .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-categories__grid a {
		transition: none;
	}
}