/* Saga Shelf: product blocks that take their text color and font from the theme.
   Borders and panels are mixed from currentColor, so the same CSS works on light and dark sites.
   Override per site with: .sshelf { --sshelf-accent: #...; --sshelf-radius: 8px; } */

.sshelf {
	--sshelf-accent: #c9a227;
	--sshelf-accent-ink: #1a1405;
	--sshelf-line: color-mix(in srgb, currentColor 16%, transparent);
	--sshelf-panel: color-mix(in srgb, currentColor 5%, transparent);
	--sshelf-radius: 6px;
	margin: 2em 0;
	font: inherit;
	color: inherit;
}

.sshelf__heading {
	margin: 0 0 0.8em;
	padding-left: 0.6em;
	border-left: 3px solid var(--sshelf-accent);
	line-height: 1.25;
}

.sshelf__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 1.1em;
}

.sshelf-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--sshelf-line);
	border-radius: var(--sshelf-radius);
	overflow: hidden;
	background: transparent;
}

.sshelf-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	min-height: 0;
	overflow: hidden;
	background: var(--sshelf-panel);
	border-bottom: 1px solid var(--sshelf-line);
}

/* The image is placed absolutely so theme rules like img { height: auto } can never
   stretch the box: the box keeps its shape and the picture fits inside it. */
.sshelf .sshelf-card__media img {
	position: absolute;
	inset: 0.75em;
	display: block;
	width: calc(100% - 1.5em) !important;
	height: calc(100% - 1.5em) !important;
	max-width: none;
	object-fit: contain;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sshelf-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5em;
	padding: 0.9em 1em 1em;
}

.sshelf-card__title {
	color: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.sshelf-card__title:hover {
	text-decoration: underline;
	text-decoration-color: var(--sshelf-accent);
	text-underline-offset: 0.2em;
}

.sshelf-card__text {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.85;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sshelf .sshelf-card__button {
	margin-top: auto;
	display: block;
	padding: 0.6em 0.9em;
	border-radius: calc(var(--sshelf-radius) - 2px);
	background: var(--sshelf-accent);
	color: var(--sshelf-accent-ink) !important;
	font-weight: 700;
	font-size: 0.92em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.sshelf-card__button:hover,
.sshelf-card__button:focus-visible {
	color: var(--sshelf-accent-ink);
	filter: brightness(1.08);
	text-decoration: none;
}

.sshelf a:focus-visible {
	outline: 2px solid var(--sshelf-accent);
	outline-offset: 2px;
}

/* One product inside an article: image beside the text. */
.sshelf--single .sshelf__items {
	grid-template-columns: 1fr;
	max-width: 640px;
}

.sshelf--single .sshelf-card {
	flex-direction: row;
}

.sshelf--single .sshelf-card__media {
	flex: 0 0 34%;
	aspect-ratio: auto;
	min-height: 180px;
	border-bottom: 0;
	border-right: 1px solid var(--sshelf-line);
}

.sshelf--single .sshelf-card__button {
	align-self: flex-start;
	padding-left: 1.4em;
	padding-right: 1.4em;
}

/* Related picks: compact horizontal cards (small picture beside the text), so a row of
   two or three products stays low and wide instead of narrow and tall. */
.sshelf--related .sshelf__items {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0.8em;
}

.sshelf--related .sshelf-card {
	flex-direction: row;
	align-items: stretch;
}

.sshelf--related .sshelf-card__media {
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: auto;
	min-height: 112px;
	border-bottom: 0;
	border-right: 1px solid var(--sshelf-line);
}

.sshelf.sshelf--related .sshelf-card__media img {
	inset: 0.5em;
	width: calc(100% - 1em) !important;
	height: calc(100% - 1em) !important;
}

.sshelf--related .sshelf-card__body {
	gap: 0.35em;
	padding: 0.7em 0.85em;
}

.sshelf--related .sshelf-card__title {
	font-size: 0.95em;
}

.sshelf--related .sshelf-card__text {
	font-size: 0.85em;
	-webkit-line-clamp: 2;
}

.sshelf.sshelf--related .sshelf-card__button {
	align-self: flex-start;
	padding: 0.4em 0.9em;
	font-size: 0.85em;
	background: transparent;
	color: inherit !important;
	border: 1px solid var(--sshelf-accent);
}

.sshelf.sshelf--related .sshelf-card__button:hover,
.sshelf.sshelf--related .sshelf-card__button:focus-visible {
	background: var(--sshelf-accent);
	color: var(--sshelf-accent-ink) !important;
	filter: none;
}

/* Gift guide sections. */
.sshelf__group + .sshelf__group {
	margin-top: 2em;
}

.sshelf__group-title {
	margin: 0 0 0.7em;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--sshelf-line);
}

.sshelf__disclosure {
	margin: 0.9em 0 0;
	font-size: 0.78em;
	opacity: 0.7;
}

.sshelf-hint {
	padding: 0.6em 0.8em;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 0.85em;
	opacity: 0.75;
}

@media (max-width: 520px) {
	.sshelf--single .sshelf-card {
		flex-direction: column;
	}

	.sshelf--single .sshelf-card__media {
		aspect-ratio: 4 / 3;
		border-right: 0;
		border-bottom: 1px solid var(--sshelf-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sshelf-card__button {
		transition: none;
	}
}

/* Browsers without color-mix(): use neutral greys that read on light and dark themes. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sshelf {
		--sshelf-line: rgba(128, 128, 128, 0.3);
		--sshelf-panel: rgba(128, 128, 128, 0.08);
	}
}

/* Related picks added automatically below the content: keep them at a normal content width,
   also on pages built full width in a page builder. */
.sshelf-auto {
	box-sizing: border-box;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 16px;
}

.sshelf-auto .sshelf {
	margin: 2.5em 0;
}

/* Gift guide banner on the front page: one slim, quiet line in the site's own colors. */
.sshelf-banner {
	--sshelf-accent: #c9a227;
	box-sizing: border-box;
	width: 100%;
	max-width: 1170px;
	margin: 22px auto;
	padding: 0 16px;
	font: inherit;
}

.sshelf-banner[hidden] {
	display: none;
}

.sshelf-banner__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 12px 18px;
	border: 1px solid color-mix(in srgb, var(--sshelf-accent) 35%, transparent);
	border-left: 3px solid var(--sshelf-accent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--sshelf-accent) 7%, transparent);
	color: inherit;
	text-decoration: none !important;
	line-height: 1.45;
	transition: border-color 0.2s, background-color 0.2s;
}

.sshelf-banner__in:hover,
.sshelf-banner__in:focus-visible {
	border-color: var(--sshelf-accent);
	background: color-mix(in srgb, var(--sshelf-accent) 12%, transparent);
}

.sshelf-banner__icon {
	display: inline-flex;
	color: var(--sshelf-accent);
}

.sshelf-banner__label {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sshelf-accent);
}

.sshelf-banner__text {
	flex: 1 1 260px;
	font-size: 0.95em;
	opacity: 0.9;
}

.sshelf-banner__go {
	font-size: 0.9em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--sshelf-accent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sshelf-banner__in {
		border-color: rgba(128, 128, 128, 0.35);
		background: rgba(128, 128, 128, 0.08);
	}
}