/*
Theme Name:   Osito Coffee
Theme URI:    https://www.ositocoffee.com
Description:  A custom theme for Osito Coffee
Author:       Jake Woods
Author URI:   https://jakewoods.io
Template:     generatepress
Version:      0.1
Text Domain:  djw
*/


/** ----------------------------------------
 ** Fonts
 ** ----------------------------------------
/* rubik-900 - latin */
@font-face {
	font-display: swap; 
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 900;
	src: url('./fonts/rubik-v28-latin-900.eot'); 
	src: url('./fonts/rubik-v28-latin-900.eot?#iefix') format('embedded-opentype'),s
		 url('./fonts/rubik-v28-latin-900.woff2') format('woff2'),
		 url('./fonts/rubik-v28-latin-900.woff') format('woff'),
		 url('./fonts/rubik-v28-latin-900.ttf') format('truetype'),
		 url('./fonts/rubik-v28-latin-900.svg#Rubik') format('svg');
  }
  /* rubik-900italic - latin */
  @font-face {
	font-display: swap;
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 900;
	src: url('./fonts/rubik-v28-latin-900italic.eot'); 
	src: url('./fonts/rubik-v28-latin-900italic.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/rubik-v28-latin-900italic.woff2') format('woff2'),
		 url('./fonts/rubik-v28-latin-900italic.woff') format('woff'),
		 url('./fonts/rubik-v28-latin-900italic.ttf') format('truetype'),
		 url('./fonts/rubik-v28-latin-900italic.svg#Rubik') format('svg');
  }

/** ----------------------------------------
 ** Custom Properties
 ** ----------------------------------------
    Sets custom properties to be used
 	repeatedly and consistently across site. 
 ** --------------------------------------- */
:root {
	--headline-font: Rubik, sans-serif;
	/* * CHANGE THIS TO THE HEADLINE FONT SET IN THE CUSTOMISER */
	--body-font: interstate, sans-serif;
	/* * CHANGE THIS TO THE BODY FONT SET IN THE CUSTOMISER */
	--headline-font-weight: 900;
	--button-font-weight: 700;
	--body-font-weight: 500;
	--headline-display-1: 132px;
	--headline-display-2: 80px;
	--headline-h1: 64px;
	--headline-h2: 40px;
	--headline-h3: 38px;
	--headline-h4: 20px;
	--headline-h5: 18px;
	--headline-h6: 16px;
	--headline-h7: 16px;
	--body-l: 20px;
	--body: 16px;
	--body-caption: 12px;
	--space-inline: 40px;
	--space-xxxs: 8px;
	--space-xxs: 12px;
	--space-xs: 16px;
	--space-s: 20px;
	--space-m: 24px;
	--space-d: 32px;
	--space-l: 40px;
	--space-xl: 48px;
	--space-xxl: 64px;
	--space-xxxl: 80px;
	--width-xs: 576px;
	--width-s: 768px;
	--width-m: 870px;
	--width-tb: 1024px;
	--width-l: 1144px;
	--width-xl: 1350px;
	--width-d: 1600px; /** Standard section width - set in customiser - update here if changed! **/
	--width-max: 1920px;
}

@media(min-width: 769px) and (max-width: 1024px) {
	:root {
		--space-inline: 30px;
	}
}

@media(max-width: 768px) {
	:root {
		--headline-display-1: 44px;
		--headline-display-2: 40px;
		--headline-h1: 40px;
		--headline-h2: 30px;
		--headline-h3: 32px;
		--body: 18px;
		--space-inline: 20px;
	}
}


/** ----------------------------------------
 ** Helper Classes
 ** ----------------------------------------
    Useful classes to do specfic things.
 ** --------------------------------------- */

/* Used to remove elements visually while preserving them in the DOM for SEO */
.hide-me {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}

/* No Underline */
.no-ul,
.no-ul a {
	text-decoration: none;
}


/** ----------------------------------------
 ** Base Theme Overrides
 ** ----------------------------------------
    Sets custom properties to be used
 	repeatedly and consistently across site. 
 ** --------------------------------------- */

/* Mobile Menu Trigger Button */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
	background-color: transparent;
}


/** ----------------------------------------
 ** Typography
 ** ----------------------------------------
    Sets the global typography
 ** --------------------------------------- */
/* Default Body / p font settings */
p {
	font-family: var(--body-font);
	font-size: var(--body);
	font-weight: var(--body-font-weight);
	line-height: 1.5;
	margin-bottom: 1.5rem;
}

/* Default Headings weight, margin, font-family */
h1,
h2,
h3,
h4,
h5,
h6,
.headline-display-1,
.headline-display-2,
.headline-h1,
.headline-h2,
.headline-h3,
.headline-h4,
.headline-h5,
.headline-h6,
.headline-h7 {
	color: var(--text-brand);
	font-family: var(--headline-font);
	font-weight: var(--headline-font-weight);
	margin-bottom: 1rem;
	text-transform: uppercase;
}

/* Heading font-size and line-height */
.headline-display-1 {
	font-size: var(--headline-display-1);
	line-height: 0.8;
}

.headline-display-2 {
	font-size: var(--headline-display-2);
	letter-spacing: -3.2px;
	line-height: 0.95;
}

h1,
.headline-h1 {
	font-size: var(--headline-h1);
	line-height: 0.88;
}

h2,
.headline-h2 {
	font-size: var(--headline-h2);
	line-height: 0.88;
}

h3,
.headline-h3 {
	font-size: var(--headline-h3);
	line-height: 0.88;
}

h4,
.headline-h4 {
	font-family: var(--body-font);
	font-size: var(--headline-h4);
	font-weight: var(--button-font-weight);
	line-height: auto;
}

h5,
.headline-h5 {
	font-family: var(--body-font);
	font-size: var(--headline-h5);
	font-weight: var(--button-font-weight);
	line-height: auto;
}

h6,
.headline-h6 {
	font-family: var(--body-font);
	font-size: var(--headline-h6);
	font-weight: var(--button-font-weight);
	line-height: auto;
}

.headline-h7 {
	font-size: var(--headline-h7);
	line-height: 1.5;
}


/* Additional Body font-size */
.body-l,
.body-d,
.body-caption,
.body-flag {
	color: var(--text-default);
	font-family: var(--body-font);
}

.body-l {
	font-size: var(--body-l);
	letter-spacing: -0.2px;
	line-height: 1.5;
}

.body-d {
	font-size: var(--body);
	line-height: 1.5;
}

.body-caption,
.body-flag {
	font-size: var(--body-caption);
	letter-spacing: 2.5px;
	line-height: 1;
}


/* Add top margin to blog post H2-H6 */
.single-post #post-content :is(h2, h3, h4, h5, h6) {
	margin-top: 3rem;
}

.single-post #post-content p {
	line-height: 1.8;
}

p:last-child {
	margin-bottom: 0;
}

/* Remove bottom margin on last paragraph in container (front end) */
.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

/* Remove bottom margin on last paragraph in container (editor) */
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}

/* * List Styles */
#content ul,
#content ol {
	margin-left: 1.25rem;
}

#content li {
	font-family: var(--body-font);
	font-size: var(--body);
	font-weight: var(--body-font-weight);
	line-height: 1.75rem;
}


/** ----------------------------------------
 ** Links
 ** ----------------------------------------
    Basic link styles are set in the customiser
	but you can extend them here
 ** --------------------------------------- */
a,
p a,
.inside-article a,
.paging-navigation a,
.comments-area a,
.page-header a {}

a:hover,
p a:hover,
.inside-article a:hover,
.paging-navigation a:hover,
.comments-area a:hover,
.page-header a:hover {}

.inside-article a:not(.gb-button) {
	color: var(--primary);
}

.inside-article a:not(.gb-button):hover {
	color: var(--secondary);
}


/** Clickable Parent **/
.clickable-parent {
	position: relative;
}

.clickable-parent a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.clickable-parent:focus-within {
	outline: -webkit-focus-ring-color auto 1px;
}

.clickable-parent:focus-within :focus {
	box-shadow: none;
	outline: none;
}



/** ----------------------------------------
 ** Header & Main Navigation
 ** ----------------------------------------
    Styles the site masthead
 ** --------------------------------------- */
#masthead {
	border-bottom: 1px solid var(--border-subtle);
}

/* Logo */
#masthead .inside-header .site-logo {
	
}

/* Main Navigation */
.nav-float-right #site-navigation {
	border-left: 1px solid var(--border-subtle);
    margin-left: var(--space-inline);
	width: 100%;
	z-index: initial;
}

.nav-float-right #site-navigation .inside-navigation {
	max-width: 10000px;
	width: 100%;
}

.nav-float-right #site-navigation .inside-navigation .main-nav {
	flex-grow: 2;
}

/* Main Navigation - Items */
#site-navigation .inside-navigation ul.menu li.menu-item {
	flex-grow: 1;
	
}

#site-navigation .inside-navigation ul.menu li.menu-item a {
	border-right: 1px solid var(--border-subtle);
	padding-inline: var(--space-inline);
	text-align: center;
}

/* Sticky Nav */
 .site-header,
#sticky-navigation {
	padding-inline: var(--space-inline);
}

/* Mobile nav breakpoint 1060px */
@media (max-width: 1060px) {
	#masthead {
		border-bottom: none;
	}

	.site-header {
		padding-block: var(--space-m);
		padding-inline: var(--space-inline);
	}

	/* Menu Toggle Button */
	#mobile-menu-control-wrapper button.menu-toggle {
		padding-inline: var(--space-xxs);
		margin-left: var(--space-xs);
	}

	#mobile-menu-control-wrapper button.menu-toggle svg {
		height: var(--space-m);
		width: var(--space-m);
	}

	/* Enquiry Panel Toggle Button */
	#mobile-menu-control-wrapper .mobile-header-enquiry-count {
		display: flex;
		flex-direction: center;
		justify-content: center;
	}
	
	#mobile-menu-control-wrapper button.enquiry-slideout-open__mobile {
		padding: 0;
	}
}


/** ----------------------------------------
 ** Mobile Navigation
 ** ----------------------------------------
    Styles the mobile navigation
 ** --------------------------------------- */
/** Slideout Panel **/
#generate-slideout-menu .inside-navigation {
	height: 100%;
	justify-content: flex-start;
	row-gap: 20px;
}

.slide-opened body,
body.slide-opened { 
	overflow: hidden; 
}


/** Slideout Close **/
#generate-slideout-menu .inside-navigation .slideout-exit {
    align-items: center;
    align-self: flex-start;
    display: flex;
    column-gap: 8px;
	padding-block: 0;
	padding-inline: var(--space-inline);
	
}
#generate-slideout-menu .inside-navigation .slideout-exit:before {
    color: var(--text-inverse-default);
    content: 'Close ';
    font-family: var(--body-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    content: 'Close '
}

#generate-slideout-menu .inside-navigation .slideout-exit svg {
    height: 0.75rem;
	top: 0;
    width: 0.75rem;
}

@media (min-width: 768px) {
	#generate-slideout-menu .inside-navigation .slideout-exit {
		position: initial;
	}
}


/** Slideout Logo **/
#generate-slideout-menu .inside-navigation .slideout-logo {
	align-self: flex-start;
	padding-inline: var(--space-inline);
}

#generate-slideout-menu .inside-navigation .slideout-logo img {
	width: 96px;
}


/** Slideout Menu **/
#generate-slideout-menu .inside-navigation {
	padding-block: var(--space-inline);
	padding-inline: 0;
}

#generate-slideout-menu .inside-navigation .main-nav {
	flex-grow: 2;
	margin-inline: 0;
	margin-bottom: 0;
	padding-inline: var(--space-inline);
	width: 100%;
}

#generate-slideout-menu .inside-navigation .main-nav ul.slideout-menu {
	align-items: flex-start;
	border: 1px solid var(--brand);
	display: flex;
	flex-direction: column;
	height: 100%;
}

#generate-slideout-menu .inside-navigation .main-nav ul.slideout-menu li {
	border-bottom: 1px solid var(--brand);
	flex-grow: 1;
	padding: var(--space-xxs) var(--space-inline);
	margin-bottom: 0;
	text-align: left;

}
#generate-slideout-menu .inside-navigation .main-nav ul.slideout-menu li:last-child {
	border-bottom: 0;
}

#generate-slideout-menu .inside-navigation .main-nav ul.slideout-menu li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding-inline: 0;
	width: 100%;
}


/** Slideout Footer **/
#generate-slideout-menu .inside-navigation #slideout-socials .djwb--social-navigation {
    border: 1px solid var(--brand);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#generate-slideout-menu .inside-navigation #slideout-socials .djwb--social-navigation .djwb--social-navigation--item {
    border-right: 1px solid var(--brand);
    flex-grow: 1;
    padding: 16px 12px;
}

#generate-slideout-menu .inside-navigation #slideout-socials .djwb--social-navigation .djwb--social-navigation--item:last-child {
    border-right: none;
}

#generate-slideout-menu .inside-navigation #slideout-socials .djwb--social-navigation .djwb--social-navigation--item .djwb--social-navigation--link svg {
    height: 45px;
    width: 45px;
}



/** ----------------------------------------
 ** Language Switcher
 ** ----------------------------------------
    Styles the Mobile and Desktop language 
	switchers
 ** --------------------------------------- */
/** DESKTOP LANGUAGE SWITCHER */
#header-language-switch .country-selector {
	align-items: flex-start;
	display: flex;
	justify-content: flex-start;
}

#header-language-switch .wg-li a,
#header-language-switch span.wglanguage-name {
	
	font-size: 16px;
}

#header-language-switch span.wglanguage-name {
	border-bottom: 1px solid var(--brand);
	color: var(--text-default);
	font-weight: 700;
}

#header-language-switch .wg-li {
	margin: 0;
	vertical-align: initial;
}

#header-language-switch .wg-li a {
	color: var(--text-hint);
}

/** MOBILE LANGUAGE SWITCHER */
#slideout-language aside.country-selector {
	border: 1px solid var(--brand);
	display: flex;
	width: 100%;
}

#slideout-language aside.country-selector > * {
	align-items: center;
	display: flex;
	justify-content: center;
	flex-grow: 1;
	padding: 20px 40px;
}

#slideout-language aside.country-selector label {
	background-color: var(--brand);
	border-right: 1px solid var(--brand);
	font-weight: 700;
	
}

#slideout-language aside.country-selector ul li {
	margin: 0;
}
#slideout-language aside.country-selector ul li a {
	color: var(--text-hint);
	font-weight: 400;
}



/** ----------------------------------------
 ** Footer
 ** ----------------------------------------
    Styles the site footer
 ** --------------------------------------- */

/** Footer Logo **/
.main-footer__logo--wrap img {
	width: 135px;
}


/** Footer Navigation **/
@media (min-width: 768px) {
	.main-footer__nav--footer-nav ul.menu {
		column-gap: var(--space-xl);
		flex-wrap: wrap;
		max-height: 180px;
	}
}

@media (max-width: 767px) {
	.main-footer__nav--footer-nav ul.menu {
		margin-bottom: var(--space-xxl);
	}

	#footer-content ul.menu li a {
		color: var(--black);
	}
}


/** Footer Social Nav **/
@media(max-width: 767px) {
	.main-footer__socials--social-nav {
		justify-content: space-between;
	}
}

/** Footer Headlines */
@media (max-width: 767px) {
	#footer-content .main-footer__headline {
		font-weight: 400;
	}
}



/** ----------------------------------------
 ** Forms
 ** ----------------------------------------
    Basic styles for Fluent Forms
 ** --------------------------------------- */

/** Labels **/
form.frm-fluent-form label {
	color: var(--brand);
	font-family: var(--body-font);
	font-weight: 700!important;
	text-transform: uppercase;
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
	color: var(--brand);
}

form.frm-fluent-form .ff-el-input--label {
	margin-bottom: 10px;
}

/** Inputs, Text Areas & Selects **/
form.frm-fluent-form input,
form.frm-fluent-form textarea,
form.frm-fluent-form select,
form.frm-fluent-form select option {
	background-color: transparent;
	border-color: var(--border-bold)!important;
	border-radius: 0!important;
	color: var(--text-default);
	font-family: var(--body-font)!important;
	font-size: var(--body)!important;
	padding: var(--space-m)!important;
	-webkit-border-radius: 0!important;
	-moz-border-radius: 0!important;
	-ms-border-radius: 0!important;
	-o-border-radius: 0!important;
}

select.ff-el-form-control:not([size]):not([multiple]) {
    height: auto!important;
}

form.frm-fluent-form input::placeholder,
form.frm-fluent-form textarea::placeholder,
form.frm-fluent-form select::placeholder {
	color: var(--text-hint)!important;
}

form.frm-fluent-form input:focus,
form.frm-fluent-form textarea:focus,
form.frm-fluent-form select:focus {
	background-color: transparent!important;
	border-color: var(--brand)!important;
	color: var(--text-default)!important;
}

select.ff-el-form-control:not([size]):not([multiple]) {
	height: auto;
}

form.frm-fluent-form select option:first-child {
	color: var(--text-default);
}

/** Submit Button **/
form.frm-fluent-form .ff_submit_btn_wrapper {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	form.frm-fluent-form button.ff-btn-submit {
		width: 100%;
	}
}


/** Mailing List Signup Form **/
#fluentform_4 input {
	line-height: 1.5;
	padding: 14px var(--space-xxs) var(--space-xxs)!important;
}

#fluentform_4 .ff-column-container .ff-t-column-1 {
	flex-grow: 2;
}

#fluentform_4 button.ff-btn-submit {
	width: 100%;
}

@media (max-width: 768px) {
	#fluentform_4 .signup-form__input-wrapper {
		margin-bottom: var(--space-xxs);
	}

	#fluentform_4 .signup-form__submit-wrapper {
		margin-bottom: 0;
	}
}


/** ----------------------------------------
 ** Section Spacing
 ** ----------------------------------------
    Global Styles for section spacings
 ** --------------------------------------- */
.section>div {
	width: 100%;
}

.section.space-xxxl {
	row-gap: var(--space-xxxl);
}

.section.space-xxl {
	row-gap: var(--space-xxl);
}

.section.space-xl {
	row-gap: var(--space-xl);
}

.section.space-l {
	row-gap: var(--space-l);
}

.section.space-d {
	row-gap: var(--space-d);
}

.section.space-m {
	row-gap: var(--space-m);
}

.section.space-s {
	row-gap: var(--space-s);
}

.section.space-xs {
	row-gap: var(--space-xs);
}

.section.space-xxs {
	row-gap: var(--space-xxs);
}


/** ----------------------------------------
 ** Grids
 ** ----------------------------------------
    An auto responsive CSS grid
 ** --------------------------------------- */
.grid {
	--_multiplier: 0.8;

	--_col-width: calc(var(--container-width, var(--width-max)) - (var(--col-gap, var(--space-s)) * (var(--col-count, 1) - 1)));
	--_column-width: calc(var(--_col-width) / var(--col-count, 1));
	--_template_column: calc(var(--_column-width) * var(--_multiplier));

	display: grid;
	grid-template-columns: repeat(auto-fit,
			minmax(min(var(--_template_column, 300px), 100%), 1fr));
	gap: var(--col-gap, var(--space-s));
}

/** GRID GAP **/
.grid__gap--xs {
	--col-gap: var(--space-xs);
}

.grid__gap--s {
	--col-gap: var(--space-s);
}

.grid__gap--m {
	--col-gap: var(--space-m);
}

.grid__gap--d {
	--col-gap: var(--space-d);
}

.grid__gap--l {
	--col-gap: var(--space-l);
}

.grid__gap--xl {
	--col-gap: var(--space-xl);
}

.grid__gap--xxl {
	--col-gap: var(--space-xxl);
}

/** COLUMNS **/
.grid__col--1 {
	--col-count: 1;
}

.grid__col--2 {
	--col-count: 2;
}

.grid__col--3 {
	--col-count: 3;
}

.grid__col--4 {
	--col-count: 4;
}

.grid__col--5 {
	--col-count: 5;
}

.grid__col--6 {
	--col-count: 6;
}

.width-xs {
	--container-width: var(--width-xs);
}

.width-s {
	--container-width: var(--width-s);
}

.width-m {
	--container-width: var(--width-m);
}

.width-tb {
	--container-width: var(--width-tb);
}

.width-d {
	--container-width: var(--width-d);
}

.width-l {
	--container-width: var(--width-l);
}

.width-xl {
	--container-width: var(--width-xl);
}

.width-max {
	--container-width: var(--width-max);
}



/** ----------------------------------------
 ** Search Block - Gutenberg
 ** ----------------------------------------
    Custom styles for the WP Search Block
 ** --------------------------------------- */

/** Label **/
.wp-block-search label.wp-block-search__label {
	display: block;
	font-family: var(--body-font);
	font-size: var(--body);
	margin-bottom: 0.75rem;
}

/* No search results */
.no-search-results .wp-block-search label.wp-block-search__label,
.error404 .wp-block-search label.wp-block-search__label {
	text-align: center;
}

/** Search Field **/
.wp-block-search .wp-block-search__inside-wrapper {
	display: flex;
}

.wp-block-search input.wp-block-search__input {
	background-color: var(--background-page);
	border: 1px solid var(--border-bold);
	font-size: var(--body);
	padding: var(--space-s);
	width: 100%;
}

.wp-block-search input.wp-block-search__input::placeholder {
	color: var(--text-hint);
}

.wp-block-search input.wp-block-search__input:focus {
	border-color: var(--brand);
}

/** Search Button **/
.wp-block-search button.wp-block-search__button {
	background-color: var(--brand);
	color: var(--background-page);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-block-search button.wp-block-search__button svg {
	fill: var(--background-page);
	height: var(--space-d);
	width: var(--space-d);
}

/** Templates - 404 **/
.error404 .wp-block-search {
	max-width: 500px;
	width: 100%;
}



/** ----------------------------------------
 ** Post Single Template
 ** ----------------------------------------
    Custom styles for the Post Single 
	Template
 ** --------------------------------------- */
.post-hero__post-meta--text p {
	font-family: var(--body-font);
	font-size: var(--body-l);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.2px;
	line-height: 1.5;
}

#post-content .wp-block-image {
	border: 1px solid var(--border-subtle);
	margin-bottom: var(--space-m);
	padding: var(--space-m);
}

@media (max-width: 767px) {
	#post-content .wp-block-image {
		padding: var(--space-s);
	}

	#post-content .wp-block-image img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}



/** ----------------------------------------
 ** Home Page - Custom Styles
 ** ----------------------------------------
    Custom styles for the Home Page
 ** --------------------------------------- */

/** Journal Queries **/
.journal-query-item__grid {
	height: 100%;
}



/** ----------------------------------------
 ** Offer List - Custom Styles
 ** ----------------------------------------
    Custom styles for the Offer List
 ** --------------------------------------- */
.offer-list__item {
	cursor: pointer;
}

.offer-list__outer-grid .gb-query-loop-item.type-coffee:first-child {
	border-top: 1px solid var(--brand-subtle);
}

/** Offer List Controls **/

/** Offer List Controls - BUTTONS **/
.offer-list__filter-button-wrap {
	display: none;
}

/** Offer List Controls - FILTERS **/
#offer-list-controls .wpgb-facet {
	flex-shrink: 1;
}

#offer-list-controls .wpgb-facet fieldset {
	margin-bottom: 0;
	padding: var(--space-xxxs) var(--space-xxs);
}

#offer-list-controls .wpgb-facet .wpgb-select,
#offer-list-controls .wpgb-facet-title {
	border: 0;
	color: var(--text-subtle);
	font-family: var(--body-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.0;
}

#offer-list-controls .wpgb-facet .wpgb-select {
	display: inline-block;
	padding: 0;
	width: auto;
    overflow: hidden;
}

#offer-list-controls .wpgb-facet .wpgb-select-controls {
	position: static;
}

#offer-list-controls .wpgb-facet .wpgb-select-controls svg {
	fill: var(--text-hint);
}

#offer-list-controls .wpgb-facet-title {
	color: var(--text-hint);
	margin-bottom: 0;
	text-transform: capitalize;
}

#offer-list-controls .wpgb-facet .wpgb-select-separator {
	display: none;
}

#offer-list-controls .wpgb-facet-6 {
	align-items: center;
	display: flex;
}


/** Offer List Controls - BUTTON **/
#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__has-items {
	background-color: var(--brand);
	color: var(--background-page);
}

#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__has-items svg {
	fill: var(--background-page);
}

/* No Items Selected */
#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__no-items svg.enquiry-slideout-open__icon--no-items {
	display: block;
}
#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__no-items svg.enquiry-slideout-open__icon--has-items {
	display: none;
}

/* Items Selected */
#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__has-items svg.enquiry-slideout-open__icon--has-items {
	display: block;
}
#offer-list-controls button#desktop-enquiry-slideout-trigger.enquiry-slideout-open__has-items svg.enquiry-slideout-open__icon--no-items {
	display: none;
}

@media (max-width: 1580px) {
	.offer-list__enquiry-button-wrap {
		margin-left: 0!important;
	}
}

@media (max-width: 1066px) {
	.offer-list__enquiry-button-wrap {
		display: none;
	}
	
	.offer-list__filter-button-wrap {
		display: block;
	}
	
	.offer-list__filter-wrap {
		display: none!important;
	}
}

/** Offer list Item - Buttons **/
.offer-list__item--button .gb-icon {
	cursor: pointer;
	pointer-events: none;
}

/* Desktop */
@media (min-width: 1024px) {
	.offer-list__item--button[aria-pressed="false"] svg.offer-list__item--button-icon {
		display: block;
	}
	.offer-list__item--button[aria-pressed="false"] svg.offer-list__item--button-icon--pressed {
		display: none;
	}

	.offer-list__item--button[aria-pressed="true"] svg.offer-list__item--button-icon {
		display: none;
	}
	.offer-list__item--button[aria-pressed="true"] svg.offer-list__item--button-icon--pressed {
		display: block;
	}
}

/* Mobile & Tablets */
@media (max-width: 1024px) {
	.offer-list__item--button[aria-pressed="true"] {
		border: 1px solid var(--brand);
	}

	.offer-list__item--button[aria-pressed="true"] svg path {
		fill: var(--brand);
	}
}



/** ----------------------------------------
 ** Coffee Modal - Custom Styles
 ** ----------------------------------------
    Custom styles for the Coffee Information
	Modal
 ** --------------------------------------- */
.coffee-modal {
	z-index: 1000!important;
}

/* Pointer styles */
.coffee-modal__close-btn {
	cursor: pointer;
}



/** ----------------------------------------
 ** Enquiry Sldeout - Custom Styles
 ** ----------------------------------------
    Custom styles for the enquiry slideout
	panel
 ** --------------------------------------- */

/** Enquiry Slideout **/
.enquiry-slideout {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
	width: 100%;
	z-index: 150000;
}

.enquiry-slideout.is-open {
	transform: translateX(0);
}

.enquiry-slideout__overlay {
    height: 100vh;
	flex-grow: 1;
}

.enquiry-slideout__panel {
	box-shadow: 0px 3px 6px 0px rgba( 27,26,3, 0.15 ), 0px 10px 20px 0px rgba( 27,26,3, 0.1 );
	overflow-y: auto;
}

/** Enquiry List Styles **/

#enquiry-panel .selected-coffee {
	margin: 0;
}

#enquiry-panel li#selected-coffee-template {
	display: none;
}

#enquiry-panel .selected-coffee li.selected-coffee__item {
	align-items: center;
	border-top: 1px solid var(--brand-subtle);
	column-gap: var(--space-l);
	display: flex;
	justify-content: space-between;
	padding: var(--space-m); 
}

/* Item Text */
#enquiry-panel .selected-coffee li.selected-coffee__item h3 {
	color: var(--text-bold);
	font-family: var(--body-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.0;
	margin-bottom: 0;
	text-transform: capitalize;
}
#enquiry-panel .selected-coffee li.selected-coffee__item p {
	color: var(--text-hint);
	font-family: var(--body-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.0;
	margin-bottom: 0;
	text-transform: capitalize;
}

/* Item Button */
#enquiry-panel .selected-coffee li.selected-coffee__item button.selected-coffee__item--button {
	background-color: var(--transparent);
	border: 1px solid var(--border-bold); 
	display: flex;
	padding: 0;
}

#enquiry-panel .selected-coffee li.selected-coffee__item button.selected-coffee__item--button .gb-icon,
#enquiry-panel .selected-coffee li.selected-coffee__item button.selected-coffee__item--button svg {
	fill: currentColor;
	height: 28px;
	width: 28px;

}

/** Enquiry Form Styles */
.enquiry-slideout__form--submit-btn {
	width: 100%;
}

@media (max-width: 500px) {
	#enquiry-panel {
		max-width: 100%;
	}
}

.ff-el-repeater[data-name="coffees"]{
	display: none;
}


/** ----------------------------------------
 ** Filter Sldeout - Custom Styles
 ** ----------------------------------------
    Custom styles for the filter slideout
	panel
 ** --------------------------------------- */
/** Filter Slideout **/
.filter-slideout {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
	width: 100%;
    z-index: 150000;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
}

.filter-slideout.is-open {
	transform: translateX(0);
}

.filter-slideout__overlay {
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.filter-slideout__panel {
	background-color: var(--background-inverse);
	box-shadow: 0px 3px 6px 0px rgba( 27,26,3, 0.15 ), 0px 10px 20px 0px rgba( 27,26,3, 0.1 );
    display: flex;
	flex-direction: column;
    height: 100vh;
	justify-content: flex-start;
    overflow-y: auto;
    padding: var(--space-l) var(--space-m);
	position: relative;
    width: 360px;
}



@media (max-width: 500px) {
	#filter-panel {
		max-width: 100%;
	}
}


/** Filter Slideout - Facets **/
#filter-panel .wpgb-facet fieldset {
	margin-bottom: 0;
}

#filter-panel .filter-slideout__filter-wrap .wpgb-facet fieldset {
	margin-bottom: var(--space-xxs);
}

/* Facet Titles */
#filter-slideout .wpgb-facet .wpgb-facet-title {
	color: var(--white);
	font-family: var(--body-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-transform: capitalize;
}


/* Selects */
#filter-slideout .wpgb-facet .wpgb-select {
	border: 1px solid var(--text-inverse-subtle);
	border-radius: 0;
	color: var(--text-inverse-subtle);
	font-family: var(--body-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
}

#filter-slideout .wpgb-facet .wpgb-select-controls {
	color: var(--text-inverse-subtle);
}

#filter-slideout .wpgb-facet .wpgb-select-controls .wpgb-select-separator {
	display: none;
}

/* Checkboxes */
#filter-slideout .wpgb-facet .wpgb-hierarchical-list {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
}

#filter-slideout .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox-control {
	background: var(--background-inverse);
	border: 1px solid var(--text-inverse-subtle);
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
}

#filter-slideout .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control {
	background-color: var(--background-inverse);
	border-color: var(--brand);
}

.wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control:before {
    background-color: var(--brand);
    border: none;
    border-radius: 2px;
    height: 14px;
    transform: scale(1);
    width: 14px;
}

#filter-slideout .wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control:after {
	border: solid var(--background-inverse);
	border-width: 0px 3px 3px 0;
	height: 9px;
    width: 5px;
	z-index: 2;
}

#filter-slideout .wpgb-facet .wpgb-checkbox:focus {
	border: 0;
}

#filter-slideout .wpgb-facet .wpgb-checkbox .wpgb-checkbox-label {
	color: var(--text-inverse-subtle);
	font-family: var(--body-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	padding-left: 10px;
}

#filter-slideout .wpgb-facet .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-label {
	color: var(--text-inverse-default);
}

/* Radios */
#filter-slideout .wpgb-facet .wpgb-radio .wpgb-radio-control {
	border-color: var(--text-inverse-subtle);
	border-width: 1px;
}

#filter-slideout .wpgb-facet .wpgb-radio[aria-pressed="true"] .wpgb-radio-control {
	border-color: var(--brand);
}

#filter-slideout .wpgb-facet .wpgb-radio .wpgb-radio-control:after {
	background-color: var(--brand);
	border: 2px solid transparent;
}

#filter-slideout .wpgb-facet .wpgb-radio .wpgb-radio-label {
	color: var(--text-inverse-subtle);
	font-family: var(--body-font);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	padding-left: 10px;
}

#filter-slideout .wpgb-facet .wpgb-radio[aria-pressed="true"] .wpgb-radio-label {
	color: var(--text-inverse-default);
}

/** Filter Panel - Buttons **/
#filter-slideout .filter-slideout__buttons-wrap {
	padding: var(--space-m);
	position: fixed;
	top: calc(100vh - 170px); 
	left: 0;
    width: 360px;
	z-index: 160000;
}

#filter-slideout .filter-slideout__buttons-wrap .wpgb-facet  {
	width: 50%;
}

#filter-slideout .filter-slideout__buttons-wrap .wpgb-facet button.wpgb-button {
	background-color: var(--background-inverse);
	border: 1px solid var(--brand);
	border-radius: 0;
	color: var(--text-inverse-default);
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	margin-bottom: 0;
	padding: 14px 24px 12px;
	width: 100%;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
}

@media (max-width: 500px) {
	#filter-slideout .filter-slideout__buttons-wrap {
		width: 100%;
	}
}