.button{align-items:center;border:none;border-radius:8px;box-shadow:0 2px 4px #0000001a;cursor:pointer;display:inline-flex;font-family:Arial,sans-serif;font-size:14px;font-weight:600;justify-content:center;min-width:120px;padding:12px 24px;text-decoration:none;transition:all .3s ease}.button:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.button:active{transform:translateY(0)}.button:disabled{box-shadow:0 2px 4px #0000001a;cursor:not-allowed;opacity:.6;transform:none}.button--primary{background-color:#007bff;color:#fff}.button--primary:hover:not(:disabled){background-color:#0056b3}.button--secondary{background-color:#6c757d;color:#fff}.button--secondary:hover:not(:disabled){background-color:#545b62}.button--success{background-color:#28a745;color:#fff}.button--success:hover:not(:disabled){background-color:#1e7e34}.button--danger{background-color:#dc3545;color:#fff}.button--danger:hover:not(:disabled){background-color:#c82333}.button--outline.button--primary{background-color:initial;border:2px solid #007bff;color:#007bff}.button--outline.button--primary:hover:not(:disabled){background-color:#007bff;color:#fff}.button--outline.button--secondary{background-color:initial;border:2px solid #6c757d;color:#6c757d}.button--outline.button--secondary:hover:not(:disabled){background-color:#6c757d;color:#fff}.button--outline.button--success{background-color:initial;border:2px solid #28a745;color:#28a745}.button--outline.button--success:hover:not(:disabled){background-color:#28a745;color:#fff}.button--outline.button--danger{background-color:initial;border:2px solid #dc3545;color:#dc3545}.button--outline.button--danger:hover:not(:disabled){background-color:#dc3545;color:#fff}.card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 4px 6px #00000012;cursor:pointer;max-width:320px;overflow:hidden;padding:20px;transition:all .3s ease}.card:hover{border-color:#007bff;box-shadow:0 8px 25px #00000026;transform:translateY(-4px)}.card__image{border-radius:8px;height:220px;margin-bottom:16px;object-fit:cover;transition:transform .3s ease;width:100%}.card:hover .card__image{transform:scale(1.05)}.card__title{color:#333;font-family:Arial,sans-serif;font-size:20px;font-weight:700;line-height:1.3;margin:0 0 12px}.card__description{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-family:Arial,sans-serif;font-size:14px;line-height:1.5;margin-bottom:16px;overflow:hidden}.card__price{color:#007bff;font-size:24px;font-weight:700;margin-bottom:12px}.card__price,.card__stock{font-family:Arial,sans-serif}.card__stock{border-radius:4px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:16px;padding:4px 8px;text-transform:uppercase}.card__stock--in-stock{background-color:#d4edda;color:#155724}.card__stock--out-of-stock{background-color:#f8d7da;color:#721c24}.card__button{margin-top:8px;width:100%}.list-container{margin:0 auto;max-width:1200px;padding:32px 20px}.list-header{margin-bottom:32px;text-align:center}.list-title{color:#333;font-family:Arial,sans-serif;font-size:32px;font-weight:700;margin-bottom:16px}.list-controls{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:32px}.list-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-items:center}@media (max-width:768px){.list-grid{gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:480px){.list-grid{gap:16px;grid-template-columns:1fr}}.list-vertical{display:flex;flex-direction:column;gap:20px}.list-item{align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 2px 4px #0000000d;display:flex;gap:20px;padding:20px;transition:all .3s ease}.list-item:hover{border-color:#007bff;box-shadow:0 8px 25px #0000001a;transform:translateY(-2px)}.list-item__image{border-radius:8px;flex-shrink:0;height:120px;object-fit:cover;width:120px}.list-item__content{flex:1 1;min-width:0}.list-item__title{color:#333;font-family:Arial,sans-serif;font-size:20px;font-weight:700;margin:0 0 8px}.list-item__description{color:#666;font-family:Arial,sans-serif;font-size:14px;line-height:1.5;margin-bottom:12px}.list-item__price{color:#007bff;font-family:Arial,sans-serif;font-size:18px;font-weight:700;margin-bottom:8px}.list-item__stock{border-radius:4px;display:inline-block;font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;padding:4px 8px;text-transform:uppercase}.list-item__stock--in-stock{background-color:#d4edda;color:#155724}.list-item__stock--out-of-stock{background-color:#f8d7da;color:#721c24}.list-item__button{flex-shrink:0;margin-left:20px}@media (max-width:768px){.list-item{flex-direction:column;text-align:center}.list-item__image{height:200px;max-width:200px;width:100%}.list-item__button{margin-left:0;margin-top:16px}}.button-showcase{font-family:Arial,sans-serif;margin:0 auto;max-width:1200px;padding:40px 20px}.button-grid{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.button-item{align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;display:flex;flex-direction:column;gap:12px;padding:20px}.button-code{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;color:#495057;font-family:Courier New,monospace;font-size:12px;line-height:1.4;padding:8px 12px;text-align:center;word-break:break-all}.use-case h3{margin-bottom:16px}.use-case-buttons{display:flex;flex-wrap:wrap;gap:12px}@media (max-width:768px){.button-grid{grid-template-columns:1fr}.use-case-buttons{flex-direction:column}.props-documentation{font-size:14px}.props-documentation td,.props-documentation th{padding:8px 12px}}.card-showcase{font-family:Arial,sans-serif;margin:0 auto;max-width:1200px;padding:40px 20px}.showcase-section{margin-bottom:50px}.card-grid{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.card-item{align-items:center;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 2px 4px #0000000d;display:flex;flex-direction:column;gap:16px;padding:20px}.card-code,.card-item{background-color:#f8f9fa}.card-code{border:1px solid #e9ecef;border-radius:4px;color:#495057;font-family:Courier New,monospace;font-size:12px;overflow-x:auto;padding:12px;text-align:left;white-space:pre;width:100%}.card-description{color:#666;font-size:14px;font-style:italic;margin:0;text-align:center}.use-cases{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.use-case{padding:20px}.use-case h3{font-size:18px}.use-case p{line-height:1.5}.use-case-demo{display:flex;justify-content:center}.code-example{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px}.code-example pre{color:#495057;font-family:Courier New,monospace;font-size:14px;line-height:1.5;margin:0}@media (max-width:768px){.card-grid{grid-template-columns:1fr}.card-item{padding:16px}}.list-showcase{font-family:Arial,sans-serif;margin:0 auto;max-width:1400px;padding:40px 20px}.showcase-title{color:#333;font-size:36px;font-weight:700;margin-bottom:40px;text-align:center}.showcase-section{margin-bottom:60px}.section-title{border-bottom:2px solid #007bff;color:#333;font-size:24px;font-weight:600;margin-bottom:20px;padding-bottom:8px}.list-demo{background-color:#fff;border:2px solid #e0e0e0;border-radius:12px;margin-bottom:16px;padding:20px}.list-code{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;color:#495057;display:block;font-family:Courier New,monospace;font-size:14px;overflow-x:auto;padding:16px;white-space:pre}.use-cases{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.use-case{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:24px}.use-case h3{color:#333;font-size:20px;font-weight:600;margin-bottom:12px}.use-case p{color:#666;line-height:1.6;margin-bottom:16px}.use-case-description ul{color:#555;padding-left:20px}.use-case-description li{line-height:1.5;margin-bottom:6px}.view-comparison{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.view-type{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:24px}.view-type h3{color:#007bff;font-size:18px;font-weight:600;margin-bottom:16px}.view-type ul{color:#555;padding-left:20px}.view-type li{line-height:1.5;margin-bottom:8px}.features-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.feature{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:20px;text-align:center}.feature h4{color:#333;font-size:16px;font-weight:600;margin-bottom:12px}.feature p{color:#666;font-size:14px;line-height:1.5;margin:0}.props-table{overflow-x:auto}.props-documentation{background-color:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 4px #0000000d;overflow:hidden;width:100%}.props-documentation td,.props-documentation th{border-bottom:1px solid #e0e0e0;padding:12px 16px;text-align:left}.props-documentation th{background-color:#f8f9fa;color:#333;font-weight:600}.props-documentation td code{background-color:#f8f9fa;border-radius:3px;color:#e83e8c;font-family:Courier New,monospace;font-size:12px;padding:2px 6px}.props-documentation tr:hover{background-color:#f8f9fa}@media (max-width:768px){.list-demo{padding:12px}.features-grid,.use-cases,.view-comparison{grid-template-columns:1fr}.props-documentation{font-size:14px}.props-documentation td,.props-documentation th{padding:8px 12px}}.demo-description{background-color:#f8f9fa;border-left:3px solid #007bff;border-radius:6px;color:#666;font-size:14px;margin-top:12px;padding:12px}.filter-examples{display:flex;flex-direction:column;gap:40px}.filter-example{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px}.filter-example h3{color:#007bff;font-size:18px;margin-bottom:16px}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.stat-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:20px;text-align:center}.stat-card h4{color:#666;font-size:14px;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.stat-number{color:#007bff;font-size:32px;font-weight:700}.app-container{font-family:Arial,sans-serif}.error-container,.loading-container{align-items:center;display:flex;font-family:Arial,sans-serif;font-size:18px;height:100vh;justify-content:center}.error-container{color:#dc3545}.app-header{align-items:center;background-color:#007bff;box-shadow:0 2px 4px #0000001a;color:#fff;display:flex;justify-content:space-between;padding:16px 20px}.app-header__title{font-size:24px;font-weight:700;margin:0}.app-header__cart{align-items:center;display:flex;font-size:16px;font-weight:600;gap:8px}.filters-section{background-color:#f8f9fa;border-bottom:1px solid #e0e0e0;padding:20px}.filters-container{margin:0 auto;max-width:1200px}.search-container{margin-bottom:16px}.search-input{border:1px solid #ddd;border-radius:8px;font-family:Arial,sans-serif;font-size:14px;max-width:400px;padding:12px 16px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.search-input:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff1a;outline:none}.search-input::placeholder{color:#6c757d}.filter-buttons{display:flex;flex-wrap:wrap;gap:12px}.filter-button{background-color:#fff;border:2px solid #007bff;border-radius:8px;color:#007bff;cursor:pointer;font-family:Arial,sans-serif;font-size:14px;font-weight:500;min-width:80px;padding:10px 20px;transition:all .3s ease}.filter-button:hover{background-color:#007bff;box-shadow:0 4px 8px #007bff33;color:#fff;transform:translateY(-2px)}.filter-button:active{transform:translateY(0)}.filter-button--active{background-color:#007bff;color:#fff}@media (max-width:768px){.app-header{flex-direction:column;gap:12px;padding:16px;text-align:center}.app-header__title{font-size:20px}.filters-section{padding:16px}.search-input{max-width:100%}.filter-buttons{justify-content:center}.filter-button{flex:1 1;min-width:calc(50% - 6px)}}@media (max-width:480px){.filter-button{flex:1 1;min-width:100%}}.app-header__nav{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.nav-button{background-color:initial;border:2px solid #fff;border-radius:6px;color:#fff;cursor:pointer;font-family:Arial,sans-serif;font-size:14px;font-weight:500;padding:8px 16px;transition:all .3s ease;white-space:nowrap}.nav-button--active,.nav-button:hover{background-color:#fff;color:#007bff}@media (max-width:768px){.app-header{flex-direction:column;gap:16px;padding:16px;text-align:center}.app-header__nav{justify-content:center}.nav-button{font-size:12px;padding:6px 12px}}*{box-sizing:border-box;padding:0}*,body{margin:0}body{background-color:#f8f9fa;color:#333;line-height:1.6}body,h1,h2,h3,h4,h5,h6{font-family:Arial,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:600}button{font-family:Arial,sans-serif}img{height:auto;max-width:100%}input{font-family:Arial,sans-serif}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-center{text-align:center}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
/*# sourceMappingURL=main.8592046f.css.map*/