:root {
      --earth-brown: #5D4E37;
      --sage-green: #7A9E7E;
      --golden-harvest: #D4A853;
      --sandy-beige: #F5F0E8;
      --cream-white: #FDFCFA;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background: url('../assets/hero-bg.png') no-repeat center center fixed;
      background-size: cover;
      color: var(--earth-brown);
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(245, 240, 232, 0.55);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      z-index: -1;
    }

    /* GLOBAL GLASSMORPHISM */
    header,
    #mobile-menu,
    .card-hover,
    .product-card,
    .modal-content,
    [class*="bg-white"],
    [class*="bg-[#FDFCFA]"],
    [class*="bg-[#F5F0E8]"] {
      background-color: rgba(255, 255, 255, 0.4) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border: 1px solid rgba(255, 255, 255, 0.3) !important;
      box-shadow: 0 8px 32px 0 rgba(93, 78, 55, 0.05) !important;
    }

    .btn-harvest {
      background: rgba(93, 78, 55, 0.85) !important;
      backdrop-filter: blur(4px) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .font-display {
      font-family: 'Merriweather', serif;
    }

    .font-heavy {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .text-hero {
      font-size: clamp(1.75rem, 7vw, 4.25rem);
      line-height: 1;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .text-section {
      font-size: clamp(1.5rem, 6vw, 3.5rem);
      line-height: 0.9;
      font-weight: 700;
    }

    /* ============================================================
       RESPONSIVE SYSTEM — clean, non-conflicting, mobile-first
       ============================================================ */

    /* --- Global base --- */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      overflow-x: hidden;
      width: 100%;
    }

    img,
    svg,
    video,
    picture,
    iframe {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* Touch targets */
    button,
    [role="button"],
    a {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    /* iOS font-size zoom prevention */
    input,
    textarea,
    select {
      font-size: 16px;
    }

    /* ============================================================
       MOBILE  (max-width: 640px)
       ============================================================ */
    @media (max-width: 640px) {

      /* -- Typography -- */
      .text-hero {
        font-size: clamp(1.5rem, 7.5vw, 2.35rem) !important;
        line-height: 1.1 !important;
      }

      .text-section {
        font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
        line-height: 1.15 !important;
      }

      /* -- Global spacing -- */
      section {
        padding: 2.5rem 1rem !important;
      }

      .max-w-7xl,
      .max-w-6xl,
      .max-w-5xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }

      .py-24 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
      }

      .py-20 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
      }

      .mb-16 {
        margin-bottom: 1.5rem !important;
      }

      .mb-12 {
        margin-bottom: 1.25rem !important;
      }

      .mb-8 {
        margin-bottom: 1rem !important;
      }

      .footer-links {
        gap: 0.15rem !important;
      }

      .footer-links li {
        margin-bottom: 0.18rem !important;
      }

      .footer-links li:last-child {
        margin-bottom: 0 !important;
      }

      .footer-links button {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
      }

      /* -- Header -- */
      header>div {
        padding: 0.75rem 1rem !important;
      }

      #desktop-links {
        display: none !important;
      }

      .text-3xl.font-display {
        font-size: 1.3rem !important;
      }

      /* -- Mobile menu -- */
      #mobile-menu {
        width: 88% !important;
        max-width: 320px !important;
      }

      .mobile-nav-item {
        font-size: 1.05rem !important;
        padding: 0.35rem 0 !important;
        letter-spacing: 0.01em !important;
      }

      /* -- Buttons -- */
      button {
        min-height: 44px;
        min-width: 44px;
      }

      .btn-harvest,
      .btn-gold {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.8rem !important;
      }

      /* -- Inputs -- */
      input,
      textarea,
      select {
        width: 100%;
        padding: 0.8rem 1rem !important;
        font-size: 16px !important;
        border-radius: 0.75rem !important;
      }

      input[type="range"] {
        padding: 0 !important;
        border-radius: 0 !important;
      }

      input[type="radio"],
      input[type="checkbox"] {
        width: 1rem !important;
        height: 1rem !important;
        padding: 0 !important;
        min-height: unset !important;
        min-width: unset !important;
      }

      /* -- Grids — 2 columns on mobile for better use of space -- */
      .grid {
        display: grid !important;
      }

      .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      /* -- Hero -- */
      section.min-h-screen {
        min-height: 100svh !important;
        padding: 2rem 1rem !important;
      }

      .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
      }

      .flex.flex-col.md\:flex-row>button {
        width: 100% !important;
        padding: 0.9rem 1rem !important;
      }

      /* -- Why section cards — force 2-col on mobile -- */
      .grid.md\:grid-cols-3.gap-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.md\:grid-cols-3.gap-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      .grid.md\:grid-cols-3.gap-4.sm\:gap-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      .grid.md\:grid-cols-3.gap-8 .card-hover {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
      }

      .grid.md\:grid-cols-3.gap-8 .card-hover .text-6xl {
        font-size: 2rem !important;
      }

      .grid.md\:grid-cols-3.gap-8 .card-hover .text-4xl {
        font-size: 1.5rem !important;
      }

      .grid.md\:grid-cols-3.gap-8 .card-hover h3 {
        font-size: 0.85rem !important;
      }

      .grid.md\:grid-cols-3.gap-8 .card-hover p {
        font-size: 0.7rem !important;
      }

      /* -- Home page "Why Choose" cards (gap-4 sm:gap-8) -- */
      section .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      /* -- Blog grid on home — 2 col on mobile -- */
      .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-5.sm\:gap-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      /* -- Product cards (2-col on phone, compact) -- */
      .product-card {
        border-radius: 1rem !important;
      }

      .product-card .text-7xl {
        font-size: 2.5rem !important;
      }

      .product-card .text-6xl {
        font-size: 2rem !important;
      }

      .product-card .p-5 {
        padding: 0.6rem !important;
      }

      .product-card .p-6 {
        padding: 0.6rem !important;
      }

      .product-card h3 {
        font-size: 0.65rem !important;
      }

      .product-card p {
        font-size: 0.6rem !important;
      }

      /* Product grid always 2-col on mobile */
      .grid.grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      .grid.grid-cols-2.sm\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      /* -- Wishlist pill -- */
      .wishlist-pill {
        width: 2rem !important;
        height: 2rem !important;
        padding: 0.25rem !important;
        top: 0.4rem !important;
        right: 0.4rem !important;
        font-size: 0.75rem !important;
      }

      /* -- Products page filter -- */
      .grid.md\:grid-cols-3.gap-8.mb-16 {
        grid-template-columns: 1fr !important;
      }

      /* -- Product detail -- */
      .grid.lg\:grid-cols-2.gap-16 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }

      .rounded-\[80px\] {
        border-radius: 1.5rem !important;
      }

      .text-\[200px\] {
        font-size: 5rem !important;
      }

      h1.text-6xl {
        font-size: 1.5rem !important;
      }

      p.text-4xl {
        font-size: 1.2rem !important;
      }

      .grid.grid-cols-2.gap-4 {
        gap: 0.5rem !important;
      }

      /* -- Cart page -- */
      .p-8.bg-white.rounded-\[30px\].border {
        padding: 0.9rem !important;
      }

      .p-8.bg-white.rounded-\[30px\].border .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
      }

      .p-8.bg-white.rounded-\[30px\].border .flex.items-center.gap-8 {
        gap: 0.75rem !important;
      }

      .text-7xl {
        font-size: 2.25rem !important;
      }

      .text-2xl.font-display.font-bold.text-\[#5D4E37\].uppercase {
        font-size: 0.9rem !important;
      }

      .flex.items-center.gap-6 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
      }

      .min-w-\[120px\] {
        min-width: 0 !important;
      }

      .grid.md\:grid-cols-3.gap-6.mb-12 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
      }

      .grid.md\:grid-cols-3.gap-6.mb-12 .p-8 {
        padding: 0.75rem !important;
      }

      .grid.md\:grid-cols-3.gap-6.mb-12 .text-3xl {
        font-size: 1rem !important;
      }

      /* Cart quantity controls */
      .flex.items-center.gap-4.bg-\[#F5F0E8\].rounded-full {
        gap: 0.25rem !important;
        padding: 0.25rem !important;
      }

      .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
      }

      /* -- Checkout -- */
      .grid.lg\:grid-cols-3.gap-8 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }

      .lg\:col-span-2 {
        grid-column: 1 !important;
      }

      .flex.justify-between.mb-16 {
        margin-bottom: 1.5rem !important;
      }

      .checkout-step {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.8rem !important;
      }

      /* -- Auth page -- */
      .max-w-lg.bg-white {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
      }

      .font-display.text-4xl {
        font-size: 1.5rem !important;
      }

      /* -- Customer dashboard -- */
      #profile-tab .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }

      .flex.gap-2.mb-12 {
        overflow-x: auto;
        padding-bottom: 0.25rem;
        gap: 0.25rem !important;
        margin-bottom: 1rem !important;
      }

      .flex.gap-2.mb-12 button {
        white-space: nowrap;
        font-size: 0.7rem !important;
        padding: 0.5rem 0.75rem !important;
      }

      /* -- Admin dashboard : mobile bottom nav -- */
      .md\:hidden[style*="bottom"]>div {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      .md\:hidden[style*="bottom"]>div::-webkit-scrollbar {
        display: none !important;
      }

      .md\:hidden[style*="bottom"] button {
        min-height: unset !important;
        min-width: unset !important;
      }

      /* Admin main content padding for mobile bottom nav */
      .pb-20 {
        padding-bottom: 5.5rem !important;
      }

      .flex-1.p-12 {
        padding: 1rem !important;
      }

      /* Admin stat cards */
      .grid.md\:grid-cols-4.gap-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
      }

      .stat-card {
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
      }

      .stat-card .text-4xl {
        font-size: 1.25rem !important;
      }

      .stat-card .text-xs {
        font-size: 0.6rem !important;
      }

      /* Admin revenue chart */
      .h-64 {
        height: 8rem !important;
      }

      .h-64 p {
        font-size: 0.55rem !important;
      }

      /* Admin product/inventory rows */
      .bg-white.p-8.rounded-\[40px\] .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
      }

      .bg-white.p-8.rounded-\[40px\] .flex.items-center.gap-8 {
        gap: 0.5rem !important;
      }

      .bg-white.p-8.rounded-\[40px\] .text-6xl {
        font-size: 1.75rem !important;
      }

      .bg-white.p-8.rounded-\[40px\] h3 {
        font-size: 0.8rem !important;
      }

      .bg-white.p-8.rounded-\[40px\] button {
        font-size: 0.65rem !important;
        padding: 0.5rem 0.75rem !important;
        width: 100% !important;
      }

      /* Admin tables */
      .overflow-x-auto table {
        font-size: 0.7rem !important;
      }

      .overflow-x-auto th,
      .overflow-x-auto td {
        padding: 0.4rem 0.5rem !important;
      }

      /* Admin profile */
      .grid.md\:grid-cols-3.gap-8 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
      }

      .md\:col-span-2 {
        grid-column: 1 !important;
      }

      /* -- Wishlist page -- */
      .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-8 .p-8 {
        padding: 0.75rem !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-3.gap-8 .text-9xl {
        font-size: 2rem !important;
      }

      /* -- Referral page -- */
      .grid.md\:grid-cols-2.gap-12 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
      }

      .text-5xl.font-display.font-bold.mb-8 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
      }

      .p-8.rounded-\[40px\].border.border-\[#D4A853\]\/10 {
        padding: 1rem !important;
      }

      .p-12.rounded-\[40px\] {
        padding: 1.25rem !important;
      }

      /* -- Wallet page -- */
      .max-w-lg.mx-auto {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }

      /* Balance card */
      .rounded-\[28px\] {
        border-radius: 1.25rem !important;
      }

      .rounded-\[28px\] p.text-4xl {
        font-size: 2rem !important;
      }

      .rounded-\[28px\] p.text-5xl {
        font-size: 2rem !important;
      }

      .rounded-\[20px\] {
        border-radius: 1rem !important;
      }

      /* Wallet tab pills */
      .flex.gap-1.bg-\[#F5F0E8\].p-1.rounded-2xl button {
        font-size: 0.65rem !important;
        padding: 0.6rem 0.25rem !important;
        min-height: unset !important;
      }

      /* Wallet action buttons inside card */
      .rounded-\[28px\] .flex.gap-3 button {
        font-size: 0.65rem !important;
        padding: 0.6rem 0.5rem !important;
        min-height: unset !important;
      }

      /* Row items in wallet lists */
      .rounded-\[20px\] .flex.items-center.justify-between.px-5.py-4 {
        padding: 0.75rem 1rem !important;
      }

      .rounded-\[20px\] .px-5.py-3 {
        padding: 0.6rem 1rem !important;
      }

      /* Referral status bar */
      .mb-5.p-4 {
        padding: 0.75rem !important;
      }

      .mb-5.p-4 .text-2xl {
        font-size: 1.25rem !important;
      }

      .mb-5.p-4 button {
        min-height: unset !important;
        font-size: 0.7rem !important;
        padding: 0.5rem 0.9rem !important;
      }

      /* Wallet header icons */
      .w-9.h-9.rounded-full {
        min-height: unset !important;
        min-width: unset !important;
      }

      /* -- Order confirmation -- */
      .text-9xl.mb-6 {
        font-size: 3rem !important;
      }

      h1.text-6xl.font-display {
        font-size: 1.5rem !important;
      }

      .p-12.rounded-\[40px\] .flex.gap-4.p-4 {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
      }

      .flex.gap-4>button {
        flex: 1 1 0;
        font-size: 0.75rem !important;
        padding: 0.75rem !important;
      }

      /* -- Modals -- */
      .modal-content {
        width: 95vw !important;
        max-height: 90vh !important;
        border-radius: 1rem !important;
        padding: 1rem !important;
      }

      /* -- Disable heavy hover effects on touch -- */
      @media (hover: none) {

        .card-hover:hover,
        .product-card:hover,
        button:hover {
          transform: none !important;
          box-shadow: inherit !important;
        }
      }
    }

    /* ============================================================
       TABLET  (641px – 1024px)
       ============================================================ */
    @media (min-width: 641px) and (max-width: 1024px) {
      section {
        padding: 2.5rem 1.5rem !important;
      }

      .max-w-7xl,
      .max-w-6xl,
      .max-w-5xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
      }

      #desktop-links {
        display: none !important;
      }

      .text-hero {
        font-size: clamp(2rem, 5.5vw, 3rem) !important;
      }

      .text-section {
        font-size: clamp(1.5rem, 4.6vw, 2.2rem) !important;
      }

      .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      /* Admin on tablet */
      .flex.h-full {
        flex-direction: column !important;
        height: auto !important;
      }

      .admin-sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        padding: 1rem !important;
        border-right: none !important;
        border-bottom: 2px solid rgba(212, 168, 83, 0.3) !important;
      }

      .admin-sidebar nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
      }

      .admin-sidebar nav button {
        flex: 1 1 calc(33% - 0.5rem) !important;
        font-size: 0.75rem !important;
        padding: 0.5rem 0.6rem !important;
        min-width: 0 !important;
      }

      .flex-1.p-12 {
        padding: 1.5rem !important;
      }

      .grid.md\:grid-cols-4.gap-6 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .grid.lg\:grid-cols-3.gap-8 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      input,
      textarea,
      select {
        font-size: 16px !important;
      }

      button {
        min-height: 44px;
      }
    }

    /* ============================================================
       DESKTOP  (1025px+)
       ============================================================ */
    @media (min-width: 1025px) {
      #desktop-links {
        display: flex !important;
        gap: 2rem;
      }

      .text-hero {
        font-size: clamp(2.5rem, 6.5vw, 4.25rem);
      }

      .text-section {
        font-size: clamp(1.75rem, 5.5vw, 3.5rem);
      }

      .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

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

      .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }

      .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }

      .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }

      .grid.gap-8 {
        gap: 2rem !important;
      }

      .grid.gap-6 {
        gap: 1.5rem !important;
      }

      .card-hover:hover {
        transform: translateY(-12px) !important;
        box-shadow: 0 35px 70px rgba(93, 78, 55, 0.12) !important;
      }

      .product-card:hover {
        transform: translateY(-8px) !important;
      }

      button:hover {
        transform: translateY(-2px) !important;
      }
    }

    /* Enhanced Button Styles with Hover Animations */
    .btn-harvest {
      background-color: var(--earth-brown);
      color: white;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.1em;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .btn-harvest::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .btn-harvest:hover::before {
      width: 300px;
      height: 300px;
    }

    .btn-harvest:hover:not(:disabled) {
      background-color: #453929;
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(93, 78, 55, 0.3);
    }

    .btn-gold {
      background-color: var(--golden-harvest);
      color: white;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.1em;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .btn-gold::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .btn-gold:hover::before {
      width: 300px;
      height: 300px;
    }

    .btn-gold:hover {
      background-color: #c49945;
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(212, 168, 83, 0.3);
    }

    /* Card Styling */
    .card-hover {
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(93, 78, 55, 0.05);
      cursor: pointer;
    }

    .card-hover:hover {
      transform: translateY(-12px);
      box-shadow: 0 35px 70px rgba(93, 78, 55, 0.12);
      border-color: var(--golden-harvest);
    }

    /* Navigation Enhancement */
    .nav-link {
      font-size: 1.2rem;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--golden-harvest);
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* Mobile Menu */
    #mobile-menu {
      width: 85%;
      max-width: 320px;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 100;
      box-shadow: -20px 0 60px rgba(93, 78, 55, 0.15);
    }

    .mobile-nav-item {
      font-family: 'Merriweather', serif;
      font-size: 1.35rem;
      font-weight: 700;
      text-transform: uppercase;
      font-style: normal;
      letter-spacing: 0.02em;
      line-height: 1.2;
      text-align: left;
      transition: all 0.3s ease;
      padding: 0.4rem 0;
      cursor: pointer;
    }

    .mobile-nav-item:hover {
      color: var(--golden-harvest);
      transform: translateX(10px);
    }

    /* Scroll Progress */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: var(--golden-harvest);
      z-index: 1000;
      width: 0%;
      transition: width 0.1s ease-out;
    }

    /* Wishlist Pill */
    .wishlist-pill {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      z-index: 10;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      background: white;
      border-radius: 50%;
      padding: 0.5rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }

    .wishlist-pill:hover {
      transform: scale(1.15) rotate(15deg);
      box-shadow: 0 8px 20px rgba(212, 168, 83, 0.3);
    }

    /* Input Animations */
    input,
    textarea,
    select {
      transition: all 0.3s ease;
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--golden-harvest) !important;
      box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
      transform: scale(1.02);
    }

    /* Character Animation Styles */
    /* (Removed - no more standing character) */

    /* Eye Toggle Animation */
    #eye-open,
    #eye-closed {
      transition: all 0.3s ease;
    }

    #eye-open:hover,
    #eye-closed:hover {
      transform: scale(1.1);
    }

    /* Smooth Reveal */
    .reveal {
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    .reveal.active {
      opacity: 1;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

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

    /* Hero Title Animation - More Professional */
    .text-hero {
      animation: heroTitleReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }

    @keyframes heroTitleReveal {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Subtitle Animation - More Refined */
    .text-2xl.font-bold.text-\[\#7A9E7E\] {
      animation: fadeInUp 1.2s ease-out forwards;
      opacity: 0;
      animation-delay: 0.2s;
    }

    /* Button Animation - Professional Reveal */
    .flex.flex-col.md\:flex-row.gap-6>button {
      animation: buttonRevealPro 0.9s ease-out forwards;
      opacity: 0;
    }

    .flex.flex-col.md\:flex-row.gap-6>button:nth-child(1) {
      animation-delay: 0.5s;
    }

    .flex.flex-col.md\:flex-row.gap-6>button:nth-child(2) {
      animation-delay: 0.7s;
    }

    @keyframes buttonRevealPro {
      0% {
        opacity: 0;
        transform: translateY(15px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Section Heading Animation - Elegant Reveal */
    .text-section {
      animation: sectionTitleRevealPro 1s ease-out forwards;
      opacity: 0;
    }

    @keyframes sectionTitleRevealPro {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Feature Card Animation - Smooth Cascade */
    .card-hover {
      animation: cardRevealPro 0.8s ease-out forwards;
      opacity: 0;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(1) {
      animation-delay: 0.1s;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(2) {
      animation-delay: 0.2s;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(3) {
      animation-delay: 0.3s;
    }

    @keyframes cardRevealPro {
      0% {
        opacity: 0;
        transform: translateY(25px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Feature Card Icon Animation - Subtle Appear */
    .card-hover>.text-6xl {
      animation: iconRevealPro 0.6s ease-out forwards;
      opacity: 0;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(1)>.text-6xl {
      animation-delay: 0.3s;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(2)>.text-6xl {
      animation-delay: 0.4s;
    }

    .grid.md\:grid-cols-3.gap-8>.card-hover:nth-child(3)>.text-6xl {
      animation-delay: 0.5s;
    }

    @keyframes iconRevealPro {
      0% {
        opacity: 0;
        transform: scale(0.95);
      }

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

    /* Product Card Animation - Professional Reveal */
    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card {
      animation: productCardRevealPro 0.7s ease-out forwards;
      opacity: 0;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(1) {
      animation-delay: 0.05s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(2) {
      animation-delay: 0.1s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(3) {
      animation-delay: 0.15s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(4) {
      animation-delay: 0.2s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(5) {
      animation-delay: 0.25s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(6) {
      animation-delay: 0.3s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(7) {
      animation-delay: 0.35s;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4.gap-6>.product-card:nth-child(8) {
      animation-delay: 0.4s;
    }

    @keyframes productCardRevealPro {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Float animation for products */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-15px);
      }
    }

    .animate-float {
      animation: float 3s ease-in-out infinite;
    }

    /* Text reveal line by line effect */
    .reveal-text {
      animation: revealText 1s ease forwards;
    }

    @keyframes revealText {
      0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
      }

      100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
      }
    }

    /* Smooth Reveal */
    .product-card {
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .product-card:hover {
      transform: translateY(-8px);
    }

    /* Rating Stars */
    .star-rating {
      display: inline-flex;
      gap: 4px;
    }

    .star {
      color: var(--golden-harvest);
    }

    /* Admin Dashboard */
    .admin-sidebar {
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #5D4E37 0%, #453929 100%);
    }

    .admin-sidebar-item {
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .admin-sidebar-item:hover {
      background: rgba(212, 168, 83, 0.2);
      transform: translateX(5px);
    }

    .admin-sidebar-item.active {
      background: var(--golden-harvest);
      color: white;
    }

    /* Stats Card */
    .stat-card {
      background: white;
      border-radius: 20px;
      padding: 20px;
      transition: all 0.3s ease;
      border: 1px solid rgba(93, 78, 55, 0.05);
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(93, 78, 55, 0.1);
    }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      justify-content: center;
      align-items: center;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal-content {
      background: white;
      border-radius: 40px;
      padding: 30px;
      max-width: 600px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      animation: slideUp 0.4s ease;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

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

    /* Tabs */
    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
      animation: fadeInUp 0.4s ease;
    }

    /* Form Validation */
    .form-error {
      color: #e53e3e;
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }

    .form-success {
      color: #38a169;
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }

    /* Checkout Steps */
    .checkout-step {
      transition: all 0.3s ease;
    }

    .checkout-step.completed {
      background: var(--golden-harvest);
      color: white;
    }

    .checkout-step.active {
      background: var(--earth-brown);
      color: white;
    }

    .checkout-step.pending {
      background: #e2e8f0;
      color: #718096;
    }

    /* Spinner */
    .spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(212, 168, 83, 0.3);
      border-radius: 50%;
      border-top-color: var(--golden-harvest);
      animation: spin 1s ease infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Notification Toast */
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: white;
      padding: 16px 24px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      z-index: 3000;
      animation: slideInRight 0.4s ease;
    }

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

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

    /* Profile Photo Upload */
    .photo-upload-area {
      border: 2px dashed var(--golden-harvest);
      border-radius: 20px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .photo-upload-area:hover {
      background: rgba(212, 168, 83, 0.1);
      transform: scale(1.02);
    }

    /* ==================== SPLASH SCREEN ==================== */
    #splash-screen {
      position: fixed;
      inset: 0;
      background: var(--sandy-beige);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    #splash-screen.fade-out {
      opacity: 0;
      transform: scale(1.03);
      pointer-events: none;
    }

    .splash-grain-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 20% 50%, rgba(212, 168, 83, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(122, 158, 126, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 80%, rgba(93, 78, 55, 0.07) 0%, transparent 50%);
    }

    .splash-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .splash-particle {
      position: absolute;
      border-radius: 50%;
      animation: particleFloat linear infinite;
      opacity: 0;
    }

    @keyframes particleFloat {
      0% {
        transform: translateY(110vh) rotate(0deg);
        opacity: 0;
      }

      10% {
        opacity: 0.7;
      }

      90% {
        opacity: 0.4;
      }

      100% {
        transform: translateY(-10vh) rotate(720deg);
        opacity: 0;
      }
    }

    .splash-logo-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      animation: splashLogoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }

    @keyframes splashLogoIn {
      from {
        opacity: 0;
        transform: translateY(30px) scale(0.92);
      }

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

    .splash-icon {
      font-size: 5rem;
      animation: splashIconPulse 2s ease-in-out 1s infinite;
    }

    @keyframes splashIconPulse {

      0%,
      100% {
        transform: scale(1) rotate(-3deg);
      }

      50% {
        transform: scale(1.08) rotate(3deg);
      }
    }

    .splash-brand {
      font-family: 'Merriweather', serif;
      font-size: clamp(2rem, 8vw, 3.5rem);
      font-weight: 700;
      font-style: italic;
      color: var(--earth-brown);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .splash-tagline {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: var(--golden-harvest);
      animation: splashTaglineIn 0.8s ease 0.9s both;
    }

    @keyframes splashTaglineIn {
      from {
        opacity: 0;
        letter-spacing: 0.5em;
      }

      to {
        opacity: 1;
        letter-spacing: 0.25em;
      }
    }

    .splash-bar-wrap {
      margin-top: 2.5rem;
      width: clamp(140px, 30vw, 200px);
      height: 3px;
      background: rgba(93, 78, 55, 0.1);
      border-radius: 99px;
      overflow: hidden;
      animation: splashFadeIn 0.5s ease 0.6s both;
    }

    .splash-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--golden-harvest), var(--sage-green));
      border-radius: 99px;
      animation: splashBarFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
      width: 0%;
    }

    @keyframes splashBarFill {
      to {
        width: 100%;
      }
    }

    @keyframes splashFadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .splash-grain-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(212, 168, 83, 0.2);
      animation: splashRingExpand ease-out both;
    }

    /* ==================== PROFILE PIC IMAGE SUPPORT ==================== */
    .profile-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .profile-avatar-large {
      width: 120px;
      height: 120px;
      border-radius: 1.5rem;
      object-fit: cover;
    }

    /* ==================== NO-FLICKER PARTIAL UPDATE ==================== */
    .counter-badge {
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
    }

    .counter-badge.bump {
      transform: scale(1.5) !important;
    }

    /* Payment Methods */
    .payment-method {
      border: 2px solid rgba(93, 78, 55, 0.1);
      border-radius: 15px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .payment-method:hover {
      border-color: var(--golden-harvest);
      background: rgba(212, 168, 83, 0.05);
    }

    .payment-method.selected {
      border-color: var(--golden-harvest);
      background: rgba(212, 168, 83, 0.1);
    }

    @keyframes splashRingExpand {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }