@import url('./assets/fonts/inter.css');

/* One palette for the catalog, account, editorial and generated SEO pages.
   These deliberate overrides bridge the existing page-specific style sheets. */
:root {
  color-scheme: dark;
  --gp-bg: #30372b;
  --gp-surface: #3d4737;
  --gp-surface-raised: #46513e;
  --gp-soft: #353f30;
  --gp-line: #58634d;
  --gp-heading: #eeeedc;
  --gp-muted: #c3cab2;
  --gp-accent: #bdcfa2;
  --gp-accent-hover: #cedeaf;
  --gp-button-ink: #24301d;
  --gp-image-backplate: #dde1ce;
  --gp-scrollbar-thumb: #8a9b79;
  --gp-shadow: 0 12px 32px #17201225;
  --gp-art: url('./assets/home-botanical-olive-v1.webp');
  --gp-scene-width: max(100vw, 1450px);
  --gp-background-glow: #8c9b6220;
  --gp-foliage-softness: .28;
}
:root[data-theme='light'] {
  color-scheme: light;
  --gp-bg: #f7faf5;
  --gp-surface: #ffffff;
  --gp-surface-raised: #f0f7ef;
  --gp-soft: #e6f3eb;
  --gp-line: #d8e6d9;
  --gp-heading: #10231c;
  --gp-muted: #52695e;
  --gp-accent: #087e5c;
  --gp-accent-hover: #066f51;
  --gp-button-ink: #ffffff;
  --gp-image-backplate: #f2f5ed;
  --gp-scrollbar-thumb: #7c9b87;
  --gp-shadow: 0 12px 32px #183e2410;
  --gp-art: url('./assets/home-botanical-light-v1.webp');
  --gp-background-glow: #8fbda322;
  --gp-foliage-softness: .38;
}
html:root {
  scrollbar-color: var(--gp-line) var(--gp-bg);
  --bg: var(--gp-bg) !important;
  --bg-2: var(--gp-soft) !important;
  --sidebar: var(--gp-surface) !important;
  --panel: var(--gp-surface) !important;
  --panel-2: var(--gp-soft) !important;
  --panel-3: var(--gp-surface-raised) !important;
  --surface: var(--gp-surface) !important;
  --surface-solid: var(--gp-surface) !important;
  --soft: var(--gp-muted) !important;
  --ink: var(--gp-heading) !important;
  --text: var(--gp-heading) !important;
  --muted: var(--gp-muted) !important;
  --line: var(--gp-line) !important;
  --line-strong: var(--gp-line) !important;
  --green: var(--gp-accent) !important;
  --green-strong: var(--gp-accent) !important;
  --green-dark: var(--gp-accent) !important;
  --green-soft: var(--gp-soft) !important;
  --shadow: var(--gp-shadow) !important;
  --site-ink: var(--gp-heading) !important;
  --site-muted: var(--gp-muted) !important;
  --site-green: var(--gp-accent) !important;
  --site-green-dark: var(--gp-accent) !important;
  --site-line: var(--gp-line) !important;
  --site-surface: var(--gp-surface) !important;
  --site-soft: var(--gp-soft) !important;
  --site-shadow-sm: var(--gp-shadow) !important;
  --site-shadow-md: var(--gp-shadow) !important;
  --seo-ink: var(--gp-heading) !important;
  --seo-muted: var(--gp-muted) !important;
  --seo-green: var(--gp-accent) !important;
  --seo-green-dark: var(--gp-accent) !important;
  --seo-line: var(--gp-line) !important;
  --seo-surface: var(--gp-surface) !important;
  --seo-surface-solid: var(--gp-surface) !important;
  --seo-soft: var(--gp-soft) !important;
  --seo-shadow: var(--gp-shadow) !important;
  --seo-shadow-soft: var(--gp-shadow) !important;
  --login-ink: var(--gp-heading) !important;
  --login-muted: var(--gp-muted) !important;
  --login-surface: var(--gp-surface) !important;
  --login-line: var(--gp-line) !important;
  background: var(--gp-bg);
}
html body {
  color-scheme: inherit;
  color: var(--gp-heading) !important;
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 35%, var(--gp-background-glow), transparent 55%),
    radial-gradient(ellipse at 100% 80%, var(--gp-background-glow), transparent 55%),
    var(--gp-bg) !important;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html body :is(h1, h2, h3, h4, h5, strong, legend, label, .product-title, .seo-product-title, .login-logo strong) {
  color: var(--gp-heading) !important;
}
html body :is(p, small, li, dt, dd, .panel-subtitle, .product-seller, .product-note, .field-group > span, .login-subtitle) {
  color: var(--gp-muted) !important;
}
html body :is(button, a) { color: var(--gp-accent) !important; }
html body span { color: inherit; }
html body .page-intro, html body.home-page:not(.home-refreshed) .home-hero {
  background: var(--gp-art) center / cover no-repeat, var(--gp-soft) !important;
  border-color: var(--gp-line) !important;
  box-shadow: var(--gp-shadow) !important;
}
html body.home-refreshed { --gp-scene-width: max(100vw, 1487px); }
/* Keep the approved botanical scene present throughout scrolling. Separate,
   faded layers avoid stretching or visibly tiling the original artwork. */
html body::before,
html body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset-inline: 0;
  height: calc(var(--gp-scene-width) / 3.2);
  max-height: 80svh;
  pointer-events: none;
  background: var(--gp-art) center / var(--gp-scene-width) auto no-repeat;
}
html body::before {
  top: 0;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
html body::after {
  bottom: 0;
  opacity: var(--gp-foliage-softness);
  background-position: center bottom;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
  mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}
@media (max-width: 760px) {
  html body,
  html body.home-refreshed { --gp-scene-width: 1100px; }
  html body::before { background-position: left top; opacity: .48; }
  html body::after { background-position: left bottom; opacity: .24; }
}
html body.home-page:not(.home-refreshed) .home-hero-visual { background: var(--gp-soft) !important; }
html body :is(.topbar, .seo-topbar, .panel-card, .product-card, .auth-card, .alert-form,
  .setup-card, .login-card, .login-panel, .seo-card, .metric-card, .summary-card,
  .analysis-card, .data-card, .filter-panel, .filters-panel, .table-card, .privacy-banner,
  .home-how, .home-cta, .empty-state, .modal-card, .alert-card, .ranking-card, .legal-card,
  .seo-product-card, .analysis-header, .results-panel) {
  background: var(--gp-surface) !important;
  border-color: var(--gp-line) !important;
  box-shadow: var(--gp-shadow) !important;
  color: var(--gp-heading) !important;
}
html body :is(.home-steps article, .radar-guide article, .auth-card-heading, .setup-note,
  .seo-product-media, .seo-fact, .seo-facts > div, .seo-stat, .seo-note, .seo-disclosure,
  .product-image-link, .seo-product-image-link, .price-summary, .price-alert-summary,
  .login-showcase, .login-benefit, .login-feature, .social-proof, .form-note,
  .category-card, .source-card, .integration-card, .data-service-warning,
  .config-status, .filter-chip, .user-chip, .date-pill, .nav-button, .icon-action,
  .price-field, .discount-filter, .rating-filter, .source-choice, .filter-trust-card,
  .view-toggle, .product-info-banner, .catalog-category-links a, .avatar, .segmented,
  .seo-product-meta, .seo-product-facts, .seo-cta-panel, .legal-hero,
  .login-form-card, .login-input-shell, .login-showcase-grid article, .login-security,
  .legal-footer-inner, .radar-guide, .auth-tabs, .auth-note, .auth-privacy-note,
  .seo-related-card, .seo-category-card, .seo-trust, .seo-verification, .seo-methodology,
  .priority-badge, .tag, .analysis-load-more, .analysis-toolbar, .analysis-mobile-card,
  .seo-category-visual, .seo-category-meta > div, .seo-offer-panel, .seo-offer-facts > div,
  .seo-check-grid > div, .seo-side-note, .seo-marketplace-path-note, .seo-card-action,
  .seo-badge, .seo-source-badge, .seo-card-source, .seo-card-discount, .seo-discount-badge,
  .auth-security-note, .intro-status, .intro-status > div, .metric,
  .segmented button, .density-toggle button, .bar) {
  background: var(--gp-soft) !important;
  border-color: var(--gp-line) !important;
  color: var(--gp-muted) !important;
  box-shadow: none !important;
}
html body :is(.filter-panel-toggle, .seo-category-links a, .pagination-bar, .pagination button) {
  background: var(--gp-soft) !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-line) !important;
}
html body .pagination button.active { background: var(--gp-accent) !important; color: var(--gp-button-ink) !important; }
html body :is(.radar-guide article > span, .feature-card > span, .contact-card > span,
  .login-showcase-copy > span, .setup-kicker) {
  background: var(--gp-surface-raised) !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-line) !important;
  box-shadow: none !important;
}
html body .auth-security-note svg { color: var(--gp-accent) !important; }
html body .product-media { background: var(--gp-image-backplate) !important; }
html body .bar span { background: var(--gp-accent) !important; }
html body .bar.monetization span { background: #99b9aa !important; }
html body .density-toggle button.is-active {
  background: var(--gp-surface-raised) !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
}
html body :is(.auth-card-icon, .auth-card-icon-primary) { background: var(--gp-surface-raised) !important; color: var(--gp-accent) !important; border-color: var(--gp-line) !important; }
html body .seo-card-media { background: #dde1ce !important; }
html body .seo-card-media img { mix-blend-mode: multiply; }
:root[data-theme='light'] body .seo-card-media { background: #f2f5ed !important; }
html body :is(.seo-card-action, .seo-source-badge, .seo-card-source, .seo-card-discount,
  .seo-discount-badge, .seo-badge, .seo-price strong, .seo-card-price > strong) { color: var(--gp-accent) !important; }
html body .seo-button:not(.primary) { background: transparent !important; color: var(--gp-accent) !important; border-color: var(--gp-line) !important; }
html body .seo-category-visual::before, html body .seo-category-visual::after { display: none !important; }
html body :is(.login-field > span, .login-divider, .login-showcase-grid article span,
  .login-security, .forgot-link, .guest-link, .create-account-button, .google-login-button,
  .auth-tabs button, .filter-group-title) { color: var(--gp-muted) !important; }
html body :is(.create-account-button, .google-login-button) { background: var(--gp-soft) !important; border-color: var(--gp-line) !important; }
html body .login-input-shell input { background: transparent !important; }
html body .login-showcase { border-color: var(--gp-line) !important; }
html body .login-showcase::after, html body .login-showcase::before { display: none !important; }
html body :is(.filter-group-title, .filter-group-title span, .discount-filter, .rating-filter,
  .category-filter, .category-filter span, .source-choice span, .view-toggle button,
  .product-info-banner strong, .product-info-banner p, .catalog-category-links a,
  .segmented button, .filter-label, .field-label) { color: var(--gp-muted) !important; }
html body :is(.view-toggle button.active, .category-filter.active, .discount-filter.active,
  .rating-filter.active, .segmented .is-active) {
  background: var(--gp-surface-raised) !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
}
html body :is(.product-info-banner, .filter-trust-card) { border: 1px solid var(--gp-line); }
html body .catalog-category-links a { background: var(--gp-soft) !important; }
html body :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  background-color: var(--gp-soft) !important;
  color: var(--gp-heading) !important;
  border-color: var(--gp-line) !important;
  accent-color: var(--gp-accent);
}
html body ::placeholder { color: var(--gp-muted) !important; opacity: .9; }
html body :is(.primary-button, .product-link, .seo-button, .sheet-link, .login-submit,
  .login-primary-button, .submit-button, .auth-submit, button[type='submit']) {
  background: var(--gp-accent) !important;
  color: var(--gp-button-ink) !important;
  border: 1px solid var(--gp-accent) !important;
  box-shadow: none !important;
}
html body :is(.primary-button, .product-link, .seo-button, .sheet-link, .login-submit, button[type='submit']):hover {
  background: var(--gp-accent-hover) !important;
}
html body :is(.secondary-button, .text-button, .panel-link, .seo-button-secondary, .login-google,
  .google-button, .social-button, .product-detail-link, .product-alert-button) {
  background: transparent !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-line) !important;
  box-shadow: none !important;
}
html body :is(.topbar-brand strong span, .seo-brand-copy strong span, .login-logo strong span,
  .hero-kicker, .section-kicker, .seo-kicker, .eyebrow, .product-price, .seo-price,
  .price-value, .login-showcase-copy h2 span, .login-header h1 span, .setup-kicker) {
  color: var(--gp-accent) !important;
}
html body :is(.top-nav a, .seo-nav a, .analysis-nav a, .site-footer a, .privacy-footer a) {
  color: var(--gp-muted) !important;
}
html body :is(.top-nav a.active, .seo-nav a[aria-current='page'], .analysis-nav a.active,
  .top-nav a:hover, .seo-nav a:hover, .filter-chip.active, .filter-chip[aria-pressed='true']) {
  color: var(--gp-accent) !important;
  background: var(--gp-surface-raised) !important;
  border-color: var(--gp-line) !important;
  box-shadow: none !important;
}
html body .topbar::after, html body .login-showcase::before, html body .login-showcase::after, html body .page-intro::before {
  display: none !important;
}
html body .topbar::before, html body .product-card::before, html body .product-card::after { display: none !important; }
html body .donut-chart::after { background: var(--gp-surface) !important; }
html body :is(.legal-footer a, .legal-footer button) { background: transparent !important; color: var(--gp-accent) !important; border-color: var(--gp-line) !important; }
html body :is(.hero-kicker, .section-kicker, .seo-kicker, .eyebrow) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
html body :is(.site-footer, .privacy-footer, .seo-footer, .login-footer, .table-wrap, .table-container, th, td) {
  color: var(--gp-muted) !important;
  background-color: transparent !important;
  border-color: var(--gp-line) !important;
}
/* Native option popups must use the same foreground/background pair as the page. */
html body select { color-scheme: inherit; }
html body select :is(option, optgroup) {
  background-color: var(--gp-surface) !important;
  color: var(--gp-heading) !important;
}
html body select option:disabled { color: var(--gp-muted) !important; }
html body :is(th, .change-badge, .source-badge-fallback, .status-pill, .seo-chip) {
  background: var(--gp-soft) !important;
  color: var(--gp-accent) !important;
  border-color: var(--gp-line) !important;
}
html body .product-loading { background: var(--gp-soft); border-color: var(--gp-line); }
html body .product-loading p { color: var(--gp-accent) !important; }
html body .home-categories { scrollbar-width: thin; scrollbar-color: var(--gp-line) transparent; }
html body .home-categories::-webkit-scrollbar { height: 5px; }
html body .home-categories::-webkit-scrollbar-thumb { background: var(--gp-line); border-radius: 999px; }
html body .home-categories::-webkit-scrollbar-track { background: transparent; }
/* Keep filter scroll areas in the site's palette, including native scrollbars. */
html body .filter-panel,
html body .filter-panel * {
  scrollbar-width: thin;
  scrollbar-color: var(--gp-scrollbar-thumb) transparent;
}
html body .filter-panel::-webkit-scrollbar,
html body .filter-panel *::-webkit-scrollbar { width: 6px; height: 6px; }
html body .filter-panel::-webkit-scrollbar-thumb,
html body .filter-panel *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--gp-scrollbar-thumb);
}
html body .filter-panel::-webkit-scrollbar-thumb:hover,
html body .filter-panel *::-webkit-scrollbar-thumb:hover { background: var(--gp-accent); }
html body .filter-panel::-webkit-scrollbar-track,
html body .filter-panel *::-webkit-scrollbar-track { background: transparent; }
html body .filter-panel::-webkit-scrollbar-button,
html body .filter-panel *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html body .filter-panel::-webkit-scrollbar-corner,
html body .filter-panel *::-webkit-scrollbar-corner { background: transparent; }
html body .source-badge.has-source-logo { background: #f0f1df !important; border-radius: 7px; }
html body .source-badge-logo { filter: none !important; }
html body :is(.product-image-link, .seo-product-image-link) { background: var(--gp-image-backplate) !important; }
html body :is(.product-image, .seo-product-image-link img) { mix-blend-mode: multiply; }
html body :is(.product-rating, .seo-rating) { color: var(--gp-muted) !important; }
/* Shared alignment: legacy pages used block links with a minimum height,
   leaving their labels at the top of the hit area. */
html body :is(.top-nav, .seo-nav, .analysis-nav) a,
html body :is(.primary-button, .secondary-button, .text-button, .panel-link,
  .product-link, .product-detail-link, .seo-button,
  .sheet-link, .date-pill,
  .login-submit, .login-primary-button, .google-login-button, .create-account-button,
  .auth-submit, .auth-primary-action, .auth-secondary-action),
html body :is(.segmented, .density-toggle, .pagination, .auth-tabs) button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
html body :is(.product-alert-button, .filter-panel-toggle, .nav-button, .icon-action),
html body .view-toggle button {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
html body :is(.top-nav, .seo-nav, .analysis-nav) a {
  min-height: 44px !important;
  height: 44px !important;
  border: 1px solid transparent;
  padding-block: 0 !important;
  text-decoration: none;
}
html body.page-body { padding-bottom: 0 !important; }
html body.page-body .topbar .top-nav {
  position: static !important;
  inset: auto !important;
  align-items: center;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.page-body .topbar-actions::before { display: none !important; }
html body :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--gp-accent) !important;
  outline-offset: 4px;
}
.theme-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--gp-line);
  border-radius: 999px;
  background: var(--gp-soft);
}
.theme-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.theme-controls button[aria-pressed='true'] { background: var(--gp-surface-raised); border-color: var(--gp-accent); }
.theme-controls img { opacity: .85; }
:root:not([data-theme='light']) .theme-controls img { filter: invert(90%) sepia(10%) saturate(500%) hue-rotate(25deg); }
.theme-controls-floating { position: fixed; top: 16px; right: 16px; z-index: 50; box-shadow: var(--gp-shadow); }
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.icon-search { --icon: url('./assets/ui/search.svg'); }
.icon-arrow { --icon: url('./assets/ui/arrow-right.svg'); }
.icon-person { --icon: url('./assets/ui/person.svg'); }
.icon-grid { --icon: url('./assets/ui/grid.svg'); }
.icon-phone { --icon: url('./assets/ui/phone.svg'); }
.icon-house { --icon: url('./assets/ui/house.svg'); }
.icon-heart { --icon: url('./assets/ui/heart.svg'); }
.icon-sport { --icon: url('./assets/ui/bicycle.svg'); }
.icon-laptop { --icon: url('./assets/ui/laptop.svg'); }
.icon-bag { --icon: url('./assets/ui/bag.svg'); }
.icon-book { --icon: url('./assets/ui/book.svg'); }
.icon-shop { --icon: url('./assets/ui/shop.svg'); }
.icon-bell { --icon: url('./assets/ui/bell.svg'); }
@media (max-width: 760px) {
  .theme-controls { order: -1; }
  .theme-controls button { width: 40px; height: 40px; }
  .theme-controls-floating { top: 10px; right: 10px; }
  html body.page-body:not(.home-refreshed) .topbar-brand { max-width: none !important; padding-right: 0; gap: 8px; }
  html body.page-body:not(.home-refreshed) .topbar-brand strong { font-size: 18px; letter-spacing: -.5px; }
  html body.page-body:not(.home-refreshed) .topbar-brand .brand-mark,
  html body.page-body:not(.home-refreshed) .topbar-brand .brand-mark img { width: 36px !important; height: 36px !important; min-width: 36px !important; flex-basis: 36px; }
  html body .analysis-header { flex-wrap: wrap; }
  html body.not-found-page .legal-main { padding-top: 76px; }
  html body .seo-topbar { flex-wrap: wrap; gap: 12px; }
  html body .seo-topbar .theme-controls { order: 0; margin-left: auto; }
  html body .seo-topbar .seo-nav { order: 1; width: 100%; justify-content: space-between; }
  html body .seo-topbar .seo-nav a { padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 1099px) {
  html body.page-body .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
    gap: 12px 16px !important;
    padding: 16px !important;
  }
  html body.page-body.home-refreshed .topbar { padding: 16px 0 !important; }
  html body.page-body .topbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 0 !important;
  }
  html body.page-body .topbar-brand small:not(.sr-only) { display: none !important; }
  html body.page-body .topbar .topbar-actions {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible;
    gap: 8px;
  }
  html body.page-body:not(.home-refreshed) .topbar-actions > :not(.theme-controls) { display: none !important; }
  html body.page-body .topbar .top-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    gap: 8px;
  }
  html body.page-body .topbar .top-nav a {
    width: 100%;
    min-width: 0;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding-inline: 8px !important;
    border-radius: 14px;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  /* The product link already exists in the main menu; leave space for all four tabs. */
  html body.page-body:not(.home-refreshed) .topbar-actions > .date-pill { display: none !important; }
}
@media (max-width: 400px) {
  html body.page-body .topbar { gap: 10px 6px !important; padding: 12px !important; }
  html body.page-body.home-refreshed .topbar { padding: 12px 0 !important; }
  html body.page-body .topbar .top-nav { gap: 4px; }
  html body.page-body .topbar .top-nav a { padding-inline: 3px !important; font-size: 11px !important; }
}
@media (max-width: 360px) {
  html body.page-body .topbar .top-nav a { font-size: 10px !important; white-space: normal !important; }
}
html body [hidden], html body .is-hidden { display: none !important; }
@media (min-width: 761px) {
  html body.products-page .product-info-banner {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px 14px;
  }
  html body.products-page .product-info-banner > span {
    grid-column: 1;
    grid-row: 1;
    background: var(--gp-surface-raised);
    color: var(--gp-accent);
  }
  html body.products-page .product-info-banner > div { grid-column: 2; min-width: 0; }
  html body.products-page .product-info-banner .catalog-load-button {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  html body.products-page .product-info-banner { grid-template-columns: 46px minmax(0, 1fr) auto; }
  html body.products-page .product-info-banner .catalog-load-button { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html body *, html body *::before, html body *::after {
    animation: none !important;
    transition: none !important;
  }
}