/* ============================================================
   allshop.ng — shared brand chrome for the public pages
   Poppins (self-hosted), brand colours, the sticky top bar and the footer.
   Mirrors the landing page (/index.html); keep the two in step.
   Teal #0F766E · readable teal #14B8A6 · mint #5EEAD4 · navy #0F172A
   ============================================================ */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format("woff2")}

:root{
  --as-teal:#0F766E; --as-teal-d:#115E59; --as-teal-r:#14B8A6; --as-mint:#5EEAD4;
  --as-teal-50:#F0FDFA; --as-teal-100:#CCFBF1;
  --as-navy:#0F172A; --as-s700:#334155; --as-s600:#475569; --as-s500:#64748B; --as-s300:#CBD5E1;
  --as-line:#E2E8F0; --as-soft:#F8FAFC;
  --as-font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(226,232,240,.8);font-family:var(--as-font);line-height:1.65}
.top .wrap,.foot .wrap{box-sizing:border-box;max-width:1160px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.top .wrap,.foot .wrap{padding:0 32px;max-width:1184px}}
.top-in{display:flex;align-items:center;gap:8px;height:68px}
.top .logo,.foot .logo{display:flex;align-items:center;flex:none;margin-right:auto;border-radius:8px;min-height:44px;text-decoration:none}
.top .logo img{display:block;height:32px;width:auto;max-width:none}
.top .nav-links{display:none;gap:4px;margin:0 auto 0 40px}
.top .nav-links a{color:var(--as-s600);font-weight:500;font-size:15px;padding:10px 14px;border-radius:10px;text-decoration:none;transition:color .15s,background-color .15s}
.top .nav-links a:hover{color:var(--as-navy);background:var(--as-soft)}
.top .btn,.mmenu .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:0 18px;border-radius:12px;border:1px solid transparent;font:600 15px/1 var(--as-font);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;text-decoration:none;box-sizing:border-box;transform:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.top .btn-primary,.mmenu .btn-primary{background:var(--as-teal);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.12)}
.top .btn-primary:hover,.mmenu .btn-primary:hover{background:var(--as-teal-d);color:#fff;transform:none}
.top .btn-ghost{background:transparent;color:var(--as-navy)}
.top .btn-ghost:hover{background:var(--as-soft)}
.top .btn-signin{display:none}
.mmenu .btn-lg{min-height:56px;padding:0 28px;font-size:16px;border-radius:14px}
.mmenu .btn-block{width:100%}
.menu-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--as-line);background:#fff;color:var(--as-navy);cursor:pointer;padding:0}
.menu-btn svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.mmenu{border-top:1px solid var(--as-line);background:#fff;padding:8px 20px 24px;box-shadow:0 24px 32px -24px rgba(15,23,42,.25)}
.mmenu[hidden]{display:none}
.mmenu a:not(.btn){display:flex;align-items:center;min-height:52px;color:var(--as-navy);font-weight:500;font-size:17px;border-bottom:1px solid var(--as-line);text-decoration:none}
.mmenu .btn{margin-top:16px}
@media(min-width:900px){
  .top .nav-links{display:flex}
  .top .btn-signin{display:inline-flex}
  .menu-btn,.mmenu{display:none!important}
}
.top :focus-visible,.foot :focus-visible{outline:3px solid var(--as-teal);outline-offset:3px;border-radius:6px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--as-line);padding:56px 0 96px;background:#fff;font:400 15px/1.65 var(--as-font);color:var(--as-s700);text-align:left;margin:0}
.foot-top{display:grid;gap:32px}
@media(min-width:900px){.foot-top{grid-template-columns:1fr auto;align-items:start;gap:48px}}
.foot-brand .logo{display:inline-flex}
.foot-brand img{display:block;height:30px;width:auto;max-width:none}
.foot-brand p{color:var(--as-s600);margin:16px 0 0;max-width:30em;font-size:15px}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px}
@media(min-width:640px){.foot-links{grid-template-columns:repeat(5,auto);gap:4px 28px}}
.foot-links a{display:flex;align-items:center;min-height:44px;color:var(--as-s600);font-weight:500;text-decoration:none}
.foot-links a:hover{color:var(--as-navy)}
@media(min-width:900px){.foot{padding-bottom:40px}}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--as-line);color:var(--as-s500);font-size:14px}