.body{background-color:#f3f4f6;display:flex;flex-direction:column;min-height:100vh;font-family:sans-serif}.container{max-width:1280px;width:100%;margin:0 auto;padding:32px 16px;flex-grow:1}.flex{display:flex}.flex-row{flex-direction:row}.space-y-4>*+*{margin-top:16px}.space-y-2>*+*{margin-top:8px}.justify-between{justify-content:space-between}.items-center{align-items:center}.mb-6{margin-bottom:24px}.mb-4{margin-bottom:16px}.mt-auto{margin-top:auto}.heading-1{font-size:30px;font-weight:700;color:#1f2937}.text-sm{font-size:14px}.text-lg{font-size:18px}.font-medium{font-weight:500}.text-gray-700{color:#4b5563}.text-gray-500{color:#6b7280}.text-white{color:#fff}.button-primary{background-color:#3b82f6;color:#fff;padding:8px 16px;border-radius:8px;text-decoration:none;transition:background-color .2s}.button-primary:hover{background-color:#2563eb}.button-primary:focus{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #3b82f6}.button-icon{color:#4b5563;transition:color .2s}.button-icon:hover{color:#1f2937}.button-icon:focus{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #3b82f6}.input-text{border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;width:100%;transition:border-color .2s,box-shadow .2s}.input-text:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f6}.input-checkbox{width:16px;height:16px;accent-color:#3b82f6;transition:box-shadow .2s}.input-checkbox:focus{outline:none;box-shadow:0 0 0 2px #3b82f6}.select{border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;width:100%;transition:border-color .2s,box-shadow .2s}.select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f6}.label{display:block;font-size:14px;font-weight:500;color:#4b5563;margin-bottom:8px}.inline-flex{display:inline-flex;align-items:center}.sidebar{background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 1px 3px #0000001a;width:100%;margin-right:24px}@media (min-width: 768px){.sidebar{width:25%;margin-bottom:0}}.main-content{width:100%}@media (min-width: 768px){.main-content{width:75%}}.product-grid{display:flex;flex-wrap:wrap;gap:5px;width:100%}.product-card{border:1px solid #e5e7eb;border-radius:8px;padding:10px;background-color:#fff;box-shadow:0 1px 3px #0000001a;width:175px;position:relative;transition:box-shadow .2s}.product-card:hover{box-shadow:0 4px 6px #00000026}.product-image{margin-bottom:16px}.product-image img{width:100%;object-fit:cover;border-radius:8px}.product-name{font-size:20px;font-weight:600;margin-bottom:8px;color:#1f2937}.product-colors{margin-bottom:8px}.product-colors p{font-size:14px;color:#4b5563;margin-bottom:4px}.product-colors .flex{gap:8px}.color-swatch{display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid #ddd;margin-right:5px;cursor:pointer;transition:border-color .2s}.color-swatch:hover{border-color:#000}.product-price{margin-bottom:16px}.product-price p{font-size:18px;font-weight:700;color:#1f2937}.product-price .text-gray-500{font-size:14px;color:#6b7280}.product-link{display:inline-block;background-color:#3b82f6;color:#fff;padding:8px 16px;border-radius:4px;text-decoration:none;transition:background-color .2s}.product-link:hover{background-color:#2563eb}.loading{display:none;text-align:center;margin:24px 0}.filter-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:50;overflow-y:auto}.filter-modal-content{background-color:#fff;width:100%;max-width:448px;padding:24px}.footer{background-color:#1f2937;color:#fff;text-align:center;padding:16px 0}@media (max-width: 767px){.hidden-md{display:none}}@media (min-width: 768px){.block-md{display:block}#open-filter-modal{display:none}}.filter-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;color:#4b5563;margin-bottom:8px;background:none;border:none;cursor:pointer}.filter-toggle svg{width:20px;height:20px;transition:transform .3s}.filter-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.hidden{display:none}.product-grid,.product-card{flex:none;margin:0;position:static;float:none}