*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:Arial,sans-serif;
  color:#222;
}

.product-page{
  max-width:1400px;
  margin:45px auto;
  padding:0 30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
}


/* LEFT GALLERY */

.main-product-image{
  width:100%;
  height:500px;
  display:flex;
  justify-content:center;
  align-items:center;
}

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

.thumbnail-list{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-top:20px;
}

.thumbnail{
  width:65px;
  height:65px;
  border:1px solid #ddd;
  padding:5px;
  cursor:pointer;
}

.thumbnail.active{
  border:1px solid #222;
}

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


/* RIGHT */

.product-info h1{
  font-size:29px;
  margin-bottom:14px;
}

.product-rating span{
  color:#f5a25d;
  font-size:21px;
}

.product-price{
  margin:18px 0;
  font-size:18px;
}

.product-price del{
  color:#999;
  margin-left:8px;
}

.product-info hr{
  border:0;
  border-top:1px solid #ddd;
  margin:20px 0;
}

.offers{
  font-size:14px;
  line-height:22px;
}

.offers b{
  color:#168ce0;
}

.recent-order{
  display:flex;
  align-items:center;
  gap:8px;
  background:#f5f7ff;
  border:1px solid #dde2ff;
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.recent-order .time{
  color:#888;
  font-size:12px;
}

.country-flag{
  height:18px;
  width:auto;
  border-radius:2px;
  vertical-align:middle;
}

.product-shipping{
  margin-top:20px;
  padding:12px;
  border:1px solid #e5e5e5;
  border-radius:7px;
  background:#fff;
}

.product-shipping h3{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
}

.product-promo-gallery{
  display:flex;
  gap:7px;
  margin:0;
  padding:9px;
  overflow-x:auto;
  background:#fff8d9;
}

.promo-image-button{
  width:64px;
  height:48px;
  flex:0 0 auto;
  padding:0;
  overflow:hidden;
  border:1px solid #e7e7e7;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}

.promo-image-button:hover{
  border-color:#168b80;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transform:translateY(-2px);
}

.promo-image-button:focus-visible{
  outline:2px solid #168b80;
  outline-offset:2px;
}

.promo-image-button img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.promo-image-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.75);
}

.promo-image-modal.active{
  display:flex;
}

.promo-image-modal img{
  max-width:min(640px, 90vw);
  max-height:85vh;
  object-fit:contain;
  background:#fff;
}

.promo-modal-close{
  position:absolute;
  top:14px;
  right:18px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:38px;
  line-height:1;
  cursor:pointer;
}

.label{
  color:#777;
  margin-bottom:15px;
}

.variant-list{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

.variant{
  border:1px solid #ddd;
  padding:12px 18px;
  cursor:pointer;
}

.variant:hover,
.variant.active{
  border-color:#222;
}


/* PACK */

.pack-header,
.pack-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  padding:12px;
  align-items:center;
}

.pack-header.extended,
.pack-row-extended{
  grid-template-columns:2fr 1fr 1fr 1fr 1fr;
}

.ship-free{
  color:#11a85d;
  font-weight:700;
}

.pack-header{
  background:#f6f6f6;
  color:#777;
  font-size:13px;
}

.pack-row{
  border-bottom:1px solid #eee;
}

.qty{
  display:flex;
  border:1px solid #ddd;
  max-width:85px;
}

.qty button{
  width:28px;
  border:0;
  background:white;
  font-size:20px;
  cursor:pointer;
}

.qty span{
  flex:1;
  text-align:center;
  padding:5px;
}

.total{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ddd;
  margin-top:10px;
  padding:20px 0;
}

.product-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px;
}

.product-buttons button{
  padding:18px;
  cursor:pointer;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}

.cart-btn{
  background:#fff;
  border:1px solid #111;
}

.cart-btn:hover{
  background:#111;
  color:#fff;
}

.buy-btn{
  background:#000;
  color:#fff;
  border:1px solid #000;
}

.buy-btn:hover{
  background:#333;
}


/* DETAILS BELOW */

.details-section{
  max-width:1400px;
  margin:50px auto;
  padding:0 30px;
}

.details-tabs{
  display:flex;
  gap:30px;
  border-bottom:1px solid #ccc;
  padding-bottom:12px;
}

#detailsTable{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

#detailsTable td{
  border:1px solid #bbb;
  padding:10px;
  font-size:14px;
}

#detailsTable td:first-child{
  width:150px;
  font-weight:bold;
  background:#f0faf8;
}

.description{
  margin-top:30px;
  line-height:1.6;
}

.description h3{
  margin:20px 0 8px;
}

.description h4{
  margin:10px 0 5px;
}

.product-detail-table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
  font-size:14px;
}

.product-detail-table td{
  border:1px solid #ddd;
  padding:9px 12px;
  vertical-align:top;
  line-height:1.5;
}


.pack-scroll-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #eee;
  border-radius:6px;
}

/* MOBILE */

@media(max-width:768px){

  .product-page{
    grid-template-columns:1fr;
    padding:0 15px;
    margin:20px auto;
    gap:24px;
  }

  /* ── Gallery ── */

  .main-product-image{ height:300px; }

  .thumbnail-list{
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:6px;
  }

  .thumbnail{
    min-width:60px;
    width:60px;
    height:60px;
    flex-shrink:0;
  }

  /* ── Product info ── */



  .product-info h1{ font-size:21px; margin-bottom:10px; }

  .product-rating{ font-size:13px; }

  .product-price{ font-size:17px; margin:12px 0; }

  .product-info hr{ margin:14px 0; }

  .offers{ font-size:13px; line-height:20px; }

  .recent-order{ font-size:12px; padding:8px 12px; gap:6px; }

  .product-shipping{ margin-top:16px; padding:8px; }

  .product-shipping h3{ margin-bottom:7px; font-size:12px; }

  .product-promo-gallery{ gap:6px; padding:7px; }

  .promo-image-button{ width:56px; height:42px; }

  .variant-list{ flex-wrap:wrap; gap:8px; }

  .variant{ padding:10px 14px; font-size:13px; }

  /* ── Standard 3-col pack table ── */
  .pack-header,
  .pack-row{
    grid-template-columns:1.6fr 1fr 1fr;
    padding:9px 8px;
    font-size:13px;
  }

  /* ── Extended 5-col: compact table, scroll only if truly needed ── */
  .pack-scroll-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #eee;
    border-radius:6px;
  }

  .pack-header.extended{
    display:grid;
    grid-template-columns:1.8fr 0.9fr 1fr 0.9fr 1fr;
    font-size:9px;
    padding:7px 5px;
    min-width:330px;
    letter-spacing:0.2px;
  }

  .pack-row-extended{
    display:grid;
    grid-template-columns:1.8fr 0.9fr 1fr 0.9fr 1fr;
    padding:6px 5px;
    min-width:330px;
    font-size:10px;
    border-bottom:1px solid #f0f0f0;
    align-items:center;
    background:unset;
    border-radius:0;
    margin-bottom:0;
    flex-direction:unset;
  }

  .pack-row-extended > strong{ font-size:10px; padding:0; margin:0; border:none; }

  .pack-row-extended > span{ display:block; padding:0; border:none; font-size:10px; }

  .pack-row-extended > span::before{ display:none; }

  .pack-row-extended > .qty{
    max-width:64px;
    align-self:center;
    margin-top:0;
  }

  .pack-row-extended > .qty button{ width:20px; font-size:14px; }

  .pack-row-extended > .qty span{ font-size:10px; padding:3px 1px; }

  .qty button{ width:24px; font-size:17px; }

  /* ── Sticky bottom CTA ── */
  .product-buttons{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:200;
    background:#fff;
    padding:12px 15px;
    box-shadow:0 -3px 18px rgba(0,0,0,.12);
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:0;
  }

  .product-buttons button{ padding:16px; font-size:14px; font-weight:700; }

  /* ── Details section ── */
  .details-section{ padding:0 15px; margin:30px auto; }

  .details-tabs{ gap:18px; font-size:14px; }

  /* Stack detailsTable rows: label above value */
  #detailsTable,
  #detailsTable tbody,
  #detailsTable tr{ display:block; width:100%; }

  #detailsTable tr{
    border-bottom:1px solid #eee;
    padding:10px 0;
  }

  #detailsTable td{
    display:block;
    border:none;
    padding:2px 0;
    font-size:13px;
    width:100%;
  }

  #detailsTable td:first-child{
    font-size:11px;
    text-transform:uppercase;
    color:#999;
    letter-spacing:0.4px;
    background:none;
    font-weight:700;
    width:100%;
    margin-bottom:2px;
  }

  /* Inline product-detail-table: scroll if needed */
  .product-detail-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    font-size:13px;
  }

  .description{ font-size:14px; line-height:1.7; }

  .description h3{ font-size:16px; }

  .description h4{ font-size:14px; }

}


/* SMALL MOBILE */

@media(max-width:480px){

  .product-page{ padding:0 10px; }

  .main-product-image{ height:240px; }

  .thumbnail{ min-width:50px; width:50px; height:50px; }

  .product-info h1{ font-size:18px; }

  .pack-header,
  .pack-row{ padding:8px 6px; font-size:12px; }

  .pack-row-extended{ padding:10px 12px; font-size:12px; }

  .pack-row-extended > strong{ font-size:14px; }

  .product-buttons{ padding:10px 12px; }

  .product-buttons button{ padding:14px; font-size:13px; }

}