/**
 * بخش «خصوصیات عطر» — نوار عنوان، کارت هرم رایحه و آکوردها، کارت فصل و زمان.
 *
 * فاصله‌ها و جهت‌ها منطقی (logical) هستند تا در RTL و LTR یکسان کار کنند.
 * چیدمان دو ستونی است و در عرض کم، ستون‌ها زیر هم می‌روند؛ هیچ بخشی
 * آکاردئون نمی‌شود و همه‌چیز همیشه دیده می‌شود.
 */

.mah24-traits {
	--wine: #4e1229;
	--wine2: #6d1c35;
	--pink: #f0c9d8;
	--ink: #2b2330;
	--muted: #9b929a;
	--line: #eeeaec;
	--rail: #ececec;
	--panel: #f7f5f6;
	--mah24-accent: #e8b4c8;

	box-sizing: border-box;
	width: 100%;
	margin: 0 0 32px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--panel);
	box-shadow: 0 14px 46px -24px rgba(78, 18, 41, 0.35);
	color: var(--ink);
	line-height: 1.9;
}

.mah24-traits *,
.mah24-traits *::before,
.mah24-traits *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------ نوار عنوان */

.mah24-traits__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px clamp(16px, 3vw, 26px);
	background: var(--wine);
	color: #fff;
}

.mah24-traits__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mah24-traits__band-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--pink);
}

.mah24-traits__title {
	margin: 0;
	color: #fff;
	font-size: clamp(16px, 2.6vw, 19px);
	font-weight: 800;
	line-height: 1.6;
}

.mah24-traits__badge {
	flex: 0 0 auto;
	padding: 5px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.mah24-traits__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(14px, 3vw, 20px);
}

/* --------------------------------------------------------- کارت‌های داخلی */

.mah24-traits__card {
	padding: clamp(14px, 2.6vw, 20px);
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 26px -22px rgba(43, 35, 48, 0.5);
}

.mah24-traits__card-head {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}

.mah24-traits__card-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--muted);
}

.mah24-traits__card-title {
	color: var(--ink);
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
}

/* دو ستون: آکوردها و هرم رایحه. */
.mah24-traits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 3vw, 28px);
	align-items: start;
}

.mah24-traits__grid--single {
	grid-template-columns: minmax(0, 1fr);
}

/* ----------------------------------------------------------- هرم رایحه */

.mah24-traits__pyramid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mah24-traits__tier {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 10px;
}

.mah24-traits__tier + .mah24-traits__tier {
	border-top: 1px dashed var(--line);
	padding-top: 12px;
}

/* برچسب طبقه: نوشته‌ی صورتی با خط چین ادامه‌دهنده. */
.mah24-traits__tier-cap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mah24-traits__tier-name {
	flex: 0 0 auto;
	padding: 3px 12px;
	border-radius: 999px;
	background: #fdeef4;
	color: #b8748f;
	font-size: 11.5px;
	font-weight: 800;
	white-space: nowrap;
}

.mah24-traits__tier-line {
	flex: 1;
	height: 1px;
	background: var(--line);
}

.mah24-traits__notes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	min-width: 0;
	padding-inline-start: 4px;
}

/* ترتیب: تصویر سمت آغاز (راست در RTL) و نام کنارش. */
.mah24-traits__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
}

.mah24-traits__note-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-size: 15px;
}

.mah24-traits__note-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* نُت بدون تصویر: حرف اول داخل دایره‌ی ته‌رنگ. */
.mah24-traits__note-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--mah24-tint, #f4efe6);
	color: var(--wine2);
	font-size: 14px;
	font-weight: 800;
}

.mah24-traits__note-name {
	overflow-wrap: anywhere;
}

/* نُت و فصلِ لینک‌دار: کلیک می‌برد به فروشگاهِ فیلترشده. */
a.mah24-traits__note,
a.mah24-traits__chip {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.18s, opacity 0.18s, box-shadow 0.18s;
}

a.mah24-traits__note:hover .mah24-traits__note-name,
a.mah24-traits__note:focus-visible .mah24-traits__note-name {
	text-decoration: underline;
}

a.mah24-traits__note:hover .mah24-traits__note-icon {
	transform: scale(1.06);
}

a.mah24-traits__chip:hover,
a.mah24-traits__chip:focus-visible {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------- آکوردها */

.mah24-traits__accords {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.mah24-traits__accord {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mah24-traits__accord-name {
	flex: 0 0 auto;
	width: 74px;
	font-size: 12.5px;
	font-weight: 800;
	text-align: start;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mah24-traits__accord-track {
	flex: 1;
	min-width: 0;
	height: 13px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--rail);
}

.mah24-traits__accord-fill {
	display: block;
	width: var(--mah24-w, 0%);
	height: 100%;
	border-radius: 999px;
	background: var(--mah24-c, #cccccc);
}

.mah24-traits__accord-pct {
	flex: 0 0 auto;
	width: 40px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	text-align: end;
}

/* ------------------------------------------------------ فصل و زمانِ مناسب */

.mah24-traits__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 3vw, 26px);
	align-items: start;
}

.mah24-traits__duo--single {
	grid-template-columns: minmax(0, 1fr);
}

.mah24-traits__duo-col--divided {
	border-inline-start: 1px solid var(--line);
	padding-inline-start: clamp(16px, 3vw, 26px);
}

/* فصل‌ها: دو ستونی، هر تراشه یک کارت پهن. */
.mah24-traits__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mah24-traits__chip {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 8px;
	padding: 13px 14px;
	border: 1px solid var(--mah24-bd, #ece7e9);
	border-radius: 14px;
	background: var(--mah24-bg, #f7f4f5);
	color: var(--mah24-fg, #b3a8ad);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

/* آیکن اختیاری تراشه: تصویر یا SVG که در تنظیمات انتخاب می‌شود. */
.mah24-traits__chip-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	object-fit: contain;
}

span.mah24-traits__chip-icon,
span.mah24-traits__bar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* SVGهای تک‌رنگ (بدون fill) رنگ متن را می‌گیرند؛ بقیه رنگ خودشان را نگه می‌دارند. */
.mah24-traits__chip-icon svg,
.mah24-traits__bar-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* زمان: هر ردیف یک برچسب رنگی و یک نوار شدت. */
.mah24-traits__bars {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mah24-traits__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--mah24-bd, #ece7e9);
	border-radius: 14px;
	background: var(--mah24-bg, #f4f4f5);
	color: var(--mah24-fg, #a9a2a6);
}

.mah24-traits__bar-label {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	flex-direction: row-reverse;
	gap: 7px;
	min-width: 58px;
	font-size: 13px;
	font-weight: 800;
}

.mah24-traits__bar-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	object-fit: contain;
}

.mah24-traits__bar-track {
	flex: 1;
	min-width: 0;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
}

.mah24-traits__bar-fill {
	display: block;
	width: var(--mah24-w, 0%);
	height: 100%;
	border-radius: 999px;
	background: currentColor;
}

/* ------------------------------------------------------------- زیرنویس */

.mah24-traits__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fbfafb;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.9;
	text-align: center;
}

.mah24-traits__hint-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- انیمیشن */

.mah24-traits--animate .mah24-traits__accord-fill,
.mah24-traits--animate .mah24-traits__bar-fill {
	width: 0;
	transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mah24-traits--animate.is-visible .mah24-traits__accord-fill,
.mah24-traits--animate.is-visible .mah24-traits__bar-fill {
	width: var(--mah24-w, 0%);
}

/* بدون جاوااسکریپت، نوارها باید مستقیماً پر دیده شوند. */
@media (scripting: none) {
	.mah24-traits--animate .mah24-traits__accord-fill,
	.mah24-traits--animate .mah24-traits__bar-fill {
		width: var(--mah24-w, 0%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mah24-traits--animate .mah24-traits__accord-fill,
	.mah24-traits--animate .mah24-traits__bar-fill {
		transition: none;
	}

	a.mah24-traits__note,
	a.mah24-traits__chip,
	a.mah24-traits__note:hover .mah24-traits__note-icon {
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------- واکنش‌گرا */

/*
 * در عرض کم، ستون‌ها زیر هم می‌روند: اول فصل‌ها و بعد زمان (مثل طرح موبایل).
 * هرم رایحه و آکوردها همچنان کنار هم می‌مانند، چون هر ردیفِ نُت با آکوردش
 * هم‌تراز است و همین خوانایی را بالا می‌برد.
 */
@media (max-width: 680px) {
	.mah24-traits {
		border-radius: 18px;
	}

	.mah24-traits__grid {
		gap: 12px;
	}

	.mah24-traits__notes {
		gap: 10px;
	}

	.mah24-traits__note {
		font-size: 12.5px;
	}

	.mah24-traits__note-icon {
		width: 36px;
		height: 36px;
	}

	.mah24-traits__accord {
		gap: 8px;
	}

	.mah24-traits__accord-name {
		width: 58px;
		font-size: 11.5px;
	}

	.mah24-traits__accord-track {
		height: 11px;
	}

	.mah24-traits__duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.mah24-traits__duo-col--seasons {
		order: 1;
	}

	.mah24-traits__duo-col--daytime {
		order: 2;
	}

	.mah24-traits__duo-col--divided {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-top: 1px solid var(--line);
		padding-top: 18px;
	}
}

@media (max-width: 420px) {
	.mah24-traits__accord-pct {
		display: none;
	}

	.mah24-traits__chip {
		padding: 11px 10px;
		font-size: 12.5px;
	}
}