/** Shopify CDN: Minification failed

Line 1261:0 Expected "}" to go with "{"

**/
/* OZMusic Modern theme styles - lightweight, no frameworks */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { width: min(1200px, 92%); margin-inline:auto; }
.flex { display:flex; gap:.75rem; }
.between { justify-content: space-between; }
.center { align-items: center; }
.site-header { position:sticky; top:0; backdrop-filter: blur(8px); background: color-mix(in hsl, var(--bg) 80%, black 20% / 40%); border-bottom:1px solid #1f2330; z-index:100; }
.site-header .container { padding: .9rem 0; }
.logo { font-weight: 800; letter-spacing:.3px; font-size:1.15rem; color: var(--text); text-decoration:none; }
.main-nav a { color: var(--muted); padding:.5rem .75rem; border-radius:12px; }
.main-nav a:hover { background: #1a2030; color: var(--text); }
.hero { padding: 5rem 0 3.25rem; background: radial-gradient(1200px 400px at 10% -10%, rgba(124,92,255,.25), transparent 60%), radial-gradient(1200px 500px at 90% -20%, rgba(0,224,217,.18), transparent 60%); border-bottom: 1px solid #1f2330;}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin:0 0 .75rem; }
.hero p { color:var(--muted); max-width: 680px; }
.button { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:14px; background: linear-gradient( to right, var(--accent), var(--accent-2) ); color:#0b0d12; font-weight:700; border:none; cursor:pointer; box-shadow: 0 6px 30px rgba(124,92,255,.3); }
.button.secondary { background:#1a2030; color:var(--text); box-shadow:none; border:1px solid #262a39; }
.grid { display:grid; gap:1rem; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { background: var(--card); border:1px solid #1f2330; border-radius:18px; padding:1rem; transition: transform .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); border-color:#2a2f42; }
.product-card img { width:100%; border-radius:14px; aspect-ratio: 1 / 1; object-fit:cover; background:#0f1219; }
.price { color: #d3d7e6; font-weight:700; }
.badge { display:inline-block; padding:.25rem .6rem; background:#0e1320; border:1px solid #2a2f42; color:#c5cff9; border-radius:999px; font-size:.75rem; }
.section { padding: 3rem 0; }
.section .section-head { margin-bottom: 1rem; display:flex; justify-content: space-between; align-items: end; }
.section .section-head h2 { margin:0; font-size: clamp(1.4rem, 3vw, 2rem); }
.testimonial { background: #0e1320; border:1px solid #1f2330; border-radius: 18px; padding:1rem; }
.faq details { background:#0f1422; border:1px solid #1f2330; border-radius:16px; padding: 1rem 1.2rem; }
.faq summary { cursor:pointer; font-weight:600; }
.site-footer { border-top:1px solid #1f2330; background:#0b0f19; }
.footer-inner { padding: 2rem 0; display:grid; gap:1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.small { font-size: .9rem; color: var(--muted); }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; background:#0d1220; border:1px solid #22283a; border-radius:999px; font-size:.8rem; }
.skip-to-content { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-to-content:focus { left:1rem; top:1rem; width:auto; height:auto; padding:.5rem 1rem; background:#fff; color:#000; border-radius:8px; }

/* Mobile Menu Styles - Matched to your theme */
.mobile-menu-toggle {
  display: none; /* Hidden by default on desktop */
  background: #0d1220;
  border: 1px solid #22283a;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 1/1;
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.mobile-menu-toggle:hover {
  background: #1a2030;
  border-color: #2a2f42;
}

.mobile-menu-icon,
.mobile-menu-close {
  font-size: 1.2rem;
  line-height: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
    z-index: 101;
  }
  
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: color-mix(in hsl, var(--bg) 80%, black 20% / 95%);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    margin: 0;
    border: none;
  }
  
  .main-nav.active {
    transform: translateX(0);
  }
  
  .main-nav a {
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
    border-radius: 14px;
  }
  
  .cart-link {
    margin-top: 1rem;
    background: #1a2030;
    border: 1px solid #262a39;
  }
}

/* Add these to your existing CSS */
:root {
  --accent: #7c5cff;
  --accent-2: #00e0d9;
  --bg: #0b0d12;
  --text: #e0e4f6;
  --muted: #7a82a6;
  --card: #0f1219;
}

/* Search results grid */
.search-results {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card-image {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 1/1;
  background: #0f1219;
}

.product-card-title {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  color: var(--text);
}

.article-card img,
.page-card {
  border-radius: 14px;
  margin-bottom: 1rem;
}


/* Sleek qty control */
.qty-control.sleek {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid #2a2f42;
  background: #0f1422;
  border-radius: 999px; /* pill style */
  padding: .25rem .5rem;
}

.qty-btn.sleek {
  background: var(--card);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .1s;
}
.qty-btn.sleek:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}
.qty-btn.sleek:active {
  transform: scale(.95);
}

.qty-input.sleek {
  width: 48px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  -moz-appearance: textfield;
}

/* Remove number input spinners */
.qty-input.sleek::-webkit-outer-spin-button,
.qty-input.sleek::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input.sleek {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Modern spec */
}

/* Remove number input spinners cross-browser */
input[type="number"].qty-input::-webkit-outer-spin-button,
input[type="number"].qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].qty-input {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Modern spec */
}

/* Extra insurance for Edge/Chromium */
.cart-form input[type="number"].qty-input {
  -webkit-appearance: none;
  appearance: none;
}










/* Product gallery slider */
.product-gallery { position: relative; }
.pg-viewport { position: relative; overflow: hidden; border-radius: 18px; background:#0f1219; }
.pg-track { display: flex; transition: transform .35s ease; }
.pg-slide { min-width: 100%; user-select: none; }
.pg-slide img { display:block; width:100%; height:auto; }

.pg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #2a2f42; background:#0f1422; color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer; opacity:.9;
}
.pg-prev { left: .6rem; }
.pg-next { right: .6rem; }
.pg-arrow:hover { background: var(--accent); border-color: transparent; }

.pg-dots { display:flex; gap:.4rem; justify-content:center; margin-top:.6rem; }
.pg-dot {
  width:10px; height:10px; border-radius:999px;
  background:#2a2f42; border:none; cursor:pointer;
}
.pg-dot.is-active { background: var(--accent); }
@media (max-width: 720px){
  .pg-arrow { width:34px; height:34px; }
}

/* Product gallery: mobile-first clean up */
.product-gallery { position: relative; margin-bottom: .75rem; }
.pg-viewport { position: relative; overflow: hidden; border-radius: 18px; background:#0f1219;
/* keep a steady square frame on mobile to avoid layout jump */
  aspect-ratio: 1 / 1;
}
.pg-track { display: flex; transition: transform .35s ease; will-change: transform; }
.pg-slide { min-width: 100%; user-select: none; }
.pg-slide img { display:block; width:100%; height:auto; }

/* Arrows */
.pg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #2a2f42; background: rgba(15,20,34,.85);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor: pointer; opacity:.95; backdrop-filter: blur(4px);
}
.pg-prev { left: .6rem; }
.pg-next { right: .6rem; }
.pg-arrow:hover { background: var(--accent); border-color: transparent; }

/* Dots */
.pg-dots { display:flex; gap:.5rem; justify-content:center; margin-top:.6rem; }
.pg-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background:#2a2f42; border:none; cursor:pointer;
}
.pg-dot.is-active { background: var(--accent); }

/* Mobile tuning */
@media (max-width: 720px){
  .pg-viewport { border-radius: 14px; }
  /* move arrows down so thumbs/headers don't overlap */
  .pg-arrow { top: auto; bottom: .5rem; transform: none; width: 36px; height: 36px; }
  .pg-prev { left: .5rem; }
  .pg-next { right: .5rem; }

  /* bring dots inside the image as a pill with blur background */
  .pg-dots {
    position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
    margin-top: 0; background: rgba(15,20,34,.6);
    padding: .25rem .5rem; border-radius: 999px; backdrop-filter: blur(4px);
  }
  .pg-dot { width: 8px; height: 8px; }
}

/* Medium screens — keep dots below image but tighten spacing */
@media (min-width: 721px) and (max-width: 980px){
  .pg-viewport { border-radius: 16px; }
  .pg-arrow { width: 38px; height: 38px; }
  .pg-dots { margin-top: .5rem; }
}




.product-layout { grid-template-columns: 1.1fr .9fr; gap: 1.5rem; }
@media (max-width: 980px){
  .product-layout { grid-template-columns: 1fr; }
}


/* search stuff */
.header-search {
  display:flex; align-items:center;
  background:#1a2030; border:1px solid #262a39; border-radius:14px;
  overflow:hidden; max-width:300px; transition:box-shadow .2s;
}
.header-search:focus-within { box-shadow:0 0 0 2px var(--accent); }
.header-search .search-input { flex:1; background:transparent; border:0; padding:.6rem .8rem; color:var(--text); outline:none; }
.header-search .search-button { background:transparent; border:0; padding:0 .75rem; color:var(--muted); cursor:pointer; }
.header-search .search-button:hover { color:var(--text); }
@media (max-width:768px){ .header-search{ max-width:100%; width:100%; } }



/* Compact, aligned product cards */
.product-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.product-card .pc-image{ display:block; border-radius:14px; overflow:hidden; }
.product-card .pc-image img{ display:block; width:100%; height:auto; }
.product-card .pc-image-fallback{ height:240px; background:#0f1219; border-radius:14px; }

.product-card .pc-body{ padding:.6rem .6rem .75rem; display:grid; gap:.35rem; }
.product-card .pc-title{
  color:var(--text); text-decoration:none; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.6em; /* keeps rows even */
}
.product-card .pc-meta{ display:flex; align-items:baseline; gap:.4rem; }
.product-card .pc-price{ font-weight:800; color:#d3d7e6; }
.product-card .pc-compare{ opacity:.65; text-decoration:line-through; }

.product-card .atc-form{ padding:0 .6rem .6rem; margin-top:auto; } /* button aligned */






/* Desktop nav baseline (prevents odd layout inheritance) */
.main-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Better header stacking on mobile */
.site-header { z-index: 200; }

/* Body scroll lock when menu is open */
body.no-scroll { overflow: hidden; }

/* Mobile overlay nav polish */
@media (max-width: 768px) {
  .main-nav {
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100dvh;              /* cover dynamic viewport */
    padding: max(env(safe-area-inset-top), 16px) 16px 24px; /* safe area */
    background: color-mix(in hsl, var(--bg) 80%, black 20% / 95%);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 199;                /* under header; above page */
    border: none;
    margin: 0;
  }
  .main-nav.active { transform: translateX(0); }

  /* Bigger, comfy tap targets */
  .main-nav a {
    display: block;
    width: min(520px, 92vw);
    text-align: center;
    margin-inline: auto;
    padding: .9rem 1.25rem;
    font-size: 1.1rem;
    background: #111729;
    border: 1px solid #262a39;
    border-radius: 14px;
    color: var(--text);
  }
  .main-nav a:hover { background:#1a2030; }

  /* Cart button gets emphasis */
  .main-nav .cart-link {
    background: #1a2030;
    border: 1px solid #2a2f42;
  }

  /* Put the toggle above the overlay */
  .mobile-menu-toggle { position: relative; z-index: 200; }
}


/* 1) Never allow horizontal scroll caused by off-canvas content */
html, body { overflow-x: hidden; }

/* 2) Mobile nav: keep it truly off-screen when closed */
@media (max-width: 768px){
  .main-nav {
    /* make sure it doesn't affect layout or tap targets while closed */
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100vw);          /* push by viewport width */
  }
  .main-nav.active {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* prevent rubber-banding revealing edges on iOS */
  .main-nav,
  body.no-scroll {
    overscroll-behavior: none;
    touch-action: manipulation;
  }
}


/* Never allow horizontal scrolling site-wide */
html, body { overflow-x: hidden; }

/* Off-canvas nav must not create page width when closed */
@media (max-width: 768px){
  .main-nav {
    position: fixed;
    inset: 0;
    max-width: 100vw;          /* hard cap */
    transform: translate3d(100vw, 0, 0); /* push by viewport, not % */
    visibility: hidden;
    pointer-events: none;
  }
  .main-nav.active {
    transform: translate3d(0,0,0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Prevent iOS rubber-banding from exposing edges */
  .main-nav,
  body.no-scroll { overscroll-behavior: none; }
}

/* Defensive: any generic grid/track should never expand page width */
.container,
.section,
.grid,
.cart-layout,
.product-gallery,
.pg-viewport { max-width: 100vw; }

/* Gallery: ensure the sliding track cannot influence page width */
.pg-viewport { overflow: hidden; }
.pg-track    { display:flex; will-change: transform; }
.pg-slide    { flex: 0 0 100%; min-width: 100%; }  /* slides are 100% of viewport */









/* Base: prevent sideways scroll */
html, body { overflow-x: hidden; }

/* Header cart badge */
.header-cart {
  margin-left: auto;
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--muted); text-decoration:none; padding:.35rem .6rem; border-radius:12px;
}
.header-cart:hover { background:#1a2030; color:var(--text); }
#cart-count.pulse { animation: cartPulse .5s ease; }
@keyframes cartPulse { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* Drawer shell */
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px); z-index: 199;
}
.main-nav { position: fixed; inset: 0; display: grid; place-items: stretch; z-index: 200; }
.main-nav .nav-sheet{
  position: fixed; inset: 0 0 0 30%;
  background: color-mix(in hsl, var(--bg) 85%, black 15% / 94%);
  border-left: 1px solid #1f2330;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: grid; grid-template-rows: auto auto 1fr auto auto;
  gap: .75rem; padding: 1rem;
}
@media (min-width: 769px){
  .main-nav, .nav-backdrop { display:none; }
}
.main-nav.active .nav-sheet { transform: translateX(0); }

/* Head row */
.nav-head { display:flex; align-items:center; justify-content:space-between; }
.nav-close { background:#0d1220; border:1px solid #22283a; color:var(--text); border-radius:12px; padding:.4rem .6rem; }
.nav-close:hover { background:#1a2030; border-color:#2a2f42; }

/* Links */
.nav-links { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.nav-links a {
  display:block; padding:.9rem 1.1rem; text-align:left;
  background:#111729; border:1px solid #262a39; border-radius:14px; color:var(--text); text-decoration:none;
}
.nav-links a:hover { background:#1a2030; }

/* CTA row + foot */
.nav-cta-row { margin-top:.25rem; }
.nav-foot { color:var(--muted); text-align:center; padding-top:.25rem; border-top:1px solid #121628; }

/* In-drawer search (reuse your header search styles) */

/* Snackbar */
.snackbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(640px, 92vw);
  background:#0f1422; border:1px solid #2a2f42; border-radius:14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 300;
}
.snackbar.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.snack-body{ display:flex; align-items:center; gap:.8rem; padding:.75rem .85rem; }
.snack-icon{ font-size:1.1rem; }
.snack-text strong{ display:block; }
.snack-cart{ margin-left:auto; }
.snack-close{
  background:transparent; border:0; color:var(--muted); font-size:1rem; cursor:pointer;
  margin-left:.25rem;
}
@media (max-width: 420px){
  .snack-body{ gap:.6rem; }
  .snack-cart{ display:none; } /* keep it minimal on tiny phones */
}

/* Mobile drawer behavior & no-scroll */
body.no-scroll { overflow: hidden; }




/* --- Mobile drawer: stable + no flicker --- */

/* 0) Prevent sideways scroll & rubber band */
html, body { overflow-x: hidden; overscroll-behavior: none; }
/* Prevent layout shift when scrollbar hides (desktop) */
html { scrollbar-gutter: stable both-edges; }

/* 1) Never animate the container; only the sheet */
.main-nav { transform: none !important; visibility: visible; pointer-events: auto; }

/* 2) Drawer sheet: width + animation */
:root { --drawer-w: 420px; }                  /* desktop/tablet drawer width */
@media (max-width: 768px){ :root { --drawer-w: 100vw; } } /* phones: full-width */

.main-nav { position: fixed; inset: 0; display: grid; place-items: stretch; z-index: 200; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); z-index: 199; }
.nav-backdrop[hidden] { display: none; }

.main-nav .nav-sheet{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--drawer-w);
  max-width: 100vw;
  background: color-mix(in hsl, var(--bg) 85%, black 15% / 94%);
  border-left: 1px solid #1f2330;
  display: grid; grid-template-rows: auto auto 1fr auto auto;
  gap: .75rem; padding: 1rem;

  /* flicker killers */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(100%,0,0);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.main-nav.active .nav-sheet { transform: translate3d(0,0,0); }

/* Keep header above everything */
.site-header { z-index: 300; }
.mobile-menu-toggle { position: relative; z-index: 301; }

/* Body scroll lock without jump */
body.no-scroll { overflow: hidden; }

/* Optional: tighter phone paddings inside sheet */
@media (max-width: 480px){
  .main-nav .nav-sheet { padding: .8rem .9rem; gap: .6rem; }
}

/* If any old mobile-nav rules exist that translate .main-nav, neutralize them */
@media (max-width: 768px){
  .main-nav { transform: none !important; }
  .main-nav.active { transform: none !important; }
}








/* FIX FOR HEADER */

/* ===== NAV BASELINE (Desktop first) ===== */

/* Ensure no horizontal scroll site-wide */
html, body { overflow-x: hidden; }

/* Header stacking */
.site-header { z-index: 300; }
.mobile-menu-toggle { position: relative; z-index: 301; }

/* Desktop inline nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: static;           /* important: not fixed on desktop */
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop hidden by default */
.nav-backdrop { display: none; }

/* Drawer panel (exists in DOM but not used on desktop) */
.main-nav .nav-sheet {
  display: none;              /* only used on mobile */
}

/* ===== MOBILE DRAWER (<= 768px) ===== */
@media (max-width: 768px){

  /* Show hamburger on mobile */
  .mobile-menu-toggle { display: inline-flex; }

  /* Mobile turns main-nav into an overlay host */
  .main-nav {
    position: fixed;
    inset: 0;
    display: grid;            /* host the sheet */
    place-items: stretch;
    z-index: 200;

    /* Closed state: invisible and not clickable */
    visibility: hidden;
    pointer-events: none;
  }

  /* Backdrop for drawer */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    z-index: 199;
    display: none;            /* toggled via JS */
  }

  /* Drawer sheet (slides in from right) */
  :root { --drawer-w: 100vw; } /* full width on phones */
  .main-nav .nav-sheet{
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: .75rem;
    padding: 1rem;

    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--drawer-w);
    max-width: 100vw;

    background: color-mix(in hsl, var(--bg) 85%, black 15% / 94%);
    border-left: 1px solid #1f2330;

    /* animation */
    transform: translate3d(100%,0,0);      /* start off-canvas */
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    backface-visibility: hidden;
  }

  /* When active, make host clickable & show sheet */
  .main-nav.active {
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav.active .nav-sheet {
    transform: translate3d(0,0,0);
  }
  .main-nav.active ~ .nav-backdrop {
    display: block;
  }

  /* Drawer link styles */
  .nav-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
  .nav-links a {
    display: block;
    padding: .9rem 1.1rem;
    text-align: left;
    background: #111729;
    border: 1px solid #262a39;
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
  }
  .nav-links a:hover { background: #1a2030; }

  .nav-head { display:flex; align-items:center; justify-content:space-between; }
  .nav-close { background:#0d1220; border:1px solid #22283a; color:var(--text); border-radius:12px; padding:.4rem .6rem; }
  .nav-close:hover { background:#1a2030; border-color:#2a2f42; }

  .nav-cta-row { margin-top:.25rem; }
  .nav-foot { color:var(--muted); text-align:center; padding-top:.25rem; border-top:1px solid #121628; }

  /* In-drawer search expands full width */
  .main-nav .header-search { width: 100%; max-width: none; }

  /* Body scroll lock when open */
  body.no-scroll { overflow: hidden; }
}

/* OPTIONAL: wider drawer on tablets (still mobile mode) */
@media (min-width: 481px) and (max-width: 768px){
  :root { --drawer-w: 420px; }   /* nice tray size on larger phones/tablets */
}


/* Desktop inline nav */
.nav-inline { display: none; }
@media (min-width: 769px){
  .nav-inline { display: block; }
  .nav-inline-list { display:flex; gap:.5rem; list-style:none; margin:0; padding:0; }
  .nav-inline-list a { color: var(--muted); padding:.5rem .75rem; border-radius:12px; text-decoration:none; }
  .nav-inline-list a:hover { background:#1a2030; color:var(--text); }
  .mobile-menu-toggle { display: none; } /* hide burger on desktop */
}

/* Drawer host is only used on mobile; existing drawer CSS you pasted before can remain */


/* === Drawer offset hot-fix (put at the very end) === */

/* 1) Only keep scrollbar gutter on desktops to avoid right offset on phones */
@media (min-width: 1025px){
  html { scrollbar-gutter: stable both-edges; }
}
@media (max-width: 1024px){
  html { scrollbar-gutter: auto; }
}

/* 2) Mobile: the overlay host must have zero padding/margin */
@media (max-width: 768px){
  .main-nav {
    padding: 0 !important;
    margin: 0 !important;
    left: 0; right: 0; top: 0; bottom: 0;  /* be explicit */
  }

  /* 3) Drawer sheet: box-size and exact anchoring to the right edge */
  :root { --drawer-w: clamp(320px, 92vw, 420px); } /* nice default */
  .main-nav .nav-sheet{
    position: fixed;
    top: 0; bottom: 0;
    right: 0; left: auto;                 /* hard-pin to right edge */
    width: min(var(--drawer-w), 100vw);   /* never exceed viewport */
    max-width: 100vw;
    box-sizing: border-box;               /* padding included in width */
    transform: translate3d(100%,0,0);
    will-change: transform;
  }

  .main-nav.active .nav-sheet{ transform: translate3d(0,0,0); }

  /* 4) Safe-area padding so it looks flush on iPhones with notches */
  .main-nav .nav-sheet{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }


/* 6) Absolute last word: no accidental transforms on the host */
@media (max-width: 768px){
  .main-nav { transform: none !important; }
}


@media (max-width: 768px) {
  :root {
    --drawer-w: 100%; /* or min(100vw, 100%) */
  }
}


.main-nav .nav-sheet {
  width: var(--drawer-w);
  max-width: 100%;
  right: 0;
  left: auto;
}


/* ==== FINAL CANONICAL MOBILE DRAWER (wins the cascade) ==== */

/* Desktop: drawer host does nothing */
@media (min-width: 769px){
  nav.main-nav { position: static; transform: none; visibility: visible; pointer-events: auto; }
  .nav-backdrop { display: none !important; }
  /* your desktop inline nav styles can remain */
}

/* Mobile: only the sheet animates */
@media (max-width: 768px){
  /* Never let the page get wider when drawer closed */
  html, body { overflow-x: hidden; }

  /* Host overlay container */
  nav.main-nav{
    position: fixed;
    inset: 0;
    z-index: 400;                 /* above content; adjust if needed */
    visibility: hidden;
    pointer-events: none;         /* closed state */
    padding: 0 !important;        /* important: no host padding */
    margin: 0 !important;
  }

  /* Backdrop (JS toggles [hidden]) */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    z-index: 399;
  }

  /* Drawer sheet */
  :root{ --drawer-w: 100%; }      /* use % not vw to avoid scrollbar offset */
  nav.main-nav .nav-sheet{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: var(--drawer-w);
    max-width: 100%;
    box-sizing: border-box;

    background: color-mix(in hsl, var(--bg) 85%, black 15% / 94%);
    border-left: 1px solid #1f2330;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    gap: .75rem;

    /* iOS safe areas */
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top:   max(16px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom));

    /* animate only the sheet */
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(100%,0,0);      /* closed off-canvas */
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }

  /* Open state */
  nav.main-nav.active{
    visibility: visible;
    pointer-events: auto;
  }
  nav.main-nav.active .nav-sheet{
    transform: translate3d(0,0,0);
  }

  /* Make sure no old rules animate the host */
  nav.main-nav{ transform: none !important; }
  nav.main-nav.active{ transform: none !important; }

  /* Tight tablet tray (optional) */
  @media (min-width: 481px){
    :root{ --drawer-w: 420px; }
  }
}

/* Desktop-only scrollbar gutter to avoid layout shift without hurting mobile */
@media (min-width: 1025px){
  html { scrollbar-gutter: stable both-edges; }
}


/* ==== SEARCH BAR FIX (prevents horizontal overflow) ==== */

/* Base: compact, bounded, no overflow */
.header-search{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  inline-size: min(420px, 100%);   /* cap on desktop, never exceed parent */
  max-inline-size: 100%;
  margin: 0;
  padding: 0;                      /* your inner padding lives on children */
  overflow: hidden;                /* contain any accidental overflow */
  background: #1a2030;
  border: 1px solid #262a39;
  border-radius: 14px;
}

/* Flex children: input can shrink; button doesn’t */
.header-search .search-input{
  flex: 1 1 auto;
  min-width: 0;                    /* CRUCIAL: allow input to shrink in flex */
  background: transparent;
  border: 0;
  padding: .6rem .8rem;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.header-search .search-button{
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0 .75rem;
  color: var(--muted);
  cursor: pointer;
}

/* Desktop header row: keep tools from pushing container width */
.site-header .container{ overflow-x: clip; } /* no visual change; prevents side-scroll */

/* Drawer/mobile: fill the sheet width, never use vw */
@media (max-width: 768px){
  .main-nav .header-search{
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

/* Optional: if you also render a search form in the desktop header bar */
@media (min-width: 769px){
  .site-header .header-search{
    inline-size: min(360px, 100%);
  }
}

/* Keep your focus ring */
.header-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.header-search .search-input::placeholder { color: var(--muted); }
.header-search .search-button:hover { color: var(--text); }


/* Icon-only button for drawer close (replaces .pill) */
.icon-btn{
  display:inline-grid;
  place-items:center;
  inline-size:40px; /* fixed */
  block-size:40px;
  padding:0;        /* important: no text padding */
  border-radius:12px;
  background:#0d1220;
  border:1px solid #22283a;
  color:var(--text);
  cursor:pointer;
}
.icon-btn:hover{ background:#1a2030; border-color:#2a2f42; }
.icon-btn:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }

/* Drawer header: prevent width growth from children */
.nav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  overflow:hidden;              /* contain any long logo text */
}
.nav-head .logo{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Drawer sheet must never exceed viewport */
.main-nav .nav-sheet{
  box-sizing:border-box;
  max-width:100vw;
  overflow-x:hidden;            /* belt-and-suspenders */
}




/* Keep desktop layout stable when lock is active */
@media (min-width: 1025px){
  html { scrollbar-gutter: stable both-edges; } /* reserves scrollbar space */
}

/* Scroll lock without width jump */
.body-locked {
  position: fixed;
  inset: 0;               /* top:0 right:0 bottom:0 left:0 */
  overflow: hidden;       /* prevent scroll */
  width: 100%;
}

/* Drawer sheet: ensure first frame is off-canvas and rendering is stable */
.main-nav .nav-sheet{
  transform: translate3d(100%,0,0);     /* initial off-screen */
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;                        /* prevents odd flicker on some GPUs */
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.main-nav.active .nav-sheet{ transform: translate3d(0,0,0); }


/* === Drawer de-glitch patch (paste last) === */

/* 1) Host should never animate or push layout */
@media (max-width: 768px){
  .main-nav{
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: stretch !important;

    /* host never translates — only the sheet does */
    transform: none !important;
    visibility: hidden;        /* closed state */
    pointer-events: none;
    overflow: hidden;          /* contain children */
  }
  .main-nav.active{
    visibility: visible;
    pointer-events: auto;
  }
}

/* 2) Drawer width based on *safe* viewport, with fallback */
:root{ --drawer-w: 420px; }
@media (max-width: 768px){
  :root{ --drawer-w: 100%; }               /* default phones fallback */
  @supports (width: 100svw){
    :root{ --drawer-w: min(100svw, 100%); }/* safe viewport if available */
  }
}

/* 3) Sheet slides; first frame is off-canvas */
.main-nav .nav-sheet{
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: auto;
  width: var(--drawer-w);
  max-width: 100%;
  box-sizing: border-box;

  background: color-mix(in hsl, var(--bg) 85%, black 15% / 94%);
  border-left: 1px solid #1f2330;

  transform: translate3d(100%,0,0) !important; /* initial */
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;                      /* stops flicker */
}
.main-nav.active .nav-sheet{
  transform: translate3d(0,0,0) !important;
}

/* 4) Backdrop independent of layout */
.nav-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 299;
  display: none;
}
.main-nav.active ~ .nav-backdrop{ display:block; }

/* 5) Children must never exceed sheet width (culprit: search) */
.main-nav .header-search,
.main-nav .nav-head,
.main-nav .nav-cta-row,
.main-nav .nav-foot,
.main-nav .nav-links{
  max-width: 100%;
  overflow: hidden;
}
.main-nav .header-search{ width: 100%; }

/* 6) Any 100vw inside drawer → cap to 100% */
.main-nav [style*="100vw"],
.main-nav [class*="100vw"]{
  max-width: 100% !important;
  width: 100% !important;
}

/* 7) Desktop keeps stable scrollbar gutter so width never changes */
@media (min-width: 1025px){
  html{ scrollbar-gutter: stable both-edges; }
}

/* 8) Fixed-size close button (no .pill growth) */
.icon-btn{
  display:inline-grid; place-items:center;
  inline-size:44px; block-size:44px; padding:0;
  border-radius:12px; background:#0d1220; border:1px solid #22283a; color:var(--text);
}
.icon-btn:hover{ background:#1a2030; border-color:#2a2f42; }
.nav-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.nav-head .logo{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* iOS-friendly translucent blur for header/footer */
.site-header, 
.site-footer {
  background: rgba(11, 13, 18, 0.7); /* semi-transparent */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* required for Safari iOS */
}

.main-nav.active ~ .nav-backdrop{ display:block; }


@media (min-width:1025px){
  html { scrollbar-gutter: stable both-edges; }
}












/* === Cart mobile polish (safe overrides) === */
@media (max-width: 720px){
  /* Kill table spacing & force block flow */
  .cart-table{
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    display: block;
    width: 100%;
  }
  .cart-table tbody{ display:block; }
  .cart-table thead{ display:none !important; }

  /* Each row becomes a card */
  .cart-row{
    display: block !important;
    border: 1px solid #1f2330;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: .75rem;         /* visual separation */
    background: var(--card);
  }
  .cart-row td{
    display: block !important;
    padding: .65rem .8rem !important;
    width: auto !important;        /* stop any leftover widths */
    border: 0 !important;
  }

  /* Fix: item cell shouldn’t be 50% on mobile */
  .cart-table .td-item{ width: auto !important; padding-bottom: 0; }

  /* Item media + text */
  .item-wrap{ display:flex; gap:.6rem; align-items:center; }
  .thumb{ width:64px; min-width:64px; height:64px; border-radius:10px; }
  .meta{ min-width: 0; }                          /* allow wrapping */
  .meta .title{ overflow-wrap:anywhere; }         /* long names won’t overflow */

  /* Labeled rows (Price / Qty / Total / Actions) */
  .td-price, .td-qty, .td-total, .td-actions{
    display:flex !important;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
  }
  .td-price::before, .td-qty::before, .td-total::before, .td-actions::before{
    content: attr(data-label);
    color: var(--muted);
    font-size: .85rem;
    flex: 0 0 auto;
  }

  /* Qty control: comfy taps, won’t wrap awkwardly */
  .qty-control{ gap:.25rem; padding:.25rem; border-radius:10px; }
  .qty-btn{ width:32px; height:32px; border-radius:8px; }
  .qty-input{ width:56px; text-align:center; }

  /* Footer actions */
  .cart-actions{
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
  }
  .cart-actions .button{ width: auto; }

  /* Summary spacing on mobile */
  .cart-summary{ margin-top: .5rem; }

  /* Prevent any accidental horizontal overflow */
  .cart-layout, .cart-items, .cart-summary, .cart-row, .meta, .price{
    max-width: 100%;
    overflow-x: hidden;
  }

  .update-cart {
    opacity: 0;
    display: hidden;
  }
}