:root {
    --deep-teal: #004b57;
    --brand: #004b57;
    --electric-blue: #0088cc;
    --slate-grey: #4a5568;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0,0,0,0.08);
    --transition: all 0.3s ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px;}

body { 
background: var(--white); 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400; /* Light weight for a clean feel */
    font-size: 0.95rem; /* Montserrat runs a bit large, so 0.95rem often looks better */
    color: #333333;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased; /* Makes fonts look crisp on Mac/iOS */
}

h1, h2, h3 { 
    font-weight: 600; /* Extra-Light for a high-end "ringan" look */
    line-height: 1.2; 
    margin: 0 0 .6em;
    color: var(--deep-teal);
    letter-spacing: -0.01em; /* Montserrat is wide; this keeps it tight */
}

h1 { font-size: 1.5rem;} /* Big but thin */
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: .875rem; } /* Keep small headers slightly bolder for hierarchy */
h5 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* --- NAVIGATION --- */
header { padding: 3rem 5%; height: 80px; top: 0; left: 0; width: 100%; background: var(--brand); border-bottom: 2px solid var(--brand); display: flex; justify-content: space-between; align-items: center;}
.logo { display: flex; align-items: center; gap: 10px; }
.nav-links { list-style: none; display: flex; gap: 1rem; }
.nav-links a { text-decoration: none; font-size:.875rem; color: var(--white); transition: var(--transition); }
.nav-links a:hover { color: var(--electric-blue); }

.main-logo { height: 70px; width: auto; display: block; }
.logo-link { display: flex; align-items: center; text-decoration: none; }

/* --- HEADER SEARCH BOX --- */
.search-form { display:flex; align-items:center; position:relative; background:#f1f3f5; border-radius:30px; padding:2px 5px; border:1px solid #e2e8f0; transition:var(--transition); }
.search-form:focus-within { background:#fff; border-color:var(--electric-blue); box-shadow:0 0 0 3px rgba(0,136,204,0.1); }
.search-input { background:transparent; border:none; padding:8px 15px; outline:none; width:180px; color:var(--slate-grey); transition:width 0.3s ease; }
.search-input:focus { width:240px; }
.search-submit { background:var(--electric-blue); color:#fff; border:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); margin-left:5px; }
.search-submit:hover { background:var(--deep-teal); transform:scale(1.05); }
@media (max-width:900px) { .nav-links { display:none; } .search-input { width:120px; } .search-input:focus { width:150px; } }

/* --- HERO SLIDER (Updated for Multiple Images) --- */
.hero-slider-container { position:relative; width:100%; height:70vh; overflow:hidden; background:#000; }
.hero-slider { width:100%; height:100%; }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease-in-out; display:flex; align-items:center; padding:0 5%; z-index:1; }
.slide.active { opacity:1; z-index:2; }
.slide img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; z-index:-2; }
.slide::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:-1; }
.hero-content { max-width:650px; color:var(--white); position:relative; z-index:10; }
.hero-content .title { font-size:3.2rem; margin-bottom:0.8rem; line-height:1.1; }
.hero-content p { margin-bottom:2rem; opacity:0.9; }

/* Navigation Dots Styles */
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:100; }
.dot { width:12px; height:12px; background:rgba(255,255,255,0.4); border-radius:50%; cursor:pointer; transition:var(--transition); }
.dot.active,.dot:hover { background:var(--white); transform:scale(1.2); }
@media (max-width:768px) { .hero-content h1 { font-size:2.2rem; } .hero-content p { font-size:1rem; } }

/* .main-section { max-width: 1200px; margin: 2rem auto; padding: 0 5%;} */

.container { padding: 0.75rem 5%; }
.section-title { margin: 1rem 0; display: flex; font-weight: 600; color: var(--brand); align-items: center;}
.section-header { color: var(--deep-teal); margin-bottom: 1.5rem; }
.category-header { margin-bottom: 1rem; }
/* --- ENHANCED PRODUCT CARD --- */
.product-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); align-items:start; justify-content:start; }
.product-card { background:var(--white); border:1px solid #eef0f2; border-radius:12px; overflow:hidden; transition:transform 0.3s ease,border-color 0.3s ease; display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-8px); box-shadow:0 12px 30px rgba(0,75,87,0.1); border-color:var(--electric-blue); }

/* Image Area */
.product-image-container { padding:10px; width:100%; height:240px; background:#fdfdfd; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--radius); }
.product-image-container a { width:100%; height:100%; display:block; }
.product-image-container img { width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }

/* Content Area */
.product-content { padding:1rem; display:flex; flex-direction:column; flex-grow:1;}
.product-rating { display:flex; align-items:center; gap:4px; }
.product-rating .stars { color:#ffc107; font-size:0.75rem; letter-spacing:1px; }
.product-rating .rating-count { color:var(--slate-grey); font-size:0.75rem; opacity:0.7; font-weight:600; }
.empty-star { color:#DDD; }

.product-content h3 { line-height:1; min-height:calc(1em * 2); color:var(--deep-teal); }
.product-content h3 a:hover{ color:var(--electric-blue); }
.product-content a { color: var(--slate-grey); text-decoration:none; }
.product-excerpt { font-size:0.875rem; color:var(--slate-grey); margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.brand-category-tag, .related-row-brand-category { margin-bottom: .5rem; line-height:1; min-height:calc(1em * 2); font-size:0.65rem; font-weight:600;}
.brand-category-tag .brand::after, .related-row-brand-category .brand::after { content:"|"; margin-left:4px; margin-right:4px; color:var(--slate-grey); }
.brand-category-tag a, .related-row-brand-category a { color:var(--slate-grey); }
.brand-category-tag a:hover, .related-row-brand-category a:hover { color:var(--electric-blue); }

/* --- PRODUCT PRICE RATING--- */
.product-price-rating { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: .5rem; }
.price-box { background:var(--light-bg); padding:6px 10px; border-radius:8px; margin:0; display:flex; align-items:center; gap:4px; }
.price-value { display:block; font-size:1.25rem; font-weight:600; color:var(--deep-teal); }

/* --- BUTTON GROUP CONTAINER --- */
.product-actions { display: flex; gap: 5px; margin-top: 5px; }
/* BASE BUTTON STYLES */
.btn-primary, .btn-secondary { flex:1; /* Makes same width */ padding: 10px 5px; border-radius:12px; font-weight:400; letter-spacing:0.5px; cursor:pointer; transition: var(--transition); display:inline-flex; justify-content:center; align-items:center; }
/* PRIMARY: Electric Blue (Main Action) */
.btn-primary { background-color: var(--electric-blue); color: #ffffff; border: 1px solid var(--electric-blue); }
.btn-primary:hover { background-color:var(--deep-teal); border-color:var(--deep-teal); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,136,204,0.2); }
/* SECONDARY: Light Theme / Outline (Research Action) */
.btn-secondary { background-color: #ffffff; color: var(--deep-teal); border: 1px solid #ddd;}
.btn-secondary:hover { background: #f8f9fa; border-color: var(--deep-teal); color: var(--electric-blue); transform: translateY(-2px);}
/* Active/Press State */
.btn-primary:active, .btn-secondary:active { transform: translateY(0);}
/* Mobile Tweak: Stack them if the screen is very small */
@media (max-width: 400px) { .product-actions { flex-direction: column; }}

/* --- INTRODUCTION SECTION --- */
.intro-section { background:var(--light-bg); border-bottom:1px solid #eee; } 
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; max-width:1200px; margin:0 auto; }
.intro-text h2 { color:var(--brand); margin-bottom:1.5rem; position:relative; }
.intro-text h2::after { content:''; display:block; width:60px; height:4px; background:var(--electric-blue); margin-top:10px; }
.value-props { display:flex; flex-direction:column; gap:.5rem; }
.prop-item { display:flex; gap:.5rem; align-items:flex-start; }
.prop-icon { background:var(--electric-blue); color:white; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; font-size:0.8rem; }
.prop-item strong { color:var(--brand); display:block; }
.prop-item p { font-size:0.875rem; margin:0; }
@media (max-width:900px) { .intro-grid { grid-template-columns:1fr; gap:2rem; } }

 /* FOOTER */
.site-footer { margin-top: 10px; padding-top: 10px; background: #0f172a; font-size: .75rem; color: #cbd5e1; }
.site-footer a { color: #e2e8f0; text-decoration: none;}
.site-footer a:hover { color: var(--electric-blue);}
.footer-grid { display: grid; grid-template-columns: 1.5fr 2fr 3fr; gap: 20px; margin: 10px 0 10px 0; }
.footer-company { padding: .2rem 0; display: flex; flex-direction: column; align-items: center;   /* horizontal */
  justify-content: center; /* vertical */ text-align: center;}
.footer-heading { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } 
.footer-contact { display: flex; flex-direction: column; gap: .1rem;}
.footer-item { font-size: .875rem;}
.footer-item strong { color: #94a3b8; margin-right: .4rem;}
.footer-links{ columns:2; column-gap:20px; list-style:none; padding:0; margin:0; }
.footer-links li{ break-inside:avoid; margin-bottom:8px; }
.footer-links-brand{ columns:4; column-gap:20px; list-style:none; padding:0; margin:0; }
.footer-links-brand li{ break-inside:avoid; margin-bottom:8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08);}
.footer-bottom-row { display: flex; justify-content: center; padding: .5rem 0; font-size: .85rem; color: #94a3b8;}
.footer-contact { display: flex; flex-direction: column; gap: .1rem;}

@media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 576px) {.footer-grid { grid-template-columns: 1fr; }}
@media (max-width: 768px) {.footer-bottom { flex-direction: column; gap: 20px; text-align: center; }}
/* END FOOTER */

/* PRODUCT MAIN */
.product-main { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2rem; }
.main-image { background:#ffffff; border:1px solid #eee; border-radius:12px; padding:1rem; text-align:center; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
#featured-image { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; cursor: zoom-in;}
.thumb-strip { display:flex; flex-wrap:wrap; gap:5px; overflow-x:auto; padding-bottom:5px; }
.thumb-strip::-webkit-scrollbar { height:4px; }
.thumb-strip::-webkit-scrollbar-thumb { background:#ddd; border-radius:10px; }
.thumb { width:80px; height:80px; border:2px solid #eee; border-radius:8px; cursor:pointer; object-fit:cover; transition:var(--transition); }
.thumb:hover { border-color:var(--electric-blue); }
.thumb.active { border-color:var(--electric-blue); box-shadow:0 2px 8px rgba(0,136,204,0.2); }

.product-details-info h1 { color:var(--deep-teal); margin:0.5rem 0; }
.price-box-single { background:var(--light-bg); padding:.5rem; border-radius:8px; margin:1rem 0; }
.price-label-single { font-size:0.75rem; display:block; color:#888; }
.price-value-single { display:block; font-size:1.25rem; font-weight:600; color:var(--deep-teal); }
.purchase-actions { display:flex; flex-direction:column; gap:1rem; margin-bottom:1rem; }
.quote-btn { padding:1.2rem; font-size:1.1rem; }
.key-features { list-style:none; border-top:1px solid #eee; padding-top:1.5rem; }
.key-features li { margin-bottom:0.5rem; font-size:0.95rem; }
@media (max-width:850px) { .product-main { grid-template-columns:1fr; } }

/* --- MODAL OVERLAY --- */
.modal-overlay { display:none; position:fixed; z-index:2000; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.95); backdrop-filter:blur(5px); justify-content:center; align-items:center; }
.modal-content-wrapper { max-width:90%; max-height:90%; display:flex; justify-content:center; align-items:center; }
#modal-image { max-width:100%; max-height:90vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,0.1); transform:scale(0.9); transition:transform 0.3s ease; }
.close-modal { position:absolute; top:30px; right:40px; color:var(--deep-teal); font-size:50px; font-weight:400; cursor:pointer; transition:var(--transition); line-height:1; }
.close-modal:hover { color:var(--electric-blue); transform:scale(1.1); }
.modal-overlay.active { display:flex; }
.modal-overlay.active #modal-image { transform:scale(1); }
.quote-modal-content { background:var(--white); width:95%; max-width:650px; padding:40px; border-radius:15px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.15); animation:slideUp 0.4s ease-out; }
@keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.quote-header { margin-bottom:25px; border-bottom:1px solid #eee; padding-bottom:15px; }
.quote-header h2 { color:var(--deep-teal); margin-bottom:5px; }
.quote-header p { font-size:0.9rem; color:var(--slate-grey); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--deep-teal); }
.form-group input,.form-group textarea { padding:12px; border:1px solid #ddd; border-radius:6px; font-family:inherit; transition:var(--transition); }
.form-group input:focus,.form-group textarea:focus { border-color:var(--electric-blue); outline:none; box-shadow:0 0 0 3px rgba(0,136,204,0.1); }
.quote-footer { margin-top:20px; text-align:center; }
.submit-quote { width:100%; padding:15px; font-size:1.1rem; cursor:pointer; }
.privacy-note { font-size:0.75rem; color:#999; margin-top:15px; }
@media (max-width:600px) { .form-grid { grid-template-columns:1fr; } .quote-modal-content { padding:25px; } }
.alert-container { margin-bottom:2rem; animation:slideDown 0.5s ease; }
.alert { padding:15px 25px; border-radius:8px; font-size:0.95rem; display:block; border-left:5px solid; }
.alert-success { background-color:#f0fff4; border-color:#38a169; color:#22543d; }
.alert-error { background-color:#fff5f5; border-color:#e53e3e; color:#742a2a; }
@keyframes slideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* ---ERROR 404 --- */
.error-page { height:50vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 5%; }
.error-code { font-size:10rem; font-weight:600; color:var(--light-bg); line-height:1; position:relative; margin-bottom:-40px; z-index:-1; }
.error-content h1 { color:var(--deep-teal); font-size:2.5rem; margin-bottom:1rem; }
.error-actions { margin-top:2rem; display:flex; gap:1rem; justify-content:center; }
.error-actions a { text-decoration:none; }
@media (max-width:600px) { .error-actions { flex-direction:column; } }

/* --- CONTACT FORM STYLING --- */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; align-items:start; }
.contact-map { border-radius:15px; overflow:hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border:1px solid #eee; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; }}

.contact-form-container { background:var(--light-bg); padding:1rem; border-radius:12px; margin-bottom:1rem; }
.main-contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.5rem; }
.form-group label { font-weight:600; font-size:0.85rem; color:var(--deep-teal); text-transform:uppercase; }
.form-group input,.form-group select,.form-group textarea { padding:12px 15px; border:1px solid #e2e8f0; border-radius:6px; font-size:1rem; font-family:inherit; transition:var(--transition); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--electric-blue); box-shadow:0 0 0 3px rgba(0,136,204,0.1); }
.contact-info-card { background:var(--light-bg); padding:1rem; border-radius:12px; margin-bottom:1rem; }
.contact-info-card h3 { margin-bottom:1rem; color:var(--deep-teal); }
.contact-info-card p { margin-bottom:0.8rem; }
.contact-info-card hr { border:0; border-top:1px solid #cbd5e0; margin:1.5rem 0; }
.support-text { font-style:italic; font-size:0.85rem; color:var(--slate-grey); }
@media (max-width:768px) { .form-row { grid-template-columns:1fr; } }

.find-us-content { display:grid; grid-template-columns:350px 1fr; gap:3rem; }
.location-details { background:var(--light-bg); padding:2.5rem; border-radius:15px; }
.detail-group { margin-bottom:2rem; }
.detail-group h3 { color:var(--electric-blue); font-size:1.1rem; text-transform:uppercase; margin-bottom:0.75rem; letter-spacing:0.5px; }
.hours-list { list-style:none; padding:0; }
.hours-list li { display:flex; justify-content:space-between; font-size:0.95rem; margin-bottom:0.5rem; }
.map-wrapper { border-radius:15px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.08); }
@media (max-width:992px) { .find-us-content { grid-template-columns:1fr; } }

/* --- VERTICAL RELATED LIST --- */
.related-sidebar-list { margin-top:1rem; padding-top:1rem; border-top:1px solid #eee; }
.related-sidebar-list h4 { font-size:0.85rem; color:var(--slate-grey); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:1.2rem; }
.related-row { display:flex; align-items:center; text-decoration:none; padding:12px; margin-bottom:10px; background:#fff; border:1px solid #f0f0f0; border-radius:10px; transition:var(--transition); }
.related-row:hover { border-color:var(--electric-blue); background:#fdfdfd; box-shadow:0 4px 12px rgba(0,0,0,0.03); transform:translateX(5px); }
.related-row-thumb { width:60px; height:60px; flex-shrink:0; background:#f8f9fa; border-radius:6px; display:flex; align-items:center; justify-content:center; margin-right:15px; overflow:hidden; }
.related-row-thumb img { max-width:85%; max-height:85%; object-fit:contain; }
.related-row-info { flex-grow:1; display:flex; flex-direction:column; }

.related-row-title { font-size:0.9rem; font-weight:600; color:var(--deep-teal); margin:2px 0; }
.related-row-price { font-size:0.8rem; color:var(--slate-grey); }
.related-row-arrow { color:#ccc; font-size:1.2rem; transition:var(--transition); padding-left:10px; }
.related-row:hover .related-row-arrow { color:var(--electric-blue); }

/* --- BREADCRUMB STYLES --- */
.breadcrumb-container { padding:0.75rem 5%; background:var(--light-bg); border-bottom:1px solid #e5e7eb; }
.breadcrumb-list { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; list-style:none; margin:0; padding:0; }
.breadcrumb-item { display:flex; align-items:center; font-size:.75rem; color:var(--slate-grey); }
.breadcrumb-item + .breadcrumb-item::before { content:"›"; margin:0 0.5rem; color:#9ca3af; font-weight:600; }
.breadcrumb-item a { text-decoration:none; color:var(--slate-grey); font-weight:600; transition:var(--transition); position:relative; }
.breadcrumb-item a:hover { color:var(--electric-blue); }
.breadcrumb-item.active { color:var(--deep-teal); font-weight:600; pointer-events:none; }
.breadcrumb-item a::after { content:""; position:absolute; left:0; bottom:-2px; width:0%; height:1px; background:currentColor; transition:var(--transition); }
.breadcrumb-item a:hover::after { width:100%; }
@media (max-width:600px) { .breadcrumb-container { padding:10px 5%; } .breadcrumb-list { font-size:0.75rem; } }

/* --- CATEGORY ICON SHOWCASE CONTAINER --- */
.category-icon-showcase { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:10px; background-color:#fdfdfd; }
.category-icon-showcase a { text-decoration:none; }
.icon-item { width:100%; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; background:#ffffff; border:1px solid #eee; border-radius:12px; text-align:center; transition:all 0.3s ease; box-sizing:border-box; overflow:hidden; }
.icon-item:hover { border-color:var(--electric-blue); transform:translateY(-5px); box-shadow:0 5px 15px rgba(0,136,204,0.1); }
.s1-icon { width:50px; height:50px; color:var(--deep-teal); margin-bottom:20px; flex-shrink:0; }
.icon-item:hover .s1-icon { color:var(--electric-blue); }
.icon-label { font-size:0.85rem; font-weight:600; color:var(--deep-teal); text-transform:uppercase; letter-spacing:0.5px; }

/* --- DESCRIPTION --- */
.description a { text-decoration:none; color: var(--slate-grey); }
.description .title { font-weight: 600; border-bottom:1px solid #eee;}
.description h2, .description h3, .description h4 { letter-spacing: 1px; color: var(--deep-teal); margin: 1rem 0 0.5rem;}
.description p { margin-bottom:1rem; }
.description ul, .description ol { padding-left:1.2rem; margin-bottom:1.2rem; }
.description li { margin-bottom:.2rem; position: relative; padding-left: 5px; }

.description table { width:100%; border-collapse:collapse; background:var(--white); border:1px solid #eee; border-radius:8px; overflow:hidden; margin:1.4rem 0; }
.description th { background:var(--light-bg); color:var(--deep-teal); text-align:left; padding:6px 7px; font-weight:600; border-bottom:2px solid #eee; }
.description td { padding:6px 7px; border-bottom:1px solid #eee; }
.description tr:nth-child(even) { background:#fafafa; }
.category-layout { display:grid; grid-template-columns:280px 1fr; gap:40px; margin-top:2rem; }

/* SIDEBAR STYLES */
.category-sidebar h3 { color:var(--deep-teal); margin-bottom:1.5rem; padding-bottom:10px; border-bottom:2px solid var(--light-bg); }
.sidebar-nav { list-style:none; }
.sidebar-nav li { list-style:none; margin-bottom:5px; }
.sidebar-nav li a { display:flex; justify-content:space-between; align-items:center; padding:7px 10px; text-decoration:none; color:var(--slate-grey); border-radius:8px; transition:all 0.3s ease; }
.sidebar-nav li.active a,.sidebar-nav li a:hover { background:var(--light-bg); color:var(--electric-blue); font-weight:700; }
.count { font-size:0.8rem; background:#eee; padding:2px 8px; border-radius:12px; color:#666; }
.sidebar-nav li.active .count { background:var(--electric-blue); color:white; }
@media (max-width:900px) { .category-layout { grid-template-columns:1fr; } .category-sidebar { display:none; } }

/* --- PAGINATION CONTAINER --- */
.pagination-container { margin:4rem 0; display:flex; justify-content:center; }
.pagination-list { display:flex; align-items:center; list-style:none; gap:8px; background:#ffffff; padding:8px 15px; border-radius:50px; border:1px solid #eee; box-shadow:0 4px 15px rgba(0,0,0,0.03); }
.pagination-link { text-decoration:none; color:var(--slate-grey); font-weight:600; font-size:0.9rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all 0.3s ease; }
.pagination-link.active { background-color:var(--electric-blue); color:#ffffff; box-shadow:0 4px 10px rgba(0,136,204,0.3); }
.pagination-link:hover:not(.active) { background-color:#f0f7ff; color:var(--electric-blue); }
.pagination-link.prev,.pagination-link.next { width:auto; padding:0 20px; border-radius:30px; text-transform:uppercase; letter-spacing:1px; font-size:0.75rem; }
.pagination-link.prev span,.pagination-link.next span { margin:0 5px; }
@media (max-width:480px) { .pagination-link.prev span,.pagination-link.next span { display:none; } .pagination-link.prev,.pagination-link.next { width:40px; padding:0; } }

/* --- SEARCH BOX FOR SEARCH FORM --- */
.search-form-main { display:flex; align-items:center; justify-content:center; margin:40px auto; max-width:600px; width:100%; background:#f1f3f5; border-radius:40px; padding:6px 10px; border:1px solid #e2e8f0; transition:var(--transition); }
.search-form-main:focus-within { background:#fff; border-color:var(--electric-blue); box-shadow:0 0 0 3px rgba(0,136,204,0.1); }
.search-input-main { background:transparent; border:none; outline:none; flex:1; padding:12px 18px; font-size:16px; color:var(--slate-grey); }
.search-input-main:focus { width:100%; }
.search-submit-main { background:var(--electric-blue); color:#fff; border:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); }
.search-submit-main:hover { background:var(--deep-teal); transform:scale(1.05); }
@media (max-width:768px) { .search-form-main { margin:20px; } }

/* --- BRAND GRID --- */
.brand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:15px; align-items:center; }
.brand-grid a { display:flex; align-items:center; justify-content:center; padding:18px; background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0; transition:var(--transition); }
.brand-grid img { max-width:100%; max-height:40px; object-fit:contain; filter:grayscale(100%) opacity(0.7); transition:var(--transition); }
.brand-grid a:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(0,0,0,0.06); border-color:var(--electric-blue); }
.brand-grid a:hover img { filter:grayscale(0%) opacity(1); }
@media (max-width:768px) { .brand-grid { gap:15px; } .brand-grid img { max-height:32px; } }

/* This hides the element visually but keeps it accessible to machines/crawlers */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }