/* BREADCRUMB */

.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--color-gray);
    margin-bottom: 2rem;
}

.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:visited {
    color: var(--color-gray);
}

/* SINGLE PRODUCT */

.product-rating {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.product-before-meta a,
.product-before-meta a:visited {
    color: var(--color-gray);
}

.product-before-meta span {
    font-size: 1rem;
}

.product-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
}

.image-wrapper {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;

}

img.product-main-image {
    display: block;
    width: 100%;
    max-width: 608px;
}

.info-wrapper {
    font-size: 1rem;
}

.price_wrapper {
    background-color: var(--color-back);
    position: sticky;
    top: 8rem;
}


.dark-mode .price_wrapper {
    background-color: var(--color-white);
}

.product-price:not(td) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem
}

.regular-price,
.sale-price {
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
}

.sale-price {
    color: var(--color-orange-deep);
}

.regular-price {
    color: var(--color-gray-dark);
}

.old-price {
    color: var(--color-gray);
}

/* PRODUCT LABEL */

.product-labels a,
.product-labels a:visited,
.product-labels a:hover,
.product-labels a:active {
    color: var(--color-gray-dark);
}

.product-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: 0.25rem;
    background-color: var(--color-white-dirty);
    line-height: 1;
    font-size: 0.875rem;
    margin: 0.25rem;
}

.dark-mode .product-label {
    background-color: var(--color-gray-extra-light);
}

.product-label>img {
    width: 1rem;
    aspect-ratio: 1/1;
}

.product-stock {
    text-transform: uppercase;
}

.stock-quantity {
    color: var(--color-main);
}

/* BUTTONS */

.button-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;

}

.button-featured {
    color: var(--color-gray-dark);
}

.button-featured:has(>.bxs-heart) {
    color: var(--color-main);
    border: 0.0625rem solid;
}

.button-featured:hover {
    color: var(--color-main);
}


/* SINGLE PRODUCT IMAGE AND GALLERY */

.gallery-swiper-single-product {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
}

.swiper.swiper-single-product {
    --swiper-navigation-color: var(--color-gray);
    --swiper-pagination-color: var(--color-gray);
    --swiper-navigation-size: 1.5rem;
}

.swiper-single-product,
.single-product-image {
    width: 100%;
    max-width: 37.5rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
}

.swiper-single-product {
    order: 2;
}

.swiper.swiper-single-thumbs {
    order: 1;
    width: fit-content;
    max-height: 37.5rem;
    padding: 0 0.125rem;
}

button.swiper-slide {
    position: relative;
    display: block;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    opacity: 0.66;
    width: fit-content;
    width: 6rem;
    height: 6rem !important;
    padding: 0;
    aspect-ratio: 1/1;
}

button.swiper-slide:hover {
    opacity: 1;
}

button.swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0.0625rem solid transparent;
    border-radius: 0.5rem;
}

button.swiper-slide.swiper-slide-thumb-active::after {
    border: 0.0625rem solid var(--color-gray-dark);
}

button.swiper-slide.swiper-slide-thumb-active {
    border: none;
    opacity: 1;
}

img.single-product-thumb {
    aspect-ratio: 1/1;
    width: 6rem;
}

.swiper-thumb-next,
.swiper-thumb-prev {
    position: absolute;
    left: calc(50% - 1rem);
    height: 2rem;
    width: 2rem;
    background-color: var(--color-white);
    color: var(--color-gray);
    z-index: 2;
    font-size: 2rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.swiper-thumb-next::after,
.swiper-thumb-prev::after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    position: absolute;
    font-weight: 900;
    font-size: 1rem;
}

.swiper-thumb-next::after {
    content: 'next';
}

.swiper-thumb-prev::after {
    content: 'prev';
}

.swiper-thumb-next {
    bottom: 0.125rem;
    transform: rotate(90deg);
    padding-left: 0.125rem;
}

.swiper-thumb-prev {
    top: 0.125rem;
    transform: rotate(90deg);
    padding-right: 0.125rem;
}

button.baguetteBox-button {
    background: transparent !important;
    background-color: transparent;
}

#baguetteBox-overlay {
    backdrop-filter: blur(0.25rem);
}

html:has(body>#baguetteBox-overlay.visible) {
    overflow: hidden;
}

#baguetteBox-overlay .baguetteBox-button#next-button,
#baguetteBox-overlay .baguetteBox-button#previous-button {
    top: calc(50% - 32px);
    height: 4rem;
    width: unset;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#baguetteBox-overlay .baguetteBox-button svg {
    position: static;
}

/* SPECIFICATION */

.product-spec-item {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: end;
}

.product-spec-item>span,
.product-spec-item>strong {
    max-width: fit-content;
}

.product-spec-item>span.gap {
    flex: 1 1 100%;
    border-bottom: 0.0625rem dotted var(--color-gray-light);

    max-width: unset
}

.product-spec-item>span.value {
    text-align: right;
    text-wrap: balance;
    flex: 1 1 22rem;
}

/* SINGLE PRODUCT NAVIGATION */

.single-product-navigation {
    padding: 0.5rem;
    background-color: var(--color-white-dirty);
    border-radius: 2rem;
    width: fit-content;
}

.dark-mode .single-product-navigation {
    background-color: var(--color-gray-light);
}

ul.single-product-navigation__list {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

ul.single-product-navigation__list a,
ul.single-product-navigation__list a:visited,
ul.single-product-navigation__list a:focus {
    color: var(--color-gray-dark);
    text-decoration: none;
}

ul.single-product-navigation__list a {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    display: block;
    font-size: 1rem;
}

ul.single-product-navigation__list a:hover,
ul.single-product-navigation__list a.active {
    background-color: var(--color-white);
}

.single-product-block {
    scroll-margin-top: 4rem;
    padding: 2rem 0;
}

.single-product-block p {
    text-wrap: balance;
    margin-bottom: 2rem;
}


video.single-product-video {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16/9;
    display: block;
}

/* GREEN VIDEO */

.green-video-wrapper {
    position: relative;
    width: fit-content;
    border-radius: 0.5rem;
    overflow: hidden;
}

.button-icon.button-video {
    position: absolute;
    top: calc(50% - 2rem);
    left: calc(50% - 2rem);
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1/1;
    background-color: var(--color-white-dirty);
    border-radius: 0.5rem;
    z-index: 2;
    transition: var(--transition-norm);
}

.button-icon.button-video[data-play-state="play"] {
    opacity: 0;
    transform: scale(0);

}

/* SINGLE PRODUCT DOCS */

.doc-item__img {
    border: 0.0625rem solid var(--color-gray-extra-light);
    border-radius: 0.5rem;
    display: block;
}

.green-documents-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

.doc-item {
    width: auto;
    min-width: 10rem;
}

.description-content.short {
    max-height: 16rem;
    overflow: clip;
}

.description-content {
    position: relative;
    max-height: 80rem;
    padding-bottom: 1rem;
    transition: var(--transition-norm);
}

.description-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7rem;
    z-index: 1;
}

.description-content.short::after {
    background: linear-gradient(to top, var(--color-back) 50%, transparent);
}

.description-content::after {
    background: linear-gradient(to top, transparent, transparent);
}

.description-content>.more-link {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    font-size: 0.875rem;
}


/* REVIEWS */

.stars-rating {}

label.rating {
    font-size: 1rem;
    padding: 0 1rem 0 0;
}

label.star-rating {
    font-size: 2rem;
    padding: 0;
    color: var(--color-gray);
}

input[name="user_rating"] {
    visibility: hidden;
    overflow: hidden;
    width: 0 !important;
    height: 0 !important;
    margin: 0;
    padding: 0;
    transform: scale(0);
    opacity: 0;
}

label.star-rating:has(~label.star-rating:hover),
label.star-rating:hover {
    color: var(--color-orange);
}

label.star-rating:has(~label.star-rating>input[type="radio"]:checked),
label.star-rating:has(>input[type="radio"]:checked) {
    color: var(--color-orange);
}

input[type="file"]::file-selector-button {
    background-color: var(--color-gray-light);
    color: var(--color-white-permanent);
    border: 0;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 1rem 1.5rem;
    margin-right: 1.25rem;
    transition: var(--transition-norm);
    cursor: pointer;
}

input[type=file]::file-selector-button:hover {
    background-color: var(--color-gray);
    color: var(--color-white);

}

label[for="user_files"] {
    border: 0.0625rem solid var(--color-gray);
    padding: 1rem;
    width: 100%;
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: pointer;
    max-width: 100%;
}

label[for="user_files"] input[type="file"] {
    width: 100%;
    margin-top: 0.5rem;
}

/* COMMENTS AND REVIEWS */

.comment-item {
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--color-gray-extra-light);
}

.comment-header>div {
    flex: 1 1 auto;
}

.first-letter {
    font-weight: 600;
    font-size: 1.75rem;
    background-color: var(--color-green-back);
    width: 3rem;
    aspect-ratio: 1/1;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--color-green);
}

.product-rating-full {
    position: sticky;
    top: 8rem;
}

.product-rating-header {
    border-top: 0.0625rem solid var(--color-gray-extra-light);
    border-bottom: 0.0625rem solid var(--color-gray-extra-light);
    padding: 1rem 0;
}

img.comment-thumb {
    display: block;
}

.stat-scale {
    flex: 1 1 auto;
    background-color: var(--color-gray-extra-light);
    height: 0.25rem;
    border-radius: 0.125rem;
    position: relative;
}

.scale-value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 0.125rem;
    background-color: var(--color-green-light);
}

.scale-stat {
    flex: 0 0 12%;
}

.stars-wrapper {
    text-wrap: nowrap;
}

.comment-item>p:has(+p:empty) {
    display: none;
}


/* SERVICE CARDS */

.service-card {
    height: auto;
    min-height: 26rem;
}

.service-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    max-width: 18rem;
    aspect-ratio: 1/1;
    transition: var(--transition-norm);
    transform-origin: bottom right;
}

.service-card .bx-up-arrow-alt {
    transform: rotate(45deg);
    will-change: auto;
}

.service-card:hover .service-card-image {
    transform: scale(1.1);
}

.service-content.short {
    max-height: 0;
    overflow: hidden;
}

.service-content {
    transition: var(--transition-norm);
    max-height: 800px;
}

img.service-project-icon {
    padding: 0.5rem;
}


/* PRODUCT ARCHIVE */

.product-card {
    padding: 1rem;
    border: 0.0625rem solid var(--color-gray-extra-light);
    border-radius: 0.5rem;
    background-color: var(--color-white);
}

.thumb-wrapper-img {
    display: block;
}

.product-card h2.entry-title {
    font-size: 1.125rem;
    color: var(--color-black);
    line-height: 1.15;
    font-weight: 400;
    text-wrap: balance;
}

.entry-footer .edit-link {
    display: block;
    margin-top: 1rem;
    font-size: 0.75rem;
}

.card-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.product-card-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    z-index: 12;

}

.product-card-top .button-featured {
    background: transparent;
}

.product-card-top .button-featured:has(> .bxs-heart) {
    border: none;
}

.product-card .regular-price,
.product-card .sale-price {
    font-size: 1.5rem;
}

.product-card .old-price {
    font-size: 1.125rem;
}

.thumb-slider-wrapper {
    position: relative;
}

.thumb-slider-wrapper {
    position: relative;
    z-index: 10;
}

.thumbs-slider {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

}

.thumbs-slider::-webkit-scrollbar {
    width: 0.1875rem;
    height: 0.1875rem;
    background: transparent;
}

.thumbs-slider::-webkit-scrollbar-track {
    background: transparent;
}

img.thumbs-slider__item {
    flex: 1 1 auto;
    scroll-snap-align: center;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.thumbs-slider__pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.thumbs-slider__pagination a {
    flex: 1 1 auto;
}

ul.page-numbers {
    margin: 0;
    padding: 2rem 2rem 2rem 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

ul.page-numbers>li {
    flex: 0 0 auto;
}

ul.page-numbers>li>span,
ul.page-numbers>li>a {
    width: 2.5rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white-dirty);
}

.row-height {
    height: auto;
    min-height: 29.375rem;
}

/* MAIN SLIDER */

.slider-projects,
.main-slider-wrapper {
    --swiper-pagination-bullet-horizontal-gap: 0.25rem;
    --swiper-theme-color: var(--color-main-light);
    --swiper-pagination-bullet-border-radius: 0.25rem;
    --swiper-pagination-bullet-size: 0.625rem
}

.slider-item-text,
.slider-item-image {
    height: 28rem;
}

.slider-item-text h1,
.slider-item-text h2 {
    font-size: clamp(1.5rem, calc(var(--index)*1.5), 2.25rem);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.slider-item-text p {
    font-size: clamp(0.875rem, calc(var(--index)*1), 1.125rem);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.slider-item.grid {
    display: grid;
}

.main-slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SEARCH PAGINATION */

.nav-links {
    margin: 2rem 0;
    gap: 1rem;
    display: grid;
}

.nav-previous>a,
.nav-next>a {
    padding: 0.5rem 0.75rem;
    line-height: 1;
    font-size: 0.875rem;
    height: auto;
    color: var(--color-text) !important;
    background-color: var(--color-gray-extra-light);
    display: inline-block;
    border-radius: 0.375rem;
}


/* BANNERS SLIDER */

.slider-banner {
    min-height: 20rem;
}

.slider-banner.flex {
    display: flex;
}

.banner-slide-image {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    max-width: 40rem;
    object-fit: cover;
}

.grid-column-step {
    grid-template-columns: 1fr 1fr;
}


/* CATEGORIES CARDS */

.category-card {
    height: auto;
    min-height: 18rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0);
    transition: var(--transition-short);

}

.category-card:hover {
    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.125);
}

img.category-card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 8rem 1rem 1rem 1rem;
    transition: var(--transition-long);
    transform: translateX(1rem);
}

.category-card:hover img.category-card-image {
    transition: var(--transition-short);
    transform: translateX(0);
}

.column-span-2 img.category-card-image {
    width: 50%;
}

/* LOGIN FORM */

.password-input {
    position: relative;
    display: block;
}

.show-password-input {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1/1;
    background: url('/wp-content/themes/greengross/assets/svg/bx-show-alt.svg') 50% 50% no-repeat;
    background-size: 50%;
    border: none;
    opacity: 0.5;
    cursor: pointer;
}

.show-password-input:hover {
    opacity: 1;
}

/* RESPONSIVE */

@media screen and (max-width: 1360px) {

    .swiper-single-product {
        max-width: 32rem;
    }

    .swiper.swiper-single-thumbs {
        max-height: 32rem;

    }

}

@media screen and (max-width: 1280px) {
    .product-body {
        grid-template-columns: auto 1fr;
    }

    .product-body .grid-two-column {
        grid-template-columns: 1fr;
    }

    .product-body .mobile-order-1 {
        order: 1;
    }

    .product-body .mobile-order-2 {
        order: 2;
    }
}

@media screen and (max-width: 1024px) {
    .product-body {
        grid-template-columns: 1fr;
    }

    .product-body .grid-two-column {
        grid-template-columns: 1fr;
    }

    .swiper.swiper-single-thumbs {
        display: none;
    }

    .gallery-swiper-single-product {
        gap: 0;
    }

    .swiper-single-product,
    .single-product-image {
        max-width: 64rem;
    }

    img.product-main-image {
        width: 100%;
        max-width: 64rem;
    }

    .green-documents-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .section-comments .grid.grid-four-column {
        grid-template-columns: 1fr;
    }

    .slider-item-text {
        order: 2;
    }

    .slider-item-image {
        order: 1;
    }

    .banner-slide-image {}
}

@media screen and (max-width: 768px) {
    .green-documents-wrapper {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding-bottom: 1rem;
    }

    grid-column-step .doc-item {
        min-width: 40vw;
    }

    .thumbs-slider__pagination {
        display: none;
    }

    .slider-item-text,
    .slider-item-image {
        height: 24rem;
    }

    .slider-banner {
        min-height: 32rem;
    }

    .slider-banner.flex {
        padding-top: 12rem;
    }

    .banner-slide-image {
        height: 11rem;
        top: 0;
        left: 0;
    }

}

@media screen and (max-width: 480px) {
    .doc-item {
        min-width: 60vw;
    }
}

@media screen and (max-width: 320px) {
    .grid-column-step {
        grid-template-columns: 1fr;
    }
}