/* =========================================================================
   rating.css - brand rating block, layout "neonbaand".
   Kept outside the theme bundle on purpose and loaded with ?v=filemtime,
   so a change here reaches visitors without touching the bundle.

   Palette is taken from the site itself: the pink of the header and the
   buttons, the ice blue of the navigation panel, the near-black of the
   headings.
   ========================================================================= */

.sp-grid{
  --sp-pink:#E8336E;
  --sp-pink2:#FF6FA0;
  --sp-ice:#D7F1FA;
  --sp-ice2:#AFE3F5;
  --sp-ink:#15151F;
  --sp-muted:#5E5E70;
  --sp-line:#E8E8F0;
  --sp-amber:#FFC247;
  --sp-tile:#12121A;

  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0 0 22px;
}

.sp-grid *{box-sizing:border-box}

/* ---------- card ---------- */

.sp-grid .sp-card{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr 212px;
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:18px;
  overflow:hidden;
}

.sp-grid .sp-card--top{
  border-color:rgba(232,51,110,.35);
  box-shadow:0 6px 22px -14px rgba(232,51,110,.55);
}

/* ---------- the running ribbon ---------- */

.sp-grid .sp-rib{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  /* The stops stay inside the pink family and cross the blue quickly, so the
     blend never falls into the grey-lilac midpoint of a plain pink-to-blue
     gradient. */
  background:linear-gradient(170deg,
    var(--sp-pink) 0%,
    var(--sp-pink2) 16%,
    #FF9ABF 28%,
    #9FDFF5 42%,
    #4FC1E9 50%,
    #9FDFF5 58%,
    #FF9ABF 72%,
    var(--sp-pink2) 86%,
    var(--sp-pink) 100%);
  background-size:100% 320%;
  animation:sp-run 7s linear infinite;
}

.sp-grid .sp-card--top .sp-rib{animation-duration:3.2s}

@keyframes sp-run{
  0%{background-position:0 0}
  100%{background-position:0 -320%}
}

.sp-grid .sp-rib b{
  font-size:27px;
  font-weight:800;
  line-height:1;
  color:#fff;
  letter-spacing:-.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.14);
}

/* Visitors who ask for less motion get the gradient, standing still. */
@media (prefers-reduced-motion:reduce){
  .sp-grid .sp-rib,
  .sp-grid .sp-btn:after{animation:none}
}

/* ---------- body ---------- */

.sp-grid .sp-bd{
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}

.sp-grid .sp-top{
  display:flex;
  align-items:center;
  gap:13px;
}

.sp-grid .sp-lg{
  flex:0 0 112px;
  height:50px;
  border-radius:9px;
  background:var(--sp-tile);
  display:grid;
  place-items:center;
  overflow:hidden;
}

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

.sp-grid .sp-lg img{
  max-width:94%;
  max-height:84%;
  width:auto;
  height:auto;
  object-fit:contain;
}

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

.sp-grid .sp-nm{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
}

.sp-grid .sp-nm a{color:inherit;text-decoration:none}
.sp-grid .sp-nm a:hover{color:var(--sp-pink)}

.sp-grid .sp-b1,
.sp-grid .sp-b2{
  display:inline-block;
  margin-left:8px;
  vertical-align:1px;
  font-style:normal;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1;
  padding:4px 7px;
  border-radius:5px;
}

.sp-grid .sp-b1{background:var(--sp-pink);color:#fff}
.sp-grid .sp-b2{background:var(--sp-ice);color:#0E5C76}

/* ---------- the offer ---------- */

.sp-grid .sp-of{
  font-size:25px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.3px;
  color:var(--sp-ink);
}

.sp-grid .sp-of .bonus-main{display:block}
.sp-grid .sp-of strong,
.sp-grid .sp-of b{font-weight:800;color:var(--sp-pink)}

.sp-grid .sp-special{
  font-size:14px;
  line-height:1.4;
  color:var(--sp-muted);
}

/* ---------- highlight capsules ---------- */

.sp-grid .sp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}

.sp-grid .sp-chips li{
  display:inline-flex;
  align-items:center;
  background:var(--sp-ice);
  color:#0E5C76;
  border-radius:99px;
  padding:5px 12px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.25;
}

/* ---------- figures ---------- */

.sp-grid .sp-facts{
  display:flex;
  flex-wrap:wrap;
  gap:3px 22px;
  margin:2px 0 0;
  padding:9px 0 0;
  border-top:1px dashed var(--sp-line);
}

.sp-grid .sp-fact{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.sp-grid .sp-fact dt{
  margin:0;
  font-size:13px;
  font-weight:400;
  color:var(--sp-muted);
}

.sp-grid .sp-fact dd{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--sp-ink);
}

.sp-grid .sp-specialfeat{
  font-size:13px;
  line-height:1.45;
  color:var(--sp-muted);
}

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

.sp-grid .sp-promo{
  display:flex;
  align-items:center;
  gap:9px;
}

.sp-grid .sp-promo u{
  text-decoration:none;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:#9A9AAB;
}

.sp-grid .sp-promo code{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--sp-pink);
  background:rgba(232,51,110,.09);
  border:1px dashed rgba(232,51,110,.45);
  border-radius:7px;
  padding:4px 10px;
}

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

.sp-grid .sp-pay{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  padding:9px 0 0;
  border-top:1px dashed var(--sp-line);
}

.sp-grid .sp-pay u{
  text-decoration:none;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  color:#9A9AAB;
  margin-right:3px;
}

.sp-grid .sp-pay span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#F6F7FB;
  border:1px solid var(--sp-line);
  border-radius:8px;
  padding:5px 9px 5px 7px;
  font-size:11.5px;
  font-weight:600;
  line-height:1;
  color:#46465A;
}

.sp-grid .sp-pay svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:var(--sp-pink);
}

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

.sp-grid .sp-rg{
  font-size:11.5px;
  line-height:1.4;
  color:#9A9AAB;
}

.sp-grid .sp-rg p{margin:0}
.sp-grid .sp-rg strong{color:var(--sp-muted)}

/* ---------- score and button ---------- */

.sp-grid .sp-pn{
  border-left:1px solid var(--sp-line);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.sp-grid .sp-sc{
  font-size:40px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1.5px;
  color:var(--sp-pink);
}

.sp-grid .sp-sc small{font-size:17px;color:#C9C9D6;letter-spacing:0}

.sp-grid .sp-stars{display:flex;gap:2px}

.sp-grid .sp-stars i{
  width:11px;
  height:11px;
  background:var(--sp-amber);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.sp-grid .sp-sclab{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9A9AAB;
  text-align:center;
}

.sp-grid .sp-sclab b{display:block;font-weight:600;letter-spacing:.04em;text-transform:none;margin-top:2px}

.sp-grid .sp-btn{
  position:relative;
  display:block;
  width:100%;
  text-align:center;
  background:var(--sp-pink);
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  line-height:1;
  padding:13px 10px;
  border-radius:11px;
  overflow:hidden;
  box-shadow:0 7px 16px -8px rgba(232,51,110,.85);
}

.sp-grid .sp-btn:hover{background:#D42460;color:#fff}

.sp-grid .sp-btn:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:sp-sheen 3.4s ease-in-out infinite;
}

@keyframes sp-sheen{
  0%,62%{transform:translateX(-120%)}
  86%,100%{transform:translateX(120%)}
}

.sp-grid .sp-rev{
  font-size:12px;
  color:var(--sp-muted);
  text-decoration:underline;
}

/* ---------- the fold toggle: mobile only ---------- */

.sp-grid .sp-tglbox{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.sp-grid .sp-tgl{display:none}

/* ---------- date line ---------- */

.sp-grid .sp-upd{
  margin:2px 0 0;
  font-size:13px;
  color:var(--sp-muted);
}

.sp-grid .sp-upd__e{margin-right:4px}
.sp-grid .sp-upd time{font-weight:600;color:var(--sp-ink)}

/* =========================================================================
   Mobile. Everything that shrinks lives inside this query, so the desktop
   view is never touched.
   ========================================================================= */

@media (max-width:860px){

  /* The section reserves 150px at the top to clear the fixed header, which is
     only 74px tall - that leaves 76px of empty space above the heading on a
     phone. 92px keeps the header clear with 18px of air and nothing else
     moves. This file is loaded only on the pages that carry the table, so no
     other page is affected. */
  body section.blog-details-area.bg-half-200{padding-top:92px !important}

  .sp-grid{gap:11px}

  .sp-grid .sp-card{grid-template-columns:54px 1fr}

  .sp-grid .sp-rib b{font-size:21px}

  .sp-grid .sp-bd{padding:13px 14px;gap:8px}

  .sp-grid .sp-lg{flex:0 0 92px;height:42px}

  .sp-grid .sp-nm{font-size:15.5px}

  .sp-grid .sp-of{font-size:20px;line-height:1.2}

  /* The capsules, the figures and the payment row fold away so the second
     brand reaches the first screen. Pure CSS, no script. */
  .sp-grid .sp-tgl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    border-top:1px dashed var(--sp-line);
    padding-top:9px;
    margin-top:1px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--sp-pink);
  }

  .sp-grid .sp-tgl i{
    width:9px;
    height:9px;
    border-right:2px solid var(--sp-pink);
    border-bottom:2px solid var(--sp-pink);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s;
  }

  .sp-grid .sp-tglbox:checked ~ .sp-tgl i{transform:rotate(-135deg) translate(-3px,-3px)}

  .sp-grid .sp-tglbox:not(:checked) ~ .sp-chips,
  .sp-grid .sp-tglbox:not(:checked) ~ .sp-facts,
  .sp-grid .sp-tglbox:not(:checked) ~ .sp-specialfeat,
  .sp-grid .sp-tglbox:not(:checked) ~ .sp-promo,
  .sp-grid .sp-tglbox:not(:checked) ~ .sp-pay,
  .sp-grid .sp-tglbox:not(:checked) ~ .sp-rg{display:none}

  .sp-grid .sp-pn{
    grid-column:1 / -1;
    border-left:0;
    border-top:1px solid var(--sp-line);
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:12px 14px;
  }

  .sp-grid .sp-sc{font-size:30px;letter-spacing:-1px}
  .sp-grid .sp-sc small{font-size:14px}
  .sp-grid .sp-stars{order:2}
  .sp-grid .sp-sclab{display:none}
  .sp-grid .sp-btn{order:3;flex:1 1 140px;width:auto;padding:12px 10px}
  .sp-grid .sp-rev{order:4;flex:1 1 100%}

  .sp-grid .sp-upd{font-size:12.5px}
}

@media (max-width:420px){
  .sp-grid .sp-card{grid-template-columns:46px 1fr}
  .sp-grid .sp-rib b{font-size:18px}
  .sp-grid .sp-bd{padding:12px 12px}
  .sp-grid .sp-lg{flex:0 0 80px;height:38px}
  .sp-grid .sp-nm{font-size:14.5px}
  .sp-grid .sp-of{font-size:18px}
  .sp-grid .sp-btn{flex:1 1 120px}
}