/* ------------------------------------  */
/* ---------- SITE FRAMEWORK ----------  */
/* ------------------------------------  */

@import 'variables.php';

:root {--mainFont: "Work Sans", sans-serif; --secondaryFont: "Outfit", sans-serif; }

html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; }
body { font-family: var(--mainFont); font-size: 14px; background: var(--siteBackground); overflow: hidden; }
.content-div { min-height: 600px; }
.ui-autocomplete { z-index: 10001 !important; }

/* DISPLAY CLASSES */
.full-width-fix { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.hidden { display: none; }
.hideImportant { display: none !important; }

/* SITE FORMS */
input::placeholder { font-family: inherit; }
textarea { font-family: inherit; }
select { width: 100%; border: 1px solid #DBDBDB; height: 50px; padding: 0 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/chevron-down-black.svg) no-repeat 98% center #fff; }
input[type=text], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=password], textarea { width: 100%; height: 50px; background-color: #fff; border: 1px solid #DBDBDB; padding: 0 10px; box-sizing: border-box; font-size: 14px; color: var(--textColour); transition: 0.2s ease-in-out all; }
textarea { height: 100px; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
:is(input, select, textarea).input-error { border-color: #a30e0e !important; }
.site-form-field { padding: 10px 0; }
.site-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; }
img { max-width: 100%; height: auto !important; }

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 { display: block; color: var(--headingColour); font-family: var(--secondaryFont); margin: 0; padding: 0 0 10px 0; font-weight: 600; }
h1 { font-size: 32px; line-height: 38px; }
h2 { font-size: 32px; line-height: 38px; font-weight:500; }
h3 { font-size: 28px; line-height: 34px; }
h4 { font-size: 24px; line-height: 30px; }
h5 { font-size: 22px; line-height: 28px; }
h6 { font-size: 20px; line-height: 26px; }
p { padding: 0; font-size: 16px; color: var(--textColour); line-height: 26px; }
a { text-decoration: none; color: #33ABFB; }
.content-wrap p a:not([class]) { text-decoration: underline; color: #33ABFB;}
a:focus-visible { background-color: #f9dc4a; color: #000; outline: 1px solid #000; }
ul { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 16px; color: var(--textColour); list-style-type: disc; line-height: 24px; }
ul li { padding: 0 0 15px 0; line-height: 20px; }
ol { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 16px; color: var(--textColour); list-style-type: decimal; line-height: 24px; }
ol li { padding: 0 0 5px 0; }
hr { color: #D8D8D8; background: #D8D8D8; height: 1px; border: 0; margin-bottom: 20px; position: relative; }

/* Button Classes */
.button-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0px 35px; margin: 0; line-height: 1; height: 60px; 
    background: var(--mainColour);  text-align: center; color: #fff;  transition: 0.2s ease-in all; text-transform: uppercase; 
    font-size: 14px; font-weight: 600; text-decoration: none; font-family:var(--secondaryFont); }
.button-primary:hover { background: var(--secondaryColour); color: var(--mainColour) !important; text-decoration: none; }


.button-secondary {display: inline-flex; align-items: center; justify-content: center; padding: 0px 35px; margin: 0; line-height: 1; height: 60px; 
    background: var(--secondaryColour);  text-align: center; color: var(--mainColour);  transition: 0.2s ease-in all; text-transform: uppercase; 
    font-size: 14px; font-weight: 600; text-decoration: none; font-family:var(--secondaryFont);}
.button-secondary:hover { background: var(--mainColour); color: #fff !important; text-decoration: none; }

a.skiptocontent { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; }
a.skiptocontent:focus, a.skiptocontent:active { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 20px; border: 1px solid #000; background: #f9dc4a; color: #000; font-size: 14px; font-weight: bold; opacity: 1; width: auto; z-index: 10000; }

/* Animations */
.empty-loader:not(.hidden):empty { display: flex; align-items: center; justify-content: center; padding: 5px; }
.empty-loader:not(.hidden):empty:after { content: ''; width: 20px; height: 20px; border: 2px solid #fff; border-color: var(--mainColour) transparent transparent; border-radius: 50%; animation: spin 1s infinite; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ------------------------------------  */
/* ------------ SITE DESIGN -----------  */
/* ------------------------------------  */

/* ----- SITE HEADER ----- */
body.site-body * { box-sizing: border-box; }
header.site-header { position: relative; z-index: 1000; font-family: var(--secondaryFont);}

/*-- TOP STRAP --*/
.top-wrap { height: 40px; background: var(--topbarColour); position: relative; z-index: 2000;}
.top-wrap>div { display: flex; position: relative; align-items: center; justify-content: center; height: 100%; padding: 0 15px;}
.top-wrap .delivery-link{display: flex; align-items: center; justify-content: center; text-align: center; width: 100%;}
.top-wrap .delivery-link a{color: #fff; font-weight: 500;}
.currency-select-container{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); height: 100%; display: flex; align-items: center;}
.currency-select-container > a.toggle-currency{color: #fff; display: flex; align-items: center; gap:10px;}
.currency-select-container > a.toggle-currency::after{content: ""; height: 6px; width: 6px; border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg);}
.currency-select{width: 150px; box-shadow: 0px 3px 6px #00000029; border:1px solid #C9C9C9; background: #fff; padding: 15px 10px; 
    position: absolute; right: 0; top: 100%; display: flex; flex-direction: column; gap:5px; align-items: center; justify-content: center;
    z-index: -1; visibility: hidden; opacity: 0; transform: translateY(20px); transition: ease-in-out all .3s;}
.currency-select.active{z-index: 3000; visibility: visible; opacity: 1; transform: translateY(0);}
.currency-select a{color: var(--textColour);}
.currency-select a.active{font-weight: bold;}

/*-- HEADER WRAP --*/
.header-wrap { background: var(--headerColour); height: 130px; }
.header-wrap>div { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 15px; }
.header-wrap .logo { padding: 10px 0; height: 100%; display: flex; align-items: center; flex: 0 0 auto; }
.header-wrap .logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; }

.header-right { display: flex; align-items: center; gap: 60px; }
.header-right > div{display: flex; align-items: center; gap:40px; position: relative;}

.site-search { display: flex; width: 600px; height: 50px; background: #fff; border: 1px solid #DBDBDB; border-radius:5px; position:relative; }
.site-search input { width: calc(100% - 50px); height: 100%; padding: 0 15px; box-sizing: border-box; background: none; border: 0; 
    font-size: 14px; font-family: inherit; border-radius: 5px;}
.site-search input::placeholder { font-size: 14px; color: #777777; }
.site-search .search-button { width: 50px; height: 100%; border-radius: 5px; background: url(../images/search.svg) no-repeat center #F8F8F8; border: 0; outline: 0; }

.site-search .search-auto-complete{position: absolute; width: 100%; padding: 15px; border: 1px solid #C9C9C9; background: #fff; 
    position: absolute; top: 100%; left:0; display: none;}
.site-search.display .search-auto-complete{display: flex; flex-direction: column; align-items: flex-start; z-index: 1000; font-family: var(--seondaryFont);}
.search-auto-complete .autoProductItem{display: flex; align-items: flex-start; width: 100%;}
.search-auto-complete .autoProductItem > a{display: flex; align-items: flex-start; gap:20px; width: 100%; padding-bottom: 10px; 
    margin-bottom: 10px; border-bottom: 1px solid #EBE2E2;}
.search-auto-complete .autoProductItem:last-child > a{border: 0; padding: 0; margin: 0;}
.search-auto-complete .autoProductItem .autoProductImage{height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;}
.search-auto-complete .autoProductItem .autoProductImage img{max-width: 100%; max-height: 100%; height: auto; max-width: auto;}
.search-auto-complete .autoProductItem .autoProductTitle{flex-grow: 1; color: #0C1A29; text-transform: uppercase;}
.search-auto-complete .autoProductItem .autoProductPrice{color: #0C1A29; font-weight: bold;}
.search-auto-complete .autoProductItem.viewAll {justify-content: flex-end;}
.search-auto-complete .autoProductItem.viewAll a{width: initial; color: var(--mainColour); text-transform: uppercase; font-size: 18px; line-height: 22px; display: flex;
    gap:10px; align-items: center; font-weight: 600;}
.search-auto-complete .autoProductItem.viewAll a::after{content: ""; height: 8px; width: 8px; border: solid var(--mainColour); 
    border-width: 2px 2px 0 0; transform: rotate(45deg);}

 /* -- Side Toggle -- */
.side-menu-wrap{position: relative;}
.side-menu-toggle{height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; z-index: 1500; position: relative;}
.side-menu-toggle > div{display: flex; align-items: center; justify-content: space-between; flex-direction:column; height:18px; width:25px; transition: ease-in-out all .3s;}
.side-menu-toggle > div::before{content: ""; height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
.side-menu-toggle > div::after{content: ""; height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
.side-menu-toggle > div > div{height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
.side-menu-toggle.active > div{transform: rotate(90deg);}

.top-menu-wrap{background: #fff; padding: 20px 40px 20px 20px ; position: absolute; right: -15px; top: -15px; width: 300px; transition: ease-in-out all .3s;
 opacity: 0; z-index: -1; visibility: hidden; transform: translateX(10px); border: 1px solid var(--border)}
.top-menu{padding: 0; display: flex; flex-direction: column; gap:10px; list-style: none; margin: 0;}
.top-menu li{padding: 0;}
.top-menu li a{color: var(--textColour);}
.top-menu-wrap.open{opacity: 1; z-index: 1100; visibility: visible; transform: translateX(0);}

.my-account-wrap{position: relative;}
.my-account-wrap .my-account-toggle, .my-account-logged-in { display: flex; width: 30px; height: 30px; background: url(../images/account.svg) no-repeat center; background-size: contain; }
.my-account-wrap .my-account{position: absolute; right: -10px; top: -10px; width: 250px; box-shadow: 0px 3px 6px #00000029; border: 1px solid #C9C9C9; padding: 15px 10px; border-radius: 5px; background: #fff; z-index: -1; visibility: hidden; opacity: 0; transform: translateY(20px); transition: ease-in-out all .3s;}
.my-account-wrap .my-account.active{z-index: 3000; visibility: visible; opacity: 1; transform: translateY(0);}

.my-account-header{display: flex; justify-content: space-between; font-family: var(--secondaryFont);}
.my-account-header span{font-size: 14px; font-weight: 600; display: flex; align-items: center; gap:20px; position: relative;}
.my-account-header .my-account-close{height: 23px; width: 23px; background: url(../images/cancel-black.svg) center no-repeat;}
.my-account-links{display: flex; flex-direction: column;}
.my-account-links a{padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 16px; color: var(--textColour); display: flex; align-items: center; gap:10px;}

/*Basket*/
.shopping-cart { height: 50px; display: flex; align-items: center; justify-content: center; position: relative;}
.small-cart { display: flex; align-items: center; gap:25px; height: 100%; position: relative; color: #000; font-family: var(--secondaryFont);}
.small-cart a.basket-toggle{width: 21px; height: 28px; background: url(../images/bag.svg) no-repeat center; background-size: contain; position: relative;}
.small-cart a.basket-toggle small{height:24px; width:24px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius:100%; 
    color: #fff; background: var(--mainColour); position: absolute; right: -16px; top: -11px; font-size: 10px;}
.small-cart a.basket-toggle span{display: flex; flex-direction: column; line-height: 18px;}
.small-cart {font-weight: 500;}

.shopping-cart .basket-pop-up{box-shadow: 0px 3px 6px #00000029; border: 1px solid #C9C9C9; padding: 15px 10px; border-radius: 5px; background: #fff;
    position: absolute; right: -20px; top: 0; width: 370px; display: flex; flex-direction: column; gap:10px; transition: ease-in-out all .3s;
     z-index: -1; visibility: hidden; opacity: 0; transform: translateY(20px);}
.shopping-cart .basket-pop-up.active{z-index: 3000; visibility: visible; opacity: 1; transform: translateY(0);}
.basket-pop-up-header{display: flex; justify-content: space-between;}
.basket-pop-up-header span{font-size: 14px; font-weight: 600; display: flex; align-items: center; gap:20px; position: relative;}
.basket-pop-up-header span::before{content: ""; height:30px; width:23px; background:url(../images/bag.svg) center no-repeat; }
.basket-pop-up-header span::after{content: ""; height: 24px; width: 24px; background: var(--mainColour); border-radius: 100%; position: absolute; left:14px; top: -10px;}
.basket-pop-up-header .basket-close{height: 23px; width: 23px; background: url(../images/cancel-black.svg) center no-repeat;}
.basket-pop-up-items{display: flex; flex-direction: column;}
.basket-pop-up-item{padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap:10px;}
.basket-pop-up-item .basket-pop-up-image{height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.basket-pop-up-item .basket-pop-up-info{flex-grow: 1; display: flex; flex-direction: column; gap:5px;}
.basket-pop-up-item .basket-pop-up-title{font-size: 12px; line-height: 15px; }
.basket-pop-up-item .basket-pop-up-price{display: flex; gap:30px; align-items: center; font-weight: bold; font-size: 11px;}
.basket-pop-up-item .basket-pop-up-item-remove{height: 15px; width: 15px; background: url(../images/bin-black.svg) center no-repeat; flex-shrink: 0;}

/*-- MENU WRAP --*/
.menu-wrap { background: var(--secondaryColour); position: relative; height: 60px; border: 1px solid var(--border); border-width: 1px 0; }
.menu-wrap>div { height: 100%; position:relative; }
.menu-wrap>div>nav { display: flex; align-items: center; height: 100%;}

/* Main Menu */
.menu-wrap .main-menu { display: flex; height: 60px; list-style: none; padding: 0; margin: 0; align-items: center; width: 100%; 
    justify-content:space-between; font-family: var(--secondaryFont);}
.menu-wrap .main-menu ul { list-style: none; padding: 0; margin: 0; }
.menu-wrap .main-menu>li { height: 100%; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.menu-wrap .main-menu li a{text-transform: uppercase; font-size: 15px;}
.menu-wrap .main-menu>li>a { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--textColour); text-align: center; 
    font-size: 16px; width: 100%; text-decoration: none; font-weight: 500; gap: 5px; transition: ease-in-out all .3s;}
.menu-wrap .main-menu>li>ul { width: 100%; padding:20px 10px; box-sizing: border-box; position: absolute; align-items: flex-start; flex-wrap: wrap;
    gap:20px; left: 0; z-index: -1; visibility: hidden; opacity: 0; display: flex; top: calc(100% + 1px); transition: 0.3s ease-in-out all; background:#fff; 
    transform: translateY(5px);}
.menu-wrap .main-menu>li>ul::after{content: "";  width: 100vw !important; max-width: 100vw !important; position: absolute; !important; left: 50%; 
    right: 50%; margin-left: -50vw; margin-right: -50vw; height: 100%; background: #fff; top:0; z-index:5;}
.menu-wrap .main-menu>li ul.active { z-index: 10; opacity: 1; visibility: visible; transform: translateY(0);}
.menu-wrap .main-menu>li>ul>li { position: relative; line-height: 40px; padding: 0; width: calc(20% - 16px); z-index: 10;}
.menu-wrap .main-menu>li>ul>li>a { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; padding:0; color: var(--textColour); 
    font-size:15px; transition: ease-in-out all .3s; text-decoration: none; font-weight: bold; position: relative;}
.menu-wrap .main-menu>li>ul>li>a::after{content: ""; height:3px; width:46px; background:var(--mainColour);}
.menu-wrap .main-menu>li>ul>li>ul {}
.menu-wrap .main-menu>li>ul>li>ul>li { padding: 0; }
.menu-wrap .main-menu>li>ul>li>ul>li>a { display: flex; align-items: center; color: var(--textColour); transition: ease-in-out all .3s; padding: 5px 0; text-decoration: none; }

.menu-wrap .main-menu>li.has-sub-items::after{content:"";  width: 30px; height: 3px; background: var(--mainColour); opacity: 0; transition: ease-in-out all .2s;}
.menu-wrap .main-menu>li.has-sub-items:hover::after{opacity: 1;}

/*Overlay*/
.overlay { background: rgba(0, 0, 0, .5); position: fixed; top: 0; height: 100vh; width: 100%; left: 0; z-index: -1; 
    visibility: hidden; opacity: 0; transition: ease-in-out all .4s; }
.overlay.hover { visibility: visible; opacity: 1; z-index: 999; }

/*-- FOOTER WRAP --*/
.footer-wrap { background: var(--footerColour); padding: 40px 0;}
.footer-wrap > div { display: flex; align-items: flex-start; gap:20px; padding: 0 15px;}
.footer-col { flex: 1; }
.footer-col-title { color: var(--mainColour); font-weight: bold; font-size: 20px; display: flex; flex-direction: column; text-transform: uppercase;
    padding: 0; margin: 0 0 20px; line-height: 30px; gap: 5px; }
.footer-col .footer-col-title:after { content: ''; width: 20px; height: 3px; background: var(--mainColour);  }
.footer-col:last-child .footer-col-title { font-weight:600; }

.footer-contact { font-size: 14px; display: flex; flex-direction: column; gap: 20px; }
.footer-contact .location { display: flex; align-items: flex-start; line-height: 26px; }
.footer-contact .location:before { content: ''; width: 30px; height: 30px; background: url(../images/pin.svg) no-repeat left center; }
.footer-contact * { color: var(--textColour); font-size:16px; }
.footer-contact a { display: flex; align-items: center; }
.footer-contact a:hover { color: var(--textColour); }
.footer-contact a.call:before { content: ''; width: 30px; height: 30px; background: url(../images/phone.svg) no-repeat left center; }
.footer-contact a.mail { text-decoration: underline; }
.footer-contact a.mail:before { content: ''; width: 30px; height: 30px; background: url(../images/email.svg) no-repeat left center; }

.footer-social { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.footer-social>a { display: block; width: 14px; height: 14px; transition: ease-in-out all .3s; background-size: contain; 
    background-repeat: no-repeat; background-position: center;}
.footer-social>a:hover{transform: translateY(-5px);}
.footer-social>a.fb { background-image: url(../images/facebook.svg);}
.footer-social>a.li { background-image: url(../images/linkedin.svg);}
.footer-social>a.ig { background-image: url(../images/instagram.svg);}
.footer-social>a.tw { background-image: url(../images/twitter.svg);}
.footer-social>a.yt { background-image: url(../images/youtube.svg);}
.footer-social>a.tk { background-image: url(../images/tiktok.svg);}

.footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.footer-menu>li { padding: 0; margin: 0; }
.footer-menu>li>a { color: var(--mainColour); font-size: 15px; text-transform: uppercase; transition: ease-in-out all .3s; text-decoration: none; }
.footer-menu>li>a:hover{color: var(--mainColour); text-decoration: underline;}
.footer-menu ul { display: none; }

/*-- BYLINE --*/
.byline-wrap { background: var(--bylineColour); padding: 30px 0;}
.byline-wrap > div { display: flex; flex-direction: column; align-items: center; padding: 0 15px; gap: 15px; }

.byline-menu { display: flex; align-items: center; justify-content: center; list-style: none; padding: 0; margin: 0; flex-wrap:wrap; row-gap:10px; }
.byline-menu>li { padding: 0 10px; font-size: 16px; border-right: 1px solid #fff; }
.byline-menu>li:last-child { border: 0; }
.byline-menu>li>a { color: #fff; text-decoration: none; }
.byline-wrap > div > a { color: #fff; font-size: 12px; text-decoration: none; }

.pop-overlay { position: absolute; z-index: 10000; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.74); opacity: 0; display: flex; justify-content: center; }
.pop-overlay>div>a { position: absolute; width: 30px; height: 30px; background: url(../images/close.svg) no-repeat center; z-index: 5; top: 5px; right: 5px; }
.pop-overlay>div { background: #fff; position: absolute; background: #fff; padding: 20px; margin: 10px; max-width: 600px; min-width: 300px; flex: 0 0 auto; font-size: 16px; line-height: 26px; border-radius: 5px; }
.pop-overlay.pop-image>div { max-width: 100vw; max-height: 100vh; }
.pop-overlay.pop-image>div img { max-width: 100%; max-height: 100%; }
.pop-buttons { display: flex; margin: 10px 0; align-items: center; justify-content: space-between; }

/* -- TEXT MODULE -- */
.text_module_wrap { position: relative; }
.text_module_container { position: relative; z-index: 1; }
.text_module_before { position: absolute; left: calc(-1140px / 2); width: 100vw; top: 0; height: 100%; z-index: -1; }
.text_module_after { position: absolute; width: 100vw; top: 0; height: 100%; z-index: -1; }

/* -- SPACING MODULE -- */
.spacing_module { display: flex; align-items: center; justify-content: center; background: transparent; position: relative; z-index: 1; transition: 0.2s ease-in-out all; }
.spacing_module span { opacity: 0; text-align: center; font-size: 24px; font-weight: bold; transition: 0.2s ease-in-out all; }
.spacing_module.admin_logged:hover { background: #efefef; }
.spacing_module.admin_logged:hover span { opacity: 1; }

/*Fullscreen Gallery*/
.flexslider { height: auto; position: relative; }
.flexslider:not(.full-width-fix) .flex-direction-nav { display: none; }
.flex-viewport { height: 100% !important; }
.flexslider .slides { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.flexslider .slides>li { display: none; -webkit-backface-visibility: hidden; position: relative; margin: 0; padding: 0; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%; min-height: 100px; }
.flexslider .slides { height: 100%; }
.flexslider .slides>li.flex-active-slide { display: flex !important; flex-direction: column }
.flexslider .slides>li>a { display: block; height: 100%; }
.flexslider .slides>li>img, .flexslider .slides>li>a>img { width: 100%; display: block; z-index: 4; }
.flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .flexslider .slides { display: block; }
* html .flexslider .slides { height: 1%; }
.no-js .flexslider .slides>li:first-child { display: block; }
.flexSliderContainer.arrow { position: relative; }
.flexSliderContainer.arrow .flexslider { margin-bottom: -30px; }
.flexSliderContainer.arrow .slides>li, .flexSliderContainer.arrow .slides>li>a { clip-path: polygon(0 calc(100% - 30px), calc(50% - 30px) calc(100% - 30px), calc(50% - 1px) 100%, calc(50% + 1px) 100%, calc(50% + 30px) calc(100% - 30px), 100% calc(100% - 30px), 100% 0, 0 0); -webkit-clip-path: polygon(0 calc(100% - 30px), calc(50% - 30px) calc(100% - 30px), calc(50% - 1px) 100%, calc(50% + 1px) 100%, calc(50% + 30px) calc(100% - 30px), 100% calc(100% - 30px), 100% 0, 0 0); }
.flexSliderContainer.parallax .slides>li { background-attachment: fixed; }
.flex-caption { display: flex; flex-direction: column; height: 100%; margin: 0 auto; gap: 30px; z-index: 1; }
.flex-caption>div { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: auto; }
.flex-caption>div.background { background: rgba(0, 0, 0, .6); padding: 20px 40px; }
.flex-caption:empty { display: none; }
.flex-caption.halign-right { align-items: flex-end; }
.flex-caption.halign-left { align-items: flex-start; }
.flex-caption.halign-center { align-items: center; }
.flex-caption.valign-top { justify-content: flex-start; }
.flex-caption.valign-center { justify-content: center; }
.flex-caption.valign-bottom { justify-content: flex-end; padding-bottom: 40px; }

/*Fullscreen gallery paging buttons*/
.flex-control-paging { position: absolute; bottom: 20px; display: flex; left: calc(50% - 800px); width: 1600px; align-items: center; gap: 15px; justify-content: center; z-index: 60; list-style: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 15px; }
.flex-control-paging>li { padding: 0; margin: 0; font-size: 0; display: flex; align-items: center; justify-content: center; }
.flex-control-paging>li>a { height: 12px; width: 12px; border: 1px solid var(--headingColour); background: #fff; transition: ease-in-out all .3s; border-radius: 50%; }
.flex-control-paging>li>a.flex-active { background: var(--headingColour); border-color:#fff; width: 20px; height: 20px;}

/*Fullscreen gallery arrows*/
.flex-direction-nav { position: absolute; top: 50%; margin: 0; padding: 0; width: 100%; list-style: none; }
.flex-direction-nav li { position: absolute; z-index: 10; top: calc(50% - 30px); width: 40px; height: 60px; cursor: pointer; transition: ease-in-out all .3s; padding: 0; left: 20px; background: rgba(255, 255, 255, 0.62); display: flex; align-items: center; justify-content: center; }
.flex-direction-nav li a { font-size: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.flex-direction-nav li a:after { content: ""; height: 27px; width: 15px; background: url(../images/gallery-nav.svg) no-repeat center; }
.flex-direction-nav li.flex-nav-next { right: 20px; transform: rotate(180deg); left: initial; }
.flex-direction-nav li:hover { background: rgba(255, 255, 255, .8); }

/*Contact Form*/
.contact-form { background: #fff; border: 1px solid #e1e1e1; padding: 20px; margin: 20px 0; border-radius: 3px; }
.contact-form .cf_header { color: var(--headingColour); font-weight: bold; display: flex; align-items: center; gap: 10px; font-size: 26px; margin-bottom: 15px; }
.contact-form .cf-input { line-height: 30px; padding-bottom: 10px; }
.contact-form .cf-select { line-height: 30px; padding-bottom: 10px; display: inline-block; width: 100%; }
.contact-form .cf-text { font-size: 18px; color: var(--headingColour); font-weight: bold; line-height: 26px; margin-bottom: 20px; }
.contact-form label { width: 100%; color: var(--textColour); font-size: 16px; margin: 0; line-height: 26px; margin-bottom: 5px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=date], .contact-form textarea, .contact-form select { width: 100%; height: 42px; font-size: 14px; border: 1px solid #e1e1e1; box-sizing: border-box; padding: 0 10px; transition: ease-in-out all .5s; color: var(--textColour); }
.contact-form :is(input[type=text], .contact-form input[type=email], .contact-form input[type=date], .contact-form textarea):focus { border-color: #071b3a; }
.contact-form select option { color: #000; }
.contact-form label span, .contact-form legend span, .denotes span { color: #DC0D37; font-size: 12px; position: relative; top: -5px; }
.contact-form textarea { resize: none; height: 130px; font-family: inherit; }
.contact-form :is(.cf-radiobox, .cf-checkbox) { padding-bottom: 10px; }
.contact-form :is(.cf-radiobox, .cf-checkbox) > legend{color: var(--textColour); font-size: 16px; line-height: 20px;}
.contact-form :is(.cf-radiobox, .cf-checkbox)>span { display: flex; align-items: center; color: #071b3a; font-size: 14px; }
.contact-form :is(.cf-radiobox input[type=radio], .cf-checkbox input[type=checkbox]) { margin-right: 10px; accent-color: var(--textColour); }
.contact-form .cf-validation { text-align: center; height: 0; padding: 10px 0; box-sizing: border-box; font-size: 16px; 
    color: red; font-weight: bold; transition: all .2s ease-in-out; }
.contact_form_footer { display: flex; justify-content: space-between; }
.contact-form .cf-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.contact-form .cf-buttons .denotes { color: var(--textColour); font-size: 13px; }
.contact-form .cf-buttons a.cf-reset { display: none; }

/*Duplicate List*/
.contact-form .cf-list-header{display: flex; align-items: center; gap:10px;}
.contact-form .list-duplicate-button{height: 50px; width:50px; flex-shrink: 0; background:url(../images/plus.svg) center no-repeat; background-size:18px; }
.contact-form .cf-list-duplicate .cf-input{display: flex; align-items: center; gap:10px;}
.contact-form .list-duplicate-remove{height: 50px; width:50px; flex-shrink: 0; background:url(../images/minus.svg) center no-repeat; background-size:18px;}

/*Layout Block Module*/
.block-layout-module { display: flex; flex-direction: column; background: #FFFFFF; padding: 20px 0; }
.block-layout-module .layout-block { margin: 0; display: flex; }
.block-layout-module .layout-image { width: 50%; position: relative; z-index: 5; display: flex; align-items: center; justify-content: flex-end; }
.block-layout-module .layout-image img { max-width: 100%; width: auto; height: auto; }
.block-layout-module .layout-content { width: 50%; display: flex; position: relative; }
.block-layout-module .layout-inner { width: 800px; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; 
    position: relative; gap: 25px; z-index: 10; justify-content: center; text-align: center;}
.block-layout-module .layout-heading { display: flex; flex-direction: column; gap: 10px; }
.block-layout-module .layout-heading span { font-size: 37px; line-height: 42px; position: relative; display: flex; font-weight: bold; color: var(--textColour); align-items: flex-start; margin: 0; font-family:var(--secondaryFont); flex-direction:column; align-items: center; gap:20px; text-align: center;}
.block-layout-module .layout-heading span::after{content: ""; height: 2px; width: 48px; background: var(--mainColour);}
.block-layout-module .layout-text * {margin: 0;}

/*Layout Button*/
.block-layout-module .layout-block { display: flex; align-items: center; flex: wrap; gap: 20px; }
.block-layout-module .layout-buttons { display: flex; align-items: center; gap: 10px; }

/*Layout Position*/
.block-layout-module .layout-pos-left { flex-direction: row-reverse; }
.block-layout-module .layout-pos-left .layout-image { justify-content: flex-start; }
.block-layout-module .layout-pos-left .layout-content { justify-content: flex-end; }
.block-layout-module .layout-pos-right .layout-content { justify-content: flex-start; }

/*Layout Logo*/
.layout-image-logo{height: 98px; width: 98px; background-size: contain; background-position: center; background-repeat: no-repeat;}

/*Logo Carousel*/
.logo-carousel{ padding: 40px 0;}
.logo-carousel > div{padding: 0 15px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
.logo-carousel .lm-headings{display: flex; flex-direction: column; gap:10px; text-align: center; align-items: center;}
.logo-carousel .lm-heading{ display:flex; gap: 10px; color: var(--textColour); font-size:32px; line-height:38px; font-weight:bold; font-family:var(--secondaryFont); }
.logo-carousel .lm-subheading{color: #000; font-size: 18px; text-align: center; line-height: 24px;}
.logo-slider-wrap{width: 100%; position: relative;}
.logo-carousel .logo-box{background: #fff; display: flex; align-items: center; justify-content: center; height: auto;}
.logo-carousel .logo-box a{height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}

.logo-carousel .lm-gal-nav{position: absolute; top: calc(50% - 30px); height: 60px; width: 40px; background: transparent;}
.logo-carousel .lm-gal-nav::before{content: ""; height: 14px; width:14px; border:solid #000; border-width:3px 3px 0 0; transform: rotate(45deg);
    position: absolute; right: 16px; top: calc(50% - 7px);}
.logo-carousel .lm-gal-prev{ left:-50px; transform:rotate(180deg); }
.logo-carousel .lm-gal-next{ right:-50px; }

/*System edit controls*/
.AB-editContentContainer { display: flex; align-items: flex-end; }
.AB-editing .__contentbox { z-index: 3000; }

/*Animation*/
@keyframes shadow-pulse {
    0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, .6); }
    100% { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); }
}

.sr-alert { position: fixed; left: 100%; }

/* ----------------------- */
/* ----- SEARCH PAGE ----- */
/* ----------------------- */

.search-page.category-page .cat-hidden { display: none !important; }
.search-page.product-page .prod-hidden { display: none !important; }
.search-page { display: flex; flex-direction: column; gap: 20px; padding: 20px 0; }

/* search header */
.search-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; background: #F9F9F9;}
.search-title { display: flex; flex-direction: column; justify-content: center; }
.search-title h1 { font-size: 24px; line-height: 30px; font-weight: bold; padding: 0; }
.search-results-found { font-size: 16px; color: var(--headingColour); }
.search-order { display: flex; align-items: center; gap: 10px; }
.search-order span { color: #000; font-weight: bold; width: 100px; text-align: right; }
.sort-search { width: 270px; }

/* Search Results */
.search-results-wrap { display: flex; align-items: flex-start; gap: 20px; }
.search-filters { width: 280px; flex: 0 0 auto;  }
.search-filters-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; gap: 10px; background:#FAFAFA;
    border:solid var(--border); border-width:0 1px 1px 1px; }
.filter { border-bottom: 1px solid var(--border); }
.filter-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 50px; font-size: 18px; font-weight: 600; cursor: pointer; }
.filter-header:after { content: ''; transition: 0.3s all ease-in-out; width: 20px; height: 20px; background: url(../images/chevron-down-black.svg) no-repeat center; }
.filter.active .filter-header:after { transform: rotate(180deg); }
.filter-list { display: none; }
.filter.active .filter-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; }
.filter-list a { color: #000; text-decoration: none; padding: 0 5px; display: flex; align-items: center; height: 25px; font-size: 15px; gap: 5px; 
    text-transform: uppercase; }
.filter-list a.active { border-radius: 3px; border: 1px solid var(--border); background: #fff; }
.filter-list a.active:after { content: ''; width: 20px; height: 20px; background: url(../images/tick-black.svg) no-repeat center; }
.apply-filters { width: 100%;}
.clear-filters { text-align: center; text-decoration: underline; line-height: 30px; color: #000; }
.search-results-container{flex: 1; max-width: 100%; width: 0;}
.search-results { width: 100%;}
.product-list, .category-list { display: flex; flex-wrap: wrap; gap: 20px; padding: 0px 0 20px; flex: 1; width: 100%; }
.active-filters { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0px 0 20px; }
.active-filters:empty { display: none; }
.active-filters a { color: var(--mainColour); text-decoration: none; padding: 0 10px; display: flex; align-items: center; height: 44px; font-size: 15px; gap: 5px; text-transform: uppercase; border: 1px solid var(--border); }
.active-filters a:before { content: ''; width: 20px; height: 20px; background: url(../images/cancel-purple.svg) no-repeat center; background-size:18px; }
.search-filters.cat-hidden+.product-list { width: 100%; }

.filters{background: #FAFAFA; border: 1px solid var(--border); border-bottom: 0;}
.filters-price{width: 100%; border: 1px solid var(--border); background: #FAFAFA; padding: 10px 20px; margin-bottom: 20px; display: flex; 
    flex-direction: column; gap:15px;}
.filters-price > span{font-weight: bold; font-family: var(--secondaryFont); font-size: 18px;}
.filters-price input{text-align: center; border: none; background: none; font-size:13px; }
.filters-price .slider-range{background: #B4B3B5; border-radius: 4px; height: 8px; border: 0;}
.filters-price .slider-range .ui-slider-range{border: 0; background: var(--tertiaryColour)}
.filters-price .slider-range > span{height: 18px; width: 18px; background: var(--mainColour); border-radius: 100%; border: 1px solid #fff; 
    box-shadow: 0px 0px 6px #00000029; top:-6px; touch-action: auto; pointer-events: auto; z-index: 1;}

/* -- Product Block -- */
.product-block { width: calc((100% - 60px) / 4); background: #fff; border: 1px solid var(--border); height: auto; font-family: var(--secondaryFont)}
.search-filters+.search-results-container .product-block { width: calc((100% - 40px) / 3); }
.product-block .product-image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--productAspect); position: relative; overflow: hidden; }
.product-block .product-image .product-sticker { font-weight: 600; position: absolute; top: 0; left: 0; }
.product-block .product-image .product-no-stock { background: rgba(155, 127, 162, .9); color: #fff; font-size: 16px; font-weight: bold; 
    position: absolute; bottom: 0; left: 0; right: 0; line-height: 40px; text-align: center; text-transform: uppercase;}
.product-block.no-stock .product-buttons a{}
.product-block .product-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; text-decoration: none; }
.product-block .product-image img { width: auto; height: 100% !important; max-width: none !important; }
.product-block .product-image a.add-to-favourites { position: absolute; top: 0; right: 0; width: 36px; height: 36px; 
    background: url(../images/heart-white.svg) no-repeat center #fff; background-size: 24px; font-size: 0; border: 1px solid #D7C7DB; transition:ease-in-out all .3s; }
.product-block .product-image a.add-to-favourites.is-favourite { background-image: url(../images/heart-fill.svg); }
.product-block .product-info { padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.product-block .product-title { display: flex; align-items: flex-start; justify-content: center; height: 70px; font-size: 16px; line-height: 24px; 
    text-align: center; overflow: hidden; }
.product-block .product-title a { color: #231F20; text-decoration: none; }
.product-block .product-price { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; font-weight: bold; 
    color: #000;}
.product-block .product-price .main-price { font-size: 18px; line-height: 22px; order: 1;}
.product-block .product-price .was-price { font-size: 12px; color: #6F6F6F; font-weight: 400; line-height: 12px; }
.product-block .product-price .was-price span { text-decoration: line-through;}
.product-block .product-price .was-price:not(.hidden)+.main-price { color: var(--tertiaryColour); order: 1;}
.product-block .product-price .was-price:not(.hidden)+.main-price:before { content: 'NOW '; }
.product-block .product-buttons { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.product-block .product-buttons a { width: 100%; padding: 0 10px; border:0; }

/* -- Category Block -- */
.category-block { width: calc((100% - 60px) / 4); cursor: pointer; box-sizing: border-box; background: #fff; color: #fff; font-family: var(--secondaryFont);}
.category-block .cat-image { width: 100%; aspect-ratio: var(--categoryAspect); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.category-block .cat-image img { height: 100%; width: auto !important; }
.category-block .cat-title { display: flex; align-items: center; justify-content: center; height: 70px; padding: 0 10px; text-transform: uppercase;
    transition: 0.2s ease-in all; font-size: 16px; background: var(--secondaryColour); color: var(--mainColour); text-align: center; 
    text-decoration: none; font-weight:bold; }

.category-block:hover .cat-title{color: #fff; background: var(--mainColour);}

/* -- PAGER -- */
.search-pager { display: flex; align-items: center; width: 100%; height: 60px; justify-content: center; gap: 10px; position: relative; margin-top: 20px;
    background: var(--footerColour); }
.pager-link { display: flex; align-items: center; justify-content: center; width: 20px; height: 40px; }
.pager-link a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; color: #000; text-decoration: none; }
.pager-link.hidden { display: none !important; }
.pager-current-page a { text-decoration: underline; font-weight: bold; }
.pager-prev-button, .pager-next-button { background: var(--mainColour); color: #fff; height: 100%; width: 170px; }
.pager-prev-button{margin-right: auto;}
.pager-next-button {margin-left: auto; }
.pager-next-button a, .pager-prev-button a { color: #fff; text-transform: uppercase; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-decoration: none; gap: 5px; }
.pager-next-button.disabled a, .pager-prev-button.disabled a { background: #B1B4B2; }
.pager-next-button a:after, .pager-prev-button a:before { content: ''; width: 12px; height: 12px; background: url(../images/chevron-right-white.svg) no-repeat center; background-size: contain; }
.pager-prev-button a:before { transform: rotate(180deg); }

.pager-prev-button.disabled, .pager-next-button.disabled{pointer-events: none;}

/* ------------------- */
/* ----- MODULES ----- */
/* ------------------- */

/* -- Product Module -- */
.product-module { padding: 20px 0;}
.product-module.bg-on { background: #fafafa; padding:40px 0; }
.product-module.full-width-fix { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.product-module .pm-container {display: flex; flex-direction: column; gap:40px; box-sizing: border-box; }
.product-module:not(.full-width-fix) .pm-container { width: 100%; }

.product-module .product-list{padding: 0;}

/* titles */
.pm-title-wrap{display: flex; flex-direction: column; gap:10px; align-items: center; justify-content: center; text-align: center;}
.pm-title {display: flex; justify-content: center; align-items: center; }
.pm-title span { font-size: 32px; line-height: 40px; color: var(--headingColour); font-weight: bold; text-align: center; font-family: var(--secondaryFont)}
.pm-subtitle { display: flex; align-items: center; justify-content: center; }
.pm-subtitle span { font-size: 18px; line-height: 26px; color: var(--headingColour); text-align: center; }

/* gallery */
.pm-gal-wrap { position: relative; display: flex; flex-direction: column; gap:25px;}
.pm-gal{width: 100%;}
.pm-slide { display: flex; justify-content: center; width: 25%; }

/* List View */
.product-module.list :is(.pm-gal-nav, .pm-gal-pagination, .pm-gal-scrollbar){display: none !important;}

/* Carousel View */
.product-module.carousel .product-list{gap:0; flex-wrap: nowrap;}

/* navigation */
.pm-gal-wrap .pm-gal-nav { display: flex; justify-content: center; align-items: center; width: 40px; height: 60px; position: absolute; 
    top: calc(50% - 30px); cursor: pointer; background: #fff; transition: ease-in-out .3s all;}
.pm-gal-wrap .pm-nav-disabled { opacity: 0.3; cursor: default; }
.pm-gal-wrap .pm-gal-nav::after { content: ""; display: block; width: 15px; height: 15px; border: solid #000; transform: rotate(45deg); }
.pm-gal-wrap .pm-gal-prev { left: -60px; }
.pm-gal-wrap .pm-gal-prev::after { border-width: 0 0 3px 3px; margin-left: 5px; }
.pm-gal-wrap .pm-gal-next { right: -60px; }
.pm-gal-wrap .pm-gal-next::after { border-width: 3px 3px 0 0; margin-right: 5px; }
.pm-gal-wrap .swiper-button-lock{display: none;}

/* pagination */
.pm-gal-pagination{display: flex; align-items: center; justify-content: center; gap:15px; height: 30px;}
.pm-gal-pagination span{background: #fff; border: 1px solid #000; transition: ease-in-out all .3s; opacity: 1; 
    height: 20px; width: 20px; transform: none; flex-shrink: 0; margin: 0 !important;}
.pm-gal-pagination span.active{background: #000; border-color: #fff;}

/* Scrollbar */
.pm-gal-scrollbar{height: 10px; background: #fff; margin-top: 10px; touch-action: pan-y; border: 1px solid var(--border); border-radius: 10px;}
.pm-gal-scrollbar .swiper-scrollbar-drag{background: 2E2E2E;}

/* -- Category Module -- */
.category-module { padding: 20px 0;}
.category-module.bg-on { background: #fafafa; padding:40px 0; }
.category-module.full-width-fix { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.category-module .cm-container {display: flex; flex-direction: column; gap:40px; box-sizing: border-box; }
.category-module:not(.full-width-fix) .cm-container { width: 100%; }

.category-module .category-list{padding: 0;}

/* titles */
.cm-title-wrap{display: flex; flex-direction: column; gap:10px; align-items: center; justify-content: center; text-align: center;}
.cm-title {display: flex; justify-content: center; align-items: center; }
.cm-title span { font-size: 32px; line-height: 40px; color: var(--headingColour); font-family: var(--secondaryFont); font-weight: bold; text-align: center; }
.cm-subtitle { display: flex; align-items: center; justify-content: center; }
.cm-subtitle span { font-size: 18px; line-height: 26px; color: var(--headingColour); text-align: center; }

/* gallery */
.cm-gal-wrap { position: relative; display: flex; flex-direction: column; gap:25px;}
.cm-gal{width: 100%;}
.cm-slide { display: flex; justify-content: center; width: 25%; }

/* List View */
.category-module.list :is(.cm-gal-nav, .cm-gal-pagination, .cm-gal-scrollbar){display: none !important;}

/* Carousel View */
.category-module.carousel .category-list{gap:0; flex-wrap: nowrap;}

.cm-gal-wrap.carousel .cm-gal-inner { flex-wrap: nowrap; gap: 20px 0; }

/* navigation */
.cm-gal-wrap .cm-gal-nav { display: flex; justify-content: center; align-items: center; width: 40px; height: 60px; position: absolute; 
    top: calc(50% - 30px); cursor: pointer; background: #fff; }
.cm-gal-wrap .cm-nav-disabled { opacity: 0.3; cursor: default; }
.cm-gal-wrap .cm-gal-nav::after { content: ""; display: block; width: 15px; height: 15px; border: solid #000; transform: rotate(45deg); }
.cm-gal-wrap .cm-gal-prev { left: -60px; }
.cm-gal-wrap .cm-gal-prev::after { border-width: 0 0 3px 3px; margin-left: 5px; }
.cm-gal-wrap .cm-gal-next { right: -60px; }
.cm-gal-wrap .cm-gal-next::after { border-width: 3px 3px 0 0; margin-right: 5px; }
.cm-gal-wrap .swiper-button-lock{display: none;}

/* pagination */
.cm-gal-pagination{display: flex; align-items: center; justify-content: center; gap:15px; height: 30px;}
.cm-gal-pagination span{background: #fff; border: 1px solid #000; transition: ease-in-out all .3s; opacity: 1; 
    height: 20px; width: 20px; transform: none; flex-shrink: 0; margin: 0 !important;}
.cm-gal-pagination span.active{background: #000;}

/* Scrollbar */
.cm-gal-scrollbar{height: 10px; background: #fff; margin-top: 10px; touch-action: pan-y; border: 1px solid var(--border); border-radius: 10px;}
.cm-gal-scrollbar .swiper-scrollbar-drag{background: 2E2E2E;}

/*Product Tabs Module*/
.product-tab-module{padding: 30px 0; position: relative;}
.product-tab-module.bg-on::after{content: ""; height: 100%; width: 100%; clip-path: polygon(100% 0, 0% 100%, 100% 100%);
 background: #FAFAFA; position: absolute; top: 0; right: 0;}
.product-tab-module .pm-gal-wrap{display: none;}
.product-tab-module .pm-gal-wrap.active{display: flex;}
.pm-tab-header {margin: 20px 0 30px 0;}
.pm-tab-header .pm-tab-btn{transition: ease-in-out all .3s; display: flex; align-items: center; 
    justify-content: center; text-align: center; font-family: var(--secondaryFont); color: var(--mainColour);
    text-transform: uppercase; font-weight: bold; font-size: 22px; border-bottom: 4px solid #FAFAFA; 
    height: 60px; line-height: 1;}
.pm-tab-btn.active{background: var(--mainColour); color: #fff; border-color: #A980CE;}

/* ------------------------ */
/* ----- DETAILS PAGE ----- */
/* ------------------------ */

.details-page { padding: 0; display: flex; flex-direction: column; }
.details-header { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 0 0 0; gap: 10px; }
.details-header>a { color: var(--textColour); text-decoration: underline !important; text-transform: uppercase; }
.details-header:empty{display: none;}
.details-page-container { display: flex; align-items: flex-start; gap: 20px; margin-top:20px; }
.details-page-left { width: 50%; padding-right: 10px; box-sizing: border-box; }

/* product thumbnails */
.small-images-gal-wrap { margin: 10px 0; }
.small-image { height: 80px; aspect-ratio: var(--productAspect); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; 
    border: 1px solid transparent; transition: ease-in-out all .3s;}
.small-image img { max-height: 100%; height: 100%; width: auto; max-width: none !important; }

.small-image.swiper-slide-thumb-active{border-color: var(--secondaryColour);}

/* Product Images with carousel */
.product-image-gal-wrap { position: relative; min-height: 200px; }
.product-image-gal-wrap .product-sticker { position: absolute; top: 0; left: 0; z-index: 100; }
.product-image-gal .product-image a { width: 100%; aspect-ratio: var(--productAspect); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-image-gal .product-image a img { width: auto; height: 100% !important; max-width: none !important; }

/* product image gallery nav */
.pi-gal-nav { display: flex; align-items: center; background: #fff; justify-content: center; width: 40px; height: 60px; position: absolute; top: calc(50% - 30px); cursor: pointer; z-index: 100; }
.pi-gal-nav-disabled { display: none; }
.pi-gal-nav::after { content: ""; display: block; width: 13px; height: 22px; background: url(../images/chevron-right-black.svg) no-repeat center; }
.pi-gal-prev { left: 0px; }
.pi-gal-prev::after { transform: rotate(180deg); }
.pi-gal-next { right: 0px; }
.pi-gal-nav.swiper-button-lock{display: none;}


.details-page-right { width: 50%; padding-left: 10px; box-sizing: border-box; }

/* product details */
.product-details-wrap{display: flex; flex-direction: column; gap:15px; align-items: flex-start;}
.product-details-wrap .product-title { font-weight: bold; padding: 0; font-size: 32px; font-weight:600; line-height:38px; }
.product-sale-title { font-size: 17px; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; font-weight: 600; background: var(--tertiaryColour); line-height: 44px; }
.product-details-wrap .product-price { gap: 20px; }
.product-price .product-price { font-size: 28px; font-weight: bold; line-height: 34x; color: var(--mainColour); font-family: var(--secondaryFont); }
.product-price .product-rrp-price { font-size: 16px; line-height: 26px; color: var(--mainColour); text-decoration: line-through; }
.product-price .product-rrp-price:not(.hidden)+.product-price { color: var(--tertiaryColour); font-weight: bold; }
.product-price .product-rrp-price:not(.hidden)+.product-price:before { content: "NOW "; }
.product-label-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding: 10px 0; }
.product-label { display: flex; align-items: center; justify-content: center; height: 35px; background: var(--background); padding: 0 25px; font-size: 13px; color: #000; gap: 5px; }
.product-short-description { padding: 10px 0; font-size: 14px; line-height: 24px; }
.product-short-description:empty { display: none; }

/* variations */
.product-selector { display: flex; flex-direction: column; gap: 20px; width:100%; }
.product-selector>div:not(.hidden) { display: flex; flex-direction: column; gap: 5px; }
.product-selector>div:not(.hidden)>div { display: flex; gap: 10px; align-items: center; }
.product-selector>div:not(.hidden)>div>a:not(.hidden) { display: flex; padding: 0 10px; align-items: center; justify-content: center; background: var(--mainColour); 
    color: #fff; opacity: .5; height: 40px; font-size: 14px; border-radius: 5px; transition: 0.2s ease-in-out all; }
.product-selector>div:not(.hidden)>div>a.active { opacity: 1; }

.product-selector label{font-weight: bold;}
.product-selector label::after{content: ":";}

/* quantity */
.quantity-wrap { width: 130px; }
.quantity-wrap .quantity-label { font-size: 17px; color: #000; padding: 5px 0; font-weight:bold; }
.quantity-wrap .quantity { display: flex; align-items: center; height: 50px; width: 100%; box-sizing: border-box; background: #fff; }
.quantity-wrap .quantity a { display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; font-size: 21px; color: #000; font-weight: bold; border: 1px solid var(--border); background: #F8F8F8; }
.quantity-wrap .quantity input { flex: 1; height: 100%; background: none; border: solid var(--border); border-width: 1px 0; box-sizing: border-box; font-size: 16px; color: #000; text-align: center; }

/* add to cart */
.add-to-cart-row:not(.hidden) { display: flex; align-items: flex-end; gap: 20px; width:100%; }
.add-to-cart, .out-of-stock-wrap { flex: 1; text-transform: capitalize; gap: 10px; padding: 0 10px; height:50px; }
.add-to-cart{display: flex; align-items: center; gap:10px; text-transform: uppercase;}
.add-to-cart::before{content: ""; height: 24px; width: 19px; background: url(../images/bag-white.svg) center no-repeat; 
    background-size: contain; transition: ease-in-out all .3s;}
.add-to-cart:hover::before{background-image: url(../images/bag.svg);}

/* Added to cart */
.added-to-cart { max-width: 600px; width:100%;}
.added-to-cart-title { display: flex; align-items: center; justify-content: flex-start; font-size: 26px; line-height: 28px; color: #000; font-weight: 600; }
.added-to-cart-product { display: flex; align-items: center; gap: 20px; margin: 20px 0; }
.added-to-cart-image { width: 100px; aspect-ratio: var(--productAspect); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.added-to-cart-image img { width: auto; height: 100% !important; max-width: none !important; }
.added-to-cart-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; font-size: 16px; }
.added-to-cart-info>div { display: flex; align-items: center; gap: 10px; }
.added-to-cart-info>div>span { width: 100px; flex: 0 0 auto; }
.out-of-stock-wrap:not(.hidden) {background: var(--secondaryColour); color: var(--mainColour); font-weight: bold; font-size: 16px; text-transform: uppercase; width: 100%; line-height: 50px;}

/* Delivery */
.product-meta { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 20px; }
.product-meta a { font-size: 14px; color: var(--textColour); display: flex; align-items: center; gap: 7px; text-decoration: underline; }
.product-meta a:before { content: ''; width: 25px; height: 15px; background: url(../images/delivery.svg) no-repeat center; background-size: contain; }
.product-meta a.add-to-favourites:before { background-image: url(../images/heart-white.svg); }
.product-meta a.add-to-favourites.is-favourite:before { background-image: url(../images/heart-fill.svg); }
.product-meta a.add-to-favourites:after { content: 'Add to favourites'; }
.product-meta a.add-to-favourites.is-favourite:after { content: 'Remove from favourites'; }

/* Description */
.product-description-wrap { }
.product-description-container{ background: #FCFCFC; border: 1px solid #E6E6E6; border-radius: 5px; padding: 20px; margin: 20px 0;}
.product-description-tabs { display: flex; align-items: center; gap: 35px; flex-wrap: wrap;}
.product-description-tabs a, .associations-wrap h2 { font-size: 24px; color: var(--mainColour); font-weight: 600; display: flex; flex-direction: column; }
.product-description-tabs a:not(.active) { opacity: 0.8; }
.associations-wrap h2:after { content: ''; width: 30px; height: 4px; background: var(--mainColour); margin: 10px 0; }
.product-description-tabs a:after{content: ''; width: 100%; height: 2px; background: #B3A4B5; margin: 5px 0 10px 0;}
.product-description-tabs a:not(.active):after { background: none; }
.product-description-tab-content>div:not(.active) { display: none; }

/*-- Associations --*/
.associations-wrap { padding: 40px 0;  background: var(--background); }
.associations-container { padding: 0px 10px; }
.associations-gal-wrap { position: relative; }
.associations-gal { width: 100%; padding: 20px 0; }
.ag-gal-nav { display: flex; align-items: center; background: #fff; justify-content: center; width: 40px; height: 60px; position: absolute; top: calc(50% - 30px); cursor: pointer; transition: ease-in-out all .3s;}
.ag-gal-nav-disabled { opacity:.6; }
.ag-gal-nav::after { content: ""; display: block; width: 13px; height: 22px; background: url(../images/chevron-right-black.svg) no-repeat center; }
.ag-gal-prev { left: -50px; }
.ag-gal-prev::after { transform: rotate(180deg); }
.ag-gal-next { right: -50px; }

.ag-gal-nav.swiper-button-lock{display: none;}

/* ---------------------- */
/* ------ CHECKOUT ------ */
/* ---------------------- */

/*----- LARGE CART -----*/
body[data-page=checkout] .top-wrap, body[data-page=checkout] .header-wrap, body[data-page=checkout] .menu-wrap, body[data-page=checkout] .footer-wrap, body[data-page=checkout] .byline-wrap { display: none; }
.shopping-checkout { flex-direction: column; }
.cart-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 0; }
.cart-title span { font-size: 18px; color: #393A3D; font-weight: bold; text-transform: capitalize; }
.cart-title::before { content: ""; display: block; width: 24px; height: 24px; background: url(../images/cart.svg) no-repeat center; background-size: contain; }
.cart-product { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #D8E1EB; box-sizing: border-box; margin: 10px 0; padding: 10px; gap: 4px; }
.cart-product-left { display: flex; align-items: center; justify-content: flex-start; height: 100%; }
.cart-product-image { box-sizing: border-box; width: 60px; }
.cart-product-image img { max-width: 50px; max-height: 50px; width: auto; height: auto; }
.cart-product-details { box-sizing: border-box; height: 100%; }
.cart-product-title span { font-size: 12px; line-height: 18px; color: #393A3D; font-weight: bold; }
.cart-product-variations span { font-size: 10px; line-height: 16px; color: #393A3D; }
.cart-product-sku span { font-size: 10px; line-height: 14px; color: #393A3D; }
.cart-discount { font-size: 10px; line-height: 14px; color: #dc3545; font-weight: bold; }
.cart-product-right { display: flex; align-items: center; justify-content: space-between; }
.cart-product-quantity-wrap { box-sizing: border-box; }
.cart-product-quantity { display: flex; align-items: center; justify-content: center; width: 90px; height: 35px; background: var(--background); }
.cart-product-quantity a { display: flex; align-items: center; justify-content: center; width: 30%; height: 60%; font-size: 20px; font-weight: bold; color: var(--mainColour); }
.cart-product-quantity input { width: 40%; height: 100%; text-align: center; background: none; border: 0; }
.cart-product-update { padding-top: 5px; }
.cart-product-update a { display: flex; align-items: center; justify-content: center; gap: 5px; }
.cart-product-update a { font-size: 12px; color: #575757; text-decoration: underline; }
.cart-product-price { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 100%; width: 110px; }
.cart-product-price span { font-size: 14px; color: #393A3D; font-weight: bold; }
.cart-product-remove { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--background); }
.cart-product-remove a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: url(../images/icon-delete.svg) no-repeat center; background-size: 15px; }
.cart-lines { padding: 20px 0; }
.cart-line { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #E3E3E3; }
.cart-line.total { border: 0; margin-bottom: 40px; }
.cart-line>div { font-size: 18px; color: #3B3B3D; text-transform: capitalize; }
.cart-line.discount-line { margin-bottom: 40px; }
.cart-line.discount-line>div { color: #4476BA; font-size: 12px; }
.cart-line.total>div { font-weight: bold; }
.cart-line.vat-line>div { font-size: 12px; }
.remove-voucher {display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; background: url(../images/cancel-purple.svg) no-repeat center; background-size: contain;}
.cart-custom {
    display: block;
    margin-left: auto;
    width: 15px;
    height: 15px;
    background: url(../images/info-circle.svg) no-repeat center;
}

/*----- CHECKOUT -----*/
.site-body[data-page=checkout] .site-header, .site-body[data-page=checkout] .site-footer { display: none; }
.checkout-page { display: flex; min-height: 1000px; }
.checkout-left { padding: 40px 20px 200px 20px; padding-left: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box; background: #fff; }
.checkout-right { padding: 130px 20px 200px 20px; padding-right: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box; background: #F8F7F6; }
.back-to-shopping-wrap { padding: 10px 0 20px; }
.back-to-shopping-wrap a { font-size: 12px; color: #575757; text-decoration: underline; }
.checkout-logo { padding: 20px 0; }
.checkout-logo img { max-width: 225px; }
.checkout-button { display: flex; align-items: center; justify-content: center; gap: 5px; height: 35px; width: 265px; background: #fff; border: 1px solid #74AF43; border-radius: 3px; }
.checkout-button span { font-size: 12px; color: #393A3D; }
.checkout-button.tick::before { content: ""; display: block; width: 15px; height: 15px; background: url(../images/tick-green.svg) no-repeat center; background-size: contain; }
.checkout-logger { padding: 10px 0; }
.checkout-logger-title { padding: 5px 0; }
.checkout-logger-title span { font-size: 16px; line-height: 20px; color: #393A3D; font-weight: bold; }
.checkout-logger-title span a { color: #4476BA; text-decoration: underline; font-weight: normal; }

/* logger popup */
.login-popup { }
.login-popup-title { padding: 10px 0; }
.login-popup-title span { font-size: 18px; color: #3B3B3D; font-weight: 600; }
.login-popup .login-form { }
.login-popup .login-form-field { padding: 10px 0; }
.login-popup .login-form-label { font-size: 14px; color: #3B3B3D; font-weight: 600; padding: 5px 0; }
.login-popup .login-form-input { width: 60%; }
.login-popup .login-form-input input { width: 100%; height: 35px; border: 1px solid #D8E1EB; padding: 0 10px; box-sizing: border-box; }
.checkout-section-title { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; }
.checkout-section-title span, .checkout-section-title h1 { font-size: 32px; line-height: 48px; color: var(--mainColour); font-weight: bold; }
.checkout-card { background: #FFFCFC; border: 1px solid #EEEAEA; width: 100%; margin: 10px 0; padding: 20px; box-sizing: border-box; }
.checkout-card-header { }
.checkout-card-title { display: flex; align-items: center; gap: 10px; height: 60px; }
.checkout-card-title>span { font-size: 18px; line-height: 28px; color: var(--mainColour); font-weight: bold; display: flex; align-items: center; width: 100%; }
.checkout-card-title>span>span { margin-left: auto; display: flex; align-items: center; font-weight: normal; }
.checkout-card-inner { padding: 10px 0; box-sizing: border-box; }
.checkout-card-inner-title { font-size: 14px; line-height: 24px; }
.checkout-card-subtitle span { font-size: 16px; color: #3B3B3D; }
.checkout-card-field { padding: 10px 0; }
.checkout-card-input { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.checkout-card-input span { font-size: 16px; line-height: 18px; color: #3B3B3D; }
.checkout-card-input input[type=checkbox] { width: 18px; height: 18px; margin: 0; padding: 0; border-color: #000; border-radius: 2px; accent-color: #4476BA; }
.checkout-card-input.checkbox span { font-size: 14px; color: #393A3D; }
.delivery-select-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.delivery-selector { width: 60%; }
.delivery-price { }
.delivery-price span { font-size: 16px; font-weight: bold; color: #000; }
.free-delivery-wrap { padding: 10px 0; }
.checkout-card.expandable .checkout-card-header { position: relative; cursor: pointer; }
.checkout-card.expandable:not(.noarrow) .checkout-card-header::after { content: ""; display: block; width: 8px; height: 8px; border: solid #393A3D; border-width: 0 2px 2px 0; transform: scale(1, 1) rotate(45deg); position: absolute; right: 15px; top: calc(50% - 6px); transition: 0.2s ease-in-out all; }
.checkout-card.expandable .checkout-card-header.active::after { transform: scale(-1, -1) rotate(45deg); }
.checkout-card.expandable .checkout-card-content { display: none; }
.checkout-card[data-card=promo] .checkout-card-content { padding-top: 10px; position: relative; }
.checkout-card[data-card=promo] .checkout-card-subtitle span { font-size: 12px; }
.checkout-card[data-card=details] .checkout-card-title span { font-size: 24px; }
.checkout-card[data-card=details] .checkout-card-subtitle { padding: 10px 0; }
.checkout-card[data-card=details] .checkout-card-subtitle span { font-size: 16px; color: #393A3D; font-weight: bold; }
.checkout-form { padding: 10px 0; }
.checkout-form-title { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; }
.checkout-form-title span { font-size: 14px; color: #393A3D; font-weight: bold; }
.checkout-form-field { padding: 10px 0; position: relative; }
.checkout-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; }
.checkout-form-input { margin: 5px 0; }
.checkout-form[data-form=billing] { display: none; }
.checkout-card[data-card=tnc] { padding: 0 20px; }
.checkout-card[data-card=tnc] .checkout-card-input span a { color: #4476BA; text-decoration: underline; }
.checkout-card[data-card=paymethods] { padding: 0px 20px 20px; }
.checkout-card[data-card=paymethods] .checkout-card-subtitle { padding: 10px 0; }
.checkout-card[data-card=paymethods] .checkout-card-subtitle span { font-size: 16px; color: #393A3D; font-weight: bold; }
.delivery-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.delivery-option { border: 1px solid #D8E1EB; padding: 10px; background: #fff; width: 100%; box-sizing: border-box; cursor: pointer; }
.deliveryopt-row { display: flex; align-items: center; gap: 10px; }
.deliveryopt-title { font-size: 15px; line-height: 24px; }
.deliveryopt-radio { display: flex; flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #000; border-radius: 50%; padding: 3px; cursor: pointer; }
.delivery-option.active .deliveryopt-radio::after { content: ""; width: 100%; height: 100%; display: block; background: #000; border-radius: inherit; }
.payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.payment-option { border: 1px solid #D8E1EB; padding: 10px; background: #fff; width: 100%; box-sizing: border-box; cursor: pointer; transition: all 0.3s ease-in-out; }
.payment-option.active { border-color: var(--secondaryColour); }
.payopt-row { display: flex; align-items: flex-start; gap: 10px; }
.payopt-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; flex: 1; }
.payopt-title { font-size: 15px; display: flex; align-items: center; height: 40px; }
.payopt-description { width: 100%; }
.payopt-radio { display: flex; flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #000; border-radius: 50%; padding: 3px; cursor: pointer; margin: 10px 0; }
.payment-option.active .payopt-radio::after { content: ""; width: 100%; height: 100%; display: block; background: #000; border-radius: inherit; }
.payopt-image { align-self: center; width: 100px; }
.payment-option img { width: 100%; max-height: auto; }
.save-order { width: 100%; text-transform: uppercase; height: 60px; border: 0;}

/*Payment Page*/
.payment-header { margin: 0 0 25px; box-sizing: border-box; display: flex; flex-direction: column; }
.payment-header>div { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-header h1 { color: #000000; font-weight: bold; font-size: 30px; margin: 0 0 15px; padding: 0; }
.payment-header>div>div { width: calc((100% - 20px) /3); font-size: 12px; color: #000; line-height: 24px; }
.payment-content { margin: 0 0 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; }
.payment-content h3 { color: #000; font-weight: bold; font-size: 18px; margin: 0 0 10px; padding: 0; position: relative; }
.payment-content .payment-order-summary { width: calc(33% - 10px); padding: 10px; box-sizing: border-box; background: #f9f9f9; display: flex; flex-direction: column; }
.payment-content .payment-delivery { width: calc(33% - 10px); padding: 10px; box-sizing: border-box; font-size: 12px; background: #f9f9f9; }
.payment-content .payment-delivery p { font-size: 12px; color: #000; padding: 0 0 15px; line-height: 20px; }
.payment-content .payment-order-summary span { font-weight: bold; font-size: 12px; line-height: 28px; }
.payment-content .payment-order-summary .payment-cart-products>div { border-bottom: 1px solid #F2EFEF; display: flex; align-items: center; justify-content: space-between; }
.payment-content .payment-order-summary .payment-cart-products>div>div { line-height: 20px; padding: 5px 0; font-size: 12px; color: #000; }
.payment-content .payment-cart-calculations { border-bottom: 1px solid #F2EFEF; padding: 5px 0; }
.payment-content .payment-cart-calculations>div { padding: 5px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #000; line-height: 20px; }
.payment-content .payment-total { display: flex; align-items: center; justify-content: space-between; border: 0; }
.payment-content .payment-total>div { padding: 5px 0; font-size: 12px; color: #000; line-height: 20px; font-weight: bold; }
.payment-pay { box-sizing: border-box; }
.payment-pay h1 { color: #000000; font-weight: bold; font-size: 30px; margin: 0; padding: 0; }
.payment-pay label { font-size: 16px; color: #000000; font-weight: normal; }
.payment-pay .payment-button-container { display: flex; justify-content: space-between; align-items: center; }
.payment-pay .payment-button-container p { line-height: 24px; color: #000000; font-size: 16px; padding: 0; }
.payment-pay .payment-button-container img { margin: 10px 0 0; }
.payment-pay .payment-button { cursor: pointer; line-height: 40px; padding: 0 20px; }
.payment-pay .payment-fields { margin-bottom: 25px; }
.payment-footer { display: flex; align-items: center; justify-content: center; padding: 20px 0; margin: 20px 0 30px; box-sizing: border-box; background: #f9f9f9; }
.payment-footer p { font-size: 16px; color: #000; line-height: 24px; text-align: center; padding: 0; }
.group-area, .icon-group-area { border: 1px solid #aaa; margin: 5px 0; padding: 2px; }

/* ------------------------ */
/* ------ MEMBERSHIP ------ */
/* ------------------------ */

/* ----- SIGNUP PAGE ----- */
.signup-page { padding: 50px 0 0; display: flex; align-items: flex-start; gap: 20px; }
.signup-header { background: #EDE9F0; height: 140px; color: var(--mainColour); font-size: 32px; font-weight: bold; font-family:var(--seondaryFont); }
.signup-header .container { height: 100%; display: flex; align-items: center; }
.signup-tab-headers { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; position:relative; z-index:1; }
.signup-tab-header { display: flex; align-items: center; justify-content: center; height: 55px; padding: 0 30px; background: #F3F1F1; border: solid var(--border); border-width: 1px 1px 0; position: relative; z-index: 0; text-align: center; cursor: pointer; font-weight: bold; color: #000; }
.signup-tab-header.active { background: #FDFCFC; color z-index: 2; }
.signup-tab-header.active:after { content: ''; width: 20px; height: 2px; background: var(--mainColour); bottom: 1px; left: calc(50% - 10px); position: absolute; }
.signup-tab-content { border: 1px solid var(--border); background: #FDFCFC; margin-top: -1px; position: relative; }
.signup-tab { display: none; padding: 20px; }
.signup-tab.active { display: block; position: relative; z-index: 1; }
.signup-tab-left { flex: 1; box-sizing: border-box; }
.signup-tab-right { width: 350px; flex: 0 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.signup-right-header { margin-top: 50px; font-size: 16px; font-weight: 600; line-height: 26px; }
.signup-right-bullets { display: flex; flex-direction: column; gap: 10px; }
.signup-right-bullets>div { display: flex; align-items: center; gap: 10px; font-size: 18px; height: 40px; }
.signup-right-bullets>div:before { content: ''; width: 15px; height: 15px; background: url(../images/tick.svg) no-repeat center; }
.signup-tab-text { color: #231F20; font-size: 14px; line-height: 22px; }
.signup-bottom { display: flex; flex-direction: column; gap: 20px; margin: 40px 0; font-size: 16px; }
.signup-bottom a { color: inherit; text-decoration: underline; }
.signup-page .signup-form, .signup-page .login-form { padding: 10px 0; }
.signup-form-field { padding: 10px 0; }
.signup-form-label { font-size: 16px; color: #1D1D1D; padding: 5px 0; }
.signup-form-input { width: 100%; }
.signup-page-button { margin: 10px 0; width: 100%; text-transform: uppercase; border:0; outline:0; }
.forgot-button { color: #255E99; }
.login-error { text-align: center; font-size: 16px; color: #990000; line-height: 40px; }
.login-form { margin-bottom: 20px; }

/* forgot password popup */
.forgot-password.login-form { flex-direction: column; align-items: center; }
.forgot-password.login-form span { display: block; font-size: 20px; color: #1C1B1B; margin: 0 0 10px; text-align: center; }

/* ----- DASHBOARD ----- */
.dashboard-header { background: var(--background); border: 1px solid var(--border); border-width: 0 0 1px 0; color: var(--mainColour); }
.dashboard-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 5px; padding: 0 10px; font-size: 16px; }
.dashboard-header span:nth-child(1) { font-size: 24px; font-weight: 600; }
.dashboard-header span:nth-child(2) { margin-left: auto; display: flex; align-items: center; font-weight: 600; gap: 5px; }
.dashboard-header span:nth-child(2):before { content: ''; width: 15px; height: 17px; background: url(../images/account.svg) no-repeat center; background-size: contain; }
.dashboard-header a { color: var(--mainColour); text-decoration: underline; }
.dash-tabs { display: flex; align-items: stretch; min-height: 700px; }
.dash-tab-titles { background: var(--background); width: 40%; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.dash-tab-titles a { height: 80px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; position: relative; background: #fff; color: #302F2F; transition: 0.2s all ease-in-out; }
.dash-tab-titles a span { width: 200px; display: flex; align-items: center; gap: 10px; color: #302F2F; text-transform: uppercase; font-weight: 600; transition: 0.2s all ease-in-out; }
.dash-tab-titles a span:before { content: ''; width: 20px; height: 20px; background: transparent no-repeat center; transition: 0.2s all ease-in-out; }
.dash-tab-titles a[data-tab='orders'] span:before { background-image: url(../images/dash-order.svg); }
.dash-tab-titles a[data-tab='orders'].active span:before { background-image: url(../images/dash-order-white.svg); }
.dash-tab-titles a[data-tab='details'] span:before { background-image: url(../images/dash-account.svg); }
.dash-tab-titles a[data-tab='details'].active span:before { background-image: url(../images/dash-account-white.svg); }
.dash-tab-titles a[data-tab='delivery-addresses'] span:before { background-image: url(../images/dash-address.svg); }
.dash-tab-titles a[data-tab='delivery-addresses'].active span:before { background-image: url(../images/dash-address-white.svg); }
.dash-tab-titles a[data-tab='password'] span:before { background-image: url(../images/dash-password.svg); }
.dash-tab-titles a[data-tab='password'].active span:before { background-image: url(../images/dash-password-white.svg); }
.dash-tab-titles a.active span { color: #fff; }
.dash-tab-titles a.active { background: var(--headingColour); }
.dash-tab-titles a:hover { text-decoration: underline; }
.dash-tab-content>div { display: none; }
.dash-tab-inner.active { display: block; padding: 20px 0 0 20px; }
.dash-order-row-wrap { border: 1px solid var(--border); border-bottom: 0; overflow: hidden; padding:10px 5px; }
.dash-order-row-wrap:first-of-type { border-radius: 5px 5px 0 0; }
.dash-order-row-wrap .dash-order-headings { background: var(--background); padding: 0 10px; height: 50px; color: #25242B; font-weight: 600; font-size: 16px; }
.dash-order-row-wrap:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 5px 5px; }
.dash-order-row { display: flex; align-items: center; justify-content: flex-start; height: 50px; }
.dash-order-row-wrap:nth-child(even) { background: var(--background); }
.dash-order-row>div { width: 20%; }
.dash-order-row>div.ref { flex: 1; width: auto; }
.dash-order-info { padding: 0 10px; font-size: 14px; }
.dash-order-info>div span { color: #25242B; }
.dash-order-row .view { width: 60px; }
.dash-order-info .view-invoice { display: flex; align-items: center; }
.dash-order-info .view-invoice:before { content: ''; width: 20px; height: 20px; background: url(../images/order-blue.svg) no-repeat center; }
.dash-forms-wrap { display: flex; }
.dash-form { width: 50%; padding: 10px; box-sizing: border-box; background: var(--background); border: 1px solid var(--border); margin-bottom: 20px; }
.dash-form-field { padding: 10px 0; }
.dash-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; }
.dash-form-input { width: 100%; }
.dash-form-button-row { padding: 10px 0; }

/* logged in addresses */
.member-addresses { width: 100%; display: flex; flex-wrap: wrap; gap: 15px; }
:is(.billing-address, .delivery-address) { display: flex; box-sizing: border-box; gap: 10px; flex-wrap: wrap; }
:is(.billing-address, .delivery-address) input { height: 20px; margin: 0 5px; }
:is(.billing-address, .delivery-address) div { font-size: 14px; line-height: 18px; color: #393A3D; }
:is(.billing-address, .delivery-address) div span { font-weight: bold; font-size: 16px; color: #1871B4; }
.address-button-row { display: flex; width: 100%; }
.pop-overlay { position: absolute; z-index: 10000; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); opacity: 0; display: flex; justify-content: center; }
.pop-overlay>div { background: #fff; position: absolute; background: #fff; padding: 20px; margin: 10px; max-width: 90%; max-height: 90%; width: fit-content; height: fit-content; flex: 0 0 auto; font-size: 16px; line-height: 26px; }
.pop-overlay>div>a { position: absolute; width: 30px; height: 30px; background: url(../images/close.svg) no-repeat center; z-index: 5; top: 5px; right: 5px; }
.pop-overlay.pop-image>div { max-width: 100vw; max-height: 100vh; }
.pop-overlay.pop-image>div img { max-width: 100%; max-height: 100%; }
.pop-buttons { display: flex; margin: 10px 0; align-items: center; justify-content: space-between; }

/* new address popup */
.add-address-popup h2 { color: #1871B4; font-family: 'Baloo 2'; }
.edit-address-box :is(input, select) { width: 100%; height: 35px; padding: 0 10px; box-sizing: border-box; background: #FBF9F5; border: 1px solid #ECEBEA; margin: 5px 0; color: #393A3D; }
.address-form { display: flex; flex-direction: column; gap: 10px; width: 600px; }
.address-form>div { display: flex; flex-direction: column; gap: 10px; }
.address-form>div:nth-child(2), .address-form>div:last-child { align-items: center; flex-direction: row; gap: 5px; }
.address-form>div>input { width: 100%; }
.address-form>div>input::placeholder { text-transform: capitalize; }
.address-form>div>textarea { height: 100px; width: 100%; }
.address-form button { border: 0; background: #5EB229; display: flex; align-items: center; justify-content: center; color: #fff; height: 40px; padding: 0 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
.address-form button:nth-child(1) { margin-right: auto; background: #65707D; }
.member-address { border: 1px solid var(--border); background: #fff; font-size: 14px; line-height: 18px; padding: 20px 5px 5px; width: calc((100% - 20px) / 2); height: 240px; display: flex; align-items: flex-start; position: relative; }
.dash-tab-inner .member-address { width: calc((100% - 40px) / 4); }
.member-address>div:first-child { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mainColour); padding: 3px; margin: 0 10px; }
.dash-tab-inner .member-address>div:first-child { display: none; }
.checkout-card .member-address.chosen>div:first-child:after { content: ''; display: block; width: 100%; height: 100%; background: var(--mainColour); border-radius: 50%; }
.checkout-card .member-address:not(.chosen) { cursor: pointer; }
.billing-check { display: flex; align-items: center; gap: 10px; }
.member-address .address-buttons { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.add-address { width: 100%; }
.edit-address:not(.add-address) { width: 30px; height: 30px; background-image: url(../images/icon-edit.svg); background-repeat: no-repeat; background-position: center; display: block; }
.delete-address { width: 30px; height: 30px; background-image: url(../images/icon-delete.svg); background-repeat: no-repeat; background-position: center; display: block; }
.use-address { width: 30px; height: 30px; background-image: url(../images/icon-use.svg); background-repeat: no-repeat; background-position: center; display: block; }
.checkout-card .member-address:not(.chosen) { cursor: pointer; }


@media (min-width:1200px) and (max-width:1400px) {
    .header-right{gap:30px;}
    .site-search{width: 500px;}
} 

@media (min-width:767px) {
    .footer-menu-wrap{display: block !important;}
    .footer-col-title{pointer-events: none !important;}
} 

/*---------LARGE DESKTOP < 1199px---------*/
@media (min-width:1200px) {
    .mobile:not(.desktop-large), .tablet:not(.desktop-large), .desktop:not(.desktop-large) { display: none !important; }
    .content_wrap { min-height: 600px; }
}

/*---------DESKTOP < 1199px---------*/
@media (min-width:992px) and (max-width:1199px) {
    .mobile:not(.desktop), .tablet:not(.desktop), .desktop-large:not(.desktop) { display: none !important; }
    .block-layout-module .layout-inner { width: 100%; }
    .block-layout-module .layout-image { align-items: flex-start; }
    .swipe { height: 575px; }

    /*Header*/
    .site-search{width: 400px;}

    /*Footer*/
    .footer-contact *{font-size: 14px;}
    .footer-menu>li>a{font-size: 14px;}

    /* ----- MODULES ----- */

    /*Product Tab*/
    .pm-tab-header .pm-tab-btn{height: 45px; padding: 0 15px; font-size: 18px;}

    /* ----- SEARCH PAGE ----- */

    .product-list { gap: 10px; }
    .product-list .product-block { width: calc((100% - 30px) / 4); }
    .product-block .product-price .main-price {font-size: 16px;}
    .product-block .product-price .was-price{font-size: 10px;}

    /* ----- DETAILS PAGE ---- */

    /* ----- CHECKOUT ---- */
    .checkout-left { padding-right: 10px; padding-left: calc((100vw - 950px) / 2); }
    .checkout-right { padding-left: 10px; padding-right: calc((100vw - 950px) / 2); }
    .cart-product-quantity { width: 100px; height: 35px; }
    .dash-tab-inner .member-address { width: calc((100% - 30px) / 3); }
}

/* -------------------------------------------------------------------------------------------------------- DESKTOP END  */

/* ------------------------------------------------- */
/* --------------TABLET & MOBILE ------------------- */
/* ------------------------------------------------- */

/*---------Tablet & Mobile---------*/
@media (max-width:991px) {

    /* -- Fullscreen Gallery -- */
    .flex-direction-nav{display: none;}

    /* ----- SITE HEADER ----- */
    .top-wrap>div{padding: 0;}
    .top-wrap>div, .header-wrap>div { max-width: 100%; padding: 0 10px;}

    .header-wrap{height: 90px;}
    .header-wrap .logo img{max-width: 140px;}
    .header-right > div{gap:25px;}

    .small-cart a.basket-toggle small{height: 9px; width: 9px; top: 2px; right: 0;}

    .toggle-search{height: 26px; width: 26px; background: url(../images/search.svg) center no-repeat; background-size: contain;}
    .site-search-wrap{display: none;}

     /* -- Menu Toggle -- */
    .menu-toggle{height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; z-index: 2000; position: relative;}
    .menu-toggle > div{display: flex; align-items: center; justify-content: space-between; flex-direction:column; height:18px; width:25px; transition: ease-in-out all .3s;}
    .menu-toggle > div::before{content: ""; height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
    .menu-toggle > div::after{content: ""; height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
    .menu-toggle > div > div{height: 2px; width: 25px; background: var(--headingColour); border-radius: 6px;}
    .menu-toggle.active > div{transform: rotate(90deg);}

    /* ----- MOBILE MENU ----- */
    .responsive-menu-wrap{opacity: 0; z-index: -1; visibility: hidden; background: #fff; width: 100%; position: absolute; top: 100%; right: 0;
        transition: ease-in-out all .3s; height: initial; padding: 0;}
    .responsive-menu-wrap > div{max-width: 100%; padding: 0;}
    .responsive-menu-wrap.open{opacity: 1; z-index: 1000; visibility: visible;}

    .responsive-menu-wrap .main-menu-wrap > ul{list-style: none; padding: 0; margin: 0;}
    .responsive-menu-wrap .main-menu-wrap li{list-style: none; padding: 0; display: flex; flex-direction: column; position: relative; }
    .responsive-menu-wrap .main-menu-wrap li a{color: var(--textColour); text-transform: uppercase; font-size: 14px; padding: 10px 15px; font-weight: 400; width: 100%;}
    .responsive-menu-wrap .main-menu-wrap > ul ul{padding: 0 0 10px 0; display: none;}
    .responsive-menu-wrap .main-menu-wrap > ul > li {border-bottom: 1px solid #F3F3F3;}
    .responsive-menu-wrap .main-menu-wrap > ul > li > a{font-weight: bold; padding: 20px 15px;}

    .responsive-menu-wrap .main-menu-wrap ul li ul li a{padding: 10px 25px;}
    .responsive-menu-wrap .main-menu-wrap li ul li ul li a{padding: 10px 35px;}

    .responsive-menu-wrap .main-menu-wrap .top-menu{gap:0; margin: 10px 0;}
    .responsive-menu-wrap .main-menu-wrap .top-menu > li{border: 0;}
    .responsive-menu-wrap .main-menu-wrap .top-menu > li > a{font-size: 14px; font-weight: 400; padding: 10px 15px;}
    .responsive-menu-wrap .main-menu-wrap .top-menu ul{display: none;}

    .responsive-menu-wrap .menu-header{height: 52px; display: flex; align-items: center; justify-content: space-between; 
        background: var(--secondaryColour); padding: 0 15px; position:relative; z-index:10; }
    .responsive-menu-wrap .menu-header-account{height: 25px; width: 25px; background: url(../images/account-menu.svg) center no-repeat; background-size: contain;}
    .responsive-menu-wrap .menu-header .currency-select{all:initial; display: flex; align-items: center; gap:15px;}
    .responsive-menu-wrap .menu-header .currency-select a{font-family: var(--secondaryFont); color:#A685AD; font-weight:500; font-size: 18px; line-height: 24px;}
    .responsive-menu-wrap .menu-header .currency-select a.active{color: #5F3369;}

    .responsive-menu-wrap .menu-footer{display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding:10px 15px 25px 15px; 
        height: 80px;}
    .responsive-menu-wrap .menu-footer a.menu-account{color: #000; text-transform: uppercase; font-weight: bold; font-size: 14px; display: flex; 
        align-items: center; gap:7px;}
    .responsive-menu-wrap .menu-footer a.menu-account::before{content: ""; height: 18px; width: 16px; background:url(../images/account.svg) center no-repeat; 
        background-size: contain;}
     .responsive-menu-wrap .menu-footer .close-menu{align-self: flex-end; color: #000; text-decoration: underline; font-size: 12px;}

    .responsive-menu-wrap .main-menu li.has-sub-items > a{padding-right: 50px;}
    .responsive-menu-wrap .main-menu li.has-sub-items > .toggle-sub{height: 60px; width: 50px; position: absolute; right: 0; top: 0;}
    .responsive-menu-wrap .main-menu li.has-sub-items > .toggle-sub::after{content: ""; height: 14px; width: 14px; border: solid var(--textColour); 
        border-width:  0 3px 3px 0; position: absolute; top: 20px; right: 13px; transform: rotate(45deg); transition: ease-in-out all .3s;}
    .responsive-menu-wrap .main-menu li.has-sub-items.open > .toggle-sub::after{transform: rotate(225deg); top: 27px;}

    /*Site Search*/
    .site-search{width: 100%;}

    /*Footer*/
    .footer-wrap{padding: 50px 0;}
    .footer-logo{width: 100%; justify-content: center; display: flex; align-items: center; margin-bottom: 30px;}

    /*Byline*/
    .byline-menu>li>a{font-size: 14px;}
    .byline-wrap > div > a{font-size: 12px;}

    /*SHOP*/
    .search-results-container {width: 100%;}
    .search-title h1 { padding: 0; }
    .search-results-wrap { flex-direction: column; gap: 0; }
    .search-filters { width: 100%; margin-bottom: 20px;}
    .filter-button { color: #000; font-weight: bold; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; height: 50px; }
    .filter-button:hover{color: var(--mainColour);}
    .filter-button:before { content: ''; width: 10px; height: 30px; background: transparent no-repeat center; }
    .search-filters.active .filter-button:before { background-image: url(../images/cancel-purple.svg); width: 30px; background-size: 18px;}
    .search-filters:not(.active) .filter-button:after { content: ''; transition: 0.3s all ease-in-out; width: 20px; height: 20px; background: url(../images/chevron-down-black.svg) no-repeat center; margin-left: auto; margin-right: 10px; }

    .filter-button span::after{content: "Filter Results";}
    .search-filters.active .filter-button span::after{content: "Close Results";}
    .search-filters{background: #F9F9F9;}

    .filters-price{display: none;}
    .search-filters.active .filters-price{display: flex;}

    .search-filters:not(.active) .filters, .search-filters:not(.active) .search-filters-buttons { display: none; }
    .back-to-shopping-wrap { padding: 0; }
    .checkout-logo { padding: 0; }
    .dash-tab-content { width: 100% !important; }
    .dash-tab-inner.active { padding: 0; border-bottom: 1px solid var(--border); }
    .tab-link { padding: 0 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; height: 60px; font-weight: 600; text-transform: uppercase; font-size: 15px; color: var(--mainColour); }
    .tab-link:after { content: ''; width: 10px; height: 10px; background: url(../images/chevron-down-black.svg) no-repeat center; background-size: contain; margin-left: auto; }
    .tab-link.active { border-bottom: 0; }
    .tab-link.active:after { transform: rotate(180deg); }
    .dash-order-row-wrap { border-radius: 0 !important; }
    .dash-form { width: 100%; border-width: 0; background: none; padding-top: 0; }
    .delivery-address { padding: 0 10px 10px; }

    .product-description-tabs a:after{width: 30px; height: 4px;}
    .product-description-tabs a{width: 100%; position: relative;}
    .product-description-tabs a::before{content: ""; height:12px; width:12px; border: solid var(--mainColour); border-width: 0 2px 2px 0; transform: rotate(45deg);
        position: absolute; right:10px; top: 10px; transition: ease-in-out all .3s;}
    .product-description-tabs a.active::before{ transform:rotate(225deg); top:15px; }

    /*Product Block*/
    .product-block .product-image .product-no-stock{font-size: 14px;}

    /* ----- MODULES ----- */

    /* -- Fullscreen Gallery -- */
    div.fullscreen-fade .arrows { display: none !important; }

    /*Layout Block*/
    .block-layout-module .layout-heading span{font-size: 32px;}
    .layout-image-logo{height: 80px; width: 80px;}

    /* ----- MODULES ----- */

    /* -- Product Module -- */
    .pm-slide { width: calc(100% / 3); }
    .pm-gal-wrap.carousel .pm-gal-nav { display: none; }
    .pm-gal.carousel .product-block { width: 100%; }

    /* -- Category Module -- */
    .cm-slide { width: calc(100% / 3); }
    .cm-gal.list .category-block { width: 244px; }
    .cm-gal-wrap.carousel .cm-gal-nav { display: none; }
    .cm-gal.carousel .category-block { width: 100%; }

    /* ----- CHECKOUT ---- */
    .checkout-page { flex-wrap: wrap; }
    .checkout-top { width: 100%; padding: 20px 20px 20px; order: 1; }
    .checkout-left { width: 100%; padding: 20px 20px 20px; order: 3; }
    .checkout-right { width: 100%; padding: 20px 20px 20px; order: 2 }
    .signup-page { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 20px 10px; flex-direction: column; }
    .signup-tab-left { width: 100%; }
    .signup-bottom { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 20px; margin-bottom: 20px; padding: 20px 10px; }
    .signup-header .container { width: 100%; padding: 0 10px; }
    .product-block .product-image a.add-to-favourites { display: flex; }
}

/* -------------------------------------------------------------------------------------------------------- TABLET & MOBILE END  */

/* --------------------------------------- */
/* --------------TABLET------------------- */
/* --------------------------------------- */

@media (min-width:768px) and (max-width:991px) {
    .desktop-large:not(.tablet), .desktop:not(.tablet), .mobile:not(.tablet), .tablet-hidden { display: none !important; }

    /*Header*/
    .responsive-menu-wrap{width: 360px;}

    /*Footer*/
    .footer-wrap > div{flex-wrap: wrap;}
    .footer-col{flex: initial; width: calc((100%/3) - 14px)}
    .footer-outro{width: 100%; margin-top: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .footer-col:last-child .footer-col-title{font-size: 14px; text-transform: none;}

    /* ----- Search Page ----- */
    .product-list { gap: 15px; }
    .product-list .product-block, .search-filters+.search-results-container .product-block { width: calc((100% - 30px) / 3); }
    .product-block .product-price .main-price { font-size: 16px; }
    .product-block .product-price .was-price:not(.hidden)+.main-price:before { content: ''; }
    .product-block .product-buttons a { padding: 0; }
    .category-block { width: calc((100% - 40px) / 3); }
    .category-block .catTitle { height: 70px; }
    .category-block .catTitle a { font-size: 18px; }

    /*Product Tab*/
    .pm-tab-header .pm-tab-btn{height: 45px; padding: 0 15px; font-size: 18px;}

    /* ---------------------- */
    /* ----- MEMBERSHIP ----- */
    /* ---------------------- */

    /* ----- Dashboard ------ */
    .signup-header { height: 110px; font-size: 30px; }

    /*Text Module*/
    .text_module_before { left: calc(-768px / 2); }
    .header-wrap>div>a { margin-left: auto; }

    /*Layout Block*/
    .block-layout-module .layout-inner { width: 100%; padding: 0 20px 30px; }
    .block-layout-module .layout-block { align-items: flex-start; }
    .block-layout-module .layout-buttons>a.layout-link { background: #018185; }
}

/* -------------------------------------------------------------------------------------------------------- TABLET END  */

/* --------------------------------------- */
/* --------------MOBILE------------------- */
/* --------------------------------------- */
@media (max-width:767px) {
    .tablet:not(.mobile), .desktop:not(.mobile), .desktop-large:not(.mobile), .mobile-hidden { display: none !important; }

    /* -------------------------------------------------------------------- */

    /* ----- TYPOGRAPHY ----- */
    h1 { font-size: 30px; line-height: 36px; }
    h2 { font-size: 30px; line-height: 36px; }
    h3 { font-size: 26px; line-height: 32px; }
    h4 { font-size: 22px; line-height: 28px; }
    h5 { font-size: 20px; line-height: 26px; }
    h6 { font-size: 18px; line-height: 26px; }
    p { font-size: 14px; line-height: 24px; }
    ul, ol{font-size: 14px;}
    img { max-width: 100%; vertical-align: middle; }

    .button-primary, .button-secondary{padding: 0 20px; height:50px; }
    
    /*Header*/
    .top-left > a.top-phone::before {background-size: 18px;}
    .top-left > a.favourites{background-size: 20px;}
    .top-left > a.my-account{background-size: 18px;}
    .header-wrap{height: 85px;}
    .header-wrap .logo img{max-width: 150px;}

    .shopping-cart .basket-pop-up{width: 260px;}


    /*Footer*/
    .footer-wrap{padding: 50px 0;}
    .footer-wrap > div{flex-direction: column; max-width: 600px; gap:0;}
    .footer-col{width: 100%; align-items: center;}
    .footer-col h4{font-size: 18px;}
    .footer-col-title, .footer-menu{width: 100%;}
    .footer-intro{margin-bottom: 30px; display: flex; flex-direction: column;}
    .footer-intro img{margin-bottom: 30px;}
    .footer-contact{gap:10px; width: 100%;}

    .footer-outro{margin-top:30px; align-items: flex-start; display: flex; flex-direction: column;}
    .footer-outro .footer-col-title{text-transform: none; font-size: 14px;}

    .footer-menu-container > h4{ border-bottom: 1px solid var(--mainColour); line-height: 50px; position: relative; transition: ease-in-out all .3s;
        margin: 0; }
    .footer-col.footer-menu-container:nth-child(3) > h4{border-top: 1px solid var(--mainColour);}
    .footer-col.footer-menu-container > h4::after{content:""; height: 8px; width: 8px; border: solid var(--mainColour); border-width: 0 2px 2px 0; 
        transform: rotate(45deg); position: absolute; right: 10px; top: calc(50% - 4px); background: none; transition: ease-in-out all .3s;}
    .footer-menu-container.active h4{border-bottom-color: transparent;}
    .footer-menu-container.active > h4::after{transform: rotate(225deg);}
    .footer-menu-wrap{display: none;}
    .footer-menu {gap:15px; margin: 10px 0;}

    /* ----- MODULES ----- */

    /* -- Full Screen Gallery -- */
    .frame.main { background: none; border: 0; border-radius: 0; box-shadow: none; }
    .fsg, .fullscreen-fade { min-width: 100%; height: auto; max-width: 100vw !important; }
    div.fullscreen-fade div.slide { background-repeat: no-repeat; background-size: cover; }
    div.fullscreen-fade div.slide .banner { padding: 20px 10px; width: 100%; box-sizing: border-box; }
    div.fullscreen-wrap, div.fullscreen-wrap div { max-width: initial !important; }
    .full-width-fix .flex-caption.halign-center { left: calc(50% - 150px); right: initial; width: 300px; max-width: 100%; }
    .full-width-fix .flex-caption.halign-left { left: calc(50% - 150px); right: initial; width: 300px; max-width: 100%; }
    .full-width-fix .flex-caption.halign-right { left: calc(50% - 150px); right: initial; width: 300px; max-width: 100%; }
    .flex-control-paging { left: 0; width: 100%; padding: 0 10px; }
    .flex-caption>div.background { padding: 20px; }
    .flex-direction-nav li { width: 21px; height: 32px; }
    .flex-direction-nav li a:after { width: 8px; height: 14px; background-size: contain; }
    .label { float: none; width: 100%; }
    .value { float: none; width: 100%; }

    /*Contact Form*/
    .contact-form { padding: 20px 10px; }
    .contact-form .cf_header { font-size: 24px; }
    .contact-form .cf-text { font-size: 14px; margin-bottom: 10px; }
    .contact-form label { font-size: 14px; }
    .contact-form .cf-buttons { flex-direction: column; align-items: flex-start; gap: 10px; }
    .contact-form .cf-buttons a { margin-left: auto; }

    /*Text Module*/
    .text_module_before { left: calc(-320px / 2); }

    /*Layout Module*/
    .block-layout-module { gap: 0; }
    .block-layout-module .layout-block { flex-direction: column; padding: 0; gap: 24px; }
    .block-layout-module :is(.layout-image, .layout-content) { width: 100%; }
    .block-layout-module .layout-image { justify-content: center !important; }
    .block-layout-module .layout-inner { width: 100%; padding: 0 10px 24px; gap: 20px; }
    .block-layout-module .layout-heading h1 { font-size: 22px; line-height: 22px; padding: 0; }
    .block-layout-module .layout-text * { font-size: 14px; line-height: 26px; padding: 0; margin: 0; }

    /*Logo Module*/
    .logo-carousel .lm-heading{font-size: 28px; line-height: 34px;}
    .logo-carousel .lm-subheading{font-size: 16px;}

    /* ----- SHOP MODULES ----- */
    .cm-title span, .pm-title span { font-size: 28px; line-height: 34px; }
    .cm-subtitle span, .pm-subtitle span { font-size: 16px; line-height: 24px; }

    .pm-gal-pagination, .cm-gal-pagination{gap:10px; }
    .pm-gal-pagination span, .cm-gal-pagination span{height: 15px; width: 15px;}

    /*Product Tab*/
    .pm-tab-header .pm-tab-btn{width: auto !important; height: 35px; padding: 0 15px; font-size: 13px;}

    /* ----- Search Page ----- */
    .search-header { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; flex-direction: column; align-items: flex-start; padding: 15px 10px; height: auto; gap: 10px; }
    .search-title h1{font-size:20px; line-height:24px; }
    .search-results-found{font-size: 14px;}
    .search-order, .sort-search { width: 100%; }
    .search-filters { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; flex-direction: column; align-items: flex-start; border-width: 1px 0; }
    .pager-link:not(.pager-prev-button):not(.pager-next-button):not(.pager-current-page) { display: none; }
    .pager-prev-button, .pager-next-button { width: 91px;}
    .pager-next-button a, .pager-prev-button a{font-size: 14px;}
    .product-list, .category-list{gap:10px;}

    /*Category Block*/
    .category-block { width: calc((100% - 10px) / 2); }
    .category-block .cat-title{font-size: 14px;}

    /*Product block*/
    .product-list .product-block, .search-filters+.search-results-container .product-block { width: calc((100% - 10px) / 2); }
    .product-block .product-price { flex-direction: column; align-items: center; justify-content: flex-start; height: 44px;}
    .product-block .product-title a{text-align: center; width: 100%; justify-content: center; font-size: 14px;}
    .product-block .product-image a.add-to-favourites{height: 20px; width: 20px; background-size: 16px;}
    .product-block .product-price .main-price{font-size: 16px;}

    /*Details Page*/
    .details-header { flex-wrap: wrap; }
    .details-page-container { flex-direction: column; }
    .details-page { padding: 0 5px; }
    .details-page-left, .details-page-right, .product-description-wrap { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 5px; }
    .product-title h1 { font-size: 28px; line-height: 36px; }
    .product-sale-title { font-size: 24px; }
    .product-price .was-price { font-size: 12px; }
    .product-price .main-price { font-size: 24px; }
    .product-meta a { font-size: 12px; }
    .add-to-cart-row:not(.hidden){flex-direction: column; align-items: flex-start;}
    .add-to-cart { flex: 0 0 auto; width: 100%; }
    .product-description-wrap { padding: 10px; }
    .ag-gal-nav { display: none; }
    .dash-order-row>div { width: 30%; }
    .dash-order-row .view { width: 20px; }
    .dashboard-header .container { flex-wrap: wrap; justify-content: flex-start; padding: 10px; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
    .dashboard-header .container>span:first-child { width: 100%; }
    .dashboard-header .container>span:nth-child(2) { margin-left: 0; }

    .dash-tab-inner .member-address{width: 100%;}
    .address-form{width: 100%;}

    .cart-product { flex-direction: column; gap: 5px; }
    .cart-product-left { width: 100%; height: auto; }
    .cart-product-quantity-wrap { display: flex; align-items: center; gap: 10px; }
    .free-delivery-wrap { line-height: 22px; }
    .checkout-card-inner-title { margin-bottom: 5px; }
    .checkout-card-input.checkbox span { font-size: 12px; }
    .payment-header>div>div { width: 100% !important; }
    .payment-content { flex-direction: column; gap: 10px; }
    .payment-content>div { width: 100% !important; }

    /** Content Layout **/

    .signup-page { padding: 20px 5px; }
    .signup-header { height: 90px; font-size: 20px; }
    .signup-bottom { padding: 0 5px; }
    .byline-menu>li { font-size: 14px; }
    .byline-container>a { font-size: 12px; }
    .member-address { width: 100%; }
    .pop-buttons { flex-direction: column-reverse; gap: 20px; align-items: stretch; }
}

/* ------- MOBILE END ------- */