/*
 * SWID Fragrance Intelligence — the approved fragrance profile on a product page (0.12.0).
 *
 * No fixed text or background colours: the block inherits the theme's text
 * colour and uses currentColor for its rules, so it reads on a light page and
 * on the shop's dark theme alike (the 0.11.1 contrast lesson).
 */
.swid-fi-fragrance {
	margin: 1.5em 0;
}

.swid-fi-fragrance__title {
	margin: 0 0 0.75em;
	font-size: 1.15em;
}

.swid-fi-fragrance__list {
	margin: 0;
	padding: 0;
}

.swid-fi-fragrance__row {
	display: grid;
	grid-template-columns: minmax(7.5em, 30%) 1fr;
	gap: 0.25em 1em;
	padding: 0.55em 0;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 20%, transparent);
}

.swid-fi-fragrance__row:first-child {
	border-top: 0;
}

.swid-fi-fragrance__row dt {
	margin: 0;
	font-weight: 600;
}

.swid-fi-fragrance__row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* 0.12.1: "(in English)" after a scent name with no translation. Smaller, never fainter: full text contrast. */
.swid-fi-fragrance__untranslated {
	font-size: 0.85em;
	white-space: nowrap;
}

.swid-fi-fragrance__note {
	margin: 0.75em 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

@media (max-width: 480px) {
	.swid-fi-fragrance__row {
		grid-template-columns: 1fr;
	}
}

/*
 * 0.20.0: the fragrance card above Add to cart, in the look of the shop's own footer (the owner's
 * choice, 2026-11-03): each note on a rounded row like the footer's links, each fact in a rounded
 * rectangle like its contact cards, with its mark in a gold ring like the one around its logo. Unlike
 * the list above it has fixed colours, the footer's, so each row and rectangle brings its own dark
 * ground and its text reads whatever the page behind it. Only the line under them takes the theme's
 * text colour. The marks are drawn here, not written in the page, so a translation plugin never sees
 * them as text, and they say nothing to a screen reader.
 */
.swid-fi-card {
	/* Blocksy spaces the summary's items with this, and its rule outranks a margin. */
	--product-element-spacing: 1.25em;
	margin: 1.25em 0;
	font-size: 0.9375em;
}

.swid-fi-card dl {
	margin: 0;
	padding: 0;
}

.swid-fi-card dt {
	margin: 0;
	color: #e5bd5b;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.swid-fi-card dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.swid-fi-card[dir="rtl"] dt {
	/* Spacing would pull Arabic letters apart, and Arabic has no capitals to make small labels readable. */
	font-size: 0.9em;
	letter-spacing: 0;
	text-transform: none;
}

/* A long English name may break before "(in English)" here: the column is narrow. */
.swid-fi-card .swid-fi-fragrance__untranslated {
	white-space: normal;
}

/* For a screen reader only. */
.swid-fi-card__full {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A full pill on one line; a corner this size stays a tidy rounded box when a long list wraps. */
.swid-fi-card__note {
	display: grid;
	grid-template-columns: 4.75em minmax(0, 1fr);
	gap: 0.5em;
	align-items: baseline;
	padding: 0.5em 1em;
	color: #d9d0bf;
	background: linear-gradient(rgba(255, 255, 255, 0.027), rgba(0, 0, 0, 0.26)), #050403;
	border: 1px solid rgba(218, 174, 73, 0.22);
	border-radius: 22px;
}

.swid-fi-card__note + .swid-fi-card__note {
	margin-top: 0.4em;
}

.swid-fi-card__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5em;
}

.swid-fi-card__notes + .swid-fi-card__facts {
	margin-top: 0.5em;
}

/* Room at the start for the ring, which stays centred however many lines the words take. */
.swid-fi-card__fact {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 3.75em;
	padding: 0.6em 0.75em;
	padding-inline-start: 3.1em;
	color: #d9d0bf;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.18)), #050403;
	border: 1px solid rgba(218, 174, 73, 0.2);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024);
}

/* The last of an odd number has the whole width. */
.swid-fi-card__fact:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.swid-fi-card__fact dd {
	margin-top: 0.1em;
	color: #fff5dc;
	font-weight: 600;
}

/* The ring: in px, so its size does not follow a label's size in another language. */
.swid-fi-card__fact dt::before {
	position: absolute;
	top: 50%;
	inset-inline-start: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	background: rgba(0, 0, 0, 0.26);
	border: 1px solid rgba(229, 189, 91, 0.48);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(229, 189, 91, 0.05);
	transform: translateY(-50%);
}

.swid-fi-card__fact--family dt::before {
	content: "\2726";
	content: "\2726" / "";
}

.swid-fi-card__fact--season dt::before {
	content: "\274B";
	content: "\274B" / "";
}

.swid-fi-card__fact--wear dt::before {
	/* A half circle, not a moon: "Wear it" may say Day. */
	content: "\25D0";
	content: "\25D0" / "";
}

.swid-fi-card__fact--made dt::before {
	content: "\25C6";
	content: "\25C6" / "";
}

.swid-fi-card__guide {
	margin: 0.75em 0 0;
	font-size: 0.85em;
}

@media (max-width: 340px) {
	.swid-fi-card__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}