:root{
  --page-pad: 16px;
  --card-pad: 12px;
  --radius: 16px;

  --modal-max: 560px;
  --shadow: 0 10px 40px rgba(0,0,0,.5);

  --title-size: clamp(1.25rem, 4.5vw, 1.75rem);
  --text-size: clamp(0.95rem, 3.8vw, 1rem);
}

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

html, body{ height: 100%; }


body, #employee{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #2f2f2f;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}


#site-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* iOS Safari likes explicit layers */
  background-color: rgba(0,0,0,.7);
  background-repeat: no-repeat;
  background-position: center center;


  background-size: 86vmin auto;
}

/* ================= APP WRAPPER ================= */
#Puff_Puff_Application{
  position: relative;
  z-index: 1;
  margin-top:75px;
  padding-top:25px;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  min-height: 100vh; 
  min-height: 100svh;                
  min-height: -webkit-fill-available;


  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));
}


.app-shell{
  width: min(960px, 100%);
  padding: var(--card-pad);
  border-radius: var(--radius);
  /* background: rgba(0,0,0,.35); */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  
}


.app-shell iframe{
  display: block;
  width: 100%;
  border: 0;
  height: 178vh;  
  height: 178svh;  
  min-height: 640px;
   overflow-y: scroll;
  
}


#age-gate{
  position: fixed;
  inset: 0;
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 9999;

  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));

  background: rgba(0,0,0,.65);
}


.age-gate-box{
  width: min(var(--modal-max), 100%);
  padding: clamp(16px, 4vw, 28px);
  border-radius: var(--radius);
  background: #111;
  color: #fff;
  box-shadow: var(--shadow);

  max-height: calc(100svh - 40px);
  overflow: auto;

  animation: pop .25s ease-out;
}


.age-gate-title,
#age-verification{
  margin: 0 0 8px;
  text-align: center;
  font-size: var(--title-size);
  line-height: 1.2;
  color: darkgray;
}

.age-gate-desc{
  margin: 0 0 18px;
  text-align: center;
  font-size: var(--text-size);
  opacity: .85;
  color: darkgray;
}


.age-gate-buttons, .employees{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#age-yes,
#age-no, #employee-section{
  flex: 1 1 180px;
  min-width: min(180px, 100%);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px; 
}

#age-yes{
  background: darkgreen;
  color: #053019;
}

#age-no{
  background: darkred;
  color: #fff;
  border-color: #ffffff33;
}

#employee-section{
  align-items: center;
  justify-content: center;
  margin-top: 8.5px;
  padding-top: 12px;
  border: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, darkred 0%, darkgreen 50%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: goldenrod;
  font-weight: bold;
  transition: background-position 250ms ease, color 200ms ease;
  overflow: hidden;
  background-clip: padding-box;
}

#employee-section:hover{
  background: linear-gradient(90deg, darkred 0%, darkgreen 30%, gold 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: black;
}


#age-yes:hover{ border-color: darkblue; }
#age-no:hover{ border-color: orangered; }


@keyframes pop{
  from{ transform: scale(.96); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

@media (max-width: 420px){
  :root{ --page-pad: 12px; }
  .app-shell{ padding: 10px; border-radius: 14px; }


  #age-yes, #age-no{ flex-basis: 100%; }

  .app-shell iframe{
    height: 82vh;
    height: 82svh;
    min-height: 600px;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .age-gate-box{ animation: none; }
}

#underage-verification{
  text-align: center;
}

 
/* #age-title:hover{
  color:orangered;
  cursor: pointer;
} */

#underage-gate{
  position: fixed;
  inset: 0;
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 10000;

  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));

  background: rgba(0,0,0,.75);
}

/* Underage buttons */
#underage-back,
#underage-leave{
  flex: 1 1 180px;
  min-width: min(180px, 100%);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

#underage-back{
  background: #2a2a2a;
  color: #eaeaea;
  border-color: #ffffff33;
}

#underage-leave{
  background: darkred;
  color: #fff;
  border-color: #ffffff33;
}

#underage-back:hover{ border-color: #ffffff66; }
#underage-leave:hover{ border-color: orangered; }


#employee-portal{
  display: none;        /* start hidden */
  position: relative;
  z-index: 2;           /* above background */
  color: white;         /* visible on dark bg */
  padding: 24px;
}

/* =========================================================
   VERIFIED DESTINATION CHOOSER (matches existing gate styles)
   ========================================================= */

#verified-gate{
  position: fixed;
  inset: 0;
  display: none;                 /* shown by JS */
  align-items: center;
  justify-content: center;
  z-index: 10001;

  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));

  background: rgba(0,0,0,.70);
}

/* buttons inside verified chooser (same sizing + feel as your others) */
#go-menu,
#go-application,
#verified-back{
  flex: 1 1 180px;
  min-width: min(180px, 100%);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}


#go-menu{
  background-color:#053019;
  color: goldenrod
}
#go-menu:hover{  
  background: linear-gradient(90deg, darkred 0%, darkgreen 30%, gold 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: black; }


#go-application{
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  
  background: darkslateblue;
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: goldenrod;
  font-weight: bold;
  transition: background-position 250ms ease, color 200ms ease;
  overflow: hidden;
  background-clip: padding-box;
}
#go-application:hover{
  background: linear-gradient(90deg, darkred 0%, darkgreen 30%, gold 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: black;
}


#verified-back{
  background: darkred;
  color: #eaeaea;
  border-color: #ffffff33;
}
#verified-back:hover{ border-color: #ffffff66; }




#Dispensary_Menu{
  position: relative;
  z-index: 1;
  margin-top: 75px;
  padding-top: 25px;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  min-height: 100vh;
  min-height: 100svh;
  min-height: -webkit-fill-available;

  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));
}


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

#Dispensary_Menu{
  position: relative;
  z-index: 1;
  margin-top: 75px;
  padding-top: 25px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  min-height: 100vh;
  min-height: 100svh;
  min-height: -webkit-fill-available;

  padding:
    calc(var(--page-pad) + env(safe-area-inset-top))
    var(--page-pad)
    calc(var(--page-pad) + env(safe-area-inset-bottom));
}


.menu-shell{
  width: min(960px, 100%);
  padding: clamp(12px, 2.2vw, 18px);
  border-radius: var(--radius);
  background: rgba(0,0,0,35);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.menu-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 10px 6px;
}

.menu-title{
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.75rem); 
  line-height: 1.15;
  color: darkgray;
}

.menu-subtitle{
  margin: 6px 0 0;
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  opacity: .85;
  color: darkgray;
}

.menu-back, #app-shell{
  background:#2a2a2a;
  color:#eaeaea;
  border: 1px solid #ffffff33;
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 44px;
  cursor:pointer;
}
.menu-back:hover{ border-color:#ffffff66; }

.menu-controls{
  display:flex;
  gap: 10px;
  padding: 10px;
  flex-wrap: wrap;
}

.menu-search{
  flex: 1 1 240px;
  min-width: min(240px, 100%);
}

.menu-search input{
  width: 100%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 44px;
  outline: none;
}
.menu-search input::placeholder{ color: rgba(255,255,255,.55); }
.menu-search input:focus{
  border-color: rgba(255,165,0,.65); /* orange focus hint */
  box-shadow: 0 0 0 3px rgba(255,165,0,.15);
}

.menu-sort{
  flex: 0 1 240px;
  min-width: min(240px, 100%);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 44px;
  outline: none;
}

/* category chips row */
.menu-chips{
  display:flex;
  gap: 10px;
  padding: 0 10px 10px;
  flex-wrap: wrap;
}

.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #eaeaea;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
}
.chip:hover{ border-color: rgba(255,255,255,.30); }

.chip.is-active{
  border-color: rgba(255,215,0,.55);
  color: goldenrod;
  background: rgba(255,215,0,.08);
}

/* product grid */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 10px;
}

.menu-card{
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  color: #fff;

  display:flex;
  flex-direction: column;
  gap: 8px;
}

.menu-card-top{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #eaeaea;
}

.tag-cat{
  border-color: rgba(255,215,0,.25);
  color: goldenrod;
  background: rgba(255,215,0,.08);
}

.tag-type.sativa{
  border-color: rgba(0,128,0,.35);
  color: #b9f6c3;
  background: rgba(0,128,0,.12);
}
.tag-type.indica{
  border-color: rgba(220,20,60,.35);
  color: #ffd0d7;
  background: rgba(220,20,60,.12);
}
.tag-type.hybrid{
  border-color: rgba(255,165,0,.35);
  color: #ffe1b3;
  background: rgba(255,165,0,.12);
}

.menu-card-name{
  margin: 2px 0 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.menu-card-brand{
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 0.95rem;
}

.menu-card-meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.75);
  font-size: 0.9rem;
  padding-top: 4px;
}

.menu-card-bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.menu-price{
  font-weight: 800;
  color: goldenrod;
  font-size: 1.05rem;
}

.menu-add{
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;

  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;

  
  background: linear-gradient(90deg, darkred 0%, darkgreen 50%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: goldenrod;
  transition: background-position 250ms ease, color 200ms ease, transform 120ms ease;
}
.menu-add:hover{
  background: linear-gradient(90deg, darkred 0%, darkgreen 30%, gold 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: black;
  transform: translateY(-1px);
}

.menu-footnote{
  margin: 6px 10px 12px;
  color: rgba(255,255,255,.65);
  font-size: 0.9rem;
  text-align: center;
}



body.menu-page{
  background: #2f2f2f; 
}


body.menu-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(900px 700px at 15% 10%, rgba(139,0,0,.28), transparent 60%),  /* darkred */
    radial-gradient(900px 700px at 85% 20%, rgba(0,100,0,.26), transparent 60%),  /* darkgreen */
    radial-gradient(900px 700px at 45% 95%, rgba(218,165,32,.20), transparent 62%), /* goldenrod */
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
  filter: blur(16px);
}


body.menu-page #Dispensary_Menu{
  position: relative;
  z-index: 1;                /* above the backdrop */
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  padding: 24px;
  display: flex;
  align-items: stretch;       /* stretch container vertically */
  justify-content: center;
}

/* make the “glass” container feel like a full-page panel */
body.menu-page #Dispensary_Menu .menu-shell{
  width: min(1100px, 100%);
  min-height: calc(100svh - 48px); /* fills most of the viewport */
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;
}






/* mobile tightening */
@media (max-width: 420px){
  .menu-header{ padding: 10px; }
  .menu-controls{ padding: 10px; }
  .menu-grid{ grid-template-columns: 1fr; }
}


@media (max-width: 420px){
  #go-menu,
  #go-application,
  #verified-back{
    flex-basis: 100%;
  }
}

 @media prefers-dark{
  body{
    background: #1a1a1a;
  }
} 

/* =========================================================
   PPP NAV — GLASS (CLEAN / NO DUPLICATES)
   ========================================================= */

:root{
  --nav-h: 64px;
  --nav-blur: 18px;
  --nav-stroke: rgba(255,255,255,.12);
  --nav-shadow: 0 18px 55px rgba(0,0,0,.55);

  --ppp-gold: goldenrod;
  --ppp-red: darkred;
  --ppp-green: darkgreen;
}

/* DO NOT globally reset all buttons (it breaks your other UI) */
/* button{ border:none; background:none; }  <-- remove this */

.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;

  min-height: var(--nav-h);
  width: 100%;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-bottom: 1px solid var(--nav-stroke);
  box-shadow: var(--nav-shadow);

  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));

  transform: translateZ(0);
  position: sticky;
  top: 0;

  /* needed for ::before glow */
  position: sticky;
}

.ppp-nav{
  position: sticky;
  top: 0;
}

/* ✅ make ::before glow work without affecting layout */
.ppp-nav{
  position: sticky;
  top: 0;
}
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }

/* actual fix: give it positioning context */
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }
.ppp-nav{ position: sticky; top: 0; }

.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;
  /* ✅ THIS is what you need */
  position: sticky;
  top: 0;
}

.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;
  /* ✅ And this */
  position: sticky;
  top: 0;
}

/* STOP: above repeats aren’t needed. Keep only below final clean version: */

.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;

  min-height: var(--nav-h);
  width: 100%;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-bottom: 1px solid var(--nav-stroke);
  box-shadow: var(--nav-shadow);

  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));

  transform: translateZ(0);
  position: sticky;
  top: 0;

  /* ✅ positioning context for ::before */
  position: sticky;
  top: 0;
  /* add this: */
  position: sticky;
  top: 0;
}

/* If you want the glow layer, do it safely: */
.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;
}
.ppp-nav{
  position: sticky;
  top: 0;
  z-index: 100000;
  /* ✅ real: */
  position: sticky;
  top: 0;
  /* ✅ actual: */
  position: relative;
}

.ppp-nav::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .75;
  background:
    radial-gradient(420px 180px at 12% 0%, rgba(139,0,0,.25), transparent 60%),
    radial-gradient(420px 180px at 88% 0%, rgba(0,100,0,.22), transparent 60%),
    radial-gradient(360px 160px at 50% 0%, rgba(218,165,32,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
}

.ppp-nav > *{ position: relative; z-index: 1; }
button{
    background:none;
  border:none;
    padding:0;
    margin:0;
    cursor:pointer;
}
.ppp-nav .nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:none;
  border:none;

  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;

  text-decoration: none;
  font-weight: 900;

  color: var(--ppp-gold);
  background: linear-gradient(90deg, var(--ppp-red) 0%, var(--ppp-green) 55%);
  background-size: 200% 200%;
  background-position: 0% 50%;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);

  transition: background-position 250ms ease, color 200ms ease, transform 120ms ease, border-color 200ms ease;
}

.ppp-nav .nav-link:hover{
  background: linear-gradient(90deg, var(--ppp-red) 0%, var(--ppp-green) 30%, rgba(218,165,32,.95) 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: #111;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
/* =========================================================
   RETURN HOME BUTTON (matches your gradient theme)
   ========================================================= */

#app-shell{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  margin: 8px 0 14px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 12px;

  font-weight: 900;
  color: goldenrod;

  background: linear-gradient(90deg, darkred 0%, darkgreen 55%);
  background-size: 200% 200%;
  background-position: 0% 50%;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);

  cursor: pointer;
  transition: background-position 250ms ease, color 200ms ease, transform 120ms ease, border-color 200ms ease;
}

#app-shell:hover{
  background: linear-gradient(90deg, darkred 0%, darkgreen 30%, rgba(218,165,32,.95) 99%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  color: #111;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
/* =========================================================
   APP SHELL = GLASS PANEL
   ========================================================= */

.app-shell{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* ================================
   FIX 1: Remove "black outline" on age gate
   ================================ */

/* kill any border/outline that reads as an outline */
.age-gate-box{
  border: 0 !important;
  outline: 0 !important;

  /* keep a soft shadow (no hard edge) */
  box-shadow: 0 20px 70px rgba(0,0,0,.55) !important;
}

/* if any browser focus ring causes an edge when clicking inside */
.age-gate-box *:focus,
.age-gate-box *:focus-visible{
  outline: none !important;
}


/* ================================
   FIX 2: Return Home "left smudge"
   (because the button also has class="app-shell")
   ================================ */

/* override the panel/glass styles ONLY for the Return Home button */
button#app-shell.app-shell{
  /* stop inheriting the glass panel look */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* ensure gradient paints cleanly to the edges */
  background: linear-gradient(90deg, darkred 0%, darkgreen 55%) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;

  /* keep your button frame clean */
  border: 1px solid rgba(255,255,255,.14) !important;
  background-clip: padding-box !important;
  overflow: hidden !important;

  /* prevent weird default button artifacts */
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
  -webkit-tap-highlight-color: transparent;
}

/* remove default focus halo that can look like a smudge */
button#app-shell:focus,
button#app-shell:focus-visible{
  outline: none !important;
}