/* assets/ez-gate.css — the 21+ / OC-ZIP gate's look, for EVERY generated public page.
   Moved out of ez-page.css on 2026-09-13 (sweep high #2): the brand, day and city pages and deals.html
   do not load the product-page stylesheet, so the gate needs a sheet of its own that every page kind
   can link. Content-hashed by build-dist.js like ez-page.*; scripts/lib/gate.js emits the <link>.

   SELF-CONTAINED ON PURPOSE: every var() carries its fallback, because the day/city pages define a
   different (smaller) token set and deals.html a third. The fallbacks ARE the storefront's values —
   Signal Green #5BE584, Ink #0A0C0A — so the gate reads the same on a page that defines none of them.

   IT IS AN OVERLAY, NOT A CONTENT SWITCH. The markup underneath stays fully present — nothing here
   sets display:none on the PAGE, the one difference from index.html's gate (which hides #header/#app/
   #footer, because an SPA shell has nothing to index). SIMPLER than the storefront's, deliberately:
   no cinematic beat, no language-picker art, no blob field — the beat is the SITE'S opening, and a
   page reached from a search result is a second impression. Same palette, same ZIP field, the 21+
   affirmation on the button (no separate checkbox, owner 2026-08-13), the same keys and 30-day TTL as
   index.html so passing it here carries to essinza.com and back. One gate, not two. */
#ezgate{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;
  padding:24px;overflow:auto;overscroll-behavior:contain;touch-action:manipulation;opacity:1;
  color:var(--white,#f3f6f2);font-family:Inter,system-ui,sans-serif;box-sizing:border-box;
  background:radial-gradient(circle at 50% 0%,rgba(63,191,99,.16),transparent 55%),
    linear-gradient(180deg,#060706,#0a0d0a 60%,#060706)}
#ezgate *,#ezgate *::before,#ezgate *::after{box-sizing:border-box}
/* NO justify-content:center: with the keyboard open the column is taller than the viewport and a
   centred flex child overflows off the TOP of the scroll area, putting the headline out of reach. */
#ezgate[hidden]{display:none}
#ezgate.hide{opacity:0;pointer-events:none}
/* ⚠️ ONE `transition`, BOTH PROPERTIES. `transition` is a SHORTHAND: a second rule at equal
   specificity does not ADD to it, it REPLACES it. index.html shipped exactly that bug — a later rule
   declared `background` alone and silently dropped `opacity .6s`, so the gate stopped fading on the
   way OUT (the exit adds .hide). A third property goes IN this declaration, never in a new rule. */
#ezgate{transition:opacity .6s var(--ease,cubic-bezier(.22,.61,.36,1)),background .9s var(--ease-soft,cubic-bezier(.32,.72,0,1))}
/* once a page film plays the opaque ground becomes a scrim so it reads through — still heavy enough
   for the headline and the ZIP field, which are the point of this screen */
html.bgvid #ezgate{background:linear-gradient(180deg,rgba(6,7,6,.44),rgba(10,13,10,.16) 52%,rgba(6,7,6,.54))}
/* 🚪 the pre-paint stamp's two halves. age-ok: a verified visitor must NEVER see a flash of the
   gate, so it is display:none from before first paint, not hidden by script a second later. gate-up:
   position:fixed on the body is the only scroll lock Safari cannot rubber-band past (overflow:hidden
   alone still bounces) — the rubber-band was his own report, "feels like a pop up on top of the
   home screen". */
html.age-ok #ezgate{display:none}
html.gate-up{overscroll-behavior:none}
html.gate-up body{position:fixed;inset:0;width:100%;overflow:hidden}
/* the product page's loading veil stands aside: two covers stacked would put a dark square over the ZIP field */
html.gate-up .ez-veil-el{display:none}
.gate-card{position:relative;z-index:2;width:100%;max-width:440px;margin:0 auto;flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:left;padding:8px 2px}
.gate-card .brand-mark{max-height:44px;margin:0}
.ga-hero{display:flex;flex-direction:column;gap:10px}
.ga-h{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(30px,8vw,42px);line-height:1.06;
  letter-spacing:-.02em;margin:0;color:var(--white,#f3f6f2);text-shadow:0 0 60px rgba(91,229,132,.2)}
.ga-sub{color:#a9b4aa;font-size:15px;line-height:1.5;margin:0;max-width:320px}
.gate-field{display:flex;flex-direction:column;gap:13px}
/* 🔢 THE ZIP FIELD is the question this screen asks, so it is the biggest thing on the card. 23px is
   comfortably over the 16px floor where iOS Safari force-zooms a focused field. */
.ga-zip{position:relative}
.gate-input{width:100%;border-radius:18px;padding:19px 46px 19px 18px;color:var(--white,#f3f6f2);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--glass-hi,rgba(255,255,255,.22));outline:none;
  font:700 23px/1 Inter,system-ui,sans-serif;text-align:center;letter-spacing:.3em;text-indent:.3em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.5),0 10px 26px -14px rgba(0,0,0,.9);
  transition:border-color .25s,box-shadow .25s,background .25s}
.gate-input::placeholder{font:600 15px/1 Inter,sans-serif;letter-spacing:.06em;color:var(--muted-2,#6f786f)}
.gate-input:focus,.ga-zip.good .gate-input{border-color:var(--green,#5BE584);box-shadow:0 0 0 4px rgba(63,191,99,.16)}
.ga-zip.bad .gate-input{border-color:#ff8a8a;box-shadow:0 0 0 4px rgba(255,107,107,.12)}
.ga-tick{position:absolute;top:50%;right:16px;transform:translateY(-50%) scale(.4);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .28s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.ga-zip.good .ga-tick{opacity:1;transform:translateY(-50%) scale(1);background:var(--green,#5BE584);color:#04210f}
.ga-zip.bad .ga-tick{opacity:1;transform:translateY(-50%) scale(1);background:#ff8a8a;color:#2a0808}
/* one status line for BOTH answers, with the row reserved — a card that changes height the moment
   somebody types the fifth digit is a form you mistrust */
.gate-msg{min-height:20px;margin:0;font-size:13px;line-height:1.5;color:var(--muted,rgba(255,255,255,.66))}
.gate-msg.good{color:var(--green,#5BE584)}
.gate-msg.bad{color:#ff8a8a}
.gate-consent{color:var(--muted-2,#6f786f);font-size:11.5px;line-height:1.55;margin:0 2px;text-align:center}
.gate-consent a{color:var(--green-bright,#5BE584);text-decoration:underline;text-underline-offset:2px}
/* the primary stays SOLID green while everything round it is glass: the one control that has to say
   "press me" needs the highest contrast on screen, and a translucent button on a moving film changes
   legibility twice a second. Both class names are accepted so a page's own .btn.primary or
   index.html's .btn-primary land here without a silent miss — and the id outranks the page's own
   .btn rules, which is why every page kind can keep its buttons. */
#ezgate .btn.primary,#ezgate .btn-primary{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;border:1px solid rgba(255,255,255,.34);cursor:pointer;margin:0;
  border-radius:18px;padding:17px 22px;background:var(--green,#5BE584);color:var(--ink,#0A0C0A);
  font:800 15px/1 Syne,Inter,sans-serif;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 14px 34px -10px var(--green-glow,rgba(63,191,99,.45)),inset 0 1px 0 rgba(255,255,255,.55)}
/* padded to a real hit area: at 17px tall this was the hardest control on the page to tap, and it is
   the one that says somebody is under 21 */
.gate-deny{display:inline-block;align-self:center;min-height:36px;padding:9px 16px;cursor:pointer;
  border-radius:999px;border:1px solid var(--glass-line,rgba(255,255,255,.13));background:rgba(255,255,255,.045);
  color:var(--muted-2,#6f786f);font:500 12.5px/1.2 Inter,system-ui,sans-serif;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s}
.gate-deny:hover,.gate-deny:active{color:var(--white,#f3f6f2);border-color:var(--line-strong,rgba(255,255,255,.16));background:rgba(255,255,255,.09)}
.gate-legal{margin:0;color:var(--muted-2,#6f786f);font-size:11px;line-height:1.55;text-align:center}
.gate-legal a{color:var(--muted-2,#6f786f);text-decoration:underline}
@media (prefers-reduced-motion:reduce){#ezgate,.ga-tick,.gate-input,.gate-deny{transition:none}}
@media (max-width:430px){
  .ga-h{font-size:clamp(28px,8vw,34px)}
  .gate-input{padding:16px 42px 16px 14px;font-size:21px}
}