/* =========================================================
   14. RESPONSIVE / MOBILE
   (Sab breakpoints yaha group kiye gaye hai — top se bottom
   large screen se chhoti screen tak, taaki koi conflict na ho)
   ========================================================= */

/* ---------- Laptop / small desktop (<=1100px) ---------- */
@media(max-width:1100px){

  .buy-row{
    flex-wrap:wrap;
  }

  .price-side{
    min-width:100%;
  }
}


/* ---------- Tablet (<=1000px) ---------- */
@media(max-width:1000px){

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


/* ---------- Tablet / small laptop (<=900px) ---------- */
@media(max-width:900px){

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

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

  .pd-img-box{
    height:420px;
  }
}


/* ---------- Mobile (<=768px) ---------- */
@media(max-width:768px){

  .pd-container{
    margin:60px auto;
    padding:0 14px;
  }

  /* ---- FORCE PROPER ORDER: Image -> Thumbs -> Title -> Info -> Buy Row -> Cart Button ----
     .pd-top has 2 wrapper divs (left col = image+thumbs, right col = title+info+buy).
     display:contents makes those wrappers "invisible" so their children become
     direct flex items of .pd-top and can be reordered with `order`.
     ⚠️ If your left/right wrapper divs have different class names, target those
     instead of ".pd-top > div" below. */

  .pd-top{
    display:flex;
    flex-direction:column;
  }

  .pd-top > div{
    display:contents;
  }

  .pd-img-box{ order:1; }
  .thumb-row{ order:2; margin-top:12px; }
  .pd-title{ order:3; margin-top:20px; }
  .info-box{ order:4; }
  .buy-row{ order:5; }
  .trust-box{ order:6; }
  .ship-box{ order:7; }
  .big-cart,
  .detail-cart-action{ order:8; }

  .pd-breadcrumb{
    margin:14px 0 20px;
    font-size:12px;
    gap:6px;
  }

  /* buy row stacks nicely on mobile */
  .buy-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:15px 10px;
    padding:16px 0;
  }

  .price-side{
    min-width:0;
    grid-column:1 / -1;
  }

  .pd-price-line{
    flex-wrap:wrap;
  }

  .mini-select,
  .single-variant,
  .qty,
  .wish-box{
    width:100%;
  }

  /* tabs scroll horizontally on mobile */
  .pd-tab-head{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .tab-btn{
    min-width:220px;
  }

  .pd-tab-content{
    padding:25px;
  }

  .additional-info-list{
    grid-template-columns:1fr;
  }

  .additional-info-item{
    flex-direction:column;
    gap:8px;
  }

  .additional-info-item strong{
    min-width:auto;
    white-space:normal;
  }

  .review-head{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
}


/* ---------- Small mobile (<=600px) ---------- */
@media(max-width:600px){

  .p-wrapper{
    grid-template-columns:1fr;
  }

  .pd-main-price{
    font-size:20px;
  }

  .pd-price-line{
    gap:6px;
  }

  .pd-img-box{
    height:340px;
    border-radius:16px;
  }

  .thumb-row img{
    width:70px;
    height:70px;
  }

  .pd-title{
    font-size:22px;
  }

  .rel-grid{
    grid-template-columns:1fr;
  }

  .p-img img{
    width:150px;
    height:150px;
  }

  .btn{
    width:100%;
    padding:14px 0;
  }
}


/* ---------- Extra small mobile (<=420px) ---------- */
@media(max-width:420px){

  .pd-container{
    padding:0 10px;
  }

  .pd-main-price{
    font-size:18px;
    padding:0 8px;
  }

  .pd-old-price,
  .pd-discount{
    font-size:13px;
  }

  .mini-select,
  .single-variant,
  .qty,
  .wish-box{
    height:38px;
  }

  .qty button{
    width:32px;
    height:38px;
    font-size:17px;
  }

  .detail-cart-qty{
    height:42px;
  }

  .detail-cart-qty button{
    width:48px;
    height:42px;
    font-size:19px;
  }

  .tab-btn{
    padding:16px 14px;
    font-size:12.5px;
    min-width:170px;
  }

  .pd-tab-content{
    padding:18px;
    font-size:14px;
  }

  .additional-info-item{
    padding:14px;
  }
}/* =========================================================
   PRODUCT PAGE — CLEAN CSS
   Sections:
   1. Container
   2. Breadcrumb
   3. Top Grid (Image + Info)
   4. Title / Info Box
   5. Buy Row (Price, Weight, Qty, Wishlist)
   6. Trust / Shipping Box
   7. Add To Cart Buttons
   8. Related Products (Grid style)
   9. Related Products (Card style - p-wrapper)
   10. Product Tabs
   11. Additional Info List
   12. Review Form
   13. Customer Reviews
   14. RESPONSIVE / MOBILE (all breakpoints, grouped at end)
   ========================================================= */


/* =========================
   1. CONTAINER
========================= */
.pd-container{
  width:100%;
  max-width:1400px;
  margin:120px auto;
  font-family:Poppins, Arial;
}


/* =========================
   2. BREADCRUMB
========================= */
.pd-breadcrumb{
  width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;

  margin:18px 0 28px;

  font-size:13px;
  color:#777;
}

.pd-breadcrumb a{
  color:#777;
  text-decoration:none;
  transition:.2s;
}

.pd-breadcrumb a:hover{
  color:#1a2a1a;
}

.pd-breadcrumb span{
  color:#aaa;
}

.pd-breadcrumb strong{
  color:#1a2a1a;
  font-weight:600;
}


/* =========================
   3. TOP GRID (IMAGE + INFO)
========================= */
.pd-top{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:40px;
}

/* IMAGE */
.pd-img-box{
  width:100%;
  height:600px;
  overflow:hidden;
  border-radius:22px;
  background:#f8f8f8;
}

.pd-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.4s;
}

/* THUMBNAILS */
.thumb-row{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:20px;
  flex-wrap:wrap;
}

.thumb-row img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  border:2px solid #eee;
  cursor:pointer;
  transition:.3s;
}

.thumb-row img:hover{
  border-color:#6b3e26;
  transform:scale(1.05);
}


/* =========================
   4. TITLE / INFO BOX
========================= */
.pd-title{
  font-size:28px;
  font-weight:700;
  margin-bottom:6px;
}

.info-box{
  margin-top:12px;
}

.info-title{
  font-weight:700;
  color:#1a2a1a;
  margin:10px 0 4px;
}

.info-text{
  font-size:14px;
  color:#555;
  line-height:1.6;
  background:#fcfaf8;
  padding:10px;
  border-radius:10px;
}

/* Rich text / bullets inside description */
.product-rich-text{
  white-space:normal;
  line-height:1.8;
}

.product-rich-text br{
  display:block;
  content:"";
  margin-top:5px;
}

.product-rich-text ul,
.product-rich-text ol{
  margin:8px 0 8px 20px;
  padding:0;
}

.product-rich-text li{
  margin-bottom:6px;
  line-height:1.7;
}


/* =========================
   5. BUY ROW (PRICE, WEIGHT, QTY, WISHLIST)
========================= */
.buy-row{
  display:flex;
  align-items:flex-end;
  gap:16px;

  width:100%;
  margin-top:22px;
  padding:18px 0;

  border-top:1px solid #eeeeee;
  border-bottom:1px solid #eeeeee;
}

/* ---- shared label style ---- */
.price-side,
.pd-price-item,
.mini{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.price-side{
  min-width:210px;
}

.pd-price-item > label,
.mini > label{
  display:block;
  margin:0;

  font-size:12px;
  line-height:1;
  font-weight:700;
  color:#777;

  text-transform:uppercase;
  letter-spacing:.4px;
}

/* ---- price ---- */
.pd-price-line{
  min-height:42px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.pd-main-price{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:42px;
  padding:0 12px;

  background:#ffe600;
  color:#111;

  border-radius:8px;

  font-size:21px;
  font-weight:800;
  line-height:1;

  white-space:nowrap;
}

.pd-old-price{
  color:#999;
  font-size:15px;
  font-weight:500;

  text-decoration:line-through;
  white-space:nowrap;
}

.pd-discount{
  color:#168348;
  font-size:15px;
  font-weight:800;
  white-space:nowrap;
}

/* Small in-line price variant (used in related cards) */
.main-p{ font-size:24px; font-weight:700; color:#6b3e26; }
.old-p{ color:#999; font-size:14px; text-decoration:line-through; }
.off-p{
  background:#e8fff1;
  color:#1b8f3a;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
}

/* ---- weight / variant dropdown ---- */
.mini-select{
  height:42px;
  min-width:125px;
  width:100%;

  padding:0 34px 0 12px;

  border:1px solid #dddddd;
  border-radius:8px;

  background:#fff;

  font-size:14px;
  font-weight:600;
  color:#222;

  outline:none;
  cursor:pointer;
}

.single-variant{
  height:42px;
  min-width:110px;
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 14px;

  border:1px solid #dddddd;
  border-radius:8px;

  background:#fafafa;
  color:#222;

  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

/* ---- quantity stepper ---- */
.qty{
  height:42px;
  width:100%;

  display:flex;
  align-items:center;

  overflow:hidden;

  border:1px solid #dddddd;
  border-radius:8px;

  background:#fff;
}

.qty button{
  width:38px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  background:transparent;
  color:#222;

  font-size:20px;
  font-weight:500;
  cursor:pointer;
}

.qty button:hover{
  background:#f5f5f5;
}

#detailQty{
  min-width:38px;
  text-align:center;

  font-size:14px;
  font-weight:700;
  color:#111;
}

/* ---- wishlist button ---- */
.wish-box{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #dddddd;
  border-radius:8px;

  background:#fff;

  font-size:23px;
  cursor:pointer;

  transition:.2s ease;
}

.wish-box:hover{
  background:#f8f8f8;
}

.wish-box.active{
  background:#111;
  color:#fff;
  border-color:#111;
}


/* =========================
   6. TRUST / SHIPPING BOX
========================= */
.trust-box{
  margin-top:12px;

  display:flex;
  gap:20px;
  flex-wrap:wrap;

  border:1px solid #cfe2ff;
  background:#f0f7ff;

  padding:10px;
  border-radius:12px;

  font-size:13px;
  color:#1a2b8f;
}

.ship-box{
  margin-top:10px;

  background:#fff4e5;
  color:#a85c00;

  padding:10px;
  border-radius:12px;

  font-size:13px;
}


/* =========================
   7. ADD TO CART BUTTONS
========================= */
.big-cart{
  margin-top:12px;

  width:100%;
  background:#1a2a1a;
  color:#fff;

  padding:14px;
  border:none;
  border-radius:12px;

  font-size:16px;
  font-weight:600;
}

.detail-cart-action{
  width:100%;
  margin-top:12px;
}

.detail-cart-qty{
  width:100%;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#132f1a;
  border-radius:10px;
  overflow:hidden;
}

.detail-cart-qty button{
  width:60px;
  height:46px;

  border:0;
  background:transparent;
  color:#fff;

  font-size:22px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s;
}

.detail-cart-qty button:hover{
  background:rgba(255,255,255,0.10);
}

.detail-cart-number{
  min-width:55px;
  text-align:center;
  color:#fff;

  font-size:16px;
  font-weight:700;
}

.detail-cart-plus,
.detail-cart-minus{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================
   8. RELATED PRODUCTS — GRID STYLE
========================= */
.rel-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:40px;
}

.rel-card{
  background:#fcfaf8;
  border-radius:20px;
  padding:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  text-align:center;
}

.rel-img img{
  width:170px;
  height:170px;
  object-fit:contain;
}

.rel-title{
  font-size:15px;
  margin:6px 0;
}

.rel-price{
  font-weight:700;
  color:#6b3e26;
}

.rel-old{
  color:#999;
  text-decoration:line-through;
  font-size:12px;
}

.rel-btn{
  width:100%;
  background:#6b3e26;
  color:#fff;
  padding:10px;
  border-radius:30px;
  border:none;
  margin-top:8px;
}


/* =========================
   9. RELATED PRODUCTS — CARD STYLE (p-wrapper)
========================= */
.p-wrapper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
}

.p-card{
  background:#fcfaf8;
  border-radius:22px;
  padding:16px;
  position:relative;

  display:flex;
  flex-direction:column;

  border:1px solid #f0e6da;
  box-shadow:0 10px 22px rgba(0,0,0,.06);

  transition:.3s;
}

.p-card:hover{
  transform:translateY(-5px);
}

.card-link{
  position:absolute;
  inset:0;
  z-index:1;
}

.p-card form{
  position:relative;
  z-index:2;
}

.p-img{
  text-align:center;
}

.p-img img{
  width:190px;
  height:190px;
  object-fit:contain;
}

.tag{
  position:absolute;
  top:3px;
  left:-4px;

  background:#e63946;
  color:#fff;

  font-size:10px;
  padding:3px 7px;
  border-radius:6px;
}

.off{
  position:absolute;
  top:24px;
  left:-5px;

  background:#1b8f3a;
  color:#fff;

  font-size:10px;
  padding:3px 7px;
  border-radius:6px;
}

.side-icons{
  position:absolute;
  right:-5px;
  top:-5px;
  z-index:3;
}

.wish{
  background:#fff;
  border:1px solid #eee;

  width:32px;
  height:32px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  color:#999;
}

.wish.active{
  color:#e63946;
}

.cat{
  font-size:12px;
  color:#666;
  margin-top:8px;
}

.p-card h3{
  font-size:16px;
  font-weight:600;
  margin:6px 0 10px;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:6px 0;
}

.label{
  font-size:12px;
  color:#333;
}

.weight select{
  padding:4px 10px;
  border-radius:20px;
  border:1px solid #ddd;
  width:90px;
  font-size:12px;
}

.price-box{
  display:flex;
  flex-direction:column;
  margin-top:6px;
}

.main-price{
  color:#1a2a1a;
  font-size:17px;
  font-weight:700;
}

.old-price{
  color:#999;
  font-size:12px;
  text-decoration:line-through;
  margin-top:2px;
}

.cart-btn{
  width:100%;
  background:#1a2a1a;
  color:#fff;

  padding:11px;
  border-radius:30px;

  margin-top:10px;
  border:none;
}

/* price + button row inside p-card */
.p-card .buy-row{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:10px;
  padding:0;
  border:none;
}

.p-card .buy-row .cart-btn{
  width:auto;
  padding:8px 14px;
  margin:0;
}

.p-card .buy-row .price-box{
  margin:0;
}

.short-line{
  font-size:12px;
  color:#b63b3b;
  margin:-4px 0 8px;
}


/* =========================
   10. PRODUCT TABS
========================= */
.pd-tabs{
  max-width:1400px;
  margin:70px auto;
  border-radius:22px;
  overflow:hidden;
}

.pd-tab-head{
  display:flex;
  border-bottom:1px solid #ece6da;
  background:#fcfaf6;
}

.tab-btn{
  flex:1;
  text-align:center;
  padding:22px 20px;

  font-size:14px;
  font-weight:700;
  letter-spacing:1px;

  cursor:pointer;
  color:#666;
  transition:.35s;
  position:relative;
  user-select:none;
}

.tab-btn:hover{
  color:#17351f;
  background:#f6f2ea;
}

.tab-btn.pd-active{
  color:#17351f;
  background:#fff;
}

.tab-btn.pd-active:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:4px;
  background:#17351f;
}

.pd-tab-content{
  padding:40px;
  animation:fadeTab .35s ease;
  line-height:1.9;
  font-size:16px;
  color:#555;
}

.pd-tab-content p{
  margin:0 0 18px;
}

@keyframes fadeTab{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}


/* =========================
   11. ADDITIONAL INFO LIST
========================= */
.additional-info-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  padding:8px 0;
}

.additional-info-item{
  display:flex;
  align-items:flex-start;
  gap:12px;

  background:#faf8f3;
  padding:18px;
  border-radius:16px;

  border:1px solid #ece6da;
  transition:.3s;

  font-size:14px;
  line-height:1.6;
  color:#444;
}

.additional-info-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,0,0,.06);
}

.additional-info-item .info-bullet{
  font-size:22px;
  color:#17351f;
  margin-top:-2px;
  flex-shrink:0;
}

.additional-info-item strong{
  display:block;
  min-width:150px;

  color:#17351f;
  font-weight:700;
  white-space:nowrap;
}

.additional-info-item span:last-child{
  color:#555;
}


/* =========================
   12. REVIEW FORM
========================= */
.form-group{
  margin-bottom:22px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color:#17351f;
}

.form-control{
  width:100%;
  box-sizing:border-box;

  padding:14px 18px;
  border-radius:12px;
  border:1px solid #ddd;

  background:#fff;
  font-size:15px;
  transition:.3s;
}

.form-control:focus{
  border-color:#17351f;
  outline:none;
  box-shadow:0 0 0 4px rgba(23,53,31,.08);
}

textarea.form-control{
  height:140px;
  resize:vertical;
}

.btn{
  background:#17351f;
  color:#fff;

  padding:14px 34px;
  border:none;
  border-radius:40px;

  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.btn:hover{
  background:#0d2513;
  transform:translateY(-2px);
}


/* =========================
   13. CUSTOMER REVIEWS
========================= */
.pd-tab-content h4{
  font-size:26px;
  margin:40px 0 25px;
  color:#17351f;
  font-family:'Cormorant Garamond',serif;
}

.review-card{
  background:#fcfaf6;
  border:1px solid #ece6da;
  border-radius:18px;

  padding:22px;
  margin-bottom:18px;
  transition:.3s;
}

.review-card:hover{
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.review-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.review-name{
  font-weight:700;
  color:#17351f;
}

.review-stars{
  color:#ffb400;
  font-size:17px;
  letter-spacing:2px;
}

.review-text{
  line-height:1.8;
  color:#666;
}


/* =========================================================
   13B. RECENTLY VIEWED — FLIPKART STYLE HORIZONTAL SLIDER
   HTML pattern needed:
   <div class="recent-viewed">
     <h3 class="recent-viewed-title">Recently Viewed</h3>
     <div class="recent-viewed-track">
       <div class="recent-card">
         <div class="recent-img"><img src="..." /></div>
         <div class="recent-name">Product Name</div>
         <div class="recent-price">₹380</div>
       </div>
       ... more .recent-card ...
     </div>
   </div>
   ========================================================= */

.recent-viewed{
  margin-top:40px;
}

.recent-viewed-title{
  font-size:18px;
  font-weight:700;
  color:#1a2a1a;
  margin-bottom:14px;
}

.recent-viewed-track{
  display:flex;
  gap:14px;

  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  padding-bottom:8px;

  /* hide scrollbar but keep it scrollable */
  scrollbar-width:none;
}

.recent-viewed-track::-webkit-scrollbar{
  display:none;
}

.recent-card{
  flex:0 0 auto;
  width:130px;

  scroll-snap-align:start;

  background:#fcfaf8;
  border:1px solid #f0e6da;
  border-radius:14px;

  padding:10px;
  text-align:center;
}

.recent-img{
  width:100%;
  height:110px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  border-radius:10px;

  background:#fff;
  margin-bottom:8px;
}

.recent-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.recent-name{
  font-size:12px;
  color:#333;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  margin-bottom:4px;
}

.recent-price{
  font-size:13px;
  font-weight:700;
  color:#6b3e26;
}


/* =========================================================
   14. RESPONSIVE / MOBILE
   (Sab breakpoints yaha group kiye gaye hai — top se bottom
   large screen se chhoti screen tak, taaki koi conflict na ho)
   ========================================================= */

/* ---------- Laptop / small desktop (<=1100px) ---------- */
@media(max-width:1100px){

  .buy-row{
    flex-wrap:wrap;
  }

  .price-side{
    min-width:100%;
  }
}


/* ---------- Tablet (<=1000px) ---------- */
@media(max-width:1000px){

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


/* ---------- Tablet / small laptop (<=900px) ---------- */
@media(max-width:900px){

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

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

  .pd-img-box{
    height:420px;
  }
}


/* ---------- Mobile (<=768px) ---------- */
@media(max-width:768px){

  .pd-container{
    margin:60px auto;
    padding:0 14px;
  }

  /* ---- FORCE PROPER ORDER: Image -> Thumbs -> Title -> Info -> Buy Row -> Cart Button ----
     .pd-top has 2 wrapper divs (left col = image+thumbs, right col = title+info+buy).
     display:contents makes those wrappers "invisible" so their children become
     direct flex items of .pd-top and can be reordered with `order`.
     ⚠️ If your left/right wrapper divs have different class names, target those
     instead of ".pd-top > div" below. */

  .pd-top{
    display:flex;
    flex-direction:column;
  }

  .pd-top > div{
    display:contents;
  }

  .pd-img-box{ order:1; }
  .thumb-row{ order:2; margin-top:12px; }
  .pd-title{ order:3; margin-top:20px; }
  .info-box{ order:4; }
  .buy-row{ order:5; }
  .trust-box{ order:6; }
  .ship-box{ order:7; }
  .big-cart,
  .detail-cart-action{ order:8; }

  .pd-breadcrumb{
    margin:14px 0 20px;
    font-size:12px;
    gap:6px;
  }

  /* buy row stacks nicely on mobile */
  .buy-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:15px 10px;
    padding:16px 0;
  }

  .price-side{
    min-width:0;
    grid-column:1 / -1;
  }

  .pd-price-line{
    flex-wrap:wrap;
  }

  .mini-select,
  .single-variant,
  .qty,
  .wish-box{
    width:100%;
  }

  /* tabs scroll horizontally on mobile */
  .pd-tab-head{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .tab-btn{
    min-width:220px;
  }

  .pd-tab-content{
    padding:25px;
  }

  .additional-info-list{
    grid-template-columns:1fr;
  }

  .additional-info-item{
    flex-direction:column;
    gap:8px;
  }

  .additional-info-item strong{
    min-width:auto;
    white-space:normal;
  }

  .review-head{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
}


/* ---------- Small mobile (<=600px) ---------- */
@media(max-width:600px){

  .p-wrapper{
    grid-template-columns:1fr;
  }

  .pd-main-price{
    font-size:20px;
  }

  .pd-price-line{
    gap:6px;
  }

  .pd-img-box{
    height:340px;
    border-radius:16px;
  }

  .thumb-row img{
    width:70px;
    height:70px;
  }

  .pd-title{
    font-size:22px;
  }

  .rel-grid{
    grid-template-columns:1fr;
  }

  .p-img img{
    width:150px;
    height:150px;
  }

  .btn{
    width:100%;
    padding:14px 0;
  }
}


/* ---------- Extra small mobile (<=420px) ---------- */
@media(max-width:420px){

  .pd-container{
    padding:0 10px;
  }

  .pd-main-price{
    font-size:18px;
    padding:0 8px;
  }

  .pd-old-price,
  .pd-discount{
    font-size:13px;
  }

  .mini-select,
  .single-variant,
  .qty,
  .wish-box{
    height:38px;
  }

  .qty button{
    width:32px;
    height:38px;
    font-size:17px;
  }

  .detail-cart-qty{
    height:42px;
  }

  .detail-cart-qty button{
    width:48px;
    height:42px;
    font-size:19px;
  }

  .tab-btn{
    padding:16px 14px;
    font-size:12.5px;
    min-width:170px;
  }

  .pd-tab-content{
    padding:18px;
    font-size:14px;
  }

  .additional-info-item{
    padding:14px;
  }
}