/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE + REVIEWS  (loads after style.css)
   ════════════════════════════════════════════════════════════ */
.product-page { background: var(--clr-bg); }
.pp-main { padding-top: 110px; padding-bottom: 4rem; max-width: 1200px; }

.pp-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(28,24,21,0.45); margin-bottom: 1.6rem;
}
.pp-breadcrumb a { color: rgba(28,24,21,0.55); text-decoration: none; transition: color 0.2s; }
.pp-breadcrumb a:hover { color: var(--clr-primary); }
.pp-breadcrumb span { opacity: 0.5; }

.pp-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Gallery */
.pp-gallery { position: sticky; top: 90px; }
.pp-main-image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow: hidden;
  background: #faf6ef;
  box-shadow: 0 1px 2px rgba(20,16,12,0.05), 0 24px 50px -28px rgba(20,16,12,0.3);
}
.pp-main-image img { width: 100%; height: 100%; object-fit: cover; }
.pp-skel-img { position: absolute; inset: 0; background: linear-gradient(90deg,#e9e2d6,#f4efe6,#e9e2d6); background-size: 200% 100%; animation: ikkat-shimmer 1.6s linear infinite; }
.pp-img-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(184,146,74,0.2);
  color: var(--clr-text); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; z-index: 3; box-shadow: 0 2px 12px rgba(20,16,12,0.12);
  transition: all 0.25s var(--ease);
}
.pp-img-arrow:hover { background: #1c1815; color: #b8924a; }
.pp-prev { left: 12px; } .pp-next { right: 12px; }
.pp-thumbs { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.pp-thumb {
  width: 64px; height: 80px; border-radius: 4px; overflow: hidden; cursor: pointer;
  border: 1.5px solid transparent; background: #faf6ef; padding: 0; transition: border-color 0.2s;
}
.pp-thumb.active { border-color: var(--clr-primary); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Details */
.pp-category { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-primary); font-weight: 500; }
.pp-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0.6rem 0 0.8rem; }
.pp-rating-summary { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; margin-bottom: 1rem; }
.pp-rating-count { font-size: 0.8rem; color: rgba(28,24,21,0.55); }

.pp-stars { color: #b8924a; font-size: 0.9rem; display: inline-flex; gap: 1px; }
.pp-stars.sm { font-size: 0.78rem; } .pp-stars.lg { font-size: 1.3rem; }
.pp-stars .ph { color: rgba(28,24,21,0.2); }

.pp-price-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.7rem; margin: 0.5rem 0 1rem; }
.pp-sale-price { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; color: var(--clr-text); }
.pp-original-price { font-size: 1.05rem; color: rgba(28,24,21,0.4); text-decoration: line-through; }
.pp-discount { font-size: 0.62rem; color: var(--clr-primary); border: 1px solid currentColor; padding: 0.2rem 0.5rem; border-radius: 2px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

.pp-stock { margin-bottom: 1.2rem; }
.pp-desc { font-size: 0.95rem; line-height: 1.7; color: rgba(28,24,21,0.7); margin-bottom: 1.5rem; }
.pp-features { display: grid; grid-template-columns: 1fr 1fr 1fr; }

.pp-skel { display: inline-block; background: linear-gradient(90deg, rgba(28,24,21,0.07), rgba(28,24,21,0.13), rgba(28,24,21,0.07)); background-size: 200% 100%; animation: ikkat-shimmer 1.6s linear infinite; border-radius: 6px; }
.pp-skel-line { height: 1.4rem; }

.pp-notfound { grid-column: 1/-1; text-align: center; padding: 5rem 1rem; }
.pp-notfound i { font-size: 3rem; color: rgba(28,24,21,0.25); }
.pp-notfound h2 { font-family: var(--font-heading); font-size: 1.8rem; margin: 1rem 0 0.4rem; }
.pp-notfound p { color: rgba(28,24,21,0.55); margin-bottom: 1.5rem; }

/* Reviews */
.pp-reviews-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #e6dfd4; }
.pp-reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.pp-reviews-summary { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.5rem 1.8rem; background: #faf6ef; border: 1px solid #e6dfd4; border-radius: 8px; }
.pp-rev-avg { text-align: center; }
.pp-rev-avg-num { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--clr-text); }
.pp-rev-avg-count { font-size: 0.75rem; color: rgba(28,24,21,0.5); margin-top: 0.3rem; }
.pp-rev-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.35rem; }
.pp-rev-bar-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; color: rgba(28,24,21,0.55); }
.pp-rev-bar-row span:first-child { width: 24px; }
.pp-rev-bar { flex: 1; height: 6px; background: #e6dfd4; border-radius: 50px; overflow: hidden; }
.pp-rev-bar span { display: block; height: 100%; background: var(--clr-primary); border-radius: 50px; }
.pp-rev-bar-row em { width: 20px; text-align: right; font-style: normal; }

.pp-reviews-list { display: flex; flex-direction: column; gap: 1.4rem; }
.pp-review { padding: 1.3rem 1.5rem; background: #fff; border: 1px solid #e6dfd4; border-radius: 8px; box-shadow: var(--shadow-soft); }
.pp-review-top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.pp-review-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#b8924a,#9d7a37); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.1rem; flex-shrink: 0; }
.pp-review-name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
.pp-verified { color: var(--clr-primary); font-size: 0.85rem; }
.pp-review-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: rgba(28,24,21,0.45); margin-top: 0.15rem; }
.pp-review-text { font-size: 0.9rem; line-height: 1.6; color: rgba(28,24,21,0.78); }
.pp-no-reviews { color: rgba(28,24,21,0.5); font-size: 0.9rem; padding: 1rem 0; }

/* Write review form */
.pp-review-form { background: #fff; border: 1px solid #e6dfd4; border-radius: 8px; padding: 1.4rem 1.5rem; margin-bottom: 2rem; }
.pp-rf-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pp-rf-row input { flex: 1; min-width: 200px; padding: 0.7rem 0.9rem; border: 1px solid #e6dfd4; border-radius: 4px; font-size: 0.9rem; background: #faf6ef; }
.pp-rf-stars { display: flex; gap: 0.2rem; font-size: 1.4rem; color: rgba(28,24,21,0.25); cursor: pointer; }
.pp-rf-stars i { transition: color 0.15s, transform 0.15s; }
.pp-rf-stars i:hover { transform: scale(1.15); }
.pp-rf-stars i.on { color: #b8924a; }
.pp-review-form textarea { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid #e6dfd4; border-radius: 4px; font-size: 0.9rem; font-family: var(--font-body); background: #faf6ef; resize: vertical; }
.pp-rf-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }
.pp-rf-note { font-size: 0.72rem; color: rgba(28,24,21,0.5); }

.pp-related-section { margin-top: 4rem; }

/* Product page toast */
.product-page .toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1c1815; color: #fff; padding: 0.9rem 1.5rem; border-radius: 50px;
  font-size: 0.85rem; z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.product-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 860px) {
  .pp-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .pp-gallery { position: static; }
  .pp-main { padding-top: 90px; }
  .pp-reviews-summary { gap: 1.5rem; padding: 1.2rem; }
}