/*----------------------------------------------------*/
/*-FONTS--------------------------------------------*/
/*----------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Poor+Story|Love+Ya+Like+A+Sister|Satisfy');

:root {
    --color-BG: #FFFFFF;
    --color-BG-Card: #333;
    --color-Input-BG: #EEEEEE;
    --color-text: #000000;
    --font-Regular: "poor story", sans-serif;
    --font-Menu: "love ya like a sister", serif;
    --font-Foot: "love ya like a sister", serif;
    --font-Title: "love ya like a sister";
    --fontsize-Title: 4rem;
    --fontsize-Subtitle: 1.5rem;
    --fontsize-Smalltitle: 1.2rem;
    --fontsize-Button: 1.5rem;
    --fontsize-FilmCardTitle: 1.5rem;
    --border-radius: 30px;
    --lg-highlight: rgba(255, 255, 255, 0.15);
    --lg-bg-color: rgba(255, 255, 255, 0.05);
    --glass-blur: 35px;
    --glass-saturation: 100%;
    --glass-opacity: 0.08;
    --border-color: rgba(255, 255, 255, 0.1);
    --fontsize-Button: 0.8em;
}

@media (max-width: 900px) {
    :root {
        --fontsize-Title: 3rem;
        --fontsize-Subtitle: 1.2rem;
        --fontsize-Button: 0.8em;
    }

    .justify-center-sm {
        justify-content: center;
    }
}

@media (max-width: 580px) {
    :root {
        --fontsize-Title: 2rem;
        --fontsize-Subtitle: 1rem;
        --fontsize-Button: 0.8em;
    }

    .justify-center-xs {
        justify-content: center !important;
    }
}

body {
    font-size: 16pt;
}
/*----------------------------------------------------*/
/*-MENU-----------------------------------------------*/
/*----------------------------------------------------*/
@media(max-width: 768px) {
    .mud-appbar {
        background: var(--color-Input-BG) !important;
    }
    .mud-appbar::before {
        background-image: revert !important;
    }
}

/*----------------------------------------------------*/
/*-CAROUSEL-------------------------------------------*/
/*----------------------------------------------------*/
.carousel {
    text-align: left;
}
.carousel-item:nth-child(3) {
    left: calc(80% + 0 * var(--item-width) + 0 * 10px);
}
.carousel-item:nth-child(4) {
    left: calc(90% + 0 * var(--item-width) + 0 * 10px);
}

/*----------------------------------------------------*/
/*-HERO-----------------------------------------------*/
/*----------------------------------------------------*/
.hero-item {
    background: transparent !important;
}
.hero.short .hero-item::before {
    background: revert !important;
}
.hero.short {
    box-shadow: revert !important;
    height: 30vh !important;
}
    .hero.short .hero-content {
        color: var(--color-text) !important;
    }

@media (max-width: 768px) {
    .hero.short {
        height: 40vh !important;
    }
}

/*----------------------------------------------------*/
/*-PAGE CONTENT---------------------------------------*/
/*----------------------------------------------------*/
.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 6em auto 2em auto;
    z-index: 1 !important;
    position: relative;
}
    .page-content.child-page {
        background: var(--color-BG);
        padding: 2em 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        max-width: 980px;
    }

    .page-content > div > section, .page-content.child-page > div > section {
        margin-top: 4em; 
        margin-bottom: 4em; 
    }    

.mud-paper {
    background: var(--color-BG);
}
/*----------------------------------------------------*/
/*-BASKET---------------------------------------------*/
/*----------------------------------------------------*/

.basket-card-item {
    
}

.mud-card.basket-card-item {
    background: var(--color-Input-BG) !important;    
    border-bottom: solid 1px var(--color-text);
}

/*----------------------------------------------------*/
/*-FORMS----------------------------------------------*/
/*----------------------------------------------------*/
.mud-input > input.mud-input-root-outlined {
    background: var(--color-Input-BG) !important;
}

/*----------------------------------------------------*/
/*-BUTTONS--------------------------------------------*/
/*----------------------------------------------------*/
.liquid-button {
    position: relative;
    padding: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    max-width: 200px;
    height: 58px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: var(--fontsize-Button);
    font-family: var(--font-Title);
    text-transform: uppercase;
    overflow: hidden;
    border-radius: var(--border-radius);
    cursor: pointer;
}

    .liquid-button span {
        position: relative;
        color: #fff;
        z-index: 1;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .liquid-button .liquid {
        position: absolute;
        top: -80px;
        left: 0;
        width: 200px;
        height: 200px;
        background: #333;
        box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
        transition: .5s;
    }

        .liquid-button .liquid::after,
        .liquid-button .liquid::before {
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -75%);
            background: #000;
        }

        .liquid-button .liquid::before {
            border-radius: 45%;
            background: rgba(20, 20, 20, 1);
            animation: animate 5s linear infinite;
        }

        .liquid-button .liquid::after {
            border-radius: 40%;
            background: rgba(20, 20, 20, .5);
            animation: animate 10s linear infinite;
        }

    .liquid-button:hover .liquid {
        top: -120px;
    }

@keyframes animate {
    0% {
        transform: translate(-50%, -75%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -75%) rotate(360deg);
    }
}



.btn {
    color: #fff;
    cursor: pointer;
    line-height: 2.2;
    margin: 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.1em 1em;
    max-width: 300px;
    text-align: center;
    font-weight: bold;
    font-size: var(--fontsize-Button);
    font-family: var(--font-Title);
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    background-color: transparent !important;
    border-radius: 0;
}

.carousel-nav .btn {
    padding: 0.1em 0.7em;
}

@media (max-width: 768px) {
    .btn {
        padding: 0.5em 1em;
    }
}

.btn.small {
    font-size: 1em;
}

.btn span {
}

@media (min-width: 600px) {
    .btn {
    }
}

.btn:hover {
    text-decoration: none;
}

.btn-1 {
    background: #e02c26;
    font-weight: 100;
}

    .btn-1 svg {
        height: 45px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .btn-1 rect {
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-dasharray: 422, 0;
        transition: all 0.35s linear;
    }

    .btn-1:hover {
        background: rgba(225, 51, 45, 0);
        font-weight: 900;
        letter-spacing: px;
    }

        .btn-1:hover rect {
            stroke-width: 5;
            stroke-dasharray: 15, 310;
            stroke-dashoffset: 48;
            transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
        }

.btn-2 {
    letter-spacing: 0;
}

    .btn-2:hover,
    .btn-2:active {
        letter-spacing: 5px;
    }

    .btn-2:after,
    .btn-2:before {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: 2px solid rgba(255, 255, 255, 0);
        bottom: 0px;
        content: " ";
        display: block;
        margin: 0 auto;
        position: relative;
        transition: all 280ms ease-in-out;
        width: 0;
    }

    .btn-2:hover:after,
    .btn-2:hover:before {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-color: #fff;
        transition: width 350ms ease-in-out;
        width: 70%;
    }

    .btn-2:hover:before {
        bottom: auto;
        top: 0;
        width: 70%;
    }

.btn-3 {
    background: #e3403a;
    border: 2px solid #da251f;
    box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
    font-weight: 900;
    letter-spacing: 2px;
    transition: all 150ms linear;
}

    .btn-3:hover {
        background: #e02c26;
        border: 2px solid rgba(0, 0, 0, 0.05);
        box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
        color: #ec817d;
        text-decoration: none;
        text-shadow: -1px -1px 0 #c2211c;
        transition: all 250ms linear;
    }

.mud-button-group-root .mud-button-root {
    border-radius: var(--border-radius);
}

.mud-button-group-root {
    text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
    border-radius: var(--border-radius);
    background-color: var(--lg-bg-color) !important;
}

.mud-button-group-filled.mud-button-group-override-styles .mud-button-root {
    padding: 0.1em 0.65em;
}

@media (max-width: 768px) {
    .mud-button-group-filled.mud-button-group-override-styles .mud-button-root {
        padding: 0.5em 0.65em;
    }
}

.mud-button-group-root button:hover {
    box-shadow: revert !important;
}

.mud-button-group-filled.mud-button-group-override-styles.mud-button-group-horizontal:not(.mud-button-group-rtl) .mud-button-root:not(:first-child) {
    border-left: solid 1px #333;
}

.mud-button-group-root .btn-4::after {
    background: none !important;
}

.spinner-button-fix {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    padding: 0 16px; /* same horizontal padding as default */
}

.btn-4 {
    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
    overflow: hidden;
    position: relative;
    color: var(--color-text) !important;
    border-radius: var(--border-radius);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
    background-color: var(--lg-bg-color) !important;
}

    .btn-4.no-border {
        border: none !important;
        box-shadow: none;
    }

    .btn-4.no-padding {
        padding: revert;
    }

    .btn-4::before {
    }

    .btn-4 span {
        z-index: 20;
    }

/*    .btn-4:after {
        background: #fff;
        content: "";
        height: 155px;
        left: -75px;
        opacity: 0.2;
        position: absolute;
        top: -50px;
        transform: rotate(35deg);
        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
        width: 50px;
        z-index: 0;
    }

    .btn-4:hover:after {
        left: 120%;
        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    }*/

    .btn-4 .mud-tooltip-root.mud-tooltip-inline {
        display: inline-flex;
    }

.btn-5 {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

    .btn-5:hover {
        border: 2px solid;
        box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
        outline-color: rgba(255, 255, 255, 0);
        outline-offset: 15px;
        text-shadow: 1px 1px 2px #427388;
    }

/*----------------------------------------------------*/
/*-PRODUCT CARD---------------------------------------*/
/*----------------------------------------------------*/
.product-card {
    background: var(--color-BG) !important;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 0.5rem 0.5rem 1em;
    width: 100%;
    overflow: clip;
    position: relative;
    transition: transform ease-in-out 0.5s;
}

.product-card:hover {
    transform: scale(1.03);
}

.product-card::before {
    content: "";
    position: absolute;
    width: calc(100% - 1rem);
    height: 30%;
    bottom: 0.5rem;
    left: 0.5rem;
    mask: linear-gradient(#0000, #000f 80%);
    border-radius: 0 0 1.5rem 1.5rem;    
}

    .product-card > img {
        max-width: 100%;
        aspect-ratio: 2 / 3;
        object-fit: fill;
        object-position: 50% 5%;
        border-radius: 1.5rem;
        display: block;
        transition: aspect-ratio 0.25s, object-position 0.5s;
        width: 100%;
        height: auto;
        max-height: 75%;
        cursor: pointer;
    }

    @media(max-width: 768px) {
        .product-card > img {
            max-width: 70vw;
            width: 70vw;
            object-fit: contain;
        }
    }

    .product-card > section {
        margin: 1rem;
        height: calc(30% - 1rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .product-card > section h2 {
            margin: 0;
            margin-block-end: 1rem;
            font-size: 1.2rem;
            opacity: 1;
            color: var(--color-text);
            cursor: pointer;
        }

        .product-card > section p {
            font-size: 0.8rem;
            line-height: 1.3;
            color: var(--color-text);
            opacity: 0;
            margin: 0;
            height: 2em;
        }

        .product-card > section > div {
            flex: 1;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            opacity: 0;            
        }

            .product-card > section > div .tag {
                align-self: center;
                color: var(--color-text);
            }
    
    .product-card > img,
    .product-card:focus-within > img {
        aspect-ratio: 1 / 1;
        object-position: 50% 10%;
        transition: aspect-ratio 0.25s, object-position 0.25s;
        object-fit: contain;        
        border-radius: var(--border-radius);
    }

    .product-card > section h2,
    .product-card > section p,
    .product-card:focus-within > section h2,
    .product-card:focus-within > section p {
        margin-block-end: 0.5rem;
        opacity: 1;
    }

    .product-card > section h2,
    .product-card:focus-within > section h2 {
        color: var(--color-text);
        height: 2em;
    }

    .product-card > section > div,
    .product-card:focus-within > section > div {
        opacity: 1;        
    }

/*----------------------------------------------------*/
/*-LOADER---------------------------------------------*/
/*----------------------------------------------------*/
.blob-loading,
.blob,
.blob::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.blob-loading {
    filter: url(#goo);
    height: 140px;
    width: 140px;
}

    .blob-loading .blob {
        width: calc(140px/ 2);
        height: calc(140px/ 2);
        border-radius: 50%;
        -webkit-animation: color-bg 5s ease-in-out infinite;
        animation: color-bg 5s ease-in-out infinite;
    }

        .blob-loading .blob:before, .blob-loading .blob:after {
            position: absolute;
            display: block;
            content: "";
            border-radius: 50%;
        }

        .blob-loading .blob:after {
            width: calc(140px/ 4);
            height: calc(140px/ 4);
            -webkit-animation: color-drop 5s ease-in-out infinite, infinite updown ease-in-out calc(5s / 2);
            animation: color-drop 5s ease-in-out infinite, infinite updown ease-in-out calc(5s / 2);
        }

        .blob-loading .blob:before {
            width: calc(140px/ 3);
            height: calc(140px/ 3);
            transform-origin: calc(140px/ 2.5) calc(140px/ 3.5);
            -webkit-animation: rotate 5s ease infinite, color-bg 5s ease-in-out infinite;
            animation: rotate 5s ease infinite, color-bg 5s ease-in-out infinite;
        }

@-webkit-keyframes updown {
    0%, 100% {
        transform: translate(-50%, calc(-50% - (140px/ 1.5)));
    }

    50% {
        transform: translate(-50%, calc(-50% + (140px/ 1.5)));
    }
}

@keyframes updown {
    0%, 100% {
        transform: translate(-50%, calc(-50% - (140px/ 1.5)));
    }

    50% {
        transform: translate(-50%, calc(-50% + (140px/ 1.5)));
    }
}

@-webkit-keyframes color-bg {
    0%, 30%, 85%, 100% {
        background: #111111;
    }

    35%, 55% {
        background: #555555;
    }

    60%, 80% {
        background: #999999;
    }
}

@keyframes color-bg {
    0%, 30%, 85%, 100% {
        background: #111111;
    }

    35%, 55% {
        background: #555555;
    }

    60%, 80% {
        background: #999999;
    }
}

@-webkit-keyframes color-drop {
    0%, 25%, 75%, 100% {
        background: #111111;
    }

    30%, 50% {
        background: #555555;
    }

    55%, 70% {
        background: #999999;
    }
}

@keyframes color-drop {
    0%, 25%, 75%, 100% {
        background: #111111;
    }

    30%, 50% {
        background: #555555;
    }

    55%, 70% {
        background: #999999;
    }
}

@-webkit-keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/*----------------------------------------------------*/
/*-SCRIBBLE-------------------------------------------*/
/*----------------------------------------------------*/
.strip {
    position: fixed;
    top: -50vh;
    left: -100vw;
    right: 0;
    bottom: 0;
    height: 300vh;
    opacity: 0.05;
    transform: rotate(30deg);
    width: 300vw;    
}

@keyframes scribble {
    to {
        stroke-dashoffset: 0;
    }
}

.scribble {
    margin: 0 auto;
    background: #FFF;
    background-size: cover;
    font-size: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;    
}

    .scribble svg {
        background: #FFF;
        mix-blend-mode: darken;
        height: 100vh;
        width: 100vw;
    }

        .scribble svg polyline {
            fill: none;
            stroke: #EFEFEF;
            stroke-width: 200;
            stroke-dasharray: 20000;
            stroke-dashoffset: 20000;
            animation: scribble 1.5s linear forwards;
        }

@media (max-width: 999px) {
    .scribble svg {
        width: auto;
    }
}

/*----------------------------------------------------*/
/*-RECEIPT--------------------------------------------*/
/*----------------------------------------------------*/
.header__top, .cart {
    background: #EFEFEF !important;
}
..header__greeting {
    background: #CCCCCC !important;
}