/**
 * Mason — Balsam Hill tree shop (Stage 1).
 * Full-width archive, promo banner, horizontal dropdown filter bar, mobile scrollable.
 */

/* ---- Full width: drop the sidebar column, widen content ---- */
.mason-tree-shop .category-page-row > .large-3,
.mason-tree-shop .category-page-row > .col.large-3 { display: none !important; }
.mason-tree-shop .category-page-row > .large-9,
.mason-tree-shop .category-page-row > .col.large-9 {
	max-width: 100% !important;
	flex-basis: 100% !important;
	width: 100% !important;
}

/* ---- Hide Flatsome shop chrome we replace: native gray sort + mobile "Filter By" sidebar toggle ---- */
.mason-tree-shop .woocommerce-ordering { display: none !important; }
.mason-tree-shop .filter-button { display: none !important; }

/* ---- Heading + intro: we render our own .mason-shop-head; hide Flatsome's native one ---- */
.mason-tree-shop .term-description { display: none !important; }
.mason-shop-head { text-align: center; margin: 0 0 24px; }
.mason-shop-head h1 { margin: 0 0 12px; font-size: clamp(26px, 4.5vw, 42px); line-height: 1.12; font-weight: 700; color: #232323; }
.mason-shop-head p { margin: 0 auto; max-width: 760px; font-size: 16px; line-height: 1.6; color: #4a4a44; }
.mason-shop-head a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 849px) {
	.mason-shop-head { margin: 4px 0 16px; }
	.mason-shop-head h1 { font-size: 26px; }
	/* FIX 2 (Justin): SHOW the SEO intro text on mobile (was hidden) — collapsed behind a Read more */
	.mason-shop-head__body.mason-rm-collapsed { max-height: 6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
	.mason-shop-head__more { display: inline-block; margin-top: 6px; padding: 4px 0; background: none; border: 0; color: #355612; font-weight: 700; font-size: 13px; text-decoration: underline; cursor: pointer; }
}

/* ---- Promo banner (placeholder — swap via 'mason_tree_banner_html' filter) ---- */
.mason-tree-banner {
	margin: 0 0 24px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(120deg, #2f3d1c 0%, #445a28 55%, #6b8a3a 100%);
	color: #f7f4ec;
}
.mason-tree-banner__inner {
	padding: 38px 32px;
	text-align: center;
}
.mason-tree-banner__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .85;
}
.mason-tree-banner__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
}
.mason-tree-banner__sub { margin: 0; font-size: 15px; opacity: .92; }
/* Justin: long subtitle on desktop, a shorter one on mobile */
.mason-tree-banner__sub--short { display: none; }
@media (max-width: 849px) {
	.mason-tree-banner__sub--full { display: none; }
	.mason-tree-banner__sub--short { display: block; }
}

/* ===== Horizontal filter bar — Balsam Hill, refined ===== */
/* Row wrapper: filters (left, grow) + sort (right). Border sits under the whole row. */
.mason-filter-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 2px 0 14px;
	border-bottom: 1px solid #e6e6e0;
}
.mason-filter-bar {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
}
.mason-filter-bar__facets {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;            /* 16px between filters, content-width triggers */
}
.mason-filter-bar__meta { display: flex; align-items: center; flex-shrink: 0; gap: 16px; white-space: nowrap; }

/* neutralise FacetWP/theme default facet margins that bloated the row height */
.mason-filter-bar .facetwp-facet,
.mason-filter-bar .fs-wrap,
.mason-filter-item { margin: 0 !important; }
.mason-filter-item { position: relative; display: inline-flex; align-items: center; }

/* shared trigger: Raleway 17/500, no box */
.mason-filter-bar .fs-label-wrap,
.mason-toggle > summary,
.mason-filter-bar__meta .facetwp-sort select {
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1;
	color: #232323;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 8px 0;
	cursor: pointer;
	transition: color .15s ease;
}
.mason-filter-bar .fs-label-wrap:hover,
.mason-toggle > summary:hover,
.mason-filter-bar__meta .facetwp-sort select:hover { color: #000; }

/* no harsh blue tap-outline on the toggles; keyboard users still get a subtle brand ring */
.mason-toggle > summary:focus,
.mason-filter-bar .fs-label-wrap:focus,
.mason-filter-item:focus,
details.mason-toggle:focus { outline: none; }
.mason-toggle > summary:focus-visible,
.mason-filter-bar .fs-label-wrap:focus-visible { outline: 2px solid #6b8a3a; outline-offset: 2px; border-radius: 4px; }

/* fSelect trigger -> content-width "Name ⌄" (override fSelect's fixed 220px) */
.mason-filter-bar .fs-wrap { width: auto !important; min-width: 0 !important; display: inline-block; background: transparent; }
.mason-filter-bar .fs-label-wrap { display: inline-flex; align-items: center; gap: 4px; }
.mason-filter-bar .fs-label { font: inherit; color: inherit; }

/* masked SVG chevron — perfectly centred, recolours on hover, flips on open */
.mason-filter-bar .fs-arrow,
.mason-chev {
	position: static !important; top: auto !important; right: auto !important;
	width: 11px; height: 7px; border: 0; transform: none; margin: 1px 0 0;
	flex: 0 0 auto;
	background-color: #232323;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .18s ease, background-color .15s ease;
}
.mason-filter-bar .fs-label-wrap:hover .fs-arrow,
.mason-toggle > summary:hover .mason-chev { background-color: #3f5524; }
.mason-filter-bar .fs-wrap.fs-open .fs-arrow,
.mason-toggle[open] .mason-chev { transform: rotate(180deg); }

/* dropdown panels (fSelect + price toggle) */
.mason-filter-bar .fs-dropdown,
.mason-toggle__panel {
	border: 1px solid #e6e6e0;
	border-radius: 12px;
	box-shadow: 0 16px 36px rgba(20,25,15,.14);
	background: #fff;
	margin-top: 10px;
	padding: 8px;
	min-width: 232px;
}
.mason-filter-bar .fs-search { display: none !important; } /* no search box — short lists */
.mason-filter-bar .fs-dropdown { width: max-content; min-width: 180px; max-width: 460px; } /* fit to text, no truncation */
.mason-filter-bar .fs-dropdown .fs-options { max-height: 340px; overflow-x: visible; }
.mason-filter-bar .fs-option, .mason-filter-bar .fs-option * { overflow: visible; text-overflow: clip; }
.mason-filter-bar .fs-option { border-radius: 8px; padding: 10px 12px 10px 40px; font-size: 15px; line-height: 1.35; color: #2b2b2b; white-space: normal; }
.mason-filter-bar .fs-option:hover { background: #f3f6ec; }
.mason-filter-bar .fs-option.fs-checked { font-weight: 600; }

/* price toggle (<details>) */
.mason-toggle > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.mason-toggle > summary::-webkit-details-marker { display: none; }
.mason-toggle__panel { position: absolute; top: 100%; left: 0; z-index: 40; padding: 20px 18px; }
.mason-toggle__panel .facetwp-type-slider { min-width: 230px; }

/* sort — native select hidden; replaced by custom .mason-sort dropdown matching filters */
.mason-filter-bar__meta .facetwp-sort.mason-sort-native { display: none !important; }
.mason-sort__panel { left: auto; right: 0; min-width: 190px; }
.mason-sort__opt {
	display: block; width: 100%; text-align: left;
	background: none; border: 0; border-radius: 8px;
	padding: 10px 12px; font-size: 15px; line-height: 1.3; color: #2b2b2b;
	cursor: pointer; font-family: inherit;
}
.mason-sort__opt:hover { background: #f3f6ec; }
.mason-sort__opt.is-active { font-weight: 600; }
.mason-sort__opt.is-active::before { content: "\2713  "; color: #3f5524; }

/* ===== Multi-select checkboxes — fSelect dropdowns ===== */
.mason-filter-bar .fs-option[data-value=""] { display: none; } /* hide the leaked "any"/label option */
.mason-filter-bar .fs-option { display: block; position: relative; } /* block so long labels wrap (no truncation) */
.mason-filter-bar .fs-checkbox {
	width: 18px; height: 18px; box-sizing: border-box; position: absolute; left: 12px; top: 10px;
	border: 1.5px solid #cfcfc6; border-radius: 4px; background: #fff;
	transition: background .12s ease, border-color .12s ease;
}
.mason-filter-bar .fs-checkbox i { display: none; }
.mason-filter-bar .fs-option.selected .fs-checkbox { background: #3f5524; border-color: #3f5524; }
.mason-filter-bar .fs-option.selected .fs-checkbox::after {
	content: ""; position: absolute; left: 5px; top: 1px;
	width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ===== More Filters panel — expanded groups ===== */
.mason-more__panel { min-width: 300px; max-width: 360px; padding: 16px 18px; }

/* Auto-detected (non-fSelect) primary facets wrapped as bar dropdowns (JS). They reuse the
   More-panel checkbox styling; here we just size them tighter (single facet) + scroll long lists. */
.mason-facet-dd__panel { min-width: 230px; max-width: 300px; max-height: 320px; overflow-y: auto; }
.mason-facet-dd__panel .facetwp-type-color { display: flex; flex-wrap: wrap; gap: 8px; }
.mason-more__group + .mason-more__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0ea; }
.mason-more__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a82; margin: 0 0 8px; }
.mason-more__panel .facetwp-facet { margin: 0 !important; }
.mason-more__panel .facetwp-checkbox {
	display: flex; align-items: center; gap: 10px;
	background: none !important; padding: 7px 0 !important; margin: 0 !important;
	font-size: 15px; color: #2b2b2b; cursor: pointer;
}
.mason-more__panel .facetwp-checkbox::before {
	content: ""; width: 18px; height: 18px; flex: 0 0 18px; box-sizing: border-box;
	border: 1.5px solid #cfcfc6; border-radius: 4px; background: #fff;
}
.mason-more__panel .facetwp-checkbox.checked::before {
	border-color: #3f5524;
	background: #3f5524 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px 8px no-repeat;
}
.mason-more__panel .facetwp-counter { margin-left: auto; color: #9a9a92; font-size: 13px; }

/* Price slider RESET — flat solid green CTA (#355612); kill Flatsome's gradient/shadow */
.mason-more__panel .facetwp-reset,
.mason-more__panel .facetwp-slider-reset,
.mason-more__group[data-facet="price"] .facetwp-reset,
.mason-more__group[data-facet="price"] .facetwp-slider-reset,
.mason-more__group[data-facet="price"] input[type="button"],
.mason-more__group[data-facet="price"] button {
	display: inline-block;
	margin-top: 14px;
	background: #355612 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease;
}
.mason-more__panel .facetwp-reset:hover,
.mason-more__panel .facetwp-slider-reset:hover,
.mason-more__group[data-facet="price"] .facetwp-reset:hover,
.mason-more__group[data-facet="price"] .facetwp-slider-reset:hover,
.mason-more__group[data-facet="price"] input[type="button"]:hover,
.mason-more__group[data-facet="price"] button:hover { background: #294310 !important; }

/* ===== Sub-bar: N Results · Clear all · selection chips ===== */
.mason-filter-subbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 22px; }
.mason-result-count .facetwp-counts { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5a5a52; }
.mason-result-count .facetwp-counts::after { content: " Results"; }
.mason-clear-all { display: none; font-size: 14px; color: #232323; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mason-filter-subbar.has-filters .mason-clear-all { display: inline-block; }
.mason-filter-subbar .facetwp-selections { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.mason-filter-subbar .facetwp-selections ul,
.mason-filter-subbar .facetwp-selections li { margin: 0; padding: 0; list-style: none; display: contents; }
.mason-filter-subbar .facetwp-selections .facetwp-selection-label { display: none; }
.mason-filter-subbar .facetwp-selections .facetwp-selection-value,
.mason-filter-subbar .facetwp-selections li > span {
	display: inline-flex; align-items: center; gap: 8px;
	background: #76766e; color: #fff; border-radius: 4px;
	padding: 6px 10px; font-size: 13px; cursor: pointer; transition: background .12s ease;
}
.mason-filter-subbar .facetwp-selections .facetwp-selection-value:hover,
.mason-filter-subbar .facetwp-selections li > span:hover { background: #5e5e57; }
.mason-filter-subbar .facetwp-selections .facetwp-selection-value::after,
.mason-filter-subbar .facetwp-selections li > span::after { content: "\00d7"; font-size: 15px; line-height: 1; opacity: .9; }

/* ===== Mobile: compact filter-icon button opens the bar as a full-screen drawer ===== */
/* mobile chrome hidden on desktop */
.mason-mobile-filter-toggle,
.mason-drawer-head,
.mason-drawer-foot { display: none; }
body.mason-scroll-lock { position: fixed; width: 100%; overflow: hidden; }

.mason-is-mobile .mason-tree-banner__inner { padding: 26px 18px; }

/* mobile: Filters (left) + Sort (right) in one row */
.mason-is-mobile .mason-filter-controls { justify-content: space-between; gap: 12px; border-bottom: 0; padding: 0 0 16px; }
.mason-is-mobile .mason-filter-bar__meta { flex: 0 0 auto; }
.mason-is-mobile .mason-filter-bar__meta .mason-sort > summary {
	border: 0; border-radius: 0; padding: 8px 0; min-height: 44px;
	font-size: 16px; font-weight: 600;
}

/* plain-text trigger (no frame): funnel icon + "Filters" */
.mason-is-mobile .mason-mobile-filter-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0; padding: 8px 0; min-height: 44px;
	background: transparent; border: 0; border-radius: 0;
	font-size: 16px; font-weight: 600; color: #232323; cursor: pointer;
}

/* hide inline bar until opened as a drawer */
.mason-is-mobile .mason-filter-bar { display: none; }
.mason-is-mobile.mason-drawer-open .mason-filter-bar {
	display: block; position: fixed; inset: 0; z-index: 99999;
	background: #fff; margin: 0; padding: 0; border: 0; overflow-y: auto;
}
.mason-is-mobile.mason-drawer-open .mason-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	position: sticky; top: 0; z-index: 2; background: #fff;
	padding: 16px 18px; border-bottom: 1px solid #ececec;
}
.mason-drawer-title { font-size: 18px; font-weight: 700; color: #232323; }
.mason-drawer-close { background: none; border: 0; padding: 0; font-size: 28px; line-height: 1; color: #232323; cursor: pointer; }
/* mobile: kill Flatsome's button margin, 44px tap target, glyph stays flush-right (aligns with row chevrons) */
.mason-is-mobile .mason-drawer-close { margin: 0 !important; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }

/* facets stacked; each an accordion (fSelect panel inline, no clipping) */
.mason-is-mobile.mason-drawer-open .mason-filter-bar__facets { display: block; padding: 4px 18px 0; gap: 0; }
.mason-is-mobile.mason-drawer-open .mason-filter-item { display: block; width: 100%; border-bottom: 1px solid #f0f0ea; }
.mason-is-mobile.mason-drawer-open .fs-wrap { display: block; width: 100% !important; }
.mason-is-mobile.mason-drawer-open .fs-label-wrap,
.mason-is-mobile.mason-drawer-open .mason-toggle > summary { width: 100%; justify-content: space-between; padding: 16px 0 !important; font-size: 16px; font-weight: 500; }
/* kill any fSelect/Flatsome internal inset so every row aligns flush-left with "More Filters" */
.mason-is-mobile.mason-drawer-open .fs-label,
.mason-is-mobile.mason-drawer-open .mason-trigger { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; }
.mason-is-mobile.mason-drawer-open .fs-dropdown {
	position: static !important; display: none !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
	width: auto !important; max-width: none !important; min-width: 0 !important;
	margin: 0 0 12px !important; padding: 0 !important;
}
.mason-is-mobile.mason-drawer-open .fs-wrap.fs-open .fs-dropdown { display: block !important; }
.mason-is-mobile.mason-drawer-open .mason-toggle__panel {
	position: static !important; box-shadow: none !important; border: 0 !important;
	min-width: 0 !important; max-width: none !important; padding: 0 0 12px !important;
}

/* (sort now lives in the controls row beside the Filters button, not inside the drawer) */

/* sticky apply footer */
.mason-is-mobile.mason-drawer-open .mason-drawer-foot {
	display: block; position: sticky; bottom: 0; z-index: 2; background: #fff;
	border-top: 1px solid #ececec; padding: 14px 18px;
}
.mason-drawer-apply {
	display: block; width: 100%; background: #355612; color: #fff;
	border: 0; border-radius: 8px; padding: 14px; font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
}

/* ===== Archive card — "View Tree" CTA (Balsam Hill: outline, fills brand-green on hover) ===== */
.mason-tree-shop .mason-view-tree {
	display: block; width: 100%; text-align: center;
	margin: 4px 0 0;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #232323 !important;
	border: 1.5px solid #232323 !important;
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: none; line-height: 1.2;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mason-tree-shop .mason-view-tree:hover,
.mason-tree-shop .mason-view-tree:focus {
	background: #355612 !important; border-color: #355612 !important; color: #fff !important;
}
/* "Build Your Starter Kit" CTA on Starter Kit cards — same look, but UNSCOPED so it also
   styles kit cards outside the tree-shop body (e.g. homepage / main shop). */
.mason-build-kit {
	display: block; width: 100%; text-align: center; margin: 4px 0 0;
	background: transparent !important; background-image: none !important;
	box-shadow: none !important; text-shadow: none !important;
	color: #232323 !important; border: 1.5px solid #232323 !important; border-radius: 8px;
	padding: 12px 18px; font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: none; line-height: 1.2;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mason-build-kit:hover, .mason-build-kit:focus { background: #355612 !important; border-color: #355612 !important; color: #fff !important; }

/* ===== Archive card — editable per-product fields (task 5) ===== */
.mason-card-meta { margin: 2px 0 8px; }
.mason-card-desc { font-size: 13px; line-height: 1.45; color: #4a4a44; margin: 0 0 5px; }
.mason-card-spec { font-size: 12.5px; line-height: 1.4; color: #6a6a62; margin: 0 0 5px; }
.mason-card-spec:last-child { margin-bottom: 0; }
.mason-card-spec__k { font-weight: 600; color: #2b2b2b; }

/* ===== "Shop by Need" nav block (christmas-tree-shop-block) ===== */
/* Cleaner look: hide the block's intro heading + subtitle (not required by the task — Justin's
   block content). Revert by removing this rule or editing the block in UX Builder. */
.mason-tree-shop-block > p { display: none; }
/* hide the per-tile description captions (keep image + heading) */
.mason-tree-shop-block .box-text-inner .text { display: none; }
.mason-tree-shop-block { margin: 8px 0 24px; }

/* Mobile: horizontal scroll — ~2 tiles visible + a peek of the next, swipeable (Justin's pattern). */
@media (max-width: 849px) {
	.mason-tree-shop-block .row {
		display: flex;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		margin: 0;
		padding: 0 0 8px;
		gap: 12px;
	}
	.mason-tree-shop-block .row > .col {
		flex: 0 0 38%;
		max-width: 38%;
		padding: 0;
		scroll-snap-align: start;
	}
	.mason-tree-shop-block .row::-webkit-scrollbar { height: 0; }
	/* a touch smaller tiles on mobile */
	.mason-tree-shop-block h4 { font-size: 14px; line-height: 1.2; margin-bottom: 0; }
	.mason-tree-shop-block .box-text-inner { padding-top: 6px; }
}