@import "default.css";
@import "modals.css";
@import "navbar.css";
@import "login.css";
@import "merchant-card.css";
@import "product-card.css";
@import "product-detail.css";
@import "users.css";
@import "cart.css";
@import "footer.css";
@import "shopping_method.css";

:root {
    --colour-white: #ffffff;
    --colour-main-green: rgb(173, 173, 56);
    --colour-dark-green: #2C3322;

    /*--font-abril-fatface: 'Abril Fatface', cursive;*/
    /*--font-inter: 'Inter', sans-serif;*/
    /*--font-poppins: 'Poppins', sans-serif;*/
    --font-montserrat: 'Montserrat', sans-serif;
    --font-roboto: 'Roboto', sans-serif;

}


/*  FONTS */
/*@font-face{*/
/*    font-family: next-art;*/
/*    src: url('/../fonts/next-art/NEXT-ART--Regular.otf') format('opentype');*/
/*}*/

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

html {
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*font-size: 16px;*/
    scroll-behavior: smooth;
}

body {
    background-color: black;
    font-family: var(--font-montserrat);
    color: var(--colour-white);
}

ul, ol{
    list-style: none;
}


.container-main{
    max-width: 1700px;
    margin: 0 auto;
}

.container-main__shrink{
    max-width: 1100px;
    margin: 0 auto;
}

.container-main__extend{
    max-width: 1900px;
    margin: 0 auto;
}

.search-bar{
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 23px;
    background: #ffffff;
}

.search-bar:focus{
    outline: none;
}


.search-icon{
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    background-image: url('/uploads/public/images/assets/search.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
}

.landing-top__bg{
    max-width: 1700px;
    background-image: url('/uploads/public/images/fireworks-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    background-position: 146%;
    min-height: 846px;
}

.page-top__bg{
    background-image: url('/uploads/public/images/fireworks-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 58%;
    background-size: 1440px;
}

.catalogue__bg,
.product-detail__bg{
    background-image: url('/uploads/public/images/fireworks-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 79%;
    background-size: 100% 144%;
}

.catalogue__bg{
    max-width: 1629px;
    left: 50%;
    transform: translateX(-50%);
}

.product-detail__bg{
    background-position-y: 65%;
    height: 586px;
    width: 100%;
    max-width: 1500px;
    left: 50%;
    transform: translateX(-50%);
}

.fireworks__bg{
    height: 480px;
    width: 100%;
    background-image: url('/uploads/public/images/fireworks-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 95%;
    background-position-x: 59%;
    background-size: 80% 161%;
}

.bg__overlay{
    width: 100%;
    height: 100%;
}

.shop-detail__content{
    margin-top: 4rem;
    gap: 21rem;
    margin-bottom: 3rem;
}

.shop-detail__opening-hours{
    margin: 1.9rem 1rem 1rem;

}
.shop-detail__opening-hours--grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
}
.shop-detail__opening-hours--grid > *,
.shop-detail__features > *
{
    padding: 1rem 0 0;
}

.shop-detail__features{
    margin: 1.9rem 1rem 1rem;
}
.shop-detail__location{
    color: #ACACAC;
    font-weight: 500;
    font-size: 1.1rem;
}
.shop-detail__header{
    font-weight: 600;
    font-size: 1.6rem;
}
.shop-detail__subheader{
    font-weight: 500;
    font-size: 1.5rem;
}
.shop-detail__header-wrapper{
    margin: 2rem 0;
}
.catalogue__header{
    /*height: 123px;*/
    height: fit-content;
    padding-bottom: 4rem;
}

.span__round-bg{
    width:60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to right, rgba(173, 173, 56, 0.15), rgba(189,189,52,0.15), rgba(201,201,44,0.15));
}

.btn-main,
.btn-link__wrapper > a,
.cart-content__btn > a,
.cart-content__btn > button{
    border-radius: 7px;
    border: none;
    padding: 1rem 2rem;
    display: block;
    text-align: center;
    color: var(--colour-white);
    min-width: 220px;
    max-width: fit-content;
}

.btn-popup__close{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid black;
    margin: 3px;
}

.btn-link__wrapper{
    margin: 1rem;
}

.btn-main__round{
    border: none;
    border-radius: 45px;
    padding: 1rem 2rem;
    /*max-width: 30%;*/
    max-width: fit-content;
    /*margin: 0 auto;*/

    color: var(--colour-white);
    font-family: var(--font-montserrat);
    font-size: 1rem;
}
.margin-landing{
    margin-bottom: 10rem;
}

.btn-main__coloured,
.btn-link__wrapper > a,
.cart-content__btn > a,
.cart-content__btn > button{
    background-color: var(--colour-main-green);
}

.btn-secondary__green{
    background-color: var(--colour-dark-green);
}

.cart-content__btn{
    max-width: 1000px;
    justify-content: end;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.btn-secondary__coloured{
    background-color: #000000;
    color: var(--colour-white);
}
.btn-main__pop-up{
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}
.container-landing__text{
    gap: 1rem;
    margin: 3rem 0;
    color: var(--colour-white);
    max-width: 80%;
    text-align: center;
}

.landing-search__wrapper{
    width: 65%;
    margin: 0 auto;
}

.offers__bg{
    padding: 1rem 0 1rem 1rem;
    /*background: linear-gradient(180deg, #F0C4AC 0%, rgba(255, 174, 52, 0.97) 137.01%);*/
    background: linear-gradient(198deg, #FFFFEC -5.9%, #CACA1E 112.82%);;
}

.bg-main__overlay{
    background-color: rgba(0,0,0,.5);
}

.price-strike-through{
    position: relative;
    max-width: fit-content;
    padding: 0 5px;
    color: var(--colour-white);
    font-weight: 700;
}

.cart-discount__text-price{
    font-weight: 400;
}

.price-strike-through > span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/uploads/public/images/assets/diagonal-line-red.svg');
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

.price-strike-through > span{
    z-index: 0;
}

.price-discount{
    color: #E31E27;
    font-size: .9rem;
    font-weight: 700;
}

.title__page-top{
    font-size: 2rem;
}

.title-main__page{
    font-weight: 600;
}

.page__header{
    padding: 2rem 0 1rem;
}

.page__header.header-600 > *{
    font-weight: 600;
}

.page__header.header-500 > *{
    font-weight: 500;
}

.subtitle-main__page{
    font-weight: 400;
}

.page-header__text.t-300 > p{
    font-weight: 300;
    font-size: 1.1rem;
    color: #8B8B8B;
    margin: 1rem 0 1rem;
}

.map__container{
    margin: 1rem 0;
    width: 100%;
    min-height: 300px;
    background: #cccccc;
}

/*   profile   */

.profile-navbar{
    margin: 2rem;
}

.form__profile{
    width: 80%;
    padding: .5rem 1rem 1rem;
}

.profile-link,
.order-link{
    border-radius: 3px;
    background: rgba(241, 241, 241, 0.10);
    padding: 10px;
    margin-bottom: 5px;
}

.order-link{
    /*max-width: 80%;*/
    min-height: 50px;
}

.user-order__card{
    padding: 1.5rem;
    max-width: 700px;
}

.user-order__card h6{
    color: #9E9E9E;
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: 5px;
}
.user-order__header{
    margin: 10px 0;
}

.user-order__nem--mobile{
    color: var(--colour-main-green);
    font-size: 1rem;
    font-weight: 600;
}

.user-order__header p{
    font-size: .85rem;
}

.profile-link-web{
    margin-bottom: 10px;
    font-weight: 400;
}
.profile-link-web:hover{
    color: var(--colour-main-green);
}
.profile__form-field{
    margin-bottom: 10px;
}
.profile__form-field > input{
    color: #9E9E9E;
    border: none;
    border-bottom: 1px solid #9E9E9E;
    background: transparent;
    width: 100%;
    padding: 7px;
    font-size: 1.1rem;
}
.profile__form-field--prefix{
    color: #9E9E9E;
    border: none;
    border-bottom: 1px solid #9E9E9E;
    background: transparent;
    padding: 7px;
    font-size: 1.1rem;
}

.profile__navbar{
    width: 30%;
    background: white;
    height: 85%;
    top: 0;
    left: 0;
    max-width: 300px;
    color: #000;
}

.profile__navbar-blank{
    width: 30%;
    height: 85%;
    max-width: 300px;
}


/*offers landing*/
.btn-offers{
    font-size: .8rem;
    transition: all 400ms;
}

.title-main__page{
    font-size: 1.2rem;
}

.subtitle-main__page{
    font-size: 1.08rem;
    line-height: 1.7rem;
}

.container__offers-price{
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.container__offers-price .price-strike-through{
    margin-bottom: 7px;
}
.container__offers-imgs{
    left: -79px;
    height: 100%;
}
.container__offers-imgs > div:nth-child(1){
    width: 57%;
    position: relative;
    top: -27px;
}
.container__offers-imgs > div:nth-child(2){
    width: 120%;
    min-height: 100%;
    overflow: hidden;
}
.container__offers-imgs > div:nth-child(2) > img{
    min-height: 174px;
    width: auto;
    object-position: left top;
}

.container__promo-products{
    /*gap: 1rem;*/
    overflow: hidden;
}

.postcode-change__verification{
    background-color: var(--colour-main-green);
    color: white;
    right: 5px; top: 40%;
    transform: translateY(-40%);

    border-radius: 3px;
}

.promo-content__wrapper{
    max-width: 1000px;
    margin: 0 auto;
}
.promo-content__header > p{
    margin: 2rem 0 1rem;
    font-weight: 300;
    font-size: .9rem;
}

.cart-content__wrapper{
    max-width: 1000px;
    padding: 1rem;
    background-color: rgba(211,211,211,.15);
    border-radius: 17px;
    margin: 0 auto;
    margin-top: 2rem;
}

.voucher-content{
    background-color: white;
    color: black;
    display: none;
}

.voucher-content__vouchers{
    max-height: 90%;
    overflow-y: auto;
}
.cart-content__voucher-section{
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.checkout-form__wrapper{
    background-color: rgba(211,211,211,.07);
    border-radius: 17px;
    padding: 2rem;
    width: 50%;
    height: fit-content;
}

/* text-image*/
.container__text-picture{

}
.title__text-image{
    font-size: 1.3rem;
    font-weight: 400;
    margin: 2rem 1rem 0.5rem;
    letter-spacing: 0.032rem;
    line-height: 24px;
}

.container__border-radius .title__text-image{
    font-weight: 500;
}
.text__text-image{
    font-size: 1rem;
    font-weight: 300;
    margin: 1rem 1rem;
    line-height: 22px;
    letter-spacing: 0.020rem;
}

.container__border-radius .text__text-image{
    font-weight: 400;
}
.img-holder__side-round{
    width: 50%;
    overflow: hidden;
    margin: 2rem 0 0;
    background-color: white;
    max-height: 350px;
    text-align: center;
}

.img-holder__side-round > img{
    min-height: 100%;
    max-height: 100%;
    max-width: fit-content;
}

.container__text-picture:nth-child(odd)  > .img-holder__side-round{
    border-top-left-radius: 110px;
    border-bottom-left-radius: 110px;
}

.container__text-picture:nth-child(even) > .img-holder__side-round,
.shop-detail__content:nth-child(odd) > .img-holder__side-round{
    border-top-right-radius: 110px;
    border-bottom-right-radius: 110px;
}

.container__border-radius > .img-holder__side-round{
    border-radius: 50px;
}

.container__border-radius > .img-holder__side-round > img{
    min-height: 560px;
}

.wrapper__btn{
    margin: 0 1rem;
}

.holder-btn__text-image{
    padding-right: 2rem;
}

.img-holder__border-radius{

}

.icon__white-arrow-right{
    background-image: url('/uploads/public/images/assets/arrow-right-white.svg');
}

.icon__white-arrow-left{
    background-image: url('/uploads/public/images/assets/arrow-left-white.svg');
}

.icon__arrow-right{
    background-image: url('/uploads/public/images/assets/arrow-right-text.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.icon__arrow-right--black{
    background-image: url('/uploads/public/images/assets/arrow-right-text-black.svg');
}

.icon__review-star{
    background-image: url('/uploads/public/images/assets/star-fill.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.icon__review-star-blank{
    background-image: url('/uploads/public/images/assets/star-blank.svg');
    background-repeat: no-repeat;
    background-position: center;
}
.wrapper__reviews{
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.icon__arrow-up{
    background-image: url('/uploads/public/images/assets/arrow-up.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.icon__arrow-down{
    background-image: url('/uploads/public/images/assets/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.icon__contact-mail{
    background-image: url('/uploads/public/images/assets/contact-mail.svg');
}

.icon__contact-location{
    background-image: url('/uploads/public/images/assets/contact-location.svg');
}

.icon__contact-fb{
    background-image: url('/uploads/public/images/assets/contact-facebook.svg');
}

.icon__filter{
    background-image: url('/uploads/public/images/assets/filter.svg');
}



.icon__tent{
    background-image: url('/uploads/public/images/assets/logo.svg');
}

.icon__tent-selected{
    background-image: url('/uploads/public/images/assets/filter-tent-green.svg');
}

.icon__tent-white{
    background-image: url('/uploads/public/images/assets/logo-white.svg');
}

.icon__truck{
    background-image: url('/uploads/public/images/assets/truck.svg');
}

.filter-truck__selected{
    background-image: url('/uploads/public/images/assets/filter-truck-selected.svg');
}

.icon__checkmark{
    background-image: url('/uploads/public/images/assets/check-mark.svg');
}

.icon__calendar{
    background-image: url('/uploads/public/images/assets/calendar-white.svg');
}

.icon__profile{
    background-image: url('/uploads/public/images/assets/profile.svg');
}

.icon__profile-dark{
    background-image: url('/uploads/public/images/assets/profile-black.svg');
}
.icon__card{
    background-image: url('/uploads/public/images/assets/card-icon.svg');
}

.icon__cards{
    background-image: url('/uploads/public/images/assets/cards-icon.svg');
}

.icon__login-logout-white{
    background-image: url('/uploads/public/images/assets/login-logout-white.svg');
}

.icon__cart-white{
    background-image: url('/uploads/public/images/assets/cart-white.svg');
}

.icon__burger-white{
    background-image: url('/uploads/public/images/assets/burger-white.svg');
}

.icon__shopping-mode{
    background-image: url('/uploads/public/images/assets/shopping_mode.svg');
}

.shopping-method__icon-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colour-main-green);
    padding: 4px;
    border-radius: 5px;
}

.filter__round{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    min-width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #000;
    overflow: hidden;
}

.all-products__header > *{
    text-transform: uppercase;
}

.categories-filter__wrapper{
    gap: 1.5rem;
    overflow: hidden;
    margin: 1rem 0;
    left: 0;
    transition: left 500ms ease-in-out;
}
.category-filter{
    border: 1px solid var(--colour-main-green);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
}

.category-shopping-filter{
    padding: 5px 5px;
}

.category-shopping-filter.selected{
    color: var(--colour-main-green);
}
.category-filter.selected{
    background: var(--colour-main-green);
}

.filter-content{
    padding: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.filter-menu{
    max-width: 430px;
    min-width: 250px;
    height: fit-content;
    background-color: white;
    padding: 1rem 0 2rem 2rem;
    color: black;
    position: sticky;
    top: 5rem;
    max-height: 85vh;
    overflow: hidden;
}

.filter-menu__content{
    padding-right: 3rem;
    height: 100%;
    overflow-y: auto;
}



.filter-menu-icons{
    position: fixed;
    z-index: 1;
    right: 1rem;
    top: 1rem;
}
.filter-section{
    margin: 1rem 0 0;
}
.filter-section > :first-child{
    margin-bottom: .5rem;
}
.filter-mobile{
    background: #fff;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 10px;
    margin-bottom: .5rem;
}
.filter__title{
    font-size: .7rem;
}

.shopping-method__shop-types--wrapper{
    overflow: hidden;
    margin: 1rem 0;
}
.shopping-method__shop-types{
    gap: 1rem;
    width: fit-content;
}

.shopping-method__shop-types li{
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px 15px;
    white-space: nowrap;
}
.deco-divider__line{
    height: 1px;
    background-color: #717171;
}

.shop-type-filter{
    margin: .5rem 0;
}
/* reviews */
.holder__reviews-title{
    margin: 10rem 0 4rem;
}
.holder__reviews-title > h2{
    display: inline-block;
    padding: 3rem 15rem 0;
    border-top: 1px solid white;
}

/*   plain text   */
.plain-text__wrapper{
    padding: 1rem 1rem 2rem;
}

.plain-text__title{
    font-size: 1.3rem;
    font-weight: 500;
}

.plain-text__text{
    line-height: 1.3rem;
    margin-top: 1rem;
    font-weight: 300;
}

.plain-link{
    color: white;
    border-bottom: 1px solid white;
    letter-spacing: 0.04rem;
    font-size: 1.2rem;
}

.contact__text-header{
    line-height: 2rem;
    margin-top: 1rem;
    color: #000000;
}

.video-wrapper__section > iframe{
    width: 100%;
    min-height: 100%;
}

.header__section{
    padding-top: 7rem;
    margin-bottom: 3rem;
}

.header__section  h2{
    font-weight: 500;
    font-size: 1.9rem;
}

.header__section--icon{
    left: 0;
    padding-left: 2rem;
}

.contact__content{
    padding-top: 50px;
}

.close-message{
    color: var(--colour-main-green);

}

.carousel-action__round{
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: rgba(38, 50, 56, .5);
}

.container__product-preview{
    margin-bottom: 1rem;
}
.container__product-preview--content{
    padding-bottom: 1rem;
}

.products__wrapper{
    flex-wrap: wrap;
    gap: 1rem;
}

.anim-scale-up{
    animation-name: scale-up;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}

.confetti{
    inset: 50%;
}

.confetti > span{
    position: absolute;
    aspect-ratio: 1;
    opacity: 0;
    transform-style: preserve-3d;
}

.explosion{
    animation: confettiSettle 5s cubic-bezier(0,.7,1,1);
}

.explosion > span{
    animation: confettiExplode 5s;
    transition: all 2s ease-in-out;
}

@keyframes confettiExplode{
    25%{
        opacity: 1;
        translate: 0 -150px;
    }
    100%{
        translate: 0 -150px;
    }
}


@keyframes confettiSettle {
    70%{
        opacity: 1;
    }
    99%{
        translate: 0 120px;
        opacity: 0;
    }
    100%{
        translate: 0 0;
        opacity: 0;
    }
}

@keyframes scale-up {
    50%{
        scale: 1.2
    }
    100%{
        scale: 1;
    }
}

.filter-slider__container{
    left: 0;
    transition: left 500ms ease-in-out;
}
.discount-price__wrapper{
    position: relative;
    top: -5px;
}

.accent-colour{
    color: var(--colour-main-green);
}

.warning-msg{
    color: crimson;
    font-weight: 500;
    font-size: 1rem;
}
.user-order__wrapper{
    min-height: 300px;
}

.img-holder__app-mobile{
    max-width: 600px;
}

.start-shopping__search{
    margin-top: 1rem;
    padding: 0 10px;
    max-width: 40%;
}
.start-shopping__search input{
    border: 1px solid black;
}

.checkout-confirmation--checkbox{
    width: 25px;
    min-width: 25px;
    aspect-ratio: 1;
    border-radius: 5px;
    /*border: 1px solid white;*/
    background-color: white;
    padding: 2px;
    border: 1px solid black;
}

.forgotten-pwd__wrapper{
    max-width: 500px;
}

.mobile-search-bar > div{
    width: 90%;
}

.product-list{
    padding: 0;
    padding-bottom: 1rem;
}

.product-list div.product-list__img{
    width: 60px;
    height: 50px;
}

.personal-details{
    padding: 0 2rem 6rem;
}

.delivery-options__container{
    width: 100%;
    margin-top: 2rem;
    padding: 0 2rem 2rem;
}

.product-gallery__wrapper{
    width: 700px;
    background-color: #FEFFEB;
    overflow: hidden;
    border-radius: 15px;
}

.product-gallery_card{
    width: 700px;
    max-height: 600px;
    display: flex;
    justify-content: center;
    padding: 15px;
}

.product-gallery_card > img{
    object-fit: contain;
}

.video-player{
    height: 600px;
}

.linklike--clickable{
    width: fit-content;
    font-size: .8rem;
    padding:0 2px 5px;
    border-bottom: 1px solid black;
}

.user-error-msg{
    padding: 10px;
    font-size: 1.1rem;
    background-color: lightsalmon;
    animation: moveInLeft 1s ease-in;
}

@keyframes moveInLeft {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.checkout-move-right{
    animation: moveInRight 700ms ease-in;
}

.checkout-move-out-right{
    animation: moveOutRight 700ms ease-in;
}

.checkout-submit-message{
    /*opacity: 0;*/
}

@keyframes moveInRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveOutRight {
    0%{
        opacity: 1;
        transform: translateX(0);
    }

    100%{
        opacity: 0;
        transform: translateX(100%);
    }
}



.footer-cards__icon{
    width: 225px;
}

.card__reviews{
    padding: 1rem;
    width: 250px;
    margin: 0 1rem;
    background: white;
    color: black;
    min-width: 250px;
}

.click-collect__step{
    width: 32px;
    min-width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--colour-main-green);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.offers__banner{
    max-width: 1700px;
    margin: 4rem auto;
    background: url('/uploads/public/images/frontpage-banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
}

.promo-banner{
    background-color: rgba(197, 14, 14, 1);
    width: 100%;
    padding: 1rem;
}

.promo-banner__text{
    font-size: 1rem;
}

.promo-banner__text-accent{
    font-size: 1.2rem;
    font-weight: 600;
}

.click-collect__bottom{
    margin-top: 4rem;
    margin-bottom: 8rem;
    padding-left:1rem;
    padding-right: 1rem;
}

/*.offers__banner > img{*/
/*    width: auto;*/
/*    height: 100%;*/
/*    max-height: 100%;*/
/*}*/
.map-info-table__details{
    padding: 2px;
    border: 1px solid black;
}

.click-collect__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px,1fr));
    /*grid-template-rows: repeat(auto-fit, minmax(50px,1fr));*/
    min-height: 233px;
}

.click-collect__rewards-wrapper{
    /*display: flex;*/
    /*justify-content: center;*/
}


.click-collect__rewards-container{
    max-width: 1700px;
    margin: 0 auto;
}

.btn--disabled{
    background-color: #cccccc;
    cursor: not-allowed;
    user-select: none;
}

.icon-text-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    gap: 8px;
}

.text-box p{
    max-width: 200px;
    line-height: 1.6rem;
}

.text-box__icon{
    align-self: center;
    margin-bottom: 1rem;
}

.apps-wrapper__bottom{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.mobile-apps__container-wrapper{
    max-width: 867px;
    margin: 0 auto;
}

.mobile-apps__container-bottom{
    height: 400px;

}

.apps-container-content{
    height: 100%;
}

.mobile-apps-img__bottom{
    background-image: url('/uploads/public/images/app_page_mobiles.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    z-index: -1;
    width: 500px;
    height: 400px;
    top:0;
    right: -100px;
    transition: all 500ms;
}

.step-main__white{
    border: 1px solid white;
}

.text-box{
    margin: 2rem 0 0;
}

.apps-content__bottom-steps > div{
    max-width: 500px;
}

#filter-menu-search input[type="text"]{
    border: 1px solid black;
    padding: 8px 14px;
    margin: .5rem 0 0;
}

#filter-menu-search .search-icon{
    top: 58%;
    right: 10px;
}

.game-rules{
    max-width: 1000px;
    margin: 0 auto;
}

.game-rules.bottom{
    margin-top: 3rem;
    padding: 0 1rem;
}

.game-rules .plain-text__wrapper{
    padding-bottom: 1rem;
    padding-top: 2rem;
}

.game-rules .plain-text__title{
    text-align: center;
}


.game-rules .plain-text__text{
    text-align: center;
}

.game-characters{
    width: 400px;
    margin: 0 auto;
}

.other-filter-section{
    padding-bottom: 1rem;
}

.filter-menu-wrapper-mobile{
    top: -.5rem;
}

.shopping-method__link{
    padding: 4px 18px;
    border-radius: 22px;
    border: 1px solid var(--colour-main-green);
    background: rgba(173, 173, 56, .14) ;
}

.shopping-method__wording{
    font-size: .75rem;
    font-weight: 500;
}

/*    MEDIA QUERIES    */


@media screen and (max-width: 400px)
{
    .merchant-card__wrapper{
        max-width: 156px;
        padding: 10px;
    }

    .merchant-title{
        font-size: 1.1rem;
    }
    .merchant-link{
        font-size: 1rem;
    }
    .personal-details{
        padding: 0 5px;
    }
    .delivery-options__container{
        padding: 0 5px 2rem;
    }
    .offers__banner{
        background-position: 89% 100%;
    }
}

@media screen and (max-width: 570px){
    .offers-text__bg{
        width: 100%;
        height: 100%;
        background-color: rgba(163, 163, 127, 0.7);
    }

    .offers-text__mobile{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 500px)
{

    .apps-content__bottom-steps{
        max-width: fit-content;
        margin: 0 auto;
        margin-top: 2rem;
    }

    .click-collect__bottom{
        margin-bottom: 2rem;
    }
    .footer-cards__icon{
        width: 150px;
    }
    .cart-content__voucher-section{
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
    }

    .product-list{
        font-size: .8rem;
    }
    .product-list div.product-list__img{
        width: 45px;
        height: 35px;
    }
    .landing-top__bg{
        background-size: cover;
        background-position: center;
        min-height: fit-content;
    }


    .btn-offers{
        padding: 11px 28px;
    }
    .review-container{
        min-width: 340px;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .contact-card{
        padding: 10px;
        min-height: 137px;
    }

    .container__product-preview{
        background-color: #F2F2F2;
    }

    .container__product-preview .header__section h2{
        color: #000;
    }
    .web-500{
        display: none;
    }
    .cart-content__wrapper{
        padding: 0.5rem;
    }

    .forgotten-pwd__wrapper{
        max-width: 100%;
    }

    .product-gallery__wrapper,
    .product-gallery_card{
        width: 300px;
        max-height: 200px;
    }

    .video-player{
        height: 200px;
    }

    .promo-banner__text{
        font-size: .9rem;
    }
    .promo-banner__text-accent{
        font-size: 1rem;
        font-weight: 600;
    }
    .text-box p{
        max-width: 80px;
    }

    .game-characters{
        width: 300px;
    }
}

@media screen and (max-width: 720px){
    .mobile-apps__container-bottom{
        flex-direction: column;
        min-height: 551px;
    }
    .mobile-apps-img__bottom{
        position: relative;
        right: 0;
        width: 100%;
        background-position: center;
        background-size: contain;
        scale: 1.4;
    }
}

@media screen and (min-width: 833px){
    .mobile-apps-img__bottom{
        right: -50px;
    }
}


@media screen and (min-width: 501px){
    .container__offers-imgs{
        height: initial;
    }

    .offers__bg{
        padding-top: 2rem;
    }

    .container__offers-text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .title-main__page{
        font-size: 2.2rem;
    }

    .subtitle-main__page{
        font-size: 1.5rem;
    }

    .container__offers-price{
        margin-top: 3rem;
    }

    .container__offers-price .price-strike-through,
    .container__offers-price .price-discount{
        font-size: 1.5rem;
    }

    .btn-offers{
        font-size: 1.2rem;
    }

    .video-wrapper__section{
        width: 100%;
        min-height: 400px;
        height: 400px;
    }
    .category-filter:hover{
        background: var(--colour-main-green);
    }

}
@media screen and (min-width: 501px) and (max-width: 920px){
    .container__offers-imgs{
        left: -105px;
    }
    .container__offers-imgs > div:nth-child(2) > img{
        min-height: 270px;
    }
    .product-gallery__wrapper,
    .product-gallery_card{
        width: 500px;
        max-height: 400px;
    }

    .video-player{
        height: 400px;
    }
    .offers__banner{
        height: 250px;
    }
}

@media screen and (min-width: 501px) and (max-width: 970px){
    .offers__bg,
    .offers__banner{
        min-height: 400px;
    }


}

@media screen and (min-width: 768px) and (max-width: 970px){
    .container__offers-text{
        min-height: 328px;
    }
}

@media screen and (max-width: 680px){
    .container__offers-text .btn-offers{
        padding: .7rem 1rem;
        min-width: fit-content;
        font-size: 1rem;
    }
}

@media screen and (min-width: 679px) and (max-width: 767px){
    .container__offers-text .btn-offers{
        font-size: 1rem;
        padding: .5rem 1rem;
    }
}

@media screen and (max-width: 767px){
    .container__offers-text .title-main__page,
    .container__offers-text .subtitle-main__page{
        font-size: 1.3rem;
    }

    .container__offers-text .container__offers-price .price-strike-through{
        font-size: 1rem;
    }
    .container__offers-text .container__offers-price .price-discount{
        font-size: 1.1rem;
    }


}

@media screen and (min-width: 767px){
    .img-holder__mobile{
        display: none;
    }
    .visibility__mobile{
        display: none;
    }
    .container__text-picture,
    .container__border-radius{
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
    }
    .container__text-picture:nth-child(even),
    .container__border-radius:nth-child(even){
        flex-direction: row-reverse;
    }
    .container__border-radius .wrapper__text-image{
        align-items: flex-start;
    }
    .wrapper__text-image{
        padding: 0 3rem;
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
    .text-holder__text-image{
        max-width: 600px;
    }
    .container__profile--mobile{
        display: none;
    }
    .profile__header--mobile{
        display: none;
    }
    .user-order__nem--mobile{
        display: none;
    }
    .user-order__wrapper{
        padding: 0 2rem;
    }

    .apps-mobile{
        display: none;
    }

    .app-icons__content{
        margin: 6rem auto;
        max-width: 1304px;
    }
    .app-links__top{
        padding: 0 10px;
    }
    .app-links__top img{
        position: relative;
    }
    .apps-header{
        position: absolute;
        right: 0;
        padding: 1rem;

    }
    .apps-header p{
        text-align: center;
    }
    .apps-wrapper__top{
        padding: 1rem;
        margin: 7rem auto;
        margin-bottom: 2rem;
    }
    .apps-header p{
        line-height: 1.6rem;
    }
}


@media screen and (min-width: 767px) and (max-width: 1025px){

    .apps-wrapper__top{
        max-width: 835px;
    }

    .app-links__top img{
        top: 239px;
    }

    .apps-media-link{
        height: 63px;
    }
    .apps-header{
        top: -30px;
        max-width: 500px;
    }
    .apps-header h1{
        font-size: 1.6rem;
        margin: 1rem 0;
        max-width: 400px;
    }

    .apps-img__extended{
        width: 350px;
    }
}

@media screen and (min-width: 1024px){

    .apps-wrapper__top{
        max-width: 887px;
    }
    .app-links__top img{
        top: 239px;
    }
    .apps-header{
        top: -30px;
        max-width: 500px;
    }
    .apps-img__extended{
        width: 400px;
        margin-right: 2rem;
    }
    .app-links__top img{
        top: 267px;
        width: 175px;
    }
    .apps-media-link{
        height: 75px;
    }

    .apps-header h1{
        font-size: 1.8rem;
        margin: 1rem 0;
        max-width: 400px;
    }

    .text-box p{
        max-width: 250px;
    }
}

@media screen and (max-width: 766px){

    .apps-web{
        display: none;
    }

    .apps-header{
        margin-top: 1rem;
    }

    .apps-header h1{
        margin-top: 2rem;
        font-size: 1.25rem;
    }

    .apps-header p{
        font-size: .9rem;
        text-align: center;
        margin: 2.5rem 0 2rem;
        line-height: 1.35rem;
    }

    .app-links__top{
        margin: 2rem 0 1rem;
        align-items: center;
    }

    .text-box p{
        max-width: 120px;
        font-size: .7rem;
        line-height: 1.1rem;
    }

    .text-box__icon{
        width: 40px;
    }

    .app-icons__content{
        margin: 3rem 0;
    }
    .app-icons__content h3{
        font-size: 1.1rem;
        text-align: center;
    }

    .apps-content__bottom h3{
        font-size: 1.1rem;
        text-align: center;
    }

    .apps-content__bottom p{
        font-size: .9rem;
    }
    .apps-links__bottom{
        margin: 0 auto;
        margin-bottom: 2rem;

    }
    .img-holder__web{
        display: none;
    }

    .visibility__web{
        display: none;
    }

    .holder__reviews-title{
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .holder__reviews-title > h2{
        padding: 2rem 3rem 0;
    }

    .shops-search{
        max-width: 90%;
    }
    .fireworks__bg{
        height: 372px;
    }
    .shop-detail__header-wrapper{
        padding: 0 1rem;
    }
    .contact__content{
        padding-top: 50px;
    }
    .header__section{
        padding-top: 2rem;
    }
    .header__section h2{
        font-size: 1.2rem;
    }
    .close-message{
        margin: 0 1rem;
    }
    .profile__navbar,
    .profile__navbar-blank{
        display: none;
    }

    .container__user-order{
        display: none;
    }


    .checkout-form__wrapper{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .container__profile{
        display: none;
    }
    .promo-content__wrapper,
    .cart-content__voucher-section,
    .cart-content__btn{
        padding: 0 1rem 0;
    }
}
.contact-text{
    margin-top: 2rem;
    padding: 0 1rem;
}
.contact-text > p{
    font-size: 1rem;
    max-width: 800px;
    line-height: 1.6rem;
}


@media screen and (min-width: 971px){
    .offers__bg,
    .offers__banner{
        min-height: 500px;
    }
    .container__offers-text{
        min-height: 364px;
    }
}

    /* change of navbar */
@media screen and (min-width: 501px) and (max-width: 1100px)
{
    .landing-top__bg{
        min-height: 500px;
    }
}

@media screen and (min-width: 767px) and (max-width: 1099px){
    .container__border-radius > .img-holder__side-round > img{
        min-height: 330px;
    }
    .shops-search{
        min-width: 60%;
    }
}

@media screen and (max-width: 1099px)
{
    .landing-search__wrapper{
        display: none;
    }
    .btn-main__round{

    }
    .margin-landing{
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .filter-menu{
        display: none;
    }
}

@media screen and (max-width: 1199px)
{
    .contact-options{
        flex-wrap: wrap;
    }

    .delivery-process__content{
        flex-direction: column;
    }

    .video-wrapper__section{
        max-width: 600px;
        min-width: 80%;
    }

}

@media screen and (max-width: 649px)
{
    .product-detail__bg{
        background-position-y: 107%;
        width: 98%;
        height: 200px;
        background-size: 94% 144%;
    }
}


@media screen and (min-width: 650px) and (max-width: 849px)
{
    .product-detail__bg{
        background-size: 91% 144%;
        height: 473px;
    }
}

@media screen and (min-width: 849px) and (max-width: 1200px)
{
    .product-detail__bg{
        background-size: 100% 144%;
    }
}


@media screen and (min-width: 1200px)
{
    .product-detail__btn > div > button{
        max-width: 50%;
    }
    .delivery-process__text-image{
        max-width: 40%;
    }
    .video-wrapper__delivery{
        min-width: 50%;
    }

}

@media screen and (max-width:500px)
{
    .offers__banner{
        min-height: 220px;
        height: 220px;
    }
}

@media screen and (min-width: 501px) and (max-width:767px)
{
    .offers__banner{
        min-height: 250px;
        height: 250px;
    }
}






@media screen and (min-width: 767px) and (max-width: 1200px)
{
    .fireworks__bg{
        background-position-x: 50%;
        background-size: 100% 144%;
    }
    .header__section h2{
        font-size: 1.4rem;
    }
}
@media screen and (min-width: 1100px)
{
    .plain-text__wrapper{
        padding: 4rem 1rem 5rem;
    }
    .plain-text__title{
        font-size: 1.5rem;
        text-align: center;
    }

    .plain-text__text{
        line-height: 1.4rem;
        margin-top: 2rem;
    }

    /*.catalogue__header{*/
    /*    height: 400px;*/
    /*}*/
    .filter-mobile,
    .filter-menu-wrapper-mobile{
        display: none;
    }
}

@media screen and (min-width: 501px) and (max-width: 766px)
{
    .shops-search{
        max-width: 70%;
    }
}

@media screen and (max-width: 1700px)
{
    .container-wrapper__main{
        padding: 1rem;
    }
    .page__header{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .merchant-cards__container{
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
    }
    .shops-search{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 993px)
{
    .products__wrapper{
        flex-wrap: wrap;
    }

    .product-card__wrapper{
        height: 290px;
        min-width: 210px;
        max-width: 210px;
    }

    .product-card__title,
    .product-cart__title{
        font-size: .85rem;
    }
    .product-card__nem{
        font-size: .75rem;
    }
    .product-card__price{
        font-size: .8rem;
    }
}

@media screen and (max-width: 500px)
{
    .product-card__wrapper{
        height: 300px;
        min-width: 168px;
        max-width: 168px;
    }
    .product-card__title,
    .product-cart__title{
        font-size: .8rem;
        line-height: 1rem;
    }
    .product-card__nem{
        font-size: .7rem;
    }
    .product-card__price{
        font-size: .7rem;
    }
    .btn-product__card{
        font-size: .8rem;
    }
    .filter-content{
        padding: .5rem;
    }
    .products__wrapper{
        justify-content: center;
        gap: .5rem;
    }
    .product-card__action div{
        min-width: 23%;
    }
    .product-card__action input[type="text"]
    {
        width: 31%;
    }
    .category-filter{
        padding: 5px 10px;
        font-size: .7rem;
    }
    .categories-filter__wrapper{
        gap: .4rem;
    }

    .discount-price{
        font-size: .7rem;
    }
}
@media screen and (min-width: 501px) and (max-width: 1450px)
{
    .product-card__wrapper{
        height: 300px;
        max-width: 250px;
    }
    .product-card__title,
    .product-cart__title{
        font-size: 1rem;
    }
    .product-cart__title{
        margin-bottom: .4rem;
    }
    .product-card__nem{
        font-size: .7rem;
        margin-bottom: 6px;
    }
    .product-card__price{
        font-size: 1rem;
    }
    .btn-product__card{
        font-size: .9rem;
    }

}

@media screen and (max-width: 1450px)
{
    .header__section{
        padding-top: 2rem;
    }
}

@media screen and (min-width: 980px) and (max-width: 1218px)
{
    .shop-detail__content{
        gap: 10rem;
    }
}

@media screen and (min-width: 767px) and (max-width: 979px)
{
    .shop-detail__content{
        gap: 5rem;
    }
}

@media screen and (max-width: 979px)
{
    .personal-details{
        flex-direction: column;
    }
}


/*@media screen and (max-width: 1587px)*/
/*{*/
/*    .click-collect__grid{*/
/*        gap: 0 10px;*/
/*    }*/
/*}*/