/* CSS змінні визначені в index.php в тезі <style> */

		body {
			background-color: var(--bg-page);
			color: var(--header-text-primary);
			font-family: 'Montserrat', sans-serif;
			overflow-x: hidden;
			-webkit-tap-highlight-color: transparent;
		}

		.bg-block {
			background-color: var(--header-bg);
		}

		.btn-pulse {
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% {
				box-shadow: 0 0 0 0 var(--btn-order-pulse);
			}

			70% {
				box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
			}

			100% {
				box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
			}
		}

		.tg-pulse {
			animation: tg-pulse 2s infinite;
		}

		@keyframes tg-pulse {
			0% {
				box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.7);
			}

			70% {
				box-shadow: 0 0 0 15px rgba(34, 158, 217, 0);
			}
		}

		.vb-pulse {
			animation: vb-pulse 2s infinite;
		}

		@keyframes vb-pulse {
			0% {
				box-shadow: 0 0 0 0 rgba(115, 96, 242, 0.7);
			}

			70% {
				box-shadow: 0 0 0 15px rgba(115, 96, 242, 0);
			}
		}

		input[type="text"],
		input[type="tel"] {
			background: var(--input-bg);
			border: 1px solid var(--input-border);
			color: var(--input-text);
			transition: 0.3s;
			font-size: 16px;
		}

		input:focus {
			border-color: var(--input-focus-border);
			outline: none;
			box-shadow: var(--input-focus-shadow);
		}

		.accordion-content {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out;
		}

		.accordion-header.active i {
			transform: rotate(180deg);
		}

		.hero-slide-item {
			width: 100%;
			position: relative;
		}

		.hero-slide-item img {
			width: 100% !important;
			height: auto !important;
			display: block;
			object-fit: contain;
			background: #0b0b0f;
		}

		.owl-carousel .owl-stage {
			display: flex;
			align-items: flex-start;
		}

		.review-page {
			display: none;
			animation: fadeIn 0.4s ease-out;
		}

		.review-page.active {
			display: block;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateX(10px);
			}

			to {
				opacity: 1;
				transform: translateX(0);
			}
		}

		.dots {
			display: flex;
			justify-content: center;
			gap: 8px;
			margin-top: 20px;
		}

		.dot {
			width: 8px;
			height: 8px;
			background-color: var(--review-dot-inactive);
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.3s;
		}

		.dot.active {
			background-color: var(--review-dot-active);
			width: 24px;
			border-radius: 4px;
		}

		.review-thumb {
			width: 60px;
			height: 60px;
			object-fit: cover;
			border-radius: 8px;
			border: 1px solid var(--review-card-thumb-border);
			cursor: zoom-in;
			transition: 0.2s;
		}

		#imageModal {
			display: none;
			position: fixed;
			z-index: 9999;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--modal-bg);
			justify-content: center;
			align-items: center;
			padding: 20px;
		}

		#imageModal.show {
			opacity: 1;
		}

		#modalImg {
			width: auto;
			max-width: 100%;
			max-height: 70vh;
			border-radius: 12px;
			object-fit: contain;
		}

		.close-modal {
			position: absolute;
			top: 20px;
			right: 20px;
			color: var(--modal-close-text);
			font-size: 30px;
			cursor: pointer;
			background: var(--modal-close-bg);
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.notification-toast {
			position: fixed;
			top: 20px;
			right: 20px;
			background: var(--notify-bg);
			border-left: 4px solid var(--notify-border);
			padding: 12px 16px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			gap: 12px;
			box-shadow: var(--notify-shadow);
			z-index: 9990;
			transform: translateX(150%);
			transition: transform 0.5s;
			backdrop-filter: blur(6px);
			max-width: 92%;
		}

		.notification-toast.active {
			transform: translateX(0);
		}

		.notification-image {
			width: 40px;
			height: 40px;
			background: var(--notify-icon-bg);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--notify-icon-color);
			font-size: 18px;
			border: 1px solid var(--notify-icon-border);
		}

		@media(max-width: 640px) {
			.notification-toast {
				top: auto;
				bottom: 20px;
				right: 50%;
				transform: translateX(50%) translateY(150%);
				width: 92%;
			}

			.notification-toast.active {
				transform: translateX(50%) translateY(0);
			}
		}

		.variant-pill {
			padding: 0.5rem 1rem;
			border: 1px solid var(--btn-variant-border);
			border-radius: 0.75rem;
			background: var(--btn-variant-bg);
			color: var(--btn-variant-text);
			font-size: 1rem;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 0.025em;
		}

		.variant-pill.active {
			border-color: var(--btn-variant-active-border);
			box-shadow: 0 0 0 2px var(--btn-variant-active-shadow) inset;
		}

		/* Upsale (Допродажі) стилі */
		.upsale-item {
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.upsale-item img{
			width: 65px;
			height: 65px;
			margin-top: -5px;
			object-fit: cover;
		}

		.upsale-item:active {
			transform: scale(0.98);
		}

		.upsale-item.upsale-active {
			border-color: var(--solution-info-icon-check) !important;
		}

		.upsale-status {
			transition: opacity 0.3s ease, visibility 0.3s ease;
		}

		.upsale-status.invisible {
			opacity: 0;
			visibility: hidden;
		}

		.upsale-status.visible {
			opacity: 1;
			visibility: visible;
		}

		/* Toggle Switch для допродажів */
		.toggle-switch {
			position: relative;
			display: inline-block;
			width: 48px;
			height: 24px;
		}

		.toggle-switch input {
			opacity: 0;
			width: 0;
			height: 0;
			position: absolute;
		}

		.toggle-slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: var(--input-bg);
			transition: 0.3s;
			border-radius: 24px;
			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
		}

		.toggle-slider:before {
			position: absolute;
			content: "";
			height: 18px;
			width: 18px;
			left: 3px;
			bottom: 3px;
			background-color: white;
			transition: 0.3s;
			border-radius: 50%;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		}

		.upsale-checkbox:checked + .toggle-slider {
			background-color: var(--solution-info-icon-check);
		}

		.upsale-checkbox:checked + .toggle-slider:before {
			transform: translateX(24px);
		}

		.toggle-switch:hover .toggle-slider {
			opacity: 0.9;
		}
		.text-base{
			width: 100%;
		}