/* Big Box Tile Updates – catalog pages (site colours: teal #3d8aa4, light blue #ecf3f4 / #d8e8eb, text #242424 / #616161) */

/* ---------- layout: no sidebar, wider page, 4 per row ---------- */
/* 4 cards (about 268 px) lined up with the site's header and footer (theme width 1230 px, content 1190 px) */
.listing:has(.searchandfilter) > .container { max-width: 1251px; }
.listing:has(.searchandfilter) > .container > .row > .col-xl-3 { display: none; }
.listing:has(.searchandfilter) .js-listing-products-holder { flex: 0 0 100%; max-width: 100%; width: 100%; }

@media (min-width: 1200px) {
	.listing .product-listing-item { flex: 0 0 25%; max-width: 25%; width: 25%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.listing .product-listing-item { flex: 0 0 33.3333%; max-width: 33.3333%; width: 33.3333%; }
}

/* ---------- filter bar ---------- */
.bbt-filterbar-col { flex: 0 0 100%; max-width: 100%; }
.bbt-filterbar {
	display: flex;
	align-items: stretch;
	border-top: 1px solid #d8e8eb;
	border-bottom: 1px solid #d8e8eb;
	margin: 0 0 34px;
}
.bbt-filterbar__label {
	display: flex;
	align-items: center;
	padding: 0 26px 0 0;
	margin-right: 6px;
	border-right: 1px solid #d8e8eb;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #616161;
	white-space: nowrap;
}
.bbt-filterbar .searchandfilter { flex: 1; margin: 0; }
.bbt-filterbar .searchandfilter > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bbt-filterbar .searchandfilter > ul > li {
	position: relative;
	margin: 0;
	padding: 0;
}
/* the trigger: same voice as the main menu (uppercase, spaced, teal on hover) */
.bbt-filterbar .searchandfilter > ul > li > h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 20px 20px 18px;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #242424;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}
.bbt-filterbar .searchandfilter > ul > li > h4::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: -3px 0 0 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s, margin .2s;
}
.bbt-filterbar .searchandfilter > ul > li > h4:hover,
.bbt-filterbar .searchandfilter > ul > li.bbt-open > h4,
.bbt-filterbar .searchandfilter > ul > li.bbt-has-value > h4 { color: #3d8aa4; }
.bbt-filterbar .searchandfilter > ul > li.bbt-open > h4 { border-bottom-color: #3d8aa4; }
.bbt-filterbar .searchandfilter > ul > li.bbt-open > h4::after { transform: rotate(-135deg); margin-top: 3px; }
.bbt-filterbar__value {
	color: #3d8aa4;
	font-weight: 700;
	letter-spacing: 1px;
}

/* the panel */
.bbt-filterbar .searchandfilter > ul > li > ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 240px;
	margin: 1px 0 0;
	padding: 20px 22px 14px;
	background: #fff;
	border: 1px solid #d8e8eb;
	border-top: 0;
	box-shadow: 0 14px 30px rgba(36, 36, 36, .10);
	list-style: none;
}
.bbt-filterbar .searchandfilter > ul > li.bbt-open > ul { display: block; }
.bbt-filterbar .searchandfilter > ul > li > ul > li { margin: 0 0 10px; padding: 0; }
/* "All ..." option stays reachable here so a choice can be cleared */
.bbt-filterbar .searchandfilter > ul > li > ul > li.sf-item-0 { display: block !important; }

/* sizes and colors: several columns */
.bbt-filterbar li.sf-field-taxonomy-pa_size > ul.bbt-cols,
.bbt-filterbar li.sf-field-taxonomy-pa_colors > ul.bbt-cols {
	display: none;
	grid-template-columns: repeat(3, minmax(120px, 1fr));
	column-gap: 22px;
	min-width: 460px;
}
.bbt-filterbar li.bbt-open.sf-field-taxonomy-pa_size > ul.bbt-cols,
.bbt-filterbar li.bbt-open.sf-field-taxonomy-pa_colors > ul.bbt-cols { display: grid; }

/* "Reset Filters" sits at the right end as a quiet link */
.bbt-filterbar .searchandfilter > ul > li.sf-field-reset {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.bbt-filterbar .search-filter-reset {
	padding: 0 0 0 20px;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #616161;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bbt-filterbar .search-filter-reset:hover { color: #3d8aa4; }
/* hidden "Size Family" field stays hidden in the bar too (see bbt-updates.css) */

/* ---------- cards: item pictures + sizes ---------- */
.product-listing__box-colors-wrapper.bbt-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.product-listing__box-color.bbt-swatch {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	margin: 0;
	border-radius: 0;
	border: 1px solid #d8e8eb;
	background-color: #ecf3f4 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none;
	transition: box-shadow .15s;
}
.product-listing__box-color.bbt-swatch:hover { box-shadow: 0 0 0 1px #3d8aa4; }
.product-listing__box-color.bbt-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3d8aa4; }
.product-listing__box-color.bbt-swatch::before,
.product-listing__box-color.bbt-swatch::after { display: none !important; }

.product-listing__box-sizes-wrapper.bbt-has-sizes .product-listing__box-size { display: none; }
.bbt-card-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 12px;
	letter-spacing: 1px;
	color: #616161;
	text-transform: none;
}
.bbt-card-sizes span { white-space: nowrap; }

/* ---------- tablet / phone ---------- */
@media (max-width: 991px) {
	.bbt-filterbar { flex-direction: column; }
	.bbt-filterbar__label { padding: 14px 0 6px; border-right: 0; }
	.bbt-filterbar .searchandfilter > ul > li > h4 { padding: 14px 16px 12px 0; }
	.bbt-filterbar .searchandfilter > ul > li { position: static; }
	.bbt-filterbar .searchandfilter > ul { position: relative; }
	.bbt-filterbar .searchandfilter > ul > li > ul { left: 0; right: 0; min-width: 0; }
	.bbt-filterbar li.sf-field-taxonomy-pa_size > ul.bbt-cols,
	.bbt-filterbar li.sf-field-taxonomy-pa_colors > ul.bbt-cols { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bbt-filterbar .searchandfilter > ul > li.sf-field-reset { margin-left: 0; width: 100%; padding: 6px 0 14px; }
	.bbt-filterbar .search-filter-reset { padding: 0; }
}

/* ---------- fixes on top of the theme ---------- */
/* card fills its column (271 px at full width, smaller on narrower screens); image keeps the 271 x 250 shape */
@media (min-width: 992px) {
	.listing .product-listing__box { width: 100%; }
	.listing .product-listing__box-img-wrapper { height: auto; aspect-ratio: 271 / 250; }
}
/* bar lines up with the cards; results line sits right under the bar */
.bbt-filterbar-col { padding: 0 30px; }
.listing:has(.bbt-filterbar) .filter-nav { padding-top: 0; }
/* the theme draws "Reset Filters" as a teal button: keep it a quiet link in the bar */
.bbt-filterbar .searchandfilter > ul > li.sf-field-reset { width: auto; height: auto; background: none; }
.bbt-filterbar .searchandfilter .search-filter-reset {
	display: inline !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
.bbt-filterbar .searchandfilter .search-filter-reset::before,
.bbt-filterbar .searchandfilter .search-filter-reset::after { display: none !important; }
@media (max-width: 991px) {
	.bbt-filterbar-col { padding: 0 20px; }
}
/* labels in the multi-column panels stay on one line */
.bbt-filterbar ul.bbt-cols label { white-space: nowrap; }
@media (min-width: 992px) {
	.bbt-filterbar li.sf-field-taxonomy-pa_size > ul.bbt-cols,
	.bbt-filterbar li.sf-field-taxonomy-pa_colors > ul.bbt-cols { min-width: 540px; grid-template-columns: repeat(3, max-content); column-gap: 34px; }
}
/* colors are dots (the theme hides their names): a compact grid */
@media (min-width: 992px) {
	.bbt-filterbar li.sf-field-taxonomy-pa_colors > ul.bbt-cols { min-width: 0; grid-template-columns: repeat(6, max-content); column-gap: 18px; }
}

/* bigger item pictures (5 per line): extra items go into a "+N" tile */
.product-listing__box-color.bbt-swatch.bbt-swatch-hidden { display: none !important; }
.bbt-swatch-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	background: #ecf3f4;
	border: 1px solid #d8e8eb;
	color: #3d8aa4;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
}

/* Application in the bar: same squares and text as Finishes (the theme draws big circles here) */
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-label-radio {
	display: inline-block;
	padding-left: 36px;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #000;
}
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-label-radio::before {
	top: -2px;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	box-shadow: rgba(61, 138, 164, .35) 0 2px 5px inset;
}
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-label-radio::after {
	top: 3px;
	left: 5px;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background-color: #3d8aa4;
}
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-input-radio:checked + .sf-label-radio { color: #3d8aa4; }
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-label-radio:hover { color: #3d8aa4; }
/* panel options stay on one line */
.bbt-filterbar .searchandfilter > ul > li > ul label { white-space: nowrap; }

/* Colors as a list like Size: square checkbox, color chip, name and count (the theme draws 26 px circles) */
.bbt-filterbar .searchandfilter ul li.sf-field-taxonomy-pa_colors[data-sf-field-input-type="checkbox"] li {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 10px;
	padding: 0;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}
.bbt-filterbar li.sf-field-taxonomy-pa_colors[data-sf-field-input-type="checkbox"] .sf-label-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.bbt-color-chip {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	border: 1px solid rgba(36, 36, 36, .15);
}
@media (min-width: 992px) {
	.bbt-filterbar li.sf-field-taxonomy-pa_colors[data-sf-field-input-type="checkbox"] > ul.bbt-cols {
		min-width: 540px;
		grid-template-columns: repeat(3, max-content);
		column-gap: 34px;
	}
}

/* ---------- one text style with the header menu (#616161, Helvetica Neue, 12px, 1.1px spacing) ---------- */
.bbt-filterbar .searchandfilter > ul > li > h4,
.bbt-filterbar__label,
.bbt-filterbar .searchandfilter .search-filter-reset,
.bbt-filterbar .searchandfilter .sf-label-checkbox,
.bbt-filterbar .searchandfilter .sf-label-radio,
.bbt-filterbar .sf-field-taxonomy-pa_aplication .sf-label-radio,
.bbt-card-sizes {
	font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.1px;
	color: #616161;
}
.bbt-filterbar__value { font-weight: 400; letter-spacing: 1.1px; }
/* hover / open / picked stay teal, like the menu's hover */
.bbt-filterbar .searchandfilter > ul > li > h4:hover,
.bbt-filterbar .searchandfilter > ul > li.bbt-open > h4,
.bbt-filterbar .searchandfilter > ul > li.bbt-has-value > h4,
.bbt-filterbar .searchandfilter .search-filter-reset:hover,
.bbt-filterbar .searchandfilter .sf-label-checkbox:hover,
.bbt-filterbar .searchandfilter .sf-label-radio:hover,
.bbt-filterbar .searchandfilter .sf-input-checkbox:checked + .sf-label-checkbox,
.bbt-filterbar .searchandfilter .sf-input-radio:checked + .sf-label-radio { color: #3d8aa4; }

/* ---------- cards right under the filter bar ---------- */
/* no results count / page numbers above the cards (page numbers stay below the cards) */
.listing:has(.bbt-filterbar) .filter-nav:not(.filter-nav--bottom) { display: none; }
.listing:has(.bbt-filterbar) .listing-products { padding-top: 0; }
.bbt-filterbar { margin-bottom: 28px; }
/* selected-filter tags: no space when there are none */
.listing:has(.bbt-filterbar) .js-filter-selected { padding: 0; margin: 0; }
.listing:has(.bbt-filterbar) .js-filter-selected:has(> span) { padding: 0 0 24px; }
/* no counts in the filter lists */
.bbt-filterbar .sf-count { display: none !important; }

/* ---------- section tabs above the filter bar (All / New / Discontinued) ---------- */
.bbt-sections {
	display: flex;
	border-bottom: 1px solid #d8e8eb;
	margin: 0 0 26px;
}
.bbt-sections__tab {
	position: relative;
	flex: 1 1 0;
	padding: 20px 10px 18px;
	text-align: center;
	font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.1px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #616161;
	text-decoration: none;
	transition: color .2s;
}
.bbt-sections__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
	transition: background .2s;
}
.bbt-sections__tab:hover,
.bbt-sections__tab:focus-visible { color: #3d8aa4; text-decoration: none; }
.bbt-sections__tab.is-active { color: #3d8aa4; }
.bbt-sections__tab.is-active::after { background: #3d8aa4; }
@media (max-width: 640px) {
	.bbt-sections__tab { padding: 16px 4px 14px; font-size: 11px; letter-spacing: .6px; }
}

/* the tabs replace the Discontinued dropdown (the field stays in the form for the tab and the menu link) */
.bbt-filterbar .sf-field-post-meta-discontinued_product { display: none !important; }

/* ---------- spacing: tabs near the top, clear space around the filter bar, more room before the cards ---------- */
@media (min-width: 992px) {
	/* the theme leaves 192 px under its fixed header (102 px tall): tabs start ~30 px under the header */
	.listing:has(.bbt-filterbar) { padding-top: 132px; }
}
.bbt-sections { margin-bottom: 44px; }
.bbt-filterbar { margin-bottom: 56px; }
.listing:has(.bbt-filterbar) .js-filter-selected:has(> span) { margin-top: -24px; padding-bottom: 32px; }
@media (max-width: 991px) {
	.bbt-sections { margin-bottom: 28px; }
	.bbt-filterbar { margin-bottom: 36px; }
	.listing:has(.bbt-filterbar) .js-filter-selected:has(> span) { margin-top: -12px; padding-bottom: 24px; }
}

/* ---------- filter order in the bar: Size, Color, Finishes, Stone Type, Application (form settings unchanged) ---------- */
.bbt-filterbar .searchandfilter > ul > li { order: 10; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-taxonomy-pa_size { order: 1; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-taxonomy-pa_colors { order: 2; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-taxonomy-pa_finishes { order: 3; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-taxonomy-pa_stone-type { order: 4; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-taxonomy-pa_aplication { order: 5; }
.bbt-filterbar .searchandfilter > ul > li.sf-field-reset { order: 20; }

/* ---------- cards: same layout and height ---------- */
/* title always takes two lines of space (longer names end with "…"), so pictures and sizes line up */
.listing .product-listing__box-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 48px;   /* 2 lines x 24px */
	max-height: 48px;
}
/* card fills the row height; sizes line sits at the bottom */
.listing .product-listing__box { display: flex; flex-direction: column; }
.listing .product-listing__box .product-img-section { flex: 1 1 auto; display: flex; flex-direction: column; }
.listing .product-listing__box .product__caption { flex: 1 1 auto; display: flex; flex-direction: column; }
/* pictures stay right under the title; the sizes line always has room for 2 lines (cards keep one height) */
.listing .product-listing__box .product-listing__box-info-wrapper { flex: 0 0 auto; }
.listing .product-listing__box .product-listing__box-sizes-wrapper { margin-top: auto; min-height: 51px; }

/* ---------- bigger cards (320 x 550 at full width): photo keeps its shape, the extra height is white space ---------- */
@media (min-width: 992px) {
	.listing .product-listing__box .product-listing__box-img-wrapper { margin-bottom: 59px; }   /* +20 under the photo */
	.listing .product-listing__box .product-listing__box-title { margin-bottom: 26px; }         /* +10 under the name */
	.listing .product-listing__box .product-listing__box-colors-wrapper { margin-bottom: 23px; }/* +10 under the pictures */
	.listing .product-listing__box .product-listing__box-sizes-wrapper { min-height: 61px; }    /* +10 in the sizes line */
	/* a full row of cards fits on screen under the tabs and filters */
	.bbt-filterbar { margin-bottom: 36px; }
}

/* ---------- bigger item pictures (48 px at full card width, 5 on a line) and sizes centered in their line ---------- */
.product-listing__box-colors-wrapper.bbt-swatches { width: 100%; gap: 5px; flex-wrap: nowrap; }
.product-listing__box-color.bbt-swatch,
.bbt-swatch-more {
	flex: 0 0 calc((100% - 20px) / 5);
	width: auto;
	height: auto;
	max-width: 48px;
	aspect-ratio: 1 / 1;
}
@media (min-width: 992px) {
	/* the pictures are 10 px taller: take it from the space under them, so cards stay 550 px */
	.listing .product-listing__box .product-listing__box-colors-wrapper { margin-bottom: 13px; }
}
.listing .product-listing__box .product-listing__box-sizes-wrapper.bbt-has-sizes,
.listing .product-listing__box .product-listing__box-sizes-wrapper {
	display: flex;
	align-items: center;
}

/* page numbers line up with the cards */
.listing:has(.searchandfilter) .filter-nav--bottom { margin-left: 10px; margin-right: 10px; }

/* ---------- item pictures as large as the card allows: 4 per line (52 px at the standard card width) ---------- */
.listing .product-listing__box .product-listing__box-info-wrapper { padding-right: 21px; }   /* same as the left: full width for the pictures */
.product-listing__box-color.bbt-swatch,
.bbt-swatch-more {
	flex: 0 0 calc((100% - 15px) / 4);
	max-width: 56px;
}