/*
 Woodmart selector map — internal theme classes this file depends on.
 Update when adding new selectors below; check this list first after a
 theme update if something visually breaks.

 .whb-general-header  - header container (dark theme, background, logo)
 .wd-nav, .nav-link-text - main menu items, hover underline
 .wd-tools-count      - cart item count badge
 .btn-color-primary   - header button color class (see step 4 in
                        docs/plan-2026-09-06-update-resilience.md)
 .subtitle-color-default, .wd-title-color-default - section subtitles
 .title-after_title   - descriptive paragraphs under headings
 .wd-list-content      - bullet lists in the Telegram section
 .wd-short-desc, .info-box-inner - cards in the services grid and About
*/

:root {
	--color-text-muted: #A4A69C;
}

/* Site background. Woodmart's dark scheme defaults --wd-main-bgcolor to its own
   grey (#1a1a1a), which the Elementor pages hide by painting #070A05 over every
   section - but pages without those sections (cart, checkout, account, product
   pages) showed the grey. Overriding the variable fixes all of them at once:
   body, .wd-page-wrapper, .wd-page-content and .wd-prefooter all read from it.
   The attribute selector matches the specificity of the theme rule it replaces. */
body[class*="color-scheme-light"] {
	--wd-main-bgcolor: #070A05;
}

/* Hero (section 1) and Telegram Private Club (section 2) large images:
   same border as the About/Follow photos (sections 4-5), matches lp-1/lp-2.png. */
.elementor-element-d280368 img,
.elementor-element-a59e39c img {
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #22281F;
}

/* Hero (section 1): "120+ Placements & Features" lime badge overlapping
   the bottom-left corner of the NOIR cover image, matches lp-1.png. */
.elementor-element-ab939a3 {
	position: relative;
}

.elementor-element-heroBadgeCap1 {
	margin-top: -8px;
}

.elementor-element-heroBadge01 {
	position: absolute !important;
	left: -10px;
	bottom: -20px;
	z-index: 5;
	width: fit-content !important;
	flex: 0 0 auto !important;
}

/* Category badge over product image (lime pill), matches lp-3.png mockup */
.product-wrapper .wd-product-cats {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
	background: #ADF600;
	color: #070A05;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 2px;
}

.product-wrapper .wd-product-cats a {
	color: #070A05;
}

/* Home 2026 Services grid (section 3): title left + price right on one row,
   matches lp-3.png. Scoped to this widget only, not the Shop page. */
.elementor-element-818d952 .product-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	background: #0F130C;
	border: 1px solid #22281F;
	box-sizing: border-box;
	padding-bottom: 10px;
	height: 100%;
}

.elementor-element-818d952 .product-wrapper .product-element-top {
	flex: 1 0 100%;
}

.elementor-element-818d952 .product-wrapper .wd-title-price-row {
	order: 1;
	flex: 1 0 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.elementor-element-818d952 .product-wrapper .wd-title-price-row .wd-entities-title {
	min-width: 0;
	flex: 0 0 72%;
	text-align: left;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	letter-spacing: -0.5px;
}

.elementor-element-818d952 .product-wrapper .wd-title-price-row .price {
	min-width: 0;
	flex: 1 1 auto;
	text-align: right;
	margin-left: auto;
}

.elementor-element-818d952.elementor-widget-wd_products .product-wrapper .wd-add-btn {
	display: none;
}

/* Short description is printed in every product loop (see functions.php)
   but stays hidden everywhere except this widget, so the Shop page is
   unaffected. */
.wd-short-desc {
	display: none;
}

.elementor-element-818d952 .product-wrapper .wd-short-desc {
	display: block;
	order: 3;
	flex: 1 0 100%;
	box-sizing: border-box;
	padding: 0 10px 10px;
	color: #C9C9C9;
	font-size: 15px;
	line-height: 1.4;
	margin-top: -8px !important;
	text-align: left;
}

@media (max-width: 680px) {
	.elementor-element-818d952 .product-wrapper .wd-title-price-row {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 4px;
	}

	.elementor-element-818d952 .product-wrapper .wd-title-price-row .wd-entities-title,
	.elementor-element-818d952 .product-wrapper .wd-title-price-row .price {
		flex: 1 0 100%;
		width: 100%;
		text-align: left;
	}
}

@media (max-width: 575px) {
	.elementor-element-818d952 .products.wd-grid-g {
		grid-template-columns: 1fr !important;
	}
}

/* About section infoboxes (2x2 grid, section 4): tighter title -> content
   gap, matches lp-4.png. */
.elementor-element-d761f6f .info-box-inner {
	margin-top: 2px !important;
}

/* Equal-width, equal-height 2x2 infobox grid, filling the row. */
.elementor-element-d761f6f.e-con {
	align-items: stretch;
}

.elementor-element-d761f6f > .e-con-inner > .elementor-element {
	width: calc(50% - 10px) !important;
	box-sizing: border-box;
}

/* About section image (section 4): use the source image's real aspect
   ratio (1062x855) instead of a fixed min-height + background-size:cover,
   so the photo isn't cropped. */
.elementor-element-183950a {
	min-height: 0 !important;
	aspect-ratio: 1062 / 855;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.elementor-element-183950a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 1px solid #22281F;
	box-sizing: border-box;
}

/* Follow section (section 5) social cards: tighter title -> subtitle gap,
   matches lp-5.png. */
.elementor-element-19d710d .title-after_title,
.elementor-element-db67e3a .title-after_title,
.elementor-element-87631a2 .title-after_title {
	margin-top: -8px !important;
}

.elementor-element-19d710d .liner-continer,
.elementor-element-db67e3a .liner-continer,
.elementor-element-87631a2 .liner-continer {
	margin-bottom: 0 !important;
}

.elementor-element-19d710d .title-after_title,
.elementor-element-db67e3a .title-after_title,
.elementor-element-87631a2 .title-after_title {
	color: var(--color-text-muted);
}

/* "Download Catalogue" button (section 5): transparent bg, visible white
   border, matches lp-5.png. */
.elementor-element-a231ff2 .wd-button-wrapper a {
	background-color: transparent !important;
	border-color: #22281F !important;
}

.elementor-element-a231ff2 .wd-button-wrapper a:hover,
.elementor-element-a231ff2 .wd-button-wrapper a:active {
	background-color: #ADF600 !important;
	border-color: #ADF600 !important;
	color: #070A05 !important;
}

/* Follow section (section 5) container: it's a boxed container inside a
   full-bleed parent, so its actual box width is 100% (boxed_width only caps
   max-width) - Elementor's own responsive "width" control is unavailable
   here because it only applies when content_width is "full". With 12px side
   margins added, the box must be shrunk to match or it overflows the
   viewport. */
@media (max-width: 1024px) {
	.elementor-element-ecae5ef {
		width: calc(100% - 24px) !important;
	}
}

/* Follow section (section 5) container: wider side margins on mobile
   (20px, matching the container's own side padding) instead of the
   12px carried over from Elementor's default mobile margin var - width
   calc must grow to match or it overflows/underflows the viewport. */
@media (max-width: 768px) {
	.elementor-29463 .elementor-element.elementor-element-ecae5ef {
		--margin-left: 20px !important;
		--margin-right: 20px !important;
	}

	.elementor-element-ecae5ef {
		width: calc(100% - 40px) !important;
	}
}

/* Follow section (section 5) heading: smaller on mobile. */
@media (max-width: 767px) {
	.elementor-29463 .elementor-element.elementor-element-3ab8554 .woodmart-title-container.title {
		font-size: 40px !important;
	}
}

@media (max-width: 480px) {
	.elementor-29463 .elementor-element.elementor-element-3ab8554 .woodmart-title-container.title {
		font-size: 30px !important;
	}
}

/* Follow section (section 5) buttons: full width, stacked, below 480px. */
@media (max-width: 480px) {
	.elementor-element-a734c24 {
		flex-direction: column;
	}

	.elementor-element-a734c24 .elementor-element,
	.elementor-element-3512297 .wd-button-wrapper,
	.elementor-element-a231ff2 .wd-button-wrapper,
	.elementor-element-3512297 .wd-button-wrapper a,
	.elementor-element-a231ff2 .wd-button-wrapper a {
		width: 100%;
	}

	.elementor-element-3512297 .wd-button-wrapper a,
	.elementor-element-a231ff2 .wd-button-wrapper a {
		justify-content: center;
	}
}

/* Hero title (section 1): fluid size below 1240px so it scales with
   viewport instead of a fixed mobile px value. */
@media (max-width: 1239px) {
	.lpH1 h1 {
		font-size: 8vw !important;
		letter-spacing: -4% !important;
	}
}

@media (max-width: 767px) {
	.lpH1 h1 {
		font-size: 11vw !important;
	}

	.elementor-29463 .elementor-element.elementor-element-5f6c5db {
		width: 100%;
	}

	.elementor-29463 .elementor-element.elementor-element-5f6c5db .title {
		word-spacing: 0px;
		letter-spacing: -3% !important;
	}
}

/* Hero row (section 1): stack title/CTA column and image column on tablet. */
@media (max-width: 1024px) {
	.elementor-element-f17d307 > .e-con-inner {
		flex-direction: column !important;
	}

	.elementor-element-ab939a3 {
		margin-top: 50px;
		justify-content: flex-start !important;
	}

	.elementor-element-feddbb5 {
		padding-right: 0 !important;
	}

	.elementor-element-46b172b {
		--column-gap: 50px !important;
	}
}

@media (max-width: 575px) {
	.elementor-29463 .elementor-element.elementor-element-a07bb7a,
	.elementor-29463 .elementor-element.elementor-element-0ae0ba7 {
		margin-bottom: 20px;
	}
}

/* Telegram Private Club (section 2): stack columns on tablet. */
@media (max-width: 1024px) {
	.elementor-element-b5ec495 > .e-con-inner {
		flex-direction: column !important;
	}

	.elementor-element-fa6725c {
		margin-top: 50px;
	}

	.elementor-element-07015bf {
		padding-right: 0 !important;
	}
}

/* About (section 4): stack columns on tablet, text column first (image is
   first in the DOM, so reverse the stack order). */
@media (max-width: 1024px) {
	.elementor-element-05c5a02 > .e-con-inner {
		flex-direction: column-reverse !important;
	}
}

/* Footer (CMS Block 29409) column 1 tagline: cap width so it doesn't
   stretch full-width now that the column is 50%, matches lp-footer.png. */
.elementor-element.elementor-element-7f93603 {
	max-width: 435px !important;
}

/* Footer (CMS Block 29409) top row: NAVIGATE + LEGAL wrap onto their own
   row on tablet, each taking half the width. */
@media (max-width: 1024px) {
	.elementor-element-23b2e8b > .e-con-inner {
		flex-wrap: wrap !important;
	}

	.elementor-element-07843e3 {
		width: 100% !important;
	}

	.elementor-element-3b8082c,
	.elementor-element-4615cac {
		width: calc(50% - 15px) !important;
	}
}

@media (max-width: 425px) {
	.elementor-element-3b8082c,
	.elementor-element-4615cac {
		width: 100% !important;
	}

	.elementor-29409 .elementor-element.elementor-element-8274548 .elementor-heading-title {
		font-size: 33px !important;
	}
}

/* Header logo: the uploaded PNG is dark text on transparent bg (made for
   the old white header) - invert it to white now that the header row is
   dark, matches lp-1.png. */
.whb-general-header .site-logo img {
	filter: invert(1);
}

/* Header bar. The grey is the intended colour; it used to be painted on the
   inner .container, which stops 15px short of each side, so the row's own
   #070A05 showed through as two strips at the edges. Painting the row itself
   makes it uniform across the full viewport. The body selector is only there
   to outrank the header builder's own rule. */
body .whb-general-header {
	background-color: #1a1a1a;
}

.whb-general-header .wd-tools-count {
	color: #070A05 !important;
}

.whb-general-header .btn-color-primary {
	color: #070A05 !important;
	letter-spacing: 1px;
}

/* "Join the Club" header button: explicit colors on a stable el_class, not
   dependent on Woodmart's bg_color/color branching in button.php:92-106. */
.wd-btn-join-club {
	background-color: #ADF600;
	border-color: #ADF600;
}

.wd-btn-join-club:hover,
.wd-btn-join-club:active {
	background-color: #ADF600;
	border-color: #ADF600;
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}

/* Main nav "Private Club" link: it's an anchor on the current page
   (home-2026#telegram-private-club), so Woodmart's underline nav style
   treats it as .current-menu-item and underlines it permanently. Only
   hover/focus/click should show the underline. */
.wd-header-main-nav .wd-nav[class*="wd-style-underline"] > li.current-menu-item:not(:hover) > a .nav-link-text:after {
	width: 0;
}

.wd-header-main-nav .nav-link-text {
	letter-spacing: 1px;
	color: var(--color-text-muted);
}

/* Active nav item (desktop bar + burger menu, same wp_nav_menu markup in
   both): lime text for whichever link matches the page you're on.
   current_page_parent is what WordPress puts on "Shop" when viewing a
   single product (Shop is a real page, the product isn't a child of it in
   the page hierarchy, but WP still resolves this via the shop-page/product
   relationship) — category/tag archives and the cart get the same
   current-menu-item class via a nav_menu_css_class filter in functions.php,
   since neither has any page-ancestor relationship to Shop on its own. */
.wd-header-main-nav li.current-menu-item > a .nav-link-text,
.wd-header-main-nav li.current_page_item > a .nav-link-text,
.wd-header-main-nav li.current-menu-parent > a .nav-link-text,
.wd-header-main-nav li.current_page_parent > a .nav-link-text,
.wd-nav-mobile li.current-menu-item > a .nav-link-text,
.wd-nav-mobile li.current_page_item > a .nav-link-text,
.wd-nav-mobile li.current-menu-parent > a .nav-link-text,
.wd-nav-mobile li.current_page_parent > a .nav-link-text {
	color: #ADF600;
}

/* Site-wide: unify various grayish text elements to the same muted-gray
   token as the header nav links. */
.subtitle-color-default.subtitle-style-default,
.wd-title-color-default,
.wd-text-block,
.wd-short-desc,
.info-box-inner.reset-last-child {
	color: var(--color-text-muted) !important;
}

/* All subtitles: same letter-spacing as the Hero subtitle ("MEDIA & PR
   AGENCY · LONDON"). */
.subtitle-color-default.subtitle-style-default {
	letter-spacing: 4.9px !important;
}

.title-after_title.wd-fontsize-xs {
	font-size: 19px;
	line-height: 1.6;
}

.elementor-element-4a1c2d3 .wd-button-wrapper a {
	border-color: #ADF600 !important;
}

.elementor-element-4a1c2d3 .wd-button-wrapper a:hover,
.elementor-element-4a1c2d3 .wd-button-wrapper a:active {
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

.elementor-29463 .elementor-element.elementor-element-48e9810 .wd-list {
	--wd-row-gap: 8px;
}

.wd-list.wd-fontsize-xs .wd-list-content {
	color: #FFFFFF;
	font-family: Lato, Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 400;
	font-style: normal;
	line-height: 30.4px;
	letter-spacing: normal;
}

.elementor-element-87631a2 .title-after_title {
	margin-top: 0 !important;
}

.elementor-29463 .elementor-element.elementor-element-ad497c4 .title {
	margin-bottom: 20px;
	margin-top: 15px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.elementor-29463 .elementor-element.elementor-element-66e10a7 .title {
	margin-bottom: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
}

.elementor-29463 .elementor-element.elementor-element-3ab8554 .title {
	line-height: 105%;
}

@media (min-width: 1025px) {
	.elementor-29463 .elementor-element.elementor-element-3ab8554 .title {
		font-size: 56px;
	}
}

/* "More about us" link (section 4): no underline, matches lp-4.png. */
.elementor-element-4262920 a,
.elementor-element-4262920 a .wd-btn-text {
	text-decoration: none !important;
	border-bottom: none !important;
}

/* ==========================================================================
   Reusable classes for pages built by scripts/build-*.php (About onwards).
   Keyed on classes rather than element IDs so a rebuilt page keeps working
   when Elementor hands out new IDs.
   ========================================================================== */

/* Large feature images carry the site's hairline border, the same one the home
   page hero and section photos use. */
.ncImage img {
	border-style: solid;
	border-width: 1px;
	border-color: #22281F;
	box-sizing: border-box;
}

/* Card icon: the sparkle is an SVG with no intrinsic size, so WordPress emits
   it at 150x150 and only CSS can shrink it. Elementor's image-size control
   cannot help — it picks a registered thumbnail, which SVGs do not have. */
.ncCard .info-svg-wrapper,
.ncCard .info-svg-wrapper img {
	width: 22px !important;
	height: 22px !important;
}

/* Card grids: subtract the flex gap from each column, which a plain
   percentage set in Elementor does not do. */
.ncGrid3 > .e-con-inner > .elementor-element {
	width: calc(33.333% - 14px) !important;
	box-sizing: border-box;
}

.ncCounters > .e-con-inner > .elementor-element {
	width: calc(25% - 15px) !important;
	box-sizing: border-box;
}

@media (width < 1025px) {
	.ncGrid3 > .e-con-inner > .elementor-element,
	.ncCounters > .e-con-inner > .elementor-element {
		width: calc(50% - 10px) !important;
	}
}

/* One column only once two would be too narrow to read; 768px tablets keep
   the two-up grid. */
@media (width < 641px) {
	.ncGrid3 > .e-con-inner > .elementor-element {
		width: 100% !important;
	}
}

/* Forminator form on Contact (A2), dark-themed to match the panel it sits in.
   Selectors are Forminator's own render classes for form 29135 (name/email/
   phone/textarea/checkbox/submit) — verified via `do_shortcode()`, not guessed. */
.ncForm .forminator-label {
	color: #F4F6F1;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding-bottom: 10px;
}

.ncForm #textarea-1 .forminator-label {
	padding-bottom: 0;
}

/* Forminator's own stylesheets (forminator-forms-flat-base-css etc.) are
   enqueued after custom.css, so equal-specificity rules here lose without
   !important — confirmed by comparing enqueue order in the rendered head. */
.ncForm .forminator-input,
.ncForm .forminator-textarea {
	background-color: #0D0F0B !important;
	border: 1px solid #22281F !important;
	border-radius: 4px !important;
	color: #F4F6F1 !important;
	padding: 12px 16px !important;
	box-sizing: border-box !important;
}

.ncForm .forminator-input:focus,
.ncForm .forminator-textarea:focus {
	border-color: #ADF600 !important;
	outline: none !important;
}

.ncForm .forminator-checkbox-label {
	color: #A4A69C !important;
}

.ncForm .forminator-checkbox-box {
	background-color: #0D0F0B !important;
	border: 1px solid #22281F !important;
	color: #ADF600 !important; /* checkmark uses color:inherit, only visible (opacity) when checked */
}

.ncForm .forminator-required {
	color: #ADF600 !important;
}

.ncForm .forminator-response-message.forminator-error {
	color: #ff6b6b !important;
}

.ncForm .forminator-button-submit {
	background-color: #ADF600 !important;
	border-color: #ADF600 !important;
	color: #070A05 !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-radius: 999px !important;
	padding: 14px 32px !important;
}

.ncForm .forminator-button-submit:hover {
	background-color: #7DCC00 !important;
	border-color: #7DCC00 !important;
}

/* A10 — social icons in the lime top bar, desktop only (whb-nc10socialtop01
   in column7). The lime bar is too narrow on mobile/tablet for a second
   element next to the tagline text, so there the same icons live in the
   burger menu instead (Custom HTML widget in the "Mobile menu widgets"
   sidebar, mirrors this same markup — see docs/stage2-checklist.md A10).
   Woodmart's own `.wd-style-simple` base rule (el-social-styles.min.css)
   sets the same custom properties at equal specificity but is enqueued
   after custom.css, so it wins the cascade by source order and leaves a
   pale grey icon that reads poorly on lime — same root cause as the
   Forminator override above. `!important` forces it. */
.whb-nc10socialtop01 {
	--wd-social-color: #000000 !important;
	--wd-social-color-hover: rgba(0, 0, 0, 0.6) !important;
	--wd-social-bg: transparent !important;
	--wd-social-bg-hover: transparent !important;
}

/* Burger-menu social icons (.nc-mobile-menu-social, same Custom HTML widget
   as above) were left on Woodmart's default dark-grey circle + white glyph,
   which doesn't match the black-on-lime icon language used everywhere else
   (Contact page icon-box/social-icons, desktop top bar above). Same fix,
   inverted: lime circle, black glyph. */
.nc-mobile-menu-social {
	--wd-social-color: #070A05 !important;
	--wd-social-color-hover: #070A05 !important;
	--wd-social-bg: #ADF600 !important;
	--wd-social-bg-hover: #7DCC00 !important;
}

/* Bigger glyphs in both header icon rows (default is ~16px, gets lost next
   to the tagline/menu text at this size). .wd-social-icons only appears in
   the two header instances above — footer icons are a separate Elementor
   widget (post 29409) and are untouched by this. Woodmart's own rule for
   this selector carries the same specificity and loads after custom.css,
   so it wins ties without `!important` (same root cause noted throughout
   this file). */
.wd-social-icons > a {
	font-size: 22px !important;
}

/* social-tg's glyph (\f179 in woodmart-font) is a compound shape: a filled
   disc with the paper-plane cut out as a hole, painted as one colour — the
   hole doesn't get its own colour, it just reveals whatever sits behind
   the glyph (the anchor's own background). So: --wd-social-color paints
   the disc (set to lime, matching the site's badge colour), --wd-social-bg
   is what shows through the plane-shaped hole (set to near-black), giving
   one lime circle with the plane cut out in black — no separate ring, no
   circle-in-a-circle. */
.social-tg {
	--wd-social-bg: #ADF600 !important;
	--wd-social-bg-hover: #7DCC00 !important;
	border-radius: 50%;
}

/* The woodmart-font glyph for Telegram (\f179) isn't a paper-plane outline
   at all — at these sizes it's just a filled dot inside a ring, so no
   choice of --wd-social-color/--wd-social-bg can make it read as "a plane
   on a circle": every combination just looks like two nested circles.
   Swapping in Telegram's own paper-plane mark (Font Awesome's
   "telegram-plane" path, plane only — no circle baked in, since our own
   lime disc already is the circle) instead of the font glyph is the only
   way to get the actual recognisable Telegram icon here. */
.social-tg .wd-icon:before {
	content: none !important;
}

.social-tg .wd-icon {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23070A05'%3E%3Cpath d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9L366.5 158.4c8.3-7.4-1.8-11.5-12.9-4.1L117.8 285 15.3 253.1c-22.3-6.9-22.7-22.3 4.7-33L418.2 66.4c18.6-6.9 34.9 4.1 28.5 32.2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55%;
}

/* Footer social icons (.ncFooterSocial, widget "footersoc1" in the footer
   template, post 29409): Woodmart's floating scrollToTop button is
   position:fixed at bottom-right and covers the rightmost icon once the
   page is scrolled to the bottom. Shifting the row left clears it instead
   of touching the button itself (shared with every other page). */
.ncFooterSocial {
	padding-right: 70px;
}

@media (width < 1024px) {
	.ncFooterSocial {
		padding-right: 56px;
	}
}

/* ---------------------------------------------------------------------------
   Top bar (green strip above the header). Content lives in the Woodmart
   header builder (option whb_default_header), two text elements: one for
   desktop, one for mobile. The strip is lime (#ADF600), so links stay dark
   rather than white — white on lime fails contrast at this 13px size.
   The row is 35px tall, so the desktop line has to stay on one line.
--------------------------------------------------------------------------- */
.nc-topbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	color: #070A05;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
}

.nc-topbar__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 700;
}

.nc-topbar__dash,
.nc-topbar__sep {
	flex: none;
	opacity: .55;
}

.nc-topbar__link {
	flex: none;
	color: #070A05;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nc-topbar__link:hover,
.nc-topbar__link:focus-visible {
	color: #070A05;
	text-decoration: none;
}

/* Below ~1200px the full desktop line stops fitting on one 35px row.
   Drop the tagline first — the phone number and Contact Us are the two
   parts that actually do something. */
@media (width < 1200px) {
	.nc-topbar__tagline,
	.nc-topbar__dash {
		display: none;
	}
}

.nc-topbar--mobile {
	font-size: 12px;
	gap: 6px;
}

@media (width < 380px) {
	.nc-topbar--mobile {
		font-size: 11px;
		gap: 4px;
	}
}

/* D3: PDF-catalogue buttons hidden until the client sends the file — not
   deleted. Elementor Pro has a per-element device-visibility toggle; this
   site runs free Elementor, so the same "hidden, not removed" result is a
   CSS rule instead, targeting each widget's own elementor-element-{id}
   wrapper class (stable across all three — unlike a manually added
   _css_classes value, which Elementor 4.2.4 silently drops on this widget
   type). Hero+Follow button ids live in post 29463, footer button in 29409.
   Remove this rule to bring the buttons back. */
.elementor-element-0ae0ba7,
.elementor-element-a231ff2,
.elementor-element-4a1c2d3 {
	display: none;
}

/* Pre-existing bug found 09.09 while building D5 (Contact icons): Woodmart's
   compiled Elementor CSS bundle (uploads/elementor/css/custom-frontend-v2.min.css)
   is missing .elementor-screen-only from Elementor's own frontend.css, so the
   visually-hidden accessible label on every social-icons/icon widget shows up
   as overlapping text instead of staying screen-reader-only. Affects every
   Elementor social-icons widget on the site (footer, Contact icon row), not
   just this session's edits. Re-declaring it here is the fix, copied verbatim
   from wp-content/plugins/elementor/assets/css/frontend.css. */
/* Cookie Notice plugin (dFactory), D7 09.09: buttons are lime (site palette)
   with color:inherit for text, which pulls the light banner text color -
   unreadable on lime. Close icon wants to stay pinned to the right edge of
   the banner (not inline next to the buttons), but the plugin's own
   right:15px/top:50% is absolute against the whole #cookie-notice box while
   the centred text+buttons have no reserved gutter - at some viewport
   widths the centred row's edge reaches into the icon's 15px strip and
   overlaps it. Fix: keep it pinned right, but reserve real space for it via
   padding-right on the container so the centred content can never extend
   into that strip. */
.cookie-notice-container,
.cookie-revoke-container {
	position: relative;
	max-width: 1410px;
	margin: 0 auto;
	padding-right: 72px;
}
#cookie-notice .cn-set-cookie,
#cookie-notice .cn-more-info {
	color: #070A05 !important;
}
.cn-close-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	margin: -11px 0 0 0;
	background: transparent;
	opacity: 1;
	width: 22px;
	height: 22px;
}
.cn-close-icon:before,
.cn-close-icon:after {
	background-color: #FFFFFF;
	height: 18px;
	width: 2px;
	top: 2px;
	left: 10px;
}

.elementor-screen-only,
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
	position: absolute;
	top: -10000em;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Private Club events carousel (post 29634, widget pcbcarou): Woodmart's
   banner-carousel widget overlays its text box on top of the image via
   .wd-fill (position:absolute; inset:0), by design - that's how every
   built-in "style" option works, including "default". Client wants a plain
   card instead: image on top, text in normal flow below it. Markup already
   renders image first then content (banner.php), so unpinning .wd-fill here
   is enough - no template override needed. */
.elementor-element-pcbcarou .wrapper-content-banner.wd-fill {
	position: static;
	inset: auto;
}
.elementor-element-pcbcarou .wd-carousel-wrap {
	align-items: stretch;
}
.elementor-element-pcbcarou .promo-banner-wrapper,
.elementor-element-pcbcarou .promo-banner {
	height: 100%;
}
.elementor-element-pcbcarou .promo-banner {
	display: flex;
	flex-direction: column;
	background-color: #0D0F0B;
	border-style: solid;
	border-width: 1px;
	border-color: #22281F;
}
.elementor-element-pcbcarou .wrapper-content-banner.wd-fill {
	flex: 1;
}
.elementor-element-pcbcarou .banner-subtitle.wd-fontsize-xs {
	font-size: 16px;
}
.elementor-element-pcbcarou .banner-title.wd-fontsize-l {
	color: #ADF600;
}

/* Carousel prev/next arrows default to hover-only visibility (desktop-only
   interaction, see lib-swiper-arrows.min.css .wd-hover-1 rule) - invisible
   on touch devices with no hover. Client wants them always visible, moved
   above the card row and right-aligned (wd-pos-together layout, but that
   position isn't exposed as a widget control - reproduced here with plain
   CSS instead of fighting Elementor for a control that doesn't exist). */
.elementor-element-pcbcarou .wd-carousel-inner {
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
}
.elementor-element-pcbcarou .wd-nav-arrows.wd-pos-sep {
	position: static;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: -80px;
}
@media (width < 768px) {
	.elementor-element-pcbcarou .wd-nav-arrows.wd-pos-sep {
		margin-top: -70px;
	}
}
.elementor-element-pcbcarou .wd-nav-arrows.wd-pos-sep:after {
	content: none;
}
.elementor-element-pcbcarou .wd-nav-arrows.wd-pos-sep .wd-btn-arrow {
	position: static;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: none !important;
}