/* =========================================================
   PGP v231 — Precise no-blue fix WITHOUT changing Liked layout
   - Following first paint: white
   - Liket/Saved first paint: original dark background (#151514)
   - Does NOT force saved product cards to white
   - Bottom nav frame: black 60%
   ========================================================= */

html body.pgp-page-following,
html body:has(.following-wrap),
html body:has(.following-hero){
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
}

html body.pgp-page-liked,
html body.pgp-page-saved,
html body:has(.saved-wrap),
html body:has(.saved-hero){
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
}

/* Only fix the old blue follow ring. No layout/background changes to product cards. */
html body :is(.following-wrap,.saved-wrap) :is(
  .pgp-garage-follow-ring-target,
  img.pgp-garage-follow-ring-target,
  .pgp-v68-garage-avatar,
  .garage-logo img,
  .pgp-garage-is-following img,
  .pgp-garage-is-following .pgp-garage-follow-ring-target
){
  outline-color:#ee154e!important;
  box-shadow:
    0 0 0 2.5px #ee154e,
    0 0 0 5.5px rgba(238,21,78,.14),
    0 8px 18px rgba(238,21,78,.16)!important;
}

html body :is(.following-wrap,.saved-wrap) [style*="#0d67fd"],
html body :is(.following-wrap,.saved-wrap) [style*="13,103,253"]{
  outline-color:#ee154e!important;
  box-shadow:
    0 0 0 2.5px #ee154e,
    0 0 0 5.5px rgba(238,21,78,.14),
    0 8px 18px rgba(238,21,78,.16)!important;
}

/* Prevent the saved products from jumping: paint as row/slider from first render. */
html body .saved-wrap .saved-grid:not(.pgp-view-grid){
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:18px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:0 12px 10px!important;
  box-sizing:border-box!important;
}
html body .saved-wrap .saved-grid:not(.pgp-view-grid)::-webkit-scrollbar{display:none!important;}
html body .saved-wrap .saved-grid:not(.pgp-view-grid) > .product-card{
  flex:0 0 clamp(220px,27vw,340px)!important;
  width:clamp(220px,27vw,340px)!important;
  min-width:clamp(220px,27vw,340px)!important;
  max-width:340px!important;
  scroll-snap-align:start!important;
}
@media(max-width:640px){
  html body .saved-wrap .saved-grid:not(.pgp-view-grid){
    gap:12px!important;
    padding:0 6px 10px!important;
  }
  html body .saved-wrap .saved-grid:not(.pgp-view-grid) > .product-card{
    flex-basis:calc((100% - 12px)/2)!important;
    width:calc((100% - 12px)/2)!important;
    min-width:calc((100% - 12px)/2)!important;
    max-width:calc((100% - 12px)/2)!important;
  }
}

/* Ensure saved page arrows are visible when row/slider mode is active. */
html body .saved-wrap .pgp-view-shell{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html body .saved-wrap .pgp-view-shell > .pgp-view-arrow{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:20!important;
  width:46px!important;
  height:46px!important;
  border-radius:999px!important;
  border:0!important;
  background:rgba(20,20,20,.88)!important;
  color:#fff!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:32px!important;
  font-weight:900!important;
  line-height:1!important;
}
html body .saved-wrap .pgp-view-shell > .pgp-view-arrow-left{left:8px!important;}
html body .saved-wrap .pgp-view-shell > .pgp-view-arrow-right{right:8px!important;}

/* Bottom nav black 60% frame */
html body .tc-bottom-bar,
html body .pgp-bottom-nav{
  border-color:rgba(0,0,0,.60)!important;
  border:1px solid rgba(0,0,0,.60)!important;
}
html body .tc-bottom-bar::after,
html body .pgp-bottom-nav::after{
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.60) 18%, rgba(0,0,0,.60) 82%, rgba(0,0,0,0) 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 20%, rgba(0,0,0,.38) 80%, rgba(0,0,0,0) 100%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 20%, rgba(0,0,0,.34) 80%, rgba(0,0,0,0) 100%) left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 20%, rgba(0,0,0,.34) 80%, rgba(0,0,0,0) 100%) right / 1px 100% no-repeat!important;
}