/* =========================================================
   review-pages.css (FULL FILE - updated)
   Paste this whole thing to replace your current file.
   ========================================================= */

/* Landing page-specific (scoped so it won’t affect search page cards) */
.lp-shell { max-width: 980px; margin: 0 auto; }

/* MOBILE ONLY: stop cards overflowing the viewport */
@media (max-width: 700px){
  /* give the whole page some breathing room on mobile */
  .lp-shell{
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* make sure cards can never exceed the screen */
  .lp-shell .info-card{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* if intro_html contains long words/urls, force wrap */
  .lp-shell p,
  .lp-shell a,
  .lp-shell li,
  .lp-shell strong,
  .lp-shell code{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Brand */
.lp-brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none !important;
  color:var(--text-main) !important;
}
.lp-brand img{
  width:22px;height:22px;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(0,234,255,0.25));
}
.lp-brand span{font-weight:800;letter-spacing:.01em;}

/* Hero */
.lp-hero{padding:1.25rem 1.25rem 1.35rem;}
.lp-hero-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;
}
.lp-title{margin:.25rem 0;line-height:1.12;}
.lp-subline{
  margin:0;
  color:var(--text-muted) !important;
  font-size:.95rem;
  line-height:1.45;
}

/* Pills / section nav */
.lp-toc{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.85rem;
}
.lp-toc a{
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text-main) !important;
  padding:.4rem .7rem;
  border-radius:999px;
  font-weight:750;
  font-size:.9rem;
}
.lp-toc a:hover{
  border-color:rgba(0,234,255,.35);
  box-shadow:0 0 18px rgba(0,234,255,.12);
}

.lp-section{margin-top:1.05rem;}

/* Fine print */
.lp-fineprint{
  margin-top:.75rem;
  color:var(--text-muted) !important;
  font-size:.82rem;
  opacity:.95;
}

/* =========================================================
   Top picks carousel
   ========================================================= */
.lp-awards-wrap{
  position:relative;
  margin-top:.85rem;
}

.lp-awards{
  display:flex;
  gap:.85rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding:.15rem .15rem .35rem;
  margin-top:.85rem;
}
.lp-awards::-webkit-scrollbar{ height:0; }

.lp-award{
  flex:0 0 clamp(210px, 24vw, 250px);
  scroll-snap-align:start;

  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;

  padding:.85rem;
  display:flex;
  flex-direction:column;
  min-height: 320px;
}

.lp-award-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  margin-bottom:.6rem;
}

.lp-award-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.22rem .6rem;
  border-radius:999px;
  font-weight:950;
  font-size:.78rem;
  border:1px solid rgba(0,234,255,.35);
  background:rgba(0,234,255,.14);
  color:var(--text-main) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  white-space:nowrap;
}
.lp-award-pill--score{
  border:1px solid rgba(255,0,230,.35);
  background:rgba(255,0,230,.14);
}

.lp-award-media{
  position:relative;
  height:135px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  overflow:hidden;
  margin-bottom:.7rem;
  display:block;
}
.lp-award-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lp-award-rank{
  position:absolute;
  top:.55rem;
  left:.55rem;
  padding:.22rem .55rem;
  border-radius:999px;
  font-weight:950;
  font-size:.78rem;
  color:#05040a;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink));
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}

.lp-award-title{
  margin:0;
  font-size:0.98rem;
  font-weight:950;
  line-height:1.22;
  color:var(--text-main) !important;
  display:-webkit-box;
  line-clamp: 3;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lp-award-title a{ color:inherit; text-decoration:none; }
.lp-award-title a:hover{ text-decoration:underline; }

.lp-award-sub{
  margin:.45rem 0 0;
  color:var(--text-muted) !important;
  line-height:1.55;
  font-size:.93rem;
  display:-webkit-box;
  line-clamp:3;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lp-award-sub strong{
  display:block;
  margin: 0 0 .18rem 0;
  color: var(--text-main) !important;
}

.lp-award-cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;
  padding-top:.7rem;
}

/* When arrows are showing, pad the scroll track so buttons never cover cards */
.lp-awards-wrap.is-scrollable .lp-awards{
  padding-left: 3rem;
  padding-right: 3rem;
  scroll-padding-left: 3rem;
  scroll-padding-right: 3rem;
}

/* Arrows */
.lp-carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,26,.92);
  color:var(--text-main);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.lp-carousel-btn i{ font-size:1.25rem; }

.lp-carousel-btn:hover{
  border-color:rgba(0,234,255,.35);
  box-shadow:0 0 18px rgba(0,234,255,.14), 0 14px 30px rgba(0,0,0,.45);
}
.lp-carousel-btn:disabled{
  opacity:.35;
  cursor:default;
  box-shadow:none;
}

.lp-carousel-btn--prev{ left:-10px; }
.lp-carousel-btn--next{ right:-10px; }

/* Put arrows inside padded area when scrollable */
.lp-awards-wrap.is-scrollable .lp-carousel-btn--prev{ left: .5rem; }
.lp-awards-wrap.is-scrollable .lp-carousel-btn--next{ right: .5rem; }

@media (max-width: 520px){
  .lp-carousel-btn{ width:36px; height:36px; }
  .lp-carousel-btn--prev{ left:-4px; }
  .lp-carousel-btn--next{ right:-4px; }
}

/* MOBILE ONLY: keep carousel arrows inside the card */
@media (max-width: 700px){
  /* this is the <div class="info-card lp-section" id="top-picks"> */
  #top-picks{ overflow: visible; }

  /* force arrows to sit INSIDE the card edges */
  #top-picks .lp-carousel-btn--prev{ left: 10px !important; }
  #top-picks .lp-carousel-btn--next{ right: 10px !important; }

  /* make sure they sit above the cards */
  #top-picks .lp-carousel-btn{ z-index: 10; }
}

/* Only show arrows when it actually overflows */
.lp-awards-wrap:not(.is-scrollable) .lp-carousel-btn{ display:none; }

/* =========================================================
   Compare
   ========================================================= */
.lp-compare .table{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

.lp-compare thead th{
  color: rgba(255,255,255,.82) !important;
  font-weight: 900;
  letter-spacing: .01em;
  border-color: rgba(255,255,255,.10)!important;
}

.lp-compare th,
.lp-compare td{
  border-color: rgba(255,255,255,.10)!important;
}

.lp-compare td{
  color: rgba(255,255,255,.90) !important;
  vertical-align: middle;
  padding-top: .95rem;
  padding-bottom: .95rem;
}

.lp-compare a{
  color: rgba(255,255,255,.94) !important;
  text-decoration: underline;
  text-decoration-color: rgba(0,234,255,.35);
  text-underline-offset: 3px;
}
.lp-compare a:hover{
  text-decoration-color: rgba(0,234,255,.75);
}

.lp-compare .tag{ margin-left:.35rem; }

.lp-compare .table.is-hoverable tbody tr:hover{
  background: rgba(255,255,255,.035) !important;
}

.lp-compare .c-num{ font-weight: 950; color: rgba(255,255,255,.93); white-space: nowrap; }
.lp-compare .c-price{ font-weight: 950; color: rgba(255,255,255,.96); white-space: nowrap; }
.lp-compare .c-score{ font-weight: 950; color: rgba(255,255,255,.88); white-space: nowrap; }
.lp-compare .c-rating{ white-space: nowrap; }
.lp-compare .c-reviews{ color: rgba(255,255,255,.76); white-space: nowrap; }
.lp-compare .c-bestfor{ color: rgba(255,255,255,.82); }

.lp-compare .star{
  display:inline-block;
  margin-right:.22rem;
  color: rgba(255,210,80,.95);
  transform: translateY(-1px);
}

/* Desktop table vs mobile list */
.lp-compare-mobile{ display:none; }
@media (max-width: 700px){
  .lp-compare-table{ display:none; }
  .lp-compare-mobile{ display:block; }
}

/* Mobile compare cards */
.lp-compare-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  padding:.9rem;
  margin-top:.65rem;
}

.lp-compare-row1{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.lp-compare-left{ min-width:0; }

.lp-compare-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .55rem;
  border-radius:999px;
  font-weight:950;
  font-size:.82rem;
  color:#05040a;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink));
  margin-bottom:.45rem;
}

.lp-compare-title{
  margin:0;
  font-weight:950;
  line-height:1.25;
  font-size:1rem;
}
.lp-compare-title a{ color: rgba(255,255,255,.95) !important; }

.lp-compare-bestfor{
  margin:.35rem 0 0;
  color: rgba(255,255,255,.74);
  line-height:1.45;
  font-size:.92rem;
}

.lp-compare-right{
  text-align:right;
  white-space:nowrap;
}
.lp-compare-right .price{
  font-weight:950;
  font-size:1.02rem;
  color: rgba(255,255,255,.96);
}
.lp-compare-right .meta{
  margin-top:.3rem;
  color: rgba(255,255,255,.82);
  font-weight:850;
}
.lp-compare-right .meta small{
  display:block;
  margin-top:.15rem;
  color: rgba(255,255,255,.70);
  font-weight:700;
}
.lp-compare-right .meta small.score{
  color: rgba(255,255,255,.80);
}

/* Under-table: 2 mini cards */
.lp-compare-under{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items:start;
}
@media (max-width: 900px){
  .lp-compare-under{ grid-template-columns: 1fr; }
}

.lp-mini-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  padding:1rem 1.05rem;
}

.lp-mini-title{
  margin:0 0 .7rem;
  font-weight:950;
  color: rgba(255,255,255,.90);
  font-size:1.02rem;
  letter-spacing:.01em;
}

.lp-mini-muted{
  color: rgba(255,255,255,.70);
  line-height:1.55;
}

/* Metrics list */
.lp-metric-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
}
.lp-metric-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem .65rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}
.lp-metric-list .k{
  font-weight:900;
  color: rgba(255,255,255,.88);
}
.lp-metric-list .v{
  font-weight:900;
  color: rgba(255,255,255,.78);
  white-space:nowrap;
}

/* TLDR list */
.lp-note-list{
  margin:0;
  padding-left: 1.15rem;
}
.lp-note-list li{
  margin:.38rem 0;
  color: rgba(255,255,255,.78);
  line-height:1.55;
}

/* =========================================================
   OLD "Full list" cards (kept in case you still use them)
   ========================================================= */
.lp-products{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin:0;padding:0;
  list-style:none;
}

.lp-product{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;
}

/* Desktop list card */
.lp-product-inner{
  display:grid;
  grid-template-columns: 200px minmax(0, 1fr) 250px;
  grid-template-areas:
    "img badge  cta"
    "img title  cta"
    "img meta   cta"
    "img summary cta"
    "img quick  cta";
  gap:.65rem 1rem;
  padding:1rem;
  align-items:start;
}

.lp-img{grid-area:img;}
.lp-desktop-badge{grid-area:badge;}
.lp-titleline{grid-area:title;}
.lp-meta{grid-area:meta;}
.lp-summary{grid-area:summary;}
.lp-quick{grid-area:quick;}
.lp-product-cta{grid-area:cta;}

.lp-img{
  width:100%;
  height:150px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  overflow:hidden;
  position:relative;
}
.lp-img img{width:100%;height:100%;object-fit:cover;display:block;}

.lp-rank{
  position:absolute;top:10px;left:10px;
  padding:.22rem .55rem;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  color:#05040a;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink));
  box-shadow:0 0 16px rgba(0,234,255,.25);
}

.lp-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(0,234,255,.20);
  background:rgba(0,234,255,.08);
  color:var(--text-main) !important;
  font-weight:950;
  font-size:.82rem;
  margin:0;
  width:fit-content;
}

.lp-titleline{
  margin:0;
  color:var(--text-main) !important;
  font-size:1.12rem;
  font-weight:950;
  line-height:1.28;
  letter-spacing:.01em;
  min-width:0;
}

.lp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .65rem;
  align-items:center;
  margin:0;
  color:var(--text-muted) !important;
  font-size:.92rem;
  line-height:1.35;
}
.lp-dot{opacity:.55;}
.lp-price{color:var(--text-main) !important;font-weight:950;}

.lp-summary{
  margin:.15rem 0 0;
  color:var(--text-muted) !important;
  line-height:1.68;
  font-size:.98rem;
  max-width:72ch;
}

.lp-quick{
  margin-top:.15rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .6rem;
  align-items:center;
  color:var(--text-muted) !important;
  font-size:.92rem;
  line-height:1.35;
}
.lp-quick strong{color:var(--text-main); font-weight:950;}
.lp-quick ul{margin:.35rem 0 0; padding-left:1.1rem;}
.lp-quick li{margin:.15rem 0;}

/* CTA (old list): bottom aligned + divider between subtext and breakdown */
.lp-product-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:.45rem;
  align-self:stretch;
  padding-top:.1rem;
}

.lp-cta-btn{
  border-radius:999px !important;
  font-weight:950 !important;
  padding:.7rem 1.15rem !important;
  white-space:nowrap;
}

.lp-cta-sub{
  margin:0;
  font-size:.82rem;
  color:var(--text-muted) !important;
  text-align:right;
}

/* ONE (and only one) details link rule */
.lp-details-link{
  display:inline-flex;
  gap:0.35rem;
  align-items:center;
  justify-content:flex-end;
  width:auto;
  margin-top:.8rem;
  padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,0.78);
  font-size:0.92rem;
  text-decoration:none;
}
.lp-details-link:hover{color:#fff; text-decoration:underline;}

/* Mobile-only pieces for old list */
.lp-m-toprow, .lp-stars, .lp-price-row{display:none;}
.lp-desktop-only{display:block;}

.lp-chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:.45rem .7rem;
  font-weight:950;
  font-size:.85rem;
  color:var(--text-main) !important;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  line-height:1.1;
  white-space:nowrap;
}
.lp-chip--badge{
  border-color:rgba(0,234,255,.22);
  background:rgba(0,234,255,.08);
}
.lp-chip--score{
  border-color:rgba(255,0,230,.20);
  background:rgba(255,0,230,.07);
}

@media (max-width: 1020px) and (min-width: 701px){
  .lp-product-inner{
    grid-template-columns: 170px minmax(0, 1fr) 230px;
    gap:.6rem .9rem;
    padding:.95rem;
  }
  .lp-img{height:135px;}
  .lp-titleline{font-size:1.08rem;}
}

/* Mobile: stack everything (FIXED) */
@media (max-width:700px){

  /* Ensure nothing can overflow the card width */
  .lp-pick-details,
  .lp-pick-summary,
  .lp-pick-cta,
  .lp-cta-row,
  .lp-pick-main{
    min-width: 0;
    max-width: 100%;
  }

  .lp-pick-summary{
    grid-template-columns: 1fr;
    gap: .85rem;
    padding: 1.05rem;
  }

  .lp-pick-media{ height: 220px; }

  /* Pills wrap properly on small screens */
  .lp-pick-pills{
    flex-wrap: wrap;
    row-gap: .45rem;
  }

  /* Title: stop weird overflow */
  .lp-pick-title{
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Meta row: make it a clean 2-row grid instead of “dots + wrap mess” */
  .lp-pick-meta{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .6rem;
    row-gap: .25rem;
    align-items: baseline;
  }
  .lp-pick-meta .lp-dot{ display:none; }
  .lp-pick-meta .lp-price{ grid-column: 1; }
  .lp-pick-meta .lp-pick-rating{ grid-column: 2; justify-self:end; white-space: nowrap; }
  .lp-pick-meta .lp-pick-reviews{ grid-column: 1 / -1; }
  .lp-pick-meta .lp-pick-bestfor{ display:none; } /* avoid duplication + overflow */

  /* CTA: force stack + prevent width+padding overflow + allow wrapping */
  .lp-pick-cta{
    width: 100%;
    align-items: stretch !important;
    justify-content: flex-start;
  }

  /* IMPORTANT: other CSS may be making .lp-cta-row flex — kill it on mobile */
  .lp-cta-row{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .lp-pick-cta .lp-cta-btn{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* This fixes the “Check price on…” getting cut off */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    /* Bulma buttons are often inline-flex; keep centered + wrap */
    display: flex !important;
    justify-content: center;
    text-align: center;

    /* slightly less horizontal padding so it never clips */
    padding: .85rem .9rem !important;
    line-height: 1.15;
    font-size: 1.02rem;
  }

  .lp-pick-cta .lp-cta-sub{
    text-align: center;
    margin-top: .35rem;
  }

  /* Keep “Read the breakdown” centered AND visually separated */
  .lp-pick-summary > .lp-expand-hint{
    width: 100%;
    display:flex;
    justify-content:center;
    text-align:center;

    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .lp-expand-hint{
    border-top: 0;     /* avoid double borders */
    padding-top: 0;
    margin-top: 0;
  }
}



@media (max-width:420px){
  .lp-title{font-size:1.55rem;}
  .lp-titleline{font-size:1.08rem;}
  .lp-summary{font-size:.97rem;}
  .lp-img{height:200px;}
}

/* =========================================================
   Longform / review-style blocks
   ========================================================= */
.lp-bullets{margin:0.65rem 0 0; padding-left: 1.15rem;}
.lp-bullets li{margin:0.25rem 0; color: var(--text, #fff);}

.lp-deep{padding:0.85rem 0; border-top:1px solid rgba(255,255,255,0.08);}
.lp-deep:first-child{border-top:0; padding-top:0.25rem;}
.lp-deep-title{font-size:1.08rem; font-weight:950; margin:0.2rem 0 0.45rem;}

.lp-kv{display:flex; flex-wrap:wrap; gap:0.45rem; margin:0.35rem 0 0.25rem;}
.lp-kv .tag{background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.85);}

.lp-procon{display:grid; grid-template-columns: 1fr; gap:0.75rem; margin-top:0.55rem;}
@media (min-width: 900px){ .lp-procon{grid-template-columns: 1fr 1fr;} }
.lp-procon h4{margin:0 0 0.35rem; font-size:0.95rem; color: var(--text-muted); font-weight:900;}
.lp-procon ul{margin:0; padding-left:1.1rem;}
.lp-procon li{margin:0.18rem 0;}

/* =========================================================
   Ranked picks (combined list + in-depth) - your new layout
   ========================================================= */
.lp-picks{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.lp-pick-details{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  overflow:hidden;
}

/* Summary row (the clickable header) */
.lp-pick-summary{
  display:grid;
  grid-template-columns: 230px minmax(0,1fr) 260px;
  gap: 1rem;
  padding: 1rem;
  align-items:start;
  cursor:pointer;
  list-style:none;
}
.lp-pick-summary::-webkit-details-marker{ display:none; }

.lp-pick-media{
  position:relative;
  width:100%;
  height: 175px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  overflow:hidden;
}
.lp-pick-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lp-pick-rank{
  position:absolute;
  top:10px; left:10px;
  padding:.22rem .55rem;
  border-radius:999px;
  font-weight:950;
  font-size:.82rem;
  color:#05040a;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-pink));
  box-shadow:0 0 16px rgba(0,234,255,.25);
}

.lp-pick-main{ min-width:0; }

.lp-pick-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.55rem;
}

.lp-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.24rem .6rem;
  border-radius:999px;
  font-weight:950;
  font-size:.82rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text-main) !important;
  white-space:nowrap;
}
.lp-pill--award{
  border-color:rgba(0,234,255,.25);
  background:rgba(0,234,255,.10);
}
.lp-pill--score{
  border-color:rgba(255,0,230,.22);
  background:rgba(255,0,230,.08);
}
.lp-pill--prime{
  border-color:rgba(0,180,255,.20);
  background:rgba(0,180,255,.07);
}

.lp-pick-title{
  margin:0;
  color:var(--text-main) !important;
  font-size:1.12rem;
  font-weight:950;
  line-height:1.25;
  letter-spacing:.01em;
}

.lp-pick-meta{
  margin-top:.35rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .55rem;
  align-items:center;
  color:var(--text-muted) !important;
  font-size:.92rem;
  line-height:1.35;
}
.lp-pick-meta .lp-price{ color:var(--text-main) !important; font-weight:950; }

.lp-pick-blurb{
  margin-top:.55rem;
  color:var(--text-muted) !important;
  line-height:1.62;
  font-size:.98rem;
  max-width: 80ch;
}

/* RIGHT COLUMN */
.lp-pick-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:.45rem;
  align-self:stretch;
  padding-top:.15rem;
}
.lp-pick-cta .lp-cta-sub{ text-align:right; }

/* Read the breakdown (CENTERED + full width) */
.lp-expand-hint{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;

  margin-top:.85rem;
  padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  font-weight:800;
  font-size:.92rem;
  gap:.35rem;
}

/* Expanded body */
.lp-pick-body{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 0.95rem 1rem 1rem;
}

.lp-pick-subhead{
  margin-top:.85rem;
  margin-bottom:.35rem;
  color: var(--text-muted);
  font-weight:950;
  letter-spacing:.01em;
}

.lp-pick-rich p{ margin-top:.45rem; }

.lp-pick-body-cta{
  display:flex;
  justify-content:flex-end;
  margin-top:.85rem; 
}

/* Tablet-only pieces default OFF (mobile + old desktop) */
.lp-pick-bestfor-line,
.lp-pick-ratingline,
.lp-cta-price { display:none; }

/* Make expand hint a real grid item spanning full width */
.lp-pick-summary > .lp-expand-hint{
  grid-column: 1 / -1;
  justify-self: stretch;
}

/* =========================================================
   THIS IS THE FIX:
   Apply your EXACT tablet styling for BOTH Tablet + PC
   (so PC matches the screenshot too)
   ========================================================= */
@media (min-width: 701px){

  /* 2-column layout (same as your tablet screenshot) */
  .lp-pick-summary{
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;

    grid-template-areas:
      "media main"
      "media cta"
      "expand expand";
  }

  .lp-pick-media{ grid-area: media; height: 190px; }
  .lp-pick-main{ grid-area: main; }
  .lp-pick-cta{ grid-area: cta; }

  /* Under title should just be Best for (hide meta row entirely) */
  .lp-pick-meta{ display:none; }

  /* Match tablet: cyan title */
  .lp-pick-title{
    color: rgba(0,234,255,.92) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }

  /* Show best-for line under title */
  .lp-pick-bestfor-line{
    display:block;
    margin-top:.35rem;
    font-weight:950;
    color: var(--text-main) !important;
    opacity:.92;
    letter-spacing:.01em;
  }

  /* Show rating line under description (yellow) */
  .lp-pick-ratingline{
    display:block;
    margin-top:.55rem;
    font-weight:900;
    font-size:.98rem;
    line-height:1.25;
  }

  .lp-pick-ratingline,
  .lp-pick-ratingline .star{
    color: rgba(255,210,80,.95);
  }
  .lp-pick-ratingline .sep{
    color: rgba(255,255,255,.55);
    margin: 0 .45rem;
  }

  /* CTA block top-aligned like tablet */
  .lp-pick-cta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;
    gap:.18rem;
    padding-top:.25rem;
  }

  /* price left of button (tablet screenshot) */
  .lp-cta-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.75rem;
    width:100%;
  }

  .lp-cta-price{
    display:inline-block;
    font-weight:950;
    white-space:nowrap;
  }

  /* Button size like tablet */
  .lp-pick-summary .lp-cta-btn{
    width:auto;
    padding:.58rem 1.05rem !important;
    font-size:.98rem !important;
  }

  .lp-pick-summary .lp-cta-sub{
    margin: .15rem 0 0;
    text-align:right;
    line-height:1.2;
  }

  /* Keep "Read the breakdown" centered and full width */
  .lp-pick-summary .lp-expand-hint{
    grid-area: expand;
    justify-self: stretch;
    width: 100%;
    justify-content: center;
    text-align: center;

    margin-top: .75rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }
}

/* Mobile: stack everything */
@media (max-width:700px){
  .lp-pick-summary{
    grid-template-columns: 1fr;
    gap:.85rem;
    padding:1.05rem;
  }

  .lp-pick-media{ height:220px; }

  .lp-pick-cta{
    align-items:stretch;
    justify-content:flex-start;
  }

  .lp-pick-cta .lp-cta-btn{
    width:100%;
    justify-content:center;
    white-space:normal;
    line-height:1.2;
    padding:.85rem 1.05rem !important;
    font-size:1.05rem;
  }

  .lp-pick-cta .lp-cta-sub{ text-align:center; }

  .lp-expand-hint{
    justify-content:center;
    text-align:center;
    border-top:0;
    padding-top:0;
    margin-top:.45rem;
  }
}

/* =========================================================
   4-block grid inside expanded area
   ========================================================= */
.lp-pick-panels{
  margin-top: .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;

  column-gap: 1rem;
  row-gap: 1rem;

  align-items: stretch;
}

.lp-pick-panel{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: .95rem 1rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
}

.lp-pick-panel-title{
  margin: 0 0 .55rem;
  font-weight: 950;
  color: rgba(255,255,255,.88);
  letter-spacing: .01em;
}

.lp-pick-list{
  margin: 0;
  padding-left: 1.15rem;
}
.lp-pick-list li{
  margin: .28rem 0;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

@media (max-width: 700px){
  .lp-pick-panels{
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}

/* =========================================================
   Top picks: make cards wider on MOBILE + TABLET only
   Desktop stays exactly as-is
   ========================================================= */

/* mobile */
@media (max-width: 700px){
  .lp-award{
    flex: 0 0 clamp(270px, 78vw, 340px);
  }
}
/* tablet */
@media (min-width: 701px) and (max-width: 1020px){
  .lp-award{
    flex: 0 0 clamp(270px, 30vw, 325px);
  }
}

/* =========================================================
   GLOBAL Carousel arrow visibility (PC + tablet + mobile)
   Put this at the VERY BOTTOM of review-pages.css
   ========================================================= */

.lp-carousel-btn{
  /* thicker + clearer edge */
  border: 2px solid rgba(0,234,255,.45) !important;

  /* slightly darker button so it pops off card */
  background: rgba(8,10,22,.94) !important;
  color: var(--text-main) !important;

  /* add an inner ring + stronger glow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(0,234,255,.18),
    0 14px 30px rgba(0,0,0,.50) !important;

  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.lp-carousel-btn i{
  /* brighter icon */
  filter: drop-shadow(0 0 14px rgba(0,234,255,.26));
}

.lp-carousel-btn:hover{
  border-color: rgba(0,234,255,.70) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 34px rgba(0,234,255,.30),
    0 0 70px rgba(0,234,255,.18),
    0 16px 36px rgba(0,0,0,.55) !important;

  transform: translateY(-50%) scale(1.05);
}

.lp-carousel-btn:active{
  border-color: rgba(0,234,255,.85) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 40px rgba(0,234,255,.34),
    0 0 85px rgba(0,234,255,.20),
    0 16px 36px rgba(0,0,0,.55) !important;

  transform: translateY(-50%) scale(1.03);
}

.lp-carousel-btn:disabled{
  opacity: .35 !important;
  cursor: default !important;
  border: 2px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 14px 30px rgba(0,0,0,.25) !important;
  transform: translateY(-50%) !important;
}

/* ---- Landing page media fit (portrait + landscape) ---- */
.lp-award-media,
.lp-img,
.lp-pick-media{
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}

/* blurred fill behind the real image (uses --img set from data-img) */
.lp-award-media::before,
.lp-img::before,
.lp-pick-media::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.15);
  opacity: 0.35;
  pointer-events: none;
}

/* ensure overlay pills stay above the image */
.lp-award-rank,
.lp-rank,
.lp-pick-rank{
  z-index: 2;
}

.lp-award-media img,
.lp-img img,
.lp-pick-media img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* default (keeps bedding-looking pages the same) */
  display: block;
}

/* portrait / extreme-wide: show full image */
.lp-media--contain img{
  object-fit: contain;
}