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

@import 'variables.php';
:root { --mainFont: "Plus Jakarta Sans", sans-serif; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; }
body { font-family: var(--mainFont); color: var(--textColour); font-size: 1rem; overflow: hidden; }
body.site-body { background: var(--siteBackground); }
.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; }

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* 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; }
:is(input[type=text], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=password], textarea, select):focus-visible{background-color: #f9dc4a; 
    color: #000; outline: 1px solid #000;}
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: 0.875rem; color: var(--textColour); transition: 0.2s ease-in-out all; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {outline: 1px solid #000;}
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: 1rem; color: #3B3B3D; padding: 5px 0; }
img { max-width: 100%; height: auto !important; }

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 { display: block; color: var(--headingColour); margin: 0; padding: 0; line-height: 1.4; font-weight: bold; }
h1 { font-size: 3rem; }
h2 { font-size: 2.625rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; font-weight: 400;}
h6 { font-size: 1.125rem; font-weight:400; }
p { padding: 0; font-size: 1rem; color: var(--textColour); line-height: 1.4; }
a { text-decoration: none; color: #0376C4; }
.content-wrap p a:not([class]) { text-decoration: underline; color: var(--mainColour); font-weight:bold; }
a:focus-visible { background-color: #f9dc4a; color: #000; outline: 1px solid #000; }
ul { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 1rem; color: var(--textColour); list-style-type: disc; line-height: 1.4; }
ul li { padding: 0 0 15px 0; line-height: 20px; }
ol { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 1rem; color: var(--textColour); list-style-type: decimal; line-height: 1.4; }
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 20px; margin: 0; line-height: 1; height: 60px; background: var(--mainColour); border: 1px solid var(--mainColour); text-align: center; color: #fff; text-decoration: none; transition: 0.2s ease-in all; font-size: 1rem; font-weight: bold; text-decoration: none; border-radius: 5px; }
.button-primary:hover { background: var(--tertiaryColour); border-color: var(--tertiaryColour); color: #fff !important; text-decoration: none; }

.button-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0px 20px; margin: 0; line-height: 1; height: 60px; 
    background: #fff; border: 1px solid var(--textColour); text-align: center; color: var(--textColour); text-decoration: none; transition: 0.2s ease-in all; 
    font-size: 1rem; font-weight: bold; text-decoration: none; border-radius: 5px; }
.button-secondary:hover { background: var(--mainColour); border-color: 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: 0.875rem; 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; }

/*-- TOP STRAP --*/
.top-wrap { height: 40px; background: var(--topbarColour); border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.top-wrap>div { display: flex; align-items: center; gap: 20px; height: 100%; justify-content: space-between; }

.top-wrap .top-right{display: flex; align-items: center;}
.top-wrap .top-right a{color: var(--textColour);}
.top-phone{display: flex; align-items: center; gap:7px; margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--border);}
.top-phone > strong{display: flex; align-items: center; gap:5px;}
.top-phone > strong::before{content: ""; height: 15px; width: 15px; background: url(../images/phone.svg) center no-repeat;}

.top-vat{display: flex; align-items: center; gap:10px;}
.top-vat span{font-weight: bold;}
.toggle-switch {position: relative; width: 48px; height: 24px; background-color: #ccc; border-radius: 24px; transition: background-color 0.3s; } 
.toggle-switch::after {content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid #fff; background-color: var(--mainColour); border-radius: 50%; top: 3px; left: 4px; transition: transform 0.3s; } 
.top-vat.active .toggle-switch {background-color: #CFE1CA; } 
.top-vat.active .toggle-switch::after {transform: translateX(22px); }

/*-- HEADER WRAP --*/
.header-wrap { background: var(--headerColour); height: 130px; position: relative; }
.header-wrap>div { display: flex; align-items: center; justify-content: space-between; height: 100%; gap:60px;}
.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; }
.header-right .header-action { display: flex; align-items: center; }

.site-search { display: flex; width: 560px; height: 50px; background: var(--headerColour); border: 2px solid var(--border);}
.site-search input { width: calc(100% - 50px); height: 100%; padding: 0 15px; box-sizing: border-box; background: none; border: 0; font-size: 0.875rem; font-family: inherit; }
.site-search input::placeholder { font-size: 0.875rem; color: inherit; font-weight: 300; }
.site-search .search-button { width: 50px; height: 100%; background: url(../images/search.svg) no-repeat center var(--mainColour); border: 0; outline: 0; }
.site-header .favourites-wrap { display: flex; align-items: center; justify-content: center; height: 28px; width: 28px; background-image: url(../images/heart.svg); background-position: center; background-repeat: no-repeat; background-size: contain; font-size: 0; position: relative; margin-right:20px; }
.site-header .favourites-wrap>span:not(:empty) { height: 18px; width: 18px; background: var(--mainColour); display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: -5px; right: -10px; border-radius: 100%; color: #fff; font-size: 0.75rem; font-weight: 600; }

.my-account { display: flex; align-items: center; gap:10px; font-size: 0.875rem; flex-shrink: 0; border-right: 1px solid var(--border); margin-right: 15px; padding-right: 15px;}
.my-account::before{content: ""; height: 25px ; width: 21px; flex-shrink: 0; background: url(../images/account.svg) center no-repeat; background-size: contain;}
.my-account span{font-weight: bold; color: var(--textColour);}
.my-account p{margin: 0; font-size: 0.875rem;}

.shopping-cart { height: 50px; display: flex; align-items: center; justify-content: center; }
.small-cart { display: flex; align-items: center; gap: 15px; height: 100%; position: relative; font-size: 0.875rem; color: var(--textColour);}
.small-cart > div.cart-icon { width: 32px; height: 25px; background: url(../images/basket.svg) no-repeat center; background-size: contain; position: relative; }
.small-cart > div.cart-icon > span { height: 18px; width: 18px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 100%; color: #fff; background: var(--mainColour); position: absolute; right: -7px; top: -4px; font-size: 0.75rem; font-weight: 600; }

/*-- MENU WRAP --*/
.menu-wrap { background: var(--secondaryColour); position: relative; height: 58px; }
.menu-wrap>div { height: 100%; }
.menu-wrap>div>nav.main-menu-wrap { display: flex; align-items: center; height: 100%; padding: 0; gap: 50px; position: relative; }

/* Main Menu */
.menu-wrap .main-menu { display: flex; height: 100%; list-style: none; padding: 0; margin: 0; width: 100%; align-items: center; 
    justify-content: space-between; position: relative;}

.menu-wrap .main-menu ul{list-style:none; padding: 0;}
.menu-wrap .main-menu li{list-style: none; padding: 0; display: flex; flex-direction: column; gap:15px;}
.menu-wrap .main-menu li a{display: flex; align-items: center; padding: 0; color: var(--textColour); font-size: 0.875rem; transition: ease-in-out all .3s; text-decoration: none;}
.menu-wrap .main-menu>li { height: 100%; padding: 0 10px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.menu-wrap .main-menu > li > a{color: #fff; display: flex; align-items: center; justify-content: center; gap:5px;}
.menu-wrap .main-menu > li.has-children>a:after { content: ''; width: 7px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.menu-wrap .main-menu > li > ul{position: absolute; width: 1320px; left: 0; top: 100%; background: #fff; border-radius:10px; padding:30px; display:flex; 
    flex-wrap: wrap; gap: 40px; z-index: -1; opacity: 0; visibility: hidden; transition: ease-in-out all .3s; transform: translateY(-10px);}
.menu-wrap .main-menu > li > ul > li{width: calc(25% - 30px); }
.menu-wrap .main-menu > li > ul > li > a{color: var(--mainColour); text-transform: uppercase; font-weight: bold;}
.menu-wrap .main-menu > li > ul > li > ul{display: flex; flex-direction: column; gap:10px;}
.menu-wrap .main-menu li > ul.active { z-index: 10; opacity: 1; visibility: visible; transform: translateY(0); }

/*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; }

.under-menu-wrap{height: 46px; background: var(--mainColour); display: flex; align-items: center;}
.under-menu-wrap > div{display: flex; align-items: center;}
.under-menu-wrap > div > div{flex: 1 0 0; display: flex; align-items: center; justify-content: center;}
.under-menu-wrap > div > div > span{color: #fff; font-size: 0.875rem; display: flex; align-items: center; gap:10px;}
.under-menu-wrap > div > div > span::before{content: ""; flex-shrink: 0; background-position: center; background-repeat: no-repeat;}
.under-menu-wrap > div > div.um-promo > span::before{height: 19px; width: 24px; background-image: url(../images/drill.svg);}
.under-menu-wrap > div > div.um-delivery > span::before{height: 15px; width: 26px; background-image: url(../images/van.svg);}
.under-menu-wrap > div > div.um-collect > span::before{height: 19px; width: 19px; background-image: url(../images/click.svg);}
.under-menu-wrap > div > div.um-irish > span::before{height: 19px; width: 19px; background-image: url(../images/irish.svg);}

/*--- FOOTER ---*/
.back-to-top{background: var(--mainColour); height: 66px; display: flex; align-items: center; justify-content: center;}
.back-to-top > a{color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; gap:10px;}
.back-to-top > a::after{content: ""; height: 8px; width: 8px; transform: rotate(45deg); border: solid #fff; border-width: 3px 0 0 3px;}

.footer-newsletter{background: var(--secondaryColour); padding: 50px 0;}
.footer-newsletter > div{display: flex; align-items: center; gap:30px;}
.footer-newsletter > div > div{flex: 1 0 0; display: flex; flex-direction:column; gap:10px;}
.footer-newsletter span{color: #fff; font-weight: bold; font-size: 2rem;}
.footer-newsletter p{color: #fff; padding: 0; margin: 0;}
.mc-form{display: flex; gap:5px; align-items: center;}
.mc-form input[type=email]{height: 60px; border: 2px solid #D6D6D6; border-radius: 5px;}
.mc-form input[type=submit]{height: 60px; color: #fff; background: var(--mainColour); border: 0; border-radius: 5px; padding: 0 20px; font-weight: bold;}

/*-- 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; display: flex; flex-direction: column; align-items: flex-start;}
.footer-col-title {font-weight: bold; font-size: 1.125rem; display: flex; flex-direction: column; padding: 0; 
    margin: 0 0 20px; text-transform: capitalize; line-height: 30px; gap: 10px; }
.footer-col .footer-col-title:after { content: ''; width: 20px; height: 3px; background: var(--mainColour); border-radius: 6px; }
.footer-col.footer-intro{width: 30%; flex: initial;}
.footer-contact * { color: var(--textColour); }
.footer-contact { display: flex; flex-direction: column; gap: 20px; width: 100%;}
.footer-contact a{transition: ease-in-out all .3s;}
.footer-contact a:hover{color: var(--mainColour); }
.footer-address{display: flex; align-items: flex-start; gap:45px;}
.footer-address > div{width: 50%; display: flex; flex-direction: column;}
.footer-address > div:first-child{padding-left: 30px; background: url(../images/pin.svg) left top no-repeat;}
.footer-phone{display: flex; align-items: flex-start; gap:45px;}
.footer-phone > div{width: 50%; display: flex; flex-direction: column;}
.footer-phone > div:first-child{padding-left: 30px; background: url(../images/phone.svg) left top no-repeat;}
.footer-opening{display: flex; flex-direction: column; gap:5px; padding-left: 30px; background: url(../images/clock.svg) left top no-repeat;}
.footer-opening a{font-weight: bold; text-decoration: underline;}

.footer-outro > a{display: flex; align-items: center; margin: 30px 0 0 0;}
.footer-outro > a > img{max-width: 250px;}
.footer-outro .footer-col-title-payment{margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); width: 100%}
.footer-payment{display: flex; align-items: center; gap:10px; margin:  0 0 15px 0;}

.footer-social { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.footer-social>a { display: block; width: 26px; height: 26px; transition: ease-in-out all .3s; }
.footer-social>a:hover { transform: translateY(-5px); }
.footer-social>a.fb { background: url(../images/icon-fb.svg) no-repeat center; background-size: contain; }
.footer-social>a.ig { background: url(../images/icon-ig.svg) no-repeat center; background-size: contain; }
.footer-social>a.tw { background: url(../images/icon-x.svg) no-repeat center; background-size: contain; }
.footer-social>a.li { background: url(../images/icon-in.svg) no-repeat center; background-size: contain; }
.footer-social>a.yt { background: url(../images/icon-yt.svg) no-repeat center; background-size: contain; }
.footer-social>a.tk { background: url(../images/icon-tt.svg) no-repeat center; background-size: contain; }

/*Footer Menu*/
.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(--textColour); font-size: 1rem; transition: ease-in-out all .3s; text-decoration: none; }
.footer-menu>li>a:hover { color: var(--mainColour); }
.footer-menu ul { display: none; }

/*-- BYLINE --*/
.byline-wrap { background: var(--bylineColour); padding: 30px 0; }
.byline-wrap>div { display: flex; flex-direction: column; gap: 15px; }
.byline-menu { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; row-gap: 10px; }
.byline-menu>li { padding: 0 10px 0 0; margin: 0 10px 0 0; font-size: 1rem; 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; text-decoration: none; font-size: 0.75rem; }

.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: 1rem; 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: 1.5rem; 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, .8); 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: 10px; 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 { width: 18px; height: 18px; box-sizing: border-box; border: 1px solid var(--secondaryColour); background: #fff; transition: ease-in-out all .3s; border-radius: 50%; }
.flex-control-paging>li>a.flex-active { background: var(--secondaryColour); border-color: #fff; height: 23px; width: 23px; }

/*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: 2rem; margin-bottom: 10px; }
.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: 1rem; color: var(--headingColour); margin-bottom: 10px; }
.contact-form label { width: 100%; color: var(--textColour); font-size: 1rem; 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: 0.875rem; 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: 0.75rem; 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: 1rem; line-height: 20px; }
.contact-form :is(.cf-radiobox, .cf-checkbox)>span { display: flex; align-items: center; color: #071b3a; font-size: 0.875rem; }
.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: 1rem; color: var(--secondaryColour); 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: 0.813rem; }
.contact-form .cf-buttons a.cf-reset { display: none; }

/*Layout Block Module*/
.block-layout-module { display: flex; flex-direction: column; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(255deg, #2C3438 0%, #222628 99.01%); border-radius: 5px;}
.block-layout-module .layout-block { margin: 0; display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: 5px;
}
.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: 100%; padding: 10px 0; display: flex; flex-direction: column; align-items: flex-start; position: relative; gap: 15px; z-index: 10; justify-content: center; }
.block-layout-module .layout-heading { display: flex; flex-direction: column; gap: 10px; }
.block-layout-module .layout-heading span { font-size: 2.25rem; position: relative; display: flex; font-weight: bold; color: #fff; align-items: flex-start; margin: 0; }
.block-layout-module .layout-text * { font-size: 1rem; line-height: 1.6; color: #fff; margin: 0; }

/*Layout Button*/
.block-layout-module .layout-buttons { display: flex; align-items: center; gap: 10px; }
.block-layout-module .layout-buttons .button-secondary{border: 1px solid var(--mainColour); color: #fff; background: transparent;}
.block-layout-module .layout-buttons .button-secondary:hover{background: var(--mainColour);}

/*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; }

/*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: 0 0 20px 0; }

/* search header */
.search-header { display: flex; flex-direction: column; gap:10px; padding: 15px 0; border-bottom: 1px solid #DEDEDE; }
.search-inner-header{display: flex; align-items: center; justify-content: space-between; width: 100%;}
.search-title { display: flex; gap: 5px; align-items: center; }
.search-title h1 { font-size: 1.5rem; line-height: 30px; font-weight: bold; padding: 0; }
.search-results-found { font-size: 1rem; }
.search-order { display: flex; align-items: center; gap: 10px; }
.search-order span { color: var(--mainColour); font-weight: 600; width: 100px; text-align: right; }
.sort-search { width: 300px; }

.search-breadcrumbs *{text-transform: capitalize; color: var(--textColour);}

/* Search Results */
.search-results-wrap { display: flex; align-items: flex-start; gap: 20px; }
.search-filters { width: 280px; flex: 0 0 auto; border-radius: 5px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 5px;}
.search-filters-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; gap: 10px; }
.filter { border-bottom: 1px solid var(--border); }
.filter-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 60px; font-size: 1rem; 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: 30px; font-size: 0.875rem; gap: 5px; text-transform: capitalize; border: 1px solid transparent; border-radius: 3px; }
.filter-list a.active { border-color: var(--border); background: #fff; }
.filter-list a.active:after { content: ''; width: 20px; height: 20px; background: url(../images/tick.svg) no-repeat center; }
.apply-filters { width: 100%; border: 0; }
.clear-filters { text-align: center; text-decoration: underline; line-height: 30px; color: #000; }
.search-results-container { flex: 1; max-width: 100%; width: 0; display: flex; flex-direction: column; gap: 30px; }
.search-results { width: 100%; }
.product-list, .category-list { display: flex; flex-wrap: wrap; gap: 20px; padding: 0px 0 20px; flex: 1; width: 100%; }
.product-list { padding: 0; }
.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: #000; text-decoration: none; padding: 0 10px; display: flex; align-items: center; height: 50px; font-size: 0.875rem; gap: 5px; text-transform: capitalize; border: 1px solid var(--border); background: #fff; }
.active-filters a:before { content: ''; width: 20px; height: 20px; background: url(../images/cancel.svg) no-repeat center; }
.search-filters.cat-hidden+.product-list { width: 100%; }

.filter-category{padding: 20px 10px; border-bottom: 1px solid var(--border);}
.filter-category-header{height: 50px; font-size: 1.125rem; font-weight: 600;}
.filter-category-list{display: flex; flex-direction: column; gap:10px;}
.filter-category-list > div{display: flex; flex-direction: column; gap:5px;}
.filter-category-list span{font-size: 0.875rem;}

/* -- Product Block -- */
.product-block { width: calc((100% - 60px) / 4); background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; height: auto;}
.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(255, 255, 255, .9); color: #000; font-size: 1rem; font-weight: bold; position: absolute; bottom: 0; left: 0; right: 0; line-height: 50px; text-align: center; text-transform: uppercase; }
.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: none !important; max-width: 100% !important; max-height:100%; }
.product-block .product-image a.add-to-favourites { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background: url(../images/fav-empty.svg) no-repeat center; background-size: contain; font-size: 0; transition: ease-in-out all .3s; }
.product-block .product-image a.add-to-favourites.is-favourite { background-image: url(../images/fav-fill.svg); }
.product-block .product-info { padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;  flex-grow: 1;}
.product-block .product-title { display: flex; align-items: flex-start; font-size: 1rem; overflow: hidden; }
.product-block .product-title a { color: var(--textColour); text-decoration: none; }
.product-block .product-price { display: flex; flex-direction: column; padding: 0; font-weight: bold; }
.product-block .product-price small{font-size: 0.875rem;}
.product-block .product-price .main-price { font-size: 1.5rem; }
.product-block .product-price .was-price { font-size: 0.875rem; color: #818181; font-weight: 400; order: 2;}
.product-block .product-price .was-price span { text-decoration: line-through; }
.product-block .product-price .was-price:not(.hidden)+.main-price { color: #417B2E; order:1; }
.product-block .product-buttons { display: flex; align-items: center; justify-content: center; margin-top: auto;}
.product-block .product-buttons a { width: 100%;}
.product-block.no-stock .product-buttons > a{background: #D6D6D6; border: 1px solid #E9E9E9; color: var(--textColour);}
.product-block.no-stock .product-buttons > a:hover{ color: var(--textColour) !important;}

/* -- Category Block -- */
.category-block { width: calc((100% - 60px) / 4); cursor: pointer; box-sizing: border-box; background: #fff; border-radius: 0 0 5px 5px; }
.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: auto; width: 100% !important; max-width: none !important; }
.category-block .cat-title { display: flex; align-items: center; justify-content: center; height: 78px; padding: 0 10px; position: relative; border-radius: 0 0 5px 5px; transition: 0.2s ease-in all; font-size: 1.125rem;  font-weight: bold; background: var(--headingColour); color: #fff; text-align: center; text-decoration: none; }
.category-block:hover .cat-title { background: var(--mainColour); }

.category-block-title .cat-title{border-radius: 5px;}

/* -- PAGER -- */
.search-pager { display: flex; align-items: center; width: 100%; height: 60px; justify-content: center; gap: 10px; position: relative; background: #fff; border-radius: 5px; overflow: hidden; border: 1px solid var(--border);}
.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: 1rem; color: var(--textColour); text-decoration: none; }
.pager-link.hidden { display: none !important; }
.pager-current-page a { text-decoration: underline; font-weight: 600; }
.pager-prev-button, .pager-next-button { background: var(--mainColour); color: #fff; height: 100%; width: 90px; }
.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: 1rem; font-weight: bold; display: flex; align-items: center; justify-content: center; text-decoration: none; gap: 5px; }
.pager-next-button.disabled, .pager-prev-button.disabled { background: rgba(0, 0, 0, .3); }
.pager-next-button a:after, .pager-prev-button a:before { content: ''; width: 10px; height: 10px; 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: #ECECEC; 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: 30px; 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: flex-start; justify-content: center; }
.pm-title { display: flex; justify-content: flex-start; align-items: center; }
.pm-title span { font-size: 2rem; color: var(--headingColour); font-weight: bold; text-align: center; }
.pm-subtitle { display: flex; align-items: center; justify-content: center; }
.pm-subtitle span { font-size: 1.125rem; 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 all .3s; }
.pm-gal-wrap .pm-nav-disabled { opacity: 0.3; cursor: default; }
.pm-gal-wrap .pm-gal-nav::after { content: ""; display: block; width: 12px; height: 12px; border: solid var(--secondaryColour); transform: rotate(45deg); }
.pm-gal-wrap .pm-gal-prev { left: -60px; border-radius: 5px 0 0 5px; }
.pm-gal-wrap .pm-gal-prev::after { border-width: 0 0 3px 3px; margin-left: 5px; }
.pm-gal-wrap .pm-gal-next { right: -60px; border-radius: 0 5px 5px 0; }
.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: flex-start; gap: 15px; height: 30px; }
.pm-gal-pagination span { background: #fff; border: 1px solid var(--secondaryColour); 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: var(--mainColour); border: 1px solid var(--mainColour);}

/* 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: #ECECEC; 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: 30px; 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: flex-start; justify-content: center; }
.cm-title { display: flex; justify-content: center; align-items: center; }
.cm-title span { font-size: 2rem; color: var(--headingColour); font-weight: bold; text-align: center; }
.cm-subtitle { display: flex; align-items: flex-start; justify-content: center; }
.cm-subtitle span { font-size: 1.125rem; 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; transition: ease-in-out all .3s; }
.cm-gal-wrap .pm-nav-disabled { opacity: 0.3; cursor: default; }
.cm-gal-wrap .cm-gal-nav::after { content: ""; display: block; width: 12px; height: 12px; border: solid var(--secondaryColour); transform: rotate(45deg); }
.cm-gal-wrap .cm-gal-prev { left: -60px; border-radius: 5px 0 0 5px; }
.cm-gal-wrap .cm-gal-prev::after { border-width: 0 0 3px 3px; margin-left: 5px; }
.cm-gal-wrap .cm-gal-next { right: -60px; border-radius: 0 5px 5px 0; }
.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: flex-start; gap: 15px; height: 30px; }
.cm-gal-pagination span { background: #fff; border: 1px solid var(--secondaryColour); 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: var(--mainColour); border: 1px solid var(--mainColour);}

/* 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; }

.category-module .category-block .cat-title{height: 50px; font-size: 1rem;}



/* ------------------------ */
/* ----- 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:empty { display: none; }
.details-header>a { color: var(--textColour); text-decoration: underline !important; text-transform: capitalize; }
.details-page-container { display: flex; align-items: flex-start; 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(--mainColour); }

/* 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: 18px; background: url(../images/chevron-right-black.svg) no-repeat center; background-size: contain; }
.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; background:var(--background); 
    border-radius:5px; border:1px solid var(--border); padding: 20px;}
.product-details-wrap .product-stock{background: #818181; color: #fff; font-weight: bold; padding: 10px 15px;}
.product-details-wrap .product-title { padding: 0; font-size: 2rem; font-weight: bold; }
.product-sale-title { font-size: 1.063rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; font-weight: 600; background: #DC0D37; line-height: 44px; }
.product-details-wrap .product-price { font-size: 1.75rem; color: var(--secondaryColour); font-weight: bold; }
.product-details-wrap .product-price .product-rrp-price { font-size: 1rem; color: var(--secondaryColour); text-decoration: line-through; font-weight:normal; }
.product-price .product-rrp-price:not(.hidden)+.product-price { color: #417B2E; font-weight: bold; }
.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: 0.813rem; color: #000; gap: 5px; }
.product-short-description { padding: 10px 0; font-size: 0.875rem; line-height: 24px; }
.product-short-description:empty { display: none; }

.product-details-wrap .product-sku{font-weight: 400; font-size: 1rem;}

/* variations */
.product-selector { display: flex; flex-direction: column; gap: 20px; width:100%; }
.product-selector>div:not(.hidden) { display: flex; flex-direction: column; gap: 10px; }
.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: #000; 
    color: #fff; opacity: .5; height: 40px; font-size: 0.875rem; border-radius: 15px; 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: 170px; }
.quantity-wrap .quantity-label { font-size: 1.063rem; color: var(--secondaryColour); padding: 5px 0; font-weight: bold; }
.quantity-wrap .quantity { display: flex; align-items: center; height: 54px; width: 100%; box-sizing: border-box; background: #fff; }
.quantity-wrap .quantity a { display: flex; align-items: center; justify-content: center; width: 54px; height: 100%; font-size: 1.313rem; color: #fff; 
    font-weight: bold; border: 1px solid var(--border); background: var(--secondaryColour); }
.quantity-wrap .quantity input { flex: 1; height: 100%; background: none; border: solid #DBDBDB; border-width: 1px 0; box-sizing: border-box; font-size: 1rem; color: #000; text-align: center; }

/*Multi Add*/
.multi-add-wrap{gap:0; border: 1px solid var(--border);}
.product-details-wrap .multi-add-wrap .multi-add-item{display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; border-bottom: 1px solid var(--border);}
.product-details-wrap .multi-add-wrap .multi-add-item:last-child{border: 0;}
.ma-title{width: 100%;}
.ma-sku{font-size: 0.875rem; width: 100%;}
.product-details-wrap .multi-add-wrap .ma-info-wrap{display: flex; justify-content: space-between; width: 100%;}
.ma-price{font-weight: bold; font-size: 1.125rem;}
.ma-quantity{width: 130px; margin-left: auto;}
.ma-quantity .quantity{height: 40px; }
.ma-quantity .quantity a{height: 40px; width: 40px;}

.multiadd-total {padding: 10px; display: flex; flex-direction: column; gap: 0 !important;}
.multiadd-total > div {display: flex; align-items: center; gap: 10px;}
.multiadd-total > div > span {font-weight: bold; font-size: 1.5rem;}

/* 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; }
.add-to-cart { display: flex; align-items: center; gap: 10px; height: 54px; border-radius: 0;}
.add-to-cart::before { content: ""; height: 20px; width: 25px; background: url(../images/cart-white.svg) center no-repeat; flex-shrink: 0; background-size: contain; transition: ease-in-out all .3s; }

/* 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: 1.625rem; 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: 1rem; }
.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) { opacity: .5; width: 100%; }

/*Product Notify*/
.product-notify{display: flex; gap:5px; flex-direction: column; width: 100%; padding: 30px; background: var(--secondaryColour); border-radius: 5px;}
.product-notify > span{display: flex; align-items: center; gap:10px; color: #fff; font-size: 1.5rem; font-weight: bold; }
.product-notify > span::before{content: ""; height: 31px; width: 25px; background: url(../images/bell.svg) center no-repeat; flex-shrink: 0;}
.product-notify > p{margin: 0; color: #fff;}
.product-notify > div{display: flex; flex-direction: column; gap:5px;}
.product-notify label{color: #fff;}
.product-notify input{border-radius: 5px;}
.product-notify input[type=submit]{width: 100%; margin-top: 10px;}

/*Volume Discount*/
.product-volume-discounts{position: relative; width: 100%;}
.pv-pop-up:not(.hidden){padding: 15px; border: 1px solid var(--border); width: 392px; display: flex; flex-direction: column; position: relative; position: absolute; right: 5px; top: 10px; background: #fff;}
.pv-close{position: absolute; top:15px; right: 15px; background: url(../images/close.svg) center no-repeat; height: 12px; width: 12px;}
.pv-pop-up > span{font-weight: bold; font-size: 0.75rem; display: flex; align-items: center; gap:5px; padding-bottom: 10px; margin-bottom:10px; border-bottom: 1px solid var(--border); }
.pv-pop-up > span::before{content: ""; height: 13px; width: 13px; flex-shrink: 0; background: url(../images/warning.svg) center no-repeat; background-size: contain;}
.pv-pop-up .pv-info{width: 100%; padding-bottom: 10px; margin-bottom: 10px; 
    border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap:2px;}
.pv-pop-up .pv-info *{font-size: 0.75rem;}
.pv-pop-up .pv-discounts{display: flex; flex-direction: column; gap:10px;}
.pv-pop-up .pv-discount{display: flex; justify-content: space-between; font-size: 0.75rem;}
.pv-pop-up .pv-right{display: flex; align-items: center; gap:10px;}

.pv-notice{background: var(--secondaryColour); color: #fff; padding: 15px; width: 100%; display: flex; align-items: center; gap:10px; justify-content: space-between;}
.pv-notice span{font-size: 0.875rem;}
.pv-notice > a{height: 20px; width: 20px; background: url(../images/warning-white.svg) center no-repeat; flex-shrink: 0;}

/*Product Delivery*/
.product-delivery-wrap{display: flex; flex-direction: column; gap:15px; width: 100%; padding-top: 15px; border-top: 1px solid var(--border);}
.product-delivery-wrap > span{font-size: 1.25rem; font-weight: 600;}
.product-delivery-wrap > div:not(.hidden){padding: 20px 10px; border: 1px solid var(--border); border-radius: 5px; display: flex; gap:10px;}
.product-delivery-wrap > div::before{content: ""; flex-shrink:0; }
.product-delivery-wrap > div > div{display: flex; flex-direction: column; gap:5px;}
.product-delivery-wrap > div.pd-surcharge{background: #F8F8F8;}
.product-delivery-wrap > div.pd-surcharge::before{height: 20px; width: 25px; background: url(../images/warning.svg) left top no-repeat;}
.product-delivery-wrap > div.pd-delivery::before{height: 14px; width: 25px; background: url(../images/delivery-green.svg) left top no-repeat;}
.product-delivery-wrap > div.pd-collect::before{height: 20px; width: 25px; background: url(../images/pin-green.svg) left top no-repeat;}
.product-delivery-wrap > div span{font-weight: bold;}
.product-delivery-wrap > div p{margin: 0; font-size: 0.875rem;}
.product-delivery-wrap > div small{color: #818181; font-size: 0.75rem}

.site-body[data-page=product] .pop-buttons { flex-direction: row-reverse; justify-content: flex-end; gap: 25px; }
.site-body[data-page=product] .pop-buttons .pop-save-button { }

/* Delivery */
.product-meta { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 20px; }
.product-meta > a,.product-meta > .delivery-link { font-size: 0.875rem; color: var(--textColour); display: flex; align-items: center; gap: 7px; text-decoration: underline; }
.product-meta > .delivery-link {text-decoration:  none;}
.product-meta > .delivery-link a {color: var(--textColour);text-decoration: underline;}
.product-meta > a:before,.product-meta > .delivery-link:before { content: ''; width: 28px; height: 18px; background: url(../images/delivery-green.svg) no-repeat center; background-size: contain; }
.product-meta a.add-to-favourites:before { background-image: url(../images/fav-empty.svg); width: 18px; height: 16px; }
.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 { background: var(--background); margin: 20px 0; border:1px solid var(--border); }
.product-description-tabs { display: flex; flex-direction: column;}
.product-description-tab > a { font-size: 1.125rem; color: var(--headingColour); font-weight: 600; display: flex; justify-content: space-between; padding: 20px; 
    border-bottom: 1px solid var(--border); align-items: center;}
.product-description-tab > a::after{content: ""; height: 10px; width: 10px; border: solid var(--tertiaryColour); border-width: 0 3px 3px 0; transform: rotate(45deg);
    transition: ease-in-out all .2s; flex-shrink: 0;}
.product-description-tab > a.active::after{transform: rotate(225deg);}
.product-description-tab .product-description-content{display: none;}
.product-description-tab.active .product-description-content { display: block; padding: 20px; border-bottom:1px solid var(--border);}

/*-- Associations --*/
.associations-wrap { padding: 40px 0; background: var(--background); }
.associations-container { padding: 0px 10px; }
.associations-wrap h2 { font-size: 2rem; color: var(--headingColour); font-weight: bold; display: flex; flex-direction: column; }
.associations-gal-wrap { position: relative; }
.associations-gal { width: 100%; padding: 20px 0; }

.ag-pagination { display: flex; justify-content: flex-start; align-items: center; gap: 10px; height: 30px; }
.ag-pagination span { height: 20px; width: 20px; border: 1px solid var(--secondaryColour); background: #fff; opacity: 1; margin: 0 !important; transition: ease-in-out all .3s; border-radius: 100%; }
.ag-pagination span.active { background: var(--mainColour); border-color:var(--mainColour); }

/* ---------------------- */
/* ------ 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: 1.125rem; color: #393A3D; font-weight: bold; text-transform: capitalize; }
.cart-title::before { content: ""; display: block; width: 24px; height: 24px; background: url(../images/basket.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: 0.75rem; line-height: 18px; color: #393A3D; font-weight: bold; }
.cart-product-variations span { font-size: 0.625rem; line-height: 16px; color: #393A3D; }
.cart-product-sku span { font-size: 0.625rem; line-height: 14px; color: #393A3D; }
.cart-discount { font-size: 0.625rem; 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: 120px; height: 40px; background: var(--background); }
.cart-product-quantity a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--secondaryColour); 
    font-size: 1.25rem; font-weight: bold; color: #fff; }
.cart-product-quantity input { width: 40px; height: 100%; text-align: center; background: none; border: solid var(--border); border-width:1px 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: 0.75rem; 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: 0.875rem; 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; }
.cart-line>div { font-size: 1rem;  text-transform: capitalize; }
.cart-line.discount-line { margin-bottom: 40px; }
.cart-line.discount-line>div { color: #4476BA; font-size: 0.75rem; }
.cart-line.total>div { font-weight: bold; }
.cart-line.vat-line>div { font-size: 0.75rem; }

.cart-line-title{font-weight: 600;}

/*----- CHECKOUT -----*/
.site-body[data-page=checkout] .site-header, .site-body[data-page=checkout] .site-footer { display: none; }
.checkout-page { display: flex; min-height: 1000px; align-items:flex-start; }
.checkout-left { padding: 40px 20px 200px 20px; padding-left: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box;  }
.checkout-right { padding: 40px 20px 20px 20px; margin-top: 20px; padding-right: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box; background: #fff; 
    border: 1px solid var(--border);}
.back-to-shopping-wrap { padding: 10px 0 20px; }
.back-to-shopping-wrap a { font-size: 0.75rem; color: #575757; text-decoration: underline; }
.checkout-logo { padding: 20px 0; display: flex; align-items: center; justify-content: flex-start; }
.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: 0.75rem; 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: 1rem; 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: 1.125rem; color: #3B3B3D; font-weight: 600; }
.login-popup .login-form { }
.login-popup .login-form-field { padding: 10px 0; }
.login-popup .login-form-label { font-size: 0.875rem; 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: 2rem; line-height: 38px; color: #000; font-weight: bold; padding: 0; }
.checkout-card { background: #fff; border: 1px solid var(--border); 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:focus-visible { background-color: #f9dc4a; color: #000; outline: 1px solid #000; }
.checkout-card-title>span { font-size: 1.125rem; line-height: 28px; color: #000; 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: 0.875rem; line-height: 24px; }
.checkout-card-subtitle span { font-size: 1rem; 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: 1rem; 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 input[type=checkbox]:focus-visible {outline: 1px solid #000;}
.checkout-card-input.checkbox span { font-size: 0.875rem; 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: 1rem; 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: 1rem; }
.checkout-card[data-card=details] .checkout-card-title span { font-size: 1.5rem; }
.checkout-card[data-card=details] .checkout-card-subtitle { padding: 10px 0; }
.checkout-card[data-card=details] .checkout-card-subtitle span { font-size: 1rem; color: #393A3D; font-weight: bold; }

.checkout-card[data-card=orderRef] .checkout-card-title{height: initial;}
.checkout-card[data-card=orderRef] .checkout-card-inner{padding: 0;}
.checkout-card[data-card=orderRef] .checkout-card-subtitle span{font-size: 0.875rem;}

.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: 0.875rem; color: #393A3D; font-weight: bold; }
.checkout-form-field { padding: 10px 0; position: relative; }
.checkout-form-label { font-size: 1rem; 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: 1rem; 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; }
.delivery-option:focus-visible .deliveryopt-radio { outline: 4px solid #f9dc4a; }
.deliveryopt-row { display: flex; align-items: center; gap: 10px; }
.deliveryopt-title { font-size: 0.938rem; line-height: 24px; color: #000;}
.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; color: #000; 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: 0.938rem; 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: 4px; 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; }
.save-order:focus-visible{background-color: #f9dc4a; color: #000; outline: 1px solid #000; }

/*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: 1.875rem; margin: 0 0 15px; padding: 0; }
.payment-header>div>div { width: calc((100% - 20px) /3); font-size: 0.75rem; 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: 1.125rem; 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: 0.75rem; background: #f9f9f9; }
.payment-content .payment-delivery p { font-size: 0.75rem; color: #000; padding: 0 0 15px; line-height: 20px; }
.payment-content .payment-order-summary span { font-weight: bold; font-size: 0.75rem; 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: 0.75rem; 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: 0.75rem; 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: 0.75rem; color: #000; line-height: 20px; font-weight: bold; }
.payment-pay { box-sizing: border-box; }
.payment-pay h1 { color: #000000; font-weight: bold; font-size: 1.875rem; margin: 0; padding: 0; }
.payment-pay label { font-size: 1rem; 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: 1rem; 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: 1rem; 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: 20px 0 0; display: flex; align-items: flex-start; gap: 20px; }
.signup-header { height: 80px; font-size: 2rem; }
.signup-header .container { height: 100%; display: flex; align-items: center; }
.signup-header span { color: var(--secondaryColour); font-weight: bold; display: flex; gap: 10px; align-items: center; }
.signup-tab-headers { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.signup-tab-header { display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 30px; background: #F8F8F8; 
    border: solid #D2D1D1; border-width: 1px 1px 0; position: relative; z-index: 0; text-align: center; cursor: pointer; font-weight: bold; color: #231F20; }
.signup-tab-header.active { background: var(--secondaryColour); color: #fff; z-index: 2; }
.signup-tab-header.active:after { content: ''; width: 20px; height: 2px; background: var(--mainColour); bottom: 8px; left: calc(50% - 10px); position: absolute; }
.signup-tab-content { border: 1px solid #D2D1D1; border-radius: 0 5px 5px 5px; background: #FDFCFC; margin-top: -1px; z-index: 1; 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-tab-right > div{margin-top: 60px; padding: 40px 15px; border-radius: 5px; background: var(--secondaryColour); }
.signup-right-header { font-size: 1.5rem; font-weight: bold; color: #fff; margin-bottom: 15px;}
.signup-right-bullets { display: flex; flex-direction: column; gap: 10px; }
.signup-right-bullets>div { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: #fff; }
.signup-right-bullets>div:before { content: ''; width: 26px; height: 26px; background: url(../images/round-check.svg) no-repeat center; }
.signup-tab-text { color: var(--textColour); font-size: 0.875rem; line-height: 24px; }
.signup-bottom { display: flex; flex-direction: column; gap: 20px; margin: 40px 0; font-size: 1rem; }
.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: 1rem; color: #3B3B3D; padding: 5px 0; }
.signup-form-input { width: 100%; }
.signup-page-button { margin: 10px 0; width: 100%; position: relative; }
.signup-page-button::after { content: ""; height: 12px; width: 12px; border: solid var(--mainColour); border-width: 3px 3px 0 0; transform: rotate(45deg); position: absolute; right: 15px; top: calc(50% - 5px); transition: ease-in-out all .3s; }
.signup-page-button:hover::after { border-color: var(--secondaryColour); }
.forgot-button { color: #255E99; }
.login-error { text-align: center; font-size: 1rem; 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: 1.25rem; 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(--headingColour); }
.dashboard-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 5px; padding: 0 10px; font-size: 1rem; }
.dashboard-header span:nth-child(1) { font-size: 1.5rem; 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(--headingColour); 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: 1rem; }
.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: 0.875rem; }
.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: 1rem; 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: 0.875rem; line-height: 18px; color: #393A3D; }
:is(.billing-address, .delivery-address) div span { font-weight: bold; font-size: 1rem; 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: 1rem; 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: 0.875rem; 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 #000; padding: 4px; 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: #000; border-radius: 50%; }
.checkout-card .member-address:not(.chosen) { cursor: pointer; }
.billing-check { display: flex; align-items: center; gap: 10px; }
.billing-check input[type=checkbox]:focus-visible {outline: 1px solid #000;}

.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:1399px) {
    .site-search { width: 430px; }

    /*Menu*/
    .main-menu > li > ul{width: 1116px;}
}
@media (min-width:992px) {
    .footer-menu-wrap { display: block !important; }
    .footer-col-title { pointer-events: none !important; }
}
@media (min-width:768px) {
    .byline-menu { display: flex !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: 300px; }
    .menu-wrap>div>nav, .menu-wrap .main-menu { gap: 30px; }

    .main-menu > li > ul{width:1140px;}
    .header-wrap .logo img{max-width: 250px;}
    .header-wrap>div{gap:30px;}
    .header-right{gap:20px;}
    .under-menu-wrap > div{justify-content: space-between;}
    .under-menu-wrap > div > div{flex: initial;}
    .under-menu-wrap > div > div > span{font-size: 0.75rem;}

    /*Footer*/
    .footer-newsletter span{font-size: 1.5rem;}
    .footer-wrap>div{gap:10px;}
    .footer-col-title{font-size: 1rem;}
    .footer-address, .footer-phone{gap:20px;}
    .footer-contact * { font-size: 0.875rem; }
    .footer-menu>li>a { font-size: 0.875rem; }
    .mc-form input[type=submit] {padding: 0 10px;}

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

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

    .product-list { gap: 10px; }
    .product-list .product-block { width: calc((100% - 30px) / 4); }
    .product-block .product-price .main-price { font-size: 1rem; }
    .product-block .product-buttons a { height: 50px; font-size: 1rem; }

    /* ----- DETAILS PAGE ---- */
    .product-notify{padding: 20px;}
    .product-notify > span{font-size: 1.25rem;}

    /* ----- CHECKOUT ---- */
    .checkout-left { padding-right: 10px; padding-left: calc((100vw - 950px) / 2); }
    .checkout-right { padding-left: 10px; padding-right: calc((100vw - 950px) / 2); }
    .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 li { left: 0; }
    .flex-direction-nav li.flex-nav-next { right: 0; }

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

    /*Top Wrap*/
    .top-wrap .top-right{width: 100%; justify-content: space-between;}
    .top-phone{margin: 0; padding: 0; border: 0;}

    /* -- HEADER WRAP -- */
    .header-wrap{height: 67px;}
    .header-wrap>div{gap:0;}
    .header-action{gap:15px;}
    .my-account{border: 0; margin: 0; padding: 0;}
    .site-search{width: 100%}
    .under-menu-wrap{background: var(--secondaryColour);}
    .under-menu-wrap > div > div > span{font-size: 0.75rem;}
    .under-menu-wrap > div > div > span::before{content: none;}

    .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; gap: 5px; flex-direction: column; width: 28px; }
    .menu-toggle>div::before { content: ""; height: 3px; transition: ease-in-out all .3s; width: 28px; background: var(--secondaryColour); border-radius: 6px; }
    .menu-toggle>div::after { content: ""; height: 3px; transition: ease-in-out all .3s; width: 28px; background: var(--secondaryColour); border-radius: 6px; }
    .menu-toggle>div>div { height: 3px; transition: ease-in-out all .3s; width: 28px; background: var(--secondaryColour); border-radius: 6px; }
    .menu-toggle.active>div>div { opacity: 0; }
    .menu-toggle.active>div::before { transform: rotate(45deg) translate(6px, 6px); }
    .menu-toggle.active>div::after { transform: rotate(-45deg) translate(6px, -6px); }

    /* ----- MOBILE MENU ----- */
    .responsive-menu-wrap { opacity: 0; z-index: -1; visibility: hidden; background: #fff; width: 100%; position: absolute; top: 0; 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); font-size: 0.875rem; padding: 10px 15px; font-weight: 400; width: 100%; }
    .responsive-menu-wrap .main-menu-wrap>ul ul { padding: 0; display: none; }
    .responsive-menu-wrap .main-menu-wrap ul li ul li { border-bottom: 1px solid var(--border); }
    .responsive-menu-wrap .main-menu-wrap>ul>li>a { font-weight: 600; justify-content: flex-start; padding: 15px; background: var(--textColour); color: #fff;}
    .responsive-menu-wrap .main-menu-wrap li ul li a { padding: 10px 15px; background:#E9E9E9; }
    .responsive-menu-wrap .main-menu-wrap li ul li ul li a { padding: 10px 30px; background: #F8F8F8; position: relative;}
    .responsive-menu-wrap .main-menu-wrap li ul li ul li a::after{content: ""; height: 10px; width: 10px; transform: rotate(45deg); 
        border: solid  var(--secondaryColour); border-width: 3px 3px 0 0; position: absolute; right: 20px; top: 15px;}

    .responsive-menu-wrap .menu-header { height: 67px; display: flex; align-items: center; background: #fff; padding: 0 15px; }
    .responsive-menu-wrap .menu-header span{font-size: 0.75rem; display: flex; align-items: center; gap:10px;}
    .responsive-menu-wrap .menu-header span::before{content: ""; height: 15px; width: 26px; background: url(../images/van-green.svg) center no-repeat;}

    .responsive-menu-wrap .menu-footer { display: flex; flex-direction: column; gap: 15px; padding: 15px; }
    .responsive-menu-wrap .menu-footer a{color: var(--textColour); font-size: 0.875rem; }
    .responsive-menu-wrap .menu-footer a.close-menu { text-decoration: underline; align-self: flex-end; font-size: 0.75rem; }

    .responsive-menu-wrap .main-menu-wrap>ul li.has-children>a { padding-right: 50px; }
    .responsive-menu-wrap .main-menu-wrap>ul li.has-children>.toggle-sub { height: 50px; width: 50px; position: absolute; right: 0; top: 0; }
    .responsive-menu-wrap .main-menu-wrap>ul li.has-children>.toggle-sub::after { content: ""; height: 10px; width: 10px; border: solid #fff; border-width: 0 3px 3px 0; position: absolute; top: 19px; right: 17px; transform: rotate(45deg); transition: ease-in-out all .3s; }
    .responsive-menu-wrap .main-menu-wrap>ul li.has-children.open>.toggle-sub::after { transform: rotate(225deg); top: 27px; }
    .responsive-menu-wrap .main-menu-wrap>ul>li>ul li.has-children>.toggle-sub::after { border-color: var(--secondaryColour); top: 13px !important; }

    /*Footer*/
    .footer-outro .footer-col-title-payment { align-items: center; padding:0; border: 0;}
    .footer-col-title{font-size: 0.875rem;}
    .footer-menu{gap:10px;}

    .footer-newsletter{padding:30px 0;}
    .footer-newsletter > div{flex-direction: column; text-align: center;}
    .footer-newsletter span{font-size: 1.5rem;}
    .footer-newsletter p{line-height: 1.8;}
    .footer-newsletter > div > div{width: 100%; }
    .mc-form{flex-direction: column; gap: 10px; width: 100%;}
    .mc-form input[type=email]{text-align: center;}
    .mc-form input[type=submit]{width: 100%;}

    /*Byline*/
    .byline-wrap>div{align-items: center;}
    .byline-menu>li{padding: 0 10px; margin:0; line-height: 15px;}
    .byline-wrap>div>a, .byline-menu>li>a { font-size: 0.75rem; }

    /*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: bold; display: flex; align-items: center; justify-content: flex-start; height: 60px; background: #fff; }
    .filter-button:hover { color: #000; }
    .filter-button:before { content: ''; width: 10px; height: 30px; background: transparent no-repeat center; }
    .search-filters.active .filter-button:before { background-image: url(../images/cancel.svg); width: 30px; }
    .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 Filters"; }
    .search-filters { background: #fff; }
    .clear-filters { font-weight: bold; }
    .search-title { flex-direction: column; align-items: flex-start; }
    .search-filters:not(.active) .filters, .search-filters:not(.active) .search-filters-buttons { display: none; }

    /*Details Page*/
    .product-details-wrap .product-title { font-size: 1.75rem; line-height: 34px; }
    .product-meta a { font-size: 0.813rem; }


    /*Checkout*/
    .back-to-shopping-wrap { padding: 0; }
    .checkout-logo { padding: 10px 0; margin: 10px 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: 0.938rem; 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; }

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

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

    /* ----- 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; }
    .container { max-width: 100%; padding: 0 10px; }

    h1 { font-size: 2.625rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.375rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1.125rem; }

    /*Header*/
    .header-wrap .logo img { max-width: 210px; }
    .responsive-menu-wrap { width: 400px; }

    /*Site Search*/
    .header-right { gap: 20px; }

    /*Footer*/
    .footer-wrap>div { flex-wrap: wrap; }
    .footer-contact, .footer-menu>li>a{font-size: 0.75rem;}
    .footer-col, .footer-col.footer-intro { flex: initial; width: calc(25% - 15px); }
    .footer-col.footer-outro { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .footer-phone, .footer-address{flex-direction: column; gap:15px;}
    .footer-phone > div, .footer-address > div{width: 100%; padding: 0 0 0 30px;}

    /* ----- Search Page ----- */
    .search-title h1 { font-size: 1.25rem; }
    .sort-search { width: 235px; }
    .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: 1rem; }
    .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 .cat-title { height: 70px; font-size: 1rem; }

    /*Details Page*/
    .quantity-wrap { width: 130px; }
    .product-notify{padding: 10px;}
    .product-notify > span{font-size: 1rem;}
    .product-notify > p, .product-notify label{font-size: 0.875rem;}

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

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

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

    /*Layout Block*/
    .block-layout-module .layout-inner { width: 100%; }
    .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: 2.25rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    p { font-size: 0.875rem; padding: 5px 0 15px 0; }
    ul, ol { font-size: 0.875rem; }
    img { max-width: 100%; vertical-align: middle; }
    .button-primary, .button-secondary { padding: 0 15px; height:50px; font-size:0.875rem; }

    /*Header*/
    .header-wrap>div { padding: 0 10px; }
    .header-wrap .logo img { max-width: 150px; }

    /*Site Search*/
    .site-search { width: 100%; border-radius: 0; border-width: 1px 0 0 0; }

    /*Footer*/
    .footer-wrap { padding: 30px 0; }
    .footer-wrap>div { flex-direction: column; max-width: 600px; gap: 0; }
    .footer-col { width: 100%; align-items: center; }
    .footer-col-title { font-size: 1.125rem; }
    .footer-col-title, .footer-menu { width: 100%; }
    .footer-col.footer-intro { margin-bottom: 30px; display: flex; flex-direction: column; width: 100%;}
    .footer-contact { gap: 10px; width: 100%; }
    .footer-outro { margin-top: 30px; align-items: center; display: flex; flex-direction: column; }
    .footer-col.footer-outro:last-child .footer-col-title { justify-content: center; align-items: flex-start; margin: 20px 0; }
    .footer-col.footer-outro{align-items: flex-start;}
    .footer-menu-container>h4 { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); line-height: 50px; position: relative; transition: ease-in-out all .3s; margin: 0; font-size:1rem; }
    .footer-col.footer-menu-container>h4::after { content: ""; border: solid var(--textColour); border-width: 0 2px 2px 0; height: 8px; width: 8px; position: absolute; right: 10px; top: 20px; background: no-repeat; border-radius: 0; transform: rotate(45deg); transition: ease-in-out all .3s; }
    .footer-col.footer-menu-container.active>h4::after { transform: rotate(225deg); }
    .footer-wrap>div>div:nth-child(3)>h4, .footer-wrap>div>div:nth-child(4)>h4 { border-top: 0; }
    .footer-menu-container.active h4 { border-bottom-color: transparent; }
    .footer-menu-container.active>h4::after { transform: rotate(45deg); }
    .footer-menu-wrap { display: none; width: 100%;}
    .footer-menu { gap: 15px; margin: 10px 0; }
    .footer-phone, .footer-address{gap:25px;}
    .footer-contact, .footer-menu>li>a, .footer-opening{font-size: 0.875rem;}

    .byline-menu>li { font-size: 0.875rem; }
    .byline-container>a { font-size: 0.75rem; }

    /* ----- 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: 1.5rem; }
    .contact-form .cf-text { font-size: 0.875rem; margin-bottom: 10px; }
    .contact-form label { font-size: 0.875rem; }
    .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; padding:10px 20px; }
    .block-layout-module .layout-block { flex-direction: column; padding: 0; gap: 10px; margin-bottom: 20px;}
    .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%; gap: 10px;}
    .block-layout-module .layout-heading span { font-size: 1.25rem; padding: 0; }
    .block-layout-module .layout-text * {font-size: 0.875rem; padding: 0;}

    /* ----- SHOP MODULES ----- */
    .cm-title span, .pm-title span { font-size: 1.75rem; line-height: 34px; }
    .cm-subtitle span, .pm-subtitle span { font-size: 1rem; line-height: 24px; }
    .category-module.bg-on, .product-module.bg-on { padding: 20px 0; }
    .cm-gal-pagination, .pm-gal-pagination, .ag-pagination { gap: 10px; }
    .cm-gal-pagination span, .pm-gal-pagination span, .ag-pagination span { height: 15px; width: 15px; }
    .cm-gal-pagination span.active, .pm-gal-pagination span.active, .ag-pagination span.active { height: 18px; width: 18px; }

    /* ----- 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-inner-header{flex-direction: column; gap:10px; align-items: flex-start;}
    .search-title h1 { font-size: 20px; line-height: 24px; }
    .search-results-found { font-size: 0.875rem; }
    .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: 0.875rem; }
    .product-list, .category-list { gap: 10px; }

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

    /*Product block*/
    .product-list .product-block, .search-filters+.search-results-container .product-block { width: calc((100% - 10px) / 2); }
    .product-block .product-info{padding: 5px}
    .product-block .product-title a { width: 100%; font-size: 0.875rem; }
    .product-block .product-price .main-price { font-size: 1.125rem; }
    .product-block .product-buttons a { font-size: .875; height: 50px; }
    .product-block .product-price .was-price{font-size: 0.75rem;}
    .product-block .product-price small{font-size: 0.75rem;}

    /*Details Page*/
    .details-page-container { flex-direction: column; }
    .details-header>a { font-size: 0.875rem; }
    .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-details-wrap{padding: 20px 10px;}
    .product-details-wrap .product-title { font-size: 1.5rem; }
    .product-sale-title { font-size: 1.25rem; }
    .product-price .was-price { font-size: 0.75rem; }
    .product-details-wrap .product-price { font-size: 1.5rem; }
    .product-meta{gap:10px;}
    .product-meta a { font-size: 0.75rem; }
    .add-to-cart-row:not(.hidden) { flex-direction: column; align-items: flex-start; }
    .add-to-cart { width: 100%; }
    .add-to-cart{ flex: initial; }

    .pv-pop-up:not(.hidden){width: 100%;}

    .product-description-tab > a{font-size: 1rem; }
    .product-description-tab.active .product-description-content{padding: 10px 20px;}

    .product-notify{padding: 10px;}
    .product-notify > span{font-size: 1rem;}
    .product-notify > p, .product-notify label{font-size: 0.875rem;}
    .associations-wrap{padding: 20px 0;}
    .associations-wrap h2 { font-size: 1.5rem; }

    /*Dashboard*/
    .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%; }

    /*Checkout*/
    .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: 0.75rem; }
    .cart-product-right{flex-wrap: wrap;}

    .payment-header>div>div { width: 100% !important; }
    .payment-content { flex-direction: column; gap: 10px; }
    .payment-content>div { width: 100% !important; }

    .signup-header {height: 70px;}
    .signup-header span{font-size: 1.125rem; }
    .signup-tab-header {font-size: 0.875rem;}
    .signup-tab-header.active:after {bottom: 5px;}
    .signup-page { padding: 0 5px 20px 5px; }
    .signup-bottom { padding: 0 5px; }
    .signup-tab-right > div{margin-top: 0;}

    .member-address { width: 100%; }
    .pop-buttons { flex-direction: column-reverse; gap: 20px; align-items: stretch; }
}

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