#product{width:80%;margin:0 auto;padding:5rem 0;text-align:center}

#product .product_title{font-size:30px;line-height:40px;font-weight:bold;color:#0033a8;}
#product .product_synopsis{margin-top:10px;font-size:16px;color:#333;}

#product .product_classification{margin:2.5rem 0 3.5rem}
#product .classification-container{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:0 auto}
#product .classification-item{padding:12px 24px;background-color:#fff;border:1px solid #e0e0e0;border-radius:30px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,51,168,0.05)}
#product .classification-item:hover,.classification-item.active{background:linear-gradient(135deg,#0033a8 0%,#4d9eff 100%);color:white;box-shadow:0 2px 10px rgba(0,102,255,0.3);}


#product .product_list{margin-top:2rem}
#product .products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(23.2%,1fr));gap:30px;margin:0 auto}
#product .product-card{background-color:white;border-radius:16px;overflow:hidden;box-shadow:0 8px 25px rgba(0,51,168,0.08);transition:all 0.3s ease;position:relative;cursor:pointer;}
#product .product-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,102,255,0.2)}
#product .product-image{overflow:hidden;position:relative;min-height:160px;background-color:#f5f8ff}
#product .product-image img{width:100%;height:100%;object-fit:contain;transition:transform 0.5s ease}
#product .product-card:hover .product-image img{transform:scale(1.15)}
#product .product-info{padding:25px 20px;position:relative;background:white}
#product .product-name{font-size:16px;margin-bottom:8px;color:#666;transition:color 0.3s ease}
#product .product-card:hover .product-name{color:#0033a8}
#product .product-category{font-size:0.9rem;color:#777;background:#f2f8ff;display:inline-block;padding:4px 12px;border-radius:20px;margin-bottom:15px}
#product .product-description{font-size:0.95rem;color:#555;margin-top:10px;line-height:1.6}
#product .view-more{margin-top:4rem;position:relative;z-index:1}
#product .view-more-btn{display:inline-flex;align-items:center;padding:16px 48px;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#0033a8 0%,#4d9eff 100%);border:none;border-radius:50px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 6px 20px rgba(0,102,255,0.3);position:relative;overflow:hidden}
#product .view-more-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,102,255,0.4)}
#product .view-more-btn i{margin-left:10px;transition:transform 0.3s ease}
#product .view-more-btn:hover i{transform:translateX(5px)}
#product .view-more-btn:active{transform:translateY(1px)}
#product .product-card:hover .image-overlay{opacity:1}

#product .image-placeholder{position:absolute;width:100%;height:100%;;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e6eeff 0%,#d0e0ff 100%);z-index:1}
#product .spinner{width:50px;height:50px;border:4px solid rgba(0,51,168,0.1);border-radius:50%;border-top:4px solid #0033a8;animation:spin 1s linear infinite}
#product .placeholder-content{text-align:center;color:#0033a8;font-weight:500}
#product .placeholder-content i{font-size:2rem;margin-bottom:10px;color:#4d9eff}


#product .sub-classification-container{display:flex;justify-content:center;flex-wrap:wrap;gap:25px;margin:0 auto 0;padding:0;background:transparent;border-radius:16px;transition:all 0.4s ease;opacity:0;height:0;overflow:hidden}
#product .sub-classification-container.active{opacity:1;height:auto;padding:25px 20px;margin-top:30px;animation:fadeIn 0.6s ease}
#product .sub-classification-item{flex:0 0 calc(20% 0px);padding:25px 10px 5px 10px;background-color:#fff;border-radius:16px;cursor:pointer;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);font-size:1rem;color:#555;box-shadow:0 8px 25px rgba(0,51,168,0.1);position:relative;overflow:hidden;z-index:1;display:flex;flex-direction:column;align-items:center}
#product .sub-classification-item:before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#4d9eff,#0033a8);opacity:0;transition:opacity 0.3s ease}
#product .sub-classification-item:hover,#product .sub-classification-item.active{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,102,255,0.25);color:#0033a8}
#product .sub-classification-item:hover:before,#product .sub-classification-item.active:before{opacity:1}
#product .sub-classification-item:hover .sub-icon,#product .sub-classification-item.active .sub-icon{transform:scale(1.1) translateY(-5px);color:#0033a8}
#product .sub-icon{font-size:2.5rem;margin-bottom:18px;color:#4d9eff;transition:all 0.3s ease}
#product .sub-title{font-size:15px;margin-bottom:8px}
#product .sub-desc{font-size:0.9rem;color:#777;line-height:1.5}


@keyframes pulse{0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}


@media (max-width: 1560px) {
#product .products-grid > div:nth-child(7){display:none;}
#product .products-grid > div:nth-child(8){display:none;}
}

@media (max-width:1200px){
 #product{width:94%;}
}

@media (max-width: 992px) {
#product .sub-classification-item{flex: 0 0 calc(33.333% 0px);}
}

@media (max-width:768px){
#product .stats-bar{flex-direction:column;gap:30px;padding:2rem 1rem}
#product .product_title{font-size:2.2rem}
#product .sub-classification-item {flex: 0 0 calc(50% 0px);}		
}

@media (max-width: 600px) {
#product .products-grid{grid-template-columns:repeat(auto-fill,minmax(46%,1fr))}
#product .products-grid > div:nth-child(5){display:none;}
#product .products-grid > div:nth-child(6){display:none;}
}

@media (max-width: 480px) {         
#product .sub-classification-item {flex: 0 0 100%;}
}