/* =========================================================
   PGP v177 — Safe page sections matching the stable homepage
   Scope only: IQ Garages + Parts section pages. Homepage is untouched.
   ========================================================= */
:root{
  --pgp-v177-page-max:1680px;
  --pgp-v177-red:#ee154e;
  --pgp-v177-card:#111113;
  --pgp-v177-text:#050505;
  --pgp-v177-muted:#62666d;
  --pgp-v177-soft:#f7f5ef;
  --pgp-v177-border:rgba(238,21,78,.10);
  --pgp-v177-shadow:0 12px 30px rgba(0,0,0,.040),0 8px 20px rgba(0,0,0,.026);
}

/* same public rail as stable homepage, but only for non-home section pages */
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap){
  width:100%!important;
  max-width:var(--pgp-v177-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  padding-left:18px!important;
  padding-right:18px!important;
  background:transparent!important;
}
@media(max-width:768px){
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap){padding-left:20px!important;padding-right:20px!important;}
}

html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.iq-shell,.iq-list,.pgp-parts-shell,.pgp-part-list){
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  gap:18px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Section frame copied from the good homepage surface */
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-card,.iq-card,.pgp-iq-card,.pgp-part-card,.pgp-v177-home-card-section){
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:22px!important;
  border-radius:28px!important;
  border:1.5px solid var(--pgp-v177-border)!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  box-shadow:var(--pgp-v177-shadow)!important;
  color:var(--pgp-v177-text)!important;
  overflow:visible!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-card,.iq-card,.pgp-iq-card,.pgp-part-card)::before,
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-card,.iq-card,.pgp-iq-card,.pgp-part-card)::after,
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-scroll-wrap,.pgp-product-scroll-wrap,.pgp-most-scroll-wrap,.product-row,.pgp-product-row,.pgp-most-row)::before,
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-scroll-wrap,.pgp-product-scroll-wrap,.pgp-most-scroll-wrap,.product-row,.pgp-product-row,.pgp-most-row)::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  opacity:0!important;
}

html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-name,.garage-name-link,.garage-meta,.pgp-part-name,.pgp-part-meta,.pgp-parts-head h2,.pgp-parts-head p,.shop-row h3,.pgp-shop-row h3){
  color:var(--pgp-v177-text)!important;
  text-shadow:none!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-meta,.pgp-part-meta,.pgp-parts-head p){color:var(--pgp-v177-muted)!important;}

/* product row = homepage slider row */
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-scroll-wrap,.pgp-product-scroll-wrap,.pgp-most-scroll-wrap){
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-top:18px!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row){
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:12px!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 0 4px!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:transparent!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row)::-webkit-scrollbar{display:none!important;}

/* product cards = homepage compact card */
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row) > :is(.product-card,.pgp-product-card,.pgp-most-product,.pgp-v177-home-product){
  position:relative!important;
  flex:0 0 calc((100% - 48px)/5)!important;
  width:calc((100% - 48px)/5)!important;
  min-width:calc((100% - 48px)/5)!important;
  max-width:calc((100% - 48px)/5)!important;
  height:240px!important;
  min-height:240px!important;
  max-height:240px!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:var(--pgp-v177-card)!important;
  color:#fff!important;
  overflow:hidden!important;
  text-decoration:none!important;
  scroll-snap-align:start!important;
  box-shadow:none!important;
  aspect-ratio:auto!important;
  display:block!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row) > :is(.product-card,.pgp-product-card,.pgp-most-product,.pgp-v177-home-product):hover{
  transform:translateY(-4px)!important;
  border-color:rgba(243,20,78,.42)!important;
}

html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.04)!important;
  display:block!important;
  z-index:1!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media)::after{
  content:""!important;
  position:absolute!important;
  inset:45% 0 0!important;
  display:block!important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.74))!important;
  pointer-events:none!important;
  z-index:2!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media) img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  filter:none!important;
}

html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body){
  position:absolute!important;
  left:13px!important;
  right:54px!important;
  top:auto!important;
  bottom:13px!important;
  z-index:9!important;
  display:grid!important;
  gap:5px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#fff!important;
  pointer-events:none!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(strong,.product-name,.product-title,h4){
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  text-shadow:0 3px 10px rgba(0,0,0,.5)!important;
  margin:0!important;
  padding:0!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(span,.product-sub){
  display:-webkit-box!important;
  -webkit-line-clamp:1!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  color:rgba(255,255,255,.72)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
  margin:0!important;
  padding:0!important;
}

html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.price-tag,.pgp-price-tag,.pgp-most-price,.pgp-iq-price){
  position:absolute!important;
  top:8px!important;
  left:8px!important;
  right:auto!important;
  bottom:auto!important;
  z-index:12!important;
  min-height:22px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  border:0!important;
  background:rgba(0,0,0,.58)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  max-width:calc(100% - 18px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.view-tag,.pgp-view-tag,.pgp-card-condition-slot,.pgp-card-condition-badge,.condition-badge,.product-condition-badge){
  display:none!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.heart,.heart-btn,.pgp-heart,.fav-btn){
  position:absolute!important;
  right:8px!important;
  bottom:6px!important;
  left:auto!important;
  top:auto!important;
  z-index:22!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--pgp-v177-red)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:32px!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.heart,.heart-btn,.pgp-heart,.fav-btn) :is(span,svg,i,path){
  color:var(--pgp-v177-red)!important;
  fill:var(--pgp-v177-red)!important;
  stroke:var(--pgp-v177-red)!important;
}

/* grid button result: same math as homepage */
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row).pgp-view-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
  width:100%!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row).pgp-view-grid > :is(.product-card,.pgp-product-card,.pgp-most-product){
  flex:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) .pgp-view-shell:not(.pgp-row-active) > .pgp-view-arrow,
html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row).pgp-view-grid ~ :is(.pgp-row-arrow,.pgp-most-arrow){
  display:none!important;
}

@media(max-width:1100px){
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row) > :is(.product-card,.pgp-product-card,.pgp-most-product){
    flex-basis:calc((100% - 24px)/3)!important;
    width:calc((100% - 24px)/3)!important;
    min-width:calc((100% - 24px)/3)!important;
    max-width:calc((100% - 24px)/3)!important;
    height:218px!important;
    min-height:218px!important;
    max-height:218px!important;
  }
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row).pgp-view-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:768px){
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.garage-card,.iq-card,.pgp-iq-card,.pgp-part-card){
    padding:16px!important;
    border-radius:26px!important;
  }
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row){gap:8px!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row) > :is(.product-card,.pgp-product-card,.pgp-most-product){
    flex-basis:calc((100% - 16px)/3)!important;
    width:calc((100% - 16px)/3)!important;
    min-width:calc((100% - 16px)/3)!important;
    max-width:calc((100% - 16px)/3)!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
    border-radius:14px!important;
  }
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body){left:8px!important;right:44px!important;bottom:9px!important;gap:3px!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(strong,.product-name,.product-title,h4){font-size:9.4px!important;line-height:1.12!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(span,.product-sub){font-size:7.7px!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.price-tag,.pgp-price-tag,.pgp-most-price,.pgp-iq-price){top:6px!important;left:6px!important;min-height:20px!important;padding:0 6px!important;font-size:7px!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.heart,.heart-btn,.pgp-heart,.fav-btn){right:5px!important;bottom:3px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;font-size:29px!important;}
  html body :is(.iq-wrap,#iq-garages,.pgp-parts-wrap) :is(.product-row,.pgp-product-row,.pgp-most-row).pgp-view-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
}


/* =========================================================
   PGP v179 — safe fixes after v178
   1) Parts page only: put product name under image, not over it.
   2) Grid view: hide left/right slider arrows everywhere.
   3) Default after refresh remains slider via JS v179.
   ========================================================= */
html body .pgp-view-shell.pgp-grid-active > .pgp-view-arrow,
html body :is(.garage-card,.pgp-part-card,.pgp-iq-card,.pgp-part-section,.products-card,.store-card,.pgp-home-managed-section,.pgp-most-viewed-card,.pgp-shared-section-card,section,.iq-card,.home-section,.card):has(.pgp-view-grid) :is(.pgp-view-arrow,.pgp-row-arrow,.pgp-most-arrow,.pgp-slider-arrow,.product-arrow,.carousel-arrow,.slider-arrow,[data-pgp-arrow-dir],[data-pgp-unified-arrow]){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html body :is(.garage-card,.pgp-part-card,.pgp-iq-card,.pgp-part-section,.products-card,.store-card,.pgp-home-managed-section,.pgp-most-viewed-card,.pgp-shared-section-card,section,.iq-card,.home-section,.card):has(.pgp-view-grid) .pgp-section-view-tools :is([data-pgp-view-style],button),
html body :is(.garage-card,.pgp-part-card,.pgp-iq-card,.pgp-part-section,.products-card,.store-card,.pgp-home-managed-section,.pgp-most-viewed-card,.pgp-shared-section-card,section,.iq-card,.home-section,.card):has(.pgp-view-grid) :is(.pgp-section-view-btn,[data-pgp-view-style]){
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Parts cards: image top + text below. This is scoped to the parts page only,
   so IQ Garages keeps its current good overlay style. */
html body .pgp-parts-wrap :is(.product-row,.pgp-product-row,.pgp-most-row) > :is(.product-card,.pgp-product-card,.pgp-most-product,.pgp-v177-home-product){
  background:#fff!important;
  color:#050505!important;
  border:1px solid rgba(0,0,0,.13)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.045)!important;
  padding:0!important;
  overflow:hidden!important;
}
html body .pgp-parts-wrap :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media){
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:70%!important;
  min-height:70%!important;
  max-height:70%!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#f6f6f6!important;
  z-index:1!important;
  display:block!important;
}
html body .pgp-parts-wrap :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media)::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
html body .pgp-parts-wrap :is(.product-card,.pgp-product-card,.pgp-most-product) > :is(.product-media,.pgp-product-media,.pgp-most-media,.pgp-iq-card-media) img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
}
html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body){
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:4!important;
  width:100%!important;
  height:30%!important;
  min-height:30%!important;
  max-height:30%!important;
  box-sizing:border-box!important;
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
  padding:6px 44px 7px 8px!important;
  margin:0!important;
  background:#fff!important;
  color:#050505!important;
  pointer-events:none!important;
}
html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(strong,.product-name,.product-title,h4){
  color:#050505!important;
  text-shadow:none!important;
  font-size:11px!important;
  line-height:1.18!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  -webkit-line-clamp:2!important;
}
html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(span,.product-sub){
  color:rgba(0,0,0,.55)!important;
  text-shadow:none!important;
  font-size:8.5px!important;
  line-height:1.15!important;
  font-weight:800!important;
  -webkit-line-clamp:1!important;
}
html body .pgp-parts-wrap :is(.heart,.heart-btn,.pgp-heart,.fav-btn){
  z-index:25!important;
  right:5px!important;
  bottom:4px!important;
}
@media(max-width:768px){
  html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body){padding:4px 32px 5px 6px!important;gap:2px!important;}
  html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(strong,.product-name,.product-title,h4){font-size:8.3px!important;line-height:1.12!important;}
  html body .pgp-parts-wrap :is(.pgp-most-info,.pgp-iq-card-info,.pgp-v177-card-info,.product-body) :is(span,.product-sub){font-size:6.8px!important;}
}