:root {
    --gray-dark: #434343;
    --primary: var(--red, --gray-dark);
    --white: #fff;
    --border: #ddd;
    --gray-light: #c5c5c5;
    --blue-link: blue;
    --loading: #c5c5c573;
}

::backdrop {
    backdrop-filter: blur(2px);
}

body:has(dialog[open]) {
    overflow: hidden;
}

article {
    font-size: 2rem;
    margin: 3rem;
    color: var(--red);
}

header[data-registry-header] {
    border-block: .2rem solid var(--red);
    border-radius: 25px;
    margin-block: 0 5rem;

    h1 {
        text-align: center;
    }
}

[data-registry-product-list] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;

    form {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--gray-light);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 5px 5px 15px var(--gray-light);

        &[data-fulfilled="True"] {
            opacity: .5;
            box-shadow: none;
        }

        header {
            img {
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                width: 100%;
            }
        }

        main {
            flex: 1;
            padding: .5rem;
            min-height: 5rem;
            display: flex;
            flex-direction: column;
            gap: .5rem;

            h3,
            p {
                text-align: center;
            }
        }

        section {
            text-align: center;
            font-size: 1rem;
            padding: .3rem 0;

            &[data-currency] {
                font-size: 2rem;
                font-weight: 700;
            }
        }

        ins {
            display: flex;
            justify-content: center;
            margin: 1rem;
            font-size: 3rem;
            text-decoration: none;
            color: var(--primary);
        }

        footer {
            min-height: 1rem;
            display: flex;

            button {
                border: none;
                flex: 1;
                padding: 1rem 0;
            }

            [data-delete] {
                border: 2px solid var(--primary);
                color: var(--primary);
                font-weight: 500;
            }

            [data-add] {
                color: var(--white);
                background-color: var(--primary);
            }
        }
    }
}