/**
 * AmzKit front-end styles.
 *
 * Scoped under .amzkit so nothing leaks into the theme. Colours are custom
 * properties, set from the Appearance screen. Boxes adapt to the width of the
 * column they sit in (container queries), not the width of the screen, so the
 * same box works in the content area and in a sidebar.
 *
 * Light by default. Dark is opt-in (.amzkit-theme-dark) or follows the
 * visitor's system only when "Auto" is chosen (.amzkit-theme-auto).
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------ */

.amzkit {
	--ak-accent: #1b406d;
	--ak-on-accent: #ffffff;
	--ak-radius: 14px;

	--ak-bg: #ffffff;
	--ak-surface: #f5f7fa;
	--ak-media-bg: #f5f7fa;
	--ak-border: #e3e7ee;
	--ak-border-strong: #cfd6e1;
	--ak-text: #0f1b2d;
	--ak-muted: #56627a;
	--ak-subtle: #8a94a6;

	--ak-good: #0b7a3e;
	--ak-good-bg: #e9f7ef;
	--ak-warn: #9a5b00;
	--ak-warn-bg: #fff4dc;
	--ak-sale: #c8321f;
	--ak-sale-bg: #fdecea;
	--ak-star: #f5a524;
	--ak-star-empty: #dfe3ea;
	--ak-prime: #0a7cc0;
	--ak-prime-bg: #e6f3fb;

	--ak-amazon: #ffd814;
	--ak-amazon-hover: #f7ca00;
	--ak-amazon-border: #f2c200;
	--ak-amazon-ink: #0f1111;

	--ak-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 2px 8px -2px rgba(15, 27, 45, .05);
	--ak-shadow-hover: 0 2px 4px rgba(15, 27, 45, .04), 0 18px 40px -18px rgba(15, 27, 45, .22);
	--ak-media-blend: multiply;

	box-sizing: border-box;
	margin: 2em 0;
	color: var(--ak-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.amzkit *,
.amzkit *::before,
.amzkit *::after {
	box-sizing: inherit;
}

/* Dark: opt-in, or following the system when "Auto" is chosen. */
.amzkit-theme-dark {
	--ak-bg: #121a27;
	--ak-surface: #1a2433;
	--ak-media-bg: #ffffff;
	--ak-border: #263246;
	--ak-border-strong: #34425a;
	--ak-text: #eef2f8;
	--ak-muted: #a8b3c7;
	--ak-subtle: #7d889c;
	--ak-good: #4ade80;
	--ak-good-bg: rgba(74, 222, 128, .12);
	--ak-warn: #fbbf24;
	--ak-warn-bg: rgba(251, 191, 36, .12);
	--ak-sale: #fb7a67;
	--ak-sale-bg: rgba(251, 122, 103, .14);
	--ak-star-empty: #34425a;
	--ak-prime: #5cc3f5;
	--ak-prime-bg: rgba(92, 195, 245, .12);
	--ak-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	--ak-shadow-hover: 0 18px 40px -18px rgba(0, 0, 0, .6);
	--ak-media-blend: normal;
}

@media (prefers-color-scheme: dark) {
	.amzkit-theme-auto {
		--ak-bg: #121a27;
		--ak-surface: #1a2433;
		--ak-media-bg: #ffffff;
		--ak-border: #263246;
		--ak-border-strong: #34425a;
		--ak-text: #eef2f8;
		--ak-muted: #a8b3c7;
		--ak-subtle: #7d889c;
		--ak-good: #4ade80;
		--ak-good-bg: rgba(74, 222, 128, .12);
		--ak-warn: #fbbf24;
		--ak-warn-bg: rgba(251, 191, 36, .12);
		--ak-sale: #fb7a67;
		--ak-sale-bg: rgba(251, 122, 103, .14);
		--ak-star-empty: #34425a;
		--ak-prime: #5cc3f5;
		--ak-prime-bg: rgba(92, 195, 245, .12);
		--ak-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		--ak-shadow-hover: 0 18px 40px -18px rgba(0, 0, 0, .6);
		--ak-media-blend: normal;
	}
}

/* ---------------------------------------------------------------------------
 * Theme resets (themes style h3, ul, table, a globally)
 * ------------------------------------------------------------------------ */

.amzkit h2,
.amzkit h3,
.amzkit h4,
.amzkit p,
.amzkit ul,
.amzkit li,
.amzkit figure {
	margin: 0;
	padding: 0;
}

.amzkit ul {
	list-style: none;
}

.amzkit img {
	max-width: 100%;
	height: auto;
	border: 0;
	box-shadow: none;
}

.amzkit a {
	text-decoration: none;
	box-shadow: none;
}

.amzkit .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.amzkit-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* ---------------------------------------------------------------------------
 * Group layouts
 * ------------------------------------------------------------------------ */

.amzkit-group {
	container: akgroup / inline-size;
}

.amzkit-stack {
	display: grid;
	gap: 22px;
}

.amzkit-grid {
	display: grid;
	gap: 30px 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	align-items: stretch;
	padding-top: 12px;
}

.amzkit-grid > .amzkit-box.has-badge {
	margin-top: 0;
}

@container akgroup (min-width: 700px) {
	.amzkit-grid.has-cols {
		grid-template-columns: repeat(var(--ak-cols, 3), minmax(0, 1fr));
	}
}

.amzkit-group--align-center {
	max-width: 760px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Box chrome
 * ------------------------------------------------------------------------ */

.amzkit-box {
	container: akbox / inline-size;
	position: relative;
	background: var(--ak-bg);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-radius);
	box-shadow: var(--ak-shadow);
	transition: box-shadow .25s ease, border-color .25s ease;
}

.amzkit-box:hover {
	border-color: var(--ak-border-strong);
	box-shadow: var(--ak-shadow-hover);
}

.amzkit-box.is-highlighted {
	border-color: var(--ak-badge, var(--ak-accent));
	box-shadow: 0 0 0 1px var(--ak-badge, var(--ak-accent)), var(--ak-shadow-hover);
}

.amzkit-box.has-badge {
	margin-top: 12px;
}

.amzkit-box__inner {
	padding: 20px;
}

/* Badge / ribbon ----------------------------------------------------------- */

.amzkit-badge {
	position: absolute;
	top: 0;
	left: 20px;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 40px);
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var(--ak-badge, var(--ak-accent));
	color: #ffffff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 14px -6px rgba(15, 27, 45, .45);
}

.amzkit-badge span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.amzkit-badge .amzkit-icon {
	width: 14px;
	height: 14px;
}

/* Media -------------------------------------------------------------------- */

.amzkit a.amzkit-media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 100%;
	padding: 14px;
	background: var(--ak-media-bg);
	border-radius: calc(var(--ak-radius) - 4px);
	overflow: hidden;
}

.amzkit .amzkit-media__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: var(--ak-media-blend);
	transition: transform .35s ease;
}

.amzkit-box:hover .amzkit-media__img {
	transform: scale(1.04);
}

.amzkit-rank {
	position: absolute;
	top: 8px;
	left: 8px;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ak-text);
	color: var(--ak-bg);
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1;
}

.amzkit-box--compact a.amzkit-media,
.amzkit .amzkit-table a.amzkit-media {
	overflow: visible;
}

.amzkit-box--compact .amzkit-rank,
.amzkit .amzkit-table .amzkit-rank {
	top: -7px;
	left: -7px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: .75rem;
	box-shadow: 0 0 0 2px var(--ak-bg);
}

.amzkit-box--compact:hover .amzkit-media__img {
	transform: none;
}

/* Rank beside the title when the image is switched off. */
.amzkit .amzkit-title .amzkit-rank--inline {
	position: static;
	display: inline-grid;
	min-width: 22px;
	height: 22px;
	margin-right: 8px;
	padding: 0 6px;
	font-size: .75rem;
	vertical-align: 2px;
	box-shadow: none;
}

/* Text --------------------------------------------------------------------- */

.amzkit-brand {
	display: block;
	margin-bottom: 4px;
	color: var(--ak-subtle);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.amzkit .amzkit-title {
	margin: 0;
	color: var(--ak-text);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.amzkit .amzkit-title a {
	color: inherit;
	text-decoration: none;
}

.amzkit .amzkit-title a:hover,
.amzkit .amzkit-title a:focus-visible {
	color: var(--ak-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.amzkit-theme-dark .amzkit-title a:hover {
	color: var(--ak-text);
}

.amzkit-features {
	display: grid;
	gap: 7px;
	margin-top: 14px !important;
	color: var(--ak-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

.amzkit-features li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 9px;
	list-style: none;
}

.amzkit-features li::before,
.amzkit-features li::marker {
	content: none;
}

.amzkit-features .amzkit-icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	padding: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ak-accent) 12%, transparent);
	color: var(--ak-accent);
	stroke-width: 3;
}

.amzkit-theme-dark .amzkit-features .amzkit-icon {
	background: rgba(255, 255, 255, .08);
	color: var(--ak-text);
}

/* Rating ------------------------------------------------------------------- */

.amzkit-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: .8125rem;
	line-height: 1;
}

.amzkit-rating__value {
	color: var(--ak-text);
	font-weight: 700;
}

.amzkit-rating__count {
	color: var(--ak-muted);
}

.amzkit-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	color: var(--ak-star-empty);
	vertical-align: middle;
}

.amzkit-stars__base,
.amzkit-stars__fill {
	display: flex;
	gap: 1px;
}

.amzkit-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--ak-star);
}

.amzkit-stars svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Price -------------------------------------------------------------------- */

.amzkit-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.amzkit-price__now {
	color: var(--ak-text);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.025em;
}

.amzkit-price.is-last-known .amzkit-price__now {
	color: var(--ak-muted);
	font-size: 1.5rem;
}

.amzkit-price__was {
	color: var(--ak-subtle);
	font-size: .9375rem;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.amzkit-price__save {
	align-self: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ak-sale-bg);
	color: var(--ak-sale);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.2;
}

/* Block with an inline icon, so a wrapped date flows under the icon
   instead of indenting beside it in a narrow column. */
.amzkit-note {
	display: block;
	margin-top: 6px;
	color: var(--ak-subtle);
	font-size: .75rem;
	line-height: 1.4;
}

.amzkit-note .amzkit-icon {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 4px;
	vertical-align: -2px;
}

.amzkit-note--last-known {
	color: var(--ak-warn);
}

/* Buttons ------------------------------------------------------------------ */

.amzkit-buttons {
	display: grid;
	gap: 8px;
}

.amzkit a.amzkit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: calc(var(--ak-radius) - 4px);
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.amzkit a.amzkit-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.amzkit a.amzkit-btn:active {
	transform: translateY(0);
}

.amzkit a.amzkit-btn .amzkit-icon {
	width: 18px;
	height: 18px;
}

.amzkit a.amzkit-btn--amazon {
	background: var(--ak-amazon);
	border-color: var(--ak-amazon-border);
	color: var(--ak-amazon-ink);
	box-shadow: 0 1px 2px rgba(15, 17, 17, .15), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.amzkit a.amzkit-btn--amazon:hover {
	background: var(--ak-amazon-hover);
	color: var(--ak-amazon-ink);
}

.amzkit a.amzkit-btn--accent {
	background: var(--ak-accent);
	color: var(--ak-on-accent);
}

.amzkit a.amzkit-btn--accent:hover {
	background: color-mix(in srgb, var(--ak-accent) 88%, #000);
	color: var(--ak-on-accent);
}

.amzkit a.amzkit-btn--dark {
	background: #0f1b2d;
	color: #ffffff;
}

.amzkit a.amzkit-btn--dark:hover {
	background: #1f2d44;
	color: #ffffff;
}

.amzkit-theme-dark a.amzkit-btn--dark {
	background: #ffffff;
	color: #0f1b2d;
}

.amzkit a.amzkit-btn--outline {
	background: transparent;
	border-color: var(--ak-accent);
	color: var(--ak-accent);
}

.amzkit a.amzkit-btn--outline:hover {
	background: color-mix(in srgb, var(--ak-accent) 8%, transparent);
	color: var(--ak-accent);
}

.amzkit a.amzkit-btn--ghost {
	min-height: 40px;
	background: var(--ak-surface);
	border-color: var(--ak-border);
	color: var(--ak-text);
	font-weight: 600;
}

.amzkit a.amzkit-btn--ghost:hover {
	border-color: var(--ak-border-strong);
	color: var(--ak-text);
}

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

/* Chips -------------------------------------------------------------------- */

.amzkit-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.amzkit-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--ak-surface);
	color: var(--ak-muted);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.amzkit-chip .amzkit-icon {
	width: 13px;
	height: 13px;
}

.amzkit-chip--stock {
	background: var(--ak-good-bg);
	color: var(--ak-good);
}

.amzkit-chip--stock::before,
.amzkit-chip--unavailable::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
}

.amzkit-chip--unavailable {
	background: var(--ak-warn-bg);
	color: var(--ak-warn);
}

.amzkit-chip--prime {
	background: var(--ak-prime-bg);
	color: var(--ak-prime);
}

.amzkit-chip--prime b {
	font-style: italic;
	font-weight: 800;
	letter-spacing: -.01em;
}

.amzkit-chip--insight {
	background: var(--ak-good-bg);
	color: var(--ak-good);
}

/* ---------------------------------------------------------------------------
 * Horizontal
 * ------------------------------------------------------------------------ */

.amzkit-box--horizontal .amzkit-box__inner {
	display: grid;
	gap: 18px;
}

.amzkit-box--horizontal .amzkit-media {
	max-width: 220px;
	margin-inline: auto;
}

.amzkit-box--horizontal .amzkit-box__side {
	display: grid;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ak-border);
}

.amzkit-box.has-badge .amzkit-box__inner {
	padding-top: 26px;
}

@container akbox (min-width: 560px) {
	.amzkit-box--horizontal .amzkit-box__inner {
		grid-template-columns: 164px minmax(0, 1fr) minmax(184px, 212px);
		align-items: center;
		gap: 24px;
		padding: 24px;
	}

	.amzkit-box--horizontal.has-badge .amzkit-box__inner {
		padding-top: 30px;
	}

	/* Drop the columns of parts that are switched off. Order matters:
	   no-side always comes with no-button, so it is declared after it. */
	.amzkit-box--horizontal.no-button .amzkit-box__inner {
		grid-template-columns: 164px minmax(0, 1fr) fit-content(212px);
	}

	.amzkit-box--horizontal.no-side .amzkit-box__inner {
		grid-template-columns: 164px minmax(0, 1fr);
	}

	.amzkit-box--horizontal.no-media .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr) minmax(184px, 212px);
	}

	.amzkit-box--horizontal.no-media.no-button .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr) fit-content(212px);
	}

	.amzkit-box--horizontal.no-media.no-side .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.amzkit-box--horizontal .amzkit-media {
		max-width: none;
	}

	.amzkit-box--horizontal .amzkit-box__side {
		align-self: stretch;
		align-content: center;
		padding: 0 0 0 24px;
		border-top: 0;
		border-left: 1px solid var(--ak-border);
	}
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.amzkit-box--card {
	height: 100%;
}

.amzkit-box--card .amzkit-box__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 16px;
}

.amzkit-box--card.has-badge .amzkit-box__inner {
	padding-top: 24px;
}

.amzkit-box--card .amzkit-media {
	aspect-ratio: 4 / 3;
}

.amzkit-box--card .amzkit-title {
	font-size: 1.0625rem;
}

.amzkit-box--card .amzkit-features {
	font-size: .875rem;
}

.amzkit-box--card .amzkit-box__main {
	flex: 1 1 auto;
}

.amzkit-box--card .amzkit-box__side {
	display: grid;
	gap: 10px;
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * Compact
 * ------------------------------------------------------------------------ */

.amzkit-box--compact {
	border-radius: calc(var(--ak-radius) - 2px);
}

.amzkit-box--compact .amzkit-box__inner {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	align-items: center;
	gap: 12px 16px;
	padding: 14px 16px;
}

.amzkit-box--compact.no-media .amzkit-box__inner {
	grid-template-columns: minmax(0, 1fr);
}

.amzkit-box--compact .amzkit-media {
	padding: 6px;
	border-radius: 10px;
}

.amzkit-box--compact .amzkit-title {
	font-size: 1rem;
	-webkit-line-clamp: 2;
}

.amzkit-box--compact .amzkit-rating {
	margin-top: 6px;
}

.amzkit-box--compact .amzkit-chips {
	margin-top: 8px;
}

.amzkit-box--compact .amzkit-box__side {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding-top: 12px;
	border-top: 1px solid var(--ak-border);
}

.amzkit-box--compact .amzkit-price__now {
	font-size: 1.3125rem;
}

.amzkit-box--compact .amzkit-note {
	margin-top: 2px;
}

.amzkit-box--compact .amzkit-buttons {
	display: flex;
	gap: 8px;
}

.amzkit-box--compact a.amzkit-btn {
	width: auto;
	min-height: 40px;
	padding: 9px 16px;
	font-size: .875rem;
}

@container akbox (min-width: 540px) {
	.amzkit-box--compact .amzkit-box__inner {
		grid-template-columns: 76px minmax(0, 1fr) auto;
		gap: 16px 20px;
	}

	.amzkit-box--compact.no-media .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.amzkit-box--compact.no-side .amzkit-box__inner {
		grid-template-columns: 76px minmax(0, 1fr);
	}

	.amzkit-box--compact.no-media.no-side .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.amzkit-box--compact .amzkit-box__side {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		padding-top: 0;
		border-top: 0;
		text-align: right;
	}

	.amzkit-box--compact .amzkit-price {
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------------------
 * Top pick
 * ------------------------------------------------------------------------ */

.amzkit-box--featured {
	border: 2px solid var(--ak-badge, var(--ak-accent));
	box-shadow: var(--ak-shadow-hover);
}

.amzkit-featured__band {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: calc(var(--ak-radius) - 3px) calc(var(--ak-radius) - 3px) 0 0;
	background: var(--ak-badge, var(--ak-accent));
	color: #ffffff;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.amzkit-featured__band .amzkit-icon {
	width: 16px;
	height: 16px;
}

.amzkit-box--featured .amzkit-box__inner {
	display: grid;
	gap: 20px;
	padding: 22px;
}

.amzkit-box--featured .amzkit-media {
	max-width: 280px;
	margin-inline: auto;
	padding: 20px;
}

.amzkit-box--featured .amzkit-title {
	font-size: 1.375rem;
	line-height: 1.3;
}

.amzkit-features-label {
	margin-top: 18px !important;
	color: var(--ak-subtle);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.amzkit-box--featured .amzkit-features-label + .amzkit-features {
	margin-top: 8px !important;
}

.amzkit-box--featured .amzkit-box__side {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ak-border);
}

.amzkit-box--featured .amzkit-price__now {
	font-size: 2rem;
}

@container akbox (min-width: 620px) {
	.amzkit-box--featured .amzkit-box__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 32px;
		padding: 28px;
	}

	.amzkit-box--featured.no-media .amzkit-box__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.amzkit-box--featured .amzkit-media {
		max-width: none;
	}

	.amzkit-box--featured .amzkit-buttons {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Comparison table
 * ------------------------------------------------------------------------ */

.amzkit table.amzkit-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--ak-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--ak-radius);
	background: var(--ak-bg);
	box-shadow: var(--ak-shadow);
	overflow: hidden;
	font-size: .9375rem;
	table-layout: auto;
}

.amzkit .amzkit-table th,
.amzkit .amzkit-table td {
	padding: 16px;
	border: 0;
	border-bottom: 1px solid var(--ak-border);
	background: transparent;
	text-align: left;
	vertical-align: middle;
}

.amzkit .amzkit-table th {
	background: var(--ak-surface);
	color: var(--ak-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding-block: 12px;
}

.amzkit .amzkit-table tbody tr:last-child td {
	border-bottom: 0;
}

.amzkit .amzkit-table tr.is-highlighted td {
	background: color-mix(in srgb, var(--ak-badge, var(--ak-accent)) 6%, var(--ak-bg));
}

.amzkit .amzkit-table td.amzkit-table__media {
	width: 112px;
}

.amzkit .amzkit-table .amzkit-media {
	padding: 8px;
}

.amzkit .amzkit-table td.amzkit-table__rating {
	width: 150px;
	white-space: nowrap;
}

.amzkit .amzkit-table td.amzkit-table__price {
	width: 170px;
}

.amzkit .amzkit-table td.amzkit-table__action {
	width: 190px;
}

.amzkit .amzkit-table .amzkit-title {
	font-size: 1rem;
	-webkit-line-clamp: 2;
}

.amzkit .amzkit-table .amzkit-badge {
	position: static;
	transform: none;
	margin-bottom: 8px;
	box-shadow: none;
}

.amzkit .amzkit-table .amzkit-features {
	margin-top: 8px !important;
	font-size: .875rem;
}

.amzkit .amzkit-table .amzkit-chips {
	margin-top: 8px;
}

.amzkit .amzkit-table .amzkit-rating {
	margin-top: 0;
}

.amzkit .amzkit-table .amzkit-price__now {
	font-size: 1.25rem;
}

.amzkit .amzkit-table a.amzkit-btn {
	min-height: 42px;
	font-size: .875rem;
}

.amzkit-muted {
	color: var(--ak-subtle);
}

/* Narrow column: every row becomes a card. */
@container akgroup (max-width: 719px) {
	.amzkit table.amzkit-table,
	.amzkit .amzkit-table tbody,
	.amzkit .amzkit-table tr,
	.amzkit .amzkit-table td {
		display: block;
		width: auto;
	}

	.amzkit .amzkit-table thead {
		display: none;
	}

	.amzkit .amzkit-table tr {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 10px 16px;
		padding: 16px;
		border-bottom: 1px solid var(--ak-border);
	}

	.amzkit .amzkit-table tbody tr:last-child {
		border-bottom: 0;
	}

	.amzkit .amzkit-table td,
	.amzkit .amzkit-table td.amzkit-table__media,
	.amzkit .amzkit-table td.amzkit-table__rating,
	.amzkit .amzkit-table td.amzkit-table__price,
	.amzkit .amzkit-table td.amzkit-table__action {
		width: auto;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.amzkit .amzkit-table tr.is-highlighted {
		background: color-mix(in srgb, var(--ak-badge, var(--ak-accent)) 6%, var(--ak-bg));
	}

	.amzkit .amzkit-table td.amzkit-table__media {
		grid-row: span 2;
	}

	.amzkit .amzkit-table.no-media tr {
		grid-template-columns: minmax(0, 1fr);
	}

	.amzkit .amzkit-table td.amzkit-table__action {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Inline output: data fields and text links
 * ------------------------------------------------------------------------ */

.amzkit-inline {
	display: inline;
	margin: 0;
}

.amzkit a.amzkit-inline--price,
a.amzkit-inline--price {
	color: var(--ak-accent, #1b406d);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	white-space: nowrap;
}

a.amzkit-inline--price:hover {
	text-decoration-style: solid;
}

a.amzkit-inline--image {
	display: inline-block;
	line-height: 0;
}

.amzkit-inline__img {
	max-width: 100%;
	height: auto;
}

span.amzkit.amzkit-inline {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Disclaimer and editor notices
 * ------------------------------------------------------------------------ */

.amzkit-disclaimer {
	margin-top: 12px;
	color: var(--ak-subtle);
	font-size: .75rem;
	line-height: 1.5;
}

.amzkit-disclaimer p {
	margin: 0;
}

.amzkit-notice {
	padding: 12px 16px;
	border: 1px dashed var(--ak-border-strong);
	border-radius: 10px;
	background: var(--ak-surface);
	color: var(--ak-muted);
	font-size: .875rem;
	line-height: 1.5;
}

.amzkit-notice--error {
	border-color: var(--ak-sale);
	color: var(--ak-sale);
}

/* ---------------------------------------------------------------------------
 * Unavailable products
 * ------------------------------------------------------------------------ */

.amzkit-box.is-unavailable .amzkit-media__img {
	opacity: .72;
}

/* ---------------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.amzkit-box,
	.amzkit a.amzkit-btn,
	.amzkit .amzkit-media__img {
		transition: none;
	}

	.amzkit-box:hover .amzkit-media__img,
	.amzkit a.amzkit-btn:hover {
		transform: none;
	}
}