/* Sitewide header, nav, footer — shared across every customer-facing page via layouts/app.blade.php.
   Matches the homepage design system. Keep in sync with header/footer rules in home.css. */
:root{--sc-p:#5b2cff;--sc-pd:#2d006f;--sc-lime:#d9f45a;--sc-lav:#f0e6ff;--sc-line:#e9e5ef;--sc-muted:#6d6877}

.top{background:var(--sc-lime);font-size:12px;font-weight:800}
.topin{max-width:1260px;margin:auto;padding:0 24px;height:30px;display:flex;align-items:center;justify-content:space-between}

.header{position:sticky;top:0;z-index:30;background:var(--sc-pd);color:#fff;box-shadow:0 4px 20px #23005a20}
.head{max-width:1260px;margin:auto;padding:0 24px;min-height:82px;display:grid;grid-template-columns:180px 1fr auto;gap:22px;align-items:center}
.logo{font-family:Poppins,Inter,sans-serif;font-size:30px;font-weight:950;letter-spacing:-1.5px;display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.nav,.catin,.foot{font-family:Inter,Arial,sans-serif}
.logo small{display:block;color:var(--sc-lime);font-size:9px;letter-spacing:.5px;font-weight:700}
.logo-text{display:inline-block}
.brand-mark{width:38px;height:38px;flex:none;border:5px solid currentColor;border-right-color:var(--sc-lime);border-radius:50%;display:inline-block;font-size:0}
.search{display:flex;background:#fff;border-radius:13px;overflow:hidden}
.search input{border:0;outline:0;padding:14px 16px;width:100%}
.search button{border:0;background:var(--sc-lime);padding:0 22px;font-weight:900;cursor:pointer}
.nav{display:flex;gap:14px;align-items:center;font-size:12px;font-weight:800}
.nav span,.nav a{white-space:nowrap;color:#fff;text-decoration:none}
.points{background:#ffffff16;border:1px solid #ffffff25;border-radius:10px;padding:10px}
.bag{background:var(--sc-lime);color:#111;border-radius:10px;padding:10px 13px;text-decoration:none;display:inline-flex;align-items:center;gap:7px;position:relative}
.cartIcon{flex:none}
.cartBubble{position:absolute;right:-7px;top:-7px;background:#fff;color:var(--sc-p);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:950}
.create{background:var(--sc-lime);color:#111;border:0;border-radius:10px;padding:11px 14px;font-weight:950;text-decoration:none;display:inline-block}

.catbar{border-bottom:1px solid var(--sc-line);background:#fff}
.catin{max-width:1260px;margin:auto;padding:0 24px;height:44px;display:flex;gap:24px;align-items:center;overflow:auto;font-size:12px}
.catin b{color:var(--sc-p)}
.catin a{color:inherit;text-decoration:none;white-space:nowrap}
.catin a:first-child{font-weight:800;color:var(--sc-p)}

footer{background:var(--sc-pd);color:#fff;padding:50px 0 25px;display:block}
.foot{max-width:1260px;margin:auto;padding:0 24px;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
.foot h4{margin-top:0}
.foot a:not(.logo){color:#ded3fb;text-decoration:none;display:block;margin:8px 0;font-size:11px}
.foot .logo{margin-bottom:14px}
.foot a:not(.logo):hover{color:#fff}

.siteFlash{max-width:1260px;margin:16px auto 0;padding:0 24px}
.siteFlash div{background:#eafbdc;border:1px solid #b7e28c;color:#2e5c0f;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:700}
.siteFlash div.error{background:#fff0ef;border-color:#efaaa4;color:#8b1515}

@media(max-width:1000px){.head{grid-template-columns:1fr}.nav{flex-wrap:wrap;padding-bottom:14px}}
@media(max-width:650px){.top .topin span:last-child{display:none}.foot{grid-template-columns:1fr 1fr}}