/* =============================================================================
 * Invictus Style — code-driven homepage (front-page.php) styling.
 *
 * Recreates the nargile.bg homepage feel on top of Woodmart: full-width
 * sections, category tiles with image + gold label, clean product carousels,
 * promo feature banners, service bars, About box.
 *
 * Palette follows the current invstyle dark theme: dark charcoal surfaces,
 * white text, warm gold/red accent (matching the existing "ИЗБЕРИ ТУК" button).
 * ========================================================================= */

:root {
	--inv-accent: #d4272e;      /* red — primary brand/accent colour */
	--inv-accent-2: #ff3b43;    /* lighter red for gradients/hover */
	--inv-gold: #d4272e;        /* alias to red: all accents use the brand red */
	/* LIGHT theme — the homepage renders on Woodmart's white page background,
	   so surfaces are near-white and text is dark charcoal (was dark theme). */
	--inv-surface: #ffffff;
	--inv-surface-2: #f5f5f7;
	--inv-text: #1c1c1e;
	--inv-muted: #6b6b70;
	--inv-border: rgba(0, 0, 0, .08);
	--inv-radius: 8px;
	--inv-gap: 20px;
	--inv-maxw: 1280px;
}

/* Base text colour for the whole homepage — keeps headings/paragraphs dark and
   readable on the white post/page background. */
.inv-front,
.inv-front .elementor-heading-title,
.inv-front .elementor-widget-text-editor {
	color: var(--inv-text);
}

.inv-front {
	display: block;
	width: 100%;
}

.inv-container {
	max-width: var(--inv-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

.inv-section {
	padding: 40px 0;
}
.inv-section + .inv-section {
	padding-top: 0;
}

.inv-heading {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0 0 24px;
	position: relative;
	padding-bottom: 10px;
}
.inv-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--inv-accent);
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Generic grids
 * ---------------------------------------------------------------------- */
.inv-grid {
	display: grid;
	gap: var(--inv-gap);
}
.inv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.inv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.inv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.inv-grid--gap { gap: var(--inv-gap); }

/* -------------------------------------------------------------------------
 * Category tiles (hero + 6-tile grid)
 * ---------------------------------------------------------------------- */
.inv-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 180px;
	border-radius: var(--inv-radius);
	overflow: hidden;
	background-color: var(--inv-surface-2);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .55);
}
.inv-tile--tall { min-height: 260px; }
.inv-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .65);
}
.inv-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .72) 100%);
	transition: background .25s ease;
}
.inv-tile:hover .inv-tile__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .82) 100%);
}
.inv-tile__label {
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 18px 14px;
	text-align: center;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.inv-tile:hover .inv-tile__label { color: var(--inv-gold); }

/* -------------------------------------------------------------------------
 * Service bars
 * ---------------------------------------------------------------------- */
.inv-services__grid { gap: 12px; }
.inv-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 22px 16px;
	background: var(--inv-surface-2);
	border-radius: var(--inv-radius);
	border: 1px solid rgba(255, 255, 255, .06);
}
.inv-service__icon {
	font-size: 30px;
	line-height: 1;
	margin-bottom: 10px;
	color: var(--inv-gold);
}
.inv-service__title {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.inv-service__sub {
	font-size: 13px;
	color: var(--inv-muted);
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
 * Promo feature banners
 * ---------------------------------------------------------------------- */
.inv-banner {
	position: relative;
	min-height: 220px;
	display: flex;
	align-items: center;
	border-radius: var(--inv-radius);
	overflow: hidden;
	background: linear-gradient(120deg, var(--inv-surface-2) 0%, var(--inv-surface) 100%);
	border: 1px solid rgba(255, 255, 255, .06);
}
.inv-banner--alt {
	background: linear-gradient(120deg, #2a1618 0%, var(--inv-surface) 100%);
}
.inv-banner__body {
	padding: 30px 34px;
	max-width: 70%;
}
.inv-banner__title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.inv-banner__text {
	font-size: 15px;
	color: var(--inv-muted);
	margin: 0 0 18px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * CTA button (matches existing red pill)
 * ---------------------------------------------------------------------- */
.inv-btn {
	display: inline-block;
	background: var(--inv-accent);
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 14px;
	padding: 12px 26px;
	border-radius: 40px;
	text-decoration: none;
	transition: filter .2s ease, transform .2s ease;
}
.inv-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * WooCommerce product rows inside the sections — keep Woodmart's own
 * product-card styling, just make sure the shortcode grid breathes.
 * ---------------------------------------------------------------------- */
/* =============================================================================
 * PRODUCT CARDS — hover behaviour (live Woodmart markup).
 * The homepage on the live site is Elementor flex containers; the product
 * loops render Woodmart's standard cards (.wd-product / li.product), NOT a
 * custom .inv-products wrapper. So we target Woodmart's real classes.
 *
 * Woodmart's "show description on hover" reveals TWO blocks:
 *   .hover-content.wd-more-desc  → the long product description (OVERFLOWS the
 *                                   card and spills over the products below)
 *   .wd-bottom-actions           → wishlist + add-to-cart + quick-view buttons
 *
 * The user wants: HIDE the description, KEEP the action buttons, and make sure
 * nothing covers neighbouring products.
 * ========================================================================= */

/* 1) Hide the long hover description (this is what overflows onto other cards).
 *    Title, category, price, image and the action buttons all stay. */
.wd-product .hover-content.wd-more-desc,
.wd-product .wd-more-desc,
li.product .hover-content.wd-more-desc,
li.product .wd-more-desc {
	display: none !important;
}

/* 2) Uniform action row on hover — same look on EVERY product grid (promo,
 *    new, best-sellers, category loops). A centered row of equal-size round
 *    icon buttons: Add to cart + Quick view (+ Wishlist when enabled).
 *    Woodmart reveals .wd-bottom-actions on hover; we just normalise it. */
.wd-product .wd-bottom-actions,
li.product .wd-bottom-actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 10px !important;
	margin-top: 10px;
}
.wd-product .wd-bottom-actions .wrap-wishlist-button:empty {
	display: none !important;          /* hide the empty wishlist slot until it's enabled */
}
/* Each action = a uniform 42px round button with the brand-red icon. */
.wd-product .wd-bottom-actions .wrap-wishlist-button,
.wd-product .wd-bottom-actions .wd-add-btn,
.wd-product .wd-bottom-actions .wrap-quickview-button,
.wd-product .wd-bottom-actions [class*="quickview"],
.wd-product .wd-bottom-actions [class*="quick-shop"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}
/* Normalise the clickable element inside each slot to the same round chip. */
.wd-product .wd-bottom-actions .wd-add-btn > a,
.wd-product .wd-bottom-actions .quick-view > a,
.wd-product .wd-bottom-actions .wrap-quickview-button a,
.wd-product .wd-bottom-actions .wrap-wishlist-button a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--inv-accent, #d4272e) !important;
	border: 1px solid var(--inv-border, rgba(0,0,0,.12)) !important;
	box-shadow: 0 4px 12px -6px rgba(0,0,0,.3) !important;
	font-size: 0 !important;                 /* hide the "Още"/text label, keep icon only */
	transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
/* Give each button a consistent icon via ::before (Woodmart Font Awesome). */
.wd-product .wd-bottom-actions .wd-add-btn > a::before {
	content: "\f291";                        /* fa cart / shopping */
	font-family: "woodmart-font", "Font Awesome 6 Free", "fontawesome";
	font-weight: 900;
	font-size: 16px;
}
.wd-product .wd-bottom-actions .quick-view > a::before,
.wd-product .wd-bottom-actions .wrap-quickview-button a::before {
	content: "\f06e";                        /* fa eye / preview */
	font-family: "woodmart-font", "Font Awesome 6 Free", "fontawesome";
	font-weight: 900;
	font-size: 16px;
}
.wd-product .wd-bottom-actions .wrap-wishlist-button a::before {
	content: "\f004";                        /* fa heart / wishlist */
	font-family: "woodmart-font", "Font Awesome 6 Free", "fontawesome";
	font-weight: 900;
	font-size: 16px;
}
/* Keep any real Woodmart icon inside visible at a consistent size. */
.wd-product .wd-bottom-actions a i,
.wd-product .wd-bottom-actions a svg {
	font-size: 16px !important;
	width: 16px;
	height: 16px;
}
/* Hover: fill red, white icon, lift. */
.wd-product .wd-bottom-actions .wd-add-btn > a:hover,
.wd-product .wd-bottom-actions .quick-view > a:hover,
.wd-product .wd-bottom-actions .wrap-quickview-button a:hover,
.wd-product .wd-bottom-actions .wrap-wishlist-button a:hover {
	background: var(--inv-accent, #d4272e) !important;
	color: #fff !important;
	border-color: var(--inv-accent, #d4272e) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(212,39,46,.5) !important;
}
.wd-product .wd-bottom-actions .wd-add-btn > a:hover i,
.wd-product .wd-bottom-actions .quick-view > a:hover i {
	color: #fff !important;
}

/* 3) Stacking + containment so the active (hovered) card sits above its
 *    neighbours and nothing bleeds sideways onto the next product. */
li.product,
.wd-product {
	position: relative;
	z-index: 1;
}
li.product:hover,
.wd-product:hover,
li.product:focus-within,
.wd-product:focus-within {
	z-index: 5;
}
.inv-about__box {
	background: var(--inv-surface-2);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--inv-radius);
	padding: 32px 36px;
}
.inv-about__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--inv-muted);
	margin: 0;
	max-width: 820px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.inv-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.inv-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.inv-banner__body { max-width: 100%; }
	.inv-heading { font-size: 22px; }
}
@media (max-width: 520px) {
	.inv-grid--2,
	.inv-grid--3,
	.inv-grid--4 { grid-template-columns: 1fr; }
	.inv-tile--tall { min-height: 200px; }
}

/* =============================================================================
 * ELEMENTOR BRIDGE
 *
 * The Elementor template (invictus-home.json) applies our classes to native
 * Elementor widgets/columns (image-box, icon-box, button, column wrappers).
 * These widgets render their own DOM, so we remap the tile/service/banner
 * look onto Elementor's markup here.
 * ========================================================================= */

/* --- Category tile from an image-box widget (.inv-tile on the widget) --- */
.elementor-widget.inv-tile,
.inv-tile.elementor-widget-image-box {
	position: relative;
	display: block;
	min-height: 180px;
	height: 100%;
	border-radius: var(--inv-radius);
	overflow: hidden;
	background-color: var(--inv-surface-2);
	background-size: cover;
	background-position: center;
	transition: transform .25s ease, box-shadow .25s ease;
	box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .55);
}
/* Fallback gradient on a ::before so it sits UNDER any image you add — whether
   you set it via the widget's Image field OR via Advanced → Background. A tile
   with no image shows the gradient; a tile with an image shows the image. */
.elementor-widget.inv-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, #2b2b30 0%, #191919 60%, #24140f 100%);
}
.inv-tile.elementor-widget-image-box.inv-tile--tall { min-height: 260px; }
.elementor-widget.inv-tile:hover { transform: translateY(-4px); }

/* Elementor's image-box defaults to a CENTERED, VERTICALLY-STACKED layout
   (img block on top, title below) which renders as "picture as a top strip +
   black empty space below". Force the wrapper to be the full-tile surface with
   the label overlaid at the bottom. The !important beats Elementor's widget
   CSS. The wrapper itself is the positioning context for the absolute image. */
.inv-tile .elementor-image-box-wrapper {
	position: absolute !important;
	inset: 0;
	z-index: 1;                  /* above the ::before fallback */
	height: 100%;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-end !important;
	text-align: center !important;
	padding: 18px 14px !important;
}
/* When an image is set via the widget's Image FIELD, blow it up to fill the
   whole tile. Elementor gives .elementor-image-box-img an auto width, a bottom
   margin, and sizes the <img> to its "Image Size" setting — override all of it
   so the picture becomes the full-tile background. */
.inv-tile .elementor-image-box-img {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;                  /* fills the wrapper, behind title + overlay */
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}
.inv-tile .elementor-image-box-img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	border-radius: 0 !important;
	display: block;
}
/* Dark gradient scrim ON TOP of the image so the white label stays readable
   over any photo. Lives on the wrapper's ::after so it always overlays. */
.inv-tile .elementor-image-box-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .65) 100%);
	transition: background .25s ease;
	pointer-events: none;
}
.inv-tile:hover .elementor-image-box-wrapper::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .78) 100%);
}
.inv-tile .elementor-image-box-title {
	position: relative;
	z-index: 2;                  /* above the scrim */
	margin: 0 !important;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.inv-tile:hover .elementor-image-box-title { color: #fff; }
.inv-tile .elementor-image-box-description { display: none; }

/* =============================================================================
 * MOSAIC — section 1 (the four НАРГИЛЕТА / HMD / ВЪГЛЕНИ / ТЮТЮНИ tiles).
 *
 * The template ships them as four EQUAL Elementor columns in one section. We
 * can't add a class to that section (none is set in the JSON), so target it
 * structurally: any section whose row contains an .inv-tile--tall widget.
 * Convert the equal-column row into a CSS grid where the FIRST tile is large
 * (spans 2 rows), the other three stack beside it — the nargile.bg mosaic.
 * ========================================================================= */
.elementor-section:has(.inv-tile--tall) > .elementor-container {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-auto-flow: row dense;
	gap: var(--inv-gap, 16px);
	align-items: stretch;
}
/* Neutralise Elementor's flex column widths/margins inside the grid. */
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-height: 0;
}
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column > .elementor-element-populated {
	height: 100%;
	padding: 0 !important;
}
/* First tile = big feature, spanning both rows on the left. */
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(1) {
	grid-row: span 2;
}
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(1) .inv-tile--tall {
	min-height: 100%;
}
/* The three smaller tiles fill the remaining right-hand cells. */
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(2) { grid-column: 2; grid-row: 1; }
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(3) { grid-column: 3; grid-row: 1; }
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(n+2) .inv-tile--tall {
	min-height: 170px;
}
/* Mobile: mosaic collapses to a simple single column of stacked tiles. */
@media (max-width: 768px) {
	.elementor-section:has(.inv-tile--tall) > .elementor-container {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(1),
	.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(2),
	.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(3),
	.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column:nth-child(4) {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.elementor-section:has(.inv-tile--tall) > .elementor-container > .elementor-column .inv-tile--tall {
		min-height: 160px !important;
	}
}

/* --- Service bar from an icon-box widget (.inv-service on the widget) ---
   Big, bold WHITE cards with a clean border and a soft red icon badge.
   The user asked for: no grey backdrop behind the cards, bigger cards, a
   proper border, and room for a nice description line. */
.elementor-widget.inv-service .elementor-icon-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 40px 30px;
	background: #fff;
	border-radius: 14px;
	border: 1px solid var(--inv-border);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .28);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	height: 100%;
	min-height: 220px;
	justify-content: center;
}
.elementor-widget.inv-service .elementor-icon-box-wrapper:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(212, 39, 46, .4);
	border-color: rgba(212, 39, 46, .4);
}
/* Icon badge — soft red tint, centred above the text. */
.inv-service .elementor-icon-box-icon {
	flex: 0 0 auto;
	margin: 0 0 4px !important;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgba(212, 39, 46, .1);
	transition: background .2s ease;
}
.elementor-widget.inv-service .elementor-icon-box-wrapper:hover .elementor-icon-box-icon {
	background: rgba(212, 39, 46, .16);
}
.inv-service .elementor-icon,
.inv-service .elementor-icon-box-icon i,
.inv-service .elementor-icon-box-icon svg {
	color: var(--inv-accent) !important;
	fill: var(--inv-accent) !important;
	font-size: 30px !important;
	width: 32px;
	height: 32px;
}
.inv-service .elementor-icon a { color: var(--inv-accent) !important; }
/* Text column below the icon. */
.inv-service .elementor-icon-box-content {
	text-align: center;
}
.inv-service .elementor-icon-box-title {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom: 6px;
}
.inv-service .elementor-icon-box-title,
.inv-service .elementor-icon-box-title a { color: var(--inv-text); }
.inv-service .elementor-icon-box-description {
	font-size: 14px;
	color: var(--inv-muted);
	margin-top: 0;
	line-height: 1.5;
	max-width: 260px;
}

/* --- Promo banner from a column wrapper (.inv-banner on the column) ---
   The .inv-banner--alt variant (the ПРОМОЦИИ / "виж всички промоции" box) is a
   bold red feature banner; the plain .inv-banner is a light card. */
.elementor-column.inv-banner > .elementor-widget-wrap,
.elementor-column.inv-banner > .elementor-element-populated {
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px 40px;
	border-radius: 16px;
	background: linear-gradient(120deg, #ffffff 0%, var(--inv-surface-2) 100%);
	border: 1px solid var(--inv-border);
	box-shadow: 0 12px 34px -20px rgba(0, 0, 0, .3);
}
.elementor-column.inv-banner--alt > .elementor-widget-wrap,
.elementor-column.inv-banner--alt > .elementor-element-populated {
	/* Compact centred promo card — not a stretched full-bleed red block.
	   Title, then description, then a thin divider, then a small button. */
	min-height: 0;
	align-items: center;
	text-align: center;
	padding: 34px 28px;
	background:
		radial-gradient(120% 140% at 85% 15%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 45%),
		linear-gradient(120deg, var(--inv-accent) 0%, #a51b21 100%);
	border-color: transparent;
	box-shadow: 0 18px 40px -18px rgba(212, 39, 46, .55);
}
/* Keep the inner content from stretching edge-to-edge. */
.inv-banner--alt > .elementor-widget-wrap > .elementor-widget,
.inv-banner--alt > .elementor-element-populated > .elementor-widget-wrap > .elementor-widget {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.inv-banner .inv-banner__title .elementor-heading-title,
.inv-banner .inv-banner__title {
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 8px;
	color: var(--inv-text);
}
.inv-banner .inv-banner__text,
.inv-banner .inv-banner__text .elementor-widget-container {
	font-size: 15px;
	color: var(--inv-muted);
	line-height: 1.5;
	margin-bottom: 16px;
}
/* On the red variant, force text white for contrast. */
.inv-banner--alt .inv-banner__title .elementor-heading-title,
.inv-banner--alt .inv-banner__title { color: #fff; }
.inv-banner--alt .inv-banner__text,
.inv-banner--alt .inv-banner__text .elementor-widget-container { color: rgba(255, 255, 255, .92); }
/* Thin divider under the description, above the button. Rendered on the text
   widget's ::after so no extra Elementor widget is needed. */
.inv-banner--alt .inv-banner__text .elementor-widget-container::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin: 16px auto 0;
	background: rgba(255, 255, 255, .45);
	border-radius: 2px;
}
/* Button on the red banner: compact white pill that pops off the red — not a
   full-width bar. */
.inv-banner--alt .inv-btn .elementor-button {
	display: inline-block;
	width: auto;
	background: #fff;
	color: var(--inv-accent);
	padding: 11px 30px;
	font-size: 14px;
}
.inv-banner--alt .inv-btn .elementor-button:hover {
	background: #fff;
	filter: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .4);
}
/* Don't let the button widget stretch full width. */
.inv-banner--alt .inv-btn,
.inv-banner--alt .inv-btn .elementor-widget-container,
.inv-banner--alt .inv-btn .elementor-button-wrapper {
	text-align: center;
}

/* --- CTA button widget (.inv-btn on the button widget) --- */
.inv-btn .elementor-button {
	background: var(--inv-accent);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-radius: 40px;
	padding: 12px 26px;
}
.inv-btn .elementor-button:hover { filter: brightness(1.1); }

/* --- About box from a column wrapper (.inv-about__box on the column) --- */
.elementor-column.inv-about__box > .elementor-widget-wrap,
.elementor-column.inv-about__box > .elementor-element-populated {
	background: var(--inv-surface-2);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--inv-radius);
	padding: 32px 36px;
}
.inv-about__text .elementor-widget-container {
	font-size: 15px;
	line-height: 1.7;
	color: var(--inv-muted);
	max-width: 820px;
}

/* --- Heading widget (.inv-heading) accent underline --- */
.elementor-widget.inv-heading .elementor-heading-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 8px;
}
.elementor-widget.inv-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--inv-accent);
	border-radius: 2px;
}

/* =============================================================================
 * MOBILE — full-page pass for the Elementor homepage (< 768px and < 520px).
 *
 * Elementor's own column stacking handles a lot, but the tiles, promo banner,
 * service cards and product shortcode grids need explicit help so nothing is
 * cramped, overlapping, or overflowing on a phone.
 * ========================================================================= */
@media (max-width: 768px) {
	/* Category tiles: keep a readable min-height when stacked/2-up. */
	.elementor-widget.inv-tile,
	.inv-tile.elementor-widget-image-box {
		min-height: 150px;
	}
	.inv-tile .elementor-image-box-title { font-size: 16px; }

	/* Promo banner: tighter padding, no forced min-height. */
	.elementor-column.inv-banner--alt > .elementor-widget-wrap,
	.elementor-column.inv-banner--alt > .elementor-element-populated {
		padding: 26px 18px;
	}
	.inv-banner .inv-banner__title .elementor-heading-title,
	.inv-banner .inv-banner__title { font-size: 22px; }

	/* Service cards: keep the icon+text row, comfortable tap size. */
	.elementor-widget.inv-service .elementor-icon-box-wrapper {
		padding: 16px 18px;
		gap: 14px;
	}
	.inv-service .elementor-icon-box-icon { width: 46px; height: 46px; }

	/* Product shortcode grids: 2 per row on tablet/large phone. */
	.inv-products ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	.inv-products ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}
}

@media (max-width: 520px) {
	/* Single-column tiles on small phones. */
	.elementor-widget.inv-tile,
	.inv-tile.elementor-widget-image-box {
		min-height: 130px;
	}

	/* Promo title/description scale down a touch more. */
	.inv-banner .inv-banner__title .elementor-heading-title,
	.inv-banner .inv-banner__title { font-size: 20px; }
	.inv-banner .inv-banner__text,
	.inv-banner .inv-banner__text .elementor-widget-container { font-size: 14px; }
	.inv-banner--alt .inv-btn .elementor-button { padding: 10px 24px; font-size: 13px; }

	/* Products: 2 per row still, but tighter gap so cards aren't squeezed. */
	.inv-products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	/* Section heading underline shrinks. */
	.elementor-widget.inv-heading .elementor-heading-title { font-size: 20px; }
}

/* =============================================================================
 * FINAL OVERRIDES — image tiles, clean section headings, tidy promo button.
 * Placed last so they win over the earlier rules by source order.
 * ========================================================================= */

/* --- 1) CATEGORY TILES: ready for a background photo ---------------------
 * The tiles are Elementor COLUMNS with a gradient background. When you add a
 * photo via the column's Style → Background → Image, we lay a dark scrim on
 * top so the white label stays readable over any picture. The gradient stays
 * as the fallback for tiles with no photo yet. */
.elementor-column.inv-tile {
	position: relative;
	overflow: hidden;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.elementor-column.inv-tile > .elementor-element-populated,
.elementor-column.inv-tile > .elementor-widget-wrap {
	position: relative;
	z-index: 2;                 /* label sits above the scrim */
}
/* Dark scrim over the whole tile (covers both gradient and photo) so the text
   reads on any background. */
.elementor-column.inv-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
	transition: background .25s ease;
	pointer-events: none;
}
.elementor-column.inv-tile:hover::after {
	background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%);
}
/* Lift + red border on hover for a premium feel. */
.elementor-column.inv-tile {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.elementor-column.inv-tile:hover {
	transform: translateY(-4px);
	border-color: var(--inv-accent) !important;
	box-shadow: 0 16px 34px -14px rgba(0,0,0,.6);
}

/* --- 2) SECTION HEADINGS: no box behind them -----------------------------
 * Strip any background/border/shadow that Elementor or an earlier rule put
 * behind the section titles ("КАТЕГОРИИ", "НОВИ ПРОДУКТИ", "ЗА INVICTUS"…).
 * Keep only the text + the red accent underline. */
.elementor-widget.inv-heading,
.elementor-widget.inv-heading .elementor-widget-container,
.elementor-widget.inv-heading .elementor-heading-title {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* The about box is the ONE section that intentionally keeps a card — leave it,
   but its inner heading still has no box. */
.inv-about__box .elementor-widget.inv-heading .elementor-heading-title {
	background: none !important;
}

/* --- 3) PROMO BUTTON: never full-width ----------------------------------
 * In the promo banner the white "ВИЖ ВСИЧКИ ПРОМОЦИИ" button was stretching
 * edge-to-edge. Force it to hug its text and centre. */
.inv-banner--alt .inv-btn .elementor-button-wrapper {
	display: flex;
	justify-content: center;
}
.inv-banner--alt .inv-btn .elementor-button {
	display: inline-block !important;
	width: auto !important;
	max-width: max-content;
}

/* =============================================================================
 * PROMO — remove the red box, keep only text (live layout).
 *
 * The live promo section is an Elementor flex CONTAINER (id 6066e05) whose red
 * gradient is set in the container's own settings and injected by Elementor as
 * inline CSS keyed on `.elementor-element-6066e05`. Our earlier `.inv-banner--alt`
 * rules never matched because that class is not on the live page. We now target
 * the real container id, strip its gradient, and restyle the heading / text /
 * button that live inside it:
 *   - dark title with a short red underline
 *   - grey description below
 *   - discreet red pill button ("ВИЖ ВСИЧКИ ПРОМОЦИИ")
 *
 * NOTE: 6066e05 is the current live id. If the section is rebuilt in Elementor
 * the id changes — re-check with the browser/curl and update it here.
 * ========================================================================= */
body .elementor-23245 .elementor-element.elementor-element-6066e05,
body .elementor-23245 .elementor-element.elementor-element-6066e05 > .elementor-background-overlay {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	padding: 24px 0 !important;
	align-items: center !important;
	text-align: center !important;
}
/* Title: dark, centered, with the red accent underline (like section headings). */
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-widget-heading .elementor-heading-title {
	color: var(--inv-text, #1c1c1e) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 12px !important;
	text-align: center !important;
	text-shadow: none !important;
}
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 50% !important;
	transform: translateX(-50%);
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--inv-accent, #d4272e);
	border-radius: 2px;
}
/* Description: plain grey text, centered under the title. */
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-widget-text-editor,
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-widget-text-editor .elementor-widget-container {
	color: var(--inv-muted, #6b6b70) !important;
	font-size: 15px !important;
	line-height: 1.6;
	margin-bottom: 14px !important;
	text-align: center !important;
	text-shadow: none !important;
}
/* Button: single clean red pill, centered, hugs its text. */
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-button-wrapper {
	text-align: center !important;
	background: none !important;
}
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: max-content;
	margin: 0 auto !important;
	background: linear-gradient(135deg, #e23840 0%, #c31e24 55%, #a5151b 100%) !important;
	background-color: #c31e24 !important;
	color: #fff !important;
	fill: #fff !important;
	border: 0 !important;
	padding: 12px 30px !important;
	border-radius: 40px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	box-shadow: 0 12px 28px -12px rgba(212, 39, 46, .6), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-button-content-wrapper,
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-button-text {
	background: none !important;
	color: #fff !important;
}
body .elementor-23245 .elementor-element.elementor-element-6066e05 .elementor-button:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -14px rgba(212, 39, 46, .7), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* =============================================================================
 * SERVICE STRIP — remove the grey backdrop behind the white cards.
 *
 * On the live page the 3 service icon-boxes sit inside Elementor flex
 * containers (parent 2ee9b27 → child 3586459) that carry a grey background,
 * so we saw a grey box AROUND each white card ("double box"). Strip the grey
 * off those containers so only the white bordered cards remain. Give the row a
 * little breathing space.
 *
 * NOTE: 2ee9b27 / 3586459 are the current live ids. If the section is rebuilt
 * in Elementor these change — re-check and update.
 * ========================================================================= */
body .elementor-23245 .elementor-element.elementor-element-2ee9b27,
body .elementor-23245 .elementor-element.elementor-element-2ee9b27 > .e-con-inner,
body .elementor-23245 .elementor-element.elementor-element-3586459 {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}
/* Even gaps between the three cards. */
body .elementor-23245 .elementor-element.elementor-element-3586459 {
	gap: 24px !important;
}
body .elementor-23245 .elementor-element.elementor-element-2ee9b27 {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* =============================================================================
 * CENTER THE SECTION HEADINGS (ПРОМОЦИИ, НОВИ ПРОДУКТИ, КАТЕГОРИИ,
 * НАЙ-ПРОДАВАНИ, ...). They ship left-aligned; center the title, the text and
 * the accent underline so each section reads as a centered block.
 * ========================================================================= */
body .elementor-23245 .elementor-widget.inv-heading,
body .elementor-23245 .elementor-widget.inv-heading .elementor-widget-container,
body .elementor-23245 .elementor-element.elementor-element-eda939d.elementor-widget-heading,
body .elementor-23245 .elementor-element.elementor-element-eda939d .elementor-widget-container {
	text-align: center !important;
}
body .elementor-23245 .elementor-widget.inv-heading .elementor-heading-title,
body .elementor-23245 .elementor-element.elementor-element-eda939d .elementor-heading-title {
	text-align: center !important;
	display: inline-block;
	left: auto;
}
/* Center the accent underline under a centered title. */
body .elementor-23245 .elementor-widget.inv-heading .elementor-heading-title::after,
body .elementor-23245 .elementor-element.elementor-element-eda939d .elementor-heading-title::after {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

/* =============================================================================
 * TILE ATMOSPHERE — subtle animated effects on the 4 top category tiles.
 *
 *   НАРГИЛЕТА (4a51b02) → drifting smoke
 *   HMD       (0cb857e) → heat shimmer / rising haze
 *   ВЪГЛЕНИ   (2720f7d) → ember glow (pulsing warm light)
 *   ТЮТЮНИ    (c1bd451) → soft drifting smoke
 *
 * Pure CSS: an ::before layer sits above the gradient, below the text, with
 * pointer-events:none so links still work. Kept subtle so text stays legible.
 * `prefers-reduced-motion` disables the animation for accessibility.
 *
 * NOTE: 4a51b02 / 0cb857e / 2720f7d / c1bd451 are the current live tile ids.
 * If a tile is rebuilt in Elementor its id changes — re-check and update.
 * ========================================================================= */
.elementor-element-4a51b02,
.elementor-element-0cb857e,
.elementor-element-2720f7d,
.elementor-element-c1bd451 {
	position: relative;
	overflow: hidden !important;   /* clip the effect layer to the tile */
}
/* keep the heading above the effect layer */
.elementor-element-4a51b02 > .elementor-element,
.elementor-element-0cb857e > .elementor-element,
.elementor-element-2720f7d > .elementor-element,
.elementor-element-c1bd451 > .elementor-element {
	position: relative;
	z-index: 2;
}

/* --- Smoke: soft translucent haze drifting upward (Наргилета, Тютюни).
       Kept subtle and fully inside the tile so text stays crisp. --- */
.elementor-element-4a51b02::before,
.elementor-element-c1bd451::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 30% 85%, rgba(255,255,255,.12), transparent 42%),
		radial-gradient(circle at 70% 92%, rgba(255,255,255,.08), transparent 38%);
	background-repeat: no-repeat;
	filter: blur(8px);
	opacity: .4;
	animation: inv-smoke 9s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}
.elementor-element-c1bd451::before {
	animation-duration: 11s;
	animation-delay: -3s;
	opacity: .32;
}
@keyframes inv-smoke {
	0%   { transform: translate3d(-2%, 4%, 0) scale(1);    opacity: .22; }
	50%  { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: .42; }
	100% { transform: translate3d(-1%, -5%, 0) scale(1.1); opacity: .2; }
}

/* --- Ember glow: warm pulsing light rising from the bottom (Въглени) --- */
.elementor-element-2720f7d::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 115%, rgba(255,120,40,.38), rgba(255,60,0,.1) 40%, transparent 62%),
		radial-gradient(60% 50% at 30% 110%, rgba(255,170,60,.22), transparent 55%),
		radial-gradient(60% 50% at 72% 108%, rgba(255,90,20,.26), transparent 55%);
	background-repeat: no-repeat;
	filter: blur(6px);
	animation: inv-ember 3.4s ease-in-out infinite;
	mix-blend-mode: screen;
}
/* a few flickering sparks over the coals */
.elementor-element-2720f7d::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(2px 2px at 40% 82%, rgba(255,200,120,.9), transparent 60%),
		radial-gradient(2px 2px at 62% 88%, rgba(255,170,90,.85), transparent 60%),
		radial-gradient(1.5px 1.5px at 52% 78%, rgba(255,220,150,.8), transparent 60%);
	animation: inv-sparks 2.2s steps(1) infinite;
}
@keyframes inv-ember {
	0%,100% { opacity: .5; filter: blur(6px); }
	50%     { opacity: .9; filter: blur(9px); }
}
@keyframes inv-sparks {
	0%   { opacity: 0; transform: translateY(0); }
	20%  { opacity: 1; }
	60%  { opacity: .4; }
	100% { opacity: 0; transform: translateY(-14px); }
}

/* --- Heat shimmer / rising haze (HMD) --- */
.elementor-element-0cb857e::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(90% 60% at 50% 110%, rgba(255,140,60,.28), transparent 60%),
		repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 6px, transparent 6px 14px);
	filter: blur(3px);
	animation: inv-heat 4s ease-in-out infinite;
	mix-blend-mode: screen;
}
@keyframes inv-heat {
	0%,100% { opacity: .4; transform: translateY(0) scaleY(1); }
	50%     { opacity: .7; transform: translateY(-6px) scaleY(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-4a51b02::before,
	.elementor-element-0cb857e::before,
	.elementor-element-2720f7d::before,
	.elementor-element-2720f7d::after,
	.elementor-element-c1bd451::before {
		animation: none !important;
	}
}

/* =============================================================================
 * CATEGORY TILES — same drifting-smoke atmosphere as the top tiles.
 *   АКСЕСОАРИ 817d428 · ВАЗИ c2aeac7 · МАРКУЧИ 094705f
 *   ЧАШКИ 0c3f8b0 · ТЮТЮНИ 22d2fb2 · КОТЛОНИ 87c3f84
 * Котлони (burners) gets the warm ember glow instead of smoke.
 * ========================================================================= */
.elementor-element-817d428,
.elementor-element-c2aeac7,
.elementor-element-094705f,
.elementor-element-0c3f8b0,
.elementor-element-22d2fb2,
.elementor-element-87c3f84 {
	position: relative;
	overflow: hidden;
}
.elementor-element-817d428 > .elementor-element,
.elementor-element-c2aeac7 > .elementor-element,
.elementor-element-094705f > .elementor-element,
.elementor-element-0c3f8b0 > .elementor-element,
.elementor-element-22d2fb2 > .elementor-element,
.elementor-element-87c3f84 > .elementor-element {
	position: relative;
	z-index: 2;
}
/* Smoke on 5 of them (varied timing so they don't move in lockstep). */
.elementor-element-817d428::before,
.elementor-element-c2aeac7::before,
.elementor-element-094705f::before,
.elementor-element-0c3f8b0::before,
.elementor-element-22d2fb2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 30% 85%, rgba(255,255,255,.10), transparent 42%),
		radial-gradient(circle at 70% 92%, rgba(255,255,255,.07), transparent 38%);
	background-repeat: no-repeat;
	filter: blur(8px);
	opacity: .38;
	animation: inv-smoke 10s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}
.elementor-element-c2aeac7::before { animation-duration: 12s; animation-delay: -2s; }
.elementor-element-094705f::before { animation-duration: 9s;  animation-delay: -5s; }
.elementor-element-0c3f8b0::before { animation-duration: 13s; animation-delay: -1s; }
.elementor-element-22d2fb2::before { animation-duration: 11s; animation-delay: -6s; }
/* Котлони (burners) → warm ember glow rising from the bottom. */
.elementor-element-87c3f84::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 115%, rgba(255,120,40,.5), rgba(255,60,0,.12) 40%, transparent 65%),
		radial-gradient(60% 50% at 30% 110%, rgba(255,170,60,.3), transparent 55%);
	filter: blur(6px);
	animation: inv-ember 3.6s ease-in-out infinite;
	mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
	.elementor-element-817d428::before,
	.elementor-element-c2aeac7::before,
	.elementor-element-094705f::before,
	.elementor-element-0c3f8b0::before,
	.elementor-element-22d2fb2::before,
	.elementor-element-87c3f84::before {
		animation: none !important;
	}
}

/* =============================================================================
 * PROMO BUTTON ("Виж всички промоции", id 821c64c).
 *
 * IMPORTANT: Elementor writes its own page CSS (post-23245.css) that loads
 * AFTER this file and forces `background:#fff; color:#d4272e; radius:4px` on
 * `.elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button`
 * (that white bg on a red-ish setting = the "double red" the user saw, and it
 * stayed left/small). To WIN we must out-specify that selector, so we prefix
 * with `body.elementor-page .elementor-23245` and keep `.elementor-element`.
 * ========================================================================= */
body .elementor-23245 .elementor-element.elementor-element-821c64c {
	text-align: center !important;
}
body .elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button-wrapper {
	text-align: center !important;
	background: none !important;
}
body .elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: max-content;
	margin: 0 auto !important;
	background: linear-gradient(135deg, #e23840 0%, #c31e24 55%, #a5151b 100%) !important;
	background-color: #c31e24 !important;
	color: #fff !important;
	fill: #fff !important;
	border: 0 !important;
	border-radius: 40px !important;
	padding: 14px 34px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	box-shadow: 0 12px 28px -12px rgba(212, 39, 46, .6), inset 0 1px 0 rgba(255,255,255,.18) !important;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button-content-wrapper,
body .elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button-text {
	background: none !important;
	color: #fff !important;
}
body .elementor-23245 .elementor-element.elementor-element-821c64c .elementor-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 18px 36px -14px rgba(212, 39, 46, .7), inset 0 1px 0 rgba(255,255,255,.25) !important;
}