:root {
    --color-blue: #1f72f0;
    --color-red: #f84848;
    --color-green: #28b765;
    --color-orange: #f52;
    --color-black: #444;

    --shoe-blue: hue-rotate(0deg);
    --shoe-red: hue-rotate(115deg) brightness(1.5);
    --shoe-green: hue-rotate(-70deg) brightness(1.3);
    --shoe-orange: hue-rotate(150deg) brightness(1.8);
    --shoe-black: grayscale();
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.card {
    width: 800px;
    margin: 3em auto;
    display: flex;
    --current-color: var(--color-blue);
    --current-shoe: var(--shoe-blue);
}

.card>div {
    box-shadow: 0 0 10px 0 #0004;
}

.image {
    background-color: var(--current-color);
    background-image: linear-gradient(to right, #fff0, #fff5);
    position: relative;
    margin: 20px 0 20px 100px;
    padding-top: 50px;
}

.image>.logo {
    filter: invert(1);
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
}

.image>.shoe {
    width: 500px;
    transform: rotate(-20deg);
    margin-top: 20px;
    margin-left: -150px;
    filter: var(--current-shoe);
}

.image>h1 {
    position: absolute;
    top: -50px;
    left: 10px;
    font-size: 140px;
    color: #fff2;
}

.image>.share {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image>.share::before {
    font-family: "Material Symbols Outlined";
    content: "share";
    padding-right: 2px;
    font-size: 20px;
    color: var(--current-color)
}

.badge {
    text-transform: uppercase;
    font-size: 0.5em;
    padding: 0.5em;
    margin-left: 0.5em;
    border-radius: 5px;
    background-color: var(--current-color);
    color: white;

}

.info {
    padding: 1em;
    z-index: 2;
}

.info>h2 {
    display: flex;
    align-items: center;
    margin: 0;
}

.info>h4 {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
}

input {
    margin-right: 1em;
}

input[name="color"]::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    position: relative;
    top: -2px;
    left: -2px;
    box-sizing: border-box;
}

input#blue::before {
    background-color: var(--color-blue);
}

input#red::before {
    background-color: var(--color-red);
}

input#green::before {
    background-color: var(--color-green);
}

input#orange::before {
    background-color: var(--color-orange);
}

input#black::before {
    background-color: var(--color-black);
}

input[name="color"]:checked::before {
    border: 3px solid white;
    box-shadow: 0 0 5px 0 #0008;
}

.card:has(input#blue:checked) {
    --current-color: var(--color-blue);
    --current-shoe: var(--shoe-blue)
}

.card:has(input#red:checked) {
    --current-color: var(--color-red);
    --current-shoe: var(--shoe-red)
}

.card:has(input#green:checked) {
    --current-color: var(--color-green);
    --current-shoe: var(--shoe-green)
}

.card:has(input#orange:checked) {
    --current-color: var(--color-orange);
    --current-shoe: var(--shoe-orange)
}

.card:has(input#black:checked) {
    --current-color: var(--color-black);
    --current-shoe: var(--shoe-black)
}

input[name="size"]::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    position: relative;
    top: -15px;
    left: -2px;
    box-sizing: border-box;
    background-color: #efefef;
}

.sizes {
    counter-reset: size 6;
}

input[name="size"] {
    counter-increment: size;
    margin-right: 1.5em;
}

input[name="size"]:nth-child(n)::before {
    content: counter(size);
}

input[name="size"]:checked::before {
    background-color: var(--current-color);
    color: white;
}

.info>.actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actions>button {
    width: fit-content;
    border: none;
    background-color: var(--current-color);
    color: white;
    padding: 1em;
    text-transform: uppercase;
}

.actions>button>span {
    display: inline-flex;
    align-items: center;
}

.actions>button>span::before {
    font-family: "Material Symbols Outlined";
    content: "shopping_cart";
    padding-right: 0.5em;
    font-size: 20px;
}

.price {
    font-size: 36px;
    position: relative;
}

.actions>.price::before {
    content: "$";
    font-size: 0.5em;
    position: absolute;
    top: 0.25em;
    left: -0.5em;
}

@media screen and (width < 900px) {
    .card {
        flex-direction: column;
        width: 100%;
    }

    .image {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image>h1 {
        top: unset;
        left: unset;
        font-size: 42vw;
    }

    .image>.shoe {
        transform: rotate(-5deg);
        margin: 0;
        width: 100%;
    }

    .info {
        padding: 2em;
    }

    input[name="color"] {
        top: 681px;
        left: 30px;
    }
}

@media screen and (width < 360px) {
    .actions>button {
        padding: 0.5em;
    }

    .price {
        font-size: 26px;
    }
}

@media screen and (width < 325px) {

    .colors,
    .sizes {
        text-align: center;
    }

    .actions {
        flex-direction: column-reverse;
    }

    .actions>button {
        margin-top: 1em;
        width: 100%;
    }
}