* {
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    user-select: none;
}

@media screen {
    
    html {
        font-size: 2.5vmin;
        margin: 0;
        padding: 0;
    }
    
    body {
        margin: 0;
        display: grid;
        grid-template-rows: 4rem 1fr 4rem;
        background: rgb(187,187,187);
        background: linear-gradient(0deg, rgba(187,187,187,1) 0%, rgba(242,242,242,1) 100%);
    }
    
    header {
        Background: #000;
        color: #fff;
        display: grid;
        grid-template-columns: 1fr 15rem;
    }
    
    header h1 {
        font-size: 1.4rem;
        padding: .4rem;
        margin: 0;
        line-height: 1.2em;
    }
    
    header h1 em {
        font-size: 1rem;
        display: block;
    }
    
    #price-total {
        padding: .4rem;
        line-height: 3.2rem;
        text-align: right;
        font-size: 2.4rem;
    }
    
    main {
        display: grid;
        gap: 2rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:  1fr 1fr;
        padding: 2rem;
    }
    
    .item {
        border-radius: .5rem;
        background-color: #fff;
        background-size: cover;
        background-position: center;
        box-shadow: .1rem .1rem .5rem rgba(0,0,0,.2);
        position: relative;
        text-align: center;
    }
    
    .item::after {
        content: '';
        border: .05rem solid #555;
        border-radius: inherit;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    
    .item h2 {
        text-align: center;
        font-size: 1.6rem;
        background: rgba(255, 255, 255, .8);
        margin: 0;
        line-height: 3rem;
        border-radius: inherit;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .item .cart-count {
        position: absolute;
        top: -1rem;
        right: -1rem;
        height: 3rem;
        width: 3rem;
        background: #C00;
        line-height: 3rem;
        text-align: center;
        color: #fff;
        font-size: 1.6rem;
        font-weight: bold;
        border-radius: 1.5rem;
        box-shadow: .1rem .1rem .5rem rgba(0,0,0,.2);
        z-index: 1;
        transition: transform .1s;
    }
    
    .item .cart-count.empty {
        background: #555;
        transform: scale(.5);
    }
    
    .item .cart-count::after {
        content: '-';
        position: absolute;
        top: 3.5rem;
        left: .5rem;
        background: #fff;
        height: 2rem;
        width: 2rem;
        border-radius: 1rem;
        font-size: 1.4rem;
        line-height: 2rem;
        color: #555;
        box-shadow: .1rem .1rem .5rem rgba(0,0,0,.2);
    }
    
    .item .cart-count.empty::after {
        display: none;
    }
    
    .item .price {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: .4rem;
        text-align: right;
        font-size: 1.6rem;
        background: rgba(255, 255, 255, .8);   
        border-bottom-right-radius: inherit;
        border-top-left-radius: inherit;
    }
    
    footer {
        text-align: center;
        position: relative;
    }
    
    footer a {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        line-height: 2rem;
        padding: 1rem .4rem;
    }
    
    footer button {
        font-size: 1.6rem;
        background: #C00;
        color: #fff;
        padding: .5rem;
        border-radius: .5rem;
    }
    






}

@media print {
    .item {
        background: none !important;
        padding: 1.5rem 0;
        display: grid;
        grid-template-columns: 1fr 2fr 15rem;
        grid-template-areas: "title description price";

    }

    #price-total {
        display: none;
    }

    .cart-count {
        display: none;
    }

    h2, p, .price {
        font-size: 2.5rem;
        margin: 0;
        padding: 0;
    }

    h2 {
        grid-area: title;
    }

    p {
        grid-area: description;
    }

    .price {
        grid-area: price;
        text-align: right;
    }

    .variantt h2 {
        display: none;
    }

    header, footer {
        display: none;
    }
}