/* ==========================================================================
   A.D. Club — WPBakery page redesign
   --------------------------------------------------------------------------
   Styles for pages built in the page builder, kept out of style.css on
   purpose: style.css owns the PHP-template pages (catalog, product, cart,
   checkout, thank-you) where we control the markup, while everything here
   reskins markup that Woodmart's shortcodes generate and that we cannot edit.

   How it is wired
   ---------------
   Every top-level row of a redesigned page carries `club-sec` plus one
   section class (`club-home-facts`, …) in its WPBakery "Extra class name"
   field, and the notable elements inside carry their own `club-*` class.
   The page source lives next to the page it belongs to:
       wpbakery_pages/home_redesign.md   ->  "Home" section below

   Why the old page's own attributes had to go
   -------------------------------------------
   Woodmart compiles every colour/shadow/size attribute of a shortcode into
   an inline <style> rule keyed by an ID selector (#wd-67ac6a5fc114c …), which
   no class-based stylesheet can outrank without !important on every single
   declaration. So the redesigned page source has those attributes removed
   instead — that is what lets the rules below stay plain and readable. Same
   reason `style="shadow"` is gone from the info boxes (it pulled in
   `.box-style-shadow {background:#fff;padding:30px}`) and `style="overlined"`
   from the titles (`.wd-title-style-overlined .title` gets a gold border with
   !important from Theme Settings → Custom CSS).

   What still lives in Theme Settings → Custom CSS
   -----------------------------------------------
   Three things this file deliberately depends on, because there is no
   shortcode attribute for any of them:
     .standart-count / .standart-count-second > .counter-value::after  ->  "+"
     .percent-count > .counter-value::after                            ->  "%"
     .wd-carousel-item.rating-N .star-rating::before                   -> stars
   Those class names are therefore kept on the elements. Everything else in
   that block is old styling this file overrides; the leftovers worth deleting
   by hand are listed at the bottom of this file.

   Tokens (colours, radii, fluid gaps) come from :root in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section primitives — reusable by every WPBakery page
   -------------------------------------------------------------------------- */

/* Same container width as the redesigned template pages (see
   `body.single-product` in style.css), so header, footer and content line up
   instead of the home page sitting 200px narrower than the catalog. */
body.home {
	--wd-container-w: 1440px;
}

/* Fluid vertical rhythm between the 375px and 1440px Figma frames, the same
   interpolation the spacing tokens in style.css use. */
.club-sec {
	--club-sec-py: clamp(32px, calc(32px + (64 - 32) * ((100vw - 375px) / (1440 - 375))), 64px);
	background: var(--ad-bg);
	padding-top: var(--club-sec-py);
	padding-bottom: var(--club-sec-py);
}

.club-sec--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---- Short pages: footer at the bottom, no white below it ----
   The wrapper holds the header, the content and the footer, and nothing sets a
   height, so on a short page (contacts, the text pages) the footer stops
   wherever the content ends and everything below it is the body's own white.
   The marker classes are the same ones the title-bar rules use further down. */
body:has(.club-doc),
body:has(.club-contacts) {
	background-color: var(--ad-bg);
}

body:has(.club-doc) .wd-page-wrapper,
body:has(.club-contacts) .wd-page-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body:has(.club-doc) .wd-page-content,
body:has(.club-contacts) .wd-page-content {
	flex: 1 1 auto;
}


/* For a heading and the element it introduces that were split into two rows
   in the builder — they have to read as one block, not two sections. */
.club-sec--pb0 {
	padding-bottom: 0;
}

.club-sec--pt0 {
	padding-top: 0;
}

/* ---- Scroll animations off ----
   Almost every element on these pages carries css_animation="fadeInUp" and
   friends, which render as `.wpb_animate_when_almost_visible {opacity:0}` until
   WPBakery's waypoints script decides the element is in view. Result: whole
   cards sit invisible (they were invisible in a headless render too), and each
   one shifts the layout when it finally appears. None of the redesigned
   template pages animate on scroll, so the builder pages match them.
   Killed in CSS rather than by deleting the attributes so the page source
   stays stable between iterations — the attributes can be cleaned out of
   wpbakery_pages/ in one pass later. */
.club-sec .wpb_animate_when_almost_visible,
.club-sec .wd-animation,
.club-sec [class*="wd-anim-name_"] {
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
	visibility: visible !important;
}

/* Two of the fact columns carry vertical_alignment="flex-end" from the old
   layout, which Woodmart compiles into
   `.wd-rs-* > .vc_column-inner > .wpb_wrapper {align-items: flex-end}` — it
   pushed the first card of each row down out of line with its two neighbours. */
.club-sec .vc_column-inner > .wpb_wrapper,
.club-sec .vc_column_container > .vc_column-inner > .wpb_wrapper {
	align-items: stretch !important;
}

/* Theme Settings paints <cite> with a gold gradient through
   -webkit-text-fill-color: transparent. Our accent is flat, and a transparent
   fill also breaks text selection highlighting. */
.club-sec cite {
	background: none;
	background-image: none;
	-webkit-text-fill-color: currentColor;
	-moz-text-fill-color: currentColor;
	color: var(--ad-accent);
	font-style: normal;
}

/* ---- Info-box body copy: the orphan paragraphs ----
   Woodmart wraps only the FIRST paragraph of an info box's content in
   .info-box-inner. Every paragraph after it is emitted as a bare, class-less
   <div> sibling inside .info-box-content. Two consequences, both visible on
   the live page before this rule:
     - they inherit the theme's --wd-text-color (#494949), which on the #4d4d4d
       card is text you cannot read;
     - having no `order`, they default to 0 and jump ABOVE the name in the flex
       column that .club-founder sets up.
   15 of them on the home page. Selected by exclusion rather than by :not([class])
   because the attribute is present but empty on some of them. */
.club-sec .info-box-content > div:not(.info-box-subtitle):not(.info-box-inner):not(.info-btn-wrapper),
.club-sec .wd-info-box > div:not(.box-icon-wrapper):not(.info-box-content) {
	order: 4;
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ad-text-2);
	text-indent: 0 !important;
	margin-top: var(--ad-gap-small);
}

.club-sec .info-box-content > div:not(.info-box-subtitle):not(.info-box-inner):not(.info-btn-wrapper) p,
.club-sec .wd-info-box > div:not(.box-icon-wrapper):not(.info-box-content) p {
	margin: 0;
	text-align: left !important;
}

/* .club-lead keeps its whole statement in the info box's TITLE field, so the
   overflow paragraphs land one level higher — directly in .wd-info-box — and
   the rule above catches them there. They must line up with the first line,
   which .club-lead .info-box-title already sets. */
.club-lead > div:not(.box-icon-wrapper):not(.info-box-content) {
	font-size: 16px;
	color: var(--ad-text);
}

/* ---- Section heading (woodmart_title) ---- */

/* The blanket `.wd-wpb { margin-bottom: 0 !important }` near the bottom of this
   file flattens every WPBakery element, headings included — so the heading has
   to say it louder: two classes and !important. Without this the section title
   sits directly on its own content (measured 0px under five of the seven
   headings on the home page). */
.wd-wpb.club-title {
	margin-bottom: var(--ad-gap-inside-block) !important;
}

/* Same story one element down: a paragraph that ends its column has nothing in
   the flow to push it off the next section, and the sections that end with one
   run with club-sec--pb0 (no bottom padding by design — the block below brings
   its own). On the home page that is the "Наша команда" text sitting straight on
   the team carousel. */
.club-sec--pb0 .wd-wpb.wd-text-block:last-child {
	margin-bottom: var(--ad-gap-inside-block) !important;
}

/* Woodmart prints the subtitle above the title in the markup, so it reads as
   an eyebrow — keep that order and give it the accent colour. */
.club-title .title-subtitle {
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: -0.14px;
	color: var(--ad-accent);
	margin: 0 0 var(--ad-gap-xs);
	text-transform: none;
}

.club-title .liner-continer {
	border: none;
}

.club-title .woodmart-title-container {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: var(--ad-text);
	margin: 0;
	padding: 0;
	border: none;
	text-transform: none;
}

/* The gold `.liner-continer:after` rule from the old "simple" title style. */
.club-title .liner-continer::before,
.club-title .liner-continer::after {
	display: none;
}

@media (max-width: 767px) {
	.club-title .woodmart-title-container {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
}

/* ---- Primary button (woodmart_button / woodmart_popup opener) ----
   el_class lands on the <a> itself, not on the wrapper (inc/shortcodes/
   button.php), so these selectors are the link. */

.club-sec a.club-btn,
.club-sec a.club-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--ad-gap-inside-block);
	border: none;
	border-radius: var(--ad-radius-button);
	background: var(--ad-accent);
	color: #fff;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Woodmart has a global `:is(.btn, .button, button, …):hover` rule that repaints
   any button — !important is what reliably beats it, the same way
   .ad-faq__question does in style.css. */
.club-sec a.club-btn:hover,
.club-sec a.club-btn:focus,
.club-sec a.club-more:hover,
.club-sec a.club-more:focus {
	background: #5252b5 !important;
	background-color: #5252b5 !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Buttons sit between blocks, so they need air on both sides — without it the
   "Вступити в Клуб" under the About copy was jammed against the separator and
   "Більше кейсів" against the reviews carousel below it. The wrapper is
   Woodmart's own .wd-button-wrapper; woodmart_button puts el_class on the <a>,
   not on it, so it has no class of ours to hook. */
.club-sec .wd-button-wrapper {
	margin-top: var(--ad-gap-inside-block);
	margin-bottom: var(--ad-gap-inside-block);
}

/* Inside an info box the button is part of the card, not a block separator. */
.club-sec .info-btn-wrapper .wd-button-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

/* "Читати далі" under a founder card is secondary next to "Вступити в Клуб",
   so it gets the outline treatment from .ad-catalog__action-btn. */
.club-sec a.club-more {
	background: none;
	border: 1px solid var(--ad-accent);
}

.club-sec a.club-more:hover,
.club-sec a.club-more:focus {
	background: none !important;
	background-color: transparent !important;
	border-color: #5252b5 !important;
}

/* ---- Separator (vc_separator) ---- */

.club-sep .vc_sep_holder .vc_sep_line {
	border-top-style: solid;
	border-top-color: var(--ad-bg-2);
}

/* ==========================================================================
   Swiper sliders — [club_hero] and [club_team] (inc/sliders.php)

   Only the handful of Swiper rules the sliders actually need are declared here
   rather than depending on the parent theme's lib-swiper part: those load
   before this file and their presence depends on a theme option. Everything
   below is either that minimum or our own skin.

   Before the script runs (and if it never does) the markup degrades to a
   readable horizontal scroller — .swiper-wrapper is a flex row with
   scroll-snap, so the content is usable rather than a stack of full-width
   slides on top of each other.
   ========================================================================== */

.club-swiper {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.club-swiper .swiper-wrapper {
	display: flex;
	box-sizing: content-box;
}

.club-swiper .swiper-slide {
	flex-shrink: 0;
	position: relative;
}

/* No-JS / pre-init fallback, scoped to :not(.swiper-initialized) — Swiper adds
   that class to the container on init. It has to be scoped: Swiper drives the
   track by putting a transform on .swiper-wrapper and never touches its
   overflow, so leaving the fallback's `overflow-x: auto` in place turned the
   wrapper into a scroll container that was ALSO being translated — the hero
   rendered as an empty 680px box with working arrows and dots. */
.club-swiper:not(.swiper-initialized) .swiper-wrapper {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.club-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

.club-swiper:not(.swiper-initialized) .swiper-slide {
	scroll-snap-align: start;
}

/* Swiper writes an inline width on every slide once it runs; these are only
   for the pre-init frame. */
.club-hero:not(.swiper-initialized) .swiper-slide {
	width: 100%;
}

.club-team:not(.swiper-initialized) .swiper-slide {
	width: clamp(240px, 25%, 320px);
	margin-right: var(--ad-gap-small);
}

/* ---- Shared controls ---- */

.club-swiper__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ad-accent);
	border-radius: 50%;
	background: rgba(37, 37, 37, 0.6);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.club-swiper__arrow::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--ad-accent);
	transition: background-color 0.2s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.club-swiper__arrow--next::before {
	transform: scaleX(-1);
}

.club-swiper__arrow--prev {
	left: var(--ad-gap-small);
}

.club-swiper__arrow--next {
	right: var(--ad-gap-small);
}

.club-swiper__arrow:hover {
	border-color: #5252b5;
}

.club-swiper__arrow:hover::before {
	background-color: #5252b5;
}

.club-swiper__arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Both arrows and the dots only make sense once there is more than one
   screenful; the script adds this class when there is not. */
.club-swiper--static .club-swiper__arrow,
.club-swiper--static .club-swiper__pagin {
	display: none;
}

.club-swiper__pagin {
	position: absolute;
	bottom: var(--ad-gap-small);
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: var(--ad-gap-xs);
}

.club-swiper__bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ad-text-muted);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.club-swiper__bullet.is-active {
	width: 24px;
	border-radius: 4px;
	background: var(--ad-accent);
}

/* ---- Hero ---- */

.club-hero {
	--club-hero-h: clamp(420px, 56vw, 680px);
}

.club-hero .swiper-slide {
	width: 100%;
	height: var(--club-hero-h);
	display: flex;
	/* The copy sits at the TOP of the slide, not centred: on the first slide the
	   two founders fill the middle of the photo, and centred copy ran straight
	   across their faces (which is what the client asked us to fix). */
	align-items: flex-start;
}

.club-hero__media,
.club-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The photo is 1439x809 in a 1440x680 frame, so `cover` crops ~130px of its
	   height. Anchoring the crop to the top keeps the empty wall above the
	   founders' heads — that band is what the copy now sits on. */
	object-position: 50% 20%;
	display: block;
}



@media (max-width: 767px) {
	.club-hero__media,
	.club-hero__img {
		object-position: 50% 90%;
	}
}

/* The photos are light and busy — the copy needs its own ground to sit on.
   Weighted to the top now that the copy sits there, so the lower two thirds of
   the frame (where the founders are) stay as bright as the photo itself. */
.club-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(37, 37, 37, 0.88) 0%, rgba(37, 37, 37, 0.62) 35%, rgba(37, 37, 37, 0.2) 60%, rgba(37, 37, 37, 0.45) 100%);
	pointer-events: none;
}

.club-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: clamp(24px, 3.5vw, 56px);
	max-width: var(--wd-container-w, 1440px);
	margin-inline: auto;
	padding-inline: var(--ad-gap-inside-block);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ad-gap-small);
}

/* Desktop only: the copy sits too close to the screen edge at container width,
   so it gets 30px more breathing room than the section gutter. */
@media (min-width: 1025px) {
	.club-hero__inner {
		padding-inline: calc(var(--ad-gap-inside-block) + 30px);
	}
}

.club-hero__title {
	max-width: 700px;
	margin: 0;
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ad-text);
	text-transform: none;
}

.club-hero__text {
	max-width: 560px;
	margin: 0;
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ad-text-2);
}

.club-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: var(--ad-gap-xs);
	padding: 0 var(--ad-gap-inside-block);
	border-radius: var(--ad-radius-button);
	background: var(--ad-accent);
	color: #fff;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.club-hero__btn:hover,
.club-hero__btn:focus {
	background: #5252b5 !important;
	color: #fff !important;
}

/* The dots would sit on top of the button on a short hero. */
.club-hero .club-swiper__pagin {
	justify-content: flex-start;
	max-width: var(--wd-container-w, 1440px);
	margin-inline: auto;
	padding-inline: var(--ad-gap-inside-block);
}

@media (max-width: 767px) {
	.club-hero {
		/* 75px taller than the desktop-derived value, on the client's request:
		   on a phone the copy sits at the top and the founders need the room
		   below it. Phones only — the desktop hero stays as it was. */
		--club-hero-h: clamp(455px, calc(90vw + 75px), 595px);
	}

	/* A phone crops the photo sideways instead of vertically, so the founders
	   end up filling the frame top to bottom, so the top band is darkened
	   harder to keep the copy readable. The band is kept short — the copy ends
	   at about a third of the height and the mask clears just below it, so the
	   founders are as bright as the photo from there down. */
	.club-hero__slide::after {
		background: linear-gradient(180deg, rgba(37, 37, 37, 0.92) 0%, rgba(37, 37, 37, 0.85) 24%, rgba(37, 37, 37, 0.12) 44%, rgba(37, 37, 37, 0.5) 100%);
	}

	.club-hero .club-swiper__arrow {
		display: none;
	}
}

/* ---- Team ---- */

.club-team {
	padding-bottom: 40px; /* room for the dots below the cards */
}

.club-team .swiper-slide {
	height: auto;
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-small);
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	overflow: hidden;
}

.club-team__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--ad-bg-2-20);
}

.club-team__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.club-team__name {
	margin: 0;
	padding: 0 var(--ad-gap-small);
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.18px;
	color: var(--ad-text);
	text-transform: none;
}

.club-team__role {
	margin: 0 0 var(--ad-gap-small);
	padding: 0 var(--ad-gap-small);
	font-family: "Golos Text", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ad-text-2);
}

/* Below the cards rather than over them: a portrait photo has no dead area to
   put dots on. */
.club-team .club-swiper__pagin {
	bottom: 0;
}

/* !important as requested, though nothing currently outranks this selector —
   it is here so a later rule cannot move the arrows off the photo. Desktop
   only: on phones the arrows are hidden and the cards are swiped. */
@media (min-width: 1025px) {
	.club-team .club-swiper__arrow {
		top: 45% !important;
	}
}

/* --------------------------------------------------------------------------
   Home — hero row wrapper
   One row now, not the desktop/mobile pair the Slider Revolution setup needed:
   [club_hero] is responsive (it swaps to the slide's mobile image through a
   <picture> source), so the second row and the `.hero-desktop` /
   `.hero-mob-slider` switch in Theme Settings are no longer used. Those two
   Theme Settings rules are harmless leftovers — nothing on the page carries
   those classes any more.
   -------------------------------------------------------------------------- */

.club-home-hero {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Home — stats row (woodmart_counter ×4)
   -------------------------------------------------------------------------- */

/* The card is the column, not the counter: the row is equal_height, so the
   four cards line up even though the labels are different lengths. */
.club-home-stats .vc_column-inner {
	display: flex;
	/* The row is equal-height, so the shorter counters had their number and
	   label pinned to the top of the card with the spare space underneath. */
	align-items: center;
	height: 100%;
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
	box-shadow: none;
}

.club-home-stats .wpb_wrapper {
	width: 100%;
}

.club-stat {
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-xs);
	text-align: center;
}

.club-home-stats .counter-value {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.4px;
	color: var(--ad-text);
}

/* The "+" / "%" suffix printed by the Theme Settings ::after rules. */
.club-home-stats .counter-value::after {
	color: var(--ad-accent);
}

/* The `.standart-count-second > .counter-label {font-size:.42em !important}`
   rule in Theme Settings shrank one label to ~6px to make a long string fit.
   Same !important, higher specificity, and the fit is handled by wrapping. */
.club-home-stats .club-stat .counter-label {
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 14px !important;
	line-height: 1.3;
	color: var(--ad-text-2);
	text-transform: none;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	.club-home-stats .counter-value {
		font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   Home — founders (woodmart_info_box ×2 visible + 2 inside popups)
   Three copies of each founder exist in the page: a wide desktop card, a
   stacked tablet/mobile card, and a full-text copy inside the "Читати далі"
   popup. All three share .club-founder; only the layout differs.
   -------------------------------------------------------------------------- */

.club-founder {
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
	box-shadow: none;
	/* Woodmart's `text-right` / `text-center` wrapper classes come from the
	   builder's alignment setting; long body copy reads badly in anything but
	   left, and the mirrored card gets its mirror from flex-direction below. */
	text-align: left;
}

.club-founder:hover {
	box-shadow: none;
}

/* Wide desktop pair: portrait beside the text. */
.club-founder--wide {
	display: flex;
	align-items: center;
	gap: var(--ad-gap-inside-block);
}

.club-founder--flip {
	flex-direction: row-reverse;
}

.club-founder .box-icon-wrapper {
	flex-shrink: 0;
	margin: 0;
}

.club-founder .info-box-icon {
	margin: 0;
	box-shadow: none;
	background: none;
	width: 100%;
}

.club-founder .info-box-icon img {
	display: block;
	width: 100%;
	max-width: 260px;
	/* On the stacked card the portrait is narrower than the card, and without
	   this it sat against the left edge. */
	margin-inline: auto;
	height: auto;
	border-radius: var(--ad-radius-modals);
}

/* Woodmart's markup order is subtitle → title → text. The role is the
   subtitle, so flex `order` puts the name first without touching markup. */
.club-founder .info-box-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wd-info-box.club-founder .info-box-title {
	order: 1;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.24px;
	color: var(--ad-text);
	margin: 0;
	text-transform: none;
}

/* Kills the underline that `title_style="underlined"` draws in the theme's
   primary colour. */
.club-founder .info-box-title::after,
.club-founder .info-box-title::before {
	display: none;
}

/* `subtitle_style="background"` gives the role a filled gold chip. Turned
   into a plain accent line — a chip that long wraps into a gold block.
   .wd-info-box is in the selector to win on specificity rather than on order:
   the theme's chip (.subtitle-color-default.subtitle-style-background, grey on
   #f1f1f1) is two classes like ours was, and it lives in a part stylesheet that
   Woodmart enqueues on demand — on the first render after the page content is
   saved that part lands AFTER this file and took the tie. */
.wd-info-box.club-founder .info-box-subtitle {
	order: 2;
	display: block;
	background: none;
	padding: 0;
	margin: var(--ad-gap-xxs) 0 var(--ad-gap-small);
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ad-accent);
	text-transform: none;
}

.club-founder .info-box-inner {
	order: 3;
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ad-text-2);
	/* Theme Settings indents every paragraph by 1em with !important. */
	text-indent: 0 !important;
}

.club-founder .info-box-inner p {
	margin: 0 0 var(--ad-gap-small);
	text-align: left !important;
}

.club-founder .info-box-inner p:last-child {
	margin-bottom: 0;
}

/* ---- Social icons under a founder ----
   The old rules pinned these absolutely over the card (top/right offsets in
   pixels, re-pinned again at 1199px). Back in the flow instead — but in the
   flow they are a SIBLING of the card, not a child of it, so on their own they
   floated in the gap between two cards and read as belonging to the one below.
   Merged into the bottom of the card above by matching its background and
   squaring the corners where they meet: the card keeps its own padding, the
   strip continues it.

   Two boxes butted together still read as two boxes, so the card is not the
   info box any more: the background, radius and padding move up to the column
   wrapper that holds BOTH the info box and the social row, and the box itself
   goes transparent. One card, one padding, icons inside it.

   The wrapper is picked out with :has(.club-founder) because the third inner
   row of this section (the closing statement plus the CTA) has an identical
   wrapper that must not become a card. */

/* Each founder is its own inner row, and they had nothing between them — the
   two cards and the closing block read as one continuous slab. Spaced with a
   bottom margin rather than `+ .vc_row.vc_inner`, because the "Читати далі"
   popup (hidden on desktop, still a sibling) sits between the two rows and
   breaks adjacency. */
.club-home-founders .vc_row.vc_inner {
	margin-bottom: var(--ad-gap-inside-block);
}

.club-home-founders .vc_row.vc_inner:last-child {
	margin-bottom: 0;
}

.club-home-founders .vc_row.vc_inner .wpb_wrapper:has(.club-founder) {
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
}

.club-home-founders .club-founder:not(.club-founder--in-popup) {
	background: none;
	border-radius: 0;
	padding: 0;
	/* Woodmart's own wd-set-mb margin would show up as a gap inside the card. */
	margin-bottom: 0 !important;
}

.club-home-founders .wd-social-icons.club-founder-social {
	margin-top: var(--ad-gap-inside-block);
	padding: 0;
	background: none;
	border-radius: 0;
}

/* `info_box_inline="yes"` makes these inline-block, so the whitespace between
   them in the markup rendered as line-box gaps inside the card. */
.club-home-founders .info-box-wrapper {
	display: block;
	margin-bottom: 0 !important;
}

.wd-social-icons.club-founder-social,
.wd-social-icons.club-contact-social {
	/* `wd-style-default` sets gap: 0 with two classes of its own, so a
	   single-class rule here lost and the icons stood shoulder to shoulder. */
	gap: var(--ad-gap-small);
}

.club-founder-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--ad-gap-small);
	position: static !important;
	margin-top: var(--ad-gap-small);
	inset: auto !important;
	/* Woodmart's `text-center` wrapper class would float the row to the middle
	   of the section, where it reads as belonging to neither founder card. */
	text-align: left;
}

/* Woodmart sizes these from --wd-social-icon-size on the .wd-size-large
   wrapper, which produced a 37x48 rectangle rather than a square — set the
   variable instead of fighting width/height. */
.club-founder-social.wd-size-large,
.club-founder-social {
	--wd-social-icon-size: 44px;
}

/* size="large" in the builder resolves to a 70px box through Woodmart's own
   .wd-size-large rules; !important because those set width/height directly at
   the same specificity and there is no variable to steer them. */
.club-founder-social .wd-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	min-width: 44px;
	height: 44px !important;
	border: 1px solid var(--ad-bg-2);
	border-radius: var(--ad-radius-inputs);
	background: var(--ad-bg-2-20);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.club-founder-social .wd-social-icon .wd-icon {
	font-size: 18px;
	line-height: 1;
}

.club-founder-social .wd-social-icon .wd-icon,
.club-founder-social .wd-social-icon .wd-icon::before {
	color: var(--ad-accent);
}

.club-founder-social .wd-social-icon:hover {
	border-color: #5252b5;
}

.club-founder-social .wd-social-icon:hover .wd-icon,
.club-founder-social .wd-social-icon:hover .wd-icon::before {
	color: #5252b5;
}

/* ---- "Читати далі" popup (woodmart_popup content box) ---- */

.wd-popup.club-more-box {
	background: var(--ad-bg);
	border-radius: var(--ad-radius-modals);
	padding: var(--ad-gap-inside-block);
	color: var(--ad-text);
}

/* Inside the popup the card background would be a box in a box. */
.club-more-box .club-founder {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* ---- Closing statement + CTA ("Обʼєднавшись разом …") ---- */

/* Grid rather than flex: the paragraphs after the first are siblings of
   .info-box-content (see the orphan-div note above), so a flex row would lay
   them out side by side. With grid the photo is parked in column 1 spanning
   every row, and everything else is forced into column 2 whatever its nesting
   turns out to be — which also gets the photo out of the cramped top-left
   corner it sat in and lets it run the full height of the copy. */
.club-lead {
	display: grid;
	grid-template-columns: clamp(240px, 32%, 380px) 1fr;
	column-gap: var(--ad-gap-inside-block);
	align-items: center;
	background: var(--ad-bg-2-20);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
	box-shadow: none;
	text-align: left;
}

.club-lead > .box-icon-wrapper {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
}

.club-lead > *:not(.box-icon-wrapper) {
	grid-column: 2;
}

@media (max-width: 767px) {
	.club-lead {
		grid-template-columns: 1fr;
		row-gap: var(--ad-gap-small);
	}

	.club-lead > .box-icon-wrapper {
		grid-row: auto;
	}

	.club-lead > *:not(.box-icon-wrapper) {
		grid-column: 1;
	}
}

/* Here the whole statement sits in the info box's TITLE field, so it needs
   body-copy sizing rather than heading sizing. */
.club-lead .info-box-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--ad-text);
	margin: 0;
	text-align: left !important;
	text-transform: none;
}

.club-lead .info-box-icon,
.club-lead .box-icon-wrapper {
	width: 100%;
	margin: 0;
}

.club-lead .info-box-icon img {
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: var(--ad-radius-modals);
}

/* --------------------------------------------------------------------------
   Home — facts / advantages (woodmart_info_box ×6, two rows of three)
   In these boxes the SUBTITLE is the headline ("ТОП фахівці в Україні") and
   the TITLE is the qualifier ("з автоправа"), which is why the sizes below
   look inverted.
   -------------------------------------------------------------------------- */

/* Equal-height cards across a row. The row is equal_height in the builder, but
   only the two columns that also carried vertical_alignment ended up as flex
   items that stretch — the other four sized to their content, so the first
   card of each row stood 30px taller than its neighbours. Making the chain
   column-inner -> wpb_wrapper -> card flex all the way down puts every card on
   the row's height.
   Scoped to columns inside a vc_row_inner on purpose: the section also has an
   outer vc_column wrapping the heading and both card rows, and making THAT a
   flex container laid the heading and the two rows out side by side. */
/* Equal thirds. `vc_row-flex` turns the inner row into a flex container, and
   its columns end up with an auto basis, so each card was as wide as its own
   text — 314 / 350 / 385px across one row, with uneven gaps. */
.club-home-facts .vc_row.vc_inner > .wpb_column {
	flex: 1 1 0;
	min-width: 0;
}

.club-home-facts .vc_row.vc_inner > .wpb_column > .vc_column-inner {
	display: flex;
	height: 100%;
}

.club-home-facts .vc_row.vc_inner > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

/* info-box.php wraps the box in .info-box-wrapper, so the card is a grandchild
   of .wpb_wrapper, not a child — without carrying the stretch through that
   wrapper the card stayed content-width (314 / 350 / 385px in one row of
   equal 480px columns). */
.club-home-facts .info-box-wrapper {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.club-home-facts .club-fact {
	flex: 1 1 auto;
	width: 100%;
}

/* One card per row on phones. `flex: 1 1 0` above is what makes the three
   columns equal on desktop, but it also overrides the `width: 100%` that
   vc_col-sm-4 falls back to below 768px — so the row stayed three columns of
   130px with the text wrapping to one word per line. */
@media (max-width: 767px) {
	.club-home-facts .vc_row.vc_inner {
		flex-wrap: wrap;
		/* Once the row wraps, each column is its own flex line, and the default
		   `align-content: stretch` shares any spare height out across those
		   lines — every card grew ~55px of empty space under its text. */
		align-content: flex-start;
	}

	.club-home-facts .vc_row.vc_inner > .wpb_column {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.club-home-facts .vc_row.vc_inner > .wpb_column + .wpb_column {
		margin-top: var(--ad-gap-small);
	}

	/* Equal heights are a desktop concern — stacked, each card sizes to its
	   own content. */
	.club-home-facts .vc_row.vc_inner > .wpb_column > .vc_column-inner {
		height: auto;
	}
}

.club-home-facts .vc_row.vc_inner {
	margin-bottom: var(--ad-gap-small);
}

.club-home-facts .vc_row.vc_inner:last-child {
	margin-bottom: 0;
}

/* align-items: center, not flex-start — the cards are stretched to the row's
   height, so a short one had its icon and text pinned to the top with the
   spare space dumped underneath. */
.club-fact {
	display: flex;
	align-items: center;
	gap: var(--ad-gap-small);
	height: 100%;
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
	box-shadow: none;
	text-align: left;
}

.club-fact:hover {
	box-shadow: none;
}

.club-fact .box-icon-wrapper {
	flex-shrink: 0;
	margin: 0;
}

/* The gold drop shadow under every fact icon came from `.facts .info-box-icon`
   in Theme Settings; that selector no longer matches (the row's `facts` class
   is gone), this just normalises the box. */
.club-fact .info-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	background: none;
	box-shadow: none;
}

.club-fact .info-box-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.club-fact .info-box-content {
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-xxs);
	min-width: 0;
}

.wd-info-box.club-fact .info-box-subtitle {
	order: 1;
	background: none;
	padding: 0;
	margin: 0;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.18px;
	color: var(--ad-text);
	text-transform: none;
}

.club-fact .info-box-title {
	order: 2;
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--ad-text-2);
	margin: 0;
	text-transform: none;
}

.club-fact .info-box-title::after,
.club-fact .info-box-title::before {
	display: none;
}

.club-fact .info-box-inner {
	order: 3;
	text-indent: 0 !important;
}

/* --------------------------------------------------------------------------
   Home — "Про нас" copy block
   woodmart_text_block has no el_class attribute, so it is reached through
   the section class.
   -------------------------------------------------------------------------- */

/* No max-width: the 900px cap left the copy hanging in the left third of a
   1440px section. Full container width, same as every other section. */
.club-home-about .wd-text-block {
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ad-text-2);
}

.club-home-about .wd-text-block p {
	margin: 0 0 var(--ad-gap-small);
}

.club-home-about .wd-text-block p:last-child {
	margin-bottom: 0;
}

/* An <h1> is inline inside this paragraph (a real SEO heading in the copy) —
   it must not break the line or grow. */
.club-home-about .wd-text-block h1 {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	color: inherit;
}

.club-home-about .club-sep {
	margin: var(--ad-gap-inside-block) 0;
}

/* --------------------------------------------------------------------------
   Home — FAQ (woodmart_accordion)
   Woodmart's accordion element is not used here at all — the questions are
   rendered by [club_faq] (inc/faq-shortcode.php), which emits the very markup
   the catalog and product templates emit (.ad-faq / .ad-faq__list--split).
   That means everything about the block — the tiles, the chevron, the panel
   animation, the two independent columns — comes from the .ad-faq section of
   style.css and the handler in js/club-faq.js. Nothing is restyled here, so
   the two pages cannot drift apart.

   The reason the element had to go: it emits one flat list of items, and a
   flat list in two CSS columns always shares grid rows between them, so an
   opened answer moved whatever sat opposite it. Two independent column stacks
   are not reachable from a flat list with CSS alone.

   Only the section's own spacing is set below.
   -------------------------------------------------------------------------- */

.club-home-faq .ad-faq {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Home — post carousels ("Наші кейси", "Актуальні новини")
   Shared by both woodmart_blog elements via .club-posts.
   -------------------------------------------------------------------------- */

.club-posts .wd-post {
	display: flex;
	height: 100%;
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	overflow: hidden;
	box-shadow: none;
}

.club-posts .article-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.club-posts .entry-thumbnail {
	margin: 0;
}

.club-posts .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* The "mask" carousel design overlays a translucent plate on the thumbnail;
   the card below already separates image from text. */
.club-posts .post-image-mask {
	display: none;
}

.club-posts .article-body-container {
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-small);
	flex: 1 1 auto;
	padding: var(--ad-gap-inside-block);
}

.club-posts .post-title {
	margin: 0;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.16px;
	text-transform: none;
}

.club-posts .post-title a {
	color: var(--ad-text);
	transition: color 0.2s ease;
}

.club-posts .post-title a:hover {
	color: var(--ad-accent);
}

.club-posts .wd-post-desc {
	font-family: "Golos Text", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ad-text-2);
}

.club-posts .read-more-section {
	margin: auto 0 0;
}

.club-posts .btn-read-more {
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	min-height: 0;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--ad-accent);
	text-decoration: underline dotted;
	transition: color 0.2s ease;
}

.club-posts .btn-read-more:hover {
	background: none !important;
	color: #5252b5 !important;
}

/* ---- Carousel controls, shared by posts and reviews ---- */

.club-sec .wd-btn-arrow {
	color: var(--ad-accent);
	border-color: var(--ad-accent);
}

.club-sec .wd-btn-arrow:hover {
	color: #5252b5;
	border-color: #5252b5;
}

.club-sec .wd-nav-pagin li span {
	background-color: var(--ad-text-muted);
}

.club-sec .wd-nav-pagin li.wd-active span {
	background-color: var(--ad-accent);
}

/* --------------------------------------------------------------------------
   Home — reviews carousel (testimonials)
   The star count comes from the `.wd-carousel-item.rating-N .star-rating
   ::before` content hack in Theme Settings and is left alone — only the
   colours are set here. Card geometry mirrors the review card on the product
   page (.ad-reviews .comment_container in style.css).
   -------------------------------------------------------------------------- */

.club-reviews .testimonial-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--ad-gap-inside-block);
	background: var(--ad-bg-2);
	background-image: none;
	border-radius: var(--ad-radius-inputs);
	padding: var(--ad-gap-inside-block);
	box-shadow: none;
}

.club-reviews .testimonial-avatar {
	flex-shrink: 0;
	margin: 0;
}

.club-reviews .testimonial-avatar-image {
	width: 56px !important;
	min-width: 56px;
	height: 56px !important;
	border-radius: 50%;
	object-fit: cover;
}

.club-reviews .testimonial-content {
	min-width: 0;
	font-family: "Golos Text", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ad-text-2);
}

.club-reviews .testimonial-rating {
	margin-bottom: var(--ad-gap-xs);
}

.club-reviews .star-rating::before {
	color: var(--ad-text-muted);
}

.club-reviews .star-rating span::before {
	color: #ffd700;
}

.club-reviews .testimonial-content footer {
	margin-top: var(--ad-gap-small);
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	color: var(--ad-text);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   Home — team intro + Slider Revolution ("Our Team")
   As with the hero, the slides are Slider Revolution's own inline styles;
   only the frame around them is ours.
   -------------------------------------------------------------------------- */

.club-home-team .wd-text-block {
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ad-text-2);
}

/* The copy carries hardcoded inline `color: white` / `font-size` from the
   builder; the attribute selector is what lets it be normalised. */
.club-home-team .wd-text-block [style*="color"] {
	color: var(--ad-text-2) !important;
}

.club-home-team-slider {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Home — social feeds (Instagram / YouTube) + marquee

   The posts come from the Smash Balloon plugins (#sb_instagram / .sb_youtube).
   Their own markup is left alone; what is fixed here is how it sits on the
   page. The row is a `stretch_row_content_no_spaces`, so the plugin grids ran
   the full viewport width with no side padding and the first and last tile of
   every line were cut off by the screen edge.

   Several of the plugins' spacings are printed as inline `style` attributes
   (`#sbi_images{gap:10px}`, `.sby_items_wrap{padding:5px}`) — those are the
   ones that need !important, since an inline style cannot be outranked any
   other way.
   -------------------------------------------------------------------------- */

/* Bring the edge-to-edge row back inside the container, centred.
   float: none is the part that actually centres it — WPBakery floats its
   columns left, and margin-inline: auto does nothing to a floated box, so on
   any screen wider than the container the whole feed column sat against the
   left edge. */
.club-home-social > .wpb_column {
	float: none !important;
	max-width: var(--wd-container-w, 1440px);
	margin-inline: auto;
	padding-inline: var(--ad-gap-inside-block);
}

/* ---- Instagram grid ---- */

/* Column counts are set here instead of being left to the plugins' own
   breakpoints. Both switch at 480px, which left a band of real phone widths
   (roughly 480–767px) still rendering the desktop column count: the YouTube
   feed kept three columns of ~130px there, so each 16:9 card came out about
   74px tall. Explicit grids at our own breakpoints remove the band. */
.club-home-social #sbi_images {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ad-gap-small) !important;
}

@media (max-width: 1024.98px) {
	.club-home-social #sbi_images {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.club-home-social #sbi_images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.club-home-social #sb_instagram {
	padding-bottom: 0 !important;
}

.club-home-social .sbi_photo_wrap,
.club-home-social .sbi_item .sbi_photo {
	border-radius: var(--ad-radius-inputs);
	overflow: hidden;
}

/* ---- YouTube grid ---- */

/* The plugin lays these out as inline-block items with a percentage width, so
   `gap` alone did nothing — a grid both spaces them and takes the column count
   away from the plugin's 480px breakpoint (see the note above). */
.club-home-social .sby_items_wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ad-gap-small);
	padding: 0 !important;
}

.club-home-social .sby_item {
	width: auto !important;
	padding: 0 !important;
}

@media (max-width: 1024.98px) {
	.club-home-social .sby_items_wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.club-home-social .sby_items_wrap {
		grid-template-columns: minmax(0, 1fr);
	}
}

.club-home-social .sby_inner_item,
.club-home-social .sby_video_thumbnail_wrap {
	border-radius: var(--ad-radius-inputs);
	overflow: hidden;
}

/* The channel mixes 16:9 videos with 9:16 Shorts, and the plugin's "vertical"
   card layout floats a portrait thumbnail over a blurred copy of itself — the
   text of the two bled together. One aspect ratio for every tile, cropped. */
.club-home-social .sby_video_thumbnail_wrap {
	aspect-ratio: 16 / 9;
	height: auto !important;
	padding: 0 !important;
}

.club-home-social .sby_video_thumbnail_wrap img,
.club-home-social .sby_video_thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The YouTube feed's "custom palette" mode paints its own background on the
   feed container, which showed as a lighter panel behind the tiles. Written
   with `body` in front and !important because that palette colour arrives as
   an inline style on the element. */
body .club-home-social .sb_youtube,
body .club-home-social .sb_youtube.sby_palette_custom {
	background: transparent !important;
	background-color: transparent !important;
}

/* The plugin prints its own channel header (avatar + subscriber count); the
   .club-feed-head info box above the feed already says who this is. */
.club-home-social .sby_header,
.club-home-social .sbi_header {
	display: none !important;
}

/* ---- Both "load more" buttons ---- */

.club-home-social .sbi_load_btn,
.club-home-social .sby_load_btn,
.club-home-social #sb_instagram .sbi_load_btn,
.club-home-social .sb_youtube .sby_load_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--ad-gap-inside-block);
	border: 1px solid var(--ad-accent) !important;
	border-radius: var(--ad-radius-button) !important;
	background: none !important;
	box-shadow: none !important;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--ad-accent) !important;
	text-transform: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.club-home-social .sbi_load_btn:hover,
.club-home-social .sby_load_btn:hover {
	border-color: #5252b5 !important;
	color: #5252b5 !important;
	background: none !important;
}

.club-home-social .sbi_load_btn .sbi_btn_text,
.club-home-social .sby_load_btn .sby_btn_text {
	color: inherit !important;
}

/* Both plugins paint their own footer strip behind the load-more button. */
.club-home-social .sbi_footer,
.club-home-social .sby_footer {
	margin-top: var(--ad-gap-inside-block);
	margin-bottom: var(--ad-gap-inside-block);
	padding-block: 0;
	text-align: center;
	background: transparent !important;
	background-color: transparent !important;
}

/* Air above and below every button in this section — the two load-more buttons
   and the "Підписатися" in each feed header. */
.club-home-social .sbi_load_btn,
.club-home-social .sby_load_btn,
.club-home-social .info-btn-wrapper a.btn {
	margin-top: var(--ad-gap-small);
	margin-bottom: var(--ad-gap-small);
}

.club-feed-head {
	display: flex;
	align-items: center;
	gap: var(--ad-gap-small);
	background: none;
	box-shadow: none;
	padding: 0 0 var(--ad-gap-small);
	text-align: left;
}

.club-feed-head .box-icon-wrapper {
	flex-shrink: 0;
	margin: 0;
}

.club-feed-head .info-box-icon {
	width: 32px;
	height: 32px;
	margin: 0;
	box-shadow: none;
}

.club-feed-head .info-box-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.club-feed-head .info-box-content {
	display: flex;
	align-items: center;
	gap: var(--ad-gap-small);
	flex-wrap: wrap;
}

.club-feed-head .info-box-title {
	margin: 0;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.18px;
	color: var(--ad-text);
	text-transform: none;
}

.club-feed-head .info-btn-wrapper {
	margin: 0;
}

/* This button is generated inside the info box, so it has no class of ours. */
.club-feed-head .info-btn-wrapper a.btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--ad-gap-small);
	border: 1px solid var(--ad-accent);
	border-radius: var(--ad-radius-button);
	background: none;
	box-shadow: none;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--ad-accent);
	text-transform: none;
}

.club-feed-head .info-btn-wrapper a.btn:hover {
	background: none !important;
	border-color: #5252b5 !important;
	color: #5252b5 !important;
}

.club-home-social .club-sep {
	margin: var(--ad-gap-inside-block) 0;
}

.club-home-social .club-sep .vc_sep_holder .vc_sep_line {
	border-top-color: var(--ad-bg-2);
}

/* ---- Marquee strip ---- */

.club-home-social .wd-marquee-wrapp {
	background: var(--ad-bg-2);
	padding: var(--ad-gap-small) 0;
	margin-top: var(--ad-gap-inside-block);
}

.club-home-social .wd-marquee {
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	color: var(--ad-text);
}

/* `fas fa-audio-description` was picked as a decorative bullet; it reads as a
   stray glyph rather than an icon. */
.club-home-social .wd-marquee-icon {
	display: none;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1024.98px) {
	.club-founder--wide {
		display: none; /* the stacked copy of the same card takes over */
	}
}

@media (max-width: 767px) {
	.club-founder,
	.club-fact {
		flex-direction: column;
		align-items: stretch;
	}

	/* Stacked, the fact cards are still stretched to the tallest in the row, so
	   the icon and the text need centring in the leftover height. */
	.club-fact {
		justify-content: center;
	}

	.club-founder .info-box-icon img {
		max-width: 100%;
	}

	.club-feed-head {
		align-items: flex-start;
	}

	.club-reviews .testimonial-inner {
		flex-direction: column;
	}
}

/* ==========================================================================
   Text pages — one shared skin for the small copy-only builder pages
   (the title-bar rules below are shared with the contacts page further down)
   First user: wpbakery_pages/rezonansni-spravy_redesign.md
   --------------------------------------------------------------------------
   These pages are a single row holding a single text block, so there is
   nothing page-specific to style: the row carries `club-sec club-text` and
   the text block carries `club-doc`, and every text page after this one gets
   the same two classes and needs no CSS of its own.

   What the original page did: one white full-bleed slab (a `background-color:
   #FFFFFF !important` compiled into an ID selector, plus
   full_width="stretch_row" to stretch it) with 14px Raleway running the full
   1192px of the container and every link hard-coded `color: blue`. Both
   attributes are gone from the page source — see the header of this file for
   why they cannot be beaten from a stylesheet.
   ========================================================================== */

/* Only the gap to the title bar to supply — a text page has one section, so
   there is no second section to separate it from. */
.club-text {
	padding-top: var(--ad-gap-inside-block);
}

/* ---- Title bar ----
   Scoped with :has() so the skin travels with the page source: any page whose
   content carries .club-doc gets the matching title bar, with no per-page body
   class to register and no Theme Settings option to change site-wide. */
body:has(.club-doc) .wd-page-title,
body:has(.club-contacts) .wd-page-title {
	/* #0a0a0a plus a leftover 2019 demo photo (uploads/2019/03/bg-slider1.jpg)
	   from the theme demo import. */
	background-color: var(--ad-bg);
	background-image: none;
	padding-top: var(--ad-gap-inside-block);
	padding-bottom: 0;
	border: none;
}

body:has(.club-doc) .wd-page-title .entry-title,
body:has(.club-contacts) .wd-page-title .entry-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, calc(24px + (40 - 24) * ((100vw - 375px) / (1440 - 375))), 40px);
	line-height: 1.15;
	letter-spacing: -0.4px;
	text-transform: none;
	color: var(--ad-text);
	margin: 0;
}

/* !important on the colour only: Theme Settings → Custom CSS paints the last
   crumb with `.wd-last {color: white !important}` in a selector list shared
   with widget titles and price labels, so it cannot be out-specified. */
body:has(.club-doc) .wd-page-title .wd-breadcrumbs,
body:has(.club-doc) .wd-page-title .wd-breadcrumbs a,
body:has(.club-doc) .wd-page-title .wd-breadcrumbs .wd-last,
body:has(.club-contacts) .wd-page-title .wd-breadcrumbs,
body:has(.club-contacts) .wd-page-title .wd-breadcrumbs a,
body:has(.club-contacts) .wd-page-title .wd-breadcrumbs .wd-last {
	font-family: "Golos Text", sans-serif;
	font-size: 13px;
	color: var(--ad-text-muted) !important;
}

body:has(.club-doc) .wd-page-title .wd-breadcrumbs a:hover,
body:has(.club-contacts) .wd-page-title .wd-breadcrumbs a:hover {
	color: var(--ad-accent) !important;
}

/* The title bar runs with padding-bottom: 0, which makes the crumbs the last
   thing in it — and the content below then starts straight on them. */
body:has(.club-doc) .wd-page-title .wd-breadcrumbs,
body:has(.club-contacts) .wd-page-title .wd-breadcrumbs {
	margin-bottom: var(--ad-gap-inside-block);
}

/* ---- The copy ----
   Capped measure: 1192px of 16px text is roughly 150 characters a line, about
   twice a comfortable reading width, which is the main reason the old page was
   hard to read at all. */
.club-doc {
	/* The theme already owns this element's max-width:
	   `.wd-text-block:not(.inline-element){max-width:var(--content-width);
	   --content-width:var(--wd-max-width)}` — two classes, so it outranks a
	   plain .club-doc rule. Feeding it the value instead of fighting it: the
	   shortcode leaves --wd-max-width unset (its "Content width" field is a
	   percentage and we need a fixed measure), which makes the var() invalid
	   and the max-width resolve to none. */
	--wd-max-width: 860px;
	margin-inline: auto;
	background: var(--ad-bg-2-20);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ad-text-2);
}

.club-doc p {
	margin: 0 0 var(--ad-gap-inside-block);
}

/* Section labels were bold paragraphs ending in a colon; they are <h2> in the
   redesigned source. Same size and weight as .ad-faq__title in style.css. */
.club-doc h2 {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--ad-text);
	margin: calc(var(--ad-gap-inside-block) * 1.5) 0 var(--ad-gap-small);
}

.club-doc > h2:first-child {
	margin-top: 0;
}

.club-doc strong {
	font-weight: 700;
	color: var(--ad-text);
}

/* The Drive and court links print their full URL as the link text, which is
   longer than the card on a phone — `anywhere` is what lets it wrap mid-URL
   instead of pushing the page sideways. */
.club-doc a {
	color: var(--ad-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.club-doc a:hover {
	color: #5252b5;
}

.club-doc ul {
	list-style: none;
	margin: 0 0 var(--ad-gap-inside-block);
	padding-left: 20px;
}

.club-doc ul li {
	position: relative;
	margin-bottom: var(--ad-gap-small);
}

.club-doc ul li:last-child {
	margin-bottom: 0;
}

.club-doc ul li::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ad-accent);
}

/* Woodmart's own .reset-last-child covers the text block, but only for the
   very last element; a trailing <ul> or <h2> keeps its margin otherwise. */
.club-doc > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Contacts — wpbakery_pages/kontakty_redesign.md
   Three contact cards, then the working hours, the follow buttons and the
   "Вступити в Клуб" call to action. The section primitives at the top of this
   file do the spacing and kill the scroll animations; what is below is the
   card skin plus the two small elements this page shares with nothing else.
   ========================================================================== */

/* The default container is 1222px, which left this page's header and footer
   200px narrower than the catalog's. */
body:has(.club-contacts) {
	--wd-container-w: 1440px;
}

/* ---- Marquee strip ----
   Same treatment as the strip at the bottom of the home page
   (.club-home-social above). Written out again rather than shared: two short
   blocks, each next to the page it belongs to, are easier to find than one
   selector list spanning two sections. */
.club-contacts-strip .wd-marquee-wrapp {
	background: var(--ad-bg-2);
	padding: var(--ad-gap-small) 0;
	/* Woodmart gives every element a bottom margin of its own; here it would sit
	   on top of the next section's padding. */
	margin-bottom: 0;
}

.club-contacts-strip .wd-marquee {
	/* The builder's speed="15" was a responsive blob that compiled into exactly
	   this variable, so the value belongs here now. */
	--wd-marquee-speed: 20s;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.16px;
	color: var(--ad-text);
}

/* ---- Contact cards ---- */

/* The inner row is flex already (equal_height="yes"), but the stretching stops
   at .info-box-wrapper — this is the rest of the chain down to the card, and
   without it the three cards are three different heights (124 / 157 / 71px in
   the original). */
.club-contacts .vc_column-inner,
.club-contacts .vc_column-inner > .wpb_wrapper,
.club-contacts .info-box-wrapper {
	height: 100%;
}

.club-contact {
	/* Woodmart paints the radius of every info box from --wd-brd-radius, whose
	   "no rounding" value is .001px, in a rule of the same specificity as this
	   one that is loaded after the child theme — so the variable is what has to
	   be fed, exactly as with --wd-max-width on the text pages. */
	--wd-brd-radius: var(--ad-radius-card);
	height: 100%;
	background: var(--ad-bg-2);
	border-radius: var(--ad-radius-card);
	padding: var(--ad-gap-inside-block);
}

.club-contact .info-box-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.18px;
	text-transform: none;
	color: var(--ad-text);
	margin-bottom: var(--ad-gap-small);
}

/* Theme Settings → Custom CSS indents every .info-box-inner by 1em, which on a
   card of contact rows indents the first row only. It is declared !important
   there, hence the !important here. */
.club-contact .info-box-inner,
.club-hours .info-box-inner {
	text-indent: 0 !important;
	/* Woodmart's own 10px on top of the title's margin below made the gap under
	   the heading larger than the gap between the contact rows. */
	margin-top: 0;
}

/* Woodmart runs the info-box content through wpautop, which leaves one empty
   paragraph in front of the real ones and one after them — 0px tall, but each
   still carrying the bottom margin below. */
.club-contact .info-box-inner p:not(:has(.contact-link)) {
	display: none;
}

.club-contact .info-box-inner p {
	margin: 0 0 var(--ad-gap-xs);
}

.club-contact .info-box-inner p:last-child {
	margin-bottom: 0;
}

/* Icon and label on one baseline, and the whole row clickable: the e-mail was
   plain text before, and one of the two phone numbers had a space inside its
   tel: href — enough for some dialers to drop the rest of the number. */
.club-contact a.contact-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ad-gap-small);
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ad-text-2);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.club-contact a.contact-link:hover {
	color: var(--ad-accent);
}

/* The four icons are 300x300 uploads printed at 20x20 through width/height
   attributes; repeated here so a narrower card cannot scale them, and
   flex-shrink: 0 keeps the long e-mail from squeezing its icon flat. */
.club-contact a.contact-link img {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 0;
}

/* ---- Working hours, follow buttons, call to action ---- */

.club-hours {
	text-align: center;
}

.club-hours .info-box-title {
	font-family: "Golos Text", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ad-text-muted);
	margin-bottom: var(--ad-gap-xs);
}

.club-hours .info-box-inner {
	font-family: "Golos Text", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--ad-text);
}

/* Same square tiles as the founder cards on the home page, centred instead of
   left-aligned. size="large" resolves to a 70px box through Woodmart's own
   .wd-size-large rules, which set width/height directly at the same
   specificity — hence the variable *and* the two !important. */
.club-contact-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ad-gap-small);
	margin-top: var(--ad-gap-inside-block);
	--wd-social-icon-size: 44px;
}

.wd-wpb{
	margin-bottom: 0 !important;
}

.club-contact-social .wd-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	min-width: 44px;
	height: 44px !important;
	border: 1px solid var(--ad-bg-2);
	border-radius: var(--ad-radius-inputs);
	background: var(--ad-bg-2-20);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.club-contact-social .wd-social-icon .wd-icon,
.club-contact-social .wd-social-icon .wd-icon::before {
	font-size: 18px;
	line-height: 1;
	color: var(--ad-accent);
}

.club-contact-social .wd-social-icon:hover {
	border-color: #5252b5;
}

.club-contact-social .wd-social-icon:hover .wd-icon,
.club-contact-social .wd-social-icon:hover .wd-icon::before {
	color: #5252b5;
}

/* woodmart_button's align="center" centres the text inside a block wrapper, not
   the pill itself — the pill is an inline-flex link, so the wrapper has to do
   the centring. */
.club-contacts-foot .wd-button-wrapper {
	display: flex;
	justify-content: center;
}

/* The three columns stack below 768px (vc_col-sm-4) with no gap of their own.
   :not(:first-child) rather than the adjacent-sibling `+`: the columns are only
   true siblings as long as nothing sits between them, and wpautop inserts an
   empty <p> for every newline in the page source (which is why that source is
   written as a single line). */
@media (max-width: 767.98px) {
	.club-contacts .vc_row.vc_inner > .wpb_column:not(:first-child) {
		margin-top: var(--ad-gap-inside-block);
	}
}

/* ==========================================================================
   Leftovers in Theme Settings → Custom CSS that this file makes redundant.
   Safe to delete by hand; nothing here reads them any more, but they are
   global so they also touch pages that have not been redesigned yet — which
   is why they are listed rather than fought:

     .owner-block, .owner-block-1, .owner-anton-social, .owner-dmytro-social,
     .info-merge .info-box-title, .facts .info-box-icon, .button-club,
     .wd-accordion-item (gold border + glow),
     .testimon-style-boxed .testimonial-inner (gradient),
     .wd-title-style-overlined / -simple / -bordered (gold rules),
     cite (gold gradient text), .info-box-inner (text-indent: 1em),
     .hero-desktop / .hero-mob-slider (mirrored above at 600px)

   Keep: .standart-count / .standart-count-second / .percent-count suffixes
   and .wd-carousel-item.rating-N stars — they carry data, not styling.
   ========================================================================== */