/* BetterChecked lists: tiles (pack and box), header panel, mobile menu panel,
   sidebar grid, homepage slider. Markup: theme-functions/bc-lists.php */

.bc-mega,
.bc-packs,
.bc-tiles,
.bc-tile {
	--bc-green: #72a449;
	--bc-green-deep: #4e6633;
	--bc-green-ink: #171f0f;
	--bc-tint: #f1f6ea;
	--bc-ink: #1d2419;
	--bc-muted: #8a9097;
	--bc-line: #e6e9e2;
}

.bc-icon {
	display: block;
	flex: none;
}

/* ==========================================================================
   Panel: shared pieces
   ========================================================================== */

.bc-mega-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	color: var(--bc-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: .02em;
	cursor: default;
}
.bc-mega-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.bc-mega-heading {
	display: block;
	padding: 0 10px 10px;
	color: var(--bc-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: default;
}

.bc-mega-link__icon {
	display: grid;
	place-items: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--bc-tint);
	color: var(--bc-green-deep);
	transition: background-color .15s ease, color .15s ease;
}
.bc-mega-link__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Panel in the header (the theme shows its desktop menu from 1200px)
   ========================================================================== */

/* Hang the panel off the header bar instead of the menu entry. */
.space-header-menu ul.main-menu li.bc-mega-parent {
	position: static;
}

.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega {
	display: grid !important;
	grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 28px;
	box-sizing: border-box;
	left: calc(-33.3333% + 15px);
	width: 920px;
	max-width: calc(133.3333% - 30px);
	padding: 26px 28px 28px;
	border-radius: 0 0 18px 18px;
	background-color: #fff;
	box-shadow: 0 24px 50px -12px rgba(23, 31, 15, .28), 0 0 0 1px rgba(23, 31, 15, .05);
	cursor: default;
}
.space-header-menu ul.main-menu li.bc-mega-parent:focus-within ul.sub-menu.bc-mega {
	top: 80px;
	opacity: 1;
	visibility: visible;
}

.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li {
	float: none;
	position: static;
	width: auto;
	padding: 0;
	line-height: inherit;
}
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li.bc-mega-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li.bc-mega-col--main {
	justify-content: center;
	gap: 14px;
	padding-right: 28px;
	border-right: 1px solid var(--bc-line);
}

/* The theme treats a list inside a sub-menu as a fly-out. This one is a plain list. */
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li ul.bc-mega-list {
	position: static;
	display: block;
	opacity: 1;
	visibility: inherit;
	transition: none;
}

.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px 10px;
	border: 0;
	border-radius: 10px;
	color: var(--bc-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	transition: background-color .15s ease, color .15s ease;
}
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link:hover,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link:focus-visible,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li.is-current a.bc-mega-link {
	border: 0;
	background-color: var(--bc-tint);
	color: var(--bc-green-ink);
}
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link:hover .bc-mega-link__icon,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link:focus-visible .bc-mega-link__icon,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li.is-current .bc-mega-link__icon {
	background-color: var(--bc-green);
	color: #fff;
}

/* ==========================================================================
   Panel in the mobile menu: the same three blocks, stacked
   ========================================================================== */

/* Open from the start. The theme's toggle (a tap on the entry) folds it and brings it back. */
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega {
	display: block;
	padding: 8px 0 18px;
	cursor: default;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li {
	cursor: default;
	font-weight: 400;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li.bc-mega-col {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li.bc-mega-col--main {
	gap: 10px;
	margin-top: 6px;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega .bc-mega-heading {
	padding: 0 0 8px;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-mega-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	color: var(--bc-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li.is-current a.bc-mega-link {
	color: var(--bc-green-deep);
	font-weight: 700;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li.is-current .bc-mega-link__icon {
	background-color: var(--bc-green);
	color: #fff;
}
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega .bc-mega-link__icon {
	flex-basis: 34px;
	width: 34px;
	height: 34px;
}
/* ==========================================================================
   Tiles: a list drawn as a pack (crimped foil) or as a box (lid over body)
   ========================================================================== */

.bc-tile {
	--tile-pad: 14px;        /* gutter inside the tile */
	--tile-crimp: 12px;      /* pack: width of one tooth of the crimped seals */
	--tile-seal: 22px;       /* pack: height of the heat seal band */
	--tile-lid: 22.14%;      /* box: height of the lid, as drawn in the mask */
	--tile-inset: 3.5%;      /* box: how far the lid overhangs the body on each side, as drawn in the mask */
	--tile-title: 21px;
	--tile-title-lh: 24px;
	--tile-badge: 12px;
	--tile-shadow: drop-shadow(0 10px 14px rgba(23, 31, 15, .28));
	--tile-shadow-up: drop-shadow(0 18px 20px rgba(23, 31, 15, .34));
	--tile-tilt: -1.2deg;
}
.bc-tile--box {
	--tile-tilt: 1.2deg;
}

/* The theme styles every link in a menu and in page content: state the basics in each place. */
a.bc-tile,
.bc-packs a.bc-tile,
.bc-tiles a.bc-tile,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-tile,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-tile:hover,
.space-mobile-menu-list ul li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-tile {
	display: block;
	padding: 0;
	border: 0;
	color: #fff;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	filter: var(--tile-shadow);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1.2), filter .25s ease;
}
a.bc-tile:hover,
a.bc-tile:focus-visible,
.space-header-menu ul.main-menu li.bc-mega-parent ul.sub-menu.bc-mega li a.bc-tile:hover {
	transform: translateY(-6px) rotate(var(--tile-tilt));
	filter: var(--tile-shadow-up);
	outline: none;
}

.bc-tile__wrap {
	position: relative;
	display: block;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	background: var(--bc-green-ink);
}
.bc-tile__art,
.bc-tile__art .bc-tile__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.bc-tile__art .bc-tile__img {
	max-width: none;
	object-fit: cover;
	transition: transform .5s ease;
}
a.bc-tile:hover .bc-tile__img {
	transform: scale(1.06);
}
.bc-tile__art::after {
	content: '';
	position: absolute;
	inset: 0;
}
.bc-tile__shine {
	position: absolute;
	inset: -20% -60%;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%);
	transform: translateX(-70%);
	transition: transform .7s ease;
	pointer-events: none;
}
a.bc-tile:hover .bc-tile__shine,
a.bc-tile:focus-visible .bc-tile__shine {
	transform: translateX(70%);
}

.bc-tile__top {
	position: absolute;
	left: var(--tile-pad);
	right: var(--tile-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bc-tile__badge {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .42em .85em .42em .65em;
	border-radius: 999px;
	background: rgba(235, 245, 224, .94);
	color: var(--bc-green-ink);
	font-size: var(--tile-badge);
	font-weight: 700;
	line-height: 1.17;
	white-space: nowrap;
}
.bc-tile__badge .bc-icon {
	width: 1.17em;
	height: 1.17em;
}
.bc-tile__no {
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}
.bc-tile__title {
	position: absolute;
	left: var(--tile-pad);
	right: var(--tile-pad);
	color: #ebf5e0;
	font-size: var(--tile-title);
	font-weight: 800;
	line-height: var(--tile-title-lh);
	text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	text-wrap: balance;
}

/* --- Pack: crimped seals top and bottom, foil in between ------------------ */

.bc-tile--pack .bc-tile__wrap {
	-webkit-mask:
		conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tile-crimp) 51% repeat-x,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tile-crimp) 51% repeat-x;
	mask:
		conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tile-crimp) 51% repeat-x,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tile-crimp) 51% repeat-x;
}
/* The two heat seals, and a green wash so the name reads on any banner. */
.bc-tile--pack .bc-tile__art::after {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, rgba(0, 0, 0, .18) 1px 3px) top / 100% var(--tile-seal) no-repeat,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, rgba(0, 0, 0, .18) 1px 3px) bottom / 100% var(--tile-seal) no-repeat,
		linear-gradient(180deg, rgba(23, 31, 15, .62) 0, rgba(78, 102, 51, .18) 32%, rgba(78, 102, 51, .26) 48%, rgba(23, 31, 15, .84) 76%, rgba(23, 31, 15, .96) 100%);
}
.bc-tile--pack .bc-tile__top {
	top: calc(var(--tile-seal) + 10px);
}
.bc-tile--pack .bc-tile__title {
	bottom: calc(var(--tile-seal) + 12px);
}

/* --- Box: a lid that overhangs the body -------------------------------- */

.bc-tile--box .bc-tile__wrap {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280' preserveAspectRatio='none'%3E%3Cpath d='M9 0H191A9 9 0 0 1 200 9V59A3 3 0 0 1 197 62H193V269A11 11 0 0 1 182 280H18A11 11 0 0 1 7 269V62H3A3 3 0 0 1 0 59V9A9 9 0 0 1 9 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280' preserveAspectRatio='none'%3E%3Cpath d='M9 0H191A9 9 0 0 1 200 9V59A3 3 0 0 1 197 62H193V269A11 11 0 0 1 182 280H18A11 11 0 0 1 7 269V62H3A3 3 0 0 1 0 59V9A9 9 0 0 1 9 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bc-tile--box .bc-tile__art::after {
	background:
		/* light on the lid's lower edge, then the shadow the lid throws on the body */
		linear-gradient(180deg, transparent calc(var(--tile-lid) - 2px), rgba(255, 255, 255, .38) calc(var(--tile-lid) - 2px), rgba(255, 255, 255, .38) var(--tile-lid), rgba(0, 0, 0, .58) var(--tile-lid), rgba(0, 0, 0, 0) calc(var(--tile-lid) + 20px)),
		/* the lid, a shade darker than the body */
		linear-gradient(180deg, rgba(23, 31, 15, .58) 0, rgba(23, 31, 15, .40) var(--tile-lid), transparent var(--tile-lid)),
		/* the sides fall away */
		linear-gradient(90deg, rgba(0, 0, 0, .28) 0, transparent 13%, transparent 87%, rgba(0, 0, 0, .28) 100%),
		/* green wash so the name reads on any banner */
		linear-gradient(180deg, rgba(78, 102, 51, .16) 30%, rgba(78, 102, 51, .26) 48%, rgba(23, 31, 15, .84) 78%, rgba(23, 31, 15, .96) 100%);
}
/* The thumb notch in the lid. */
.bc-tile--box .bc-tile__wrap::after {
	content: '';
	position: absolute;
	top: calc(var(--tile-lid) - .62em);
	left: 50%;
	width: 1.5em;
	height: .62em;
	margin-left: -.75em;
	border-radius: .75em .75em 0 0;
	background: rgba(8, 12, 5, .66);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .22);
	font-size: var(--tile-title);
}
/* The body is narrower than the tile: badge and name keep their gutter from the body's edge. */
.bc-tile--box .bc-tile__top,
.bc-tile--box .bc-tile__title {
	left: calc(var(--tile-pad) + var(--tile-inset));
	right: calc(var(--tile-pad) + var(--tile-inset));
}
.bc-tile--box .bc-tile__top {
	top: calc(var(--tile-lid) / 2);
	transform: translateY(-50%);
}
.bc-tile--box .bc-tile__title {
	bottom: calc(var(--tile-pad) + 4px);
}

/* --- In the panel: the main list, square ------------------------------- */

.bc-mega .bc-tile {
	--tile-title: 20px;
	--tile-title-lh: 23px;
	/* on white a wide shadow reads as a grey haze */
	--tile-shadow: drop-shadow(0 4px 7px rgba(23, 31, 15, .22));
	--tile-shadow-up: drop-shadow(0 10px 14px rgba(23, 31, 15, .28));
}
.bc-mega .bc-tile__wrap {
	aspect-ratio: 1 / 1;
}

/* --- In the sidebar: two to a row -------------------------------------- */

.bc-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
	padding: 6px 0 14px;
}
.bc-tiles .bc-tile {
	--tile-pad: 10px;
	--tile-crimp: 9px;
	--tile-seal: 15px;
	--tile-title: 15px;
	--tile-title-lh: 17px;
	--tile-badge: 11px;
	--tile-shadow: drop-shadow(0 6px 8px rgba(23, 31, 15, .24));
	--tile-shadow-up: drop-shadow(0 12px 14px rgba(23, 31, 15, .32));
}
.bc-tiles .bc-tile--pack .bc-tile__top {
	top: calc(var(--tile-seal) + 7px);
}
.bc-tiles .bc-tile--pack .bc-tile__title {
	bottom: calc(var(--tile-seal) + 8px);
}
/* Up to 1024px the sidebar sits under the content and the theme lays it out in one to three
   columns. A block of tiles takes a full row there, and so does the heading in front of it. */
@media (max-width: 1024px) {
	.main-sidebar-wrapper .bc-tiles,
	.main-sidebar-wrapper .sidebar-section-header:has(+ .bc-tiles) {
		grid-column: 1 / -1;
	}
	.bc-tiles .bc-tile {
		--tile-title: 17px;
		--tile-title-lh: 19px;
		--tile-badge: 12px;
		--tile-pad: 12px;
	}
}
@media (min-width: 481px) and (max-width: 1024px) {
	.bc-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px 14px;
	}
}
@media (min-width: 481px) and (max-width: 727px) {
	.bc-tiles {
		gap: 14px 10px;
	}
	.bc-tiles .bc-tile {
		--tile-title: 14px;
		--tile-title-lh: 16px;
		--tile-badge: 10px;
		--tile-pad: 8px;
		--tile-seal: 12px;
		--tile-crimp: 8px;
	}
}

/* ==========================================================================
   Homepage: the tiles in a slider, two lines of copy under each
   ========================================================================== */

.bc-packs {
	--pack-w: 200px;
	--edge: 15px;            /* the theme's gutter */
	--bleed: var(--edge);    /* from the slider's edge to the edge of the screen */
	position: relative;
	max-width: 1170px;
	margin: 0 auto;
	text-align: left;
}
/* The desktop column is 1170px wide and centred: what is left of the screen, halved, is the way out. */
@media (min-width: 1200px) {
	.bc-packs {
		--bleed: calc((100vw - 1170px) / 2);
	}
}

.bc-packs__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 4px 6px;
}
.bc-packs__count {
	color: var(--bc-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bc-packs__nav {
	display: inline-flex;
	gap: 8px;
}
.bc-packs .bc-packs__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--bc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--bc-ink);
	box-shadow: 0 2px 8px rgba(23, 31, 15, .08);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.bc-packs .bc-packs__btn--prev .bc-icon {
	transform: rotate(180deg);
}
.bc-packs .bc-packs__btn:hover:not(:disabled) {
	border-color: var(--bc-green);
	background: var(--bc-green);
	color: #fff;
}
.bc-packs .bc-packs__btn:disabled {
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

/* The scroller runs from one edge of the screen to the other. The first tile starts in line
   with the page content, tiles on their way out are cut by the screen and by nothing else. */
.bc-packs__viewport {
	position: relative;
	margin: 0 calc(var(--bleed) * -1);
}

.bc-packs ul.bc-packs__track {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 16px var(--bleed) 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-padding: 0 var(--bleed);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.bc-packs ul.bc-packs__track::-webkit-scrollbar {
	display: none;
}
.bc-packs ul.bc-packs__track:focus-visible {
	outline: 2px solid var(--bc-green);
	outline-offset: 2px;
	border-radius: 12px;
}

.bc-packs ul.bc-packs__track li.bc-packs__item {
	flex: 0 0 var(--pack-w);
	width: var(--pack-w);
	margin: 0;
	padding: 0;
	list-style: none;   /* the theme puts discs on every list in page content */
	scroll-snap-align: start;
}
.bc-packs ul.bc-packs__track li.bc-packs__item::before {
	content: none;
}

.bc-packs .bc-packs__item p.bc-packs__desc,
.bc-packs .bc-packs__item p.bc-packs__perfect {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
}
.bc-packs .bc-packs__item p.bc-packs__desc {
	padding-top: 16px;
	color: #3c4438;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.bc-packs .bc-packs__item p.bc-packs__perfect {
	padding-top: 8px;
	color: var(--bc-ink);
	font-weight: 700;
}

.bc-packs__progress {
	height: 3px;
	margin: 0 4px;
	border-radius: 3px;
	background: rgba(23, 31, 15, .10);
	overflow: hidden;
}
.bc-packs__progress span {
	display: block;
	width: 30%;
	height: 100%;
	border-radius: 3px;
	background: var(--bc-green);
	transform-origin: left;
	will-change: transform;
}

/* Below the desktop layout the grey band has no gutter of its own: the slider brings one. */
@media (max-width: 1199px) {
	.bc-packs {
		padding: 0 var(--edge);
	}
}
@media (max-width: 767px) {
	.bc-packs {
		--pack-w: min(58vw, 214px);
	}
	.bc-packs .bc-tile {
		--tile-crimp: 10px;
		--tile-title: 19px;
		--tile-title-lh: 22px;
	}
	.bc-packs__nav {
		display: none;
	}
	.bc-packs__bar {
		justify-content: center;
	}
	.bc-packs ul.bc-packs__track {
		gap: 16px;
		padding-bottom: 20px;
	}
}
@media (max-width: 479px) {
	.bc-packs {
		padding: 0;   /* the theme insets page content by the gutter here */
	}
}

@media (prefers-reduced-motion: reduce) {
	a.bc-tile,
	.bc-tile__shine,
	.bc-tile__art .bc-tile__img {
		transition: none !important;
	}
	a.bc-tile:hover,
	a.bc-tile:focus-visible {
		transform: none !important;
	}
}