/* --- Responsive Styles for Default.aspx (v5 - Force Grid & Reset Flex) --- */

/* === General Layout & Spacing === */
.content-padding { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
.shipping-info-container,
.product-gallery-container { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; }

/* === Shipping Info Boxes (Bootstrap assumed) === */
/* Styles remain the same as v4 */
.shipping-info-container .li-shipping-inner-box { margin-bottom: 25px; display: flex; align-items: center; gap: 15px; padding: 10px; }
.shipping-info-container .shipping-icon img { max-width: 45px; height: auto; flex-shrink: 0; }
.shipping-info-container .shipping-text h2 { font-size: 1.05em; margin-bottom: 3px; }
.shipping-info-container .shipping-text p { font-size: 0.9em; color: #555; line-height: 1.4; }


/* === Product Gallery Tabs === */
/* Styles remain the same as v4 */
.product-gallery-container .tabs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 15px; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; }
.product-gallery-container .tabs-nav .tab-link { padding: 10px 15px; white-space: nowrap; }


/* === Product Grid (FORCE GRID LAYOUT) === */
.product-gallery-container .product-grid {
    display: grid !important; /* Force Grid */
    grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 columns */
    gap: 15px;
    /* Reset any flexbox properties */
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    /* Reset other potential conflicts */
    list-style: none; padding: 0; margin: 0; width: 100%; box-sizing: border-box;
}

/* === Product Item (Reset for Grid) === */
.product-gallery-container .product-grid .product-item {
    width: 100% !important; /* Let grid control width via columns */
    height: auto !important; /* Let content define height */
    /* Reset flex item properties */
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    /* Reset other potential conflicts */
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0; /* Add padding inside if needed, not margin */
    box-sizing: border-box;
    border: 1px solid #e0e0e0; /* Keep border */
    border-radius: 6px;    /* Keep radius */
    overflow: hidden;       /* Keep hidden */
}

/* === Circular Image Wrapper (Minor Adjustments for Grid) === */
.product-gallery-container .product-item .product-image-wrapper {
    width: 100%; /* Takes full width of the grid item */
    height: 0;
    padding-bottom: 100%; /* 1:1 Aspect ratio */
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    margin: 0; /* Remove bottom margin here, add padding to .product-info instead */
    background-color: #f0f0f0;
    box-shadow: 8px 8px 8px 2px rgb(0 0 0 / 6%);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
    /* Pseudo element shadow - check positioning */
    .product-gallery-container .product-item .product-image-wrapper::after {
        content: ''; position: absolute; left: 15%; right: 15%; bottom: -10px;
        height: 15px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
        filter: blur(5px); z-index: -1; opacity: 0.6;
        transition: opacity 0.3s ease, bottom 0.3s ease, filter 0.3s ease;
    }
    .product-gallery-container .product-item .product-image-wrapper:hover { /* Hover styles */ }
    .product-gallery-container .product-item .product-image-wrapper:hover::after { /* Hover styles */ }


.product-gallery-container .product-item .product-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Product Info */
.product-gallery-container .product-item .product-info {
    padding: 15px 10px 10px 10px; /* Added top padding */
    word-wrap: break-word; overflow-wrap: break-word; text-align: left;
}
.product-gallery-container .product-item .product-title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 0.95em; font-weight: 500; }
.product-gallery-container .product-item .product-title-rating { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; min-height: 25px; }
/* Rating & Link styles assumed okay */

/* === Zoom Overlay (Styles assumed okay) === */


/* === Media Queries (Using Grid) === */

/* Small Tablets (> 576px) */
@media (min-width: 576px) {
    .content-padding { padding-left: 25px; padding-right: 25px; }
    .product-gallery-container .product-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns */
        gap: 20px;
    }
    .product-gallery-container .tabs-nav .tab-link { padding: 10px 18px; }
}

/* Tablets (> 768px) */
@media (min-width: 768px) {
     .content-padding { padding-left: 40px; padding-right: 40px; }
    .product-gallery-container .product-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */
    }
    .shipping-info-container .li-shipping-inner-box { margin-bottom: 30px; }
    .product-gallery-container .tabs-nav { justify-content: flex-start; margin-bottom: 30px; }
}

/* Desktops (> 992px) */
@media (min-width: 992px) {
    .product-gallery-container .product-grid {
        grid-template-columns: repeat(5, 1fr) !important; /* 5 columns */
        gap: 25px;
    }
    .shipping-info-container .row .col-lg-3 .li-shipping-inner-box { margin-bottom: 0; }
    .shipping-info-container .row .col-md-6 .li-shipping-inner-box { margin-bottom: 30px; }
    .shipping-info-container .row .col-lg-3:last-child .li-shipping-inner-box { margin-bottom: 0; }
}

/* Large Desktops (> 1200px) */
@media (min-width: 1200px) {
    .content-padding { padding-left: 60px; padding-right: 60px; }
    .product-gallery-container .product-grid {
        gap: 30px;
         /* grid-template-columns: repeat(6, 1fr) !important; /* Optional: 6 columns */
    }
    .product-gallery-container .tabs-nav .tab-link { font-size: 1.1em; }
}

/* Reset stacking from DefaultProduct.css on very small screens */
@media (max-width: 480px) {
     .product-gallery-container .product-item .product-title-rating { flex-direction: column; align-items: flex-start; }
     .product-gallery-container .product-item .product-rating { margin-top: 3px; }
     .product-gallery-container .product-grid { gap: 15px; }
}