/* =========================================================================
   rating.css - brand rating block.
   Kept outside the theme bundle on purpose and loaded with ?v=filemtime.

   Desktop: everything is open. There is no toggle and nothing is hidden.

   Mobile: the card stays whole - rank, logo, brand, offer, score and the
   button are always visible - and only the data plates fold away behind a
   small toggle. Pure CSS, no script.

   Palette taken from the site itself: page grey #F1F3F5, near black text,
   the blue of the existing button #0E7CB3, the red of the logo #FF0101.
   ========================================================================= */

.cu-list{
  --cu-ink:#15161A;
  --cu-ink2:#3A3D42;
  --cu-grey:#60656B;
  --cu-grey2:#8A9097;
  --cu-hair:#DDE1E5;
  --cu-blue:#0E7CB3;
  --cu-red:#E01010;
  --cu-tile:#0B0C0E;
  --cu-soft:#F4F6F8;

  display:block;
  margin:0 0 26px;
  background:#fff;
  border:2px solid var(--cu-ink);
}

.cu-list *{box-sizing:border-box}

.cu-list .cu-b{border-bottom:1px solid var(--cu-hair)}
.cu-list .cu-b:last-child{border-bottom:0}
.cu-list .cu-b:hover{background:var(--cu-soft)}

/* The checkbox and its label are mobile only. */
.cu-list .cu-i{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.cu-list .cu-tgl{display:none}

.cu-list .cu-p{padding:20px 22px}

/* ---------- head of the card ---------- */

.cu-list .cu-top{
  display:grid;
  grid-template-columns:46px 186px 1fr 150px;
  align-items:center;
  gap:0 18px;
  margin-bottom:14px;
}

.cu-list .cu-rk{
  font-style:normal;
  font-size:28px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1.4px;
  color:var(--cu-grey2);
  font-variant-numeric:tabular-nums;
}

.cu-list .cu-b--top .cu-rk{color:var(--cu-red)}

.cu-list .cu-lg{
  width:186px;
  height:76px;
  background:var(--cu-tile);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.cu-list .cu-lg a{display:grid;place-items:center;width:100%;height:100%}

.cu-list .cu-lg img{
  max-width:94%;
  max-height:88%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.cu-list .cu-lg__txt{color:#fff;font-size:13px;font-weight:700;text-align:center;padding:0 8px;line-height:1.15}

.cu-list .cu-nm{
  margin:0 0 6px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cu-grey);
}

.cu-list .cu-nm a{color:inherit;text-decoration:none}
.cu-list .cu-nm a:hover{color:var(--cu-red)}

.cu-list .cu-b1,
.cu-list .cu-b2{
  display:inline-block;
  margin-left:9px;
  font-style:normal;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1;
  padding:5px 9px;
}

.cu-list .cu-b1{background:var(--cu-red);color:#fff}
.cu-list .cu-b2{background:var(--cu-ink);color:#fff}

.cu-list .cu-of2{
  font-size:20px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.2px;
  color:var(--cu-ink);
}

.cu-list .cu-of2 .bonus-main{display:block}
.cu-list .cu-of2 strong,
.cu-list .cu-of2 b{font-weight:800}

.cu-list .cu-sc2{text-align:right}

.cu-list .cu-sc2 b{
  display:block;
  font-size:30px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1.4px;
  color:var(--cu-ink);
  font-variant-numeric:tabular-nums;
}

.cu-list .cu-sc2 small{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  font-weight:600;
  color:var(--cu-grey);
}

/* ---------- featuresHtml ---------- */

.cu-list .cu-sub{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--cu-grey);
}

.cu-list .cu-sub span{margin:0 8px;color:var(--cu-grey2)}

/* ---------- free HTML blocks ---------- */

.cu-list .cu-special,
.cu-list .cu-extra,
.cu-list .cu-specialfeat{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--cu-ink2);
}

.cu-list .cu-special p,
.cu-list .cu-extra p,
.cu-list .cu-specialfeat p{margin:0}

/* ---------- advantages: two columns, any number of rows ---------- */

.cu-list .cu-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 34px;
  margin:0 0 14px;
}

.cu-list .cu-cell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  border-bottom:1px solid var(--cu-hair);
  font-size:13.5px;
}

.cu-list .cu-cell dt{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-weight:400;
  color:var(--cu-grey);
}

.cu-list .cu-cell dt svg{width:15px;height:15px;flex:0 0 15px;color:var(--cu-grey2)}

.cu-list .cu-cell dd{margin:0;font-weight:700;text-align:right;color:var(--cu-ink)}

/* ---------- bonus code ---------- */

.cu-list .cu-promo{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 13px;
}

.cu-list .cu-promo u{
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cu-grey);
}

.cu-list .cu-promo code{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  background:var(--cu-red);
  padding:6px 13px;
}

/* ---------- payment categories ---------- */

.cu-list .cu-pay{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 15px;
}

.cu-list .cu-pay u{
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cu-grey);
  margin-right:2px;
}

.cu-list .cu-pay span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  font-size:11.5px;
  font-weight:600;
  line-height:1;
  color:var(--cu-ink2);
  border:1px solid var(--cu-hair);
}

.cu-list .cu-pay svg{width:14px;height:14px;flex:0 0 14px;color:var(--cu-grey)}

/* ---------- the affiliate button ----------
   The label is forced white at a specificity the theme bundle cannot beat,
   including the visited and hover states. */

.cu-list .cu-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.cu-list .cu-b .cu-act a.cu-go,
.cu-list .cu-b .cu-act a.cu-go:link,
.cu-list .cu-b .cu-act a.cu-go:visited,
.cu-list .cu-b .cu-act a.cu-go:hover,
.cu-list .cu-b .cu-act a.cu-go:focus,
.cu-list .cu-b .cu-act a.cu-go:active{
  color:#fff;
  text-decoration:none;
}

.cu-list .cu-go{
  display:inline-block;
  background:var(--cu-blue);
  padding:14px 46px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:.09em;
  text-align:center;
}

.cu-list .cu-go:hover{background:var(--cu-ink)}

.cu-list .cu-rev{font-size:12.5px;color:var(--cu-grey);text-decoration:underline}

/* ---------- the 18+ line ---------- */

.cu-list .cu-rg{
  margin-top:13px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--cu-grey2);
}

.cu-list .cu-rg p{margin:0}

/* =========================================================================
   Mobile. The card stays whole; only the data plates fold. Nothing here
   touches the desktop view.
   ========================================================================= */

@media (max-width:900px){

  .cu-list .cu-p{padding:14px 13px}

  .cu-list .cu-top{
    grid-template-columns:34px 118px 1fr;
    gap:8px 11px;
    margin-bottom:10px;
  }

  .cu-list .cu-rk{font-size:19px;letter-spacing:-1px}

  .cu-list .cu-lg{width:118px;height:50px}

  .cu-list .cu-of2{font-size:16.5px;line-height:1.24}

  .cu-list .cu-sc2{grid-column:2 / -1;text-align:left;display:flex;align-items:baseline;gap:8px}
  .cu-list .cu-sc2 b{font-size:21px}
  .cu-list .cu-sc2 small{margin-top:0}

  .cu-list .cu-sub{font-size:12.5px;margin-bottom:10px}

  /* the toggle */
  .cu-list .cu-tgl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    margin:0 0 11px;
    padding-top:10px;
    border-top:1px solid var(--cu-hair);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--cu-red);
  }

  .cu-list .cu-tgl i{
    width:9px;
    height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s;
  }

  .cu-list .cu-i:checked ~ .cu-tgl i{transform:rotate(-135deg) translate(-3px,-3px)}

  /* only the plates fold - the button never does */
  .cu-list .cu-i:not(:checked) ~ .cu-grid,
  .cu-list .cu-i:not(:checked) ~ .cu-promo,
  .cu-list .cu-i:not(:checked) ~ .cu-pay,
  .cu-list .cu-i:not(:checked) ~ .cu-rg{display:none}

  .cu-list .cu-grid{grid-template-columns:1fr;gap:0}
  .cu-list .cu-cell{font-size:13px}

  .cu-list .cu-act{gap:10px}
  .cu-list .cu-go{flex:1 1 100%;padding:13px 20px}
  .cu-list .cu-rev{flex:1 1 100%}
}

@media (max-width:420px){
  .cu-list .cu-p{padding:12px 10px}
  .cu-list .cu-top{grid-template-columns:28px 102px 1fr;gap:7px 9px}
  .cu-list .cu-rk{font-size:17px}
  .cu-list .cu-lg{width:102px;height:44px}
  .cu-list .cu-of2{font-size:15.5px}
}