*{box-sizing:border-box;margin:0;padding:0}@theme{--font-asap:"Asap","sans-serif"}@layer utilities{.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 4px 4px rgb(0 0 0/40%))!important}}:root{--spacing:0.25rem;--primary-dark:#1a1817;--primary-light:#fcfbfa;--accent:#48ac34;--accent2:#67883f;--accent3:#799700;--subtle-grey:#f5f5f5;--bgGrey:#faf8f6;--light-grey:#e4e4e4;--light-beige:#dfdfdf;--medium-light-grey:#8f8f8fff;--medium-grey:#636363;--dark-grey:#3b3b3a;--heading-font:"Poppins";--main-font:"Asap";--font-cursive:"Kalam";--content-left-m:14%;--content-max-w:calc(100vw - 30%);--content-top:200px;--md-content-left-m:5%;--md-content-max-w:calc(100vw - 20%);--md-content-left-m:9.7%;--sm-content-max-w:calc(100vw - 10%);--sm-content-left-m:4%;--text-shadow:0 8px 12px rgba(0,0,0,0.15),0 4px 4px rgba(0,0,0,0.3)}body{font-size:16px;font-family:var(--main-font);background-color:var(--bgGrey);color:var(--primary-dark);margin:0;height:100%;overflow-y:scroll;overflow-x:hidden;&:has(.mobile){overflow:hidden}}h1,h2,h3,h4,h5,h6{font-family:Poppins,"sans-serif";font-weight:600;letter-spacing:-2px;text-transform:capitalize}h1{font-size:clamp(2rem,9.4vw,4.5rem);line-height:1}h2{font-size:clamp(1.5rem,4vw,6rem);line-height:50px}h3{font-size:clamp(1.5rem,3.5vw,5rem)}h3,h4{line-height:40px}h4{font-size:clamp(1.5rem,3vw,4rem)}h5{font-size:clamp(1.5rem,2.5vw,3rem)}h5,h6{line-height:40px}h6{font-size:clamp(1.2rem,1.5vw,2rem)}p{font-family:var(--main-font);font-size:clamp(1rem,2vw,1.2rem);line-height:1.2;&.large{font-size:clamp(1.5rem,1.8vw,2rem)}}section{scroll-snap-align:start}span{&.semibold{font-weight:600}}.hero{& h1{text-shadow:0 8px 12px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.3)}}.subheading{font-family:var(--heading-font);font-size:33.696px;font-weight:600;letter-spacing:-1.011px;text-transform:capitalize}#retailer-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;scroll-snap-align:center;padding:100px 2rem;& .subheading{margin-bottom:.5rem;font-size:46px;text-wrap:balance}& img{max-width:360px}}& .address-container{display:flex;gap:10px;& span{font-weight:600}}.postcode-search{background-color:white;display:flex;width:-moz-fit-content;width:fit-content;position:relative;width:100%;align-items:center;border:1px solid var(--light-beige);border-radius:5px;& .flag{width:20px;border-radius:50px;height:-moz-fit-content;height:fit-content;border:1px solid var(--light-beige)}&>svg{position:absolute;left:8px}& button.clear{background-color:transparent;height:-moz-fit-content;height:fit-content;line-height:0;position:absolute;right:8px}& input{border-radius:5px;color:var(--primary-dark);width:100%;border:none;padding:15px 15px 15px 50px;font-size:1rem;&:focus-visible{outline:none}}}ul{list-style-type:none}a{text-decoration:none}a,button,div,li,select{font-size:inherit;color:inherit;font-family:var(--main-font)}header{z-index:20;color:white;position:absolute;top:0;width:100%;padding:5px 0;background-color:transparent;& .content{max-width:var(--content-max-w);margin:0 auto;justify-content:space-between;align-items:center;display:flex;& .logo{height:-moz-fit-content;height:fit-content;width:160px;&:hover{cursor:pointer}}& .navlinks{display:flex;align-items:center;& ul{display:flex;font-weight:500;gap:2rem}}}& .languageSelect{position:relative;& .trigger{display:flex;gap:3px;align-items:center;&>div{height:-moz-fit-content;height:fit-content;display:flex}}& .current-lang-icon{color:white}& button{display:flex;align-items:center;gap:8px;padding:4px .3rem;border-radius:5px;background-color:transparent;transition:background-color .11s;& .lang-flag{width:1.2rem;height:auto}&>svg{width:20px;height:auto;fill:var(--primary-light);transition:all 80ms}&:hover{cursor:pointer}}& .options{position:absolute;line-height:1;font-size:.9rem;background:var(--primary-light);color:var(--primary-dark);width:150px;& .option{padding:8px;width:100%;border-radius:0;&:hover{background-color:var(--light-grey)}}}}}nav a{font-weight:400;&:after{content:"";width:0;height:.5px;background-color:white;display:block;transform-origin:left;transition:.2s ease-in-out;font-weight:500;top:1px;position:relative}&:hover:after{width:100%}}.mobile{height:100vh;background-color:white;position:fixed;z-index:30;padding:1rem 2rem;width:100vw;display:flex;flex-direction:column;& .header{display:flex;justify-content:space-between;margin-bottom:1rem;align-items:center;& .logo{width:200px;height:-moz-fit-content;height:fit-content}}& .content{display:flex;flex-direction:column;height:100%;position:relative;margin-top:1rem;& ul{display:flex;flex-direction:column;font-size:1.2rem}& a{width:100%;display:block;font-size:1rem;padding:10px;&:hover{background-color:var(--subtle-grey)}}& div:has(.languageSelect){margin-top:1rem;display:flex;flex-direction:column;& label{padding:10px}}& .languageSelect{width:100%;& button.trigger{align-items:center;gap:5px;display:flex;background-color:transparent;padding:10px;width:100%;justify-content:space-between;border:1px solid var(--light-grey);&>div{display:flex;gap:1rem;align-items:center}& svg{width:25px;height:auto}}& .options{width:100%;border:1px solid var(--light-grey);border-top:none;display:flex;flex-direction:column;text-align:start;justify-content:flex-start;& .option{width:100%;text-align:start;padding:10px;gap:1rem;align-items:center;display:flex;background-color:white;min-height:47px;&:hover{background-color:var(--subtle-grey)}}}}}& a:after{background-color:transparent}}footer{padding-top:70px;padding-bottom:1rem;background-color:white;scroll-snap-align:end;font-family:var(--main-font);color:var(--dark-grey);& .footer-category{& .heading{font-weight:600;margin-bottom:8px}& li:not(:last-of-type){margin-bottom:.5rem}& li{font-size:.925rem}}& .content{display:flex;align-items:flex-start;column-gap:2rem;row-gap:3rem;max-width:1200px;justify-content:center;padding:0 2rem 100px;margin:0 auto;flex-wrap:wrap;& .main-content{flex:1 1;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:2rem;row-gap:3rem}& .logo{width:300px;height:auto;flex-shrink:0}}& a{&:hover{text-decoration:underline;text-underline-offset:2px}}& .copyright{text-align:center;display:block;font-size:.9rem;color:var(--medium-grey)}}button{border:none;&:hover{cursor:pointer}}a.primary,button.primary{width:-moz-fit-content;width:fit-content;color:var(--primary-dark);font-size:1.2rem;padding:0 45.6px;height:61px;background-color:var(--primary-light);border-radius:100px;& svg{width:30px;height:auto;fill:var(--primary-dark)}&.dark{color:var(--primary-light);background-color:var(--primary-dark)}}button.icon{background:transparent;padding:.5rem;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.not-found{min-height:80vh;display:flex;justify-content:center;align-items:center;flex-direction:column;max-width:500px;margin:0 auto;gap:1rem;&>*{align-self:start}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.accordion{max-width:var(--content-max-w);overflow:visible;& .content-container{display:none}& span{font-size:.8rem;margin-right:1rem;letter-spacing:normal}& button{font-size:1.5rem;padding:1rem;background-color:transparent}& .content{color:var(--medium-grey);transition:color .5s;border:none;transform-origin:50% 50% 0;height:69px;position:relative;overflow:hidden;border-bottom:1px solid var(--light-beige);& button{width:100%;letter-spacing:-1px;background-color:white;line-height:1.5;display:flex;justify-content:space-between;z-index:3;position:relative;&:hover{cursor:pointer}& svg{transition:all .5s;fill:var(--medium-grey)}}& .content-container{display:flex;font-size:.9rem;padding:.7rem 1rem 1.3rem 3.1rem}& svg{width:1.5rem}&[data-selected=true]{color:var(--primary-dark);& svg{fill:var(--primary-dark)}}}}.still{position:absolute;top:0;left:0;max-width:none;object-fit:cover;min-width:100vw;flex:1 1;height:100%}& #retailer-list{display:flex;justify-content:center;margin:auto;align-items:flex-start;flex-wrap:wrap;gap:3rem;height:700px;padding:100px 2rem;&>div{flex:1 1}& .map{max-width:500px;height:100%;& img{width:100%;object-fit:cover;max-width:none;height:100%}}& .retailers-container{display:flex;flex-direction:column;gap:2rem;max-width:500px;& input{width:100%}& .country{display:flex;gap:8px;img{width:20px;height:20px;border-radius:20px}}}& svg{width:2rem}& .search-results{position:absolute;background:white;border-radius:5px;top:calc(100% - -5px);border:1px solid var(--light-beige);width:100%;left:0;padding:20px;display:flex;flex-direction:column;gap:1.5rem;max-height:300px;overflow-y:auto;& a{font-weight:600}& .result{text-align:start;justify-content:space-between;display:flex;& a{align-self:center}& p{font-size:1rem;font-weight:600}}}& .country{font-weight:600;font-size:1.2rem;border-bottom:1px solid var(--light-beige);padding-bottom:8px}& .locations-container{font-size:1.1rem;padding:1rem 0;display:flex;flex-direction:column;gap:.5rem}& .address{display:flex;justify-content:space-between;font-size:1rem;& a{font-weight:700}}}.divider{display:block;background-color:var(--light-beige);&.horizontal{width:100%;height:1px}&.vertical{height:100%;width:1px}}@media only screen and (max-width:1024px){header .content{max-width:100%;padding:0 1rem}& #retailer-list{gap:1.5rem;& .subheading{font-size:45px}}.languageSelect{& .options{right:0}}footer .main-content{min-width:max-content}& .not-found{max-width:var(--content-max-w)}}@media only screen and (max-width:750px){& #retailer-list{padding:100px 0;flex-direction:column-reverse;height:auto}}@media only screen and (max-width:600px){& #retailer-list{flex-direction:column-reverse;max-width:var(--sm-content-max-w);overflow:hidden;padding:100px 0;& input{font-size:.9rem}& .retailers-container,.map{max-width:none}}footer .content .main-content{display:grid;grid-template-columns:repeat(2,1fr)}}