:where([class^="ri-"])::before {
      content: "\f3c2";
    }

    body {
      font-family: 'Poppins', sans-serif;
    }

    .serif-font {
      font-family: 'Playfair Display', serif;
    }

    .header-nav {
      transition: background-color 0.3s ease;
    }

    .header-nav.scrolled {
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .category-card:hover {
      transform: translateY(-5px);
      transition: transform 0.3s ease;
    }

    .product-card:hover {
      transform: translateY(-5px);
      transition: transform 0.3s ease;
    }

    .quick-view {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .product-card:hover .quick-view {
      opacity: 1;
    }

    .custom-checkbox {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid #ddd;
      border-radius: 4px;
      position: relative;
    }

    .custom-checkbox:checked {
      background-color: #FF6B9D;
      border-color: #FF6B9D;
    }

    .custom-checkbox:checked::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 2px;
      width: 6px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .custom-range {
      -webkit-appearance: none;
      width: 100%;
      height: 4px;
      background: #ddd;
      border-radius: 5px;
      outline: none;
    }

    .custom-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #FF6B9D;
      cursor: pointer;
    }

    .custom-range::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #FF6B9D;
      cursor: pointer;
      border: none;
    }

    .whatsapp-btn {
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }