/* Product Details Page Responsive Styles */

/* Related Products Responsive Grid */
@media (max-width: 1400px) {
    .related-products-grid {
grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 1200px) {
    .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
   gap: 20px;
    }
}

@media (max-width: 991px) {
    .product-gallery {
        margin-bottom: 40px;
    }
    
    .main-image-container {
    margin-bottom: 30px;
 }
    
    .product-description {
        overflow: hidden;
    }
    
    .related-products-grid {
      grid-template-columns: repeat(2, 1fr);
 gap: 20px;
    }
}

@media (max-width: 768px) {
    .product-details-page {
 padding: 40px 0;
    }
    
    .product-info {
        padding: 25px;
    }
    
    .product-title {
        font-size: 1.8rem;
    }
    
    .current-price {
   font-size: 2rem;
    }
    
    .product-meta {
        grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .action-buttons {
        flex-direction: column;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        width: 100%;
    }
    
    .product-description {
        padding: 25px;
        margin-top: 40px;
        overflow: hidden;
    }
    
 .related-products {
        padding: 25px;
    }
    
  .related-products .section-title {
  margin-bottom: 25px;
        font-size: 1.6rem;
    }
    
  /* Ensure description content images are properly sized on mobile */
    .description-content img {
     max-width: 100% !important;
        height: auto !important;
    }
    
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .main-image {
   height: 300px;
    }
    
    /* Disable hover scaling on mobile to prevent overflow */
    .main-image:hover {
        transform: none;
    }
}

@media (max-width: 576px) {
    .thumbnail-container {
        justify-content: center;
    }
    
    .price-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .product-title {
        font-size: 1.5rem;
    }
    
    .current-price {
  font-size: 1.8rem;
    }
    
    .main-image {
      height: 250px;
    }
    
    .product-description {
    padding: 20px;
        overflow: hidden;
  }
    
    .section-title {
     font-size: 1.5rem;
    }
    
    .related-products {
        padding: 20px;
    }
 
    .related-products-grid {
   grid-template-columns: 1fr;
gap: 15px;
    }
    
    .related-product-content {
        padding: 15px;
    }
    
    .related-product-title {
        font-size: 0.95rem;
    }
    
    .related-product-price {
        font-size: 1rem;
    }
    
    /* Further ensure content containment on very small screens */
    .description-content {
        overflow-x: hidden;
    }
    
    .description-content img,
    .description-content table,
    .description-content iframe,
  .description-content video {
        max-width: 100% !important;
    }
}

/* Ensure proper layout on all devices */
@media (min-width: 992px) {
    .product-gallery,
    .product-info {
      /* Ensure equal height columns don't cause overlap */
        align-self: flex-start;
    }
    
    .product-description {
 overflow: hidden;
    }
}

/* Large screens - 5 columns */
@media (min-width: 1401px) {
.related-products-grid {
  grid-template-columns: repeat(5, 1fr);
        gap: 25px;
    }
}

/* Print styles - ensure description prints properly */
@media print {
    .product-description {
        page-break-inside: avoid;
        overflow: visible;
    }
    
    .description-content img {
        max-width: 100%;
        page-break-inside: avoid;
    }
    
  .related-products {
        page-break-inside: avoid;
    }
}