/*body {*/
/*    background: #f5f5f5;*/
/*}*/

/*footer {*/
/*    border-top: 1px solid var(--toddle-green);*/
/*}*/

main {
    margin: 7rem auto !important;
    background:white;
    padding: 2em;
    border-radius: 32px;
}


.toddle-together h1,
.toddle-together h2,
.toddle-together h3,
.toddle-together h4,
.toddle-together h5,
.toddle-together h6 {
    font-family: var(--toddle-heading-font), sans-serif;
    color: var(--toddle-green);
}

/*h1, h2, h3, h4, h5, h6, p { text-align: center;}*/

/*.hero-content {*/
/*    width: 100%;*/
/*    max-width:1100px;*/
/*    padding: 2em;*/
/*    left: 0;*/
/*}*/

.product-archive-hero-heading {
    color: var(--toddle-green);
    /*font-size: 1.6em;*/
    /*line-height: 1.2em;*/
    /*text-align: left;*/
    /*font-weight: 400;*/
    /*letter-spacing: -0.04em;*/
    font-family: var(--toddle-heading-font);
    margin-top: 22em;
}

.product-archive-hero-subheading {
    margin-top: 1em;
    /*font-size: 1em;*/
    /*line-height: 1.6em;*/
    color: var(--toddle-slate);
    /*letter-spacing: -0.04em;*/
    font-family: var(--toddle-body-font);
    /*text-align: left;*/
    /*max-width:300px;*/
}

.product-archive-hero .icon-group {
    margin: 2em auto;
}

.graphic-container {
    /*max-width: 90%;*/
    margin:4em auto;
}

.graphic-container svg {
    transition: transform 0.4s ease-out;
}

/*.graphic-container:hover svg {*/
/*    !*animation: spin 4s linear infinite;*!*/
/*    transform:scale(0.9);*/
/*}*/

.graphic-container #inner {
    display:none;
}

.graphic-container #inner-hover {
    /*display:block;*/
}

.graphic-container:hover #inner {
    display:none;
}

.graphic-container:hover #inner-hover {
    display:block;
}

.hexagon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(10px, 3vw, 30px);
    max-width: min(800px, 90vw);
    margin: 0 auto;
}

.hexagon-grid > * {
    grid-column: span 2;
    display: flex;
    justify-content: center;
}

.hexagon-grid > *:nth-child(1),
.hexagon-grid > *:nth-child(6) {
    grid-column: 2 / span 2;
}

.hexagon-grid > *:nth-child(2),
.hexagon-grid > *:nth-child(7) {
    grid-column: 4 / span 2;
}

.hexagon-icon {
    width: 100%;
    max-width: min(120px, 15vw);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

@media(min-width:628px) {

    .product-detail-card {
        background-color: var(--main-bg-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: 0.3s ease-in-out;
        position:relative;
        padding: 3em;
        margin: 3em 2em;

    }

    .toddle-together h1,
    .toddle-together h2,
    .toddle-together p {
        text-align: left;
    }


    .product-archive-hero-heading {
        /*color: var(--toddle-green);*/
        /*font-size: 2em;*/
        /*line-height: 1.2em;*/
        /*text-align: left;*/
        /*font-weight: 400;*/
        /*letter-spacing: -0.04em;*/
        /*font-family: var(--toddle-heading-font);*/
        margin-top: 1.3em;
    }

    .product-archive-hero-subheading {
        margin-top: 1em;
        /*line-height: 1.5em;*/
        /*!*letter-spacing: -0.04em;*!*/
        /*font-family: var(--toddle-body-font);*/
        /*text-align: left;*/
        max-width: 60%;
    }

    .product-archive-hero .icon-group {
        margin: 2em auto 4em 0;
        max-width: 50%;
    }
    /*.graphic-container {*/
    /*    max-width: 70%;*/
    /*}*/


}

@media(min-width: 848px) {

    .product-archive-hero-heading {
        /*color: var(--toddle-green);*/
        /*font-size: 2.1rem;*/
        /*line-height: 2.4rem;*/
        /*text-align: left;*/
        /*font-weight: 400;*/
        /*letter-spacing: -0.04em;*/
        /*font-family: var(--toddle-heading-font);*/
    }

    .product-archive-hero-subheading {
        margin-top: 1em;
        /*line-height: 1.5em;*/
        /*letter-spacing: -0.04em;*/
        font-family: var(--toddle-body-font);
    }

    /*.graphic-container {*/
    /*    max-width: 60%;*/
    /*}*/

    .product-archive-hero .icon-group {
        margin: 2em auto 4em 0;
        max-width: 45%;
    }


}

@media(min-width:1200px)  {

    .product-archive-hero-heading {
        font-family: var(--toddle-heading-font);
    }

    .product-archive-hero-subheading {
        margin-top: 1em;
        font-family: var(--toddle-body-font);
        max-width: 510px;
    }

    .product-archive-hero .icon-group {
        margin: 2em auto 4em 0;
        max-width: 38%;
    }


}

ul.products {
    justify-content: center; /* Center items on smaller screens */
}

ul.products li.product {
    width: 100%; /* Adjust for gap */
    margin-bottom: 4rem;
    list-style: none;
}

@media(min-width: 768px) {
    ul.products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    ul.products li.product {
        width: 100%; /* Grid handles the width automatically */
        margin-bottom: 0; /* Gap handles the bottom spacing */
    }
}



.woocommerce-product-gallery__image .wp-post-image {
    /*height: 600px;*/
    /*width:auto;*/
    /*margin:auto;*/
    /*width: 100%;*/
    /*height: auto;*/
}

/* Example CSS to add to your theme's stylesheet */

/*.woocommerce-product-gallery__thumbnails-below {*/
/*    !* Ensures thumbnails are visible below the main image *!*/
/*    clear: both;*/
/*    margin-top: 20px;*/
/*    display: flex; !* Makes the thumbnail items align horizontally *!*/
/*    gap: 10px; !* Adds space between thumbnails *!*/
/*    justify-content: center; !* Center the thumbnail row *!*/
/*}*/

/* You may need to target the list items/links within the thumbnail area */
.woocommerce-product-gallery__thumbnails-below .flex-control-thumbs li {
    list-style: none; /* Remove list bullet points */
    margin: 0;
}

li.product a {
    text-decoration:none;
}

li.product span.price {
    font-size: 0.94em;
    display:block;
}

.woocommerce-ordering .orderby {
    display:block;
    margin-left:auto;
}

/*.flex-control-nav.thumbnails {*/
/*    max-height: 100px;*/
/*}*/

/*.flex-control-nav.thumbnails .woocommerce-product-gallery__image {*/
/*    height:100%;*/
/*    width:auto;*/
/*}*/

/*.flex-control-thumbs {*/
/*    display: flex !important;*/
/*    flex-wrap: wrap;*/
/*    margin: 10px -5px 0 !important;*/
/*    padding: 0 !important;*/
/*    list-style: none !important;*/
/*    overflow: hidden;*/
/*    clear: both;*/
/*}*/

/*.flex-control-thumbs li {*/
/*    flex: 0 0 100%;*/
/*    !*width: 25% !important; !* 4 thumbnails per row *!*!*/
/*    padding: 5px !important;*/
/*    border-radius: 8px;*/
/*    margin: 0 !important;*/
/*    box-sizing: border-box;*/
/*    float: none !important;*/
/*    display: block;*/
/*}*/

/*.flex-control-thumbs img {*/
/*    width: 100% !important;*/
/*    height: auto !important;*/
/*    display: block;*/
/*    opacity: 0.7;*/
/*    cursor: pointer;*/
/*    border: 2px solid transparent;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.flex-control-thumbs img:hover,*/
/*.flex-control-thumbs img.flex-active {*/
/*    opacity: 1;*/
/*}*/


/*!* For responsive design *!*/
/*@media (max-width: 768px) {*/
/*    .flex-control-thumbs li {*/
/*        width: 20% !important; !* 5 thumbnails per row on mobile *!*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .flex-control-thumbs li {*/
/*        width: 25% !important; !* 4 thumbnails per row on small mobile *!*/
/*    }*/
/*}*/

/** Swiper **/

/* Custom product gallery */
.custom-product-gallery {
    display: flex;
    gap: 15px;
    width: 100%;
}

/*.custom-product-gallery .main-swiper {*/
/*    flex: 1;*/
/*    width: 100%;*/
/*    min-width: 0; !* Critical for flex child *!*/
/*}*/

/*.custom-product-gallery .main-swiper .swiper-slide {*/
/*    width: 100%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    overflow: hidden;*/
/*}*/

/*.custom-product-gallery .main-swiper img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    max-width: 100%;*/
/*    display: block;*/
/*}*/

/*.custom-product-gallery .thumbnail-swiper {*/
/*    width: 80px;*/
/*    height: 400px;*/
/*    flex-shrink: 0;*/
/*}*/

/*.custom-product-gallery .thumbnail-swiper .swiper-slide {*/
/*    opacity: 0.4;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.custom-product-gallery .thumbnail-swiper .swiper-slide-thumb-active {*/
/*    opacity: 1;*/
/*}*/

/*.custom-product-gallery .thumbnail-swiper img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/

/* 1. Set the container to relative so we can stack images */
.woocommerce-loop-product__link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 2. Style the hover image to sit directly on top of the main image */
.secondary-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
    z-index: 2;
}

/* 3. The Hover Trigger */
.woocommerce-loop-product__link:hover .secondary-hover-image {
    opacity: 1;
}


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


main .woocommerce-Price-amount,
main .woocommerce-Price-amount span,
main .woocommerce-Price-currencySymbol {
    color: var(--toddle-green);
    font-size: 1.15rem;
    font-weight: 600;
}

h2.woocommerce-loop-product__title {
    color: var(--toddle-slate) !important;
    font-size: 1rem !important;
    margin-top: 1rem;
}

/* Product image container with 1:2 aspect ratio */
.product-image-container {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.4;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: #fafafa; /* Fallback background */
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 2) {
    .product-image-container {
        position: relative;
        height: 0;
        padding-bottom: 200%; /* 1:2 = 200% */
    }
}

/* Images inside container */
.product-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
}

/* Main image */
.product-image-container img:first-child {
    opacity: 1;
    transform: scale(0.8);
}

/* Hover image */
.product-image-container img:nth-child(2) {
    opacity: 0;
}

.woocommerce-products-header__title.page-title,
.woocommerce-result-count,
.woocommerce-ordering {
    display:none;
}