.product-card__container{
    container: product-card / inline-size;
    z-index: 1;
}

.carrousel__content{
    > .product-card__container{
        min-inline-size: 240px;
        inline-size: 240px;

        &:has(> .product-card[micro]){
            min-inline-size: 200px;
            inline-size: 200px;
        }
    }
}

.grid {
    > .product-card__container{
        z-index: auto;
        
        > .product-card{
            background: var(--_color-white);
            block-size: 100%;
        }
    }
}

.product-card{
    position: relative;
    min-inline-size: 100%;
    block-size: 100%;
    text-align: center;
    padding-inline: 24px;
    padding-block: 24px 36px;
    border-radius: 12px;
    border: 2.5px solid var(--_color-gray-2);
    scroll-snap-align: center;
    display: flex;
    flex-flow: column wrap;
    gap: 16px;

    &[nano]{
        > a{
            background: var(--_color-white);
            padding-block: 24px;
            border-radius: 16px;
            align-content: center;
        }
    }

    &[mini]{
        inline-size: 100%;
        padding-inline: 0;
        padding-block: 12px;
        border: none;
        display: grid;
        grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, auto));
        align-items: center;
        gap: 8px 24px;

        > a{
            grid-column: 1 / span 1;
            grid-row: 1 / span 2;
        }

        > header{
            grid-column: 2 / span 1;
            grid-row: 1 / span 1;
            text-align: start;
            align-items: start;
        }

        > .product-card__content{
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            text-align: start;

            > p{
                justify-content: start;
            }
        }

        > .product-card__actions{
            display: none;
        }
    }

    &[skeleton]{
        > a{
            > img{
                position: relative;

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    inline-size: 100%;
                    block-size: 100%;
                    background: var(--_color-gray-2);
                    border-radius: 8px;
                }

                &::after{
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    transform: translateX(-100%);
                    background-image: linear-gradient(
                        90deg, 
                        rgba(142, 142, 145, 0) 0, 
                        rgba(142, 142, 145, 0.1) 20%, 
                        rgba(142, 142, 145, 0.2) 60%, 
                        rgba(142, 142, 145, 0)
                    );
                    animation: shimmer 3s infinite;
                }
            }
        }

        > header{
            > h6{
                position: relative;
                inline-size: 30%;
                min-block-size: 1.87ch;
                background: var(--_color-gray-2);
                border-radius: 8px;
                overflow: hidden;
                
                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    transform: translateX(-100%);
                    background-image: linear-gradient(
                        90deg, 
                        rgba(142, 142, 145, 0) 0, 
                        rgba(142, 142, 145, 0.1) 20%, 
                        rgba(142, 142, 145, 0.2) 60%, 
                        rgba(142, 142, 145, 0)
                    );
                    animation: shimmer 3s infinite;
                }
            }

            > a{
                position: relative;
                inline-size: 80%;
                min-block-size: 3.74ch;
                background: var(--_color-gray-2);
                border-radius: 8px;

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    transform: translateX(-100%);
                    background-image: linear-gradient(
                        90deg, 
                        rgba(142, 142, 145, 0) 0, 
                        rgba(142, 142, 145, 0.1) 20%, 
                        rgba(142, 142, 145, 0.2) 60%, 
                        rgba(142, 142, 145, 0)
                    );
                    animation: shimmer 3s infinite;
                }
            }
        }

        > .product-card__content{
            display: flex;
            flex-flow: column wrap;
            align-items: center;

            > h4{
                position: relative;
                inline-size: 30%;
                min-block-size: 1.87ch;
                margin-block: 0 4px;
                background: var(--_color-gray-2);
                border-radius: 8px;
                overflow: hidden;

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    transform: translateX(-100%);
                    background-image: linear-gradient(
                        90deg, 
                        rgba(142, 142, 145, 0) 0, 
                        rgba(142, 142, 145, 0.1) 20%, 
                        rgba(142, 142, 145, 0.2) 60%, 
                        rgba(142, 142, 145, 0)
                    );
                    animation: shimmer 3s infinite;
                }
            }

            > p{
                position: relative;
                min-block-size: 1.87ch;
                background: var(--_color-gray-2);
                border-radius: 8px;
                overflow: hidden;

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    transform: translateX(-100%);
                    background-image: linear-gradient(
                        90deg, 
                        rgba(142, 142, 145, 0) 0, 
                        rgba(142, 142, 145, 0.1) 20%, 
                        rgba(142, 142, 145, 0.2) 60%, 
                        rgba(142, 142, 145, 0)
                    );
                    animation: shimmer 3s infinite;
                }

                > *{
                    opacity: 0;
                }
            }
        }

        > .product-card__actions{
            display: flex;
            flex-flow: column wrap;
            align-items: center;

            > a{
                inline-size: 100%;
                color: transparent;

                &:last-child{
                    position: relative;
                    inline-size: 70%;
                    background: var(--_color-gray-2);
                    border-radius: 8px;
                    overflow: hidden;
                    color: transparent !important;
                    
                    &::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        transform: translateX(-100%);
                        background-image: linear-gradient(
                            90deg, 
                            rgba(142, 142, 145, 0) 0, 
                            rgba(142, 142, 145, 0.1) 20%, 
                            rgba(142, 142, 145, 0.2) 60%, 
                            rgba(142, 142, 145, 0)
                        );
                        animation: shimmer 3s infinite;
                    }
                }
            }
        }
    }

    > a{
        > img{
            border-radius: 8px;
        }
    }

    > header{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        gap: .5ch;

        > h6{
            font-family: var(--_font-family-semibold);
        }

        > a{
            font-family: var(--_font-family-bold);
            font-size: var(--_font-size-h4);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
            text-decoration: none;
        }
    }

    > .product-card__content{
        margin-block: auto 0;
        
        > h4{
            font-family: var(--_font-family-semibold);
        }

        > p{
            font-family: var(--_font-family-bold);
            color: var(--_color-gray-4);
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
    }

    > .product-card__actions{
        display: flex;
        flex-flow: column wrap;
        gap: 10px;

        > a{
            font-size: var(--_font-size-p);
            font-family: var(--_font-family-semibold);
        }
    }

    > .product-card__extra-actions{
        position: absolute;
        top: 20px;
        right: 24px;
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (min-width: 768px){
    .carrousel__content{
        > .product-card__container{
            min-inline-size: 280px;
            inline-size: 280px;

            &:has(> .product-card[micro]){
                min-inline-size: 300px;
                inline-size: 300px;
            }
        }
    }
}

@container product-card (max-width: 290px){
    .product-card{
        &[micro]{
            min-inline-size: auto;
            padding-inline: 16px;
            padding-block: 16px 24px;
            gap: 12px;

            > header{
                > h6{
                    font-size: var(--_font-size-sm);
                }

                > a{
                    font-size: var(--_font-size-h6);
                }
            }

            > .product-card__content{
                display: flex;
                flex-flow: column wrap;
                gap: .5ch;

                > p{
                    font-size: var(--_font-size-sm);
                }
            }
        }
    }
}

/* @container product-card (min-width: 300px){
    .product-card {
        & > a {
            > img {
                inline-size: 160px;
                block-size: 160px;
            }
        }
    }
} */