/* ============================================================
   Able Physics — shared site styles
   Rules used identically by every page: reset, base typography,
   global nav (desktop + mobile hamburger), shared layout helpers.
   Page-specific styles remain in each page's own <style> block.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #efedeb; }

nav { position:fixed; top:0; left:0; right:0; height:var(--nav-h); background:#efedeb; z-index:1000; display:flex; align-items:flex-end; padding-bottom:0.6rem; transition:background 0.4s,backdrop-filter 0.4s; }

nav.scrolled { background:rgba(239,237,235,0.15); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

.nav-inner { width:100%; max-width:calc(var(--card-max) + var(--card-gap)*2); margin:0 auto; padding:0 var(--card-gap); display:flex; align-items:center; justify-content:space-between; position:relative; }

.nav-logo { text-decoration:none; padding-left:20px; }

.nav-logo img { height:28px; width:auto; display:block; }

.nav-links-desktop { display:none; list-style:none; gap:2rem; align-items:center; position:absolute; left:50%; transform:translateX(-50%); }

.nav-links-desktop > li { position:static; }

.nav-links-desktop a { font-family:'Geist',sans-serif; font-size:0.82rem; font-weight:500; color:var(--abyss); text-decoration:none; letter-spacing:0.01em; transition:color 0.2s; white-space:nowrap; }

.nav-links-desktop a:hover, .nav-links-desktop a.active { color:var(--azure); }

.nav-dropdown { position:relative; }

.nav-dropdown-trigger { display:flex; align-items:center; gap:0.3rem; cursor:pointer; font-family:'Geist',sans-serif; font-size:0.82rem; font-weight:500; color:var(--abyss); text-decoration:none; background:none; border:none; padding:0; }

.nav-arrow { font-size:0.55rem; opacity:0.6; transition:transform 0.2s; display:inline-block; }

.nav-dropdown:hover .nav-arrow { transform:rotate(180deg); }

.nav-dropdown::after { content:''; position:absolute; top:100%; left:-20px; right:-20px; height:20px; background:transparent; pointer-events:auto; }

.nav-dropdown-menu { display:none; position:absolute; top:calc(100% + 0.75rem); left:50%; transform:translateX(-50%); min-width:235px; background:rgba(248,245,241,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:12px; border:1px solid rgba(5,38,63,0.10); box-shadow:0 8px 32px rgba(5,38,63,0.12),0 2px 8px rgba(5,38,63,0.06); padding:0.5rem 0 0.65rem; list-style:none; z-index:2000; }

.nav-dropdown:hover .nav-dropdown-menu { display:block; }

.nav-dropdown-menu:hover { display:block; }

.nav-dropdown-menu > li > a { display:block; padding:0.48rem 1.25rem; font-family:'Geist',sans-serif; font-size:0.8rem; font-weight:500; color:var(--abyss); text-decoration:none; white-space:nowrap; transition:background 0.15s,color 0.15s; }

.nav-dropdown-menu > li > a:hover { background:rgba(57,111,164,0.08); color:var(--azure); }

.nav-dropdown-menu li a sup { font-size:0.55em; vertical-align:super; }

.nav-dropdown-section { font-family:'Geist',sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--azure); padding:0.55rem 1.25rem 0.15rem; pointer-events:none; cursor:default; user-select:none; }

.nav-dropdown-menu > li:first-child.nav-dropdown-section { padding-top:0.35rem; }

.nav-dropdown-divider { height:1px; background:rgba(5,38,63,0.08); margin:0.35rem 0.75rem; }

.nav-dropdown-indent > a { padding-left:2rem !important; font-size:0.74rem !important; font-weight:400 !important; opacity:0.82; }

.nav-dropdown-indent > a:hover { opacity:1; color:var(--azure) !important; background:rgba(57,111,164,0.06) !important; }

.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }

.hamburger span { display:block; width:22px; height:2px; background:var(--abyss); border-radius:2px; }

.nav-right { display:flex; align-items:center; gap:0.85rem; }
.nav-preorder { font-family:'Geist',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.01em; color:#fff; background:var(--abyss); border:1.5px solid var(--abyss); padding:0.5rem 1.05rem; border-radius:100px; text-decoration:none; transition:background 0.2s,border-color 0.2s; white-space:nowrap; }
.nav-preorder:hover { background:var(--azure); border-color:var(--azure); }
@media (max-width:380px) { .nav-preorder { font-size:0.72rem; padding:0.45rem 0.85rem; } }

@media (min-width:1024px) { .nav-links-desktop { display:flex !important; } .hamburger { display:none !important; } }

.nav-overlay { display:none; position:fixed; inset:0; background:rgba(5,38,63,0.2); z-index:1999; }

.nav-overlay.open { display:block; }

.nav-drawer { display:none; position:fixed; top:0; right:0; width:270px; height:100vh; height:100dvh; background:#f7f5f2; border-left:1px solid rgba(5,38,63,0.1); z-index:2000; padding:4rem 2rem 2rem; flex-direction:column; overflow-y:auto; }

.nav-drawer.open { display:flex; }

.drawer-close { position:absolute; top:1rem; right:1.25rem; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--abyss); }

.nav-drawer ul { list-style:none; }

.nav-drawer ul li { border-bottom:1px solid rgba(5,38,63,0.07); }

.nav-drawer ul li a { display:block; padding:0.85rem 0; font-family:'Geist',sans-serif; font-size:0.92rem; color:var(--abyss); text-decoration:none; transition:color 0.2s; }

.nav-drawer ul li a:hover { color:var(--azure); }

.drawer-products-label { font-family:'Geist',sans-serif; font-size:0.92rem; font-weight:500; color:var(--abyss); padding:0.85rem 0 0.2rem; border-bottom:1px solid rgba(5,38,63,0.07); display:block; }

.drawer-section-label { font-family:'Geist',sans-serif; font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--azure); padding:0.7rem 0 0.15rem; display:block; border-bottom:none !important; }

.drawer-products-start { border-top:3px double rgba(5,38,63,0.15) !important; border-bottom:none !important; }

.drawer-products-end { border-bottom:3px double rgba(5,38,63,0.15) !important; }

.drawer-indent { padding-left:1.25rem !important; font-size:0.82rem !important; opacity:0.85; }

.drawer-indent:hover { opacity:1; }