:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#162b2b;background:#f5f8f6}*{box-sizing:border-box}body{margin:0}a{color:#167456;text-decoration:none}button,input,select,textarea{font:inherit}button{background:#126b4f;color:white;border:0;padding:12px 17px;border-radius:10px;cursor:pointer;font-weight:650}button:hover{filter:brightness(.94)}button.secondary{background:#e7f3ec;color:#0d6349}button.danger{background:#a83c3c}input,select,textarea{padding:12px;border:1px solid #cad7d1;background:white;border-radius:9px;width:100%;min-width:0}label{display:block;color:#42615a;font-size:13px;font-weight:600;margin:13px 0 6px}h1,h2,h3{line-height:1.2;letter-spacing:-.04em}h1{font-size:clamp(28px,4vw,47px);margin:0 0 14px}h2{font-size:26px}h3{font-size:19px}p{line-height:1.6;color:#647a73}header{background:white;box-shadow:0 1px 2px #0c453112}nav{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:17px 24px;gap:18px}nav .links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.brand{font-size:24px;font-weight:850;letter-spacing:-1.5px;color:#115a42}.brand small{display:block;letter-spacing:1px;font-size:9px;color:#7b9389}.container{max-width:1210px;margin:0 auto;padding:36px 24px}.hero{background:#e9f6ee;padding:76px 24px}.hero-inner{max-width:1210px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}.hero p{max-width:600px;font-size:18px}.hero-card{background:#126348;color:white;padding:36px;border-radius:24px;min-height:280px}.hero-card p,.hero-card h2{color:white}.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.card{background:white;border:1px solid #e4ebe7;border-radius:16px;padding:22px;box-shadow:0 3px 12px #182e2610}.stat{font-size:32px;color:#126348;font-weight:800}.muted{color:#698076;font-size:13px}.form-card{max-width:480px;margin:50px auto;background:white;border:1px solid #e2ede8;border-radius:20px;padding:32px;box-shadow:0 10px 38px #193b2820}.form-card button{width:100%;margin-top:15px}.alert{padding:12px 14px;border-radius:10px;margin:15px 0;background:#e3f5eb;color:#0c6045;white-space:pre-wrap}.alert.error{background:#fff0ed;color:#a53c35}.dashboard{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:calc(100vh - 75px)}aside{background:#143b30;color:white;padding:25px 14px}.side-link{display:block;color:#d5eee2;padding:12px 14px;border-radius:9px;margin:4px 0;background:transparent;border:0;text-align:left;width:100%}.side-link:hover,.side-link.active{background:#285d4c;color:white}.dash-main{padding:30px;min-width:0}.section{display:none}.section.active{display:block}.table-wrap{max-width:100%;overflow-x:auto;background:white;border-radius:15px;border:1px solid #e6ece9;margin-top:18px}table{width:100%;border-collapse:collapse;font-size:13px;min-width:570px}th,td{padding:14px;text-align:left;border-bottom:1px solid #ebf0ed}th{background:#f5faf7;color:#456e5f}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.pill{padding:5px 10px;background:#e5f5e9;border-radius:20px;font-size:12px;color:#146c4d}.table-wrap button{padding:7px 11px;font-size:12px}.mini{font-size:12px;color:#7a8d84}footer{padding:28px;border-top:1px solid #dce9e2;text-align:center;color:#64786d}.mobile-menu{display:none}@media(max-width:760px){nav{padding:13px 16px;align-items:flex-start}nav .links{gap:9px;font-size:13px}.hero{padding:45px 16px}.hero-inner{grid-template-columns:1fr}.container{padding:24px 16px}.dashboard{display:block}.mobile-menu{display:block;margin:12px 16px}aside{display:none;padding:12px}aside.open{display:block}.dash-main{padding:17px}.form-card{margin:20px 13px;padding:23px}.card{padding:17px}h2{font-size:22px}}

/* Official Genasal Nigeria Limited identity. Existing layout and colors retained. */
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;letter-spacing:0;text-decoration:none;line-height:1.1}
.brand-logo{display:block;width:54px;height:54px;object-fit:contain;flex-shrink:0;border-radius:50%}
.brand-name{display:flex;flex-direction:column;white-space:nowrap}
.brand-name strong{color:#115a42;font-size:24px;letter-spacing:-0.8px;font-weight:850}
.brand-name small{display:block;margin-top:4px;color:#476b5e;letter-spacing:0.35px;font-size:12px;font-weight:650}
.brand:focus-visible{outline:3px solid #269b5b;outline-offset:5px;border-radius:6px}
@media(max-width:760px){nav{flex-wrap:wrap;align-items:center}.brand-logo{width:47px;height:47px}.brand-name strong{font-size:21px}.brand-name small{font-size:11px}nav .links{width:100%;gap:10px 14px}.links button{padding:10px 12px}}


.hero-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.hero-highlights .compact{padding:16px 18px}
.hero-highlights strong{display:block;color:#124f3d;margin-top:6px}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-visual img{width:min(100%,560px);height:auto;display:block}
.service-grid .card-icon{width:48px;height:48px;border-radius:14px;background:#e8f5ee;display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.section-lead{margin-top:-8px;margin-bottom:22px;max-width:860px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.product-card{background:#fff;border:1px solid #e4ebe7;border-radius:20px;overflow:hidden;box-shadow:0 3px 12px #182e2610;display:flex;flex-direction:column}
.product-image-wrap{aspect-ratio:16/10;background:#f1f8f4;overflow:hidden}
.product-image{width:100%;height:100%;object-fit:cover;display:block}
.product-body{padding:18px 18px 20px}
.product-body h3{margin:8px 0 10px}
.product-body p{margin:0 0 14px;font-size:14px}
.product-category{display:inline-flex;align-items:center;background:#e6f5eb;color:#116548;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}
.product-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.product-meta strong{font-size:20px;color:#115a42}
.product-meta span{font-size:13px;color:#658076}
.auth-shell{max-width:1180px;margin:28px auto;padding:0 24px 34px;display:grid;grid-template-columns:1fr minmax(360px,460px);gap:28px;align-items:stretch}
.auth-visual-panel{background:linear-gradient(135deg,#edf8f1,#ffffff);border:1px solid #deece4;border-radius:28px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:calc(100vh - 170px)}
.auth-visual-panel img{width:100%;height:auto;display:block;border-radius:24px}
.eyebrow{color:#16835c;font-weight:800;letter-spacing:2px;font-size:12px;margin:0 0 8px}
.auth-copy h1{font-size:clamp(30px,4vw,46px);margin:0 0 12px}
.auth-copy p{max-width:560px}
.auth-bullets{margin:16px 0 0;padding-left:20px;color:#47665d;line-height:1.9}
.form-card h2{margin-top:0}
.product-thumb{width:74px;height:54px;border-radius:10px;overflow:hidden;background:#eef7f2}
.product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:980px){.auth-shell{grid-template-columns:1fr}.auth-visual-panel{min-height:auto}.hero-highlights{grid-template-columns:1fr}.hero-visual img{max-width:480px}}
@media(max-width:760px){.auth-shell{padding:0 16px 28px;margin:14px auto}.auth-visual-panel{padding:22px;border-radius:22px}.product-grid{grid-template-columns:1fr}.hero-highlights{grid-template-columns:1fr}.hero-highlights .compact{padding:14px 16px}}


/* Minimal sign-in, registration and password-recovery pages. */
.auth-page{width:100%;max-width:100%;min-height:calc(100vh - 86px);padding:48px 18px 64px;display:flex;justify-content:center;align-items:flex-start;background:#f5f8f6}
.auth-page .auth-card{width:min(100%,470px);max-width:470px;margin:0;background:#fff;border:1px solid #e2ede8;border-radius:18px;padding:34px;box-shadow:0 8px 28px rgba(17,74,51,.055)}
.auth-card h1{font-size:clamp(27px,3.4vw,34px);margin:8px 0 10px;letter-spacing:-.035em}
.auth-card p{font-size:14px;margin:0 0 21px;line-height:1.55}
.auth-card .alert{margin:12px 0 16px}
.auth-eyebrow{color:#13835b;font-size:11px;font-weight:800;letter-spacing:1.8px}
.auth-card label{margin:16px 0 7px;color:#3b5d51}
.auth-card input{min-height:47px}
.auth-card form button{min-height:46px;width:100%;margin-top:20px}
.auth-card form[hidden]{display:none!important}
.form-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:14px}
.auth-card-bottom{margin-top:20px;padding-top:17px;border-top:1px solid #e6eee9;font-size:14px}
.auth-card-bottom a{font-weight:600}

/* Header navigation and slide-out mobile sidebar. */
.site-header .public-nav{min-height:78px}
.site-header .desktop-links{display:flex;align-items:center;gap:22px}
.site-header .nav-primary{background:#126b4f;color:#fff;border-radius:10px;padding:11px 16px;font-weight:650}
.site-header .nav-primary:hover{background:#0d5c43}
.site-mobile-toggle{display:none;align-items:center;gap:9px;min-height:42px;color:#12543f;background:#e7f3ec;padding:9px 12px;border-radius:10px}
.hamburger-icon{font-size:20px;line-height:1}
.site-nav-backdrop[hidden],.dashboard-backdrop[hidden]{display:none!important}
.site-nav-backdrop,.dashboard-backdrop{position:fixed;inset:0;background:rgba(11,38,29,.45);z-index:150;display:block}
.site-mobile-sidebar{position:fixed;inset:0 auto 0 0;width:min(310px,86vw);max-width:100%;background:#fff!important;color:#143b30!important;z-index:151;display:flex!important;flex-direction:column;padding:20px 17px 28px;box-shadow:15px 0 55px rgba(5,28,19,.15);transform:translateX(-110%);visibility:hidden;pointer-events:none;transition:transform .23s ease,visibility .23s;overflow-y:auto}
.site-mobile-sidebar.open{transform:translateX(0);visibility:visible;pointer-events:auto}
.site-drawer-head{font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:space-between;padding:2px 8px 16px;margin-bottom:10px;border-bottom:1px solid #e5eee8}
.site-drawer-close{font-size:27px;line-height:1;background:#e7f3ec;color:#12543f;padding:3px 11px}
.site-drawer-link{color:#1b4d3d;padding:14px 14px;margin:3px 0;border-radius:12px;font-weight:650;display:block}
.site-drawer-link:hover,.site-drawer-link:focus-visible{background:#e9f6ee}
.site-drawer-divider{margin:16px 6px;border-top:1px solid #e4ebe7}
.site-drawer-primary{background:#116d4e;color:#fff;margin-top:8px}
.site-drawer-primary:hover,.site-drawer-primary:focus-visible{background:#0b5e43;color:#fff}
.site-menu-open,.dashboard-menu-open{overflow:hidden}
@media(min-width:761px){.site-mobile-sidebar,.site-nav-backdrop{display:none!important}}
@media(max-width:760px){
 .site-header .public-nav{min-height:69px;flex-wrap:nowrap;align-items:center;gap:6px;padding:10px 14px}
 .site-header .desktop-links{display:none!important}
 .site-mobile-toggle{display:inline-flex;flex:0 0 auto}
 .site-menu-label{font-size:13px}
 .site-header .brand-name strong{font-size:19px}
 .site-header .brand-name small{font-size:10px}
 .site-header .brand-logo{width:42px;height:42px}
 .auth-page{min-height:calc(100vh - 69px);padding:24px 12px 48px}
 .auth-page .auth-card{margin:0;padding:25px 20px 23px;border-radius:15px}
 .auth-card h1{font-size:28px}
 /* Existing dashboard sidebar becomes a true fixed off-canvas sidebar on phones. */
 .dashboard{display:block}
 #sidebar{display:block;position:fixed;top:0;left:0;height:100dvh;width:min(292px,85vw);max-width:85vw;overflow-y:auto;z-index:201;transform:translateX(-110%);transition:transform .23s ease;box-shadow:15px 0 55px rgba(5,28,19,.18);padding:25px 14px}
 #sidebar.open{transform:translateX(0)}
 .dashboard-backdrop{z-index:200}
 #menu.mobile-menu{display:inline-flex;align-items:center;justify-content:center;margin:0;width:auto;flex:0 0 auto;min-height:42px;padding:9px 12px}
 .dash-main{padding:17px}
}
@media(prefers-reduced-motion:reduce){.site-mobile-sidebar,#sidebar{transition:none}}

@media(max-width:760px){
 .dashboard-header-nav .brand{order:0}
 .dashboard-header-nav #menu{order:1;margin-left:auto}
 .dashboard-header-nav .links{order:2;width:100%}
}


/* JS controls the active dashboard section. CSS :target is used only if JS
   cannot start. Mixing :target with JS navigation can leave a previously
   targeted section visible until a page refresh. */
#sidebar .side-link{display:block;text-decoration:none;cursor:pointer}
#sidebar .side-link:focus-visible{outline:2px solid #aee5c8;outline-offset:2px}
#sidebar .side-link.active{background:#285d4c;color:white}
body:not(.dashboard-js) .dashboard .section:target{display:block}
@supports selector(.dashboard:has(.section:target)) {
 body:not(.dashboard-js) .dashboard:has(.section:target) .section:not(:target){display:none}
}
body.dashboard-js .dashboard .section{display:none}
body.dashboard-js .dashboard .section.active{display:block}
.dashboard .section-loading,.dashboard .section-error{padding:14px 16px;background:#edf7f1;border-radius:12px;margin:14px 0;color:#275e49}
.dashboard .section-error{background:#fff1ed;color:#9b362c}
/* Admin product image upload: small, clear file feedback. */
.product-image-preview{font-size:13px;color:#176044;background:#edf7f1;padding:10px 12px;border-radius:10px;margin:12px 0;}


/* GENASAL homepage catalogue: compact, uniform cards; product data stays in MySQL. */
#products-list.product-grid{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:12px;
 align-items:stretch;
}
#products-list .product-card{
 min-width:0;
 height:238px;
 min-height:0;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border-radius:13px;
}
#products-list .product-image-wrap{
 flex:0 0 100px;
 height:100px;
 min-height:0;
 width:100%;
 aspect-ratio:auto;
 overflow:hidden;
 background:#f1f8f4;
}
#products-list .product-image{
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
}
#products-list .product-body{
 display:flex;
 flex:1;
 flex-direction:column;
 min-width:0;
 min-height:0;
 padding:9px 10px 10px;
}
#products-list .product-category{
 align-self:flex-start;
 max-width:100%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:10px;
 line-height:1.1;
 padding:4px 7px;
}
#products-list .product-body h3{
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;
 line-clamp:2;
 overflow:hidden;
 overflow-wrap:anywhere;
 font-size:13px;
 line-height:1.25;
 height:2.5em;
 margin:6px 0 4px;
}
#products-list .product-body p{
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;
 line-clamp:2;
 overflow:hidden;
 overflow-wrap:anywhere;
 font-size:10px;
 line-height:1.3;
 height:2.6em;
 margin:0 0 6px;
}
#products-list .product-meta{
 margin-top:auto;
 display:flex;
 flex-wrap:wrap;
 gap:3px 6px;
 align-items:baseline;
 justify-content:space-between;
}
#products-list .product-meta strong{
 font-size:14px;
 line-height:1.2;
 color:#115a42;
 overflow-wrap:anywhere;
}
#products-list .product-meta span{font-size:10px;line-height:1.2}
@media(max-width:1199px){
 #products-list.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
 #products-list.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 #products-list.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 #products-list .product-card{height:205px;border-radius:11px}
 #products-list .product-image-wrap{height:80px;flex-basis:80px}
 #products-list .product-body{padding:7px 8px 8px}
 #products-list .product-body h3{font-size:12px;margin:5px 0 3px}
 #products-list .product-body p{-webkit-line-clamp:1;line-clamp:1;height:1.3em;font-size:10px;margin-bottom:5px}
 #products-list .product-category{font-size:9px;padding:4px 6px}
 #products-list .product-meta strong{font-size:13px}
 #products-list .product-meta span{font-size:9px}
}


/* Homepage real-life hero image update */
.hero{padding:64px 24px}
.hero-inner{align-items:center}
.hero p{max-width:620px}
.hero-photo-card{position:relative;background:#ffffff;border:1px solid #dce9e2;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(18,57,41,.12);align-self:stretch;min-height:440px}
.hero-photo-card img{width:100%;height:100%;min-height:440px;object-fit:cover;display:block}
.hero-photo-badge{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(16,77,56,.88);backdrop-filter:blur(6px);color:#fff;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.hero-photo-badge strong{font-size:18px;line-height:1.2}
.hero-photo-badge span{font-size:13px;line-height:1.35;color:#e5f6ed}
@media(max-width:980px){.hero{padding:48px 16px}.hero-photo-card{min-height:360px}.hero-photo-card img{min-height:360px}}
@media(max-width:760px){.hero{padding:36px 16px}.hero-inner{gap:22px}.hero p{font-size:16px}.hero-photo-card{min-height:280px;border-radius:18px}.hero-photo-card img{min-height:280px}.hero-photo-badge{left:12px;right:12px;bottom:12px;padding:12px 13px;border-radius:14px}.hero-photo-badge strong{font-size:16px}.hero-photo-badge span{font-size:12px}}