/* ========================================
   PRODUCT DESCRIPTION PAGE STYLES
   ======================================== */

/* ===== BASE ===== */

body {
    background: linear-gradient(120deg,#0f2027,#2c5364,#00c6ff,#0072ff);
    background-size: 400% 400%;
    animation: gradientBG 18s ease infinite;
    margin: 0; padding: 0;
    font-family: Arial, sans-serif; line-height: 1.6;
}
@keyframes gradientBG {
  0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}

/* ===== BACK BUTTON ===== */
.page-actions{max-width:1200px;margin:16px auto 0;padding:0 16px}
.back-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.65rem 1rem;border-radius:999px;
  border:1px solid #e5f0ff;background:rgba(255,255,255,.92);
  text-decoration:none;font-weight:800;font-size:.97rem;color:#0a66ff;
  box-shadow:0 6px 18px rgba(0,114,255,.12);
  transition:background .2s, box-shadow .2s, transform .05s, color .2s, border-color .2s;
}
.back-btn i{font-size:.95rem}
.back-btn:hover{
  background:linear-gradient(135deg,#00c6ff,#0072ff); color:#fff; border-color:transparent;
  box-shadow:0 10px 26px rgba(0,114,255,.28); transform:translateY(-1px);
}
.back-btn:active{transform:translateY(0)}
@media (max-width:640px){ .back-btn{width:100%; justify-content:center;} }

.product-details{
  max-width:1200px; margin:40px auto; padding:30px;
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
  background:rgba(255,255,255,.5);
  border-radius:20px; backdrop-filter:blur(10px);
  box-shadow:0 8px 32px rgba(0,198,255,.1);
}

/* ===== IMAGE SIDE ===== */

.product-image{position:relative; overflow:visible; border-radius:15px; align-self:start;}
.product-gallery{
  position:relative; cursor:pointer; border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.1);
}
.product-gallery .main-image{
  width:100%; height:300px; aspect-ratio:4/3; object-fit:contain; display:block;
  transition:transform .3s ease;
}

@media (max-width:1024px){
    .product-gallery .main-image {
    width: 100%;
    height: 450px;
    aspect-ratio: 4 / 3;
    /* object-fit: cover; */
    display: grid;
    transition: transform .3s ease;
    }

}




.product-gallery .main-image:hover{transform:scale(1.02)}
.product-image.single .product-gallery .main-image{aspect-ratio:5/4}

/* badges */
.image-counter{
  position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(0,0,0,.85); color:#fff; padding:6px 10px;
  border-radius:16px; font-size:12px; font-weight:700; backdrop-filter:blur(5px);
}
.status-badge{
  position:absolute; top:16px; left:16px; z-index:3;
  padding:8px 14px; border-radius:999px; font-weight:800; text-transform:uppercase;
  font-size:.75em; letter-spacing:.4px; backdrop-filter:blur(5px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.status-available{background:rgba(46,213,115,.95); color:#fff}
.status-unavailable{background:rgba(255,71,87,.95); color:#fff}

/* no image */
.no-image{
  width:100%; height:280px; border:2px dashed #dee2e6;
  background:#f8f9fa; border-radius:10px; display:grid; place-items:center;
  color:#6c757d; font-size:18px; gap:10px;
}

/* thumbnails */
.thumb-strip{
  margin-top:12px; display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:6px 2px 4px; scrollbar-width:thin;
}
.thumb-strip::-webkit-scrollbar{height:6px}
.thumb-strip::-webkit-scrollbar-thumb{background:#cfe9ff; border-radius:6px}
.thumb-item{
  flex:0 0 auto; width:72px; height:72px; border-radius:12px; overflow:hidden;
  border:2px solid transparent; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
  cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
  opacity:.95;
}
.thumb-item:hover{transform:translateY(-2px)}
.thumb-item.active{border-color:#0aa3ff; box-shadow:0 4px 14px rgba(10,163,255,.25); opacity:1}
.thumb-item img{width:100%; height:100%; object-fit:cover; display:block}
.product-image.single .thumb-strip{display:none}

/* ===== INFO SIDE ===== */

.product-info{padding:10px 20px; color:#333; display:flex; flex-direction:column; gap:12px}
.product-info h1{margin:0; color:#222; line-height:1.2; text-shadow:0 2px 4px rgba(0,0,0,.08)}

.meta-row{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.category-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
  background:linear-gradient(135deg, rgba(0,198,255,.15), rgba(0,114,255,.18));
  border:1px solid rgba(0,150,255,.35); color:#0a66ff; border-radius:999px;
  font-size:.9em; font-weight:700; text-transform:capitalize; line-height:1; white-space:nowrap;
}
.category-chip i{font-size:.95em}
.teaser-inline{
  color:#2f2f2f; font-size:1rem; line-height:1.45;
  max-width:60ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.95;
}

.product-info .price{
  font-size:2em; margin-top:6px; text-shadow:0 2px 4px rgba(0,123,255,.12);
}

/* buttons */
.action-buttons{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap}
.action-button{
  padding:12px 24px; border:none; border-radius:30px; font-size:1.05em; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; transition:all .25s ease; min-width:140px;
}
.buy-now{background:linear-gradient(135deg,#00c6ff,#0072ff); color:#fff; box-shadow:0 4px 15px rgba(0,198,255,.3)}
.add-to-cart{background:rgba(255,255,255,.9); color:#007bff; border:2px solid #00c6ff; backdrop-filter:blur(10px)}
.action-button:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,198,255,.28)}
.buy-now:hover{background:linear-gradient(135deg,#0072ff,#00c6ff)}
.add-to-cart:hover{background:rgba(0,198,255,.1); border-color:#007bff}

/* share block */
.share-block{margin-top:12px; padding:16px; background:rgba(255,255,255,.9); border:1px solid #e6f2ff; border-radius:14px; box-shadow:0 4px 16px rgba(0,198,255,.06)}
.share-title{font-weight:800; color:#0a66ff; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.share-buttons{display:flex; flex-wrap:wrap; gap:10px}
.share-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid #d9ecff; background:#fff; color:#0a66ff; text-decoration:none; font-weight:700; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.share-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,114,255,.15)}
.share-btn.native-share{background:linear-gradient(135deg,#00c6ff,#0072ff); color:#fff; border:none}
.share-btn.copy-link{background:#f3f9ff}
.share-btn.whatsapp{color:#25D366; border-color:#c8f2dc}
.share-btn.facebook{color:#1877F2; border-color:#d6e8ff}
.share-btn.twitter{color:#000}
.share-feedback{margin-top:8px; font-size:.92em; color:#2f855a}

/* copy link modal */
.copylink-modal{display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.6); backdrop-filter:blur(4px)}
.copylink-modal.active{display:flex; align-items:center; justify-content:center}
.copylink-dialog{width:min(92%,520px); background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden}
.copylink-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#f1f5f9; font-weight:800; color:#0a66ff}
.copylink-close{background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:#334155}
.copylink-body{padding:16px}
#copyLinkInput{width:100%; padding:12px; font-size:14px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc}
.copylink-actions{display:flex; gap:10px; margin-top:12px}
.copylink-btn{flex:1 1 0; padding:10px 12px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; font-weight:700; cursor:pointer}
.copylink-btn.primary{background:linear-gradient(135deg,#00c6ff,#0072ff); border:none; color:#fff}
.copylink-hint{margin-top:8px; font-size:.9em; color:#475569}

/* delivery card */
.delivery-info{
  margin-top:12px; padding:22px; background:rgba(255,255,255,.85);
  border-radius:15px; box-shadow:0 4px 16px rgba(0,198,255,.05); backdrop-filter:blur(10px);
}
.delivery-info h2{margin:0 0 12px; color:#333; font-size:1.35em; font-weight:700}
.delivery-info ul{margin:0; padding:0; list-style:none}
.delivery-info li{margin:10px 0; display:flex; align-items:center; gap:12px; color:#444}
.delivery-info i{color:#007bff; font-size:1.15em; width:24px; text-align:center}

/* ===== TABS ===== */

.product-tabs{
  margin-top:32px; background:rgba(255,255,255,.5); border-radius:20px;
  padding:26px; box-shadow:0 8px 32px rgba(0,198,255,.1); backdrop-filter:blur(10px);
}
.tab-buttons{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; justify-content:center}
.tab-btn{
  padding:12px 22px; border:none; background:rgba(255,255,255,.85); border-radius:12px; cursor:pointer;
  font-size:1em; color:#666; transition:all .25s ease; font-weight:700; min-width:120px; text-align:center; backdrop-filter:blur(5px);
}
.tab-btn:hover{background:rgba(0,198,255,.12); color:#007bff; transform:translateY(-2px)}
.tab-btn.active{background:linear-gradient(135deg,#007bff,#00c6ff); color:#fff; box-shadow:0 4px 15px rgba(0,123,255,.3)}
.tab-content{background:#fff; padding:28px; border-radius:15px; min-height:260px; box-shadow:0 4px 20px rgba(0,0,0,.05)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ===== RELATED ===== */

.related-products{
  margin-top:50px; padding:26px; background:rgba(255,255,255,.5);
  border-radius:20px; box-shadow:0 8px 32px rgba(0,198,255,.1); backdrop-filter:blur(10px);
}
.related-products h2{text-align:center; color:#333; margin-bottom:24px; font-size:2em; font-weight:800}
.products-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; padding:12px 0}
.product-card{background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 4px 16px rgba(0,198,255,.05); transition:transform .25s ease, box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,198,255,.15)}
.product-card a{text-decoration:none; color:inherit; display:block}
.product-card .product-image{position:relative; height:100%; overflow:hidden}
.product-card .product-image img{max-width: 100%; height: 100%; display: flex; transition:transform .25s ease}
.product-card:hover .product-image img{transform:scale(1.05)}
.product-card .product-info{padding:18px; text-align: center; background:#fff}
.product-card h3{margin:0 0 10px; font-size:1.25em; color:#333; font-weight:800}
.product-card .price{color:#007bff; font-size:1.15em; font-weight:800}

/* ===== MODAL ===== */

.gallery-modal{display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.95); backdrop-filter:blur(10px)}
.gallery-modal.active{display:flex; align-items:center; justify-content:center}
.modal-content{position:relative; max-width:90%; max-height:90%; text-align:center; padding:20px}
.modal-image{max-width:100%; max-height:80vh; object-fit:contain; border-radius:15px; box-shadow:0 15px 40px rgba(0,0,0,.6)}
.modal-counter{position:absolute; top:-50px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.95); color:#333; padding:10px 20px; border-radius:25px; font-weight:800; font-size:14px; backdrop-filter:blur(10px); box-shadow:0 4px 15px rgba(0,0,0,.2)}
.modal-close{position:absolute; top:-60px; right:0; color:#fff; font-size:34px; font-weight:900; width:48px; height:48px; border:none; background:none; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:all .25s ease}
.modal-close:hover{color:#ddd; background:rgba(255,255,255,.1); transform:scale(1.08)}
.modal-nav{position:absolute; top:50%; transform:translateY(-50%); background:linear-gradient(135deg,#0072ff,#00c6ff); color:#fff; border:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:20px; box-shadow:0 6px 20px rgba(0,114,255,.5); cursor:pointer; transition:all .25s ease}
.modal-nav:hover{background:linear-gradient(135deg,#0056cc,#0099e6); transform:translateY(-50%) scale(1.08)}
.modal-prev{left:24px}.modal-next{right:24px}
.modal-nav:disabled{opacity:.5; cursor:not-allowed; background:linear-gradient(135deg,#666,#999); box-shadow:none}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width:1024px){
  .product-details{max-width:95%; display: block; margin:30px auto; padding:25px; gap:32px; grid-template-columns:1fr 1fr}
  .product-info h1{font-size:2em}
  .product-info .price{font-size:1.85em}
  .thumb-item{width:64px; height:64px}
}

/* Mobile */
@media (max-width:768px){
  .product-details{grid-template-columns:1fr; gap:14px; margin:14px; padding:14px; border-radius:16px; overflow:hidden}
  /* >>> critical: cap main image height so it never dominates */
  .product-gallery .main-image{aspect-ratio:auto; max-height:56vh; object-fit:contain}
  .image-counter{top:8px; right:8px; padding:4px 8px; font-size:11px; border-radius:14px}
  .status-badge{top:8px; left:8px; padding:6px 10px; font-size:.7em}

  .thumb-strip{margin-top:10px; gap:8px; padding:2px 0}
  .thumb-item{width:66px; height:66px; border-radius:10px}

  .product-info{padding:8px 10px; gap:10px}
  .product-info h1{font-size:1.7em}
  .meta-row{flex-direction:column; align-items:flex-start; gap:6px}
  .category-chip{font-size:.86em; padding:6px 10px}
  .teaser-inline{white-space:normal; max-width:100%; font-size:.98rem; line-height:1.5}

  .product-info .price{font-size:1.6em; margin-top:2px}
  .action-buttons{flex-direction:column; gap:10px}
  .action-button{width:100%; max-width:100%; box-sizing:border-box; padding:13px 18px; font-size:1em; min-width:auto}
  .share-buttons{gap:8px}
  .share-btn{flex:1 1 calc(50% - 8px); justify-content:center}
  .copylink-dialog{width:min(94%,520px)}
  .page-actions{padding:0 12px}
}

/* Small phones */
@media (max-width:480px){
  .product-details{margin:10px; padding:10px; gap:10px}
  .product-gallery .main-image{max-height:48vh}
  .thumb-item{width:58px; height:58px}
  .product-info h1{font-size:1.52em}
  .product-info .price{font-size:1.52em}
  .action-button{padding:12px 16px; font-size:.95em}
}

/* ===== UTILITIES ===== */

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .product-gallery .main-image,.modal-image,.product-card .product-image img{
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
}
@media (prefers-color-scheme:dark){
  .product-info{color:#e0e0e0}
  .product-info h1,.product-info .price{color:#fff}
  .delivery-info,.product-tabs,.related-products{background:rgba(255,255,255,.12)}
  .tab-content{background:rgba(255,255,255,.96)}
}
@media print{
  .product-details{background:#fff; box-shadow:none; margin:0; padding:20px}
  .action-buttons,.gallery-modal,.related-products{display:none}
}