/* Coffee Blends: [cm_blends]. Colours follow the Elementor kit globals.
   Button rules use `.cmb button.x` so they outrank `.elementor-kit-7 button:focus`. */
.cmb {
	--cmb-ink: var(--e-global-color-primary, #080808);
	--cmb-text: var(--e-global-color-text, #292929);
	--cmb-accent: var(--e-global-color-accent, #e39527);
	--cmb-paper: var(--e-global-color-secondary, #fff);
	--cmb-mist: var(--e-global-color-fe9db95, #f5f5f5);
	--cmb-line: #e4e4e4;
	--cmb-muted: #6b6b6b;
	--cmb-radius: 6px;
	color: var(--cmb-text);
	font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
}
.cmb [hidden] { display: none !important; }
.cmb .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Neutralise the kit + Hello button styles on our own buttons. */
.cmb button.cmb-chip, .cmb button.cmb-clear, .cmb button.cmb-card__open,
.cmb button.cmb-dialog__close, .cmb button.cmb-toggle, .cmb button.cmb-nav__btn {
	margin: 0; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.3;
	letter-spacing: normal; text-transform: none; white-space: normal;
	border-radius: 0; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s;
}
.cmb button:focus-visible, .cmb a:focus-visible { outline: 2px solid var(--cmb-accent); outline-offset: 2px; box-shadow: none; }
.cmb button:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Layout: filters in a left column. */
.cmb--sidebar { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.cmb-side { display: grid; gap: 14px; }
.cmb button.cmb-toggle { display: none; }

/* Filters */
.cmb-filters { display: grid; gap: 16px; }
.cmb-filters__group { display: grid; gap: 7px; }
.cmb-filters__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cmb-ink); }
.cmb-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmb button.cmb-chip, .cmb button.cmb-chip:focus {
	padding: 5px 11px; color: var(--cmb-ink); background: var(--cmb-paper);
	border: 1px solid var(--cmb-line); border-radius: 999px; cursor: pointer;
}
.cmb button.cmb-chip:hover { color: var(--cmb-ink); background: var(--cmb-paper); border-color: var(--cmb-ink); }
.cmb button.cmb-chip[aria-pressed="true"] { color: var(--cmb-paper); background: var(--cmb-ink); border-color: var(--cmb-ink); }
.cmb-filters__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--cmb-line); }
.cmb-status { margin: 0; font-size: 13px; color: var(--cmb-muted); }
.cmb button.cmb-clear, .cmb button.cmb-clear:focus {
	padding: 0; font-size: 13px; color: var(--cmb-ink); background: none; border: 0;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cmb button.cmb-clear:hover { color: var(--cmb-accent); background: none; }
.cmb a.cmb-learn, .cmb a.cmb-detail__link, .cmb a.cmb-learn:visited, .cmb a.cmb-detail__link:visited {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 700; color: var(--cmb-ink); text-decoration: underline; text-underline-offset: 3px;
}
.cmb a.cmb-learn:hover, .cmb a.cmb-detail__link:hover { color: var(--cmb-accent); }

/* Search */
.cmb-search { position: relative; display: flex; align-items: center; }
.cmb-search svg { position: absolute; left: 11px; color: var(--cmb-muted); pointer-events: none; }
.cmb input.cmb-search__input {
	width: 100%; margin: 0; padding: 8px 12px 8px 33px;
	font: inherit; font-size: 14px; color: var(--cmb-ink);
	background: var(--cmb-paper); border: 1px solid var(--cmb-line); border-radius: 999px; box-shadow: none;
}
.cmb input.cmb-search__input:focus { border-color: var(--cmb-ink); outline: none; }
.cmb input.cmb-search__input:focus-visible { outline: 2px solid var(--cmb-accent); outline-offset: 2px; }

/* Grid + cards */
.cmb-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - (var(--cmb-cols) - 1) * 16px) / var(--cmb-cols))), 1fr));
}
.cmb-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--cmb-paper); border: 1px solid var(--cmb-line); border-radius: var(--cmb-radius);
	cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.cmb-card:hover { border-color: #cfcfcf; box-shadow: 0 6px 18px rgb(0 0 0 / .06); }
.cmb-card__media { position: relative; aspect-ratio: 1; min-height: 0; overflow: hidden; background: #fff; }
/* Fixed square; the photo sits centred inside and never stretches it. */
.cmb .cmb-card__media img {
	position: absolute; inset: 14px; margin: auto; width: auto; height: auto;
	max-width: min(calc(100% - 28px), var(--cmb-cap, 100%)); max-height: calc(100% - 28px);
	object-fit: contain; transition: transform .4s ease;
}
.cmb-card:hover .cmb-card__media img { transform: scale(1.03); }
.cmb-card__roast, .cmb-card__new {
	position: absolute; top: 10px; padding: 3px 9px;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px;
}
.cmb-card__roast { left: 10px; color: var(--cmb-ink); background: var(--cmb-mist); }
.cmb-card__new { right: 10px; color: var(--cmb-ink); background: var(--cmb-accent); }
.cmb-card__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.cmb .cmb-card__title { margin: 0; font-family: "Lato", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--cmb-ink); }
.cmb-card__notes { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cmb-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cmb button.cmb-card__open, .cmb button.cmb-card__open:focus {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	margin-top: auto; padding: 8px 0 0; font-weight: 700; color: var(--cmb-ink);
	background: none; border: 0; cursor: pointer;
}
.cmb button.cmb-card__open:hover { color: var(--cmb-ink); background: none; }
.cmb-card__open svg { transition: transform .2s; }
.cmb-card:hover .cmb-card__open svg { transform: translateX(3px); }

.cmb-empty { margin: 12px 0 0; font-size: 15px; }
.cmb-more { margin: 24px 0 0; text-align: center; }

/* Carousel (layout="carousel"): a scroll-snap row showing --cmb-cols cards; arrows move a page at a time.
   Desktop: arrows sit in their own gutters either side of the track (no overlap, no transforms, so focus
   never shifts them). The gutters collapse when everything fits and the arrows are hidden.
   The track's padding/negative margin keeps card hover shadows inside the scroll box. */
.cmb--carousel { --cmb-view: var(--cmb-cols); }
.cmb-carousel { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: 12px; align-items: center; }
.cmb-carousel:has(.cmb-nav[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cmb--carousel .cmb-grid {
	grid-area: 1 / 2; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
	padding: 6px 6px 24px; margin: -6px -6px -24px; scrollbar-width: none;
}
.cmb-carousel:has(.cmb-nav[hidden]) .cmb-grid { grid-area: 1 / 1; }
.cmb--carousel .cmb-grid::-webkit-scrollbar { display: none; }
.cmb--carousel .cmb-card {
	flex: 0 0 calc((100% - (var(--cmb-view) - 1) * 16px) / var(--cmb-view));
	box-sizing: border-box; scroll-snap-align: start;
}
.cmb-nav { display: contents; }
.cmb button.cmb-nav__btn, .cmb button.cmb-nav__btn:focus {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	color: var(--cmb-ink); background: var(--cmb-paper); border: 1px solid var(--cmb-line); border-radius: 50%;
	box-shadow: 0 2px 10px rgb(0 0 0 / .12); cursor: pointer;
}
.cmb button.cmb-nav__prev { grid-area: 1 / 1; }
.cmb button.cmb-nav__next { grid-area: 1 / 3; }
.cmb button.cmb-nav__btn:hover { color: var(--cmb-paper); background: var(--cmb-ink); border-color: var(--cmb-ink); }
.cmb button.cmb-nav__btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

.cmb-btn, .cmb-btn:visited {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase;
	color: var(--cmb-paper); background: var(--cmb-ink); border: 1px solid var(--cmb-ink); border-radius: 0;
	text-decoration: none; transition: background-color .15s, color .15s;
}
.cmb-btn:hover, .cmb-btn:focus-visible { color: var(--cmb-paper); background: var(--cmb-accent); border-color: var(--cmb-accent); }

/* No image yet */
.cmb-card__media.is-empty, .cmb-detail__media.is-empty { display: grid; place-items: center; background: var(--cmb-mist); color: #c9c9c9; }
.cmb-card__placeholder { width: 56px; height: 56px; }
.cmb-detail__media.is-empty { min-height: 220px; }

/* Pop-out */
.cmb-dialog {
	width: min(860px, calc(100% - 32px)); max-height: calc(100dvh - 48px);
	margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
	color: var(--cmb-text); background: var(--cmb-paper); border: 0; border-radius: 8px;
	box-shadow: 0 24px 60px rgb(0 0 0 / .25);
}
.cmb-dialog::backdrop { background: rgb(8 8 8 / .6); }
.cmb-dialog[open] { animation: cmb-in .22s ease-out; }
@keyframes cmb-in { from { opacity: 0; transform: translateY(12px); } }
html:has(.cmb-dialog[open]) { overflow: hidden; }
.cmb button.cmb-dialog__close, .cmb button.cmb-dialog__close:focus {
	position: sticky; top: 10px; z-index: 2; float: right;
	display: grid; place-items: center; width: 36px; height: 36px; margin: 10px 10px -46px 0; padding: 0;
	color: var(--cmb-ink); background: var(--cmb-paper); border: 1px solid var(--cmb-line); border-radius: 50%; cursor: pointer;
}
.cmb button.cmb-dialog__close:hover { color: var(--cmb-paper); background: var(--cmb-ink); border-color: var(--cmb-ink); }

.cmb-detail { display: grid; grid-template-columns: 2fr 3fr; align-items: center; }
.cmb-detail__media { align-self: stretch; display: grid; place-items: center; padding: 20px; background: #fff; }
.cmb-detail__media { min-width: 0; }
.cmb-gallery { display: grid; gap: 10px; width: 100%; }
.cmb-gallery__main { display: grid; place-items: center; aspect-ratio: 1; max-height: 300px; margin: 0 auto; }
.cmb .cmb-gallery__main img { display: block; width: auto; height: auto; max-width: min(100%, var(--cmb-cap, 100%)); max-height: 100%; object-fit: contain; }
.cmb-gallery__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cmb button.cmb-gallery__thumb, .cmb button.cmb-gallery__thumb:focus {
	width: 48px; height: 48px; margin: 0; padding: 0; overflow: hidden;
	background: #fff; border: 1px solid var(--cmb-line); border-radius: 4px; box-shadow: none; cursor: pointer;
}
.cmb button.cmb-gallery__thumb:hover { background: #fff; border-color: var(--cmb-muted); }
.cmb button.cmb-gallery__thumb[aria-pressed="true"] { border-color: var(--cmb-ink); }
.cmb-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmb-detail__content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 28px 20px 4px; }
.cmb-detail__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cmb-muted); }
.cmb-dialog .cmb-detail__title { margin: 0; padding-right: 32px; font-family: "Lato", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--cmb-ink); }
.cmb-detail__notes { margin: 0; font-size: 16px; line-height: 1.45; color: var(--cmb-text); }
.cmb-strength__dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.cmb-strength__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cmb-line); }
.cmb-strength__dot.is-on { background: var(--cmb-accent); }
.cmb-facts { align-self: stretch; display: grid; margin: 6px 0 4px; border-top: 1px solid var(--cmb-line); }
.cmb-facts__row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cmb-line); font-size: 14px; }
.cmb-facts dt { font-weight: 700; color: var(--cmb-ink); }
.cmb-facts dd { margin: 0; }

.cmb-enquire { padding: 20px 28px 24px; background: var(--cmb-mist); }
.cmb-dialog .cmb-enquire__title { margin: 0 0 4px; font-family: "Lato", sans-serif; font-size: 20px; font-weight: 700; color: var(--cmb-ink); }
.cmb-enquire__intro { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.cmb-enquire .elementor-form .elementor-field-group:not(.elementor-field-type-submit) { margin-bottom: 10px; }

@media (max-width: 1024px) {
	.cmb--sidebar { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
	.cmb--carousel { --cmb-view: min(var(--cmb-cols), 2); }
}
@media (max-width: 767px) {
	.cmb--sidebar { grid-template-columns: 1fr; gap: 14px; }
	.cmb-side { position: static; gap: 10px; }
	.cmb button.cmb-toggle, .cmb button.cmb-toggle:focus {
		display: inline-flex; align-items: center; gap: 8px; justify-self: start;
		padding: 8px 14px; font-weight: 700; color: var(--cmb-ink); background: var(--cmb-paper);
		border: 1px solid var(--cmb-ink); border-radius: 999px; cursor: pointer;
	}
	.cmb button.cmb-toggle:hover { color: var(--cmb-ink); background: var(--cmb-mist); }
	.cmb-toggle__count {
		display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
		font-size: 12px; color: var(--cmb-paper); background: var(--cmb-ink); border-radius: 999px;
	}
	.cmb--sidebar .cmb-filters, .cmb--sidebar a.cmb-learn { display: none; }
	.cmb--sidebar.is-filters-open .cmb-filters { display: grid; padding: 14px; background: var(--cmb-mist); border-radius: var(--cmb-radius); }
	.cmb--sidebar.is-filters-open a.cmb-learn { display: inline-flex; }
	.cmb-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cmb-carousel { display: block; }
	.cmb--carousel .cmb-grid { gap: 10px; }
	.cmb--carousel .cmb-card { flex-basis: 72%; }
	.cmb-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
	.cmb button.cmb-nav__btn, .cmb button.cmb-nav__btn:focus { width: 36px; height: 36px; box-shadow: none; }
	.cmb-card__body { padding: 10px 12px 12px; }
	.cmb .cmb-card__title { font-size: 16px; }
	.cmb-card__notes { font-size: 13px; }
	.cmb-detail { grid-template-columns: 1fr; }
	.cmb-detail__media { padding: 16px 16px 0; }
	.cmb-gallery__main { max-height: 200px; }
	.cmb-detail__content { padding: 12px 16px 16px; }
	.cmb-enquire { padding: 16px; }
	.cmb-dialog .cmb-detail__title { font-size: 23px; }
	.cmb-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
}
@media (max-width: 359px) {
	.cmb-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.cmb *, .cmb-dialog, .cmb-dialog * { animation: none !important; transition: none !important; }
}