/* =========================================================
   PGP v213 — Unified soft frame + faded inner section line
   ملف منعزل مسؤول فقط عن:
   - إطار السكشن الناعم
   - الخط الداخلي الناعم الذي يختفي عند الزوايا
   يطبق على الصفحة الرئيسية + البارتات + الكراجات / كراجي
   ========================================================= */

:root{
  --pgp-soft-frame-red:rgba(238,21,78,.18);
  --pgp-soft-frame-gray:rgba(0,0,0,.070);
  --pgp-soft-line:rgba(0,0,0,.115);
  --pgp-soft-line-light:rgba(0,0,0,.040);
  --pgp-soft-card-bg:#ffffff;
  --pgp-soft-card-radius:28px;
  --pgp-soft-card-shadow:0 14px 34px rgba(0,0,0,.040), 0 8px 22px rgba(0,0,0,.026);
}

/* 1) remove hard old borders, use one soft frame source */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card
){
  position:relative!important;
  border:0!important;
  outline:0!important;
  border-radius:var(--pgp-soft-card-radius)!important;
  background:var(--pgp-soft-card-bg)!important;
  background-color:var(--pgp-soft-card-bg)!important;
  background-image:none!important;
  box-shadow:var(--pgp-soft-card-shadow)!important;
}

/* product sections clip content cleanly; hero keeps dropdown safe */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card
){
  overflow:hidden!important;
}
html body :is(.pgp-parts-wrap .pgp-parts-hero,.iq-wrap .iq-hero){
  overflow:visible!important;
}

/* 2) soft frame: fades before corners, so there is no hard line in the rounded corners */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card
)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:20!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(238,21,78,.035) 5%,
      var(--pgp-soft-frame-red) 17%,
      var(--pgp-soft-frame-red) 83%,
      rgba(238,21,78,.035) 95%,
      rgba(0,0,0,0) 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(238,21,78,.030) 6%,
      var(--pgp-soft-frame-red) 18%,
      var(--pgp-soft-frame-red) 82%,
      rgba(238,21,78,.030) 94%,
      rgba(0,0,0,0) 100%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(238,21,78,.025) 8%,
      var(--pgp-soft-frame-red) 22%,
      var(--pgp-soft-frame-red) 78%,
      rgba(238,21,78,.025) 92%,
      rgba(0,0,0,0) 100%) left / 1px 100% no-repeat,
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(238,21,78,.025) 8%,
      var(--pgp-soft-frame-red) 22%,
      var(--pgp-soft-frame-red) 78%,
      rgba(238,21,78,.025) 92%,
      rgba(0,0,0,0) 100%) right / 1px 100% no-repeat!important;
}

/* 3) remove old internal straight lines */
html body :is(
  .pgp-most-head,
  .pgp-parts-wrap .pgp-part-top,
  .iq-wrap .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main
){
  position:relative!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  background-image:none!important;
  padding-bottom:18px!important;
  margin-bottom:18px!important;
}

/* 4) one inner line only, faded at left/right like the earlier homepage look */
html body :is(
  .pgp-most-head,
  .pgp-parts-wrap .pgp-part-top,
  .iq-wrap .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main
)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:0!important;
  height:1px!important;
  pointer-events:none!important;
  z-index:21!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    var(--pgp-soft-line-light) 8%,
    var(--pgp-soft-line) 20%,
    var(--pgp-soft-line) 80%,
    var(--pgp-soft-line-light) 92%,
    rgba(0,0,0,0) 100%
  )!important;
}

/* 5) kill duplicate lines on row wrappers */
html body :is(
  .pgp-most-scroll-wrap,
  .pgp-parts-wrap .pgp-product-scroll-wrap,
  .iq-wrap .product-scroll-wrap,
  .garage-card .product-scroll-wrap,
  .store-card .products-grid,
  .store-card .product-row
){
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* clean spacing under the line */
html body :is(
  .pgp-parts-wrap .pgp-product-scroll-wrap,
  .iq-wrap .product-scroll-wrap,
  .garage-card .product-scroll-wrap
){
  margin-top:0!important;
}


/* =========================================================
   PGP v213 — inner section line color/thickness = product options accent
   المطلوب:
   - لون الخط الداخلي نفس لون خيارات المنتج
   - نفس السماكة تقريباً
   - يطبق على جميع الصفحات والسكشنات
   ========================================================= */

:root{
  --pgp-product-options-accent:#ee154e;
  --pgp-inner-line-thickness:2px;
}

/* internal separator line: product-options red, thicker and still soft on edges */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
)::after{
  height:var(--pgp-inner-line-thickness)!important;
  background:linear-gradient(
    90deg,
    rgba(238,21,78,0) 0%,
    rgba(238,21,78,.10) 7%,
    rgba(238,21,78,.78) 20%,
    var(--pgp-product-options-accent) 50%,
    rgba(238,21,78,.78) 80%,
    rgba(238,21,78,.10) 93%,
    rgba(238,21,78,0) 100%
  )!important;
}

/* if any page still uses a real border-bottom, neutralize it so only the unified line appears */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
){
  border-bottom:0!important;
}


/* =========================================================
   PGP v213 — requested exact line colors
   1) الخط الداخلي داخل السكشن: أسود 100% ثابت، بدون تدريج.
   2) خط الإطار الخارجي: نفس لون خيارات المنتج #ee154e وعلى طول الإطار.
   يطبق على جميع صفحات الموقع قدر الإمكان.
   ========================================================= */

:root{
  --pgp-product-options-accent:#ee154e;
  --pgp-outer-section-line:1px;
  --pgp-inner-section-line:1px;
}

/* OUTER SECTION FRAME — product-options color, full solid line */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-most-viewed-card,
  .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card,
  .products-card,
  .pgp-section-card,
  .pgp-section-shell,
  .pgp-section-wrap,
  .iq-card
){
  border:var(--pgp-outer-section-line) solid var(--pgp-product-options-accent)!important;
  border-radius:28px!important;
  outline:0!important;
  box-shadow:0 14px 34px rgba(0,0,0,.040), 0 8px 22px rgba(0,0,0,.026)!important;
}

/* Stop old faded/gradient outer frame so only the solid product-options line remains */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-most-viewed-card,
  .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card,
  .products-card,
  .pgp-section-card,
  .pgp-section-shell,
  .pgp-section-wrap,
  .iq-card
)::before{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* INTERNAL SEPARATOR LINE — solid black, no gradient */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:0!important;
  height:var(--pgp-inner-section-line)!important;
  background:#000000!important;
  background-image:none!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

/* Remove any real old border line so there is only one black internal line */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
){
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}


/* =========================================================
   PGP v213 — merged inner line + faded outer corners
   المطلوب:
   1) الخط الداخلي يندمج ويا خط الإطار الخارجي.
   2) نهايات الخط الداخلي يمين/يسار تكون تدريج بين الأحمر والأسود.
   3) زوايا الإطار الخارجي يختفي بيها اللون تدريجياً.
   4) يطبق على كل الصفحات قدر الإمكان.
   ========================================================= */

:root{
  --pgp-product-options-accent:#ee154e;
  --pgp-frame-line-size:1px;
  --pgp-inner-line-size:1px;
}

/* OUTER FRAME: remove hard solid border and replace with soft fading frame */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-most-viewed-card,
  .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card,
  .products-card,
  .pgp-section-card,
  .pgp-section-shell,
  .pgp-section-wrap,
  .iq-card
){
  position:relative!important;
  border:0!important;
  outline:0!important;
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 14px 34px rgba(0,0,0,.040), 0 8px 22px rgba(0,0,0,.026)!important;
}

/* The outside frame line fades at the corners */
html body :is(
  #home .pgp-most-viewed-card,
  #home .pgp-home-managed-section,
  .pgp-most-viewed-card,
  .pgp-home-managed-section,
  .pgp-parts-wrap .pgp-parts-hero,
  .pgp-parts-wrap .pgp-part-card,
  .iq-wrap .iq-hero,
  .iq-wrap .garage-card,
  .garage-card,
  .store-wrap .store-card,
  .store-card,
  .products-card,
  .pgp-section-card,
  .pgp-section-shell,
  .pgp-section-wrap,
  .iq-card
)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:30!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
  background:
    linear-gradient(90deg,
      rgba(238,21,78,0) 0%,
      rgba(238,21,78,0) 4%,
      rgba(238,21,78,.24) 12%,
      var(--pgp-product-options-accent) 22%,
      var(--pgp-product-options-accent) 78%,
      rgba(238,21,78,.24) 88%,
      rgba(238,21,78,0) 96%,
      rgba(238,21,78,0) 100%) top / 100% var(--pgp-frame-line-size) no-repeat,
    linear-gradient(90deg,
      rgba(238,21,78,0) 0%,
      rgba(238,21,78,0) 4%,
      rgba(238,21,78,.24) 12%,
      var(--pgp-product-options-accent) 22%,
      var(--pgp-product-options-accent) 78%,
      rgba(238,21,78,.24) 88%,
      rgba(238,21,78,0) 96%,
      rgba(238,21,78,0) 100%) bottom / 100% var(--pgp-frame-line-size) no-repeat,
    linear-gradient(180deg,
      rgba(238,21,78,0) 0%,
      rgba(238,21,78,0) 5%,
      rgba(238,21,78,.22) 13%,
      var(--pgp-product-options-accent) 24%,
      var(--pgp-product-options-accent) 76%,
      rgba(238,21,78,.22) 87%,
      rgba(238,21,78,0) 95%,
      rgba(238,21,78,0) 100%) left / var(--pgp-frame-line-size) 100% no-repeat,
    linear-gradient(180deg,
      rgba(238,21,78,0) 0%,
      rgba(238,21,78,0) 5%,
      rgba(238,21,78,.22) 13%,
      var(--pgp-product-options-accent) 24%,
      var(--pgp-product-options-accent) 76%,
      rgba(238,21,78,.22) 87%,
      rgba(238,21,78,0) 95%,
      rgba(238,21,78,0) 100%) right / var(--pgp-frame-line-size) 100% no-repeat!important;
}

/* INTERNAL LINE BASE: no real border, pseudo line only */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
){
  position:relative!important;
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Internal separator line:
   red at both ends to merge with outside frame, black in the middle */
html body :is(
  .pgp-most-head,
  .pgp-home-managed-section > .pgp-most-head,
  .pgp-home-managed-section .pgp-most-head,
  .pgp-parts-wrap .pgp-part-card .pgp-part-top,
  .iq-wrap .garage-card .garage-top,
  .garage-card .garage-top,
  .store-card .products-head,
  .store-card .store-main,
  .products-card .products-head,
  .pgp-section-head,
  .section-head,
  .card-head
)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:var(--pgp-inner-line-size)!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:31!important;
  background:linear-gradient(
    90deg,
    var(--pgp-product-options-accent) 0%,
    rgba(238,21,78,.72) 6%,
    rgba(0,0,0,.88) 16%,
    #000000 28%,
    #000000 72%,
    rgba(0,0,0,.88) 84%,
    rgba(238,21,78,.72) 94%,
    var(--pgp-product-options-accent) 100%
  )!important;
  background-image:linear-gradient(
    90deg,
    var(--pgp-product-options-accent) 0%,
    rgba(238,21,78,.72) 6%,
    rgba(0,0,0,.88) 16%,
    #000000 28%,
    #000000 72%,
    rgba(0,0,0,.88) 84%,
    rgba(238,21,78,.72) 94%,
    var(--pgp-product-options-accent) 100%
  )!important;
}

/* For parts/garage cards the header has internal padding; extend line to touch the outer frame */
html body .pgp-parts-wrap .pgp-part-card .pgp-part-top::after,
html body .iq-wrap .garage-card .garage-top::after,
html body .garage-card .garage-top::after,
html body .store-card .products-head::after,
html body .store-card .store-main::after{
  left:-22px!important;
  right:-22px!important;
}

/* Home heads already sit on full section width; keep them clean */
html body .pgp-most-head::after,
html body .pgp-home-managed-section > .pgp-most-head::after,
html body .pgp-home-managed-section .pgp-most-head::after{
  left:0!important;
  right:0!important;
}

/* Remove any duplicate line from wrappers */
html body :is(
  .pgp-most-scroll-wrap,
  .pgp-parts-wrap .pgp-product-scroll-wrap,
  .iq-wrap .product-scroll-wrap,
  .garage-card .product-scroll-wrap,
  .store-card .products-grid,
  .store-card .product-row
){
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
