:root {
	--vvd-navy: #0B1F44;
	--vvd-navy-2: #123166;
	--vvd-blue: #2158E4;
	--vvd-blue-light: #4C86FF;
	--vvd-gold: #F5A623;
	--vvd-gold-dark: #D98C0F;
	--vvd-bg-light: #F5F7FB;
	--vvd-text: #16233F;
	--vvd-text-muted: #5B7093;
}

html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- Fixed header (always on top while scrolling) ----------
   position:fixed instead of sticky this time — sticky ran into an
   unresolved issue (some ancestor kept breaking it, never pinned down).
   Fixed removes the header from normal document flow entirely, so the
   page content needs an equivalent top offset or it'd sit hidden behind
   the header — that offset is set dynamically in vvd-site.js (measures
   the header's real rendered height, which varies by breakpoint/content,
   instead of guessing a fixed px value per breakpoint here). Applied to
   the header ROW (ecf367c) — see the sticky attempt's own notes elsewhere
   in this file for why the outer wrapper (1b41dc9) isn't a reliable
   target (its element ID is auto-generated per page, not shared sitewide
   like ecf367c, which is part of the header template itself). */
body { padding-top: var(--vvd-header-height, 0px); }
.elementor-element-ecf367c {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 1000 !important;
}

/* ---------- Single product page: quantity input — bigger digits, rounded ---------- */
.quantity input.qty { font-size: 20px; border-radius: 10px; }

/* ---------- Single product page: magnifying-glass icon removed — clicking
   the image itself now opens the fullscreen view too (see vvd-site.js). ---------- */
.woocommerce-product-gallery__trigger { display: none !important; }

/* ---------- Single product page: title (h1) and price already shrink
   smoothly with viewport width via the theme's own fluid font-size
   presets (--wp--preset--font-size--xx-large / --large, both clamp()
   based) — only the short description paragraph was missing one. ---------- */
.wp-block-post-excerpt__excerpt { font-size: clamp(14px, 1.1vw + 10px, 16px); }

/* ---------- Single product page: gallery + info columns — core Gutenberg
   only stacks wp-block-columns to one column below 781px, so between
   782-1024px the gallery and the title/description/price column were
   squeezed side by side into two narrow strips. Stack earlier, at 1024px,
   so the image sits on top and the text content flows normally below it
   instead. The gallery column also carries an inline flex-basis:512px —
   !important beats that regardless of its high specificity. ---------- */
@media (max-width: 1024px) {
	.single-product .wp-block-columns.alignwide {
		flex-wrap: wrap !important;
	}
	.single-product .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Once stacked, the gallery column no longer has its desktop
	   flex-basis:512px cap (overridden to 100% above), so the image would
	   otherwise stretch edge-to-edge instead of staying a sensible size —
	   keep that same 512px as a max-width and center it in the now
	   full-width row. */
	.single-product .wp-block-woocommerce-product-image-gallery {
		max-width: 512px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---------- Hide "Category: X" on single product pages — already shown in breadcrumbs ---------- */
.wp-block-woocommerce-product-meta { display: none; }

/* ---------- Product description "call to confirm availability" note ----------
   Use class="vvd-product-note" on this paragraph in every product description
   (existing and future) so it stays 13px consistently from one shared rule. */
.vvd-product-note { font-size: 13px; }

/* ---------- Product images: same height everywhere, 30% shorter than the
   default square (1:1) crop. WooCommerce inlines aspect-ratio:1/1 on the
   <img> itself, so it needs !important to override; aspect-ratio (not a
   fixed px height) keeps it responsive across column widths/breakpoints.
   10/7 ≈ 1/0.7, i.e. height = 70% of width instead of 100%. ---------- */
.wc-block-components-product-image img,
.hfe-product-image img,
.woocommerce-product-gallery__wrapper img {
	aspect-ratio: 10 / 7 !important;
	object-fit: contain !important;
	object-position: center !important;
	background: #fff;
	width: 100%;
}

/* The single-product gallery's flexslider wraps the slide track
   (.woocommerce-product-gallery__wrapper) in a JS-injected .flex-viewport
   that clips it to one slide's width. The TRACK itself is N×100% wide (one
   slide per photo, laid out side by side) — an earlier attempt applied the
   aspect-ratio there and it read that 3x width, ballooning the height
   3x too. The clipping viewport is the correct place to fix the height. */
.woocommerce-product-gallery .flex-viewport {
	aspect-ratio: 10 / 7 !important;
	height: auto !important;
	overflow: hidden;
}

/* ---------- Shop: hide "Відображаються усі з N результатів" ---------- */
.wc-block-product-results-count { display: none; }

/* ---------- Empty cart: icon removed per request — just the heading text. ---------- */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
	display: none;
}

/* ---------- Cart + Checkout: hide "Додати купон" — disabled for now ---------- */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block { display: none !important; }

/* ---------- Checkout: stripped down to just name + phone. Cash on delivery
   is the only payment method (see vvd-site.php), so the whole "choose a
   payment method" block/heading is pointless with one option — hidden too.
   Last name and email can't be removed from WooCommerce's own Store API
   validation (both are hard-required server-side regardless of field
   filters), so they're kept but hidden and auto-filled by vvd-site.js. */
.wc-block-components-address-form__first_name,
.wc-block-components-address-form__last_name,
.wc-block-components-address-form__company,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__country,
.wc-block-components-address-form__phone,
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input:has(input[type="email"]),
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-order-note-block {
	display: none !important;
}
/* "Платіжна адреса" heading — only the fields underneath were meant to be
   trimmed down, not a whole separate labeled section for what's now just
   a name field. Scoped to the step that actually contains the billing
   address block so other step titles (Contact information, etc.) stay. */
.wc-block-components-checkout-step:has(.wp-block-woocommerce-checkout-billing-address-block) .wc-block-components-checkout-step__heading {
	display: none !important;
}

/* ---------- Product grid (Shop + homepage): equal-height cards with the
   "add to cart" button pinned to the same baseline across a row. The grid
   already stretches each <li class="wc-block-product"> to the row's tallest
   card height by default — without this, that extra height sat as dead
   space below a shorter card's button instead of pushing the button down,
   so buttons still landed at different Y positions when titles wrapped to
   different numbers of lines. */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* ---------- WooCommerce: "Додати в кошик" buttons — brand blue everywhere
   (grid cards on Shop/homepage/cart's "Новинки", and the big single-product
   button), instead of the theme's default button color. ---------- */
.add_to_cart_button,
.single_add_to_cart_button {
	border-radius: 10px !important;
	background: var(--vvd-navy) !important;
	border-color: var(--vvd-navy) !important;
	color: #fff !important;
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
	background: var(--vvd-navy-2) !important;
	border-color: var(--vvd-navy-2) !important;
	color: #fff !important;
}

/* ---------- Checkout: the form + "Список замовлення" sidebar sit side by
   side (flex row, ~65%/35% split) down to WooCommerce's own 699px
   container breakpoint — widen that to 1000px so the summary drops below
   the form instead of squeezing into a narrow right-hand column earlier
   than that. Same rule WooCommerce's own CSS uses at 699px, just at a
   wider threshold. ---------- */
@container (max-width: 1000px) {
	.wc-block-components-sidebar-layout {
		flex-direction: column !important;
		margin: 0 auto 16px !important;
	}
	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding: 0 !important;
		width: 100% !important;
	}
}

/* ---------- Order confirmation page: below 780px WooCommerce renders the
   "Список замовлення" heading TWICE — the regular one (with the
   expand/collapse chevron) and a second copy meant only for a sticky
   mobile bar, portaled via the block's own Fill/Slot mechanism (it's the
   only one WooCommerce's own CSS actually shows at this width; the
   regular one has no matching rule to hide it here, so it ends up
   visible too, sitting behind the sticky one). Hiding just its title row
   is enough — the totals content underneath already stays collapsed by
   default (only shown via .is-open, which nothing toggles once the title
   that would trigger it is gone). ---------- */
@media (max-width: 780px) {
	.wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) .wc-block-components-checkout-order-summary__title {
		display: none !important;
	}
}

/* ---------- Cart line items: below ~700px WooCommerce switches each row
   from a table to its own CSS-grid card (image top-left, product name
   top-right, quantity bottom-left) — but the total/sum wasn't given an
   explicit grid slot, so it auto-placed into an implicit column at the
   far right of the top row, next to the product name. Give it its own
   row at the bottom instead, flush left from column 1 (under the image,
   not indented to line up with the product name column). Matches
   WooCommerce's own container query (container-width, not viewport) so
   it switches at the exact same point. ---------- */
@container (max-width: 699px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column-start: 2 !important;
		grid-row-start: 3 !important;
		text-align: left !important;
		justify-self: start !important;
		margin-top: 5px !important;
	}
}

/* ---------- Cart "Перейти до оформлення замовлення" / Checkout
   "Підтвердити замовлення" — same rounded, navy/lighter-on-hover look as
   the "Додати в кошик" buttons. ---------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 10px !important;
	background: var(--vvd-navy) !important;
	border-color: var(--vvd-navy) !important;
	color: #fff !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--vvd-navy-2) !important;
	border-color: var(--vvd-navy-2) !important;
	color: #fff !important;
}

/* ---------- Cart line items: clicking/selecting the row draws the
   browser's default focus outline (black box) around it — not wanted
   here, quantity input's own focus state is left untouched. ---------- */
.wc-block-cart-items__row:focus,
.wc-block-cart-items__row:focus-visible,
.wc-block-cart-item__product a:focus,
.wc-block-cart-item__product a:focus-visible,
.wc-block-components-product-name:focus,
.wc-block-components-product-metadata:focus,
.wc-block-components-product-details:focus,
.wc-block-cart-item__wrap:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* ---------- WooCommerce: catalog sorting dropdown ---------- */
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B1F44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	border: 1.5px solid #DDE3F0;
	border-radius: 10px;
	padding: 11px 40px 11px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vvd-navy);
	cursor: pointer;
	transition: border-color .15s ease;
}
.wc-block-catalog-sorting select:hover,
.woocommerce-ordering select:hover,
.wc-block-catalog-sorting select:focus,
.woocommerce-ordering select:focus {
	border-color: var(--vvd-blue);
	outline: none;
}
@media (max-width: 400px) {
	.wc-block-catalog-sorting,
	.wc-block-catalog-sorting select {
		width: 100%;
	}
	.wc-block-catalog-sorting select {
		font-size: 11.2px;
	}
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

/* ---------- Section text utilities (used inside HTML widgets) ---------- */
.vvd-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vvd-gold-dark);
	background: rgba(245, 166, 35, .12);
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 16px;
}
.vvd-section-title {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
	font-weight: 800;
	color: var(--vvd-navy);
	margin: 0 0 12px;
}
.vvd-section-sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--vvd-text-muted);
	max-width: 640px;
	margin: 0;
}
.vvd-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.vvd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 16px 30px;
	border-radius: 10px;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	font-family: inherit;
}
.vvd-btn-gold {
	background: var(--vvd-gold);
	color: var(--vvd-navy);
	box-shadow: 0 10px 24px rgba(245, 166, 35, .35);
}
.vvd-btn-gold:hover { background: var(--vvd-gold-dark); color: var(--vvd-navy); transform: translateY(-2px); }
.vvd-btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,.5);
}
.vvd-btn-outline:hover { border-color: #fff; transform: translateY(-2px); }
.vvd-btn-block { width: 100%; }

/* ---------- Hero ---------- */
.vvd-hero {
	background: linear-gradient(135deg, var(--vvd-navy) 0%, var(--vvd-navy-2) 55%, var(--vvd-blue) 130%);
	position: relative;
	overflow: hidden;
}
.vvd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 15%, rgba(245,166,35,.25), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(76,134,255,.25), transparent 45%);
	pointer-events: none;
}
.vvd-hero-inner { position: relative; z-index: 1; }
.vvd-hero-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vvd-gold);
	margin: 0 0 18px;
}
.vvd-hero-title {
	font-size: clamp(25px, 3.5vw, 40px);
	line-height: 1.15;
	font-weight: 800;
	color: #fff;
	margin: 0;
}
.vvd-hero-title span { color: var(--vvd-gold); }
.vvd-hero-title-line2 {
	display: block;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	color: rgba(255,255,255,.82) !important;
}
.vvd-hero-title-line2:first-of-type { margin-top: 10px; }
.vvd-hero-sub {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255,255,255,.82);
	max-width: 520px;
	margin: 0 0 30px;
}
.vvd-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; margin-bottom: 34px; }
.vvd-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vvd-hero-badges li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,.88);
	font-size: 14.5px;
	font-weight: 600;
}
.vvd-hero-badges i { color: var(--vvd-gold); font-size: 16px; }

/* ---------- Lead form (shared: hero card + modal) ---------- */
.vvd-form-card {
	background: #fff;
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 30px 60px rgba(11, 31, 68, .35);
}
.vvd-form-card-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--vvd-navy);
	margin: 0 0 6px;
}
.vvd-form-card-sub {
	font-size: 14.5px;
	color: var(--vvd-text-muted);
	margin: 0 0 22px;
	line-height: 1.5;
}
.vvd-field { margin-bottom: 14px; }
.vvd-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--vvd-navy);
	margin-bottom: 6px;
}
.vvd-field input {
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid #DDE3F0;
	border-radius: 10px;
	padding: 13px 15px;
	font-size: 15px;
	font-family: inherit;
	color: var(--vvd-text);
	background: #F9FAFD;
	transition: border-color .15s ease, background .15s ease;
}
.vvd-field input:focus {
	outline: none;
	border-color: var(--vvd-blue);
	background: #fff;
}
.vvd-field input.error { border-color: #c0392b; background: #fff; }
.vvd-field input.error:focus { border-color: #c0392b; }
.vvd-field input.valid { border-color: #1a8a4a; background: #fff; }
.vvd-field label.vvd-error {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #c0392b;
	margin: 6px 0 0;
}
.vvd-form-note {
	font-size: 12px;
	color: var(--vvd-text-muted);
	margin: 12px 0 0;
	line-height: 1.5;
}
.vvd-form-msg { font-size: 14px; font-weight: 600; margin-top: 12px; display: none; }
.vvd-form-msg.is-ok { color: #1a8a4a; display: block; }
.vvd-form-msg.is-err { color: #c0392b; display: block; }
.vvd-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Modal popup ---------- */
.vvd-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(11, 19, 40, .6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}
.vvd-modal-overlay.is-open { display: flex; }
.vvd-modal-box {
	position: relative;
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow: hidden auto;
}
.vvd-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F1F3F8;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: var(--vvd-navy);
	cursor: pointer;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vvd-modal-close:hover { background: #E4E8F2; }

/* ---------- CTA banner ---------- */
.vvd-cta-banner {
	background: linear-gradient(120deg, var(--vvd-navy-2), var(--vvd-navy));
	border-radius: 24px;
	padding: 52px 40px;
	text-align: center;
}
.vvd-cta-banner h2 {
	color: #fff;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	margin: 0 0 12px;
}
.vvd-cta-banner p {
	color: rgba(255,255,255,.78);
	font-size: 16px;
	max-width: 560px;
	margin: 0 auto 26px;
	line-height: 1.6;
}

/* ---------- Footer ---------- */
.vvd-footer { color: var(--vvd-text-muted); }
.vvd-footer-logo {
	height: 90px !important;
	width: auto !important;
	max-width: 220px !important;
	margin-bottom: 14px;
	display: block;
	align-self: flex-start;
	flex-shrink: 0;
}
.vvd-footer h4 {
	color: var(--vvd-navy);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.vvd-footer p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.vvd-footer ul { list-style: none; margin: 0; padding: 0; }
.vvd-footer ul li { margin-bottom: 10px; }
.vvd-footer a { color: var(--vvd-text-muted); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.vvd-footer a:hover { color: #61CE70; }
.vvd-footer-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vvd-footer-contact i { color: var(--vvd-blue); width: 16px; text-align: center; }
.vvd-footer-contact a,
.vvd-footer-contact span { font-weight: 700; font-size: 14.5px; }
.vvd-footer-bottom {
	border-top: 1px solid #E5E9F2;
	margin-top: 36px;
	padding-top: 22px;
	font-size: 13px;
	color: var(--vvd-text-muted);
}

/* ---------- Info page ---------- */
.vvd-info-topic {
	display: flex;
	gap: 32px;
	max-width: 900px;
	margin: 0 auto;
	align-items: flex-start;
}
.vvd-info-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--vvd-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vvd-info-icon i { color: var(--vvd-blue); font-size: 26px; }
.vvd-info-text { font-size: 16px; line-height: 1.7; color: var(--vvd-text-muted); margin: 0 0 14px; }
@media (max-width: 640px) {
	.vvd-info-topic { flex-direction: column; gap: 18px; }
}

/* ---------- Services page: process steps ---------- */
.vvd-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}
.vvd-step { text-align: center; }
.vvd-step-num {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vvd-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	margin: 0 auto 16px;
}
.vvd-step h4 { margin: 0 0 8px; font-size: 16px; color: var(--vvd-navy); font-weight: 700; }
.vvd-step p { margin: 0; font-size: 14px; color: var(--vvd-text-muted); line-height: 1.6; }

/* ---------- Projects page: reusable case-study card for each completed
   object (use for this project and every future one). ---------- */
.vvd-project-card {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid #EAEDF5;
	box-shadow: 0 20px 50px rgba(11, 31, 68, .06);
	max-width: 1100px;
	margin: 0 auto;
}
.vvd-project-slider {
	position: relative;
	flex: 0 0 45%;
	min-height: 380px;
	overflow: hidden;
	background: var(--vvd-bg-light);
}
.vvd-project-slides { position: absolute; inset: 0; }
.vvd-project-slides img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	opacity: 0;
	cursor: zoom-in;
	pointer-events: none;
	transition: opacity .4s ease;
}
.vvd-project-slides img.is-active { opacity: 1; pointer-events: auto; }
.vvd-project-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--vvd-navy);
	box-shadow: 0 6px 16px rgba(11, 31, 68, .15);
	z-index: 2;
	transition: background .15s ease;
}
.vvd-project-slider-arrow:hover { background: #fff; }
.vvd-project-slider-prev { left: 14px; }
.vvd-project-slider-next { right: 14px; }
.vvd-project-slider-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}
.vvd-project-slider-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.vvd-project-slider-dots button.is-active { width: 20px; border-radius: 4px; background: #fff; }
.vvd-project-body { flex: 1 1 55%; padding: 36px 40px; }
.vvd-project-tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vvd-blue);
	background: rgba(33, 88, 228, .08);
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 14px;
}
.vvd-project-title {
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.3;
	font-weight: 800;
	color: var(--vvd-navy);
	margin: 0 0 12px;
}
.vvd-project-desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--vvd-text-muted);
	max-width: 640px;
	margin: 0 0 28px;
}
.vvd-project-specs { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.vvd-project-specs li { display: flex; align-items: center; gap: 14px; flex: 1 1 220px; }
.vvd-project-spec-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--vvd-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vvd-project-spec-icon i { color: var(--vvd-blue); font-size: 18px; }
.vvd-project-specs h4 {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vvd-text-muted);
}
.vvd-project-specs span { font-size: 15px; font-weight: 700; color: var(--vvd-navy); }
@media (max-width: 767px) {
	.vvd-project-card { flex-direction: column; }
	.vvd-project-slider { flex-basis: auto; min-height: 0; aspect-ratio: 4 / 3; }
	.vvd-project-body { padding: 24px; }
}

/* ---------- Fullscreen photo lightbox — opened from project slider photos.
   Navigation via arrows/dots/keyboard, plus touch swipe and mouse drag on
   the stage (pointer-events are disabled on the image itself so the drag
   never triggers the browser's native image-drag ghost). ---------- */
.vvd-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(11, 31, 68, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	touch-action: none;
}
.vvd-lightbox.is-open { display: flex; }

/* ---------- Shop: product title — 25% smaller than the theme's global H1
   size (which is shared by every H1 site-wide, so scaled here relative to
   that preset rather than touching it directly). ---------- */
.single-product .wp-block-post-title {
	font-size: calc(var(--wp--preset--font-size--xx-large) * 0.75);
}

/* ---------- Shop: product gallery fullscreen viewer (WooCommerce's
   PhotoSwipe) — white, slightly see-through backdrop instead of the
   default near-black one. PhotoSwipe fades this in via its own opacity
   animation, so only the base color needs to change. ---------- */
.pswp__bg { background: rgba(255, 255, 255, 0.97) !important; }
/* The prev/next arrow icons are a solid-white SVG sprite (default-skin.svg),
   made for PhotoSwipe's normal near-black background — invisible against
   the white one above. Invert them to dark so they stay visible. */
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	filter: invert(1);
}
.vvd-lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: grab;
}
.vvd-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	cursor: default;
}
.vvd-lightbox-close,
.vvd-lightbox-arrow {
	position: absolute;
	border: none;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
	transition: background .15s ease;
}
.vvd-lightbox-close:hover,
.vvd-lightbox-arrow:hover { background: rgba(255, 255, 255, .22); }
.vvd-lightbox-close {
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
}
.vvd-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 18px; }
.vvd-lightbox-prev { left: 20px; }
.vvd-lightbox-next { right: 20px; }
/* Single-photo sets have nothing to page through — hide nav entirely. */
.vvd-lightbox:not(.has-multiple) .vvd-lightbox-arrow,
.vvd-lightbox:not(.has-multiple) .vvd-lightbox-counter { display: none; }
.vvd-lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
	font-weight: 600;
	z-index: 2;
}
@media (max-width: 640px) {
	.vvd-lightbox-arrow { width: 40px; height: 40px; font-size: 15px; }
	.vvd-lightbox-prev { left: 8px; }
	.vvd-lightbox-next { right: 8px; }
	.vvd-lightbox-close { top: 12px; right: 12px; }
}

/* ---------- Contacts page ---------- */
.vvd-contact-list { display: flex; flex-direction: column; gap: 26px; }
.vvd-contact-item { display: flex; align-items: flex-start; gap: 18px; }
.vvd-contact-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--vvd-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vvd-contact-icon i { color: var(--vvd-blue); font-size: 20px; }
.vvd-contact-item h4 {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vvd-text-muted);
}
.vvd-contact-item a,
.vvd-contact-item span {
	font-size: 18px;
	font-weight: 700;
	color: var(--vvd-navy);
	text-decoration: none;
}
.vvd-contact-item a:hover { color: var(--vvd-blue); }

/* ---------- Header ---------- */
.elementor-element-326aded { padding: 0 !important; }
.hfe-site-logo-img { width: clamp(140px, 16vw, 200px) !important; height: auto !important; }
.vvd-header-phone { display: flex; align-items: center; gap: 10px; position: relative; }
.vvd-header-phone a {
	color: var(--vvd-navy);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
}
.vvd-header-phone i { color: #163F82; font-size: 18px; transition: color .15s ease; }
.vvd-header-phone .vvd-phone-icon:hover { color: #5C79A8; }
/* Same 40×40 icon-button box as the cart and burger toggle, at every
   width — including desktop above 1500px where the burger isn't shown and
   the number sits inline next to it, so the icon still matches. Light
   grey background (not pure white) so the box's edge actually shows up
   against the header's own white background, brand-blue icon glyph,
   lighter blue on hover (same base→lighter-on-hover pattern as the
   "Додати в кошик" buttons, just applied to the icon color instead of
   the box background). */
.vvd-header-phone .vvd-phone-icon {
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vvd-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	flex-shrink: 0;
}

/* Visible stand-in for HFE's own burger toggle: a real flex item inside
   .vvd-header-actions (see vvd-site.js for the click-forwarding /
   state-sync logic — the *real* toggle can't be moved into this row
   itself, since HFE's click handler locates the dropdown panel via
   `.next()` relative to the toggle's original DOM position). Being a
   normal flex item means it lines up with the phone/cart icons for free,
   with none of the position:absolute + manually-matched offsets the real
   toggle needed. Hidden by default (desktop, full nav menu shown) — the
   @media block below turns it back on for ≤1500px; that override has to
   come AFTER this base rule in the file or an equal-specificity, later
   `display:none` here would win instead and hide it at every width. */
.vvd-burger-proxy {
	display: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vvd-bg-light);
	align-items: center;
	justify-content: center;
	color: #163F82;
	border: none;
	padding: 0;
	flex-shrink: 0;
	font-size: 18px;
	transition: color .15s ease;
}
.vvd-burger-proxy:hover { color: #5C79A8; }
.hfe-nav-menu__toggle { display: none !important; }

/* ---------- Nav menu links: clicking any item (Головна, Послуги, ...)
   draws the browser's default focus outline (green box) — not wanted
   here, both in the desktop horizontal menu and the mobile dropdown. ---------- */
.hfe-menu-item:focus,
.hfe-menu-item:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ---------- Nav menu: force the burger toggle earlier than HFE's built-in
   1024px "tablet" breakpoint. Mirrors the plugin's own tablet-breakpoint
   rules (inc/widgets-css/frontend.css) but at 1500px instead of 1024px. ---------- */
@media (max-width: 1500px) {
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li,
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu {
		width: 100%;
		margin-right: 0;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-layout-horizontal .hfe-nav-menu__toggle,
	.hfe-nav-menu__breakpoint-tablet .hfe-layout-vertical .hfe-nav-menu__toggle {
		display: block;
		visibility: visible;
		opacity: 1;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		visibility: hidden;
		opacity: 0;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		visibility: visible;
		opacity: 1;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal,
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-vertical {
		visibility: hidden;
		opacity: 0;
		height: 0;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-horizontal,
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-vertical {
		visibility: visible;
		opacity: 1;
		height: auto;
	}

	/* Reserve room on the actions block's right side for the toggle, then pin
	   the toggle (pulled out of the nav column, out of normal flow) in that
	   reserved space at the header row's own right edge — so it lands right
	   next to the CTA button instead of floating where the nav column sits.

	   Elementor gives BOTH containers (.e-con) and widgets (.elementor-widget)
	   position:relative by default. That's two positioned ancestors between
	   the toggle and the header row — the nav column AND the nav widget's own
	   wrapper — either one left alone becomes the absolute-positioning anchor
	   instead of the row. Both have to be forced back to static. (The row
	   itself doesn't need its own override here any more — it's
	   position:fixed now, which is just as valid an anchor for the
	   toggle's position:absolute.) */
	.elementor-element-349f34c,
	.elementor-element-77c4ba5 {
		position: static !important;
	}
	/* Elementor's own responsive CSS switches this row to flex-wrap:wrap
	   below its mobile breakpoint (~767px), and the three columns' widths
	   (18/52/30%) are only defined for >=768px — below that they silently
	   fall back to 100% each. Combined, that stacks logo/actions/toggle on
	   separate lines instead of keeping them on one row. Force nowrap and
	   content-sized columns for the whole <=1500px range so behavior stays
	   identical all the way down instead of changing again under 768px. */
	.elementor-element-ecf367c { flex-wrap: nowrap !important; }
	.elementor-element-326aded { width: auto !important; flex: 0 0 auto !important; }
	/* The nav column's own content (list + toggle) is either hidden or pulled
	   out via position:absolute, but the column itself still reserved its
	   normal ~52% width in the row — an invisible box with no content that
	   still showed a dashed placeholder outline. Collapse it to nothing. */
	.elementor-element-349f34c {
		width: 0 !important;
		min-width: 0 !important;
		flex: 0 0 0 !important;
		padding: 0 !important;
		border: none !important;
		overflow: visible !important;
	}
	/* The actions column (phone/cart/CTA button) still kept its desktop ~30%
	   fixed width, sitting right after the (now-collapsed) nav column — i.e.
	   ending around the 48% mark instead of the row's true right edge. Its
	   right-aligned content and the toggle (fixed to the row's own right
	   edge) ended up with a big empty gap between them. Let it grow to fill
	   the freed space so its content lands flush next to the toggle. */
	.elementor-element-01bf0c7 {
		width: auto !important;
		flex: 1 1 auto !important;
	}

	/* The dropdown panel — anchored near the row's right edge. */
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal {
		position: absolute !important;
		top: 100% !important;
		right: 60px !important;
		left: auto !important;
		width: 260px;
		max-width: calc(100vw - 80px);
		margin-top: 12px !important;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 20px 40px rgba(11, 31, 68, .18);
		padding: 10px;
		box-sizing: border-box;
		z-index: 30;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu li {
		width: 100%;
		margin: 0;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal a.hfe-menu-item {
		display: block;
		padding: 12px 16px !important;
		border-radius: 10px;
		color: var(--vvd-navy) !important;
		font-weight: 600;
		font-size: 15px;
		text-decoration: none;
		transition: background .15s ease, color .15s ease;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal a.hfe-menu-item:hover {
		background: var(--vvd-bg-light);
		color: var(--vvd-blue) !important;
	}

	/* HFE's own toggle button is never shown to the user — see the
	   .vvd-burger-proxy rules below for the visible stand-in. It's kept
	   functional (not display:none anywhere the panel-visibility CSS or
	   the plugin's own JS needs it) purely to receive forwarded clicks. */
	.vvd-burger-proxy { display: flex; }
}

/* Above 1500px (burger hidden, real nav menu shown) the actions column
   still had Elementor's own fixed 30% width setting — unlike the ≤1500px
   range above, which already sizes it by content. Match that here too.
   flex:0 0 auto keeps the box itself content-sized instead of stretching
   it (like flex:1 1 auto would) — margin-left:auto pushes that smaller
   box flush against the row's own right edge instead of leaving the
   freed 30%-minus-content space sitting empty next to it. */
@media (min-width: 1501px) {
	.elementor-element-01bf0c7 {
		width: auto !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}
}

/* Phone number: hidden behind the icon as a popover at every width (not
   just below 1500px where the burger nav takes over) — click the icon to
   reveal it (no hover trigger, click-only), instead of showing it inline
   next to the icon on wide desktop. */
.vvd-header-phone .vvd-phone-number {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 7px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(11, 31, 68, .18);
	padding: 10px 18px;
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility .15s ease;
	z-index: 20;
}
.vvd-header-phone.is-open .vvd-phone-number {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.vvd-header-actions { display: flex; align-items: center; gap: 15px; justify-content: flex-end; flex-wrap: nowrap; }
/* Adding the burger proxy as a real flex item (instead of the old
   absolutely-positioned toggle) means it now competes for space in this
   row alongside the CTA button. Without flex-shrink:0, a tight nowrap row
   could compress the button enough for its text to wrap onto two lines —
   taller button, still vertically centered, reads as "the button jumped
   up" since its center stays put but its top edge moves. Pin every
   item's size so the row only ever overflows, never squeezes content. */
.vvd-header-actions > * { flex-shrink: 0; }
.vvd-header-actions .vvd-btn { white-space: nowrap; }
.vvd-header-contacts-link {
	color: var(--vvd-navy);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}
.vvd-header-contacts-link:hover { color: var(--vvd-blue); }
.vvd-header-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--vvd-bg-light);
	color: #163F82;
	font-size: 17px;
	text-decoration: none;
	flex-shrink: 0;
	transition: color .15s ease;
}
.vvd-header-cart:hover { color: #5C79A8; }

/* Zero-size element sitting right before the header's CTA button — forces
   a flex-wrap line break ahead of just that button (not the icons before
   it), instead of stretching the button itself to flex-basis:100%. */
.vvd-actions-break { display: none; }

@media (max-width: 767px) {
	.vvd-form-card { padding: 24px; }
	.vvd-cta-banner { padding: 40px 22px; border-radius: 18px; }
	.vvd-header-actions .vvd-btn { font-size: 13px; padding: 12px 18px; }
}

/* ---------- Header/footer are each wrapped in an extra outer container
   (Elementor embeds the header/footer templates as shortcode widgets inside
   their own top-level section on every page). Both wrappers are transparent
   on the same white body background as the header/footer rows themselves,
   so it makes no visual difference which of the two (outer wrapper vs inner
   row) actually carries the padding — only their combined total matters.

   Footer keeps its own split (outer 20px + inner row's own 40px-capped
   scale, summed to match) — untouched below.

   Header row (ecf367c) itself keeps a flat 60px at desktop (>1024px,
   matching main content there), but below 1024px it's zeroed out entirely
   instead of following the fluid clamp — the outer wrapper (1b41dc9) is
   always 0 too, so below 1024px the header has no side padding at all. */
.elementor-element-1b41dc9 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.elementor-element-ecf367c {
	padding-left: 60px !important;
	padding-right: 60px !important;
}
.elementor-element-6e2fa0c {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.elementor-element-2913a21 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
@media (min-width: 1025px) {
	.elementor-element-2913a21 {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}

/* ---------- Fluid side padding on all top-level page sections: shrinks
   smoothly (not in steps) from whatever it is at 1024px down to 14px at
   360px, then holds at 14px below that. The footer's two rows are handled
   separately right below — their original padding is 40px (not 60px), and
   the burger-toggle/dropdown offsets are tied to that same value, so they
   need their own lower-ceiling clamp kept in lockstep. The header row
   (ecf367c) is excluded here — it's zeroed out below 1024px instead (see
   below), not following this fluid curve. */
@media (max-width: 1024px) {
	.e-con.e-parent:not(.elementor-element-ecf367c):not(.elementor-element-2913a21):not(.elementor-element-07d4742) {
		padding-left: clamp(14px, 6.93vw - 10.94px, 60px) !important;
		padding-right: clamp(14px, 6.93vw - 10.94px, 60px) !important;
	}

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

	/* Footer copyright bar row: same fluid shrink, capped at its own
	   original 40px instead of 60px. The main footer row (2913a21) is
	   excluded here — it's zeroed out unconditionally above instead. */
	.elementor-element-07d4742 {
		padding-left: clamp(14px, 3.92vw - 0.1px, 40px) !important;
		padding-right: clamp(14px, 3.92vw - 0.1px, 40px) !important;
	}
	/* Footer outer wrapper's 20px shrinks to 0 in lockstep, so outer+inner
	   keeps summing to exactly the same 60px-to-14px curve the main
	   content uses. */
	.elementor-element-6e2fa0c {
		padding-left: clamp(0px, 3.01vw - 10.84px, 20px) !important;
		padding-right: clamp(0px, 3.01vw - 10.84px, 20px) !important;
	}

	/* The dropdown panel is pinned via `right: 60px` above (matching the
	   header row's fixed padding from 1500-1024px) — below 1024px the row
	   itself has no padding any more (see above), so pin it flush to the
	   row's own right edge instead. */
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal {
		right: 0 !important;
	}
}

@media (max-width: 480px) {
	.vvd-header-actions { gap: 12px; flex-wrap: wrap; }
}

/* Below 1500px — the exact same point the burger appears — the CTA
   button sits on its own row on top, phone + cart + burger icons stay on
   one row underneath (right-aligned, same height), so the button moves
   up at the same moment the burger shows up, at every width in between,
   not just on very narrow screens. flex-wrap: wrap-reverse flips which
   wrapped LINE comes first (top vs bottom) without touching each line's
   own left-to-right item order or the DOM/break mechanism that splits
   them (still right-aligned via justify-content:flex-end, applied per
   line). Since the burger is now .vvd-burger-proxy — a real flex item
   alongside phone/cart, not an absolutely positioned element pinned by
   hand — it automatically lines up with them on the same line/height; no
   offset math needed here. */
@media (max-width: 1500px) {
	.elementor-element-ecf367c {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		/* Force the row's flex children (logo, actions column) to start
		   flush at the top instead of the default vertical centering — the
		   actions column is normally the tallest child so centering happens
		   to look flush too, but that's not guaranteed (e.g. once the logo
		   grows taller). */
		align-items: flex-start !important;
	}
	/* The actions column itself (elementor-element-01bf0c7) is a
	   flex-direction:column container — its OWN main axis is vertical, so
	   it's `justify-content` (not `align-items`) that centers its single
	   child (the actions widget) vertically inside it by default; force it
	   flush so it doesn't get centered with slack inside a taller box.
	   align-items is the CROSS axis here (horizontal, since direction is
	   column) — leave it at the default `stretch` so .vvd-header-actions
	   fills the column's full width and its own justify-content:flex-end
	   can still push its content to the right edge. Overriding it to
	   flex-start would shrink that child to content width and strand it
	   on the left instead. */
	.elementor-element-01bf0c7 {
		justify-content: flex-start !important;
	}
	.vvd-header-actions { flex-wrap: wrap-reverse; row-gap: 10px; }
	.vvd-actions-break { display: block; flex-basis: 100%; height: 0; }
}

/* Icon size shrinks further only below 600px — unlike the wrap/alignment
   rules above, this stays at its own narrower breakpoint since it wasn't
   part of what needed to sync with the burger's appearance. */
@media (max-width: 600px) {
	.vvd-header-phone .vvd-phone-icon,
	.vvd-header-cart,
	.vvd-burger-proxy {
		width: 30px !important;
		height: 30px !important;
	}
}

/* ---------- "Тип напруги" sidebar filter on Акумулятори/Інвертори
   category archives (see vvd-site.php for the markup injection). Plain
   checkbox-styled links, not real <input type="checkbox">, since clicking
   one navigates straight to that subcategory rather than toggling a
   multi-select state. ---------- */
.vvd-cat-layout {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
.vvd-cat-filter {
	flex: 0 0 200px;
	position: sticky;
	top: 20px;
	margin-top: 50px;
}
.vvd-cat-main {
	flex: 1 1 auto;
	min-width: 0;
}
/* Compact, utilitarian filter-panel look (Rozetka-style category filters:
   small dense checkboxes, neutral dark-grey text throughout — including
   when checked, no brand-color text — a subtle divider under the group
   title instead of a big heading, tight vertical rhythm). */
.vvd-voltage-filter__title {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E5E8EE;
}
.vvd-voltage-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vvd-voltage-filter__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #333;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.3;
}
.vvd-voltage-filter__item::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	border: 1.5px solid #D4D9E1;
	background: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.vvd-voltage-filter__item:hover { color: var(--vvd-blue); }
.vvd-voltage-filter__item:hover::before { border-color: var(--vvd-blue); }
.vvd-voltage-filter__item.is-checked::before {
	background: var(--vvd-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/10px no-repeat;
	border-color: var(--vvd-blue);
}
@media (max-width: 767px) {
	.vvd-cat-layout { flex-direction: column; gap: 16px; }
	.vvd-cat-filter { flex-basis: auto; width: 100%; position: static; }
	.vvd-voltage-filter__list { flex-direction: row; flex-wrap: wrap; gap: 14px; }
}