:root{
  --bg:#e5e6e7; --fg:#0b0b0b; --muted:#6b6b6b; --border:#bcbec0;
  --card:#ffffff; --accent:#7d7f82; --invert-bg:#0b0b0b; --invert-fg:#e5e6e7;
  --nav-h:64px; /* JS updates this at runtime */
}

@font-face{
  font-family:'Black Ops One Local';
  src:url('assets/fonts/BlackOpsOne-Regular.woff2') format('woff2'),
      url('assets/fonts/BlackOpsOne-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

html, body {
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:'Black Ops One Local', sans-serif;
  text-transform:uppercase; letter-spacing:1px;
  height:100%;
}
*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}


/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:1001;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0)) 18px 12px 18px;
  background:#d3d4d6; border-bottom:1px solid var(--border);
}
.logo-link{display:flex; align-items:center; margin-right:auto;}
.logo{height:36px; width:auto; display:block;}

.links{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto;
}

/* CART */
.nav-cart{display:flex; align-items:center; gap:8px; font-weight:700; justify-self:end;}
.cart-icon{width:20px; height:20px; display:inline-block; filter:brightness(0); transition:transform .2s;}
.nav-cart:hover .cart-icon{transform:scale(1.1);}

/* TABS */
.tab{
  border:2px solid #000; padding:6px 14px; margin:0 4px; transition:.15s;
  clip-path:polygon(10% 0%,90% 0%,100% 10%,100% 90%,90% 100%,10% 100%,0% 90%,0% 10%);
}
.tab:hover{background:var(--invert-bg); color:var(--invert-fg);}

/* TITLE */
.nav-title{
  font-weight:900; letter-spacing:2px; line-height:1;
  white-space:nowrap; color:#000;
}

/* ============ Hamburger ============ */
.nav-toggle{
  width:44px; height:44px; padding:0;
  display:none;
  flex-direction:column;        /* ✅ stack bars */
  align-items:center;
  justify-content:center;
  gap:6px;                      /* spacing between bars */
  border:2px solid #000;
  border-radius:6px;
  background:transparent;
  position:relative;
  color:#707070;                /* gray lines */
}
.nav-toggle .bar{
  display:block;
  width:28px; height:3px;
  background:currentColor;
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}

/* Animate into X */
.nav-toggle[aria-expanded="true"]{ gap:0; }
.nav-toggle[aria-expanded="true"] .bar{
  position:absolute; left:50%; top:50%; transform-origin:center center;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; transform:translate(-50%,-50%); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

/* Hidden screenreader text */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ Mobile menu slide-down overlay ============ */
.menu{
  position:fixed;
  top:var(--nav-h, 60px);
  left:0; right:0;
  max-height:calc(100vh - var(--nav-h,60px));
  overflow-y:auto;
  background:#e1e2e4;
  z-index:1000;
  transform:translateY(-120%);
  opacity:0; visibility:hidden;
  transition:transform .25s ease, opacity .25s ease, visibility .25s;
}

/* Visible state */
.menu.is-open{
  transform:translateY(0);
  opacity:1; visibility:visible;
}

/* Mobile menu items stacked + borderless */
.menu .tab{
  display:block;
  width:100%;
  padding:14px 16px;
  margin:0;
  background:transparent;
  border:none !important;     /* ✅ remove beveled borders */
  clip-path:none;
  text-align:center;
}

/* LOCK SCROLL when open */
body.no-scroll{ overflow:hidden; }

/* ==== Desktop ==== */
@media (min-width:801px){
  .links{ display:flex !important; }
  .nav-toggle{ display:none !important; }
  #main-menu.menu{ display:none !important; }

  .logo-link{ display:none !important; }

  .nav{
    display:grid;
    grid-template-rows:auto auto;
    grid-template-columns:1fr auto;
    row-gap:8px;
  }

  .nav-title{
    grid-row:1; grid-column:1 / -1;
    justify-self:center; text-align:center;
    font-size:clamp(28px,5vw,56px);
    letter-spacing:.14em;
    padding-inline:8px;
    white-space:nowrap;
    margin:0;
  }

  .links{ grid-row:2; grid-column:1; justify-self:center; }
  .nav-cart{ grid-row:2; grid-column:2; justify-self:end; }
}

/* ==== Mobile ==== */
@media (max-width:800px){
  .links{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; }

  .logo-link{ display:none !important; }

  .nav{
    grid-template-columns:44px 1fr auto;
    grid-template-rows:auto auto;
    row-gap:8px;
    column-gap:8px;
    align-items:center;
    padding:calc(12px + env(safe-area-inset-top,0)) 16px 12px 16px;
  }

  .nav-title{
    grid-column:1 / -1; grid-row:1;
    justify-self:center; text-align:center;
    font-size:min(38px, 7.2vw);
    letter-spacing:clamp(.03em,.9vw,.10em);
    white-space:nowrap;
    max-width:100%;
    padding-inline:6px;
    box-sizing:border-box;
  }

  .nav-toggle{ grid-column:1; grid-row:2; justify-self:start; }
  .nav-cart{ grid-column:3; grid-row:2; justify-self:end; }
}


/* ================= CONTENT ================= */
.container{max-width:1100px; margin:0 auto; padding:24px; padding-bottom:0;}
.hero{padding:36px 0; text-align:center;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
.card{background:var(--card); border:2px solid var(--border); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;}
.card .content{padding:12px; display:flex; flex-direction:column; gap:8px;}
.badge{font-size:12px; color:var(--muted); padding:4px 8px; border-radius:999px; border:1px solid var(--border); display:inline-block;}
.price{font-weight:800;}
.controls{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.controls label{font-size:12px; color:var(--muted);}
.select,.qty{padding:8px; border:2px solid var(--border); border-radius:6px; background:#fff; font:inherit; letter-spacing:inherit;}
.checkbox{display:flex; align-items:center; gap:8px;}
.btn{display:inline-block; padding:10px 14px; border:2px solid var(--fg); border-radius:6px; text-align:center;}
.btn:hover{background:var(--invert-bg); color:var(--invert-fg);}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}
.toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; border:2px solid var(--border); cursor:pointer; background:var(--card);}
.toggle.active{background:var(--accent); color:var(--invert-fg); border-color:var(--accent);}
@media (max-width:800px){ .controls{grid-template-columns:1fr;} }


/* ==================
   Background image
===================== */
body{
  background-image:url("assets/diamond-plate.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  background-attachment:scroll;
  min-height:100%;
}

/* ============ Headings (beveled) ============ */
h1, h2{
  display:inline-block;
  background:#d3d4d6;
  color:#000;
  padding:10px 18px;
  margin:12px 0;
  border:2px solid #000;
  clip-path:polygon(10% 0%,90% 0%,100% 10%,100% 90%,90% 100%,10% 100%,0% 90%,0% 10%);
}

/* ============ Hotspots ============ */
.humvee-hotspots{ margin:1.5rem 0 2rem; display:grid; place-items:center; }
.hotspot-container{ position:relative; width:min(1100px,95vw); }
.humvee-img{ width:100%; height:auto; display:block; user-select:none; pointer-events:none; }
.hotspot{
  position:absolute;
  width:clamp(20px,3.5vw,36px); height:clamp(20px,3.5vw,36px);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(220,0,0,.55);
  outline:2px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 6px rgba(220,0,0,.18);
  cursor:pointer;
}

/* Flash highlight */
@keyframes flash {
  0% { box-shadow:0 0 0 0 rgba(255,0,0,0); }
  30%{ box-shadow:0 0 0 8px rgba(255,0,0,.20); }
  60%{ box-shadow:0 0 0 0 rgba(255,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,0,0,0); }
}
.card.flash{ animation:flash 1500ms ease; }

/* Jeep override */
.jeep-hotspots .hotspot{
  background:rgba(128,128,128,0.75);
  outline:2px solid rgba(255,255,255,0.75);
}

/* ============ Cart styling ============ */
.cart-table { display:grid; gap:12px; }
.cart-row {
  display:grid;
  grid-template-columns:72px 1fr auto auto auto;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.cart-thumb {
  width:72px; height:72px; object-fit:cover;
  border-radius:10px; background:#eee;
}
.cart-info .cart-title { font-weight:700; }
.cart-info .cart-variant { font-size:.85rem; color:var(--muted); }
.cart-qty { display:flex; align-items:center; gap:6px; }
.qty-btn {
  width:28px;height:28px;border:1px solid var(--border);
  background:var(--bg); border-radius:8px; cursor:pointer;
}
.qty-input {
  width:52px;text-align:center;border:1px solid var(--border);
  border-radius:8px;padding:4px;background:var(--bg);
}
.cart-price { min-width:90px; text-align:right; font-weight:700; }
.cart-remove {
  width:32px;height:32px;border:1px solid var(--border);
  background:transparent;border-radius:8px;cursor:pointer;
}
.cart-summary {
  margin-top:16px;border-top:1px solid var(--border);padding-top:16px;
}
.cart-summary .row {
  display:flex; justify-content:space-between;
  font-size:1.1rem; margin:8px 0;
}
.cart-actions { display:flex; gap:10px; margin-top:10px; }
.btn.primary { background:var(--fg); color:var(--bg); border:1px solid var(--fg); }
.btn.outline { background:transparent; color:var(--fg); border:1px solid var(--border); }
.muted { color:var(--muted); font-size:.9rem; }

@media (max-width:700px){
  .cart-row {
    grid-template-columns:56px 1fr auto;
  }
}

/* Toast */
#toast-host {
  position: fixed; inset: 0; pointer-events: none;
}
#toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* FOOTER */
.footer{
  width:100vw;
  margin-left:50%; transform:translateX(-50%);
  background:#000; color:#cfcfcf;
  text-align:center;
  padding:20px 24px calc(20px + env(safe-area-inset-bottom,0));
  border-top:2px solid #d3d4d6;
  border-bottom:2px solid #d3d4d6;
}
.footer a{ color:#e0e0e0; text-decoration:none; }
.footer a:hover{ color:#ffffff; }