/*
 * Affichage de la pyramide olfactive / accords / parfumeur sur la fiche
 * produit du site (thème Woodmart). Reprend la présentation visuelle de
 * Fragrantica (barres d'accords colorées à largeur dégressive, pastilles de
 * notes avec icône) dans une carte au style plus soigné.
 */

.pw-frag-summary {
	margin-block: 20px;
	padding-block: 16px;
	border-block: 1px solid #e8e8e8;
}

.pw-frag-summary__brand,
.pw-frag-summary__facts,
.pw-frag-summary__accords {
	display: flex;
	align-items: center;
}

.pw-frag-summary__brand {
	gap: 12px;
	margin-block-end: 14px;
	color: #242424;
	text-decoration: none;
}

.pw-frag-summary__brand img {
	width: 48px;
	height: 38px;
	object-fit: contain;
}

.pw-frag-summary small {
	display: block;
	margin-block-end: 2px;
	color: #777;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

.pw-frag-summary__facts {
	gap: 24px;
	margin-block-end: 14px;
	font-size: 13px;
}

.pw-frag-summary__facts > span {
	min-width: 90px;
}

.pw-frag-summary__accords {
	flex-wrap: wrap;
	gap: 6px;
}

.pw-frag-summary__accords span {
	padding: 5px 9px;
	border-inline-start: 3px solid var(--pw-accord-color, #99b998);
	background: #f6f6f6;
	font-size: 11px;
}

.pw-frag-summary__link {
	display: inline-block;
	margin-block-start: 10px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pw-frag {
	margin-block: 48px 24px;
	max-width: 1100px;
	margin-inline: auto;
	background: #fff;
	border-block: 1px solid #e7e7e7;
	padding: 40px 24px;
	scroll-margin-top: 24px;
}

.pw-frag__header {
	margin-block-end: 32px;
	text-align: center;
}

.pw-frag__header p {
	margin: 0 0 4px;
	color: rgb(133, 165, 132);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.pw-frag__header h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 400;
}

.pw-frag__composition {
	display: grid;
	grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr);
	gap: 40px;
	align-items: start;
}

.pw-frag__section {
	margin-block-end: 28px;
}
.pw-frag__section--full {
	grid-column: 1 / -1;
}

.pw-frag__section:last-child {
	margin-block-end: 0;
}

.pw-frag__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgb(153, 185, 152);
	margin: 0 0 18px;
	text-align: center;
}

.pw-frag__title::before,
.pw-frag__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, #e2e2e2, transparent);
}

.pw-frag__accords {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 320px;
	margin-inline: auto;
}

.pw-frag__accord-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-width: 30%;
	padding-inline: 12px;
	border-radius: 0 0 10px 0;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform 0.2s ease;
}

.pw-frag__accord-bar:hover {
	transform: scale(1.02);
}

.pw-frag__pyramid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 520px;
	margin-inline: auto;
}

.pw-frag__level {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px 12px;
	background: #fafafa;
	border-radius: 4px;
}

.pw-frag__level-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgb(153, 185, 152);
	font-weight: 600;
	margin-block-end: 10px;
}

.pw-frag__level-notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	font-size: 14px;
	color: #242424;
}

.pw-frag__note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 72px;
}

.pw-frag__note-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid #e5e5e5;
	background: #fff;
}

.pw-frag__note-name {
	font-size: 12px;
	line-height: 1.3;
}

.pw-frag__perfumer {
	text-align: center;
	font-size: 14px;
	font-style: italic;
	color: #242424;
	margin: 0;
}

.pw-frag__perf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	max-width: 620px;
	margin-inline: auto;
}

.pw-frag__perf-card {
	background: #fafafa;
	border-radius: 4px;
	padding: 16px;
}

.pw-frag__perf-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b6b6b;
	font-weight: 600;
	margin-block-end: 12px;
	text-align: center;
}

.pw-frag__bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 420px;
	margin-inline: auto;
}

.pw-frag__bars--centered {
	max-width: 520px;
}
.pw-frag-pack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.pw-frag-pack__item {
	display: flex;
	gap: 12px;
	padding: 14px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fafafa;
}
.pw-frag-pack__image {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 10px;
	flex: 0 0 auto;
}
.pw-frag-pack__content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.pw-frag-pack__topline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
	font-size: 14px;
}
.pw-frag-pack__topline span {
	color: #666;
	font-size: 12px;
}
.pw-frag-pack__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: rgb(153, 185, 152);
}
.pw-frag-pack__description {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #555;
}

.pw-frag__bar-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.pw-frag__bar-label {
	flex: 0 0 96px;
	color: #4a4a4a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pw-frag__bar-track {
	flex: 1;
	height: 8px;
	background: #eee;
	border-radius: 999px;
	overflow: hidden;
}

.pw-frag__bar-fill {
	height: 100%;
	border-radius: 999px;
}

.pw-frag__bar-count {
	flex: 0 0 36px;
	text-align: end;
	font-weight: 600;
	font-size: 11px;
}

@media (max-width: 700px) {
	.pw-frag {
		margin-block-start: 32px;
		padding: 28px 0;
	}

	.pw-frag__composition {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.pw-frag__header h2 {
		font-size: 23px;
	}

	.pw-frag-summary__facts {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.pw-frag__bar-label {
		flex-basis: 82px;
	}
}