@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('tokens.css');
@import url('components.css');
@import url('catalog.css');
@import url('checkout.css');
@import url('account.css');
@import url('admin.css');
@import url('content.css');
@import url('pdp-zoom.css');

.site-header{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:var(--hair);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:64px;}
.site-header nav a{margin:0 14px;text-transform:uppercase;font-size:14px;color:var(--grey);}
.site-header nav a:hover{color:var(--white);}
.brand{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;}
.brand .dot{color:var(--cyan);}
.site-footer{border-top:var(--hair);margin-top:var(--sp-7);padding:var(--sp-6) 0;color:var(--grey);font-size:14px;}
.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
@media(max-width:768px){.grid-products{grid-template-columns:repeat(2,1fr);}}