/* PepTech mobile navigation drawer.

   Loaded on every page, including the Elementor-built ones where store.css is
   not present, so it carries the few design tokens it needs rather than
   depending on that stylesheet. The values are the design system's, copied -
   not new colours. Everything is scoped under .pt-nv. */

.pt-nv{
	--nv-ink:#0B1B2E; --nv-soft:#1E3350; --nv-muted:#546377; --nv-line:#D1DEEB;
	--nv-surface:#FFFFFF; --nv-sky:#E1F0FD; --nv-sky2:#CEE6F9;
	--nv-accent:#1668D6; --nv-accent-deep:#0F4C96; --nv-glow:rgba(22,104,214,.30);
	--nv-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
	--nv-display:"Space Grotesk",Inter,system-ui,sans-serif;

	position:fixed;inset:0;z-index:99998;
}
.pt-nv[hidden]{display:none!important}
.pt-nv *,.pt-nv *::before,.pt-nv *::after{box-sizing:border-box}

.pt-nv-scrim{
	position:absolute;inset:0;background:rgba(11,27,46,.45);
	opacity:0;transition:opacity .28s cubic-bezier(.4,0,.2,1);
}
.pt-nv.is-open .pt-nv-scrim{opacity:1}

/* from the left, which is the side the button is on */
.pt-nv-panel{
	position:absolute;top:0;left:0;bottom:0;width:min(320px,86vw);
	display:flex;flex-direction:column;background:var(--nv-surface);
	font-family:var(--nv-body);color:var(--nv-ink);
	box-shadow:24px 0 60px rgba(11,27,46,.18);
	transform:translateX(-100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
	overflow-y:auto;overscroll-behavior:contain;outline:none;
}
.pt-nv.is-open .pt-nv-panel{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
	.pt-nv-scrim,.pt-nv-panel{transition:none}
}

/* ------------------------------------------------------------------- header */

.pt-nv-head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	flex:0 0 auto;padding:20px 20px 18px;border-bottom:1px solid var(--nv-line);
}
.pt-nv-logo{display:inline-flex;align-items:center;max-width:190px}
.pt-nv-logo img{display:block;width:auto;max-width:100%;height:34px;object-fit:contain}
.pt-nv-logo-text{
	font-family:var(--nv-display);font-size:19px;font-weight:700;
	letter-spacing:-.01em;color:var(--nv-ink);text-decoration:none;
}
.pt-nv-x{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;padding:0;border:0;border-radius:9px;
	background:transparent;color:var(--nv-muted);cursor:pointer;
	transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1);
}
.pt-nv-x:hover{background:var(--nv-sky);color:var(--nv-ink)}

/* ------------------------------------------------------------------- search */

.pt-nv-search{position:relative;flex:0 0 auto;margin:18px 20px 6px}
.pt-nv input#pt-nv-s{
	width:100%;height:46px;padding:0 46px 0 16px;
	border:1px solid var(--nv-sky2);border-radius:12px;
	background:var(--nv-sky);
	font-family:var(--nv-body);font-size:14.5px;color:var(--nv-ink);
	box-shadow:none;-webkit-appearance:none;appearance:none;
	transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);
}
.pt-nv input#pt-nv-s::placeholder{color:#7E93AB}
.pt-nv input#pt-nv-s:focus{
	outline:none;border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-glow);
	background:var(--nv-surface);
}
.pt-nv-search-go{
	position:absolute;top:50%;right:6px;transform:translateY(-50%);
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;padding:0;border:0;border-radius:9px;
	background:transparent;color:var(--nv-muted);cursor:pointer;
}
.pt-nv-search-go:hover{color:var(--nv-accent)}

/* --------------------------------------------------------------------- list */

.pt-nv-list{list-style:none;margin:8px 0 0;padding:0 12px;flex:0 0 auto}
.pt-nv-item{margin:0;padding:0;list-style:none}
.pt-nv-item a{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:15px 8px;border-radius:10px;text-decoration:none;
	font-family:var(--nv-display);font-size:16.5px;font-weight:600;
	letter-spacing:-.01em;color:var(--nv-ink);
	transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1);
}
.pt-nv-item a:hover,.pt-nv-item a:focus-visible{background:var(--nv-sky);color:var(--nv-accent-deep)}
.pt-nv-item.is-current a{color:var(--nv-accent)}
.pt-nv-chev{flex:0 0 auto;color:var(--nv-muted)}
.pt-nv-item a:hover .pt-nv-chev{color:var(--nv-accent)}

/* the account row sits apart from the pages */
.pt-nv-list-end{margin-top:10px;padding-top:12px;border-top:1px solid var(--nv-line)}

/* the page must not scroll behind an open drawer */
body.pt-nv-locked{overflow:hidden}

/* Astra's own push-down menu never opens now, but if the script is blocked it
   still does - so nothing here hides it. */

/* --- no zoom on focus, phones and tablets (11 Sep 2026) ----------------------

   iOS Safari zooms the page in when a field whose text is under 16px takes
   focus, and never zooms back out - the visitor was left pinching the page back
   to size after typing a name, an email or a code. At 16px it does not zoom.
   Touch screens only, and pinch-zoom itself is left alone. This file loads on
   every page, so every form is covered. The six-digit code box is already
   larger and keeps its own size. */
@media (max-width:880px),(hover:none) and (pointer:coarse){
	input:is([type=text],[type=email],[type=tel],[type=number],[type=search],[type=password],[type=url]):not(.pt-vf-code),
	input:not([type]),
	select,
	textarea{font-size:16px!important}
}