/* Reset */
       *,
       *::before,
       *::after {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       body {
           background: var(--default-color);
           font-family: var(--font-system);
           line-height: 1.5;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }

       /* Flexbox Layout System */
       .container {
           width: 100%;
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 15px;
       }

       .flex {
           display: flex;
       }

       .flex-center {
           justify-content: center;
           align-items: center;
       }

       .flex-column {
           flex-direction: column;
       }

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

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

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

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

       .text-white {
           color: white;
       }

       .text-muted {
           color: rgb(145, 145, 145);
       }

       /* Spacing */
       .mt-1 {
           margin-top: 0.25rem;
       }

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

       .mt-10 {
           margin-top: 2.5rem;
       }

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

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

       .me-3 {
           margin-right: 1rem;
       }

       .gap-2 {
           gap: 0.5rem;
       }

       /* Cards com GPU acceleration */
       .card {
           background: white;
           border-radius: 30px;
           padding: 10px;
           box-shadow: var(--shadow-light);
           transition: transform var(--transition-fast), box-shadow var(--transition-fast);
           will-change: transform;
           backface-visibility: hidden;
           transform: translateZ(0);
           contain: layout style;
           cursor: pointer;
           max-width: 360px;
           min-width: 300px;
       }

       .card:hover {
           transform: translateY(-5px) translateZ(0);
           box-shadow: var(--shadow-hover);
       }

       /* Images */
       .photo {
           aspect-ratio: 1;
           object-fit: contain;
           max-width: 175px;
           border-radius: var(--border-radius);
           opacity: 0;
           transition: opacity var(--transition-fast);
           will-change: opacity;
           transform: translateZ(0);
       }

       .photo.loaded {
           opacity: 1;
       }

       .seller-image {
           max-width: 48px;
           margin-right: 5px;
           border-radius: 50%;
           aspect-ratio: 1;
           object-fit: cover;
       }

       .content-image {
           display: flex;
           justify-content: center;
           align-items: center;
           height: 175px;
           min-height: 175px;
           contain: layout;
           position: relative;
       }

       /* Buttons */
       .btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           padding: 0.75rem 1.5rem;
           font-size: 1rem;
           font-weight: 500;
           text-decoration: none;
           border: none;
           border-radius: 0.5rem;
           cursor: pointer;
           position: relative;
           overflow: hidden;
           transition: all var(--transition-slow);
           will-change: transform, background-color;
           backface-visibility: hidden;
       }

       .btn:hover {
           transform: translateY(-2px) translateZ(0);
       }

       .btn-lg {
           padding: 0.875rem 2rem;
           font-size: 1.125rem;
       }

       .btn-orange {
           background-color: var(--default-color);
           color: white;
       }

      

       .btn-dashed {
           width: 100%;
           display: flex;
           padding: 8px 12px;
           border: 3px dashed #b0b0b0;
           border-radius: 20px;
           color: var(--default-color);
           align-items: center;
           font-weight: bold;
           text-decoration: none;
           background: white;
           transition: all var(--transition-fast);
           cursor: pointer;
           will-change: transform, border-color, background-color;
       }

       .btn-dashed:hover {
           border-color: var(--default-color);
           background-color: rgba(255, 98, 1, 0.05);
           transform: translateY(-1px) translateZ(0);
       }

       /* Loading */
       .loading {
           display: inline-block;
           width: 20px;
           height: 20px;
           border: 3px solid rgba(255, 98, 1, 0.3);
           border-radius: 50%;
           border-top-color: var(--default-color);
           animation: spin 1s ease-in-out infinite;
           will-change: transform;
       }

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

       /* Responsive Grid */
       .products-grid {
           display: flex;
           flex-wrap: wrap;
           gap: 1.25rem;
           justify-content: center;
           padding: 0 clamp(10px, 5vw, 110px);
           padding-bottom: 50px;
       }

       .product-item {
           display: flex;
           justify-content: center;
       }

       /* Modal */
       .modal {
           display: none;
           position: fixed;
           z-index: 1000;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           overflow: hidden;
           background-color: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
       }

       .modal-content {
           background-color: #fff;
           padding: 20px;
           border-radius: 20px;
           width: 90%;
           max-width: 416px;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           text-align: center;
           font-size: 20px;
           box-shadow: var(--shadow-hover);
       }

       .close {
           color: #aaa;
           font-size: 28px;
           font-weight: bold;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           border-radius: 50%;
           background: transparent;
           border: none;
           transition: all var(--transition-fast);
       }

       .close:hover {
           color: black;
           background-color: rgba(0, 0, 0, 0.1);
       }

       .no-scroll {
           overflow: hidden;
           position: fixed;
           width: 100%;
       }

       /* Mobile optimizations */
       @media (max-width: 767px) {
           .container {
               padding: 0 10px;
           }

           .products-grid {
               padding: 0 10px;
               padding-bottom: 50px;
           }

           .card {
               min-width: 280px;
               max-width: 340px;
           }
       }