.topsearch { border: 1px solid #E94D43; position: relative; width: 100%; }
.topsearch input { height: 50px; width: calc(100% - 50px); border: none; padding-left: 15px; }
.topsearch button { height: 50px; display: block; width: 50px; border: none; position: absolute; right: 0px; top: 0px; color: #fff; background-color: #E94D43; font-size: 1.4em; }

.vat-switch { box-shadow: 0px 3px 6px #00000029; width: 115px; display: block; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 10px; }
.vat-switch .switch { width: 45px; height: 24px; background-color: #0063BC; position: relative; cursor: pointer; border: 2px solid #0063BC; border-radius: 30px; }
.vat-switch .switch span { width: 20px; height: 20px; background-color: #fff; display: block; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); border-radius: 100%; }
.vat-switch.exvat .switch span { right: 0px; left: auto; }
.vat-switch .tag.inc { color: #0063BC; font-weight: 700; }
.vat-switch.exvat .tag.inc { color: #000; font-weight: 500; }
.vat-switch.exvat .switch { background-color: #E94D43; border-color: #E94D43; }
.vat-switch.exvat .tag.ex { color: #E94D43; font-weight: 700; }

.country-switch .flag { cursor: pointer; opacity: 0.8; width: 42px; height: 24px; position: relative; display: block; position: relative; }
.country-switch .flag span { filter: grayscale(100%); z-index: 5; width: 42px; height: 24px; position: absolute; display: block; left: 0px; top: 0px; }
.country-switch .flag:before { display: none; box-shadow: 0px 3px 6px #0000004F; width: calc(100% + 2px); height: calc(100% + 2px); left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #E94D43; content: ""; position: absolute; }
.country-switch .flag.gbp span { background-image: url(../images/flags/gb.svg); background-size: cover; background-position: center; }
.country-switch .flag.eur span { background-image: url(../images/flags/eu.svg); background-size: cover; background-position: center; }
.country-switch .flag.aed span { background-image: url(../images/flags/ae.svg); background-size: cover; background-position: center; }
.country-switch .flag.usd span { background-image: url(../images/flags/us.svg); background-size: cover; background-position: center; }

.country-switch .flag:hover span { filter: grayscale(0%); }
.country-switch .flag.on { opacity: 1; }
.country-switch .flag.on:before { display: block; }
.country-switch .flag.on span { filter: none !important; }

.top-links .currency-select-wrap { display: inline-flex; align-items: center; align-self: stretch; position: relative; padding-right: 14px; margin-right: 10px; }
.top-links .currency-select-wrap:after { content: ""; width: 1px; height: 14px; background-color: rgba(255,255,255,0.7); position: absolute; right: 0px; top: 50%; transform: translateY(-50%); }
.top-links .currency-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: auto; height: 100%; background-color: transparent; color: #fff; border: none; padding: 0px 20px 0px 6px; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; font-family: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23ffffff' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3px center; background-size: 15px; }
.top-links .currency-select:focus { outline: none; }
.top-links .currency-select::-ms-expand { display: none; }
.top-links .currency-select option { color: #333; background: #fff; text-transform: none; padding: 6px 10px; }
.top-links .vat-select-wrap { }
.top-links .vat-select { width: 10ch; }

.widget.account-widget { background-color: #0063BC; padding: 0 20px; }
.widget.account-widget .widg-txt { width: 65px; }
.widget.basket-widget { background-color: #E94D43; }
.widget.depot-locations-widget { background-color: #fff; color: #0063BC; padding: 0px 12px; }
.widget.depot-locations-widget:hover, .widget.depot-locations-widget:hover i { color: #E94D43; }
.widget.depot-locations-widget i { color: #0063BC; font-size: 1.75rem; margin-right: 8px; }
.widget.depot-locations-widget .widg-txt { margin-left: 0px; width: auto; text-align: center; line-height: 1.1; font-size: 0.875rem; font-weight: 600; }
.widget { font-size: 0.9em; text-transform: uppercase; color: #fff; height: 50px; display: flex; margin-left: 16px; align-items: center; justify-content: center; padding: 0px 10px; box-shadow: 0px 3px 6px #00000029; }
.widg-txt { margin-left: 10px; width: 115px; text-align: center; }

@media screen and (min-width: 1670px) {
    .widget i { margin-right: 5px; font-size: 1.8em; display: block; }
}

@media screen and (max-width: 1669px) {
    .widget { min-width: 55px; height: 55px; padding: 0px 10px; margin-left: 14px; border-radius: 3px; }
    .widget.account-widget .widg-txt { display: none; }

    .widget i { font-size: 1.8em; color: #fff; }
    .country-switch { margin-right: 10px; }
}

@media screen and (max-width: 1669px) and (min-width: 1231px) {

    .head-widgets { width: 500px; }
    .widget.basket-widget { position: relative; }
    .widget.basket-widget .widg-txt { margin-left: 0; width: 0; }
    .widget.basket-widget .widg-txt > div *:not(#noofitems) { display: none; }
    .widget.basket-widget .widg-txt #noofitems { position: absolute; top: 0; right: 0; transform: translate(30%, -30%); background-color: #0063BC; height: 20px; width: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0px 3px 6px #00000029; }
}

@media screen and (min-width: 1640px) {
    .site-head { height: 105px; }
    .top-links { height: 30px; }
}

@media screen and (max-width: 1430px) and (min-width: 1231px) {
    .hlink { max-width: 30%; }
    .search-container { max-width: 333px !important; }
}

@media screen and (min-width: 1230px) {
    .klarna-bar { display: block !important; min-height: 52px; }

    .nav-brand-link a { border-radius: 5px; min-height: 100px; display: flex; justify-content: center; align-items: center; }
    .nav-brand-link a:hover { box-shadow: 0px 3px 6px #00000029; transform: translateY(-5px); }

    .country-switch { margin-right: 15px; }
    .country-switch { }
    .widget.phone { display: none; }

    .msgslider .bx-wrapper { max-width: 100% !important; }
    .msgslider .bx-wrapper .slider { width: 100% !important; display: flex; left: 0px !important; justify-content: space-around; align-items: center; }
    .msgslider .bx-wrapper .slider .slide { float: none !important; width: auto; }
    .msgslider .bx-wrapper .slider .slide.bx-clone { display: none; }
    .msgslider .bx-wrapper .bx-controls-direction span { display: none; }
    .msgslider .bx-viewport { height: 48px !important; }

    #mainbannerslider img { margin: 0 auto; aspect-ratio: 1200 / 480; }
    #mainbannerslider .slide a { display: block; aspect-ratio: 1200 / 480; }


    .country-switch .drop-head { display: none; }
    .country-switch .opts { display: block !important; }
    .widget-controls .country-switch { display: none; }
    .nav-container { position: relative; height: 85px; }
    nav { }
    nav > ul { display: flex; list-style: none; text-align: center; padding: 0px; margin: 0px; display: flex; align-items: center; }
    nav .topcatlink { max-width: 130px; font-size: 0.9em; display: flex; height: 85px; align-items: center; justify-content: center; color: #fff; text-transform: uppercase; }

    nav .topcatlink span { display: flex; border-left: 1px solid #ffffff55; padding: 0px 5px; min-height: 45px; align-items: center; justify-content: center; }
    nav .nav-btn { font-size: 0.9em; width: 130px; padding: 10px 10px; }
    nav > ul li:first-child .topcatlink span { border: none; }
    nav > ul li .drop { display: none; padding: 40px 0px; z-index: 999; position: absolute; top: 100%; left: 0; background-color: #fff; width: 100%; opacity: 0; visibility: hidden; }
    nav > ul li:hover .drop { display: block; visibility: visible; opacity: 1; box-shadow: 0px 3px 6px #00000029; }
    nav > ul li:hover .topcatlink { background-color: #fff; color: #000; }
    nav > ul li i { display: none !important; }
    nav .topcatlink:hover { background-color: #fff; color: #0063BC; }
    nav .drop .subcats { text-align: left; }
    nav .drop .subcats a { color: #000; margin-bottom: 15px; display: block; font-size: 1.1em; }
    nav .drop .subcats a:hover { color: #0063BC; }
    nav .cat-head { display: none; }
    .nav-feat-cat { max-width: 100%; background-color: #f1f1f1; position: relative; display: flex !important; height: 110px; align-items: center; border-bottom: 10px solid #E94D43; grid-gap: 15px; }
    .nav-feat-cat:hover { }
    .nav-feat-cat:hover .btm { color: #E94D43 !important; }
    .nav-feat-cat i { display: inline-block !important; }
    .nav-feat-cat img { left: 0px; bottom: 0px; }
    .nav-brands { display: block; }
    .nav-brands .title { padding: 5px 0px; text-transform: uppercase; color: #343738; font-weight: 700; border-bottom: 1px solid #343738; font-size: 1.3em; margin-bottom: 30px; }
}

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

    .nav-feat-cat { display: none !important; }
    .top-links { display: none; }
    .nav-brands { display: none; }

    .widget.phone { background-color: #343738; margin: 0px; }
    .widget.depot-locations-widget { display: none; }
    .site-head { padding: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; z-index: 10; }
    .site-head .inner-rel { padding-top: 10px; padding-bottom: 90px; position: relative; }
    .site-head .search-container { padding: 15px; position: absolute; left: 0px; bottom: 0px; background-color: #0063BC; width: 100% !important; max-width: 100% !important; }

    .navicon-container { display: inline-block; width: 30px; height: 45px; padding-top: 6px; }
    .navicon-container .menu-icon { width: 200%; height: 100%; transition: all .5s ease-in-out 0s; transform: rotate(0deg) scale(0.7) translateX(-18px); position: relative; cursor: pointer; transform-origin: top left; }
    .navicon-container .menu-icon span { display: block; position: absolute; height: 8px; border-radius: 10px; opacity: 1; left: 0px; transform: rotate(0deg); transition: all 0.25s ease-in-out 0s; background-color: #fff; }
    .navopen .navicon-container .menu-icon span { background-color: #0063BC; }
    .navicon-container .menu-icon span:nth-child(1) { top: 0px; width: 100%; transform-origin: left center; }
    .navicon-container .menu-icon span:nth-child(2) { top: 18px; width: 100%; transform-origin: left center; }
    .navicon-container .menu-icon span:nth-child(3) { top: 36px; width: 100%; transform-origin: left center; }
    .navicon-container .menu-icon.open span:nth-child(1) { transform: rotate(45deg); top: -3px; left: 8px; }
    .navicon-container .menu-icon.open span:nth-child(2) { width: 0%; opacity: 0; }
    .navicon-container .menu-icon.open span:nth-child(3) { transform: rotate(-45deg); top: 39px; left: 8px; }

    .navopen .navicon-container { transform: translateY(-85px); }

    .topsearch { max-width: calc(100% - 60px) !important; }

    .head-outter { position: sticky; top: 0px; left: 0px; z-index: 99; }
    .head-outter .head-inner { position: relative; height: 100vh; max-height: 170px; }
    .head-outter .head-inner.compact { max-height: 82px; }
    .site-msgs { height: 60px; max-height: 60px; overflow: hidden; width: 100%; padding: 6px 0px; }

    .navopen .head-outter .head-inner { max-height: 170px !important; }
    .site-head .flx-bx.fl-al-cent.fl-ju-space { max-width: 100%; }
    .navopen .site-head .flx-bx.fl-al-cent.fl-ju-space { max-width: 280px; }
    .navopen { overflow: hidden; }
    .hlink { width: 0px; overflow: visible; }

    .navopen .hlink img { opacity: 0; }
    .head-widgets { width: 280px; }
    .delivery-countdown { top: 80px; }

    nav { height: 100vh; max-height: 0vh; overflow: hidden; }
    .navopen nav { height: 100vh; max-height: calc(100vh - 125px); }

    .widget-controls { max-height: 0px; overflow: hidden; position: absolute; background-color: #f1f1f1; bottom: 0px; left: 0px; width: 100%; height: 82px; justify-content: center; }

    #priceForm { display: block; }
    .navopen .widget-controls { max-height: 82px; }

    .country-switch { display: block; position: relative; }
    .country-switch .drop-head { height: 50px; width: 165px; display: flex; align-items: center; padding: 0px 10px; justify-content: space-between; }
    .country-switch .opts { position: absolute; right: 0px; background-color: #fff; padding: 5px 10px; width: 65px; }
    .country-switch .opts .flag { margin: 5px auto; }
    .navopen .widget-controls.curr-open { overflow: visible; }

    nav > ul { list-style: none; padding: 0px 0px 25vh 0px; max-width: 500px; margin: 0 auto; overflow: auto; max-height: calc(100vh - 200px); height: 100%; margin-top: 15px; }
    nav > ul li .drop { transform: translateX(100%); position: absolute; top: 0px; bottom: 0px; height: 100%; left: 0px; width: 100%; background-color: #0063BC; }
    nav > ul li .drop .subcats { max-width: 530px; padding: 0px 15px 100px 15px; margin: 0 auto; max-height: calc(100vh - 265px); overflow: auto; }
    nav > ul li .drop .subcats a { font-size: 1.1em; color: #fff; text-transform: uppercase; border-bottom: 1px solid #fff; height: 45px; display: flex; justify-content: space-between; align-items: center; }
    nav > ul li.subopen .drop { transform: translateX(0%); }
    nav > ul li { border-bottom: 1px solid #fff; height: 45px; display: flex; justify-content: space-between; align-items: center; }
    nav > ul li:last-child { border: none; }
    nav > ul li i { display: block; width: 45px; height: 45px; line-height: 45px !important; text-align: center; color: #fff; }
    nav .topcatlink { color: #fff; display: block; text-transform: uppercase; font-size: 1.1em; }
    nav .nav-btn { width: 100%; margin-top: 30px; }
    .nav-container { position: relative; overflow: hidden; }
    nav .cat-head .flx-bx { border-bottom: 2px solid #fff; padding: 3px 0px; }
}

@media screen and (max-width: 1229px) and (min-width: 992px) {

    .hlink-container { width: 360px; }
    .site-head .inner-rel { padding-bottom: 100px; }
}

@media screen and (max-width: 1229px) and (min-width: 768px) {
    .site-head .search-container .inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
}

@media screen and (min-width: 992px) {
    .lg-logo { display: block; }
    .sm-logo { display: none; }
    .lg-logo img { display: block; width: 513px; max-width: 100%; height: 70px; }
    .footer-logo { display: block; width: 69px; height: 69px; }
}

@media screen and (max-width: 991px) {
    .lg-logo { width: 69px; height: 69px; }
    .lg-logo img { width: 100%; height: 100%; aspect-ratio: 1 !important; object-fit: cover; object-position: left; }
    .sm-logo { display: block; }
    .hlink-container { width: 69px; }
    .footer-logo { width: 69px; height: 69px; }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
}

@media screen and (max-width: 767px) {
    .site-head .search-container .inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
}

@media screen and (max-width: 600px) {
    #msgslider .slide img { display: none; }
    #msgslider .slide .white-txt { text-align: center; }
}

@media screen and (max-width: 400px) {
    .widget.basket-widget { position: relative; }
    .widget.basket-widget .widg-txt { margin-left: 0; width: 0; }
    .widget.basket-widget .widg-txt > div *:not(#noofitems) { display: none; }
    .widget.basket-widget .widg-txt #noofitems { position: absolute; top: 0; right: 0; transform: translate(30%, -30%); background-color: #0063BC; height: 20px; width: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0px 3px 6px #00000029; }
    .head-widgets { width: 200px; }
    .navopen .site-head .flx-bx.fl-al-cent.fl-ju-space { max-width: 200px; }
}

@media screen and (max-width: 350px) {
    .vat-switch { width: 150px; }
    .vat-switch .slider { width: 37px; }
    .country-switch .drop-head { width: 150px; }
}

.sitemap nav { margin-bottom: 60px; }
.sitemap nav > ul { display: block; }
.sitemap nav .topcatlink { max-width: 100%; display: block; height: auto; }
.sitemap nav .topcatlink span { color: #0063BC; padding: 0px; }
.sitemap nav .topcatlink:hover span { color: #E94D43; }
.sitemap nav .topcatlink span { font-size: 1.3em; text-align: left; display: block; font-weight: 600; }
.sitemap nav > ul li .drop { position: static; display: block; opacity: 1; visibility: visible; box-shadow: none; }
.sitemap nav .drop .subcats { max-width: 100%; }
.sitemap nav .drop .container.center-block { padding: 0px; }
.sitemap nav .drop .feat-bs { display: none; }
.sitemap nav .drop .brands-bs { display: none; }
.sitemap nav .drop .section { width: 100%; }
.sitemap nav .drop .section > div { width: 100%; }
.sitemap nav .drop .nav-section { width: 100%; }
.sitemap nav .drop .nav-section > div { width: 25%; }
.sitemap nav .drop .brand-section { justify-content: center; }
.sitemap nav .drop .brand-section > div { max-width: 230px; }