/*======================================
  *** Product Detail Page Styles ***
======================================*/

/*--- Product Summary ---*/

body.single-product .has-description-arrows .woocommerce-product-details__short-description p::before {
    content: url("../images/icons/arrow.svg");
    width: 23px;
    /* Set your desired width */
    margin-right: 10px;
    /* Space between icon and text */
    vertical-align: middle;
    /* Align icon with text */
}

.woocommerce-product-details__short-description p {
    margin-bottom: 10px;
}

/*Add-to-Cart Button*/
body.single-product div.summary .ct-cart-actions .quantity {
    background-color: var(--off-white-background-color);
    border-radius: var(--border-radius-small);
}

/*Price*/
body.single-product div.summary .price-per-kg {
    font: var(--small-text);
    color: var(--dark-gray);
    line-height: var(--theme-line-height);
}

body.single-product div.summary .variation-price {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

body.single-product div.summary .price-amount-wrapper {
    margin-right: 20px;
}

/*Hide Default Variation Price*/
body.single-product div.summary .woocommerce-variation.single_variation .woocommerce-variation-price {
    display: none;
}

/*Additional Info*/
body.single-product div.summary .ct-product-additional-info {
    padding: 20px;
}

/*--- Product Tabs ---*/
body.single-product.woocommerce div.woocommerce-tabs .tabs.wc-tabs {
    display: none;
}

/*--- Dynamic Colors ---*/

/* Background color*/
.has-dynamic-colors {
    background-color: var(--product-background-color);
}

/* Product title */
.has-dynamic-colors div.summary .product_title {
    color: var(--product-color);
}

/* Light background elements */
.has-dynamic-colors div.summary .ct-product-additional-info {
    background-color: var(--product-light-background-color);
}

/* Product labels */
.has-dynamic-colors div.summary .custom-labels svg path.circle,
.has-dynamic-colors div.summary .custom-labels svg path.line {
    /* Use light color if set, otherwise fall back to main color */
    fill: var(--product-light-color, var(--product-color));
}

/*--- Variation Swatches ---*/
body.single-product div.summary .ct-variation-swatches {
    gap: 30px;
}

body.single-product div.summary .label {
    font: var(--tiny-text);
}

body.single-product div.summary [data-swatches-type="button"]>*.active .ct-swatch {
    border: 2px solid var(--light-green);
}

body.single-product div.summary [data-swatches-type="button"] .ct-swatch {
    background-color: var(--off-white-background-color);
    color: var(--dark-green);
    width: 70px;
    height: 70px;
    font: var(--tiny-text-regular);
    border: none;
}

/* Style bundle swatches */
body.single-product div.product_cat-bundles div.summary [data-swatches-type="button"] .ct-swatch {
    width: auto;
    height: 50px;
    white-space: nowrap;
    padding: 0 20px;
}

body.single-product div.summary .ct-swatch-container {
    text-align: center;
}

/*--- Bundle Content ---*/
body.single-product .bundle-large,
body.single-product .bundle-small {
    display: none;
}

/* Make bundle content scrollable on mobile*/
@media (max-width: 767px) {
    body.single-product .bundle-content {
        overflow-x: auto;
    }

    body.single-product .bundle-content .stk-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    body.single-product .bundle-content .stk-column {
        flex: 0 0 auto;
        min-width: 35%;
        scroll-snap-align: start;
    }
}

/* Shared background settings for all bundle content cards */
body.single-product [class*="bundle-content-"] {
    background-size: cover;
}

/*Berry Bundle*/
body.single-product .bundle-content-berry {
    background-image: url("../images/bundle-content-background-berry.svg");
}

body.single-product .bundle-content-berry-strawberry {
    background-image: url("../images/product-card-background-strawberries.svg");
}

body.single-product .bundle-content-berry-raspberry {
    background-image: url("../images/product-card-background-raspberries.svg");
}

body.single-product .bundle-content-berry-blackberry {
    background-image: url("../images/product-card-background-blackberries.svg");
}

body.single-product .bundle-content-berry-blueberry {
    background-image: url("../images/product-card-background-blueberries.svg");
}

/*Tropic Bundle*/
body.single-product .bundle-content-tropic {
    background-image: url("../images/bundle-content-background-tropic.svg");
}

body.single-product .bundle-content-tropic-mango {
    background-image: url("../images/product-card-background-mango.svg");
}

body.single-product .bundle-content-tropic-pineapple {
    background-image: url("../images/product-card-background-pineapple.svg");
}

body.single-product .bundle-content-tropic-banana {
    background-image: url("../images/product-card-background-bananas.svg");
}

body.single-product .bundle-content-tropic-jackfruit {
    background-image: url("../images/product-card-background-jackfruit.svg");
}

/*--- Nutritional Table ---*/

#nutritional-table tr {
    font: var(--small-text);
    border-top: transparent;
}

#nutritional-table th:nth-child(1),
#nutritional-table td:nth-child(1) {
    width: 35%;
    /* Adjust the width for the first column (Nährwerte) */
}

#nutritional-table tr:nth-of-type(3) td,
#nutritional-table tr:nth-of-type(5) td {
    font: var(--tiny-text);
}

#nutritional-table thead th {
    text-align: left;
    font: var(--tiny-text-custom-font);
    text-transform: uppercase;
}

/* Remove vertical lines (no borders between columns) */
#nutritional-table td,
#nutritional-table th {
    border-right: none;
    border-left: none;
}

#nutritional-table table {
    border: none;
}

.wp-block-stackable-tab-labels.stk-block-tab-labels {
    overflow-x: auto;
    scrollbar-width: thin;
    display: flex;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* Hides scrollbar in IE and Edge */
    scrollbar-width: none;
    /* Hides scrollbar in Firefox */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.wp-block-stackable-tab-labels.stk-block-tab-labels::-webkit-scrollbar {
    display: none;
}

.stk-block-tab-labels:not(.stk-block-tab-labels--wrap-mobile) .stk-block-tab-labels__wrapper {
    flex-wrap: nowrap;
    /* Prevents wrapping */
}

.stk-block-tabs__tab {
    flex: 0 0 auto;
    /* Prevents tabs from stretching */
    white-space: nowrap;
    /* Ensures text doesn’t wrap */
    scroll-snap-align: start;
    /* Enables snapping */
}

/*--- Text Above Product Title ---*/
body.single-product .summary .text-before-product-title {
    font: var(--h2-font);
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--dark-green);
}

/*--- Bundle Contents ---*/
body.single-product .bundle-contents__heading {
    margin-bottom: 20px;
}

body.single-product .bundle-contents__grid {
    display: none;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* Scroller settings; inert until a grid overflows (slider / mobile). */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

body.single-product .bundle-contents__grid.is-active {
    display: grid;
}

/* Slider: a variation with 5+ products scrolls horizontally instead of
   wrapping. (Mobile turns every grid into a scroller too, below.) */
body.single-product .bundle-contents__grid--slider.is-active {
    display: flex;
}

body.single-product .bundle-contents__grid--slider .bundle-contents__item {
    /* Show 3.5 cards so the next one is cut off, signalling the slider. */
    flex: 0 0 calc((100% - 3 * 30px) / 3.5);
}

body.single-product .bundle-contents__item {
    scroll-snap-align: start;
}

body.single-product .bundle-contents__item a {
    display: block;
    text-align: center;
    color: inherit;
}

body.single-product .bundle-contents__media {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

/* Tinted background shape: the SVG used as a mask, filled with the bundle
   product's own --product-light-background-color. */
body.single-product .bundle-contents__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--product-light-background-color);
    mask: url("../images/bundle-content-background.svg") center / cover no-repeat;
}

body.single-product .bundle-contents__media img {
    position: relative;
}

body.single-product .bundle-contents__name {
    display: block;
    font: var(--small-text);
}

body.single-product .bundle-contents__weight {
    display: block;
    font: var(--small-text-regular);
}

/* Mobile: every grid becomes a horizontal scroll-snap slider, overriding the
   desktop grid and the 3.5-card slider width above. */
@media (max-width: 767px) {
    body.single-product .bundle-contents__grid.is-active {
        display: flex;
        gap: 20px;
    }

    body.single-product .bundle-contents__grid .bundle-contents__item {
        flex: 0 0 35%;
    }
}

/*Spacing*/
body.single-product div.ct-container-full div.product {
    padding-top: var(--custom-content-spacing);
}