:root {
            --paper: #f9f7f2;
            --ink: #1a1c1a;
            --sage: #7e8c79;
            --clay: #c4a484;
            --fibrous-opacity: 0.04;
            --transition: cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* Fibrous Texture Overlay */
        .fibrous-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: var(--fibrous-opacity);
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Typography & Layout */
        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 40px;
        }

        header {
            padding:20px 0 40px 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            border-bottom: 1px solid rgba(26, 28, 26, 0.1);
        }

        .category-meta {
            font-family: 'Uni', monospace;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.2em;
            margin-bottom: 10px;
            color: var(--sage);
        }

        h1 {
            margin-top: 50px;
            font-size: 3rem;
            font-weight: 800;
            line-height: 0.9;
            letter-spacing: -0.04em;
        }

        /* Botanical Watermark */
        .imprint-bg {
            position: absolute;
            top: -10%;
            right: -5%;
            width: 40%;
            opacity: 0.05;
            z-index: -1;
            transform: rotate(15deg);
            pointer-events: none;
        }

        /* Grid System */
        .main-content {
            display: grid;
            gap: 60px;
            padding: 60px 0;
        }

        aside .filter-group {
            margin-bottom: 40px;
        }

        aside h3 {
            font-family: 'Uni', monospace;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 20px;
            color: var(--clay);
        }

        .filter-list {
            list-style: none;
        }

        .filter-list li {
            font-size: 15px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: var(--transition) 0.3s;
            display: flex;
            justify-content: space-between;
        }

        .filter-list li:hover {
            padding-left: 8px;
            color: var(--sage);
        }

        .filter-list li span {
            font-family: 'Uni', monospace;
            font-size: 11px;
            opacity: 0.5;
        }

        /* Product Cards */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 40px;
        }

        .product-card {
            position: relative;
            background: transparent;
            transition: var(--transition) 0.6s;
            text-decoration: none;
            color: inherit;
        }

        .product-card .image-wrapper {
            aspect-ratio: 4/5;
            background: #efeee9;
            overflow: hidden;
            position: relative;
            margin-bottom: 20px;
            /* Debossed effect */
            box-shadow: inset 4px 4px 15px rgba(0,0,0,0.03);
        }

        .product-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(0.2) contrast(1.1);
            transition: transform 0.8s var(--transition);
        }

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

        .product-card . botanical-imprint {
            position: absolute;
            bottom: -10px;
            right: -10px;
            width: 80px;
            height: 80px;
            opacity: 0;
            transition: 0.6s var(--transition);
            mix-blend-mode: multiply;
        }

        .product-card:hover .botanical-imprint {
            opacity: 0.4;
            transform: translateY(-20px) rotate(-10px);
        }

        .product-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .product-name {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .product-category {
            font-family: 'Uni', monospace;
            font-size: 11px;
            text-transform: uppercase;
            opacity: 0.5;
        }

        .product-price {
            font-family: 'Uni', monospace;
            font-size: 16px;
            font-weight: 400;
        }

        /* Buttons & CTAs */
        .btn-organic {
        width: 100%;
          display: block;
          margin-top: 20px;
          padding: 10px 24px;
          border: 1px solid var(--botanical-deep);
          font-family: 'Uni', monospace;
          font-size: 16px;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          background: transparent;
          transition: color 0.4s var(--transition);
          border-radius: 25px;
        }

        .btn-organic::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--botanical-deep);
            transition: transform 0.4s var(--transition);
            z-index: -1;
        }

        .btn-organic:hover {
            color: var(--paper);
        }

        .btn-organic:hover::before {
            transform: translateX(100%);
        }

        /* Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            animation: revealUp 0.8s var(--transition) forwards;
            width: 100%;
        }

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

        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }

        @media (max-width: 968px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            aside {
                display: none;
            }
            header {
                flex-direction: column;
                align-items: flex-start;
            }

            h1{
                font-size: 2rem;
            }
        }

        .mt-10{
          margin-top: 120px;
        }

        a.product-card.reveal.stagger-1 {
          padding: 25px;
          border: 1px solid #d1c9bc;
          
      }