/* ============================================
   SHOP PAGE
   ============================================ */

.shop-main {
    padding-top: 0;
    min-height: 100vh;
    background-color: var(--primary-white);
    position: relative;
}

      .shop-layout {
          display: grid;
          grid-template-columns: clamp(250px, 25vw, 320px) 1fr;
          gap: 0;
          min-height: 100vh;
}

      /* ============================================
         FILTERS SIDEBAR
         ============================================ */
      
      .shop-filters {
          background-color: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          border-right: 1px solid rgba(0, 0, 0, 0.06);
          padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 24px);
          position: sticky;
          top: 0;
          height: 100vh;
          overflow-y: auto;
          overscroll-behavior: contain;
          z-index: 100;
}

      @media screen and (max-width: 900px) {
          .shop-filters {
              position: fixed;
              top: clamp(60px, 8vw, 70px);
              left: 0;
              right: 0;
              bottom: 0;
    width: 100%;
              height: calc(100vh - clamp(60px, 8vw, 70px));
              z-index: 999997;
              transform: translateX(-100%);
              transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              border-right: none;
              border-top: 1px solid rgba(0, 0, 0, 0.06);
              overflow-y: auto;
              background-color: rgba(255, 255, 255, 0.4);
              backdrop-filter: blur(40px) saturate(180%);
              -webkit-backdrop-filter: blur(40px) saturate(180%);
}

          .shop-filters.active {
              transform: translateX(0);
          }
}

      .filters-header {
    display: flex;
          justify-content: space-between;
    align-items: center;
          margin-bottom: clamp(24px, 3vw, 32px);
          padding-bottom: clamp(12px, 1.5vw, 16px);
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

      .filters-header-actions {
          display: flex;
          align-items: center;
          gap: clamp(12px, 1.5vw, 16px);
      }

      .filters-title {
    font-family: var(--font-primary);
          font-size: clamp(10px, 1.2vw, 14px);
          font-weight: 700;
          letter-spacing: 0.15em;
    color: var(--primary-black);
          text-transform: uppercase;
          margin: 0;
}

      .filters-clear {
    font-family: var(--font-primary);
          font-size: clamp(9px, 1vw, 12px);
          font-weight: 500;
          letter-spacing: 0.1em;
    color: var(--primary-black);
          text-transform: uppercase;
          background: transparent;
          border: none;
    cursor: pointer;
          padding: clamp(4px, 0.5vw, 6px) 0;
          opacity: 0.6;
          transition: opacity 0.3s ease;
      }
      
      .filters-clear:hover {
          opacity: 1;
}

      .filters-close {
          display: none;
          font-family: var(--font-primary);
          font-size: clamp(18px, 2.2vw, 24px);
          font-weight: 300;
          color: var(--primary-black);
          background: transparent;
          border: none;
          cursor: pointer;
          padding: clamp(4px, 0.5vw, 6px);
          line-height: 1;
          transition: opacity 0.3s ease, transform 0.3s ease;
          opacity: 0.7;
      }

      .filters-close:hover {
          opacity: 1;
          transform: rotate(90deg);
      }

      @media screen and (max-width: 900px) {
          .filters-close {
              display: block;
          }
      }

      .filter-group {
          margin-bottom: clamp(20px, 2.5vw, 28px);
}

      .filter-group-title {
    font-family: var(--font-primary);
          font-size: clamp(9px, 1.1vw, 13px);
          font-weight: 600;
          letter-spacing: 0.1em;
    color: var(--primary-black);
          text-transform: uppercase;
          margin: 0 0 clamp(12px, 1.5vw, 16px) 0;
}

      .filter-options {
          display: flex;
          flex-direction: column;
          gap: clamp(8px, 1vw, 12px);
}

      .filter-option {
    display: flex;
    align-items: center;
          gap: clamp(8px, 1vw, 12px);
    cursor: pointer;
          padding: clamp(4px, 0.5vw, 6px) 0;
          transition: opacity 0.3s ease;
}

      .filter-option:hover {
          opacity: 0.7;
}

      .filter-checkbox {
          width: clamp(12px, 1.2vw, 14px);
          height: clamp(12px, 1.2vw, 14px);
          cursor: pointer;
          accent-color: var(--primary-black);
      }
      
      .filter-label {
    font-family: var(--font-primary);
          font-size: clamp(9px, 1vw, 12px);
    font-weight: 400;
          letter-spacing: 0.05em;
          color: var(--primary-black);
          text-transform: uppercase;
          user-select: none;
}

      .price-range {
          display: flex;
          flex-direction: column;
          gap: clamp(8px, 1vw, 12px);
}

      .price-range-container {
          position: relative;
          width: 100%;
          height: clamp(12px, 1.2vw, 14px);
          margin-bottom: clamp(8px, 1vw, 12px);
}

      .price-range-container::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 4px;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 2px;
          transform: translateY(-50%);
}

.price-slider {
    position: absolute;
    width: 100%;
          height: 4px;
    background: transparent;
          outline: none;
          cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
          top: 50%;
          transform: translateY(-50%);
          margin: 0;
}

      .price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
          width: clamp(12px, 1.2vw, 14px);
          height: clamp(12px, 1.2vw, 14px);
          background: var(--primary-black);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
          position: relative;
          z-index: 2;
}

      .price-slider::-moz-range-thumb {
          width: clamp(12px, 1.2vw, 14px);
          height: clamp(12px, 1.2vw, 14px);
          background: var(--primary-black);
    border-radius: 50%;
          border: none;
    cursor: pointer;
    pointer-events: all;
          position: relative;
          z-index: 2;
      }
      
      .price-slider-min {
          z-index: 1;
      }
      
      .price-slider-max {
          z-index: 0;
}

.price-values {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-primary);
          font-size: clamp(9px, 1vw, 12px);
          font-weight: 400;
          letter-spacing: 0.05em;
    color: var(--primary-black);
}

      /* ============================================
         PRODUCTS SECTION
         ============================================ */
      
      .shop-products {
          padding: 0 clamp(24px, 3vw, 48px);
    background-color: var(--primary-white);
          display: flex;
          flex-direction: column;
          height: 100vh;
}

      .products-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: clamp(12px, 1.5vw, 20px);
          padding: clamp(12px, 1.5vw, 20px) 0 clamp(10px, 1.2vw, 14px) 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
          background-color: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          position: sticky;
          top: clamp(72px, 9vw, 96px);
          z-index: 90;
    flex-shrink: 0;
          margin-bottom: 0;
}

      
      
      
      
.products-controls {
    display: flex;
    gap: clamp(12px, 1.5vw, 18px);
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}

      .products-search {
    font-family: var(--font-primary);
          font-size: clamp(9px, 1vw, 12px);
    font-weight: 400;
          letter-spacing: 0.05em;
    color: var(--primary-black);
          background: rgba(240, 240, 240, 0.9);
          border: 1px solid transparent;
          border-radius: 50px;
          padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.5vw, 28px);
          width: clamp(280px, 35vw, 400px);
          transition: all 0.3s ease;
          flex: 1;
          max-width: clamp(400px, 50vw, 600px);
}

      .products-search:focus {
          outline: none;
          background: rgba(245, 245, 245, 1);
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

      .products-search::placeholder {
          color: rgba(0, 0, 0, 0.4);
          text-transform: uppercase;
          letter-spacing: 0.05em;
      }
      
      .products-sort {
    font-family: var(--font-primary);
          font-size: clamp(9px, 1vw, 12px);
    font-weight: 500;
          letter-spacing: 0.1em;
    color: var(--primary-black);
          text-transform: uppercase;
          background: transparent;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: var(--border-radius-sm);
          padding: clamp(6px, 0.8vw, 8px) clamp(12px, 1.5vw, 16px);
    cursor: pointer;
          transition: border-color 0.3s ease;
          -webkit-appearance: none;
          appearance: none;
          background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right clamp(8px, 1vw, 12px) center;
          padding-right: clamp(24px, 3vw, 32px);
}

      .products-sort:hover {
          border-color: rgba(0, 0, 0, 0.2);
}

      .products-sort:focus {
          outline: none;
    border-color: var(--primary-black);
}

      .shop-products-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 18vw, 220px), 1fr));
          gap: clamp(16px, 2vw, 24px);
          align-items: start;
          padding: clamp(20px, 2.5vw, 32px) 0;
          overflow-y: auto;
          flex: 1;
          overscroll-behavior: contain;
}

      .shop-product-card {
    display: flex;
    flex-direction: column;
          gap: clamp(8px, 1vw, 12px);
          padding: clamp(10px, 1.2vw, 14px);
          background-color: var(--primary-white);
          border-radius: var(--border-radius-md);
          border: 1px solid rgba(0, 0, 0, 0.04);
          box-shadow: var(--shadow-sm);
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          cursor: pointer;
          opacity: 1;
          transform: scale(1);
}

      .shop-product-card:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-md);
          border-color: rgba(0, 0, 0, 0.08);
}

      .shop-product-card.hidden {
          display: none;
}

      .shop-product-image {
          width: 100%;
          aspect-ratio: 1;
          overflow: hidden;
          border-radius: var(--border-radius-sm);
          background: linear-gradient(135deg, rgba(250, 250, 250, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(8px, 1vw, 12px);
          border: 1px solid rgba(0, 0, 0, 0.04);
}

      .shop-product-img {
    width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          display: block;
}

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

      .shop-product-info {
    display: flex;
    flex-direction: column;
          gap: clamp(4px, 0.5vw, 6px);
}

      .shop-product-title {
    font-family: var(--font-primary);
          font-size: clamp(10px, 1.2vw, 13px);
          font-weight: 600;
          letter-spacing: 0.05em;
    color: var(--primary-black);
          text-transform: uppercase;
          margin: 0;
          line-height: 1.3;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          min-height: calc(clamp(10px, 1.2vw, 13px) * 1.3 * 2);
}

      .shop-product-category {
    font-family: var(--font-primary);
          font-size: clamp(8px, 0.9vw, 10px);
          font-weight: 400;
          letter-spacing: 0.05em;
          color: rgba(0, 0, 0, 0.5);
          text-transform: uppercase;
    margin: 0;
}

      .shop-product-footer {
    display: flex;
          justify-content: space-between;
    align-items: center;
          margin-top: clamp(4px, 0.5vw, 6px);
}

      .shop-product-rating {
    font-family: var(--font-primary);
          font-size: clamp(8px, 0.9vw, 10px);
          font-weight: 400;
          letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.6);
      }
      
      .shop-product-price {
          font-family: var(--font-mono);
          font-size: clamp(11px, 1.3vw, 14px);
          font-weight: 600;
          letter-spacing: 0.05em;
          color: var(--primary-black);
      }
      
      .shop-product-price-original {
          font-family: var(--font-mono);
          font-size: clamp(8px, 1vw, 10px);
          font-weight: 300;
          letter-spacing: 0.05em;
          color: rgba(0, 0, 0, 0.5);
          text-decoration: line-through;
      }

      /* ============================================
         SHOP PAGE HEADER
         ============================================ */
      
      .shop-page-header {
          /* Hidden visually but present in HTML for SEO */
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
      }
      
      .shop-page-title {
          /* Hidden visually but present in HTML for SEO */
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
      }
      
      .shop-page-description {
          /* Hidden visually but present in HTML for SEO */
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
      }

      /* ============================================
         RESPONSIVE
         ============================================ */

@media screen and (max-width: 900px) {
          .shop-layout {
              grid-template-columns: 1fr;
          }
      
          .shop-filters {
              position: fixed;
              top: 0;
              left: -100%;
              width: clamp(250px, 70vw, 320px);
              height: 100vh;
              z-index: 9999;
              transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
              box-shadow: var(--shadow-lg);
    }

          .shop-filters.active {
              left: 0;
    }

          .shop-products {
              padding: 0 clamp(16px, 2vw, 24px);
              height: 100vh;
    }

          .products-header {
              flex-direction: column;
              align-items: stretch;
              gap: clamp(10px, 1.2vw, 14px);
              padding: clamp(12px, 1.5vw, 18px) 0 clamp(10px, 1.2vw, 14px) 0;
              top: clamp(60px, 8vw, 70px);
              z-index: 90;
    }

          .products-nav-buttons {
              width: 100%;
              justify-content: flex-start;
    }
      
          .products-controls {
        flex-direction: column;
              width: 100%;
              align-items: stretch;
    }

          .products-search {
              width: 100%;
              max-width: 100%;
    }

          .shop-products-grid {
              grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 40vw, 180px), 1fr));
              gap: clamp(12px, 1.5vw, 16px);
              padding: clamp(16px, 2vw, 24px) 0;
    }
}

@media screen and (max-width: 600px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(10px, 1.2vw, 14px);
    }

    .shop-product-card {
        padding: clamp(10px, 1.2vw, 14px);
    }
    
    .shop-products {
        padding: 0 clamp(12px, 2vw, 20px);
    }
    
    .products-header {
        padding: clamp(10px, 1.3vw, 16px) 0 clamp(8px, 1.1vw, 12px) 0;
    }
    
    .shop-product-img {
        max-height: clamp(120px, 30vw, 160px);
    }
    
    .shop-product-title {
        font-size: clamp(10px, 1.3vw, 12px);
    }
    
    .shop-product-price {
        font-size: clamp(12px, 1.6vw, 14px);
    }
}

@media screen and (max-width: 400px) {
    .shop-products-grid {
        grid-template-columns: 1fr;
        gap: clamp(12px, 1.5vw, 16px);
    }
    
    .shop-product-card {
        padding: clamp(12px, 1.5vw, 16px);
    }
    
    .shop-products {
        padding: 0 clamp(10px, 1.5vw, 16px);
    }
    
    .shop-product-img {
        max-height: clamp(200px, 50vw, 250px);
    }
    
    .shop-product-title {
        font-size: clamp(11px, 1.4vw, 13px);
    }
    
    .shop-product-price {
        font-size: clamp(13px, 1.7vw, 15px);
    }
}