/* reset css */

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* custom properties */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
:root {
    --black-brown: #432818;
    --really-black-brown: #362013;
    --latte-brown: #99582A;
    --cream-brown: #FFE6A7;
    --accent-color: #339989;
    --spicy-purple : #5f2c82;
    --scale: 55;
    --scale-up-text: 1;
    --scale-down-text: 1;
    --sans-serif-font: 'Figtree';
    --serif-font: 'Roboto Slab';
    /* i should have used em & rem instead of those */
}
button:focus-visible, a:focus-visible {
    outline: 2px dashed #fff;
}
button, a {
    cursor: pointer;
}
body {
    background: url(../../assets/lukasz-rawa-fmc-tFMMiBs-unsplash_1500.png) fixed;
    background-color: var(--black-brown);
    background-size: cover;
    color: var(--cream-brown);
    display: grid;
    grid-template-columns: calc(100% - 40vw) 1fr;
    font-family: var(--sans-serif-font), serif;
    font-size: calc(2rem * var(--scale-up-text));
}
.loader {
    position: fixed;
    display: flex;
    justify-content: center;
    gap: 5rem;
    align-items: center;
    z-index: 100;
    height: 100%;
    inset: 0;
    background-color: var(--black-brown);
    transition: filter .4s ease-out;
}
.disappear {
    filter: opacity(0);
}
.dot {
    width: 6rem;
    transform-origin: center;
    animation: loading 1s infinite, spinning-beans 1.2s linear infinite;
}
.dot:nth-child(2) {
    animation-name: loading, spinning-beans2;
    animation-delay: .125s, 0s;
}
.dot:nth-child(3) {
    animation-name: loading, spinning-beans3;
    animation-delay: .225s, 0s;
}
@keyframes loading {
    from {
        translate: 0 0;
    }
    50% {
        translate: 0 -4rem;
    }
    to {
        translate: 0 0;
    }
}
@keyframes spinning-beans {
    from {
        rotate: 0deg;
    }
    33% {
        rotate: 120deg;
    }
    66% {
        rotate: 240deg;
    }
    to {
        rotate: 360deg;
    }
}
@keyframes spinning-beans2 {
    from {
        rotate: 120deg;
    }
    33% {
        rotate: 240deg;
    }
    66% {
        rotate: 360deg;
    }
    to {
        rotate: 480deg;
    }
}
@keyframes spinning-beans3 {
    from {
        rotate: 240deg;
    }
    33% {
        rotate: 360deg;
    }
    66% {
        rotate: 480deg;
    }
    to {
        rotate: 600deg;
    }
}

/* ***************************************************************NAVBAR***************************************************************** */

.top-navbar {
    display: grid;
    z-index: 2;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    top: 0;
    width: 100%;
    height: calc(max-content + 1rem);
    min-height: 35px;
    padding: .5rem 10rem;
    box-shadow: 0 2px 1rem var(--really-black-brown);
    background-color: rgba(54, 32, 19, 0.674);
    backdrop-filter: blur(10px);
}
/* 1. icône de la navbar */

.item1{
    display: flex;
    align-items: center;
}
.hamburger {
    display: none;
    position: relative;
    width: 7rem;
    height: 6rem;
    border-radius: 1rem;
    background-color: transparent;
    border: none;
}
.hamburger:hover,
.hamburger:focus-visible {
    backdrop-filter: brightness(90%);
}
.line {
    display: block;
    position: absolute;
    width: 5rem;
    height: 3px;
    background-color: var(--cream-brown);
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important;
}

.line.middle {
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    animation: middle-line-reverse .35s ease-out forwards;

}
.line.middle.active {
    animation: middle-line .35s ease-out forwards;
}
.line.top {
    top: 1.2rem;
    animation: top-line-reverse .35s ease-out forwards;
}
.line.top.active {
    animation: top-line .35s ease-out forwards;
}
.line.bottom {
    bottom: 1.2rem;
    animation: bottom-line-reverse .35s ease-out forwards;
}
.line.bottom.active {
    animation: bottom-line .35s ease-out forwards;
}
.header {
    display: none;
}
@keyframes top-line {
    40% {
        top: 50%;
    }
    70% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
}
@keyframes middle-line {
    0% {
        filter: opacity(1);
    }
    50% {
        filter: opacity(0);
    }
    100% {
        filter: opacity(0);
    }
}
@keyframes bottom-line {

    40% {
        bottom: 50%;
    }
    70% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(0deg);
    }
    100% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(-45deg);
    }
}
@keyframes top-line-reverse {
    0% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    50% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        top: 1.2rem;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
@keyframes middle-line-reverse {
    0% {
        filter: opacity(0);
    }
    50% {
        filter: opacity(0);
    }
    55% {
        filter: opacity(1);
    }
}
@keyframes bottom-line-reverse {
    0% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(-45deg);
    }
    50% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(0deg);
    }
    100% {
        bottom: 1.2rem;
        transform: translate(-50%, 50%) rotate(0deg);
    }
}
.coffee-pot-container {
    display: flex;
    align-items: center;
    width: 7rem;
    height: 100%;
    position: relative;
    border: none;
    border-radius: 20px;
    background-color: transparent;
    transition: backdrop-filter .1s;
}

.coffee-pot-container:hover, 
.coffee-pot-container:focus-visible {
    backdrop-filter: brightness(90%);
    outline: none;
}

.coffee-pot-icon {
    width: 6rem;
    height: 100%;
    transition: transform .2s cubic-bezier(.66,.43,.65,.41);
    transition-delay: .2s;
}
.coffee-pot-icon.active {
    transform: rotate(90deg);
    transition: transform .2s;
    transition-delay: .2s;
}
.coffee-pot-container::after {
    content: '';
    display: block;
    width: 0;
    height: .5rem;
    border-top-right-radius: 80%;
    background-color: var(--latte-brown);
    position: absolute;
    top: 5.5rem;
    left: 6.1rem;
    z-index: -1;
    transform-origin: top;
    animation: var(--animation, none) forwards;
}

/* animation du café qui coule */

@keyframes liquid {
    0%{
        width: 0rem;
    }    
    50%{
        width: 0rem;
        transform: scaleY(0);
    }
    100%{
        transform: scaleY(var(--scale));
        width: .5rem;
    }
}
@keyframes liquid-reverse {
    0%{
        transform: scaleY(var(--scale)) translateY(0%);
        width: .5rem;
    }
    99.9%{
        transform: scaleY(var(--scale)) translateY(100%);
        width: .5rem;
    }
    100%{
        display: none;
    }
}




/* navbar gobelet à café */

.coffee-cup {
    position: fixed;
    top: 15rem;
    z-index: 2;
    left: -40rem;
    width: 40rem;
    height: max-content;
    transition: transform .2s;
    transition-delay: 0s;

}
.coffee-smoke {
    height: 10rem;
    transform: translate(8%, 50%);
    filter: opacity(0);
    transition: filter .5s, transform .5s;

}
.coffee-smoke.visible {
    filter: opacity(0.3);
    transition: filter .3s, transform .3s;
    transform: translate(8%, 0%);
}
.coffee-cup-image {
    width: 100%;
    height: 38rem;
}
.side-navbar-links {
    position: absolute;
    top: 26.5rem;
    right: 5rem;
    width: max-content;
    font-size: 2.2rem;
    list-style-type: none;
    text-align: end;

}
.side-navbar-links li{
    margin-bottom: 1.8rem;
}
.side-navbar-links li:first-child{
    display: none;
}
.side-navbar-links li a{
    position: relative;
    text-decoration: none;
    font-weight: 600;
    color: var(--black-brown);
    font-family: var(--sans-serif-font), sans-serif;
}
.side-navbar-links li a::after {
    content: '';
    display: block;
    position: absolute;
    right: -.5rem;
    top: .2rem;
    width: .2rem;
    background-color: var(--latte-brown);
    height: 90%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .2s;
}


.side-navbar-links li:hover a::after {
    transform: scaleY(1);
}

.coffee-cup.out {
    transform: translate(74%, 0%);
    transition-delay: 0s;
}
/* logo ROBUSTO */
.item2 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 1/2/2/3;
}
.item2 svg {
    width: 25rem;
    height: auto;
}

/* bouton compte utilisateur et panier */

.item3{
    display: flex;
    justify-content: end;
    align-items: center;
    height: 100%;
    grid-area: 1/3/2/4;
}
.user-buttons {
    width: 24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.7rem;
    width: max-content;
    list-style-type: none;
}
.user-buttons li {
    position: relative;
    display: block;
    height: max-content;
}
.user-buttons>li:first-child {
    height: 6.3rem;
    transform: translate(1rem, -.1rem);
}
.user-buttons li:first-child button,
.user-buttons li:first-child>div a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    border-radius: 1rem;
    height: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    color: var(--cream-brown);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .1rem;
    transition: all .2s;
    cursor: pointer;
    text-decoration: none;
}
.user-buttons li:first-child button {
    width: 11rem;
}
.flag{
    width: 5rem;
    margin-right: .8rem;
}
.user-buttons li:first-child button:hover,
.user-buttons li:first-child button:focus-visible,
.user-buttons li:first-child>div a:hover,
.user-buttons li:first-child>div a:focus-visible {
    backdrop-filter: brightness(90%);
}
.drop-down-language-picker {
    display: none;
    border-radius: 1rem;
    position: absolute;
    left: -7rem;
    bottom: -330%;
    width: 25rem;
    padding: 2rem;
    background-color: var(--spicy-purple);
    transition: all .2s;
    box-shadow: 0 0 2rem var(--really-black-brown);
    font-family: var(--sans-serif-font), sans-serif;
}
.user-buttons li:first-child>div>p {
    font-size: 2.3rem;
    white-space: break-spaces;
    margin-bottom: 1rem;
    font-weight: 600;
}
.user-buttons li:first-child ul li {
    display: flex;
    justify-content: center;
}
.user-buttons li a {
    display: block;
    transition: all .2s;
    user-select: none;
}
.user-icon {
    width: 4.8rem;
    height: 4.8rem;
    transition: transform .1s;
}
.user-icon:hover,
.user-icon:focus-visible,
.shopping-cart-icon:hover,
.user-buttons>li>a:focus-visible {
    transform: rotate(-17deg);
}
#cart-number {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--latte-brown);
    transform: translate(30%, -30%);
    border-radius: 1rem;
    width: max-content;
    padding: .25rem .8rem;
    font-family: var(--sans-serif-font), sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cream-brown);
    height: 2rem;
    pointer-events: none;
}


/* ****************************************************************************ACHATS DU CLIENT********************************************************************************** */

.cart-products {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3.5rem;
    padding: 10rem 4rem 2rem 4rem;
    transition: all .2s;
}
.cart-products.got-a-weely {
    padding-bottom: 0;
}
h1 {
    width: 100%;
    font-size: 4rem;
    letter-spacing: .1rem;
    position: relative;
}
h1::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1rem;
    width: 100%;
    height: .25rem;
    background-color: var(--cream-brown);
    border-radius: 999px;
}
/* *********************WEELY*******************************/
.weely {
    height: 56rem;
    transform: translateY(-.8rem);
    animation: fade-in .2s ease-in forwards;
}

/* *********PART OF BODY *********** */

#bubble {
    animation: bubble 1s ease-in-out infinite alternate;
}
@keyframes bubble {
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(1rem);
    }
    
}
@keyframes wiggling {
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(.4rem);
    }
}
@keyframes wiggling-adaptating {
    from{
        transform: scaleY(1);
    }
    to{
        transform: scaleY(1.1);
    }
}
@keyframes fade-in {
    from{
        filter: opacity(0);
    }
    to{
        filter: opacity(1);
    }
    
}
#coffee-cup-inside {
    animation: wiggling .8s ease-in-out infinite alternate;
}
#coffee-liquid {
    animation: wiggling-adaptating .8s ease-in-out infinite alternate;
    transform-origin: top;
    transform-box: fill-box;
}

/* ********************FIN WEELY*****************************/
.product {
    background-color: var(--really-black-brown);
    box-shadow: 0 0 3rem var(--really-black-brown);
    padding: calc(2rem * var(--scale-up-text));
    width: 82rem;
    height: 26rem;
    border-radius: 2rem;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    grid-template-rows: min-content 1fr;
    gap: 0 2rem;
    filter: opacity(85%);
    transition: all .3s;
}
@keyframes card-disappear {
    to {
        opacity: 0;
    }
}
.going-up {
    transition: all .2s ease-in-out !important;
    transform: translateY(calc(-100% - 3.4rem));
}
.begin-anim-ended {
    transition: filter .2s;
}
.not-on-screen {
    transform: translateY(5rem);
    filter: opacity(0);
}
/* DETAILS DE CHAQUE CARTE */

.product img {
    width: 15rem;
    height: 100%;    
    border-radius: 2rem .5rem .5rem 2rem;
    grid-area: 1/1/-1/2;
}
.product .title {
    grid-area: 1/2/3/3;
    position: relative;
}
.title h2{
    font-size: calc(4.2rem * var(--scale-down-text));
    font-family: var(--serif-font), serif;
    margin-top: 1rem;
    font-weight: 700;
    width: max-content;
    position: relative;
}
.title h3 {
    font-weight: 500;
    font-family: var(--serif-font), serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
.title h2::after {
    display: block;
    position: absolute;
    bottom: 0;
    content: '';
    width: calc(100% - 6rem);
    height: .35rem;
    background-color: var(--latte-brown);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0% 100%);
}
.title>p {
    font-size: 2rem;
    font-weight: 500;
    margin-top: .5rem;
    filter: opacity(.95);
}
#unit-price {
    font-size: 1.6rem;
    font-weight: 600;
}
.quantity {
    display: flex;
    justify-content: space-evenly;
    border-radius: 1rem;
    width: 15rem;
    height: 5rem;
    position: absolute;
    left: 20vw;
    bottom: 3rem;
}
.quantifier {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.2rem;
    height: 100%;
    background-color: var(--cream-brown);
    border: none;
    transition: all .1s;
    font-size: 2.6rem;
    font-weight: bold;
    color: var(--accent-color);
}
.quantifier:not(.result):active{
    outline: none;
    filter: brightness(70%);
}
.plus {
    border-radius: 0 1rem 1rem 0;
}
.minus {
    border-radius: 1rem 0 0 1rem;
}
.quantifier:not(.result):hover,
.quantifier:not(.result):focus-visible {
    color: var(--latte-brown);
    cursor: pointer;
    filter: brightness(90%);
}
.quantifier:focus-visible {
    outline: none;
}
.quantifier:not(.plus) {
    border-right: 3px solid var(--black-brown);
}


/* icon et animations de la poubelle */

.trash {
    margin: .5rem 0 .5rem calc(100% - 5rem);
    width: 5rem;
    padding: 1rem;
    border-radius: 1rem;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}
.trash svg {
    fill: var(--latte-brown);
    width: 100%;
    height: max-content;
    transition: all .15s;
}
.trash svg:first-child {
    transform-origin: left;
    width: 3.8rem;
    transform: translate(-.4rem, -.1rem);
}

.trash:hover,
.trash:focus-visible {
    backdrop-filter: brightness(90%);
}
.trash:hover svg:first-child,
.trash:focus-visible svg:first-child {
    transform: translate(-.5rem) rotate(-25deg);
}

/* ****************************************************************************VALIDATION DE L'ACHAT********************************************************************************** */

.cart-validation {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 10.5rem 4rem 2rem 4rem;
    background-color: #362013ea;
    box-shadow: -1rem 0 4rem var(--really-black-brown);
}
.cart-validation::before,
.cart-validation::after {
    content: '';
    display: block;
    position: absolute;
    width: 6rem;
    height: 6rem;
    background-color: var(--latte-brown);
    bottom: 0;
}
.cart-validation::before {
    left: 0;
    clip-path: polygon(100% 100%, 0 0, 0 100%);
}
.cart-validation::after {
    right: 0;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.cart-validation>div:last-child,
.cart-validation>div:nth-last-child(2)>div {
    display: flex;
    position: relative;
    padding: .4rem;
    justify-content: space-between;
    font-size: calc(2rem * var(--scale-up-text));
    width: 100%;
}
.cart-validation h2 {
    width: 100%;
    position: relative;
    letter-spacing: .1rem;
    font-size: calc(3.2rem * var(--scale-up-text));
    font-weight: 600;
}
.cart-validation h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1.5rem;
    height: .25rem;
    background-color: var(--cream-brown);
    border-radius: 999px;
    width: calc(100% + 2rem);
    transform: translateX(-1.5rem)
}
.cart-validation label {
    display: flex;
    width: 100%;
    justify-content: end;
    align-items: center;
    user-select: none;
    font-size: calc(2.2rem * var(--scale-up-text));
    gap: 1rem;
}
.cart-validation label input {
    display: block;
    font-family: var(--sans-serif-font), sans-serif;
    color: var(--spicy-purple);
    font-weight: 700;
    font-size: calc(1.8rem * var(--scale-up-text));
    padding: .9rem 1.3rem;
    text-transform: uppercase;
    border: none;
    letter-spacing: .1rem;
    background-color: var(--cream-brown);
    border-radius: .5rem;
    transition: all .2s;
    max-width: calc(18rem * var(--scale-up-text));
}
.cart-validation label button {
    flex-grow: 1;
    display: block;
    padding: .8rem 2rem;
    border-radius: .5rem;
    color: var(--cream-brown);
    font-weight: 700;
    letter-spacing: .12rem;
    font-size: calc(1.7rem * var(--scale-up-text));
    border: .3rem solid var(--latte-brown);
    background-color: var(--latte-brown);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--sans-serif-font);
    max-width: 18rem;
}
.cart-validation label input:focus,
.cart-validation>label>input:hover,
.cart-validation label input:focus-visible {
    outline: none;
}
.cart-validation label input::placeholder {
    font-size: calc(1.6rem * var(--scale-up-text));
    text-transform: capitalize;
}
.cart-validation label button:hover,
.cart-validation label button:focus-visible {
    background-color: transparent;
}
.recap-products {
    margin: calc(3rem * var(--scale-up-text)) 0 calc(2rem * var(--scale-up-text));
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}
.recap-product {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 6rem 1fr;
}
.recap-product::after {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--cream-brown);
    border-radius: 99px;
    width: 100%;
    top: 130%;
    height: 1px;
}
.recap-product *:last-child {
    text-align: end;
    padding-right: 1rem;
}
.recap-product *:nth-last-child(2) {
    text-align: center;
    font-weight: 700;
}
.recap-product h3 {
    font-weight: 400;
    font-size: calc(2rem * var(--scale-up-text));
}
.mendatory-informations {
    margin: calc(2rem * var(--scale-up-text)) 0 calc(1.5rem * var(--scale-up-text));
}
.mendatory-informations div:nth-child(3) p:nth-child(2) #accent {
    font-weight: 800;
}
.mendatory-informations div:not(:nth-child(3)) p {
    font-size: calc(1.8rem * var(--scale-up-text));
}
.mendatory-informations>div:first-child::after {
    content: '';
    display: block;
    position: absolute;
    top: -1.2rem;
    height: .1rem;
    background-color: var(--cream-brown);
    border-radius: 999px;
    width: calc(100% + 2rem);
    transform: translateX(-1.5rem)
}
.mendatory-informations>div:last-child>p {
    font-size: calc(1.5rem * var(--scale-up-text));
}
.cart-validation>div:last-child {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 16rem;
}
.cart-validation>div:last-child a {
    width: 100%;
    text-align: center;
    padding: 1.4rem;
    font-family: var(--sans-serif-font), sans-serif;
    border-radius: 10rem;
    font-size: calc(2.8rem * var(--scale-up-text));
    background-image: linear-gradient(to right, var(--accent-color), var(--spicy-purple));
    background-size: 285%;
    color: var(--cream-brown);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .1rem;
    box-shadow: 0 0 1rem .5rem var(--really-black-brown);
    transition: all .2s;
}
.cart-validation div:last-child a:last-child {
    background-image: linear-gradient(to right, #D6A411, var(--spicy-purple));
    color: #fff;
    align-content: center;
    font-size: calc(1.5rem * var(--scale-up-text));
}
.cart-validation div:last-child a:focus-visible,
.cart-validation div:last-child a:hover {
    background-position: 90%;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    font-size: 1.9rem;
    width: 100%;
    height: min-content;
    padding: 4rem;
    background-color: var(--really-black-brown);
    z-index: 1;
    grid-area: 2/1/3/3;
}
footer ul {
    width: max-content;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-left: 4rem;
}
footer ul li:nth-child(even) {
    margin-left: 3rem;
    color: var(--cream-brown);
    text-decoration: none;
    position: relative;
}
footer ul li:nth-child(even)::before {
    display: block;
    content: '-';
    position: absolute;
    left: -1.5rem;
}
footer ul li:nth-child(odd) {
    font-size: 2.4rem;
    letter-spacing: .05rem;
    font-family: var(--sans-serif-font);
    font-weight: 500;
}
.advises>ol {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    margin-left: 5rem;
    width: max-content;
}
.advises>ol>li {
    width: max-content;
}
.advises {
    flex-basis: 0;
    flex-shrink: 1;
}
#contact>h2 {
    margin-bottom: 1.6rem;
    letter-spacing: .055em;
}
.advises>h2 {
    margin-bottom: 2rem;
}
footer a {
    color: var(--cream-brown) !important;
}

/* ****************************************************************************INITIALISATION FINALE***************************************************************************** */

#latte {
    color: var(--latte-brown);
}
#accent {
    color: var(--accent-color);
    font-weight: 700;
}

@keyframes fade-in-top {
    from {
        transform: translateY(-1.5rem);
        filter: opacity(0);
    }
    to{
        transform: translateY(0);
        filter: opacity(1);
    }
}
@keyframes fade-in-top-reverse {
    from {
        transform: translateY(0);
        filter: opacity(1);
    }
    to{
        transform: translateY(-1.5rem);
        filter: opacity(0);
    }
}
@media screen and (max-width: 1700px) {
    html {
        font-size: 62.5%;
    }
}
@media screen and (max-width: 1600px) {
    html {
        font-size: 59%;
    }

}
@media screen and (min-width: 1500px) {
    body {
        background-image: url(../../assets/lukasz-rawa-fmc-tFMMiBs-unsplash_2000.png);
    }
}
@media screen and (max-width: 1500px) {
    html {
        font-size: 56%;
    }
    body {
        background-image: url(../../assets/lukasz-rawa-fmc-tFMMiBs-unsplash_1500.png);
    }
}
@media screen and (max-width: 1350px) {
    html {
        font-size: 53%;
    }
    .top-navbar {
        padding: 0 12rem;
        height: 7.5rem;
    }
    .cart-validation>div:last-child {
        justify-content: center;
        gap: 2rem;
    }    
    .cart-validation div:last-child a {
        height: calc(6rem * var(--scale-up-text));
        font-size: calc(2.8rem * var(--scale-up-text));
        line-height: calc(5.7rem * var(--scale-up-text) - 2.8rem);
    }
    .cart-validation div:last-child a svg {
        height: 100%;
    }
}
@media screen and (max-width: 1230px) {
    html {
        font-size: 50%;
    }
}
@media screen and (max-width: 1180px) {
    html {
        font-size: calc(0.55vw + 0.1rem);
    }
    body {
        grid-template-columns: calc(100% - 35vw) 1fr;
    }
    .user-icon {
        display: none;
    }
    .top-navbar {
        padding: 1.2rem 10rem;
        height: min-content;
        box-shadow: none;
    }
    .coffee-pot-container {
        display: none;
    }
    .coffee-smoke, .coffee-cup-image {
        display: none;
    }
    .coffee-cup {
        background-image: linear-gradient(125deg, var(--latte-brown), var(--black-brown));
        background-size: 200%;
        height: 100vh;
        top: 0;
        z-index: 1;
        box-shadow: 0 0 2rem var(--black-brown);
        width: 35rem;
        left: -35rem;
    }
    .coffee-cup.out {
        transform: translate(100%, 0%);
    }
    .hamburger {
        display: block;
    }
    .user-buttons>*:last-child {
        display: none;
    }
    .side-navbar-links {
        width: max-content;
    }
    .side-navbar-links li:first-child {
        display: block;
    }
    .side-navbar-links li a {
        color: var(--cream-brown);
        font-size: 3.5rem;
    }
    .side-navbar-links li a::after {
        content: '';
        display: block;
        position: absolute;
        right: -1.5rem;
        top: .2rem;
        width: .3rem;
        border-radius: 1rem;
        background-color: var(--black-brown);
        height: 90%;
        transform: scale(1);
    }
    body.dark main::after {
        display: block;
    }
    .recap-product {
        grid-template-columns: 1fr 6rem 0.5fr;
    }
}
@media screen and (max-width: 1000px) {
    html {
        font-size: 45%;
    }
    body {
        display: block;
        background-image: url(../../assets/lukasz-rawa-fmc-tFMMiBs-unsplash_1000.png);
    }
    :root {
        --scale-up-text: 1.3;
    }
    .cart-validation > div:last-child {
        height: auto;
        width: 90%;
        margin-inline: auto;
    }
    .drop-down-language-picker {
        bottom: -22.5rem;
    }
    .weely {
        width: 100%;
        margin: 5rem 0;
    }
    .cart-validation, .recap-products {
        min-height: min-content;
    }
    .cart-validation {
        padding: 6rem 4rem;
    }
    .product {
        width: 70%;
    }
    .cart-products {
        min-height: 80vh;
    }
    label input,
    label button {
        height: 5.5rem;
    }
}
@media screen and (max-width: 900px) {
    .product {
        width: 70vw;
    }
}
@media screen and (max-width: 840px) {
    .top-navbar {
        padding: 0 5rem;
        height: 8vh;
        min-height: calc(35px + 2rem);
    }
    .drop-down-language-picker {
        left: -10rem;
    }
    html {font-size: 45%;}
}
@media screen and (max-width: 736px) {
    html {
        font-size: 40%;
    }
    .quantity {
        left: 25rem;
    }
}
@media screen and (max-width: 660px) {
    body {
        background-image: url(../../assets/lukasz-rawa-fmc-tFMMiBs-unsplash_500.png);
    }
    footer {
        flex-direction: column;
        gap: 4rem;
        padding: 6rem;
    }
    footer h2 {
        font-size: 3.7rem;
    }
    .advises li {
        font-size: 2.6rem;
        width: 100% !important;
    }
    #contact li:nth-child(even) {
        font-size: 2.6rem;
    }
    .advises, #contact {
        width: 55rem;
    }
    #contact>ul {
        width: calc(100% - 4rem);
    }
    #contact li:nth-child(odd) {
        font-size: 2.9rem;
    }
    .advises>ol {
        margin-left: 2rem;
        width: calc(100% - 7rem);
    }
    .product {
        width: 92%;
    }
}
@media screen and (max-width: 500px) {
    .quantity {
        position: initial;
        margin-top: 1.9rem;
        justify-content: center;
    }
    .quantifier:not(.plus) {
        border-right: 1.5px solid var(--black-brown);
    }
    .product {
        height: auto;
        width: auto;
        grid-template-columns: 20rem 1fr;
        grid-template-rows: 30rem 1fr;
        position: relative;
    }
    .product img {
        grid-area: 1/1/3/2;
        height: auto;
        width: 100%;
        object-fit: cover;
    }
    .trash svg:first-child {
            transform: translate(-.4rem, .3rem);
    }
    .title h3 {font-size: 3.1rem;}
    .title p {font-size: 2.7rem;}
    #unit-price {font-size: 2.3rem;}
    .trash {
        margin: 0;
        position: fixed;
        bottom: 4rem;
        right: 4rem;
    }
}
@media screen and (max-width: 454px) {
    html {
        font-size: 1.4vw;
    }
    .line {
        height: 2px;
    }
}
@media screen and (max-width: 380px) {
    body {
        background-size: 100rem;
    }
    .coffee-cup {
        width: 100%;
        transition: 0s;
        left: -100%;
    }
    .side-navbar-links {
        right: 50%;
        transform: translateX(50%);
    }
    .side-navbar-links li {
        text-align: center;
        margin-bottom: 5rem;
    }
    .side-navbar-links li a {
        font-size:  6rem;
    }
    .side-navbar-links li a::after {
        height: 2px;
        width: 100%;
        top: 105%;
        right: 0;
    }
    .logo-robusto svg {
        height: 5.5rem;
        width: auto;
    }
    .user-buttons li svg {
        width: 6.5rem;
        height: auto;
    }
    .user-buttons>li>button {
        font-size: 0 !important;
        width: max-content;
    }
    .user-buttons>li>button>img {
        width: 6rem;
    }
    .cart-products {
        padding-top: 15rem;
    }
    .cart-validation > div:last-child {
        width: 100%;
        margin: 0;
    }
}
@media screen and (max-width: 250px) {
    html {
        font-size: 1.8vw;
    }
    :root {
        --scale-down-text: 1.1;
    }
    .product {
        display: flex;
        flex-direction: column;
    }
    .product img {
        width: 35rem;
        margin-inline: auto;
    }
    .title h3 {font-size: 3.5rem; font-weight: 500;}
    .title p {font-size: 3rem;}
    #unit-price {font-size: 2.5rem;}
    .line {
        height: 1px;
    }
    .logo-robusto svg {
        width: 22rem;
    }
    .hamburger {
        height: 5.5rem;
    }
    .hamburger div {
        width: 4rem;
    }
    #contact, .advises {
        width: auto;
    }
}
@media (pointer: coarse) {
    .cart-validation label button:focus {
        background-color: var(--latte-brown);
    }
    .cart-validation label button:active {
        background-color: transparent;
        border-radius: .8rem;
    }
}