/* Font Face Definitions - Local Vazirmatn Fonts */
   @font-face {
       font-family: 'Vazirmatn';
       src: url('../fonts/Vazir-Thin.woff2') format('woff2');
       font-weight: 200;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Vazirmatn';
       src: url('../fonts/Vazir-Light.woff2') format('woff2');
       font-weight: 300;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Vazirmatn';
       src: url('../fonts/Vazir.woff2') format('woff2');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Vazirmatn';
       src: url('../fonts/Vazir-Medium.woff2') format('woff2');
       font-weight: 500;
       font-style: normal;
       font-display: swap;
   }

   @font-face {
       font-family: 'Vazirmatn';
       src: url('../fonts/Vazir-Bold.woff2') format('woff2');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
   }

   * {
       font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       background: #faf9f7;
       color: #2c2c2c;
   }

   /* ===== CUSTOM SCROLLBAR - BOLD & BEAUTIFUL ===== */

   @media (hover: hover) and (pointer: fine) {
       ::-webkit-scrollbar {
           width: 8px;
           height: 12px;
       }

       ::-webkit-scrollbar-thumb {
           background: #7c9885;
           border: 3px solid transparent;
           box-shadow: 0 0 10px rgba(124, 152, 133, 0.12);
       }

   }

   @media (max-width: 900px) {
       ::-webkit-scrollbar {
           display: none;
       }
   }


   /* Utility Classes */
   .max-w-5xl {
       max-width: 64rem;
       margin-left: auto;
       margin-right: auto;
   }

   .max-w-6xl {
       max-width: 72rem;
       margin-left: auto;
       margin-right: auto;
   }

   .mx-auto {
       margin-left: auto;
       margin-right: auto;
   }

   .text-center {
       text-align: center;
   }

   .text-right {
       text-align: right;
   }

   .hidden {
       display: none !important;
   }

   /* Spacing */
   .px-4 {
       padding-left: 1rem;
       padding-right: 1rem;
   }

   .py-20 {
       padding-top: 5rem;
       padding-bottom: 5rem;
   }

   .py-12 {
       padding-top: 3rem;
       padding-bottom: 3rem;
   }

   .py-3 {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
   }

   .py-16 {
       padding-top: 4rem;
       padding-bottom: 4rem;
   }

   .py-2 {
       padding-top: 0.5rem;
       padding-bottom: 0.5rem;
   }

   .px-6 {
       padding-left: 1.5rem;
       padding-right: 1.5rem;
   }

   .pt-8 {
       padding-top: 2rem;
   }

   .mt-20 {
       margin-top: 5rem;
   }

   .mt-12 {
       margin-top: 3rem;
   }

   .mt-2 {
       margin-top: 0.5rem;
   }

   .mb-6 {
       margin-bottom: 1.5rem;
   }

   .mb-8 {
       margin-bottom: 2rem;
   }

   .mb-4 {
       margin-bottom: 1rem;
   }

   .mb-3 {
       margin-bottom: 0.75rem;
   }

   .mb-2 {
       margin-bottom: 0.5rem;
   }

   .mr-2 {
       margin-right: 0.5rem;
   }

   .gap-1 {
       gap: 0.25rem;
   }

   .gap-3 {
       gap: 0.75rem;
   }

   .gap-12 {
       gap: 3rem;
   }

   /* Typography */
   .text-5xl {
       font-size: 3rem;
   }

   .text-2xl {
       font-size: 1.5rem;
   }

   .text-xl {
       font-size: 1.25rem;
   }

   .text-sm {
       font-size: 0.875rem;
   }

   .text-xs {
       font-size: 0.75rem;
   }

   .text-gray-600 {
       color: #6b6b6b;
   }

   .text-gray-800 {
       color: #2c2c2c;
   }

   .text-gray-400 {
       color: #9ca3af;
   }

   .font-light {
       font-weight: 300;
   }

   .font-medium {
       font-weight: 500;
   }

   .font-bold {
       font-weight: 700;
   }

   .leading-relaxed {
       line-height: 1.625;
   }

   /* Components */
   .hero-section {
       background: linear-gradient(135deg, #f8f6f3 0%, #ebe8e3 100%);
   }

   .product-card {
       background: white;
       border: 1px solid #f0ede8;
       transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
       opacity: 0;
       transform: translateY(20px);
       animation: fadeInUp 0.6s ease forwards;
       border-radius: 1rem;
       padding: 1rem;
       text-align: center;
       cursor: pointer;
       position: relative;
   }

   .product-card:hover {
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
       transform: translateY(-4px);
       border-color: #d4cfc6;
   }

   /* Product Number Badge */
   .product-badge {
       position: absolute;
       top: -8px;
       right: -8px;
       width: 28px;
       height: 28px;
       background: #7c9885;
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.75rem;
       font-weight: bold;
       box-shadow: 0 2px 8px rgba(124, 152, 133, 0.4);
       z-index: 10;
   }

   @keyframes fadeInUp {
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .product-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem;
   }

   .product-image {
       width: 100%;
       aspect-ratio: 1 / 1;
       background: linear-gradient(145deg, #f8f6f3 0%, #f0ede8 100%);
       border: 1px solid #f0ede8;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 0.8rem;
       border-radius: 16px;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .product-card:hover .product-image {
       border-color: #7c9885;
   }

   .product-image img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       transition: transform 0.5s ease;
       padding: 0.5rem;
   }

   .product-card:hover .product-image img {
       transform: scale(1.05);
   }

   .product-image .emoji-fallback {
       font-size: 3rem;
       display: block;
   }

   .filter-container {
       background: white;
       border: 1px solid #f0ede8;
       border-radius: 20px;
       padding: 0.75rem;
       margin-bottom: 2rem;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
   }

   .flex {
       display: flex;
   }

   .flex-wrap {
       flex-wrap: wrap;
   }

   .justify-center {
       justify-content: center;
   }

   .items-center {
       align-items: center;
   }

   .category-filter {
       background: #f5f3f0;
       color: #6b6b6b;
       border: 1px solid #e8e3dc;
       transition: all 0.3s ease;
       padding: 0.4rem 1rem;
       border-radius: 40px;
       font-size: 0.75rem;
       font-weight: 500;
       cursor: pointer;
   }

   .category-filter.active {
       background: #7c9885;
       color: white;
       border-color: #7c9885;
       box-shadow: 0 4px 12px rgba(124, 152, 133, 0.3);
   }

   .category-filter:hover:not(.active) {
       background: #ebe8e3;
       border-color: #d4cfc6;
       transform: translateY(-1px);
   }

   .price-tag {
       background: #7c9885;
       color: white;
       padding: 0.25rem 0.75rem;
       border-radius: 24px;
       font-weight: 500;
       display: inline-block;
       font-size: 0.75rem;
       transition: all 0.3s ease;
   }

   .product-card:hover .price-tag {
       background: #6b8573;
       transform: scale(1.02);
   }

   .star-rating {
       color: #f5b042;
       margin-bottom: 0.5rem;
   }

   .star {
       transition: all 0.2s ease;
       display: inline-block;
       margin-left: 1px;
       font-size: 0.75rem;
   }

   .minimal-footer {
       background: #f5f3f0;
       border-top: 1px solid #e8e3dc;
   }

   .footer-title {
       color: #2c2c2c;
       font-weight: 600;
       font-size: 1rem;
       margin-bottom: 0.75rem;
   }

   .footer-text {
       color: #6b6b6b;
       line-height: 1.7;
       font-size: 0.8rem;
   }

   .footer-icon {
       width: 22px;
       height: 22px;
       filter: brightness(0) saturate(100%) invert(56%) sepia(18%) saturate(494%) hue-rotate(95deg) brightness(92%) contrast(87%);
       transition: all 0.3s ease;
       display: inline-block;
       vertical-align: middle;
   }

   .footer-title:hover .footer-icon {
       transform: scale(1.1) rotate(5deg);
       filter: brightness(0) saturate(100%) invert(60%) sepia(25%) saturate(600%) hue-rotate(90deg) brightness(95%) contrast(90%);
   }

   @media (min-width: 640px) {
       .footer-icon {
           width: 24px;
           height: 24px;
       }
   }

   @media (min-width: 768px) {
       .footer-icon {
           width: 26px;
           height: 26px;
       }
   }

   .footer-icon {
       animation: fadeInScale 0.4s ease backwards;
   }

   @keyframes fadeInScale {
       from {
           opacity: 0;
           transform: scale(0.8);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   .border-t {
       border-top: 1px solid #e5e7eb;
   }

   .border-gray-300 {
       border-color: #d1d5db;
   }

   .grid {
       display: grid;
   }

   .grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .space-y-1> :not(:last-child) {
       margin-bottom: 0.25rem;
   }

   .w-16 {
       width: 4rem;
   }

   .h-0\.5 {
       height: 0.125rem;
   }

   .bg-gray-400 {
       background-color: #cbd5e1;
   }

   .inline-block {
       display: inline-block;
   }

   /* Button Styles */
   button {
       font-family: 'Vazirmatn', sans-serif;
   }

   /* Responsive */
   @media (min-width: 640px) {
       .product-grid {
           gap: 1.5rem;
       }

       .product-card {
           padding: 1.25rem;
       }

       .price-tag {
           font-size: 0.8rem;
           padding: 0.3rem 0.9rem;
       }

       .category-filter {
           padding: 0.5rem 1.25rem;
           font-size: 0.8rem;
       }

       .product-badge {
           width: 32px;
           height: 32px;
           font-size: 0.85rem;
           top: -10px;
           right: -10px;
       }
   }

   @media (min-width: 768px) {
       .product-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 2rem;
       }

       .product-card {
           padding: 1.5rem;
       }

       .text-7xl {
           font-size: 4.5rem;
       }

       .md\:grid-cols-3 {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }

       .md\:text-right {
           text-align: right;
       }

       .product-image {
           aspect-ratio: 1 / 1;
           margin-bottom: 1.2rem;
       }

       .product-image img {
           padding: 0.75rem;
       }

       .price-tag {
           font-size: 0.9rem;
           padding: 0.4rem 1rem;
       }

       .category-filter {
           padding: 0.6rem 1.5rem;
           font-size: 0.875rem;
       }

       .star {
           font-size: 0.9rem;
       }

       .footer-title {
           font-size: 1.2rem;
           margin-bottom: 1rem;
       }

       .footer-text {
           font-size: 0.9rem;
       }
   }

   @media (max-width: 640px) {
       .text-5xl {
           font-size: 1.8rem;
       }

       .hero-section .text-xl {
           font-size: 0.9rem;
       }

       .product-card h3 {
           font-size: 0.9rem;
       }

       .product-card p {
           font-size: 0.7rem;
       }

       .product-image .emoji-fallback {
           font-size: 2rem;
       }

       .product-badge {
           width: 24px;
           height: 24px;
           font-size: 0.65rem;
           top: -6px;
           right: -6px;
       }
   }

   .rounded-2xl {
       border-radius: 1rem;
   }

   .rounded-full {
       border-radius: 9999px;
   }

   /* Animation delay for cards */
   .product-card:nth-child(1) {
       animation-delay: 0s;
   }

   .product-card:nth-child(2) {
       animation-delay: 0.03s;
   }

   .product-card:nth-child(3) {
       animation-delay: 0.06s;
   }

   .product-card:nth-child(4) {
       animation-delay: 0.09s;
   }

   .product-card:nth-child(5) {
       animation-delay: 0.12s;
   }

   .product-card:nth-child(6) {
       animation-delay: 0.15s;
   }

   /* Scroll behavior */
   html {
       scroll-behavior: smooth;
   }