/* =====================================================
   VARIABLES
===================================================== */
:root{
  --brand:#c49a3a;
  --dark:#0b2e5a;
  --border:#e6e6e6;
  --shadow:0 10px 26px rgba(0,0,0,.08);
}

/* =====================================================
   PRODUCT TOP LAYOUT (FIXES BLANK LEFT SIDE)
===================================================== */
.pd-top{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:32px;
  align-items:flex-start;
}

/* =====================================================
   LEFT: GALLERY
===================================================== */
.pd-gallery{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
  min-height:520px;
}

.pd-thumbs{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  overflow-x:auto;
}

.pd-thumbs img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  opacity:.6;
  border:2px solid transparent;
  transition:.2s;
}

.pd-thumbs img.active{
  opacity:1;
  border-color:var(--brand);
}

.pd-mainimg{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
}

.pd-mainimg img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}

/* =====================================================
   RIGHT: PRODUCT INFO PANEL
===================================================== */
.pd-info{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* TITLE BAR */
.pd-titlebar{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:18px;
  font-weight:900;
  font-size:20px;
  letter-spacing:.5px;
}

/* FACTORY */
.pd-factory{
  margin:16px;
  padding:12px;
  border:2px solid var(--brand);
  border-radius:12px;
  text-align:center;
  font-weight:900;
  color:var(--dark);
}

/* DESCRIPTION */
.pd-desc{
  text-align:center;
  padding:0 20px;
  color:#555;
  line-height:1.7;
  font-size:14px;
}

/* FEATURES */
.pd-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:16px;
}

.pd-feature{
  background:var(--dark);
  color:#fff;
  border-radius:12px;
  padding:12px 6px;
  text-align:center;
  font-weight:700;
}

.pd-feature span{
  display:block;
  font-weight:900;
  color:var(--brand);
  margin-top:4px;
}

/* SYSTEMS / DETECT */
.pd-lines{
  padding:0 20px;
  font-size:14px;
  line-height:1.6;
}

.pd-lines strong{
  color:#000;
}

/* RATING */
.pd-rating{
  padding:10px 20px;
  color:#f1b500;
  font-size:18px;
}

/* TRUST ICONS */
.pd-trusticons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:16px;
}

.pd-trust{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
  font-weight:700;
  font-size:14px;
}

/* PRICE */
.pd-pricebox{
  margin:16px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  text-align:center;
}

.pd-currencytabs{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}

.pd-currencytabs button{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 12px;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}

.pd-currencytabs button.active{
  background:var(--brand);
  color:#fff;
}

.pd-price{
  font-size:22px;
  font-weight:900;
}

.pd-price span{
  color:#d10000;
}

/* ACTIONS */
.pd-qtycta{
  display:grid;
  grid-template-columns:110px 1fr 1fr;
  gap:12px;
  padding:0 16px 16px;
}

.pd-qty{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  border:1px solid var(--border);
  border-radius:10px;
}

.pd-qty button {
  height: 48px;
  width: 48px;
  font-size: 22px;
  font-weight: 900;
}

.pd-qty input {
  height: 48px;
  font-size: 18px;
}

/* ===============================
   CTA BUTTONS (IMPROVED)
================================ */

.pd-btn{
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  height: 52px;
  font-size: 16px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

/* ADD TO CART */
.pd-btn.cart{
  background: #d10000;
  color: #fff;
}

.pd-btn.cart:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(209,0,0,.35);
}

/* CHECKOUT */
.pd-btn.checkout{
  background: var(--brand);
  color: #111;
}

.pd-btn.checkout:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(196,154,58,.45);
}

/* ACTIVE (CLICK FEEDBACK) */
.pd-btn:active{
  transform: scale(.98);
  opacity: .9;
}




/* WHATSAPP */
.pd-whatsapp{
  margin:0 16px 16px;
  width:calc(100% - 32px);
  background:#1bb35b;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:14px;
  font-weight:900;
  cursor:pointer;
}

.pd-whatsapp {
  height: 54px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 14px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 992px){
  .pd-top{
    grid-template-columns:1fr;
  }

  .pd-gallery{
    min-height:auto;
  }

  .pd-features{
    grid-template-columns:repeat(2,1fr);
  }

  .pd-qtycta{
    grid-template-columns:1fr;
  }
}



/* ===============================
   RELATED PRODUCTS FIX
================================ */
.pd-related{
  margin-top:60px;
}

.pd-related h2{
  text-align:center;
  font-weight:900;
  margin-bottom:30px;
}

/* GRID */
.pd-related-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

/* CARD */
.pd-mini-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  padding:14px;
  text-align:center;
  transition:.25s ease;
}

.pd-mini-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}

.pd-mini-card img{
  width:100%;
  height:200px;
  object-fit:contain;
  border-radius:12px;
  background:#f7f7f7;
}

/* TITLE */
.pd-mini-card .t{
  margin-top:10px;
  font-weight:800;
  font-size:14px;
}

/* PRICE */
.pd-mini-card .p{
  color:#c49a3a;
  font-weight:900;
  margin:6px 0;
}

/* BUTTON */
.pd-mini-card a{
  display:inline-block;
  margin-top:6px;
  padding:8px 14px;
  background:#c49a3a;
  color:#fff;
  border-radius:8px;
  font-weight:800;
  text-decoration:none;
}

/* RESPONSIVE */
@media (max-width:1200px){
  .pd-related-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:768px){
  .pd-related-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:480px){
  .pd-related-grid{
    grid-template-columns:1fr;
  }
}


/* ADD TO CART ANIMATION */
.pd-btn.cart{
  position: relative;
  overflow: hidden;
}

.pd-btn.cart::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.25);
  transform:translateX(-100%);
  transition:transform .4s ease;
}

.pd-btn.cart:hover::after{
  transform:translateX(0);
}

.pd-btn.cart:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(209,0,0,.45);
}


/* CHECKOUT ANIMATION */
.pd-btn.checkout{
  position: relative;
  overflow: hidden;
}

.pd-btn.checkout:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(196,154,58,.55);
}



/* WHATSAPP PULSE */
.pd-whatsapp{
  position: relative;
  animation: pulseWhats 2.5s infinite;
}

@keyframes pulseWhats{
  0%{
    box-shadow: 0 0 0 0 rgba(27,179,91,.6);
  }
  70%{
    box-shadow: 0 0 0 14px rgba(27,179,91,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(27,179,91,0);
  }
}

.pd-whatsapp:hover{
  animation:none;
  transform: translateY(-3px) scale(1.02);
}

/* =====================================================
   COMPATIBILITY FOR STATIC PRODUCT PAGE
   ----------------------------------------------------
   The original product.html uses a different class naming
   convention (e.g. `.product-gallery`, `.thumbs`, `.main-image`,
   `.product-info`, etc.) which was not styled in the new
   product page design.  To preserve backwards compatibility
   without removing any existing markup, we map those legacy
   classes to the updated `pd-*` classes by listing them as
   additional selectors.  This allows the same layout and
   appearance to apply whether the page is generated via
   JavaScript or built statically in HTML.
===================================================== */

/* TOP: container layout */
.pd-top,
.product-container {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 32px;
  align-items: flex-start;
}

/* GALLERY WRAPPER */
.pd-gallery,
.product-gallery {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 520px;
}

/* THUMBNAILS CONTAINER */
.pd-thumbs,
.thumbs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  overflow-x: auto;
}

/* THUMBNAIL IMAGES */
.pd-thumbs img,
.thumbs img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  opacity: .6;
  border: 2px solid transparent;
  transition: .2s;
}

/* Active thumbnail */
.pd-thumbs img.active,
.thumbs img.active {
  opacity: 1;
  border-color: var(--brand);
}

/* Main image wrapper */
.pd-mainimg,
.main-image {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

/* Main image */
.pd-mainimg img,
.main-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  animation: imageIntro .6s ease;
}

/* INFO PANEL */
.pd-info,
.product-info {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* TITLE BAR / PRODUCT NAME */
.pd-titlebar,
.product-title {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 18px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .5px;
}

/* FACTORY BOX */
.pd-factory,
.factory-box {
  margin: 16px;
  padding: 12px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  text-align: center;
  font-weight: 900;
  color: var(--dark);
}

/* DESCRIPTION */
.pd-desc,
.product-desc {
  text-align: center;
  padding: 0 20px;
  color: #555;
  line-height: 1.7;
  font-size: 14px;
}

/* FEATURE GRID */
.pd-features,
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
}

/* INDIVIDUAL FEATURE */
.pd-feature,
.feature {
  background: var(--dark);
  color: #fff;
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  font-weight: 700;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  will-change: transform;
}

/* Feature value */
.pd-feature span,
.feature span {
  display: block;
  font-weight: 900;
  color: var(--brand);
  margin-top: 4px;
  transition: color .3s ease;
}

/* Feature hover effect */
.pd-feature:hover,
.feature:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  cursor: pointer;
  background: linear-gradient(145deg, #0b2e5a, #123d75) !important;
}
.pd-feature:hover span,
.feature:hover span {
  color: var(--brand) !important;
}

/* SYSTEMS / DETECT LINES */
.pd-lines,
.lines {
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

.pd-lines strong,
.lines strong {
  color: #000;
}

/* RATING */
.pd-rating,
.rating {
  padding: 10px 20px;
  color: #f1b500;
  font-size: 18px;
}

/* TRUST ICONS / SUPPORT BOXES */
.pd-trusticons,
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}

.pd-trust,
.trust div {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

.pd-trust:hover,
.trust div:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  border-color: var(--brand);
  cursor: pointer;
}

/* PRICE BOX */
.pd-pricebox,
.price-box {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

/* CURRENCY TABS */
.pd-currencytabs,
.currency-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pd-currencytabs button,
.currency-tabs button {
  border: 1px solid var(--border);
  background: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.pd-currencytabs button.active,
.currency-tabs button.active {
  background: var(--brand);
  color: #fff;
}

/* PRICE TEXT */
.pd-price,
.price {
  font-size: 22px;
  font-weight: 900;
}

.pd-price span,
.price span {
  color: #d10000;
}

/* QUANTITY + CTA WRAPPER */
.pd-qtycta,
/*
 * Scope the action layout to the product details section only.  The previous
 * selector used `.actions` on its own, which inadvertently targeted the
 * header action pills on product pages and broke the header layout.  By
 * scoping this rule under the `.product-info` container we ensure it only
 * applies to the quantity/add‑to‑cart/checkout row within the product
 * description.
 */
/* Use flexbox for the quantity and call‑to‑action row so the buttons
   remain vertically centred and evenly spaced.  The quantity box gets a
   fixed width while the add to cart/checkout buttons flex to fill the
   available space. */
.product-info .actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 16px 16px;
}

/* Fixed width for the quantity box inside the actions row */
.product-info .actions .qty {
  flex: 0 0 120px;
}

/* Ensure CTA buttons fill the remaining space and centre their content */
.product-info .actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* QUANTITY BOX */
.pd-qty,
.qty {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.pd-qty button,
.qty button {
  height: 48px;
  width: 48px;
  font-size: 22px;
  font-weight: 900;
  transition: all .15s ease;
}

.pd-qty input,
.qty input {
  height: 48px;
  font-size: 18px;
  border: none;
  text-align: center;
}

.pd-qty button:hover,
.qty button:hover {
  background: var(--brand);
  color: #111;
}

.pd-qty button:active,
.qty button:active {
  transform: scale(.9);
}

/* CTA BUTTONS */
.pd-btn.cart,
.btn.cart {
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  height: 52px;
  font-size: 16px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  background: #d10000;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------
   UPDATED QUANTITY BOX DESIGN
   Override default grid-based quantity styling with a cleaner, more
   modern appearance.  Both the product detail page (.pd-qty) and the
   cart (.qty) utilise these styles.  Buttons sit flush to the input
   field and change colour on hover.
--------------------------------------------------------------------- */
.pd-qty,
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;
}
.pd-qty button,
.qty button {
  flex: 0 0 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: all .15s ease;
  color: #333;
}
.pd-qty input,
.qty input {
  flex: 1;
  height: 44px;
  border: none;
  outline: none;
  text-align: center;
  background: transparent;
  font-size: 18px;
}
.pd-qty button:hover,
.qty button:hover {
  background: var(--brand);
  color: #fff;
}
.pd-qty button:active,
.qty button:active {
  transform: scale(.9);
}

.pd-btn.cart:hover,
.btn.cart:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(209,0,0,.45);
}

.pd-btn.cart::after,
.btn.cart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  transform: translateX(-100%);
  transition: transform .4s ease;
}

.pd-btn.cart:hover::after,
.btn.cart:hover::after {
  transform: translateX(0);
}

/* CHECKOUT BUTTON */
.pd-btn.checkout,
.btn.checkout {
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  height: 52px;
  font-size: 16px;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  background: var(--brand);
  color: #111;
  position: relative;
  overflow: hidden;
}

.pd-btn.checkout:hover,
.btn.checkout:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(196,154,58,.55);
}

/* WHATSAPP BUTTON */
.pd-whatsapp,
.whatsapp {
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  background: #1bb35b;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-weight: 900;
  cursor: pointer;
  height: 54px;
  font-size: 16px;
  position: relative;
  animation: pulseWhats 2.5s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.pd-whatsapp:hover,
.whatsapp:hover {
  animation: none;
  transform: translateY(-3px) scale(1.02);
}

/* RELATED PRODUCTS WRAPPER */
.pd-related,
.related {
  margin-top: 60px;
}

.pd-related h2,
.related h2 {
  text-align: center;
  font-weight: 900;
  margin-bottom: 30px;
}

/* RELATED PRODUCTS GRID */
.pd-related-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* MINI CARD STYLING (for dynamically injected related products) */
.pd-mini-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 14px;
  text-align: center;
  transition: .25s ease;
}

.pd-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

.pd-mini-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
  background: #f7f7f7;
}

.pd-mini-card .t {
  margin-top: 10px;
  font-weight: 800;
  font-size: 14px;
}

.pd-mini-card .p {
  color: #c49a3a;
  font-weight: 900;
  margin: 6px 0;
}

.pd-mini-card a {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  background: #c49a3a;
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}

/* RESPONSIVE ADJUSTMENTS FOR STATIC CLASSES */
@media (max-width: 992px) {
  .product-container {
    grid-template-columns: 1fr;
  }
  .product-gallery {
    min-height: auto;
  }
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
  /* On small screens stack the quantity and CTA buttons vertically */
  .product-info .actions {
    flex-direction: column;
  }
  /* Reset fixed width on quantity box so it stretches full width on mobile */
  .product-info .actions .qty {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Ensure buttons also stretch across */
  .product-info .actions .btn {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}



/* QTY BUTTON ANIMATION */
.pd-qty button{
  transition: all .15s ease;
}

.pd-qty button:hover{
  background: var(--brand);
  color:#111;
}

.pd-qty button:active{
  transform: scale(.9);
}


.pd-btn:hover i,
.pd-whatsapp:hover i{
  animation: iconShake .4s ease;
}

@keyframes iconShake{
  0%{ transform: translateX(0); }
  30%{ transform: translateX(-3px); }
  60%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

/* ===============================
   PRODUCT IMAGE FADE ANIMATION
================================ */

#mainProductImage{
  transition: opacity .35s ease-in-out, transform .35s ease-in-out;
  opacity: 1;
}

#mainProductImage.fade-out{
  opacity: 0;
  transform: scale(0.98);
}


.pd-mainimg img{
  animation: imageIntro .6s ease;
}

@keyframes imageIntro{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}


/* ===============================
   PRODUCT IMAGE HOVER ANIMATION
================================ */

/* Image wrapper (safe even if wrapper class changes) */
#mainProductImage{
  transition: 
    transform 0.45s cubic-bezier(.25,.8,.25,1),
    box-shadow 0.45s ease;
  will-change: transform;
}

/* Hover effect */
#mainProductImage:hover{
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  cursor: zoom-in;
}


.pd-mainimg,
.pd-gallery{
  overflow: hidden;
  border-radius: 18px;
}


/* =========================================
   THUMBNAIL GALLERY HOVER ANIMATION
========================================= */

/* Thumbnail container images */
#thumbs img,
.product-thumbs img,
.pd-thumbs img{
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 6px;
  background: #fff;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Hover effect */
#thumbs img:hover,
.product-thumbs img:hover,
.pd-thumbs img:hover{
  transform: scale(1.12) translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  cursor: pointer;
}

/* Active thumbnail */
#thumbs img.active,
.product-thumbs img.active,
.pd-thumbs img.active{
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(196,154,58,0.45);
}







/* =====================================================
   HOVER ANIMATIONS (works for BOTH pip-* and pd-*)
   Put this at the VERY END of product-page.css
===================================================== */

/* ---------- Feature boxes: pip + pd ---------- */
.pip-feature,
.pd-feature{
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  will-change: transform;
}

.pip-feature:hover,
.pd-feature:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  cursor: pointer;
}

/* make sure bg change applies even if another rule sets background */
.pip-feature:hover{ background: linear-gradient(145deg, #0b2e5a, #123d75) !important; }
.pd-feature:hover{  background: linear-gradient(145deg, #0b2e5a, #123d75) !important; }

.pip-feature b,
.pd-feature span{
  transition: color .3s ease;
}

.pip-feature:hover b,
.pd-feature:hover span{
  color: var(--brand) !important;
}

/* ---------- Trust boxes: pip + pd ---------- */
.pip-trust > *,
.pd-trusticons .pd-trust{
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

.pip-trust > *:hover,
.pd-trusticons .pd-trust:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  border-color: var(--brand) !important;
  cursor: pointer;
}

/* =====================================================
   CATEGORY, WISHLIST & COMPARE (EXTRAS ROW)
   This row displays the product's category alongside
   buttons to add/remove the item from the wishlist and
   compare lists. The buttons reuse the pill styling from
   the header for consistency.
===================================================== */
.pd-extras{
  margin:16px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 16px;
}

/* ✅ CATEGORY STYLE (Primary Brand Color) */
.pd-category{
  font-size:14px;
  font-weight:900;
  color: var(--brand);
}

/* Category link text */
.pd-category a{
  color: var(--brand);
  text-decoration:none;
  font-weight:900;
}

/* Hover */
.pd-category a:hover{
  text-decoration: underline;
}

.pd-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.pd-action-btn{
  background:#f3f4f6;
  border:none;
  border-radius:999px;
  padding:8px 14px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:#0b2e5a;
}

.pd-action-btn i{
  font-size:14px;
}

.pd-action-btn:hover,
.pd-action-btn.active{
  background:var(--brand);
  color:#fff;
}




/* ===========================
   PRODUCT GALLERY (FIXED)
=========================== */

.product-gallery {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* ✅ Thumbnails */
.product-gallery .thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* ✅ FIX: force thumbs column height */
  height: 520px;           /* must be a fixed height */
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 8px;
}

/* ✅ Thumb image */
.product-gallery .thumbs img {
  width: 85px;
  height: 85px;
  object-fit: cover;

  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.2s;
  background: #fff;
}

/* Active thumb */
.product-gallery .thumbs img.active {
  border-color: #c49a3a;
  box-shadow: 0 6px 18px rgba(196, 154, 58, 0.35);
}

/* ✅ Main image */
.product-gallery .main-image {
  flex: 1;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #f6f6f6;
}

.product-gallery .main-image img {
  width: 100%;
  height: 520px;
  object-fit: contain;
}

/* ✅ Scrollbar style */
.product-gallery .thumbs::-webkit-scrollbar {
  width: 6px;
}

.product-gallery .thumbs::-webkit-scrollbar-thumb {
  background: #c49a3a;
  border-radius: 10px;
}

.product-gallery .thumbs::-webkit-scrollbar-track {
  background: transparent;
}

/* ===========================
   MOBILE RESPONSIVE FIX
=========================== */
@media (max-width: 768px) {
  .product-gallery {
    flex-direction: column-reverse;
    gap: 14px;
  }

  .product-gallery .main-image img {
    height: 360px;
  }

  .product-gallery .thumbs {
    flex-direction: row;
    height: auto;
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-right: 0;
    padding-bottom: 6px;
  }

  .product-gallery .thumbs img {
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
  }
}




.product-image-box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 50px; /* creates space so badge never overlaps image */
}

.product-image-box img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 15px;

  background: #c49a3a;
  color: #fff;
  font-weight: 700;
  font-size: 13px;

  padding: 6px 14px;
  border-radius: 20px;
  z-index: 10;
}



/* ✅ Category color (primary brand color) */
.pd-category b{
  color: var(--brand) !important;
}

.pd-category a{
  color: var(--brand) !important;
  font-weight: 900;
}

.pd-category a:hover{
  text-decoration: underline;
}



/* ✅ FORCE category brand color (override all old styles) */
#productCategories,
#productCategories b,
#productCategories a{
  color: var(--brand) !important;
}



#productCategories b{
  color: var(--brand) !important;
}

#productCategories a{
  color: var(--dark) !important;
  font-weight: 900;
}