/*
 * Shared UI contract for comparisons, reviews, tools, resources and
 * affiliate-comparator pages.
 *
 * A component owns its appearance. Page classes may position a component in a
 * layout, but must never redefine its typography or internal rhythm.
 */

/* SITE_HERO_SURFACE_V1
 * The project theme owns the affiliate-hero card surface. The next component
 * retains its own background contract; adjacency never restyles it.
 */
body.cms-hero-profile-affiliate [data-site-hero][data-hero-tone="light"] {
  background-color: var(--cms-site-hero-surface, #f8f4eb) !important;
}

body.cms-hero-profile-affiliate [data-site-hero][data-hero-tone="dark"] {
  background-color: var(--color-dark-bg, var(--wi2-ink, #161523)) !important;
}
/* SITE_HERO_SURFACE_V1_END */

/* SPECIALIZED_DETAIL_SURFACE_LAYOUT_V1 */
.ws-layout-shell.cms-layout-shell.cms-surface-layout-shell {
  width: min(var(--container, 1180px), calc(100% - 44px));
  max-width: none;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.cms-surface-layout .cms-pc-std__content {
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.cms-surface-layout > .cms-surface-nav {
  position: sticky;
  z-index: 20;
  top: 78px;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 68px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 14px 19px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 14px 38px rgba(22, 21, 35, .075);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: var(--wi2-ink, #161523);
  font: 850 12px/1.2 var(--font-body);
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__label::before {
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
  content: "";
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__track {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 26px;
  overflow-x: auto;
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__arrow {
  border-color: rgba(22, 21, 35, .1);
  background: rgba(255, 255, 255, .72);
  color: var(--wi2-ink, #161523);
}

@media (min-width: 761px) {
  .cms-surface-nav:not([data-cms-scrollable="true"]) .cms-surface-nav__arrow {
    display: none;
  }
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__link {
  min-height: 0;
  padding: 7px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text, #283338);
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: .01em;
  box-shadow: none;
}

.cms-surface-layout > .cms-surface-nav .cms-surface-nav__link:hover,
.cms-surface-layout > .cms-surface-nav .cms-surface-nav__link:focus-visible,
.cms-surface-layout > .cms-surface-nav .cms-surface-nav__link.is-active {
  border: 0;
  background: transparent;
  color: var(--wi2-coral, #ff7a59);
  box-shadow: none;
}

@media (max-width: 700px) {
  .ws-layout-shell.cms-layout-shell.cms-surface-layout-shell {
    width: min(calc(100% - 24px), var(--container, 1180px));
  }

  .cms-surface-layout > .cms-surface-nav {
    top: 64px;
    gap: 14px;
    min-height: 62px;
    padding: 11px 13px;
  }

  .cms-surface-layout > .cms-surface-nav .cms-surface-nav__label {
    width: 13px;
    height: 14px;
    gap: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  .cms-surface-layout > .cms-surface-nav .cms-surface-nav__label::before {
    flex: 0 0 13px;
  }

  .cms-surface-layout > .cms-surface-nav .cms-surface-nav__track {
    justify-content: flex-start;
    gap: 20px;
  }

  .cms-surface-layout > .cms-surface-nav .cms-surface-nav__link {
    font-size: 12px;
  }
}
/* SPECIALIZED_DETAIL_SURFACE_LAYOUT_V1_END */

/* SPECIALIZED_SURFACE_RHYTHM_V1 */
:is(
  .mi-affiliate-surface--comparison,
  .mi-affiliate-surface--review,
  .mi-affiliate-surface--detail,
  .mi-affiliate-surface--hub
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  --mi-specialized-section-gap: 5.8rem;
  gap: var(--mi-specialized-section-gap) !important;
  padding-block: 0 !important;
}

.mi-affiliate-surface--hub > .cms-hub__section {
  margin-top: 0;
}

.mi-affiliate-surface--duel-page .mi-duel-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mi-specialized-section-gap) !important;
  margin-block: 0 !important;
}

.mi-affiliate-surface--duel-page .mi-duel-results > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  :is(
    .mi-affiliate-surface--comparison,
    .mi-affiliate-surface--review,
    .mi-affiliate-surface--detail,
    .mi-affiliate-surface--hub
  ) {
    --mi-specialized-section-gap: 3.5rem;
  }
}
/* SPECIALIZED_SURFACE_RHYTHM_V1_END */

/* SPECIALIZED_HERO_SHARED_V1 */
[data-component="specialized-hero"] {
  position: relative;
  display: grid;
  min-height: 550px;
  align-items: center;
  padding: clamp(30px, 5.2vw, 72px);
  overflow: hidden;
  border-radius: 30px;
  background: var(--cms-site-hero-surface, #f8f4eb);
  box-shadow: 0 24px 60px rgba(113, 91, 58, .13);
  isolation: isolate;
  width: min(var(--container, 1180px), calc(100% - 44px));
  margin: 32px auto 0 !important;
}

[data-component="specialized-hero"] .cms-specialized-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 650px);
  min-height: 0;
  align-content: center;
  gap: 1rem;
}

[data-component="specialized-hero"] .cms-specialized-hero__heading {
  margin: 0 !important;
}

[data-component="specialized-hero"] .wi2-label {
  margin: 0 0 8px !important;
  color: var(--wi2-coral, var(--color-accent-2, #ff7a59)) !important;
}

[data-component="specialized-hero"] h1 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font: 700 clamp(2.5rem, 5vw, 4.8rem)/.95 var(--font-heading);
  letter-spacing: -.04em;
}

[data-component="specialized-hero"] .cms-specialized-hero__copy > p {
  max-width: 590px;
  margin: 0 !important;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.98rem, 1.35vw, 1.14rem);
  line-height: 1.65;
}

[data-component="specialized-hero"] .cms-specialized-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
}

[data-component="specialized-hero"] .cms-specialized-hero__meta li {
  padding: .42rem .7rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(16, 24, 32, .28);
  color: #fff;
  font-size: .75rem;
  font-weight: 750;
}

[data-component="specialized-hero"][data-hero-tone="light"] .wi2-label {
  color: var(--wi2-accent-strong, var(--color-accent, #0f8fa0)) !important;
}

[data-component="specialized-hero"][data-hero-tone="light"] h1 {
  color: var(--wi2-ink, #161523);
}

[data-component="specialized-hero"][data-hero-tone="light"] .cms-specialized-hero__copy > p {
  color: var(--color-text-muted, #60707a);
}

[data-component="specialized-hero"][data-hero-tone="light"] .cms-specialized-hero__meta li {
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: rgba(255, 255, 255, .72);
  color: var(--wi2-ink, #161523);
}

[data-component="specialized-hero"] .cms-specialized-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .35rem;
}

[data-component="specialized-hero"] .cms-specialized-hero__action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}

[data-component="specialized-hero"] .cms-specialized-hero__media {
  position: absolute;
  z-index: -2;
  inset: -1px;
  width: auto;
  max-width: none;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

[data-component="specialized-hero"] .cms-specialized-hero__media::after {
  position: absolute;
  inset: -2px;
  /* CMS_HERO_OVERLAY_OPACITY_V2 */
  background: linear-gradient(90deg, rgba(16, 24, 32, .84) 0%, rgba(16, 24, 32, .66) 48%, rgba(16, 24, 32, .22) 100%), linear-gradient(180deg, rgba(16, 24, 32, .04), rgba(16, 24, 32, .44));
  content: "";
}

[data-component="specialized-hero"][data-hero-tone="light"] .cms-specialized-hero__media::after {
  background: linear-gradient(90deg, rgba(255, 253, 248, .87) 0%, rgba(255, 253, 248, .78) 40%, rgba(255, 253, 248, .34) 68%, rgba(255, 253, 248, .04) 100%);
}

[data-component="specialized-hero"] .cms-specialized-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  [data-component="specialized-hero"] {
    display: grid;
    min-height: min(740px, calc(88svh - 64px));
    align-items: end;
    padding: 28px 22px 36px;
    border-radius: 24px;
  }

  body.cms-hero-profile-affiliate [data-site-hero] {
    min-height: min(740px, calc(88svh - 64px)) !important;
  }

  [data-component="specialized-hero"] {
    width: calc(100% - 24px);
    margin-top: 24px !important;
  }

  [data-component="specialized-hero"] .cms-specialized-hero__media::after {
    background: linear-gradient(180deg, rgba(16, 24, 32, .06) 0%, rgba(16, 24, 32, .36) 48%, rgba(16, 24, 32, .84) 100%);
  }

  [data-component="specialized-hero"][data-hero-tone="light"] .cms-specialized-hero__media::after {
    background: linear-gradient(180deg, rgba(255, 253, 248, .08) 0%, rgba(255, 253, 248, .41) 48%, rgba(255, 253, 248, .84) 100%);
  }

  [data-component="specialized-hero"] .cms-specialized-hero__copy {
    min-height: 0;
    align-content: end;
  }

  [data-component="specialized-hero"] h1 {
    font-size: clamp(2.25rem, 12vw, 3.45rem);
  }
}
/* SPECIALIZED_HERO_SHARED_V1_END */

/* ROUNDED_HERO_OVERLAY_EDGE_COVERAGE_V1
 * Let the outer hero own the rounded clipping. Media and overlay layers bleed
 * one pixel underneath that clip so subpixel antialiasing cannot reveal an
 * uncovered strip along the curved sides.
 */
[data-component="affiliate-comparison-hero"] .mi-comparison-hero__background {
  inset: -1px;
  width: auto;
  border-radius: 0;
}

[data-component="affiliate-comparison-hero"][data-site-hero][data-variant]::after {
  inset: -1px;
}
/* ROUNDED_HERO_OVERLAY_EDGE_COVERAGE_V1_END */

/* RICH_AFFILIATE_HERO_TONE_V1
 * Comparison and product-detail heroes keep their richer data layout, but
 * consume the same project tone as the generic affiliate renderer.
 */
.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"][data-variant="winner"] {
  background: var(--color-dark-bg, var(--wi2-ink, #161523));
  box-shadow: 0 24px 65px rgba(22, 21, 35, .18);
}

.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"][data-variant="winner"]::after {
  background: linear-gradient(90deg, rgba(16, 24, 32, .92) 0%, rgba(16, 24, 32, .82) 43%, rgba(16, 24, 32, .5) 67%, rgba(16, 24, 32, .2) 100%);
}

.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"] h1 {
  color: #fff;
}

.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"] .wi2-label {
  color: var(--wi2-coral, var(--color-accent-2, #ff7a59)) !important;
}

.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"] .mi-comparison-hero__lead {
  color: rgba(255, 255, 255, .78);
}

.page-comparison-detail [data-component="affiliate-comparison-hero"][data-hero-tone="dark"] .mi-comparison-hero__meta li {
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}

/* AFFILIATE_WINNER_PRODUCT_CUTOUT_V1
 * Product assets with a white studio background consume the same multiply
 * treatment as catalogue cards. A solid surface is required here because a
 * backdrop-filter creates an isolated compositing layer and reveals the white
 * image rectangle instead of blending it into the winner card.
 */
.page-comparison-detail
  [data-component="affiliate-comparison-hero"][data-variant="winner"]
  .mi-comparison-winner {
  background: color-mix(in srgb, #fff 93%, var(--wi2-ink, #161523));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-comparison-detail
  [data-component="affiliate-comparison-hero"][data-variant="winner"]
  .mi-comparison-winner__media img {
  mix-blend-mode: multiply;
}
/* AFFILIATE_WINNER_PRODUCT_CUTOUT_V1_END */

.page-review-detail [data-component="affiliate-product-page-hero"][data-hero-tone="dark"] {
  border-color: rgba(255, 255, 255, .1);
  background: radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 38%), var(--color-dark-bg, var(--wi2-ink, #161523));
  box-shadow: 0 22px 58px rgba(22, 21, 35, .16);
}

.page-review-detail [data-component="affiliate-product-page-hero"][data-hero-tone="dark"] .product-summary h1 {
  color: #fff;
}

.page-review-detail [data-component="affiliate-product-page-hero"][data-hero-tone="dark"] .detail-price strong {
  color: var(--color-text, var(--wi2-ink, #161523));
}

.page-review-detail [data-component="affiliate-product-page-hero"][data-hero-tone="dark"] .product-brand-badge {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .76);
}

.page-review-detail [data-component="affiliate-product-page-hero"][data-hero-tone="dark"] .gallery-strip-info {
  color: rgba(255, 255, 255, .62);
}
/* RICH_AFFILIATE_HERO_TONE_V1_END */

/* AFFILIATE_USAGE_SCENARIOS_SHARED_V2 */
[data-component="affiliate-usage-scenarios"] {
  display: grid;
  gap: .75rem;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: var(--radius-lg, 26px);
  background-color: #f7f8f6;
  background-image: var(--mi-duel-use-scene);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--wi2-ink, #161523);
  isolation: isolate;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__overlay {
  position: absolute;
  z-index: 1;
  inset: -1px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: end;
  box-sizing: border-box;
  min-height: 0;
  padding: 1.15rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, .02) 0%, rgba(255, 255, 255, .1) 19%, rgba(255, 255, 255, .68) 37%, rgba(255, 255, 255, .94) 49%, #fff 62%);
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--without-product .mi-duel-use-case__overlay {
  grid-template-columns: minmax(0, 1fr);
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__copy {
  display: grid;
  align-self: center;
  min-width: 0;
  gap: .45rem;
  padding-left: clamp(9rem, 18vw, 13rem);
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__copy small {
  color: var(--color-accent);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .065em;
  line-height: 1.25;
  text-transform: uppercase;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__copy p {
  margin: 0 !important;
  color: var(--wi2-ink, #161523);
  font-size: .88rem;
  line-height: 1.5;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__recommendation {
  display: grid;
  gap: .1rem;
  margin-top: .25rem;
  padding: .48rem .6rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, #fff);
  border-left: 3px solid var(--color-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 3px 10px rgba(22, 21, 35, .045);
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__recommendation span {
  color: var(--color-text-muted);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__recommendation strong {
  color: var(--wi2-ink, #161523);
  font-size: .94rem;
  line-height: 1.16;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__recommendation em {
  color: var(--color-text-muted);
  font-size: .67rem;
  font-style: normal;
  line-height: 1.3;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__product {
  align-self: end;
  width: 108px;
  height: 142px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--caution .mi-duel-use-case__copy small {
  color: #a34e45;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--caution .mi-duel-use-case__recommendation {
  border-color: color-mix(in srgb, #a34e45 24%, #fff);
  border-left-color: #a34e45;
  background: color-mix(in srgb, #a34e45 5%, rgba(255, 255, 255, .9));
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--caution .mi-duel-use-case__caution-label {
  display: flex;
  align-items: center;
  gap: .35rem;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--caution .mi-duel-use-case__caution-label span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #a34e45;
  color: #fff;
  font-size: .86rem;
  line-height: 1;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case--caution h4 {
  margin: 0;
  color: var(--wi2-ink, #161523);
  font-size: .95rem;
  line-height: 1.3;
}

[data-component="affiliate-usage-scenarios"] a.mi-duel-use-case {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

[data-component="affiliate-usage-scenarios"] a.mi-duel-use-case:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, #fff);
  outline-offset: 4px;
}

[data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case {
  background-position: right center;
}

[data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case__overlay {
  display: block;
  padding: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 42%, rgba(255, 255, 255, .84) 56%, rgba(255, 255, 255, .22) 78%, rgba(255, 255, 255, .02) 100%);
}

[data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case__copy {
  align-content: center;
  justify-items: start;
  width: min(54%, 300px);
  height: 100%;
  gap: .8rem;
  padding: 1.5rem;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__hub-title {
  color: var(--wi2-ink, #161523);
  font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.16 var(--font-heading);
  letter-spacing: -.016em;
}

[data-component="affiliate-usage-scenarios"] .mi-duel-use-case__hub-cta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: .58rem .86rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font: 800 .78rem/1 var(--font-body);
  transition: transform .18s ease, background .18s ease;
}

[data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case:hover .mi-duel-use-case__hub-cta {
  background: var(--wi2-accent-strong, var(--color-accent));
  transform: translateX(3px);
}

@media (max-width: 1060px) {
  [data-component="affiliate-usage-scenarios"][data-variant="standard"] .mi-duel-use-case__copy {
    padding-left: clamp(5.5rem, 15vw, 9rem);
  }
}

@media (max-width: 760px) {
  [data-component="affiliate-usage-scenarios"] .mi-duel-use-cases__grid {
    grid-template-columns: 1fr;
  }

  [data-component="affiliate-usage-scenarios"] .mi-duel-use-case {
    min-height: 235px;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"] .mi-duel-use-case__overlay {
    grid-template-columns: minmax(0, 1fr) 92px;
    padding: 1rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .72) 34%, rgba(255, 255, 255, .96) 51%, #fff 67%);
  }

  [data-component="affiliate-usage-scenarios"] .mi-duel-use-case--without-product .mi-duel-use-case__overlay {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"] .mi-duel-use-case__copy {
    padding-left: 1.5rem;
  }

  [data-component="affiliate-usage-scenarios"] .mi-duel-use-case__product {
    width: 92px;
    height: 124px;
  }

  /* The editorial prompt owns the full first two rows on small screens. Only
   * the recommendation row shares its width with the product cutout. */
  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution)
    .mi-duel-use-case__overlay {
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-rows: auto auto auto;
    z-index: auto;
    align-content: center;
    align-items: end;
    column-gap: .5rem;
    row-gap: .45rem;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .94) 36%, rgba(255, 255, 255, .58) 68%, rgba(255, 255, 255, 0) 100%);
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution).mi-duel-use-case--without-product
    .mi-duel-use-case__overlay {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution)
    .mi-duel-use-case__copy {
    display: contents;
    padding: 0;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution)
    .mi-duel-use-case__copy > small {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution)
    .mi-duel-use-case__copy > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution)
    .mi-duel-use-case__recommendation {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    margin-top: 0;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution).mi-duel-use-case--without-product
    .mi-duel-use-case__recommendation {
    grid-column: 1 / -1;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="standard"]
    .mi-duel-use-case:not(.mi-duel-use-case--caution):not(.mi-duel-use-case--without-product)
    .mi-duel-use-case__product {
    grid-column: 2;
    grid-row: 3;
    width: 84px;
    height: 112px;
    mix-blend-mode: darken;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case__copy {
    width: min(63%, 250px);
    padding: 1.15rem;
  }

  [data-component="affiliate-usage-scenarios"][data-variant="navigation"] .mi-duel-use-case__overlay {
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 49%, rgba(255, 255, 255, .65) 67%, rgba(255, 255, 255, .06) 100%);
  }
}
/* AFFILIATE_USAGE_SCENARIOS_SHARED_V2_END */

/* AFFILIATE_DUEL_CARDS_SHARED_V2 */
[data-component="affiliate-duel-list"] {
  display: grid;
  gap: 20px;
}

[data-component="affiliate-duel-list"] .mi-duel-examples__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  [data-component="affiliate-duel-list"] .mi-duel-examples__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

[data-component="affiliate-duel-list"] .mi-duel-example-card {
  display: grid;
  grid-template-rows: 190px minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: 20px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(22, 21, 35, .025);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  box-shadow: 0 7px 16px rgba(22, 21, 35, .05);
  transform: translateY(-2px);
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__visual {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  min-height: 0;
  border-radius: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 7%, #fff), #fff);
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__visual img {
  width: 100%;
  height: 165px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__visual strong {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 8px;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card--comparator .mi-duel-example-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-accent) 8%, #fff);
}

[data-component="affiliate-duel-list"] .mi-duel-example-card--comparator .mi-duel-example-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .38;
  transform: scale(1.08);
}

[data-component="affiliate-duel-list"] .mi-duel-example-card--comparator .mi-duel-example-card__visual strong {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 62px;
  height: 62px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.55rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-accent) 32%, transparent);
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 17px 18px 18px;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__body small {
  color: var(--color-accent);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__body > strong {
  margin-top: .42rem;
  font-size: .94rem;
  font-weight: 650;
  line-height: 1.32;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__body > span:not(.mi-duel-example-card__cta) {
  margin-top: 7px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  align-self: flex-start;
  margin-top: .8rem;
}

[data-component="affiliate-duel-list"] .mi-duel-example-card__cta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AFFILIATE_DUEL_CARDS_SHARED_V3: one presentation on every page (guide, review, duel, duel listing) — the
   section is never boxed; its heading sits on the page grid like every other section heading. */
[data-component="affiliate-duel-list"][data-variant="carousel"] {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-component="affiliate-duel-list"][data-variant="carousel"] .cms-carousel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-top: 4px;
}

[data-component="affiliate-duel-list"][data-variant="carousel"] .cms-carousel__viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

[data-component="affiliate-duel-list"][data-variant="carousel"] .cms-carousel__item {
  height: auto;
}

@media (max-width: 900px) {
  [data-component="affiliate-duel-list"] .mi-duel-examples__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  [data-component="affiliate-duel-list"] .mi-duel-example-card {
    grid-template-rows: 150px minmax(0, 1fr);
  }

  [data-component="affiliate-duel-list"] .mi-duel-example-card__visual {
    grid-template-columns: 1fr 24px 1fr;
  }

  [data-component="affiliate-duel-list"] .mi-duel-example-card__visual img {
    height: 132px;
  }

  [data-component="affiliate-duel-list"] .mi-duel-example-card__visual strong {
    width: 24px;
    height: 24px;
  }
}
/* AFFILIATE_DUEL_CARDS_SHARED_V2_END */

/* AFFILIATE_EDITORIAL_CARDS_SHARED_V1 */
[data-component="affiliate-editorial-cards"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}
/* Three cards read as one row on a wide screen: no orphan card (EDITORIAL_CARDS_THREE_V1). */
@media (min-width: 1100px) {
  [data-component="affiliate-editorial-cards"]:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mi-editorial-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  min-width: 0;
  padding: 18px 19px;
  border: 1px solid color-mix(in srgb, var(--color-border, #dbe7e1) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-bg, #fff) 96%, var(--color-accent, #0fbd74) 4%);
  box-shadow: 0 8px 22px rgba(22, 21, 35, .045);
}

.mi-editorial-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-accent, #0fbd74) 13%, transparent);
  color: var(--color-accent, #0fbd74);
}

.mi-editorial-card__icon svg {
  width: 21px;
  height: 21px;
}

.mi-editorial-card h3 {
  margin: 1px 0 6px;
  color: var(--color-text, #161523);
  font: 680 1rem/1.3 var(--font-body, inherit);
  letter-spacing: 0;
}

.mi-editorial-card p {
  margin: 0 !important;
  color: var(--color-text-muted, #60707a);
  font-size: .93rem;
  font-weight: 400;
  line-height: 1.58;
}

.mi-editorial-card--visual {
  grid-template-columns: 74px minmax(0, 1fr);
}

.mi-editorial-card__icon--visual {
  width: 74px;
  height: 74px;
  border-radius: 17px;
  background: #fff;
  color: var(--wi2-ink, var(--color-text, #161523));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border, #dbe7e1) 90%, transparent);
}

.mi-editorial-card__icon--visual svg {
  width: 48px;
  height: 48px;
}

@media (max-width: 700px) {
  [data-component="affiliate-editorial-cards"] {
    grid-template-columns: 1fr;
  }

  .mi-editorial-card {
    padding: 16px;
  }

  .mi-editorial-card p {
    font-size: .92rem;
  }

  .mi-editorial-card--visual {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .mi-editorial-card__icon--visual {
    width: 66px;
    height: 66px;
  }

  .mi-editorial-card__icon--visual svg {
    width: 44px;
    height: 44px;
  }
}
/* AFFILIATE_EDITORIAL_CARDS_SHARED_V1_END */

.mi-affiliate-surface--detail > *,
.mi-affiliate-surface--detail .cms-tool-page__editorial > .mi-affiliate-section {
  min-width: 0;
  margin-block: 0 !important;
}

.mi-affiliate-surface--detail .cms-tool-page__editorial {
  display: grid;
  gap: var(--mi-specialized-section-gap);
  min-width: 0;
}

/* Tools and resources do not load the affiliation stylesheet. Their shared
 * section component therefore owns its internal intro-to-content rhythm here,
 * instead of relying on an optional module stylesheet. */
.mi-affiliate-surface--detail .mi-affiliate-section:not(.cms-affiliate-section) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* AFFILIATE_STATIC_FAQ_SHARED_V2 */
[data-component="affiliate-static-faq"] {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

[data-component="affiliate-static-faq"] .mi-affiliate-static-faq__content {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

[data-component="affiliate-static-faq"] .cms-content-faq {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-component="affiliate-static-faq"] :is(
  .cms-content-faq__eyebrow,
  .cms-content-faq__deco
) {
  display: none;
}

[data-component="affiliate-static-faq"] .cms-content-faq__list {
  display: grid;
  gap: 1.45rem;
}

[data-component="affiliate-static-faq"] .cms-content-faq__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .38rem .72rem;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-component="affiliate-static-faq"] .cms-content-faq__static-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--wi2-accent-strong) 12%, #fff);
  color: var(--wi2-accent-strong);
}

[data-component="affiliate-static-faq"] .cms-content-faq__static-icon svg {
  width: 15px;
  height: 15px;
}

[data-component="affiliate-static-faq"] .cms-content-faq__question {
  grid-column: 2;
  align-self: center;
  margin: 0;
  color: var(--wi2-ink, #161523);
  font: 600 clamp(1rem, 1.35vw, 1.13rem)/1.35 var(--font-body);
}

[data-component="affiliate-static-faq"] .cms-content-faq__answer {
  grid-column: 2;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding-top: .08rem;
  overflow: visible !important;
  opacity: 1 !important;
}

[data-component="affiliate-static-faq"] .cms-content-faq__answer-inner {
  max-width: 820px;
  padding: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.62;
}

@media (min-width: 900px) {
  [data-component="affiliate-static-faq"] {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

@media (max-width: 760px) {
  :is(
    .mi-affiliate-surface--comparison,
    .mi-affiliate-surface--review,
    .mi-affiliate-surface--detail,
    .mi-affiliate-surface--hub
  ) {
    --mi-specialized-section-gap: 3.5rem;
  }
}
/* AFFILIATE_STATIC_FAQ_SHARED_V2_END */

/* AFFILIATE_METHODOLOGY_SUMMARY_V1_START */
.affcmp-method-summary {
  display: grid;
  gap: clamp(1.3rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: var(--radius-lg, 24px);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg, #fff));
  color: var(--color-text);
}
.affcmp-method-summary__copy { min-width: 0; }
.affcmp-method-summary__eyebrow {
  color: var(--color-accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.affcmp-method-summary h2 { margin: .4rem 0 .8rem; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.affcmp-method-summary p { max-width: 68ch; margin: 0 0 .85rem; line-height: 1.65; }
.affcmp-method-summary__limit { color: var(--color-text-muted, var(--color-text)); font-size: .93rem; }
.affcmp-method-summary a { color: var(--color-accent); font-weight: 750; text-underline-offset: .18em; }
.affcmp-method-summary__weights { display: grid; gap: .7rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.affcmp-method-summary__weights li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-radius: var(--radius-md, 14px);
  background: var(--color-bg, #fff);
}
.affcmp-method-summary__weights strong { color: var(--color-accent); white-space: nowrap; }
@media (max-width: 700px) { .affcmp-method-summary { grid-template-columns: minmax(0, 1fr); } }

/* AFFILIATE_METHODOLOGY_DIALOG_V3_START — shared structure, site theme tokens, data-driven copy. */
:is([data-component="affiliate-static-faq"], .mi-affiliate-methodology-section) .mi-affiliate-static-faq__aside {
  display: grid;
  gap: .65rem;
  align-self: start;
  align-content: start;
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, #ddd);
  border-radius: var(--radius-lg, 24px);
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg, white));
  box-shadow: none;
}
[data-component="affiliate-static-faq"] .mi-affiliate-static-faq__aside .mi-affiliate-static-faq__eyebrow {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
  font: 600 .9rem/1.4 var(--font-body);
}
[data-component="affiliate-static-faq"] .mi-affiliate-static-faq__aside h3 {
  margin: 0;
  color: var(--color-text);
  font: 700 clamp(1.18rem, 1.5vw, 1.4rem)/1.3 var(--font-heading);
}
:is([data-component="affiliate-static-faq"], .mi-affiliate-methodology-section) .mi-affiliate-static-faq__aside .mi-affiliate-static-faq__aside-copy {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
  font: 400 .94rem/1.6 var(--font-body);
}
.mi-affiliate-static-faq__author {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: .2rem .8rem;
  min-width: 0;
  margin-top: .3rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.mi-affiliate-static-faq__author-avatar, .affcmp-method-dialog__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg, white));
  color: var(--color-text);
  font: 700 .82rem/1 var(--font-body);
  object-fit: cover;
}
.mi-affiliate-static-faq__author-copy, .affcmp-method-dialog__author-copy { display: grid; gap: .15rem; min-width: 0; }
.mi-affiliate-static-faq__author strong, .affcmp-method-dialog__author strong { color: var(--color-text); font: 700 .91rem/1.35 var(--font-body); }
.mi-affiliate-static-faq__author small, .affcmp-method-dialog__author small { color: var(--color-text-muted, var(--color-text)); font: 400 .82rem/1.4 var(--font-body); }
.mi-affiliate-static-faq__author-summary {
  grid-column: 1 / -1;
  margin: .45rem 0 0;
  color: var(--color-text);
  font: 400 .9rem/1.58 var(--font-body);
}
.affcmp-method-trigger {
  justify-self: start;
  margin-top: .35rem;
  padding: .6rem .95rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md, 12px);
  background: var(--color-accent);
  color: white;
  font: 700 .88rem/1.3 var(--font-body);
  cursor: pointer;
}
.affcmp-method-trigger:hover, .affcmp-method-trigger:focus-visible { background: color-mix(in srgb, var(--color-accent) 80%, black); }
.affcmp-method-trigger--score { padding: .42rem .78rem; background: transparent; color: var(--color-accent); }
.affcmp-method-trigger--score:hover, .affcmp-method-trigger--score:focus-visible { color: white; }
.affcmp-score-method-action { grid-column: 1 / -1; margin-top: .7rem; }
.affcmp-method-dialog {
  box-sizing: border-box;
  width: min(calc(100% - 1.5rem), 780px);
  max-height: min(90vh, 940px);
  overflow: auto;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, #ddd);
  border-radius: var(--radius-lg, 24px);
  background: var(--color-bg, white);
  color: var(--color-text);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .2);
}
.affcmp-method-dialog::backdrop { background: rgba(19, 23, 21, .62); }
.affcmp-method-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--color-text-muted, var(--color-text)); font: 600 .9rem/1.4 var(--font-body); }
.affcmp-method-dialog__head button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); border-radius: 50%; background: transparent; color: var(--color-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.affcmp-method-dialog__intro { margin: .8rem 0 1.3rem; }
.affcmp-method-dialog h2 { margin: 0 0 .65rem; color: var(--color-text); font: 700 clamp(1.45rem, 2.7vw, 2rem)/1.22 var(--font-heading); }
.affcmp-method-dialog__lead { margin: 0; color: var(--color-text-muted, var(--color-text)); font: 400 .98rem/1.65 var(--font-body); }
.affcmp-method-dialog__author { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: .9rem 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--color-accent) 14%, #ddd); border-radius: var(--radius-lg, 24px); background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg, white)); }
.affcmp-method-dialog__avatar { width: 64px; height: 64px; }
.affcmp-method-dialog__author-copy p { margin: .35rem 0 0; color: var(--color-text); font: 400 .9rem/1.55 var(--font-body); }
.affcmp-method-dialog__scoring { margin-top: 1.5rem; }
.affcmp-method-dialog h3 { margin: 0 0 .7rem; color: var(--color-text); font: 700 1.12rem/1.35 var(--font-heading); }
.affcmp-method-dialog__criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; }
.affcmp-method-dialog__criterion { min-width: 0; padding: .9rem 0 1rem; border-top: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); }
.affcmp-method-dialog__criterion-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.affcmp-method-dialog__criterion-top h4 { margin: 0; color: var(--color-text); font: 700 .95rem/1.35 var(--font-body); }
.affcmp-method-dialog__criterion-top span { color: var(--color-text-muted, var(--color-text)); font: 600 .86rem/1.35 var(--font-body); white-space: nowrap; }
.affcmp-method-dialog__criterion p { margin: .4rem 0 0; color: var(--color-text-muted, var(--color-text)); font: 400 .88rem/1.58 var(--font-body); }
.affcmp-method-dialog__limit { margin-top: .6rem; padding: 1rem 0 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); }
.affcmp-method-dialog__limit h3 { margin-bottom: .35rem; font-size: 1rem; }
.affcmp-method-dialog__limit p { margin: 0; color: var(--color-text-muted, var(--color-text)); font: 400 .9rem/1.6 var(--font-body); }
.affcmp-method-dialog__footer { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.affcmp-method-dialog__done { padding: .65rem 1rem; border: 1px solid var(--color-accent); border-radius: var(--radius-md, 12px); background: var(--color-accent); color: white; font: 700 .88rem/1.3 var(--font-body); cursor: pointer; }
.affcmp-method-dialog__done:hover, .affcmp-method-dialog__done:focus-visible { background: color-mix(in srgb, var(--color-accent) 80%, black); }
@media (max-width: 620px) { .affcmp-method-dialog__criteria { grid-template-columns: minmax(0, 1fr); } }
/* AFFILIATE_METHODOLOGY_DIALOG_V3_END */

/* AFFILIATE_SECTION_CLARITY_V1: one shared card and full-width reading sections. */
.affiliate-catalogue__grid--ranking {
  grid-template-columns: minmax(0, 1fr);
}

.mi-affiliate-surface--comparison[data-variant="guide"] {
  --mi-specialized-section-gap: clamp(4rem, 7vw, 6.5rem);
}

.page-comparison-detail .mi-affiliate-surface--comparison[data-variant="guide"] .mi-duel__intro > .cms-section-heading__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  font-weight: 700;
  line-height: 1.25 !important;
}

.mi-affiliate-surface--comparison[data-variant="guide"] [data-component="affiliate-duel-list"][data-variant="carousel"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__scroll {
  overflow-x: auto !important;
  padding: 0 !important;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: calc(var(--matrix-criteria-rendered-width, 172px) + var(--matrix-gap, 10px));
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__container {
  width: max-content !important;
  min-width: 100% !important;
  padding: 0 !important;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__criteria {
  position: sticky !important;
  left: 0 !important;
  flex: 0 0 var(--matrix-criteria-width, 150px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-comparison-detail .cms-content-matrix--adaptive .cms-content-matrix__criteria .cms-content-matrix__row--header {
  background: transparent !important;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__partner {
  flex: 0 0 var(--matrix-card-width, 220px) !important;
  min-width: var(--matrix-card-width, 220px) !important;
  border: 1px solid var(--cms-border, #e2e8f0) !important;
  scroll-snap-align: start;
  clip-path: inset(0 0 0 var(--matrix-clip-left, 0px) round 20px);
  box-shadow: 0 3px 12px rgba(6, 17, 15, .045) !important;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__controls {
  display: flex !important;
}

.page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive .cms-content-matrix__controls[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .page-comparison-detail .cms-pc-std__content .cms-content-matrix--adaptive {
    --matrix-criteria-width: 92px;
  }
}

.mi-affiliate-surface--comparison[data-variant="guide"] .mi-duel-builder__submit {
  border-color: var(--color-accent-3);
  background: var(--color-accent-3);
  color: var(--color-dark-bg);
  box-shadow: none;
}

.mi-affiliate-surface--comparison[data-variant="guide"] .mi-duel-builder__submit:hover,
.mi-affiliate-surface--comparison[data-variant="guide"] .mi-duel-builder__submit:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent-3) 75%, var(--color-dark-bg));
  background: color-mix(in srgb, var(--color-accent-3) 75%, var(--color-dark-bg));
  color: var(--color-dark-bg);
}

:is(.page-comparison-detail .mi-affiliate-surface--comparison[data-variant="guide"],
    .page-review-detail .mi-affiliate-surface--review)
  [data-component="affiliate-static-faq"] {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  width: 100%;
}

:is(.page-comparison-detail .mi-affiliate-surface--comparison[data-variant="guide"],
    .page-review-detail .mi-affiliate-surface--review)
  [data-component="affiliate-static-faq"] .mi-affiliate-static-faq__aside {
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg, #fff));
}

.page-review-detail .product-page-hero[data-component="affiliate-product-page-hero"] {
  background: transparent;
  box-shadow: none;
}

/* AFFILIATE_SECTION_CLARITY_V1_END */

/* AFFILIATE_GUIDE_INLINE_METHOD_V1: the guide displays its full method in the page. */
.page-comparison-detail .mi-comparison-hero--single[data-variant="winner"] {
  grid-template-columns: minmax(0, 1fr);
}

.mi-affiliate-surface--comparison .mi-affiliate-methodology-section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.mi-affiliate-surface--comparison .mi-affiliate-methodology-section::before {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg, #fff));
  content: "";
}

.mi-affiliate-methodology-section__inner { min-width: 0; }

.mi-affiliate-methodology-section__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.mi-affiliate-methodology-section__story,
.mi-affiliate-methodology-section__scoring {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.mi-affiliate-methodology-section__story > h3,
.mi-affiliate-methodology-section__scoring > h3 {
  margin: 0;
  color: var(--color-text);
  font: 700 clamp(1.2rem, 2vw, 1.5rem)/1.25 var(--font-heading);
}

.mi-affiliate-methodology-section__story > p,
.mi-affiliate-methodology-section__limit p {
  margin: 0;
  color: var(--color-text-muted, var(--color-text));
  font: 400 1rem/1.7 var(--font-body);
}

.mi-affiliate-methodology-section__author {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-block: .35rem;
  padding: 1rem;
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg, #fff));
}

.mi-affiliate-methodology-section__author img,
.mi-affiliate-methodology-section__author > span {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg, #fff);
}

.mi-affiliate-methodology-section__author p { margin: 0; color: var(--color-text); font: 400 .92rem/1.55 var(--font-body); }

.mi-affiliate-methodology-section__limit {
  padding-top: 0;
}
.mi-affiliate-methodology-section__limit h3 { margin: 0 0 .45rem; color: var(--color-text); font: 700 1rem/1.4 var(--font-heading); }
.mi-affiliate-methodology-section__story [data-affiliate-disclosure] {
  margin: .35rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  color: var(--color-text-muted, var(--color-text));
  font: 400 .86rem/1.6 var(--font-body);
}

.mi-affiliate-methodology-section__criteria { display: grid; gap: .85rem; }
.mi-affiliate-methodology-section__criterion {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg, #fff);
}
.mi-affiliate-methodology-section__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--color-accent) 11%, var(--color-bg, #fff)); color: var(--color-accent); }
.mi-affiliate-methodology-section__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mi-affiliate-methodology-section__criterion h4 { margin: 0; color: var(--color-text); font: 700 .96rem/1.35 var(--font-body); }
.mi-affiliate-methodology-section__criterion p { margin: .35rem 0 0; color: var(--color-text-muted, var(--color-text)); font: 400 .88rem/1.55 var(--font-body); }
.mi-affiliate-methodology-section__criterion > strong { color: var(--color-text); font: 700 .85rem/1.3 var(--font-body); white-space: nowrap; }

.mi-affiliate-surface--comparison [data-component="affiliate-static-faq"],
.mi-affiliate-surface--comparison [data-component="affiliate-static-faq"] .mi-affiliate-static-faq__content,
.mi-affiliate-surface--comparison [data-component="affiliate-static-faq"] .cms-content-faq {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mi-affiliate-surface--comparison [data-component="affiliate-static-faq"] {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 920px);
  margin-inline: auto;
}

.page-comparison-detail .mi-affiliate-surface--comparison[data-variant="guide"] [data-component="affiliate-static-faq"] {
  width: min(100%, 920px);
}

.mi-affiliate-surface--comparison .mi-affiliate-heading-row .cms-section-heading {
  margin: 0;
}

.mi-affiliate-heading-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
}

.mi-affiliate-heading-row__link {
  flex: 0 0 auto;
  margin-bottom: .2rem;
  color: var(--color-text);
  font: 600 .92rem/1.4 var(--font-body);
  text-decoration: underline;
  text-underline-offset: .22em;
}

.mi-affiliate-heading-row__link:hover,
.mi-affiliate-heading-row__link:focus-visible {
  color: var(--color-accent);
}

.mi-comparison-pick__rating--score strong { font-size: 1.3rem; }
.mi-comparison-pick__rating--score > span { font-size: 1.4rem; }

@media (max-width: 760px) {
  .mi-affiliate-methodology-section__columns { grid-template-columns: minmax(0, 1fr); }
}
/* AFFILIATE_GUIDE_INLINE_METHOD_V1_END */

/* AFFILIATE_REVIEW_LAYOUT_V5: review sections share the guide's method and FAQ. */
.page-review-detail .product-page-hero[data-component="affiliate-product-page-hero"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-review-detail .product-summary {
  align-content: start;
  row-gap: clamp(.8rem, 1.5vw, 1.2rem);
}
.page-review-detail .product-summary .mi-review-hero-decision {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(.8rem, 1.5vw, 1.2rem);
}
.page-review-detail .product-summary .mi-review-hero-decision .detail-price {
  align-content: center;
}
.page-review-detail .detail-price__label {
  color: var(--color-text-muted, var(--color-text));
  font: 700 .76rem/1.3 var(--font-body);
}
.page-review-detail .product-summary .mi-review-hero-decision .detail-price strong {
  color: var(--color-text);
  font: 800 clamp(1.75rem, 2.7vw, 2.45rem)/1.15 var(--font-heading);
}
.page-review-detail .product-summary > .summary-kpis { margin: 0; }
.page-review-detail .product-summary .mi-review-hero-actions { width: 100%; }
.page-review-detail .product-summary .mi-review-hero-actions .mi-affiliate-card__cta {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 12px;
  background: var(--mi-review-cta, var(--color-accent));
  color: #fff;
  font: 800 1rem/1.3 var(--font-body);
  text-decoration: none;
}
.page-review-detail .product-summary .mi-review-hero-actions .mi-affiliate-card__cta:hover {
  background: color-mix(in srgb, var(--mi-review-cta, var(--color-accent)) 86%, var(--color-text));
}
.page-review-detail .mi-product-review-surface .score-method {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-review-detail .mi-product-review-surface .score-method-grid {
  gap: clamp(1.25rem, 2vw, 1.8rem) clamp(1.5rem, 3vw, 3rem);
}
.page-review-detail .mi-product-review-surface .score-method-grid > article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .35rem 0 1.15rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-review-detail .mi-product-review-surface .mi-review-score-bars__content { min-width: 0; }
.page-review-detail .mi-product-review-surface .mi-review-editorial {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-review-detail .mi-review-editorial__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.page-review-detail .mi-review-editorial__copy { display: grid; gap: clamp(1.3rem, 2.2vw, 2rem); min-width: 0; }
.page-review-detail .mi-review-editorial__copy > * { margin: 0; }
.page-review-detail .mi-review-editorial__layout .mi-review-editorial__media {
  display: grid;
  place-items: center;
  position: sticky;
  top: 2rem;
  margin: 0;
  min-height: 520px;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg, #fff));
}
.page-review-detail .mi-review-editorial__layout .mi-review-editorial__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.page-review-detail .mi-review-editorial__chapters { display: grid; gap: 0; }
.page-review-detail .mi-review-editorial__chapter {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
}
.page-review-detail .mi-review-editorial__chapter:first-child { padding-top: 0; }
.page-review-detail .mi-review-editorial__chapter:last-child { padding-bottom: 0; border-bottom: 0; }
.page-review-detail .mi-review-editorial__chapter--illustrated { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.page-review-detail .mi-review-editorial__chapter-copy { max-width: 78ch; }
.page-review-detail .mi-review-editorial__chapter-copy h3 { margin: 0 0 .85rem; font: 700 clamp(1.2rem, 2vw, 1.5rem)/1.3 var(--font-heading); }
.page-review-detail .mi-review-editorial__chapter-copy p { margin: 0; line-height: 1.75; }
.page-review-detail .mi-review-editorial__chapter .mi-review-editorial__media {
  margin: 0;
  min-width: 0;
}
.page-review-detail .mi-review-editorial__chapter .mi-review-editorial__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md, 14px);
}
.page-review-detail .mi-review-editorial__chapter .mi-review-editorial__media figcaption { margin-top: .45rem; color: var(--color-text-muted, #5a5a5a); font-size: .78rem; }
.page-review-detail .mi-review-inline-verdict {
  display: grid;
  gap: .8rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
}
.page-review-detail .mi-review-inline-verdict h3 { margin: 0; font: 700 clamp(1.35rem, 2.4vw, 1.8rem)/1.25 var(--font-heading); }
.page-review-detail .mi-review-inline-verdict p { margin: 0; line-height: 1.7; }
.page-review-detail .mi-review-specifications { margin-top: clamp(2rem, 4vw, 3rem); }
.page-review-detail .mi-review-specifications summary { width: fit-content; color: var(--color-text); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.page-review-detail .mi-product-review-surface [data-component="affiliate-duel-list"],
.page-review-detail .mi-product-review-surface .mi-duel-examples {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.mi-affiliate-surface--review .mi-affiliate-methodology-section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.mi-affiliate-surface--review .mi-affiliate-methodology-section::before {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg, #fff));
  content: "";
}
.mi-affiliate-surface--review [data-component="affiliate-static-faq"],
.mi-affiliate-surface--review [data-component="affiliate-static-faq"] .mi-affiliate-static-faq__content,
.mi-affiliate-surface--review [data-component="affiliate-static-faq"] .cms-content-faq {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mi-affiliate-surface--review [data-component="affiliate-static-faq"] {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 920px);
  margin-inline: auto;
}
@media (max-width: 760px) {
  .page-review-detail .product-page-hero[data-component="affiliate-product-page-hero"] { grid-template-columns: minmax(0, 1fr); }
  .page-review-detail .product-summary .mi-review-hero-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-review-detail .mi-review-editorial__layout { grid-template-columns: minmax(0, 1fr); }
  .page-review-detail .mi-review-editorial__layout .mi-review-editorial__media { position: static; min-height: 0; }
  .page-review-detail .mi-review-editorial__chapter--illustrated { grid-template-columns: minmax(0, 1fr); }
}
/* AFFILIATE_REVIEW_LAYOUT_V5_END */

/* AFFILIATE_REVIEW_DECISION_SECTIONS_V1: the same data powers review fit and duel priorities. */
.page-review-detail .mi-review-decision-summary__verdict { max-width: 82ch; }
.page-review-detail .mi-review-decision-summary__verdict p { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.7; }
.page-review-detail .mi-review-decision-summary__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); }
.page-review-detail .mi-review-decision-summary__card { min-width: 0; padding: clamp(1.1rem, 2vw, 1.7rem); border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); border-radius: 18px; background: var(--color-bg, #fff); }
.page-review-detail .mi-review-decision-summary__card--fit { grid-column: 1 / -1; }
.page-review-detail .mi-review-decision-summary__card h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; color: var(--color-text); font: 700 clamp(1.15rem, 1.8vw, 1.4rem)/1.25 var(--font-heading); }
.page-review-detail .mi-review-decision-summary__card h3 > span { display: inline-grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; font: 800 1rem/1 var(--font-body); }
.page-review-detail .mi-review-decision-summary__card--positive h3 > span { background: #208563; }
.page-review-detail .mi-review-decision-summary__card--caution h3 > span { background: #b44f4f; }
.page-review-detail .mi-review-decision-summary__card--fit h3 > span { background: var(--color-accent); }
.page-review-detail .mi-review-decision-summary__card ul { display: grid; align-content: start; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.page-review-detail .mi-review-decision-summary__card li { position: relative; margin: 0; padding-left: 1.35rem; color: var(--color-text); line-height: 1.55; }
.page-review-detail .mi-review-decision-summary__card li::before { position: absolute; left: 0; top: .2em; color: var(--color-accent); content: '•'; font-size: 1.1rem; }
.page-review-detail .mi-review-decision-summary__card--positive li::before { color: #208563; }
.page-review-detail .mi-review-decision-summary__card--caution li::before { color: #b44f4f; }
.page-review-detail .mi-review-decision-summary__card--fit ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.page-review-detail .mi-review-decision-summary__card--fit li { display: grid; align-content: start; gap: .2rem; }
.page-review-detail .mi-review-decision-summary__card--fit li strong { font-weight: 750; }
.page-review-detail .mi-review-decision-summary__card--fit li span { color: var(--color-text-muted); }
.page-review-detail .mi-product-review-surface .mi-review-tinted-section { position: relative; isolation: isolate; padding-block: clamp(3.3rem, 6vw, 5.5rem); }
.page-review-detail .mi-product-review-surface .mi-review-tinted-section::before { position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); content: ''; }
.page-review-detail .mi-product-review-surface .score-method::before { background: color-mix(in srgb, var(--color-accent-2, var(--color-accent)) 10%, var(--color-bg, #fff)); }
.page-review-detail .mi-product-review-surface .mi-review-specifications::before { background: color-mix(in srgb, var(--color-text) 4%, var(--color-bg, #fff)); }
.page-review-detail .mi-product-review-surface .mi-review-specifications { margin-top: 0; }
.page-review-detail .mi-product-review-surface .mi-review-specifications .spec-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }
.page-review-detail .mi-product-review-surface .mi-review-specifications .spec-table span,
.page-review-detail .mi-product-review-surface .mi-review-specifications .spec-table strong { font-size: .9rem; }
.page-review-detail .mi-product-review-surface .mi-review-specifications .spec-table > div { min-width: 0; padding-block: .9rem; }
.mi-duel-priorities__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mi-duel-priorities__grid article { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); border-radius: 16px; background: var(--color-bg, #fff); }
.mi-duel-priorities__grid h4 { margin: 0 0 .45rem; font: 700 clamp(1rem, 1.5vw, 1.2rem)/1.3 var(--font-heading); }
.mi-duel-priorities__grid strong { display: block; color: var(--color-accent); }
.mi-duel-priorities__grid p { margin: .4rem 0 0; color: var(--color-text-muted); line-height: 1.55; }
@media (max-width: 760px) {
  .page-review-detail .mi-review-decision-summary__grid, .page-review-detail .mi-review-decision-summary__card--fit ul, .page-review-detail .mi-product-review-surface .mi-review-specifications .spec-table, .mi-duel-priorities__grid { grid-template-columns: minmax(0, 1fr); }
  .page-review-detail .mi-review-decision-summary__card--fit { grid-column: auto; }
}
/* AFFILIATE_REVIEW_DECISION_SECTIONS_V1_END */

/* AFFILIATE_FAMILY_COMPARATOR_ROUTE_V1: shared heading action and score placement. */
.mi-affiliate-surface--comparison [data-component="section-heading"].cms-section-heading--with-action {
  display: grid !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
}
.mi-affiliate-surface--comparison .cms-section-heading--with-action > .cms-section-heading__label { grid-column: 1 / -1; }
.mi-affiliate-surface--comparison .cms-section-heading--with-action > .cms-section-heading__title { grid-column: 1; grid-row: 2; }
.mi-affiliate-surface--comparison .cms-section-heading__action {
  flex: 0 0 auto;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  color: var(--color-accent);
  font: 600 .92rem/1.4 var(--font-body);
  text-decoration: underline;
  text-underline-offset: .22em;
}
.mi-affiliate-surface--comparison .cms-section-heading__action:hover,
.mi-affiliate-surface--comparison .cms-section-heading__action:focus-visible { color: var(--color-text); }
.mi-affiliate-surface--comparison .cms-section-heading--with-action .cms-section-heading__intro { grid-column: 1 / -1; }
.mi-comparison-pick__price .mi-comparison-pick__rating { margin: 0 0 .35rem; color: var(--color-text); }
.mi-comparison-pick__price .mi-comparison-pick__rating strong { font-size: clamp(1.55rem, 2.2vw, 1.9rem); }
.mi-comparison-pick__price .mi-comparison-pick__rating small { font-size: .75rem; }
.mi-comparison-pick__price .mi-comparison-pick__rating > span { font-size: 1.65rem; }
@media (max-width: 700px) {
  .mi-affiliate-surface--comparison [data-component="section-heading"].cms-section-heading--with-action { grid-template-columns: minmax(0, 1fr); }
  .mi-affiliate-surface--comparison .cms-section-heading__action { grid-column: 1; grid-row: 3; justify-self: start; margin-top: .65rem; }
  .mi-affiliate-surface--comparison .cms-section-heading--with-action .cms-section-heading__intro { grid-row: auto; }
  .mi-comparison-pick__price { justify-items: start; text-align: left; }
}
/* AFFILIATE_FAMILY_COMPARATOR_ROUTE_V1_END */

/* AFFILIATE_SECTION_STRUCTURE_V1
 * Every specialized section renders the same heading/intro slot and body slot.
 * Width and tone belong to the outer section, never to its content spacing. */
.mi-affiliate-surface :is(.cms-affiliate-section, .cms-affiliate-section__inner) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  min-width: 0;
}
.mi-affiliate-surface .cms-affiliate-section__head,
.mi-affiliate-surface .cms-affiliate-section__body { min-width: 0; }
.mi-affiliate-surface .cms-affiliate-section__head > [data-component="section-heading"] {
  margin: 0 !important;
}
.mi-affiliate-surface .cms-affiliate-section--narrow {
  width: min(100%, 920px);
  margin-inline: auto;
}
.mi-affiliate-surface--detail .mi-resource-section > .cms-affiliate-section__body {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* AFFILIATE_SECTION_STRUCTURE_V1_END */

/* AFFILIATE_SATELLITE_FILTER_SURFACE_V1 */
.mi-affiliate-surface--satellite .affiliate-catalogue__filter-group {
  background: transparent;
}
.mi-affiliate-surface--satellite .affiliate-catalogue__filters {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}
/* AFFILIATE_SATELLITE_FILTER_SURFACE_V1_END */

/* AFFILIATE_DUEL_PAGE_COHERENCE_V1 (Julien 2026-10-06): a duel page reads like the guide and the review —
   canonical section headings everywhere (verdict included), one verdict at the top and a final « which one for
   you » choice instead of the same verdict twice, a titled section for the two product sheets. */
.page-comparison-detail .mi-duel-verdict .mi-duel-verdict__copy > [data-component="section-heading"] {
  margin: 0;
}
.page-comparison-detail .mi-duel-verdict .mi-duel-verdict__copy > .mi-duel-verdict__text {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--color-text-muted, #5f6970);
  font-size: 16px;
  line-height: 1.65;
}
.page-comparison-detail .mi-duel-products-section > .cms-affiliate-section__body > .mi-duel-products {
  margin: 0;
}
.page-comparison-detail .mi-duel-choice .mi-duel-choice__card {
  display: grid;
  align-content: start;
  gap: 10px;
}
.page-comparison-detail .mi-duel-choice .mi-duel-choice__card.is-winner {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.page-comparison-detail .mi-duel-choice .mi-duel-choice__card h4 {
  margin: 0;
}
.page-comparison-detail .mi-duel-choice .mi-duel-choice__card p {
  margin: 0;
}
.page-comparison-detail .mi-duel-choice .mi-duel-choice__avoid {
  font-size: 14px;
}
.page-comparison-detail .mi-duel-choice .mi-duel-product__actions {
  margin-top: 6px;
}
/* Parts inserted alone in an article or a page keep the duel page scope (same markup, same styles). */
.cms-duel-part-embed {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}
/* AFFILIATE_DUEL_PAGE_COHERENCE_V1_END */

/* SCROLLBARS_SHARED_V1 (demande Julien 07/10) — every horizontal scroll area of the content (tables, matrices,
   comparisons, galleries, rails) shows the same thin rounded bar in the site colours. Same block in
   editorial-journey.css, affiliate-blocks.css and specialized-shared.css (one per page family); rails that hide
   their bar on purpose keep it hidden (zero-specificity fallback). */
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre),
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-accent,#14a3a8) 55%,#fff) color-mix(in srgb,var(--color-accent,#14a3a8) 9%,transparent)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar{height:8px;width:8px}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-track,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar-track{border-radius:999px;background:color-mix(in srgb,var(--color-accent,#14a3a8) 9%,transparent)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-thumb,
:where(.ej-reader,.aff,.affcmp,.mi-affiliate-surface) :where(*)::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--color-accent,#14a3a8) 55%,#fff)}
:is(.cms-content-table__wrap,.cms-content-matrix__container,.cms-content-matrix__scroll,.pc-table-scroll,.aff-compare__scroll,.aff-gallery__shots,.ej-compare,.cms-pc-std__content pre)::-webkit-scrollbar-thumb:hover{background:var(--color-accent,#14a3a8)}

/* SURFACE_PRESENTATION_V1: surface blocks are guided steps — the reader's toolbar and contents replace the surface
   navigation; the block keeps its look inside the wide column, without its own section spacing or band. */
.cms-surface-layout:has(.ej-reader [data-editorial-section]) > .cms-surface-nav{display:none!important}
.ej-reader .ej-section--surface>.ej-wide{display:block;min-width:0}
.ej-reader .ej-section--surface>.ej-wide>section{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;max-width:none!important;width:100%!important}
.ej-reader .ej-section--surface>.ej-wide>section>.cms-affiliate-section__inner{padding:0!important;max-width:none!important;background:none!important}
.ej-reader .ej-section--surface>.ej-wide>section::before,.ej-reader .ej-section--surface>.ej-wide>section::after{display:none!important}

/* AFFILIATE_STYLE_ALIGN_V1 (demande Julien 07/10) — the physical product surfaces (mi-*) take the look of the
   service blocks (aff-*) and the other way round: one set of buttons (primary filled, secondary outlined, tertiary
   text link), the tinted panel for every product card, the same chips, badges, rank medals and modals.
   Everything reads the AFFILIATE_STYLE_TOKENS_V1 tokens below, themselves read from the site theme: another site,
   other theme colours, fonts or radius, and this changes with it. Overrides only, scoped to the existing mi-* /
   affcmp-* classes; no markup change. A few declarations need !important because the site theme
   (affiliation-standard-theme.css) forces them with !important. */

/* AFFILIATE_STYLE_TOKENS_V1 (demande Julien 07/10) — one look for every affiliation component, services (aff-*) and
   physical products (mi-*). No colour, font or radius of its own: every token reads the site theme (theme.json →
   --color-*, --font-*, --radius*, --style-button-radius, editorial-tokens --wi2-*), the fallbacks only serve a site
   without them. Same block in affiliate-blocks.css and affiliate-surface (style-align); change it in both. */
:root{
  --aff-ui-font:var(--font-body,inherit);
  --aff-ui-font-heading:var(--font-heading,var(--aff-ui-font));
  --aff-ui-ink:var(--color-text,#1d2a2c);
  --aff-ui-heading:var(--color-dark-bg,var(--aff-ui-ink));
  --aff-ui-muted:var(--color-text-muted,color-mix(in srgb,var(--aff-ui-ink) 65%,transparent));
  --aff-ui-paper:var(--color-bg,#fff);
  --aff-ui-accent:var(--color-accent,#166b65);
  --aff-ui-accent-2:var(--color-accent-2,var(--aff-ui-accent));
  --aff-ui-accent-ink:color-mix(in srgb,var(--aff-ui-accent) 72%,var(--aff-ui-heading));
  --aff-ui-line:color-mix(in srgb,var(--aff-ui-ink) 13%,transparent);
  /* cards and panels: the tinted panel of the aff blocks */
  --aff-ui-card-bg:color-mix(in srgb,var(--aff-ui-accent-2) 5%,var(--aff-ui-paper));
  --aff-ui-card-line:color-mix(in srgb,var(--aff-ui-accent-2) 22%,var(--aff-ui-line));
  --aff-ui-card-radius:var(--wi2-card-radius,var(--radius-lg,24px));
  --aff-ui-card-shadow:none;
  --aff-ui-card-hover-line:color-mix(in srgb,var(--aff-ui-accent) 32%,var(--aff-ui-card-line));
  --aff-ui-card-hover-shadow:var(--wi2-card-shadow-hover,var(--shadow-hover,0 12px 28px rgba(0,0,0,.08)));
  --aff-ui-card-lift:translateY(-2px);
  --aff-ui-inner-radius:calc(var(--radius,16px) * .75);
  --aff-ui-media-radius:calc(var(--aff-ui-card-radius) * .7);
  /* buttons: primary filled, secondary outlined, tertiary text link with arrow */
  --aff-btn-radius:var(--wi2-action-radius,var(--cms-ds-action-radius,var(--style-button-radius,12px)));
  --aff-btn-height:46px;
  --aff-btn-height-sm:40px;
  --aff-btn-pad:10px 18px;
  --aff-btn-pad-sm:8px 12px;
  --aff-btn-gap:8px;
  --aff-btn-font:800 14px/1.2 var(--aff-ui-font);
  --aff-btn-font-sm:800 13px/1.2 var(--aff-ui-font);
  --aff-btn-motion:var(--wi2-action-motion,.2s ease);
  --aff-btn-primary-bg:var(--aff-ui-accent-2);
  --aff-btn-primary-ink:var(--color-on-accent-2,var(--color-on-accent,#fff));
  --aff-btn-primary-shadow:0 8px 18px color-mix(in srgb,var(--aff-btn-primary-bg) 22%,transparent);
  --aff-btn-secondary-bg:var(--aff-ui-paper);
  --aff-btn-secondary-ink:var(--aff-ui-heading);
  --aff-btn-secondary-line:color-mix(in srgb,var(--aff-ui-ink) 16%,transparent);
  --aff-btn-tertiary-ink:var(--aff-ui-accent-ink);
  --aff-btn-hover-bg:var(--aff-ui-heading);
  --aff-btn-hover-ink:var(--color-dark-text,#fff);
  --aff-btn-hover-shadow:0 10px 22px color-mix(in srgb,var(--aff-btn-hover-bg) 16%,transparent);
  --aff-focus-ring:color-mix(in srgb,var(--aff-ui-accent) 45%,transparent);
  /* chips (facts), badges, rank medals (gold, silver, bronze are metals, not theme colours) */
  --aff-chip-radius:var(--radius-full,999px);
  --aff-chip-bg:color-mix(in srgb,var(--aff-ui-accent) 8%,var(--aff-ui-paper));
  --aff-chip-ink:var(--aff-ui-muted);
  --aff-chip-font:500 12.5px/1.3 var(--aff-ui-font);
  --aff-badge-bg:color-mix(in srgb,var(--aff-ui-accent) 12%,var(--aff-ui-paper));
  --aff-badge-media-bg:color-mix(in srgb,var(--aff-ui-paper) 92%,transparent);
  --aff-badge-ink:var(--aff-ui-accent-ink);
  --aff-badge-font:800 11px/1.25 var(--aff-ui-font);
  --aff-badge-tracking:.05em;
  --aff-rank-bg:var(--aff-ui-accent);--aff-rank-ink:var(--color-on-accent,var(--aff-ui-heading));
  --aff-medal-1:#f4c64f;--aff-medal-1-ink:#49350a;
  --aff-medal-2:#d5dde5;--aff-medal-2-ink:#34404c;
  --aff-medal-3:#d99a68;--aff-medal-3-ink:#4a2914;
  /* modals */
  --aff-modal-bg:var(--aff-ui-paper);
  --aff-modal-line:var(--aff-ui-card-line);
  --aff-modal-radius:var(--aff-ui-card-radius);
  --aff-modal-shadow:var(--shadow-lg,0 24px 72px rgba(0,0,0,.2));
  --aff-modal-backdrop:color-mix(in srgb,var(--color-dark-bg,#111) 62%,transparent);
  --aff-modal-close-size:40px
}
/* AFFILIATE_STYLE_TOKENS_V1_END */

/* 1. Product cards: the tinted aff panel, same radius, rest and hover. */
.mi-comparison-pick,
.mi-affiliate-card--catalogue,
[data-component="affiliate-duel-list"] .mi-duel-example-card,
.page-comparison-detail .mi-duel-product {
  border: 1px solid var(--aff-ui-card-line);
  border-radius: var(--aff-ui-card-radius);
  background: var(--aff-ui-card-bg);
  box-shadow: var(--aff-ui-card-shadow);
  backdrop-filter: none;
  color: var(--aff-ui-ink);
  font-family: var(--aff-ui-font);
}
.mi-comparison-pick:hover,
.mi-affiliate-card--catalogue:hover,
[data-component="affiliate-duel-list"] .mi-duel-example-card:hover {
  border-color: var(--aff-ui-card-hover-line);
  box-shadow: var(--aff-ui-card-hover-shadow);
  transform: var(--aff-ui-card-lift);
}
.mi-comparison-pick--preselected { border: 2px solid var(--aff-btn-primary-bg); }
.mi-comparison-pick__visual,
.mi-affiliate-card--catalogue .mi-affiliate-card__media { border-radius: var(--aff-ui-media-radius); }
.mi-affiliate-card--catalogue .mi-affiliate-card__media { border-radius: 0; }
.mi-comparison-pick h3,
.mi-affiliate-card--catalogue .mi-affiliate-card__title { font-family: var(--aff-ui-font-heading); color: var(--aff-ui-heading); }
.mi-comparison-pick__price strong,
.mi-comparison-pick__price > strong { font-family: var(--aff-ui-font-heading); color: var(--aff-ui-heading); }
@media (max-width: 760px) {
  .mi-comparison-pick { border-radius: var(--aff-ui-card-radius); }
}

/* 2. Primary button: every « Voir l'offre / Voir le prix » of a product. */
.mi-comparison-pick__cta,
.mi-comparison-pick__actions .mi-comparison-pick__cta,
.page-comparison-detail .mi-duel-product__actions a.mi-comparison-pick__cta,
.mi-comparison-winner__cta,
.mi-comparison-ranking__all,
.mi-affiliate-comparison-card__cta,
.mi-affiliate-card__cta,
.mi-affiliate-card--catalogue .mi-affiliate-card__cta,
.page-review-detail .product-summary .mi-review-hero-actions .mi-affiliate-card__cta,
.page-review-detail .mi-review-hero-offer > .mi-affiliate-card__cta,
.page-review-detail .product-summary .mi-review-hero-decision > .mi-affiliate-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aff-btn-gap);
  min-height: var(--aff-btn-height);
  padding: var(--aff-btn-pad);
  border: 1px solid transparent;
  border-radius: var(--aff-btn-radius);
  background: var(--aff-btn-primary-bg);
  color: var(--aff-btn-primary-ink) !important;
  font: var(--aff-btn-font);
  text-decoration: none !important;
  box-shadow: var(--aff-btn-primary-shadow);
  transition: transform var(--aff-btn-motion), box-shadow var(--aff-btn-motion), background var(--aff-btn-motion), color var(--aff-btn-motion), border-color var(--aff-btn-motion);
}

/* 3. Secondary button: « Avis complet », « Comparer », « Voir le duel ». */
.mi-comparison-pick__actions .mi-comparison-pick__review,
.mi-comparison-pick__actions .mi-comparison-pick__compare,
.page-comparison-detail .mi-duel-product__actions a.mi-comparison-pick__review,
.mi-review-action,
[data-component="affiliate-duel-list"] .mi-duel-example-card__cta,
.affcmp-method-trigger,
.affcmp-method-trigger--score,
.affcmp-method-dialog__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aff-btn-gap);
  min-height: var(--aff-btn-height);
  padding: var(--aff-btn-pad);
  border: 1px solid var(--aff-btn-secondary-line);
  border-radius: var(--aff-btn-radius);
  background: var(--aff-btn-secondary-bg);
  color: var(--aff-btn-secondary-ink);
  font: var(--aff-btn-font);
  text-decoration: none !important;
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--aff-btn-motion), box-shadow var(--aff-btn-motion), background var(--aff-btn-motion), color var(--aff-btn-motion), border-color var(--aff-btn-motion);
}
[data-component="affiliate-duel-list"] .mi-duel-example-card__cta { min-height: var(--aff-btn-height-sm); padding: var(--aff-btn-pad-sm); font: var(--aff-btn-font-sm); }
.affcmp-method-trigger--score { min-height: var(--aff-btn-height-sm); padding: var(--aff-btn-pad-sm); font: var(--aff-btn-font-sm); }

/* Hover and focus: one behaviour for both (the physical one — the button fills with the dark ink). */
.mi-comparison-pick__cta:hover,
.mi-comparison-pick__actions > a:hover,
.mi-comparison-pick__actions > a:focus-visible,
.mi-comparison-pick__actions .mi-comparison-pick__cta:hover,
.page-comparison-detail .mi-duel-product__actions a:hover,
.mi-comparison-winner__cta:hover,
.mi-comparison-ranking__all:hover,
.mi-affiliate-comparison-card__cta:hover,
.mi-affiliate-card__cta:hover,
.mi-affiliate-card--catalogue .mi-affiliate-card__cta:hover,
.page-review-detail .product-summary .mi-review-hero-actions .mi-affiliate-card__cta:hover,
.page-review-detail .mi-review-hero-offer > .mi-affiliate-card__cta:hover,
.page-review-detail .product-summary .mi-review-hero-decision > .mi-affiliate-card__cta:hover,
.mi-review-action:hover,
[data-component="affiliate-duel-list"] .mi-duel-example-card:hover .mi-duel-example-card__cta,
.affcmp-method-trigger:hover,
.affcmp-method-trigger--score:hover,
.affcmp-method-dialog__done:hover {
  border-color: var(--aff-btn-hover-bg);
  background: var(--aff-btn-hover-bg) !important;
  color: var(--aff-btn-hover-ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--aff-btn-hover-shadow);
}
:is(.mi-comparison-pick__cta, .mi-comparison-pick__actions > a, .mi-duel-product__actions a, .mi-comparison-winner__cta,
    .mi-comparison-ranking__all, .mi-affiliate-comparison-card__cta, .mi-affiliate-card__cta, .mi-affiliate-card__compare,
    .mi-review-action, .mi-duel-example-card__cta, .affcmp-method-trigger, .affcmp-method-dialog__done):focus-visible {
  outline: 3px solid var(--aff-focus-ring);
  outline-offset: 2px;
}
:is(.mi-comparison-pick__actions, .mi-duel-product__actions, .mi-affiliate-card__actions) svg { width: 16px; height: 16px; }

/* 4. Tertiary: the text link with an arrow (« Comparer » of a catalogue card). */
.mi-affiliate-card--catalogue .mi-affiliate-card__compare,
.mi-affiliate-card__compare {
  min-height: var(--aff-btn-height-sm);
  border-radius: var(--aff-btn-radius);
  color: var(--aff-btn-tertiary-ink);
  font: var(--aff-btn-font-sm);
  text-decoration: none;
}
.mi-affiliate-card--catalogue .mi-affiliate-card__compare:hover,
.mi-affiliate-card__compare:hover { color: var(--aff-ui-heading); }

/* 5. Chips (facts) and badges. */
.mi-comparison-pick__facts li,
.mi-affiliate-card--catalogue .mi-affiliate-card__facts li {
  border: 0;
  border-radius: var(--aff-chip-radius);
  background: var(--aff-chip-bg);
  color: var(--aff-chip-ink);
  font: var(--aff-chip-font);
}
.mi-comparison-pick__facts li > strong,
.mi-affiliate-card--catalogue .mi-affiliate-card__facts li strong { color: var(--aff-ui-ink); font-weight: 650; }
.mi-comparison-pick__fact-icon { color: var(--aff-ui-accent-ink); }
.mi-comparison-pick__badge,
.mi-affiliate-card__badge,
.mi-affiliate-card--catalogue .mi-affiliate-card__badge {
  border: 0;
  border-radius: var(--aff-chip-radius);
  background: var(--aff-badge-media-bg);
  color: var(--aff-badge-ink);
  font: var(--aff-badge-font);
  letter-spacing: var(--aff-badge-tracking);
  text-transform: uppercase;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--aff-ui-heading) 9%, transparent);
}
.mi-affiliate-card--catalogue .mi-affiliate-card__brand,
.mi-comparison-pick__brand { color: var(--aff-ui-accent-ink); }

/* 6. Rank pill: metals for the podium, then the site accent (same as the aff ranking). */
.mi-comparison-pick__rank { font-family: var(--aff-ui-font); }
.mi-comparison-pick__rank--1 { background: var(--aff-medal-1); color: var(--aff-medal-1-ink); }
.mi-comparison-pick__rank--2 { background: var(--aff-medal-2); color: var(--aff-medal-2-ink); }
.mi-comparison-pick__rank--3 { background: var(--aff-medal-3); color: var(--aff-medal-3-ink); }
.mi-comparison-pick__rank--4 { background: var(--aff-rank-bg); color: var(--aff-rank-ink); }

/* 7. Modals: one panel, one backdrop, one close button. */
.affcmp-method-dialog,
.page-comparison-detail .mi-duel-result-modal__surface {
  border: 1px solid var(--aff-modal-line);
  border-radius: var(--aff-modal-radius);
  background: var(--aff-modal-bg);
  color: var(--aff-ui-ink);
  box-shadow: var(--aff-modal-shadow);
}
.page-comparison-detail .mi-duel-result-modal { border-radius: var(--aff-modal-radius); }
.page-comparison-detail .mi-duel-result-modal__head { background: var(--aff-ui-card-bg); }
.affcmp-method-dialog::backdrop,
.mi-gallery-lightbox::backdrop,
.page-comparison-detail .mi-duel-result-modal::backdrop { background: var(--aff-modal-backdrop); backdrop-filter: blur(8px); }
.affcmp-method-dialog__head button,
.mi-gallery-lightbox__close,
.page-comparison-detail .mi-duel-result-modal__close {
  display: grid;
  place-items: center;
  width: var(--aff-modal-close-size);
  height: var(--aff-modal-close-size);
  padding: 0;
  border: 1px solid var(--aff-btn-secondary-line);
  border-radius: 50%;
  background: var(--aff-btn-secondary-bg);
  color: var(--aff-btn-secondary-ink);
  cursor: pointer;
  transition: background var(--aff-btn-motion), color var(--aff-btn-motion), border-color var(--aff-btn-motion);
}
.affcmp-method-dialog__head button:hover,
.mi-gallery-lightbox__close:hover,
.page-comparison-detail .mi-duel-result-modal__close:hover {
  border-color: var(--aff-btn-hover-bg);
  background: var(--aff-btn-hover-bg);
  color: var(--aff-btn-hover-ink);
}
.mi-gallery-lightbox__image { border-radius: var(--aff-modal-radius); background: var(--aff-modal-bg); }
.affcmp-method-dialog__author,
.mi-affiliate-static-faq__aside { border-color: var(--aff-ui-card-line); border-radius: var(--aff-ui-card-radius); background: var(--aff-ui-card-bg); }
/* AFFILIATE_STYLE_ALIGN_V1_END */

/* SURFACE_USAGES_V1 — « Notre choix selon votre usage » (guide) and the « par usage » pages; same card tokens as every
   affiliate card (AFFILIATE_STYLE_TOKENS_V1), so a new theme changes them with the rest. */
.mi-usage-choices__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.mi-usage-choice{margin:0}
.mi-usage-choice__link{display:grid;grid-template-rows:auto 120px auto 1fr auto;gap:8px;height:100%;box-sizing:border-box;padding:16px;border:1px solid var(--aff-ui-card-line);border-radius:var(--aff-ui-card-radius);background:var(--aff-ui-card-bg);color:var(--aff-ui-ink);text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.mi-usage-choice__link:hover{border-color:var(--aff-ui-card-hover-line);box-shadow:var(--aff-ui-card-hover-shadow);transform:translateY(-2px)}
.mi-usage-choice__link:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.mi-usage-choice__label{justify-self:start;padding:4px 10px;border-radius:var(--radius-full,999px);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--aff-ui-heading);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mi-usage-choice__visual{display:grid;place-items:center;border-radius:var(--aff-ui-media-radius);background:var(--aff-ui-paper)}
.mi-usage-choice__visual img{max-width:100%;max-height:108px;object-fit:contain}
.mi-usage-choice__name{color:var(--aff-ui-heading);font-family:var(--aff-ui-font-heading);font-size:17px;line-height:1.25}
.mi-usage-choice__reason{color:var(--aff-ui-muted);font-size:14px;line-height:1.5}
.mi-usage-choice__more{color:var(--aff-ui-accent-ink);font-size:13.5px;font-weight:800}
.mi-comparison-pick__reason{margin:.2rem 0 .5rem;color:var(--aff-ui-muted);font-size:14px;line-height:1.5}
.mi-usage-pitfall__body{max-width:68ch}
.mi-usage-others__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.mi-usage-others__list a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:var(--aff-btn-radius);background:var(--color-bg);color:var(--aff-ui-heading);font-size:13.5px;font-weight:800;text-decoration:none}
.mi-usage-others__list a:hover{background:var(--color-dark-bg);color:var(--color-dark-text)}
/* The reader's list styles must not turn the « autres usages » links into a bulleted list. */
.ej-reader .mi-usage-others__list,.mi-affiliate-surface .mi-usage-others__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ej-reader .mi-usage-others__list>li{margin:0;padding:0;list-style:none}
.ej-reader .mi-usage-others__list>li::before,.ej-reader .mi-usage-others__list>li::marker{content:none;display:none}
.ej-reader .mi-usage-pitfall__body{max-width:68ch;margin-inline:auto}
.ej-reader .mi-usage-others__list{justify-content:center}
.ej-reader .mi-usage-others__list a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);border-radius:var(--aff-btn-radius,var(--radius-full,999px));background:var(--color-bg);color:var(--aff-ui-heading,var(--color-dark-bg));font-size:13.5px;font-weight:800;text-decoration:none}
.ej-reader .mi-usage-others__list a:hover,.ej-reader .mi-usage-others__list a:focus-visible{background:var(--color-dark-bg);color:var(--color-dark-text,#fff)}
/* DUEL_CAROUSEL_SHADOW_V1 (Julien 2026-10-07): the carousel viewport clips; the cards get room for their hover lift and a
   lighter hover shadow, so nothing is cut. */
[data-component="affiliate-duel-list"] .cms-carousel__viewport{padding-top:10px;padding-bottom:22px}
[data-component="affiliate-duel-list"] .mi-duel-example-card:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--color-text,#1c2733) 9%,transparent);transform:translateY(-2px)}
/* The score's « /10 » never takes the colour of the offer state (a withheld offer turned it red). */
.mi-comparison-pick__price .mi-comparison-pick__rating small{color:var(--aff-ui-muted,var(--color-text-muted))}
/* CATALOGUE_CARD_SINGLE_CTA_V1: one action per catalogue card, full width, on one line. */
.mi-affiliate-card--catalogue .mi-affiliate-card__actions{display:flex}
.mi-affiliate-card--catalogue .mi-affiliate-card__actions>.mi-affiliate-card__cta{flex:1 1 100%;justify-content:center;white-space:nowrap;text-align:center}
/* An indicative price is information, not an alert: its note stays muted whatever the offer state. */
.mi-affiliate-card__offer small,.mi-comparison-pick__price small{color:var(--aff-ui-muted,var(--color-text-muted))}
/* DUEL_COLORS_V1 (Julien 2026-10-07): the two products of a duel keep their own colour in every step (scores, legend,
   criterion bars) — the site's two accents. Declared on the surface (the steps are no longer inside .mi-duel). */
.mi-affiliate-surface,.page-comparison-detail .mi-duel{--mi-duel-a:var(--color-accent,#0f8fa0);--mi-duel-b:var(--color-accent-2,var(--wi2-coral,#ff7a59))}
/* REVIEW_HERO_OPENING_V1: the review hero is the reader's opening slide — hidden like any other slide when another one
   is shown in the presentation mode (its own display rule must not win over [hidden]). */
.ej-reader .product-page-hero.ej-opening[hidden]{display:none!important}
.ej-reader>.product-page-hero.ej-opening{width:100%;max-width:none;margin:0 0 var(--ej-space-section,48px);align-items:stretch}
/* REVIEW_FEATURE_IMAGES_V1 (Julien 2026-10-07) — « Ce qu'il faut savoir » in floors: each chapter of the review reads
   next to its own picture, the picture alternating left / right; one column on mobile, picture first. Theme tokens. */
.mi-review-floors{display:grid;gap:clamp(28px,4vw,56px)}
.mi-review-floor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.mi-review-floor:nth-child(even) .mi-review-floor__media{order:-1}
.mi-review-floor--text{grid-template-columns:minmax(0,1fr);max-width:72ch}
.mi-review-floor__copy{display:grid;gap:12px;align-content:center}
.mi-review-floor__index{color:var(--color-accent,#14a3a8);font:800 13px/1 var(--font-body,inherit);letter-spacing:.12em}
.mi-review-floor__copy h3{margin:0;color:var(--aff-ui-heading,var(--color-dark-bg));font:700 clamp(1.2rem,2vw,1.5rem)/1.28 var(--font-heading,inherit)}
.mi-review-floor__copy p{margin:0;color:var(--aff-ui-ink,var(--color-text));font-size:16px;line-height:1.75}
.mi-review-floor__media{margin:0;min-width:0}
.mi-review-floor__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--aff-ui-card-radius,var(--radius-lg,18px));box-shadow:0 18px 40px color-mix(in srgb,var(--color-text,#1c2733) 12%,transparent)}
@media (max-width:760px){.mi-review-floor{grid-template-columns:minmax(0,1fr);gap:16px}.mi-review-floor .mi-review-floor__media{order:-1}}

/* AFF_TRANSPARENCY_V1 — the affiliate note at the bottom of a product hero: present but discreet (small, light, italic).
   Same rule in affiliate-blocks.css. */
.aff-transparency,.product-page-hero .product-summary > p.aff-transparency:not(.rating){margin:14px 0 0;max-width:62ch;color:color-mix(in srgb,var(--color-text-muted,#64748b) 80%,transparent);font-size:12px;font-style:italic;font-weight:400;line-height:1.55}