:root {
    --primary: #e66f1a;
    --secondary: #00175a;
    --text: #222;
    --muted: #6b7280;
    --white: #fff;
    --light: #f7f8fa;
    --border: #e5e7eb;
    --success: #16a34a;
    --danger: #dc2626;
}

/* BANNER */
.page-banner {
    min-height: 300px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(0, 23, 90, 0.96),
            rgba(0, 23, 90, 0.99)
        );
    color: var(--white);
}

.banner-content {
    max-width: 650px;
}


.page-banner h1 {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.1;
    margin-bottom: 15px;
}

.page-banner p {
    color: #e5e7eb;
    font-size: 17px;
    max-width: 550px;
}

/* PRODUCTS SECTION */

.products-section { padding: 60px 0; background: #f8f9fa; } .products-section .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* ========================================== SEARCH BOX ========================================== */ .product-toolbar { display: flex; justify-content: center; margin-bottom: 25px; } .search-box { width: 100%; max-width: 600px; position: relative; } .search-box input { width: 100%; height: 52px; padding: 0 60px 0 18px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #333; font-size: 16px; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .search-box input::placeholder { color: #999; } .search-box input:focus { border-color: #E66F1A; box-shadow: 0 0 0 3px rgba(230, 111, 26, 0.1); } /* ========================================== SEARCH BUTTON ========================================== */ .search-box button { position: absolute; top: 0; right: 0; width: 52px; height: 52px; border: 0; border-radius: 0 8px 8px 0; background: #E66F1A; color: #fff; cursor: pointer; font-size: 17px; transition: background 0.3s ease; } .search-box button:hover { background: #cc5d12; } /* ========================================== RESULT INFO ========================================== */ .result-info { margin-bottom: 20px; } .result-info p { margin: 0; color: #666; font-size: 15px; } .result-info strong { color: #E66F1A; } /* ========================================== PRODUCT GRID ========================================== */ .products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; } /* ========================================== PRODUCT CARD ========================================== */ .product-card { position: relative; background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } /* ========================================== PRODUCT IMAGE ========================================== */ .product-image { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; background: #f7f7f7; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: contain; padding: 20px; } /* ========================================== PRODUCT BADGE ========================================== */ .product-badge { position: absolute; top: 15px; left: 15px; padding: 5px 10px; border-radius: 4px; background: #E66F1A; color: #fff; font-size: 12px; font-weight: 700; } /* ========================================== PRODUCT CONTENT ========================================== */ .product-content { padding: 20px; } .product-category { margin-bottom: 7px; color: #E66F1A; font-size: 12px; font-weight: 700; text-transform: uppercase; } .product-name { margin: 0 0 10px; color: #00175A; font-size: 20px; line-height: 1.3; } .product-description { margin: 0 0 20px; color: #666; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================== PRODUCT BOTTOM ========================================== */ .product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .product-price { color: #00175A; font-size: 20px; font-weight: 700; } .old-price { margin-left: 5px; color: #999; font-size: 13px; font-weight: 400; text-decoration: line-through; } /* ========================================== VIEW DETAILS ========================================== */ .add-cart { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border-radius: 5px; background: #E66F1A; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.3s ease; } .add-cart:hover { background: #cc5d12; color: #fff; } /* ========================================== NO PRODUCTS ========================================== */ .no-products { display: none; padding: 60px 20px; text-align: center; } .no-products-icon { width: 60px; height: 60px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff1e8; color: #E66F1A; font-size: 24px; } .no-products h3 { margin: 0 0 8px; color: #00175A; font-size: 22px; } .no-products p { margin: 0; color: #777; font-size: 14px; } /* ========================================== TABLET ========================================== */ @media (max-width: 991px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } 
@media (max-width: 768px) { .page-banner { min-height: 250px; } }
/* ========================================== MOBILE ========================================== */ @media (max-width: 575px) { .page-banner h1 { font-size: 36px; } .products-section { padding: 40px 0; } .products-grid { grid-template-columns: 1fr; } .search-box input { height: 48px; } .search-box button { width: 48px; height: 48px; } .product-image { height: 200px; } .product-name { font-size: 18px; } }