@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@media (max-width: 599px) {
	html {
	    scroll-behavior: unset !important;
	}
}

b, strong {
    font-weight: bold;
}

body, button, input, textarea {
    font-family: Montserrat, helvetica, arial, sans-serif !important;
}

body:after{
      content:'';
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      /*background: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc50-background.png') center center;*/
      background-size: cover;
}

body.page-template-page-sc50-product-list:after {
	content: unset;
}

.page {
	max-width: unset;
}

html {
	font-size: 16px !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: unset !important;
	/* margin: 24px 0 !important; */
}

h1 {
	font-size: 20px !important;
	padding: 12px !important;
	margin: 0 !important;
}

h2 {
	padding: 2px 16px 8px;
	margin: 0 0 5px 0 !important;
	font-size: 36px;
	text-align: center;
	background-color: var(--wp--preset--color--slate-grey);
	color: white;
	display: inline-block;
}

h3 {
	font-size: 24px;
}

rel {
	font-size: 20px;
	margin-top: 15px !important;
	border-top: 2px solid var(--wp--preset--color--slate-grey);
	padding-top: 20px;
}

h3.has-background {
	padding: 5px;
}

h4 {
	font-size: 18px;
	margin-bottom: 2px !important;
	/* margin-top: 10px !important; */
}

p, li {
	line-height: 1.5 !important;
}

table {
	font-size: 18px;
}

th {
	text-transform: none;
	line-height: 1.2;
	font-weight: normal;
	border-color: #4b4f54 !important;
}

td {
	font-weight: bold;
	border-color: #4b4f54 !important;
}


.wp-block-gallery.has-nested-images.sponsors-level-2 figure.wp-block-image:not(#individual-image) {
	max-width: calc((100% - 48px) / 3);
}

@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
        max-width: calc((100% - 96px) / 5);
    }
}

.wp-block-gallery.has-nested-images.sponsors-level-3 figure.wp-block-image:not(#individual-image) {
	max-width: calc((100% - 72px) / 4);
}

@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
        max-width: calc((100% - 120px) / 6);
    }
}


@media (max-width: 480px) {
	[class^="wp-block-"] figcaption, [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
		/* font-size: 22px !important; */
	}
}
.site-main {
	justify-content: center;
}

.content-area {
    width: 50vw;
}

.page-template-page-sc50-product-list .content-area {
	width: auto;
}

.site-content {
	background-attachment: fixed;
}

.site-content article {
	padding: 0;
	margin: 0;
}

.festival-home article.page {
	background-color: #ffffff00;
}

.entry-content a:hover,
.comment-content a:hover {
	opacity: 1 !important;
}

mark {
	padding: 1px 5px 3px;
	white-space: nowrap;
}

.wp-block-buttons {
	margin-bottom: 30px;
}

.wp-block-button .wp-block-button__link, 
.entry-content .wp-block-button .wp-block-button__link:active {
    border: none;
}

.wp-block-file:not(.wp-element-button) {
	font-size: unset;
}

#admission mark {
	padding: 0;
}

.stuck {
  position: fixed;
  max-width: 604px;
  width: 100%;
  top: 0;
  z-index: 100;
  border-top: 0;
}

#sc-menu.scrolled-past {
	position: sticky !important;
	top: 0;
    z-index: 1;
    overflow: hidden;
}

#sc-menu.scrolled-past:not(.open) {
	pointer-events: none;
}

#sc-menu .elementor-button {
    display: block !important;
}

#sc-menu #sc-menu-button {
	pointer-events: auto;
	z-index: 1;
}

#sc-menu #sc-menu-button a {
	pointer-events: none;
	z-index: 1;
	transition: none;
}

#sc-menu.scrolled-past #sc-menu-button a {
	pointer-events: auto;
}

#sc-menu.scrolled-past:not(.open) #sc-menu-button a {
	background: none;
}

#sc-menu.scrolled-past:not(.open) #sc-menu-button .elementor-button-text {
	opacity: 0;
}

#sc-menu.scrolled-past #sc-menu-button .elementor-button-content-wrapper {
	overflow: hidden;
}

#sc-menu:not(.scrolled-past) #sc-menu-button .elementor-button-icon {
	display: none;
}

#sc-menu.scrolled-past #sc-menu-button .elementor-button-icon {
	background: lightsteelblue;
	position: absolute;
	width: 56px;
	height: 56px;
	line-height: 56px;
	border-radius: 50%;
	top: -10px;
	right: -10px
}

#sc-menu.scrolled-past:not(.open) #sc-menu-items {
	opacity: 0;
}

.sc-menu {
	position: fixed;
	left: 0;
	top: 0;
	overflow-y: auto;
	height: 100vh;
	pointer-events: none;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	background-color: #f1f1f1e6;
}

.sc-menu.sc-menu-expanded {
	pointer-events: all;
}



.sc-menu .ib-block-toc {
	pointer-events: all;
}

.sc-menu .ib-block-toc a {
	text-decoration: none !important;
}

.sc-menu .ib-block-toc a:hover {
	text-decoration: underline !important;
}

.sc-menu .ib-toc-container{
	width: 380px;
}


.sc-menu .ib-toc-header {
	background-color: white;
	box-shadow: 0 5px 8px 0 #00000020;
	width: 380px;
	height: 52px;
	position: fixed;
	font-size: 24px;
	color: var(--wp--preset--color--slate-grey);
	align-items: center;
	justify-content: center !important;
	left: 0;
}

.sc-menu .ib-toc-header:before {
	content: '';
}
#product-list-nav .ib-toc-header:before {
	content: none;
	
}
.sc-menu .ib-toc-header:before,
#sc-logo {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc50-logo-simple.svg');
	background-size: cover;
	background-position: center;
	width: 50px;
	height: 35px;
}
#sc-logo {
	border: none;
}

.sc-menu .ib-toc-separator {
	display: none;
}


.sc-menu .ib-toc-header-title {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 800;
	border-left: 3px solid var(--wp--preset--color--slate-grey);
	padding: 5px;
	margin: 5px !important;
}

.sc-menu .ib-toc-body {
	position: fixed;
	top: 52px;
	height: calc(100% - 52px);
	z-index: -1;
	width: 380px;
	overflow-y: scroll;
}

span[id^="ib-toc-anchor"] {
	display: block;
	position: relative;
	top: -20px;
}

.sc-menu .ib-toc-anchors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 75px;
	gap: 10px;
}

.sc-menu .ib-toc-body ul {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}

.sc-menu .ib-toc-body > ul > li {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2 !important;
	background-color: #f5f5f5;
	box-shadow: 0 0 8px 0 #0000001a;
	padding: 8px;
	position: relative;
	transition: 200ms;
	border-radius: 10px;
	min-height: 70px;
}

.sc-menu .ib-toc-body li:hover {
	background-color: white !important;
	box-shadow: 0 0 8px 0 white;
}

.sc-menu .ib-toc-body li li:hover {
	background-color: white !important;
}

.sc-menu .ib-toc-body a:hover {
	text-decoration: none !important;
}

.sc-menu .ib-toc-body li a:after {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.admission-table table th {
	font-weight: bold;
}

@media (max-width: 950px) {
	.page-template-page-sc50-home {
		margin-top: 52px !important;
	}
	
	.site {
		margin-left: 0 !important;
	}
	
	.sc-menu {
		width: 100vw;
		height: 100%;
		z-index: 1;
		padding: 0 !important;
		background-color: var(--wp--preset--color--slate-grey);
	}

	.sc-menu > div {
		display: flex;
		padding: 0;
	}

	.sc-menu .ib-block-toc {
		width: 100vw !important;
	}
	
	.sc-menu .ib-toc-header {
		width: 100%;
		cursor: pointer;
	}
	
	.sc-menu .ib-toc-header:after {
		content: '\f0c9';
		font-family: 'FontAwesome';
		position: absolute;
		right: 20px;
	}
	
	#product-list-nav .ib-toc-header:after {
		content: '';
    }
	
	.sc-menu .ib-toc-body {
		width: 100%;
		position: absolute;
		left: 0;
	}

	span[id^="ib-toc-anchor"] {
		top: -72px;
	}
	
    .sc-menu,
	.sc-menu .ib-toc-header:before,
	.sc-menu .ib-toc-header:after,
	.sc-menu .ib-toc-body {
		transition: all 300ms;
	}

	.sc-menu:not(.sc-menu-expanded) {
		background-color: transparent;
	}
	
	.sc-menu:not(.sc-menu-expanded) .ib-toc-body {
		opacity: 0;
		pointer-events: none;
	}

	.sc-menu .ib-toc-anchors {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.sc-menu .ib-toc-body > ul > li:nth-child(2) {
		grid-row: unset;
	}
	
    .sc-menu.sc-menu-expanded {
        pointer-events: all;
    }
    
	.sc-menu.sc-menu-expanded .ib-toc-header:after {
		content: '\f00d';
	}

	.admission-table table th {
		font-size: 10px;
		font-weight: bold;
	}

	.admission-table table td {
		font-size: 12px;
	}
}

/*
@media (max-width: 780px) {
	.wp-block-columns {
		gap: 0
	}
}
*/

#page {
	display: flex;
	justify-content: center;
	margin-left: 380px;
	overflow: unset !important;
}

.page-template-page-sc50-product-list #page {
	margin: 0;
	display: block;
}

#masthead {
	display: none;
}

#tertiary {
	top: 0;
	margin-top: 0;
}

.button {
	padding: 0 12px;
	margin: 0 6px 12px;
}

.button.dark {
	background: var(--wp--preset--color--slate-grey) !important;
	color: white !important;
}

.button a, .button a:link, .button a:visited {
	background: #141412;
	color: white !important;
	text-decoration: none !important;
	display: inline-block;
	padding: 12px 18px;
	font-weight: bold;
	border-radius: 28px;
	font-size: 18px;
	text-transform: uppercase;
}

.entry-content a:after {
    display: none;
}

img.circle {
	border-radius: 50%;
}

#sponsor-header {
	position: fixed;
	z-index: 2;
	bottom: 0;
}

#sponsor-header img {
    width: 100%;
}

#logo-header {
	text-align: center;
	position: relative;
}

#logo-header img {
	width: 100%;
}

.site-footer {
	display: none;
}

#background {
	margin-top: -70px;
	margin-bottom: 12px;
}

#background img {
	width: 100%;
	position: relative;
}

.columns {
	margin: 0 !important;
}

.column {
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
}

.column:nth-child(1) {
	margin-top: -230px;
	margin-right: 6px;
}

.column:nth-child(2) {
	margin-left: 6px;
}

.entry-content {
	margin: 0 !important;
}

.entry-meta {
	display: none;
}

.entry-thumbnail {
	 display: flex;
	 justify-content: center;
	 background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);

	}
.entry-thumbnail img {
	height: 30vh;
}

.entry-title {
	text-transform: uppercase;
	background: none !important;
	color: var(--wp--preset--color--slate-grey) !important;
	font-family: Muli !important;
	font-weight: 900 !important;
	letter-spacing: 4px;
	padding: 10px 20px 0 !important;
	text-align: left !important;
	font-size: 32px !important;
	display: none;
}

.entry-content a.button span {
	display: block;
	font-weight: bold !important;
	font-size: 24px;
	text-transform: uppercase;
}

.entry-content a.important span {
	font-size: 35px;
}

.comments-area {
	display: none;
}

.entry-content a:not(.wp-block-button__link),
.comment-content a:not(.wp-block-button__link) {
	color: inherit !important;
	text-decoration: underline;
}

.entry-content a:hover,
.comment-content a:hover {
	color: inherit;
}

a:hover * {
	opacity: inherit;
}

/* .wp-block-group, .wp-block-group.has-background {
	padding: 20px 20px 40px;
	margin: 0 0 40px;
	box-shadow: 0 0 8px 0 #00000040;
} */

.wp-block-columns {
	margin-bottom: 0;
}

#events .wp-block-columns {
	margin-bottom: 0;
}

/*
#events .wp-block-columns.is-not-stacked-on-mobile {
	gap: 30px;
}
*/

/*
.wp-block-column {
	margin-bottom: 24px !important;
}
*/

/* #events .wp-block-group {
	padding: 5px;
	font-size: 14px;
	margin: 0 0 30px;
	box-shadow: 0 0 8px 0 #00000020;
	border: 1px solid lightgrey;
	border-radius: 5px;
} */

/* #events .upper-hall .wp-block-group {
	border-top: 5px solid var(--wp--preset--color--orange);
}
#events .power-room .wp-block-group {
	border-top: 5px solid var(--wp--preset--color--deep-pink);
}
#events .various .wp-block-group {
	border-top: 5px solid var(--wp--preset--color--slate-grey);
}
#events .engine-room .wp-block-group {
	border-top: 5px solid var(--wp--preset--color--emerald-green);
} */

#events p {
	margin: 10px 0;
}

#events .wp-block-group p {
	margin: 10px 0;
}

.wp-block-image {
	/* margin-top: 0 !important;
	margin-bottom: 0 !important; */
}

.festival-home h1, 
.festival-home h2, 
.festival-home h3, 
.festival-home h4, 
.festival-home h5, 
.festival-home h6 {
	font-family: arboria, helvetica, arial, sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px;
}

@media (max-width: 1054px) {
	.site-main .widget-area {
		float: none !important;
		margin: 0 auto !important;
	}
	
	.site-info {
		padding: 15px 0 !important;
	}

	body[class*="festival-product-list"] .sidebar-container {
		display: none;
	}

	.content-area {
	    width: auto;
	}
}

.toggle-next:not(:checked) + .grouping,
.toggle-next:not(:checked) + .grouping * {
	position: absolute;
	overflow: hidden;
}

.toggle-next + section {
	transform: translateX(-50vw);
	transition: transform 350ms 0s, left 0s 350ms, top 0s 350ms;
	min-width: 100vw;
	max-width: 100vw;
	position: absolute;
	left: 0;
	padding-bottom: 75px;
	display: flex;
	flex-wrap: wrap;
	background-color: white;
}


section.producer-0,
section.area-0, 
section.style-0,
section.area-1 section,
section.style-1 section,
section.area-1, section.style-1 {
	display: grid !important;
	grid-template-columns: repeat(2, 50%);
	grid-auto-flow: dense;
	padding: 8px;
}


section.area-0 h3, 
section.style-0 h3 {
	text-align: center;
	font-size: 15px;
	white-space: unset !important;
}

[data-level="0"] {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 175px);
	position: fixed;
	top: 109px;
	left: 0;
	width: 380px;
	padding: 8px;
}

@media (max-width: 639px) {
	#page.clipped {
		overflow-x: hidden !important;
	}
}

[data-level="2"]:before {
	position: absolute;
	top: 12px;
	width: calc(var(--column-width) - var(--gap) * 2);
	background-repeat: no-repeat;
	background-position: 12px center;
	padding: 12px 12px 12px 50px;
	/* background-color: white !important; */
	/* filter: invert(1) contrast(0.7) brightness(2); */
	font-size: 12px;
	min-height: 53px;
	display: flex;
	align-items: center;
	margin: 0 12px;
	background-size: 22px;
}



[data-filter-view="filter-on-filters"] [data-level="2"]:before {
	content: 'Nothing matches the filters you have selected';
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/filters.svg);
}
[data-filter-view="filter-on-unticked"] [data-level="2"]:before {
	content: 'You have not added anything to your list yet';
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/my-list.svg);
}
[data-filter-view="filter-on-ticked"] [data-level="2"]:before {
	content: 'You have not marked anything as tried yet';
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/tried.svg);
}

[data-level="2"], .area-2, .style-2 {
	grid-template-columns: repeat(3, 1fr);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 12px;
}

[data-level="2"] {
	margin-left: 380px;
	max-width: calc(100vw - 380px);
	min-height: 53px;
	position: relative;
}

@media (max-width: 979px) {
	[data-level="2"] {
		background-color: white;
		flex-direction: column;
	}

	[data-level="2"]:before {
		position: fixed;
		width: 100%;
		top: 0;
		background-position: 50px center;
		padding-left: 88px;
		margin: 0;
	}

	#expand-producer-2 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#expand-producer-2 > article.group.producer {
		padding: 0 !important;
		max-width: unset !important;
	}
	
	.area-2 > .producer .group-header,
	.style-2 > .producer .group-header {
		padding: 0 12px !important;
	}
}
@media (max-width: 639px) {
	[data-level="0"] {
		width: 100vw;
		max-height: calc(100% - env(safe-area-inset-bottom) - 175px);
		overflow-y: auto !important;
	}

	.nav-buttons,
	[data-level="0"] {
		transition: transform 0.6s ease, opacity 0.6s ease;
	}
	
	.nav-buttons.hidden,
	[data-level="0"].hidden {
		display: none !important;
	}
	
	.nav-buttons:not(.unhide),
	[data-level="0"]:not(.unhide) {
		pointer-events: none;
	}
	
	.nav-buttons.unhide,
	[data-level="0"].unhide {
		transform: translateX(0);
	}

	[data-level="2"].hidden {
		display: none;
	}
	
	[data-level="2"]:not(.unhide) {
		transform: translateX(100vw);
		pointer-events: none;
		transition: transform 0.5s ease;
	}
	
	[data-level="2"].unhide {
		transform: translateX(0);
		top: 0;
		margin-bottom: calc(env(safe-area-inset-bottom) + 66px) !important;
		transition: transform 0.35s ease;
	}

	[data-level="2"] {
		max-width: unset;
		position: relative;
		margin-left: 0;
		left: 0;
		z-index: 2;
	}

	.products + .group-header:not(.expandable) {
		min-width: calc(100vw - 16px) !important;
	}

	[data-level="2"] .product {
	    min-width: calc(100vw) !important;
	    max-width: calc(100vw) !important;
	}
}

.grouping > section.area-0,
.grouping > section.style-0 {
	display: grid;
	min-height: calc(100% - env(safe-area-inset-bottom) - 175px);
	align-content: center;
}

.product-list.bottles .grouping > section.area-0 {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: 50% 50%;
}

.product-list:not(.bottles) .grouping > section.area-0 {
	--map-rows: 53;
	--map-cols: 34;
	--map-gap: 4px;
	--map-cell-size: calc((100vh - 175px - var(--map-gap)) / var(--map-rows) - var(--map-gap));
	grid-template-columns: repeat(34, var(--map-cell-size));
	grid-template-rows: repeat(53, var(--map-cell-size));
	gap: var(--map-gap);
	display: grid;
	justify-content: center;
	padding: 0;
}

section.style-0 {
	grid-template-columns: 33.3% 33.3% 33.3%;
}

section.producer-0 > div {
	margin: 0 4px;
	font-size: 12px;
}

section.producer-0 > div .bar {
	padding: 3px 6px!important;
	font-size: 14px;
	margin: 2px 0;
}

.toggle-next:checked + section {
	transform: translateX(0);
	transition:
		transform 350ms 0s,
		left 0s 0s,
		top 0s 0s;
	left: 0;
	top: 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
	padding-top: 120px;
}

.toggle-next:checked + section ~ section {
	transform: translateX(100vw);
	transition:
		transform 350ms 0s, 
		left 0s 350ms, 
		top 0s 350ms;
	left: -100vw;
	opacity: 0;
	pointer-events: none;
}

body[class*="festival-product-list"] footer .sidebar-container {
	display: none;
}

body[class*="festival-product-list"] .site-footer {
	background-color: #1c1c1d;
	color: #4c4c4c;
}

#bottom-nav {
	padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px) !important;
	display: flex;
	background: white;
	border-top: 1px solid lightgrey;
	position: fixed;
	z-index: 2;
	bottom: 0;
}

#filter-views label.hidden {
	display: none;
}

#filter-views label.full-list:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/full-list.svg);
}
#filter-views label.filtered:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/filters.svg);
}
#filter-views label.unticked:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/my-list.svg);
}
#filter-views label.ticked:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/tried.svg);
}


.beer-lists p {
	display: flex;
	background: #d4d4d4;
	position: relative;
	padding: 6px;
	margin: 0;
}

.beer-lists a {
	text-decoration: none;
}

.button.list,
#product-lists-nav a {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.01rem;
	padding: 5px 7px !important;
	text-decoration: none;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0.4;
	width: 85px;
	font-size: 0;
}

#product-lists-nav section {
	display: flex;
	justify-content: space-around;
}

#product-lists-nav a.cask:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cask.svg');
}
#product-lists-nav a.keg:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/keykeg.svg');
}
#product-lists-nav a.bottles-cans:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/bottles-cans.svg');
}
#product-lists-nav a.cider:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cider.svg');
}

#product-lists-nav a.selected {
	opacity: 1;
}

.button.list,
label,
button {
	cursor: pointer;
}

.back-container {
	position: sticky;
	top: 0px;
	z-index: 7;
	height: 0;
	display: none;
}

.back-button {
    position: absolute;
    visibility: hidden;
    display: block;
    width: 44px;
    height: 42px;
    border-radius: 50%;
}

@media (max-width: 599px) {
	.back-container {
		display: block;
	}
	
	.back-button:after {
		content: '\f053';
		font-family: 'FontAwesome';
		font-size: 24px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		color: white;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		visibility: visible;
		padding-right: 4px;
	}
}
	
.nav-buttons {
	background-color: white;
	backface-visibility: hidden;
	position: fixed;
	z-index: 1;
	width: 380px;
	border-bottom: 1px solid lightgray;
}

@media (max-width: 639px) {
	.nav-buttons {
		width: 100vw;
	}
}

#product-list-nav {
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

#product-list-nav:before {
	content: '';
	background-color: white;
	position: absolute;
	width: 100%;
	height: 100vh;
	bottom: 100%;
}

#product-list-nav .ib-toc-header {
	display: flex;
	justify-content: flex-start !important;
	box-shadow: none;
	height: auto;
}

#product-list-nav .ib-toc-header-title {
	display: none;
}

#product-list-nav a {
	font-size: 0;
	text-transform: uppercase;
	padding: 0;
}

#product-list-nav a,
#filters .open,
#filter-views label,
.product .actions label {
	font-weight: bold;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#product-list-nav a.checked {
	font-size: 10px;
	padding: 0 8px 0 0;
}

#product-list-nav a:before,
.top-buttons > section > .button-group > label:before,
#filters .open:before,
#filter-views label:before,
.product .actions label:before {
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	width: 35px;
	height: 25px;
	background-position: center;
}

#product-list-nav a.checked:before,
.top-buttons > section > .button-group > label.checked:before,
#filters .open:checked:before,
#filter-views label.checked:before,
.product .actions label.checked:before {
	filter: invert(1) contrast(0.7) brightness(2);
}

#product-list-nav a.cask:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cask.svg);
}
#product-list-nav a.keg:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/keykeg.svg);
}
#product-list-nav a.bottles-cans:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/bottles-cans.svg);
}
#product-list-nav a.cider:before {
    background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cider.svg);
}


[for="group-by-producer"]:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/producers.svg);
}

[for="group-by-area"]:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/areas.svg);
}

[for="group-by-style"]:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/styles.svg);
}

#filters .open:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/filters.svg);
}

.nav-buttons section {
	display: flex;
	white-space: nowrap;
	flex-wrap: wrap;
}

.top-buttons > section {
	flex: 1;
}

#filters {
	flex: 25% 0;
}

#filter-views {
	width: 100%;
}

.top-buttons > section > .button-group > label, 
#filters .open, 
#filter-views label {
	flex: 1;
	flex-direction: column;
	height: unset !important;
	line-height: 1;
	padding: 4px !important;
	font-size: 10px;
	gap: 4px;
	justify-content: end;
	width: 100%;
}

#filter-views label {
	position: relative;
}

#filter-views .count {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px;
}

#downloads {
	padding: 12px 0 6px;
	display: flex;
	grid-column: span 2;
	align-items: center;
	gap: 6px;
}

#downloads h2 {
	background-color: unset !important;
	color: var(--wp--preset--color--slate-grey);
	padding: 0;
	margin: 0 !important;
	font-size: 12px;
	font-weight: bold;
}

#downloads a,
#sync-button {
	font-size: 12px !important;
	font-weight: bold;
	background-color: var(--wp--preset--color--dark-blue);
	color: white !important;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	margin: 0;
}

.nav-buttons label.toggle-switch {
	text-align: left !important;
	border-radius: 34px !important;
	cursor: pointer !important;
	position: relative;
	border: none !important;
	display: flex;
	align-items: center;
	padding: 0;
	justify-content: flex-start;
}

.nav-buttons label.toggle-switch::before {
	content: '';
	position: absolute;
	width: 50px;
	height: 24px;
	background-color: #ccc;
	border-radius: 12px;
	transition: background-color 0.3s ease;
	right: 0;
}

.nav-buttons label.toggle-switch::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 10px;
	right: 28px;
	transition: transform 0.3s ease;
}

.nav-buttons label.toggle-switch.checked {
	background-color: unset;
	color: unset !important;
}

.nav-buttons label.toggle-switch.checked::before {
	background-color: var(--wp--preset--color--slate-grey); 
}

.nav-buttons label.toggle-switch.checked::after {
	transform: translateX(26px); 
}


.nav-buttons h2 {
	font-size: 12px !important;
	padding: 2px 4px;
	width: 100%;
}

.nav-buttons.stuck h2 {
	font-size: 0 !important;
	padding: 0;
}

.nav-buttons label,
.nav-buttons a,
.nav-buttons button,
.actions label {
	font-size: 13px;
	font-weight: bold;
	background-color: unset;
	padding: 0 8px;
	height: 35px;
	text-align: center;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--slate-grey);
	display: flex;
	align-items: center;
	justify-content: center;
}

button.apply {
	background-color: var(--wp--preset--color--bright-blue);
	color: white;
	border-color: var(--wp--preset--color--bright-blue);
}

.nav-buttons a.checked,
.nav-buttons label.checked,
.actions label.checked {
	background-color: var(--wp--preset--color--slate-grey);
	border-color: var(--wp--preset--color--slate-grey);
	color: white !important;
}

.nav-buttons .checked {
	opacity: 1;
}

.nav-buttons div {
	margin: 0;
	display: flex;
	position: unset;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	align-content: flex-start;
}

#filters > * {
	flex-direction: column;
	position: relative;
}


#filters .filters .list {
	position: absolute;
	top: calc(100% + 0px);
	background: white;
	border-radius: 5px;
	padding: 5px 10px;
	opacity: 0;
	transition: opacity 200ms;
	pointer-events: none;
	display: flex;
	align-content: center;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	z-index: 1;
}

#filters .filters .list:focus-within {
	opacity: 1;
	pointer-events: all;
}

#filters .filters .list label {
	width: 100%;
}

#filters .filters {
	position: unset !important;
}

#filters .filters .list {
	left: 0;
	top: 0;
	width: 380px;
	height: 100vh;
	border-radius: 0;
	display: flex;
	gap: 0;
}

#filters .list h3 {
	margin: 0!important;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	color: #aaaaaa;
}

#filters .close {
	background-color: var(--wp--preset--color--bright-blue);
	border-color: var(--wp--preset--color--bright-blue);
	color: white;
}

#filter-on {display: grid;grid-template-columns: 1fr 1fr;grid-auto-flow: column;grid-template-rows: auto auto auto 1fr;column-gap: 24px;row-gap: 18px;padding: 7px;}

#filter-on > div {
	gap: 8px;
}

#filter-on h2 {
	grid-column: 1 / span 2;
	background-color: transparent;
	color: var(--wp--preset--color--slate-grey);
	font-size: 22px !important;
	font-weight: bold;
	margin: 0 !important;
}

#filter-on .allergens {
	grid-row: 2 / span 3;
}

#filter-on .diet {
	grid-row: 2;
}

#filter-on .abv {
	grid-row: 3;
}

#filter-on .actions {
	display: flex;
	align-content: stretch;
	justify-content: flex-end;
	grid-column: 1 / span 2;
	grid-row: 5;
}

#filter-on .actions button {
	flex-basis: 33%;
}

#clear-filters {
	display: flex;
	gap: 4px;
	flex-direction: row;
	justify-content: center;
	transition: opacity 200ms;
}

#clear-filters.hidden {
	opacity: 0;
}

@media (max-width: 639px) {
	#filters .filters .list {
		width: 100vw;
	}
}


.nav-buttons .allergens {
	counter-reset: allergens;
}

.nav-buttons .allergens .title.checked:after {
	content: ' (' counter(allergens) ')';
}

.nav-buttons .allergens .list .checked {
	counter-increment: allergens;
}


.nav-buttons.stuck span.hide-when-stuck {
	font-size: 0;
	padding: 0;
}

.nav-buttons span.hide-when-stuck {
	/* TEMP */
	display: none;
}

.nav-buttons * :before {
	font-family: 'FontAwesome';
	font-size: 18px;
	vertical-align: middle;
	margin: 0;
}

.nav-buttons.stuck * :before {
	margin: 0;
}

.nav-buttons .search {
	width: 100%;
}

.nav-buttons .search label:before {
	content: '\f002';
	margin: 0;
}

.nav-buttons .search label {
	width: 100%;
	display: flex;
	padding: 0 6px 0 8px;
}

.nav-buttons .button-group > * {
	border-radius: 0;
}

.nav-buttons .button-group-horizontal {
	flex-wrap: nowrap;
	gap: 0 !important;
}

.nav-buttons .button-group-horizontal > *:first-child {
	border-radius: 8px 0 0 8px;
}
.nav-buttons .button-group-horizontal > *:not(:first-child) {
	border-left: none;
}
.nav-buttons .button-group-horizontal > *:last-child {
	border-radius: 0 8px 8px 0;
}


.nav-buttons .button-group-vertical {
	gap: 0 !important;
}

.nav-buttons .button-group-vertical > * {
	margin: 0;
}

.nav-buttons .button-group-vertical > *:first-child {
	border-radius: 8px 8px 0 0;
}
.nav-buttons .button-group-vertical > *:not(:first-child) {
	border-radius: 0;
	border-top: none;
}
.nav-buttons .button-group-vertical > *:last-child {
	border-radius: 0 0 8px 8px;
}



.nav-buttons.stuck .abvs label.number {
	width: 28px;
}

.nav-buttons.stuck .abvs label.number span {
	left: -14px;
}

.nav-buttons.stuck .abvs label:nth-child(2):after,
.nav-buttons.stuck .abvs label:last-child:after {
  border-width: 14px;
}

.nav-buttons.stuck .vegan-gluten :before,
.nav-buttons.stuck .allergens :before {
	display: none;
}


.nav-buttons {
	transition: transform 0.5s ease;
	transform: translateY(0);
}
.hide-nav .nav-buttons {
	transform: translateY(-100%);
}
.hide-nav #product-lists-nav {
	transform: translateY(100%);
}

.product-list {
	transition: all 0.5s ease;
}
.hide-nav .product-list {
	transform: translateY(-210px);
}



.filterable-group:not(.unfiltered) ,
.filterable-group:not(.unfiltered) * ,
.filterable:not(.unfiltered),
.filterable:not(.unfiltered) * {
	display: none;
}


.product-list section:first-of-type .product[data-my-list="Yes"] .counter.my-list {
	counter-increment: my-list;
}

.product-list section:first-of-type .product[data-ticked="Yes"] .counter.ticked {
	counter-increment: ticked;
}

.product-list section:first-of-type .product[data-my-list="Yes"][data-ticked="No"] .counter.unticked {
	counter-increment: unticked;
}


.group:not(.producer) {
	counter-reset: group-products producers;
}

.group.producer {
	counter-reset: producer-products;
	counter-increment: producers;
}

.products {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	padding-top: 12px;
}

.product {
	counter-increment: group-products producer-products;
}


.producer-count {
	list-style: producers-counter-style;
}

.group-header-content > .counts > .count {
	background: color(srgb 0.96 0.96 0.96);
	padding: 4px 8px 10px 6px;
	font-weight: bold;
	display: flex;
	align-items: center;
	column-gap: 4px;
	font-size: 13px;
	margin: 0;
}

.group-header-content > .counts > .producer-count,
.group-header-content > .counts > .group-product-count {
    background: #4d4d4d;
    color: white;
    height: 24px;
    display: flex;
    width: 24px;
    justify-content: center;
    align-items: center;
}




.product-list {
	counter-reset: my-list ticked unticked;
}

.product .style {
	background: var(--wp--preset--color--slate-grey);
}

.product.style * {
	color: var(--wp--preset--color--slate-grey);
}

.product .style {
	color: white !important;
}

article.group {
	position: relative;
	display: flex;
	max-width: 100%;
	flex-direction: column;
}

#expand-producer-2 {
	padding: 0 12px;
	column-gap: 12px;
}

#expand-producer-2 > article.group.producer,
.area-2 > article.group.producer,
.style-2 > article.group.producer {
	padding: 12px 0;
	column-gap: 12px;
}

[data-level="2"] > article.group:not(.producer) {
	flex-direction: row;
	column-gap: 12px;
	margin: 0 12px 0 0;
	min-height: 100vh;
}


.producer-0 article.group.upper-hall,
.producer-0 article.group.guest-bar {
	grid-column: 1;
}

.producer-0 article.group.marquee {
	grid-column: 2;
}

.area-0 article.group,
.area-0 article.group *,
.style-0 article.group,
.style-0 article.group *{
	display: flex;
}

.area-0 article.group:not(.unfiltered) a,
.style-0 article.group:not(.unfiltered) a {
	pointer-events: none;
	cursor: auto;
}

.style-0 article.group:not(.unfiltered) .group-header-title {
	background: gray !important;
}

.area-0 article.group:not(.unfiltered) .counts,
.style-0 article.group:not(.unfiltered) .counts {
	display: none !important;
}

.area-0 > div {
	grid-row: 1;
}

.map-block {
	border-radius: 8px;
	grid-area: 1 / 1 / 1 / 1;
	background-color: gray;
}



#map-block-scotland-1 {
	grid-area: 2 / 9 / 5 / 17;
}
#map-block-scotland-2 {
	grid-area: 2 / 9 / 9 / 15;
}
#map-block-scotland-3 {
	grid-area: 7 / 9 / 13 / 21;
}
#map-block-scotland-4 {
	grid-area: 8 / 6 / 19 / 11;
}
#map-block-scotland-5 {
	grid-area: 11 / 10 / 25 / 15;
}
#map-block-scotland-6 {
	grid-area: 11 / 14 / 23 / 19;
}

#map-block-northern-ireland-1 {
	grid-area: 22 / 1 / 29 / 8;
}

#map-block-ireland-1 {
	grid-area: 29 / 1 / 40 / 6;
}

#map-block-north-east-1 {
	grid-area: 19 / 19 / 27 / 23;
}

#map-block-north-west-1 {
	grid-area: 23 / 15 / 35 / 19;
}

#map-block-yorkshire-and-the-humber-1 {
	grid-area: 27 / 19 / 33 / 27;
}

#map-block-sheffield-district-1, 
#map-block-london-1 {
	border-radius: 50%;
	border: 4px solid #f6f6f6;
	z-index: 1;
}

#map-block-sheffield-district-1 {
	grid-area: 31 / 18 / 37 / 24;
}

#map-block-london-1 {
	grid-area: 43 / 25 / 49 / 31;
}

#map-block-wales-1 {
	grid-area: 33 / 11 / 37 / 15;
}
#map-block-wales-2 {
	grid-area: 35 / 13 / 45 / 17;
}
#map-block-wales-3 {
	grid-area: 40 / 9 / 44 / 17;
}
#map-block-wales-4 {
	grid-area: 42 / 13 / 46 / 18;
}

#map-block-west-midlands-1 {
	grid-area: 35 / 17 / 42 / 22;
}

#map-block-east-midlands-1 {
	grid-area: 33 / 22 / 40 / 29;
}
#map-block-east-midlands-2 {
	grid-area: 35 / 22 / 42 / 26;
}

#map-block-south-west-1 {
	grid-area: 42 / 18 / 51 / 22;
}
#map-block-south-west-2 {
	grid-area: 47 / 12 / 51 / 22;
}
#map-block-south-west-3 {
	grid-area: 50 / 9 / 53 / 15;
}
#map-block-south-west-4 {
	grid-area: 52 / 7 / 54 / 10;
}

#map-block-south-east-1 {
	grid-area: 42 / 22 / 51 / 26;
}
#map-block-south-east-2 {
	grid-area: 47 / 22 / 50 / 33;
}

#map-block-east-of-england-1 {
	grid-area: 40 / 26 / 45 / 32;
}
#map-block-east-of-england-2 {
	grid-area: 36 / 29 / 44 / 34;
}

.area .group-header-title:not(.bar) {
	background-color: gray;
}

.product-list:not(.bottles) .area-0 .group-header-title:not(.bar) {
	background-color: transparent;
}

.product-list:not(.bottles) .area-0 .group-header-title h3 {
	display: none;
}

.product-list:not(.bottles) .area-0 .group-header-title .counts {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.product-list:not(.bottles) .area-0 .group-header-title .count {
	font-size: 14px;
	padding: 2px 0;
}

.product-list:not(.bottles) .area-0 .group {
	border-radius: 50%;
}

#area-scotland-0 {
	grid-area: 11 / 11 / span 5 / span 5;
}
#area-north-east-0 {
	grid-area: 21 / 19 / span 4 / span 4;
}
#area-northern-ireland-0 {
	grid-area: 23 / 2 / span 5 / span 5;
}
#area-north-west-0 {
	grid-area: 27 / 15 / span 4 / span 4;
}
#area-sheffield-district-0 {
	grid-area: 31 / 18 / span 6 / span 6;
}
#area-yorkshire-and-the-humber-0 {
	grid-area: 28 / 22 / span 4 / span 5;
}
#area-wales-0 {
	grid-area: 38 / 13 / span 5 / span 4;
}
#area-west-midlands-0 {
	grid-area: 37 / 17 / span 4 / span 5;
}
#area-east-midlands-0 {
	grid-area: 34 / 23 / span 5 / span 5;
}
#area-east-of-england-0 {
	grid-area: 39 / 29 / span 4 / span 4;
}
#area-south-west-0 {
	grid-area: 44 / 18 / span 5 / span 4;
}
#area-south-east-0 {
	grid-area: 44 / 22 / span 5 / span 4;
}
#area-london-0 {
	grid-area: 44 / 26 / span 4 / span 4;
	z-index: 2;
}


/*
#area-sheffield-0 {
	grid-column: 1 / span 3;
}
#area-manchester-0 {
	grid-column: 1;
	grid-row: 2;
}
#area-york-0 {
	grid-column: 3;
	grid-row: 2;
}
#area-leicestershire-0 {
	grid-column: 2;
}
#area-cornwall-0 {
	grid-column: 1;
	grid-row: 3;
}
#area-bath-0 {
	grid-column: 2;
	grid-row: 3;
}
#area-london-0 {
	grid-column: 3;
	grid-row: 3;
}
#area-belgium-0 {
	grid-column: 1;
	grid-row: 4;
}
#area-germany-0 {
	grid-column: 2 / span 2;
	grid-row: 4;
}
*/

#area-germany-0 {
	grid-column: 2;
	grid-row: 1;
}
#area-belgium-0 {
	grid-column: span 2 ;
	grid-row: 2;
}
#area-uk-0 {
	grid-column: span 2 ;
	grid-row: 3;
}
#area-oktoberfest-0 h3,
#area-germany-0 h3 {
  font-size: 22px;
}

section.style-0 {
	grid-auto-rows: 1fr;
}

.group .expand-siblings:checked ~ h3 {
	position: sticky;
	top: 157px !important;
}

.group p.details {
	font-size: 13px;
	padding: 0 4px;
	margin: 0;
	font-weight: normal;
	width: 100%;
	grid-column: span 2;
	background-color: #ffffffc4;
	color: black;
	padding: 12px;
}

.group .expand-siblings:not(:checked) ~ p.details {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.group .expand-siblings:not(:checked) ~ p.details a {
	display: none;
}

.group-header {
	display: flex;
	width: 100%;
	margin: 0 !important;
	z-index: 5;
	order: -1;
	flex-direction: column;
	height: 100%;
}

.group-header:not(.expandable) {
	top: 0;
	width: auto;
	flex-grow: 0;
}

.area-2 .group-header-content,
.style-2 .group-header-content {
	max-height: calc(100vh - 52px);
}

.area-2 + .group-header-title,
.style-2 + .group-header-title {
	display: unset !important;
}

.area-2 + .group-header-title h3,
.style-2 + .group-header-title h3 {
	font-weight: bold;
	margin: 8px 0 !important;
	text-align: center;
}

[data-level="2"] > article:not(.producer) > .group-header {
	position: sticky;
	overflow-y: auto;
	overflow-x: hidden;
}

[data-level="2"] .group-header:not(.expandable) .group-header-title {
	z-index: 1;
	height: auto;
}

.producer .group-header-title {
	display: grid !important;
	grid-template-columns: 1fr auto;
}

[data-level="2"] .group-header:not(.expandable) .expand-button .group-header-title {
	height: 100%;
}

.group > .group-header-title {
	order: -1;
	display: none !important;
}

.group > .group-header-title .details,
.group > .group-header-title .counts {
	display: none;
}

@media (max-width: 979px) {
	#expand-producer-2 > article.group.producer,
	.area-2 > article.group.producer,
	.style-2 > article.group.producer {
		width: 100%;
	}
	
	.area-2 > article.group.producer,
	.style-2 > article.group.producer {
		scroll-margin-top: 53px;
		min-width: 100%;
	}
	
	[data-level="2"] > article:not(.producer) > .group-header {
		overflow: unset;
		max-height: unset;
	}

	.area-2 .group-header-content, .style-2 .group-header-content {
		max-height: unset;
	}

	[data-level="2"] > article.group:not(.producer) {
		flex-direction: column;
		margin: 0;
		min-width: 100%;
		min-height: 0;
	}

	[data-level="2"] > article:not(.producer) > .group-header {
		position: unset;
	}

	#expand-producer-2 > .group > .group-header,
	.area-2 + .group-header-title,
	.style-2 + .group-header-title {
		position: sticky;
		top: 0;
		z-index: 6;
	}
	
	.producer-2 + .group-header-title,
	.area-2 + .group-header-title,
	.style-2 + .group-header-title {
		display: unset !important;
	}

	[data-level="2"] .producer > .group-header > .group-header-title ,
	.area-2 + .group-header-title h3,
	.style-2 + .group-header-title h3 {
		font-size: 24px;
		text-align: center;
		margin: 0 !important;
		padding: 0 !important;
	}

	[data-level="2"] .producer > .group-header > .group-header-title h3 {
		text-overflow: unset;
		overflow: unset;
		white-space: unset;
		line-height: 1.2;
		padding: 8px !important;
	}
	
	[data-level="2"].area-2 > .group > .group-header > .group-header-title h3,
	[data-level="2"].style-2 > .group > .group-header > .group-header-title h3 {
		display: none;
	}
}
@media (max-width: 639px) {
	.group-header:not(.expandable) {
		top: 120px;
		min-width: 100vw !important;
		max-width: 100vw !important;
	}
}

.group .group .group-header {
	z-index: 3;
}

.group .group .group-header:not(.expandable) {
	top: 164px;
}

.group-header .expand-button {
	width: 100%;
	height: 100%;
	padding: 3px;
	text-decoration: none !important;
	pointer-events: all;
}

.group-header-title {
	display: flex !important;
	width: 100%;
	height: 100%;
	align-items: center;
	padding: 4px 8px 8px !important;
	background-color: var(--wp--preset--color--slate-grey);
	color: white !important;
	flex-direction: column;
	justify-content: center;
}

.group-header .expand-button .group-header-title {
	padding: 4px !important;
	border-radius: 6px;
}

.group-header .expand-button .group-header-title h3 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


[data-level="2"] .area > .group-header > .group-header-title {
	padding: 0 0 12px !important;
	gap: 12px;
}
[data-level="2"] .style > .group-header > .group-header-title {
	padding: 0 !important;
	gap: 12px;
}

.group-header h3 {
	display: inline-block;
	padding: 5px 7px 6px!important;
	font-weight: bold;
	margin: 0 !important;
	font-size: 19px;
	line-height: 1.1;
}

[data-level="2"] .area > .group-header > .group-header-title h3,
[data-level="2"] .style > .group-header > .group-header-title h3 {
	font-size: 34px;
	overflow: unset;
	white-space: unset;
	align-self: flex-start;
	width: 100%;
	text-align: center;
	padding-top: 12px  !important;
}

section.area-0 .group-header h3 {
	white-space: normal;
	text-align: center;
	font-size: 14px;
}

.product-list.bottles section.area-0 .group-header h3 {
	white-space: normal;
	text-align: center;
	font-size: 34px;
}
 .counts {
	display: flex;
}

.group-header-content > .counts {
	display: flex;
	padding: 12px 8px 0;
}

.group-header-title .count {
	margin: 0;
	font-size: 12px;
	line-height: 1 !important;
}

.group-header-title .producer-count {
	display: none !important;
}

[data-level="2"] .group-header > .group-header-title .counts .count {
	flex-direction: row;
}

[data-level="2"] .group-header > .group-header-title .counts .producer-count:before {
	content: var(--producer-term-plural)':';
}

[data-level="2"] .group-header > .group-header-title .counts .group-product-count:before {
	content: var(--product-term-plural)':';
	margin-left: 6px;
}

.group-header-title .count:before {
	font-weight: bold;
	font-size: 14px;
}

.group-header-title .count .number {
	font-weight: bold;
	margin: 0 6px;
}

[data-level="2"] .producer > .group-header > .group-header-title .counts,
[data-level="2"] .group .group .group-header > .group-header-title .counts {
	display: none;
}

.expand-button h3 {
	font-size: 12px;
}

.no-results {
	position: absolute;
	background: #f5f1f1;
	width: 100%;
	text-align: center;
	padding: 6px 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 35px;
	display: none !important;
}

.expand-siblings:not(:checked) ~ .product {
	position: absolute !important;
	top: -9999px;
	height: 0 !important;
	overflow: hidden !important;
	font: 0/0 a;
	padding: 0 !important;
	margin: 0 !important;
}

[data-level="2"] > article:not(.producer) > .group-header {
	min-width: calc(var(--column-width) + var(--gap));
	max-width: calc(var(--column-width) + var(--gap));
	min-height: 100vh;
	max-height: 100vh;
}
[data-level="2"] .product {
	min-width: var(--column-width);
	max-width: var(--column-width);
}

:root {
	--columns: 4;
	--menu-width: 398px;
	--gap: 12px;
	--column-width: calc(((100vw - var(--menu-width) - var(--gap) * var(--columns) - var(--gap)) / var(--columns)) - 0.5px);
}
@media (max-width: 1535px) {
	:root {
		--columns: 3;
	}
}
@media (max-width: 1279px) {
	:root {
		--columns: 2;
	}
}
@media (max-width: 979px) {
	:root {
		--columns: 1;
	}

	[data-level="2"] > article:not(.producer) > .group-header {
		max-width: none;
		min-height: 0;
	}
	
	[data-level="2"] .product {
		max-width: none;
		width: 100%;
	}
}
@media (max-width: 639px) {
	:root {
		--column-width: 100vw;
	}
}



.product {
	background-color: white;
	display: grid;
	gap: 0;
	grid-template-columns: 100px 1fr;
	position: relative;
	padding: 0 0 12px 0 !important;
}



.placeholder {
	position: absolute;
	overflow: hidden;
	font: 0 / 0 a;
	padding: 0 !important;
	margin: 0 !important;
	visibility: hidden;
}

.product div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-wrap: wrap;
}

.product .left:before,
.product .left:after {
	content: '';
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 8px;
	position: absolute;
	height: 100%;
	width: 100%
}

.product .image {
	position: relative;
	padding: 8px;
	text-align: center;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product .image.missing:before {
	content: "?";
	font-weight: bold;
	background-color: #e0e0e0;
	color: white;
	text-align: center;
	font-size: 64px;
	width: 60px;
	height: 76px;
}

.product .image.missing img {
	display: none;
}

.product .image:not(.missing):after {
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 10px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
	filter: blur(5px);
}

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

.product .image img {
	mix-blend-mode: multiply;
	height: 80px;
	object-fit: contain;
}

.product .header {
	grid-column: span 2;
	padding: 0 12px 6px 0;
}

.product h4 {
	font-size: 15px;
	font-weight: bold;
}

.product p {
	margin: 0;
}

.product .tokens,
.product .tokens span {
	display: flex;
	flex-direction: row;
	gap: 4px;
	flex-wrap: wrap;
	align-content: flex-start;
}

.product .tokens mark {
	background-color: lightgray;
	padding: 6px 5px !important;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
}

.product .abv-style mark {
	font-size: 12px;
}

.product .notes {
	grid-column: span 3;
	padding: 0 12px 0;
	display: flex;
	justify-content: space-between;
	height: 100%;
	font-size: 14px;
	margin-bottom: 6px;
}

.product .allergens-bars {
	grid-column: span 2;
	padding: 0 6px 0 12px;
	font-size: 12px;
	padding-top: 6px;
	gap: 4px;
}


.product .vegetarian,
.product .vegan {
	background-color: var(--wp--preset--color--lime-green) !important;
	color: white;
	min-width: 25px;
	text-align: center;
}

.product .gluten-free {
	background-color: var(--wp--preset--color--orange) !important;
	color: white;
}

.product .tokens .allergen {
	background-color: var(--wp--preset--color--slate-grey);
	color: white;
}


.product .tokens .allergen:first-letter {
	text-transform: uppercase;
}


.product .actions {
	grid-column: 3;
	grid-row: 3;
	gap: 8px;
	flex-direction: row;
	align-items: flex-end;
	display: flex;
	justify-content: center;
	padding: 12px 12px 0 0;
}

.product .actions > div {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.product .actions label {
	flex-grow: 0;
	justify-content: center;
	display: flex;
	width: 40px;
	height: 40px;
	flex-basis: 40px;
	font-size: 0;
	border-radius: 50%;
	gap: 0;
}



.product .user label:before,
.product .user label:after {
	font-family: 'FontAwesome';
	font-size: 24px;
	margin: 4px;
	vertical-align: middle;
	font-weight: normal;
}

.product .my-list:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/my-list.svg);
}

.product label.ticked:before {
	background-image: url(https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/tried.svg);
}

.product[data-ticked="Yes"] .my-list {
	background-color: unset;
	opacity: 0.3;
	pointer-events: none;
	cursor: unset;
}
.product[data-ticked="Yes"] .my-list:before {
	filter: unset !important;
}

.product .scores {
	grid-column: 1 / span 3;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0;
	height: 50px;
	opacity: 1;
	transition: opacity .3s .3s, height .3s;
}

.product[data-ticked="No"] .scores {
	height: 0;
	opacity: 0;
	transition: opacity .3s, height .3s .3s;
	pointer-events: none;
}

.product .scores label {
	width: 44px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* Swap the selected score out for unscored so score can be cleared */
.product .unscored {
	order: 0;
}
.product .score {
	order: -1;
}
.product .scores label.checked ~ .score {
	order: 1;
}
.product .scores label.checked {
	display: none;
}

.product .scores label:before {
	font-family: FontAwesome;
	font-size: 24px;
}

.product .unscored:before,
.product .score:before {
	content: '\f005';
	color: var(--wp--preset--color--orange);
}
.product .scores label.checked ~ .score:before {
	content: '\f006';
	color: var(--wp--preset--color--slate-grey);
}



@media (max-width: 375px) {

	.product .image.missing:before {
		font-size: 48px;
		line-height: 48px;
		width: 48px;
	}
}

@media (max-width: 320px) {
	.button.list,
	#product-lists-nav a {
		font-size: 15px;
		padding: 5px 7px !important;
	}

	.ticked span {
		display: none;
	}
}

.bar {
	background-color: grey !important;
	color: white;
	padding: 0 !important;
	display: inline-block;
	font-weight: bold;
}

.bar.upper-hall {
	background-color: var(--wp--preset--color--orange) !important;
	color: white !important;
}
.bar.marquee {
	background-color: var(--wp--preset--color--light-grey) !important;
	color: var(--wp--preset--color--slate-grey) !important;
}
.bar.guest-bar {
	background-color: var(--wp--preset--color--aqua) !important;
	color: white !important;
}
.bar.upper-hallguest-bar {
	background-color: #b4b4b4 !important;
	color: white;
}
.bar.keg-bar {
	background-color: var(--wp--preset--color--deep-orange) !important;
	color: white !important;
}
.bar.engine-room {
	background-color: var(--wp--preset--color--emerald-green) !important;
	font-size: 11px !important;
}

.no-smooth-scroll {
    scroll-behavior: auto !important;
}


#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -9999;
    opacity: 0;
    transition: opacity 0.5s ease;
    align-content: center;
}

#splash-screen.show {
	z-index: 9999;
	opacity: 1;
}

#splash-screen h1 {
	text-transform: uppercase;
	font-weight: bold;
	padding-top: 150px !important;
	background-size: 150px;
	background-repeat: no-repeat;
	background-position: center top;
	display: grid;
	align-items: center;
}

.list-buttons {
	display: flex;
}

.list-buttons a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	font-size: 12px;
	max-width: 68px;
}

.list-buttons a, .list-buttons a * {
	background-color: white;
	color: var(--wp--preset--color--slate-grey) !important;
}

.list-buttons a:before {
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	width: 55px;
	height: 65px;
	background-position: center;
}

.list-buttons .cask a:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cask.svg');
}

.list-buttons .keg a:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/keykeg.svg');
}

.list-buttons .bottles a:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/bottles-cans.svg');
}

.list-buttons .cider a:before {
	background-image: url('https://sheffield.camra.org.uk/wp-content/themes/alepress/images/sc48-icons/cider.svg');
}

.list-buttons mark {
	white-space: normal;
	padding: 0;
}

.wp-block-post-featured-image {
	margin: 0;
}











.sync-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.sync-modal.hidden { display: none; }

.sync-modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  text-align: left;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.sync-modal-content #sync-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.sync-linkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  width: 100%;
}

.sync-linkbox.hidden { display: none; }

.sync-linkinput {
  flex: 1;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}

.sync-linkinput:focus {
  outline: none;
  border-color: #007bff;
  background-color: #fff;
}

.sync-btn {
  width: 80px;
  padding: 6px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
}

.sync-btn:hover {
  background-color: #555;
}

.sync-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}