/*
 * Affiliate Engine components.
 *
 * This file does two jobs: it makes every component work (layout, drawer, tray, suggestions, tables) and it gives
 * them a plain, readable skin so the plugin is usable under any theme. A theme restyles by setting the --aff-*
 * custom properties below on :root, and may override any rule. Nothing here loads a font or a remote resource.
 *
 * Variables a theme can set (defaults in brackets):
 *   --aff-color-ink [#1a1a1a]       text and headings
 *   --aff-color-muted [#4f5b66]     secondary text (4.5:1 on the surface)
 *   --aff-color-surface [#fff]      cards and panels
 *   --aff-color-page [#f6f7f8]      page background behind cards
 *   --aff-color-tint [#eceff2]      quiet fills (table headers, selected rows)
 *   --aff-color-line [#d6dbe0]      decorative borders
 *   --aff-color-control [#5c6670]   borders of inputs and secondary buttons (3:1 on the surface)
 *   --aff-color-brand [#1d4f91]     buttons and links
 *   --aff-color-brand-strong [#163b6c]
 *   --aff-color-brand-ink [#fff]    text on the brand color
 *   --aff-color-accent [#f2c94c]    restrained highlight
 *   --aff-color-focus [#1a1a1a]     focus rings
 *   --aff-font-display, --aff-font-body, --aff-radius-control, --aff-radius-card
 */

/* ---------------------------------------------------------------- base */
.aff-product-page, .aff-catalog, .aff-compare-page, .aff-workbench, .aff-contact, .aff-content-list, .aff-tiles,
.aff-hero, .aff-card, .aff-cta, .aff-filters-panel { box-sizing: border-box; }
.aff-product-page *, .aff-catalog *, .aff-compare-page *, .aff-workbench *, .aff-contact *, .aff-card * { box-sizing: border-box; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus-visible { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }
[hidden] { display: none !important; }

.aff-product-page, .aff-catalog, .aff-compare-page, .aff-workbench, .aff-contact, .aff-content-list, .aff-tiles, .aff-card {
	color: var(--aff-color-ink, #1a1a1a);
	font-family: var(--aff-font-body, inherit);
}
.aff-catalog a:focus-visible, .aff-product-page a:focus-visible, .aff-compare-page a:focus-visible, .aff-card a:focus-visible,
.aff-workbench a:focus-visible, .aff-tiles a:focus-visible, .aff-content-list a:focus-visible, .aff-tray a:focus-visible,
.aff-filters-panel a:focus-visible, .aff-suggest a:focus-visible, .aff-contact a:focus-visible,
.aff-button:focus-visible, .aff-icon-button:focus-visible, .aff-thumb:focus-visible, .aff-search__clear:focus-visible,
.aff-catalog input:focus-visible, .aff-catalog select:focus-visible, .aff-contact input:focus-visible, .aff-contact textarea:focus-visible,
.aff-table-wrap:focus-visible {
	outline: 3px solid var(--aff-color-focus, #1a1a1a);
	outline-offset: 2px;
}
.aff-tray :focus-visible, .aff-tray a:focus-visible { outline-color: var(--aff-color-accent, #f2c94c); }

/* ---------------------------------------------------------------- buttons, badges, notices */
.aff-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; min-width: 44px; padding: .5rem 1.125rem;
	border: 2px solid var(--aff-color-brand, #1d4f91); border-radius: var(--aff-radius-control, 4px);
	background: var(--aff-color-brand, #1d4f91); color: var(--aff-color-brand-ink, #fff);
	font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.aff-button:hover { background: var(--aff-color-brand-strong, #163b6c); border-color: var(--aff-color-brand-strong, #163b6c); color: var(--aff-color-brand-ink, #fff); }
.aff-button--secondary { background: var(--aff-color-surface, #fff); color: var(--aff-color-brand, #1d4f91); border-color: var(--aff-color-control, #5c6670); }
.aff-button--secondary:hover { background: var(--aff-color-tint, #eceff2); color: var(--aff-color-brand-strong, #163b6c); border-color: var(--aff-color-brand-strong, #163b6c); }
.aff-button.is-active { border-color: var(--aff-color-brand, #1d4f91); box-shadow: inset 0 -4px 0 var(--aff-color-accent, #f2c94c); }
.aff-button__icon { font-size: 1.1em; line-height: 1; }
.aff-link { color: var(--aff-color-brand, #1d4f91); font-weight: 600; }
.aff-icon-button {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 1px solid var(--aff-color-control, #5c6670); border-radius: var(--aff-radius-control, 4px);
	background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.aff-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.aff-badge {
	display: inline-block; padding: .125rem .5rem; border: 1px solid var(--aff-color-control, #5c6670); border-radius: 2px;
	background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
.aff-badge--demo { background: var(--aff-color-accent, #f2c94c); border-color: var(--aff-color-ink, #1a1a1a); }
.aff-badge--lowest { background: var(--aff-color-tint, #eceff2); border-color: var(--aff-color-brand, #1d4f91); color: var(--aff-color-brand-strong, #163b6c); }
.aff-notice, .aff-state {
	margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--aff-color-line, #d6dbe0); border-left-width: 4px; border-radius: var(--aff-radius-control, 4px);
	background: var(--aff-color-surface, #fff);
}
.aff-notice--success { border-left-color: var(--aff-color-positive, #176b45); }
.aff-notice--error { border-left-color: var(--aff-color-negative, #b3261e); }
.aff-state { padding: 1.5rem; border-left-width: 1px; text-align: left; }
.aff-state__title { margin: 0 0 .5rem; font-family: var(--aff-font-display, inherit); font-size: 1.5rem; line-height: 1.15; }
.aff-empty { margin: 1rem 0; color: var(--aff-color-muted, #4f5b66); }

/* ---------------------------------------------------------------- product image */
.aff-product-image { margin: 0; aspect-ratio: 4 / 3; background: var(--aff-color-tint, #eceff2); overflow: hidden; }
.aff-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aff-product-image--placeholder {
	display: flex; align-items: flex-end; padding: 1rem; border: 1px dashed var(--aff-color-control, #5c6670);
	color: var(--aff-color-muted, #4f5b66); background: var(--aff-color-tint, #eceff2);
}
.aff-product-image__name { font-weight: 600; font-size: .9375rem; }

/* ---------------------------------------------------------------- grid and cards */
.aff-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.aff-grid__item { display: flex; min-width: 0; }
.aff-card {
	display: flex; flex-direction: column; width: 100%;
	border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); overflow: hidden;
}
.aff-card .aff-product-image { border-bottom: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-card__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem 1rem .5rem; }
.aff-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }
.aff-card__brand { font-weight: 700; color: var(--aff-color-ink, #1a1a1a); }
.aff-card__title { margin: 0; font-family: var(--aff-font-display, inherit); font-size: 1.375rem; line-height: 1.15; }
.aff-card__title a { color: inherit; text-decoration: none; }
.aff-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aff-card__description { margin: 0; font-size: .9375rem; color: var(--aff-color-ink, #1a1a1a); }
.aff-offer-summary { margin-top: auto; padding-top: .5rem; }
.aff-offer-summary p { margin: 0; font-size: .9375rem; }
.aff-offer-summary__retailers { color: var(--aff-color-muted, #4f5b66); }
.aff-offer-summary__price { margin-top: .25rem !important; font-weight: 700; }
.aff-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 1rem 1rem; }
.aff-card__actions .aff-button { flex: 1 1 8rem; }

/* ---------------------------------------------------------------- breadcrumbs, sections, lists */
.aff-breadcrumbs { margin: 0 0 1rem; font-size: .9375rem; }
.aff-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.aff-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--aff-color-muted, #4f5b66); }
.aff-breadcrumbs a { color: var(--aff-color-brand, #1d4f91); }
.aff-breadcrumbs [aria-current] { color: var(--aff-color-muted, #4f5b66); }
.aff-section { margin: 0 0 2.5rem; }
.aff-section > h2 { margin: 0 0 1rem; font-family: var(--aff-font-display, inherit); font-size: 1.75rem; line-height: 1.1; }
.aff-list { margin: 0; padding-left: 1.25rem; }
.aff-list li + li { margin-top: .375rem; }
.aff-two { display: grid; gap: 1.5rem; }
.aff-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.aff-chip-link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--aff-color-control, #5c6670);
	border-radius: 999px; background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font-weight: 600; text-decoration: none;
}
.aff-chip-link:hover { background: var(--aff-color-tint, #eceff2); }
.aff-link-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.aff-link-list > li { padding: 1rem; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); }
.aff-link-list__kind { margin: 0 0 .25rem; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; font-weight: 600; }
.aff-link-list__title { margin: 0 0 .25rem; font-family: var(--aff-font-display, inherit); font-size: 1.375rem; line-height: 1.15; }

/* ---------------------------------------------------------------- product page */
.aff-product-page { max-width: 76rem; margin: 0 auto; }
.aff-hero { display: grid; gap: 1.5rem; margin: 0 0 2rem; }
.aff-hero__media { min-width: 0; }
.aff-hero__body { min-width: 0; }
.aff-hero__brand { margin: 0 0 .25rem; color: var(--aff-color-muted, #4f5b66); font-weight: 700; }
.aff-hero__title { margin: 0 0 .75rem; font-family: var(--aff-font-display, inherit); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.05; }
.aff-hero__verdict { margin: 0 0 1rem; font-size: 1.1875rem; }
.aff-hero__compare { margin: 1rem 0 0; }
.aff-hero__facts { display: grid; gap: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-hero__facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-hero__facts dt { color: var(--aff-color-muted, #4f5b66); }
.aff-hero__facts dd { margin: 0; font-weight: 600; text-align: right; }
.aff-gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.aff-thumb { display: block; width: 72px; height: 72px; padding: 0; border: 2px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-control, 4px); background: var(--aff-color-surface, #fff); overflow: hidden; cursor: pointer; }
.aff-thumb[aria-pressed="true"] { border-color: var(--aff-color-brand, #1d4f91); }
.aff-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aff-cta { display: grid; gap: .75rem; margin: 1.25rem 0 0; justify-items: start; }
.aff-disclosure { margin: 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; max-width: 40rem; }
.aff-disclosure a, .aff-disclosure__link { color: var(--aff-color-brand, #1d4f91); }
.aff-summary__evidence, .aff-summary__reviewed { margin: .5rem 0 0; color: var(--aff-color-muted, #4f5b66); font-size: .9375rem; }
.aff-proscons, .aff-fit { display: grid; gap: 1.5rem; }
.aff-proscons h3, .aff-fit h3 { margin: 0 0 .5rem; font-family: var(--aff-font-display, inherit); font-size: 1.375rem; }
.aff-list--pro li::marker { color: var(--aff-color-positive, #176b45); content: "+ "; font-weight: 700; }
.aff-list--con li::marker { color: var(--aff-color-negative, #b3261e); content: "\2212  "; font-weight: 700; }

/* tables */
.aff-table-wrap { overflow-x: auto; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); }
.aff-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.aff-table caption { padding: .75rem 1rem; text-align: left; font-weight: 700; }
.aff-table th, .aff-table td { padding: .625rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-table th[scope="row"] { width: 38%; font-weight: 600; color: var(--aff-color-ink, #1a1a1a); }
.aff-table [scope="colgroup"], .aff-table__group th { background: var(--aff-color-tint, #eceff2); font-family: var(--aff-font-display, inherit); font-size: 1.0625rem; font-weight: 700; }
.aff-table__missing { color: var(--aff-color-muted, #4f5b66); font-style: italic; }

/* where to buy */
.aff-offers__claim { margin: 0 0 1rem; }
.aff-offers__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.aff-offer {
	display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff);
}
.aff-offer--lowest { border-color: var(--aff-color-brand, #1d4f91); }
.aff-offer__who, .aff-offer__price { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.aff-offer__retailer { font-family: var(--aff-font-display, inherit); font-size: 1.375rem; font-weight: 700; }
.aff-offer__detail, .aff-offer__note, .aff-offer__stock, .aff-offer__asof { color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }
.aff-offer__amount { font-size: 1.5rem; font-weight: 700; }
.aff-offers__notice { margin: .75rem 0 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }

/* ---------------------------------------------------------------- catalog */
.aff-catalog__head { margin: 0 0 1.5rem; }
.aff-catalog__title { margin: 0 0 .5rem; font-family: var(--aff-font-display, inherit); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.05; }
.aff-catalog__intro { margin: 0; max-width: 42rem; font-size: 1.125rem; }
.aff-toolbar { display: grid; gap: .75rem; margin: 0 0 1rem; }
.aff-search { position: relative; display: flex; gap: .5rem; align-items: stretch; }
.aff-search__field { position: relative; flex: 1; min-width: 0; }
.aff-search input[type="search"] {
	width: 100%; min-height: 48px; padding: 0 3rem 0 .875rem; border: 1px solid var(--aff-color-control, #5c6670); border-radius: var(--aff-radius-control, 4px);
	background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font: inherit; -webkit-appearance: none; appearance: none;
}
.aff-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.aff-search__clear {
	position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 0; background: transparent; color: var(--aff-color-ink, #1a1a1a); font-size: 1.5rem; line-height: 1; text-decoration: none; cursor: pointer;
}
.aff-suggest {
	position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 18rem; overflow: auto; margin: 0; padding: .25rem; list-style: none;
	border: 1px solid var(--aff-color-control, #5c6670); border-radius: var(--aff-radius-control, 4px); background: var(--aff-color-surface, #fff);
}
.aff-suggest li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .5rem .75rem; cursor: pointer; }
.aff-suggest li[aria-selected="true"], .aff-suggest li:hover { background: var(--aff-color-tint, #eceff2); }
.aff-suggest a { color: var(--aff-color-ink, #1a1a1a); text-decoration: none; font-weight: 600; }
.aff-suggest__meta { color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }
.aff-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.aff-count { margin: 0; font-weight: 700; }
.aff-field { display: grid; gap: .25rem; }
.aff-field label, .aff-fieldset legend { font-weight: 600; }
.aff-field input, .aff-field select, .aff-field textarea {
	width: 100%; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--aff-color-control, #5c6670); border-radius: var(--aff-radius-control, 4px);
	background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font: inherit;
}
.aff-field textarea { min-height: 9rem; }
.aff-sort { display: flex; align-items: center; gap: .5rem; }
.aff-sort select { width: auto; min-width: 11rem; }
.aff-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.aff-filter-chip {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .875rem; border: 1px solid var(--aff-color-control, #5c6670); border-radius: 999px;
	background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font-weight: 600; text-decoration: none;
}
.aff-filter-chip:hover { background: var(--aff-color-tint, #eceff2); }
.aff-catalog__body { display: grid; gap: 1.5rem; align-items: start; }
.aff-catalog__results { min-width: 0; }
.aff-filters-panel { padding: 1rem; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); }
.aff-filters-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; }
.aff-filters-panel__title { margin: 0; font-family: var(--aff-font-display, inherit); font-size: 1.5rem; }
.aff-filters-panel__note, .aff-fieldset__note { margin: .5rem 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }
.aff-fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.aff-fieldset legend { padding: 0; margin: 0 0 .375rem; }
.aff-fieldset ul { margin: 0; padding: 0; list-style: none; }
.aff-fieldset li label { display: flex; align-items: center; gap: .625rem; min-height: 44px; }
.aff-fieldset input[type="checkbox"], .aff-fieldset input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--aff-color-brand, #1d4f91); }
.aff-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.aff-filters-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
.aff-pagination { margin: 2rem 0 0; }
.aff-pagination ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.aff-pagination a, .aff-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--aff-color-control, #5c6670);
	border-radius: var(--aff-radius-control, 4px); background: var(--aff-color-surface, #fff); color: var(--aff-color-ink, #1a1a1a); font-weight: 600; text-decoration: none;
}
.aff-pagination .current { background: var(--aff-color-ink, #1a1a1a); border-color: var(--aff-color-ink, #1a1a1a); color: var(--aff-color-surface, #fff); }
.aff-pagination a:hover { background: var(--aff-color-tint, #eceff2); }
.aff-pagination .dots { border-color: transparent; background: transparent; }

/* The filter drawer exists only with a script, on small screens. Without one the panel is simply shown above the results. */
.aff-backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(24, 43, 58, .55); }
html.aff-lock { overflow: hidden; }
.aff-filters-panel.is-drawer {
	display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; width: min(24rem, 100%); margin: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
}
.aff-filters-panel.is-drawer.is-open { display: block; }
.aff-filters-panel.is-drawer .aff-filters-panel__actions {
	position: sticky; bottom: -1rem; margin: 1rem -1rem -1rem; padding: .75rem 1rem; border-top: 1px solid var(--aff-color-line, #d6dbe0); background: var(--aff-color-surface, #fff);
}

/* ---------------------------------------------------------------- comparison */
.aff-compare-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; }
.aff-compare-page__note { margin: 1rem 0 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; }
.aff-table--compare { min-width: 36rem; table-layout: fixed; }
.aff-table--compare th[scope="row"], .aff-table--compare .aff-table__corner { width: 9.5rem; }
.aff-table--compare thead th, .aff-table--compare thead td { border-top: 0; vertical-align: bottom; }
.aff-table--compare tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--aff-color-surface, #fff); box-shadow: 1px 0 0 var(--aff-color-line, #d6dbe0); }
.aff-table--compare .aff-table__group th { position: static; box-shadow: none; }
.aff-table__product { font-weight: 700; }
.aff-table__product > * { display: block; margin-bottom: .5rem; }
.aff-table__product > .aff-product-image { max-width: 9rem; }
.aff-table__product > a:not(.aff-link-remove) { color: var(--aff-color-ink, #1a1a1a); }
.aff-table__brand { color: var(--aff-color-muted, #4f5b66); font-size: .875rem; font-weight: 600; }
.aff-link-remove { color: var(--aff-color-brand, #1d4f91); font-size: .875rem; font-weight: 600; }
.aff-table__retailers { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.aff-table__retailers .aff-button { width: 100%; font-size: .9375rem; }

/* comparison tray */
.aff-tray {
	position: fixed; z-index: 9999; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem;
	padding: .75rem 1rem; background: var(--aff-color-ink, #1a1a1a); color: var(--aff-color-surface, #fff);
}
.aff-tray__count { margin: 0; font-weight: 700; }
.aff-tray .aff-button { background: var(--aff-color-accent, #f2c94c); border-color: var(--aff-color-accent, #f2c94c); color: var(--aff-color-ink, #1a1a1a); }
.aff-tray .aff-button--secondary { background: transparent; border-color: var(--aff-color-surface, #fff); color: var(--aff-color-surface, #fff); }
html:has(.aff-tray:not([hidden])) { scroll-padding-bottom: 8rem; }
body:has(.aff-tray:not([hidden])) { padding-bottom: 5.5rem; }

/* ---------------------------------------------------------------- tiles, workbench, content lists */
.aff-tiles { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.aff-tile { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); }
.aff-tile__title { margin: 0; font-family: var(--aff-font-display, inherit); font-size: 1.625rem; line-height: 1.1; }
.aff-tile__title a { color: inherit; text-decoration: none; }
.aff-tile__title a::after { content: ""; position: absolute; inset: 0; }
.aff-tile { position: relative; }
.aff-tile:hover { border-color: var(--aff-color-brand, #1d4f91); }
.aff-tile:focus-within { outline: 3px solid var(--aff-color-focus, #1a1a1a); outline-offset: 2px; }
.aff-tile__title a:focus-visible { outline: none; }
.aff-tile__blurb { margin: 0; font-size: .9375rem; }
.aff-tile__count { margin: auto 0 0; padding-top: .5rem; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; font-weight: 600; }

.aff-workbench__list, .aff-content-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.aff-bench, .aff-content-card {
	display: grid; min-width: 0; border: 1px solid var(--aff-color-line, #d6dbe0); border-radius: var(--aff-radius-card, 6px); background: var(--aff-color-surface, #fff); overflow: hidden;
}
.aff-bench__media, .aff-content-card__media { display: block; aspect-ratio: 16 / 10; background: var(--aff-color-tint, #eceff2); overflow: hidden; }
.aff-bench__media img, .aff-content-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aff-bench__body, .aff-content-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; }
.aff-bench__title, .aff-content-card__title { margin: 0; font-family: var(--aff-font-display, inherit); font-size: 1.75rem; line-height: 1.08; }
.aff-bench__title a, .aff-content-card__title a { color: inherit; text-decoration: none; }
.aff-bench__title a:hover, .aff-content-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aff-bench__goal { margin: 0; font-size: 1.0625rem; }
.aff-bench__label { margin: .5rem 0 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; font-weight: 700; }
.aff-bench__products { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-bench__products li { border-bottom: 1px solid var(--aff-color-line, #d6dbe0); }
.aff-bench__products a { display: flex; align-items: center; min-height: 44px; color: var(--aff-color-brand, #1d4f91); font-weight: 600; }
.aff-bench__body > p:last-child { margin: .5rem 0 0; }
.aff-content-card__meta { margin: 0; color: var(--aff-color-muted, #4f5b66); font-size: .875rem; font-weight: 600; }
.aff-workbench__more { margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------- forms */
.aff-form { display: grid; gap: 1rem; max-width: 36rem; }
.aff-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- larger screens */
@media (min-width: 40em) {
	.aff-two, .aff-proscons, .aff-fit { grid-template-columns: 1fr 1fr; }
	.aff-link-list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
	.aff-offer { grid-template-columns: 1fr auto auto; align-items: center; }
	.aff-workbench__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
	.aff-content-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
	.aff-toolbar { grid-template-columns: 1fr; }
}
@media (min-width: 48em) {
	.aff-hero { grid-template-columns: 5fr 6fr; gap: 2.5rem; }
	.aff-catalog__title { margin-bottom: .75rem; }
}
@media (min-width: 64em) {
	.aff-catalog__body { grid-template-columns: 16.5rem minmax(0, 1fr); }
	.aff-filters-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
	.aff-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
	.aff-toolbar__row { justify-content: flex-end; }
}
@media (prefers-reduced-motion: no-preference) {
	.aff-button, .aff-chip-link, .aff-filter-chip, .aff-tile { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}
@media (forced-colors: active) {
	.aff-button, .aff-badge, .aff-card, .aff-tile { border: 1px solid CanvasText; }
}
.aff-fit > h2, .aff-proscons > h2 { grid-column: 1 / -1; }
.aff-tile--more { justify-content: center; border-style: dashed; border-color: var(--aff-color-control, #5c6670); background: var(--aff-color-tint, #eceff2); }
.aff-tile--more::before { display: none; }