/* ===== FONT IMPORTS ===== */
 @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Tourney:wdth,wght@92.4,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

 /* ===== RESET AND BASE STYLES ===== */
 * {
   margin: 0;
   text-decoration: none !important;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   font-family: 'Space Grotesk', sans-serif;
 }

 body {
   background: transparent;
   min-height: 100vh;
   transition: all 0s ease-in-out;
   padding-top: 75px;
 }

 /* ===== NAVIGATION ===== */
 nav {
   margin: 0;
 }

 .carousel {
   position: relative;
 }

 address {
   font-style: normal;
   line-height: 2;
   font-size: 15px;
   color: #444;
   position: relative;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
   top: -55px;
 }

 .navbar-container {
   display: flex;
   align-items: center;
   background-color: rgba(211, 216, 222, 0.3);
   backdrop-filter: blur(20px);
   padding: 25px 30px;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   gap: 3px;
   z-index: 1000;
   height: 63px;
 }

 .navbar-logo {
   height: 40px;
   width: auto;
   justify-self: flex-start;
   margin-right: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #666;
   font-size: 12px;
   min-width: 40px;
 }

 .navbar-logo img:hover {
   scale: 1.05;
   transition: all 0.3s ease-in-out;
   filter: drop-shadow(0px 0px 6px #fff);
 }

 /* Desktop Menu */
 .navbar {
   display: contents !important;
   list-style: none;
   margin-left: auto;
 }

 .navbar li {
   position: relative;
   margin: 0;
 }

 .navbar a {
   display: flex;
   color: #333;
   text-decoration: none;
   padding: 12px 20px;
   border-radius: 50px;
   font-family: 'rubik';
   background-color: rgba(255, 255, 255, 0.8);
   transition: background 0.3s, color 0.3s;
   font-weight: bold;
   text-align: center;
 }

 .navbar a:hover {
   background-color: rgba(255, 255, 255, 1);
   color: #2c3e50;
 }

 .dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   background-color: rgba(255, 255, 255, 0.95);
   min-width: 130px;
   border-radius: 15px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: all 0.3s ease;
   z-index: 100;
   list-style: none;
   padding: 5px 0;
 }



 .dropdown li {
   margin: 0;
 }

 .dropdown a {
   padding: 8px 8px;
   font-size: 14px;
   color: #333;
   background-color: transparent;
   border-radius: 0;
   text-align: left;
 }

 .dropdown a:hover {
   background-color: rgba(173, 184, 203, 0.38);
   color: #2c3e50;
   border-radius: 50px;
 }

 li:hover>.dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .btn {
   border-radius: 20px;
 }

 /* Hamburger Icon */
 .hamburger:hover {
   color: #007bff;
 }

 .hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
   font-size: 35px;
   margin-left: auto;
   padding: 3px;
 }

 /* Cart Icon Styling */
 .cart-icon-container {
   position: relative;
   background: transparent;
   border: 1px solid #494949;
   padding: 12px 12px 10px 5px;
   margin: 3px -1px 3px 5px;
   align-self: center;
   border-radius: 849px;
 }

 .cart-icon-container:hover {
   background: white;
   color: #000;
   border-color: #dff9ff;
   box-shadow: 0px 0px 10px whitesmoke;
   transition: all 0.3s ease-in-out;

   .cart-link {
     color: #000;
   }
 }

 .cart-icon-cont-0 {
   display: none;
 }

 .cart-link {
   position: relative;
   color: #333;
   font-size: 20px;
   text-decoration: none;
   transition: color 0.3s ease;
   display: flex;
   align-items: center;
   cursor: pointer;
 }

 .cart-link:hover {
   color: #007bff;
 }

 .cart-count {
   position: absolute;
   top: -8px;
   right: -8px;
   background-color: #ff4500;
   color: white;
   font-size: 10px;
   font-weight: bold;
   border-radius: 5px;
   padding: 2px 5px;
   min-width: 18px;
   text-align: center;
   line-height: 1.2;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, background-color 0.3s ease;
 }

 .cart-count.update-animation {
   transform: scale(1.3);
   background-color: #e52d2d;
 }

 .container h2 {
   text-align: center;
 }

 /* Mobile Menu Structure - New */
 .mobile-menu {
   position: fixed;
   top: 0;
   right: -100%;
   height: 100vh;
   width: 285px !important;
   background-color: rgba(255, 255, 255, 0.8);
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   padding: 20px;
   transition: right 0.3s ease;
 }


 .mobile-menu::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(10px);
   z-index: -1;
 }

 .mobile-menu>* {
   position: relative;
 }

 .mobile-menu.active {
   right: 0;
 }

 .mobile-menu ul {
   list-style: none;
   flex-grow: 1;
 }

 .mobile-menu li {
   margin-bottom: 10px;
 }

 .mobile-menu a {
   display: block;
   color: #333;
   text-decoration: none;
   padding: 12px 15px;
   border-radius: 20px;
   background: #ffffff;
   border: 1px solid #e2e8f0;
   transition: background 0.3s;
   font-weight: bold;
 }

 .mobile-menu a:hover {
   scale: 1.02;
   transition: all 0.5s cubic-bezier(0.07, 0.46, 0.45, 0.68);
   background-color: #e0e0e0;
 }

 .mobile-dropdown {
   display: none;
   list-style: none;
   padding-left: 15px;
   margin-top: 5px;
 }

 .mobile-dropdown.active {
   display: block;
 }

 .mobile-dropdown a {
   font-weight: normal;
   padding: 8px 15px;
   background-color: rgba(230, 230, 230, 0.8);
   font-size: 14px;
 }

 .mobile-menu .close-btn {
   align-self: flex-end;
   border: 1px solid transparent;
   font-size: 24px;
   background: none;
   padding: 10px 20px;
   cursor: pointer;
   color: #333;
   transition: all 0.9s cubic-bezier(0.07, 0.46, 0.45, 0.68);
   margin-bottom: 6px;
   border-radius: 50px;
 }

 .mobile-menu .close-btn:hover {
   background: #ffffff;
   border: 1px solid #00000014;
   box-shadow: 0 0 0 2px white;
 }

 .mobile-dropdown-toggle {
   position: relative;
 }

 .toggle-icon {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-weight: bold;
 }


 .carousel-inner {
   position: relative;
   top: 20px;
 }

 /* ===== CUSTOM CART POPUP STYLES ===== */
 .cart-popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   backdrop-filter: blur(7px);
   background-color: rgb(32 32 32 / 50%);
   display: none;
   z-index: 1050;
   opacity: 0;
   transition: all 0.9s ease;
 }

 .cart-popup-overlay.active {
   display: block;
   opacity: 1;
   backdrop-filter: blur(7px);
 }

 .cart-popup {
   position: fixed;
   top: 0;
   bottom: 0;
   right: -400px;
   width: 400px;
   border-radius: 20px 0px 0px 20px;
   background-color: #fff;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   z-index: 100000000 !important;
   transition: right 0.3s ease;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
 }

 .cart-popup.active {
   right: 0;
 }

 /* Icon container with background images */
 .payment-icon {
   display: inline-block;
   width: 30px;
   height: 30px;
   margin-right: 10px;
   margin-bottom: 8px;
   vertical-align: middle;
   background: url('assets/tap-to-pay.png') no-repeat center/contain;
   transition: opacity 0.3s ease;
 }

 /* Hide icon when button is disabled */
 .checkout-btn:disabled .payment-icon {
   opacity: 0.7;
 }

 /* Show GIF ONLY on enabled buttons during hover */
 .checkout-btn:not(:disabled):hover .payment-icon {
   background-image: url('assets/tap-to-pay.gif');
   mix-blend-mode: multiply;
   scale: 1.7;
 }



 /* Enabled button states */
 .checkout-btn:enabled {
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(67, 97, 238, 0.35);
 }

 .checkout-btn:enabled:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(67, 97, 238, 0.45);
 }

 .checkout-btn:enabled:active {
   transform: translateY(0);
 }

 /* Disabled state styling */
 .checkout-btn:disabled {
   opacity: 0.75;
   cursor: not-allowed;
 }

 /* Preload GIF to prevent hover delay */
 body::after {
   content: url('assets/tap-to-pay.gif');
   mix-blend-mode: multiply;
   display: none;
 }

 .continue-btn i {
   display: inline-block;
   /* Critical for transforms */
   position: relative;
   left: 0;
   transition: transform 0.8s cubic-bezier(1, -1.46, 0, 1.23);
 }

 /* Arrow slide animation on hover */
 .continue-btn:hover i {
   transform: translateX(-4px);
 }

 .cart-header {
   padding: 5px 12px;
   background: linear-gradient(150deg, #0788ff, #17d5ff);
   color: white;
   display: flex;
   justify-content: space-between;
   align-items: center;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 100;
 }

 .cart-close {
   background: none;
   border: none;
   color: white;
   font-size: 24px;
   cursor: pointer;
   padding: 15px;
   transition: transform 0.2s;
 }

 .cart-close:hover {
   transform: scale(1.2);
 }

 .cart-empty {
   text-align: center;
   padding: 40px 20px;
   color: #6c757d;
 }

 .cart-items {
   padding: 20px;
   height: auto;
   flex: 1;
   overflow: auto;
   scrollbar-width: thin;
   box-sizing: border-box;
   min-height: 669px;
 }

 .cart-item {
   display: flex;
   padding: 15px 0;
   gap: 21px;
   border-bottom: 1px solid #eee;
   position: relative;
   align-items: center;
 }

 .cart-item-img {
   width: 100.5px;
   object-fit: contain;
   margin-right: -8px;
   max-height: 180px;
   border: 1px solid #ddd;
   border-radius: 10px;
   aspect-ratio: 1/1;
   padding: 3px;
   height: -webkit-fill-available;
   background: white;
 }

 .cart-item-details {
   flex-grow: 1;
   min-width: 0;
 }

 .cart-item-name {
   font-weight: 500;
   margin-bottom: 3px;
   overflow: hidden;
   font-size: medium;
 }

 .cart-item-price {
   font-family: 'tourney';
   font-size: 20px;
   color: #0da86e;
   font-weight: 900;
   margin-bottom: 8px;
 }

 .cart-item-quantity {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .quantity-btn {
   width: 46px;
   height: 38px;
   border: 1px solid #ced4da;
   background: #f8f9fa;
   border-radius: 11px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   transition: all 0.2s;
   user-select: none;
 }

 .quantity-btn:hover {
   background: #e9ecef;
   border-color: #adb5bd;
 }

 .quantity-input {
   width: 40px;
   text-align: center;
   border: 1px solid #ced4da;
   border-radius: 20px;
   padding: 3px 0;
   font-weight: 500;
 }

 .cart-remove {
   color: #dc3545;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 18px;
   padding: 74px 10px 74px 51px;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   transition: transform 0.2s, color 0.2s;
   opacity: 0.7;
 }

 .cart-remove:hover {
   transform: translateY(-50%) scale(1.2);
   color: #c82333;
   opacity: 1;
 }

 .cart-footer {
   padding: 10px;
   background-color: #f8f9fa;
   border-top: 1px solid #eee;
   display: flex;
   flex-direction: column;
   gap: 8px;
   position: sticky;
   bottom: 0;
 }

 .cart-total {
   display: flex;
   justify-content: space-between;
   font-size: 1.2em;
   font-family: 'tourney', sans-serif !important;
   font-weight: 900;
   padding-bottom: 10px;
   border-bottom: 2px solid #007bff;
 }


 h3 {
   font-size: 1.3rem !important;
   margin-bottom: 0px !important;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
 }

 .checkout-btn {
   background-color: #28a745;
   color: white;
   border: none;
   justify-content: center;
   padding: 12px;
   border-radius: 20px;
   font-weight: 600;
   transition: background-color 0.3s;
   width: 100%;
 }

 .checkout-btn:hover {
   background: linear-gradient(45deg, #0dff75, #05dcd5);
 }

 .checkout-btn:disabled {
   background-color: #adb5bd !important;
   cursor: not-allowed;
   transform: none;
 }

 .continue-btn {
   background-color: #6c757d;
   color: white;
   border: none;
   padding: 12px;
   border-radius: 20px;
   font-weight: 600;
   transition: background-color 0.3s;
   width: 100%;
 }

 .continue-btn:hover {
   background: linear-gradient(150deg, #0788ff, #17d5ff);
 }

 .cart-animation {
   animation: cartSlideIn 0.3s ease forwards;
 }

 @keyframes cartSlideIn {
   from {
     transform: translateX(20px);
     opacity: 0;
   }

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

 .item-removed {
   animation: fadeOut 0.5s forwards;
 }

 @keyframes fadeOut {
   to {
     opacity: 0;
     transform: translateX(20px);
   }
 }

 /* Mobile Cart Popup */
 @media (max-width: 768px) {
   .cart-popup {
     width: 100%;
     right: 100%;
     border-radius: 0px;
   }

   .cart-item {
     padding: 12px 0;
   }

   .cart-item-img {
     width: 50px;
     height: 50px;
   }

   .cart-item-name {
     font-size: 0.95rem;
   }

   .cart-item-price {
     font-size: 1.3rem;
   }
 }

 /* ===== RESPONSIVE STYLES ===== */
 @media (max-width: 992px) {
   .navbar {
     display: none !important;
   }

   .hamburger {
     display: flex;
   }

   .cart-count {
     display: none;
   }

   .cart-icon-container {
     display: flex;
     align-items: center;
     position: relative;
     z-index: 999;
     margin-left: 15px;
   }

   .cart-icon-cont-0 {
     display: block;
   }

   .navbar-container {
     justify-content: space-between;
     border-radius: 0px 0px 10px 10px;
     border: 1px solid #8282824d;
   }
 }

 /* ===== PRODUCT CARD STYLES ===== */
 .product-card {
   background-color: #e4e4e7 !important;
   border-radius: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .product-card:hover {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }

 .product-img {
   max-width: 100%;
   height: 150px;
   object-fit: contain;
   margin-bottom: 10px;
   padding: 10px;
 }

 .mt-2 {
   border-radius: 12px;
 }

 .product-title {
   font-weight: bold;
   margin-bottom: 5px;
   flex-grow: 1;
 }

 .product-desc {
   font-size: 0.9em;
   color: #6c757d;
   margin-bottom: 10px;
 }

 .product-price {
   font-family: 'tourney';
   font-size: 1.7em;
   color: #0da86e;
   font-weight: 900;
   margin-bottom: 15px;
 }

 /* Add to Cart Button Styles */
 .add-to-cart-btn {
   transition: all 0.3s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }

 .add-to-cart-btn.added {
   pointer-events: none;
   background-color: #00a425 !important;
   transform: scale(1.02);
   padding: 10px;
   color: white !important;
   border-radius: 30px;
   border: none !important;
   box-shadow: 0 0 20px rgba(0, 255, 136, 0.856);
   font-weight: bold;
 }

 .add-to-cart-btn.added i {
   margin-right: 5px;
 }

 /* ===== FOOTER STYLES ===== */
 .site-footer {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 15px 15px 0px 0px;
   padding: 40px 20px 20px;
   color: #333;
   font-family: Arial, sans-serif;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
   margin-top: 0px;
 }

 .footer-container {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 45px;
 }

 .footer-section h4 {
   font-size: 18px;
   margin-bottom: 16px;
   color: #2c3e50;
   font-weight: bold;
 }

 .footer-logo {
   font-size: 22px;
   font-weight: bold;
   color: #2c3e50;
   margin-bottom: 8px;
 }

 .footer-tagline {
   font-size: 14px;
   color: #666;
   line-height: 1.5;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
   margin-bottom: 16px;
 }

 .social-icons {
   display: flex;
   gap: 12px;
   margin-top: 10px;
 }

 .social-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background: rgba(240, 240, 240, 0.8);
   border-radius: 50%;
   text-decoration: none;
   color: #333;
   font-size: 25px;
   transition: all 0.25s ease;
 }

 .social-icons a:hover {
   background: #b9b9b9;
 }

 .footer-section ul li a {
   text-decoration: none;
   color: #444;
   font-size: 15px;
   position: relative;
   display: inline-block;
   padding-bottom: 4px;
   font-family: inherit;
   transition: color 0.2s ease;
 }

 .footer-section ul li a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background-color: #0099ff;
   border-radius: 2px;
   transition: width 0.3s ease;
 }

 .footer-section ul li a:hover {
   color: #0099ff;
 }

 .footer-section ul li a:hover::after {
   width: 100%;
 }

 .footer-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-section ul li {
   margin-bottom: 10px;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
 }

 .footer-section ul li a {
   text-decoration: none;
   color: #444;
   font-size: 15px;
   transition: color 0.2s;
   display: inline-block;
 }

 .footer-section ul li a:hover {
   color: #0099ff;
 }

 address {
   font-style: normal;
   line-height: 2;
   font-size: 15px;
   color: #444;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
 }

 address a {
   color: #2c3e50;
   text-decoration: none;
   font-family: 'rubik', Arial, Helvetica, sans-serif;
 }

 address a:hover {
   text-decoration: underline;
 }

 .footer-bottom {
   max-width: 1200px;
   margin: 30px auto 0;
   padding-top: 20px;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   font-size: 13px;
   color: #666;
 }

 .footer-legal a {
   color: #555;
   text-decoration: none;
   margin: 0 6px;
 }

 .footer-legal a:hover {
   color: #2c3e50;
   text-decoration: underline;
 }

 /* ===== EMPTY CART ANIMATION ===== */
 @keyframes pulse {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.05);
   }

   100% {
     transform: scale(1);
   }
 }

 .empty-cart-icon {
   font-size: 4rem;
   color: #ced4da;
   margin-bottom: 20px;
   animation: pulse 2s infinite;
 }

 @keyframes iconPulse {
   0% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7);
   }

   70% {
     transform: scale(1.1);
     box-shadow: 0 0 0 10px rgba(255, 69, 0, 0);
   }

   100% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
   }
 }

 .cart-icon-pulse {
   animation: iconPulse 0.5s;
 }


 /* Split button styles for mobile menu */
 .split-button {
   display: flex;
   width: 100%;
   border-radius: 21px;
   overflow: hidden;
   BACKGROUND: #f8fafc;
   border: 1px solid #e2e8f0;
 }

 .split-button-left,
 .split-button-right {
   display: flex;
   align-items: center;
   cursor: pointer;
   border-radius: 10px;
   transition: background 0.2s ease;
 }

 .split-button-left {
   color: #1e293b;
 }

 .split-button-left i {
   font-size: 16px;
   color: #334155;
 }

 .split-button-right {
   width: 100%;
   justify-content: center;
   background: #f8fafc;
   border-left: 1px solid #e2e8f0;
 }

 .split-button-right i {
   transition: transform 0.3s ease;
 }


 .split-button-link1 {
   padding: 12px 68px 12px 12px !important;
 }

 .split-button-link2 {
   padding: 12px 39px 12px 12px !important;
 }

 /* 
.split-button:hover .split-button-left {
  background: transparent;
} */

 .split-button:hover .split-button-right {
   background: #e2e8f0;
 }

 /* Dropdown menu styles */
 .mobile-dropdown-item {
   position: relative;
 }

 .mobile-dropdown {
   display: none;
   list-style: none;
   padding-left: 0;
   margin: 8px 0 0;
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.9s ease-in-out;
 }

 .mobile-dropdown-item.active .mobile-dropdown {
   display: block;
   transition: max-height 0.9s ease-in-out;
   max-height: 500px;
 }

 /* For the expanded state */
 .split-button[aria-expanded="true"] .split-button-right i {
   transform: rotate(180deg);
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {


   .split-button-link1 {
     padding: 12px 55px 12px 12px !important;
   }

   .split-button-link2 {
     padding: 12px 25px 12px 12px !important;
   }

   .split-button-right {
     width: 100%;
   }
 }

 @media (max-width: 480px) {

   .split-button-link1 {
     padding: 12px 45px 12px 12px !important;
   }

   .split-button-link2 {
     padding: 12px 17px 12px 11px !important;
   }
 }



 /* Toast Container Styles */
 .toast-container {
   z-index: 10000002 !important;
   max-width: 350px;
   padding: 0 15px 15px 0 !important;
   gap: 5px;
   width: 415px !important;
   display: grid;
   bottom: 0 !important;
   right: 0 !important;
   left: auto !important;
   top: auto !important;
   pointer-events: none;
 }

 /* Individual Toast Styles */
 .toast-notification {
   background-color: #1e1e2d;
   border: none;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
   color: #000000;
   animation: fadeIn 0.3s ease;
   position: relative;
   overflow: hidden;
   pointer-events: all;
   margin-bottom: 10px;
   will-change: transform, opacity;
   z-index: 9999999 !important;
   transition: transform 0.2s ease;
 }

 .toast-notification:hover {
   transform: translateX(-3px);
 }

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

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

 .toast-header {
   display: flex;
   align-items: center !important;
   padding: 4px 10px !important;
   border-bottom: 1px solid #333 !important;
 }

 .toast-icon {
   background-color: #f4faff;
   color: #0db63a;
   width: 14px;
   height: 14px;
   border-radius: 19px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 6px;
   font-size: 14px;
 }

 .toast-title {
   font-weight: 600;
   margin-right: auto;
   font-size: 0.9rem;
 }

 .toast-time {
   font-size: 0.75rem;
   color: #aaa;
   margin-right: 10px;
 }

 .toast-close {
   background: none;
   border: none;
   color: #aaa;
   font-size: 1.2rem;
   cursor: pointer;
   transition: color 0.2s;
   position: relative;
   z-index: 9999999 !important;
   line-height: 1;
   height: 20px;
   width: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .toast-close:hover {
   color: #e0e0e0;
 }

 .toast-body {
   padding: 3px 10px !important;
   font-size: 0.95rem;
 }

 .toast-cart-btn {
   transition: color 0.2s ease;
   font-weight: 500;
 }

 .toast-cart-btn:hover {
   color: #0056b3 !important;
 }

 /* Toast animation for removal */
 @keyframes fadeOut {
   from {
     opacity: 1;
     transform: translateX(0);
   }

   to {
     opacity: 0;
     transform: translateX(100px);
   }
 }

 .toast-removing {
   animation: fadeOut 0.3s ease forwards;
 }

 /* Mobile responsiveness */
 @media (max-width: 576px) {
   .toast-container {
     width: calc(100% - 30px) !important;
     max-width: 100% !important;
     padding: 0 0 15px 0 !important;
     left: 0 !important;
   }

   .toast-notification {
     width: 100%;
     max-width: 100%;
   }
 }

 /* Reset stacking contexts for parent elements */
 body,
 html {
   position: relative;
   z-index: auto !important;
   overflow: visible !important;
 }

 /* Ensure no parent has overflow hidden that might clip toasts */
 .toast-container * {
   overflow: visible !important;
 }

 /* =========================================
   NEW FLUID RAINBOW SEARCH BAR
   ========================================= */

 /* 1. Animation Setup */
 @property --angle {
   syntax: '<angle>';
   initial-value: 0deg;
   inherits: false;
 }

 @keyframes spin-clockwise {
   0% {
     --angle: 0deg;
   }

   100% {
     --angle: 360deg;
   }
 }

 /* 2. Container Layout */
 .search-container {
   position: relative;
   width: 90%;
   /* Fluid clamp: never smaller than 280px, never wider than 600px */
   max-width: 600px;
   margin: 0 auto;
   z-index: 1;
 }

 /* Desktop Constraint */
 @media (min-width: 992px) {
   .search-container {
     max-width: 450px;
   }
 }

 /* 3. Rainbow Border & Glow */
 .search-container::before,
 .search-container::after {
   content: '';
   position: absolute;
   inset: -3px;
   border-radius: 55px;
   z-index: -1;
   background: conic-gradient(from var(--angle),
       #ff2000, #0099ff, #00c11b, #ffb600, #ff2000);
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .search-container::after {
   filter: blur(20px);
   z-index: -2;
 }

 /* Animation Triggers */
 .search-container:hover::before,
 .search-container:hover::after,
 .search-container:focus-within::before,
 .search-container:focus-within::after {
   opacity: 1;
   animation: spin-clockwise 4s linear infinite;
 }

 /* 4. Form & Layout */
 .search-container form {
   display: flex;
   align-items: center;
   width: 100%;
   background: #ffffff;
   border-radius: 50px;
   overflow: hidden;
   box-shadow: 0 0 0 2px #23bfda;
   transition: box-shadow 0.3s ease;
   /* Fluid Height: Scales between 45px and 65px */
   height: clamp(45px, 10vw, 65px);
 }

 .search-container:hover form,
 .search-container:focus-within form {
   box-shadow: 0 0 0 0 transparent;
 }

 /* 5. Input Field */
 .search-input {
   flex-grow: 1;
   min-width: 0;
   /* Allows shrinking on tiny screens */
   height: 100%;
   border: none;
   outline: none;
   background: transparent;
   padding-left: clamp(15px, 3vw, 30px);
   padding-right: 10px;
   font-size: clamp(14px, 2.5vw, 18px);
   color: #000;
 }

 .search-input::placeholder {
   color: #0099ff;
   opacity: 0.7;
 }

 /* 6. Button */
 .search-button {
   /* Fluid Width: Scales between 45px and 65px */
   width: clamp(45px, 10vw, 65px);
   height: 100%;
   flex-shrink: 0;
   /* Prevents squashing */
   background: #23bfda;
   border: none;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .search-button i {
   color: #0099ff;
   transition: color 0.3s ease;
   /* Fluid Icon Size */
   font-size: clamp(14px, 4vw, 20px);
 }

 .search-container:focus-within .search-button i {
   color: #000000;
 }


 .button {
   all: unset;
   position: relative;
   display: inline-flex;
   height: 2.5rem;
   align-items: center;
   border-radius: 9999px;
   padding-left: 2rem;
   padding-right: 2rem;
   font-family: Segoe UI;
   font-size: 1.2rem;
   font-weight: 640;
   color: #ffffff;
   letter-spacing: -0.06em;
   cursor: pointer;
 }


 @media (max-width: 768px) {

   .products-grid {
     grid-template-columns: repeat(1, 1fr);
   }

   .product-card {
     flex-direction: row;
     align-items: center;
   }

   .product-media {
     display: block;
     min-width: 60px;
     min-height: -webkit-fill-available;
     align-content: center;
     background: white;
     overflow: hidden;
   }

   .product-media img {
     width: 100% !important;
     height: auto !important;
   }

   .product-body {
     padding: 10px;
     display: flex;
     width: 260px;
     flex-direction: column;
     gap: 5px;
     flex: 1;
   }
 }

 /* ===== WISHLIST STYLES ===== */
 .wishlist-icon-container {
   position: relative;
    background: transparent;
    border: 1px solid #494949;
    padding: 9px;
    margin: 0px 3px 0px 0px;
    align-self: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .wishlist-icon-container:hover {
   background: white;
   border-color: #ff4b2b;
   box-shadow: 0px 0px 10px rgba(255, 75, 43, 0.3);
 }

 .wishlist-icon-container:hover .wishlist-link {
   color: #ff4b2b;
 }

 .wishlist-link {
   position: relative;
   font-size: 25px;
   display: flex;
   align-items: center;
 }

 .wishlist-count {
  position: absolute;
    top: -4px;
    right: -7px;
    background-color: #ff0093;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 5px;
    /* min-width: 18px; */
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 .heart-container {
   --heart-color: rgb(255, 91, 137);
   position: relative;
   width: 50px;
   height: 50px;
   transition: .3s;
   cursor: pointer;
 }

 .heart-container .checkbox {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 20;
   cursor: pointer;
 }

 .heart-container .svg-container {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .heart-container .svg-outline,
 .heart-container .svg-filled {
   fill: var(--heart-color);
   position: absolute;
 }

 .heart-container .svg-filled {
   animation: keyframes-svg-filled 1s;
   display: none;
 }

 .heart-container .svg-celebrate {
   position: absolute;
   animation: keyframes-svg-celebrate .5s;
   animation-fill-mode: forwards;
   display: none;
   stroke: var(--heart-color);
   fill: var(--heart-color);
   stroke-width: 2px;
 }

 .heart-container .checkbox:checked~.svg-container .svg-filled {
   display: block
 }

 .heart-container .checkbox:checked~.svg-container .svg-celebrate {
   display: block
 }

 @keyframes keyframes-svg-filled {
   0% {
     transform: scale(0);
   }

   25% {
     transform: scale(1.2);
   }

   50% {
     transform: scale(1);
     filter: brightness(1.5);
   }
 }

 @keyframes keyframes-svg-celebrate {
   0% {
     transform: scale(0);
   }

   50% {
     opacity: 1;
     filter: brightness(1.5);
   }

   100% {
     transform: scale(1.4);
     opacity: 0;
     display: none;
   }
 }

 /* Wishlist Popup Styles */
 .wishlist-popup {
   position: fixed;
   top: 0;
   bottom: 0;
   right: -400px;
   width: 400px;
   border-radius: 20px 0px 0px 20px;
   background-color: #fff;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   z-index: 100000001 !important;
   /* One more than cart popup */
   transition: right 0.3s ease;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
 }

 .wishlist-popup.active {
   right: 0;
 }

 .wishlist-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   backdrop-filter: blur(7px);
   background-color: rgb(32 32 32 / 50%);
   display: none;
   z-index: 1051;
   opacity: 0;
   transition: all 0.9s ease;
 }

 .wishlist-overlay.active {
   display: block;
   opacity: 1;
 }

 .wishlist-item {
   display: flex;
   padding: 15px;
   gap: 15px;
   border-bottom: 1px solid #eee;
   align-items: center;
 }

 .wishlist-item-img {
   width: 80px;
   height: 80px;
   object-fit: contain;
   border: 1px solid #eee;
   border-radius: 8px;
 }

 .wishlist-item-details {
   flex: 1;
 }

 .wishlist-item-name {
   font-size: 14px;
   margin-bottom: 5px;
 }

 .wishlist-item-price {
   font-weight: bold;
   color: #0da86e;
   margin-bottom: 5px;
 }

 .wishlist-item-remove {
   background: none;
   border: none;
   color: #ff4b2b;
   cursor: pointer;
   font-size: 18px;
 }

 /* Featured Products Heart Alignment */
 .product-card {
   position: relative;
 }

 .product-card .heart-container {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
   width: 35px;
   height: 35px;
   padding: 5px;
   z-index: 10;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .product-card .heart-container .svg-container {
   width: 100%;
   height: 100%;
 }

 .product-card .heart-container .svg-container svg {
   width: 20px;
   height: 20px;
 }