/* =========================================================
   PGP v165 — Shared Home/IQ Layout Master
   - Same public page rail as homepage
   - IQ Garages cards use the same compact product card style as homepage
   - No black outside frame around IQ Garages page
   - Grid/slider states are CSS-safe
   ========================================================= */
:root{
  --pgp-master-max:1680px;
  --pgp-master-pad:18px;
  --pgp-master-pad-mobile:20px;
  --pgp-red:#ee154e;
  --pgp-card-dark:#111113;
  --pgp-page-soft:#f7f5ef;
  --pgp-card-border:rgba(0,0,0,.12);
  --pgp-section-border:rgba(238,21,78,.10);
  --pgp-section-shadow:0 12px 30px rgba(0,0,0,.040),0 8px 20px rgba(0,0,0,.026);
}

/* Keep all public pages on the same rail as homepage. */
html body :is(#home,.iq-wrap,#iq-garages,.store-wrap,.pgp-page,.pgp-products-page,.pgp-garages-page,.pgp-parts-page,.pgp-content,.pgp-main){
  width:100%!important;
  max-width:var(--pgp-master-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
html body :is(.iq-wrap,#iq-garages,.store-wrap,.pgp-page,.pgp-products-page,.pgp-garages-page,.pgp-parts-page){
  padding-left:var(--pgp-master-pad)!important;
  padding-right:var(--pgp-master-pad)!important;
}
@media(max-width:768px){
  html body :is(.iq-wrap,#iq-garages,.store-wrap,.pgp-page,.pgp-products-page,.pgp-garages-page,.pgp-parts-page){
    padding-left:var(--pgp-master-pad-mobile)!important;
    padding-right:var(--pgp-master-pad-mobile)!important;
  }
}

/* IQ page must not inherit the black/dark canvas from older page shells. */
html:has(.iq-wrap),
html:has(#iq-garages),
html body:has(.iq-wrap),
html body:has(#iq-garages){
  background:var(--pgp-page-soft)!important;
  background-color:var(--pgp-page-soft)!important;
  background-image:none!important;
}
html body :is(.iq-wrap,#iq-garages,.iq-shell,.iq-list,.product-scroll-wrap,.pgp-view-shell,.product-row,.pgp-most-scroll-wrap,.pgp-shared-scroll){
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
}
html body :is(.iq-wrap,#iq-garages) :is(.iq-shell,.iq-list){
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border:0!important;
  padding:0!important;
}
html body :is(.iq-wrap,#iq-garages) :is(.iq-shell,.iq-list)::before,
html body :is(.iq-wrap,#iq-garages) :is(.iq-shell,.iq-list)::after,
html body :is(.iq-wrap,#iq-garages) :is(.product-scroll-wrap,.pgp-view-shell,.product-row)::before,
html body :is(.iq-wrap,#iq-garages) :is(.product-scroll-wrap,.pgp-view-shell,.product-row)::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* IQ section frame = homepage section width, white card, no black frame. */
html body :is(.iq-wrap,#iq-garages) .iq-list > :is(.garage-card,.iq-card),
html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card).pgp-shared-section-card,
html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card).pgp-most-viewed-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#050505!important;
  border:1.5px solid var(--pgp-section-border)!important;
  border-radius:28px!important;
  box-shadow:var(--pgp-section-shadow)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  padding:22px!important;
}
html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card)::before,
html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card)::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
}
html body :is(.iq-wrap,#iq-garages) :is(.garage-name,.garage-name-link,.garage-meta,.shop-row h3){
  color:#050505!important;
  text-shadow:none!important;
}
html body :is(.iq-wrap,#iq-garages) .garage-meta{color:#5f6369!important;}

/* Remove compact condition badges (New/Used) from all small cards only. Product detail page can keep its dedicated condition field. */
html body :is(.pgp-most-product,.product-card,.pgp-product-card,.pgp-product,.pgp-related-card,.following-card .product-card) :is(.view-tag.pgp-card-condition-slot,.pgp-card-condition-slot,.pgp-card-condition-badge,.condition-badge,.product-condition-badge){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Remove old automatic duplicate product title created by older layout-toggle builds. */
html body :is(#home,.iq-wrap,#iq-garages) .pgp-auto-card-title{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* IQ product cards use the same visual system as homepage compact cards. */
html body :is(.iq-wrap,#iq-garages) .product-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;
  box-sizing:border-box!important;
}
html body :is(.iq-wrap,#iq-garages) .product-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;
}
html body :is(.iq-wrap,#iq-garages) .product-row::-webkit-scrollbar{display:none!important;}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-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-card-dark)!important;
  background-color:var(--pgp-card-dark)!important;
  color:#fff!important;
  overflow:hidden!important;
  text-decoration:none!important;
  scroll-snap-align:start!important;
  box-shadow:none!important;
  transform:none!important;
  transition:transform .18s ease,border-color .18s ease!important;
  aspect-ratio:auto!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card:hover,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(243,20,78,.42)!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card::before,
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card::after,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product::before,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.product-media,.pgp-most-media,.pgp-iq-card-media),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.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) .product-row > .product-card > :is(.product-media,.pgp-most-media,.pgp-iq-card-media)::after,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.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;
  opacity:1!important;
  z-index:2!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.product-media,.pgp-most-media,.pgp-iq-card-media) img,
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.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;
  transform:none!important;
  filter:none!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body){
  position:absolute!important;
  left:13px!important;
  right:13px!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;
  text-shadow:none!important;
  pointer-events:none!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body) :is(strong,.product-name,.product-title,h4),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-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) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body) :is(span,.product-sub),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-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;
  text-shadow:none!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.price-tag,.pgp-most-price,.pgp-iq-price),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.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;
  height:auto!important;
  max-height:none!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;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:calc(100% - 18px)!important;
  pointer-events:none!important;
}
html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.heart,.heart-btn,.pgp-heart,.fav-btn),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :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;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--pgp-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) .product-row > .product-card > :is(.heart,.heart-btn,.pgp-heart,.fav-btn) :is(span,svg,i,path),
html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.heart,.heart-btn,.pgp-heart,.fav-btn) :is(span,svg,i,path){
  color:var(--pgp-red)!important;
  fill:var(--pgp-red)!important;
  stroke:var(--pgp-red)!important;
  opacity:1!important;
}

/* Generic grid/row states, kept late so the buttons visibly change. */
html body :is(.pgp-view-row.product-row,.pgp-view-row.pgp-product-row,.pgp-view-row.products-grid,.pgp-view-row.pgp-products,.pgp-view-row.garage-products){
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
}
html body :is(.pgp-view-grid.product-row,.pgp-view-grid.pgp-product-row,.pgp-view-grid.products-grid,.pgp-view-grid.pgp-products,.pgp-view-grid.garage-products){
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  overflow:visible!important;
  overflow-x:visible!important;
  scroll-snap-type:none!important;
  width:100%!important;
}
html body :is(.pgp-view-grid.product-row,.pgp-view-grid.pgp-product-row,.pgp-view-grid.products-grid,.pgp-view-grid.pgp-products,.pgp-view-grid.garage-products) > *{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:initial!important;
}
html body .pgp-view-shell:not(.pgp-row-active) > .pgp-view-arrow{display:none!important;visibility:hidden!important;}
html body .pgp-view-shell.pgp-row-active > .pgp-view-arrow{display:flex!important;visibility:visible!important;}

/* Homepage grid/row buttons: override any stale inline row style from old JS. */
html body #home .pgp-most-viewed-card.pgp-home-grid-mode .pgp-most-row,
html body #home .pgp-home-managed-section.pgp-home-grid-mode .pgp-most-row,
html body #home .pgp-most-row.pgp-home-force-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:visible!important;
  overflow-x:visible!important;
  gap:12px!important;
  padding-bottom:0!important;
  scroll-snap-type:none!important;
}
html body #home .pgp-most-viewed-card.pgp-home-grid-mode .pgp-most-product,
html body #home .pgp-home-managed-section.pgp-home-grid-mode .pgp-most-product,
html body #home .pgp-most-row.pgp-home-force-grid > .pgp-most-product{
  flex:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
html body #home .pgp-most-viewed-card.pgp-home-grid-mode .pgp-most-arrow,
html body #home .pgp-home-managed-section.pgp-home-grid-mode .pgp-most-arrow{display:none!important;}

@media(max-width:1100px){
  html body :is(.iq-wrap,#iq-garages) .product-row > .product-card,
  html body :is(.iq-wrap,#iq-garages) .product-row > .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;
  }
  html body :is(.pgp-view-grid.product-row,.pgp-view-grid.pgp-product-row,.pgp-view-grid.products-grid,.pgp-view-grid.pgp-products,.pgp-view-grid.garage-products),
  html body #home .pgp-most-viewed-card.pgp-home-grid-mode .pgp-most-row,
  html body #home .pgp-home-managed-section.pgp-home-grid-mode .pgp-most-row,
  html body #home .pgp-most-row.pgp-home-force-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:768px){
  html body :is(.iq-wrap,#iq-garages) .iq-list > :is(.garage-card,.iq-card),
  html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card).pgp-shared-section-card,
  html body :is(.iq-wrap,#iq-garages) :is(.garage-card,.iq-card).pgp-most-viewed-card{
    padding:16px!important;
    border-radius:26px!important;
  }
  html body :is(.iq-wrap,#iq-garages) .product-row{gap:8px!important;}
  html body :is(.iq-wrap,#iq-garages) .product-row > .product-card,
  html body :is(.iq-wrap,#iq-garages) .product-row > .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) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body),
  html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body){
    left:8px!important;
    right:8px!important;
    bottom:9px!important;
    gap:3px!important;
  }
  html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body) :is(strong,.product-name,.product-title,h4),
  html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-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) .product-row > .product-card > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body) :is(span,.product-sub),
  html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.pgp-most-info,.pgp-iq-card-info,.product-body,.pgp-iq-product-body) :is(span,.product-sub){
    font-size:7.7px!important;
  }
  html body :is(.iq-wrap,#iq-garages) .product-row > .product-card > :is(.price-tag,.pgp-most-price,.pgp-iq-price),
  html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :is(.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) .product-row > .product-card > :is(.heart,.heart-btn,.pgp-heart,.fav-btn),
  html body :is(.iq-wrap,#iq-garages) .product-row > .pgp-most-product > :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(.pgp-view-grid.product-row,.pgp-view-grid.pgp-product-row,.pgp-view-grid.products-grid,.pgp-view-grid.pgp-products,.pgp-view-grid.garage-products),
  html body #home .pgp-most-viewed-card.pgp-home-grid-mode .pgp-most-row,
  html body #home .pgp-home-managed-section.pgp-home-grid-mode .pgp-most-row,
  html body #home .pgp-most-row.pgp-home-force-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
}