/**
 * Mason — Christmas Ornaments hub (ClickUp #4) — 2026 styling.
 * Polishes Justin's [block id="ornament-page-block"] (content/columns stay his;
 * we add rounded image cards, hover, typography, mobile horizontal scroll, and a
 * clean section rhythm). JS (js/ornaments.js) wires the nav-card anchor jump,
 * tags card rows for the mobile slider, and removes the Read More.
 */

.mason-ornaments-hub { margin: 6px 0 44px; }

/* FIX 1B (Justin): single "Ornament Colour" filter on the hub, above the product loop */
.mason-orn-hub-filter { margin: 8px 0 24px; }
.mason-orn-hub-filter__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #16240f; margin-bottom: 8px; }
.mason-orn-hub-filter .facetwp-facet { margin: 0; }

/* ---------- section headings + intro ---------- */
.mason-ornaments-hub h2,
.mason-ornaments-hub h3,
.mason-ornaments-hub h2 strong,
.mason-ornaments-hub h3 strong {
	font-size: clamp(19px, 1.9vw, 24px) !important;
	font-weight: 400 !important;
	letter-spacing: .01em;
	color: #3a3a34 !important;
	margin: 0 0 7px;
}
.mason-ornaments-hub h3 + p,
.mason-ornaments-hub .is-section-intro {
	font-size: 14.5px;
	line-height: 1.6;
	color: #6b6b62;
	margin: 0 0 4px;
}
/* tighter, even rhythm between sections (Alex: "wyrównaj, zmniejsz przerwy") */
.mason-ornaments-hub .row { margin-bottom: 6px; }
.mason-ornaments-hub .row:not(.mason-orn-cardrow) { margin-top: 22px; }
.mason-ornaments-hub .row:first-child { margin-top: 0; }
/* trim the empty band the hidden "swipe" hint reserves on desktop */
.mason-ornaments-hub .mason-orn-arrows { margin: 0; }

/* ---------- cards (Flatsome image boxes) ---------- */
.mason-ornaments-hub .box { margin: 0; background: transparent; }
/* clean SQUARE images, ZERO rounding (Alex: "kwadratowe zdjęcia, zero zaokrągleń") */
.mason-ornaments-hub .box-image {
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
}
.mason-ornaments-hub .box-image,
.mason-ornaments-hub .box-image img,
.mason-ornaments-hub .box-image a { border-radius: 0 !important; }
.mason-ornaments-hub .box-image img { transition: transform .5s ease; display: block; }
@media (hover: hover) {
	.mason-ornaments-hub .box:hover .box-image img { transform: scale(1.04); }
}
/* Editable text captions BELOW the tile image (Alex 2026-07-04 "podpisy pod zdjęciem, jak
   wcześniej" — reverted the white-band option B). Justin edits the label as TEXT; leave it EMPTY
   on tiles whose label is already baked into the artwork (shop-by-gold etc.) so it doesn't show
   twice. ornaments.js links the whole tile. */
.mason-ornaments-hub .box { position: relative; }
/* Round-3 (Justin): the tile link is an overlay OVER THE IMAGE (JS no longer moves
   .box-image, which raced with Flatsome and dropped the image). It's appended inside
   .box-image, so it never covers the caption below — text stays selectable (Codex). */
.mason-ornaments-hub .box-image { position: relative; }
.mason-ornaments-hub .box-image > .mason-orn-tile { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: block; }
/* Captions below the image, one consistent style (Alex's approved hub look). Flattening
   applies to EVERY Flatsome box variant EXCEPT tiles Justin explicitly marks with the
   custom class "keep-overlay" in UX Builder — his opt-out for badge/overlay styles
   (round-3b "badge overlay is not reflecting"). */
.mason-ornaments-hub .box:not(.keep-overlay) .box-text { position: static !important; transform: none !important; top: auto !important; bottom: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; padding: 10px 6px 0 !important; margin: 0 !important; text-align: center; }
.mason-ornaments-hub .box:not(.keep-overlay) .box-text-inner { position: static !important; top: auto !important; transform: none !important; width: auto !important; }
.mason-ornaments-hub .box:not(.keep-overlay) .box-text,
.mason-ornaments-hub .box:not(.keep-overlay) .box-text h4,
.mason-ornaments-hub .box:not(.keep-overlay) .box-text .header-title,
.mason-ornaments-hub .box:not(.keep-overlay) .box-text span,
.mason-ornaments-hub .box:not(.keep-overlay) .box-text p { font-size: 17px !important; font-weight: 400 !important; color: #3a3a34 !important; margin: 0 !important; letter-spacing: .01em; line-height: 1.3; text-transform: none; text-shadow: none !important; }
/* Opted-out tiles keep Flatsome's own text positioning; keep their text above our
   click-overlay. */
.mason-ornaments-hub .box.keep-overlay .box-text { z-index: 3; }
/* Hide leftover image-less duplicate boxes (an empty .box-image with a caption is
   always an authoring mistake — it doubled the Tree Picks caption on the hub). */
.mason-ornaments-hub .box:not(:has(.box-image img)) { display: none; }

/* ---------- HUB ONLY: hide the filters sidebar + full width ----------
   The hub is excluded from the generic filter bar (mason_ornaments_hub_skip_bar), so we
   hide its sidebar + go full width here. IMPORTANT: hide by `.sidebar-inner` (only the
   sidebar column has it) — NOT `.facetwp-facet`, which also matches the content column
   once a filter bar injects facets there (that selector blanked the whole hub). */
.term-christmas-ornaments .col:has( .sidebar-inner ) { display: none !important; }
.term-christmas-ornaments .col.large-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

/* ===== Sub-page nav strips (#4 phase 2) — quick filter switching ===== */
.mason-orn-subnav { margin: 0 0 30px; }
.mason-orn-navstrip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mason-orn-navstrip__link {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #dfe3d6;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 500;
	color: #3a3a34;
	background: #fff;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mason-orn-navstrip__link:hover { border-color: #355612; color: #355612; }
.mason-orn-navstrip__link.is-active { background: #355612; border-color: #355612; color: #fff; }

.mason-orn-chiprow { display: flex; align-items: baseline; gap: 16px; }
.mason-orn-chiprow__label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #9a9a90; white-space: nowrap; flex: 0 0 auto; }
.mason-orn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mason-orn-chip {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #e6e6e0;
	border-radius: 2px;
	font-size: 13px;
	color: #4a4a44;
	background: #fafaf8;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mason-orn-chip:hover { background: #355612; border-color: #355612; color: #fff; }

/* colour quick-switch — Shop-by-Colour PHOTO cards (like the hub), ABOVE the filters */
.mason-orn-subnav { margin: 0 0 26px; }
.mason-orn-subnav__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #9a9a90; margin: 0 0 12px; }
/* one horizontal scrollable row (Alex: "zrob to scrollowane") — the last card peeks to hint scroll */
.mason-orn-colourcards {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 12px;
	padding-bottom: 4px;
}
.mason-orn-colourcards::-webkit-scrollbar { display: none; }
/* scroll arrows (desktop) — JS wraps the row in .mason-orn-scroller */
.mason-orn-scroller { position: relative; }
.mason-orn-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: #2c2c28;
	border: 1px solid rgba(20, 25, 15, .12);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	cursor: pointer; z-index: 6;
	transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.mason-orn-arrow--prev { left: 6px; }
.mason-orn-arrow--next { right: 6px; }
.mason-orn-arrow:hover { background: #355612; color: #fff; border-color: #355612; }
.mason-orn-arrow.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 849px) { .mason-orn-arrow { display: none; } }
.mason-orn-colourcard { flex: 0 0 auto; width: 150px; text-decoration: none; }
.mason-orn-colourcard__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(20, 25, 15, .1);
	transition: transform .15s ease, box-shadow .15s ease;
}
.mason-orn-colourcard__img--solid { position: relative; }
.mason-orn-colourcard__name {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(255, 255, 255, .92);
	color: #2c2c28; font-size: 11px; font-weight: 500;
	text-transform: uppercase; text-align: center; letter-spacing: .04em;
	padding: 5px 3px;
}
@media (hover: hover) {
	.mason-orn-colourcard:hover .mason-orn-colourcard__img { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20, 25, 15, .2); }
}
@media (max-width: 849px) {
	.mason-orn-colourcards { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
	.mason-orn-colourcards::-webkit-scrollbar { display: none; }
	.mason-orn-colourcard { width: 38%; }
}

@media (max-width: 849px) {
	.mason-orn-chiprow { display: block; }
	.mason-orn-chiprow__label { display: block; margin: 0 0 8px; }
	.mason-orn-navstrip,
	.mason-orn-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.mason-orn-navstrip::-webkit-scrollbar,
	.mason-orn-chips::-webkit-scrollbar { display: none; }
	.mason-orn-navstrip__link,
	.mason-orn-chip,
	.mason-orn-swatch { flex: 0 0 auto; }
}

/* ---------- the 4 nav cards (first row) ---------- */
.mason-ornaments-hub .mason-orn-navrow .col { cursor: pointer; }
.mason-ornaments-hub .mason-orn-navrow .box-text h4 { font-size: 15px; font-weight: 700; }

/* ---------- MOBILE: each card row scrolls horizontally (2.5 tiles) ---------- */
.mason-orn-arrows { display: none; }
@media (max-width: 849px) {
	.mason-ornaments-hub .mason-orn-cardrow {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 12px;
		margin: 0 0 6px;
		padding: 6px 2px 14px;
	}
	.mason-ornaments-hub .mason-orn-cardrow::-webkit-scrollbar { display: none; }
	.mason-ornaments-hub .mason-orn-cardrow > .col {
		flex: 0 0 40% !important;   /* ~2.5 tiles visible */
		max-width: 40% !important;
		width: 40% !important;
		padding: 0 !important;
		scroll-snap-align: start;
	}
	/* nav row: a touch wider tiles */
	.mason-ornaments-hub .mason-orn-navrow.mason-orn-cardrow > .col { flex-basis: 46%; max-width: 46%; width: 46%; }

	/* mobile: caption a touch smaller below the smaller 2.5-tile cards */
	.mason-ornaments-hub .box .box-text { padding: 7px 4px 0 !important; }
	.mason-ornaments-hub .box .box-text,
	.mason-ornaments-hub .box .box-text h4,
	.mason-ornaments-hub .box .box-text .header-title { font-size: 14px !important; }

	/* subtle "scrollable" hint arrow under each card row */
	.mason-orn-arrows {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin: -6px 2px 18px;
		color: #9aa291;
		font-size: 13px;
		align-items: center;
	}
	.mason-orn-arrows .mason-orn-swipe { letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
}

/* ===== "Shop All Ornaments" — native Woo sub-category grid: match the hub card design =====
   The heading "Shop All Ornaments" is the last block element; the cards below it are the
   native Woo sub-category loop (outside .mason-ornaments-hub), so the hub styles don't reach
   them. Re-skin them to the same square image + white inset band + subtle count + hover. */
.term-christmas-ornaments .products .product-category .box { position: relative; }
.term-christmas-ornaments .products .product-category .box-image {
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
}
.term-christmas-ornaments .products .product-category .box-image img { transition: transform .5s ease; display: block; }
@media (hover: hover) {
	.term-christmas-ornaments .products .product-category:hover .box-image img { transform: scale(1.04); }
}
/* label -> white inset band, identical treatment to the hub cards */
.term-christmas-ornaments .products .product-category .box-text {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	top: auto;
	margin: 0 !important;
	padding: 9px 8px !important;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 3px 10px rgba(20, 25, 15, .08);
	text-align: center;
}
.term-christmas-ornaments .products .product-category .box-text .header-title {
	font-size: 12.5px;
	font-weight: 500;
	color: #2c2c28;
	margin: 0;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
}
.term-christmas-ornaments .products .product-category .box-text .count {
	font-size: 10px;
	font-weight: 400;
	color: #9a9a90;
	margin: 3px 0 0;
	letter-spacing: .05em;
	text-transform: uppercase;
}
/* tighten the gap between the "Shop All Ornaments" heading and its grid */
.term-christmas-ornaments .mason-ornaments-hub { margin-bottom: 24px; }
.term-christmas-ornaments .products { margin-top: 4px; }
/* (the band label stays on mobile here — these are product photos, not branded tiles) */

/* ---------- remove the Read More section on the ornaments archive ---------- */
.mason-ornaments-no-readmore .show-more,
.mason-ornaments-no-readmore .read-more-button,
.mason-ornaments-no-readmore a.read-more { display: none !important; }

/* Round-3b: swatch fallback cards (colour terms with no artwork) + text chips
   rendered inside the photo-card row (theme/type without artwork). */
.mason-orn-colourcard--swatch { position: relative; }
.mason-orn-colourcard--swatch .mason-orn-colourcard__img { border: 1px solid #e3e3de; }
.mason-orn-colourcards .mason-orn-chip { flex: 0 0 auto; align-self: center; }

/* Round-3b (Alex): captions under the strip tiles, same look as the hub captions. */
.mason-orn-colourcard__cap {
	display: block;
	padding: 8px 4px 0;
	font-size: 15px;
	font-weight: 400;
	color: #3a3a34;
	text-align: center;
	line-height: 1.3;
}
@media (max-width: 849px) { .mason-orn-colourcard__cap { font-size: 13px; } }

/* Round-3b: Flatsome zeroes inline SVGs inside buttons (0x0) — the arrow icons were
   invisible white circles. Draw the chevrons in CSS instead. */
.mason-orn-arrow svg { display: none; } /* icon is a real inline-styled span now (ornaments.js) */