/* ============================================================
   Premium Bundle step-skin (ClickUp Task 6) — CSS ONLY skin over the
   EXISTING WooCommerce Product Bundles + js/custom-product-script.js
   guided-selection UI. That script's exclusivity / no-tree / price logic
   is left completely untouched — this file only restyles the DOM it
   already produces into numbered 2026 step cards.
   Design tokens (card/eyebrow/pill/selected-state) are copied 1:1 from
   css/starter-kit.css (Task 5) so both bundle configurators match exactly.
   Scoped to body.mason-premium-bundle (set in PHP for premium bundles).
   Step 1 (bundle height) turned out to be REAL: a "related products" plugin
   (.cwrp-* markup, not our theme/plugin) links each bundle to its sibling
   height-variant PRODUCTS (5/6/7/8ft are separate WooCommerce products).
   js/premium-bundle.js moves that block above the form + gives it a Step 1
   heading; the plugin's own links/logic are untouched, only restyled.
   ============================================================ */

/* ---- Main heading above Step 1 (injected by js/premium-bundle.js) — matches the Starter Kit
   heading: left-aligned <h2> in the product-title font (h1.product-title = 31px). ---- */
.mason-pb-heading { text-align: left; margin: 0 0 20px; }
.mason-pb-heading__title { font-size: 31px; line-height: 1.3; margin: 0; }
.mason-pb-heading__sub { font-size: 14px; color: #6a6a62; margin: 6px 0 0; }
/* the product price, relocated by JS from the top summary to under Step 4 (above Add to Cart) —
   make the current total prominent, keep "From:" + struck original small/muted */
.mason-premium-bundle .price-wrapper.mason-pb-price-moved { margin: 16px 0 10px; }
.mason-premium-bundle .price-wrapper.mason-pb-price-moved .from { font-size: 14px; color: #6a6a62; }
.mason-premium-bundle .price-wrapper.mason-pb-price-moved del .woocommerce-Price-amount { font-size: 16px; color: #9a9a92; }
.mason-premium-bundle .price-wrapper.mason-pb-price-moved ins .woocommerce-Price-amount { font-size: 28px !important; font-weight: 700; color: #16240f; }
/* de-dupe: the relocated .price-wrapper is now the single visible total, so hide the plugin's
   own .bundle_price inside .bundle_wrap (it showed the same amount above the button). It stays
   in the DOM so the sticky bar can still read it. */
.mason-premium-bundle .bundle_wrap .bundle_price { display: none !important; }

/* ---- Step 1: Choose Your Bundle Height (the plugin's related-products
   height switcher, relocated + restyled — pill tokens match Starter Kit) ---- */
.mason-pb-step1 { margin: 0 0 26px; }
.mason-pb-step1__eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #9a7b3e; margin: 0 0 3px;
}
.mason-pb-step1__title { font-size: 20px; font-weight: 700; color: #16240f; line-height: 1.25; margin: 0 0 14px; }
.mason-premium-bundle .cwrp-related-products { display: flex; flex-wrap: wrap; gap: 10px; }
.mason-premium-bundle .cwrp-product-link {
	display: inline-block;
	border: 1.5px solid #d8d2c2; border-radius: 8px; padding: 10px 16px;
	font-size: 13.5px; font-weight: 600; color: #232323 !important;
	text-decoration: none !important; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.mason-premium-bundle a.cwrp-product-link:hover { border-color: #1f3d29; }
.mason-premium-bundle .cwrp-product-link-current {
	border-color: #1f3d29; background: #eef3e3; box-shadow: inset 0 0 0 1px #1f3d29; cursor: default;
}
@media (max-width: 849px) {
	.mason-premium-bundle .cwrp-product-link { padding: 10px 14px; font-size: 13px; }
}

/* ---- section headers -> "STEP N" eyebrow + modern heading ----
   addSectionHeaders() (custom-product-script.js) inserts each h3 IMMEDIATELY
   before its target block via jQuery .before() — so :has(+ ...) reliably
   identifies which header is which, regardless of their shared-parent depth. */
.mason-premium-bundle h3.section-header {
	font-size: 20px; font-weight: 700; color: #16240f; line-height: 1.25;
	margin: 26px 0 14px; padding: 0;
}
.mason-premium-bundle h3.section-header::before {
	display: block;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #9a7b3e; margin-bottom: 3px;
}
.mason-premium-bundle h3.section-header:has(+ .bundled_item_optional) {
	margin-top: 4px;
}
.mason-premium-bundle h3.section-header:has(+ .bundled_item_optional)::before { content: "Step 2"; }
/* the plain "Ornaments in Bundle" header is superseded by our own
   "Included in this designer bundle" summary card (Step 3) below */
.mason-premium-bundle h3.section-header:has(+ .bundled_product:not(.bundled_item_optional)) {
	display: none;
}

/* ---- Step 2: tree cards (No Tree + the real tree options) ----
   card look copied from css/starter-kit.css (bg/border/radius/padding/gap). */
.mason-premium-bundle .overlay-container-optional { display: flex; flex-direction: column; gap: 14px; position: relative; }
/* "No Tree" sits OUTSIDE .overlay-container-optional (createNoTreeOption() inserts it
   before the wrapper is built, and optionalItems explicitly excludes .no_tree_option from
   the wrapAll) — style it identically + give it the same gap as the wrapped cards. */
.mason-premium-bundle .overlay-container-optional .bundled_product,
.mason-premium-bundle .no_tree_option {
	display: flex; gap: 14px; align-items: flex-start; box-sizing: border-box;
	background: #fff; background-clip: padding-box; border: 2px solid #e7ebe0; border-radius: 14px; padding: 16px;
	position: relative; z-index: 0; cursor: pointer; overflow: visible; /* let the corner dot poke out, not get clipped by the rounded corner */
	transition: border-color .15s ease, background-color .15s ease;
}
.mason-premium-bundle .no_tree_option { margin: 0 0 14px !important; }
/* whole-card selected state. Uses OUTLINE (not just border-color) drawn on top of the border
   on all 4 sides equally + raises z-index above the adjacent .overlay-container-optional — this
   fixes the No-Tree card's bottom edge getting visually clipped/overlapped by the next sibling
   (border-color alone left the bottom looking cut). Corner dot already signals selection too. */
.mason-premium-bundle .overlay-container-optional .bundled_product:has(input:checked),
.mason-premium-bundle .no_tree_option:has(input:checked) {
	border-color: #1f3d29;
	outline: 2px solid #1f3d29;
	outline-offset: -2px;
	z-index: 3;
}
/* the entire tile is clickable — js/premium-bundle.js adds a native <label for="..."> that
   covers the card via this class (a real label→input association, same browser mechanism
   the plugin's own small label already uses — nothing is toggled by script). */
.mason-premium-bundle .mason-pb-tile-hit { position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
/* keep the "open product ↗" permalink clickable ABOVE the full-tile hit overlay
   (Codex nice-to-fix: the inset:0 label otherwise blocks it) */
.mason-premium-bundle .bundled_product_title_link,
.mason-premium-bundle .bundled_product_permalink { position: relative; z-index: 2; }

.mason-premium-bundle .bundled_product_images { flex: 0 0 76px; position: relative; overflow: visible; }
.mason-premium-bundle .bundled_product_images img { width: 76px; height: auto; border-radius: 10px; display: block; margin: 0; }
/* radio-look dot in the card's top-LEFT corner — ONLY on the selectable tree cards (Step 2:
   .overlay-container-optional + .no_tree_option), NOT the fixed ornament list (Step 3), which
   isn't a choice so a radio there is confusing. Poking OUT of the image (negative offsets) so
   it sits on the card's white background, not on the photo. */
.mason-premium-bundle .overlay-container-optional .bundled_product .bundled_product_images::after,
.mason-premium-bundle .no_tree_option .bundled_product_images::after {
	content: ""; position: absolute; top: -8px; left: -8px; z-index: 1;
	width: 22px; height: 22px; border-radius: 50%;
	background-color: #fff; border: 1.5px solid #d8d2c2; box-shadow: 0 1px 3px rgba(0,0,0,.15);
	transition: border-color .15s ease, background-color .15s ease;
}
.mason-premium-bundle .overlay-container-optional .bundled_product:has(input:checked) .bundled_product_images::after,
.mason-premium-bundle .no_tree_option:has(input:checked) .bundled_product_images::after {
	border-color: #1f3d29;
	background-color: #fff;
	background-image: radial-gradient(circle, #355612 0 6px, transparent 6px);
}

.mason-premium-bundle .details { flex: 1 1 auto; min-width: 0; }
.mason-premium-bundle h4.bundled_product_title { font-size: 15px; font-weight: 700; color: #16240f; line-height: 1.25; margin: 0 0 9px; }
.mason-premium-bundle .bundled_product_excerpt p { margin: 0; }

/* "Add for $X" — plain price text now (the card + image-corner dot already carry the
   selected-state affordance); the native checkbox stays functional, just visually hidden. */
.mason-premium-bundle label.bundled_product_optional_checkbox {
	display: inline-block; margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important;
	box-shadow: none !important; font-size: 15px; font-weight: 600; color: #384330;
}
.mason-premium-bundle label.bundled_product_optional_checkbox input[type="checkbox"] {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Recommended badge (visual only — injected by js/premium-bundle.js on ONE tree card;
   nothing is auto-checked, see Task 6 plan) */
.mason-pb-badge {
	display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: #9a7b3e; background: #f6efe0; border-radius: 4px; padding: 3px 8px; margin: 0 0 6px;
}

/* relabel the plugin's generic "See more"/"See less" button (decoration only — the real
   text is set by custom-product-script.js's own click handler; we just hide it and lay our
   own fixed label on top so Justin's copy shows regardless of expand/collapse state) */
.mason-premium-bundle .see-more-optional,
.mason-premium-bundle .see-more-non-optional {
	display: inline-block; font-size: 0; margin: 10px 0 0;
	color: #355612; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.mason-premium-bundle .see-more-optional::after { content: "Choose a different tree"; font-size: 13.5px; }
.mason-premium-bundle .see-more-non-optional::after { content: "View all included ornaments"; font-size: 13.5px; }
.mason-premium-bundle .see-more-non-optional.is-open::after { content: "Hide full list"; }
.mason-premium-bundle .gradient-overlay {
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%);
}

/* ---- Step 3: "Included in this designer bundle" summary (replaces the raw ornament list by default) ---- */
.mason-premium-bundle .overlay-container-non-optional { display: none; }
.mason-pb-included {
	background: #f7f8f4; border: 1px solid #e7ebe0; border-radius: 14px; padding: 16px;
	margin: 0 0 14px;
}
.mason-pb-included__eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #9a7b3e; margin: 0 0 3px;
}
.mason-pb-included__title { font-size: 17px; font-weight: 700; color: #16240f; margin: 0 0 12px; }
/* single column — a 2-col grid read as "a little table" (Alex feedback), a plain stacked
   list is clearer for a short 3-5 item summary anyway. */
.mason-pb-included__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mason-pb-included__list li { font-size: 13.5px; color: #384330; display: flex; align-items: center; gap: 7px; }
.mason-pb-included__list li::before {
	content: ""; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
	background: #355612 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-7" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/9px no-repeat;
}
/* expanded state: show the real list in full, hide our summary (js/premium-bundle.js toggles
   .mason-pb-expanded; !important beats the plugin's own inline slice(2).hide() ) */
.mason-premium-bundle .overlay-container-non-optional.mason-pb-expanded { display: block !important; margin-top: 14px; }
.mason-premium-bundle .overlay-container-non-optional.mason-pb-expanded .bundled_product { display: flex !important; }
/* when expanded, kill the plugin's bottom white-fade overlay so the full list is fully
   visible (Alex: "nie widzę całości" — the gradient was fading the last items) */
.mason-premium-bundle .overlay-container-non-optional.mason-pb-expanded .gradient-overlay { display: none !important; }

/* the whole-set total, relocated by JS to sit right under Step 4 above the Add-to-Cart button */
.mason-premium-bundle .bundle_data > .bundle_price { margin: 16px 0 6px; }
.mason-premium-bundle .overlay-container-non-optional .bundled_product {
	display: flex; gap: 14px; align-items: flex-start;
	background: #fff; border: 1px solid #e7ebe0; border-radius: 14px; padding: 16px; margin: 0 0 14px;
}
.mason-premium-bundle .overlay-container-non-optional .quantity { font-size: 12.5px; color: #6a6a62; }

/* ---- Step 4: Optional Add-Ons (WPupsell plugin, same treatment as Starter Kit Step 5) ---- */
.mason-premium-bundle .cuw-product-addons {
	background: #fff !important; border: 1px solid #e7ebe0 !important; border-radius: 14px !important;
	padding: 16px !important; margin: 14px 0 !important;
}
.mason-premium-bundle .cuw-heading { font-size: 15px !important; font-weight: 700; color: #16240f; margin: 0 0 12px !important; }
.mason-premium-bundle .cuw-heading::before {
	content: "Step 4"; display: block;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a7b3e; margin-bottom: 3px;
}
.mason-premium-bundle .cuw-product-row { border-top: 1px solid #f0f1ec; padding-top: 10px !important; }
.mason-premium-bundle .cuw-product-row:first-of-type { border-top: 0; padding-top: 0 !important; }
.mason-premium-bundle .cuw-product-image img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 8px; }
/* Add-ons stay a real CHECKBOX (square) — Alex 2026-07-01: these are genuinely multi-select
   (Collar + Skirt + Storage can all be added together), so the shape should keep signalling
   "pick any number", unlike Step 2's round single-choice tiles. Native plugin styling, untouched. */

/* brief highlight when the sticky CTA scrolls the user to the tree section */
.mason-premium-bundle .mason-attr-flash { animation: mason-pb-flash 1.6s ease; }
@keyframes mason-pb-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 86, 18, 0); } 20%, 60% { box-shadow: 0 0 0 3px rgba(53, 86, 18, .4); } }

@media (max-width: 849px) {
	/* Alex "na mobile te kafle mniejsze": Step 2 tree cards (No Tree + trees) and the Step 3
	   included-ornaments list have NO option swatches, so — unlike the Starter Kit — they don't
	   need to stack full-width. Keep a COMPACT horizontal row (small image left, text right) with
	   a smaller image + tighter padding, so the tiles aren't tall and empty. */
	.mason-premium-bundle .overlay-container-optional .bundled_product,
	.mason-premium-bundle .no_tree_option,
	.mason-premium-bundle .overlay-container-non-optional .bundled_product {
		display: flex; gap: 12px; align-items: flex-start; padding: 12px;
	}
	.mason-premium-bundle .bundled_product_images { flex: 0 0 62px; width: 62px; margin: 0; }
	.mason-premium-bundle .bundled_product_images img { width: 62px; }
	.mason-premium-bundle .details { clear: none; }
	.mason-premium-bundle h4.bundled_product_title { font-size: 14px; margin: 0 0 5px; }
	.mason-premium-bundle .bundled_product_excerpt p { font-size: 12.5px; line-height: 1.4; }
	.mason-premium-bundle label.bundled_product_optional_checkbox { font-size: 14px; margin-top: 6px !important; }
}

/* ===== Sticky Add to Cart bar — copied from starter-kit.css so it's styled on Premium Bundle
   pages too (those load ONLY premium-bundle.css; the sticky CSS otherwise lived only in
   starter-kit.css / tree-pdp.css, so the rendered bar was unstyled/invisible here). ===== */
.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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; 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 16px; font-size: 13.5px; }
}

/* Round-3 (Justin/Alex "podwójna cena"): custom-product-script.js injects its own live
   total (#custom-bundle-total-price.price) at the top of the form — a duplicate of the
   price we moved under Step 4 (Task 6). Hide the top one ONLY when the moved price is
   actually present (:has guard, Codex r2 caveat 2): with JS off / a markup variant where
   the move never ran, the top price stays as the page's only price. :has() is already a
   dependency of this file (selected-card state). */
.mason-premium-bundle form.cart.cart_group:has(.price-wrapper.mason-pb-price-moved) > .price { display: none !important; }