a{ text-decoration: none; }

.background-cover{
    background: var(--light-green);
    height:fit-content;
    width:100%;
    height:100%;
    position:relative;
    z-index:20
  
}
.background-cover-2{
    background: url('https://assets-na-ue1-prod.zilch.com/site/zilch-content/uploads/sites/3/20260310213037/arsenal-bg-pre-game-low-res.png') var(--light-green) no-repeat center center;
    background-size: cover;
    height:fit-content;
    width:100%;
    height:100%;
    padding-top: 120px;
}

.background-cover-img{
    background:url('https://assets-na-ue1-prod.zilch.com/site/zilch-content/uploads/sites/3/20260310040258/arsenal-bg-1.png') no-repeat center 220px;
    background-size: cover;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:100%;
}
.state-one-inner p {
    position:relative;
    z-index:300
}

.nav{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:20px;
    z-index:200;
}

.official-lockup{
    display:flex;
    align-items:center;
    gap:10px;
}
#suggestions-list{
    width:100%;
}

.official-lockup img{
    width:60px;
}
.official-lockup p{
    color: var(--zilch-green-600);
    font-weight:bold;
}
#locate-address{
    display:none;
    background: var(--zilch-green-600) !important;
}

.nav .inner-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    margin:0 auto;
}
.state-one{
    position:relative;
    z-index:300;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    height:100vh;
    width:100%;
}

.state-one-inner{
    margin:0 auto;
    margin-top:180px;
    padding-left:40px;
}
.h2-heading{
    color:var(--zilch-green-600);
    font-size:42px;
    padding-bottom:10px;
}

.max-heading{
    color:var(--zilch-green-600);
    font-size:10vw;
    position:relative;
    z-index:40;
}

.state-one p.body-copy {
    margin-top: 30px;
    max-width:500px;
}

.state-two-inner p {
    padding-bottom:10px;
}


/* state two */

.state-two{
    display:flex;
    height:100vh;
    width:fit-content;
}

.state-two-inner{
    padding:40px;
    width:100%;
    border-radius: 10px;
}

.slider-section{
    display:flex;
    gap:30px;
    border-radius:30px;
}

.scarf-slider{
    display:flex;
    background:white;
    padding:30px;
    border-radius:30px;
}

.scarf-slider .thumbnails{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.thumbnails img{
    height: calc(25% - 3px);
    min-width:128px;
}
.scarf-slider .display{
    max-width:500px;
    max-height:600px;
    width:500px;
    height:600px;
    background:url(https://assets-na-ue1-prod.zilch.com/site/zilch-content/uploads/sites/3/20260310034033/arsenal-slide-1.png) no-repeat center center;
    background-size: cover;
    margin-left:20px;
}

.arsenal-apply{
display:none;
}

.arsenal-form{
    display:flex;
    gap:30px;
    background:white;
    padding:30px;
    border-radius:30px;

}

  .arsenal-apply-form input[type="text"],
    .arsenal-apply-form input[type="email"]
  {
        width: 100%;
        padding: 20px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid #000;
        margin-top: 10px;
    }
 .arsenal-apply-form input[name="firstname"],
    .arsenal-apply-form input[name="lastname"]
{
    width:calc(50% - 5px);
    display:inline-block;
}

.arsenal-apply-form input[type="submit"]{
    border:0;
    color:white;
    font-weight:bold;
}
.submit-btn-position{
    display:flex;
    justify-content: flex-end;
    align-items:flex-end;
    height:100%;
    margin-top:10px;
}

.split-section{
    display:flex;
    width:100%;
    /* justify-content: space-between; */
    align-items: center;
    gap:10px;
}
.basket{
    display:flex;
    flex-direction: column;
    gap:10px;
}

.address-suggestions{
    display:flex;
    gap:10px;
}

.address-suggestions select{
    border-radius: 10px;
}
#cancel-suggestions{
    cursor:pointer;
    width:fit-content;
    display:flex;
    align-items:center;

}

 #cancel-selection{
    margin-top:10px;
    cursor:pointer;
    width:fit-content;
    text-decoration:underline;
}
.item-title{
    font-size:22px;
}
.error-msg{
    color:red;
}
.order-details{
    display:none;
}

.order-details p {
    padding-bottom:0px;
}

.s-heading{
    font-size:22px;
}
.market-status{
    background: var(--mid-green);
    color: var(--dark-green);
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    width:fit-content;
}
.market-status.open{
    background: var(--zilch-green-600) !important;
    color:white;
    font-size: 12px;
    border-radius: 5px;
}

.stock-item{
    cursor: pointer;
}

.stock-item:nth-child(1){
    filter: brightness(0.5)
}
.checkout{
    width:50%;
}
.checkout-price{
    width:100%;
    margin-top:10px;
}

.checkout-price div{
    display:flex;
    justify-content: space-between;
}

.bold-green{
    color:var(--zilch-green-600);
    font-weight: bold;
}
.final-price{
    display:flex;
    gap:20px;
}
.final-price p{
    padding-bottom:10px !important;
}

.address-fill{
    display:none;
}

    .arsenal-apply-form input[type="checkbox"]{
       appearance: none; 
       /* border:1px solid white !important; */
       outline: 0;
       border-radius: 0px !important;
       background:#eee !important;
       min-width: 20px !important;
       min-height: 20px !important;
       max-width: 20px !important;
       max-height: 20px !important;
       height:20px !important;
       width:20px !important;
       cursor: pointer;
       vertical-align: middle;
       padding: 0px !important;
       margin: 0px !important;
       transition: background-color 0.3s, border-color 0.3s;
    }

       .arsenal-apply-form input:checked::after {
        content: "\2713";
        display: block;
        color: white;
        background: var(--zilch-green);
        font-size: 14px;
        text-align: center;
        line-height: 18px;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        height:20px !important;
        width:20px !important;
        margin: 0px !important;
        padding: 0px !important
    }

    .display-mob{
        display:none;
    }
    @media screen and (max-width:1024px) {
    .state-two{
        width:100%;
        max-width:100%;
    }
    
}
@media screen and (max-width:1084px) {
.background-cover-2{
    background-position:center;
}
}

@media screen and (max-width:900px) {
    .dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background: #333;
}

    .scarf-slider .display{
        width:100%;
        padding:0px;
        margin:0px;
    }

    .slider-section{
        flex-direction:column;
        background:white;
    }
    .scarf-slider{
        width:100%;
        flex-direction: column;
    }
    .scarf-slider .thumbnails{
        display:none;
        /* flex-direction: row;
        max-height:122.48px;
        max-width:100%;
        margin-left:0px;
        margin-bottom:30px;
        overflow:scroll;
        -webkit-overflow-scrolling: touch; */
    }

    .mob-lb{
        display:block;
    }
    .state-two {
        height:fit-content;
    }
}

.mob-display{
    display: none;
}

@media screen and (max-width:970px) {
    
.display-mob img.active {
    opacity: 1;
}

    .display{
        display:none;
    }
    .thumbnails{
        display:none;
    }

    .display-mob {
        display:flex;
        overflow-x:scroll;
        max-width:500px;
        margin: 0 auto;
        scroll-snap-type: x mandatory;
         -ms-overflow-style: none; 
        scrollbar-width: none; 
    }

    .display-mob img {
        width:100%;
        height:auto;
        scroll-snap-align: center;
    }
    
    .state-one-inner {margin-top: 120px; padding: 50px 40px}

    .background-cover{
        background-position:left !important;
    }
    .background-cover-img{
        background-position:center 500px;
    }
    .arsenal-form{
        flex-direction: column;
        width: 100%;
    }
    .checkout{
        width:100%
    }
    .submit-btn-position{
        justify-content:center;
    }
    .arsenal-apply-form input[type="submit"] {
        width:100%;
    }
    .mob-display{
    display: block;
    }

    .basket{
    padding: 30px;
    }

}

@media screen and (max-width:500px) {
    
    .inner-nav img {
        width:120px;
    }
    .background-cover-img{
        margin-top:80px;
        background-position:bottom;
        background-size:100% auto;
    }
}