/* Echo Perfume — Components */

/* ---------- Buttons ---------- */
.btn {
	--btn-fg: var(--color-inverse-text);
	--btn-bg: var(--color-black);
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1px solid var(--btn-bg);
	border-radius: var(--radius-pill);
	padding: 0.95em 1.75em;
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-fluid), background-color var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid), border-color var(--dur-fast) var(--ease-fluid);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }

.btn--gold { --btn-bg: var(--color-gold); --btn-fg: var(--color-black); border-color: var(--color-gold); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--color-text); border-color: var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-text); border-color: transparent; padding-inline: 0.25em; }

.btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	transition: transform var(--dur-fast) var(--ease-fluid);
}
.btn--gold .btn__icon, .btn--outline .btn__icon { background: var(--color-gold-soft); }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }

/* "Ask the AI Consultant" sparkle, on the homepage hero — a continuous slow
   spin to draw the eye toward it. Paused on hover so it doesn't fight the
   existing hover transform above (both animate `transform`). */
.btn__icon--sparkle { animation: sparkleSpin 3s linear infinite; }
.btn:hover .btn__icon--sparkle { animation-play-state: paused; }
@keyframes sparkleSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: 0.65em 1.2em; font-size: var(--fs-micro); }

/* ---------- Icon buttons (nav utilities) ---------- */
.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-fluid), border-color var(--dur-fast) var(--ease-fluid);
}
.icon-btn:hover { background: var(--color-gold-soft); border-color: var(--color-border); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.icon-btn__badge {
	position: absolute;
	top: 2px; right: 2px;
	min-width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--color-gold);
	color: var(--color-black);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 600;
}

/* ---------- Hero layout ----------
   align-items: start (not the grid default of stretch) so the image column
   is never forced to match the text column's height — Arabic and English
   copy don't wrap to the same number of lines, and stretching the image to
   whatever height the text happens to need made the photo change size and
   crop every time the language switched. Each column now sizes itself
   independently: text to its own content, image via its own aspect ratio. */
.hero__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-md);
	align-items: start;
	padding-block: var(--space-sm) var(--space-xl);
}
@media (max-width: 880px) {
	.hero__grid { grid-template-columns: 1fr; }
	/* On mobile the collection thumbnails move below the headline/subtext
	   and above the CTA buttons, instead of leading the section like on
	   desktop — reordered visually via flex `order`, DOM stays unchanged. */
	.hero-anim { display: flex; flex-direction: column; }
	.hero-anim .eyebrow { order: 1; }
	.hero-anim h1 { order: 2; }
	.hero-anim p { order: 3; }
	.hero-anim .hero-collections { order: 4; margin-top: var(--space-sm); }
	.hero-anim .hero-cta { order: 5; }
}

/* ---------- Hero collection strip (For Him / For Her / Unisex) ----------
   Fixed-size thumbnails (not flex-grow) so all three always render at the
   same dimensions regardless of column width, clustered to the left. */
.hero-collections { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.hero-collections__item {
	position: relative;
	flex: 0 0 160px;
	width: 160px;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}
.hero-collections__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-fluid);
}
.hero-collections__item:hover img { transform: scale(1.08); }
.hero-collections__label {
	position: absolute; inset: auto 0 0 0;
	padding: 0.6em 0.7em;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: #fff;
	background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
}
@media (max-width: 880px) {
	.hero-collections__item { flex-basis: 110px; width: 110px; }
}

/* ---------- Hero image frame: floating badges over the hero photo ---------- */
.hero-image-frame { display: flex; gap: var(--space-sm); width: 100%; }
.hero-image-frame .bezel { flex: 1; min-width: 0; }

/* Sized from the column's own width via aspect-ratio — deliberately NOT
   height: 100% of a stretched parent, so it stays the exact same size in
   both languages regardless of how many lines the headline/copy wraps to.
   The max-height keeps it from towering over the text column on wide
   screens; object-fit: cover still fills whatever box results, no
   letterboxing either way. */
.hero-bezel-inner { width: 100%; aspect-ratio: 4 / 5; max-height: 620px; }
.hero-bezel-inner img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
	position: absolute;
	z-index: 2;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-black);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: 0.5em 1em;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
}
:root[data-theme="dark"] .hero-badge { background: rgba(20, 18, 15, 0.88); color: var(--color-inverse-text); }
.hero-badge--top { top: var(--space-md); right: var(--space-md); }
.hero-badge--mid { bottom: var(--space-xl); left: var(--space-md); }

/* ---------- Double-bezel card system ---------- */
.bezel {
	background: var(--color-gold-soft);
	border-radius: calc(var(--radius-lg) + 6px);
	padding: 6px;
}
.bezel__inner {
	position: relative;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

/* ---------- Product card ---------- */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur-med) var(--ease-fluid), box-shadow var(--dur-med) var(--ease-fluid), border-color var(--dur-med) var(--ease-fluid);
}
.product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-raised);
	border-color: var(--color-gold);
}
.product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.product-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-fluid);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	background: var(--color-black);
	color: var(--color-inverse-text);
	padding: 0.4em 0.85em;
	border-radius: var(--radius-pill);
}

/* Wishlist heart toggle — floats top-right on the card image (Sale badge
   takes top-left). Icon-only here; see .wishlist-toggle--single in
   woocommerce.css for the labeled version on the single product page. */
.product-card__wishlist { position: absolute; top: 12px; right: 12px; z-index: 2; }
.wishlist-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-black);
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-fluid), background-color var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid);
}
.wishlist-toggle:hover { transform: scale(1.08); }
.wishlist-toggle__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill var(--dur-fast) var(--ease-fluid); }
.wishlist-toggle.is-active { color: var(--color-gold); }
.wishlist-toggle.is-active .wishlist-toggle__icon { fill: var(--color-gold); stroke: var(--color-gold); }
:root[data-theme="dark"] .wishlist-toggle:not(.is-active) {
	background: rgba(10, 10, 9, 0.7);
	color: var(--color-inverse-text);
}
:root[data-theme="dark"] .wishlist-toggle.is-active { background: rgba(10, 10, 9, 0.7); color: var(--color-gold); }

.product-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4em; flex: 1; }
.product-card__brand { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-gold); }
.product-card__name { font-family: var(--font-display); font-size: 1.35rem; margin: 0; }
.product-card__meta { display: flex; flex-wrap: wrap; gap: 0.4em; margin-block: 0.3em; }
.tag {
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.3em 0.7em;
}
.product-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.6em; }
.product-card .add_to_cart_button { margin-top: 0.9em; text-align: center; }
.product-card .add_to_cart_button.added::after { content: " ✓"; }
.product-card .added_to_cart { display: none; }
.product-card__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text); }
.product-card__price del { color: var(--color-text-muted); font-size: 0.85em; margin-right: 0.4em; }
.product-card__rating { display: flex; align-items: center; gap: 0.3em; font-size: var(--fs-small); color: var(--color-gold); }
@media (max-width: 640px) {
	.product-card__body { padding: var(--space-sm); gap: 0.25em; }
	.product-card__name { font-size: 1.05rem; }
	.product-card__price { font-size: 1rem; }
	.product-card .btn { padding: 0.7em 1.1em; font-size: var(--fs-micro); }
}

/* ---------- Grid utilities ---------- */
.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
/* Text-heavy grids (testimonials, etc.) stack to one column on mobile —
   only product grids get the narrower 2-up treatment, via .product-grid. */
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: var(--space-md); }
	.product-grid.grid--2, .product-grid.grid--3, .product-grid.grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
}

/* Homepage Best Sellers: only the first 4 show until "View More" is clicked. */
.bestsellers-more { display: none; }
.bestsellers-more.is-visible { display: flex; }
.bestsellers-view-more-wrap { display: flex; justify-content: center; margin-top: var(--space-xl); }
.bestsellers-view-more-wrap.is-hidden { display: none; }

/* ---------- Testimonial ---------- */
.testimonial {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.testimonial__stars { color: var(--color-gold); letter-spacing: 0.2em; }
.testimonial__quote { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-text); }
.testimonial__author { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: var(--space-md); }
.field label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.field input, .field textarea, .field select {
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: 0.9em 1em;
	color: var(--color-text);
	transition: border-color var(--dur-fast) var(--ease-fluid), box-shadow var(--dur-fast) var(--ease-fluid);
}
.field input:focus, .field textarea:focus, .field select:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px var(--color-gold-soft);
}

/* Newsletter pill form */
.newsletter-form { display: flex; gap: 0.5em; max-width: 460px; }
.newsletter-form input {
	flex: 1;
	background: transparent;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	padding: 0.9em 1.4em;
	color: inherit;
}
.newsletter-form input:focus { outline: none; border-color: var(--color-gold); }

/* ---------- Star rating bar ---------- */
.rating-bar { display: flex; align-items: center; gap: 0.5em; }
.rating-bar__stars { color: var(--color-gold); letter-spacing: 0.15em; }

/* ---------- Meter (longevity / projection) ---------- */
.meter { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: var(--space-sm); }
.meter__label { display: flex; justify-content: space-between; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.meter__track { display: flex; gap: 4px; }
.meter__seg { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border); }
.meter__seg.is-filled { background: var(--color-gold); }

/* ---------- Notes pyramid ---------- */
.notes-pyramid { display: grid; gap: var(--space-md); }
.notes-pyramid__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-md); align-items: baseline; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-sm); }
.notes-pyramid__label { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-gold); }
.notes-pyramid__values { color: var(--color-text); }

/* ---------- Badges / pills ---------- */
.pill { display: inline-block; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 0.5em 1.1em; font-size: var(--fs-small); transition: all var(--dur-fast) var(--ease-fluid); cursor: pointer; background: transparent; color: var(--color-text); }
.pill:hover { border-color: var(--color-gold); }
.pill.is-active { background: var(--color-black); border-color: var(--color-black); color: var(--color-inverse-text); }
:root[data-theme="dark"] .pill.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: var(--space-2xl) var(--space-md); }
.empty-state h3 { margin-bottom: var(--space-sm); }