/* ----------------------------
   SINGLE PRODUCT CONTAINER
---------------------------- */
.single-product-container {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 50px auto;
    box-sizing: border-box;
}

/* Gallery & Info Columns */
.product-gallery { flex: 0 0 50%; max-width:50%; }
.product-info { flex: 0 0 50%; max-width:50%; }

/* ----------------------------
   SLIDER
---------------------------- */
.slider-wrapper { width: 100%; overflow: hidden; position: relative; }
.slider-track { display: flex; transition: transform .4s ease; }
.slider-track img { width: 100%; height: auto; object-fit: contain; }

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    font-size: 22px;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}
.slider-arrow.left { left: 10px; }
.slider-arrow.right { right: 10px; }

/* ----------------------------
   THUMBNAILS
---------------------------- */
.thumbnail-images {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}
.thumbnail-images img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}
.thumbnail-images img.active { border-color: #ff5a5f; }

/* ----------------------------
   PRODUCT DESCRIPTION & SIMILAR
---------------------------- */
.product-description,
.edd-similar-products {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ----------------------------
   PRODUCTS GRID (Similar / Featured)
---------------------------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

/* ----------------------------
   PURCHASE BUTTON
---------------------------- */
.edd-purchase-button {
    margin-top: 20px;
}

/* ----------------------------
   MOBILE RESPONSIVENESS
---------------------------- */
@media(max-width:768px){
    .single-product-container,
    .product-gallery,
    .product-info {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .similar-products-list div {
        width: calc(50% - 10px);
    }
}