/* ==========================================================================
   Arihant Umang Udyog — Products & Product-Details page enhancements
   Scoped with pcx-/pdp- prefixes so nothing here touches the existing
   navbar, footer, hero, or any other section of the site.
   ========================================================================== */

/* ---------- Grid ---------- */
.pcx-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  align-items:stretch;
}
@media (max-width:1200px){ .pcx-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .pcx-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pcx-grid{grid-template-columns:1fr; gap:18px;} }

/* ---------- Card ---------- */
.pcx-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #eee;
  box-shadow:0 8px 26px -18px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1)), box-shadow .4s var(--ease,cubic-bezier(.22,1,.36,1)), border-color .4s;
}
.pcx-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.28);
  border-color:transparent;
}

/* ---------- Slider ---------- */
.pcx-slider{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f6f6f6;
}
.pcx-track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1));
}
.pcx-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  position:relative;
  cursor:zoom-in;
}
.pcx-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .7s var(--ease,cubic-bezier(.22,1,.36,1));
}
.pcx-card:hover .pcx-slide img{ transform:scale(1.08); }

/* Prev/Next arrows */
.pcx-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.9);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  cursor:pointer;
  z-index:3;
  opacity:0;
  transition:opacity .3s, background .3s, color .3s;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.pcx-slider:hover .pcx-arrow{ opacity:1; }
.pcx-arrow:hover{ background:var(--red); color:#fff; }
.pcx-prev{ left:10px; }
.pcx-next{ right:10px; }

/* Dots indicator */
.pcx-dots{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:3;
}
.pcx-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:none;
  padding:0;
  cursor:pointer;
  transition:width .3s, background .3s, border-radius .3s;
}
.pcx-dot.active{
  background:var(--red,#E30613);
  width:20px;
  border-radius:5px;
}

/* Zoom hint icon */
.pcx-zoom-hint{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  z-index:3;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.pcx-slider:hover .pcx-zoom-hint{ opacity:1; }

/* Category badge */
.pcx-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--grad,linear-gradient(135deg,#E30613,#B8050F));
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:5px 12px;
  border-radius:50px;
  z-index:3;
}

/* ---------- Card body ---------- */
.pcx-body{
  padding:20px 20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.pcx-body h3{
  font-size:1.08rem;
  margin-bottom:6px;
  line-height:1.3;
}
.pcx-size{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--red,#E30613);
  background:rgba(227,6,19,.08);
  padding:4px 10px;
  border-radius:50px;
  margin-bottom:10px;
  width:fit-content;
}
.pcx-body p{
  font-size:.88rem;
  color:#666;
  margin-bottom:16px;
  flex:1;
}
.pcx-view-btn{
  width:100%;
  justify-content:center;
  margin-top:auto;
  font-size:.88rem;
  padding:12px 20px;
}

/* ---------- Lightbox (extends base .lightbox in style.css) ---------- */
.pcx-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.94);
  display:none; align-items:center; justify-content:center;
  z-index:9998; padding:20px;
}
.pcx-lightbox.open{ display:flex; }
.pcx-lightbox-inner{
  position:relative;
  max-width:94vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pcx-lightbox-inner img{
  max-width:94vw;
  max-height:88vh;
  border-radius:10px;
  cursor:zoom-in;
  transition:transform .35s ease;
  user-select:none;
  -webkit-user-drag:none;
}
.pcx-lightbox-inner img.zoomed{
  cursor:zoom-out;
  transform:scale(2.1);
}
.pcx-lightbox .close{
  position:absolute; top:-6px; right:0;
  background:none; border:none; color:#fff; font-size:2rem;
  cursor:pointer; z-index:2; line-height:1;
}
.pcx-lightbox-arrow{
  position:fixed;
  top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.12); color:#fff;
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .3s;
  z-index:9999;
}
.pcx-lightbox-arrow:hover{ background:var(--red,#E30613); }
.pcx-lightbox-prev{ left:18px; }
.pcx-lightbox-next{ right:18px; }
.pcx-lightbox-counter{
  position:fixed;
  bottom:22px; left:0; right:0;
  text-align:center;
  color:#ddd; font-size:.85rem; letter-spacing:.05em;
  z-index:9999;
}
.pcx-lightbox-hint{
  position:fixed; bottom:50px; left:0; right:0;
  text-align:center; color:#888; font-size:.75rem;
}
@media (max-width:600px){
  .pcx-lightbox-arrow{ width:40px; height:40px; font-size:1rem; }
  .pcx-lightbox-prev{ left:8px; }
  .pcx-lightbox-next{ right:8px; }
}

/* ==========================================================================
   Product Details Page
   ========================================================================== */
.pdp-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
@media (max-width:900px){ .pdp-wrap{ grid-template-columns:1fr; gap:36px; } }

/* Gallery */
.pdp-gallery{ position:sticky; top:110px; }
@media (max-width:900px){ .pdp-gallery{ position:static; } }
.pdp-slider{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#f6f6f6;
  box-shadow:var(--shadow,0 20px 60px -20px rgba(0,0,0,.25));
}
.pdp-track{ display:flex; width:100%; height:100%; transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1)); }
.pdp-slide{ flex:0 0 100%; width:100%; height:100%; cursor:zoom-in; }
.pdp-slide img{ width:100%; height:100%; object-fit:contain; display:block; }
.pdp-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:#111; font-size:1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.25); transition:background .3s, color .3s; z-index:3;
}
.pdp-arrow:hover{ background:var(--red); color:#fff; }
.pdp-prev{ left:14px; } .pdp-next{ right:14px; }
.pdp-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; }
.pdp-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); border:none; padding:0; cursor:pointer; transition:width .3s, background .3s, border-radius .3s; }
.pdp-dot.active{ background:var(--red,#E30613); width:24px; border-radius:5px; }
.pdp-thumbs{ display:flex; gap:12px; margin-top:14px; }
.pdp-thumb{
  flex:1; aspect-ratio:1/1; border-radius:12px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; opacity:.65; transition:opacity .3s, border-color .3s;
  background:#f6f6f6;
}
.pdp-thumb.active{ opacity:1; border-color:var(--red,#E30613); }
.pdp-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }

/* Info column */
.pdp-info .pcx-badge{ position:static; display:inline-block; margin-bottom:14px; }
.pdp-info h1{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:10px; }
.pdp-size-chip{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700;
  color:var(--red,#E30613); background:rgba(227,6,19,.08); padding:8px 16px;
  border-radius:50px; margin-bottom:18px;
}
.pdp-desc{ color:#4a4a4a; font-size:1rem; line-height:1.8; margin-bottom:26px; }

.pdp-block{ margin-bottom:26px; }
.pdp-block h4{
  font-family:'Poppins','Inter',sans-serif; font-weight:700; font-size:1.05rem;
  margin-bottom:14px; display:flex; align-items:center; gap:10px; color:var(--ink,#000);
}
.pdp-block h4 i{ color:var(--red,#E30613); }
.pdp-list{ list-style:none; display:grid; gap:10px; }
.pdp-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:#444; }
.pdp-list li i{ color:var(--red,#E30613); margin-top:4px; font-size:.85rem; }

.pdp-specs{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; border:1px solid #eee; }
.pdp-specs tr:nth-child(odd){ background:#fafafa; }
.pdp-specs td{ padding:12px 16px; font-size:.9rem; }
.pdp-specs td:first-child{ font-weight:600; color:#222; width:42%; }
.pdp-specs td:last-child{ color:#555; }

.pdp-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.pdp-ctas .btn-wa{
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:50px;
  font-weight:600; font-size:.95rem; background:#25D366; color:#fff; border:none; cursor:pointer;
  transition:transform .3s, box-shadow .3s; box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
}
.pdp-ctas .btn-wa:hover{ transform:translateY(-3px); }

/* Breadcrumb override area sits inside existing .page-hero/.crumbs, no changes needed */

/* Related products */
.pdp-related{ margin-top:26px; }
.pdp-related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1100px){ .pdp-related-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:800px){ .pdp-related-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .pdp-related-grid{ grid-template-columns:1fr;} }

.pdp-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:26px;
  font-weight:600; font-size:.9rem; color:var(--ink,#000); transition:gap .3s,color .3s;
}
.pdp-back:hover{ color:var(--red,#E30613); gap:12px; }

/* Lazy-load fade in */
img[loading="lazy"]{ background:#eee; }
.pcx-fade-in{ animation:pcxFadeIn .5s ease; }
@keyframes pcxFadeIn{ from{opacity:0} to{opacity:1} }