:root {
	/* Colors */

	--kt-primary: 127, 140, 170;
	/*
	--kt-blue: 0, 123, 255;
	--kt-green: 40, 167, 69;
	--kt-red: 220, 53, 69;
	--kt-orange: 255, 159, 64;
	--kt-yellow: 255, 193, 7;
	--kt-secondary: 108, 117, 125;
	--kt-gray: 0, 0, 0;
	--kt-dark: 33, 37, 41;
	--kt-light: 248, 249, 250;
	--kt-gray-100: 248, 249, 250;
	--kt-gray-200: 233, 236, 239;
	--kt-gray-300: 222, 226, 230;
	--kt-gray-400: 206, 212, 218;
	--kt-gray-500: 173, 181, 189;
	--kt-gray-600: 108, 117, 125;
	--kt-gray-700: 73, 80, 87;
	--kt-gray-800: 52, 58, 64;
	--kt-gray-900: 33, 37, 41;
	--kt-border-color: var(--kt-gray-300);
	--kt-special-offers-bg: rgb(56, 51, 225);

	--kt-primary-dark: 10, 80, 190;
	--kt-red-dark: 180, 40, 55;
	--kt-green-dark: 30, 130, 60;
	--kt-blue-dark: 0, 100, 210;
	--kt-yellow-dark: 204, 155, 5;
	--kt-orange-dark: 204, 127, 51;
	*/
	/* Buttons */

	--kt-primary-btn-bg: rgb(127, 140, 170);     
	--kt-primary-btn-hover-bg: rgb(51, 52, 70);

	/*
	--kt-primary-light-btn-color: rgb(9, 76, 174);
	--kt-primary-light-btn-bg: rgb(13, 110, 253, 0.2);
	--kt-primary-light-btn-hover-color: rgb(7, 60, 138);
	--kt-primary-light-btn-hover-bg: rgb(13, 110, 253, 0.2);

	--kt-green-btn-bg: rgb(40, 167, 69);
	--kt-green-btn-hover-bg: rgb(28, 120, 50);

	--kt-green-light-btn-color: rgb(20, 83, 34);
	--kt-green-light-btn-bg: rgb(40, 167, 69, 0.18);
	--kt-green-light-btn-hover-color: rgb(15, 60, 25);
	--kt-green-light-btn-hover-bg: rgb(40, 167, 69, 0.23);

	--kt-blue-btn-bg: rgb(0, 123, 255);
	--kt-blue-btn-hover-bg: rgb(0, 82, 170);

	--kt-blue-light-btn-color: rgb(0, 75, 158);
	--kt-blue-light-btn-bg: rgb(0, 123, 255, 0.16);
	--kt-blue-light-btn-hover-color: rgb(0, 60, 127);
	--kt-blue-light-btn-hover-bg: rgb(0, 123, 255, 0.2);

	--kt-red-btn-bg: rgb(220, 53, 69);
	--kt-red-btn-hover-bg: rgb(176, 40, 56);

	--kt-red-light-btn-color: rgb(130, 32, 42);
	--kt-red-light-btn-bg: rgb(220, 53, 69, 0.16);
	--kt-red-light-btn-hover-color: rgb(100, 25, 33);
	--kt-red-light-btn-hover-bg: rgb(220, 53, 69, 0.16);

	--kt-light-btn-color: rgb(33, 37, 41);
	--kt-light-btn-bg: rgb(248, 249, 250);
	--kt-light-btn-hover-color: rgb(33, 37, 41);
	--kt-light-btn-hover-bg: rgb(238, 239, 240);

	--kt-gray-btn-bg: rgb(248, 249, 250);
	--kt-gray-btn-hover-bg: rgb(222, 226, 230);
	*/
	/* Badges 

	--kt-primary-badge-color: rgb(7, 55, 127);
	--kt-primary-badge-bg: rgb(204, 224, 255);

	--kt-red-badge-color: rgb(110, 26, 34);
	--kt-red-badge-bg: rgb(255, 210, 215);

	--kt-blue-badge-color: rgb(0, 61, 127);
	--kt-blue-badge-bg: rgb(204, 228, 255);

	--kt-green-badge-color: rgb(20, 83, 34);
	--kt-green-badge-bg: rgb(210, 245, 225);
	*/
	/* Alerts 
	--kt-green-alert-color: rgb(20, 83, 34);
	--kt-green-alert-bg: rgb(223, 250, 235);

	--kt-blue-alert-color: rgb(0, 61, 127);
	--kt-blue-alert-bg: rgb(219, 239, 255);

	--kt-orange-alert-color: rgb(130, 90, 30);
	--kt-orange-alert-bg: rgb(255, 235, 210);

	--kt-red-alert-color: rgb(110, 26, 34);
	--kt-red-alert-bg: rgb(255, 220, 224);
	*/
}

.special-offers {
	background-color: #7F8CAA;
}

.special-offers .swiper-outer:after {
	content: "";
	position: absolute;
	left: 0;
	z-index: 4;
	display: none;
	width: 2px;
	background-color: #7F8CAA;
}

/*
.special-offers-abstract:after {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
--tw-gradient-from: #7965C1 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
--tw-gradient-from-position: 0%;
--tw-gradient-to-position: 100%;
}
.special-offers .swiper-outer:after {
content: "";
position: absolute;
left: 0;
z-index: 4;
display: none;
width: 2px;
background-color: #7965C1;
}
*/


.floating-btn {
	width: 52px;
	height: 52px;
	background-color: #444;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	animation: pulse 2s infinite;
	transition: transform 0.3s ease;
}

.floating-btn:hover {
	transform: scale(1.1);
}

.floating-btn.whatsapp {
	background-color: #25D366;
}
.floating-btn.phone {
	background-color: #7F8CAA;
}

.tooltip-wrapper {
	position: relative;
}

.tooltip { 
	border-radius : 8px;
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background:#fff;
	color: #000;
	padding: 6px 10px;
	font-size: 13px;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tooltip-wrapper:hover .tooltip {
	opacity: 1;
}

/* Pulse animation */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


/*
.backdrop-popup {
position: fixed;
inset: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
opacity: 1;
transition: opacity 0.325s cubic-bezier(0.44, 0, 0.1, 1);
display: none;
align-items: center;
justify-content: center;
}

.content-popup {
max-width : 620px;
padding: 20px;
}

@media (max-width: 600px) { .content-popup {
max-width : 400px;
padding: 20px;
} }
*/


<!---------------quantity input --------------->

.qty-widget {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding: 8px 10px;
	background: #f7f8fc;
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06);
	direction: rtl;
	margin: 16px;
}

.qty-badge {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
}

.qty-container {
	margin: 16px 0;
	display: flex;
	justify-content: space-evenly;
}
/* Buttons */
.qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
	user-select: none;
	border: 1px solid rgba(17,17,17,0.06);
	background: #ffffff;
	color: #111;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
	cursor: pointer;
}
.qty-btn:hover { box-shadow: 0 4px 10px rgba(17,17,17,0.1); }
.qty-btn:active { transform: translateY(1px) scale(0.98); }

/* Angular visibility helper */
.ng-hide { display: none !important; }

/* Input */
.qty-input {
	width: 74px;
	height: 36px;
	border: 1px solid rgba(17,17,17,0.08);
	background: #fff;
	border-radius: 10px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: #111;
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.qty-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15);
}
/* Remove number input spinners */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input { -moz-appearance: textfield; }

/* Responsive */
@media (max-width: 480px) {
	.qty-widget { gap: 6px; padding: 6px 8px; }
	.qty-btn { width: 34px; height: 34px; font-size: 18px; }
	.qty-input { width: 64px; height: 34px; font-size: 14px; }
	.qty-badge { font-size: 13px; padding: 5px 10px; }
}