/**
 * Mason — Christmas tree product page (Stage 2 / ClickUp task 1).
 * "i" help button + accordion next to the Height / Setup Type variation attributes.
 */

.mason-vhelp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin-left: 8px;
	padding: 0 !important;
	border: 1.5px solid #355612;
	border-radius: 50% !important;
	background: #fff;
	color: #355612;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .15s ease, color .15s ease;
}
.mason-vhelp-btn:hover,
.mason-vhelp-btn.is-open {
	background: #355612;
	color: #fff;
}

/* floating help tooltip ("dymek") anchored to the "i" — shows on hover / focus / tap */
.mason-vhelp { position: relative; display: inline-flex; align-items: center; }
.mason-vhelp-panel {
	position: absolute;
	top: calc(100% + 9px);
	left: -6px;
	z-index: 70;
	width: 290px;
	max-width: 80vw;
	background: #fff;
	border: 1px solid #e0e6d2;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(20, 25, 15, .16);
	padding: 13px 15px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	text-align: left;
}
.mason-vhelp-panel::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 12px;
	width: 11px;
	height: 11px;
	background: #fff;
	border-left: 1px solid #e0e6d2;
	border-top: 1px solid #e0e6d2;
	transform: rotate(45deg);
}
.mason-vhelp:hover .mason-vhelp-panel,
.mason-vhelp:focus-within .mason-vhelp-panel,
.mason-vhelp.is-open .mason-vhelp-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mason-vhelp-title {
	font-weight: 700;
	font-size: 15px;
	color: #232323;
	margin: 0 0 8px;
}
.mason-vhelp-panel ul {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
}
.mason-vhelp-panel li {
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a44;
	margin: 0 0 5px;
}
.mason-vhelp-panel li:last-child { margin-bottom: 0; }

/* bigger tap target on mobile */
@media (max-width: 849px) {
	.mason-vhelp-btn { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; font-size: 13px; }
}

/* ===== Badge pills ===== */
.mason-pdp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 18px;
}
/* static label/badge look — NOT a clickable pill/button (Justin round-2 #5: "pills look
   clickable → make them look like a badge"). No border (borders read as buttons/chips),
   small uppercase type reads as a product label; pointer-events off so nothing ever
   reacts to the cursor. */
.mason-pdp-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: #eef2e5;
	color: #44562f;
	border: 0;
	line-height: 1.4;
	cursor: default;
	pointer-events: none;
	user-select: none;
}
.mason-pdp-badge--bestseller {
	background: #f7efdb;
	color: #8a6a1c;
}

/* Sticky "Select ..." click → flash the option row the shopper still needs to pick */
.mason-attr-flash { animation: masonAttrFlash 1.6s ease-out; }
@keyframes masonAttrFlash {
	0%   { background-color: rgba(53, 86, 18, 0.16); }
	100% { background-color: transparent; }
}

/* ===== "Watch how setup works" + video buttons ===== */
.mason-pdp-videos { margin: 4px 0 18px; }
.mason-pdp-videos__head {
	font-weight: 700;
	font-size: 15px;
	color: #232323;
	margin: 0 0 10px;
}
.mason-pdp-videos__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mason-pdp-vidbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: 1.5px solid #232323;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 600;
	color: #232323;
	background: #fff;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mason-pdp-vidbtn::before { content: "\25B6"; font-size: 9px; color: #355612; }
.mason-pdp-vidbtn:hover { background: #355612; border-color: #355612; color: #fff; }
.mason-pdp-vidbtn:hover::before { color: #fff; }
.mason-pdp-vidbtn[aria-disabled="true"] { opacity: .55; }
@media (max-width: 849px) {
	.mason-pdp-videos__btns { gap: 8px; }
	.mason-pdp-vidbtn { flex: 1 1 44%; justify-content: center; padding: 11px 10px; }
}

/* ===== Sticky Add to Cart bar (Balsam Hill style) ===== */
.mason-sticky-cart {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 24px;
	background: #fff;
	border-top: 1px solid #e6e6e0;
	box-shadow: 0 -6px 22px rgba(20, 25, 15, .09);
	transform: translateY(115%);
	transition: transform .25s ease;
}
.mason-sticky-cart.is-visible { transform: translateY(0); }
.mason-sticky-cart__info { display: flex; flex-direction: column; min-width: 0; }
.mason-sticky-cart__name { font-weight: 600; font-size: 15px; color: #232323; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mason-sticky-cart__sel { font-size: 13px; color: #6a6a62; }
.mason-sticky-cart__buy { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.mason-sticky-cart__price { font-size: 18px; font-weight: 700; color: #232323; white-space: nowrap; }
.mason-sticky-cart .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mason-sticky-cart__price del { font-weight: 400; color: #9a9a92; font-size: 15px; margin-right: 4px; }
.mason-sticky-cart__price ins { text-decoration: none; }
.mason-sticky-cart__btn {
	background: #212121; color: #fff; border: 0; border-radius: 2px;
	padding: 10px 24px; font-size: 13.5px; font-weight: 600; cursor: pointer;
	line-height: 1.2; min-height: 0;
	margin: 0 !important; /* kill Flatsome's button margin so it centres in the bar */
	align-self: center;
	transition: background-color .15s ease;
}
.mason-sticky-cart__btn:hover { background: #355612; }
@media (max-width: 849px) {
	.mason-sticky-cart { padding: 10px 14px; gap: 10px; }
	/* Justin (2026-07-04): hide the product title + "Select your options" block in the sticky on
	   mobile — the button label already carries the state; keep the bar to price + button. */
	.mason-sticky-cart__info { display: none !important; }
	.mason-sticky-cart__buy { flex: 1; justify-content: space-between; gap: 12px; }
	.mason-sticky-cart__price { font-size: 16px; }
	.mason-sticky-cart__btn { padding: 12px 18px; font-size: 14px; }
}

/* ===== BH-style variation swatches: clearly mark the selected option =====
   The swatch plugin draws its own grey box-shadow border, so we mark "selected"
   with an outline (drawn on top, not affected by the plugin) + green tint + bold. */
.single-product .variable-item.selected,
.single-product .woo-variation-swatches .variable-item.selected {
	outline: 2px solid #355612 !important;
	outline-offset: 0 !important;
	border-color: #355612 !important;
	background-color: #eef3e3 !important;
	font-weight: 700 !important;
	color: #2a440e !important;
}

/* ===== 2026 refinement: condense + tighten the buy box (smaller, premium) ===== */
.product-short-description { font-size: 14.5px; line-height: 1.55; }
.product-short-description p { margin: 0 0 9px; }

/* collapse the long description behind a Read more toggle */
.mason-rm {
	max-height: 150px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
	        mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.mason-rm.is-open {
	max-height: none;
	-webkit-mask-image: none;
	        mask-image: none;
}
.mason-rm-toggle {
	display: inline-block;
	margin: 4px 0 16px;
	padding: 0;
	background: none;
	border: 0;
	color: #355612;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mason-rm-toggle:hover { color: #294310; }

/* tighten the elements a touch */
.mason-pdp-badges { margin: 10px 0 16px; gap: 7px; }
.mason-pdp-badge { padding: 3px 8px; font-size: 10.5px; }
.mason-pdp-videos { margin: 2px 0 16px; }
.mason-pdp-videos__head { font-size: 14px; margin: 0 0 8px; }
.mason-pdp-vidbtn { padding: 9px 14px; font-size: 12.5px; }
.mason-vhelp-title { font-size: 14px; }
.mason-vhelp-panel li { font-size: 13.5px; margin: 0 0 4px; }

/* title + rating moved into the buy-box column (Balsam Hill layout) */
.mason-title-moved .product-title-container { margin: 0 0 4px; }
.mason-title-moved .product-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 8px; }
.mason-title-moved .woocommerce-product-rating { margin: 0 0 14px; }

/* remove the -60% sale badge on the tree PDP (Alex: "usuń ten rabat") —
   both the gallery one and the one Flatsome drops into the summary column */
.single-product .badge-container,
.single-product .onsale { display: none !important; }

/* remove the card frame around the buy box (Alex: "usuń ramkę z ramki") — leaves the inner swatch boxes only */
.col-inner.mason-title-moved .is-border,
.col-inner.mason-title-moved.is-border { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* square buttons to match the variation swatches (2px) — consistent boxy look */
.single_add_to_cart_button,
form.variations_form .variable-item,
form.variations_form .woo-variation-swatches .variable-item { border-radius: 2px !important; }

/* ===== Price presentation (2026 — prominent sale price + clean green savings cue) ===== */
.single-product .col-inner.mason-title-moved .price {
	font-size: 26px;
	font-weight: 700;
	color: #232323;
	line-height: 1.15;
	margin: 0 0 16px;
}
.single-product .col-inner.mason-title-moved .price del {
	font-size: 16px;
	font-weight: 400;
	color: #9a9a92;
	text-decoration: line-through;
	margin-right: 9px;
}
.single-product .col-inner.mason-title-moved .price del .amount { font-weight: 400; }
.single-product .col-inner.mason-title-moved .price ins {
	text-decoration: none;
	color: #1f1f1f;
}
.single-product .col-inner.mason-title-moved .woocommerce-variation-price .price { margin: 4px 0 0; }
/* never restyle tiered-pricing quantity tables/lists if the plugin renders them */
.single-product .col-inner.mason-title-moved table .price,
.single-product .col-inner.mason-title-moved .tiered-pricing-table .price,
.single-product .col-inner.mason-title-moved .tiered-pricing-list .price {
	font-size: inherit;
	font-weight: inherit;
}
.mason-save {
	display: inline-block;
	margin-left: 11px;
	padding: 4px 11px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: #355612;
	border-radius: 3px;
	vertical-align: middle;
	white-space: nowrap;
}

/* ===== PDP "Specs" tab — Balsam-Hill-style spec cards (ClickUp #86cafd9cz) ===== */
.mason-spec-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 8px; }
.mason-spec-card { display: flex; flex-direction: column; background: #f4f4f1; border-radius: 6px; padding: 22px 22px 24px; }
.mason-spec-card__k { font-size: 13px; font-weight: 700; color: #2b2b2b; margin: 0 0 8px; }
.mason-spec-card__v { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; line-height: 1.15; color: #1a1a1a; margin: 0 0 10px; }
.mason-spec-card__sub { font-size: 13px; font-weight: 700; color: #2b2b2b; margin: 0 0 4px; }
.mason-spec-card__d { font-size: 14px; line-height: 1.55; color: #5a5a5a; margin: 0; }
.mason-spec-card__d + .mason-spec-card__d { margin-top: 8px; }
.mason-spec-card__link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #16240f; text-decoration: underline; }
/* video: a play-button tile that opens the clip in a new tab */
.mason-spec-card__video { position: relative; display: block; margin-top: 14px; aspect-ratio: 16 / 10; background: #2c2c2c; border-radius: 6px; overflow: hidden; }
.mason-spec-card__play { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); background: rgba(255,255,255,.92); border-radius: 50%; }
.mason-spec-card__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #1a1a1a; }
/* photo (Branch / Light close-ups): photo on top, then sub-label + big value */
.mason-spec-card__photo { display: block; margin: 12px 0 0; }
.mason-spec-card__photo img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; display: block; }
/* checklist (What's In the Box) */
.mason-spec-card__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mason-spec-card__list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: #3a3a3a; }
.mason-spec-card__list li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #355612; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
/* height/width dims (Stage-1 text; SVG diagram comes in Stage 2) */
.mason-spec-card__dims { display: flex; gap: 22px; margin: 4px 0 2px; }
.mason-spec-card__dim { display: flex; flex-direction: column; }
.mason-spec-card__dim b { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; color: #1a1a1a; line-height: 1.1; }
.mason-spec-card__dim small { font-size: 12px; color: #777; margin-top: 2px; }
@media (max-width: 849px) { .mason-spec-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 549px) { .mason-spec-cards { grid-template-columns: 1fr; } .mason-spec-card { padding: 18px; } }

/* ==================== 2026 long description (ClickUp NEW JOB) ==================== */

/* 1) Mobile: the PDP tab menu becomes one horizontal, swipeable strip (max 52px).
   Overrides Flatsome's small-nav-collapse stacking. */
@media (max-width: 849px) {
	.woocommerce-tabs ul.wc-tabs.product-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-height: 52px;
		margin: 0 0 14px !important;
		padding: 0 2px !important;
		border-bottom: 1px solid #e3e3de;
		scrollbar-width: none;
		justify-content: flex-start !important;
	}
	.woocommerce-tabs ul.wc-tabs.product-tabs::-webkit-scrollbar { display: none; }
	.woocommerce-tabs ul.wc-tabs.product-tabs li {
		flex: 0 0 auto;
		width: auto !important;
		margin: 0 !important;
		border: 0 !important;
	}
	.woocommerce-tabs ul.wc-tabs.product-tabs li a {
		display: block;
		white-space: nowrap;
		padding: 13px 12px 11px; /* 13+24+11 +2px border = 50px, +1px ul border <= 52px */
		line-height: 24px;
		font-size: 12.5px;
		letter-spacing: .04em;
		/* Kill Flatsome's nav-outline pill (rounded white bubble + shadow) on mobile. */
		background: transparent !important;
		border: 0 !important;
		border-bottom: 2px solid transparent !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		margin: 0 !important;
		color: #6a6a62;
	}
	.woocommerce-tabs ul.wc-tabs.product-tabs li.active a {
		background: transparent !important;
		border-bottom-color: #355612 !important;
		box-shadow: none !important;
		color: #1a1a1a;
	}
	/* Tighter side padding for the tab area + its content on mobile. */
	.woocommerce-tabs.container {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.woocommerce-tabs .tab-panels .woocommerce-Tabs-panel {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* UX-Builder content inside the tabs: slim down the stacked side paddings
	   (cols default to 15px, Justin's sections to 30px). */
	.woocommerce-tabs .tab-panels .col {
		padding-left: 6px;
		padding-right: 6px;
	}
	.woocommerce-tabs .tab-panels .section {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* 2) Desktop comparison table ("Choose Your … Size") — built by tree-pdp.js from
   the mobile accordion content, inserted above the comparison image. */
.mason-size-table-wrap {
	overflow-x: auto;
	margin: 6px 0 22px;
	border: 1px solid #e3e3de;
	border-radius: 10px;
	background: #fff;
}
table.mason-size-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; }
.mason-size-table th, .mason-size-table td {
	padding: 11px 16px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #efefea;
	line-height: 1.4;
	vertical-align: top;
}
.mason-size-table thead th {
	background: #355612;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 0;
}
.mason-size-table thead th:first-child { background: #355612; }
.mason-size-table tbody th { background: #f7f7f2; font-weight: 600; white-space: nowrap; color: #3a3a3a; }
.mason-size-table tbody tr:last-child th, .mason-size-table tbody tr:last-child td { border-bottom: 0; }
.mason-size-table tbody tr:hover td { background: #fafaf6; }

/* 3) Tighter 2026 skin for the size / setup accordions (tagged by tree-pdp.js). */
.mason-acc-2026 {
	border: 1px solid #e3e3de;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.mason-acc-2026 .accordion-item { margin: 0; }
.mason-acc-2026 .accordion-item + .accordion-item { border-top: 1px solid #e9e9e4; }
.mason-acc-2026 a.accordion-title {
	border: 0 !important;
	padding: 14px 46px 14px 16px !important;
	font-size: 15px !important;
	font-weight: 600;
	color: #1a1a1a;
	background: #fff;
	position: relative;
}
.mason-acc-2026 a.accordion-title.active { background: #f7f7f2 !important; }
/* Flatsome's font icon inside .toggle renders empty on these accordions (glyph
   content missing) — draw our own chevron on the title instead (Alex round-3b). */
.mason-acc-2026 .accordion-title .toggle { display: none !important; }
.mason-acc-2026 a.accordion-title::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #355612;
	border-bottom: 2px solid #355612;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.mason-acc-2026 a.accordion-title.active::after { transform: translateY(-30%) rotate(225deg); }
.mason-acc-2026 .accordion-inner {
	padding: 14px 16px 18px !important;
	border: 0 !important;
	font-size: 14px;
	line-height: 1.5;
}
@media (max-width: 849px) {
	.mason-acc-2026 a.accordion-title { padding: 12px 42px 12px 14px !important; font-size: 14px !important; }
	.mason-acc-2026 .accordion-inner { padding: 12px 14px 16px !important; }
}

/* 4) Scroll-back CTA under "Choose Your Setup Type". */
.mason-pdp-cta-wrap { text-align: center; margin: 20px 0 4px; }
button.mason-pdp-cta {
	display: inline-block;
	background: #355612;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}
button.mason-pdp-cta:hover, button.mason-pdp-cta:focus { background: #2a450e; }

/* NEW JOB round-3 (Justin): compact the "At a Glance" feature cards on mobile —
   ~30% less vertical padding and images capped so one card never fills a phone
   screen. Cards are tagged .mason-glance-card by tree-pdp.js. */
@media (max-width: 849px) {
	.mason-glance-card { padding: 11px 12px !important; }
	.mason-glance-card p { margin-bottom: 8px; }
	.mason-glance-card .img { margin-bottom: 0; }
	.mason-glance-card .img img {
		max-height: 260px;
		width: 100%;
		object-fit: cover;
	}
}