/*
  product_gallery/product.css
  BenQ Bangladesh — Interactive-Displays-RE8605A.html product detail page

  Page-scoped stylesheet for the RE8605A product page only: breadcrumb,
  product hero (image + info), spec chips, key features. This is a
  separate file from the shared css/product.css (used by the generic
  single-product.html / product.html templates) so this specific
  product's styling can be edited without touching those other pages.

  The "Related Products" section has its own stylesheet —
  see related-products.css in this same folder.

  Depends on the design tokens defined in css/style.css (:root
  variables such as --brand-purple, --ink, --container-max, etc.)
  and the .pf-product-card / .pf-btn component styles from
  css/components.css, which the related-products section reuses.
*/

/* ============ SINGLE PRODUCT DETAIL PAGE ============ */
.pd-hero{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--container-pad) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.pd-gallery{
  position: sticky;
  top: 90px;
}

.pd-hero-media{
  position: relative;
  background: var(--surface-tint-neutral, #F7F6FA);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(28,27,31,.06);
}

.pd-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease;
}

.pd-hero-media:hover img{ transform: scale(1.04); }

.pd-gallery-thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pd-gallery-thumb{
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--surface-tint-neutral, #F7F6FA);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pd-gallery-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pd-gallery-thumb:hover{ border-color: var(--brand-purple); }

.pd-gallery-thumb:active{ transform: scale(.94); }

.pd-gallery-thumb.active{
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 2px rgba(88,46,145,.15);
}

.pd-discount-badge{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--danger-color);
  color: var(--white-color);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.pd-wishlist-btn{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white-color);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.pd-wishlist-btn svg{ width: 19px; height: 19px; }

.pd-wishlist-btn:hover{ border-color: var(--danger-color); color: var(--danger-color); }

.pd-wishlist-btn.active{
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.pd-wishlist-btn.active svg{ fill: var(--danger-color); }

.pd-wishlist-btn:active{ transform: scale(.92); }

.pd-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-purple);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pd-tag::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-purple);
  flex-shrink: 0;
}

.pd-title{
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.pd-rating-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.pd-stars{
  color: var(--warning-color);
  font-size: 16px;
  letter-spacing: 1px;
}

.pd-rating-value{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.pd-rating-count{
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.pd-desc{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 48ch;
}

/* ---------- Short specs strip ----------
   A quick-scan row of key spec chips right under the title, ahead of
   the full spec list further down the page (see .pd-specs-section). */
.pd-short-specs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.pd-short-spec-chip{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* ---------- Purchase block ----------
   No boxed panel — sections are separated by quiet hairline rules and
   generous vertical rhythm instead of color or borders, so price,
   stock, quantity, and buy actions read as one continuous flow rather
   than a decorated card. */
.pd-purchase-card{
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 8px;
}

.pd-price-row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pd-price{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pd-price-old{
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink-soft);
  text-decoration: line-through;
}

.pd-save-badge{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--danger-color-dark);
}

.pd-meta-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.pd-stock{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success-color);
  font-weight: 600;
}

.pd-stock-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-color);
  flex-shrink: 0;
}

.pd-buy-row{
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.pd-qty{
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white-color);
  overflow: hidden;
  flex-shrink: 0;
}

.pd-qty-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 100%;
  min-height: 48px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.pd-qty-btn:hover{ background: var(--surface-tint-neutral, #F7F6FA); }

.pd-qty-input{
  width: 44px;
  height: 100%;
  min-height: 48px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
}

.pd-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.pd-actions .pf-btn{
  flex: 1;
  min-width: 140px;
  padding: 14px 16px;
  font-size: 13px;
  border-radius: 8px;
}

.pd-trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pd-trust-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.pd-trust-item svg{
  width: 17px;
  height: 17px;
  color: var(--brand-purple);
  flex-shrink: 0;
}

/* ---------- Specifications ---------- */
.pd-specs-section{
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
}

.pd-specs-section h3{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.pd-specs{
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pd-specs li{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
}

.pd-spec-label{
  font-size: 11.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pd-spec-value{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.pd-description{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--container-pad) 0;
}

.pd-description h2{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 20px;
}

.pd-description-body{
  max-width: 100%;
}

.pd-description-body p{
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.pd-description-body p:last-child{ margin-bottom: 0; }

.pd-description-body p:last-child{
  margin-bottom: 20px;
}

.pd-features{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 56px;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}

.pd-features h2{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 24px;
}

.pd-features ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

.pd-features li{
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pd-features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-purple);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* "Related Products" section styling has moved to related-products.css */


/* ======================================================================
   RESPONSIVE
====================================================================== */
@media (max-width: 860px){
  .pd-hero{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 20px;
  }
  .pd-gallery{
    position: relative;
    top: 0;
    max-width: 420px;
    margin: 0 auto;
  }
  .pd-features ul{ grid-template-columns: 1fr; }
  .pd-trust-row{ gap: 14px 24px; }
}

@media (max-width: 480px){
  .pd-hero{ padding-bottom: 40px; }
  .pd-specs{ grid-template-columns: 1fr; }
  .pd-description{ padding-top: 36px; }
  .pd-features{ padding-top: 36px; padding-bottom: 40px; }
  .pd-buy-row{ flex-direction: column; }
  .pd-qty{ align-self: flex-start; }
  .pd-actions{ flex-direction: column; width: 100%; }
  .pd-actions .pf-btn{ width: 100%; text-align: center; justify-content: center; }
  .pd-trust-row{ flex-direction: column; gap: 12px; }
  .pd-meta-row{ gap: 10px 16px; }
}