/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/*Skapar mellanrum mellan höjd och lägg till i kundkorg*/
.ct-cart-actions {margin-top: 25px}
/* Stil för vävprisgrupp-knappar */
.vavprisgrupp-buttons {
    margin-bottom: 10px;
}

.vavprisgrupp-button {
    padding: 10px 15px;
    margin-right: 5px;
    background-color: #f5f5f5;
    border: 2px solid #ccc;
    cursor: pointer;
}

.vavprisgrupp-button.selected {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* Stil för bildalternativ */
.vavprisgrupp-options {
    display: flex;
    gap: 10px;
}

.vavprisgrupp-image {
    width: 80px; /* Justera bredden */
    height: auto;
    border: 2px solid transparent;
    cursor: pointer;
}

.vavprisgrupp-image.selected {
    border: 2px solid #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.swiper-container {
    width: 100%;
    max-width: 600px; /* Begränsa bredden */
    max-height: 600px; /* Begränsa höjden */
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Anpassa bilden så den passar */
}

.swiper-button-next,
.swiper-button-prev {
    color: #000; /* Pilarna får svart färg, kan ändras */
}

.swiper-pagination {
    bottom: 10px;
}

.ct-media-container:not(.custom-swiper) {
    display: none !important; /* Dölj endast det WooCommerce-genererade innehållet */
}


/* Gör produktsidan till en flexibel layout */
.single-product .product {
    display: flex; /* Flexbox-layout */
    flex-wrap: wrap; /* För mindre skärmar */
    justify-content: space-between; /* Skapar mellanrum mellan bild och formulär */
    align-items: flex-start; /* Justerar innehållet upptill */
}

/* Bildspelet till vänster */
.single-product .ct-media-container {
    max-width: 48%; /* Sätt bredden på bildspelet */
    flex: 0 0 48%; /* Behåll proportionerna för flexbox */
    margin-right: 2%; /* Lägg till mellanrum till höger */
    box-sizing: border-box; /* För korrekt padding */
}

/* Formuläret till höger */
.single-product .product .summary {
    max-width: 48%; /* Begränsa bredden på formuläret */
    flex: 0 0 48%; /* Säkerställ flex-storleken */
    box-sizing: border-box; /* För korrekt padding */
}

/* Beskrivningen under formuläret */
.single-product .woocommerce-tabs {
    width: 100%; /* Ta hela bredden */
    margin-top: 20px; /* Lägg till mellanrum ovanför */
}

/* För mindre skärmar */
@media screen and (max-width: 768px) {
    .single-product .product {
        flex-direction: column; /* Stapla allt vertikalt */
    }

    .single-product .ct-media-container,
    .single-product .product .summary {
        max-width: 100%; /* Ta full bredd */
        margin: 0 auto; /* Centrera allt */
    }

    .single-product .ct-media-container {
        margin-bottom: 20px; /* Lägg till mellanrum under bildspelet */
    }
}

.swiper-button-next:after, .swiper-button-prev:after {
        font-size: 30px !important;
    }
}