body { font-family: monospace; background-color: #021c11; color: white; margin: 0; }
.header, .footer { background-color: #072d1e; padding: 15px; text-align: center; }
.header h1 { margin: 10px 0 5px; font-size: 2em; color: #00ff91; }
.header img { max-height: 120px; }
.head-left-link a, .head-right-link a { transition: 0.3s ease; }
.head-left-link a:hover, .head-right-link a:hover { background-color: #0a4d31; color: #ffffff; text-shadow: 0 0 5px #00ffe7; padding: 5px 10px; border-radius: 5px; }

@font-face {
    font-family: 'BeaverPunch'; /*a name to be used later*/
    src: url('/BeaverPunch.otf'); /*URL to font*/
}
.classname {
    font-family: 'BeaverPunch';
}
.item-grid { display: flex; justify-content: center; flex-wrap: wrap; padding: 20px; gap: 20px; }
.item-card { background-color: #ffffff; color: black; padding: 10px; border-radius: 10px; width: 250px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.item-card img { max-width: 100%; height: auto; border-radius: 5px; }
.item-card.oos { opacity: .7; transition: opacity .2s ease; z-index: 99;}
.item-card.oos img { filter: grayscale(100%); transition: filter .2s ease; z-index: 99; }


.signup { background-color: #083e2c; padding: 30px; text-align: center; }
.signup input[type="email"] { padding: 10px; width: 250px; border: none; border-radius: 5px; }
.signup button { padding: 10px 20px; background-color: #00ffc3; color: black; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; }

.footer a { color: #99ffe0; text-decoration: none; margin: 0 10px; }
.footer a:hover { text-decoration: underline; }

/* === NAV 2.0 — spruce & polish ======================================= */
:root{
  --nav-bg: rgba(6,46,27,.78);
  --nav-edge: rgba(255,255,255,.10);
  --nav-card: rgba(12,51,34,.92);
  --nav-ink: #e9fff7;
  --nav-muted:#a6ffe6;
  --nav-accent:#00ffc3;
}

.main-nav{
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  background: linear-gradient(180deg, var(--nav-bg), rgba(6,46,27,.92));
  border-bottom: 1px solid var(--nav-edge);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.top_level{
  list-style: none; margin: 0 auto; padding: 0 12px;
  max-width: 1200px;
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
  gap: 2px;
}

/* Top-level link */
.nav_item{ position: relative; }
.nav_item > a{
  --pad-x: 16px;
  display: block; padding: 14px var(--pad-x);
  color: var(--nav-muted); text-decoration: none; font-weight: 800; letter-spacing:.3px;
  border-radius: 10px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  position: relative;
}
.nav_item > a::after{
  content:""; position:absolute; left: var(--pad-x); right: var(--pad-x); bottom: 8px;
  height: 2px; border-radius: 999px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--nav-accent), transparent);
  transition: transform .25s ease;
}
.nav_item > a:hover,
.nav_item > a:focus-visible{
  background: rgba(0,255,195,.10);
  color: var(--nav-ink);
  box-shadow: 0 6px 18px rgba(0,255,195,.10) inset;
}
.nav_item > a:hover::after,
.nav_item > a:focus-visible::after{ transform: scaleX(1); }

.main-nav a:focus-visible{
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px; border-radius: 10px;
}

/* Dropdown */
.sub_level{
  list-style:none; margin:0; padding:10px;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 240px; max-width: 560px;
  background: var(--nav-card);
  border: 1px solid var(--nav-edge); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sub_level hr{
  grid-column: 1/-1;
  height: 1px; border: 0; background: var(--nav-edge); margin: 6px 2px;
}
.sub_level li{ margin:0; }
.sub_level a{
  display:block; padding:8px 10px; border-radius:8px;
  color: var(--nav-muted); text-decoration:none; font-weight:700;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sub_level a:hover{
  background: rgba(0,255,195,.08);
  border-color: rgba(0,255,195,.25);
  color: var(--nav-ink);
}

.nav_item:hover > .sub_level,
.nav_item:focus-within > .sub_level{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateY(0) scale(1);
}

/* Optional “active” state you can add with PHP: class="active" */
.nav_item > a.active{
  background: rgba(0,255,195,.12);
  color: var(--nav-ink);
}
/* Bridge the hover gap so you can move to the submenu without it closing */
.nav_item{
  position: relative;
  --hover-gap: 10px; /* was 8px; make it a variable so it’s easy to tweak */
}

/* Invisible strip that extends the hover area below the top link */
.nav_item::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--hover-gap);
  /* no background; it just keeps the :hover on the li while you cross */
}

/* Position submenu after that gap and ensure it overlays content */
.sub_level{
  top: calc(100% + var(--hover-gap));
  z-index: 1000;               /* keep it above other content */
  pointer-events: none;        /* as you had */
}
.nav_item:hover > .sub_level,
.nav_item:focus-within > .sub_level{
  pointer-events: auto;        /* become interactive when open */
  /* your existing open-state transitions remain */
}

/* Cart icon subtle glow */
.cart-icon a{ transition: filter .2s ease, transform .2s ease; }
.cart-icon a:hover{ filter: drop-shadow(0 0 10px rgba(0,255,195,.45)); transform: translateY(-1px); }

/* ===== Mobile drawer ===== */
@media (max-width: 900px){
  /* Default: visible menu on mobile so there’s always a nav */
  .top_level{
    display:flex;                 /* was: display:none */
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px;
  }

  /* Only hide it when JS is present; the burger then controls visibility */
  .js .top_level{ display:none; }

  /* When the burger toggles .nav--open, show the menu */
  .main-nav.nav--open .top_level{ display:flex !important; }

  .nav_item{ border-top: 1px solid var(--nav-edge); }
  .nav_item > a{ padding: 14px 12px; border-radius: 8px; }

  .sub_level{
    position: static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background: transparent; border:0; box-shadow:none;
    padding: 6px 6px 10px 14px; grid-template-columns: 1fr;
    display:none;
  }
  .nav_item.open > .sub_level{ display:grid; }
  .sub_level a{ padding:8px; }
}
/* Burger button */
.MobileMenu{
  display:none; /* hidden on desktop, shown via media query below */
  align-items:center; gap:8px;
  padding:8px 12px;
  background:#083e2c;
  color:#e9fff7;
  border:1px solid #0a4d31;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}
.MobileMenu svg { display:block; }
.MobileMenu__label { font-size:14px; line-height:1; }

/* Only show burger on small screens */
@media (max-width: 900px){
  .MobileMenu{ display:inline-flex; }
  /* hide the “Contact / About Us” inline links on mobile to reduce clutter */
  .head-left-link{ display:none; }
}

/* (From earlier fix) mobile menu visibility logic */
@media (max-width: 900px){
  /* visible by default if JS is off */
  .top_level{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0; padding:10px;
  }
  /* hide when JS present; burger toggles it */
  .js .top_level{ display:none; }
  .main-nav.nav--open .top_level{ display:flex !important; }
}

/* Hide burger by default (desktop), show on mobile */
.mobile-only { display: none; }
.MobileMenu   { display: none; }

@media (max-width: 900px){
  .mobile-only { display: block; text-align: center; margin: 8px 0; }
  .MobileMenu{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    background: #083e2c; border: 1px solid #0a4d31; color: #e9fff7;
    min-height: 44px; /* good tap target */
  }
  .MobileMenu svg { width: 24px; height: 24px; }
  .MobileMenu svg rect { fill: currentColor; }
  .MobileMenu__label { font-weight: 700; font-size: 14px; }
}

/* Prevent page scroll while drawer is open */
body.no-scroll {
  overflow: hidden;
}

/* MOBILE drawer: make it a full-screen overlay when open */
@media (max-width: 900px){
  /* default (closed) uses your existing sticky styles */

  .main-nav.nav--open{
    position: fixed;      /* overlay the whole viewport */
    inset: 0;             /* top/right/bottom/left = 0 */
    z-index: 1000;
    background: rgba(6,46,27,.96);  /* solid enough to feel modal */
    backdrop-filter: saturate(120%) blur(8px);
    -webkit-backdrop-filter: saturate(120%) blur(8px);
    display: block;
  }

  /* Dim backdrop via a pseudo element (optional) */
  .main-nav.nav--open::before{
    content:"";
    position: absolute; inset:0;
    background: rgba(0,0,0,.12);
    pointer-events: none;
  }

  /* The list becomes the internal scroller */
  .main-nav .top_level{
    display: none; /* your JS toggles visibility; keep this default */
  }
  .main-nav.nav--open .top_level{
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px 24px;
    max-height: calc(100dvh - 80px);  /* room for status/toolbars */
    overflow-y: auto;                  /* ← this is the big one */
    overscroll-behavior: contain;      /* stop scroll chaining */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
    position: relative;
  }

  /* Submenus stay in flow (no nested scroller needed) */
  .sub_level{
    position: static;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: 6px 6px 12px 14px;
    grid-template-columns: 1fr;
    display: none;
  }
  .nav_item.open > .sub_level{ display: grid; }

  /* Space for iOS safe area at bottom */
  .main-nav.nav--open .top_level{
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}
/* utility: show only on mobile */
.only-mobile{ display:none; }
@media (max-width:900px){
  .only-mobile{ display:block; }
}

/* optional polish for the All link */
.sub_level a.all-link{
  font-weight:800;
  background: rgba(0,255,195,.06);
  border: 1px solid rgba(0,255,195,.25);
  border-radius:8px;
}

/* (optional) FAQ tweak if you want these globally */
.faq-answer a { color: #a6ffe6; text-decoration: underline; }
.faq-answer a:hover { color: #ffffff; text-shadow: 0 0 5px #00ffe7; }

.footer { background-color: #062e1b; color: #baffdf; padding: 40px 20px; font-size: 14px; }
.footer-container { max-width: 1200px; margin: 0 auto; }
.footer-logo { text-align: center; margin-bottom: 20px; }
.footer-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.footer-info-col { flex: 1 1 200px; min-width: 150px; }
.footer-info-col h5 { color: #00ffc3; font-size: 16px; margin-bottom: 10px; }
.footer-info-col ul { list-style: none; padding: 0; margin: 0; }
.footer-info-col ul li { margin-bottom: 8px; }
.footer-info-col ul li a { color: #a6ffe6; text-decoration: none; }
.footer-info-col ul li a:hover { color: #ffffff; text-shadow: 0 0 5px #00ffe7; }

.btn-disabled{ display:inline-block; background:#083e2c; color:#baffdf; border:1px solid #0a4d31; padding:6px 10px; border-radius:8px; cursor:not-allowed; text-decoration:none; }
.btn-view{ display:inline-block; background:#00ffc3; color:#001a14; padding:6px 10px; border-radius:8px; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(0,255,195,.18); }
.btn-view:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,255,195,.24); }


.get-social .social-icons { margin: 10px 0; }
.get-social a { color: #00ffc3; margin-right: 10px; display: inline-block; transition: 0.3s ease; }
.get-social a:hover { color: #ffffff; transform: scale(1.1); }

.footer_address { font-style: normal; margin-top: 15px; color: #aaffdd; font-size: 13px; }
.footer-copy { text-align: center; margin-top: 30px; font-size: 13px; color: #77ffd9; }

.top-search-wrap{ position:relative; width:100%; max-width:420px;margin-left: auto;margin-right: 25px; }
.top-search{
  display:flex; align-items:center; gap:6px;
  background:#0b241b; border:1px solid #0a6a4a; border-radius:999px;
  padding:6px 8px; max-width:420px; width:100%;
  margin-left: auto;
  margin-right: auto;
}
.top-search input{
  flex:1; min-width:140px; background:transparent; border:0; color:#e6fff6; outline:none;
}
.top-search button{
  background:#00ffc3; color:#001a14; border:0; border-radius:999px; font-weight:800; padding:6px 10px; cursor:pointer;
}

/* dropdown */
.top-search-drop{
  position:absolute; left:0; right:0; top:100%; margin-top:6px;
  background:#000; border:1px solid #0a6b51; border-radius:10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 24px rgba(0,255,163,.06);
  padding:8px; z-index:9999;
}
.sug-row{
  display:grid; grid-template-columns:56px 1fr auto; gap:10px;
  padding:8px; border-radius:8px; align-items:center; text-decoration:none; color:#9effd8;
}
.sug-row:hover, .sug-row[aria-selected="true"]{
  background:#041d14; outline:1px solid #0a6b51; color:#00ffa3;
}
.sug-img{ width:56px; height:56px; border-radius:8px; object-fit:cover; background:#0b0f0d; border:1px solid rgba(255,255,255,.08); }
.sug-title{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#b8ffe9; }
.sug-meta{ font-size:.85rem; color:#79ffd8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-right{ text-align:right; font-size:.9rem; color:#00ffc3; font-weight:800; }
.sug-badge{ font-size:.75rem; color:#00ffa3; }
.sug-empty, .sug-more{
  padding:8px; color:#79ffd8; font-size:.95rem; border-top:1px dashed #0a6b51; margin-top:6px;
}
@media (max-width:900px){
  .top-search-wrap{ max-width:none; }
}

/* --- NAV submenu hover-gap fix (override) --- */
.main-nav .nav_item{ position: relative; --hover-gap: 8px; }

/* We no longer need an external gap bridge */
.main-nav .nav_item::before{ display: none; }

/* Place the gap INSIDE the dropdown (hoverable area) */
/* Make sure dropdowns sit above EVERYTHING, including the search suggestions */
.main-nav .sub_level{
  z-index: 20000; /* higher than .top-search-drop (9999) */
}

/* While a menu is open, don't let the search capture hover/focus */
.main-nav.menu-open .top-search-wrap{ pointer-events: none; }
.main-nav.menu-open .top-search-drop{
  display: none !important;
  visibility: hidden !important;
}

.nav_item.hover-open > .sub_level{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }