/**
 * Products block styles (block-scoped; enqueued only when the block is present).
 */

.sws-products {
	container: sws-products / inline-size;
	background: #FBF7F1;
	color: #241E1A;

	/* Accent is switched by the modifier on the root. */
	--sws-products-accent: #C2542B;
	--sws-products-accent-hover: #A8441F;
	--sws-products-note-bg: #EDF1E8;
	--sws-products-note-color: #3E5A3A;
	--sws-products-eyebrow: #C2542B;
}

.sws-products--green {
	--sws-products-accent: #4E6B4A;
	--sws-products-accent-hover: #3E5A3A;
	--sws-products-note-bg: #FBEDE4;
	--sws-products-note-color: #A8441F;
	--sws-products-eyebrow: #4E6B4A;
}

.sws-products__inner {
	max-width: 73.75rem;
	margin-inline: auto;
	padding: 3rem 1rem 0;
}

.sws-products__head {
	display: grid;
	gap: 1.25rem;
}

.sws-products__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sws-products-eyebrow);
}

.sws-products__heading {
	margin: 0.75rem 0 0;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.875rem;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.sws-products__lead {
	margin: 0.875rem 0 0;
	max-width: 35rem;
	font-size: 1rem;
	line-height: 1.55;
	color: #5B5049;
}

.sws-products__note {
	margin: 0;
	padding: 1.25rem;
	border-radius: 1.25rem;
	background: var(--sws-products-note-bg);
	color: var(--sws-products-note-color);
	font-size: 0.90625rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Cards */

.sws-products__grid {
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.sws-products__card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: #FFFFFF;
	border: 1px solid #EADFD1;
	border-radius: 1.5rem;
}

.sws-products__card:hover {
	border-color: #DCC6AE;
	box-shadow: 0 24px 48px -32px rgba(38, 32, 28, .35);
}

.sws-products__figure {
	position: relative;
	/*height: 11.625rem;*/
	height: 15rem;
	margin-bottom: 1.25rem;
	border-radius: 1.125rem;
	overflow: hidden;
	/*background: #FBF7F1;*/
}

.sws-products__media,
.sws-products__media img {
	display: block;
	width: 100%;
	height: 100%;
}

/* The photo opens the specs dialog, same as the detail button below it. */
.sws-products__media {
	cursor: pointer;
}

.sws-products__media img {
	object-fit: contain;
}

.sws-products__volume,
.sws-products__sale {
	position: absolute;
	top: 0.75rem;
	padding: 0.4375rem 0.8125rem;
	border-radius: 999px;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 0.96875rem;
	letter-spacing: -0.019em;
	pointer-events: none;
}

.sws-products__volume {
	right: 0.75rem;
	background: rgba(255, 255, 255, .94);
	border: 1px solid #EADFD1;
}

.sws-products__sale {
	left: 0.75rem;
	background: #C2371C;
	color: #FFFFFF;
	font-size: 0.75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sws-products__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.sws-products__pill {
	padding: 0.3125rem 0.6875rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.sws-products__pill--category {
	background: #F1EEEA;
	color: #4A403A;
}

.sws-products--green .sws-products__pill--category {
	background: #EDF1E8;
	color: #3E5A3A;
}

.sws-products__pill--heating {
	background: #FBEDE4;
	color: #C2542B;
}

.sws-products__title {
	margin: 1rem 0 0;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.4rem;
	letter-spacing: -0.019em;
}

.sws-products__specs {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

.sws-products__spec {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	color: #4A403A;
}

.sws-products__spec dt {
	color: #6E635B;
}

.sws-products__spec dd {
	margin: 0;
	font-weight: 700;
}

.sws-products__gift {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	margin: 1rem 0 0;
	padding: 0.625rem 0.8125rem;
	border-radius: 0.875rem;
	background: #EDF1E8;
}

.sws-products__gift-label {
	flex: none;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: .03em;
	color: #C2371C;
}

.sws-products__gift-body {
	flex: 1;
	min-width: 0;
	font-size: 0.78125rem;
	line-height: 1.35;
}

.sws-products__gift-title {
	display: block;
	color: #3E5A3A;
}

.sws-products__gift-text {
	display: block;
	color: #5E6E59;
}

.sws-products__price {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding-top: 1.125rem;
	border-top: 1px solid #F0E6D9;
}

.sws-products__price-old {
	color: #A99C90;
	font-size: 0.9375rem;
}

.sws-products__price-now {
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.75rem;
	letter-spacing: -0.029em;
}

.sws-products__actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}

.sws-products__order,
.sws-products__detail {
	width: 100%;
	border-radius: 0.875rem;
	font-weight: 700;
	font-size: 0.90625rem;
	cursor: pointer;
}

.sws-products__order {
	padding: 0.875rem;
	border: 0;
	background: var(--sws-products-accent);
	color: #FFFFFF;
}

.sws-products__order:hover,
.sws-products__order:focus-visible {
	background: var(--sws-products-accent-hover);
}

.sws-products__detail {
	padding: 0.75rem;
	border: 1px solid #EADFD1;
	background: #FFFFFF;
	color: #4A403A;
}

.sws-products__detail:hover,
.sws-products__detail:focus-visible {
	border-color: var(--sws-products-accent);
	color: var(--sws-products-accent);
}

/* Specs dialog */

.sws-products__dialog {
	width: min(60rem, calc(100vw - 2rem));
	max-height: min(92vh, 54rem);

	/* svh keeps the mobile browser chrome from cutting the sticky foot off. */
	max-height: min(92svh, 54rem);
	padding: 0;
	border: 0;
	border-radius: 1.625rem;
	background: #FFFFFF;
	color: #241E1A;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);

	/* The body scrolls, the dialog itself does not. */
	overflow: hidden;
}

/*
 * A dialog is display:none until it opens, so the layout has to be attached to
 * [open] - an unconditional display:flex would show all twelve of them at once.
 */
.sws-products__dialog[open] {
	display: flex;
	flex-direction: column;
}

/*
 * The dialog opts into border-box for itself and its contents, the way the lead
 * modal does. The theme ships no global box-sizing on purpose - see
 * sws-kit/docs/core-blocks.md - and without this the padded thumbnails would
 * overflow their grid cells.
 */
.sws-products__dialog,
.sws-products__dialog *,
.sws-products__dialog *::before,
.sws-products__dialog *::after {
	box-sizing: border-box;
}

.sws-products__dialog::backdrop {
	background: rgba(38, 32, 28, .62);
	backdrop-filter: blur(4px);
}

/*
 * The head carries the price. On a wide dialog it sits beside the title, in
 * space that was empty anyway, so the head keeps its height while the foot
 * loses the price outright. The close button is a grid cell rather than an
 * absolute box, so the two cannot overlap.
 */
.sws-products__dialog-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.75rem 1.25rem;
	flex: none;
	padding: 1.75rem 1.875rem 0;
}

.sws-products__dialog-headline {
	grid-area: 1 / 1;
}

.sws-products__dialog-eyebrow {
	margin: 0;
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #C2542B;
}

.sws-products__dialog-title {
	margin: 0.5rem 0 0;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 900;
	font-size: 1.5rem;
	letter-spacing: -0.027em;
}

.sws-products__dialog-close {
	grid-area: 1 / 2;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: #F6EFE4;
	color: #4A403A;
	font-size: 1rem;
	cursor: pointer;
}

.sws-products__dialog-close:hover,
.sws-products__dialog-close:focus-visible {
	background: #EDE3D5;
}

/* Narrow: the price takes a row of its own under the title. */
.sws-products__price--dialog {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 0;
	border-top: 0;
	gap: 0.875rem;
}

.sws-products__price--dialog .sws-products__price-old {
	font-size: 1rem;
}

.sws-products__price--dialog .sws-products__price-now {
	font-size: 1.75rem;
	letter-spacing: -0.031em;
}

.sws-products__dialog-body {
	display: grid;
	gap: 1.5rem;

	padding: 1.375rem 1.875rem 1.5rem;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;

	/*
	 * Reserve the scrollbar even when the content fits. The foot reserves the
	 * same gutter below, and only then do the two share one set of column
	 * widths - otherwise the order button sits a scrollbar-width to the right
	 * of the specs it belongs to. Platforms with overlay scrollbars reserve
	 * nothing on either element, so they stay aligned too.
	 */
	scrollbar-gutter: stable;
}

/* Gallery */

.sws-products__dialog-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 15rem;
	padding: 1.125rem;
	border: 1px solid #EADFD1;
	border-radius: 1.25rem;
	/*background: #FBF7F1;*/
}

/*
 * The imagequeue plugin wraps every image in <picture>. An inline wrapper has
 * no definite height, so a percentage max-height on the image resolved against
 * nothing and the photo rendered at its full pixel height, spilling over the
 * thumbnails below. Size the wrapper as well and let object-fit letterbox.
 */
.sws-products__dialog-stage > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.sws-products__dialog-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sws-products__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.sws-products__thumb {
	position: relative;
	width: 100%;
	height: 4.625rem;
	padding: 0.375rem;
	border: 1px solid #EADFD1;
	border-radius: 0.875rem;
	/*background: #FBF7F1;*/
	cursor: pointer;
	background: transparent;
}

.sws-products__thumb:hover,
.sws-products__thumb:focus-visible {
	border-color: #DCC6AE;
}

/* The accent is a variable so the green instance of the block stays coherent. */
.sws-products__thumb.is-active {
	border: 2px solid var(--sws-products-accent);
	background: #FFFFFF;
}

.sws-products__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .9;
}

.sws-products__thumb.is-active img {
	opacity: 1;
}

.sws-products__table {
	display: grid;
	margin: 0;
	border-top: 1px solid #F0E6D9;
}

.sws-products__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid #F0E6D9;
	font-size: 0.90625rem;
}

.sws-products__row dt {
	color: #6E635B;
}

.sws-products__row dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/*
 * Pinned foot. Nineteen spec rows never fit a laptop screen, so price and
 * call-to-action sit outside the scrolling body and stay put. On the desktop
 * layout the grid below lines them up under the specs column, the way the
 * mockup has them.
 */
.sws-products__dialog-foot {
	flex: none;
	padding: 0.875rem 1.875rem 1.5rem;
	border-top: 1px solid #F0E6D9;
	background: #FFFFFF;

	/* overflow makes this a scroll container, which is what scrollbar-gutter
	   needs to mirror the gutter the body above reserves. Nothing scrolls here. */
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Narrow: the plaque stacks above the button, there is no room beside it. */
.sws-products__gift--foot {
	margin-top: 0;
	padding: 0.6875rem 0.875rem;
}

.sws-products__dialog-order {
	width: 100%;
	margin-top: 0.875rem;
	padding: 1rem;
	border: 0;
	border-radius: 0.875rem;
	background: var(--sws-products-accent);
	color: #FFFFFF;
	font-family: Nunito, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.0625rem;
	cursor: pointer;
}

.sws-products__dialog-order:hover,
.sws-products__dialog-order:focus-visible {
	background: var(--sws-products-accent-hover);
}

.sws-products__dialog-note {
	margin: 0.625rem 0 0;
	font-size: 0.78125rem;
	color: #8C8078;
	text-align: center;
}

@container sws-products (min-width: 560px) {

	.sws-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container sws-products (min-width: 782px) {

	.sws-products__inner {
		padding: 5.5rem 2rem 0;
	}

	.sws-products__head {
		grid-template-columns: minmax(0, 1fr) 18.125rem;
		align-items: end;
		gap: 2rem;
	}

	.sws-products__heading {
		font-size: 2.5rem;
	}

	.sws-products__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Wide: the price moves up beside the title, into space the head already
	 * had, so it costs no height at all here.
	 */
	.sws-products__dialog-head {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: end;
	}

	.sws-products__price--dialog {
		grid-area: 1 / 2;
		justify-content: flex-end;
	}

	.sws-products__price--dialog .sws-products__price-now {
		font-size: 2rem;
	}

	.sws-products__dialog-close {
		grid-area: 1 / 3;
		align-self: start;
	}

	.sws-products__dialog-body {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 2rem;
	}

	.sws-products__dialog-media {
		align-self: start;
	}

	.sws-products__dialog-stage {
		height: 19.875rem;
	}

	/* Same tracks as the body, so the foot sits under the specs column only. */
	.sws-products__dialog-foot {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 0 2rem;
	}

	.sws-products__dialog-foot > * {
		grid-column: 2;
	}

	/*
	 * Wide: the plaque fills the column the button left empty, level with it,
	 * so promo and call to action share one row instead of stacking.
	 */
	.sws-products__gift--foot {
		grid-area: 1 / 1;
		align-self: center;
	}

	.sws-products__dialog-order {
		grid-area: 1 / 2;
		margin-top: 0;
	}
}