#cross-sell-carousel {
    width: 100%;
    margin: 0 auto;
    height: auto;
}

/* Position arrows on top of the slider */
#cross-sell-carousel .slick-prev,
#cross-sell-carousel .slick-next {
    font-size: 0;
    /* Hide text content */
    color: transparent;
    /* Hide text content */
}

#cross-sell-carousel .slick-prev::before,
#cross-sell-carousel .slick-next::before {
    content: "\003C"; /* Unicode character for < */
    font-size: 48px; /* Adjust font size as needed */
    color: #a7a7a7; /* Set the color of the symbols */
    position: absolute; /* Position the symbols */
    top: 50%; /* Align symbols vertically */
    transform: translateY(-50%); /* Center the symbols vertically */
    z-index: 1; /* Ensure symbols are above other elements */
}

#cross-sell-carousel .slick-next::before {
    content: "\003E"; /* Unicode character for > */
}

/* Create a container for the buttons */
#custom-woo-carousel .slick-arrows-container {
    position: relative;
}

#cross-sell-carousel .slick-prev {
    float: left; /* Float the previous button to the left */
    margin-left: -30px;
}

#cross-sell-carousel .slick-next {
    float: right; /* Float the next button to the right */
    margin-right: 0px;
}

/* Adjust button position for mobile devices */
@media only screen and (max-width: 767px) {

    #cross-sell-carousel .slick-prev,
    #cross-sell-carousel .slick-next {
        position: relative; /* Reset position for mobile devices */
        font-size: 0px; /* Adjust font size for mobile devices */
        color: #a7a7a7; /* Set color for symbols on mobile devices */
        top: auto; /* Reset top positioning for mobile devices */
        transform: none; /* Reset transform for mobile devices */
        z-index: 1; /* Ensure buttons are above other elements */
    }

    /* Position buttons */
    #cross-sell-carousel .slick-prev {
        float: left; /* Float the previous button to the left */
        margin-left: 30px;
    }

    #cross-sell-carousel .slick-next {
        float: right; /* Float the next button to the right */
        margin-right: 60px;
    }
}

#cross-sell-carousel .button-container {
    /* Example border style */
    display: block;
    /* Display as a block element */
    width: 100%;
    /* Ensure it takes up the full width */
    box-sizing: border-box;
    /* Include padding and border in the width */
    height: 1em;
}

#cross-sell-carousel .slick-list {
    /* Example border style */
    display: block;
    /* Display as a block element */
    width: 100%;
    /* Ensure it takes up the full width */
    box-sizing: border-box;
    /* Include padding and border in the width */
    margin-top: 30px;
    /* Adjust as needed to create space between button-container and slick-list */
}


#cross-sell-carousel .button.custom-add-to-cart {
    background-color: var(--fs-color-secondary) !important;
    color: #fff; /* Set the text color to white or any color that contrasts well with the background */
    padding: 4px 30px; /* Adjust the padding as needed */
    text-decoration: none; /* Remove underlining if needed */
    display: inline-block;
    line-height: 1.5;
}

#cross-sell-carousel a.add_to_cart_button {
    display: block !important;
    background-color: var(--fs-color-secondary);
    padding: 7px 30px;
    margin-bottom: 2em;
    border-radius: 4px;
}

#cross-sell-carousel .product-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
    /* Set the fixed height for three rows */
    font-size: .8em;
}

#cross-sell-carousel .product-title a {
    display: block;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    font-size: 1.1em;
    padding-left:10px;
    padding-right: 10px;
    height:3em;
}

#cross-sell-carousel .amount {
    font-size: 0.9em;
    padding-left: 10px;
    padding-right: 10px;
}

#cross-sell-carousel .cross-sell-sku {
    font-size: 0.8em;
    padding-left: 10px;
    padding-right: 10px;
}

#cross-sell-carousel .product-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Adjust the number of lines */
    -webkit-box-orient: vertical;
    /*max-height: 4em; /* Adjust the height as needed */
    /*min-height: 5em; */
    /* Set the minimum height */
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    font-size: 0.8em;
    padding-left: 10px;
    padding-right: 10px;
}

#cross-sell-carousel .quantity+.button {
    font-size: 0.6em;
    margin-right: 0;
}

#cross-sell-carousel .product-content {
    margin-top: 20%;
    margin-bottom: 2%;
    transition: transform 0.3s ease;
    padding-top: 2%;
    position:relative;
    flex-grow: 1;
    /* Allow product content to grow to fill available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space evenly between elements */
    z-index:0;
}

#cross-sell-carousel .product-content:hover {
    transform-origin: center top;
    /* Set transform origin to top center */
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    position:relative;
    z-index: 9999 !important;
    background-color: white;
}

#cross-sell-carousel .slick-slide .product-image img {
    height: 200px; /* Set the desired fixed height */
    width: auto; /* Maintain the aspect ratio of the image */
}

#cross-sell-carousel .slick-slide .product-image .product-small .image-fade_in_back {
    height: 200px; /* Set the desired fixed height */
    overflow: hidden; /* Ensure that the overflow is hidden to maintain a consistent height */
}

select[name="cross_sell_selected_categories[]"] {
    height: 400px; /* Set the desired height */
    width: 300px; /* Set the desired width */
}

/* Add styles for each season */
.carousel-title-container.spring a {
    font-family: 'springLeavesFont', sans-serif;
    font-size: 3em;
    background: -webkit-linear-gradient(rgb(140, 247, 148), rgb(7, 63, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.summer a {
    font-family: 'summerFont', sans-serif;
    font-size: 3em;
    background: -webkit-linear-gradient(yellow, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.autumn a {
    font-family: 'leavesFont', sans-serif;
    font-size: 3em;
    font-weight: bold;
    background: -webkit-linear-gradient(rgb(248, 134, 4), rgb(255, 52, 52));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.winter a {
    font-family: 'PWHappyChristmas', sans-serif;
    font-size: 3em;
    background: -webkit-linear-gradient(rgb(115, 253, 127), rgb(52, 116, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container {
    text-align: center;
    margin-bottom: 20px;
    font-size: .9em;
    font-weight: bold;
    color:black
}

.carousel-title-container.Julprodukter a {
    font-family: "PWHappyChristmas", sans-serif;
    color: red;
    font-size: 4em;
    padding: 5px;
}

.carousel-title-container.Sommarprodukter a {
    font-family: "onlyhope", sans-serif;
    font-size: 40px;
    background: -webkit-linear-gradient(#4287f5, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.Halloween a {
    font-family: "shlop", sans-serif;
    font-size: 40px;
    background: -webkit-linear-gradient(yellow, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.Påskprodukter a {
    font-family: "easterfont", sans-serif;
    font-size: 40px;
    background: -webkit-linear-gradient(#b800ff, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}

.carousel-title-container.Rea a {
    font-family: "rammettoOne", sans-serif;
    font-size: 40px;
    background: -webkit-linear-gradient(red, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotate(-5deg);
    padding: 5px;
}

#cross-sell-carousel.product-small-wrapper {
    z-index: 0;
}

.default-font {
    /* Default font styles if no specific category match */
}

.slick-slide {
    height: auto;
    /* Set height to auto to accommodate dynamic content */
    z-index:0;
}

.slick-slide>div {
    height: 100%;
    z-index:0;
}

.product-small {
    position: relative;
    z-index: 0;
}

.ux-quantity__button {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    /* Center the button horizontally within the container */
    height: 40px;
    /* Adjust the height as needed */
}

.product-details-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to the bottom */
    align-self: stretch;
    /* Allow the container to stretch to fill available space */
    min-height: 0;
    /* Ensure the container can shrink when needed */

}

.product-details-bottom {
    margin-top: auto;
    /* Push the content to the bottom */
    padding-left: 10px;
    padding-right: 10px;
}

.product-details-container>div>form {
    margin-bottom: 2em;
}

button.single_add_to_cart_button {
    /* Add styles to make it look like the link button */
    background-color: var(--fs-color-secondary);
    /* Match the background color */
    color: #fff;
    /* Set text color */
    padding: 8px 16px;
    /* Adjust padding */
    border: none;
    /* Remove border */
    cursor: pointer;
    /* Add cursor pointer */
    text-decoration: none;
    /* Remove underline */
    display: inline-block;
    /* Make it inline-block like the anchor tag */
    font-size: 16px;
    /* Adjust font size */
    border-radius: 4px;
    /* Add border-radius for rounded corners */
    margin-top: 2em;
}

button.single_add_to_cart_button:hover {
    /* Add hover effect */
    background-color: darken(var(--fs-color-secondary), 10%);
    /* Darken the background color on hover */
}

button.single_add_to_cart_button:focus {
    /* Add focus effect */
    outline: none;
    /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
    /* Add a shadow to indicate focus */
}

/* CSS to ensure variation information is displayed below select element */
.product-details-container .woocommerce-variation.single_variation {
    display: block;
    margin-top: 10px;
    /* Adjust as needed */
}

/* Hide variation information by default */
.product-details-container .woocommerce-variation.single_variation {
    display: none;
}

#stock_notifier_main_form {
    display: none;
}

#cross-sell-carousel .slick-track {
    height: auto;
    /* Set height to auto by default */
    z-index: 0;
}

#cross-sell-carousel .slick-list {
    z-index: 0;
}