.compass {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 4rem !important;
    width: 4rem !important;
    border-radius: 50%;
}

#productContainer {
    --product-view-height: 680px !important;
}

#productContainer .f-thumbs.is-classic.is-vertical {
    height: var(--product-view-height, 100%);
}

.grid {
    display: grid;
}



@media (min-width: 768px) {
    .md\:max-w-lg {
        max-width: 32rem;
    }
}

/*
    Thumbnails
  */

.f-thumbs.is-classic {
    --f-thumb-width: 120px;
    --f-thumb-height: 120px;

    --f-thumb-gap: 0.5rem;

    --f-thumb-opacity: 1;
    --f-thumb-selected-opacity: 0.2;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
}

/* .f-thumbs.is-classic .f-thumbs__slide__img {
    object-fit: contain;
} */

.f-thumbs.is-classic .f-carousel__nav .f-button[disabled] {
    display: none;
}

/*
    Main carousel
  */
.product-carousel {
    --f-carousel-spacing: 0;

    --f-button-width: 48px;
    --f-button-height: 48px;
    --f-button-border-radius: 0;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;

    --f-button-svg-width: 28px;
    --f-button-svg-height: 28px;

    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;

    height: var(--product-view-height);
}

.product-carousel .f-carousel__slide {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    /* width: 70vw; */
}

.product-carousel .f-carousel__slide img {
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.product-carousel .f-carousel__nav {
    opacity: 0;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    .product-carousel:hover .f-carousel__nav {
        opacity: 1;
    }
}

/*
    Fancybox
  */

.fancybox__container {
    --fancybox-color: #0d0c22;
    --fancybox-bg: #fff;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
}

.fancybox__toolbar,
.fancybox__nav {
    --f-button-width: 60px;
    --f-button-height: 60px;
    --f-button-border-radius: 0;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;

    --f-button-svg-width: 32px;
    --f-button-svg-height: 32px;

    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;
}

.fancybox__nav {
    --f-button-next-pos: 0;
    --f-button-prev-pos: 0;
}

.gap-2 {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-\[106px_minmax\(0px\2c _1fr\)\] {
        grid-template-columns: 126px minmax(0px, 1fr);
    }
}


@media (min-width: 768px) {
    .md\:order-last {
        order: 9999;
    }
}

.f-thumbs.is-vertical .f-thumbs__track {
    flex-wrap: wrap;
    padding: 0 8px;
}

li ul.selected {
    border-radius: 5px;
    font-weight: bold;
    text-decoration: underline;
}

.f-carousel__slide {
    position: relative;
    /* Necessary to contain the absolutely positioned figcaption */
}

.f-carousel__slide figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: inline-block;
    width: fit-content;
    background: linear-gradient(0deg, #000000, #00000077 70%, #00000000);
    /* Semi-transparent background for readability */
    text-align: start;
    color: white;
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 20px;
    padding-right: 50px;
}

.f-thumbs__slide__img {
    border-radius: 20px;
}

@media (max-width: 768px) {
    #productContainer {
        --product-view-height: 285px !important
    }

    .product-carousel .f-carousel__slide,
    .product-carousel .f-carousel__viewport,
    .product-carousel .f-carousel__track,
    .product-carousel .f-carousel__slide img {
        height: 100%;
        width: 100%;
    }

    .f-thumbs__viewport {
        height: 80% !important;
    }

    .f-thumbs__slide__img {
        height: 80%;
        /* width: 80%; */
    }
}

.magnifier-icon {
    position: absolute;
    background: #000000bb;
    border-radius: 50%;
    padding: 5px;
    top: 10px;
    /* Adjust spacing as needed */
    left: 10px;
    /* Adjust spacing as needed */
    font-size: 20px;
    /* Adjust size as needed */
    color: white;
    /* Or any color you prefer */
    z-index: 2;
    /* Ensure it's above the image */
}

/*ATTACHMENT */
#attachmentContainer {
    --product-view-height: 650px !important;
}

#attachmentCarousel .f-carousel__slide img {
    height: 600px !important;
}

.attachmentDescription {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    font-size: 0.9rem;
    letter-spacing: 1.5;
}

#attachmentContainer .f-thumbs.is-classic.is-vertical {
    height: var(--product-view-height, 100%);
}

.grid {
    display: grid;
}

@media (min-width: 768px) {
    .md\:max-w-lg {
        max-width: 32rem;
    }
}

.f-thumbs.is-classic {
    --f-thumb-width: 120px;
    --f-thumb-height: 120px;

    --f-thumb-gap: 0.5rem;

    --f-thumb-opacity: 1;
    --f-thumb-selected-opacity: 0.2;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
}


.f-thumbs.is-classic .f-carousel__nav .f-button[disabled] {
    display: none;
}

#attachmentCarousel {
    --f-carousel-spacing: 0;

    --f-button-width: 48px;
    --f-button-height: 48px;
    --f-button-border-radius: 0;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;

    --f-button-svg-width: 28px;
    --f-button-svg-height: 28px;

    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;

    height: var(--product-view-height);
}

#attachmentCarousel .f-carousel__slide {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    /* width: 70vw; */
}

#attachmentCarousel .f-carousel__slide img {
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
#attachmentCarousel .f-carousel__slide .compass img {
    /* width: 100%; */
    height: 4rem !important;
    object-fit: cover;
    border-radius: 20px;
}

#attachmentCarousel .f-carousel__nav {
    opacity: 0;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    #attachmentCarousel:hover .f-carousel__nav {
        opacity: 1;
    }
}

/*
    Fancybox
  */

.fancybox__container {
    --fancybox-color: #0d0c22;
    --fancybox-bg: #fff;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
}

.fancybox__toolbar,
.fancybox__nav {
    --f-button-width: 60px;
    --f-button-height: 60px;
    --f-button-border-radius: 0;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;

    --f-button-svg-width: 32px;
    --f-button-svg-height: 32px;

    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;
}

.fancybox__nav {
    --f-button-next-pos: 0;
    --f-button-prev-pos: 0;
}

.gap-2 {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-\[106px_minmax\(0px\2c _1fr\)\] {
        grid-template-columns: 126px minmax(0px, 1fr);
    }
}


@media (min-width: 768px) {
    .md\:order-last {
        order: 9999;
    }
}

.f-thumbs.is-vertical .f-thumbs__track {
    flex-wrap: wrap;
    padding: 0 8px;
}

li ul.selected {
    border-radius: 5px;
    font-weight: bold;
    text-decoration: underline;
}

.f-carousel__slide {
    position: relative;
    /* Necessary to contain the absolutely positioned figcaption */
}

.f-carousel__slide figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: inline-block;
    width: fit-content;
    background: linear-gradient(0deg, #000000, #00000077 70%, #00000000);
    /* Semi-transparent background for readability */
    text-align: start;
    color: white;
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 20px;
    padding-right: 50px;
}

@media (max-width: 768px) {
    .attachmentDescription {
        position: absolute;
        bottom: 0px;
        padding: 10px;
    }

    #attachmentContainer {
        --product-view-height: 450px !important
    }

    #attachmentCarousel .f-carousel__slide img {
        height: 300px !important;
    }

    #attachmentCarousel .f-carousel__slide,
    .f-carousel__viewport,
    .f-carousel__track {
        height: 100%;
        width: 100%;
    }
}

.catalog-sub-nav {
    padding-inline: 8%;
}

.catalog-sub-nav.visible {
    animation: growAndShrink 1s ease-in-out;
}

@keyframes growAndShrink {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* 
.f-carousel {
    height: 80vh !important;
} */


.custom-thumbs {
    position: sticky;
    height: 17%;
    left: 0;
}
.custom-thumbs img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    border: var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);
    border-radius: var(--f-thumb-border-radius);
    animation: f-fadeIn .2sease-out;
    z-index: 10;
}
.align-center {
    align-content: center;
}
@media (max-width: 768px) {
    .is-classic-custom {
        height: var(--f-thumb-height);
    }
    .custom-thumbs {
        position: sticky;
        height: 100%;
        left: 0;
    }
}