.cm-shell {
  --cm-card-bg:#252f69;
  --cm-panel-bg:#20295f;
  --cm-border:#465185;
  --cm-text:#f7f8ff;
  --cm-muted:#bcc4e4;
  --cm-accent:#c8ff00;
  --cm-accent-text:#13205d;
  --cm-rating-track:#7a85b4;
  --cm-warning:#ffbf16;
  --cm-radius:12px;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-inline:auto;
  container-type:inline-size;
  container-name:cm-listing;
  color:var(--cm-text);
  font:inherit;
}
.cm-shell *, .cm-shell *::before, .cm-shell *::after { box-sizing:border-box; }

/* v0.4.7: premium comparison lists break out of narrow article/shortcode columns
   themselves. This keeps the original horizontal comparison layout even when a
   theme, Group block, shortcode wrapper, or page template limits content to ~1024px. */
.cm-shell.cm-shell--premium {
  position:relative;
  left:50%;
  /* WordPress theme.json global styles are printed after plugin styles and may
     clamp normal content to --wp--style--global--content-size (760px on the
     reported theme). Higher specificity + !important is intentional here so
     a comparison table can use the wide layout it requires. */
  width:min(1660px, calc(100vw - 48px)) !important;
  max-width:1660px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:translateX(calc(-50% + var(--cm-viewport-correction, 0px)));
  z-index:1;
}

/* Some themes apply their content-width rule from a stylesheet loaded after
   plugin CSS. This deliberately high-specificity rule wins that cascade too.
   It is scoped to the plugin shell only and does not change the theme layout. */
body .entry-content > .cm-shell.cm-shell--premium.cm-shell--force-wide {
  width:min(1660px, calc(100vw - 48px)) !important;
  max-width:1660px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Gutenberg wrapper: premium lists are intentionally wide by default.
   The breakout keeps the list centered even when the theme's normal content column is narrow. */
.cm-block-wrap {
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-inline:auto;
}
.cm-block-wrap.alignwide, .cm-block-wrap--wide {
  /* Break out of narrow article columns while staying centered on the page. */
  position:relative;
  left:50%;
  width:min(1660px, calc(100vw - 48px)) !important;
  max-width:1660px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:translateX(-50%);
}
.cm-block-wrap.alignfull, .cm-block-wrap--full {
  position:relative;
  left:50%;
  width:calc(100vw - 24px) !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:translateX(-50%);
}

.cm-list { display:grid; gap:22px; width:100%; min-width:0; }
.cm-card { width:100%; max-width:100%; min-width:0; }

.cm-sort { display:none; margin:0 0 18px; }
.cm-sort__control {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:16px 18px;
  border:1px solid var(--cm-border);
  border-radius:var(--cm-radius);
  background:color-mix(in srgb, var(--cm-card-bg) 86%, white 14%);
  color:var(--cm-text);
  font-weight:800;
  text-transform:uppercase;
}
.cm-sort__prefix { white-space:nowrap; }
.cm-sort__select {
  flex:1;
  width:100%;
  appearance:none;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
}
.cm-sort__select option { color:#111; text-transform:none; }

.cm-card--premium {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,1.28fr);
  gap:26px;
  align-items:center;
  min-width:0;
  padding:20px;
  border:1px solid var(--cm-border);
  border-radius:var(--cm-radius);
  background:var(--cm-card-bg);
  color:var(--cm-text);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.cm-card--premium a { text-decoration:none; }
.cm-card__identity { display:grid; grid-template-columns:166px minmax(0,1fr); gap:22px; align-items:center; min-width:0; }
.cm-card__logo-wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:166px;
  height:166px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--cm-border) 85%, var(--cm-accent) 15%);
  border-radius:12px;
  background:#111827;
}
.cm-card__rank {
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 9px;
  border-radius:10px 0 10px 0;
  background:var(--cm-accent);
  color:var(--cm-accent-text);
  font-size:17px;
  font-weight:900;
  line-height:1;
}
.cm-card__logo { display:block; max-width:86%; max-height:78%; width:auto; height:auto; object-fit:contain; }
.cm-card__logo-placeholder { font-size:46px; font-weight:900; color:var(--cm-text); opacity:.9; }
.cm-card__brand-copy { min-width:0; }
.cm-card__badges { display:flex; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.cm-card__badge { display:inline-flex; align-items:center; min-height:31px; padding:5px 10px; font-size:13px; font-weight:900; line-height:1; text-transform:uppercase; }
.cm-card__badge--prefix { border:2px solid var(--cm-accent); border-radius:999px 0 0 999px; background:#11183e; color:var(--cm-text); }
.cm-card__badge--accent { border:2px solid var(--cm-accent); border-left:0; border-radius:0 999px 999px 0; background:var(--cm-accent); color:var(--cm-accent-text); }
.cm-card__badges .cm-card__badge--accent:first-child { border-left:2px solid var(--cm-accent); border-radius:999px; }
.cm-card__name { margin:0 0 14px; color:var(--cm-text); font-size:26px; font-weight:800; line-height:1.08; }
.cm-card__features { display:grid; gap:9px; margin:0; padding:0; list-style:none; color:var(--cm-text); font-size:16px; line-height:1.3; }
.cm-card__features li { position:relative; margin:0; padding-left:22px; }
.cm-card__features li::before {
  content:'+';
  position:absolute;
  left:0;
  top:.08em;
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--cm-accent);
  color:var(--cm-accent-text);
  font-size:12px;
  font-weight:1000;
  line-height:1;
}

.cm-card__metrics { display:grid; grid-template-columns:1fr 1fr; gap:20px 30px; min-width:0; }
.cm-metric { min-width:0; }
.cm-metric__label { margin-bottom:10px; color:var(--cm-muted); font-size:17px; line-height:1.2; }
.cm-tooltip-wrap {
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}
.cm-info {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  margin:0 0 0 4px;
  padding:0;
  border:2px solid currentColor;
  border-radius:50%;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:10px;
  font-weight:900;
  line-height:1;
  opacity:.65;
  vertical-align:2px;
  cursor:help;
  appearance:none;
  -webkit-appearance:none;
}
.cm-info--light { opacity:.9; }
.cm-tooltip__bubble {
  position:absolute;
  z-index:50;
  left:50%;
  bottom:calc(100% + 10px);
  width:max-content;
  max-width:min(300px,calc(100vw - 32px));
  min-width:220px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--cm-border) 70%,white 30%);
  border-radius:9px;
  background:#111831;
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,5px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.cm-tooltip__bubble::after {
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  width:9px;
  height:9px;
  border-right:1px solid color-mix(in srgb,var(--cm-border) 70%,white 30%);
  border-bottom:1px solid color-mix(in srgb,var(--cm-border) 70%,white 30%);
  background:#111831;
  transform:translate(-50%,-5px) rotate(45deg);
}
.cm-tooltip-wrap:hover .cm-tooltip__bubble,
.cm-tooltip-wrap:focus-within .cm-tooltip__bubble,
.cm-tooltip-wrap.is-open .cm-tooltip__bubble {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.cm-tooltip__trigger:focus-visible {
  outline:2px solid color-mix(in srgb,var(--cm-accent) 70%,white 30%);
  outline-offset:3px;
}
@media (max-width:520px) {
  .cm-tooltip__bubble { min-width:190px; max-width:min(260px,calc(100vw - 28px)); font-size:12px; }
}
.cm-metric__value-row { display:grid; grid-template-columns:minmax(90px,1fr) auto; gap:12px; align-items:center; color:var(--cm-text); font-size:18px; }
.cm-meter { position:relative; display:block; width:100%; height:11px; overflow:hidden; border-radius:999px; background:var(--cm-rating-track); }
.cm-meter__fill { display:block; height:100%; border-radius:inherit; background:var(--cm-accent); }
.cm-meter--trust { background:var(--cm-rating-track); }
.cm-meter--trust .cm-meter__fill { background:linear-gradient(90deg,var(--cm-warning) 0 33%,#f7ec2e 33% 66%,var(--cm-accent) 66% 100%); }
.cm-card__facts {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  padding-top:20px;
  border-top:1px solid color-mix(in srgb, var(--cm-border) 75%, transparent);
  color:var(--cm-text);
  font-size:17px;
}
.cm-card__facts span { padding:0 24px; border-right:1px solid color-mix(in srgb, var(--cm-border) 80%, transparent); }
.cm-card__facts span:first-child { padding-left:0; }
.cm-card__facts span:last-child { border-right:0; }
.cm-card__facts strong { font-weight:500; color:var(--cm-muted); }

.cm-card__offer-panel {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(170px,.85fr);
  gap:18px;
  align-items:stretch;
  min-width:0;
  padding:18px;
  border:1px solid color-mix(in srgb, var(--cm-border) 78%, var(--cm-accent) 22%);
  border-radius:calc(var(--cm-radius) - 1px);
  background:var(--cm-panel-bg);
}
.cm-card__offer-copy { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; text-align:center; }
.cm-card__offer-label { margin-bottom:3px; color:var(--cm-muted); font-size:15px; line-height:1.25; }
.cm-card__offer-text { color:var(--cm-text); font-size:24px; font-weight:900; line-height:1.12; text-wrap:balance; }
.cm-card__bonus-code { margin-top:6px; color:var(--cm-muted); font-size:15px; }
.cm-card__bonus-code strong { color:var(--cm-text); }
.cm-card__terms { margin-top:12px; color:var(--cm-muted); font-size:11px; line-height:1.35; }
.cm-card__terms a { color:inherit; text-decoration:underline; }
.cm-card__actions { display:grid; grid-template-rows:1fr 1fr; gap:10px; padding-left:18px; border-left:1px solid color-mix(in srgb, var(--cm-border) 70%, transparent); }
.cm-card__cta, .cm-card__review { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:58px; padding:12px 16px; border-radius:10px; text-align:center; text-transform:uppercase; font-size:17px; font-weight:900; line-height:1.1; transition:transform .15s ease, filter .15s ease; }
.cm-card__cta { gap:10px; border:1px solid var(--cm-accent); background:linear-gradient(180deg,color-mix(in srgb,var(--cm-accent) 82%,white 18%),var(--cm-accent)); color:var(--cm-accent-text)!important; box-shadow:0 -1px 0 rgba(255,255,255,.24) inset,0 1px 0 rgba(0,0,0,.08); }
.cm-card__cta-arrow { font-size:29px; line-height:.7; transform:translateY(-1px); }
.cm-card__review { border:1px solid color-mix(in srgb, var(--cm-muted) 82%, white 18%); background:transparent; color:var(--cm-text)!important; }
.cm-card__cta:hover, .cm-card__review:hover { transform:translateY(-1px); filter:brightness(1.04); }
.cm-card__cta:focus-visible, .cm-card__review:focus-visible, .cm-sort__select:focus-visible { outline:3px solid color-mix(in srgb,var(--cm-accent) 70%,white 30%); outline-offset:2px; }

/* Legacy/classic template retained for compatibility. */
.cm-card--classic { display:grid; grid-template-columns:56px minmax(140px,1fr) minmax(180px,1.4fr) auto; gap:18px; align-items:center; padding:18px; border:1px solid #e2e2e2; border-radius:12px; background:#fff; color:#111; }
.cm-classic__rank { font-weight:700; font-size:18px; }
.cm-classic__brand { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cm-classic__logo { max-width:140px; max-height:52px; width:auto; height:auto; }
.cm-classic__offer { display:grid; gap:5px; }
.cm-classic__offer span { font-size:13px; opacity:.75; }
.cm-classic__actions { display:flex; gap:10px; align-items:center; }
.cm-classic__cta { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:8px; background:#111; color:#fff!important; font-weight:700; white-space:nowrap; }
.cm-classic__review { white-space:nowrap; }


/* v0.4.5 desktop comparison layout: match the original wide horizontal reference. */
@container cm-listing (min-width:1121px) {
  .cm-card--premium {
    min-height:204px;
    padding:18px;
  }
  .cm-card__identity {
    grid-template-columns:166px minmax(0,1fr);
    gap:22px;
  }
  .cm-card__metrics {
    align-content:center;
    gap:18px 28px;
  }
  .cm-card__facts {
    padding-top:16px;
    font-size:16px;
  }
  .cm-card__offer-panel {
    grid-template-columns:minmax(0,1.15fr) minmax(205px,.85fr);
    min-height:168px;
    padding:16px;
  }
  .cm-card__actions {
    min-width:0;
  }
  .cm-card__cta, .cm-card__review {
    min-width:0;
  }
}

/* Responsive fallbacks for genuinely smaller list widths. Wide Gutenberg blocks
   are broken out above, so a narrow theme text column does not accidentally
   force the desktop comparison card into the mobile layout. */
@container cm-listing (max-width:1120px) {
  .cm-card--premium { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
  .cm-card__offer-panel { grid-column:1 / -1; }
}

@container cm-listing (max-width:700px) {
  .cm-sort { display:block; }
  .cm-list { gap:22px; }
  .cm-card--premium { display:block; padding:22px; border-radius:var(--cm-radius); }
  .cm-card__identity { grid-template-columns:126px minmax(0,1fr); gap:22px; align-items:start; }
  .cm-card__logo-wrap { width:126px; height:126px; }
  .cm-card__rank { min-width:34px; height:34px; font-size:16px; }
  .cm-card__name { margin-top:16px; margin-bottom:13px; font-size:29px; }
  .cm-card__badge { min-height:29px; padding:4px 9px; font-size:12px; }
  .cm-card__features { gap:10px; font-size:16px; }
  .cm-card__metrics { grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
  .cm-metric__label { font-size:16px; }
  .cm-metric__value-row { grid-template-columns:minmax(72px,1fr) auto; gap:10px; font-size:18px; }
  .cm-card__facts { display:none; }
  .cm-card__offer-panel { display:block; margin-top:28px; padding:20px 17px 16px; border-radius:calc(var(--cm-radius) - 1px); }
  .cm-card__offer-label { font-size:15px; }
  .cm-card__offer-text { font-size:30px; line-height:1.08; }
  .cm-card__bonus-code { margin-top:6px; font-size:18px; }
  .cm-card__terms { margin-top:16px; font-size:11px; }
  .cm-card__actions { grid-template-columns:minmax(120px,.75fr) minmax(180px,1.25fr); grid-template-rows:none; gap:12px; margin-top:20px; padding:0; border:0; }
  .cm-card__cta, .cm-card__review { min-height:70px; font-size:20px; }
  .cm-card__cta { order:2; }
  .cm-card__review { order:1; }
  .cm-card__cta-arrow { font-size:32px; }
  .cm-card--classic { grid-template-columns:42px 1fr; }
  .cm-classic__offer, .cm-classic__actions { grid-column:2; }
  .cm-classic__actions { flex-wrap:wrap; }
}

@container cm-listing (max-width:480px) {
  .cm-card--premium { padding:18px; }
  .cm-card__identity { grid-template-columns:112px minmax(0,1fr); gap:16px; }
  .cm-card__logo-wrap { width:112px; height:112px; }
  .cm-card__name { font-size:25px; }
  .cm-card__features { font-size:15px; }
  .cm-card__metrics { gap:16px; }
  .cm-metric__label { font-size:14px; }
  .cm-metric__value-row { display:block; font-size:17px; }
  .cm-meter { margin-bottom:8px; }
  .cm-card__offer-text { font-size:26px; }
  .cm-card__actions { grid-template-columns:1fr 1.45fr; }
  .cm-card__cta, .cm-card__review { min-height:62px; padding:10px 9px; font-size:17px; }
}


/* Fallback for older browsers and sensible viewport gutters. */
@media (max-width:700px) {
  .cm-shell.cm-shell--premium,
  body .entry-content > .cm-shell.cm-shell--premium.cm-shell--force-wide {
    width:calc(100vw - 24px) !important;
    max-width:none !important;
  }
  .cm-block-wrap.alignwide, .cm-block-wrap--wide,
  .cm-block-wrap.alignfull, .cm-block-wrap--full {
    width:calc(100vw - 24px) !important;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width:1120px) {
    .cm-card--premium { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
    .cm-card__offer-panel { grid-column:1 / -1; }
  }
  @media (max-width:700px) {
    .cm-sort { display:block; }
    .cm-card--premium { display:block; padding:22px; }
    .cm-card__identity { grid-template-columns:126px minmax(0,1fr); gap:22px; align-items:start; }
    .cm-card__logo-wrap { width:126px; height:126px; }
    .cm-card__metrics { grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; }
    .cm-card__facts { display:none; }
    .cm-card__offer-panel { display:block; margin-top:28px; }
    .cm-card__actions { grid-template-columns:minmax(120px,.75fr) minmax(180px,1.25fr); grid-template-rows:none; gap:12px; margin-top:20px; padding:0; border:0; }
  }
}