body {
    background-color: #F2E8D5;
    font-family: "Poppins", sans-serif !important;
}

.skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 100;
    padding: .75rem 1rem; background: rgb(245, 184, 65); color: rgb(58, 11, 12);
    font-weight: 700; border-radius: .35rem; transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
:where(a, [role="button"]):focus-visible { outline: 3px solid rgb(245, 184, 65); outline-offset: 3px; }

img {
    width: 100%;
}

.header {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
    padding-inline: 1rem;
    background-color: rgb(58, 11, 12);
    height: 7rem;

    & img {
        width: 100px;
        height: 100px;
    }

    & nav .menu {
        display: flex;
        gap: 1rem;

        & a {
            background-color: rgb(58, 11, 12);
            color: white;
            border: 2px solid rgb(107, 70, 71);
            padding: .5rem 1rem;
            border-radius: 1.5rem;
            transition: all .1s ease-in-out;

            &:hover {
                transform: scale(1.1);
                box-shadow: 4px 4px 5px rgba(255, 255, 255, 0.2);
                color: rgb(245, 184, 65);
            }
        }

        & li {
            font-size: 1.125rem;
        }
    }
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .product-title {
        margin: 0 1rem 1.5rem;
        color: rgb(58, 11, 12);
        text-align: center;
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    & .container {
        background-color: #F2E8D5;
        border-radius: .5rem;
        max-width: 74rem;
        min-height: 31.5rem;
        display: flex;
        justify-content: flex-start;
        gap: 2rem;
        padding-inline: 1rem;
        border: 2px solid rgb(58, 11, 12);

        & .mini-imagens {
            display: flex;
            flex-direction: column;
            width: 3.438rem;
            margin-top: 1.5rem;
            gap: 1rem;
            overflow: hidden;

            & .cachacas-social{
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                margin-bottom: 1.5rem;
                padding: .25rem;
            }

            & .instagram {
                background-color: white;
                border-radius: 100%;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 1rem;
                width: 2.875rem;
                height: 2.875rem;
                border: 2px solid rgb(58, 9, 10);

                &:hover{
                    cursor: pointer;
                    border-color: rgb(245, 184, 65);
                }


                & .instagram-icon {
                    height: 1.75rem;
                    width: 1.75rem;
                }
            }

            & img:not(.instagram-icon) {
                border: 2px solid rgb(58, 11, 12);
                height: 3.125rem;


                &:hover {
                    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
                    cursor: pointer;
                }
            }
        }

        & .imagem-principal {
            overflow: hidden;
            cursor: crosshair;

            &:hover {
                border-inline: 2px solid rgb(58, 11, 12);
            }

            & img {
                width: 42.5rem;
                height: 31.5rem;
                object-fit: contain;
            }
        }

        & .description {
            margin-top: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            max-height: 31.5rem;
            overflow: hidden;

            & h2 {
                text-align: center;
                font-size: 2rem;
                margin-bottom: .5rem;
                color: rgb(58, 9, 10);
            }

            & .description-list {
                font-size: 1.25rem !important;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                flex: 1;
                overflow: auto;
                padding-right: 0.5rem;
                padding-bottom: 1rem;
                scrollbar-width: thin;
                scrollbar-color: #8C6A32 #F2F2F2;

                &::-webkit-scrollbar-thumb {
                    background-color: #8C6A32;
                    border-radius: .25rem;
                    border: 2px solid #F2F2F2;
                }

                &::-webkit-scrollbar-thumb:hover {
                    background-color: #A68144;
                }

                & li {
                    
                    color: rgb(107, 70, 71);
                    font-weight: bolder;
                    line-height: 140%;
                }

                & li span {
                    color: rgb(58, 11, 12);
                    font-size: 1.25rem;
                }
            }
        }
    }
}

@media (max-width: 900px) {
    main .container { height: auto; min-height: 0; flex-wrap: wrap; margin: 0 1rem 2rem; padding-bottom: 1rem; }
    main .container .mini-imagens { width: 100%; flex-direction: row; align-items: center; overflow: visible; }
    main .container .mini-imagens .cachacas-social { margin: 0 0 0 auto; }
    main .container .imagem-principal { flex: 1 1 45%; }
    main .container .imagem-principal img { width: 100%; height: min(60vw, 31.5rem); }
    main .container .description { flex: 1 1 45%; max-height: none; }
}
@media (max-width: 720px) {
    .header { height: auto; min-height: 7rem; margin-bottom: 2rem; flex-direction: row; }
    main .container { display: block; }
    main .container .mini-imagens { display: flex; }
    main .container .imagem-principal { display: block; margin-bottom: 1rem; }
    main .container .description .description-list { font-size: 1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}