/* =========================================================
   Products listing + Product detail pages
   Scoped classes: .pp-* (kept separate so nothing collides
   with the shared classes in style.css / about-page.css)
   ========================================================= */

/* Page hero (banner + slideshow background) now lives in style.css so it can
   be shared with about.html too — see "Page hero banner" section there. */

/* ---- Products listing grid (products.html) ---- */
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pp-box{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 30px -18px #06245140;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
}
.pp-box:hover{transform:translateY(-6px)}
.pp-box-media{height:170px;background:linear-gradient(150deg,#eef8f0 0%,#e4f2fb 100%);overflow:hidden}
.pp-box-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pp-box-media.logo-fit{background:#0b0b0b;display:flex;align-items:center;justify-content:center}
.pp-box-media.logo-fit img{width:auto;height:auto;max-width:72%;max-height:60%;object-fit:contain}
.pp-box:hover .pp-box-media img{transform:scale(1.08)}
.pp-box-body{padding:18px 18px 22px}
.pp-box-body h3{font-size:16px;margin:0 0 12px;color:var(--ink);transition:color .25s ease}
.pp-readmore{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff!important;font-size:11px;font-weight:800;letter-spacing:.3px;padding:10px 16px;border-radius:999px;transition:gap .25s ease,background .25s ease}
.pp-readmore:hover{gap:11px}

/* Each product box lights up with its own accent color on hover, cycling
   through the site's palette — mirrors the .service-card behaviour */
.pp-box:nth-child(6n+1):hover{border-color:#1477c966;box-shadow:0 22px 38px -16px #1477c94d}
.pp-box:nth-child(6n+1):hover h3{color:var(--blue)}
.pp-box:nth-child(6n+1):hover .pp-readmore{background:var(--blue)}

.pp-box:nth-child(6n+2):hover{border-color:#f0871f66;box-shadow:0 22px 38px -16px #f0871f4d}
.pp-box:nth-child(6n+2):hover h3{color:var(--orange)}
.pp-box:nth-child(6n+2):hover .pp-readmore{background:var(--orange)}

.pp-box:nth-child(6n+3):hover{border-color:#06245166;box-shadow:0 22px 38px -16px #0624514d}
.pp-box:nth-child(6n+3):hover h3{color:var(--navy)}
.pp-box:nth-child(6n+3):hover .pp-readmore{background:var(--navy)}

.pp-box:nth-child(6n+4):hover{border-color:#0aa5a866;box-shadow:0 22px 38px -16px #0aa5a84d}
.pp-box:nth-child(6n+4):hover h3{color:#0aa5a8}
.pp-box:nth-child(6n+4):hover .pp-readmore{background:#0aa5a8}

.pp-box:nth-child(6n+5):hover{border-color:#23943a66;box-shadow:0 22px 38px -16px #23943a4d}
.pp-box:nth-child(6n+5):hover h3{color:var(--green)}
.pp-box:nth-child(6n+5):hover .pp-readmore{background:var(--green)}

.pp-box:nth-child(6n+6):hover{border-color:#ff5c8a66;box-shadow:0 22px 38px -16px #ff5c8a4d}
.pp-box:nth-child(6n+6):hover h3{color:#ff5c8a}
.pp-box:nth-child(6n+6):hover .pp-readmore{background:#ff5c8a}

/* ---- Product detail layout ---- */
.pp-detail-grid{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;padding:44px 0 60px}
.pp-detail-main{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 14px 30px -20px #06245140}
.pp-detail-media{border-radius:12px;overflow:hidden;margin-bottom:20px;max-height:360px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#eef8f0 0%,#e4f2fb 100%)}
.pp-detail-media img{width:100%;max-height:360px;object-fit:contain;display:block}
.pp-detail-media.logo-fit{background:#0b0b0b}
.pp-detail-media.logo-fit img{max-width:60%;max-height:220px}
.pp-detail-main h2{font-family:"Plus Jakarta Sans";font-size:24px;font-weight:800;margin:0 0 14px;color:var(--navy)}
.pp-detail-main p{color:#3d4c63;font-size:14.5px;line-height:1.8;margin:0 0 14px;text-align:justify}
.pp-detail-features{list-style:none;margin:6px 0 26px;padding:0;display:grid;gap:12px}
.pp-detail-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.pp-detail-features li i{color:var(--green);font-style:normal;font-weight:800;flex-shrink:0}

/* ---- Sidebar box-list (all products, matches reference screenshots) ---- */
.pp-sidebar{display:flex;flex-direction:column;gap:10px}
.pp-sidebar-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;font-size:13.5px;font-weight:700;color:var(--ink);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.pp-sidebar-link svg{flex-shrink:0;color:var(--muted);transition:transform .2s ease,color .2s ease}
.pp-sidebar-link:hover{border-color:#f0871f66;color:var(--orange);transform:translateX(3px)}
.pp-sidebar-link:hover svg{color:var(--orange);transform:translateX(2px)}
.pp-sidebar-link.active{background:var(--orange);border-color:var(--orange);color:#fff}
.pp-sidebar-link.active svg{color:#fff}

/* ---- Category boxes grid (Havells Appliances style detail page) ----
   Styled to match the "What We Do" boxes on the About page: soft
   gradient card, circular image badge, hover lift + color fill. */
.pp-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 26px;text-align:center}
.pp-cat-box{
  position:relative;border-radius:16px;padding:22px 12px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  box-shadow:0 12px 24px -14px #10233d26;
  transition:transform .25s ease,box-shadow .25s ease,background .3s ease;
}
.pp-cat-box:hover{transform:translateY(-5px);box-shadow:0 20px 32px -16px #10233d40}
.pp-cat-box-media{
  width:100%;height:130px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
  background:#fff;box-shadow:0 8px 16px -6px #00000030;transition:transform .3s ease;
}
.pp-cat-box:hover .pp-cat-box-media{transform:scale(1.04)}
.pp-cat-box-media img{width:100%;height:100%;object-fit:cover;display:block}
.pp-cat-box h4{margin:0;font-size:13.5px;font-weight:700;color:#10233d;transition:color .3s ease}

.pp-cat-box.pc1{background:linear-gradient(160deg,#eafaf0,#d9f3e2)}
.pp-cat-box.pc1:hover{background:linear-gradient(160deg,#1c8a2c,#0f5c1c)}
.pp-cat-box.pc1:hover h4{color:#fff}

.pp-cat-box.pc2{background:linear-gradient(160deg,#eaf4ff,#d7ebff)}
.pp-cat-box.pc2:hover{background:linear-gradient(160deg,#1c72c9,#0f4a86)}
.pp-cat-box.pc2:hover h4{color:#fff}

.pp-cat-box.pc3{background:linear-gradient(160deg,#f2edfd,#e5dafb)}
.pp-cat-box.pc3:hover{background:linear-gradient(160deg,#7440d6,#4c2794)}
.pp-cat-box.pc3:hover h4{color:#fff}

.pp-cat-box.pc4{background:linear-gradient(160deg,#e6f8fb,#d2eff5)}
.pp-cat-box.pc4:hover{background:linear-gradient(160deg,#0f97ac,#0a6070)}
.pp-cat-box.pc4:hover h4{color:#fff}

.pp-cat-box.pc5{background:linear-gradient(160deg,#fff5e2,#ffe9c2)}
.pp-cat-box.pc5:hover{background:linear-gradient(160deg,#f08a12,#a55d09)}
.pp-cat-box.pc5:hover h4{color:#fff}

.pp-cat-box.pc6{background:linear-gradient(160deg,#ffe4ec,#ffd0dd)}
.pp-cat-box.pc6:hover{background:linear-gradient(160deg,#ff5c8a,#c93862)}
.pp-cat-box.pc6:hover h4{color:#fff}

@media(max-width:640px){
  .pp-cat-grid{grid-template-columns:repeat(2,1fr)}
}

.pp-notfound{padding:60px 0;text-align:center}
.pp-notfound h2{font-family:"Plus Jakarta Sans";margin-bottom:8px}
.pp-notfound p{color:var(--muted);margin-bottom:20px}

@media(max-width:1000px){
  .pp-grid{grid-template-columns:repeat(3,1fr)}
  .pp-detail-grid{grid-template-columns:1fr;padding:34px 0 46px}
  .pp-detail-side{order:2}
  .pp-sidebar{flex-direction:row;flex-wrap:wrap}
  .pp-sidebar-link{flex:1 1 calc(50% - 5px)}
}
@media(max-width:700px){
  .pp-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .pp-grid{grid-template-columns:1fr}
  .pp-sidebar-link{flex:1 1 100%}
  .pp-detail-main{padding:20px}
}