/* AE Theme */
/* Fonts are self-hosted (assets/vendor, sources in scripts/vendor-assets.md): no request leaves the site. Text swaps from the fallback to Inter; icons wait for their font (swap would show an empty box). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/inter/InterVariable-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "bootstrap-icons";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url(vendor/bootstrap-icons/bootstrap-icons-1.13.2-s5.woff2) format("woff2");
}
:root {
  --ae-bg: #ffffff;
  --ae-surface: #f6f7f9;
  --ae-surface-2: #eceef1;
  --ae-card: #ffffff;
  --ae-text: #1c2127;
  --ae-muted: #5f6b76;
  --ae-border: #e3e6ea;
  --ae-link: #0b62c4;
  --ae-accent: #f08804;
  --ae-accent-hover: #d97904;
  --ae-accent-ink: #a84a08;  /* orange as text: 5.4:1 on the page surface; --ae-accent itself is 2.55:1 on white */
  --ae-buy: #c2410c;  /* the orange Amazon button: white text on it is 5.2:1 (hover 7.3:1) */
  --ae-buy-hover: #9a3412;
  --ae-badge: #1c2127;
  --ae-good: #1a7f37;
  --ae-bad: #c2362f;
  --ae-brand: #1f7a5c;
  --ae-brand-ink: #17644a;
  --ae-brand-soft: #e3f2ec;
  --ae-rank: #d63c3c;
  --ae-mark: #8c0b24;  /* heading icons and the bar beside an article H2: 9.6:1 on white */
  --ae-hero-from: #dcf3e9;
  --ae-hero-to: #fde7ea;
  --ae-pill-best-bg: #fde8e8;
  --ae-pill-best-fg: #b42323;
  --ae-pill-pick-bg: #fff1dc;
  --ae-pill-pick-fg: #8f4a00;
  --ae-pill-limited-bg: #f1e9fd;
  --ae-pill-limited-fg: #5b2bb0;
  --ae-pill-top-bg: #e0f3ea;
  --ae-pill-top-fg: #17644a;
  --ae-pill-prime-bg: #e4f0fb;
  --ae-pill-prime-fg: #0b4f9c;
  --ae-pill-teal-bg: #dcf3f1;  /* editorial pills, a tone per place (Ruling 34): place 1 keeps the "pick" amber, 2 teal, 3 olive, 4 rose */
  --ae-pill-teal-fg: #0f5f5a;
  --ae-pill-olive-bg: #eef4d6;
  --ae-pill-olive-fg: #4a5d00;
  --ae-pill-rose-bg: #fde7f0;
  --ae-pill-rose-fg: #a3215c;
  --ae-radius: 12px;
  --ae-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 14px rgba(16, 24, 40, .06);
  color-scheme: light;
}
html[data-theme="dark"] {
  --ae-bg: #0f1216;
  --ae-surface: #161b21;
  --ae-surface-2: #20272f;
  --ae-card: #1a2027;
  --ae-text: #e8ecf0;
  --ae-muted: #9aa6b2;
  --ae-border: #2a323b;
  --ae-link: #6cb2ff;
  --ae-accent-ink: #f08804;
  --ae-buy: #c2410c;
  --ae-buy-hover: #9a3412;
  --ae-badge: #e8ecf0;
  --ae-brand: #1f7a5c;
  --ae-brand-ink: #6fd4ab;
  --ae-brand-soft: #173229;
  --ae-rank: #c93434;
  --ae-mark: #e05569;
  --ae-hero-from: #11261f;
  --ae-hero-to: #2a1b22;
  --ae-pill-best-bg: #3a1d1f;
  --ae-pill-best-fg: #ffb4b4;
  --ae-pill-pick-bg: #3a2a14;
  --ae-pill-pick-fg: #ffd08a;
  --ae-pill-limited-bg: #2c2145;
  --ae-pill-limited-fg: #d4bfff;
  --ae-pill-top-bg: #17332a;
  --ae-pill-top-fg: #8fe0bd;
  --ae-pill-prime-bg: #14293f;
  --ae-pill-prime-fg: #9cc9ff;
  --ae-pill-teal-bg: #123230;
  --ae-pill-teal-fg: #86e0d6;
  --ae-pill-olive-bg: #2b3214;
  --ae-pill-olive-fg: #d4e58f;
  --ae-pill-rose-bg: #3a1a2a;
  --ae-pill-rose-fg: #ffb3d1;
  --ae-shadow: none;
  color-scheme: dark;
}
/* A product photo is shot on white and the white is in the file: in a dark card it glares, so dark mode dims the product photos 15%, and the
   white boxes some of them sit in as much (#fff at 85%), so no bright frame is left. Post pictures, store logos and avatars keep their colours. */
html[data-theme="dark"] :is(.ae-card__img, .ae-top-picks__img, .ae-toppick__img, .ae-dir-item__img, .ae-compare__img, .ae-post-hero__product-img, .ae-post-card__media--product img, .ae-popular__thumb--product img, .ae-related__media--product img, .ae-mag-media--product img) { filter: brightness(.85); }
html[data-theme="dark"] :is(.ae-post-card__media--product, .ae-popular__thumb--product, .ae-mag-media--product) { background: #d9d9d9; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ae-bg); color: var(--ae-text); font: 16px/1.5 "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: var(--ae-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* The theme's avatars, whatever the image behind them (an upload that is not square): a square, cropped to the circle. Only the theme's own places:
   an avatar a plugin or the admin bar draws keeps its shape. */
.ae-byline .avatar, .ae-author-box .avatar, .ae-author-head .avatar, .ae-team__member .avatar { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.ae-container { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 16px; }
.ae-skip { position: absolute; left: -9999px; }
.ae-skip:focus { left: 8px; top: 8px; background: var(--ae-card); padding: 8px 12px; z-index: 100; }
.ae-muted { color: var(--ae-muted); }
.bi::before { display: inline-block; font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Disclosure + header */
.ae-disclosure-bar { background: var(--ae-surface); border-bottom: 1px solid var(--ae-border); font-size: 13px; line-height: 1.5; color: var(--ae-muted); padding: 8px 0; }
.ae-disclosure-bar__inner { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 1440px; }
.ae-disclosure-bar .bi { flex: none; margin-top: 2px; font-size: 14px; }
.ae-disclosure-bar a { color: var(--ae-brand-ink); font-weight: 600; white-space: nowrap; }
.ae-header { background: var(--ae-bg); border-bottom: 1px solid var(--ae-border); position: sticky; top: 0; z-index: 50; }
/* A link or control reached by keyboard just under the top edge is scrolled clear of the sticky header (69 px) and its focus ring, as a jump
   target is by its scroll-margin-top (80 px): this holds in the whole page body. Not scroll-padding on html: it would add to those margins (every
   jump would land 160 px down) and would scroll the page when the header's own links take focus (they are outside .ae-main, so they get nothing).
   [tabindex="0"] is the sideways scrollers (Related Articles, the Magazine carousel, the Compare and guide tables): a div that takes the keyboard focus
   so the arrow keys scroll it, and gets a focus ring, so it needs the clearance as much as a link does. */
.ae-main :where(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible { scroll-margin-top: 80px; }
/* A directory page with the script: its controls clear the filter bar that sticks under the header too (theme.js measures header, bar and air into
   --ae-dir-stuck). In the phone view the cards scroll under the sheet's own Back bar (57 px) instead. */
.ae-dir--js :where(a, button, input, select, textarea, summary):focus-visible { scroll-margin-top: var(--ae-dir-stuck, 145px); }
.ae-dir--sheet .ae-dir-cards :where(a, button, input, select, textarea, summary):focus-visible { scroll-margin-top: 64px; }
/* What sticks to the top or scrolls inside itself needs none: its controls are never under the header, and a margin would scroll the page (the stuck
   filter bar's buttons sit at 77 px on a phone, the A-Z bar's letters at 72 px, the Back bar's at 8 px) or a panel's own list when one takes focus (the
   list panel of a wide directory page, which sticks too, has its own rule in the 1024 px block). */
.ae-dir--sheet .ae-dir-sheet__bar :where(a, button, input, select, textarea, summary):focus-visible,
:is(.ae-dir-bar, .ae-az-bar, .ae-dd__panel, .ae-toc-panel) :where(a, button, input, select, textarea, summary):focus-visible { scroll-margin-top: 0; }
.ae-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.ae-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 22px; color: var(--ae-text); letter-spacing: -.02em; }
.ae-logo:hover { text-decoration: none; }
.ae-logo__mark { background: var(--ae-brand); color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 800; }
.ae-logo .custom-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 48px; }
.ae-nav { flex: 1; display: flex; justify-content: center; }
.ae-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.ae-menu li { position: relative; }
.ae-menu a { color: var(--ae-text); font-weight: 600; font-size: 15px; display: block; padding: 8px 0; }
.ae-menu a:hover { color: var(--ae-brand-ink); text-decoration: none; }
.ae-menu .children, .ae-menu .sub-menu { display: none; position: absolute; top: 100%; left: -12px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: 10px; box-shadow: var(--ae-shadow); list-style: none; margin: 0; padding: 8px 12px; min-width: 220px; z-index: 60; }
@media (min-width: 1024px) { .ae-menu li:hover > .children, .ae-menu li:hover > .sub-menu, .ae-menu li:focus-within > .children, .ae-menu li:focus-within > .sub-menu { display: block; } }
.ae-menu .children a, .ae-menu .sub-menu a { font-weight: 500; }
.ae-header__tools { display: flex; align-items: center; flex: none; gap: 6px; }
.ae-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ae-text); border-radius: 10px; width: 40px; height: 40px; font-size: 19px; cursor: pointer; }
.ae-icon-btn:hover { background: var(--ae-surface); text-decoration: none; }  /* the Search tool is a link */
.ae-theme-toggle .bi-sun, html[data-theme="dark"] .ae-theme-toggle .bi-moon-stars { display: none; }
html[data-theme="dark"] .ae-theme-toggle .bi-sun { display: inline; }
.ae-menu-toggle { display: none; }
.ae-drawer__head, .ae-drawer__foot, .ae-menu__toggle { display: none; }  /* the phone drawer's head and bottom cluster, and the simple menu's "+" (theme.js): below 1024px only */
.ae-deals-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: 6px; padding: 0 16px; background: var(--ae-brand); color: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ae-deals-btn:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
.ae-deals-btn .bi { font-size: 15px; }
.ae-icon-btn:focus-visible, .ae-deals-btn:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
/* Search dialog (the header's Search link, theme.js): a card near the top, centred, over a dark blurred backdrop. The backdrop is the dialog's own box, so a press on it closes the dialog. */
.ae-search-modal { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: flex-start; justify-content: center; padding: 16vh 16px 16px; overflow-y: auto; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ae-search-modal[hidden] { display: none; }
html.ae-search-open { overflow: hidden; }
.ae-search-modal__panel { position: relative; width: 100%; max-width: 580px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.ae-search-modal__form { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 12px 0 18px; border-bottom: 2px solid transparent; color: var(--ae-muted); font-size: 18px; }
.ae-search-modal__form:focus-within { border-bottom-color: var(--ae-brand-ink); }
.ae-search-modal__input { flex: 1 1 auto; min-width: 0; padding: 16px 0; border: 0; background: none; color: var(--ae-text); font-size: 17px; outline: none; }  /* the form draws the focus ring */
.ae-search-modal__input::placeholder { color: var(--ae-muted); opacity: 1; }
.ae-search-modal__input::-webkit-search-cancel-button { display: none; }  /* the close chip is the one X */
.ae-search-modal__close { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 44px; padding: 0 8px; border: 1px solid var(--ae-border); border-radius: 6px; background: var(--ae-surface); color: var(--ae-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.ae-search-modal__close:hover { color: var(--ae-text); }
.ae-search-modal__close:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-search-modal__x { display: none; font-size: 16px; }
.ae-search-modal__results { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 10px; border-top: 1px solid var(--ae-border); }
.ae-search-modal__results[hidden], .ae-search-modal__empty[hidden] { display: none; }
.ae-search-modal__head { margin: 0; padding: 10px 10px 4px; color: var(--ae-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ae-search-modal__opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ae-text); font-size: 15px; line-height: 1.35; }
.ae-search-modal__opt:hover { background: var(--ae-surface); text-decoration: none; }
.ae-search-modal__opt[aria-selected="true"] { background: var(--ae-brand-soft); }
.ae-search-modal__opt .bi { flex: none; color: var(--ae-muted); }
.ae-search-modal__name { min-width: 0; overflow-wrap: anywhere; }
.ae-search-modal__empty { margin: 0; padding: 18px 10px; color: var(--ae-muted); font-size: 14px; text-align: center; }
.ae-search-modal__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* heard, not seen */
@media (max-width: 600px) {  /* a phone has no Escape key: the chip becomes a 40px close button */
  .ae-search-modal { padding-top: 12vh; }
  .ae-search-modal__close { width: 40px; min-width: 0; height: 40px; border-radius: 10px; }
  .ae-search-modal__esc { display: none; }
  .ae-search-modal__x { display: inline; }
}
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: 10px 12px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 16px; }
.search-submit, .ae-btn { background: var(--ae-text); color: var(--ae-bg); border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; cursor: pointer; font-size: 15px; }
.ae-main { padding: 28px 0 56px; }

/* Home */
.ae-featured { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 240px); gap: 20px; margin-bottom: 40px; }
.ae-featured .ae-post-card--hero { grid-row: span 2; }
.ae-home-layout, .ae-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; }
/* The head of a home's article row (ae_theme_section_head, always boxed): no rule under it, the icon in a square, a pill link on the right. */
.ae-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ae-section-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; }
.ae-section-head__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ae-surface); color: var(--ae-brand-ink); font-size: 19px; }
.ae-section-head__sub { margin: 4px 0 0; font-size: 14px; color: var(--ae-muted); }
.ae-section-head__all { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--ae-border); border-radius: 999px; color: var(--ae-text); font-size: 14px; font-weight: 600; }
.ae-section-head__all:hover { border-color: var(--ae-brand); text-decoration: none; }
/* The Reviews home's Latest section and sidebar: a band as wide as the page. The head's icon box is the surface colour too, so on the band it takes the card colour or it would not show. */
.ae-latest-band { background: var(--ae-surface); padding: 32px 0; }
.ae-latest-band .ae-section-head__icon { background: var(--ae-card); }
.ae-main:has(> .ae-latest-band:last-child) { padding-bottom: 0; }  /* with the newsletter off the band ends the page: main's 56px would show as a white strip between the band and the footer, both grey */
.ae-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.ae-load-more { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 26px auto 0; padding: 12px 28px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); }
.ae-load-more:hover:not(:disabled) { border-color: var(--ae-brand); }
.ae-empty { color: var(--ae-muted); }

/* Post cards */
.ae-post-card { background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ae-shadow); }
.ae-post-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--ae-surface); overflow: hidden; }
.ae-post-card__photo { display: block; width: 100%; height: 100%; }
.ae-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ae-post-card:hover .ae-post-card__media img { transform: scale(1.03); }
.ae-post-card__media--product { background: #fff; }  /* a post without a picture shows its product photo: fitted, not cropped */
.ae-post-card__media--product img { object-fit: contain; padding: 14px; }
.ae-post-card__placeholder { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--ae-muted); font-weight: 700; padding: 12px; text-align: center; }
.ae-post-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ae-post-card__chip { position: absolute; top: 10px; left: 10px; z-index: 1; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; background: var(--ae-card); color: var(--ae-accent-ink); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ae-post-card__title { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.ae-post-card__title a { color: var(--ae-text); }
.ae-post-card__excerpt { margin: 0; color: var(--ae-muted); font-size: 15px; }
.ae-post-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--ae-muted); }
.ae-post-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ae-post-card__meta .bi { color: var(--ae-brand-ink); }
.ae-post-card--hero .ae-post-card__title { font-size: 28px; }
/* The image tiles of the Reviews home (hero, feature): the picture fills the tile and the text sits in white on a black fade at the bottom.
   From the text's first line down the black is 72% or more, so white text reads on the lightest picture (9:1 over white). The text block
   lets clicks through to the picture's link behind it: the whole tile is a link. */
.ae-post-card--overlay { position: relative; justify-content: flex-end; min-height: 240px; border: 0; color: rgb(255, 255, 255); }
.ae-post-card--overlay .ae-post-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.ae-post-card--overlay .ae-post-card__body { position: relative; z-index: 1; flex: none; gap: 8px; padding: 40px 18px 18px; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .72) calc(100% - 40px), rgba(0, 0, 0, 0) 100%); }
.ae-post-card--overlay .ae-post-card__body a { pointer-events: auto; }
.ae-post-card--overlay .ae-post-card__chip { position: static; align-self: flex-start; }
.ae-post-card--overlay .ae-post-card__title a { color: rgb(255, 255, 255); }
.ae-post-card--overlay .ae-post-card__meta { margin-top: 0; color: rgba(255, 255, 255, .9); }
.ae-post-card--overlay .ae-post-card__meta .bi { color: inherit; }
/* A tile without a picture of its own shows the product photo contained on the surface colour, in the upper part above the text; with no picture at all the tile is the brand colour. */
.ae-post-card--overlay .ae-post-card__media--product { background: var(--ae-surface); }
.ae-post-card--overlay .ae-post-card__media--product img { height: 52%; padding: 12px 16px; }
.ae-post-card--noimg { background: var(--ae-brand); }
.ae-post-card--noimg .ae-post-card__media { background: none; }
.ae-post-card--noimg .ae-post-card__body { padding-top: 18px; background: none; }
/* The post category archive (ae_theme_rows()): the posts as row cards, the picture on the left in a box as tall as the text (the picture fills
   it, so the box needs no height of its own beyond a minimum), the sidebar beside them from 1024px and under them below. */
.ae-archive__layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; }
@media (max-width: 1023.98px) { .ae-archive__layout { grid-template-columns: minmax(0, 1fr); } }
.ae-rows { display: flex; flex-direction: column; gap: 18px; }
.ae-post-card--row { flex-direction: row; }
.ae-post-card--row .ae-post-card__media { flex: 0 0 260px; aspect-ratio: auto; min-height: 180px; }
.ae-post-card--row .ae-post-card__photo, .ae-post-card--row .ae-post-card__media img { position: absolute; inset: 0; }
.ae-post-card--row .ae-post-card__body { min-width: 0; padding: 18px 22px; }
@media (max-width: 600px) {
  .ae-post-card--row .ae-post-card__media { flex-basis: 124px; min-height: 124px; }
  .ae-post-card--row .ae-post-card__excerpt, .ae-post-card--row .ae-post-card__chip { display: none; }
  .ae-post-card--row .ae-post-card__body { padding: 12px 14px; }
}

/* Sidebar: each widget is a card, as in the reference (frames 746 and 732); the deals box keeps its own tint (its rule comes later) */
.ae-sidebar { display: flex; flex-direction: column; gap: 24px; }
.ae-widget { padding: 16px 18px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); }
.ae-widget h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ae-border); padding-bottom: 10px; margin: 0 0 12px; }
.ae-widget h2 .bi { flex: none; color: var(--ae-mark); }
.ae-cat-list { list-style: none; margin: 0; padding: 0; }
.ae-cat-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ae-border); font-size: 15px; }
.ae-cat-list a { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ae-muted); }
.ae-cat-list a:hover { color: var(--ae-text); }
.ae-cat-list a .bi { flex: none; color: var(--ae-muted); }
.ae-cat-list span { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--ae-surface); color: var(--ae-muted); font-size: 12px; font-weight: 600; line-height: 1.6; text-align: center; }
.ae-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-tags a { border: 1px solid var(--ae-border); border-radius: 20px; padding: 4px 12px; font-size: 14px; color: var(--ae-text); }

/* Article */
.ae-breadcrumb { font-size: 14px; color: var(--ae-muted); margin-bottom: 10px; }
.ae-article__title { font-size: 56px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
.ae-article__dek { font-size: 20px; color: var(--ae-muted); margin: 0 0 16px; }
.ae-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; font-size: 14px; color: var(--ae-muted); }
.ae-byline__item { display: inline-flex; align-items: center; gap: 6px; }
.ae-byline img { border-radius: 50%; }
.ae-byline__author { font-weight: 700; color: var(--ae-text); }
.ae-post-disclosure { background: var(--ae-surface); border-left: 4px solid var(--ae-accent); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; color: var(--ae-muted); border-radius: 6px; }

/* Post hero: the gradient band with a centred breadcrumb, title, dek, byline row and review button (the page starts right under the header strip) */
.ae-main:has(> .ae-post-hero:first-child) { padding-top: 0; }
.single-post .ae-main { padding-top: 0; }  /* the same for a browser without :has(); a rule of its own, as one unknown selector would void a list */
.ae-post-hero { background: linear-gradient(120deg, var(--ae-hero-from), var(--ae-hero-to)); text-align: center; padding: 34px 0 30px; }
.ae-post-hero__inner { max-width: 880px; }
.ae-post-hero .ae-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0 0 14px; }
.ae-post-hero .ae-breadcrumb a { color: var(--ae-muted); }
.ae-post-hero .ae-breadcrumb a:hover { color: var(--ae-text); }
.ae-post-hero .ae-article__title { margin: 0 auto 14px; overflow-wrap: break-word; }
.ae-post-hero .ae-article__dek { max-width: 720px; margin: 0 auto 18px; }
.ae-post-hero .ae-byline { justify-content: center; margin: 0 0 18px; }
.ae-review-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; }
.ae-review-cta .bi { color: var(--ae-brand-ink); font-size: 16px; }
.ae-review-cta:hover { border-color: var(--ae-brand); text-decoration: none; }
.ae-review-cta:focus-visible { outline: 2px solid var(--ae-brand); outline-offset: 2px; }
/* The hero image under the review button: the featured image, else the first product's photo (borrowed, so contained on the card colour), then its credit; as wide as the article column below */
.ae-post-hero__media { max-width: 808px; margin: 22px auto 0; }
.ae-post-hero__media img { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--ae-radius); }
.ae-post-hero__media .ae-post-hero__product-img { height: 360px; object-fit: contain; background: var(--ae-card); border: 1px solid var(--ae-border); }  /* a photo of unknown size gets its box at once: nothing jumps when it loads */
.ae-post-hero__media figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ae-muted); }
.ae-post-hero + .ae-single-layout { margin-top: 28px; }
/* Next article: a post theme.js appends below the one being read (AE Settings > Theme). A clear break, then the same article; its hero is a rounded band inside the column */
.ae-next-article { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--ae-border); }
.ae-next-article .ae-post-hero { border-radius: var(--ae-radius); padding: 28px 0 24px; margin-bottom: 24px; }
/* Table of contents: the card in the article, the reading-progress bar and the floating "Contents" button with its panel */
.ae-toc { border: 1px solid var(--ae-border); border-radius: var(--ae-radius); margin: 20px 0; background: var(--ae-card); box-shadow: var(--ae-shadow); overflow: hidden; }
.ae-toc__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.ae-toc__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ae-brand); color: #fff; font-size: 20px; }
.ae-toc__title { display: block; font-size: 17px; line-height: 1.3; }
.ae-toc__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ae-muted); }
.ae-toc__stat { display: inline-flex; align-items: center; gap: 5px; }
.ae-toc__list { list-style: none; margin: 0; padding: 0 10px 10px; }
.ae-toc__item a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ae-text); font-size: 15px; line-height: 1.35; }
.ae-toc__item a:hover { background: var(--ae-surface); text-decoration: none; }
.ae-toc__num { flex: none; min-width: 28px; padding: 2px 6px; border-radius: 6px; background: var(--ae-surface); color: var(--ae-muted); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ae-toc__text { min-width: 0; overflow-wrap: anywhere; }
.ae-toc__item--h3 a { margin-left: 18px; font-size: 14px; color: var(--ae-muted); }
.ae-toc__item.is-current > a { background: var(--ae-brand-soft); color: var(--ae-text); }
.ae-toc__item.is-current .ae-toc__num { background: var(--ae-brand); color: #fff; }
.ae-toc__more { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; background: var(--ae-surface); border: 0; border-top: 1px solid var(--ae-border); border-radius: 0 0 11px 11px; color: var(--ae-brand-ink); font-size: 14px; font-weight: 600; cursor: pointer; }  /* the card's bottom corners, 1px inside its border: the inside focus ring follows them */
html:not(.js) .ae-toc__more { display: none; }  /* without theme.js the H3 rows cannot unfold (the head script adds the js class before the first paint) */
.ae-toc__more span { display: inline-flex; align-items: center; gap: 6px; }
.ae-toc__more[aria-expanded="true"] .ae-toc__more-open, .ae-toc__more[aria-expanded="false"] .ae-toc__more-close { display: none; }
.ae-toc__item a:focus-visible, .ae-toc__more:focus-visible, .ae-toc-fab:focus-visible, .ae-toc-panel__top:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-toc__more:focus-visible { outline-offset: -3px; }  /* the card clips (overflow: hidden) a ring drawn outside the button */
.ae-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
body.admin-bar .ae-progress { top: 32px; }  /* below the WordPress admin bar */
@media (max-width: 782px) { body.admin-bar .ae-progress { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .ae-progress { top: 0; } }  /* the admin bar is position: absolute here and scrolls away */
.ae-progress__bar { height: 100%; background: var(--ae-brand); transform: scaleX(0); transform-origin: left center; }
html[data-theme="dark"] .ae-progress__bar { background: var(--ae-brand-ink); }
.ae-toc-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--ae-card); color: var(--ae-brand-ink); font-size: 24px; cursor: pointer; box-shadow: 0 4px 14px rgba(16, 24, 40, .3); }
.ae-toc-fab:hover, .ae-toc-fab[aria-expanded="true"] { filter: brightness(.92); }
.ae-toc-fab[hidden] { display: none; }
/* The reading ring: the circles have pathLength 100, so the dash array is the whole circle and theme.js moves the bar by writing the dash offset (100 minus the percent). */
.ae-toc-fab__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.ae-toc-fab__track, .ae-toc-fab__bar { fill: none; stroke-width: 3.5; }
.ae-toc-fab__track { stroke: var(--ae-border); }
.ae-toc-fab__bar { stroke: var(--ae-brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
html[data-theme="dark"] .ae-toc-fab__bar { stroke: var(--ae-brand-ink); }  /* the brand colour is about 3.1:1 on the dark card; the ink is the readable one, as in the top progress bar */
@media (prefers-reduced-motion: no-preference) { .ae-toc-fab__bar { transition: stroke-dashoffset .2s ease-out; } }
/* The section badge: a minimum width, so a two-digit number widens the pill instead of spilling out of it. */
.ae-toc-fab__num { position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--ae-brand); color: #fff; box-shadow: 0 0 0 2px var(--ae-card); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.ae-toc-panel { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px); z-index: 56; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 520px); background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 28px rgba(16, 24, 40, .18); overflow: hidden; }  /* not var(--ae-shadow): it is "none" in dark mode, which would void this declaration */
.ae-toc-panel[hidden] { display: none; }
.ae-toc-panel__title { flex: none; padding: 14px 18px 8px; font-size: 16px; }
.ae-toc-panel .ae-toc__list { flex: 1; min-height: 0; padding-top: 4px; overflow-y: auto; overscroll-behavior: contain; position: relative; }  /* room for the first row's focus ring inside the scroll box */
.ae-toc-panel__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--ae-border); background: var(--ae-surface); font-size: 13px; }
.ae-toc-panel__done { color: var(--ae-muted); font-variant-numeric: tabular-nums; }
.ae-toc-panel__top { color: var(--ae-brand-ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.ae-content h2 { font-size: 30px; line-height: 1.25; margin: 36px 0 12px; scroll-margin-top: 80px; }
/* The bar beside an H2 (frame 732): a post's own text only (Ruling 35), not pages (About, the A-Z letters) nor a directory page's FAQ */
.single-post .ae-article .ae-content h2 { padding-left: 12px; border-left: 4px solid var(--ae-mark); }
.single-post .ae-article .ae-content .ae-top-picks h2 { border-left: 0; padding-left: 0; }  /* a block title, not an article heading */
.ae-content h3 { font-size: 21px; margin: 26px 0 8px; scroll-margin-top: 80px; }
/* A link in a post's text is underlined, so colour is not the only sign of it. Only a link with no class: a plain link a writer or the editor
   puts in a paragraph, list item or table cell carries none, while every button, chip and row link the theme or ae-pro prints has one (the
   coupon buttons and the Browse All rows sit in list items and keep their own look). */
.ae-content :is(p, li, td) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* The end of a post: one bordered row (the Tags line on the left, "No tags" for a post without any, and the Share button on the right), then the centered author box */
.ae-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 28px 0 0; padding: 12px 16px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-post-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.ae-post-tags .bi { color: var(--ae-brand-ink); }
.ae-post-tags span { font-weight: 700; }
.ae-post-tags--none em { color: var(--ae-muted); }
.ae-post-tags a { border: 1px solid var(--ae-border); border-radius: 20px; padding: 2px 10px; font-size: 14px; }
/* Share: without a script the label and the four links show in a row (the button and Copy link are printed hidden). With the js class on <html>, which the
   head sets before the first paint, the page starts as the collapsed version: the links wait in a menu under the button, shown while the button says
   aria-expanded="true", and the hidden button keeps its place without showing (visibility, so it takes no click and no focus) until theme.js reveals
   it. The row therefore does not change when the script runs, and a visitor never sees a button that does nothing. The status ("Link copied") hangs
   under the button the same way, so nothing in the row moves when the words appear; empty it has no padding or border, so it is not drawn but stays
   in the page for the screen reader's live region. */
.ae-share { position: relative; display: flex; gap: 10px; align-items: center; margin-left: auto; font-size: 14px; flex-wrap: wrap; }
.ae-share__menu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ae-share__label { font-weight: 700; }
.ae-share a { border: 1px solid var(--ae-border); border-radius: 8px; padding: 4px 10px; color: var(--ae-text); }
.ae-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font: inherit; font-weight: 600; cursor: pointer; }
.ae-share__btn[hidden] { display: none; }
html.js .ae-share__btn[hidden] { display: inline-flex; visibility: hidden; }
.ae-share__btn:hover { border-color: var(--ae-brand); }
.ae-share__btn:focus-visible, .ae-share__copy:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
html.js .ae-share__label { display: none; }
html.js .ae-share__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; min-width: 190px; padding: 6px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
html.js .ae-share__btn[aria-expanded="false"] + .ae-share__menu { display: none; }
html.js .ae-share__menu :is(a, .ae-share__copy) { padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ae-text); font: inherit; text-align: left; cursor: pointer; }
html.js .ae-share__menu :is(a, .ae-share__copy):hover { background: var(--ae-surface); text-decoration: none; }
.ae-share__status { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; padding: 4px 10px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 13px; white-space: nowrap; }
.ae-share__status:empty { padding: 0; border: 0; }
/* Wider than a phone the row stays one line however many tags there are: the tags take the room left and wrap inside it, the share links keep
   their width at the right, on the baseline of the first line of tags. */
@media (min-width: 761px) { .ae-post-foot { flex-wrap: nowrap; align-items: baseline; } .ae-post-tags { flex: 1 1 auto; min-width: 0; } .ae-share { flex: none; } }
.ae-author-box { border: 1px solid var(--ae-border); border-radius: var(--ae-radius); padding: 24px 20px; margin-top: 28px; background: var(--ae-surface); }
.ae-author-box--center { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ae-author-box--center .ae-social { justify-content: center; }
.ae-author-box__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ae-muted); }
.ae-author-box__name { font-size: 20px; font-weight: 800; color: var(--ae-text); }
.ae-author-box p { max-width: 600px; margin: 6px auto; font-size: 15px; }
.ae-author-box__all { font-weight: 600; font-size: 15px; }
.ae-author-box__body { min-width: 0; }
.ae-author-box__role, .ae-author-head__role { font-size: 13px; font-weight: 700; color: var(--ae-brand-ink); }
/* Social icon links (author box and author page): 36px round targets, a visible focus ring */
.ae-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.ae-social__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ae-border); border-radius: 50%; background: var(--ae-card); color: var(--ae-text); font-size: 17px; }
.ae-social__link:hover { border-color: var(--ae-brand); color: var(--ae-brand-ink); text-decoration: none; }
.ae-social__link:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; margin: 24px 0; }
.ae-team__member { display: flex; gap: 16px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); padding: 18px; background: var(--ae-surface); }
.ae-team__photo { flex: none; align-self: flex-start; line-height: 0; }  /* the avatar links to the author page; not stretched into an oval beside a tall card */
.ae-team__member img { border-radius: 50%; display: block; }
.ae-team__body { min-width: 0; }
.ae-team__name { font-size: 18px; font-weight: 800; color: var(--ae-text); }
.ae-team__role { font-size: 13px; font-weight: 700; color: var(--ae-brand-ink); }
.ae-team__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ae-team__cat { display: inline-block; max-width: 100%; padding: 2px 10px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.ae-team__cat:hover { border-color: var(--ae-brand); color: var(--ae-brand-ink); text-decoration: none; }
.ae-team__cat:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-team__bio { margin: 6px 0; font-size: 15px; }
.ae-team__count { font-size: 13px; }
/* The author page head is a band (its own surface and border), centered: avatar, name with its check, role, bio, icons, then the two figures */
.ae-author-head .avatar { display: block; margin: 0 auto 14px; }
.ae-author-head__role { margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.ae-author-head__bio { margin: 12px auto 0; max-width: 640px; color: var(--ae-muted); }
.ae-author-head .ae-social { justify-content: center; }
.ae-author-head__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; list-style: none; margin: 18px 0 0; padding: 0; }
.ae-author-head__stats li { display: flex; flex-direction: column; align-items: center; }
.ae-author-head__stats strong { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ae-text); }
.ae-author-head__stats span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ae-muted); }
.ae-author-main__title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 22px; }
.ae-author-main__title .bi { flex: none; color: var(--ae-mark); }
/* The check the owner gives a verified author: after the name in the page's H1 (a little smaller than the name) and in the author box */
.ae-verified { color: var(--ae-brand-ink); font-size: .6em; margin-left: .3em; vertical-align: .15em; }
.ae-author-box__name + .ae-verified { font-size: 18px; margin-left: 2px; vertical-align: -.1em; }
.ae-pagination { margin-top: 28px; display: flex; gap: 6px; flex-wrap: wrap; }
.ae-pagination .page-numbers { border: 1px solid var(--ae-border); border-radius: 8px; padding: 6px 12px; color: var(--ae-text); }
.ae-pagination .current { background: var(--ae-text); color: var(--ae-bg); }

/* Product cards ([ae_list]): rank bubble on the left border; a header row (image, body, buttons); the summary; full-width accordion rows */
.ae-list { display: flex; flex-direction: column; gap: 22px; margin: 26px 0; }
.ae-card { position: relative; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); padding: 18px 20px 4px; box-shadow: var(--ae-shadow); scroll-margin-top: 80px; }
.ae-card__rank { position: absolute; top: 50%; transform: translateY(-50%); left: -15px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ae-rank); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 3px var(--ae-bg); }
.ae-card__head { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 14px; }
.ae-card__img-link { flex: 0 0 120px; }
.ae-card__img { display: block; width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: 10px; }
.ae-card__body { flex: 1 1 0; min-width: 0; }
.ae-card__actions { flex: 0 0 220px; display: flex; flex-direction: column; gap: 8px; }
.ae-card__pills { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ae-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: var(--ae-surface); color: var(--ae-muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; }
.ae-pill--editorial { background: var(--ae-pill-pick-bg); color: var(--ae-pill-pick-fg); }
/* A tone per place, like the reference's coloured labels (Ruling 34): place 1 keeps the editorial amber; these come after it, so they win */
.ae-pill--place-2 { background: var(--ae-pill-teal-bg); color: var(--ae-pill-teal-fg); }
.ae-pill--place-3 { background: var(--ae-pill-olive-bg); color: var(--ae-pill-olive-fg); }
.ae-pill--place-4 { background: var(--ae-pill-rose-bg); color: var(--ae-pill-rose-fg); }
.ae-pill--best-seller, .ae-pill--out { background: var(--ae-pill-best-bg); color: var(--ae-pill-best-fg); }
.ae-pill--limited-time { background: var(--ae-pill-limited-bg); color: var(--ae-pill-limited-fg); }
.ae-pill--top-rated, .ae-pill--stock:not(.ae-pill--out) { background: var(--ae-pill-top-bg); color: var(--ae-pill-top-fg); }
.ae-pill--prime { background: var(--ae-pill-prime-bg); color: var(--ae-pill-prime-fg); }
.ae-pill--updated { border: 0; cursor: pointer; }  /* a button that looks like the other pills */
.ae-pill--updated:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-card .ae-card__title { margin: 0 0 6px; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.ae-card__title a { color: var(--ae-text); }
.ae-card__title a:hover { color: var(--ae-link); text-decoration: none; }
.ae-card__title .bi { margin-left: 6px; font-size: 13px; color: var(--ae-muted); }
.ae-card__title .bi::before { display: inline; }  /* an inline glyph keeps the icon on the line of the title's last word */
.ae-card__facts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 14px; color: var(--ae-muted); }
.ae-card__brand { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; color: var(--ae-text); overflow-wrap: anywhere; }
.ae-card__brand .bi { color: var(--ae-link); }
.ae-card__brand a { color: inherit; }
.ae-card__score { display: inline-flex; align-items: center; gap: 4px; }
.ae-card__score > .bi { margin-right: 2px; color: var(--ae-brand-ink); }
.ae-card__score strong { font-size: 16px; color: var(--ae-text); }
.ae-card__score-label { margin-left: 2px; font-size: 12px; font-weight: 600; }
.ae-score-info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ae-muted); font-size: 14px; cursor: pointer; }
.ae-score-info:hover { color: var(--ae-text); }
.ae-score-info:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 1px; }
.ae-card__price { font-weight: 800; font-size: 16px; color: var(--ae-text); }
.ae-card__price del { color: var(--ae-muted); font-weight: 500; font-size: 13px; }
/* Tooltips (score info, "Updated"): under their row and never wider than it; shown on hover, keyboard focus and a tap (theme.js), hidden by Escape */
.ae-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(340px, 100%); padding: 10px 12px; border-radius: 8px; background: var(--ae-text); color: var(--ae-bg); box-shadow: var(--ae-shadow); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s linear .2s; }
.ae-tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.ae-tip a { color: inherit; font-weight: 600; text-decoration: underline; }
.ae-score-info:focus-visible + .ae-tip, .ae-pill--updated:focus-visible + .ae-tip, .ae-tip:focus-within,
.ae-score-info[aria-expanded="true"] + .ae-tip, .ae-pill--updated[aria-expanded="true"] + .ae-tip { visibility: visible; opacity: 1; transition-delay: 0s; }
@media (hover: hover) {  /* not on touch screens, where a tapped element keeps :hover and a second tap could not close the tooltip */
  .ae-score-info:hover + .ae-tip, .ae-pill--updated:hover + .ae-tip, .ae-tip:hover { visibility: visible; opacity: 1; transition-delay: 0s; }
}
.ae-score-info.is-closed + .ae-tip, .ae-pill--updated.is-closed + .ae-tip { visibility: hidden; opacity: 0; }  /* Escape */
.ae-card__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--ae-buy); border-radius: 8px; background: var(--ae-buy); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none !important; overflow-wrap: anywhere; }
.ae-card__btn:hover, .ae-card__btn:active { background: var(--ae-buy-hover); border-color: var(--ae-buy-hover); }
.ae-card__btn:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-card__btn .bi { font-size: 12px; }
.ae-card__btn--alt { background: transparent; border-color: var(--ae-brand); color: var(--ae-brand-ink) !important; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
/* The retailer buttons stay plain text links: their external-link icon (bi-box-arrow-up-right) is drawn here */
.ae-card__btn--alt::after { content: "\f1c5"; font-family: "bootstrap-icons"; font-size: 11px; line-height: 1; }
.ae-card__btn--alt:hover, .ae-card__btn--alt:active { background: var(--ae-brand-soft); border-color: var(--ae-brand); }
.ae-card__summary { margin: 0 0 12px; font-size: 16px; }
.ae-acc { border-top: 1px solid var(--ae-border); }
.ae-acc summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ae-acc summary::-webkit-details-marker { display: none; }
.ae-acc summary:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; border-radius: 6px; }
.ae-acc summary > .bi:first-child { font-size: 15px; color: var(--ae-muted); }
.ae-acc__label { flex: 1 1 0; min-width: 0; text-transform: uppercase; overflow-wrap: anywhere; }
.ae-acc summary:hover .ae-acc__label { color: var(--ae-brand-ink); }
.ae-acc__toggle { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ae-muted); }
.ae-acc[open] .ae-acc__toggle { font-size: 0; }
.ae-acc[open] .ae-acc__toggle::before { content: "Hide"; font-size: 13px; }
.ae-acc__chevron { display: inline-block; font-size: 12px; color: var(--ae-muted); transition: transform .15s; }
.ae-acc[open] .ae-acc__chevron { transform: rotate(180deg); }
.ae-acc__body { padding: 0 2px 14px; font-size: 16px; }
.ae-acc__body p { margin: 0 0 10px; }
.ae-procon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ae-pros, .ae-cons { margin: 0; padding-left: 0; list-style: none; }
.ae-pros li::before { content: "✓ "; color: var(--ae-good); font-weight: 800; }
.ae-cons li::before { content: "✕ "; color: var(--ae-bad); font-weight: 800; }
/* Pros and Cons are two gray boxes whose titles and markers keep their green and red (the .ae-procon grid sets them side by side). A directory card (Task 13, gray since Task 12) opens them above its rows with a check and a cross, and Key Features open as a check list; a review card's Pros & Cons row (Task 19) has the same boxes with a dot before each point */
.ae-procon--open, .ae-card__features { margin: 0 0 14px; font-size: 15px; }
.ae-procon__box { padding: 12px 14px; border: 1px solid var(--ae-border); border-radius: 10px; background: var(--ae-surface); }
.ae-procon__box:only-child { grid-column: 1 / -1; }
.ae-procon__title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; }
.ae-procon__box--pros .ae-procon__title, .ae-procon__box--pros .ae-pros li::before { color: var(--ae-pill-top-fg); }
.ae-procon__box--cons .ae-procon__title, .ae-procon__box--cons .ae-cons li::before { color: var(--ae-pill-best-fg); }
.ae-procon__down::before { transform: rotate(180deg); }  /* the font has no thumbs-down (Ruling 15) */
.ae-procon li, .ae-card__features li { position: relative; padding-left: 20px; }
.ae-procon li + li, .ae-card__features li + li { margin-top: 4px; }
.ae-procon li::before, .ae-card__features li::before { position: absolute; left: 0; }
.ae-procon:not(.ae-procon--open) li::before { content: ""; top: .62em; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ae-card__features ul { margin: 0; padding: 0; list-style: none; }
.ae-card__features .bi { color: var(--ae-brand-ink); }
.ae-card__features li::before { content: "✓"; color: var(--ae-brand-ink); font-weight: 800; }
.ae-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.ae-specs th, .ae-specs td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ae-border); overflow-wrap: anywhere; }
.ae-specs th { width: 42%; color: var(--ae-muted); font-weight: 600; }
.ae-amazon-note { margin: -8px 0 26px; font-size: 12px; line-height: 1.5; color: var(--ae-muted); }
.ae-amazon-note p { margin: 2px 0; }
.ae-list-disclosure { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ae-muted); }
.ae-list-disclosure + .ae-list { margin-top: 0; }
.ae-list-disclosure + .ae-dir > :first-child { margin-top: 0; }
/* Display ads (Appearance > AE Theme Settings): the unit under its visible label, with room around it so it never crowds a card or a button */
.ae-ad { margin: 28px 0; max-width: 100%; text-align: center; }  /* no overflow, clip or transform on a served ad: AdSense's full-width responsive code widens the unit into the page gutters on a phone */
.ae-ad__label { display: block; margin-bottom: 6px; font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ae-muted); }
.ae-ad ins { max-width: 100%; }
.ae-ad:has(ins[data-ad-status="unfilled"]) { display: none; }  /* AdSense had no ad for the slot: no lone label either */
.ae-sidebar .ae-ad { margin: 0; }  /* the sidebar's gap spaces it like its other boxes */
.ae-list + .ae-ad, .ae-amazon-note + .ae-ad { margin-top: 32px; }
.ae-dir-more + .ae-ad { margin-top: 32px; }
.ae-dir-list + .ae-ad { margin-top: 56px; }  /* no Load More: also what is left after its last press removes it, so the place the pointer pressed is empty, not the unit (the button is up to 62px below the list) */
/* [ae_list display="grid"]: a tile per product; tiles of a row are as high as the tallest, with the button at the bottom. The columns follow the
   width of the list itself (the wrapper is the query container; beside the sidebar it is narrower than the viewport): 1 column, 2 from 440px, 3 from 700px.
   A container query styles what is inside the container, so the grid is the element inside the wrapper. (display="card" is the list's card without its rows: no rules of its own.) */
.ae-list--grid { display: block; container-type: inline-size; }
.ae-list__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ae-card--tile { display: flex; flex-direction: column; min-width: 0; }
.ae-list--grid .ae-card--tile { padding: 18px 16px 16px; }
.ae-card--tile .ae-card__rank { top: 14px; left: -12px; transform: none; }
.ae-card--tile .ae-card__img-link { display: block; flex: 0 0 auto; margin: 0 auto 12px; }
.ae-card--tile .ae-card__img { width: 160px; height: 160px; margin: 0 auto; }
.ae-card--tile .ae-card__body { flex: 1 1 auto; }
.ae-card--tile .ae-card__title { font-size: 17px; }
.ae-card--tile .ae-card__actions { flex: 0 0 auto; margin-top: auto; padding-top: 14px; }
@container (min-width: 440px) {
  .ae-list__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 700px) {
  .ae-list__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Our Top Picks: the compact summary above a post's first product list. A row is a 56px image, the label, title and score stacked, and the
   card's orange Amazon button; below 600px the button wraps to its own full-width line. Colours from tokens (the photo tile is white, like the card's). */
.ae-top-picks { margin: 26px 0; padding: 18px 20px 6px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); }
.ae-list-disclosure + .ae-top-picks { margin-top: 0; }
.ae-top-picks > h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.3; scroll-margin-top: 80px; }
.ae-top-picks__list { list-style: none; margin: 0; padding: 0; }
.ae-top-picks__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img label btn" "img title btn" "img score btn"; align-items: center; column-gap: 14px; row-gap: 3px; padding: 12px 0; border-top: 1px solid var(--ae-border); }
.ae-top-picks__row:first-child { border-top: 0; }
.ae-top-picks__row--no-image { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label btn" "title btn" "score btn"; }
.ae-top-picks__row > .ae-pill { grid-area: label; justify-self: start; }
.ae-top-picks__img { grid-area: img; display: block; width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; }
.ae-top-picks__title { grid-area: title; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ae-text); overflow-wrap: anywhere; }
.ae-top-picks__row > .ae-card__score { grid-area: score; font-size: 13px; color: var(--ae-muted); }
.ae-top-picks__btn { grid-area: btn; white-space: nowrap; }
@media (max-width: 600px) {
  .ae-top-picks__row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img label" "img title" "img score" "btn btn"; }
  .ae-top-picks__row--no-image { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "score" "btn"; }
  .ae-top-picks__btn { margin-top: 8px; }
  .ae-top-picks { padding: 16px 14px 4px; }
}

/* Footer */
.ae-footer { background: var(--ae-surface); border-top: 1px solid var(--ae-border); padding: 36px 0 20px; font-size: 15px; }
.ae-footer__inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ae-footer__about { max-width: 420px; }
.ae-footer__about p { color: var(--ae-muted); }
.ae-footer-menu { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(140px, auto)); gap: 6px 30px; }
.ae-footer-menu a { color: var(--ae-text); }
.ae-footer__legal { margin-top: 26px; font-size: 13px; color: var(--ae-muted); }
/* The footer promise (the owner's text, so a long word wraps) sits above the legal strip, set like it. */
.ae-footer__promise { margin-top: 26px; font-size: 13px; color: var(--ae-muted); overflow-wrap: anywhere; }
.ae-footer__promise + .ae-footer__legal { margin-top: 8px; }
/* Two 140px columns and a 30px gap need a 342px screen (with the 16px gutters): below that the columns shrink instead of pushing the page sideways. */
@media (max-width: 360px) {
  .ae-footer-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .ae-footer-menu a { overflow-wrap: anywhere; }
}
/* Columns layout: the brand block, then Company, Explore and Legal. One column under 600px, two from 600px, beside the brand block from 1024px. */
.ae-footer__inner--cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 30px; }
.ae-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 30px; }
.ae-footer__heading { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ae-text); overflow-wrap: anywhere; }
.ae-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ae-footer__list a { color: var(--ae-text); overflow-wrap: anywhere; }
.ae-footer__about .ae-social { margin: 14px 0 0; }
@media (min-width: 600px) { .ae-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ae-footer__inner--cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ae-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ae-footer__cols--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* a niche site: two facets, Company, Legal */
}
/* Centered layout (the default): the logo, a short text, the promise, square social buttons, a thin line and one row of links, all in the middle; the row wraps on a phone. */
.ae-footer--centered .ae-footer__center { text-align: center; }
.ae-footer--centered .ae-logo { display: inline-block; max-width: 100%; vertical-align: top; }
.ae-footer__text { max-width: 640px; margin: 10px auto 0; color: var(--ae-muted); }
.ae-footer--centered .ae-footer__promise { max-width: 640px; margin: 8px auto 0; }
.ae-social--square { justify-content: center; margin: 18px 0 0; }
.ae-social--square .ae-social__link { width: 40px; height: 40px; border-radius: 10px; }
.ae-footer__rule { border: 0; border-top: 1px solid var(--ae-border); margin: 24px 0 18px; }
.ae-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; }
.ae-footer-links a { color: var(--ae-text); overflow-wrap: anywhere; }
.ae-footer--centered .ae-footer__legal { margin-top: 18px; text-align: center; }
.ae-page { max-width: 820px; }

/* Responsive */
@media (max-width: 960px) {
  .ae-home-layout, .ae-single-layout { grid-template-columns: minmax(0, 1fr); }  /* the column may shrink below its content: the related track scrolls inside it */
  .ae-featured { grid-template-columns: 1fr; grid-template-rows: none; }
  .ae-featured .ae-post-card--hero { grid-row: auto; }
  .ae-post-card--hero { min-height: 340px; }
}
@media (max-width: 760px) {
  .ae-post-card--hero .ae-post-card__title { font-size: 22px; }
  .ae-article__title { font-size: 36px; }
  .ae-content h2 { font-size: 26px; }
  .ae-card { padding: 16px 16px 4px; }
  .ae-card__rank { top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; font-size: 13px; }  /* on a phone the badge rides the card's top edge, centred: at the left border it would sit over the text or the full-width button (a tile's and a directory card's own rules outweigh this one) */
  .ae-list-disclosure + .ae-list { margin-top: 24px; }  /* a list with no Top Picks block before it: the badge above the first card (13 px up) would sit on the last line of the commission note, which has 10 px under it */
  .ae-procon { grid-template-columns: 1fr; }
  .ae-team__member { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .ae-header__tools { gap: 2px; }
  .ae-deals-btn { width: 40px; margin-left: 4px; padding: 0; justify-content: center; }
  .ae-deals-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ae-card__head { flex-wrap: wrap; gap: 12px 14px; }
  .ae-card__img-link { flex-basis: 88px; }
  .ae-card__img { width: 88px; height: 88px; }
  .ae-card__body { flex: 1 1 160px; }
  .ae-card__actions { flex-basis: 100%; }
  /* A card of a list (a post, the Deals page, a brand page) stacks: the photo on top, centered, the labels and the title centered, then the full-width buttons. A facet pick or a directory card keeps the header above. */
  .ae-list .ae-card__head { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .ae-list .ae-card__head > * { flex: 0 0 auto; }
  .ae-list .ae-card__head .ae-card__img-link { align-self: center; }
  .ae-list .ae-card__head .ae-card__img { width: 200px; height: 200px; }
  .ae-list .ae-card__head .ae-card__pills, .ae-list .ae-card__head .ae-card__facts { justify-content: center; }
  .ae-list .ae-card__head .ae-card__actions { width: 100%; }
  .ae-list .ae-card__head .ae-compare-check { align-self: center; }  /* under the centered buttons, centered too */
}

/* Mega menu (AE Settings > Theme > Menu style "Mega": the body has the class ae-menu-mega), one list for both screens. From 1024px the first five
   items, All Categories and the extra items sit in the header; a panel shows on hover after a short delay, with its button (theme.js) or, without
   the script, with the focus inside. A hidden panel is still laid out (visibility), so theme.js can move one that would run past the window; the
   clip keeps it from widening the page meanwhile. Below 1024px the list is in the drawer that slides in from the right, every item a row with a chevron. */
.ae-menu-mega .ae-header { overflow-x: clip; }
.ae-menu-mega .ae-header__tools { margin-left: auto; }  /* also with no nav (a mega menu with nothing to list) */
.ae-mega { list-style: none; margin: 0; padding: 0; }
.ae-mega__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--ae-muted); font-size: 12px; cursor: pointer; }
.ae-mega__dots { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--ae-text); font-size: 18px; cursor: pointer; }
.ae-mega__toggle:focus-visible, .ae-mega__dots:focus-visible, .ae-account__link:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-mega__col, .ae-mega__grid { list-style: none; margin: 0; padding: 0; }
.ae-mega__panel a { color: var(--ae-text); }
.ae-mega a[aria-current="page"] { color: var(--ae-brand-ink); }
/* Sign in / Register (AE Settings > Theme): in the header tools, and below 1024px in the foot of the drawer (both menu styles). */
.ae-account { display: flex; align-items: center; gap: 2px; }
.ae-account__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ae-text); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ae-account__link:hover { background: var(--ae-surface); text-decoration: none; }
.ae-account--drawer { display: none; }
@media (min-width: 1024px) {
  .ae-mega > .ae-mega__item--more, .ae-mega > .ae-mega__item--fold, .ae-mega > .ae-menu-categories, .ae-mega__all, .ae-mega > .ae-mega__overflow[hidden] { display: none; }  /* .ae-mega > li sets a display too; theme.js folds what does not fit and shows the "..." item while something is folded or after the fifth */
  .ae-mega { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; }
  .ae-mega > li { position: relative; display: flex; align-items: center; }
  .ae-mega > li > a { display: block; padding: 8px 0; color: var(--ae-text); font-size: 15px; font-weight: 600; }
  .ae-mega > li > a:hover { color: var(--ae-brand-ink); text-decoration: none; }
  .ae-mega__toggle { width: 24px; height: 32px; margin-left: 2px; }
  .ae-mega__dots { width: 36px; height: 32px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); }  /* a box before it is hovered, as in the approved mockup, so it reads as a button and not as a stray ellipsis */
  .ae-mega__dots:hover, .ae-mega__dots[aria-expanded="true"] { background: var(--ae-surface); }
  .ae-mega__panel { position: absolute; top: 100%; left: -12px; z-index: 60; display: flex; width: max-content; max-width: calc(100vw - 32px); padding: 10px 8px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: 10px; box-shadow: var(--ae-shadow); visibility: hidden; transition: visibility 0s .1s; }
  .ae-mega__item:hover > .ae-mega__panel, html:not(.js) .ae-mega__item:focus-within > .ae-mega__panel, .ae-mega__item.is-open > .ae-mega__panel { visibility: visible; transition-delay: 0s; }
  .ae-mega__item:hover > .ae-mega__panel { transition-delay: .15s; }
  .ae-mega__item.is-closed > .ae-mega__panel { visibility: hidden; transition-delay: 0s; }
  .ae-mega__panel--overflow { max-height: calc(100vh - 85px); overflow-y: auto; }  /* one column of every item after the fifth: it scrolls inside the window (69px header and a 16px gap) instead of running past it */
  .ae-mega__col { flex: 0 1 240px; width: 240px; min-width: 0; }
  .ae-mega__grid { display: grid; grid-template-columns: repeat(4, auto); column-gap: 8px; }
  .ae-mega__col a, .ae-mega__grid a { display: block; padding: 6px 12px; border-radius: 6px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  .ae-mega__col a:hover, .ae-mega__grid a:hover { background: var(--ae-surface); text-decoration: none; }
}
@media (min-width: 1024px) and (pointer: coarse) { .ae-mega__toggle, .ae-mega__dots { width: 40px; height: 40px; } }  /* a tablet: the toggle is the way to the sub-items */
@media (min-width: 1024px) and (max-width: 1199.98px) {  /* a narrower header: smaller items, the account links and the deals pill as icons (the words still read by screen readers) */
  .ae-mega { gap: 4px 12px; }
  .ae-mega > li > a { font-size: 14px; }
  .ae-menu-mega .ae-account--tools .ae-account__link, .ae-menu-mega .ae-deals-btn { width: 40px; margin-left: 4px; padding: 0; justify-content: center; }
  .ae-menu-mega .ae-account--tools .ae-account__text, .ae-menu-mega .ae-deals-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@keyframes ae-fade-in { from { opacity: 0; } }
/* The phone menu drawer, for both menu styles (theme.js, the "Menu drawer" block): below 1024px the nav is a panel fixed to the right edge,
   min(86vw, 360px) wide, that slides in over a dark backdrop. It is a head (logo, "Menu", a close button), the menu's own list (rows with a chevron
   for sub-items; this scrolls) and a bottom cluster (Search, dark mode, the Today's Deals pill, the account links). The nav and the backdrop sit
   inside the sticky header, whose stacking context is below the compare bar, so while the drawer is open the header rises above it (and sinks back
   after the slide). Without the script (html:not(.js)) it is a plain block under the header: no Menu button, every sub-list open, and the header
   is not sticky (an open menu taller than the window would pin over the page and hide it). */
@media (max-width: 1023.98px) {
  .ae-menu-toggle { display: inline-flex; order: 2; }
  .ae-header__inner { gap: 10px; }
  .ae-header__inner > .ae-logo { flex: 1 1 0; }
  .ae-header__tools { order: 1; }
  .ae-account--tools, .ae-mega > .ae-mega__item--cats, .ae-mega > .ae-mega__overflow, .ae-mega__viewall { display: none; }
  .ae-header { transition: z-index 0s .25s; }
  html.ae-drawer-open { overflow: hidden; }
  html.ae-drawer-open .ae-header { z-index: 100002; transition-delay: 0s; }
  .ae-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; flex: none; flex-direction: column; justify-content: flex-start; width: min(86vw, 360px); background: var(--ae-bg); border-left: 1px solid var(--ae-border); box-shadow: -10px 0 30px rgba(0, 0, 0, .2); transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .ae-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .ae-drawer-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); animation: ae-fade-in .25s; }
  .ae-drawer-backdrop[hidden] { display: none; }
  .ae-drawer__head { display: flex; flex: none; align-items: center; gap: 12px; min-height: 64px; padding: 0 12px 0 16px; background: var(--ae-surface); border-bottom: 1px solid var(--ae-border); }
  .ae-drawer__head .ae-logo { flex: 0 1 auto; font-size: 20px; }
  .ae-drawer__title { flex: 1; padding-left: 12px; border-left: 1px solid var(--ae-border); font-size: 15px; font-weight: 600; color: var(--ae-muted); }
  .ae-nav > .ae-mega, .ae-nav > .ae-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ae-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; flex: none; gap: 8px; margin-top: auto; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--ae-surface); border-top: 1px solid var(--ae-border); }
  .ae-drawer__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: 10px; color: var(--ae-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .ae-drawer__btn:hover { border-color: var(--ae-brand-ink); text-decoration: none; }
  .ae-drawer__btn:focus-visible, .ae-menu__toggle:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
  .ae-drawer__foot .ae-deals-btn { grid-column: 1 / -1; width: auto; height: auto; min-height: 44px; margin: 0; padding: 8px 16px; justify-content: center; white-space: normal; }
  .ae-drawer__foot .ae-deals-btn__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ae-account--drawer { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 8px; }
  .ae-account--drawer .ae-account__link { flex: 1 1 0; justify-content: center; min-height: 44px; background: var(--ae-card); border: 1px solid var(--ae-border); }
  .ae-mega { padding: 4px 16px 8px; }
  .ae-mega > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ae-border); }
  .ae-mega > li > a, .ae-mega__toggle { min-height: 44px; }
  .ae-mega > li > a { flex: 1; display: flex; align-items: center; gap: .3em; color: var(--ae-text); font-size: 17px; font-weight: 600; }  /* the gap: the space a flex box drops between a label's text and its markup */
  .ae-mega__toggle { width: 44px; font-size: 18px; }
  .ae-mega__toggle .bi-chevron-down { transition: transform .2s; }
  .ae-mega__toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
  .ae-mega__panel { display: none; flex-basis: 100%; padding: 0 0 8px 14px; }
  .ae-mega__item.is-open > .ae-mega__panel { display: block; }
  .ae-mega__all, .ae-mega__col a { display: flex; align-items: center; gap: .3em; min-height: 40px; }
  .ae-mega__all { font-weight: 600; }
  .ae-menu { display: block; padding: 4px 16px 8px; }
  .ae-menu li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ae-border); }
  .ae-menu li > a { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 0; }
  .ae-menu .children, .ae-menu .sub-menu { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 8px 14px; background: none; border: 0; box-shadow: none; }
  .ae-menu .children li, .ae-menu .sub-menu li { border-bottom: 0; }
  .ae-menu .children a, .ae-menu .sub-menu a { min-height: 40px; }
  .ae-menu li.is-open > .children, .ae-menu li.is-open > .sub-menu { display: block; }
  .ae-menu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--ae-muted); font-size: 18px; cursor: pointer; }
  .ae-menu__toggle .bi-dash-lg, .ae-menu__toggle[aria-expanded="true"] .bi-plus-lg { display: none; }
  .ae-menu__toggle[aria-expanded="true"] .bi-dash-lg { display: inline; }
  html:not(.js) .ae-header { position: static; }
  html:not(.js) .ae-header__inner { flex-wrap: wrap; }
  html:not(.js) .ae-menu-toggle, html:not(.js) .ae-drawer__head, html:not(.js) .ae-drawer__foot .ae-theme-toggle, html:not(.js) .ae-mega__toggle { display: none; }
  html:not(.js) .ae-nav { position: static; order: 3; flex-basis: 100%; width: auto; border-left: 0; box-shadow: none; transform: none; visibility: visible; }
  html:not(.js) .ae-mega__panel, html:not(.js) .ae-menu .children, html:not(.js) .ae-menu .sub-menu { display: block; }
  @media (prefers-reduced-motion: reduce) {
    .ae-nav, .ae-header, .ae-mega__toggle .bi-chevron-down { transition: none; }
    .ae-drawer-backdrop { animation: none; }
  }
}

/* Popular This Week: rank, a 56px image, title and "Category • N views"; with theme.js the rows after the fifth wait behind "Show More" (without it
   every row shows and the button is hidden). The rank is a grey number on --ae-surface (5.1:1 light, 7:1 dark), as in the reference sidebar. */
.ae-popular__list { list-style: none; margin: 0; padding: 0; }
.ae-popular__item { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.ae-popular__item + .ae-popular__item { border-top: 1px solid var(--ae-border); }
html.js .ae-popular:not(.is-open) .ae-popular__item--extra { display: none; }
.ae-popular__rank { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--ae-surface); color: var(--ae-muted); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ae-popular__thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--ae-surface); }
.ae-popular__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ae-popular__thumb--product { background: #fff; }
.ae-popular__thumb--product img { object-fit: contain; padding: 3px; }
.ae-popular__text { min-width: 0; }
.ae-popular__title { display: block; font-weight: 700; line-height: 1.35; color: var(--ae-text); overflow-wrap: anywhere; }
.ae-popular__title:hover { color: var(--ae-link); text-decoration: none; }
.ae-popular__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--ae-muted); }
.ae-popular__more { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-brand-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
html:not(.js) .ae-popular__more { display: none; }
.ae-popular__more:hover { background: var(--ae-surface); }
.ae-popular__more:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-popular__more span { display: inline-flex; align-items: center; gap: 6px; }
.ae-popular__more[aria-expanded="true"] .ae-popular__more-open, .ae-popular__more[aria-expanded="false"] .ae-popular__more-close { display: none; }

/* The deals box (sidebar): the text and button come from the settings */
.ae-deals-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; background: var(--ae-brand-soft); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); }
.ae-deals-box > .bi { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ae-brand); color: #fff; font-size: 18px; }
.ae-deals-box__text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.ae-deals-box__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ae-brand); color: #fff; font-size: 14px; font-weight: 600; }
.ae-deals-box__btn:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
.ae-deals-box__btn:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
/* While the Today's Deals page is published the box lists up to three deals: the name, and the owner's note under it */
.ae-deals-box--list { align-items: stretch; gap: 0; }
.ae-deals-box__list { list-style: none; margin: 0 0 14px; padding: 0; }
.ae-deals-box__list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--ae-border); }
.ae-deals-box__list li:last-child { border-bottom: 0; }
.ae-deals-box__name { color: var(--ae-text); font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ae-deals-box__name:hover { color: var(--ae-brand-ink); }
.ae-deals-box__note { color: var(--ae-muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ae-deals-box--list .ae-deals-box__btn { align-self: flex-start; }

/* The Today's Deals page: the cards of a product list with the owner's note under each title; nothing is ranked, so no rank bubble */
.ae-deals__intro { margin: 0 0 18px; color: var(--ae-muted); }
.ae-deals .ae-card__rank { display: none; }
.ae-card__deal { margin: 0 0 8px; color: var(--ae-text); font-size: 15px; line-height: 1.45; }
.ae-card__deal strong { color: var(--ae-brand-ink); }
/* On a niche site, "What the listings state" under "The numbers": a sentence over a short table in the scroll box of the buying guides' tables */
.ae-deals__stated > p { margin: 0 0 12px; color: var(--ae-muted); }
.ae-deals__stated .ae-specs thead th { width: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ae-text); background: var(--ae-surface); border-bottom: 2px solid var(--ae-border); }
.ae-deals__stated .ae-specs td, .ae-deals__stated .ae-specs thead th + th { text-align: right; font-variant-numeric: tabular-nums; }
.ae-deals__stated .ae-specs tbody tr:last-child > * { border-bottom: 0; }
/* A Table block in a post on a phone (the What to Pick table of a Tip): WordPress's fixed layout gives equal columns that break words in two, so
   here each column takes the width of its longest word, and the block scrolls sideways when it must */
@media (max-width: 600px) { .wp-block-table table.has-fixed-layout { table-layout: auto; } .wp-block-table table.has-fixed-layout :is(td, th) { word-break: normal; overflow-wrap: normal; } }

/* Related Articles: a track that scrolls and snaps natively (swipe, wheel, arrow keys); the buttons (theme.js) scroll it by one slide. They are two arrows over
   the image row, placed in the frame around the track: --ae-slide-w, the width of a slide, gives the height of its 3:2 image and so the middle of it. */
.ae-related { margin-top: 40px; --ae-slide-w: 360px; }
/* A phone shows 85% of the track, so the next slide peeks in. As a length, because the arrows' top is worked out from it (a percentage there is a share of the frame's height).
   The 40px is the two 16px side paddings of .ae-container plus the two 4px side paddings of .ae-related__track: 100vw less that is the track's content box, which flex-basis 85% used to take
   85% of. (A classic scrollbar in a narrow desktop window makes the slide a few px wider than that; phones have overlay scrollbars.) */
@media (max-width: 600px) { .ae-related { --ae-slide-w: calc((100vw - 40px) * .85); } }
.ae-related__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ae-related__head h2 { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 24px; line-height: 1.25; }
.ae-related__head h2 .bi { flex: none; color: var(--ae-mark); font-size: 20px; }
.ae-related__all { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--ae-brand-soft); font-size: 14px; font-weight: 600; color: var(--ae-brand-ink); white-space: nowrap; }
.ae-related__all:hover { text-decoration: none; }
.ae-related__frame { position: relative; }
.ae-related__nav { position: absolute; top: calc(4px + var(--ae-slide-w) / 3 - 20px); left: -12px; right: -12px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.ae-related__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ae-border); border-radius: 50%; background: var(--ae-card); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); color: var(--ae-text); font-size: 16px; cursor: pointer; pointer-events: auto; }
html:not(.js) .ae-related__btn { display: none; }  /* swipe, wheel and the arrow keys still scroll the track */
.ae-related__btn:hover:not(:disabled) { border-color: var(--ae-brand); }
.ae-related__btn:disabled { opacity: .4; cursor: default; }
.ae-related__btn:focus-visible, .ae-related__track:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-related__track { display: flex; gap: 16px; padding: 4px 4px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 4px; scrollbar-width: thin; }
.ae-related__slide { flex: 0 0 var(--ae-slide-w); display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); overflow: hidden; }
.ae-related__media { display: block; background: var(--ae-surface); overflow: hidden; }
.ae-related__media--cover { aspect-ratio: 3 / 2; }  /* a large cover picture: the post image fills it, a borrowed product photo is shown whole on the surface colour, no image is the category name on the brand colour */
.ae-related__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ae-related__media--product img { object-fit: contain; padding: 10px; }
.ae-related__placeholder { display: flex; height: 100%; align-items: center; justify-content: center; padding: 12px; background: var(--ae-brand); color: #fff; font-size: 18px; font-weight: 700; text-align: center; }
.ae-related__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.ae-related__cat { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ae-brand-ink); }
.ae-related__title { margin: 0; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ae-related__title a { color: var(--ae-text); }
.ae-related__title a:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }
.ae-related__excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ae-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ae-related__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--ae-muted); }
.ae-related__author { font-weight: 600; color: var(--ae-text); }

/* User Reviews */
.ae-reviews { margin-top: 36px; padding-top: 24px; border-top: 2px solid var(--ae-border); scroll-margin-top: 84px; }
#ae-reviews:focus { outline: none; }  /* focused by theme.js for a reader who came to read: the keyboard starts there; it is no control */
.ae-stars { color: #c76a00; letter-spacing: 1px; }
.ae-reviews__summary { font-size: 15px; }
.ae-reviews__list { list-style: none; margin: 16px 0; padding: 0; }
.ae-review { padding: 14px 0; border-bottom: 1px solid var(--ae-border); }
.ae-review__meta { font-size: 13px; color: var(--ae-muted); margin: 2px 0 6px; }
.ae-review__text p { margin: 0 0 8px; }
.ae-reviews__notice { padding: 10px 14px; border-radius: 8px; }
.ae-reviews__notice--ok { background: #edfaef; color: #00691a; }
.ae-reviews__notice--error { background: #fcf0f1; color: #a00; }
/* The opener of the post's review form: a field-like button. With the script (the js class) the form waits behind it until it is opened (theme.js: the button, #ae-reviews or #ae-write); without the script the form shows and the button does not. A directory page's product form is not under .ae-reviews: it stays. */
.ae-review-open { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 8px 8px 8px 12px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); color: var(--ae-muted); font: inherit; font-size: 15px; text-align: left; cursor: text; }
html:not(.js) .ae-review-open { display: none; }
.ae-review-open[aria-expanded="true"] { display: none; }
.ae-review-open:hover { border-color: var(--ae-brand); }
.ae-review-open:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-review-open .bi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ae-brand-soft); color: var(--ae-brand-ink); font-size: 17px; }
.ae-review-open__text { flex: 1 1 auto; min-width: 0; }
.ae-review-open__go { flex: none; padding: 8px 14px; border-radius: 8px; background: var(--ae-brand); color: #fff; font-size: 14px; font-weight: 700; }
@media (max-width: 600px) { .ae-review-open__go { display: none; } }  /* the field alone: its text would wrap beside the pill */
/* A post without a review: "No reviews yet" in a box with a round icon, after the opener and the form */
.ae-reviews__none { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; padding: 34px 20px; border-radius: var(--ae-radius); background: var(--ae-surface); color: var(--ae-muted); font-size: 15px; text-align: center; }
.ae-reviews__none-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ae-brand-soft); color: var(--ae-brand-ink); font-size: 24px; }
.ae-reviews__none .ae-reviews__empty { margin: 0; }
html.js .ae-reviews .ae-review-form:not(.is-open) { display: none; }
.ae-review-form { margin-top: 18px; padding: 18px; background: var(--ae-surface); border-radius: 10px; scroll-margin-top: 84px; }
.ae-review-form h3 { margin-top: 0; }
.ae-review-form label { display: block; font-weight: 600; font-size: 14px; }
.ae-review-form input[type=text], .ae-review-form input[type=email], .ae-review-form textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--ae-border); border-radius: 6px; font: inherit; }
.ae-review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ae-review-form__note { font-size: 12px; color: var(--ae-muted); }
.ae-review-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ae-rating-input { border: 0; padding: 0; margin: 0 0 10px; }
.ae-rating-input legend { font-weight: 600; font-size: 14px; }
.ae-rating-input__stars { display: inline-flex; flex-direction: row-reverse; }
.ae-rating-input__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ae-rating-input__stars label { font-size: 26px; color: transparent; -webkit-text-stroke: 1.5px #7f8a96; cursor: pointer; padding: 0 2px; }
.ae-rating-input__stars input:checked ~ label, .ae-rating-input__stars label:hover, .ae-rating-input__stars label:hover ~ label { color: #c76a00; -webkit-text-stroke: 0; }
.ae-rating-input__stars input:focus-visible + label { outline: 2px solid var(--ae-brand-ink); }
@media (max-width: 600px) { .ae-review-form__row { grid-template-columns: 1fr; } }

/* Page band (ae_theme_band()): the quiet title strip under the header on category, brand, plain, archive and search pages. Crumbs, the h1,
   one line of sub text and optional chips stack inside the page width, left or centered. */
.ae-band { background: var(--ae-surface); border-bottom: 1px solid var(--ae-border); color: var(--ae-text); padding: 28px 0 24px; }
.ae-band--left { text-align: left; }
.ae-band--center { text-align: center; }
.ae-band .ae-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; }
.ae-band--center .ae-breadcrumb { justify-content: center; }
.ae-band .ae-breadcrumb a { color: var(--ae-muted); }
.ae-band .ae-breadcrumb a:hover { color: var(--ae-text); }
.ae-band__title { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--ae-text); overflow-wrap: break-word; }
.ae-band__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 0 12px; border: 1px solid var(--ae-border); border-radius: 12px; background: var(--ae-card); color: var(--ae-brand-ink); font-size: 22px; }  /* the icon of a band that has one (the archive, the search page): a box on its own line over the title */
.ae-band--center .ae-band__icon { margin-left: auto; margin-right: auto; }
.ae-band__ticon { margin-right: .4em; color: var(--ae-brand-ink); font-size: .85em; }  /* the same glyph inside the h1, for a title that carries it in its own line */
.ae-band__sub { max-width: 720px; margin: 10px 0 0; font-size: 18px; line-height: 1.5; color: var(--ae-muted); }
.ae-band--center .ae-band__sub { margin-left: auto; margin-right: auto; }
.ae-band .ae-dir-chips { margin-top: 16px; }
.ae-band--left .ae-dir-chips { justify-content: flex-start; }
.ae-main:has(> .ae-band:first-child) { padding-top: 0; }  /* the band starts right under the header, as the post hero does */
.archive .ae-main, .search .ae-main, .blog:not(.home) .ae-main, .author .ae-main, .ae-banded .ae-main { padding-top: 0; }  /* the same for a browser without :has(), on the pages that are always a band and a plain page that has one (ae-banded: not Browse All or a guide; WordPress gives the front page "Your latest posts" the class blog too, and it has no band) */
.ae-band__count { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--ae-muted); }
.ae-band__count > span { display: inline-flex; align-items: center; gap: 6px; }  /* "2 Articles" and "Updated ..." each keep their icon beside the words, and wrap as two parts on a phone */
.ae-band__count .bi { color: var(--ae-brand-ink); }
.ae-band__dot { margin: 0 8px; }
.ae-band .ae-tags { margin-top: 16px; }
.ae-band--center .ae-tags { justify-content: center; }
.ae-band__search { max-width: 560px; margin: 16px auto 0; }
.ae-band + .ae-archive { margin-top: 28px; }
.ae-band + .ae-page { padding-top: 24px; }
.ae-page > .ae-article > .ae-content > h2 { padding-left: 12px; border-left: 4px solid var(--ae-mark); }  /* a plain page's own headings, as an article's; not the blocks inside (guides, tables, directories share .ae-page) */
@media (max-width: 760px) { .ae-band { padding: 22px 0 18px; } .ae-band__sub { font-size: 16px; } }

/* Directory category and brand pages: the hero (the post hero's band with chips), the filter bar, the ranked list with
   Load More and the category tree, one detail card at a time */
.single-ae_category .ae-main, .single-ae_brand .ae-main { padding-top: 0; }  /* the hero starts right under the header, as on posts (for a browser without :has()) */
.ae-dir-page { padding-top: 16px; padding-bottom: 40px; }
.ae-post-hero + .ae-dir-page, .ae-band + .ae-dir-page { padding-top: 24px; }
.ae-dir-page__title { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 12px 0; }
.ae-dir-hero .ae-dir-page__title { margin: 0 auto 12px; overflow-wrap: break-word; }
.ae-dir-hero__intro { max-width: 720px; margin: 0 auto 16px; color: var(--ae-muted); }
.ae-dir-hero__intro > :first-child { margin-top: 0; }
.ae-dir-hero__intro > :last-child { margin-bottom: 0; }
.ae-breadcrumb .bi-chevron-right { font-size: 10px; }
.ae-dir-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.ae-dir-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ae-dir-chip .bi { color: var(--ae-brand-ink); }
/* The filter bar: the Category and Brand menus (a button and its panel, opened by theme.js) and the Sort menu. Without the script a filter
   menu's rows show in place under its name (they are plain links) and the Category menu is left out: the Categories block has the tree. */
.ae-dir-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; padding: 12px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); }
.ae-dir--js .ae-dir-bar { position: sticky; top: 69px; z-index: 45; overflow-anchor: none; }  /* at every width, under the sticky header (68 px and its border), over the list panel and the card column below it; not without the script, whose bar shows the Brand rows in place. No scroll anchor in it: its shrinking when stuck (a phone) would scroll the page */
.ae-dd { position: relative; flex: 1 1 220px; min-width: 0; max-width: 320px; }
.ae-dd__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.ae-dd__btn:hover { border-color: var(--ae-brand); }
.ae-dd__btn:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-dd__btn.is-set { border-color: var(--ae-brand); background: var(--ae-brand-soft); }
.ae-dd__btn > .bi:first-child { color: var(--ae-brand-ink); }
.ae-dd__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-dd__chev { font-size: 12px; color: var(--ae-muted); }
.ae-dd__chev::before { transition: transform .15s; }
.ae-dd__btn[aria-expanded="true"] .ae-dd__chev::before { transform: rotate(180deg); }
html:not(.js) .ae-dd--tree, html:not(.js) .ae-dd__chev { display: none; }
html:not(.js) .ae-dd { flex-basis: 100%; max-width: none; }
html:not(.js) .ae-dd__btn { pointer-events: none; }  /* the name of the rows under it */
html:not(.js) .ae-dd__panel { margin-top: 6px; }
html.js .ae-dd__panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: max(100%, 320px); max-width: calc(100vw - 32px); padding: 8px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 28px rgba(16, 24, 40, .18); }  /* not var(--ae-shadow): it is "none" in dark mode */
html.js .ae-dd__btn[aria-expanded="true"] + .ae-dd__panel { display: block; }
.ae-dd__search { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-bg); color: var(--ae-muted); }
.ae-dd__search:focus-within { border-color: var(--ae-brand); outline: 2px solid var(--ae-brand-ink); outline-offset: 1px; }
.ae-dd__search input { flex: 1 1 auto; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--ae-text); font-size: 15px; outline: none; }  /* the box draws the focus ring */
.ae-dd__scroll, .ae-dd__list { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.ae-dd__list { list-style: none; margin: 0; padding: 0; }
.ae-dd__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--ae-text); font-size: 14px; line-height: 1.35; }
.ae-dd__row:hover { background: var(--ae-surface); text-decoration: none; }
.ae-dd__row:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }  /* inside: the scroll box clips a ring drawn outside */
.ae-dd__row.is-current { background: var(--ae-brand-soft); font-weight: 700; }
.ae-dd__name { min-width: 0; overflow-wrap: anywhere; }
.ae-dd__count, .ae-ctree__count, .ae-related-cats__count { flex: none; min-width: 26px; padding: 0 7px; border-radius: 999px; background: var(--ae-surface); color: var(--ae-muted); font-size: 12px; font-weight: 600; line-height: 1.7; text-align: center; }
.ae-dd__empty { margin: 8px 10px; font-size: 14px; color: var(--ae-muted); }
.ae-dd__empty:empty { margin: 0; }  /* a live region, filled only when the search finds nothing: no room while empty, still in the accessibility tree */
.ae-dir-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ae-dir-sort__field { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ae-muted); }
.ae-dir-sort__field .bi { color: var(--ae-brand-ink); }
.ae-dir-sort select { min-height: 42px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 15px; }
.ae-dir-sort select:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
html.js .ae-dir-sort__go { display: none; }  /* the script sends the form when the sort changes */
/* The category tree (Category menu, Categories block): a toggle, the icon and name, the product count; each level indented */
.ae-ctree { list-style: none; margin: 0; padding: 0; }
.ae-ctree .ae-ctree { padding-left: 18px; }
.ae-ctree__row { display: flex; align-items: center; gap: 4px; }
.ae-ctree__toggle, .ae-ctree__spacer { flex: none; width: 28px; height: 28px; }
.ae-ctree__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ae-muted); font-size: 11px; cursor: pointer; }
.ae-ctree__toggle:hover { background: var(--ae-surface); color: var(--ae-text); }
.ae-ctree__toggle:focus-visible, .ae-ctree__link:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }
.ae-ctree__toggle .bi::before { transition: transform .15s; }
.ae-ctree__toggle[aria-expanded="true"] .bi::before { transform: rotate(90deg); }
.ae-ctree__toggle[aria-busy="true"] { cursor: progress; opacity: .6; }
html:not(.js) .ae-ctree__toggle { visibility: hidden; }  /* a closed branch opens with the script; its name still links to its page */
.ae-ctree__link { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 6px; border-radius: 6px; color: var(--ae-text); font-size: 14px; line-height: 1.35; }
.ae-ctree__link:hover { background: var(--ae-surface); text-decoration: none; }
.ae-ctree__link.is-current { background: var(--ae-brand-soft); font-weight: 700; }
.ae-ctree__link .bi { flex: none; color: var(--ae-link); }
.ae-ctree__name { min-width: 0; overflow-wrap: anywhere; }
.ae-dir-cats { margin-top: 24px; padding: 12px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-dir-cats .ae-dir-head__title { margin: 0 0 8px; }
.ae-dir + .ae-amazon-note { margin-top: 16px; }  /* the note's -8px (made for [ae_list]) would cover the bottom of the Categories block or Load More */
@media (max-width: 1023.98px) {
  .ae-dir-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }  /* the two menus side by side, Sort across both under them */
  html:not(.js) .ae-dir-bar { grid-template-columns: minmax(0, 1fr); }  /* the rows of a menu show in place under its name: one column */
  .ae-dir-bar > .ae-dd:first-child:nth-last-child(2) { grid-column: 1 / -1; }  /* a lone menu (a brand page has only Category) takes the row */
  .ae-dd__scroll, .ae-dd__list { max-height: min(60vh, 420px, calc(100vh - 210px)); }  /* an open menu of the stuck bar ends above the bottom of the window */
  .ae-dd { max-width: none; }
  .ae-dir-bar:not(.is-stuck) .ae-dd + .ae-dd .ae-dd__panel { left: auto; right: 0; }  /* a panel hangs under its own button; the second column's ends at its right edge, or its 320 px would pass the edge of the window (stuck, the panels hang from the whole bar, below) */
  .ae-dir-sort { grid-column: 1 / -1; margin-left: 0; }
  .ae-dir-sort__field, .ae-dir-sort select { flex: 1 1 auto; }
  /* Stuck (theme.js), one row of compact controls, about 56 px; an open menu hangs from the whole bar */
  .ae-dir-bar.is-stuck { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 7px 8px; }
  .ae-dir-bar.is-stuck .ae-dd { position: static; flex: 1 1 0; min-width: 0; }
  .ae-dir-bar.is-stuck .ae-dd__btn { min-height: 40px; padding: 6px 8px; gap: 5px; font-size: 14px; }
  .ae-dir-bar.is-stuck .ae-dd__panel { left: 8px; right: 8px; width: auto; }
  .ae-dir-bar.is-stuck .ae-dir-sort { flex: 1 1 0; min-width: 0; }
  .ae-dir-bar.is-stuck .ae-dir-sort__field { gap: 5px; min-width: 0; }
  .ae-dir-bar.is-stuck .ae-dir-sort__field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* still the select's name */
  .ae-dir-bar.is-stuck .ae-dir-sort select { min-height: 40px; min-width: 0; width: 100%; padding: 6px; font-size: 14px; }
}
.ae-dir-layout { display: grid; gap: 20px; }
.ae-dir-side { min-width: 0; }
.ae-dir-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ae-dir-head__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.ae-dir-count { font-size: 13px; color: var(--ae-muted); }
.ae-dir-head__count { font-size: 14px; font-weight: 600; color: var(--ae-muted); }  /* the total in a brand page's list heading, "ZZ Brand Products (2)" */
.ae-dir-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); overflow: hidden; }
.ae-dir-item + .ae-dir-item { border-top: 1px solid var(--ae-border); }
.ae-dir-item a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--ae-text); text-decoration: none; }
.ae-dir-item a:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }  /* inside: the list clips (overflow: hidden) a ring drawn outside */
.ae-dir-item a:hover, .ae-dir-item.is-active a { background: var(--ae-surface); }
.ae-dir-item.is-active a { box-shadow: inset 3px 0 0 var(--ae-accent); }
.ae-dir-item__img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; border-radius: 6px; background: #fff; }
.ae-dir-item__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.ae-dir-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ae-dir-item__score { display: inline-flex; align-items: center; gap: 4px; color: var(--ae-brand-ink); font-size: 12px; font-weight: 700; line-height: 1.7; }
.ae-dir-item__go { flex: none; font-size: 13px; color: var(--ae-muted); }
.ae-dir-more { display: block; text-align: center; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); color: var(--ae-text); font-weight: 600; text-decoration: none; }  /* one line of text: the count's <span> splits the label, so no flex gaps */
.ae-dir-more .bi { margin-right: 8px; }
.ae-dir-more:hover { border-color: var(--ae-accent); }
.ae-dir-more:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-dir-more[aria-busy="true"] { cursor: progress; opacity: .7; }
.ae-dir-cards { min-width: 0; }
.ae-dir-cards .ae-card__rank { top: 14px; left: -15px; transform: none; }  /* the card's top left, as a tile's: the middle of a tall card is off the screen. It states its own left too, so the phone rule of a post's card (centred on its top edge) never reaches it */
.ae-dir-card + .ae-dir-card { margin-top: 20px; }
.ae-dir-card, #ae-review-form { scroll-margin-top: 80px; }  /* a jump to a card (a row without the script) or to the form (back from a review) clears the sticky header */
.ae-dir--js .ae-dir-card { display: none; }
.ae-dir--js .ae-dir-card.is-active { display: block; margin-top: 0; }
/* The phone view (theme.js): under 1024 px a card shows only full screen, a dialog with a sticky Back bar, over the locked page */
.ae-dir-sheet__bar { display: none; }
.ae-dir-sheet__back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.ae-dir-sheet__back:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-dir-sheet__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
html.ae-dir-locked { overflow: hidden; }
/* Phones with no product open (theme.js): "Select a Product" where the open product's review form stands */
.ae-dir-pick { display: none; padding: 24px 16px; border: 1px dashed var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); color: var(--ae-muted); text-align: center; }
.ae-dir-pick .bi { font-size: 28px; color: var(--ae-brand-ink); }
.ae-dir-pick p { margin: 6px 0 0; font-size: 15px; }
.ae-dir-pick strong { display: block; color: var(--ae-text); font-size: 17px; }
@media (max-width: 1023.98px) {
  .ae-dir--js #ae-review-form { scroll-margin-top: var(--ae-dir-stuck, 260px); }  /* the header and the stuck filter bar, measured by theme.js */
  .ae-dir--js .ae-dir-stack > .ae-dir-card { scroll-margin-top: var(--ae-dir-stuck, 260px); }  /* a brand page's card: a deep link clears them too */
  .ae-dir--js .ae-dir-card.is-active { display: none; }
  .ae-dir--sheet .ae-dir-cards { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px; background: var(--ae-bg); }  /* over the admin bar too */
  .ae-dir--pick:not(.ae-dir--sheet) .ae-dir-pick { display: block; }
  .ae-dir--pick:not(.ae-dir--sheet) #ae-review-form { display: none; }  /* it shows in the view, with the product */
  .ae-dir--sheet .ae-dir-card.is-active { display: block; }
  .ae-dir--sheet .ae-dir-card { scroll-margin-top: 100vh; }  /* a jump to it (a deep link) shows the view's top: Back and the commission line */
  .ae-dir--sheet #ae-review-form { scroll-margin-top: 64px; }  /* in the view: under its Back bar */
  .ae-dir--sheet .ae-dir-sheet__bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 35; margin: 0 -16px 16px; padding: 8px 16px; background: var(--ae-card); border-bottom: 1px solid var(--ae-border); }
}
@media (min-width: 1024px) {
  .ae-dir-layout { grid-template-columns: minmax(0, 38%) minmax(0, 62%); align-items: start; }
  /* With the script the filter bar sticks under the header (69 px: its 68 px row and the border; the rule is beside the bar's own, above), and
     the list panel and the card column stick under the bar: 145 px = 69 + the bar's 68 px (measured at 1440 and 1024, one row at both) + 8 px
     of air. theme.js measures the real bar into --ae-dir-stuck: that is where the panel and the column stick (145 px only until it has measured, or
     for a one-row bar) and the scroll margin of a jump to a card or to the review form, so all of them clear the header and the bar, however many rows it has. */
  .ae-dir--js .ae-dir-list { max-height: max(420px, calc(100vh - 340px)); overflow-y: auto; }  /* scrolls in its own box: with the header, bar, head and Load More the column fits the window */
  .ae-dir--js .ae-dir-cards { position: sticky; top: var(--ae-dir-stuck, 145px); padding-left: 16px; }  /* the card shows whole and the page scrolls it (a box with a max-height cut a tall card at about 700px); its rank bubble hangs into this padding */
  .ae-dir-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 4px; margin: -4px; }  /* the list panel stays in view beside the cards; with the script too, so a tall category tree under it is reached inside the panel. The padding is room for the focus rings of Load More that this scroll box would clip */
  .ae-dir--js .ae-dir-side { top: var(--ae-dir-stuck, 145px); max-height: calc(100vh - var(--ae-dir-stuck, 145px) - 16px); }  /* under the sticky bar (as measured: a bar that wraps to a second row pushes both down), and 16 px above the bottom of the window */
  .ae-dir-side :where(a, button, input, select, textarea, summary):focus-visible { scroll-margin-top: 0; }  /* the panel sticks and scrolls inside itself: its controls are never under the header or the bar (on a phone it is in the page and gets the bar clearance above) */
  .ae-dir--js .ae-dir-card, .ae-dir--js #ae-review-form { scroll-margin-top: var(--ae-dir-stuck, 145px); }
  .ae-dir-card .ae-card__actions { flex-basis: 180px; }  /* the buttons are a narrower column, stacked, so the title has the room */
}
@media (min-width: 1024px) and (max-width: 1099px) { .ae-dir-card .ae-card__head { flex-wrap: wrap; } .ae-dir-card .ae-card__actions { flex-basis: 100%; } }  /* a narrow card column: the buttons under the title */
/* Below the list of a category page: the guide and the questions in one region (a brand page's guide folds the same way). With the script
   (html.js) a guide is folded to a short height until Read more opens it, with a fade made by a mask (it needs no background colour, so it works
   in dark mode too); without the script the region is open and its button hidden. Questions alone (no .ae-guide--fold) are always open, and
   theme.js marks a guide that is not taller than the fold (.is-short): that one is open too, with no fade and no button. The button shows its
   open label (Read more, Read full guide) or Show less from aria-expanded. */
.ae-guide, .ae-faq { max-width: 820px; }  /* one reading width for the guide and the questions under it (brand and store pages) */
.ae-guide { margin-top: 32px; scroll-margin-top: 80px; }
.ae-guide__body > :first-child { margin-top: 0; }
.ae-guide__body h3 { font-size: 18px; margin: 20px 0 6px; }
.ae-guide__body .ae-guide__faq { font-size: 24px; margin: 32px 0 4px; }  /* the questions heading, by its own class: a guide may end with an H3 */
html.js .ae-guide--fold:not(.is-open):not(.is-short) .ae-guide__body { max-height: 11rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.ae-guide__toggle { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-brand-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
html:not(.js) .ae-guide__toggle { display: none; }
.ae-guide.is-short .ae-guide__toggle { display: none; }
.ae-guide__toggle:hover { background: var(--ae-surface); }
.ae-guide__toggle:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-guide__toggle span { display: inline-flex; align-items: center; gap: 6px; }
.ae-guide__toggle[aria-expanded="true"] .ae-guide__open, .ae-guide__toggle[aria-expanded="false"] .ae-guide__close { display: none; }
/* The About block under a category page's cards (Task 12): the heading, what the band left of the description, then the guide (folded) and the questions, in one card at the guide's reading width */
.ae-dir-about { max-width: 820px; margin-top: 32px; padding: 22px 24px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); scroll-margin-top: 80px; }
.ae-dir-about > h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.25; }
.ae-dir-about > p, .ae-dir-about > ul, .ae-dir-about > ol { margin: 0 0 14px; }
.ae-dir-about .ae-guide { margin-top: 8px; }
.ae-dir-about .ae-guide__body h2 { font-size: 21px; margin: 24px 0 8px; }
.ae-dir-about .ae-guide__body .ae-guide__faq { font-size: 21px; margin: 24px 0 4px; }
@media (max-width: 760px) { .ae-dir-about { padding: 18px 16px; } .ae-dir-about > h2 { font-size: 22px; } }
/* Related Categories: a chip per category with its product count, wrapping */
.ae-related-cats { margin-top: 32px; }
.ae-related-cats .ae-dir-head__title { margin-bottom: 12px; }
.ae-related-cats__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.ae-related-cats__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 7px 5px 14px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.ae-related-cats__chip:hover { border-color: var(--ae-brand); background: var(--ae-brand-soft); text-decoration: none; }
.ae-related-cats__chip:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-related-cats__name { min-width: 0; overflow-wrap: anywhere; }
.ae-related-cats__branch { min-width: 0; overflow-wrap: anywhere; color: var(--ae-muted); font-weight: 500; }  /* the parent of a category from another branch: "Air Fryers · Outdoor Cooking" */
.ae-related-cats__branch::before { content: "\00b7"; margin-right: 6px; }
/* A brand page: the stack of full list cards (the cards of a review post) and, from 1024px (the directory's own breakpoint), the sidebar
   beside it: the About card, the guide, the questions and the categories. Under 1024px one column, the sidebar after the stack. Every card of
   the stack shows, with the script too (the one-card-at-a-time rule above belongs to the category page's list pane). */
.ae-brand-layout { display: grid; gap: 28px; align-items: start; }
.ae-brand-main { min-width: 0; }
@media (min-width: 1024px) { .ae-brand-layout { grid-template-columns: minmax(0, 1fr) 350px; } }
.ae-dir--js.ae-dir--stack .ae-dir-card { display: block; }
.ae-dir-stack { margin: 0 0 12px; }  /* .ae-list's 26px above and below, less: the bar and the Products heading sit above it */
.ae-dir-stack > .ae-dir-card + .ae-dir-card { margin-top: 0; }  /* the list's own gap spaces the cards */
.ae-brand-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ae-brand-side .ae-guide { margin-top: 0; }
.ae-brand-side .ae-dir-head__title { margin-bottom: 12px; font-size: 18px; line-height: 1.25; }  /* above the guide's own H2 and H3 */
.ae-brand-side .ae-guide__body h2 { font-size: 18px; margin: 18px 0 6px; }
.ae-brand-side .ae-guide__body > :first-child { margin-top: 0; }
.ae-brand-about, .ae-brand-cats { padding: 18px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); }
.ae-brand-about__intro { margin: 0 0 14px; font-size: 15px; }
.ae-brand-about__intro > :first-child { margin-top: 0; }
.ae-brand-about__intro > :last-child { margin-bottom: 0; }
.ae-brand-about__count { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.ae-brand-about__count .bi { color: var(--ae-brand-ink); }
.ae-brand-cats__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ae-brand-cats__list a { color: var(--ae-brand-ink); font-weight: 600; overflow-wrap: anywhere; }
/* The questions: a button per question (one open at a time with the script). The page prints the buttons disabled and theme.js enables them, so
   without the script every answer shows and a question is plain text (no tab stop, no chevron, no pointer). */
.ae-faq__item { border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); }
.ae-faq__item + .ae-faq__item { margin-top: 8px; }
.ae-faq__q { margin: 0; font-size: 16px; }
.ae-faq__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ae-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ae-faq__btn:hover:not(:disabled) { background: var(--ae-surface); }
.ae-faq__btn:disabled { cursor: default; opacity: 1; }
.ae-faq__btn:disabled .ae-faq__chev { display: none; }
.ae-faq__btn:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }
.ae-faq__text { min-width: 0; overflow-wrap: anywhere; }
.ae-faq__chev { flex: none; color: var(--ae-muted); font-size: 13px; transition: transform .15s; }
.ae-faq__item.is-open .ae-faq__chev { transform: rotate(180deg); }
.ae-faq__a { padding: 0 16px 14px; }
.ae-faq__a p { margin: 0; }
.ae-faq.is-ready .ae-faq__item:not(.is-open) .ae-faq__a { display: none; }  /* .is-ready: set by the questions' script */

/* Browse All Categories and All Products A-Z */
.ae-cat-tree__lead { font-size: 18px; color: var(--ae-muted); }
/* Browse All (Task 13, phase L Task 9): the directory hero, left-aligned with no icon, its text starting where the explorer below it does; the
   explorer beside the sidebar from 900 px */
.ae-bx-hero { background: var(--ae-surface); text-align: left; }  /* plain grey, as theirs */
.ae-bx-hero .ae-post-hero__inner { max-width: 1168px; }  /* the width of .ae-container: .ae-post-hero__inner would narrow it to 880px and centre it */
.ae-bx-hero .ae-breadcrumb { justify-content: flex-start; }
.ae-bx-hero .ae-dir-page__title { margin: 0 0 12px; }
.ae-bx-hero .ae-cat-tree__lead { margin: 0; }
.ae-bx-layout { display: grid; gap: 28px; }
.ae-bx-layout .ae-bx__bar { margin-top: 0; }  /* level with the sidebar */
@media (min-width: 900px) { .ae-bx-layout { grid-template-columns: minmax(0, 68fr) minmax(0, 31fr); align-items: start; } }
/* The category search (Browse All, and the home hero): the box, and under it the matches of the typed words, which the script lists.
   Without the script the component is not shown. */
.ae-cat-search { position: relative; flex: 1 1 260px; min-width: 0; }
.ae-cat-search__box { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 6px 0 12px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-muted); }
.ae-cat-search__box:focus-within { border-color: var(--ae-brand); outline: 2px solid var(--ae-brand-ink); outline-offset: 1px; }
.ae-cat-search__input { flex: 1 1 auto; min-width: 0; padding: 9px 0; border: 0; background: none; color: var(--ae-text); font-size: 15px; outline: none; }  /* the box draws the focus ring */
.ae-cat-search__input::-webkit-search-cancel-button { display: none; }  /* the clear button is ours */
.ae-cat-search__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ae-muted); font-size: 13px; cursor: pointer; }
.ae-cat-search__clear[hidden] { display: none; }
.ae-cat-search__clear:hover { background: var(--ae-surface); color: var(--ae-text); }
.ae-cat-search__clear:focus-visible, .ae-bx__mode:focus-visible, .ae-bx__headlink:focus-visible, .ae-cat-search__link:focus-visible, .ae-bx__azlink:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: -2px; }
.ae-cat-search__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 6px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 28px rgba(16, 24, 40, .18); }  /* not var(--ae-shadow): it is "none" in dark mode */
.ae-cat-search__panel[hidden], .ae-cat-search__list[hidden], .ae-cat-search__empty[hidden] { display: none; }
.ae-cat-search__list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.ae-cat-search__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--ae-text); line-height: 1.35; }
.ae-cat-search__link:hover { background: var(--ae-surface); text-decoration: none; }
.ae-cat-search__opt[aria-selected="true"] .ae-cat-search__link { background: var(--ae-brand-soft); }
.ae-cat-search__main { min-width: 0; }
.ae-cat-search__name { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ae-cat-search__path { display: block; font-size: 12px; color: var(--ae-muted); overflow-wrap: anywhere; }
.ae-cat-search__empty { padding: 14px 10px; text-align: center; font-size: 14px; color: var(--ae-muted); }
.ae-cat-search__empty strong, .ae-cat-search__empty span { display: block; }
.ae-cat-search__empty strong { color: var(--ae-text); }
.ae-cat-search__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* heard, not seen */
html:not(.js) .ae-cat-search, html:not(.js) .ae-bx__bar { display: none; }
/* The explorer: the bar (search, All, A-Z, By Group), the count line, the tree in one block per group, the A-Z list. The expanders of
   the tree are the ones of the category menu (.ae-ctree__toggle) with the number of subcategories in them. */
.ae-bx__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 12px; }  /* holds the By Group panel: its right edge is the page gutter at every width */
.ae-bx__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }  /* wraps on a phone */
.ae-bx__mode { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.ae-bx__mode[hidden] { display: none; }
.ae-bx__mode:hover { border-color: var(--ae-brand); }
.ae-bx__mode[aria-pressed="true"] { border-color: var(--ae-brand); background: var(--ae-brand); color: #fff; }
.ae-bx .ae-dd { position: static; flex: 0 1 auto; min-width: 0; max-width: none; }
.ae-bx .ae-dd__btn { width: auto; }
.ae-bx .ae-dd__label { max-width: 160px; }
html.js .ae-bx .ae-dd__panel { left: auto; right: 0; width: min(320px, calc(100vw - 32px)); }  /* from the right edge of the bar, under the buttons row */
button.ae-dd__row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
button.ae-dd__row:hover { background: var(--ae-surface); }
button.ae-dd__row.is-current { background: var(--ae-brand-soft); }
.ae-dd__name .bi { margin-right: 8px; color: var(--ae-link); }
.ae-bx__count { margin: 0 0 12px; font-size: 14px; color: var(--ae-muted); }
.ae-bx__group { margin: 0 0 16px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); overflow: hidden; }
.ae-bx__group[hidden], .ae-bx__tree[hidden], .ae-bx__az[hidden] { display: none; }
.ae-bx .ae-bx__head { margin: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.3; }  /* beats ".ae-content h2" */
.ae-bx__headlink { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ae-surface); color: var(--ae-text); }
.ae-bx__headlink:hover { background: var(--ae-brand-soft); text-decoration: none; }
.ae-bx__headlink > .bi:first-child { color: var(--ae-brand-ink); }
.ae-bx__gname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.ae-bx__gcount { flex: none; font-size: 13px; font-weight: 600; color: var(--ae-muted); }
.ae-bx__group > .ae-ctree { margin-left: 22px; padding: 8px 10px 10px 12px; border-left: 1px solid var(--ae-border); }  /* the tree line: the group's rows hang from it, their sub lists have their own */
.ae-bx__group .ae-ctree__link > .bi { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ae-surface); color: var(--ae-brand-ink); font-size: 13px; }  /* each row's glyph in a small box */
.ae-bx .ae-ctree__row { gap: 8px; }
.ae-bx .ae-ctree__link { flex: 0 1 auto; padding: 6px 8px; }
.ae-bx .ae-ctree__row > .ae-ctree__count { min-width: 0; padding: 0; background: none; font-weight: 500; }  /* "(N)" right after the name, as the group header's */
.ae-bx .ae-ctree .ae-ctree { margin-left: 14px; border-left: 1px solid var(--ae-border); }
.ae-bx .ae-ctree .ae-ctree .ae-ctree__link { font-size: 13px; }
.ae-bx .ae-ctree__toggle--sub { margin-left: auto; width: auto; padding: 0 8px; gap: 4px; border: 1px solid var(--ae-border); font-size: 12px; font-weight: 600; }
html:not(.js) .ae-bx .ae-ctree__toggle { display: none; }
html.js .ae-ctree--folded { display: none; }  /* the script moves this to the hidden attribute, which the expander then toggles */
.ae-bx .ae-bx__letter { margin: 20px 0 6px; padding: 0 0 4px; border-bottom: 1px solid var(--ae-border); font-size: 20px; line-height: 1.3; }
.ae-bx__azlist { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 24px; }
.ae-bx__azlist li { break-inside: avoid; }
.ae-bx__azlink { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; color: var(--ae-text); font-size: 14px; line-height: 1.35; }
.ae-bx__azlink:hover { background: var(--ae-surface); text-decoration: none; }
.ae-bx__azname { display: block; overflow-wrap: anywhere; }
.ae-bx__azpath { display: block; font-size: 12px; color: var(--ae-muted); overflow-wrap: anywhere; }
.ae-az-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 24px; position: sticky; top: 64px; background: var(--ae-bg); padding: 8px 0; z-index: 5; }
.ae-az-bar a, .ae-az-bar__off { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ae-border); border-radius: 6px; font-weight: 700; text-decoration: none; }
.ae-az-bar__off { color: var(--ae-muted); opacity: .45; }
.ae-az-list { columns: 3 260px; column-gap: 24px; list-style: none; padding: 0; }
.ae-az-list li { break-inside: avoid; margin: 4px 0; }
/* A letter's links and heading clear the header and the letter bar that sticks under it. The bar is 86 px tall in a desktop window (two rows of
   letters, ending at 150 px) and 124 px on a phone (three rows, 188 px), so the 80 px of the page body would leave a focused link or a jumped-to
   letter under it: theme.js measures the bar into --ae-az-stuck (its top, its height and 8 px of air) on the bar's parent, again on a resize;
   158 px is the desktop bar, for the moment before that has run and for a visitor without a script. The bar's own letters keep none. */
.ae-az-list a:focus-visible, .ae-az-bar ~ h2 { scroll-margin-top: var(--ae-az-stuck, 158px); }

/* Home page, Directory layout */
.ae-main:has(> .ae-home-hero:first-child) { padding-top: 0; }
.ae-home-hero { padding: 40px 0 34px; }
.ae-home-hero .ae-post-hero__inner { max-width: 760px; }
.ae-home-hero__trust { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 16px; padding: 6px 14px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; }
.ae-home-hero__trust .bi { flex: none; color: var(--ae-brand-ink); font-size: 18px; }
.ae-home-hero__title { margin: 0 0 8px; font-size: clamp(32px, 6vw, 52px); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; }
.ae-home-hero__tagline { margin: 0 0 22px; font-size: clamp(16px, 2.4vw, 20px); color: var(--ae-muted); }
.ae-home-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 0 0 16px; }
.ae-home-hero__label { font-size: 14px; font-weight: 700; }
.ae-home-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ae-home-chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ae-home-chip:hover { border-color: var(--ae-brand); text-decoration: none; }
.ae-home-chip:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-home-hero__search { max-width: 560px; margin: 0 auto 16px; text-align: left; }
/* The Directory home's flat hero (phase L): a grey band, a 72px H1 and a large search box. The box is shared with Browse All, so every rule is scoped here. */
.ae-home-hero--flat { background: var(--ae-surface-2); }
.ae-home-hero--flat .ae-home-hero__title { font-size: clamp(40px, 7vw, 72px); }
.ae-home-hero--flat .ae-home-hero__search { max-width: 640px; }
.ae-home-hero--flat .ae-cat-search__box { gap: 12px; min-height: 60px; padding: 0 12px 0 10px; border-radius: 14px; background: var(--ae-card); box-shadow: 0 6px 24px rgba(16, 24, 40, .12); }  /* not var(--ae-shadow): it is "none" in dark mode */
.ae-home-hero--flat .ae-cat-search__box > .bi-search { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ae-text); color: var(--ae-bg); font-size: 17px; }
.ae-home-hero--flat .ae-cat-search__input { font-size: 17px; }
.ae-home-hero--flat .ae-cat-search__esc { flex: none; padding: 2px 8px; border: 1px solid var(--ae-border); border-radius: 6px; background: var(--ae-surface); color: var(--ae-muted); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.6; }
@media (max-width: 599px) { .ae-home-hero--flat .ae-cat-search__esc { display: none; } }  /* a phone has no Escape key */
.ae-dir-home { padding-top: 32px; padding-bottom: 40px; }
/* Browse Categories across the container (Task 13): a small centred badge, the tiles, the two buttons centred under them */
.ae-dir-home__badge { display: table; margin: 0 auto 18px; padding: 5px 12px; border-radius: 999px; background: var(--ae-surface-2); color: var(--ae-muted); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.ae-dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .ae-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ae-dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ae-dir-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; min-width: 0; padding: 16px; background: var(--ae-card); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); color: var(--ae-text); text-decoration: none; }
.ae-dir-tile:hover { border-color: var(--ae-accent); }
.ae-dir-tile > .bi { grid-row: 1 / span 2; font-size: 26px; color: var(--ae-link); }  /* the category icon, left of the name and the count */
.ae-dir-tile > .ae-dir-tile__go { grid-column: 3; font-size: 16px; color: var(--ae-muted); }  /* the arrow, right of them */
.ae-dir-tile:hover > .ae-dir-tile__go { color: var(--ae-text); }
.ae-dir-tile__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ae-dir-tile__count { font-size: 13px; color: var(--ae-muted); }
@media (max-width: 479px) {  /* two tiles a row: the icon and the arrow on top, the name and count across the tile */
  .ae-dir-tile { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 12px; }
  .ae-dir-tile > .bi { grid-row: auto; }
  .ae-dir-tile__name, .ae-dir-tile__count { grid-column: 1 / -1; }
  .ae-dir-tile > .ae-dir-tile__go { grid-column: 2; grid-row: 1; }
}
.ae-dir-home__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 40px; }
.ae-btn--ghost { background: transparent; color: var(--ae-text); border: 1px solid var(--ae-border); }
.ae-btn--pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); }
.ae-btn--pill:hover { border-color: var(--ae-brand); text-decoration: none; }
.ae-btn--primary { background: var(--ae-brand-ink); color: var(--ae-bg); }  /* light: white on deep green (7.1:1); dark: near-black on mint (10:1) */
.ae-btn--primary:hover { opacity: .9; }
.ae-dir-home .ae-btn { text-decoration: none; }

/* Product reviews in directory cards */
.ae-card-reviews { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-card-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }  /* the title and "Write a review" on one row; the button drops under the title on a narrow card */
.ae-card-reviews h3 { margin: 0; font-size: 16px; }
.ae-card-reviews__head .ae-btn { padding: 6px 14px; font-size: 14px; }
.ae-card-reviews .ae-reviews__list { margin: 8px 0; padding-left: 0; list-style: none; }
.ae-review-form--product { margin-top: 20px; }
.ae-review-form--product select { max-width: 100%; }

/* Newsletter: the band (after the home pages' main content, and [ae_newsletter] anywhere) and the box in a post's sidebar. The reply of a
   submit shows in the first form of the page, which carries id="ae-newsletter". The band is the brand green with white text, light and dark alike. */
.ae-newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin: 40px 0; padding: 28px 32px; background: var(--ae-brand); color: #fff; border-radius: var(--ae-radius); scroll-margin-top: 84px; }
.ae-container > .ae-newsletter:last-child { margin-bottom: 0; }
.ae-newsletter__intro { flex: 1 1 300px; min-width: 0; }
.ae-newsletter__side { flex: 1 1 340px; min-width: 0; max-width: 480px; }
.ae-newsletter__label { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ae-newsletter__title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.ae-content .ae-newsletter__title, .single-post .ae-article .ae-content .ae-newsletter__title { margin: 0 0 6px; padding: 0; border: 0; font-size: 24px; }  /* [ae_newsletter] in a text: beats ".ae-content h2" and a post's bar */
.ae-newsletter__text { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ae-newsletter__msg { margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid #fff; background: rgba(0, 0, 0, .22); font-size: 15px; font-weight: 600; line-height: 1.4; }
.ae-newsletter-form { display: flex; gap: 8px; }
.ae-newsletter-form input[type=email] { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: #fff; color: #1c2127; }
.ae-newsletter-form input[type=email]::placeholder { color: #5f6b76; opacity: 1; }
.ae-newsletter-form .ae-btn { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 18px; background: #0f1216; color: #fff; }
.ae-newsletter-form input:focus-visible, .ae-newsletter-form .ae-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ae-newsletter__note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.ae-newsletter__note a { color: #fff; text-decoration: underline; }
.ae-newsletter-box { scroll-margin-top: 84px; }  /* the box is the target of #ae-newsletter when it is the first form of a post page */
.ae-newsletter-box .ae-newsletter__text { margin-bottom: 12px; font-size: 15px; color: var(--ae-muted); }
.ae-newsletter-box .ae-newsletter__msg { margin-bottom: 12px; border-left-color: var(--ae-brand); background: var(--ae-brand-soft); color: var(--ae-text); }
.ae-newsletter-box .ae-newsletter-form { flex-direction: column; }
.ae-newsletter-box .ae-newsletter-form input[type=email] { border-color: var(--ae-border); background: var(--ae-bg); color: var(--ae-text); }
.ae-newsletter-box .ae-newsletter-form input[type=email]::placeholder { color: var(--ae-muted); }
.ae-newsletter-box .ae-newsletter-form .ae-btn { justify-content: center; background: var(--ae-text); color: var(--ae-bg); }
.ae-newsletter-box .ae-newsletter-form input:focus-visible, .ae-newsletter-box .ae-newsletter-form .ae-btn:focus-visible { outline-color: var(--ae-brand-ink); }
.ae-newsletter-box .ae-newsletter__note { color: var(--ae-muted); }
.ae-newsletter-box .ae-newsletter__note a { color: var(--ae-link); }
@media (max-width: 480px) {
  .ae-newsletter { padding: 22px 18px; }
  .ae-newsletter__title, .ae-content .ae-newsletter__title, .single-post .ae-article .ae-content .ae-newsletter__title { font-size: 21px; }
  .ae-newsletter-form { flex-direction: column; }
  .ae-newsletter-form .ae-btn { justify-content: center; }
}

/* Magazine home (AE Settings > Site > Home layout "Magazine"): the hero's columns stack, side by side from 1024 px; a block per top-level
   category in four layouts that take turns (lead + rows, grid, compact rows, carousel); "Who is". Colour tokens only, so dark mode follows. */
.ae-mag-h1, .ae-home-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* the one H1 of the Magazine and Reviews homes (the site name), read, not shown */
.ae-mag-hero { display: grid; gap: 28px; }
.ae-mag-col { min-width: 0; }
.ae-mag-col__title { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ae-text); color: var(--ae-text); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.ae-mag-list { margin: 0; padding: 0; list-style: none; }
.ae-mag-list > li { padding: 10px 0; border-bottom: 1px solid var(--ae-border); }
.ae-mag-list > li:last-child { border-bottom: 0; }
.ae-mag-date { display: block; font-size: 13px; color: var(--ae-muted); }
.ae-mag-title { color: var(--ae-text); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ae-mag-by { margin: 0; font-size: 14px; color: var(--ae-muted); }
.ae-mag-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--ae-radius); background: var(--ae-surface); }
.ae-mag-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ae-mag-media--product { background: #fff; }  /* a borrowed product photo sits on white, fitted */
.ae-mag-media--product img { object-fit: contain; padding: 8px; }
.ae-mag-media__ph { display: flex; height: 100%; align-items: center; justify-content: center; padding: 8px; color: var(--ae-muted); font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.ae-mag-feature { margin-top: 12px; }
.ae-mag-feature__title { margin: 14px 0 6px; font-size: 26px; line-height: 1.2; }
.ae-mag-feature__excerpt { margin: 0 0 8px; font-size: 16px; color: var(--ae-muted); }
.ae-mag-block { margin-top: 48px; }
.ae-mag-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--ae-text); }
.ae-mag-block__name { min-width: 0; }
.ae-mag-block__title { margin: 0; font-size: 26px; line-height: 1.2; }
.ae-mag-block__title a { color: var(--ae-text); }
.ae-mag-block__more { margin: 4px 0 0; font-size: 14px; color: var(--ae-muted); }
.ae-mag-block__more a { color: var(--ae-brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ae-mag-lead { display: grid; gap: 12px 32px; }
.ae-mag-card { display: flex; flex-direction: column; min-width: 0; }
.ae-mag-card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.ae-mag-card__title { margin: 0; font-size: 18px; line-height: 1.3; }
.ae-mag-card--lead .ae-mag-card__title { font-size: 24px; }
.ae-mag-card__excerpt { margin: 2px 0 0; font-size: 15px; color: var(--ae-muted); }
.ae-mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }  /* three cards fill a row from 1024 px, no empty fourth column */
.ae-mag-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.ae-mag-compact > li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ae-mag-media--thumb { flex: none; width: 96px; aspect-ratio: 1; border-radius: 8px; }
.ae-mag-media--thumb .ae-mag-media__ph { padding: 4px; font-size: 11px; }
.ae-mag-compact__text { min-width: 0; }
.ae-mag-carousel__nav { display: flex; flex: none; gap: 6px; }
.ae-mag-carousel__nav.is-off { visibility: hidden; }  /* until theme.js has measured the track, and while every card fits: the place is kept, nothing moves */
html:not(.js) .ae-mag-carousel__nav { display: none; }
.ae-mag-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ae-border); border-radius: 50%; background: var(--ae-card); color: var(--ae-text); font-size: 16px; cursor: pointer; }
.ae-mag-carousel__btn:hover:not(:disabled) { border-color: var(--ae-brand); }
.ae-mag-carousel__btn:disabled { opacity: .4; cursor: default; }
.ae-mag-carousel__btn:focus-visible, .ae-mag-carousel__track:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-mag-carousel__track { display: flex; gap: 20px; padding: 4px 4px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 4px; scrollbar-width: thin; }
.ae-mag-carousel__track > .ae-mag-card { flex: 0 0 min(260px, 80%); scroll-snap-align: start; }
.ae-mag-who { margin-top: 48px; padding: 32px; border-radius: var(--ae-radius); background: var(--ae-surface); color: var(--ae-text); }
.ae-mag-who__title { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
.ae-mag-who__intro { max-width: 760px; margin: 0 0 20px; font-size: 18px; }
.ae-mag-stats { display: flex; flex-wrap: wrap; gap: 12px 44px; margin: 0 0 24px; padding: 0; list-style: none; font-weight: 600; }
.ae-mag-stats__n { display: block; font-size: 34px; line-height: 1.1; color: var(--ae-brand-ink); }
.ae-mag-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.ae-mag-pillar { padding: 18px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-mag-pillar__title { margin: 0 0 6px; font-size: 18px; }
.ae-mag-pillar__title a { color: var(--ae-text); }
.ae-mag-pillar p { margin: 0; font-size: 15px; color: var(--ae-muted); }
.ae-mag-who__sub { margin: 0 0 14px; font-size: 18px; }
.ae-mag-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 12px; margin: 0; padding: 0; list-style: none; }
.ae-mag-team__member { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ae-mag-team__member .avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.ae-mag-team__name { font-weight: 700; color: var(--ae-text); overflow-wrap: anywhere; }
.ae-mag-team__label { font-size: 13px; color: var(--ae-muted); overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .ae-mag-hero--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ae-mag-hero--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
  .ae-mag-lead { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 600px) { .ae-mag-who { padding: 22px 16px; } }

/* Guides page ([ae_guides], the page ae-pro makes at /guides/): the page is as wide as the grid, the chips filter by category, the cards are the ones of every post list */
.ae-page:has(.ae-guides) { max-width: 1168px; }
.ae-guides__intro { margin: 0 0 18px; color: var(--ae-muted); }
.ae-guides .ae-post-card__title { margin: 0; font-size: 18px; }  /* the page text is in .ae-content, whose h3 (21px, a 26px top margin) would restyle the card titles */
.ae-guides__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ae-guides__chip { display: inline-block; max-width: 100%; padding: 4px 12px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ae-guides__chip:hover { border-color: var(--ae-brand); text-decoration: none; }
.ae-guides__chip:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-guides__chip.is-current { background: var(--ae-text); border-color: var(--ae-text); color: var(--ae-bg); }

/* Product compare: the checkbox in a card's actions (hidden until theme.js has the bar and two boxes: html.ae-compare-ready), the floating bar,
   and the Compare page's table (a box that scrolls sideways on its own, the row labels sticky in the first column). */
.ae-compare-check { display: none; align-self: flex-start; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--ae-text); cursor: pointer; }
html.ae-compare-ready .ae-compare-check { display: inline-flex; }
.ae-compare-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ae-brand); cursor: inherit; }
.ae-compare-check:has(input:disabled) { color: var(--ae-muted); cursor: not-allowed; }
.ae-compare-check:has(input:focus-visible) { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; border-radius: 6px; }
.ae-compare-bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 100001; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(560px, calc(100vw - 32px)); padding: 10px 12px 10px 16px; background: var(--ae-card); color: var(--ae-text); border: 1px solid var(--ae-border); border-radius: var(--ae-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 28px rgba(16, 24, 40, .22); }  /* over the phone product view (100000); not var(--ae-shadow): it is "none" in dark mode */
.ae-compare-bar[hidden] { display: none; }
.ae-compare-bar__count { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ae-compare-bar__go, .ae-compare-bar__clear { flex: none; min-height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ae-compare-bar__go { border: 1px solid var(--ae-buy); background: var(--ae-buy); color: #fff; }
.ae-compare-bar__go:hover:not(:disabled) { background: var(--ae-buy-hover); border-color: var(--ae-buy-hover); }
.ae-compare-bar__go:disabled { opacity: .5; cursor: not-allowed; }
.ae-compare-bar__clear { border: 1px solid var(--ae-border); background: transparent; color: var(--ae-text); }
.ae-compare-bar button:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
html.ae-compare-bar-on body { padding-bottom: 88px; }
html.ae-compare-bar-on .ae-toc-fab { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px); }
html.ae-compare-bar-on .ae-toc-panel { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 140px); }
html.ae-compare-bar-on .ae-dir--sheet .ae-dir-cards { padding-bottom: 96px; }
.ae-page:has(.ae-compare) { max-width: 1168px; }
.ae-compare__sub { margin: 0 0 16px; color: var(--ae-muted); overflow-wrap: anywhere; }
.ae-compare__none { margin: 0 0 8px; font-weight: 600; }
.ae-compare__scroll { margin: 0 0 26px; overflow-x: auto; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-compare__scroll:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-compare__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ae-compare__table th, .ae-compare__table td { padding: 12px 14px; border-bottom: 1px solid var(--ae-border); background: var(--ae-card); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ae-compare__table tbody tr:last-child > * { border-bottom: 0; }
.ae-compare__table td, .ae-compare__head { min-width: 170px; }
.ae-compare__corner { position: sticky; left: 0; z-index: 2; min-width: 120px; border-right: 1px solid var(--ae-border); }
.ae-compare__table tbody th { position: sticky; left: 0; z-index: 1; width: 120px; min-width: 120px; border-right: 1px solid var(--ae-border); color: var(--ae-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: normal; }
.ae-compare__table .ae-compare__head { text-align: center; }
.ae-compare__img { display: block; width: 96px; height: 96px; margin: 0 auto 10px; object-fit: contain; background: #fff; border-radius: 10px; }
.ae-compare__name { display: block; color: var(--ae-text); font-weight: 700; line-height: 1.35; }
.ae-compare__name:hover { color: var(--ae-link); }
.ae-compare__score { font-size: 17px; font-weight: 800; }
.ae-compare__label { font-size: 12px; font-weight: 600; color: var(--ae-muted); }
.ae-compare__price { font-weight: 800; }
.ae-compare__mark { background: var(--ae-pill-top-bg); color: var(--ae-pill-top-fg); }
.ae-compare__na { color: var(--ae-muted); }
.ae-compare__list { margin: 0; padding-left: 18px; }
.ae-compare__table li + li { margin-top: 4px; }
.ae-compare__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Coupons and store pages: a coupon is a card (the store's logo on the Coupons page), its title, store, Verified and Expires, then "Show Coupon Code"
   or "Get Deal". With theme.js the code waits for that click (.is-revealed); without it the code shows and Copy, which needs the script, is hidden.
   A logo sits on a white tile in both modes (logos are made for a white page); a store without one shows its initials. */
.ae-coupons { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ae-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-coupon__logo { display: flex; flex: none; }
.ae-coupon__main { flex: 1 1 200px; min-width: 0; }
.ae-coupons .ae-coupon__title { margin: 0 0 4px; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }  /* beats ".ae-content h2" on the Coupons page */
.ae-coupon__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--ae-muted); font-size: 14px; }
.ae-coupon__meta .bi { margin-right: 4px; }
.ae-coupon__store { font-weight: 600; }
.ae-coupon__verified { padding: 2px 8px; border-radius: 999px; background: var(--ae-pill-top-bg); color: var(--ae-pill-top-fg); font-weight: 600; }
.ae-coupon__expires, .ae-coupon__expired { white-space: nowrap; }
.ae-coupon__desc { margin: 6px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.ae-coupon--expired { border-style: dashed; background: var(--ae-surface); }  /* put away: no card emphasis, the text keeps its contrast */
.ae-coupon--expired .ae-coupon__title { color: var(--ae-muted); }
.ae-coupon__act { display: flex; flex: 0 1 220px; flex-direction: column; gap: 8px; min-width: 0; }
.ae-coupon__btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; background: var(--ae-buy); color: #fff; font-size: 15px; font-weight: 700; text-align: center; }
.ae-coupon__btn:hover { background: var(--ae-buy-hover); color: #fff; text-decoration: none; }
.ae-coupon__btn:focus-visible, .ae-coupon__copy:focus-visible, .ae-store-visit:focus-visible, .ae-store-card:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-coupon__code { display: flex; flex-wrap: wrap; gap: 6px; }
html.js .ae-coupon:not(.is-revealed) .ae-coupon__code { display: none; }
html:not(.js) .ae-coupon__copy { display: none; }
.ae-coupon__input { flex: 1 1 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 2px dashed var(--ae-brand); border-radius: 8px; background: var(--ae-surface); color: var(--ae-text); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.ae-coupon__copy { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ae-border); border-radius: 8px; background: var(--ae-card); color: var(--ae-text); font-weight: 600; cursor: pointer; }
.ae-coupon__copy:hover { background: var(--ae-surface); }
.ae-coupon__status { color: var(--ae-brand-ink); font-size: 13px; font-weight: 600; }
.ae-coupon__status:empty { margin-top: -8px; }  /* no room while silent, yet in the page: a live region must be there before it speaks */
.ae-store-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--ae-border); border-radius: 10px; background: #fff; object-fit: contain; font-size: 16px; font-weight: 800; }
.ae-store-logo--initials { background: var(--ae-brand-soft); color: var(--ae-brand-ink); }
.ae-coupons-page__intro { margin: 0 0 18px; color: var(--ae-muted); }
.single-ae_store .ae-main { padding-top: 0; }  /* the hero starts right under the header (a browser without :has()) */
.ae-store-hero .ae-store-logo { display: flex; width: 72px; height: 72px; margin: 0 auto 12px; font-size: 24px; }
.ae-store-hero__visit { margin: 16px 0 0; }
.ae-store-hero .ae-list-disclosure { margin: 12px 0 0; color: var(--ae-text); }  /* the muted ink was 4.62:1 at the pink end of the hero */
.ae-store-visit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ae-brand); color: #fff; font-weight: 700; }
.ae-store-visit:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
.ae-store-page { max-width: 880px; padding-top: 24px; padding-bottom: 40px; }
.ae-store-page .ae-dir-head__title { margin-bottom: 12px; font-size: 22px; line-height: 1.25; }
.ae-store-page .ae-guide__body h2 { font-size: 20px; margin: 20px 0 6px; }
.ae-store-page > * + * { margin-top: 32px; }
.ae-coupons-expired { margin-top: 16px; }
.ae-coupons-expired summary { padding: 8px 0; font-weight: 600; cursor: pointer; }
.ae-coupons-expired .ae-coupons { margin-top: 8px; }
.ae-coupons-expired__more { margin: 8px 0 0; font-size: 14px; color: var(--ae-muted); }
.ae-store-summary { width: 100%; border-collapse: collapse; }
.ae-store-summary th, .ae-store-summary td { padding: 10px 12px; border-bottom: 1px solid var(--ae-border); text-align: left; }
.ae-store-summary th { width: 50%; color: var(--ae-muted); font-weight: 600; }
.ae-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ae-store-card { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); color: var(--ae-text); font-weight: 600; }
.ae-store-card:hover { border-color: var(--ae-brand); text-decoration: none; }
.ae-store-card .ae-store-logo { width: 40px; height: 40px; font-size: 14px; }
.ae-store-card__name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .ae-coupon__act { flex-basis: 100%; } }

/* Buying guides (ae-pro's FacetPage): a table scrolls sideways in its own box on a phone, not the page; a pick's specs sit above its card */
.ae-post-hero + .ae-page { padding-top: 24px; }
.ae-facet__stat { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.ae-facet__scroll { overflow-x: auto; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-card); }
.ae-facet__scroll:focus-visible { outline: 2px solid var(--ae-brand-ink); outline-offset: 2px; }
.ae-facet__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ae-facet__table th, .ae-facet__table td { padding: 10px 12px; border-bottom: 1px solid var(--ae-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ae-facet__table thead th { color: var(--ae-muted); font-size: 13px; }
.ae-facet__table tbody tr:last-child > * { border-bottom: 0; }
.ae-facet__table--specs :is(th, td):not(:first-child) { min-width: 6em; overflow-wrap: normal; }
.ae-facet__pick { margin: 0 0 28px; scroll-margin-top: 80px; }
.ae-facet__specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 0 0 14px; }
.ae-facet__specs div { padding: 8px 12px; border: 1px solid var(--ae-border); border-radius: 10px; background: var(--ae-surface); }
.ae-facet__specs dt { font-size: 13px; color: var(--ae-muted); }
.ae-facet__specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Home page, Niche layout: its parts under the hero, link lists in columns, the sort line, a tile's spec chips */
.ae-niche-home { padding-top: 32px; padding-bottom: 40px; }
.ae-niche__part { margin: 0 0 40px; }
.ae-niche__links { columns: 2 280px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.ae-niche__links li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--ae-border); }
.ae-niche__links .ae-best__count, .ae-niche__sort { color: var(--ae-muted); font-size: 14px; }
.ae-niche__sort [aria-current] { color: var(--ae-text); font-weight: 600; }
.ae-niche__more { margin: 12px 0 0; font-weight: 600; }
.ae-related-buying { margin-top: 32px; }  /* Related buying guides under a Tip: the Niche home's list in the article column */
.ae-related-buying h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; }
.ae-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ae-card__chips li { padding: 2px 8px; border-radius: 999px; background: var(--ae-surface); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* Tips: the one list on a single-niche site's Guides page, and "Worth reading first" at the top of a buying guide; long words wrap, so a 360px screen never scrolls sideways */
.ae-tips { max-width: 760px; margin: 0; padding: 0; list-style: none; }
.ae-tips li { padding: 12px 0; border-bottom: 1px solid var(--ae-border); }
.ae-tips a { font-weight: 600; overflow-wrap: anywhere; }
.ae-tips__line { display: block; margin-top: 2px; color: var(--ae-muted); font-size: 15px; overflow-wrap: anywhere; }
.ae-facet__first { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-surface); font-size: 15px; overflow-wrap: anywhere; }

/* Good fit if, Skip if and Verdict under a buying guide's pick (ae-pro's ProductFit): two columns from 640px, one below */
.ae-fit { display: grid; gap: 12px; margin: 12px 0 0; font-size: 15px; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ae-fit { grid-template-columns: 1fr 1fr; } }
.ae-fit__col { padding: 12px 14px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-surface); }
.ae-fit h4 { margin: 0 0 6px; font-size: 15px; }
.ae-fit ul { margin: 0; padding-left: 20px; }
.ae-fit li + li { margin-top: 4px; }
.ae-fit__verdict { grid-column: 1 / -1; margin: 0; }

/* A buying guide's AI text (ae-pro's NicheAi): the opening paragraph above everything, "Which one is right for you?" and the Questions; long words wrap at 360px */
.ae-facet__lede { margin: 0 0 16px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.ae-facet__personas { margin: 0; padding-left: 20px; overflow-wrap: anywhere; }
.ae-facet__personas li + li { margin-top: 10px; }
[aria-labelledby="ae-facet-questions"] h3 { margin: 18px 0 6px; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
[aria-labelledby="ae-facet-questions"] p { margin: 0; overflow-wrap: anywhere; }

/* The Top pick box above the Niche home's H1 (image, name, button; the button on its own row under 480px) and the Long guide home (ae-pro's NicheHome): byline, lede, numbers, a ranked pick's ribbon on its top border */
.ae-toppick { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px 14px; max-width: 640px; margin: 0 auto 18px; padding: 10px 14px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-surface); font-size: 15px; text-align: left; }
.ae-toppick:not(:has(> img)) { grid-template-columns: 1fr auto; }
.ae-toppick__img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; }
.ae-toppick__name { margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ae-toppick__label { color: var(--ae-muted); font-size: 12px; font-variant: small-caps; letter-spacing: .04em; }
@media (max-width: 480px) { .ae-toppick { grid-template-columns: 56px 1fr; } .ae-toppick:not(:has(> img)) { grid-template-columns: 1fr; } .ae-toppick__img { width: 56px; height: 56px; } .ae-toppick__btn { grid-column: 1 / -1; } }
.ae-niche__byline { margin: 0; color: var(--ae-muted); font-size: 15px; }
.ae-niche__lede { margin: 0 0 8px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.ae-niche__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.ae-niche__stats li { padding: 12px 14px; border: 1px solid var(--ae-border); border-radius: var(--ae-radius); background: var(--ae-surface); color: var(--ae-muted); font-size: 14px; }
.ae-niche__stats b { display: block; color: var(--ae-text); font-size: 28px; line-height: 1.2; }
.ae-niche__pick { position: relative; margin: 0 0 32px; padding-top: 24px; border-top: 1px solid var(--ae-border); scroll-margin-top: 80px; }
.ae-ribbon { position: absolute; top: 0; left: 12px; transform: translateY(-50%); margin: 0; padding: 2px 10px; border-radius: 4px; background: var(--ae-text); color: var(--ae-bg); font-size: 13px; font-weight: 700; line-height: 1.6; }
.ae-list-disclosure + .ae-niche__pick { margin-top: 24px; }  /* the first ribbon clears the commission line */

/* The Long guide home's AI sections (ae-pro's NichePillar): a reading width, their AI note, the Glossary as terms over their meanings, the Questions; long words wrap at 360px */
[aria-labelledby^="ae-niche-pillar-"] { max-width: 820px; overflow-wrap: anywhere; }
.ae-niche__ai { color: var(--ae-muted); font-size: 15px; }
[aria-labelledby^="ae-niche-pillar-"] h3 { margin: 18px 0 6px; font-size: 18px; line-height: 1.35; }
.ae-glossary { margin: 0; }
.ae-glossary dt { margin: 14px 0 2px; font-weight: 600; }
.ae-glossary dd { margin: 0; }

/* The 404 page (not a band: its heading is the page's one h1): an icon in a disc, the big code, the heading, one sentence, Go Home and Go Back, the search form, then the Popular row of links. Go Back calls history.back() in theme.js, so without a script it is not drawn. */
.ae-404 { padding-top: 40px; padding-bottom: 40px; text-align: center; }
.ae-404__icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: var(--ae-brand-soft); color: var(--ae-brand-ink); font-size: 32px; }
.ae-404__code { display: block; font-size: clamp(72px, 16vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--ae-brand-ink); }
.ae-404 h1 { margin: 12px 0 8px; font-size: 32px; line-height: 1.2; }
.ae-404__text { max-width: 480px; margin: 0 auto 24px; color: var(--ae-muted); }
.ae-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; }
.ae-404__actions .ae-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
html:not(.js) .ae-404__back { display: none; }
.ae-404__search { max-width: 520px; margin: 0 auto 28px; text-align: left; }
/* The search field with its magnifier inside on the right (the label's ::after, over the field) and no visible button: the core form's submit
   stays in the tab order and is what Enter sends; it shows over the magnifier while it has the keyboard focus (the skip link pattern). */
.ae-404__search .search-form { display: block; position: relative; }
.ae-404__search label { position: relative; display: block; }
.ae-404__search label::after { content: "\f52a"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-family: "bootstrap-icons"; font-size: 18px; line-height: 1; color: var(--ae-muted); pointer-events: none; }
.ae-404__search .search-field { padding: 14px 48px 14px 18px; border-radius: 12px; }
.ae-404__search .search-submit { position: absolute; top: 50%; right: 8px; z-index: 1; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; transform: translateY(-50%); }
.ae-404__search .search-submit:focus { width: auto; height: auto; padding: 8px 14px; overflow: visible; clip: auto; }
.ae-404__search .search-form:has(.search-submit:focus) .search-field { padding-right: 104px; }  /* the typed words end before the button */
.ae-404__popular { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.ae-404__label { color: var(--ae-muted); font-size: 14px; font-weight: 600; }
.ae-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.ae-404__links a { display: inline-block; padding: 5px 14px; border: 1px solid var(--ae-border); border-radius: 999px; background: var(--ae-card); color: var(--ae-text); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ae-404__links a:hover { border-color: var(--ae-brand-ink); text-decoration: none; }

/* Bootstrap Icons 1.13.2: the glyphs the theme, the product card tabs, the category icons, the magazine front end, the revenue features and the phase L parts use, one rule each. Code points come from font/bootstrap-icons.css of the package (see scripts/vendor-assets.md). The shared .bi::before rule is higher up. Keep this section last in the file. The icon font holds only these code points (vendor/bootstrap-icons/subset-codepoints.txt): a new rule needs the subset made again (scripts/vendor-assets.md). */
/* Drawn by the theme */
.bi-info-circle::before { content: "\f431"; }
.bi-calendar3::before { content: "\f214"; }
.bi-clock::before { content: "\f293"; }
.bi-eye::before { content: "\f341"; }
.bi-chat-square-text::before { content: "\f264"; }
.bi-list-ul::before { content: "\f478"; }
.bi-box-arrow-up-right::before { content: "\f1c5"; }
.bi-bar-chart-fill::before { content: "\f17a"; }
.bi-patch-check-fill::before { content: "\f4b5"; }
.bi-hand-thumbs-up::before { content: "\f407"; }
.bi-card-text::before { content: "\f228"; }
.bi-table::before { content: "\f5aa"; }
.bi-chevron-down::before { content: "\f282"; }
.bi-chevron-up::before { content: "\f286"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-search::before { content: "\f52a"; }
.bi-moon-stars::before { content: "\f496"; }
.bi-sun::before { content: "\f5a2"; }
.bi-list::before { content: "\f479"; }
.bi-tag-fill::before { content: "\f5af"; }
.bi-house-door::before { content: "\f423"; }
.bi-x-lg::before { content: "\f659"; }
.bi-arrow-up::before { content: "\f148"; }
.bi-twitter-x::before { content: "\f8db"; }
.bi-linkedin::before { content: "\f472"; }
.bi-facebook::before { content: "\f344"; }
.bi-instagram::before { content: "\f437"; }
.bi-globe::before { content: "\f3ee"; }
.bi-lightning-charge::before { content: "\f46d"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-folder-fill::before { content: "\f3d1"; }
.bi-bookmark::before { content: "\f1a2"; }
/* Drawn by the theme on the directory pages (phase D: category hero and filters, sorts, Load More, trees, brand page, explorer, home hero). The font was made once for the phase, so some come before the markup that uses them. */
.bi-diagram-3::before { content: "\f2ee"; }
.bi-tag::before { content: "\f5b0"; }
.bi-sort-down::before { content: "\f575"; }
.bi-plus-circle::before { content: "\f4fa"; }
.bi-grid::before { content: "\f3fc"; }
.bi-sort-alpha-down::before { content: "\f571"; }
.bi-funnel::before { content: "\f3e1"; }
.bi-folder::before { content: "\f3d7"; }
.bi-building::before { content: "\f1dd"; }
.bi-file-earmark-text::before { content: "\f38b"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-patch-check::before { content: "\f4b6"; }
.bi-hand-index::before { content: "\f403"; }
/* More tab icons: with the ones above, exactly AE\AI\Domain\Icons::ALLOWED (the prompt, the validator and the card use that list) */
.bi-tools::before { content: "\f5db"; }
.bi-gear::before { content: "\f3e5"; }
.bi-people::before { content: "\f4d0"; }
.bi-rulers::before { content: "\f523"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-lightbulb::before { content: "\f46b"; }
.bi-box-seam::before { content: "\f1c7"; }
.bi-battery-charging::before { content: "\f185"; }
.bi-droplet::before { content: "\f30d"; }
.bi-thermometer-half::before { content: "\f5cd"; }
.bi-volume-up::before { content: "\f611"; }
.bi-wifi::before { content: "\f61c"; }
.bi-house::before { content: "\f425"; }
.bi-star::before { content: "\f588"; }
.bi-question-circle::before { content: "\f505"; }
.bi-clipboard-check::before { content: "\f28b"; }
.bi-brush::before { content: "\f1d8"; }
.bi-truck::before { content: "\f5ea"; }
.bi-recycle::before { content: "\f64f"; }
.bi-heart::before { content: "\f417"; }
.bi-speedometer2::before { content: "\f580"; }
.bi-wind::before { content: "\f61d"; }
.bi-plug::before { content: "\f4f7"; }
.bi-cup-hot::before { content: "\f7eb"; }
.bi-fire::before { content: "\f7f6"; }
.bi-snow::before { content: "\f56d"; }
.bi-exclamation-triangle::before { content: "\f33b"; }
.bi-check-circle::before { content: "\f26b"; }
.bi-wrench-adjustable::before { content: "\f790"; }
.bi-bag-check::before { content: "\f171"; }
/* More category icons: with the ones above, exactly AE\Pro\Domain\CategoryIcons::ALLOWED (the SEO Categories picker offers that list) */
.bi-egg-fried::before { content: "\f312"; }
.bi-basket::before { content: "\f180"; }
.bi-laptop::before { content: "\f456"; }
.bi-phone::before { content: "\f4e7"; }
.bi-tablet::before { content: "\f5ae"; }
.bi-display::before { content: "\f302"; }
.bi-tv::before { content: "\f5ed"; }
.bi-headphones::before { content: "\f413"; }
.bi-speaker::before { content: "\f57e"; }
.bi-camera::before { content: "\f220"; }
.bi-watch::before { content: "\f616"; }
.bi-controller::before { content: "\f2d4"; }
.bi-joystick::before { content: "\f448"; }
.bi-cpu::before { content: "\f2d6"; }
.bi-router::before { content: "\f6ec"; }
.bi-printer::before { content: "\f501"; }
.bi-keyboard::before { content: "\f451"; }
.bi-mouse::before { content: "\f499"; }
.bi-lamp::before { content: "\f454"; }
.bi-fan::before { content: "\f670"; }
.bi-hammer::before { content: "\f3ff"; }
.bi-wrench::before { content: "\f621"; }
.bi-palette::before { content: "\f4b1"; }
.bi-scissors::before { content: "\f528"; }
.bi-bicycle::before { content: "\f18d"; }
.bi-car-front::before { content: "\f7e1"; }
.bi-trophy::before { content: "\f5e7"; }
.bi-heart-pulse::before { content: "\f76f"; }
.bi-capsule::before { content: "\f7df"; }
.bi-bandaid::before { content: "\f681"; }
.bi-flower1::before { content: "\f3cd"; }
.bi-tree::before { content: "\f5e2"; }
.bi-umbrella::before { content: "\f5fd"; }
.bi-briefcase::before { content: "\f1cc"; }
.bi-backpack::before { content: "\f8e0"; }
.bi-bag::before { content: "\f179"; }
.bi-gift::before { content: "\f3ec"; }
.bi-gem::before { content: "\f3e6"; }
.bi-book::before { content: "\f194"; }
.bi-music-note-beamed::before { content: "\f49e"; }
.bi-piggy-bank::before { content: "\f64a"; }
.bi-shop::before { content: "\f543"; }
.bi-stars::before { content: "\f589"; }
/* Drawn by the magazine front end (phase F: social links, newsletter, compare, drawer and account links). The font was made once for the phase, so these come before the markup that uses them. */
.bi-youtube::before { content: "\f62b"; }
.bi-pinterest::before { content: "\f663"; }
.bi-tiktok::before { content: "\f6cc"; }
.bi-envelope::before { content: "\f32f"; }
.bi-arrow-left-right::before { content: "\f12b"; }
.bi-plus-lg::before { content: "\f64d"; }
.bi-dash-lg::before { content: "\f63b"; }
.bi-person::before { content: "\f4e1"; }
.bi-box-arrow-in-right::before { content: "\f1be"; }
.bi-newspaper::before { content: "\f4a3"; }
/* Drawn by the revenue features (phase G: the coupon, link, copy, megaphone and percent glyphs). The font was made once for the phase, so these come before the markup that uses them. */
.bi-ticket-perforated::before { content: "\f6ca"; }
.bi-link-45deg::before { content: "\f470"; }
.bi-clipboard::before { content: "\f290"; }
.bi-megaphone::before { content: "\f484"; }
.bi-percent::before { content: "\f4d1"; }
/* Drawn by the phase L parts (the share menu, the Related Articles heading and the menu overflow button). The font was made once for the phase, so these come before the markup that uses them. */
.bi-share::before { content: "\f52e"; }
.bi-bookmark-fill::before { content: "\f199"; }
.bi-three-dots::before { content: "\f5d4"; }