body {
    background: #f5f5f5;
}

.product-flex-container, .product-tab-view {
    background:white;
    border-radius: 32px;
    margin-top: 4rem !important;
}

.shadow-product-container {
    border-radius: 32px;
}

.shadow-product-container p {
    margin: 0.6rem auto;
}

.product {
    position:relative;
}

/*.product-ingredients {*/
/*    margin: 2rem 0;*/
/*    padding: 1.5rem;*/
/*    border: 1px solid #e0e0e0;*/
/*    border-radius: 8px;*/
/*}*/

.product-ingredients h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.ingredient-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.ingredient-item:last-child {
    border-bottom: none;
}

.ingredient-amount {
    color: #666;
    font-size: 0.9em;
}

.ingredient-description {
    color: #777;
    font-size: 0.85em;
    margin-top: 0.25rem;
    font-style: italic;
}

.info-box {
    position: fixed;
    background-color: #333;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    min-width: 150px;
    max-width: 300px;
    white-space: normal;
    font-size: 0.9em;
}

/* Class to make it visible */
.info-box.visible {
    opacity: 1;
    visibility: visible;
}

/* Hide the default select box */
.variations select, .variations label {
    display: none !important;
}
/* Style the custom pills */
.swatch-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.swatch {
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    padding: 6px 15px;
    cursor: pointer;
    border-radius: 32px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}
.swatch.selected {
    background-color: var(--toddle-slate);
    color: #fff;
    border-color: var(--toddle-slate);
}

.woocommerce-tabs strong {
    color: var(--toddle-slate);
}


/* --- Mobile: Accordion Transformation --- */
@media (max-width: 847px) {
    /*.product-tab-view .tabs.wc-tabs {*/
    /*    !*display: flex;*!*/
    /*    !*flex-direction: column;*!*/
    /*    display:none;*/
    /*}*/

    .product-tab-view ul.tabs {
        display: none; /* Hide the top navigation list on mobile */
    }

    .woocommerce-tabs.wc-tabs-wrapper > div {
        display:block !important;
    }

    /* We reveal the "headings" that WooCommerce usually hides */
    .woocommerce-Tabs-panel h2 {
        display: block !important;
        background: #f7f7f7;
        padding: 15px;
        margin: 5px 0 0 -7.5px;
        font-size: 16px;
        cursor: pointer;
        border: 1px solid #eee;
        position: relative;
    }

    .woocommerce-Tabs-panel h2::after {
        content: '+';
        float: right;
    }

    /* Hide the actual content initially on mobile */
    .woocommerce-Tabs-panel {
        /*display: none;*/
        padding: 12px;
        border: none;
    }

    .woocommerce-Tabs-panel > *:not(h2) {
        display: none;

    }

    /* Show content when the panel is "active" */
    .woocommerce-Tabs-panel.active-accordion  > * {
        display: revert;
    }

    #tab-toddle_benefits {
        display: flex;
        flex-direction: column;
    }
}

@media(min-width: 848px) {

    .woocommerce-Tabs-panel h2{
        display:none;
    }

    #tab-toddle_benefits {
        display: flex;
        flex-direction: row;
        gap: 1.4rem;
    }

    #tab-toddle_benefits p {
        flex-basis: calc(1/3 * 100%);
        margin-top: 0 !important;
    }


    .product-tab-view .tabs.wc-tabs {
        display:flex;
    }

    .product-tab-view .tabs.wc-tabs a {
        text-decoration:none;
    }

    .product-tab-view .tabs.wc-tabs li {
        padding: 8px 26px;
        margin-top: 0;
    }

    .product-tab-view .tabs.wc-tabs li.active {
        background-color: #f5f5f5;
        border-radius: 32px;
    }

    .product-tab-view .tabs.wc-tabs li.active a {
        text-shadow: 0 0 0.04em currentColor;
    }
}


.product-tab-view .tabs.wc-tabs p {
    margin-bottom: 1rem;
}


.product-flex-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}


.product-flex-container .woocommerce-product-gallery {
    flex: 0 0 60%;
    display: flex;
    flex-direction: row-reverse;
}

.product-flex-container .product-summary-content {
    flex: 0 0 40%;
}

/*.product-flex-container .woocommerce-product-gallery .flex-viewport {*/
/*    flex: 0 0 80%;*/
/*}*/

/*.product-flex-container .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {*/
/*    flex: 0 0 20%;*/
/*}*/

@media (min-width: 848px) {
    .woocommerce-product-gallery__wrapper {
        display: flex !important;
        flex-direction: row-reverse; /* Put thumbs on the left, image on the right */
        gap: 15px;
        align-items: flex-start;
    }

    /* The Main Image Wrapper */
    .woocommerce-product-gallery__wrapper > div:first-child {
        flex: 1; /* Takes up remaining space */
    }

    /* The New Thumbnail Container */
    .toddle-thumb-scroll-container {
        flex: 0 0 15%; /* Fixed 20% width */
        display: flex;
        flex-direction: column; /* Stack vertically */
        max-height: 480px; /* Match main image height */
        overflow-y: auto;
        direction: rtl; /* Scrollbar on the left */
    }

    .toddle-thumb-scroll-container > div {
        direction: ltr; /* Flip content back */
        margin-bottom: 10px;
        width: 100%;
    }
}

@media (max-width: 847px) {
    .woocommerce-product-gallery__wrapper {
        display: flex !important;
        flex-direction: column; /* Main image on top, thumbs below */
    }

    .toddle-thumb-scroll-container {
        display: flex;
        flex-direction: row; /* Thumbnails go side-by-side */
        overflow-x: auto;    /* Horizontal scroll */
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .toddle-thumb-scroll-container > div {
        flex: 0 0 25%; /* Each thumb is 25% of the screen width */
        scroll-snap-align: start;
    }
}

/*@media(max-width: 847px) {*/


/*    .woocommerce-product-gallery__wrapper {*/
/*        display:grid;*/
/*        !* Switch to a single column *!*/
/*        grid-template-columns: repeat(8, 1fr);*/
/*        grid-template-rows: 3fr 1fr;*/
/*        gap: 15px; !* Optional: tighter gap for smaller screens *!*/
/*        overflow-x: hidden; !* Enable horizontal scrolling *!*/
/*        overflow-y: hidden;*/
/*        scroll-snap-type: x mandatory; !* Makes swiping feel "snappy" *!*/
/*        -webkit-overflow-scrolling: touch;*/

/*        grid-auto-flow: column;*/
/*        grid-auto-columns: 20%;*/
/*    }*/

/*    .woocommerce-product-gallery__wrapper > div:first-child {*/
/*        grid-column: 1 / -1;*/
/*        grid-row: 1;*/
/*    }*/

/*    !* 3. Force all thumbnails to the first column *!*/
/*    .woocommerce-product-gallery__wrapper > div:not(:first-child) {*/
/*        grid-column: auto; !* Let them flow horizontally *!*/
/*        min-width: 80px;   !* Set a fixed width so they don't squish *!*/
/*        scroll-snap-align: start;*/
/*    }*/


/*}*/

/*@media(min-width: 848px) {*/

/*    !* 1. Target the wrapper *!*/
/*    .woocommerce-product-gallery__wrapper {*/
/*        display: grid !important;*/
/*        !* Create 2 columns: 20% for thumbs, 80% for main image *!*/
/*        grid-template-columns: 1fr 12%;*/
/*        grid-template-rows: auto;*/
/*        gap: 15px;*/
/*        align-items: start;*/
/*        max-height: 500px;*/
/*        overflow-y: auto;*/
/*        direction: rtl;*/

/*    }*/

/*    .woocommerce-product-gallery__wrapper div {*/
/*        direction: ltr;*/
/*    }*/

/*    !* 2. Force the Main Image to the second column and let it span multiple rows if needed *!*/
/*    .woocommerce-product-gallery__wrapper > div:first-child {*/
/*        grid-column: 1;*/
/*        grid-row: 1 / span 20; !* Ensure it stays on the right while thumbs stack next to it *!*/
/*        width: 100% !important;*/
/*        position: sticky; !* Keeps the main image in view while thumbs scroll *!*/
/*        top: 0;*/
/*    }*/

/*    !* 3. Force all thumbnails to the first column *!*/
/*    .woocommerce-product-gallery__wrapper > div:not(:first-child) {*/
/*        grid-column: 2;*/
/*        width: 100% !important;*/
/*    }*/

/*}*/





/* 4. Ensure images don't overflow their new grid cells */
.woocommerce-product-gallery__wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

.thumbnail-selected {
    border: 2px solid var(--toddle-green);
}

h1.product_title.entry-title {
    font-size: 1.75rem;
    line-height: 1.1em;
}

p {
    font-size: 0.9rem;
}

.product-summary-content .price:not(.subscription-price) .woocommerce-Price-amount,
.product-summary-content .price:not(.subscription-price) .woocommerce-Price-amount span,
.product-summary-content .price:not(.subscription-price) .woocommerce-Price-currencySymbol {
    color: var(--toddle-green);
    font-size: 1.75rem;
}

.product-summary-content span.price:not(.subscription-price) del .woocommerce-Price-amount,
.product-summary-content span.price:not(.subscription-price)  del .woocommerce-Price-amount span,
.product-summary-content span.price:not(.subscription-price) del .woocommerce-Price-currencySymbol {
    color: unset;
    font-size: unset;
}

.product-summary-content .wcsatt-sub-options {
    display:block;
}

.product-summary-content .wcsatt-sub-options .woocommerce-Price-amount,
.product-summary-content .wcsatt-sub-options .woocommerce-Price-amount span,
.product-summary-content .wcsatt-sub-options .woocommerce-Price-currencySymbol {
    color: unset;
    font-size: unset;
}




/* Hide the price that appears after selecting a variation */
.woocommerce-variation-price {
    display: none !important;
}

.selected-variation-label {
    font-size: 1rem;
    color: var(--toddle-slate);
    font-weight: normal;
    margin-left: 20px;
    vertical-align: middle;
}

.reset_variations {
    font-size: 1rem;
    color: var(--toddle-slate);
    font-weight: normal;
    margin-left: 20px;
    vertical-align: middle;
    text-decoration: none;
}


.woocommerce-product-rating .woocommerce-review-link {
    display: none !important;
}

.custom-rating-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.review-count-bracket {
    font-size: 0.9em;
    color: #666;
}
.fa-star.fa-solid {

}

.star-rating-text {
    margin-left: 1.4em;
}

.star-rating-text,
.review-count-text {
    font-size: 0.8em;

}

p.price {
    margin-top: 0;
}

.woocommerce-breadcrumb {
    margin-bottom: 1rem;
    color: var(--toddle-slate);
    font-size: 0.8rem;
}

.woocommerce-breadcrumb a {
    text-decoration: none;
}

/* Hide default arrows */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity input.qty {
    -moz-appearance: textfield;
}

/* Flexbox layout for the picker */
.quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    width: 100%;
    border-radius: 32px;
    overflow: hidden;
}

.quantity .qty {
    width: 40%;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.quantity button {
    background: #f9f9f9;
    border: none;
    width: 30%;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: background 0.2s;
}

.quantity button:hover {
    background: #eee;
}

.woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
}

.single_add_to_cart_button {
    background-color: var(--toddle-green);
    border: 1px solid var(--toddle-green);
    padding: 8px 16px;
    color:white;
    border-radius: 32px;
    font-size: 1em;
    cursor:pointer;
}

.single_buy_now_button {
    background-color: var(--toddle-slate);
    border: 1px solid var(--toddle-slate);
    padding: 8px 16px;
    color:white;
    border-radius: 32px;
    font-size: 1em;
    cursor:pointer;
}

@media(min-width: 480px) and (max-width:767px) {

    .woocommerce-variation-add-to-cart.variations_button {
        display: flex;
        flex-direction: row-reverse;
        /*flex-direction: column;*/
        /*justify-content: space-between;*/
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .single_add_to_cart_button {
        flex-basis: calc(60% - 5px);
    }

    .quantity {
        width: fit-content;
        flex-basis: calc(40% - 5px);
    }

    .single_buy_now_button {
        flex-basis: calc(60% - 5px);
    }


}

@media(min-width: 848px) {

    .woocommerce-variation-add-to-cart.variations_button {
        display: flex;
        flex-direction: row-reverse;
        /*flex-direction: column;*/
        /*justify-content: space-between;*/
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .single_add_to_cart_button::before {
        font-family: "FontAwesome";
        content: '\f291';
        margin-right: 10px;
    }

    .single_add_to_cart_button {
        flex-basis: calc(60% - 5px);
    }

    .quantity {
        width: fit-content;
        flex-basis: calc(40% - 5px);
    }

    .single_buy_now_button {
        flex-basis: calc(60% - 5px);
    }


}



.toddle-usp-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.toddle-usp-pill {
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    padding: 6px 15px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-size:0.8rem;
}

#comments .avatar {
    display:none;
}

#comments .star-rating {
    font-size: 16px;
    height: 1em;
    line-height: 1;
}

#comments span.review-author {
    color: var(--toddle-green) !important;
    font-weight: 500;
    display:block;
}

#comments .review-date {
    font-size: 0.8rem;
}

#comments .commentlist .review {
    padding: 1rem 0;
    border-bottom: 1px solid #f5f5f5;
}

h4.bundled_product_title {
    font-size: 0.9rem;
}

.bundled_variation_attribute_value {
    font-size: 0.8rem;
}

.bundle_form {
    margin-top: 3rem;
}

.bundle_form .bundled_product_summary .details {
    padding: 0 !important;
    float:left !important;

}

.subscription-price ins {
    text-decoration: none;
}