/* GENERATED - do not edit.
 * Vendored from https://ventrasciences.com/my-account/ on 2026-09-02T17:44:49.117Z
 * 41 stylesheet fragments, concatenated in live document order.
 * Regenerate: node scripts/fetch-account-chrome.mjs
 */

/* ==== inline #vs-search-killtheme ==== */

#vsv3SearchOverlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#vsSearchPanel { display: none; }
#vsSearchPanel.vs-open { display: block !important; }


/* ==== inline #vsc-entry-gate-css ==== */

	html:not(.vsc-gate-passed){overflow:hidden;}
	.vsc-gate-passed #vsc-entry-gate{display:none!important;}

	/* ── Full-screen molecular backdrop, lighter grey-blue grade ── */
	#vsc-entry-gate{
		position:fixed!important;inset:0!important;z-index:2147483000!important;
		background-color:#0B1F33!important;
		display:flex!important;align-items:flex-start!important;justify-content:center!important;
		margin:0!important;padding:30px 18px!important;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;
		font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
	}
	#vsc-entry-gate *,#vsc-entry-gate *::before,#vsc-entry-gate *::after{box-sizing:border-box;}
	#vsc-entry-gate::before{ /* the homepage iceblock 'ice-wall' scene, full screen */
		content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
		background-image:url('/media/themes/ventra-sciences-v4/assets/home/gate-icewall.jpg');
		background-size:cover;background-position:center;background-repeat:no-repeat;
		opacity:1;filter:saturate(0.96) brightness(0.98);
	}
	#vsc-entry-gate::after{ /* dark overlay (0.80) + the deep-blue shop grade over the ice wall, so the frosted card pops */
		content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
		background:
			linear-gradient(0deg,rgba(2,8,16,0.80),rgba(2,8,16,0.80)),
			linear-gradient(180deg,rgba(4,16,30,0.50) 0%,rgba(8,32,64,0.58) 55%,rgba(4,16,30,0.64) 100%),
			radial-gradient(ellipse at 24% 14%,rgba(96,180,235,0.16) 0%,transparent 55%),
			radial-gradient(ellipse at 82% 88%,rgba(14,165,233,0.12) 0%,transparent 55%);
	}
	@keyframes vsc-gate-in{from{opacity:0;transform:translateY(14px) scale(0.99);}to{opacity:1;transform:none;}}

	/* Centered column holding the card + the exit line below it */
	#vsc-entry-gate .vsc-gate-shell{position:relative!important;z-index:1!important;margin:auto!important;width:100%!important;max-width:464px!important;display:block!important;}

	/* ── Card: frosted steel-blue glass ── */
	#vsc-entry-gate .vsc-gate-card{
		position:relative!important;z-index:1!important;margin:0!important;float:none!important;
		width:100%!important;overflow:hidden!important;
		background:linear-gradient(180deg,rgba(38,46,61,0.95) 0%,rgba(26,34,48,0.95) 50%,rgba(15,22,32,0.96) 100%)!important;
		-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
		border:1px solid rgba(158,200,238,0.28)!important;border-radius:22px!important;color:#E7EFF8!important;
		box-shadow:0 40px 110px rgba(8,20,36,0.55),0 6px 22px rgba(8,20,36,0.35),inset 0 1px 0 rgba(255,255,255,0.12)!important;
		padding:24px 32px 26px!important;text-align:left!important;
		animation:vsc-gate-in .5s cubic-bezier(0.16,1,0.3,1) both;
	}
	#vsc-entry-gate .vsc-gate-card::before{ /* accent hairline across the top */
		content:'';position:absolute;top:0;left:0;right:0;height:3px;
		background:linear-gradient(90deg,#0EA5E9 0%,#38BDF8 50%,#7DD3FC 100%);
	}

	#vsc-entry-gate .vsc-gate-logo{display:block!important;width:142px!important;max-width:54%!important;height:auto!important;margin:0 auto 14px!important;filter:brightness(1.08);}
	#vsc-entry-gate .vsc-gate-h2{color:#FFFFFF!important;font-family:'Onest',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif!important;font-size:26px!important;line-height:1.12!important;font-weight:500!important;letter-spacing:-0.02em!important;margin:0 0 10px!important;text-align:center!important;}
	#vsc-entry-gate .vsc-gate-intro{color:#C9D8E8!important;font-size:13.5px!important;line-height:1.6!important;margin:0 0 22px!important;text-align:center!important;}

	#vsc-entry-gate .vsc-gate-check{
		display:flex!important;gap:13px!important;align-items:flex-start!important;text-align:left!important;width:100%!important;
		padding:15px 16px!important;border:1px solid rgba(255,255,255,0.18)!important;border-radius:14px!important;margin:0 0 12px!important;cursor:pointer;
		background:rgba(255,255,255,0.07)!important;transition:border-color .15s,background .15s,box-shadow .15s;
		touch-action:manipulation;-webkit-tap-highlight-color:transparent;
	}
	/* Only apply the hover highlight on real pointers — on touch it would stick after a tap and read as "glitchy". */
	@media (hover:hover) and (pointer:fine){
		#vsc-entry-gate .vsc-gate-check:hover{border-color:rgba(125,211,252,0.6)!important;background:rgba(125,211,252,0.12)!important;}
	}
	#vsc-entry-gate .vsc-gate-check:focus-within{border-color:#38BDF8!important;box-shadow:0 0 0 3px rgba(56,189,248,0.22)!important;}
	#vsc-entry-gate .vsc-gate-check input{appearance:auto!important;-webkit-appearance:auto!important;margin:1px 0 0!important;width:20px!important;height:20px!important;flex-shrink:0!important;accent-color:#0EA5E9;cursor:pointer;touch-action:manipulation;}
	#vsc-entry-gate .vsc-gate-check span{font-size:13.5px!important;line-height:1.5!important;color:#E6EEF7!important;}
	#vsc-entry-gate .vsc-gate-check span strong{font-weight:700!important;color:#FFFFFF!important;}

	#vsc-entry-gate .vsc-gate-enter{
		width:100%!important;margin:18px 0 0!important;padding:16px!important;border:0!important;border-radius:100px!important;text-transform:uppercase!important;
		background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%)!important;color:#FFFFFF!important;font-size:12.5px!important;font-weight:500!important;font-family:'Onest',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif!important;line-height:1!important;
		cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;letter-spacing:.05em!important;
		touch-action:manipulation;-webkit-tap-highlight-color:transparent;
		box-shadow:0 12px 28px rgba(14,165,233,0.42)!important;transition:transform .15s,box-shadow .2s,background .2s,color .2s;text-shadow:none!important;
	}
	#vsc-entry-gate .vsc-gate-enter svg{flex-shrink:0;}
	#vsc-entry-gate .vsc-gate-enter:disabled{background:rgba(255,255,255,0.13)!important;color:#9FB2C6!important;cursor:not-allowed;box-shadow:none!important;}
	#vsc-entry-gate .vsc-gate-enter:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(14,165,233,0.55)!important;}
	#vsc-entry-gate .vsc-gate-enter:not(:disabled):active{transform:translateY(0) scale(0.99);}
	#vsc-entry-gate .vsc-gate-enter:focus-visible{outline:3px solid rgba(125,211,252,0.7);outline-offset:2px;}

	#vsc-entry-gate .vsc-gate-fine{font-size:11px!important;line-height:1.6!important;color:#A7BACE!important;margin:18px 0 0!important;text-align:left!important;}
	#vsc-entry-gate .vsc-gate-fine a{color:#7DD3FC!important;text-decoration:underline!important;}
	#vsc-entry-gate .vsc-gate-exit{font-size:12.5px!important;color:#C2D2E2!important;margin:16px 0 4px!important;text-align:center!important;}
	#vsc-entry-gate .vsc-gate-exit a{color:#FFFFFF!important;font-weight:700!important;text-decoration:underline!important;}

	@media (min-width:560px){
		#vsc-entry-gate{padding:46px 20px!important;}
		#vsc-entry-gate .vsc-gate-shell{max-width:486px!important;}
		#vsc-entry-gate .vsc-gate-card{padding:28px 40px 32px!important;}
		#vsc-entry-gate .vsc-gate-h2{font-size:29px!important;}
	}
	/* Mobile compaction: tighten every dimension so the WHOLE panel (logo → checkboxes →
	   button → fine print → exit) fits within the phone viewport without scrolling, even
	   with iOS Safari's toolbars eating ~150px. Shell drops from ~790px to ~530px. */
	@media (max-width:560px){
		#vsc-entry-gate{padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom))!important;}
		#vsc-entry-gate .vsc-gate-card{padding:18px 20px 18px!important;border-radius:18px!important;}
		#vsc-entry-gate .vsc-gate-logo{width:96px!important;margin:0 auto 9px!important;}
		#vsc-entry-gate .vsc-gate-h2{font-size:21px!important;line-height:1.1!important;margin:0 0 7px!important;}
		#vsc-entry-gate .vsc-gate-intro{font-size:12.5px!important;line-height:1.4!important;margin:0 0 12px!important;}
		#vsc-entry-gate .vsc-gate-check{padding:10px 12px!important;margin:0 0 8px!important;gap:10px!important;border-radius:11px!important;}
		#vsc-entry-gate .vsc-gate-check span{font-size:12.5px!important;line-height:1.38!important;}
		#vsc-entry-gate .vsc-gate-check input{width:18px!important;height:18px!important;}
		#vsc-entry-gate .vsc-gate-enter{padding:13px!important;margin:12px 0 0!important;}
		#vsc-entry-gate .vsc-gate-fine{font-size:9.8px!important;line-height:1.4!important;margin:11px 0 0!important;}
		#vsc-entry-gate .vsc-gate-exit{font-size:11.5px!important;margin:9px 0 2px!important;}
	}
	

/* ==== inline #vsv4-sticky-nav ==== */

      .main-nav { position: sticky !important; top: 0 !important; }
      body.admin-bar .main-nav { top: 32px !important; }
      @media (max-width: 782px) {
        body.admin-bar .main-nav { top: 46px !important; }
      }
      .page-spacer { display: none !important; }
    

/* ==== inline #vsbts-css ==== */

:root{ --vsbts-h:64px; }
@media (max-width:900px){ :root{ --vsbts-h:80px; } }

body.vsbts-on .site-header.vsc-uhdr{ top:var(--vsbts-off,var(--vsbts-h)) !important; }
body.vsbts-on{ padding-top:var(--vsbts-h) !important; }

#vsbts{
  position:fixed; top:0; left:0; right:0; height:var(--vsbts-h);
  z-index:9990; overflow:hidden; isolation:isolate;
  will-change:transform;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(125,211,252,.16);
  /* SKY → HORIZON → WATER. Brighter than the page beneath it on purpose: a
     promo bar that matches the page exactly disappears into it. The stop at
     56% is a hard edge, because a soft horizon reads as haze, not distance. */
  background:linear-gradient(180deg,
    #123A5E 0%,
    #1B4E7C 30%,
    #2A6E9E 50%,
    #4C97C4 55.6%,
    #1D5787 56%,
    #24699E 70%,
    #16466F 100%);
  font-family:var(--inter,"Inter",-apple-system,system-ui,sans-serif);
  color:#C8DCEE; -webkit-font-smoothing:antialiased;
  contain:layout paint;
}
#vsbts::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(58% 130% at 50% 50%, rgba(6,18,34,.22), transparent 74%);
}

#vsbtsAmb{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:.8 }

/* The sun. End of Summer, so it carries the scene rather than punctuating it:
   a larger low sun with a hot white core, a warm falloff and a wide two-stop
   atmospheric bloom. The core stays white-hot so it reads as light rather than
   an orange sticker, which is what a flat warm disc looks like on navy. */
.vsbts-sun{
  position:absolute; z-index:1; right:13%; top:13%;
  width:30px; height:30px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    #F6E4C3 0%, #EFD3A4 34%, #E4BE86 60%,
    rgba(214,176,124,.40) 76%, rgba(214,176,124,0) 78%);
  box-shadow:
    0 0 16px rgba(233,205,158,.42),
    0 0 40px rgba(216,181,132,.20);
  animation:vsbts-halo 6s ease-in-out infinite;
}
@keyframes vsbts-halo{ 0%,100%{opacity:.9;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }

/* its column on the water, directly beneath */
.vsbts-refl{
  position:absolute; z-index:1; right:calc(13% - 14px); top:54%; bottom:0; width:52px;
  pointer-events:none; filter:blur(3px);
  background:linear-gradient(180deg, rgba(238,212,170,.38), rgba(230,200,155,.08) 58%, transparent 92%);
}

/* shimmer on the water */
.vsbts-glint{
  position:absolute; z-index:1; height:1.5px; border-radius:999px; pointer-events:none;
  background:linear-gradient(90deg, rgba(200,232,255,0), rgba(226,244,255,.9), rgba(200,232,255,0));
  animation:vsbts-glint ease-in-out infinite;
}
@keyframes vsbts-glint{ 0%,100%{opacity:.14;transform:scaleX(.55)} 50%{opacity:.85;transform:scaleX(1.15)} }

/* ICE CUBES FLOATING IN THE WATER.
   Drawn isometric — lit top face, two shaded sides — so they read as solid
   cubes rather than flat shapes, with a ripple ellipse where each one meets
   the surface. Each bobs and rolls very slightly on its own timing; nothing
   travels, so the eye reads drift rather than movement across the bar. */
.vsbts-ice{
  position:absolute; z-index:1; pointer-events:none;
  top:56%; transform:translate(0,-60%);
  animation:vsbts-float ease-in-out infinite;
}
@keyframes vsbts-float{
  0%,100%{ transform:translate(0,-60%) rotate(-1.6deg) }
  50%    { transform:translate(3px,-53%) rotate(1.6deg) }
}

/* THE SCENE LIVES AT THE EDGES.
   Masked transparent through the middle so nothing decorative ever sits behind
   the sentence — the copy gets clean water, the corners get the scene. This is
   what keeps a busy bar legible without dimming the artwork everywhere. */
.vsbts-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask:linear-gradient(to right,#000 0%,#000 15%,transparent 27%,transparent 73%,#000 85%,#000 100%);
          mask:linear-gradient(to right,#000 0%,#000 15%,transparent 27%,transparent 73%,#000 85%,#000 100%);
}

.vsbts-in{
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:center;
  gap:11px; padding:0 18px; max-width:1180px; width:100%;
}

.vsbts-bus{ display:inline-block; vertical-align:-3px; width:24px; height:15px; margin-right:7px;
  animation:vsbts-bob 4.5s ease-in-out infinite }
@keyframes vsbts-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5px)} }

.vsbts-say{ font-size:13.5px; line-height:1.35; letter-spacing:-.005em; white-space:nowrap; color:#B9D0E4 }
.vsbts-say b{ color:#fff; font-weight:600 }
.vsbts-lg{ display:inline }

.vsbts-code{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border-radius:999px; padding:5px 13px; min-width:104px; justify-content:center;
  /* the code bubble carries the sun's colour so the one thing we want tapped is
     the warmest object in the bar. Dark ink on a light sand fill, not a tinted
     glass pill - that is what makes it read as a button rather than a label. */
  background:linear-gradient(180deg, #FBEFD6, #F0D9AE);
  border:1px solid rgba(255,241,214,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 4px 16px -6px rgba(120,84,34,.55);
  color:#3A2A12;
  font-family:var(--grotesk,"Onest",sans-serif);
  font-size:12px; font-weight:700; letter-spacing:.12em; white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.vsbts-code:hover{ background:linear-gradient(180deg, #FFF8E9, #F7E4BF); border-color:#FFF6E2; transform:translateY(-1px) }
.vsbts-code:active{ transform:translateY(0) }
.vsbts-code.is-done{ background:linear-gradient(180deg,#D8F7E6,#B7EDD2); border-color:#8FE3BC; color:#0E4630 }
.vsbts-code svg{ opacity:.62; flex:none }

/* vertical slits, not dots — they separate without adding another shape */
.vsbts-slit{
  width:1px; height:20px; flex:none; border-radius:1px;
  background:linear-gradient(180deg, rgba(125,211,252,0), rgba(170,222,255,.55) 50%, rgba(125,211,252,0));
}
.vsbts-meta{ font-size:12px; color:#B4CFE6; white-space:nowrap }
.vsbts-meta b{ color:#F0F8FF; font-weight:600 }

/* countdown: small tiles so the seconds actually read as a clock */
.vsbts-clock{ display:flex; align-items:center; gap:6px; white-space:nowrap }
.vsbts-clock .lab{ font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:#9FC0DA }
.vsbts-tiles{ display:flex; gap:4px }
.vsbts-tile{
  min-width:27px; padding:3px 4px 2px; border-radius:6px; text-align:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(160,215,255,.30);
  font-family:var(--grotesk,"Onest",sans-serif); line-height:1;
}
.vsbts-tile span{ display:block; font-size:12.5px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums }
.vsbts-tile i{ display:block; font-style:normal; font-size:7.5px; font-weight:600; letter-spacing:.1em; color:#9FC0DA; margin-top:2px }

@media (max-width:900px){
  .vsbts-in{ flex-wrap:wrap; gap:4px 8px; padding:7px 12px; align-content:center; height:100% }
  .vsbts-say{ white-space:nowrap; text-align:center; width:100%; margin:0 auto; font-size:11px; line-height:1.3 }
  /* dropping one word buys back a whole row on a phone */
  .vsbts-lg{ display:none }
  .vsbts-slit{ display:none }
  .vsbts-bus{ width:19px; height:12px; margin-right:5px }
  .vsbts-code{ padding:4px 11px; font-size:10.5px; min-width:88px }
  .vsbts-meta{ font-size:10px; order:9; width:100%; text-align:center }
  .vsbts-clock{ width:auto }
  .vsbts-clock .lab{ display:none }
  .vsbts-tile{ min-width:23px; padding:2px 3px }
  .vsbts-tile span{ font-size:11px }
  .vsbts-tile i{ font-size:6.5px }
  .vsbts-sun{ right:5%; top:6%; width:22px; height:22px }
  .vsbts-refl{ right:calc(5% - 10px); width:38px }
  .vsbts-ice{ opacity:.8 }
  /* on a phone the copy is full-width, so the scene keeps to the very edges */
  .vsbts-fx{
    -webkit-mask:linear-gradient(to right,#000 0%,#000 8%,transparent 20%,transparent 80%,#000 92%,#000 100%);
            mask:linear-gradient(to right,#000 0%,#000 8%,transparent 20%,transparent 80%,#000 92%,#000 100%);
  }
}
@media (max-width:400px){ .vsbts-say{ font-size:11.5px } }


/* ==== inline #vsc-scratcher-suppress ==== */
body.vsc-checkout-page-body .vscp-launch{display:none !important;}body.vsc-cart-open .vscp-launch{display:none !important;}

/* ==== inline #wp-img-auto-sizes-contain-inline-css ==== */

img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */


/* ==== inline #wp-emoji-styles-inline-css ==== */


	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */


/* ==== inline #global-styles-inline-css ==== */

:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */


/* ==== https://ventrasciences.com/wp-content/plugins/woocommerce/assets/css/select2.css?ver=11.0.1 ==== */
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;margin:0 0 -4px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left;padding:0}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin:0;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:var(--wc-form-color-background,#fff);color:var(--wc-form-color-text,#000);border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected],.select2-results__option[data-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none;margin:5px 5px 0 0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li:before{content:"";display:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#444;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:var(--wp-admin-theme-color,#0073aa);color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected],.select2-container--classic .select2-results__option--highlighted[data-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:var(--wp-admin-theme-color,#0073aa)}

/* ==== https://ventrasciences.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=11.0.1 ==== */
:root{--woocommerce:#720eec;--wc-green:#007518;--wc-red:#a00;--wc-orange:#ffba00;--wc-blue:#2ea2cc;--wc-primary:#720eec;--wc-primary-text:#fcfbfe;--wc-secondary:#e9e6ed;--wc-secondary-text:#515151;--wc-highlight:#958e09;--wc-highligh-text:white;--wc-content-bg:#fff;--wc-subtext:#767676;--wc-form-border-color:rgba(32, 7, 7, 0.8);--wc-form-border-radius:4px;--wc-form-border-width:1px;--wc-destructive:#cc1818;--wc-card-border-radius:8px}.woocommerce .woocommerce-error .button,.woocommerce .woocommerce-info .button,.woocommerce .woocommerce-message .button,.woocommerce-page .woocommerce-error .button,.woocommerce-page .woocommerce-info .button,.woocommerce-page .woocommerce-message .button{float:right}.woocommerce .col2-set,.woocommerce-page .col2-set{width:100%}.woocommerce .col2-set::after,.woocommerce .col2-set::before,.woocommerce-page .col2-set::after,.woocommerce-page .col2-set::before{content:" ";display:table}.woocommerce .col2-set::after,.woocommerce-page .col2-set::after{clear:both}.woocommerce .col2-set .col-1,.woocommerce-page .col2-set .col-1{float:left;width:48%}.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-2{float:right;width:48%}.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images{float:left;width:48%}.woocommerce #content div.product div.thumbnails::after,.woocommerce #content div.product div.thumbnails::before,.woocommerce div.product div.thumbnails::after,.woocommerce div.product div.thumbnails::before,.woocommerce-page #content div.product div.thumbnails::after,.woocommerce-page #content div.product div.thumbnails::before,.woocommerce-page div.product div.thumbnails::after,.woocommerce-page div.product div.thumbnails::before{content:" ";display:table}.woocommerce #content div.product div.thumbnails::after,.woocommerce div.product div.thumbnails::after,.woocommerce-page #content div.product div.thumbnails::after,.woocommerce-page div.product div.thumbnails::after{clear:both}.woocommerce #content div.product div.thumbnails a,.woocommerce div.product div.thumbnails a,.woocommerce-page #content div.product div.thumbnails a,.woocommerce-page div.product div.thumbnails a{float:left;width:30.75%;margin-right:3.8%;margin-bottom:1em}.woocommerce #content div.product div.thumbnails a.last,.woocommerce div.product div.thumbnails a.last,.woocommerce-page #content div.product div.thumbnails a.last,.woocommerce-page div.product div.thumbnails a.last{margin-right:0}.woocommerce #content div.product div.thumbnails a.first,.woocommerce div.product div.thumbnails a.first,.woocommerce-page #content div.product div.thumbnails a.first,.woocommerce-page div.product div.thumbnails a.first{clear:both}.woocommerce #content div.product div.thumbnails.columns-1 a,.woocommerce div.product div.thumbnails.columns-1 a,.woocommerce-page #content div.product div.thumbnails.columns-1 a,.woocommerce-page div.product div.thumbnails.columns-1 a{width:100%;margin-right:0;float:none}.woocommerce #content div.product div.thumbnails.columns-2 a,.woocommerce div.product div.thumbnails.columns-2 a,.woocommerce-page #content div.product div.thumbnails.columns-2 a,.woocommerce-page div.product div.thumbnails.columns-2 a{width:48%}.woocommerce #content div.product div.thumbnails.columns-4 a,.woocommerce div.product div.thumbnails.columns-4 a,.woocommerce-page #content div.product div.thumbnails.columns-4 a,.woocommerce-page div.product div.thumbnails.columns-4 a{width:22.05%}.woocommerce #content div.product div.thumbnails.columns-5 a,.woocommerce div.product div.thumbnails.columns-5 a,.woocommerce-page #content div.product div.thumbnails.columns-5 a,.woocommerce-page div.product div.thumbnails.columns-5 a{width:16.9%}.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary{float:right;width:48%;clear:none}.woocommerce #content div.product .woocommerce-tabs,.woocommerce div.product .woocommerce-tabs,.woocommerce-page #content div.product .woocommerce-tabs,.woocommerce-page div.product .woocommerce-tabs{clear:both}.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce #content div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after,.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::before,.woocommerce-page div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page div.product .woocommerce-tabs ul.tabs::before{content:" ";display:table}.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page div.product .woocommerce-tabs ul.tabs::after{clear:both}.woocommerce #content div.product .woocommerce-tabs ul.tabs li,.woocommerce div.product .woocommerce-tabs ul.tabs li,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,.woocommerce-page div.product .woocommerce-tabs ul.tabs li{display:inline-block}.woocommerce #content div.product #reviews .comment::after,.woocommerce #content div.product #reviews .comment::before,.woocommerce div.product #reviews .comment::after,.woocommerce div.product #reviews .comment::before,.woocommerce-page #content div.product #reviews .comment::after,.woocommerce-page #content div.product #reviews .comment::before,.woocommerce-page div.product #reviews .comment::after,.woocommerce-page div.product #reviews .comment::before{content:" ";display:table}.woocommerce #content div.product #reviews .comment::after,.woocommerce div.product #reviews .comment::after,.woocommerce-page #content div.product #reviews .comment::after,.woocommerce-page div.product #reviews .comment::after{clear:both}.woocommerce #content div.product #reviews .comment img,.woocommerce div.product #reviews .comment img,.woocommerce-page #content div.product #reviews .comment img,.woocommerce-page div.product #reviews .comment img{float:right;height:auto}.woocommerce ul.products,.woocommerce-page ul.products{clear:both}.woocommerce ul.products::after,.woocommerce ul.products::before,.woocommerce-page ul.products::after,.woocommerce-page ul.products::before{content:" ";display:table}.woocommerce ul.products::after,.woocommerce-page ul.products::after{clear:both}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:left;margin:0 3.8% 2.992em 0;padding:0;position:relative;width:22.05%;margin-left:0}.woocommerce ul.products li.first,.woocommerce-page ul.products li.first{clear:both}.woocommerce ul.products li.last,.woocommerce-page ul.products li.last{margin-right:0}.woocommerce ul.products.columns-1 li.product,.woocommerce-page ul.products.columns-1 li.product{width:100%;margin-right:0}.woocommerce ul.products.columns-2 li.product,.woocommerce-page ul.products.columns-2 li.product{width:48%}.woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:30.75%}.woocommerce ul.products.columns-5 li.product,.woocommerce-page ul.products.columns-5 li.product{width:16.95%}.woocommerce ul.products.columns-6 li.product,.woocommerce-page ul.products.columns-6 li.product{width:13.5%}.woocommerce-page.columns-1 ul.products li.product,.woocommerce.columns-1 ul.products li.product{width:100%;margin-right:0}.woocommerce-page.columns-2 ul.products li.product,.woocommerce.columns-2 ul.products li.product{width:48%}.woocommerce-page.columns-3 ul.products li.product,.woocommerce.columns-3 ul.products li.product{width:30.75%}.woocommerce-page.columns-5 ul.products li.product,.woocommerce.columns-5 ul.products li.product{width:16.95%}.woocommerce-page.columns-6 ul.products li.product,.woocommerce.columns-6 ul.products li.product{width:13.5%}.woocommerce .woocommerce-result-count,.woocommerce-page .woocommerce-result-count{float:left}.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering{float:right}.woocommerce .woocommerce-pagination ul.page-numbers::after,.woocommerce .woocommerce-pagination ul.page-numbers::before,.woocommerce-page .woocommerce-pagination ul.page-numbers::after,.woocommerce-page .woocommerce-pagination ul.page-numbers::before{content:" ";display:table}.woocommerce .woocommerce-pagination ul.page-numbers::after,.woocommerce-page .woocommerce-pagination ul.page-numbers::after{clear:both}.woocommerce .woocommerce-pagination ul.page-numbers li,.woocommerce-page .woocommerce-pagination ul.page-numbers li{display:inline-block}.woocommerce #content table.cart img,.woocommerce table.cart img,.woocommerce-page #content table.cart img,.woocommerce-page table.cart img{height:auto}.woocommerce #content table.cart td.actions,.woocommerce table.cart td.actions,.woocommerce-page #content table.cart td.actions,.woocommerce-page table.cart td.actions{text-align:right}.woocommerce #content table.cart td.actions .input-text,.woocommerce table.cart td.actions .input-text,.woocommerce-page #content table.cart td.actions .input-text,.woocommerce-page table.cart td.actions .input-text{width:80px}.woocommerce #content table.cart td.actions .coupon,.woocommerce table.cart td.actions .coupon,.woocommerce-page #content table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon{float:left}.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{width:100%}.woocommerce .cart-collaterals::after,.woocommerce .cart-collaterals::before,.woocommerce-page .cart-collaterals::after,.woocommerce-page .cart-collaterals::before{content:" ";display:table}.woocommerce .cart-collaterals::after,.woocommerce-page .cart-collaterals::after{clear:both}.woocommerce .cart-collaterals .related,.woocommerce-page .cart-collaterals .related{width:30.75%;float:left}.woocommerce .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .cross-sells{width:48%;float:left}.woocommerce .cart-collaterals .cross-sells ul.products,.woocommerce-page .cart-collaterals .cross-sells ul.products{float:none}.woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:48%}.woocommerce .cart-collaterals .shipping_calculator,.woocommerce-page .cart-collaterals .shipping_calculator{width:48%;clear:right;float:right}.woocommerce .cart-collaterals .shipping_calculator::after,.woocommerce .cart-collaterals .shipping_calculator::before,.woocommerce-page .cart-collaterals .shipping_calculator::after,.woocommerce-page .cart-collaterals .shipping_calculator::before{content:" ";display:table}.woocommerce .cart-collaterals .shipping_calculator::after,.woocommerce-page .cart-collaterals .shipping_calculator::after{clear:both}.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2{width:47%}.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{float:right;width:48%}.woocommerce ul.cart_list li::after,.woocommerce ul.cart_list li::before,.woocommerce ul.product_list_widget li::after,.woocommerce ul.product_list_widget li::before,.woocommerce-page ul.cart_list li::after,.woocommerce-page ul.cart_list li::before,.woocommerce-page ul.product_list_widget li::after,.woocommerce-page ul.product_list_widget li::before{content:" ";display:table}.woocommerce ul.cart_list li::after,.woocommerce ul.product_list_widget li::after,.woocommerce-page ul.cart_list li::after,.woocommerce-page ul.product_list_widget li::after{clear:both}.woocommerce ul.cart_list li img,.woocommerce ul.product_list_widget li img,.woocommerce-page ul.cart_list li img,.woocommerce-page ul.product_list_widget li img{float:right;height:auto}.woocommerce form .form-row::after,.woocommerce form .form-row::before,.woocommerce-page form .form-row::after,.woocommerce-page form .form-row::before{content:" ";display:table}.woocommerce form .form-row::after,.woocommerce-page form .form-row::after{clear:both}.woocommerce form .form-row label,.woocommerce-page form .form-row label{display:block}.woocommerce form .form-row label.checkbox,.woocommerce-page form .form-row label.checkbox{display:inline}.woocommerce form .form-row select,.woocommerce-page form .form-row select{width:100%}.woocommerce form .form-row .input-text,.woocommerce-page form .form-row .input-text{box-sizing:border-box;width:100%}.woocommerce form .form-row-first,.woocommerce form .form-row-last,.woocommerce-page form .form-row-first,.woocommerce-page form .form-row-last{width:47%;overflow:visible}.woocommerce form .form-row-first,.woocommerce-page form .form-row-first{float:left}.woocommerce form .form-row-last,.woocommerce-page form .form-row-last{float:right}.woocommerce form .form-row-wide,.woocommerce-page form .form-row-wide{clear:both}.woocommerce form .password-input,.woocommerce-page form .password-input{display:flex;flex-direction:column;justify-content:center;position:relative}.woocommerce form .password-input input[type=password],.woocommerce-page form .password-input input[type=password]{padding-right:2.5rem}.woocommerce form .password-input input::-ms-reveal,.woocommerce-page form .password-input input::-ms-reveal{display:none}.woocommerce form .show-password-input,.woocommerce-page form .show-password-input{background-color:transparent;border-radius:0;border:0;color:var(--wc-form-color-text,#000);cursor:pointer;font-size:inherit;line-height:inherit;margin:0;padding:0;position:absolute;right:.7em;text-decoration:none;top:50%;transform:translateY(-50%);-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-webkit-font-smoothing:inherit}.woocommerce form .show-password-input::before,.woocommerce-page form .show-password-input::before{background-repeat:no-repeat;background-size:cover;background-image:url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');content:"";display:block;height:22px;width:22px}.woocommerce form .show-password-input.display-password::before,.woocommerce-page form .show-password-input.display-password::before{background-image:url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>')}.woocommerce #payment .form-row select,.woocommerce-page #payment .form-row select{width:auto}.woocommerce #payment .terms,.woocommerce #payment .wc-terms-and-conditions,.woocommerce-page #payment .terms,.woocommerce-page #payment .wc-terms-and-conditions{text-align:left;padding:0 1em 0 0;float:left}.woocommerce #payment #place_order,.woocommerce-page #payment #place_order{float:right}.woocommerce .woocommerce-billing-fields::after,.woocommerce .woocommerce-billing-fields::before,.woocommerce .woocommerce-shipping-fields::after,.woocommerce .woocommerce-shipping-fields::before,.woocommerce-page .woocommerce-billing-fields::after,.woocommerce-page .woocommerce-billing-fields::before,.woocommerce-page .woocommerce-shipping-fields::after,.woocommerce-page .woocommerce-shipping-fields::before{content:" ";display:table}.woocommerce .woocommerce-billing-fields::after,.woocommerce .woocommerce-shipping-fields::after,.woocommerce-page .woocommerce-billing-fields::after,.woocommerce-page .woocommerce-shipping-fields::after{clear:both}.woocommerce .woocommerce-terms-and-conditions,.woocommerce-page .woocommerce-terms-and-conditions{margin-bottom:1.618em;padding:1.618em}.woocommerce .woocommerce-oembed,.woocommerce-page .woocommerce-oembed{position:relative}.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}.woocommerce-account .woocommerce-MyAccount-content{float:right;width:68%}.woocommerce-account .woocommerce-MyAccount-content mark{background-color:transparent;color:inherit;font-weight:700}.woocommerce-page.left-sidebar #content.twentyeleven{width:58.4%;margin:0 7.6%;float:right}.woocommerce-page.right-sidebar #content.twentyeleven{margin:0 7.6%;width:58.4%;float:left}.twentyfourteen .tfwc{padding:12px 10px 0;max-width:474px;margin:0 auto}.twentyfourteen .tfwc .product .entry-summary{padding:0!important;margin:0 0 1.618em!important}.twentyfourteen .tfwc div.product.hentry.has-post-thumbnail{margin-top:0}@media screen and (min-width:673px){.twentyfourteen .tfwc{padding-right:30px;padding-left:30px}}@media screen and (min-width:1040px){.twentyfourteen .tfwc{padding-right:15px;padding-left:15px}}@media screen and (min-width:1110px){.twentyfourteen .tfwc{padding-right:30px;padding-left:30px}}@media screen and (min-width:1218px){.twentyfourteen .tfwc{margin-right:54px}.full-width .twentyfourteen .tfwc{margin-right:auto}}.twentyfifteen .t15wc{padding-left:7.6923%;padding-right:7.6923%;padding-top:7.6923%;margin-bottom:7.6923%;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.15)}.twentyfifteen .t15wc .page-title{margin-left:0}@media screen and (min-width:38.75em){.twentyfifteen .t15wc{margin-right:7.6923%;margin-left:7.6923%;margin-top:8.3333%}}@media screen and (min-width:59.6875em){.twentyfifteen .t15wc{margin-left:8.3333%;margin-right:8.3333%;padding:10%}.single-product .twentyfifteen .entry-summary{padding:0!important}}.twentysixteen .site-main{margin-right:7.6923%;margin-left:7.6923%}.twentysixteen .entry-summary{margin-right:0;margin-left:0}#content .twentysixteen div.product div.images,#content .twentysixteen div.product div.summary{width:46.42857%}@media screen and (min-width:44.375em){.twentysixteen .site-main{margin-right:23.0769%}}@media screen and (min-width:56.875em){.twentysixteen .site-main{margin-right:0;margin-left:0}.no-sidebar .twentysixteen .site-main{margin-right:15%;margin-left:15%}.no-sidebar .twentysixteen .entry-summary{margin-right:0;margin-left:0}}.rtl .woocommerce .col2-set .col-1,.rtl .woocommerce-page .col2-set .col-1{float:right}.rtl .woocommerce .col2-set .col-2,.rtl .woocommerce-page .col2-set .col-2{float:left}

/* ==== https://ventrasciences.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=11.0.1 ==== */
:root{--woocommerce:#720eec;--wc-green:#007518;--wc-red:#a00;--wc-orange:#ffba00;--wc-blue:#2ea2cc;--wc-primary:#720eec;--wc-primary-text:#fcfbfe;--wc-secondary:#e9e6ed;--wc-secondary-text:#515151;--wc-highlight:#958e09;--wc-highligh-text:white;--wc-content-bg:#fff;--wc-subtext:#767676;--wc-form-border-color:rgba(32, 7, 7, 0.8);--wc-form-border-radius:4px;--wc-form-border-width:1px;--wc-destructive:#cc1818;--wc-card-border-radius:8px}.woocommerce table.shop_table_responsive thead,.woocommerce-page table.shop_table_responsive thead{display:none}.woocommerce table.shop_table_responsive tbody tr:first-child td:first-child,.woocommerce-page table.shop_table_responsive tbody tr:first-child td:first-child{border-top:0}.woocommerce table.shop_table_responsive tbody th,.woocommerce-page table.shop_table_responsive tbody th{display:none}.woocommerce table.shop_table_responsive tr,.woocommerce-page table.shop_table_responsive tr{display:block}.woocommerce table.shop_table_responsive tr td,.woocommerce-page table.shop_table_responsive tr td{display:block;text-align:right!important}.woocommerce table.shop_table_responsive tr td.order-actions,.woocommerce-page table.shop_table_responsive tr td.order-actions{text-align:left!important}.woocommerce table.shop_table_responsive tr td::before,.woocommerce-page table.shop_table_responsive tr td::before{content:attr(data-title) ": ";font-weight:700;float:left}.woocommerce table.shop_table_responsive tr td.actions::before,.woocommerce table.shop_table_responsive tr td.product-remove::before,.woocommerce-page table.shop_table_responsive tr td.actions::before,.woocommerce-page table.shop_table_responsive tr td.product-remove::before{display:none}.woocommerce table.shop_table_responsive tr:nth-child(2n) td,.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{background-color:rgba(0,0,0,.025)}.woocommerce table.my_account_orders tr td.order-actions,.woocommerce-page table.my_account_orders tr td.order-actions{text-align:left}.woocommerce table.my_account_orders tr td.order-actions::before,.woocommerce-page table.my_account_orders tr td.order-actions::before{display:none}.woocommerce table.my_account_orders tr td.order-actions .button,.woocommerce-page table.my_account_orders tr td.order-actions .button{float:none;margin:.125em .25em .125em 0}.woocommerce table.shop_attributes tr,.woocommerce-page table.shop_attributes tr{display:block}.woocommerce table.shop_attributes tr td,.woocommerce table.shop_attributes tr th,.woocommerce-page table.shop_attributes tr td,.woocommerce-page table.shop_attributes tr th{display:block;max-width:100%;width:auto;text-align:left;padding:.5em}.woocommerce table.shop_attributes tr th,.woocommerce-page table.shop_attributes tr th{padding-bottom:.25em;border-bottom:0}.woocommerce table.shop_attributes tr td,.woocommerce-page table.shop_attributes tr td{padding-top:.25em}.woocommerce table.shop_attributes tr td>:first-child,.woocommerce table.shop_attributes tr th>:first-child,.woocommerce-page table.shop_attributes tr td>:first-child,.woocommerce-page table.shop_attributes tr th>:first-child{padding-top:0;margin-top:0}.woocommerce table.shop_attributes tr td>:last-child,.woocommerce table.shop_attributes tr th>:last-child,.woocommerce-page table.shop_attributes tr td>:last-child,.woocommerce-page table.shop_attributes tr th>:last-child{padding-bottom:0;margin-bottom:0}.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-1,.woocommerce-page .col2-set .col-2{float:none;width:100%}.woocommerce ul.products[class*=columns-] li.product,.woocommerce-page ul.products[class*=columns-] li.product{width:48%;float:left;clear:both;margin:0 0 2.992em}.woocommerce ul.products[class*=columns-] li.product:nth-child(2n),.woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n){float:right;clear:none!important}.woocommerce #content div.product div.images,.woocommerce #content div.product div.summary,.woocommerce div.product div.images,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.images,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.images,.woocommerce-page div.product div.summary{float:none;width:100%}.woocommerce #content table.cart .product-thumbnail,.woocommerce table.cart .product-thumbnail,.woocommerce-page #content table.cart .product-thumbnail,.woocommerce-page table.cart .product-thumbnail{display:none}.woocommerce #content table.cart td.actions,.woocommerce table.cart td.actions,.woocommerce-page #content table.cart td.actions,.woocommerce-page table.cart td.actions{text-align:left}.woocommerce #content table.cart td.actions .coupon,.woocommerce table.cart td.actions .coupon,.woocommerce-page #content table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon{float:none;padding-bottom:.5em}.woocommerce #content table.cart td.actions .coupon::after,.woocommerce #content table.cart td.actions .coupon::before,.woocommerce table.cart td.actions .coupon::after,.woocommerce table.cart td.actions .coupon::before,.woocommerce-page #content table.cart td.actions .coupon::after,.woocommerce-page #content table.cart td.actions .coupon::before,.woocommerce-page table.cart td.actions .coupon::after,.woocommerce-page table.cart td.actions .coupon::before{content:" ";display:table}.woocommerce #content table.cart td.actions .coupon::after,.woocommerce table.cart td.actions .coupon::after,.woocommerce-page #content table.cart td.actions .coupon::after,.woocommerce-page table.cart td.actions .coupon::after{clear:both}.woocommerce #content table.cart td.actions .coupon .button,.woocommerce #content table.cart td.actions .coupon .input-text,.woocommerce #content table.cart td.actions .coupon input,.woocommerce table.cart td.actions .coupon .button,.woocommerce table.cart td.actions .coupon .input-text,.woocommerce table.cart td.actions .coupon input,.woocommerce-page #content table.cart td.actions .coupon .button,.woocommerce-page #content table.cart td.actions .coupon .input-text,.woocommerce-page #content table.cart td.actions .coupon input,.woocommerce-page table.cart td.actions .coupon .button,.woocommerce-page table.cart td.actions .coupon .input-text,.woocommerce-page table.cart td.actions .coupon input{width:48%;box-sizing:border-box}.woocommerce #content table.cart td.actions .coupon .button.alt,.woocommerce #content table.cart td.actions .coupon .input-text+.button,.woocommerce table.cart td.actions .coupon .button.alt,.woocommerce table.cart td.actions .coupon .input-text+.button,.woocommerce-page #content table.cart td.actions .coupon .button.alt,.woocommerce-page #content table.cart td.actions .coupon .input-text+.button,.woocommerce-page table.cart td.actions .coupon .button.alt,.woocommerce-page table.cart td.actions .coupon .input-text+.button{float:right}.woocommerce #content table.cart td.actions .coupon .coupon-error-notice,.woocommerce table.cart td.actions .coupon .coupon-error-notice,.woocommerce-page #content table.cart td.actions .coupon .coupon-error-notice,.woocommerce-page table.cart td.actions .coupon .coupon-error-notice{clear:left;color:var(--wc-red);float:left;font-size:.75em;margin-bottom:0;text-align:left;width:48%}.woocommerce #content table.cart td.actions .button,.woocommerce table.cart td.actions .button,.woocommerce-page #content table.cart td.actions .button,.woocommerce-page table.cart td.actions .button{display:block;width:100%}.woocommerce .cart-collaterals .cart_totals,.woocommerce .cart-collaterals .cross-sells,.woocommerce .cart-collaterals .shipping_calculator,.woocommerce-page .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .shipping_calculator{width:100%;float:none;text-align:left}.woocommerce-page.woocommerce-checkout form.login .form-row,.woocommerce.woocommerce-checkout form.login .form-row{width:100%;float:none}.woocommerce #payment .terms,.woocommerce-page #payment .terms{text-align:left;padding:0}.woocommerce #payment #place_order,.woocommerce-page #payment #place_order{float:none;width:100%;box-sizing:border-box;margin-bottom:1em}.woocommerce .lost_reset_password .form-row-first,.woocommerce .lost_reset_password .form-row-last,.woocommerce-page .lost_reset_password .form-row-first,.woocommerce-page .lost_reset_password .form-row-last{width:100%;float:none;margin-right:0}.woocommerce-account .woocommerce-MyAccount-content,.woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:100%}.single-product .twentythirteen .panel{padding-left:20px!important;padding-right:20px!important}

/* ==== https://ventrasciences.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=11.0.1 ==== */
@charset "UTF-8";:root{--woocommerce:#720eec;--wc-green:#007518;--wc-red:#a00;--wc-orange:#ffba00;--wc-blue:#2ea2cc;--wc-primary:#720eec;--wc-primary-text:#fcfbfe;--wc-secondary:#e9e6ed;--wc-secondary-text:#515151;--wc-highlight:#958e09;--wc-highligh-text:white;--wc-content-bg:#fff;--wc-subtext:#767676;--wc-form-border-color:rgba(32, 7, 7, 0.8);--wc-form-border-radius:4px;--wc-form-border-width:1px;--wc-destructive:#cc1818;--wc-card-border-radius:8px}@keyframes spin{100%{transform:rotate(360deg)}}@font-face{font-family:star;src:url("/media/plugins/woocommerce/assets/fonts/WooCommerce.woff2") format("woff2"),url("/media/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"),url("/media/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype");font-weight:400;font-style:normal}@font-face{font-family:WooCommerce;src:url("/media/plugins/woocommerce/assets/fonts/WooCommerce.woff2") format("woff2"),url("/media/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"),url("/media/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype");font-weight:400;font-style:normal}.woocommerce form .form-row{padding:3px;margin:0 0 6px}.woocommerce form .form-row [placeholder]:focus::-webkit-input-placeholder{-webkit-transition:opacity .5s .5s ease;transition:opacity .5s .5s ease;opacity:0}.woocommerce form .form-row label{line-height:2}.woocommerce form .form-row label.hidden{visibility:hidden}.woocommerce form .form-row label.inline{display:inline}.woocommerce form .form-row .woocommerce-input-wrapper .description{background:#1e85be;color:#fff;border-radius:3px;padding:1em;margin:.5em 0 0;clear:both;display:none;position:relative}.woocommerce form .form-row .woocommerce-input-wrapper .description a{color:#fff;text-decoration:underline;border:0;box-shadow:none}.woocommerce form .form-row .woocommerce-input-wrapper .description::before{left:50%;top:0;margin-top:-4px;transform:translateX(-50%) rotate(180deg);content:"";position:absolute;border-width:4px 6px 0 6px;border-style:solid;border-color:#1e85be transparent transparent transparent;z-index:100;display:block}.woocommerce form .form-row .input-checkbox{display:inline;margin:-2px 8px 0 0;text-align:center;vertical-align:middle}.woocommerce form .form-row .input-text,.woocommerce form .form-row select{font-family:inherit;font-weight:400;letter-spacing:normal;padding:.5em;display:block;background-color:var(--wc-form-color-background,#fff);border:var(--wc-form-border-width) solid var(--wc-form-border-color);border-radius:var(--wc-form-border-radius);color:var(--wc-form-color-text,#000);box-sizing:border-box;width:100%;margin:0;line-height:normal;height:auto}.woocommerce form .form-row .input-text:focus,.woocommerce form .form-row select:focus{border-color:currentColor}.woocommerce form .form-row select{cursor:pointer;appearance:none;padding-right:3em;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=);background-repeat:no-repeat;background-size:16px;background-position:calc(100% - .5em) 50%}.woocommerce form .form-row textarea{height:4em;line-height:1.5;box-shadow:none}.woocommerce form .form-row .country_to_state--single{background:0 0;border:0;padding:0;appearance:none;background-image:none;font:inherit;font-weight:700;color:inherit;width:auto;pointer-events:none}.woocommerce form .form-row .required{color:var(--wc-red);font-weight:700;border:0!important;text-decoration:none;visibility:hidden}.woocommerce form .form-row .optional{visibility:visible}.woocommerce form .form-row.woocommerce-invalid label{color:var(--wc-red)}.woocommerce form .form-row.woocommerce-invalid input.input-text,.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--wc-red)}.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection{border-color:var(--wc-red)}.woocommerce form .form-row.woocommerce-validated input.input-text,.woocommerce form .form-row.woocommerce-validated select{border-color:var(--wc-green)}.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection{border-color:var(--wc-green)}.woocommerce form .form-row ::-webkit-input-placeholder{line-height:normal}.woocommerce form .form-row :-moz-placeholder{line-height:normal}.woocommerce form .form-row :-ms-input-placeholder{line-height:normal}:where(.woocommerce) .select2-container{width:100%}:where(.woocommerce) .select2-container .select2-selection--single{height:auto}:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered{padding:.5em;line-height:normal;box-sizing:border-box;color:var(--wc-form-color-text,#444);font-weight:400}:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__placeholder{color:var(--wc-form-color-text,#444)}:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__arrow{position:absolute;top:2px;right:.5em;height:100%;width:16px}:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__arrow b{border:none;display:block;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;background-size:16px;width:16px;height:16px;position:absolute;top:50%;left:0;margin:-8px 0 0}:where(.woocommerce) .select2-container .select2-dropdown,:where(.woocommerce) .select2-container .select2-selection{background-color:var(--wc-form-color-background,#fff);border:var(--wc-form-border-width,1px) solid var(--wc-form-border-color,#aaa);border-radius:var(--wc-form-border-radius,4px)}:where(.woocommerce) .select2-container.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}:where(.woocommerce) .select2-container.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:where(.woocommerce) .select2-results__options{list-style:none;margin:0;padding:0}:where(.woocommerce) .select2-results__option{margin:0}.woocommerce-store-notice,p.demo_store{position:absolute;top:0;left:0;right:0;margin:0;width:100%;font-size:1em;padding:1em 0;text-align:center;background-color:#720eec;color:#fcfbfe;z-index:99998;box-shadow:0 1px 1em rgba(0,0,0,.2);display:none}.woocommerce-store-notice a,p.demo_store a{color:#fcfbfe;text-decoration:underline}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.admin-bar p.demo_store{top:32px}.clear{clear:both}.woocommerce .blockUI.blockOverlay{position:relative}.woocommerce .blockUI.blockOverlay::before{height:1em;width:1em;display:block;position:absolute;top:50%;left:50%;margin-left:-.5em;margin-top:-.5em;content:"";animation:spin 1s ease-in-out infinite;background:url("/media/plugins/woocommerce/assets/images/icons/loader.svg") center center;background-size:cover;line-height:1;text-align:center;font-size:2em;color:rgba(0,0,0,.75)}.woocommerce .loader::before{height:1em;width:1em;display:block;position:absolute;top:50%;left:50%;margin-left:-.5em;margin-top:-.5em;content:"";animation:spin 1s ease-in-out infinite;background:url("/media/plugins/woocommerce/assets/images/icons/loader.svg") center center;background-size:cover;line-height:1;text-align:center;font-size:2em;color:rgba(0,0,0,.75)}.woocommerce a.remove{display:block;font-size:1.5em;height:1em;width:1em;text-align:center;line-height:1;border-radius:100%;color:var(--wc-red)!important;text-decoration:none;font-weight:700;border:0}.woocommerce a.remove:hover{color:#fff!important;background:var(--wc-red)}.woocommerce small.note{display:block;color:#767676;font-size:.857em;margin-top:10px}.woocommerce .woocommerce-breadcrumb{margin:0 0 1em;padding:0}.woocommerce .woocommerce-breadcrumb::after,.woocommerce .woocommerce-breadcrumb::before{content:" ";display:table}.woocommerce .woocommerce-breadcrumb::after{clear:both}.woocommerce .quantity .qty{width:3.631em;text-align:center}.woocommerce div.product{margin-bottom:0;position:relative}.woocommerce div.product .product_title{clear:none;margin-top:0;padding:0}.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{background:inherit;font-weight:700;display:inline-block}.woocommerce div.product p.price del,.woocommerce div.product span.price del{opacity:.7;display:inline-block}.woocommerce div.product p.stock{font-size:.92em}.woocommerce div.product .woocommerce-product-rating{margin-bottom:1.618em}.woocommerce div.product div.images{margin-bottom:2em}.woocommerce div.product div.images img{display:block;width:100%;height:auto;box-shadow:none}.woocommerce div.product div.images div.thumbnails{padding-top:1em}.woocommerce div.product div.images.woocommerce-product-gallery{position:relative}.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{transition:all cubic-bezier(.795, -.035, 0, 1) .5s;margin:0;padding:0}.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg{background-color:#fff;opacity:0}.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder{border:1px solid #f2f2f2}.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){width:25%;display:inline-block}.woocommerce div.product div.images .woocommerce-product-gallery__image a{display:block;outline-offset:-2px}.woocommerce div.product div.images .woocommerce-product-gallery__trigger{background:#fff;border:none;box-sizing:content-box;border-radius:100%;cursor:pointer;font-size:2em;height:36px;padding:0;position:absolute;right:.5em;text-indent:-9999px;top:.5em;width:36px;z-index:99}.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before{border:2px solid #000;border-radius:100%;box-sizing:content-box;content:"";display:block;height:10px;left:9px;top:9px;position:absolute;width:10px}.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{background:#000;border-radius:6px;box-sizing:content-box;content:"";display:block;height:8px;left:22px;position:absolute;top:19px;transform:rotate(-45deg);width:2px}.woocommerce div.product div.images .woocommerce-product-gallery__trigger span[aria-hidden=true]{border:0;clip-path:inset(50%);height:1px;left:50%;margin:-1px;overflow:hidden;position:absolute;top:50%;width:1px}.woocommerce div.product div.images .flex-control-thumbs{overflow:hidden;zoom:1;margin:0;padding:0}.woocommerce div.product div.images .flex-control-thumbs li{width:25%;float:left;margin:0;list-style:none}.woocommerce div.product div.images .flex-control-thumbs li img{cursor:pointer;opacity:.5;margin:0}.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,.woocommerce div.product div.images .flex-control-thumbs li img:hover{opacity:1}.woocommerce div.product .woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1){clear:left}.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1){clear:left}.woocommerce div.product .woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1){clear:left}.woocommerce div.product div.summary{margin-bottom:2em}.woocommerce div.product div.social{text-align:right;margin:0 0 1em}.woocommerce div.product div.social span{margin:0 0 0 2px}.woocommerce div.product div.social span span{margin:0}.woocommerce div.product div.social span .stButton .chicklets{padding-left:16px;width:0}.woocommerce div.product div.social iframe{float:left;margin-top:3px}.woocommerce div.product .woocommerce-tabs ul.tabs{list-style:none;padding:0 0 0 1em;margin:0 0 1.618em;overflow:hidden;position:relative}.woocommerce div.product .woocommerce-tabs ul.tabs li{border:1px solid #cfc8d8;background-color:#e9e6ed;color:#515151;display:inline-block;position:relative;z-index:0;border-radius:4px 4px 0 0;margin:0 -5px;padding:0 1em}.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:inline-block;padding:.5em 0;font-weight:700;color:#515151;text-decoration:none}.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{text-decoration:none;color:#6b6b6b}.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff;color:#515151;z-index:2;border-bottom-color:#fff}.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:inherit;text-shadow:inherit}.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before{box-shadow:2px 2px 0 #fff}.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after{box-shadow:-2px 2px 0 #fff}.woocommerce div.product .woocommerce-tabs ul.tabs li::after,.woocommerce div.product .woocommerce-tabs ul.tabs li::before{border:1px solid #cfc8d8;position:absolute;bottom:-1px;width:5px;height:5px;content:" ";box-sizing:border-box}.woocommerce div.product .woocommerce-tabs ul.tabs li::before{left:-5px;border-bottom-right-radius:4px;border-width:0 1px 1px 0;box-shadow:2px 2px 0 #e9e6ed}.woocommerce div.product .woocommerce-tabs ul.tabs li::after{right:-5px;border-bottom-left-radius:4px;border-width:0 0 1px 1px;box-shadow:-2px 2px 0 #e9e6ed}.woocommerce div.product .woocommerce-tabs ul.tabs::before{position:absolute;content:" ";width:100%;bottom:0;left:0;border-bottom:1px solid #cfc8d8;z-index:1}.woocommerce div.product .woocommerce-tabs .panel{margin:0 0 2em;padding:0}.woocommerce div.product p.cart{margin-bottom:2em}.woocommerce div.product p.cart::after,.woocommerce div.product p.cart::before{content:" ";display:table}.woocommerce div.product p.cart::after{clear:both}.woocommerce div.product form.cart{margin-bottom:2em}.woocommerce div.product form.cart::after,.woocommerce div.product form.cart::before{content:" ";display:table}.woocommerce div.product form.cart::after{clear:both}.woocommerce div.product form.cart div.quantity{float:left;margin:0 4px 0 0}.woocommerce div.product form.cart table{border-width:0 0 1px}.woocommerce div.product form.cart table td{padding-left:0}.woocommerce div.product form.cart table div.quantity{float:none;margin:0}.woocommerce div.product form.cart table small.stock{display:block;float:none}.woocommerce div.product form.cart .variations{margin-bottom:1em;border:0;width:100%}.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{border:0;line-height:2em;vertical-align:top}.woocommerce div.product form.cart .variations label{font-weight:700;text-align:left}.woocommerce div.product form.cart .variations select{max-width:100%;min-width:75%;display:inline-block;margin-right:1em;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:3em;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;background-size:16px;-webkit-background-size:16px;background-position:calc(100% - 12px) 50%;-webkit-background-position:calc(100% - 12px) 50%}.woocommerce div.product form.cart .variations td.label{padding-right:1em}.woocommerce div.product form.cart .woocommerce-variation-description p{margin-bottom:1em}.woocommerce div.product form.cart .reset_variations{visibility:hidden;font-size:.83em}.woocommerce div.product form.cart .wc-no-matching-variations{display:none}.woocommerce div.product form.cart .button{vertical-align:middle;float:left}.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label{padding-right:1em;padding-left:1em}.woocommerce div.product form.cart .group_table td{vertical-align:top;padding-bottom:.5em;border:0}.woocommerce div.product form.cart .group_table td:first-child{width:4em;text-align:center}.woocommerce div.product form.cart .group_table .wc-grouped-product-add-to-cart-checkbox{display:inline-block;width:auto;margin:0 auto;transform:scale(1.5,1.5)}.woocommerce span.onsale{min-height:3.236em;min-width:3.236em;padding:.202em;font-size:1em;font-weight:700;position:absolute;text-align:center;line-height:3.236;top:-.5em;left:-.5em;margin:0;border-radius:100%;background-color:#958e09;color:#fff;font-size:.857em;z-index:9}.woocommerce .products ul,.woocommerce ul.products{margin:0 0 1em;padding:0;list-style:none outside;clear:both}.woocommerce .products ul::after,.woocommerce .products ul::before,.woocommerce ul.products::after,.woocommerce ul.products::before{content:" ";display:table}.woocommerce .products ul::after,.woocommerce ul.products::after{clear:both}.woocommerce .products ul li,.woocommerce ul.products li{list-style:none outside}.woocommerce ul.products li.product .onsale{top:0;right:0;left:auto;margin:-.5em -.5em 0 0}.woocommerce ul.products li.product .woocommerce-loop-category__title,.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product h3{padding:.5em 0;margin:0;font-size:1em}.woocommerce ul.products li.product a{text-decoration:none}.woocommerce ul.products li.product a.woocommerce-loop-product__link{display:block}.woocommerce ul.products li.product a img{width:100%;height:auto;display:block;margin:0 0 1em;box-shadow:none}.woocommerce ul.products li.product strong{display:block}.woocommerce ul.products li.product .woocommerce-placeholder{border:1px solid #f2f2f2}.woocommerce ul.products li.product .star-rating{font-size:.857em}.woocommerce ul.products li.product .button{display:inline-block;margin-top:1em}.woocommerce ul.products li.product .price{display:block;font-weight:400;margin-bottom:.5em;font-size:.857em}.woocommerce ul.products li.product .price del{color:inherit;opacity:.7;display:inline-block}.woocommerce ul.products li.product .price ins{background:0 0;font-weight:700;display:inline-block}.woocommerce ul.products li.product .price .from{font-size:.67em;margin:-2px 0 0 0;text-transform:uppercase;color:rgba(90,89,68,.5)}.woocommerce .woocommerce-result-count{margin:0 0 1em}.woocommerce .woocommerce-ordering{margin:0 0 1em}.woocommerce .woocommerce-ordering>label{margin-right:.25rem}.woocommerce .woocommerce-ordering select{vertical-align:top}.woocommerce nav.woocommerce-pagination{text-align:center}.woocommerce nav.woocommerce-pagination ul{display:inline-block;white-space:nowrap;padding:0;clear:both;border:1px solid #cfc8d8;border-right:0;margin:1px}.woocommerce nav.woocommerce-pagination ul li{border-right:1px solid #cfc8d8;padding:0;margin:0;float:left;display:inline;overflow:hidden}.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{margin:0;text-decoration:none;padding:0;line-height:1;font-size:1em;font-weight:400;padding:.5em;min-width:1em;display:block}.woocommerce nav.woocommerce-pagination ul li a:focus,.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce nav.woocommerce-pagination ul li span.current{background:#e9e6ed;color:#816f98}.woocommerce .cart .button,.woocommerce .cart input.button{float:none}.woocommerce a.added_to_cart{padding-top:.5em;display:inline-block}.woocommerce #reviews h2 small{float:right;color:#767676;font-size:15px;margin:10px 0 0}.woocommerce #reviews h2 small a{text-decoration:none;color:#767676}.woocommerce #reviews h3{margin:0}.woocommerce #reviews #respond{margin:0;border:0;padding:0}.woocommerce #reviews #comment{height:75px}.woocommerce #reviews #comments .add_review::after,.woocommerce #reviews #comments .add_review::before{content:" ";display:table}.woocommerce #reviews #comments .add_review::after{clear:both}.woocommerce #reviews #comments h2{clear:none}.woocommerce #reviews #comments ol.commentlist{margin:0;width:100%;background:0 0;list-style:none}.woocommerce #reviews #comments ol.commentlist::after,.woocommerce #reviews #comments ol.commentlist::before{content:" ";display:table}.woocommerce #reviews #comments ol.commentlist::after{clear:both}.woocommerce #reviews #comments ol.commentlist li{padding:0;margin:0 0 20px;border:0;position:relative;background:0;border:0}.woocommerce #reviews #comments ol.commentlist li img.avatar{float:left;position:absolute;top:0;left:0;padding:3px;width:32px;height:auto;background:#e9e6ed;border:1px solid #e1dde7;margin:0;box-shadow:none}.woocommerce #reviews #comments ol.commentlist li .comment-text{margin:0 0 0 50px;border:1px solid #e1dde7;border-radius:4px;padding:1em 1em 0}.woocommerce #reviews #comments ol.commentlist li .comment-text::after,.woocommerce #reviews #comments ol.commentlist li .comment-text::before{content:" ";display:table}.woocommerce #reviews #comments ol.commentlist li .comment-text::after{clear:both}.woocommerce #reviews #comments ol.commentlist li .comment-text p{margin:0 0 1em}.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{font-size:.83em}.woocommerce #reviews #comments ol.commentlist ul.children{list-style:none outside;margin:20px 0 0 50px}.woocommerce #reviews #comments ol.commentlist ul.children .star-rating{display:none}.woocommerce #reviews #comments ol.commentlist #respond{border:1px solid #e1dde7;border-radius:4px;padding:1em 1em 0;margin:20px 0 0 50px}.woocommerce #reviews #comments .commentlist>li::before{content:""}.woocommerce .star-rating{float:right;overflow:hidden;position:relative;height:1em;line-height:1;font-size:1em;width:5.4em;font-family:WooCommerce}.woocommerce .star-rating::before{content:"sssss";color:#cfc8d8;float:left;top:0;left:0;position:absolute}.woocommerce .star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}.woocommerce .star-rating span::before{content:"SSSSS";top:0;position:absolute;left:0}.woocommerce .woocommerce-product-rating{line-height:2;display:block}.woocommerce .woocommerce-product-rating::after,.woocommerce .woocommerce-product-rating::before{content:" ";display:table}.woocommerce .woocommerce-product-rating::after{clear:both}.woocommerce .woocommerce-product-rating .star-rating{margin:.5em 4px 0 0;float:left}.woocommerce .products .star-rating{display:block;margin:0 0 .5em;float:none}.woocommerce .hreview-aggregate .star-rating{margin:10px 0 0}.woocommerce #review_form #respond{position:static;margin:0;width:auto;padding:0;background:transparent none;border:0}.woocommerce #review_form #respond::after,.woocommerce #review_form #respond::before{content:" ";display:table}.woocommerce #review_form #respond::after{clear:both}.woocommerce #review_form #respond p{margin:0 0 10px}.woocommerce #review_form #respond .form-submit input{left:auto}.woocommerce #review_form #respond textarea{box-sizing:border-box;width:100%}.woocommerce p.stars a{position:relative;height:1em;width:1em;text-indent:-999em;display:inline-block;text-decoration:none;font-size:24px}.woocommerce p.stars a::before{display:block;position:absolute;top:0;left:0;width:1em;height:1em;line-height:1;font-family:WooCommerce;content:"\e021";text-indent:0}.woocommerce p.stars a:hover~a::before{content:"\e021"}.woocommerce p.stars:hover a::before{content:"\e020"}.woocommerce p.stars.selected a.active::before{content:"\e020"}.woocommerce p.stars.selected a.active~a::before{content:"\e021"}.woocommerce p.stars.selected a:not(.active)::before{content:"\e020"}.woocommerce table.shop_attributes{border:0;border-top:1px dotted rgba(0,0,0,.1);margin-bottom:1.618em;width:100%}.woocommerce table.shop_attributes th{width:150px;font-weight:700;padding:8px;border-top:0;border-bottom:1px dotted rgba(0,0,0,.1);margin:0;line-height:1.5}.woocommerce table.shop_attributes td{font-style:italic;padding:0;border-top:0;border-bottom:1px dotted rgba(0,0,0,.1);margin:0;line-height:1.5}.woocommerce table.shop_attributes td p{margin:0;padding:8px 0}.woocommerce table.shop_attributes tr:nth-child(2n) td,.woocommerce table.shop_attributes tr:nth-child(2n) th{background:rgba(0,0,0,.025)}.woocommerce table.shop_table{border:1px solid color-mix(in srgb,currentColor 20%,transparent);margin:0 -1px 24px 0;text-align:left;width:100%;border-collapse:separate;border-spacing:0;border-radius:5px}.woocommerce table.shop_table th{font-weight:700;padding:9px 12px;line-height:1.5em}.woocommerce table.shop_table td{border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);padding:9px 12px;vertical-align:middle;line-height:1.5em}.woocommerce table.shop_table td small{font-weight:400}.woocommerce table.shop_table td del{font-weight:400}.woocommerce table.shop_table tbody:first-child tr:first-child td,.woocommerce table.shop_table tbody:first-child tr:first-child th{border-top:0}.woocommerce table.shop_table tbody th,.woocommerce table.shop_table tfoot td,.woocommerce table.shop_table tfoot th{font-weight:700;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}.woocommerce table.my_account_orders{font-size:.85em}.woocommerce table.my_account_orders td,.woocommerce table.my_account_orders th{padding:4px 8px;vertical-align:middle}.woocommerce table.my_account_orders .button{white-space:nowrap}.woocommerce table.woocommerce-MyAccount-downloads td,.woocommerce table.woocommerce-MyAccount-downloads th{vertical-align:top;text-align:center}.woocommerce table.woocommerce-MyAccount-downloads td:first-child,.woocommerce table.woocommerce-MyAccount-downloads th:first-child{text-align:left}.woocommerce table.woocommerce-MyAccount-downloads td:last-child,.woocommerce table.woocommerce-MyAccount-downloads th:last-child{text-align:left}.woocommerce table.woocommerce-MyAccount-downloads td .woocommerce-MyAccount-downloads-file::before,.woocommerce table.woocommerce-MyAccount-downloads th .woocommerce-MyAccount-downloads-file::before{content:"↓";display:inline-block}.woocommerce td.product-name .wc-item-meta,.woocommerce td.product-name dl.variation{list-style:none outside}.woocommerce td.product-name .wc-item-meta .wc-item-meta-label,.woocommerce td.product-name .wc-item-meta dt,.woocommerce td.product-name dl.variation .wc-item-meta-label,.woocommerce td.product-name dl.variation dt{float:left;clear:both;margin-right:.25em;display:inline-block;list-style:none outside}.woocommerce td.product-name .wc-item-meta dd,.woocommerce td.product-name dl.variation dd{margin:0}.woocommerce td.product-name .wc-item-meta p,.woocommerce td.product-name .wc-item-meta:last-child,.woocommerce td.product-name dl.variation p,.woocommerce td.product-name dl.variation:last-child{margin-bottom:0}.woocommerce td.product-name p.backorder_notification{font-size:.83em}.woocommerce td.product-quantity{min-width:80px}.woocommerce ul.cart_list,.woocommerce ul.product_list_widget{list-style:none outside;padding:0;margin:0}.woocommerce ul.cart_list li,.woocommerce ul.product_list_widget li{padding:4px 0;margin:0;list-style:none}.woocommerce ul.cart_list li::after,.woocommerce ul.cart_list li::before,.woocommerce ul.product_list_widget li::after,.woocommerce ul.product_list_widget li::before{content:" ";display:table}.woocommerce ul.cart_list li::after,.woocommerce ul.product_list_widget li::after{clear:both}.woocommerce ul.cart_list li a,.woocommerce ul.product_list_widget li a{display:block;font-weight:700}.woocommerce ul.cart_list li img,.woocommerce ul.product_list_widget li img{float:right;margin-left:4px;width:32px;height:auto;box-shadow:none}.woocommerce ul.cart_list li dl,.woocommerce ul.product_list_widget li dl{margin:0;padding-left:1em;border-left:2px solid rgba(0,0,0,.1)}.woocommerce ul.cart_list li dl::after,.woocommerce ul.cart_list li dl::before,.woocommerce ul.product_list_widget li dl::after,.woocommerce ul.product_list_widget li dl::before{content:" ";display:table}.woocommerce ul.cart_list li dl::after,.woocommerce ul.product_list_widget li dl::after{clear:both}.woocommerce ul.cart_list li dl dd,.woocommerce ul.cart_list li dl dt,.woocommerce ul.product_list_widget li dl dd,.woocommerce ul.product_list_widget li dl dt{display:inline-block;float:left;margin-bottom:1em}.woocommerce ul.cart_list li dl dt,.woocommerce ul.product_list_widget li dl dt{font-weight:700;padding:0 0 .25em;margin:0 4px 0 0;clear:left}.woocommerce ul.cart_list li dl dd,.woocommerce ul.product_list_widget li dl dd{padding:0 0 .25em}.woocommerce ul.cart_list li dl dd p:last-child,.woocommerce ul.product_list_widget li dl dd p:last-child{margin-bottom:0}.woocommerce ul.cart_list li .star-rating,.woocommerce ul.product_list_widget li .star-rating{float:none}.woocommerce .widget_shopping_cart .total,.woocommerce.widget_shopping_cart .total{border-top:3px double #e9e6ed;padding:4px 0 0}.woocommerce .widget_shopping_cart .total strong,.woocommerce.widget_shopping_cart .total strong{min-width:40px;display:inline-block}.woocommerce .widget_shopping_cart .cart_list li,.woocommerce.widget_shopping_cart .cart_list li{padding-left:2em;position:relative;padding-top:0}.woocommerce .widget_shopping_cart .cart_list li a.remove,.woocommerce.widget_shopping_cart .cart_list li a.remove{position:absolute;top:0;left:0}.woocommerce .widget_shopping_cart .buttons::after,.woocommerce .widget_shopping_cart .buttons::before,.woocommerce.widget_shopping_cart .buttons::after,.woocommerce.widget_shopping_cart .buttons::before{content:" ";display:table}.woocommerce .widget_shopping_cart .buttons::after,.woocommerce.widget_shopping_cart .buttons::after{clear:both}.woocommerce .widget_shopping_cart .buttons a,.woocommerce.widget_shopping_cart .buttons a{margin-right:5px;margin-bottom:5px}.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{border:1px solid #cfc8d8;padding:20px;margin:2em 0;text-align:left;border-radius:5px}.woocommerce form.checkout_coupon .coupon-error-notice{color:var(--wc-red);display:block;font-size:.75em;margin-top:8px}.woocommerce form.checkout_coupon .input-text.has-error:focus{border-color:var(--wc-red)}.woocommerce ul#shipping_method{list-style:none outside;margin:0;padding:0}.woocommerce ul#shipping_method li{margin:0 0 .5em;line-height:1.5em;list-style:none outside}.woocommerce ul#shipping_method li input{margin:3px .4375em 0 0;vertical-align:top}.woocommerce ul#shipping_method li label{display:inline}.woocommerce ul#shipping_method .amount{font-weight:700}.woocommerce p.woocommerce-shipping-contents{margin:0}.woocommerce .wc_bis_form{margin:2em 0;padding:0}.woocommerce .wc_bis_form.hidden{display:none}.woocommerce .wc_bis_form__form-row{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:flex-start;gap:.7em;margin:.7em 0}.woocommerce .wc_bis_form__input{box-sizing:border-box;width:auto;white-space:nowrap}.woocommerce .wc_bis_form__button{box-sizing:border-box;white-space:nowrap}.woocommerce .wc_bis_form__checkbox{font-size:var(--wp--preset--font-size--small, .7em);display:block}.woocommerce :where(.wc_bis_form__input,.wc_bis_form__button){padding:.9rem 1.1rem;line-height:1}.woocommerce ul.order_details{margin:0 0 3em;list-style:none}.woocommerce ul.order_details::after,.woocommerce ul.order_details::before{content:" ";display:table}.woocommerce ul.order_details::after{clear:both}.woocommerce ul.order_details li{float:left;margin-right:2em;text-transform:uppercase;font-size:.715em;line-height:1;border-right:1px dashed #cfc8d8;padding-right:2em;margin-left:0;padding-left:0;list-style-type:none}.woocommerce ul.order_details li strong{display:block;font-size:1.4em;text-transform:none;line-height:1.5}.woocommerce ul.order_details li:last-of-type{border:none}.woocommerce .wc-bacs-bank-details-account-name{font-weight:700}.woocommerce .woocommerce-customer-details,.woocommerce .woocommerce-order-details,.woocommerce .woocommerce-order-downloads{margin-bottom:2em}.woocommerce .woocommerce-customer-details .order-actions--heading,.woocommerce .woocommerce-order-details .order-actions--heading,.woocommerce .woocommerce-order-downloads .order-actions--heading{vertical-align:middle}.woocommerce .woocommerce-customer-details .order-actions-button,.woocommerce .woocommerce-order-details .order-actions-button,.woocommerce .woocommerce-order-downloads .order-actions-button{margin-right:10px}.woocommerce .woocommerce-customer-details .order-actions-button:last-child,.woocommerce .woocommerce-order-details .order-actions-button:last-child,.woocommerce .woocommerce-order-downloads .order-actions-button:last-child{margin-right:0}.woocommerce .woocommerce-customer-details :last-child,.woocommerce .woocommerce-order-details :last-child,.woocommerce .woocommerce-order-downloads :last-child{margin-bottom:0}.woocommerce .woocommerce-customer-details .additional-fields,.woocommerce .woocommerce-customer-details .addresses{margin-bottom:2em}.woocommerce .woocommerce-customer-details .additional-fields:last-child,.woocommerce .woocommerce-customer-details .addresses:last-child{margin-bottom:0}.woocommerce .addresses .wc-block-components-additional-fields-list{margin:0;padding:0}.woocommerce .addresses .wc-block-components-additional-fields-list dt{margin:0;padding:0;font-style:normal;font-weight:700;display:inline}.woocommerce .addresses .wc-block-components-additional-fields-list dt::after{content:": "}.woocommerce .addresses .wc-block-components-additional-fields-list dt::before{content:"";display:block}.woocommerce .addresses .wc-block-components-additional-fields-list dd{margin:0;padding:0;font-style:normal;display:inline}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list{border:1px solid rgba(0,0,0,.1);padding:0;display:grid;grid-template-columns:1fr max-content}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt{border-bottom:1px solid rgba(0,0,0,.1);font-style:normal;font-weight:700;padding:1rem;box-sizing:border-box;margin:0!important}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt::after{display:none}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt:last-of-type{border-bottom:0}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd{border-bottom:1px solid rgba(0,0,0,.1);padding:1rem;box-sizing:border-box;text-align:right;margin:0!important}.woocommerce .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd:last-of-type{border-bottom:0}.woocommerce .woocommerce-customer-details .woocommerce-column__title{margin-top:0}.woocommerce .woocommerce-customer-details address{font-style:normal;margin-bottom:0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-right-width:2px;text-align:left;width:100%;border-radius:5px;padding:6px 12px;box-sizing:border-box}.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email,.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone{padding-left:1.5em}.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email:last-child,.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone:last-child{margin-bottom:0}.woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e037";text-decoration:none;margin-left:-1.5em;line-height:1.75;position:absolute}.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e02d";text-decoration:none;margin-left:-1.5em;line-height:1.75;position:absolute}.woocommerce .woocommerce-widget-layered-nav-list{margin:0;padding:0;border:0;list-style:none outside}.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item{padding:0 0 1px;list-style:none}.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item::after,.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item::before{content:" ";display:table}.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item::after{clear:both}.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a,.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item span{padding:1px 0}.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen a::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e013";text-decoration:none;color:var(--wc-red)}.woocommerce .woocommerce-widget-layered-nav-dropdown__submit{margin-top:1em}.woocommerce .widget_layered_nav_filters ul{margin:0;padding:0;border:0;list-style:none outside;overflow:hidden;zoom:1}.woocommerce .widget_layered_nav_filters ul li{float:left;padding:0 1em 1px 1px;list-style:none}.woocommerce .widget_layered_nav_filters ul li a{text-decoration:none}.woocommerce .widget_layered_nav_filters ul li a::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e013";text-decoration:none;color:var(--wc-red);vertical-align:inherit;margin-right:.5em}.woocommerce .widget_price_filter .price_slider{margin-bottom:1em}.woocommerce .widget_price_filter .price_slider_amount{text-align:right;line-height:2.4;font-size:.8751em}.woocommerce .widget_price_filter .price_slider_amount .button{font-size:1.15em;float:left}.woocommerce .widget_price_filter .ui-slider{position:relative;text-align:left;margin-left:.5em;margin-right:.5em}.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1em;height:1em;background-color:#7f54b3;border-radius:1em;cursor:ew-resize;outline:0;top:-.3em;margin-left:-.5em}.woocommerce .widget_price_filter .ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;border-radius:1em;background-color:#7f54b3}.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{border-radius:1em;background-color:#35224c;border:0}.woocommerce .widget_price_filter .ui-slider-horizontal{height:.5em}.woocommerce .widget_price_filter .ui-slider-horizontal .ui-slider-range{top:0;height:100%}.woocommerce .widget_price_filter .ui-slider-horizontal .ui-slider-range-min{left:-1px}.woocommerce .widget_price_filter .ui-slider-horizontal .ui-slider-range-max{right:-1px}.woocommerce .widget_rating_filter ul{margin:0;padding:0;border:0;list-style:none outside}.woocommerce .widget_rating_filter ul li{padding:0 0 1px;list-style:none}.woocommerce .widget_rating_filter ul li::after,.woocommerce .widget_rating_filter ul li::before{content:" ";display:table}.woocommerce .widget_rating_filter ul li::after{clear:both}.woocommerce .widget_rating_filter ul li a{padding:1px 0;text-decoration:none}.woocommerce .widget_rating_filter ul li .star-rating{float:none;display:inline-block}.woocommerce .widget_rating_filter ul li.chosen a::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e013";text-decoration:none;color:var(--wc-red)}.woocommerce .woocommerce-form-login .woocommerce-form-login__submit{float:left;margin-right:1em}.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{display:inline-block}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{font-size:100%;margin:0;line-height:1;cursor:pointer;position:relative;text-decoration:none;overflow:visible;padding:.618em 1em;font-weight:700;border-radius:3px;left:auto;color:#515151;background-color:#e9e6ed;border:0;display:inline-block;background-image:none;box-shadow:none;text-shadow:none}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.loading,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.loading,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.loading,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.loading,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.loading,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.loading,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.loading{opacity:.25;padding-right:2.618em}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.loading::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.loading::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.loading::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.loading::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.loading::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.loading::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.loading::after{font-family:WooCommerce;content:"\e01c";vertical-align:top;font-weight:400;position:absolute;top:.618em;right:1em;animation:spin 2s linear infinite}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.added::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.added::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.added::after,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.added::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.added::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.added::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.added::after,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.added::after{font-family:WooCommerce;content:"\e017";margin-left:.53em;vertical-align:bottom}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover{background-color:#dcd7e2;text-decoration:none;background-image:none;color:#515151}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt{background-color:#7f54b3;color:#fff;-webkit-font-smoothing:antialiased}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover{background-color:#7249a4;color:#fff}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover{background-color:#7f54b3;color:#fff}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled[disabled],.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled[disabled],:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:disabled,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:disabled[disabled]{color:inherit;cursor:not-allowed;opacity:.5;padding:.618em 1em}.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled[disabled]:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled:hover,.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:disabled[disabled]:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:disabled:hover,:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:disabled[disabled]:hover{color:inherit;background-color:#e9e6ed}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb{font-size:.92em;color:#767676}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a{color:#767676}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{color:#958e09;font-size:1.25em}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock{color:#958e09}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .out-of-stock{color:var(--wc-red)}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{color:#958e09}.woocommerce:where(body:not(.woocommerce-uses-block-theme)) #reviews #comments ol.commentlist li .meta{color:#767676;font-size:.75em}.woocommerce-no-js form.woocommerce-form-coupon,.woocommerce-no-js form.woocommerce-form-login{display:block!important}.woocommerce-no-js .showcoupon,.woocommerce-no-js .woocommerce-form-coupon-toggle,.woocommerce-no-js .woocommerce-form-login-toggle{display:none!important}.woocommerce-error,.woocommerce-info,.woocommerce-message{padding:1em 2em 1em 3.5em;margin:0 0 2em;position:relative;background-color:#f6f5f8;color:#515151;border-top:3px solid #720eec;list-style:none outside;width:auto;word-wrap:break-word}.woocommerce-error::after,.woocommerce-error::before,.woocommerce-info::after,.woocommerce-info::before,.woocommerce-message::after,.woocommerce-message::before{content:" ";display:table}.woocommerce-error::after,.woocommerce-info::after,.woocommerce-message::after{clear:both}.woocommerce-error::before,.woocommerce-info::before,.woocommerce-message::before{font-family:WooCommerce;content:"\e028";content:"\e028"/"";display:inline-block;position:absolute;top:1em;left:1.5em}.woocommerce-error .button,.woocommerce-info .button,.woocommerce-message .button{float:right}.woocommerce-error li,.woocommerce-info li,.woocommerce-message li{list-style:none outside!important;padding-left:0!important;margin-left:0!important}.rtl.woocommerce .price_label,.rtl.woocommerce .price_label span{direction:ltr;unicode-bidi:embed}.woocommerce-message{border-top-color:#8fae1b}.woocommerce-message::before{content:"\e015";color:#8fae1b}.woocommerce-info{border-top-color:#1e85be}.woocommerce-info::before{color:#1e85be}.woocommerce-error{border-top-color:#b81c23}.woocommerce-error::before{content:"\e016";color:#b81c23}.woocommerce-account .woocommerce::after,.woocommerce-account .woocommerce::before{content:" ";display:table}.woocommerce-account .woocommerce::after{clear:both}.woocommerce-account .addresses .title::after,.woocommerce-account .addresses .title::before{content:" ";display:table}.woocommerce-account .addresses .title::after{clear:both}.woocommerce-account .addresses .title h3{float:left}.woocommerce-account .addresses .title .edit{float:right}.woocommerce-account ol.commentlist.notes li.note p.meta{font-weight:700;margin-bottom:0}.woocommerce-account ol.commentlist.notes li.note .description p:last-child{margin-bottom:0}.woocommerce-account ul.digital-downloads{margin-left:0;padding-left:0}.woocommerce-account ul.digital-downloads li{list-style:none;margin-left:0;padding-left:0}.woocommerce-account ul.digital-downloads li::before{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-right:.618em;content:"\e00a";text-decoration:none}.woocommerce-account ul.digital-downloads li .count{float:right}#add_payment_method table.cart .product-thumbnail,.woocommerce-cart table.cart .product-thumbnail,.woocommerce-checkout table.cart .product-thumbnail{min-width:32px}#add_payment_method table.cart img,.woocommerce-cart table.cart img,.woocommerce-checkout table.cart img{width:32px;box-shadow:none}#add_payment_method table.cart td,#add_payment_method table.cart th,.woocommerce-cart table.cart td,.woocommerce-cart table.cart th,.woocommerce-checkout table.cart td,.woocommerce-checkout table.cart th{vertical-align:middle}#add_payment_method table.cart td.actions .coupon .input-text,.woocommerce-cart table.cart td.actions .coupon .input-text,.woocommerce-checkout table.cart td.actions .coupon .input-text{float:left;box-sizing:border-box;border:1px solid #cfc8d8;padding:6px 6px 5px;margin:0 4px 0 0;outline:0}#add_payment_method table.cart td.actions .coupon .input-text.has-error:focus,.woocommerce-cart table.cart td.actions .coupon .input-text.has-error:focus,.woocommerce-checkout table.cart td.actions .coupon .input-text.has-error:focus{border-color:var(--wc-red)}#add_payment_method table.cart td.actions .coupon .coupon-error-notice,.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice,.woocommerce-checkout table.cart td.actions .coupon .coupon-error-notice{clear:left;color:var(--wc-red);flex-basis:100%;float:none;font-size:.75em;margin-bottom:0;margin-top:8px;text-align:left;width:auto}#add_payment_method table.cart input,.woocommerce-cart table.cart input,.woocommerce-checkout table.cart input{margin:0;vertical-align:middle}#add_payment_method .wc-proceed-to-checkout,.woocommerce-cart .wc-proceed-to-checkout,.woocommerce-checkout .wc-proceed-to-checkout{padding:1em 0}#add_payment_method .wc-proceed-to-checkout::after,#add_payment_method .wc-proceed-to-checkout::before,.woocommerce-cart .wc-proceed-to-checkout::after,.woocommerce-cart .wc-proceed-to-checkout::before,.woocommerce-checkout .wc-proceed-to-checkout::after,.woocommerce-checkout .wc-proceed-to-checkout::before{content:" ";display:table}#add_payment_method .wc-proceed-to-checkout::after,.woocommerce-cart .wc-proceed-to-checkout::after,.woocommerce-checkout .wc-proceed-to-checkout::after{clear:both}#add_payment_method .wc-proceed-to-checkout a.checkout-button,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button{display:block;text-align:center;margin-bottom:1em;font-size:1.25em;padding:1em}#add_payment_method .cart-collaterals .shipping-calculator-button,.woocommerce-cart .cart-collaterals .shipping-calculator-button,.woocommerce-checkout .cart-collaterals .shipping-calculator-button{float:none;margin-top:.5em;display:inline-block}#add_payment_method .cart-collaterals .shipping-calculator-button::after,.woocommerce-cart .cart-collaterals .shipping-calculator-button::after,.woocommerce-checkout .cart-collaterals .shipping-calculator-button::after{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-left:.618em;content:"\e019";text-decoration:none}#add_payment_method .cart-collaterals .shipping-calculator-form,.woocommerce-cart .cart-collaterals .shipping-calculator-form,.woocommerce-checkout .cart-collaterals .shipping-calculator-form{margin:1em 0 0 0}#add_payment_method .cart-collaterals .cart_totals p small,.woocommerce-cart .cart-collaterals .cart_totals p small,.woocommerce-checkout .cart-collaterals .cart_totals p small{color:#767676;font-size:.83em}#add_payment_method .cart-collaterals .cart_totals table,.woocommerce-cart .cart-collaterals .cart_totals table,.woocommerce-checkout .cart-collaterals .cart_totals table{border-collapse:separate;margin:0 0 6px;padding:0}#add_payment_method .cart-collaterals .cart_totals table tr:first-child td,#add_payment_method .cart-collaterals .cart_totals table tr:first-child th,.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child td,.woocommerce-cart .cart-collaterals .cart_totals table tr:first-child th,.woocommerce-checkout .cart-collaterals .cart_totals table tr:first-child td,.woocommerce-checkout .cart-collaterals .cart_totals table tr:first-child th{border-top:0}#add_payment_method .cart-collaterals .cart_totals table th,.woocommerce-cart .cart-collaterals .cart_totals table th,.woocommerce-checkout .cart-collaterals .cart_totals table th{width:35%}#add_payment_method .cart-collaterals .cart_totals table td,#add_payment_method .cart-collaterals .cart_totals table th,.woocommerce-cart .cart-collaterals .cart_totals table td,.woocommerce-cart .cart-collaterals .cart_totals table th,.woocommerce-checkout .cart-collaterals .cart_totals table td,.woocommerce-checkout .cart-collaterals .cart_totals table th{vertical-align:top;border-left:0;border-right:0;line-height:1.5em}#add_payment_method .cart-collaterals .cart_totals table small,.woocommerce-cart .cart-collaterals .cart_totals table small,.woocommerce-checkout .cart-collaterals .cart_totals table small{color:#767676}#add_payment_method .cart-collaterals .cart_totals table select,.woocommerce-cart .cart-collaterals .cart_totals table select,.woocommerce-checkout .cart-collaterals .cart_totals table select{width:100%}#add_payment_method .cart-collaterals .cart_totals .discount td,.woocommerce-cart .cart-collaterals .cart_totals .discount td,.woocommerce-checkout .cart-collaterals .cart_totals .discount td{color:#958e09}#add_payment_method .cart-collaterals .cart_totals tr td,#add_payment_method .cart-collaterals .cart_totals tr th,.woocommerce-cart .cart-collaterals .cart_totals tr td,.woocommerce-cart .cart-collaterals .cart_totals tr th,.woocommerce-checkout .cart-collaterals .cart_totals tr td,.woocommerce-checkout .cart-collaterals .cart_totals tr th{border-top:1px solid #e9e6ed}#add_payment_method .cart-collaterals .cart_totals .woocommerce-shipping-destination,.woocommerce-cart .cart-collaterals .cart_totals .woocommerce-shipping-destination,.woocommerce-checkout .cart-collaterals .cart_totals .woocommerce-shipping-destination{margin-bottom:0}#add_payment_method .cart-collaterals .cross-sells ul.products li.product,.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product,.woocommerce-checkout .cart-collaterals .cross-sells ul.products li.product{margin-top:0}#add_payment_method .checkout .col-2 h3#ship-to-different-address,.woocommerce-cart .checkout .col-2 h3#ship-to-different-address,.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address{float:left;clear:none}#add_payment_method .checkout .col-2 .notes,.woocommerce-cart .checkout .col-2 .notes,.woocommerce-checkout .checkout .col-2 .notes{clear:left}#add_payment_method .checkout .col-2 .form-row-first,.woocommerce-cart .checkout .col-2 .form-row-first,.woocommerce-checkout .checkout .col-2 .form-row-first{clear:left}#add_payment_method .checkout .create-account small,.woocommerce-cart .checkout .create-account small,.woocommerce-checkout .checkout .create-account small{font-size:11px;color:#767676;font-weight:400}#add_payment_method .checkout div.shipping-address,.woocommerce-cart .checkout div.shipping-address,.woocommerce-checkout .checkout div.shipping-address{padding:0;clear:left;width:100%}#add_payment_method .checkout .shipping_address,.woocommerce-cart .checkout .shipping_address,.woocommerce-checkout .checkout .shipping_address{clear:both}#add_payment_method .checkout .checkout-inline-error-message,.woocommerce-cart .checkout .checkout-inline-error-message,.woocommerce-checkout .checkout .checkout-inline-error-message{color:var(--wc-red);font-size:.75em;margin-bottom:0}#add_payment_method #payment,.woocommerce-cart #payment,.woocommerce-checkout #payment{background:rgba(129,110,153,.14);border-radius:5px}#add_payment_method #payment ul.payment_methods,.woocommerce-cart #payment ul.payment_methods,.woocommerce-checkout #payment ul.payment_methods{text-align:left;padding:1em;border-bottom:1px solid rgba(104,87,125,.14);margin:0;list-style:none outside}#add_payment_method #payment ul.payment_methods::after,#add_payment_method #payment ul.payment_methods::before,.woocommerce-cart #payment ul.payment_methods::after,.woocommerce-cart #payment ul.payment_methods::before,.woocommerce-checkout #payment ul.payment_methods::after,.woocommerce-checkout #payment ul.payment_methods::before{content:" ";display:table}#add_payment_method #payment ul.payment_methods::after,.woocommerce-cart #payment ul.payment_methods::after,.woocommerce-checkout #payment ul.payment_methods::after{clear:both}#add_payment_method #payment ul.payment_methods li,.woocommerce-cart #payment ul.payment_methods li,.woocommerce-checkout #payment ul.payment_methods li{line-height:2;text-align:left;margin:0;font-weight:400}#add_payment_method #payment ul.payment_methods li input,.woocommerce-cart #payment ul.payment_methods li input,.woocommerce-checkout #payment ul.payment_methods li input{margin:0 1em 0 0}#add_payment_method #payment ul.payment_methods li img,.woocommerce-cart #payment ul.payment_methods li img,.woocommerce-checkout #payment ul.payment_methods li img{vertical-align:middle;margin:-2px 0 0 .5em;padding:0;position:relative;box-shadow:none}#add_payment_method #payment ul.payment_methods li img+img,.woocommerce-cart #payment ul.payment_methods li img+img,.woocommerce-checkout #payment ul.payment_methods li img+img{margin-left:2px}#add_payment_method #payment ul.payment_methods li.payment_method_paypal img,.woocommerce-cart #payment ul.payment_methods li.payment_method_paypal img,.woocommerce-checkout #payment ul.payment_methods li.payment_method_paypal img{max-height:24px;vertical-align:middle;float:right;margin:0}#add_payment_method #payment ul.payment_methods li:not(.woocommerce-notice)::after,#add_payment_method #payment ul.payment_methods li:not(.woocommerce-notice)::before,.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::after,.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::before,.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after,.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before{content:" ";display:table}#add_payment_method #payment ul.payment_methods li:not(.woocommerce-notice)::after,.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::after,.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after{clear:both}#add_payment_method #payment div.form-row,.woocommerce-cart #payment div.form-row,.woocommerce-checkout #payment div.form-row{padding:1em}#add_payment_method #payment div.payment_box,.woocommerce-cart #payment div.payment_box,.woocommerce-checkout #payment div.payment_box{position:relative;box-sizing:border-box;width:100%;padding:1em;margin:1em 0;font-size:.92em;border-radius:2px;line-height:1.5;background-color:#dcd7e2;color:#515151}#add_payment_method #payment div.payment_box input.input-text,#add_payment_method #payment div.payment_box textarea,.woocommerce-cart #payment div.payment_box input.input-text,.woocommerce-cart #payment div.payment_box textarea,.woocommerce-checkout #payment div.payment_box input.input-text,.woocommerce-checkout #payment div.payment_box textarea{border-color:#c2bacd;border-top-color:#b5abc2}#add_payment_method #payment div.payment_box ::-webkit-input-placeholder,.woocommerce-cart #payment div.payment_box ::-webkit-input-placeholder,.woocommerce-checkout #payment div.payment_box ::-webkit-input-placeholder{color:#b5abc2}#add_payment_method #payment div.payment_box :-moz-placeholder,.woocommerce-cart #payment div.payment_box :-moz-placeholder,.woocommerce-checkout #payment div.payment_box :-moz-placeholder{color:#b5abc2}#add_payment_method #payment div.payment_box :-ms-input-placeholder,.woocommerce-cart #payment div.payment_box :-ms-input-placeholder,.woocommerce-checkout #payment div.payment_box :-ms-input-placeholder{color:#b5abc2}#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods{list-style:none outside;margin:0}#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new,#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token{margin:0 0 .5em}#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new label,#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token label,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new label,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token label,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new label,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-token label{cursor:pointer}#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput,.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput,.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput{vertical-align:middle;margin:-3px 1em 0 0;position:relative}#add_payment_method #payment div.payment_box .wc-credit-card-form,.woocommerce-cart #payment div.payment_box .wc-credit-card-form,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form{border:0;padding:0;margin:1em 0 0}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number{font-size:1.5em;padding:8px;background-repeat:no-repeat;background-position:right .618em center;background-size:32px 20px}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/mastercard.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/laser.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/diners.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/maestro.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/jcb.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/amex.svg")}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{background-image:url("/media/plugins/woocommerce/assets/images/icons/credit-cards/discover.svg")}#add_payment_method #payment div.payment_box span.help,.woocommerce-cart #payment div.payment_box span.help,.woocommerce-checkout #payment div.payment_box span.help{font-size:.857em;color:#767676;font-weight:400}#add_payment_method #payment div.payment_box .form-row,.woocommerce-cart #payment div.payment_box .form-row,.woocommerce-checkout #payment div.payment_box .form-row{margin:0 0 1em}#add_payment_method #payment div.payment_box p:last-child,.woocommerce-cart #payment div.payment_box p:last-child,.woocommerce-checkout #payment div.payment_box p:last-child{margin-bottom:0}#add_payment_method #payment div.payment_box::before,.woocommerce-cart #payment div.payment_box::before,.woocommerce-checkout #payment div.payment_box::before{content:"";display:block;border:1em solid #dcd7e2;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent;position:absolute;top:-.75em;left:0;margin:-1em 0 0 2em}#add_payment_method #payment .payment_method_paypal .about_paypal,.woocommerce-cart #payment .payment_method_paypal .about_paypal,.woocommerce-checkout #payment .payment_method_paypal .about_paypal{float:right;line-height:52px;font-size:.83em}#add_payment_method #payment .payment_method_paypal img,.woocommerce-cart #payment .payment_method_paypal img,.woocommerce-checkout #payment .payment_method_paypal img{max-height:24px;vertical-align:middle;float:right}.woocommerce-terms-and-conditions{border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);background:rgba(0,0,0,.05)}.woocommerce-invalid #terms{outline:2px solid var(--wc-red);outline-offset:2px}.woocommerce-password-strength{text-align:center;font-weight:600;padding:3px .5em;font-size:1em}.woocommerce-password-strength.strong{background-color:#c1e1b9;border-color:#83c373}.woocommerce-password-strength.short{background-color:#f1adad;border-color:#e35b5b}.woocommerce-password-strength.bad{background-color:#fbc5a9;border-color:#f78b53}.woocommerce-password-strength.good{background-color:#ffe399;border-color:#ffc733}.woocommerce-password-hint{margin:.5em 0 0;display:block}#content.twentyeleven .woocommerce-pagination a{font-size:1em;line-height:1}.single-product .twentythirteen #reply-title,.single-product .twentythirteen #respond #commentform,.single-product .twentythirteen .entry-summary{padding:0}.single-product .twentythirteen p.stars{clear:both}.twentythirteen .woocommerce-breadcrumb{padding-top:40px}.twentyfourteen ul.products li.product{margin-top:0!important}body:not(.search-results) .twentysixteen .entry-summary{color:inherit;font-size:inherit;line-height:inherit}.twentysixteen .price ins{background:inherit;color:inherit}form.has-custom-place-order-button #place_order{display:none!important}

/* ==== inline #woocommerce-inline-inline-css ==== */

.woocommerce form .form-row .required { visibility: visible; }
/*# sourceURL=woocommerce-inline-inline-css */


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vaff.css?ver=1786995532 ==== */
/* =============================================================================
   Ventra Affiliate - My Account dashboard (Module F)

   ADDITIVE ONLY. The account shell, cards, buttons, balance card, empty states
   and progress bar all come from assets/vsc-account.css and are NOT restyled
   here. This file adds only what that contract genuinely lacks:
     1. a big copyable code + link row
     2. a small stat grid that sits inside the gold balance card
     3. a commission table that stacks into cards on a phone
     4. status pills + the apply form (honeypot, terms row)
     5. the tier-2 strip, kept visibly apart from the payout balance
     6. the embedded-Stripe zone contract (see that section - it is the only
        block here where the ORDER and SPECIFICITY of the rules is load-bearing
        rather than cosmetic, because it decides what an affiliate sees when
        JavaScript fails)

   Tokens are referenced with fallbacks so the tab still looks right if this
   file ever loads before / without vsc-account.css.

   Mobile first. Every control is >= var(--acct-tap, 44px). No rule may create
   horizontal overflow at 390px - the tables stack instead of scrolling.
   ========================================================================== */

.vaff-wrap {
	display: grid;
	gap: 16px;
	max-width: 100%;
	min-width: 0;
}

/* --- one-shot PRG notice --------------------------------------------------- */

.vaff-notice {
	border-radius: var(--acct-r, 16px);
	padding: 13px 16px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid transparent;
}

.vaff-notice--ok {
	background: rgba(14, 165, 233, .10);
	border-color: rgba(14, 165, 233, .38);
	color: var(--acct-cyan, #0EA5E9);
}

.vaff-notice--err {
	background: rgba(239, 68, 68, .10);
	border-color: rgba(239, 68, 68, .38);
	color: #FCA5A5;
}

/* --- small stat grid (sits inside .vsc-acct-rw, and in the pitch card) ------ */

.vaff-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
	min-width: 0;
}

.vaff-stat {
	min-width: 0;
	padding: 11px 13px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
}

.vaff-stat-k {
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	opacity: .65;
	margin-bottom: 4px;
}

.vaff-stat-v {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	word-break: break-word;
}

.vaff-stat-v--sm {
	font-size: 17px;
	font-weight: 700;
}

.vaff-stats--pitch .vaff-stat-v {
	color: var(--acct-gold, #F5C451);
}

/* --- tier-2, kept visibly apart from the payout balance ---------------------
   Its own tinted strip OUTSIDE the gold balance card, because everything in
   that card is money the payout engine moves on its own and this is money a
   human sends. Sharing a surface would make them read as one balance, which is
   the one impression that leaves an affiliate waiting for a transfer that is
   structurally never scheduled.
   -------------------------------------------------------------------------- */

.vaff-t2 {
	min-width: 0;
	margin-top: 14px;
	padding: 13px 15px;
	border-radius: 14px;
	background: rgba(245, 196, 81, .07);
	border: 1px solid rgba(245, 196, 81, .22);
}

.vaff-t2-k {
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	opacity: .7;
}

.vaff-t2-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	min-width: 0;
}

.vaff-t2-v {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--acct-gold, #F5C451);
	word-break: break-word;
}

/* --- "we last sent you X on DATE" ------------------------------------------
   One line, not a second payout table. It answers the only question Stripe's
   own payouts panel cannot: whether VENTRA has sent it yet, as opposed to
   whether the bank has received it.
   -------------------------------------------------------------------------- */

.vaff-lastsent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- fine print ------------------------------------------------------------ */

.vaff-note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.6;
	opacity: .74;
}

.vaff-note--tight {
	margin-top: 8px;
}

/* --- the code + copyable referral link ------------------------------------- */

.vaff-code {
	display: block;
	margin: 4px 0 0;
	padding: 15px 12px;
	border: 2px dashed var(--acct-cyan, #0EA5E9);
	border-radius: 12px;
	text-align: center;
	font-size: clamp(22px, 7vw, 30px);
	font-weight: 800;
	letter-spacing: 3px;
	line-height: 1.15;
	/* A long code must wrap, never widen the page. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.vaff-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin-top: 14px;
	min-width: 0;
}

.vaff-copy-in {
	width: 100%;
	min-width: 0;
	min-height: var(--acct-tap, 44px);
	padding: 10px 13px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(0, 0, 0, .22);
	color: inherit;
	font-size: 14px;
	text-overflow: ellipsis;
}

.vaff-copy-in:focus {
	outline: 2px solid var(--acct-cyan, #0EA5E9);
	outline-offset: 1px;
}

.vaff-copy-btn {
	min-height: var(--acct-tap, 44px);
	white-space: nowrap;
}

.vaff-copy-btn.is-copied {
	filter: brightness(1.12);
}

@media (min-width: 560px) {
	.vaff-copy {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
}

/* --- the codes list --------------------------------------------------------
   One affiliate holds many codes, so the single big dashed code block becomes a
   list of compact cards. A personal code is tinted gold and carries its own
   pill + note - it must never read as just another earning code.
   -------------------------------------------------------------------------- */

.vaff-codes {
	list-style: none;
	display: grid;
	gap: 14px;
	margin: 4px 0 0;
	padding: 0;
	min-width: 0;
}

.vaff-codecard {
	min-width: 0;
	padding: 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
}

.vaff-codecard--personal {
	background: rgba(245, 196, 81, .06);
	border-color: rgba(245, 196, 81, .24);
}

.vaff-codecard-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

/* Smaller, left-aligned variant of .vaff-code. Declared AFTER .vaff-code so it
   wins at equal specificity. */
.vaff-code--sm {
	flex: 1 1 auto;
	margin: 0;
	padding: 9px 12px;
	font-size: clamp(16px, 4.6vw, 20px);
	letter-spacing: 2px;
	text-align: left;
}

.vaff-codecard--personal .vaff-code--sm {
	border-color: var(--acct-gold, #F5C451);
}

.vaff-codemeta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 11px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .85;
	min-width: 0;
}

.vaff-codemeta strong {
	font-weight: 800;
	opacity: 1;
}

.vaff-codemeta-no {
	color: var(--acct-gold, #F5C451);
	font-weight: 700;
	opacity: 1;
}

.vaff-codecard .vaff-copy {
	margin-top: 12px;
}

/* --- apply form ------------------------------------------------------------ */

.vaff-form {
	margin-top: 18px;
}

/* Honeypot. Off-screen rather than display:none so bots still "see" it. */
.vaff-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.vaff-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13px;
	line-height: 1.55;
	opacity: .88;
	/* 44px tap target for the whole label row on touch. */
	min-height: var(--acct-tap, 44px);
	padding: 4px 0;
	cursor: pointer;
}

.vaff-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--acct-cyan, #0EA5E9);
	cursor: pointer;
}

.vaff-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--acct-tap, 44px);
	margin-top: 14px;
}

/* --- embedded Stripe surfaces -----------------------------------------------
   THE DEFAULT STATE OF EVERY ZONE IS "HOSTED FALLBACK". Read the rules in the
   order they are written and the reason is visible: .vaff-embed, its skeleton
   and every .vaff-esec are hidden outright, .vaff-fallback is not. Only
   .is-embedding - a class no stylesheet sets and only script adds - swaps them.

   So every way JavaScript can fail (absent, blocked, deferred into oblivion,
   parse error, CDN unreachable, CSP) lands on the plain POST form that needs no
   JavaScript at all, and none of them can leave an affiliate looking at an
   empty box. Reverting to the fallback is a single class removal, which is why
   several independent guards can all trigger it safely.

   Do not "tidy" this by hiding .vaff-fallback in CSS and revealing it with JS.
   That inverts the failure mode: the panels would go dead in exactly the cases
   the fallback exists to cover.

   FOUR STATES, and the middle two are why this is not just a boolean:
     (no class)   nothing embedded  -> fallback only
     .is-embedding    components live   -> fallback hidden
     .is-partial      some component died -> survivors AND the fallback
     .is-light        appearance was rejected, Stripe drew its own light UI
   -------------------------------------------------------------------------- */

.vaff-embedzone {
	min-width: 0;
}

/* The onboarding zone sits INSIDE a card and stacks plainly, exactly as it
   shipped. Left as a block on purpose - it is production-proven and there is
   nothing to gain by relaying it. */
.vaff-onboard {
	min-width: 0;
	margin-top: 12px;
}

/* The money zone holds whole cards, so it carries the same rhythm as .vaff-wrap. */
.vaff-moneyzone {
	display: grid;
	gap: 16px;
	min-width: 0;
}

/* The banner zone is display:contents so it never becomes a grid item of its
   own. An empty wrapper would still cost one 16px gap at the very top of the
   dashboard on every account that has no notifications - which is most of them,
   most of the time. With contents, a hidden section leaves nothing at all. */
.vaff-alertzone {
	display: contents;
}

.vaff-embed,
.vaff-embed-skel,
.vaff-embedzone .vaff-esec,
.vaff-embedzone .vaff-eonly {
	display: none;
}

.vaff-embedzone.is-embedding .vaff-embed {
	display: block;
}

.vaff-embedzone.is-embedding .vaff-embed-skel {
	display: flex;
}

.vaff-embedzone.is-embedding .vaff-esec,
.vaff-embedzone.is-embedding .vaff-eonly {
	display: block;
}

.vaff-embedzone.is-embedding .vaff-fallback {
	display: none;
}

/* A component died but others survived: show both. Higher specificity than the
   rule above it, and declared after, so the intent does not depend on either
   alone. */
.vaff-embedzone.is-embedding.is-partial .vaff-fallback {
	display: block;
}

/* A dead slot takes its heading with it - never leave a label over an empty box. */
.vaff-embedzone.is-embedding .vaff-esec.is-dead {
	display: none;
}

/* Stripe reported zero notifications. The banner is working perfectly; it
   simply has nothing to say, so it takes up no room. */
.vaff-embedzone.is-embedding .vaff-esec.is-quiet {
	display: none;
}

/* The component has confirmed it is drawing: drop the placeholder. Two rules,
   because onboarding marks the ZONE ready (it has no section) and the dashboard
   components mark their own SECTION. */
.vaff-embedzone.is-embedding.is-ready .vaff-embed-skel {
	display: none;
}

.vaff-embedzone.is-embedding .vaff-esec.is-ready .vaff-embed-skel {
	display: none;
}

/* Onboarding: Stripe renders its own light UI inside here, so it gets a light
   surface to sit on rather than inheriting the dark account card and going
   unreadable. */
.vaff-embed {
	/* Explicit, not inherited: this box is 100% wide AND padded, so without
	   border-box it is 100% + 20px and the account page scrolls sideways on a
	   phone. Declared here rather than trusted to the theme reset. */
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
}

/* The dashboard components are themed dark from the account tokens, so they get
   no surface of their own and sit directly on the card. */
.vaff-embed--flush {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

/* Theming was rejected and the script retried with Stripe's default light
   rendering. Give it a light surface back or it would be white-on-navy. */
.vaff-embedzone.is-light .vaff-embed--flush {
	padding: 10px;
	border-radius: 12px;
	background: #fff;
}

.vaff-embed-skel {
	align-items: center;
	gap: 10px;
	min-height: var(--acct-tap, 44px);
	padding: 0 2px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .72;
}

/* --- one embedded component slot ------------------------------------------- */

.vaff-esec {
	min-width: 0;
	margin-top: 16px;
}

/* A slot that IS a card - the payout-account panel, where the card and the
   component are the same thing so that a dead component takes its heading with
   it - is spaced by the zone's grid gap, not by its own margin. */
.vaff-moneyzone > .vaff-esec {
	margin-top: 0;
}

.vaff-esec-h {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	opacity: .62;
}

/* The banner carries no heading and no skeleton, so it needs no leading gap of
   its own - it is the first thing on the page. */
.vaff-alertzone .vaff-esec {
	margin-top: 0;
}

.vaff-embed-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--acct-cyan, #0EA5E9);
	animation: vaff-pulse 1.1s ease-in-out infinite;
}

@keyframes vaff-pulse {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

/* --- ledger tables ---------------------------------------------------------
   Mobile: each row becomes a stacked card with its label from data-label, so
   six columns can never push the page sideways at 390px.
   >=640px: a real table.
   -------------------------------------------------------------------------- */

.vaff-tablewrap {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.vaff-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0;
}

.vaff-table thead {
	display: none;
}

.vaff-table tr {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.vaff-table tr:last-child {
	border-bottom: 0;
}

.vaff-table td {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 4px 0;
	border: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.vaff-table td::before {
	content: attr(data-label);
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	opacity: .58;
}

@media (min-width: 640px) {
	.vaff-table thead {
		display: table-header-group;
	}

	.vaff-table tr {
		display: table-row;
		padding: 0;
	}

	.vaff-table th {
		display: table-cell;
		padding: 0 12px 10px;
		text-align: left;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .5px;
		text-transform: uppercase;
		opacity: .58;
		border-bottom: 1px solid rgba(255, 255, 255, .10);
		white-space: nowrap;
	}

	.vaff-table td {
		display: table-cell;
		padding: 11px 12px;
		text-align: left;
		vertical-align: middle;
		border-bottom: 1px solid rgba(255, 255, 255, .06);
	}

	.vaff-table td::before {
		display: none;
	}
}

.vaff-neg {
	color: #FCA5A5;
}

.vaff-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .09);
	opacity: .8;
}

/* --- status pills ---------------------------------------------------------- */

.vaff-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	white-space: nowrap;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .12);
}

.vaff-pill--pending {
	color: var(--acct-gold, #F5C451);
	background: rgba(245, 196, 81, .12);
	border-color: rgba(245, 196, 81, .34);
}

.vaff-pill--approved {
	color: var(--acct-cyan, #0EA5E9);
	background: rgba(14, 165, 233, .12);
	border-color: rgba(14, 165, 233, .34);
}

.vaff-pill--paid {
	color: #6EE7B7;
	background: rgba(16, 185, 129, .12);
	border-color: rgba(16, 185, 129, .34);
}

.vaff-pill--failed {
	color: #FCA5A5;
	background: rgba(239, 68, 68, .12);
	border-color: rgba(239, 68, 68, .34);
}

.vaff-pill--void {
	opacity: .6;
}

/* Code kinds. --earn is cyan like an approved commission; --noearn is gold, the
   same colour the "Earns no commission" line uses, so the two read as one fact. */

.vaff-pill--earn {
	color: var(--acct-cyan, #0EA5E9);
	background: rgba(14, 165, 233, .12);
	border-color: rgba(14, 165, 233, .34);
}

.vaff-pill--noearn {
	color: var(--acct-gold, #F5C451);
	background: rgba(245, 196, 81, .12);
	border-color: rgba(245, 196, 81, .34);
}

/* --- reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vaff-copy-btn.is-copied {
		filter: none;
	}

	.vaff-embed-dot {
		animation: none;
		opacity: .7;
	}
}


/* =============================================================================
   THE LINK CARD  (.vaff-linkcard)

   The first card on the dashboard. Composed from the vsc-acct-* contract - it
   IS a .vsc-acct-card, and .vaff-linkcard only adds a cyan top edge to mark it
   as the primary thing on the page. Nothing here restyles a vsc-acct-*
   component, in keeping with this file's additive-only rule.

   Everything below reuses existing vocabulary where it exists: the copy row is
   the same .vaff-copy / .vaff-copy-in used by the codes card, and the button is
   an unmodified .vsc-acct-btn--cyan. Only three things are genuinely new - the
   large link display, the three-point "what it does" list, and the deep-link
   picker - and each gets exactly one class.
   ========================================================================== */

/* SPECIFICITY, NOT PREFERENCE. vsc-account.css styles .vsc-acct-card behind the
   mandatory html.vsc-dark body.woocommerce-account.logged-in
   .woocommerce-MyAccount-content prefix - (0,4,2) - and it prints AFTER this
   file (its handle depends on vsv4-dark, so it is always last). A bare
   .vaff-linkcard is (0,1,0) and its border was measured losing outright to the
   card's own `border` shorthand. Carrying the full prefix here takes it to
   (0,5,2), which merely TIES the card rule - and a tie is settled by source
   order, which this file loses. Measured: the border was still theirs. Naming
   .vsc-acct-card as well takes it to (0,6,2) and it holds. Anything here that
   must beat a vsc-acct-* property needs the same treatment. */

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card.vaff-linkcard {
	border-top: 2px solid var(--acct-cyan, #0EA5E9);
}

/* The link itself, big enough to read at arm's length in a screenshot.
   overflow-wrap:anywhere because a long code must never widen the card - this
   file may not create horizontal overflow at 390px. */

.vaff-linkbig {
	margin: 2px 0 0;
	padding: 15px 14px;
	border: 1px dashed var(--acct-cyan, #0EA5E9);
	border-radius: var(--acct-r-tile, 12px);
	background: rgba(14, 165, 233, .06);
	color: var(--acct-ink, #fff);
	font-family: var(--acct-display, 'Space Grotesk', Inter, sans-serif);
	font-size: clamp(15px, 4.2vw, 20px);
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.35;
	text-align: center;
	overflow-wrap: anywhere;
}

/* --- what the link actually does ------------------------------------------ */

.vaff-linkwhy {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.vaff-linkwhy li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: var(--acct-ink-soft, #C7D2DE);
	font-size: 14px;
	line-height: 1.5;
}

.vaff-linkwhy li strong {
	color: var(--acct-ink, #fff);
	font-weight: 700;
}

/* Exactly two flex items per row: the tick, and ONE span holding all the text.
   Without the span every bare text node and every <strong> became its own flex
   item and the sentence was laid out in pieces - measured, not theorised. */

.vaff-linkwhy-t {
	flex: 1 1 auto;
	min-width: 0;
}

.vaff-linkwhy-ic {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(14, 165, 233, .14);
	color: var(--acct-cyan, #0EA5E9);
	font-size: 11px;
	line-height: 1;
}

/* --- deep links ------------------------------------------------------------ */

.vaff-deep {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
}

.vaff-deep-lbl {
	display: block;
	margin-bottom: 8px;
	color: var(--acct-ink-mute, #8FA0B4);
	font-size: 13px;
}

/* A real <select>, deliberately. The native control is the accessible one, it
   is the one a phone renders as a proper picker, and it needs no JavaScript to
   open. Only the skin is ours. */

/* WEBKIT IGNORES min-height ON A <select>. Measured at 25px in WebKit against
   44px in Chromium - i.e. the picker was under the tap-target floor on exactly
   the browser most of this store's traffic uses. A native select is also height-
   clamped to its font metrics while it keeps the platform appearance, so the
   appearance is dropped, an explicit height is set, and the disclosure arrow is
   drawn here instead (inline data URI - no external asset, nothing to 404).
   font-size stays >= 16px so iOS does not zoom the page on focus. */

.vaff-deep-sel {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: var(--acct-tap, 44px);
	min-height: var(--acct-tap, 44px);
	padding: 0 38px 0 13px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--acct-r-tile, 12px);
	background-color: rgba(0, 0, 0, .22);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238FA0B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--acct-ink, #fff);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
}

.vaff-deep-sel:focus {
	outline: 2px solid var(--acct-cyan, #0EA5E9);
	outline-offset: 1px;
}

/* The options themselves are painted by the OS on most platforms; setting a
   readable pair here stops a dark-on-dark list where they are not. */

.vaff-deep-sel option {
	background: #16202E;
	color: #fff;
}

/* Disabled copy button, before a compound has been picked. Mirrors the
   .is-disabled treatment vsc-account.css already gives .vsc-acct-btn. */

.vaff-deep .vsc-acct-btn[disabled] {
	opacity: .55;
	box-shadow: none;
	pointer-events: none;
}


/* =============================================================================
   PERFORMANCE CARD (Module I)

   ADDITIVE, like everything else here. The card, its head, the stat grid, the
   table and the empty state are all the shapes vsc-account.css and the blocks
   above already define - this section adds only the four things none of them
   had: a period switcher, a timeline, and two small type treatments.

   COLOUR MEANS SOMETHING, so it is spent carefully:
     cyan  = clicks. Traffic. The system's own measure, matching every other
             cyan control in the account area.
     gold  = a day that produced an order. Gold already means earnings on the
             balance card, so a gold cap on a bar reads as "this day paid"
             without a legend having to teach it.
   Nothing else is coloured. A chart where every bar is a different colour is a
   chart that has stopped saying anything.
   ========================================================================== */

/* --- period switcher ------------------------------------------------------- */

.vaff-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}

.vaff-seg-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--acct-tap, 44px);
	padding: 8px 16px;
	border-radius: var(--acct-r-pill, 999px);
	border: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
	background: var(--acct-panel-2, rgba(255, 255, 255, .04));
	color: var(--acct-ink-mute, #8FA0B4);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.vaff-seg-i:hover,
.vaff-seg-i:focus {
	color: var(--acct-ink, #fff);
	background: rgba(255, 255, 255, .07);
	text-decoration: none;
}

/* The selected period. Cyan fill, matching the primary button, because this is
   the one control on the card that changes what every number above means. */

.vaff-seg-i.is-on {
	background: var(--acct-cyan, #0EA5E9);
	border-color: var(--acct-cyan, #0EA5E9);
	color: var(--acct-cyan-ink, #fff) !important;
}

.vaff-seg-i:focus-visible {
	outline: 2px solid var(--acct-cyan, #0EA5E9);
	outline-offset: 2px;
}

/* --- the one-line earnings summary ---------------------------------------- */

.vaff-earned-line {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--acct-ink-soft, #C7D2DE);
}

.vaff-earned-line strong {
	color: var(--acct-ink, #fff);
	font-weight: 700;
}

/* --- timeline -------------------------------------------------------------- */

.vaff-spark {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 84px;
	margin: 18px 0 0;
	padding: 10px;
	border-radius: var(--acct-r-tile, 12px);
	background: rgba(0, 0, 0, .22);
	border: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
	overflow: hidden;
}

/* Each column is a flex item so 7 bars and 90 bars both fill the width without
   any per-count arithmetic. min-width keeps a 90-day view from collapsing to
   hairlines on a phone. */

.vaff-spark-col {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex: 1 1 0;
	min-width: 2px;
	height: 100%;
}

.vaff-spark-col > i {
	display: block;
	width: 100%;
	border-radius: 2px 2px 0 0;
	background: var(--acct-cyan, #0EA5E9);
	opacity: .85;
}

/* A day with no clicks still occupies its column - the gap IS the information,
   and dropping it would squash a quiet month into a busy-looking week. */

.vaff-spark-col > i[style*="height:0%"] {
	min-height: 2px;
	background: rgba(255, 255, 255, .10);
	opacity: 1;
}

/* Gold cap = this day produced an order. Sits ON the bar rather than replacing
   its colour, so the day is still readable as traffic AND as a sale. */

.vaff-spark-col.has-order > i {
	background: linear-gradient(
		to bottom,
		var(--acct-gold, #F5C451) 0,
		var(--acct-gold, #F5C451) 4px,
		var(--acct-cyan, #0EA5E9) 4px
	);
	opacity: 1;
}

/* A zero-click day that still produced an order (a typed code) must not vanish:
   show the gold marker on its own. */

.vaff-spark-col.has-order > i[style*="height:0%"] {
	min-height: 4px;
	background: var(--acct-gold, #F5C451);
}

.vaff-spark-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: space-between;
	align-items: center;
	margin: 8px 2px 0;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--acct-ink-mute, #8FA0B4);
	opacity: .8;
}

.vaff-spark-key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vaff-spark-key em {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-left: 6px;
}

.vaff-spark-key em:first-child {
	margin-left: 0;
}

.vaff-key-click {
	background: var(--acct-cyan, #0EA5E9);
}

.vaff-key-order {
	background: var(--acct-gold, #F5C451);
}

/* --- sub-headings + notes -------------------------------------------------- */

.vaff-sub-h {
	margin: 22px 0 10px;
}

.vaff-note-small {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--acct-ink-mute, #8FA0B4);
}

/* Second line of the empty state. Deliberately narrower than the card so it
   reads as a sentence rather than a wall - this is the first thing a brand new
   partner sees, and it has to be read, not skimmed past. */

.vaff-empty-sub {
	max-width: 46ch;
	margin: -4px auto 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--acct-ink-mute, #8FA0B4);
}

@media (prefers-reduced-motion: reduce) {

	.vaff-seg-i {
		transition: none;
	}
}


/* =============================================================================
   OUT-SPECIFY THE ACCOUNT FIELD RESET (fixes the clipped "Choose a compound")
   -----------------------------------------------------------------------------
   vsc-account.css:1143 resets every field inside .woocommerce-MyAccount-content,
   selects included, at specificity (0,4,3) with !important. It does two things
   this control cannot survive:

     padding: 14px 16px !important
        The select is a FIXED 44px tall (WebKit ignores min-height on a select,
        which is why the height is explicit - see the note above). 14px top +
        14px bottom = 28px of padding, leaving 16px of content box for a 16px
        font at line-height 1.2 = 19.2px. It overflows by ~3px and the option
        label is visibly cut off along the bottom edge. That is the reported bug.

     background: var(--acct-panel-2) !important
        This is the SHORTHAND, so it resets background-image to none and takes
        the disclosure chevron with it. The field then reads as a plain text box
        with no affordance that it opens.

   Both are re-asserted here as LONGHANDS at (0,5,3) - one class higher than the
   resetting rule, so it wins regardless of stylesheet load order. Never re-declare
   `background` as a shorthand in this block: doing so would re-create exactly the
   bug being fixed, one layer further down.
   ============================================================================= */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content select.vaff-deep-sel {
	height: var(--acct-tap, 44px) !important;
	min-height: var(--acct-tap, 44px) !important;
	padding: 0 38px 0 13px !important;
	line-height: 1.2 !important;
	font-size: 16px !important;
	background-color: rgba(0, 0, 0, .22) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238FA0B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	text-overflow: ellipsis;
}

/* The copy field beside it takes the same reset. Left at the account system's
   own 16px so iOS does not zoom on focus, but the vertical padding is trimmed so
   it visually matches the 44px select sitting next to it rather than standing a
   few px taller. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input.vaff-copy-in {
	height: var(--acct-tap, 44px) !important;
	min-height: var(--acct-tap, 44px) !important;
	padding: 0 13px !important;
	line-height: 1.2 !important;
}


/* =============================================================================
   WAVE 1 - month-to-date card, ledger filters/pager, and the partner's own pause
   -----------------------------------------------------------------------------
   Every control added here is a LINK, a BUTTON or plain text. Not one <select>
   and not one <input>, which is deliberate: vsc-account.css resets every field
   inside .woocommerce-MyAccount-content at (0,4,3) with !important, including a
   `background` SHORTHAND that strips a background-image and a 14px vertical
   padding that overflows a 44px control. Anything in this block that DID need a
   field would have to out-specify all of that at (0,5,3), exactly as the
   deep-link select above does. Avoiding the field avoided the bug.

   Rule for anyone extending this: never re-declare `background` as a shorthand
   on a control that carries a background-image. Use background-color.
   ============================================================================= */

/* --- month to date --------------------------------------------------------- */

.vaff-monthtop {
	min-width: 0;
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 14px;
	background-color: rgba(14, 165, 233, .07);
	border: 1px solid rgba(14, 165, 233, .22);
}

.vaff-monthtop-k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--acct-ink-mute, #8FA0B4);
}

.vaff-monthtop-v {
	margin-top: 4px;
	font-family: var(--acct-display, inherit);
	font-size: clamp(26px, 7vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--acct-ink, #fff);
	overflow-wrap: anywhere;
}

.vaff-monthtop-sub {
	margin-top: 2px;
	font-size: 13px;
	color: var(--acct-ink-soft, #C7D2DE);
}

/* One row per code. Grid rather than flex so the amount column stays aligned
   down the list however long a code is, and so the meta line can span the full
   width on a narrow screen instead of squeezing the amount off the edge. */

.vaff-bycode {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vaff-bycode-i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"main amt"
		"meta amt";
	gap: 2px 14px;
	align-items: center;
	padding: 12px 0;
	min-width: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.vaff-bycode-i:last-child {
	border-bottom: 0;
}

.vaff-bycode-main {
	grid-area: main;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.vaff-bycode-meta {
	grid-area: meta;
	font-size: 13px;
	line-height: 1.5;
	color: var(--acct-ink-mute, #8FA0B4);
	overflow-wrap: anywhere;
}

.vaff-bycode-amt {
	grid-area: amt;
	justify-self: end;
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--acct-ink, #fff);
}

/* The code chip inside a by-code row is a label, not the hero code block, so it
   drops the dashed cyan frame it inherits from .vaff-code--sm. */

.vaff-bycode-main .vaff-code--sm {
	flex: 0 1 auto;
	padding: 2px 0;
	border: 0;
	font-size: 15px;
	letter-spacing: 1.2px;
}

/* --- ledger filters, count and pager --------------------------------------- */

/* The two segmented groups stack with less air between them than a .vaff-seg
   carries on its own, so they read as one filter block rather than two cards. */

#vaff-history .vaff-seg {
	margin-bottom: 10px;
}

#vaff-history .vaff-seg + .vaff-seg {
	margin-bottom: 16px;
}

.vaff-count {
	margin-top: 0;
	margin-bottom: 10px;
}

.vaff-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.vaff-pager-at {
	font-size: 13px;
	font-weight: 700;
	color: var(--acct-ink-mute, #8FA0B4);
	white-space: nowrap;
}

/* An unavailable pager end keeps the pill's exact geometry - so the row does not
   reflow as you page - and states its unavailability with colour plus
   aria-disabled rather than by disappearing. A control that vanishes at the ends
   makes the remaining one jump across the row. */

.vaff-seg-i.is-off {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

/* --- the partner's own pause ------------------------------------------------ */

.vaff-pill--paused {
	color: #CBD5E1;
	background-color: rgba(148, 163, 184, .16);
	border-color: rgba(148, 163, 184, .38);
}

/* A paused code is DIMMED, never faded: the text keeps full contrast and only
   the frame changes. Dropping opacity on the card would take the code, the rate
   and the explanation down with it, and the explanation is the one thing a
   partner most needs to read in this exact state. */

.vaff-codecard--paused {
	background-color: rgba(148, 163, 184, .06);
	border-color: rgba(148, 163, 184, .28);
}

.vaff-codecard--paused .vaff-code--sm {
	border-style: dashed;
	border-color: rgba(148, 163, 184, .5);
}

.vaff-pauseform {
	margin: 12px 0 0;
}

/* Full width on a phone so it is unmissable and comfortably tappable; sized to
   its label from 480px up, where a full-bleed button looks like a mistake. */

.vaff-pausebtn {
	width: 100%;
}

@media (min-width: 480px) {

	.vaff-pausebtn {
		width: auto;
	}
}


/* =============================================================================
   THE SELECTED PERIOD PILL WAS CYAN TEXT ON A CYAN FILL (1.28:1)
   -----------------------------------------------------------------------------
   Measured in a real browser, pointer parked off-canvas and focus cleared, so
   this is the resting state and not a :hover artefact:

     .vaff-seg-i         computed #38BDF8 on the card          (readable)
     .vaff-seg-i.is-on   computed #38BDF8 on #0EA5E9  = 1.28:1 (unreadable)

   Neither of the `color` declarations further up this file was reaching the
   element - the unselected pill should be --acct-ink-mute and the selected one
   --acct-cyan-ink, and BOTH resolved to the same inherited link cyan. Whatever
   is winning (an account-area anchor rule at (0,4,3) !important, of which there
   are several, or a var() that fails to resolve in this scope and drops the
   declaration to `inherit`), the answer is the same one this file already uses
   for the deep-link select: re-assert at (0,5,3), one class higher than the
   account reset, so it wins regardless of source order.

   LITERAL COLOURS, NOT var(). A custom property that is undefined or invalid AT
   COMPUTED-VALUE TIME does not fall back to the second argument - the whole
   declaration becomes invalid and the property INHERITS instead, which is
   exactly the failure being fixed. A literal cannot fail that way.

   This bug predates the wave-1 filters: Module I's period switcher renders the
   same pill and had the same unreadable selected state.
   ============================================================================= */

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vaff-seg-i {
	color: #8FA0B4 !important;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vaff-seg-i:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vaff-seg-i:focus {
	color: #FFFFFF !important;
}

/* The selected pill: white on #0EA5E9 = 3.3:1, and it is 13px/700 so it clears
   AA for bold text at this size. Kept as one rule with the .is-on class so it
   also out-weighs the base rule directly above it. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vaff-seg-i.is-on {
	color: #FFFFFF !important;
}

/* The disabled pager end. Same chain, so it is not re-coloured by the base rule. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vaff-seg-i.is-off {
	color: #8FA0B4 !important;
}


/* =============================================================================
   WAVE 2 - TWO CASCADE COLLISIONS WITH THE SHARED ACCOUNT STYLESHEET
   -----------------------------------------------------------------------------
   Both of these are vsc-account.css rules written for WooCommerce's OWN account
   tables and buttons, which are the right rules for those and the wrong rules
   here. Neither is a mistake in this file's markup - the declarations this file
   already makes were simply never reaching the element. Measured in Chromium and
   WebKit with the pointer parked off-canvas, so these are resting states and not
   :hover artefacts.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. THE PAUSE BUTTON WAS THE FILLED CYAN PRIMARY - the loudest control on the
      page was the one that switches earning OFF.
   -----------------------------------------------------------------------------
   render_pause_control() already emits the right class: --cyan when the code is
   paused (resume is THE action), --ghost when it is live (pausing is secondary).
   The PHP was never wrong. What happened is that the button is also a
   <button type="submit">, and vsc-account.css styles every submit button in the
   account content as a filled cyan pill so WooCommerce's own "Save address" /
   "Pay" buttons are not bare grey rectangles:

     ...MyAccount-content .vsc-acct-btn--ghost      background: transparent  !important   (0,5,2)
     ...MyAccount-content button[type="submit"]     background: var(--acct-cyan) !important (0,5,3)

   Both carry !important, so the cascade is decided on specificity, and the
   generic submit rule wins by ONE element+attribute. Measured before this block:
   Pause and Resume both computed rgb(14,165,233) - identical - in both engines.

   Re-asserted below at (0,6,3) by naming the element AND both classes, so it
   beats the generic rule on specificity rather than on source order, which a
   later enqueue reshuffle could otherwise flip back.

   Scoped to <button> deliberately: the anchor-based ghost links elsewhere on this
   page (the "clear filters" link) never matched the submit rule and are untouched.
   -------------------------------------------------------------------------- */

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.vsc-acct-btn.vsc-acct-btn--ghost {
	background: transparent !important;
	border-color: var(--acct-border, rgba(255, 255, 255, .08)) !important;
	color: var(--acct-ink, #fff) !important;
	box-shadow: none !important;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.vsc-acct-btn.vsc-acct-btn--ghost:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.vsc-acct-btn.vsc-acct-btn--ghost:focus {
	background: rgba(255, 255, 255, .06) !important;
}

/* Same trap, same fix, for the muted variant - no submit button uses it today,
   but the next one to would silently ship as a cyan primary. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.vsc-acct-btn.vsc-acct-btn--dark {
	background: var(--acct-panel-2, rgba(255, 255, 255, .04)) !important;
	border-color: var(--acct-border, rgba(255, 255, 255, .08)) !important;
	color: var(--acct-ink-mute, #8FA0B4) !important;
	box-shadow: none !important;
}


/* -----------------------------------------------------------------------------
   2. THE COMMISSION-HISTORY HEADER LABELS TOUCHED AT EVERY DESKTOP WIDTH.
   -----------------------------------------------------------------------------
   Two causes, and the first is the one that matters:

   (a) THE COLUMN GUTTERS WERE NEVER THERE. This file asks for
       `.vaff-table th { padding: 0 12px 10px }` at (0,1,1), but vsc-account.css
       zeroes horizontal padding on every account table cell:

         ...MyAccount-content table th { padding: 12px 0 !important }   (0,4,4)
         ...MyAccount-content table td { padding: 14px 0 !important }   (0,4,4)

       That rule is correct for WooCommerce's own two- and three-column order
       tables, where edge-to-edge reads fine. This ledger has SEVEN columns, so
       with 0px gutters the labels are separated by nothing but the space the
       auto table layout happens to leave. Measured: "ORDER VALUE / RATE",
       "RATE / COMMISSION" and "COMMISSION / STATUS" all at 0.0px at 640px, 3.1px
       at 1024px, identical in both engines.

   (b) THE WRAPPER'S overflow-x COULD NEVER ENGAGE. .vaff-tablewrap already has
       overflow-x:auto waiting, but the table is width:100% (and the account
       stylesheet re-asserts that at (0,4,3)), so it can never be wider than its
       wrapper - instead of scrolling it crushes the columns. width:max-content
       with min-width:100% lets it size to its content and hand the overflow to
       the wrapper, which is what that overflow-x was always for.

   Result, measured across 1600/1440/1280/1100/1024/900/820/768/700/640 in both
   engines: minimum label gap 28.0px everywhere, and the page body itself never
   scrolls sideways at any width - only the table does.

   ALL OF THIS IS >=640px ONLY. Below that the table is already a stacked card
   per row with the label coming from data-label, which has no columns to collide
   and is deliberately left exactly as it was.
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {

	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table {
		width: max-content;
		min-width: 100%;
	}

	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table th {
		padding: 0 14px 10px !important;
	}

	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table td {
		padding: 11px 14px !important;
	}

	/* No dead gutter against the card's own padding at either end. */
	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table th:first-child,
	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table td:first-child {
		padding-left: 0 !important;
	}

	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table th:last-child,
	html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table.vaff-table td:last-child {
		padding-right: 0 !important;
	}
}


/* =============================================================================
   WAVE 3 - PAYOUT-ONBOARDING COMPLETION (Module I)
   -----------------------------------------------------------------------------
   Two blocks, both additive, both scoped to classes this file introduces:

     .vaff-todo    the named list of what Stripe is still waiting for. Measured
                   2026-08-17, four of six live partners were stuck at that card
                   and one of them needed only to tick a terms box, so this has
                   to read as a short checklist rather than as more prose.

     .vaff-inert   the "programme is paused" banner. It reuses .vaff-notice for
                   its box and only adds the amber variant, because a third
                   notice colour invented here would drift from the other two.

   Nothing in vsc-account.css is overridden. Colours are the account shell's own
   custom properties with the same literal fallbacks the rest of this file uses,
   so a page that loads this without the shell still renders legibly.
   ============================================================================= */

.vaff-todo {
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: var(--acct-r, 16px);
	border: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
	background: var(--acct-panel-2, rgba(255, 255, 255, .04));
}

/* The one sentence that says what is missing. Deliberately the heaviest text in
   the card: it is the line that has to survive being skim-read. */
.vaff-todo-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--acct-ink, #EAF2F8);
}

/* Waiting-on-Stripe has no list under it, so the lead is the whole block and
   should not shout - there is nothing for the partner to do about it. */
.vaff-todo--wait .vaff-todo-lead {
	font-weight: 400;
	color: var(--acct-ink-soft, #C7D2DE);
}

.vaff-todo-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.vaff-todo-item {
	position: relative;
	padding: 7px 0 7px 20px;
	border-top: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
}

.vaff-todo-item:first-child {
	border-top: 0;
}

/* An empty checkbox, drawn rather than an image or an emoji: it reads as "not
   done yet" at a glance and costs no request. */
.vaff-todo-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	border: 1.5px solid var(--acct-cyan, #0EA5E9);
	opacity: .75;
}

.vaff-todo-label {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--acct-ink, #EAF2F8);
}

.vaff-todo-hint {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--acct-ink-mute, #8FA0B4);
}

/* Amber, so it is plainly neither the cyan success nor the red error. This is a
   state of the world, not a thing the partner did wrong. */
.vaff-notice--warn {
	background: rgba(245, 158, 11, .10);
	border-color: rgba(245, 158, 11, .38);
	color: #FCD34D;
}

.vaff-inert {
	margin-bottom: 16px;
}

.vaff-inert strong {
	display: block;
	margin-bottom: 3px;
	color: #FCD34D;
}

/* --- Discord card ----------------------------------------------------------
   One anchor, styled as a button. Deliberately NOT an input: the account sheet
   resets every input/select inside .woocommerce-MyAccount-content at (0,4,3)
   with !important on padding and background, and an <a> matches none of those
   selectors. A bare class is enough here for the same reason .vaff-note is - the
   only thing being set is the gap above the button. */
.vaff-cta-row {
	margin: 18px 0 0;
}


/* =============================================================================
   ASK FOR A BETTER CODE
   The panel at the foot of the codes card. A partner asks for a second code on
   a higher commission; the affiliate manager answers. No rate field - see the
   note in vaff-account.php.
   ========================================================================== */

.vaff-req {
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.vaff-req-head {
	margin: 0 0 2px;
	color: var(--acct-ink, #FFFFFF);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.vaff-reqform {
	margin: 14px 0 0;
}

/* Breathing room between stacked label/field pairs. The account sheet spaces a
   .form-row for us; this form is not one, so it does its own. */
.vaff-reqform .vaff-authp-label {
	display: block;
	margin: 16px 0 8px;
}

.vaff-reqform .vaff-authp-label:first-of-type {
	margin-top: 0;
}

/* THE TEXTAREA. Two separate problems, both measured in a real browser rather
   than assumed:

   1. vsc-account.css does not style a textarea AT ALL. Its field reset names
      .input-text, input[type=text|email|tel|password], select and the select2
      box - textarea appears ZERO times in the whole 79KB file. So none of the
      card's field styling reaches this box.

   2. vsc-dark.css DOES, and it wins:
        html.vsc-dark body:not(.home) textarea {
          background: rgba(15,23,42,.4) !important;
          color: rgb(226,232,240) !important;
        }
      That selector is only (0,2,3) - :not(.home) contributes a CLASS - but it
      carries !important, and !important beats ANY non-important declaration
      whatever its specificity. Measured live, the box painted slate-900/40 with
      slate-200 text while the three text inputs directly above it painted
      rgba(255,255,255,.04) with pure white: the same form in two different
      shades of dark.

   So background-color and color are re-asserted here as !important LONGHANDS.
   Longhands because the `background` and `padding` SHORTHANDS are what strip a
   select's chevron and have already broken two controls on this screen;
   !important because at (0,5,3) against (0,2,3) that is the only thing the
   other rule respects. Everything vsc-dark does not touch stays unimportant. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content textarea.vaff-req-why {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 96px;
	margin: 0;
	padding-top: 14px;
	padding-right: 16px;
	padding-bottom: 14px;
	padding-left: 16px;
	background-color: var(--acct-panel-2, rgba(255, 255, 255, .04)) !important;
	background-image: none !important;
	border: 1px solid var(--acct-border, rgba(255, 255, 255, .08));
	border-radius: 10px;
	color: var(--acct-ink, #FFFFFF) !important;
	/* 16px, NOT smaller: under 16px iOS Safari zooms the page on focus. */
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	/* Vertical only. A resizable-in-both-axes box is a horizontal-overflow bug
	   the user can create themselves on a phone. */
	resize: vertical;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content textarea.vaff-req-why:focus {
	outline: none;
	background-color: rgba(255, 255, 255, .07) !important;
	border-color: var(--acct-cyan, #0EA5E9);
	box-shadow: 0 0 0 3px rgba(var(--acct-cyan-rgb, 14, 165, 233), .18);
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content textarea.vaff-req-why::placeholder {
	color: var(--acct-ink-mute, #8FA0B4) !important;
	opacity: 1;
}

/* The handle fields are ordinary text inputs, so the account reset already
   sizes and colours them. All that is added is the gap under each one. */
.vaff-reqform .vaff-req-in {
	margin-bottom: 0;
}

/* Full width on a phone so it is unmissable and comfortably tappable; sized to
   its label from 480px up, matching .vaff-pausebtn exactly. */
.vaff-reqbtn {
	width: 100%;
	margin-top: 18px;
}

@media (min-width: 480px) {

	.vaff-reqbtn {
		width: auto;
	}
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vsmem-checkout.css?ver=4.69.1 ==== */
/*
 * Ventra Membership - checkout modal.
 * File: ventra-sciences-v4/assets/vsmem-checkout.css
 *
 * Scoped entirely under .vsmemco / html.vsmemco-open. Nothing here can reach
 * the membership page's own .vm-* system or any store page: the modal is the
 * only consumer of every selector in this file.
 *
 * Colours are the page's own tokens, restated rather than inherited because
 * this markup is printed in wp_footer and sits outside #vmemSpine.
 * #7DD3FC is the cyan used for TYPE on dark; #0EA5E9 fails AA at small sizes
 * on this background and is never used for text here.
 */

html.vsmemco-open { overflow: hidden; }

.vsmemco { position: fixed; inset: 0; z-index: 2147482000; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.vsmemco[hidden] { display: none; }

.vsmemco-back { position: absolute; inset: 0; background: rgba(4, 10, 18, .78);
  backdrop-filter: blur(3px); }

.vsmemco-box { position: relative; width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #0B1622; border: 1px solid rgba(125, 211, 252, .22); border-radius: 16px;
  padding: 26px 24px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  font-family: Inter, system-ui, -apple-system, sans-serif; color: #E9F1F8; }

.vsmemco-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  background: none; border: 0; color: #9DAFC2; font-size: 26px; line-height: 1;
  cursor: pointer; border-radius: 8px; }
.vsmemco-x:hover { color: #E9F1F8; background: rgba(255, 255, 255, .06); }

.vsmemco-title { margin: 0 0 4px; font-family: Onest, Inter, sans-serif;
  font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #FFF; }
.vsmemco-price { margin: 0 0 16px; font-size: 14px; color: #7DD3FC; font-weight: 500; }

.vsmemco-disc { font-size: 12.5px; line-height: 1.6; color: #C6D4E2;
  background: rgba(125, 211, 252, .06); border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 10px; padding: 12px 13px; margin: 0 0 14px; }

.vsmemco-agree { display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: #D6E2EE; margin: 0 0 16px; cursor: pointer; }
.vsmemco-agree input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto;
  accent-color: #0EA5E9; cursor: pointer; }

.vsmemco-pe { margin: 0 0 14px; min-height: 40px; }

.vsmemco-err:empty { display: none; }
.vsmemco-err { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: #FFB4B4;
  background: rgba(255, 120, 120, .09); border: 1px solid rgba(255, 120, 120, .25);
  border-radius: 8px; padding: 9px 11px; }

.vsmemco-btn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 13px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #0EA5E9; color: #05121F;   /* 6.81:1 - never white on cyan */
  font-family: Onest, Inter, sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; }
.vsmemco-btn:hover { background: #38BDF8; }
.vsmemco-btn:disabled { background: #24405A; color: #8FA5BA; cursor: not-allowed; }

.vsmemco-fine { margin: 11px 0 0; font-size: 11.5px; line-height: 1.5;
  color: #9DAFC2; text-align: center; }

.vsmemco-guest p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: #C6D4E2; }

.vsmemco-done-h { margin: 0 0 6px; font-family: Onest, Inter, sans-serif;
  font-size: 18px; font-weight: 600; color: #7DD3FC; }
.vsmemco-done p { font-size: 13.5px; line-height: 1.6; color: #C6D4E2; }
.vsmemco-done .vsmemco-btn { margin-top: 14px; }

@media (max-width: 480px) {
  .vsmemco { padding: 12px; }
  .vsmemco-box { padding: 22px 18px 18px; border-radius: 14px; }
  .vsmemco-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .vsmemco-back { backdrop-filter: none; }
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/styles.css?ver=3.0.0 ==== */
/* ============================================
   VENTRA SCIENCES — Global Stylesheet
   Modern Aminos-inspired design
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --announcement-bg: #0C4A6E;
  --navy: #0F1D2E;
  --white: #FFFFFF;
  --light-gray: #F1F5F9;
  --teal: #0EA5E9;
  --teal-hover: #0284C7;
  --teal-dark: #0369A1;
  --body-text: #374151;
  --heading: #111827;
  --muted: #94A3B8;
  --border: #E5E7EB;
  --sale-red: #EF4444;
  --star: #FBBF24;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 12px 28px rgba(0,0,0,0.1);
  --nav-height: 68px;
  --announcement-height: 36px;
  --total-header: 104px;
  --transition: 0.25s ease;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-text);
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; outline: none; border: none; background: none; }

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: all var(--transition); white-space: nowrap; border: 2px solid transparent;
}
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14,165,233,0.35); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: var(--white); transform: translateY(-1px); }
.btn-white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover { background: var(--light-gray); transform: translateY(-1px); }
.btn-sm { padding: 9px 20px; font-size: 13px; }
.btn-full { width: 100%; }

/* ===================== ANNOUNCEMENT BAR ===================== */
.announcement-bar {
  background: var(--announcement-bg); color: var(--white); text-align: center;
  padding: 0 16px; font-size: 13px; font-weight: 400;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--announcement-height); display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.3px;
}

/* ===================== NAVIGATION ===================== */
.main-nav {
  background: var(--navy); position: fixed;
  top: var(--announcement-height); left: 0; right: 0; z-index: 1000;
  height: var(--nav-height); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700;
  color: var(--white); letter-spacing: 1.5px; flex-shrink: 0;
}
.nav-logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.nav-logo .accent { color: var(--teal); }

/* Links */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a, .nav-links > .nav-dropdown > a {
  color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500;
  letter-spacing: 0.2px; padding: 8px 0; position: relative; transition: color var(--transition);
}
.nav-links > a:hover, .nav-links > .nav-dropdown:hover > a { color: var(--white); }
.nav-links > a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--teal); transition: width var(--transition);
}
.nav-links > a:hover::after { width: 100%; }

/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown-arrow { font-size: 10px; margin-left: 4px; transition: transform var(--transition); display: inline-block; }
.nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: -16px; background: var(--navy);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 8px 0; min-width: 220px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all var(--transition);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {
  display: block; padding: 10px 20px; font-size: 14px; color: var(--muted) !important;
}
.dropdown-menu a::after { display: none !important; }
.dropdown-menu a:hover { color: var(--white) !important; background: rgba(14,165,233,0.08); padding-left: 24px; }

/* Nav Actions */
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-action-btn {
  color: rgba(255,255,255,0.85); cursor: pointer; position: relative;
  display: flex; align-items: center; padding: 4px; transition: color var(--transition);
}
.nav-action-btn:hover { color: var(--teal); }
.nav-action-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -8px; background: var(--teal); color: var(--white);
  font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile Toggle */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.mobile-toggle span { width: 22px; height: 2px; background: var(--white); transition: all var(--transition); border-radius: 2px; }
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Page spacer */
.page-spacer { height: var(--total-header); }

/* ===================== HERO ===================== */
.hero {
  background: var(--navy); padding: 80px 0 100px; position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(14,165,233,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(14,165,233,0.04) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(14,165,233,0.03) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.dna%7Bfill:none;stroke:rgba(14,165,233,0.06);stroke-width:1.5%7D .helix%7Bfill:none;stroke:rgba(14,165,233,0.04);stroke-width:1%7D .dot%7Bfill:rgba(14,165,233,0.05)%7D .hex%7Bfill:none;stroke:rgba(14,165,233,0.04);stroke-width:1%7D%3C/style%3E%3C/defs%3E%3C!-- DNA double helix --%3E%3Cpath class='dna' d='M50,0 Q80,50 50,100 Q20,150 50,200 Q80,250 50,300 Q20,350 50,400'/%3E%3Cpath class='dna' d='M70,0 Q40,50 70,100 Q100,150 70,200 Q40,250 70,300 Q100,350 70,400'/%3E%3Cline class='helix' x1='50' y1='25' x2='70' y2='25'/%3E%3Cline class='helix' x1='50' y1='75' x2='70' y2='75'/%3E%3Cline class='helix' x1='50' y1='125' x2='70' y2='125'/%3E%3Cline class='helix' x1='50' y1='175' x2='70' y2='175'/%3E%3Cline class='helix' x1='50' y1='225' x2='70' y2='225'/%3E%3Cline class='helix' x1='50' y1='275' x2='70' y2='275'/%3E%3Cline class='helix' x1='50' y1='325' x2='70' y2='325'/%3E%3Cline class='helix' x1='50' y1='375' x2='70' y2='375'/%3E%3C!-- Molecule nodes --%3E%3Ccircle class='dot' cx='200' cy='80' r='3'/%3E%3Ccircle class='dot' cx='230' cy='120' r='2'/%3E%3Ccircle class='dot' cx='180' cy='140' r='2.5'/%3E%3Ccircle class='dot' cx='250' cy='60' r='2'/%3E%3Cline class='helix' x1='200' y1='80' x2='230' y2='120'/%3E%3Cline class='helix' x1='200' y1='80' x2='180' y2='140'/%3E%3Cline class='helix' x1='200' y1='80' x2='250' y2='60'/%3E%3C!-- Hexagon molecule --%3E%3Cpolygon class='hex' points='320,180 345,195 345,225 320,240 295,225 295,195'/%3E%3Cpolygon class='hex' points='345,225 370,240 370,270 345,285 320,270 320,240'/%3E%3Cpolygon class='hex' points='295,225 320,240 320,270 295,285 270,270 270,240'/%3E%3C!-- Scattered atoms --%3E%3Ccircle class='dot' cx='150' cy='300' r='2'/%3E%3Ccircle class='dot' cx='170' cy='280' r='1.5'/%3E%3Ccircle class='dot' cx='140' cy='320' r='2'/%3E%3Cline class='helix' x1='150' y1='300' x2='170' y2='280'/%3E%3Cline class='helix' x1='150' y1='300' x2='140' y2='320'/%3E%3C!-- Right side DNA --%3E%3Cpath class='dna' d='M340,0 Q370,50 340,100 Q310,150 340,200' transform='translate(0,100)' opacity='0.6'/%3E%3Cpath class='dna' d='M360,0 Q330,50 360,100 Q390,150 360,200' transform='translate(0,100)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, 400px 400px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.hero::before {
  content: ''; position: absolute; top: -40%; right: -15%; width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(14,165,233,0.07) 0%, transparent 60%); pointer-events: none;
  animation: pulse-glow 8s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 60%); pointer-events: none;
  animation: pulse-glow 10s ease-in-out infinite alternate-reverse;
}
@keyframes pulse-glow {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.2);
  border-radius: 100px; padding: 8px 18px; font-size: 13px; font-weight: 500; color: var(--teal); margin-bottom: 24px;
}
.hero-badge svg { width: 16px; height: 16px; }
.hero h1 { font-size: 52px; color: var(--white); margin-bottom: 8px; letter-spacing: -1px; line-height: 1.1; }
.hero-subtitle { font-size: 26px; color: var(--muted); font-style: italic; font-weight: 400; margin-bottom: 20px; font-family: 'Inter', sans-serif; }
.hero-desc { color: var(--muted); font-size: 16px; line-height: 1.7; margin-bottom: 32px; max-width: 500px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero Right */
.review-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 28px; margin-bottom: 24px; backdrop-filter: blur(10px);
}
.review-stars { color: var(--star); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card .review-text { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.6; font-style: italic; margin-bottom: 12px; }
.review-card .reviewer { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-badges { display: flex; gap: 16px; }
.stat-badge {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 18px 24px; text-align: center; flex: 1;
}
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: var(--teal); display: block; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; display: block; }

/* ===================== TRUST BAR ===================== */
.trust-bar { padding: 56px 0; border-bottom: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust-item { text-align: center; padding: 12px; }
.trust-item svg { width: 40px; height: 40px; color: var(--teal); margin: 0 auto 14px; }
.trust-item h4 { font-size: 15px; margin-bottom: 6px; }
.trust-item p { font-size: 13px; color: var(--body-text); line-height: 1.5; }

/* ===================== SECTIONS ===================== */
.section { padding: 80px 0; }
.section-alt { background: var(--light-gray); }
.section-dark { background: var(--navy); }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
.section-title { font-size: 34px; }
.section-title .accent { color: var(--teal); }

/* ===================== CATEGORIES ===================== */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-bottom: 48px; }
.category-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 12px; text-align: center; cursor: pointer; transition: all var(--transition);
}
.category-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.category-card svg { width: 44px; height: 44px; color: var(--teal); margin: 0 auto 14px; }
.category-card h4 { font-size: 13px; font-weight: 600; }

/* Info Cards */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card { background: var(--light-gray); border-radius: 12px; padding: 28px; }
.info-card h4 { font-size: 15px; margin-bottom: 8px; color: var(--teal); }
.info-card p { font-size: 14px; color: var(--body-text); line-height: 1.5; }

/* ===================== PRODUCT CARDS ===================== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: all var(--transition); position: relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: transparent; }
.sale-badge {
  position: absolute; top: 12px; left: 12px; background: var(--sale-red); color: var(--white);
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; z-index: 2;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.product-image {
  background: var(--light-gray); padding: 20px;
  display: flex; align-items: center; justify-content: center; min-height: 260px;
  overflow: hidden;
}
.product-image svg { width: 100%; max-width: 110px; height: auto; }
.product-image img {
  width: 100%; height: 220px; object-fit: contain;
  transition: transform 0.4s ease;
}
.product-card:hover .product-image img { transform: scale(1.05); }
.product-info { padding: 20px; }
.product-name { font-size: 15px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.product-price { font-size: 17px; font-weight: 700; color: var(--heading); margin-bottom: 16px; }
.product-price .original-price { text-decoration: line-through; color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 8px; }

/* ===================== QR SECTION ===================== */
.qr-section { padding: 80px 0; }
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.qr-content h2 { font-size: 34px; margin-bottom: 20px; line-height: 1.25; }
.qr-content p { margin-bottom: 24px; line-height: 1.7; }
.qr-visual {
  background: var(--light-gray); border-radius: 16px; padding: 48px; position: relative;
  display: flex; align-items: center; justify-content: center; min-height: 340px;
}
.qr-callout {
  position: absolute; background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 16px; font-size: 12px; font-weight: 600;
  color: var(--heading); box-shadow: var(--card-shadow);
}
.qr-callout.top-right { top: 24px; right: 24px; }
.qr-callout.bottom-left { bottom: 24px; left: 24px; }

/* ===================== DARK BANNERS ===================== */
.dark-banner {
  background: var(--navy); padding: 80px 0; text-align: center; position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(14,165,233,0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(14,165,233,0.04) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cstyle%3E.mol%7Bfill:none;stroke:rgba(14,165,233,0.05);stroke-width:1%7D .nd%7Bfill:rgba(14,165,233,0.04)%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='mol' points='80,50 105,65 105,95 80,110 55,95 55,65'/%3E%3Cpolygon class='mol' points='220,180 245,195 245,225 220,240 195,225 195,195'/%3E%3Ccircle class='nd' cx='150' cy='150' r='2'/%3E%3Ccircle class='nd' cx='130' cy='130' r='1.5'/%3E%3Ccircle class='nd' cx='170' cy='140' r='2'/%3E%3Cline class='mol' x1='150' y1='150' x2='130' y2='130'/%3E%3Cline class='mol' x1='150' y1='150' x2='170' y2='140'/%3E%3Cpath class='mol' d='M20,0 Q40,30 20,60 Q0,90 20,120 Q40,150 20,180 Q0,210 20,240 Q40,270 20,300'/%3E%3Cpath class='mol' d='M35,0 Q15,30 35,60 Q55,90 35,120 Q15,150 35,180 Q55,210 35,240 Q15,270 35,300'/%3E%3C/svg%3E");
  background-size: cover, cover, 300px 300px;
  background-repeat: no-repeat, no-repeat, repeat;
}
.dark-banner h2 { font-size: 44px; color: var(--white); margin-bottom: 16px; line-height: 1.15; }
.dark-banner p { color: var(--muted); font-size: 17px; max-width: 600px; margin: 0 auto; line-height: 1.7; }
.dark-banner .small-label { color: var(--teal); font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; }
.dark-banner .btn { margin-top: 32px; }

/* ===================== FAQ ACCORDION ===================== */
.faq-list { max-width: 100%; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; cursor: pointer; font-size: 15px; font-weight: 600;
  color: var(--heading); width: 100%; text-align: left; transition: color var(--transition);
}
.faq-question:hover { color: var(--teal); }
.faq-icon { font-size: 22px; color: var(--teal); transition: transform var(--transition); flex-shrink: 0; margin-left: 16px; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer p { padding-bottom: 20px; line-height: 1.7; color: var(--body-text); font-size: 14px; }

/* ===================== FOOTER ===================== */
.footer { background: var(--navy); padding: 64px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700;
  color: var(--white); margin-bottom: 16px;
}
.footer-logo .accent { color: var(--teal); }
.footer-desc { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 280px; }
.footer h4 { color: var(--white); font-size: 15px; margin-bottom: 20px; }
.footer-links a { display: block; color: var(--muted); font-size: 14px; padding: 5px 0; transition: color var(--transition); }
.footer-links a:hover { color: var(--teal); }
.footer-subscribe p { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.subscribe-form { display: flex; }
.subscribe-form input {
  flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px 0 0 8px;
  color: var(--white); font-size: 14px;
}
.subscribe-form input::placeholder { color: var(--muted); }
.subscribe-form button {
  padding: 12px 24px; background: var(--teal); color: var(--white);
  border-radius: 0 8px 8px 0; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background var(--transition);
}
.subscribe-form button:hover { background: var(--teal-hover); }
.footer-disclaimer {
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-disclaimer p { color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; max-width: 900px; margin: 0 auto; }
.footer-bottom {
  padding: 20px 0; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { color: var(--muted); font-size: 13px; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: var(--muted); font-size: 13px; transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--teal); }

/* ===================== PAGE HEADER ===================== */
.page-header {
  background: var(--navy); padding: 56px 0; text-align: center; position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 25% 50%, rgba(14,165,233,0.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 40%, rgba(14,165,233,0.04) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:rgba(14,165,233,0.05);stroke-width:1%7D .d%7Bfill:rgba(14,165,233,0.04)%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='s' points='125,30 150,45 150,75 125,90 100,75 100,45'/%3E%3Ccircle class='d' cx='50' cy='180' r='2'/%3E%3Ccircle class='d' cx='70' cy='160' r='1.5'/%3E%3Cline class='s' x1='50' y1='180' x2='70' y2='160'/%3E%3Cpath class='s' d='M200,0 Q220,30 200,60 Q180,90 200,120 Q220,150 200,180 Q180,210 200,240'/%3E%3Cpath class='s' d='M215,0 Q195,30 215,60 Q235,90 215,120 Q195,150 215,180 Q235,210 215,240'/%3E%3C/svg%3E");
  background-size: cover, cover, 250px 250px;
  background-repeat: no-repeat, no-repeat, repeat;
}
.page-header h1 { font-size: 40px; color: var(--white); margin-bottom: 10px; }
.page-header p { color: var(--muted); font-size: 17px; max-width: 580px; margin: 0 auto; }

/* ===================== SHOP PAGE ===================== */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 48px 0 80px; }
.shop-sidebar { position: sticky; top: calc(var(--total-header) + 24px); align-self: start; }
.sidebar-section { margin-bottom: 28px; }
.sidebar-section h3 {
  font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--teal); text-transform: uppercase; letter-spacing: 0.5px;
}
.sidebar-section label {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px;
  color: var(--body-text); cursor: pointer; transition: color var(--transition);
}
.sidebar-section label:hover { color: var(--teal); }
.sidebar-section input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.shop-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.shop-top-bar p { font-size: 14px; color: var(--muted); }
.shop-top-bar select {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; color: var(--body-text); cursor: pointer; background: var(--white);
}
.shop-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ===================== PRODUCT DETAIL ===================== */
.breadcrumb { padding: 16px 0; font-size: 14px; color: var(--muted); }
.breadcrumb a { color: var(--muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb .sep { margin: 0 8px; color: var(--border); }

.product-detail { padding: 20px 0 80px; }
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 60px; align-items: start; }
.product-detail-image {
  background: var(--light-gray); border-radius: 16px; padding: 60px;
  display: flex; align-items: center; justify-content: center; min-height: 480px;
}
.product-detail-image svg { max-width: 180px; width: 100%; }
.product-category-label { color: var(--teal); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.product-detail-info h1 { font-size: 34px; margin-bottom: 12px; }
.product-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.product-stars .stars { color: var(--star); font-size: 16px; letter-spacing: 1px; }
.product-stars .rating-text { font-size: 14px; color: var(--muted); }
.product-detail-price { font-size: 30px; font-weight: 700; color: var(--heading); margin-bottom: 24px; }
.product-detail-price .original-price { text-decoration: line-through; color: var(--muted); font-size: 20px; font-weight: 400; margin-left: 12px; }
.product-detail-desc { font-size: 15px; line-height: 1.7; margin-bottom: 28px; color: var(--body-text); }
.quantity-selector { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.quantity-selector button {
  width: 44px; height: 44px; border: 1px solid var(--border); font-size: 20px; font-weight: 600;
  color: var(--heading); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.quantity-selector button:first-child { border-radius: 8px 0 0 8px; }
.quantity-selector button:last-child { border-radius: 0 8px 8px 0; }
.quantity-selector button:hover { background: var(--light-gray); }
.quantity-selector input {
  width: 56px; height: 44px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center; font-size: 16px; font-weight: 600; color: var(--heading);
}
.add-to-cart-row { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.add-to-cart-row .btn-primary { flex: 1; padding: 16px 32px; font-size: 16px; }
.wishlist-link { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; transition: color var(--transition); }
.wishlist-link:hover { color: var(--teal); }

/* Product Tabs */
.product-tabs { margin-bottom: 60px; }
.tab-nav { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 32px; }
.tab-btn {
  padding: 16px 28px; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition);
}
.tab-btn:hover { color: var(--heading); }
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel p { line-height: 1.8; margin-bottom: 16px; font-size: 15px; }
.tab-panel table { width: 100%; border-collapse: collapse; }
.tab-panel table th, .tab-panel table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tab-panel table th { font-weight: 600; color: var(--heading); background: var(--light-gray); }
.review-item { border-bottom: 1px solid var(--border); padding: 24px 0; }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.review-author { font-weight: 600; font-size: 15px; color: var(--heading); }
.review-date { color: var(--muted); font-size: 13px; }
.review-item .stars { color: var(--star); font-size: 14px; margin-bottom: 8px; }

/* ===================== COA PAGE ===================== */
.coa-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 48px 0 80px; }
.coa-sidebar { position: sticky; top: calc(var(--total-header) + 24px); align-self: start; }
.sidebar-header {
  background: var(--teal); color: var(--white); padding: 16px 20px;
  border-radius: 10px 10px 0 0; font-size: 17px; font-weight: 700; font-family: 'Space Grotesk', sans-serif;
}
.sidebar-body {
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: 16px;
}
.coa-search {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; margin-bottom: 12px; transition: border-color var(--transition);
}
.coa-search:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
.sidebar-cat-list a {
  display: block; padding: 9px 14px; font-size: 14px; color: var(--body-text);
  border-radius: 6px; transition: all var(--transition);
}
.sidebar-cat-list a:hover, .sidebar-cat-list a.active { background: rgba(14,165,233,0.06); color: var(--teal); }

.coa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.coa-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: all var(--transition);
}
.coa-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.coa-card-image {
  background: var(--light-gray); padding: 20px;
  display: flex; align-items: center; justify-content: center; min-height: 150px;
}
.coa-card-image svg { max-width: 70px; width: 100%; }
.coa-card-info { padding: 18px; text-align: center; }
.coa-card-info h4 { font-size: 14px; margin-bottom: 12px; }

/* ===================== FAQ PAGE ===================== */
.faq-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 48px 0 80px; }
.faq-sidebar { position: sticky; top: calc(var(--total-header) + 24px); align-self: start; }
.faq-sidebar-body a {
  display: block; padding: 10px 14px; font-size: 12px; font-weight: 600;
  color: var(--body-text); border-radius: 6px; transition: all var(--transition);
  text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.4;
}
.faq-sidebar-body a:hover, .faq-sidebar-body a.active { background: rgba(14,165,233,0.06); color: var(--teal); }

/* ===================== CONTACT PAGE ===================== */
.contact-section { padding: 60px 0 80px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }
.contact-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px; text-align: center; transition: all var(--transition);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.contact-card svg { width: 44px; height: 44px; color: var(--teal); margin: 0 auto 16px; }
.contact-card h4 { font-size: 17px; margin-bottom: 8px; }
.contact-card p { color: var(--body-text); font-size: 14px; }
.contact-card a { color: var(--teal); font-weight: 500; }

.contact-form-wrap { max-width: 680px; margin: 0 auto; }
.contact-form-wrap h2 { font-size: 30px; text-align: center; margin-bottom: 36px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px; color: var(--heading); transition: border-color var(--transition); background: var(--white);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.form-group textarea { height: 140px; resize: vertical; }

/* ===================== ABOUT PAGE ===================== */
.about-section { padding: 80px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-content h2 { font-size: 30px; margin-bottom: 20px; }
.about-content p { line-height: 1.8; margin-bottom: 16px; font-size: 15px; }
.about-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.about-value-card { background: var(--light-gray); border-radius: 12px; padding: 24px; }
.about-value-card h4 { font-size: 15px; margin-bottom: 6px; color: var(--teal); }
.about-value-card p { font-size: 14px; margin-bottom: 0; line-height: 1.5; }
.about-visual {
  background: var(--light-gray); border-radius: 16px; padding: 60px;
  display: flex; align-items: center; justify-content: center; min-height: 380px;
}
.about-visual svg { max-width: 220px; width: 100%; }

/* ===================== ACCOUNT PAGE ===================== */
.account-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 48px 0 80px; }
.account-sidebar { position: sticky; top: calc(var(--total-header) + 24px); align-self: start; }
.account-sidebar-body a {
  display: block; padding: 11px 16px; font-size: 14px; color: var(--body-text);
  border-radius: 6px; transition: all var(--transition);
}
.account-sidebar-body a:hover, .account-sidebar-body a.active { background: rgba(14,165,233,0.06); color: var(--teal); }
.account-sidebar-body a.logout { color: var(--sale-red); }
.account-sidebar-body a.logout:hover { background: rgba(239,68,68,0.06); }
.account-content h2 { font-size: 26px; margin-bottom: 16px; }
.account-content p { line-height: 1.7; margin-bottom: 14px; }
.account-content .account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.account-stat-card {
  background: var(--light-gray); border-radius: 12px; padding: 24px; text-align: center;
}
.account-stat-card .stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: var(--teal); display: block; }
.account-stat-card .stat-txt { font-size: 13px; color: var(--muted); margin-top: 4px; display: block; }

/* ===================== ANIMATIONS ===================== */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .hero h1 { font-size: 40px; }
  .hero-subtitle { font-size: 22px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .coa-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-height: 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 40px 0 60px; }
  .hero h1 { font-size: 34px; }
  .hero-subtitle { font-size: 20px; }
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column; position: absolute;
    top: var(--nav-height); left: 0; right: 0; background: var(--navy);
    padding: 16px 24px 24px; border-top: 1px solid rgba(255,255,255,0.06); gap: 0;
  }
  .nav-links.mobile-open > a, .nav-links.mobile-open > .nav-dropdown > a {
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .nav-links.mobile-open .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding-left: 16px; background: transparent;
  }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .qr-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 26px; }
  .shop-layout, .coa-layout, .faq-layout, .account-layout { grid-template-columns: 1fr; }
  .shop-sidebar, .coa-sidebar, .faq-sidebar, .account-sidebar { position: static; }
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
  .coa-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .stat-badges { flex-direction: column; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .dark-banner h2 { font-size: 30px; }
  .page-header h1 { font-size: 32px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .hero-subtitle { font-size: 17px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
  .product-grid { grid-template-columns: 1fr; }
  .shop-product-grid { grid-template-columns: 1fr; }
  .coa-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .tab-nav { overflow-x: auto; }
  .tab-btn { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
  .about-values { grid-template-columns: 1fr; }
  .account-content .account-stats { grid-template-columns: 1fr; }
}

/* ============================================
   PREMIUM ANIMATIONS + STOCK PHOTO ENHANCEMENTS
   Added 2026-04-20
   ============================================ */

/* --- Hero Background Image --- */
.hero { position: relative; min-height: 720px; }
.hero-bg-image {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,29,46,0.92), rgba(15,29,46,0.78)),
    url('https://images.unsplash.com/photo-1582719508461-905c673771fd?w=1920&q=80');
  background-size: cover; background-position: center;
  z-index: 0;
}
.hero .container { position: relative; z-index: 2; }

/* --- Floating Particles in Hero --- */
.hero-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  overflow: hidden;
}
.hero-particles span {
  position: absolute; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: 0.4;
  animation: float-up linear infinite;
}
.hero-particles span:nth-child(1) { left: 10%; animation-duration: 18s; animation-delay: 0s; width: 4px; height: 4px; }
.hero-particles span:nth-child(2) { left: 20%; animation-duration: 22s; animation-delay: 3s; }
.hero-particles span:nth-child(3) { left: 35%; animation-duration: 16s; animation-delay: 1s; width: 3px; height: 3px; }
.hero-particles span:nth-child(4) { left: 50%; animation-duration: 24s; animation-delay: 5s; width: 5px; height: 5px; }
.hero-particles span:nth-child(5) { left: 65%; animation-duration: 20s; animation-delay: 2s; }
.hero-particles span:nth-child(6) { left: 75%; animation-duration: 17s; animation-delay: 6s; width: 3px; height: 3px; }
.hero-particles span:nth-child(7) { left: 85%; animation-duration: 21s; animation-delay: 4s; }
.hero-particles span:nth-child(8) { left: 95%; animation-duration: 19s; animation-delay: 0.5s; width: 4px; height: 4px; }
.hero-particles span:nth-child(9) { left: 15%; animation-duration: 25s; animation-delay: 8s; width: 2px; height: 2px; }
.hero-particles span:nth-child(10) { left: 55%; animation-duration: 15s; animation-delay: 2.5s; width: 3px; height: 3px; }
@keyframes float-up {
  0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* --- Hero Image Frame (Lab Photo) --- */
.hero-image-frame {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(14,165,233,0.2);
  margin-bottom: 24px;
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.hero-image-frame:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.hero-image-frame img {
  width: 100%; height: 320px; object-fit: cover; display: block;
  transition: transform 0.8s ease;
}
.hero-image-frame:hover img { transform: scale(1.05); }
.hero-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(14,165,233,0.15) 50%, transparent 100%);
  pointer-events: none;
}

/* --- Floating Badges on Hero Image --- */
.floating-badge {
  position: absolute;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  border-radius: 12px; padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: float-gentle 4s ease-in-out infinite;
}
.floating-badge-1 { top: 20px; left: -20px; animation-delay: 0s; }
.floating-badge-2 { bottom: 30px; right: -20px; animation-delay: 2s; }
.fb-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(14,165,233,0.1);
  display: flex; align-items: center; justify-content: center;
}
.fb-icon svg { width: 20px; height: 20px; }
.fb-title { font-size: 14px; font-weight: 700; color: var(--heading); line-height: 1.2; }
.fb-sub { font-size: 11px; color: var(--muted); }
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --- Gradient Text --- */
.gradient-text {
  background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Button Glow Effect --- */
.btn-glow {
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(14,165,233,0.4);
}
.btn-glow::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}
.btn-glow:hover::before { left: 100%; }
.btn-glow:hover {
  box-shadow: 0 8px 30px rgba(14,165,233,0.6);
  transform: translateY(-2px);
}

/* --- Fade/Slide Animations --- */
.animate-fade-up, .animate-fade-left, .animate-slide-down {
  opacity: 0; animation: none;
}
.animate-fade-up { transform: translateY(30px); animation: fadeUp 0.9s ease-out forwards; }
.animate-fade-left { transform: translateX(40px); animation: fadeLeft 1.1s ease-out forwards; }
.animate-slide-down { transform: translateY(-20px); animation: slideDown 0.7s ease-out forwards; }
.animate-delay-1 { animation-delay: 0.15s; }
.animate-delay-2 { animation-delay: 0.3s; }
.animate-delay-3 { animation-delay: 0.45s; }
.animate-delay-4 { animation-delay: 0.6s; }
.animate-delay-5 { animation-delay: 0.75s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideDown {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Showcase Section (Lab Photo + Content) --- */
.showcase-section {
  padding: 100px 0; background: var(--white);
  position: relative; overflow: hidden;
}
.showcase-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.showcase-image {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.showcase-image img {
  width: 100%; height: 560px; object-fit: cover; display: block;
  transition: transform 0.8s ease;
}
.showcase-image:hover img { transform: scale(1.04); }
.showcase-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(14,165,233,0.1) 100%);
}
.showcase-content .small-label {
  display: inline-block; color: var(--teal); font-size: 13px;
  font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 16px;
}
.showcase-content h2 { font-size: 40px; line-height: 1.15; margin-bottom: 20px; }
.showcase-content p { font-size: 16px; line-height: 1.7; color: var(--body-text); margin-bottom: 24px; }
.showcase-list { list-style: none; padding: 0; margin: 0 0 32px 0; }
.showcase-list li {
  padding: 10px 0; font-size: 15px; color: var(--body-text);
  display: flex; align-items: center; gap: 12px;
}
.showcase-list .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(14,165,233,0.12); color: var(--teal);
  font-weight: 700; flex-shrink: 0;
}

/* --- Product Card Enhanced Animations --- */
.product-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.product-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14,165,233,0.1), transparent);
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
.product-card:hover::before { opacity: 1; }
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(14,165,233,0.15), 0 0 0 1px rgba(14,165,233,0.1);
}

/* --- Stat Counter Animation Base --- */
.stat-value[data-counter] { font-variant-numeric: tabular-nums; }

/* --- Scroll Reveal System --- */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* --- Trust bar items hover --- */
.trust-item {
  transition: transform 0.3s ease;
}
.trust-item:hover { transform: translateY(-4px); }
.trust-item svg { transition: transform 0.4s ease, color 0.3s ease; }
.trust-item:hover svg { transform: scale(1.1); color: var(--teal); }

/* --- Category card lift --- */
.category-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(14,165,233,0.2);
  border-color: var(--teal);
}
.category-card svg { transition: transform 0.4s ease; }
.category-card:hover svg { transform: scale(1.15) rotate(-5deg); }

/* --- Responsive for showcase --- */
@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
  .showcase-image img { height: 380px; }
  .showcase-content h2 { font-size: 30px; }
  .floating-badge-1 { top: 10px; left: 10px; }
  .floating-badge-2 { bottom: 10px; right: 10px; }
  .hero-image-frame { transform: none; }
  .hero-image-frame img { height: 240px; }
}

/* --- Smooth page entry --- */
body { animation: pageIn 0.5s ease-out; }
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   HERO DNA DARK THEME + LIGHT MOTION
   Added 2026-04-20 (v2 - DNA rebuild)
   ============================================ */

.hero-dna {
  position: relative;
  min-height: 760px;
  background: #0a1628;
  color: #E5F3FF;
  overflow: hidden;
  isolation: isolate;
}
/* kill the old hero-bg-image layer */
.hero-dna .hero-bg-image { display: none; }

/* Deep gradient base */
.hero-gradient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 20% 30%, rgba(14,165,233,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 1000px 500px at 80% 70%, rgba(56,189,248,0.25) 0%, transparent 60%),
    linear-gradient(180deg, #0a1628 0%, #0f2540 40%, #0a1628 100%);
  z-index: 1;
}

/* Hexagon / molecular grid */
.molecular-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(60deg, rgba(56,189,248,0.08) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.08) 75.5%),
    linear-gradient(-60deg, rgba(56,189,248,0.08) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.08) 75.5%);
  background-size: 80px 140px;
  opacity: 0.35;
  z-index: 2;
  animation: grid-drift 60s linear infinite;
}
@keyframes grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 80px 140px, -80px 140px; }
}

/* DNA Strands */
.dna-strand {
  position: absolute;
  width: 260px;
  height: 130%;
  top: -15%;
  z-index: 3;
  opacity: 0.85;
}
.dna-strand-left { left: -40px; animation: dna-rotate-y 20s linear infinite; transform-origin: center; }
.dna-strand-right { right: -40px; animation: dna-rotate-y-reverse 24s linear infinite; transform-origin: center; }

@keyframes dna-rotate-y {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
@keyframes dna-rotate-y-reverse {
  0% { transform: scaleX(-1); }
  50% { transform: scaleX(1); }
  100% { transform: scaleX(-1); }
}

/* DNA rung glow pulse */
.dna-rungs circle {
  animation: node-pulse 3s ease-in-out infinite;
}
.dna-rungs circle:nth-child(odd) { animation-delay: 0s; }
.dna-rungs circle:nth-child(even) { animation-delay: 1.5s; }
.dna-rungs-offset circle { animation-delay: 0.75s; }

@keyframes node-pulse {
  0%, 100% { r: 2; opacity: 0.5; filter: drop-shadow(0 0 2px #38BDF8); }
  50% { r: 4; opacity: 1; filter: drop-shadow(0 0 8px #38BDF8) drop-shadow(0 0 12px #38BDF8); }
}

/* DNA strand flowing glow */
.dna-path-a, .dna-path-b {
  stroke-dasharray: 100 50;
  animation: dna-flow 8s linear infinite;
}
.dna-path-b { animation-direction: reverse; animation-duration: 10s; }
@keyframes dna-flow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}

/* Floating light orbs */
.light-orbs {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; overflow: hidden;
}
.orb {
  position: absolute; display: block;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0 0 40px currentColor, 0 0 80px currentColor;
}
.orb-1 { width: 8px; height: 8px; background: #38BDF8; color: #38BDF8; top: 15%; left: 25%; animation: orb-drift-1 14s ease-in-out infinite; }
.orb-2 { width: 12px; height: 12px; background: #7DD3FC; color: #38BDF8; top: 60%; left: 35%; animation: orb-drift-2 18s ease-in-out infinite; }
.orb-3 { width: 6px; height: 6px; background: #0EA5E9; color: #0EA5E9; top: 30%; right: 28%; animation: orb-drift-3 12s ease-in-out infinite; }
.orb-4 { width: 10px; height: 10px; background: #38BDF8; color: #38BDF8; bottom: 20%; right: 32%; animation: orb-drift-4 16s ease-in-out infinite; }
.orb-5 { width: 5px; height: 5px; background: #7DD3FC; color: #7DD3FC; top: 45%; left: 50%; animation: orb-drift-5 20s ease-in-out infinite; }
.orb-6 { width: 14px; height: 14px; background: #0EA5E9; color: #0EA5E9; top: 75%; left: 20%; animation: orb-drift-6 22s ease-in-out infinite; }

@keyframes orb-drift-1 { 0%,100% { transform: translate(0,0); opacity:0.6; } 50% { transform: translate(60px,-40px); opacity:1; } }
@keyframes orb-drift-2 { 0%,100% { transform: translate(0,0); opacity:0.4; } 50% { transform: translate(-80px,30px); opacity:0.9; } }
@keyframes orb-drift-3 { 0%,100% { transform: translate(0,0); opacity:0.7; } 50% { transform: translate(40px,50px); opacity:1; } }
@keyframes orb-drift-4 { 0%,100% { transform: translate(0,0); opacity:0.5; } 50% { transform: translate(-50px,-60px); opacity:0.9; } }
@keyframes orb-drift-5 { 0%,100% { transform: translate(0,0); opacity:0.3; } 50% { transform: translate(70px,40px); opacity:0.7; } }
@keyframes orb-drift-6 { 0%,100% { transform: translate(0,0); opacity:0.6; } 50% { transform: translate(-40px,-70px); opacity:1; } }

/* Traveling light streaks */
.light-streaks {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; overflow: hidden;
}
.streak {
  position: absolute;
  width: 200px; height: 2px;
  background: linear-gradient(90deg, transparent, #38BDF8, transparent);
  filter: blur(1px);
  opacity: 0;
}
.streak-1 { top: 25%; animation: streak-travel 6s ease-in-out infinite; animation-delay: 0s; }
.streak-2 { top: 55%; animation: streak-travel 7s ease-in-out infinite; animation-delay: 2.5s; }
.streak-3 { top: 80%; animation: streak-travel 8s ease-in-out infinite; animation-delay: 4s; }
@keyframes streak-travel {
  0% { left: -220px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Hero text colors adapted for dark theme */
.hero-dna h1, .hero-dna .hero-subtitle { color: #F0F9FF; }
.hero-dna .hero-desc { color: rgba(224,242,254,0.75); }
.hero-h1-dna {
  font-size: 68px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  text-shadow: 0 4px 30px rgba(14,165,233,0.3);
}
.hero-dna .gradient-text {
  background: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 50%, #38BDF8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-dna .hero-badge {
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.35);
  color: #7DD3FC;
  backdrop-filter: blur(10px);
}

/* Outline light button */
.btn-outline-light {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(56,189,248,0.5);
  color: #7DD3FC;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.btn-outline-light:hover {
  background: rgba(56,189,248,0.15);
  border-color: #38BDF8;
  box-shadow: 0 0 30px rgba(56,189,248,0.4);
  transform: translateY(-2px);
}

/* Hero trust row */
.hero-trust-row {
  display: flex; align-items: center; gap: 28px;
  margin-top: 36px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  max-width: 520px;
}
.htr-item { display: flex; flex-direction: column; gap: 4px; }
.htr-item strong {
  font-size: 22px; font-weight: 700;
  color: #38BDF8;
  text-shadow: 0 0 20px rgba(56,189,248,0.5);
}
.htr-item span { font-size: 12px; color: rgba(224,242,254,0.65); text-transform: uppercase; letter-spacing: 1.5px; }
.htr-divider { width: 1px; height: 36px; background: rgba(56,189,248,0.25); }

/* Dark review card */
.review-card-dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(56,189,248,0.25);
  backdrop-filter: blur(16px);
  padding: 28px 32px;
  border-radius: 16px;
  color: #F0F9FF;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.1);
  position: relative;
  overflow: hidden;
}
.review-card-dark::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #38BDF8, transparent);
}
.review-card-dark .review-stars { color: #FCD34D; font-size: 18px; margin-bottom: 14px; }
.review-card-dark .review-text { color: #F0F9FF; font-size: 16px; line-height: 1.6; margin-bottom: 14px; font-style: italic; }
.review-card-dark .reviewer { color: rgba(224,242,254,0.65); font-size: 13px; }

/* DNA stat cards (dark) */
.stat-cards-dna {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.stat-card-dna {
  padding: 22px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 12px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.stat-card-dna::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.12), transparent);
  opacity: 0; transition: opacity 0.3s ease;
}
.stat-card-dna:hover {
  transform: translateY(-4px);
  border-color: #38BDF8;
  box-shadow: 0 10px 40px rgba(56,189,248,0.25);
}
.stat-card-dna:hover::before { opacity: 1; }
.stat-card-dna .stat-num {
  font-size: 32px; font-weight: 700;
  color: #38BDF8;
  text-shadow: 0 0 20px rgba(56,189,248,0.5);
  font-variant-numeric: tabular-nums;
}
.stat-card-dna .stat-lbl {
  font-size: 11px; color: rgba(224,242,254,0.7);
  text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px;
}

/* Bottom fade into next section */
.hero-bottom-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-cream) 100%);
  z-index: 6; pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-dna { min-height: auto; padding: 60px 0 100px; }
  .hero-h1-dna { font-size: 44px; }
  .hero-trust-row { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .htr-divider { display: none; }
  .dna-strand { width: 140px; opacity: 0.5; }
  .stat-cards-dna { gap: 8px; }
  .stat-card-dna { padding: 14px 8px; }
  .stat-card-dna .stat-num { font-size: 22px; }
}

/* ============================================
   SHOWCASE IMMERSIVE (Lab background section)
   ============================================ */
.showcase-immersive {
  position: relative;
  padding: 140px 0 160px;
  background: #0a1628;
  color: #F0F9FF;
  overflow: hidden;
  isolation: isolate;
}
.showcase-bg {
  position: absolute; inset: 0; z-index: 1;
}
.showcase-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.2) brightness(0.55);
  animation: slow-zoom 30s ease-in-out infinite alternate;
}
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.showcase-bg-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,22,40,0.95) 0%, rgba(10,22,40,0.75) 40%, rgba(10,22,40,0.85) 100%),
    radial-gradient(ellipse at center, rgba(14,165,233,0.15) 0%, transparent 70%);
}
.showcase-container { position: relative; z-index: 2; }
.showcase-content-centered { max-width: 900px; margin: 0 auto; text-align: center; }
.small-label-light {
  display: inline-block;
  color: #7DD3FC;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.showcase-h2 {
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #F0F9FF;
  letter-spacing: -1.5px;
}
.showcase-sub {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(224,242,254,0.75);
  max-width: 680px;
  margin: 0 auto 56px;
}
.showcase-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.step-card {
  padding: 32px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  text-align: left;
  transition: all 0.4s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  border-color: #38BDF8;
  box-shadow: 0 20px 40px rgba(56,189,248,0.2);
}
.step-num {
  font-size: 14px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.step-card h4 {
  font-size: 18px;
  color: #F0F9FF;
  margin-bottom: 10px;
  font-weight: 600;
}
.step-card p {
  font-size: 14px;
  color: rgba(224,242,254,0.7);
  line-height: 1.6;
}
.showcase-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .showcase-h2 { font-size: 34px; }
  .showcase-steps { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================
   PEPTIDE CATEGORY CARDS (replaces mixed categories)
   ============================================ */
.peptide-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.peptide-cat-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px 28px;
  background: #FFFFFF;
  border: 1px solid rgba(14,165,233,0.12);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.peptide-cat-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, #0EA5E9, #38BDF8);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s ease;
}
.peptide-cat-card:hover::before { transform: scaleY(1); }
.peptide-cat-card:hover {
  transform: translateY(-6px);
  border-color: #0EA5E9;
  box-shadow: 0 20px 40px rgba(14,165,233,0.15);
}
.pcc-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(14,165,233,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  transition: all 0.3s ease;
}
.peptide-cat-card:hover .pcc-icon {
  background: rgba(14,165,233,0.15);
  transform: scale(1.08);
}
.pcc-icon svg { width: 28px; height: 28px; }
.peptide-cat-card h4 {
  font-size: 17px;
  color: var(--heading);
  font-weight: 600;
  margin: 0;
}
.peptide-cat-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .peptide-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .peptide-cat-card { padding: 20px 18px; }
}
@media (max-width: 520px) {
  .peptide-cat-grid { grid-template-columns: 1fr; }
}

/* ============================================
   MODERN-STYLE PEPTIDE LABEL WITH QR CODE
   Mimics Modern Amines / Ventra label design
   ============================================ */
.vs-label {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.vs-label::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(226,232,240,0.5), transparent 60%);
  z-index: 1;
}
.vial-wrapper {
  position: relative;
  width: 62%;
  height: 90%;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 12px 24px rgba(15,23,42,0.18));
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .vial-wrapper { transform: translateY(-4px) scale(1.03); }

.vial-svg {
  width: 100%; height: 100%;
}

/* Spotlight/shadow under the vial */
.vial-shadow {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(15,23,42,0.18), transparent 70%);
  filter: blur(6px);
  z-index: 1;
}

/* QR Badge overlay */
.qr-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: #FFFFFF;
  border: 1px solid rgba(14,165,233,0.3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.product-card:hover .qr-badge { transform: scale(1.15) rotate(3deg); }
.qr-badge svg { width: 24px; height: 24px; }

/* COA Badge */
.coa-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  background: rgba(14,165,233,0.95);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 4px;
  z-index: 3;
  display: flex; align-items: center; gap: 4px;
}
.coa-badge svg { width: 10px; height: 10px; }

/* ============================================
   HERO CLEAN v3 — matches DNA/hexagon mockup exactly
   Subtle motion, not over-done, flows into trust bar
   ============================================ */
.hero-clean {
  position: relative;
  min-height: 640px;
  padding: 90px 0 70px;
  background: #0A1628;
  color: #F0F9FF;
  overflow: hidden;
  isolation: isolate;
}

/* Base gradient — deep navy that lightens near bottom for smooth transition */
.hc-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 500px at 15% 40%, rgba(56,189,248,0.18) 0%, transparent 60%),
    radial-gradient(900px 400px at 85% 30%, rgba(14,165,233,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0A1628 0%, #0F2540 60%, #142E52 100%);
}

/* Hexagon mesh — bottom-left corner, very subtle */
.hc-hex {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(60deg, rgba(56,189,248,0.07) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.07) 75.5%),
    linear-gradient(-60deg, rgba(56,189,248,0.07) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.07) 75.5%);
  background-size: 60px 104px;
  background-position: 0 0, 0 0;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 20% 80%, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 80%, black 10%, transparent 60%);
}

/* DNA helix — right side, subtle, uses real DNA reference image */
.hc-dna {
  position: absolute;
  right: -80px; top: -40px; bottom: -40px;
  width: 45%;
  z-index: 1;
  background-image: url('https://images.unsplash.com/photo-1628595351029-c2bf17511435?w=1400&q=80');
  background-size: cover;
  background-position: center right;
  opacity: 0.35;
  mask-image: linear-gradient(to left, black 20%, transparent 90%);
  -webkit-mask-image: linear-gradient(to left, black 20%, transparent 90%);
  filter: hue-rotate(-10deg) saturate(1.3) brightness(1.1);
  animation: hc-dna-drift 30s ease-in-out infinite alternate;
}
@keyframes hc-dna-drift {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

/* Scattered glowing atoms (very minimal) */
.hc-atoms { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.atom {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%; background: #38BDF8;
  box-shadow: 0 0 10px #38BDF8, 0 0 20px rgba(56,189,248,0.5);
  opacity: 0;
  animation: atom-pulse 6s ease-in-out infinite;
}
.a1 { top: 18%; left: 10%; animation-delay: 0s; }
.a2 { top: 35%; left: 32%; animation-delay: 1.5s; width: 3px; height: 3px; }
.a3 { top: 60%; left: 18%; animation-delay: 3s; }
.a4 { top: 45%; left: 55%; animation-delay: 4.5s; width: 2px; height: 2px; }
.a5 { top: 75%; left: 42%; animation-delay: 2s; width: 3px; height: 3px; }
.a6 { top: 25%; left: 65%; animation-delay: 3.5s; width: 2px; height: 2px; }
.a7 { top: 55%; left: 75%; animation-delay: 5s; }
@keyframes atom-pulse {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* Content layout */
.hero-clean .container { position: relative; z-index: 3; }
.hc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 999px;
  color: #7DD3FC;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
  animation: hc-fade-in 0.8s ease-out;
}

.hc-h1 {
  font-size: 62px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 16px 0;
  animation: hc-fade-in 0.9s ease-out 0.1s both;
}
.hc-subtitle {
  font-size: 24px;
  font-style: italic;
  color: #CBD5E1;
  margin: 0 0 20px 0;
  font-weight: 400;
  animation: hc-fade-in 0.9s ease-out 0.2s both;
}
.hc-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(203,213,225,0.85);
  margin: 0 0 32px 0;
  max-width: 480px;
  animation: hc-fade-in 0.9s ease-out 0.3s both;
}
.hc-buttons { display: flex; gap: 14px; flex-wrap: wrap; animation: hc-fade-in 0.9s ease-out 0.4s both; }
.hc-buttons .btn-primary {
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  background: #0EA5E9; color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(14,165,233,0.35);
  transition: all 0.25s ease;
}
.hc-buttons .btn-primary:hover {
  background: #0284C7;
  box-shadow: 0 6px 30px rgba(14,165,233,0.5);
  transform: translateY(-2px);
}

.btn-clean-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(56,189,248,0.5);
  color: #7DD3FC;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-clean-outline:hover {
  background: rgba(56,189,248,0.1);
  border-color: #38BDF8;
  color: #F0F9FF;
  transform: translateY(-2px);
}

/* Right column: review + stats */
.hc-right { display: flex; flex-direction: column; gap: 18px; animation: hc-fade-in 1s ease-out 0.3s both; }

.hc-review {
  background: rgba(14,30,54,0.85);
  border: 1px solid rgba(56,189,248,0.2);
  backdrop-filter: blur(16px);
  padding: 26px 28px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.hc-stars { color: #FCD34D; font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.hc-quote { font-size: 15px; line-height: 1.55; color: #F0F9FF; margin: 0 0 10px; font-style: italic; }
.hc-author { font-size: 13px; color: rgba(203,213,225,0.7); }

.hc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hc-stat {
  background: rgba(14,30,54,0.85);
  border: 1px solid rgba(56,189,248,0.2);
  backdrop-filter: blur(16px);
  padding: 22px 14px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}
.hc-stat:hover { border-color: rgba(56,189,248,0.5); transform: translateY(-3px); }
.hc-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #38BDF8;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.hc-stat span {
  font-size: 11px;
  color: rgba(203,213,225,0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@keyframes hc-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .hero-clean { padding: 60px 0 50px; min-height: auto; }
  .hc-grid { grid-template-columns: 1fr; gap: 40px; }
  .hc-h1 { font-size: 42px; }
  .hc-subtitle { font-size: 18px; }
  .hc-dna { width: 60%; opacity: 0.15; }
}

/* Hide old hero scaffolding so nothing conflicts */
.hero-v2, .hero-dna:not(.hero-clean) { display: none !important; }
.hero-bg-dna, .hero-dark-overlay, .dna-strand, .molecular-grid,
.light-orbs, .light-streaks, .hero-bottom-fade { display: none !important; }

/* Make trust-bar land smoothly after hero (light bg) */
.trust-bar {
  background: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,0.04);
  padding: 50px 0;
}

/* ============================================
   LAB SHOWCASE — "Verified Transparent Trusted"
   Full-bleed lab photo, clean centered content
   ============================================ */
.lab-showcase {
  position: relative;
  padding: 140px 0 140px;
  color: #F0F9FF;
  overflow: hidden;
  isolation: isolate;
}
.ls-bg { position: absolute; inset: 0; z-index: 0; }
.ls-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.45) saturate(1.05);
  animation: ls-slow-zoom 40s ease-in-out infinite alternate;
}
@keyframes ls-slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.ls-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.35) 50%, rgba(10,22,40,0.7) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(10,22,40,0.6) 100%);
}
.ls-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }

.ls-top { margin-bottom: 72px; }
.ls-top-h2 {
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: #FFFFFF;
  margin: 0 0 28px 0;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.ls-top-p {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(241,245,249,0.85);
  max-width: 620px;
  margin: 0 auto;
  font-weight: 300;
}

.ls-divider {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-bottom: 72px;
}
.ls-line { flex: 0 0 80px; height: 1px; background: rgba(241,245,249,0.35); }
.ls-divider-text {
  font-size: 12px;
  letter-spacing: 3.5px;
  color: rgba(241,245,249,0.7);
  font-weight: 500;
  text-transform: uppercase;
}

.ls-bottom-h2 {
  font-size: 52px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
  color: #FFFFFF;
  margin: 0 0 22px 0;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.ls-bottom-p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(241,245,249,0.85);
  max-width: 580px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.ls-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 42px;
  background: #FFFFFF;
  color: #0A1628;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.ls-cta:hover {
  background: #0EA5E9;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(14,165,233,0.5);
}

@media (max-width: 900px) {
  .lab-showcase { padding: 80px 0; }
  .ls-top-h2 { font-size: 38px; }
  .ls-bottom-h2 { font-size: 32px; }
  .ls-divider { gap: 12px; }
  .ls-line { flex: 0 0 40px; }
}

/* Kill the old showcase styles so they don't conflict */
.showcase-section.showcase-immersive { display: none !important; }

/* ============================================
   INNER CIRCLE SECTION (newsletter signup)
   ============================================ */
.inner-circle {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(1000px 500px at 20% 40%, rgba(14,165,233,0.15) 0%, transparent 60%),
    radial-gradient(800px 400px at 80% 60%, rgba(56,189,248,0.1) 0%, transparent 60%),
    linear-gradient(135deg, #0A1628 0%, #0F2540 100%);
  color: #F0F9FF;
  overflow: hidden;
}
.inner-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(60deg, rgba(56,189,248,0.05) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.05) 75.5%),
    linear-gradient(-60deg, rgba(56,189,248,0.05) 25%, transparent 25.5%, transparent 75%, rgba(56,189,248,0.05) 75.5%);
  background-size: 70px 120px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.ic-container {
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
  text-align: center;
}
.ic-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 999px;
  color: #7DD3FC;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.ic-h2 {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  color: #FFFFFF;
  margin: 0 0 18px 0;
}
.ic-h2 .accent-glow {
  background: linear-gradient(135deg, #38BDF8, #7DD3FC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ic-p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(203,213,225,0.85);
  max-width: 540px;
  margin: 0 auto 36px;
}

.ic-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  text-align: left;
}
.ic-perk {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}
.ic-perk svg { flex-shrink: 0; width: 20px; height: 20px; color: #38BDF8; margin-top: 2px; }
.ic-perk-title { font-size: 13px; font-weight: 600; color: #F0F9FF; margin-bottom: 2px; }
.ic-perk-sub { font-size: 12px; color: rgba(203,213,225,0.65); line-height: 1.4; }

.ic-form {
  display: flex; gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease;
}
.ic-form:focus-within { border-color: #38BDF8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.ic-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 18px;
  color: #F0F9FF;
  font-size: 14px;
  font-family: inherit;
}
.ic-input::placeholder { color: rgba(203,213,225,0.5); }
.ic-submit {
  padding: 12px 26px;
  background: #0EA5E9;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}
.ic-submit:hover { background: #0284C7; transform: translateX(2px); }

.ic-fine {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(203,213,225,0.55);
}

@media (max-width: 720px) {
  .ic-h2 { font-size: 32px; }
  .ic-perks { grid-template-columns: 1fr; }
  .ic-form { flex-direction: column; border-radius: 14px; padding: 10px; }
  .ic-submit { width: 100%; border-radius: 10px; padding: 14px; }
}

/* ============================================
   REBUILD v4 — Match the new reference design
   Dark nav + trust strip + centered hero
   Molecular network pattern across all dark sections
   Uses real Ventra logo SVG
   ============================================ */

/* Hide the old announcement bar / page spacer from prior build */
.announcement-bar { display: none !important; }
.page-spacer { display: none !important; }

/* ---- Dark NAV ---- */
.main-nav-dark {
  position: sticky; top: 0; z-index: 100;
  background: #061526;
  border-bottom: 1px solid rgba(56,189,248,0.08);
  padding: 18px 0;
  backdrop-filter: blur(12px);
}
.main-nav-dark .nav-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.nav-logo-img { display: inline-flex; align-items: center; color: #FFFFFF; text-decoration: none; }
.nav-logo-img img { height: 44px; width: auto; filter: brightness(0) invert(1); }

.main-nav-dark .nav-links {
  display: flex; gap: 40px; flex: 1; justify-content: center;
}
.main-nav-dark .nav-links a {
  color: #E5F3FF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: all 0.25s ease;
  position: relative;
}
.main-nav-dark .nav-links a:hover { color: #38BDF8; }
.main-nav-dark .nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: #38BDF8; transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s ease;
}
.main-nav-dark .nav-links a:hover::after { transform: scaleX(1); }

.main-nav-dark .nav-actions { display: flex; gap: 18px; align-items: center; }
.main-nav-dark .nav-action-btn {
  width: 38px; height: 38px;
  background: transparent; border: none;
  color: #E5F3FF;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.main-nav-dark .nav-action-btn:hover { background: rgba(56,189,248,0.1); color: #38BDF8; }
.main-nav-dark .nav-action-btn svg { width: 20px; height: 20px; }

/* ---- TRUST STRIP ---- */
.trust-strip {
  background: #0A1A2E;
  border-bottom: 1px solid rgba(56,189,248,0.12);
  padding: 14px 0;
}
.ts-grid {
  display: flex; align-items: center; justify-content: space-around;
  gap: 24px; flex-wrap: wrap;
}
.ts-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: #E5F3FF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ts-item svg { width: 18px; height: 18px; color: #38BDF8; flex-shrink: 0; }
.ts-item strong { color: #38BDF8; font-weight: 700; margin-right: 2px; }

/* ---- HERO V3 — centered, molecular bg, big title ---- */
.hero-v3 {
  position: relative;
  background: #061526;
  color: #F0F9FF;
  padding: 130px 0 180px;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
}
.hero-v3::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 1200px 700px at 20% 30%, rgba(14,80,140,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 1000px 600px at 85% 70%, rgba(6,80,140,0.4) 0%, transparent 60%),
    linear-gradient(180deg, #061526 0%, #0B2142 50%, #081B35 100%);
}

.mol-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mol-svg { width: 100%; height: 100%; }
.mol-nodes circle { animation: mol-twinkle 4s ease-in-out infinite; transform-origin: center; }
.mol-nodes circle:nth-child(3n) { animation-delay: 1s; }
.mol-nodes circle:nth-child(3n+1) { animation-delay: 2s; }
.mol-nodes circle:nth-child(3n+2) { animation-delay: 3s; }
@keyframes mol-twinkle {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 2px #38BDF8); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px #38BDF8) drop-shadow(0 0 14px #38BDF8); }
}

.mol-atoms { position: absolute; inset: 0; pointer-events: none; }
.mol-atoms span {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 8px #38BDF8, 0 0 20px rgba(56,189,248,0.6);
  opacity: 0;
  animation: atom-float 10s ease-in-out infinite;
}
.mol-atoms span:nth-child(1) { top: 15%; left: 12%; animation-delay: 0s; }
.mol-atoms span:nth-child(2) { top: 30%; left: 78%; animation-delay: 1.5s; width: 4px; height: 4px; }
.mol-atoms span:nth-child(3) { top: 60%; left: 22%; animation-delay: 3s; }
.mol-atoms span:nth-child(4) { top: 45%; left: 55%; animation-delay: 4.5s; width: 2px; height: 2px; }
.mol-atoms span:nth-child(5) { top: 75%; left: 82%; animation-delay: 2s; }
.mol-atoms span:nth-child(6) { top: 22%; left: 42%; animation-delay: 6s; width: 2px; height: 2px; }
.mol-atoms span:nth-child(7) { top: 65%; left: 68%; animation-delay: 7.5s; width: 4px; height: 4px; }
.mol-atoms span:nth-child(8) { top: 85%; left: 48%; animation-delay: 5s; }
@keyframes atom-float {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; transform: translateY(-20px) scale(1.2); }
}

.hero-v3-content {
  position: relative; z-index: 3;
  text-align: center;
  max-width: 900px; margin: 0 auto;
}
.hero-v3-title {
  font-size: 90px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  color: #FFFFFF;
  margin: 0 0 40px;
  text-shadow: 0 6px 40px rgba(14,80,140,0.5);
  animation: hv3-fade 1s ease-out;
}
.hero-v3-tagline {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin: 0 0 28px;
  animation: hv3-fade 1s ease-out 0.15s both;
}
.hero-v3-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(224,242,254,0.82);
  max-width: 720px;
  margin: 0 auto 44px;
  font-weight: 400;
  animation: hv3-fade 1s ease-out 0.3s both;
}
.hero-v3-buttons { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: hv3-fade 1s ease-out 0.45s both; }
@keyframes hv3-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hv3-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hv3-btn span { transition: transform 0.25s ease; }
.hv3-btn:hover span { transform: translateX(4px); }

.hv3-btn-primary {
  background: #FFFFFF;
  color: #061526;
  box-shadow: 0 8px 30px rgba(255,255,255,0.15);
}
.hv3-btn-primary:hover {
  background: #F0F9FF;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,255,255,0.25);
}

.hv3-btn-outline {
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.hv3-btn-outline:hover {
  background: #38BDF8;
  border-color: #38BDF8;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(56,189,248,0.4);
}

/* Diagonal bottom cut */
.hero-v3-diagonal {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  background: #F5F7FA;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 4;
}

/* ---- Apply molecular pattern to OTHER dark sections ---- */
.lab-showcase::after,
.inner-circle::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(56,189,248,0.12) 0.5px, transparent 1.5px),
    radial-gradient(circle at 30% 70%, rgba(56,189,248,0.1) 0.5px, transparent 1.5px),
    radial-gradient(circle at 70% 30%, rgba(56,189,248,0.1) 0.5px, transparent 1.5px),
    radial-gradient(circle at 90% 80%, rgba(56,189,248,0.12) 0.5px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(56,189,248,0.08) 0.5px, transparent 1.5px);
  background-size: 300px 300px, 400px 400px, 350px 350px, 450px 450px, 500px 500px;
  background-position: 0 0, 100px 50px, 200px 100px, 50px 200px, 150px 150px;
  opacity: 0.8;
  animation: mol-drift 60s linear infinite;
}
@keyframes mol-drift {
  0% { background-position: 0 0, 100px 50px, 200px 100px, 50px 200px, 150px 150px; }
  100% { background-position: 300px 300px, 500px 450px, 550px 450px, 500px 650px, 650px 650px; }
}

/* Hide the old hero-clean */
.hero-clean { display: none !important; }

/* Responsive */
@media (max-width: 900px) {
  .main-nav-dark .nav-inner { padding: 0 20px; gap: 20px; }
  .main-nav-dark .nav-links { display: none; }
  .main-nav-dark .nav-links.mobile-open {
    display: flex; flex-direction: column; gap: 24px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #061526; padding: 30px;
    border-top: 1px solid rgba(56,189,248,0.1);
  }
  .ts-grid { gap: 12px; }
  .ts-item { font-size: 10px; letter-spacing: 1px; }
  .hero-v3 { padding: 80px 0 140px; }
  .hero-v3-title { font-size: 44px; }
  .hero-v3-tagline { font-size: 16px; }
  .hv3-btn { padding: 13px 24px; font-size: 12px; }
  .hero-v3-diagonal { height: 50px; }
}

/* ============================================
   REBUILD v5 — REVERT nav + hero to clean layout
   Use official logo PNG + Gemini molecular bg
   Shared .dark-section-mol class for all blue sections
   ============================================ */

/* Kill all the v3 / v4 scaffolding */
.hero-v3, .hero-v3-content, .hero-v3-diagonal,
.mol-bg, .mol-svg, .mol-nodes, .mol-atoms,
.trust-strip, .main-nav-dark,
.hero-clean, .hc-bg, .hc-hex, .hc-dna, .hc-atoms { display: none !important; }

/* Re-enable announcement bar */
.announcement-bar { display: block !important; background: #0B3354; color: #E0F2FE; padding: 10px 0; text-align: center; font-size: 13px; font-weight: 500; }

/* ---- NAV v5 (clean with official logo) ---- */
.main-nav-v5 {
  position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 10px rgba(0,0,0,0.03);
}
.main-nav-v5 .nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.nav-logo-official { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo-official img { height: 48px; width: auto; display: block; }

.main-nav-v5 .nav-links {
  display: flex; gap: 30px; align-items: center;
}
.main-nav-v5 .nav-links > a,
.main-nav-v5 .nav-dropdown > a {
  color: #0F2540;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.main-nav-v5 .nav-links > a:hover,
.main-nav-v5 .nav-dropdown:hover > a { color: #0EA5E9; }
.main-nav-v5 .nav-links > a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px;
  background: #0EA5E9; transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s ease;
}
.main-nav-v5 .nav-links > a:hover::after { transform: scaleX(1); }

.main-nav-v5 .nav-dropdown { position: relative; }
.main-nav-v5 .dropdown-arrow { font-size: 9px; margin-left: 4px; color: #94A3B8; }
.main-nav-v5 .dropdown-menu {
  position: absolute; top: 100%; left: -14px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(15,37,64,0.12), 0 0 0 1px rgba(15,37,64,0.05);
  padding: 12px 0; min-width: 220px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all 0.25s ease;
}
.main-nav-v5 .nav-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav-v5 .dropdown-menu a {
  display: block; padding: 10px 20px;
  color: #334155; font-size: 13px; text-decoration: none; font-weight: 500;
  transition: all 0.2s ease;
}
.main-nav-v5 .dropdown-menu a:hover { background: #F1F5F9; color: #0EA5E9; }

.main-nav-v5 .nav-actions { display: flex; gap: 14px; align-items: center; }
.main-nav-v5 .nav-action-btn {
  width: 40px; height: 40px;
  background: transparent; border: none;
  color: #334155;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  position: relative;
  text-decoration: none;
}
.main-nav-v5 .nav-action-btn:hover { background: rgba(14,165,233,0.08); color: #0EA5E9; }
.main-nav-v5 .nav-action-btn svg { width: 20px; height: 20px; }
.main-nav-v5 .cart-count {
  position: absolute; top: 2px; right: 2px;
  background: #0EA5E9; color: white;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Shared DARK SECTION with molecular background ---- */
/* Use on any section that should show the Gemini molecular bg with depth fade */
.dark-section-mol {
  position: relative;
  background-color: #0A1A2E;
  color: #F0F9FF;
  overflow: hidden;
  isolation: isolate;
}
.dark-section-mol::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/images/molecular-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  z-index: 0;
  animation: mol-bg-drift 60s ease-in-out infinite alternate;
}
@keyframes mol-bg-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.08) translate(-2%, -1%); }
}
.dark-section-mol > .dsm-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,26,46,0.55) 0%, rgba(10,26,46,0.7) 60%, rgba(10,26,46,0.9) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(14,80,140,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(6,80,140,0.25) 0%, transparent 50%);
  pointer-events: none;
}
.dark-section-mol > .container { position: relative; z-index: 2; }

/* ---- HERO v5 ---- */
.hero-v5 {
  padding: 100px 0 120px;
  min-height: 640px;
}
.h5-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.h5-left { animation: v5-fade 0.9s ease-out; }
.h5-right { animation: v5-fade 1s ease-out 0.15s both; }
@keyframes v5-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.h5-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 999px;
  color: #7DD3FC;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.h5-title {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 18px;
}
.h5-subtitle {
  font-size: 24px;
  color: #CBD5E1;
  margin: 0 0 22px;
  font-style: italic;
  font-weight: 400;
}
.h5-desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(203,213,225,0.85);
  margin: 0 0 34px;
  max-width: 520px;
}
.h5-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.h5-btn-primary, .h5-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.h5-btn-primary {
  background: #0EA5E9;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(14,165,233,0.35);
}
.h5-btn-primary:hover {
  background: #0284C7;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(14,165,233,0.5);
}
.h5-btn-outline {
  background: transparent;
  color: #7DD3FC;
  border: 1px solid rgba(56,189,248,0.5);
}
.h5-btn-outline:hover {
  background: rgba(56,189,248,0.1);
  border-color: #38BDF8;
  color: #F0F9FF;
  transform: translateY(-2px);
}

.h5-right { display: flex; flex-direction: column; gap: 18px; }
.h5-review {
  background: rgba(10,26,46,0.7);
  border: 1px solid rgba(56,189,248,0.25);
  backdrop-filter: blur(16px);
  padding: 28px 30px;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.h5-stars { color: #FCD34D; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.h5-quote { font-size: 15px; line-height: 1.6; color: #F0F9FF; margin: 0 0 12px; font-style: italic; }
.h5-author { font-size: 13px; color: rgba(203,213,225,0.7); }

.h5-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.h5-stat {
  background: rgba(10,26,46,0.7);
  border: 1px solid rgba(56,189,248,0.25);
  backdrop-filter: blur(16px);
  padding: 24px 14px;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s ease;
}
.h5-stat:hover { border-color: rgba(56,189,248,0.6); transform: translateY(-3px); }
.h5-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #38BDF8;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.h5-stat span {
  font-size: 11px;
  color: rgba(203,213,225,0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Responsive */
@media (max-width: 900px) {
  .main-nav-v5 .nav-inner { padding: 0 20px; gap: 14px; }
  .main-nav-v5 .nav-links { display: none; }
  .main-nav-v5 .nav-links.mobile-open {
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #FFFFFF; padding: 30px 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  }
  .hero-v5 { padding: 60px 0 80px; min-height: auto; }
  .h5-grid { grid-template-columns: 1fr; gap: 40px; }
  .h5-title { font-size: 42px; }
  .h5-subtitle { font-size: 18px; }
  .nav-logo-official img { height: 38px; }
}

/* Make lab-showcase + inner-circle consistent with dark-section-mol */
.lab-showcase .ls-bg img { opacity: 0.75; }
.inner-circle { background: #0A1A2E; }
.inner-circle::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/images/molecular-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
  animation: mol-bg-drift 60s ease-in-out infinite alternate;
}
.inner-circle .ic-container { position: relative; z-index: 2; }
.inner-circle::after { content: none !important; }
.lab-showcase::after { content: none !important; }

/* ============================================
   REFINE v7 — Keep stock lab photo, cool blue tint (no warm yellow)
   QR section stays as it was originally
   Only inner page headers get the molecular bg
   ============================================ */

/* Lab showcase: RESTORE the stock lab photo, just cool-shift it to blue */
.lab-showcase .ls-bg img {
  display: block !important;
  filter: brightness(0.55) saturate(1.1) hue-rotate(180deg);
}
.lab-showcase .ls-bg {
  background-image: none;
  animation: none;
  opacity: 1;
}
.lab-showcase .ls-vignette {
  background:
    linear-gradient(180deg, rgba(10,26,46,0.7) 0%, rgba(10,26,46,0.55) 40%, rgba(10,26,46,0.85) 100%),
    radial-gradient(ellipse 1200px 700px at 20% 30%, rgba(14,80,140,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 1000px 600px at 80% 75%, rgba(6,90,160,0.4) 0%, transparent 60%);
}

/* Inner page headers (shop, COAs, FAQ, contact, about, account) — molecular bg */
.page-header {
  background: #0A1A2E;
  background-image: none;
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/images/molecular-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: 0;
  animation: mol-bg-drift 60s ease-in-out infinite alternate;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,26,46,0.55) 0%, rgba(10,26,46,0.72) 100%),
    radial-gradient(ellipse at 25% 30%, rgba(14,80,140,0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(6,90,160,0.28) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.page-header > .container,
.page-header > * { position: relative; z-index: 2; }
.page-header h1 {
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.page-header p {
  color: rgba(224,242,254,0.78);
}


/* ============================================
   REFINE v8 — Ribbon trust bar + seamless product canvas
   ============================================ */

/* ---- NAV DROPDOWN COLOR FIX (match Ventra navy logo) ---- */
.main-nav-v5 .nav-links > a,
.main-nav-v5 .nav-dropdown > a {
  color: #0F2540 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
.main-nav-v5 .dropdown-arrow { color: #0EA5E9 !important; font-size: 8px !important; }
.main-nav-v5 .dropdown-menu { background: #FFFFFF; }
.main-nav-v5 .dropdown-menu a { color: #0F2540 !important; font-weight: 500 !important; }
.main-nav-v5 .dropdown-menu a:hover { color: #0EA5E9 !important; background: #F1F5F9; }

/* ---- TRUST BAR → RIBBON STYLE (deep navy, thick top/bottom lines) ---- */
.trust-bar {
  background: #0F2540;
  color: #F0F9FF;
  padding: 30px 0;
  border-top: 4px solid #0EA5E9;
  border-bottom: 4px solid #0EA5E9;
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/images/molecular-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.trust-bar .container { position: relative; z-index: 1; }
.trust-bar .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.trust-bar .trust-item { text-align: center; }
.trust-bar .trust-item svg {
  width: 36px; height: 36px;
  color: #38BDF8;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(56,189,248,0.3));
}
.trust-bar .trust-item h4 {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}
.trust-bar .trust-item p {
  color: rgba(224,242,254,0.7);
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .trust-bar .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .trust-bar { padding: 24px 0; }
}

/* ---- PRODUCT CANVAS (seamless white block) ---- */
/* All sections inside share the same white bg with NO visible separation */
.product-canvas {
  background: #FFFFFF;
  padding: 10px 0 20px; /* replaces per-section alt backgrounds */
}
.product-canvas > section { background: #FFFFFF !important; }
.product-canvas > section.section-alt { background: #FFFFFF !important; }
.product-canvas > section { padding-top: 60px; padding-bottom: 40px; }
.product-canvas > section:first-child { padding-top: 80px; }
.product-canvas > section:last-child { padding-bottom: 80px; }
/* Kill the gray dividers the alt bg used to create */
.product-canvas > section + section { border-top: none; }

/* QR section INSIDE the canvas needs light treatment (it was dark before) */
.product-canvas .qr-section {
  background: #FFFFFF !important;
  color: #0F2540 !important;
}
.product-canvas .qr-section::before,
.product-canvas .qr-section::after { display: none !important; content: none !important; }
.product-canvas .qr-section > .container { position: static; }
.product-canvas .qr-section h2 { color: #0F2540 !important; }
.product-canvas .qr-section p { color: #475569 !important; }
.product-canvas .qr-section .qr-callout {
  background: #FFFFFF;
  color: #0F2540;
  box-shadow: 0 4px 14px rgba(15,37,64,0.1);
}

/* ============================================
   REFINE v9 — Gray ribbon + 2-row best sellers + subtle bg motion
   ============================================ */

/* ---- Trust bar: GRAY ribbon (Modern Aminos style) ---- */
.trust-bar {
  background: #F1F3F5 !important;
  color: #0F2540 !important;
  border-top: 1.5px solid #CFD5DB !important;
  border-bottom: 1.5px solid #CFD5DB !important;
  padding: 28px 0 !important;
}
.trust-bar::before { display: none !important; }
.trust-bar .trust-item svg {
  color: #0EA5E9 !important;
  filter: none !important;
  width: 34px !important; height: 34px !important;
}
.trust-bar .trust-item h4 {
  color: #0F2540 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}
.trust-bar .trust-item h4 .accent-word { color: #0EA5E9; font-weight: 700; }
.trust-bar .trust-item p {
  color: #64748B !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* ---- Best sellers: force 4-col x 2-row grid ---- */
.product-grid-8 {
  grid-template-columns: repeat(4, 1fr) !important;
  display: grid !important;
  gap: 22px !important;
}
@media (max-width: 1100px) {
  .product-grid-8 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 820px) {
  .product-grid-8 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
  .product-grid-8 { grid-template-columns: 1fr !important; }
}

/* Make product cards feel premium with subtle depth */
.product-card {
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(14,165,233,0.14), 0 0 0 1px rgba(14,165,233,0.1);
  border-color: rgba(14,165,233,0.25);
}
.product-card .product-image {
  overflow: hidden;
  background: #FAFBFC;
}
.product-card .product-image img {
  transition: transform 0.6s ease;
}
.product-card:hover .product-image img { transform: scale(1.06); }

/* ---- SUBTLE BACKGROUND ANIMATIONS (premium $10k feel) ---- */

/* Visible but smooth molecular drift — Ken Burns style */
@keyframes mol-bg-drift {
  0%   { transform: scale(1.05) translate(0%, 0%) rotate(0deg); }
  25%  { transform: scale(1.12) translate(-3%, -2%) rotate(1.5deg); }
  50%  { transform: scale(1.18) translate(-5%, -3.5%) rotate(3deg); }
  75%  { transform: scale(1.12) translate(-2%, -1.5%) rotate(1.5deg); }
  100% { transform: scale(1.05) translate(0%, 0%) rotate(0deg); }
}

/* Add a secondary, counter-rotating glow layer for depth */
.dark-section-mol::after {
  content: '';
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(ellipse 800px 500px at 30% 40%, rgba(56,189,248,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 70% 60%, rgba(14,165,233,0.07) 0%, transparent 55%);
  z-index: 0;
  animation: mol-glow-rotate 80s linear infinite;
  pointer-events: none;
}
@keyframes mol-glow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Foreground animations removed per request — keep hero clean.
   Background motion stays (mol-bg-drift + mol-glow-rotate). Hover stays. */

/* ---- RIBBON CLEANUP v10 — softer edges, no harsh lines ---- */
.trust-bar {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow:
    inset 0 1px 0 rgba(15,37,64,0.08),
    inset 0 -1px 0 rgba(15,37,64,0.08),
    0 1px 2px rgba(15,37,64,0.04);
  background:
    linear-gradient(180deg, #F4F6F8 0%, #EEF1F4 50%, #F4F6F8 100%) !important;
  padding: 32px 0 !important;
}

/* ============================================
   v12 — REVERT: molecular image visible, just add motion
   No extra orb layers, no blur, no bright glows.
   ============================================ */
.hero-v5.dark-section-mol::before {
  opacity: 0.5 !important;
  animation: mol-bg-drift 36s ease-in-out infinite !important;
}

/* ============================================
   v13 — Testing Explainer + Why Ventra strip
   ============================================ */

/* ---- Section header additions ---- */
.section-header.centered { text-align: center; flex-direction: column; align-items: center; }
.section-header .eyebrow {
  display: inline-block;
  color: #0EA5E9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-lede {
  max-width: 640px; margin: 14px auto 0;
  color: #475569;
  font-size: 15px; line-height: 1.7;
  text-align: center;
}
.product-canvas .section-header { text-align: center; flex-direction: column; align-items: center; gap: 8px; }

/* ---- Testing Explainer Strip (inside white product canvas) ---- */
.testing-explainer { background: #FFFFFF !important; padding-top: 70px !important; padding-bottom: 70px !important; }
.test-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.test-card {
  padding: 28px 22px;
  background: #F8FAFC;
  border: 1px solid rgba(14,165,233,0.08);
  border-radius: 14px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.test-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0EA5E9, #38BDF8);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.test-card:hover::before { transform: scaleX(1); }
.test-card:hover {
  transform: translateY(-6px);
  background: #FFFFFF;
  border-color: rgba(14,165,233,0.3);
  box-shadow: 0 20px 40px rgba(14,165,233,0.12);
}
.test-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,165,233,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  transition: all 0.3s ease;
}
.test-card:hover .test-icon { background: rgba(14,165,233,0.16); transform: scale(1.06); }
.test-icon svg { width: 26px; height: 26px; }
.test-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0F2540;
  margin: 0 0 10px;
}
.test-why {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}
.test-why strong { color: #0F2540; font-weight: 600; }
.test-cta {
  text-align: center;
  margin-top: 40px;
}
@media (max-width: 1100px) {
  .test-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .test-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .test-grid { grid-template-columns: 1fr; }
}

/* ---- Why Ventra (3-card strip) ---- */
.why-ventra {
  background: #F4F6F8;
  padding: 80px 0 !important;
  position: relative;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.why-card {
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.08);
  border-radius: 16px;
  padding: 36px 30px;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(14,165,233,0.15);
  border-color: rgba(14,165,233,0.3);
}
.why-card-featured {
  background: linear-gradient(135deg, #0F2540 0%, #153557 100%);
  border-color: #0EA5E9;
  color: #F0F9FF;
  position: relative;
}
.why-card-featured h4 { color: #FFFFFF; }
.why-card-featured p { color: rgba(224,242,254,0.82); }
.why-card-featured .why-icon { background: rgba(14,165,233,0.18); }
.why-card-featured .why-icon svg { stroke: #38BDF8; }
.why-card-featured:hover { box-shadow: 0 20px 50px rgba(14,165,233,0.35); }

.why-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: #0EA5E9;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 999px;
}

.why-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(14,165,233,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}
.why-card:hover .why-icon { transform: scale(1.08); }
.why-icon svg { width: 28px; height: 28px; }

.why-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #0F2540;
  margin: 0 0 10px;
}
.why-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ============================================
   v14 — Stock images on test + why cards
   Fix blacked-out text on featured card
   ============================================ */

/* ---- Test cards: now have photo headers ---- */
.test-card {
  padding: 0 !important;
  background: #FFFFFF !important;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.test-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #E2E8F0;
}
.test-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,26,46,0) 50%, rgba(10,26,46,0.3) 100%);
}
.test-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
  filter: saturate(1.05);
}
.test-card:hover .test-photo img { transform: scale(1.08); }
.test-body { padding: 22px 22px 26px; }
.test-card h4 { margin-top: 0; }

/* ---- Why Ventra cards: now have photo headers ---- */
.why-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.why-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #CBD5E1;
}
.why-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.why-card:hover .why-photo img { transform: scale(1.06); }
.why-body { padding: 28px 28px 32px; }

/* Featured (navy) card — give the photo a blue duotone so it blends with the dark bg */
.why-card-featured .why-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,37,64,0.2) 0%, rgba(15,37,64,0.75) 100%),
              linear-gradient(135deg, rgba(14,165,233,0.3), rgba(14,80,140,0.4));
  mix-blend-mode: multiply;
}
.why-card-featured .why-photo img { filter: saturate(1.2) contrast(1.05); }

/* Force text visibility on featured card */
.why-card-featured .why-body h4 { color: #FFFFFF !important; }
.why-card-featured .why-body p { color: rgba(240,249,255,0.9) !important; }

/* Adjust badge position now that photo is at top */
.why-card .why-badge {
  top: 16px; right: 16px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* Kill the old icon/badge on why cards since we have photos now */
.why-card .why-icon { display: none; }

@media (max-width: 900px) {
  .why-photo, .test-photo { aspect-ratio: 16/9; }
}

/* ============================================
   v15 — Test cards are display-only (no click)
   Why cards all uniform white (no dark featured)
   ============================================ */

/* Test cards: KEEP the hover lift, just kill the click/cursor behavior */
.test-card {
  cursor: default !important;
}

/* Why cards: remove featured-dark styling, all 3 uniform white */
.why-card-featured {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,37,64,0.08) !important;
  color: inherit !important;
}
.why-card-featured .why-body h4 { color: #0F2540 !important; }
.why-card-featured .why-body p { color: #475569 !important; }
.why-card-featured .why-photo::after { display: none !important; }
.why-card-featured .why-photo img { filter: none !important; }
.why-card-featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(14,165,233,0.15);
  border-color: rgba(14,165,233,0.3) !important;
}

/* Badge stays cyan but sits cleanly on white card */
.why-card .why-badge {
  background: #0EA5E9;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(14,165,233,0.35);
}

/* Fallback bg if any image fails to load */
.test-photo, .why-photo {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
}

/* ============================================
   v16 — Real stock images wired in
   Slim horizontal category slider (Modern Aminos vibe)
   ============================================ */

/* Trust bar: use the real SVG badge images */
.trust-badge-img {
  width: 52px; height: 52px;
  margin-bottom: 10px;
  display: block;
  transition: transform 0.3s ease;
}
.trust-item:hover .trust-badge-img { transform: scale(1.08); }

/* QR visual now shows the rendered photo directly */
.qr-visual-photo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
}
.qr-visual-photo img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15,37,64,0.08);
  transition: transform 0.5s ease;
}
.qr-visual-photo:hover img { transform: scale(1.02); }
/* Hide the old SVG callouts since they're baked into the new image */
.qr-visual-photo .qr-callout { display: none !important; }

/* ---- SLIM HORIZONTAL CATEGORY SLIDER ---- */
.category-section { padding: 60px 0 40px !important; }

.cat-slider-wrap {
  position: relative;
  margin-top: 28px;
  padding: 0 56px;
}
.cat-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 4px;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-slider::-webkit-scrollbar { display: none; }

.cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.08);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 2px rgba(15,37,64,0.03);
}
.cat-chip:hover {
  background: #F8FAFC;
  border-color: #0EA5E9;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14,165,233,0.18);
}
.cat-chip-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(14,165,233,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.cat-chip:hover .cat-chip-icon { background: rgba(14,165,233,0.18); }
.cat-chip-icon svg { width: 18px; height: 18px; }
.cat-chip-label {
  font-size: 14px;
  font-weight: 600;
  color: #0F2540;
  letter-spacing: 0.1px;
}

.cat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.1);
  color: #0F2540;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,37,64,0.08);
  transition: all 0.25s ease;
  z-index: 2;
}
.cat-arrow:hover {
  background: #0EA5E9;
  color: #FFFFFF;
  border-color: #0EA5E9;
  box-shadow: 0 8px 20px rgba(14,165,233,0.35);
}
.cat-arrow svg { width: 18px; height: 18px; }
.cat-arrow-prev { left: 0; }
.cat-arrow-next { right: 0; }

.cat-cta {
  text-align: center;
  margin-top: 28px;
}

/* Kill the old grid rules from the prior category version */
.peptide-cat-grid { display: none !important; }

/* Mobile: shrink arrows, pad less */
@media (max-width: 720px) {
  .cat-slider-wrap { padding: 0 40px; }
  .cat-arrow { width: 36px; height: 36px; }
  .cat-chip { padding: 12px 18px; gap: 10px; }
  .cat-chip-icon { width: 28px; height: 28px; }
  .cat-chip-icon svg { width: 15px; height: 15px; }
  .cat-chip-label { font-size: 13px; }
}

/* ============================================
   v17 — Center trust bar badges under text
   ============================================ */
.trust-bar .trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 12px !important;
  gap: 4px;
}
.trust-bar .trust-badge-img {
  margin: 0 auto 10px !important;
  display: block !important;
}
.trust-bar .trust-item h4,
.trust-bar .trust-item p {
  width: 100%;
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================
   v18 — Shop filters + COA viewer
   ============================================ */

/* Shop sidebar radios */
.cat-filter-label, .shop-sidebar label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-size: 14px;
  color: #334155;
}
.cat-filter-label:hover, .shop-sidebar label:hover { background: #F1F5F9; color: #0EA5E9; }
.cat-filter-label input, .shop-sidebar label input { margin-right: 8px; accent-color: #0EA5E9; }
.cat-count {
  font-size: 12px;
  color: #94A3B8;
  margin-left: auto;
}

/* Empty state */
.shop-empty {
  text-align: center;
  padding: 60px 20px;
  color: #64748B;
}
.shop-empty h3 { color: #0F2540; margin: 0 0 10px; font-size: 20px; }
.shop-empty a { color: #0EA5E9; font-weight: 600; }

/* ---- COA Single Viewer ---- */
.coa-viewer {
  max-width: 900px;
  margin: 0 auto;
}
.coa-viewer-back {
  display: inline-flex; align-items: center;
  color: #0EA5E9;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
  transition: transform 0.2s ease;
}
.coa-viewer-back:hover { transform: translateX(-4px); }

.coa-viewer-card {
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,37,64,0.08);
}
.coa-viewer-head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 36px 36px 24px;
  border-bottom: 1px solid rgba(15,37,64,0.06);
}
.coa-viewer-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  background: #F8FAFC;
  border-radius: 12px;
  flex-shrink: 0;
}
.coa-viewer-eyebrow {
  display: inline-block;
  color: #0EA5E9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 8px;
}
.coa-viewer-card h2 {
  font-size: 34px;
  color: #0F2540;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.coa-viewer-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475569;
}
.coa-viewer-meta strong { color: #0F2540; }

.coa-viewer-body {
  padding: 36px;
}
.coa-pending {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.coa-pending-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,165,233,0.08);
  border-radius: 50%;
}
.coa-pending-icon svg { width: 40px; height: 40px; }
.coa-pending h3 {
  font-size: 22px;
  color: #0F2540;
  margin: 0 0 12px;
}
.coa-pending p {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 28px;
}

.coa-placeholder-table {
  background: #F8FAFC;
  border: 1px solid rgba(15,37,64,0.06);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 28px;
  text-align: left;
}
.coa-placeholder-table > div {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15,37,64,0.06);
  font-size: 14px;
  color: #0F2540;
  font-weight: 500;
}
.coa-placeholder-table > div:last-child { border-bottom: none; }
.coa-placeholder-table .pending {
  color: #94A3B8;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 10px;
  background: #F1F5F9;
  border-radius: 999px;
}

/* Sidebar active category */
#coaCatList a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}
#coaCatList a:hover { background: #F1F5F9; color: #0EA5E9; }
#coaCatList a.active { background: #0EA5E9; color: #FFFFFF; font-weight: 600; }

.coa-search {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(15,37,64,0.1);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}
.coa-search:focus { border-color: #0EA5E9; box-shadow: 0 0 0 3px rgba(14,165,233,0.12); }

/* COA card hover */
.coa-card {
  background: #FFFFFF;
  border: 1px solid rgba(15,37,64,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.coa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14,165,233,0.12);
  border-color: rgba(14,165,233,0.2);
}
.coa-card-image {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: #F8FAFC;
  padding: 10px;
}
.coa-card-image img {
  width: 100%; height: 100%; object-fit: contain;
}
.coa-card-info {
  padding: 16px;
  text-align: center;
}
.coa-card-info h4 {
  font-size: 15px;
  color: #0F2540;
  margin: 0 0 12px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .coa-viewer-head { flex-direction: column; text-align: center; gap: 18px; padding: 28px 20px; }
  .coa-viewer-body { padding: 24px 20px; }
  .coa-viewer-card h2 { font-size: 24px; }
  .coa-viewer-img { width: 110px; height: 110px; }
}

/* ============================================
   v19 — Shop sidebar checkboxes (square, not round)
   Clear-all button
   ============================================ */
.shop-sidebar label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid #CBD5E1;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-right: 10px;
}
.shop-sidebar label input[type="checkbox"]:hover {
  border-color: #0EA5E9;
}
.shop-sidebar label input[type="checkbox"]:checked {
  background: #0EA5E9;
  border-color: #0EA5E9;
}
.shop-sidebar label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sidebar-clear-btn {
  margin-top: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(15,37,64,0.15);
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.sidebar-clear-btn:hover {
  color: #0EA5E9;
  border-color: #0EA5E9;
  background: rgba(14,165,233,0.05);
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v3/assets/wp-patch.css?ver=3.0.0 ==== */
/**
 * Ventra Sciences v3 — WordPress compatibility layer
 * Small, targeted tweaks to make the local design work inside WordPress + WooCommerce.
 * Does NOT override the main design — only fills gaps.
 */

/* ── LOGO: constrain to correct size (local expects max 42px tall logo) ── */
.main-nav .nav-logo-official img,
.main-nav-v5 .nav-logo-official img,
.nav-logo-official img {
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.footer .footer-logo img {
    max-height: 56px;
    width: auto;
    height: auto;
}

/* Ensure nav-links are centered between logo and actions */
.main-nav .nav-inner,
.main-nav-v5 .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 32px;
}
.main-nav .nav-links,
.main-nav-v5 .nav-links {
    flex: 1;
    justify-content: center;
}

/* ── Sale badge on WooCommerce loop cards (position for local layout) ── */
.woocommerce span.onsale {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    min-height: auto;
    min-width: auto;
    line-height: 1.2;
}

/* ── Woo product card sizing in our grids ── */
.product-card img,
.woocommerce ul.products li.product img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Hide default WooCommerce template bits we don't want */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    padding: 0;
    margin: 8px 0;
    font-size: 17px;
    font-weight: 700;
}
.woocommerce ul.products li.product .price {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0A1F3D;
}
.woocommerce ul.products li.product .price del {
    opacity: 0.55;
    font-size: 15px;
}

/* ── COA Lightbox ── */
.vsv3-coa-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 61, 0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    backdrop-filter: blur(6px);
}
.vsv3-coa-lightbox.open {
    display: flex;
}
.vsv3-lightbox-inner {
    position: relative;
    max-width: 900px;
    max-height: 90vh;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    overflow: auto;
}
.vsv3-lightbox-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
.vsv3-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0A1F3D;
    color: #fff;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vsv3-lightbox-close:hover {
    background: #38BDF8;
}

/* ── Search Overlay ── */
.vsv3-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(10, 31, 61, 0.95);
    padding: 80px 20px;
    backdrop-filter: blur(8px);
}
.vsv3-search-overlay.open {
    display: block;
}
.vsv3-search-overlay form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    position: relative;
}
.vsv3-search-overlay input[type="search"] {
    flex: 1;
    padding: 18px 20px;
    font-size: 18px;
    border-radius: 12px;
    border: 0;
    background: #fff;
    color: #0A1F3D;
}
.vsv3-search-overlay button[type="submit"] {
    padding: 0 28px;
    background: #38BDF8;
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
}
.vsv3-search-overlay button[type="button"] {
    position: absolute;
    top: -60px;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

/* ── Animated molecular-ish background for page headers ── */
.page-header {
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(14, 165, 233, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(56, 189, 248, 0.15) 0%, transparent 50%);
    animation: vsv3-molecular-float 25s ease-in-out infinite alternate;
    pointer-events: none;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(56, 189, 248, 0.5) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(56, 189, 248, 0.35) 1px, transparent 1.5px);
    background-size: 80px 80px, 120px 120px;
    background-position: 0 0, 40px 60px;
    opacity: 0.35;
    animation: vsv3-molecular-drift 40s linear infinite;
    pointer-events: none;
}
.page-header > .container {
    position: relative;
    z-index: 2;
}
@keyframes vsv3-molecular-float {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-20px, -15px) scale(1.05); }
    100% { transform: translate(20px, 10px) scale(1); }
}
@keyframes vsv3-molecular-drift {
    0%   { background-position: 0 0, 40px 60px; }
    100% { background-position: 80px 80px, 160px 180px; }
}

/* Apply same bg to hero */
.hero-v5.dark-section-mol,
.inner-circle.dark-section-mol {
    position: relative;
    overflow: hidden;
}
.hero-v5.dark-section-mol::after,
.inner-circle.dark-section-mol::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(56, 189, 248, 0.45) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(56, 189, 248, 0.28) 1px, transparent 1.5px);
    background-size: 90px 90px, 140px 140px;
    background-position: 0 0, 45px 70px;
    opacity: 0.5;
    animation: vsv3-molecular-drift 45s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.hero-v5.dark-section-mol > .container,
.inner-circle.dark-section-mol > .container {
    position: relative;
    z-index: 2;
}

/* ── Mobile nav toggle ── */
@media (min-width: 901px) {
    .mobile-toggle { display: none !important; }
}
@media (max-width: 900px) {
    .main-nav .nav-links,
    .main-nav-v5 .nav-links {
        display: none;
    }
    .main-nav .nav-links.mobile-open,
    .main-nav-v5 .nav-links.mobile-open {
        display: flex;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 24px;
        flex-direction: column;
        gap: 4px;
        z-index: 100;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .main-nav .nav-links.mobile-open > a,
    .main-nav-v5 .nav-links.mobile-open > a,
    .main-nav .nav-links.mobile-open .nav-dropdown > a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        width: 100%;
        display: block;
    }
    .main-nav .nav-links.mobile-open .dropdown-menu {
        position: static;
        display: block;
        box-shadow: none;
        padding: 0 0 0 16px;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 8px;
    }
    .mobile-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        background: #0A1F3D;
        transition: all 0.3s;
    }
    .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Shop sidebar stacks above products on mobile */
    .shop-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
    .coa-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
    .shop-sidebar, .coa-sidebar { position: static !important; max-height: none !important; }

    .shop-product-grid,
    .coa-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .product-grid-8 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .product-card { padding: 14px; }

    .hero-v5 .h5-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .h5-title { font-size: 38px !important; line-height: 1.15 !important; }
    .h5-buttons { flex-direction: column !important; gap: 12px !important; }
    .h5-btn-primary, .h5-btn-outline { width: 100% !important; text-align: center !important; justify-content: center !important; }
    .h5-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

    .trust-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .test-grid, .why-grid { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .footer-bottom { flex-direction: column !important; gap: 14px !important; text-align: center !important; }
    .ic-perks { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .shop-product-grid,
    .coa-grid,
    .product-grid-8 {
        grid-template-columns: 1fr !important;
    }
    .trust-grid { grid-template-columns: 1fr !important; }
    .h5-title { font-size: 30px !important; }
}

/* ── WooCommerce single-product styling (keep clean white bg) ── */
body.single-product .woocommerce-main {
    padding-top: 40px;
    padding-bottom: 80px;
}
body.single-product .product .images img {
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
body.single-product .product_title {
    font-size: 32px;
    color: #0A1F3D;
    margin-top: 0;
}
body.single-product .summary .price {
    font-size: 26px;
    color: #0A1F3D;
    font-weight: 700;
    margin: 16px 0;
}
body.single-product .summary button[type="submit"].single_add_to_cart_button {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
    color: #fff;
    border: 0;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}
body.single-product .summary button[type="submit"].single_add_to_cart_button:hover {
    transform: translateY(-2px);
}

/* Single product: COA callout block */
.vsv3-coa-callout {
    background: linear-gradient(135deg, #F0F7FC 0%, #E6F1F9 100%);
    border-radius: 16px;
    padding: 30px;
    margin: 40px 0;
    text-align: center;
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.vsv3-coa-callout h3 {
    color: #0A1F3D;
    margin: 0 0 12px;
}
.vsv3-coa-callout .btn {
    margin-top: 12px;
}

/* Account page + other WP core pages — soft styling */
body.page-account .page-header,
body.woocommerce-account .page-header {
    background: linear-gradient(135deg, #0A1F3D 0%, #0E2A50 100%);
    color: #fff;
    padding: 70px 0 60px;
}
body.page-account .page-header h1,
body.woocommerce-account .page-header h1 { color: #fff; }
body.page-account .page-header p,
body.woocommerce-account .page-header p { color: #94A3B8; }

body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #F5F8FC;
    border-radius: 14px;
    padding: 24px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    border-bottom: 1px solid rgba(10, 31, 61, 0.08);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #0A1F3D;
    padding: 12px 0;
    display: block;
    text-decoration: none;
    font-weight: 500;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #38BDF8;
}

/* ── Dropdown menu polish ── */
.nav-dropdown { position: relative; }
.nav-dropdown .dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 12px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 50;
}
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu a {
    padding: 10px 16px;
    border-radius: 8px;
    color: #0A1F3D !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.dropdown-menu a:hover {
    background: #F0F7FC;
    color: #38BDF8 !important;
}

/* Sticky nav scrolled state */
.main-nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.97);
}

/* Breadcrumbs on shop subpages — hide default WC ones to keep design clean */
.woocommerce-breadcrumb {
    display: none;
}

/* Dequeue-leftover fallback: hide WP emoji bloat */
img.wp-smiley, img.emoji { display: none; }


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/style.css?ver=4.69.1 ==== */
/*
Theme Name:     Ventra Sciences v4
Theme URI:      https://ventrasciences.com
Description:    Child of Ventra Sciences v3. Adds the v5 Lumina-style checkout, side-cart drawer, and PDP add-to-cart bridge as proper theme code instead of WPCode snippets. Inherits all v3 page templates (Home, About, FAQ, COAs, Contact), helpers, fonts, and assets unchanged.
Author:         Kaseton Farris / Bryce
Author URI:     https://ventrasciences.com
Template:       ventra-sciences-v3
Version:        4.0.0
Requires at least: 6.0
Tested up to:   6.7
Requires PHP:   7.4
License:        Proprietary
Text Domain:    ventra-sciences-v4
*/

/* All v5 checkout + cart styles loaded from assets/vsc-core.css — see functions.php */


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vsc-core.css?ver=4.69.1 ==== */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');
/* ^ THE BRAND DISPLAY FACE. DO NOT MOVE IT OFF LINE 1.
   Onest is the face the homepage hero, its section headings, its eyebrows and its
   buttons are all drawn in. It used to be loaded by ONE <link> inside home-v2.php,
   so it existed on the homepage and NOWHERE ELSE. Every other template still said
   `font-family:'Onest'` and silently fell through to Inter (or, where the stack
   started with a bare "Onest", to system-ui) -- which is the entire reason the
   membership / affiliate / COA / contact / account headings read in a different
   face from the homepage.

   This sheet is enqueued sitewide (functions.php `vsv4_enqueue`, handle
   'vsv4-core'), so importing here is what makes Onest available on every page.
   The weight list deliberately matches home-v2.php's link (400;500;600;700) so
   the homepage keeps rendering byte-identically off the same cached woff2 files.
   CONSEQUENCE, ON PURPOSE: nothing on the site can render Onest 800 -- any
   `font-weight:800` on an Onest heading clamps to 700, which is the homepage's
   own heading weight. Widening this to 800 would undo that.
   (An @import must stay ahead of every rule in the file or the browser drops it
   -- see the DEAD @import further down at the old Inter line, which sits after
   rules and has therefore never loaded anything.) */

/* =============================================================
   LUMINA AMINOS — Core Stylesheet
   Palette: Midnight Rose
   All classes prefixed with .vsc- to avoid WP theme conflicts.
   ============================================================= */

:root {
  /* ── TYPE TOKENS ────────────────────────────────────────────────────────────
     --grotesk / --inter were only ever declared inside home-v2.php, so every
     `var(--grotesk, ...)` consumer OUTSIDE the homepage was running on its
     fallback: the site header nav (vsc-dark.css) fell back to system-ui and the
     membership hero fell back to a bare "Onest" that was not loaded. Declaring
     them here -- same values, sitewide -- makes those consumers resolve to the
     real face instead. home-v2.php still declares its own copies later in the
     cascade, so the homepage is unchanged either way.
     --grotesk = display/headings/eyebrows/buttons.  --inter = body copy. */
  --grotesk: 'Onest', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --inter:   'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* ============================================================================
     ONE CYAN — THE SINGLE SOURCE OF TRUTH FOR EVERY CYAN/BLUE ACCENT ON THE SITE
     ============================================================================
     --vsc-cyan is THE cyan: the "Add to Cart" cyan. It is the reference every
     other cyan on the site is measured against. Change it here and it changes
     everywhere — that is the whole point of this block.

     RULE: never write a cyan hex (or a cyan rgba) anywhere else in the theme.
     Always reference one of these five tokens. The one and only permitted place
     a cyan literal may appear is as a var() FALLBACK (`var(--vsc-cyan,#0EA5E9)`),
     used in the stylesheets that vsc-cart.js injects at runtime.

     WHY THIS RULE EXISTS: this exact drift has happened twice. A darker, duller
     blue (#0284C7) leaked into the cart drawer, the checkout and the thank-you
     page, so the header cart badge rendered a different cyan from the Add-to-Cart
     button on the same screen. A hex find/replace fixes that for a week; only a
     token everything REFERENCES stops it coming back. If you find yourself typing
     a `#0` followed by anything blue — stop, and use a token.

     THE RAMP (all five derive from / relate to the one cyan — do not add a sixth):
       --vsc-cyan       THE cyan. Every primary button / pill / CTA / active tab /
                        link / icon / solid accent uses this and nothing else.
       --vsc-cyan-rgb   The same colour as bare channels, so an alpha wash can be
                        written rgba(var(--vsc-cyan-rgb),.16) and still track the
                        one cyan instead of hard-coding rgba(14,165,233,.16).
       --vsc-cyan-hover One step LIGHTER. Hover states and gradient stops ONLY —
                        a hover brightens, it never darkens. Never use this as a
                        solid resting-state colour; that is how a second cyan is
                        born.
       --vsc-cyan-tint  Pale hairline/border tint (sky-200).
       --vsc-cyan-wash  Palest fill, for chips/pills the cyan sits ON (sky-100).
       --vsc-on-cyan    text/icon colour intended to sit on a --vsc-cyan fill.
       --vsc-cyan-deep  DEPRECATED alias, now identical to --vsc-cyan. The name
                        survives only so any stray legacy reference still lands
                        on brand. Do not use it.

     NOT part of this family, do NOT fold in: #2E77BC (Amex card mark), #1A1F71
     (Visa), #5865F2 (Discord blurple). Those are third-party brand colours. */
  --vsc-cyan: #0EA5E9;
  --vsc-cyan-rgb: 14, 165, 233;   /* = --vsc-cyan, for rgba(var(--vsc-cyan-rgb),a) */
  --vsc-cyan-hover: #38BDF8;
  --vsc-cyan-tint: #BAE6FD;
  --vsc-cyan-wash: #E0F2FE;
  --vsc-cyan-deep: var(--vsc-cyan);   /* deprecated alias — see above */
  /* Text/icons sitting ON a --vsc-cyan fill. WHITE, because the store's most-used cyan
     button -- "Add to Cart" -- has always been white-on-#0EA5E9, and it is the thing every
     other cyan button is read against. The near-black #0B1520 this used to be made the
     Bundles CTAs the only cyan buttons on the site wearing a different ink. */
  --vsc-on-cyan: #FFFFFF;
  /* THE cyan, lightened just enough to stay legible as SMALL TEXT on a dark card.
     #0EA5E9 on the bundle cards' rgba(38,46,61,.55) surface measures 4.41:1 — under
     the 4.5:1 WCAG AA needs for 10px/700 type. This is not a sixth accent colour: it
     is only ever type sitting on a dark surface, never a fill, never a button. */
  --vsc-cyan-on-dark: #7DD3FC;

  --white: #FFFFFF;
  --ivory: #F5F6F7;
  --midnight: #082040;
  --blue-secondary: #1E3A6B;
  /* Legacy names, kept because theme/JS/PHP still reference them.
     They are now aliases of the cyan tokens above — never redefine them. */
  --rose: var(--vsc-cyan);
  --rose-hover: var(--vsc-cyan-hover);
  --rose-soft: var(--vsc-cyan-wash);
  --text-muted: #6B7A94;
  --border: #E5EAF0;

  /* ── SOLD OUT ───────────────────────────────────────────────────────────────
     One grey for "you cannot buy this", used by the Sold Out pill on the shop
     grid. It is a NEUTRAL, deliberately not a member of the cyan ramp above:
     cyan means "act on this", and a sold-out pill means the opposite.

     CONTRAST, MEASURED (not assumed): #64748B with #FFFFFF ink = 4.76:1. The
     pill is 11px/700, which WCAG counts as NORMAL text (bold only counts as
     large at >=18.66px), so the bar is AA 4.5:1 -- this clears it.
     Against the dark shop card (which composites to ~#212937) the pill's own
     fill sits at 3.07:1, clearing the 3:1 that WCAG 1.4.11 asks of a non-text
     UI boundary. That is why there is NO dark-theme override for this pill: it
     is opaque and legible on both grounds, so it is defined once, here.

     NOTE FOR WHOEVER TOUCHES THE SALE PILL NEXT: the sale pill below ships
     `color:#FFFFFF` on #0EA5E9 = 2.77:1, which FAILS AA, and the comment above
     that rule claims 6.54:1 because it describes a #0A1628 ink the rule does
     not actually ship. That is a pre-existing defect, deliberately left alone
     here (changing it repaints a live pill nobody asked to change). Do not
     copy that pattern into a new pill -- this token was picked so we don't. */
  --vsc-oos: #64748B;
  --vsc-on-oos: #FFFFFF;
  --vsc-oos-ink: #475569;   /* sold-out CTA label on --border: 6.26:1 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.vsc-page {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--midnight);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.vsc-page a { color: inherit; text-decoration: none; }
.vsc-page img { max-width: 100%; display: block; }
.vsc-serif { font-family: 'Inter', serif; }
.vsc-italic { font-style: italic; color: var(--vsc-cyan); }

/* ============ NAV ============ */
.vsc-nav {
  position: fixed; top: 0; width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  z-index: 100; padding: 18px 0;
}
.vsc-nav-container {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.vsc-logo {
  font-family: 'Inter', serif; font-size: 26px;
  font-weight: 600; color: var(--midnight); letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 10px;
}
.vsc-logo-mark {
  width: 36px; height: 36px;
  background-image: url("/media/themes/ventra-sciences-v3/assets/images/ventra-logo.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.vsc-nav-links { display: flex; gap: 40px; list-style: none; }
.vsc-nav-links a {
  color: var(--midnight); font-size: 14px; font-weight: 500;
  letter-spacing: 0.3px; transition: color 0.2s;
}
/* Split deliberately: a HOVER brightens to the hover tint, but .active is a
   RESTING state (the current page) and so must be THE cyan — same colour as
   Add to Cart. Sharing one rule is how the hover tint leaked into a solid. */
.vsc-nav-links a:hover { color: var(--rose-hover); }
.vsc-nav-links a.active { color: var(--vsc-cyan); }
.vsc-page a.vsc-nav-cta {
  background: var(--midnight); color: var(--rose);
  padding: 11px 24px; border-radius: 100px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  transition: all 0.3s;
}
.vsc-page a.vsc-nav-cta:hover { background: var(--blue-secondary); color: var(--white); transform: translateY(-1px); }

/* ============ NAV ICONS (account + cart) ============ */
.vsc-nav-icons { display: flex; align-items: center; gap: 4px; }
.vsc-nav-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--midnight); background: transparent; border: none;
  cursor: pointer; transition: background 0.2s, color 0.2s;
  position: relative; text-decoration: none; padding: 0;
  font-family: inherit;
}
.vsc-nav-icon:hover { background: var(--rose-soft); color: var(--rose-hover); }
.vsc-cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 50%; background: var(--midnight); color: var(--white);
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
.vsc-cart-count[data-cart-count="0"] { display: none; }

/* ============ SIDE CART DRAWER ============ */
.vsc-cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 32, 64, 0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s; z-index: 998;
}
.vsc-cart-backdrop.active { opacity: 1; pointer-events: auto; }

.vsc-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100vw;
  background: var(--ivory);
  transform: translateX(100%);
  /* v4.49.3: ~300ms ease-out, transform-only + will-change = compositor-owned slide
     (the Ascend feel). MUST match the injected drawer style in vsc-cart.js. */
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  z-index: 999; display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(8, 32, 64, 0.18);
}
.vsc-cart-drawer.active { transform: translateX(0); }

.vsc-cart-header {
  padding: 22px 24px; background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.vsc-cart-header h3 {
  font-family: 'Inter', serif;
  font-size: 24px; font-weight: 600; color: var(--midnight);
  display: flex; align-items: center; gap: 8px;
}
.vsc-cart-header-count { color: var(--text-muted); font-weight: 400; font-size: 16px; }
.vsc-cart-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--midnight); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.vsc-cart-close:hover { background: var(--rose-soft); }

.vsc-cart-body {
  flex: 1; overflow-y: auto; padding: 16px;
  background: var(--ivory);
}
.vsc-cart-items { display: flex; flex-direction: column; gap: 12px; }

/* Cart item card — matched 1:1 to the aminoclub reference card:
   image left, content right; bold title, normal-case gray size line,
   then a baseline row of [qty pill] ......... [stacked price].
   Price stacks strike-over-now; the discounted "now" value is green
   (semantic savings signal, not a brand accent — used nowhere else). */
.vsc-cart-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px;
  display: grid; grid-template-columns: 84px 1fr;
  gap: 16px; align-items: center;
  position: relative;
}
.vsc-cart-item-img {
  width: 84px; height: 84px; border-radius: 14px;
  background: #F4B4C6; object-fit: contain;
  align-self: center;
}
.vsc-cart-item-details {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.vsc-cart-item-details h4 {
  font-size: 17px; font-weight: 700; color: var(--midnight);
  line-height: 1.25; padding-right: 24px; /* clear the absolute X */
}
.vsc-cart-item-size {
  font-size: 13px; font-weight: 500; letter-spacing: 0;
  color: var(--text-muted); text-transform: none;
}
.vsc-cart-item-bottom {
  margin-top: 14px; padding-top: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px;
}
/* Price stacks vertically, right-aligned: strike on top, big "now" below */
.vsc-cart-item-price {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; text-align: right;
}
.vsc-cart-item-price-strike {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 13px; font-weight: 500;
}
.vsc-cart-item-price-now {
  font-size: 18px; font-weight: 700; color: var(--midnight);
  line-height: 1.1;
}
.vsc-cart-item-price.has-discount .vsc-cart-item-price-now { color: #16A34A; }
/* ONE CYAN: the base .vsc-pdp-cart fill is var(--rose) = var(--vsc-cyan). This
   discounted state used to flip the SAME button to the deeper cyan, so the
   primary Add-to-Cart changed shade on discounted products. Fill is now the one
   cyan. (Text colour deliberately untouched — see --vsc-on-cyan.) */
.vsc-pdp-cart.has-discount { background: var(--vsc-cyan); color: var(--white); box-shadow: 0 8px 28px rgba(15, 123, 61, 0.35); }
.vsc-pdp-cart.has-discount:hover { background: #082040; }
.vsc-cart-item-remove {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none;
  font-size: 22px; color: #C0C5CE; cursor: pointer;
  line-height: 1; padding: 2px;
}
.vsc-cart-item-remove:hover { color: var(--midnight); }

/* Backorder / status badges */
.vsc-cart-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vsc-cart-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.vsc-cart-badge.in-stock { background: var(--vsc-cyan-wash); color: var(--vsc-cyan); }
.vsc-cart-badge.backorder { background: #FFF4E5; color: #B05A00; }

/* Quantity selector with discount */
.vsc-qty-wrapper { position: relative; display: inline-block; }
.vsc-qty-btn {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 100px; padding: 8px 14px 8px 16px;
  font-size: 15px; font-weight: 600; color: var(--midnight);
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 68px; justify-content: space-between;
}
.vsc-qty-btn:hover { border-color: var(--rose); }
.vsc-qty-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px; max-height: 240px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 40px rgba(8, 32, 64, 0.14);
  display: none; z-index: 10;
}
.vsc-qty-dropdown.active { display: block; }
.vsc-qty-option {
  width: 100%; padding: 10px 14px;
  background: transparent; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--midnight);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between;
  text-align: left;
}
.vsc-qty-option:hover { background: var(--ivory); }
.vsc-qty-option.active {
  background: var(--midnight); color: var(--white);
}
.vsc-qty-discount {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 100px;
  background: var(--vsc-cyan-wash); color: var(--vsc-cyan);
}
.vsc-qty-option.active .vsc-qty-discount {
  background: rgba(255, 255, 255, 0.2); color: var(--white);
}

/* Shipment Protection row */
.vsc-cart-protection {
  margin-top: 14px; padding: 14px 16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--midnight);
}
.vsc-cart-protection-icon { color: var(--vsc-cyan); flex-shrink: 0; }
.vsc-cart-protection-label { flex: 1; font-weight: 500; }
.vsc-cart-protection-tooltip {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: var(--text-muted);
  border: none; font-size: 11px; font-weight: 700; cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.vsc-cart-protection-free {
  font-size: 12px; font-weight: 700; color: var(--vsc-cyan);
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* Upsell card */
.vsc-cart-upsell {
  margin: 14px 16px 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px;
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 12px; align-items: center;
  position: relative;
}
.vsc-cart-upsell-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none;
  font-size: 14px; color: var(--text-muted); cursor: pointer;
  line-height: 1;
}
.vsc-cart-upsell-img {
  width: 48px; height: 48px; border-radius: 10px;
  background: #F4B4C6; object-fit: contain;
}
.vsc-cart-upsell-text strong {
  display: block; font-size: 13px; color: var(--midnight); margin-bottom: 2px;
}
.vsc-cart-upsell-text span { font-size: 11px; color: var(--text-muted); }
.vsc-cart-upsell-add {
  background: var(--midnight); color: var(--white);
  border: none; border-radius: 100px;
  padding: 8px 16px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.vsc-cart-upsell-add:hover { background: var(--blue-secondary); }

/* Footer (promo + subtotal + checkout) */
.vsc-cart-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.vsc-cart-promo {
  width: 100%;
  padding: 16px 24px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--midnight); cursor: pointer;
  background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit; font-weight: 500;
  text-align: left;
}
.vsc-cart-promo:hover { background: var(--ivory); }
.vsc-cart-totals { padding: 16px 24px 0; }
.vsc-cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.vsc-cart-subtotal-label { font-size: 15px; color: var(--midnight); font-weight: 600; }
.vsc-cart-subtotal-value {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.vsc-cart-subtotal-strike {
  font-size: 14px; color: var(--text-muted);
  text-decoration: line-through; font-weight: 400;
}
.vsc-cart-subtotal-amount {
  font-size: 18px; font-weight: 700; color: var(--midnight);
}
.vsc-cart-discount-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  font-size: 14px;
}
.vsc-cart-discount-label { color: var(--vsc-cyan); font-weight: 600; }
.vsc-cart-discount-amount { color: var(--vsc-cyan); font-weight: 700; font-size: 15px; }
.vsc-cart-shipping-progress {
  margin-bottom: 16px;
}
.vsc-cart-shipping-text {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--midnight);
  margin-bottom: 8px;
}
.vsc-cart-shipping-text strong { color: var(--vsc-cyan); }
.vsc-cart-progress-bar {
  height: 6px; background: var(--border); border-radius: 100px;
  overflow: hidden; position: relative;
}
/* ⚠️ DEAD RULE — DO NOT TRUST THIS ONE. vsc-cart.js injects its own
   `.vsc-cart-progress-fill{background:var(--vsc-cyan…)}` (a FLAT cyan) into a <style>
   appended to <head> at runtime, i.e. AFTER this file's <link>. Same specificity, so
   the later one wins and the drawer's progress bar is flat cyan, never this gradient.
   Left in place because the green stop is out of scope for the cyan unification, but
   if anyone ever changes the load order this bar silently turns into a green gradient.
   The cyan stop already reads the token, so it cannot drift. */
.vsc-cart-progress-fill {
  height: 100%; background: linear-gradient(90deg, #34A853 0%, var(--vsc-cyan) 100%);
  border-radius: 100px; transition: width 0.4s;
}
.vsc-cart-footer .vsc-cart-checkout {
  margin: 0 24px 20px;
  width: calc(100% - 48px);
}
.vsc-cart-checkout,
.vsc-cart-checkout:link,
.vsc-cart-checkout:visited,
.vsc-cart-checkout:active,
.vsc-cart-checkout:focus,
.vsc-cart-checkout:hover {
  margin: 0 24px 20px;
  width: calc(100% - 48px);
  background: var(--midnight);
  color: #FFFFFF !important;
  padding: 14px 24px; border-radius: 100px; border: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  line-height: 1.4;
  text-decoration: none !important;
  transition: background 0.3s;
}
.vsc-cart-checkout:hover { background: var(--blue-secondary); }
.vsc-cart-empty {
  padding: 60px 20px; text-align: center; color: var(--text-muted);
}
.vsc-cart-empty h4 {
  font-family: 'Inter', serif; font-size: 24px;
  color: var(--midnight); margin-bottom: 8px; font-weight: 500;
}

@media (max-width: 480px) {
  .vsc-cart-drawer { width: 100vw; }
}

/* ============ BUTTONS ============ */
.vsc-btn-primary {
  background: var(--rose); color: var(--midnight);
  padding: 17px 36px; border-radius: 100px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.3px;
  transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 28px rgba(var(--vsc-cyan-rgb), 0.45); border: none; cursor: pointer;
  font-family: inherit;
}
.vsc-btn-primary:hover {
  background: var(--rose-hover); transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(217, 138, 160, 0.5);
}
.vsc-btn-primary svg { transition: transform 0.3s; }
.vsc-btn-primary:hover svg { transform: translateX(4px); }

.vsc-btn-secondary {
  color: var(--midnight); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 17px 12px; border-bottom: 2px solid transparent;
  transition: border-color 0.3s; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font-family: inherit;
}
.vsc-btn-secondary:hover { border-bottom-color: var(--midnight); }

.vsc-btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 40px; border-radius: 100px;
  border: 1.5px solid var(--midnight); color: var(--midnight);
  font-weight: 600; font-size: 14px; letter-spacing: 0.5px;
  text-transform: uppercase; transition: all 0.3s; background: transparent; cursor: pointer; font-family: inherit;
}
.vsc-btn-outline:hover { background: var(--midnight); color: var(--white); }

/* ============ GENERIC PAGE HERO ============ */
.vsc-page-hero {
  padding: 140px 32px 48px;
  background:
    radial-gradient(ellipse 800px 600px at 85% 20%, var(--rose-soft) 0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at 10% 90%, #F0EDF5 0%, transparent 60%),
    var(--ivory);
  text-align: center;
}
.vsc-page-hero-container { max-width: 820px; margin: 0 auto; }
.vsc-page-hero .vsc-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--vsc-cyan); margin-bottom: 16px;
}
.vsc-page-hero h1 {
  font-family: 'Inter', serif;
  font-size: clamp(44px, 6vw, 76px); font-weight: 500;
  line-height: 1.05; color: var(--midnight);
  letter-spacing: -1.5px; margin-bottom: 24px;
}
.vsc-page-hero p {
  font-size: 19px; color: var(--text-muted);
  max-width: 620px; margin: 0 auto; line-height: 1.7;
}

/* ============ SECTIONS ============ */
.vsc-section { padding: 120px 32px; }
.vsc-section-ivory { background: var(--ivory); }
.vsc-section-midnight { background: var(--midnight); color: var(--white); }
.vsc-section-container { max-width: 1280px; margin: 0 auto; }
.vsc-section-header { text-align: center; margin-bottom: 72px; }
.vsc-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--vsc-cyan); margin-bottom: 16px;
}
.vsc-section-header h2 {
  font-family: 'Inter', serif;
  font-size: clamp(36px, 4.5vw, 58px); font-weight: 500;
  line-height: 1.1; letter-spacing: -1px; color: var(--midnight);
  margin-bottom: 20px;
}
.vsc-section-midnight .vsc-section-header h2 { color: var(--white); }
.vsc-section-header p {
  font-size: 18px; color: var(--text-muted);
  max-width: 620px; margin: 0 auto; line-height: 1.65;
}
.vsc-section-midnight .vsc-section-header p { color: rgba(255,255,255,0.75); }

/* ============ PRODUCT CARD ============ */
.vsc-shop-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  transition: transform 0.4s, box-shadow 0.4s;
  display: flex; flex-direction: column;
}
.vsc-shop-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(8, 32, 64, 0.12);
}
.vsc-shop-image {
  height: 300px !important;
  max-height: 300px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative; overflow: hidden;
}
/* Category-themed shop card image backgrounds */
.vsc-shop-card[data-category*="Metabolic" i] .vsc-shop-image    { background: #6B7A94 !important; }
.vsc-shop-card[data-category*="Cellular" i] .vsc-shop-image     { background: #6B7A94 !important; }
.vsc-shop-card[data-category*="Neuro" i] .vsc-shop-image        { background: var(--vsc-cyan) !important; }
.vsc-shop-card[data-category*="Regenerative" i] .vsc-shop-image { background: var(--vsc-cyan) !important; }
.vsc-shop-card[data-category*="Specialized" i] .vsc-shop-image  { background: #2A3A54 !important; }
.vsc-shop-bottle {
  width: 110px; height: 200px;
  background: linear-gradient(180deg, var(--midnight) 0%, var(--blue-secondary) 100%);
  border-radius: 12px 12px 16px 16px; position: relative;
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.2), 0 16px 32px rgba(8,32,64,0.3);
}
.vsc-shop-bottle::before {
  content: ''; position: absolute; top: -18px; left: 50%;
  transform: translateX(-50%); width: 38px; height: 20px;
  background: linear-gradient(180deg, #D4D8E0 0%, #9CA3B4 100%);
  border-radius: 5px 5px 2px 2px;
}
.vsc-shop-bottle::after {
  content: 'LUMINA'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', serif; font-size: 16px;
  font-weight: 600; color: var(--rose); letter-spacing: 2px;
}
.vsc-shop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(0.9);
}
.vsc-shop-tag {
  z-index: 1;
}
.vsc-product-img {
  width: 100%; max-height: 320px;
  object-fit: contain;
}
.vsc-gallery-img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--white);
}
.vsc-shop-tag {
  position: absolute; top: 20px; left: 20px;
  background: var(--white); color: var(--midnight);
  padding: 6px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase;
}
.vsc-shop-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.vsc-shop-category {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--vsc-cyan); margin-bottom: 10px;
}
.vsc-shop-name {
  font-family: 'Inter', serif;
  font-size: 26px; font-weight: 600; color: var(--midnight);
  margin-bottom: 10px; line-height: 1.1;
}
.vsc-shop-desc {
  font-size: 14px; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 24px; flex: 1;
}
.vsc-shop-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.vsc-shop-price { font-size: 22px; font-weight: 600; color: var(--midnight); font-family: 'Inter', serif; }
.vsc-shop-cart,
.vsc-shop-cart:link,
.vsc-shop-cart:visited,
.vsc-shop-cart:active,
.vsc-shop-cart:focus {
  background: var(--midnight);
  color: #FFFFFF !important;
  padding: 11px 22px; border-radius: 100px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  border: none; cursor: pointer; transition: all 0.3s; font-family: inherit;
  text-decoration: none !important;
  display: inline-block;
}
.vsc-shop-cart:hover { background: var(--rose); color: var(--midnight) !important; }

/* Whole shop card is clickable */
.vsc-shop-card { cursor: pointer; }

/* ============ FOOTER ============ */
.vsc-footer {
  background: var(--ivory); padding: 80px 32px 40px;
  border-top: 1px solid var(--border);
}
.vsc-footer-container { max-width: 1280px; margin: 0 auto; }
.vsc-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px; margin-bottom: 64px;
}
.vsc-footer-brand .vsc-logo { margin-bottom: 20px; }
.vsc-footer-tagline {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.7; max-width: 320px;
}
.vsc-footer h4 {
  font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--midnight); margin-bottom: 22px;
}
.vsc-footer-links { list-style: none; }
.vsc-footer-links li { margin-bottom: 14px; }
.vsc-footer-links a {
  font-size: 14px; color: var(--text-muted); transition: color 0.2s;
}
.vsc-footer-links a:hover { color: var(--rose-hover); }
.vsc-footer-bottom {
  padding-top: 36px; border-top: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.vsc-footer-copy { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 720px; }
.vsc-footer-socials { display: flex; gap: 14px; }
.vsc-footer-socials a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--midnight); transition: all 0.3s;
}
.vsc-footer-socials a:hover { background: var(--midnight); color: var(--white); border-color: var(--midnight); }

/* ============ RESEARCH BANNER ============ */
.vsc-research-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--midnight); color: var(--white);
  padding: 10px 20px; text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; z-index: 101;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vsc-research-banner strong { color: var(--rose); font-weight: 600; }
.vsc-page.has-banner .vsc-nav { top: 38px; }
.vsc-page.has-banner .vsc-hero,
.vsc-page.has-banner .vsc-page-hero { padding-top: 200px; }
/* Custom body templates (checkout, my-account) push their content below the fixed banner */
body.has-banner.vsc-checkout-page-body,
body.has-banner.vsc-myaccount-body { padding-top: 38px; }
@media (max-width: 640px) {
  body.has-banner.vsc-checkout-page-body,
  body.has-banner.vsc-myaccount-body { padding-top: 32px; }
}

/* ============ AGE GATE MODAL ============ */
.vsc-gate {
  position: fixed; inset: 0;
  background: rgba(8, 32, 64, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  z-index: 9999; display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.vsc-gate.active { display: flex; }
.vsc-gate-card {
  background: var(--white); border-radius: 28px;
  max-width: 520px; width: 100%; padding: 56px 48px;
  text-align: center; box-shadow: 0 40px 120px rgba(0,0,0,0.5);
}
.vsc-gate-mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--midnight) 0%, var(--blue-secondary) 60%, var(--rose) 100%);
  margin: 0 auto 24px; position: relative;
}
.vsc-gate-mark::after {
  content: ''; position: absolute; inset: 10px;
  border-radius: 50%; background: var(--white);
}
.vsc-gate-eyebrow {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--vsc-cyan); margin-bottom: 12px;
}
.vsc-gate-card h2 {
  font-family: 'Inter', serif;
  font-size: 42px; font-weight: 500; line-height: 1.05;
  color: var(--midnight); letter-spacing: -1px; margin-bottom: 18px;
}
.vsc-gate-card h2 .vsc-italic { color: var(--vsc-cyan); }
.vsc-gate-card p {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 32px;
}
.vsc-gate-card p strong { color: var(--midnight); }
.vsc-gate-checkbox {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left; font-size: 13px; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 28px; cursor: pointer;
  padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--ivory); transition: border-color 0.2s;
}
.vsc-gate-checkbox:hover { border-color: var(--rose); }
.vsc-gate-checkbox input { display: none; }
.vsc-gate-checkbox strong { color: var(--midnight); }
.vsc-gate-checkmark {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; margin-top: 1px;
}
.vsc-gate-checkbox input:checked ~ .vsc-gate-checkmark {
  background: var(--midnight); border-color: var(--midnight);
}
.vsc-gate-checkmark::after {
  content: ''; display: none; width: 6px; height: 10px;
  border: solid var(--white); border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.vsc-gate-checkbox input:checked ~ .vsc-gate-checkmark::after { display: block; }
.vsc-gate-actions { display: flex; gap: 12px; flex-direction: column; }
.vsc-gate-enter {
  width: 100%; background: var(--rose); color: var(--midnight);
  padding: 18px 32px; border-radius: 100px; border: none;
  font-weight: 600; font-size: 14px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  font-family: inherit; transition: all 0.3s;
  box-shadow: 0 8px 28px rgba(var(--vsc-cyan-rgb), 0.45);
}
.vsc-gate-enter:hover:not(:disabled) { background: var(--rose-hover); }
.vsc-gate-enter:disabled { opacity: 0.4; cursor: not-allowed; }
.vsc-gate-exit {
  background: none; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 14px;
  text-decoration: underline; font-family: inherit;
}
.vsc-gate-fine {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.3px; margin-top: 20px; line-height: 1.5;
}

@media (max-width: 640px) {
  .vsc-research-banner { font-size: 10px; padding: 9px 14px; letter-spacing: 0.5px; }
  .vsc-gate-card { padding: 40px 28px; }
  .vsc-gate-card h2 { font-size: 32px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .vsc-footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  /* .vsc-nav-links is now a full-screen slide-in overlay — controlled in the 900px breakpoint below */
  .vsc-page-hero { padding: 140px 24px 70px; }
  .vsc-section { padding: 80px 24px; }
  .vsc-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .vsc-footer-bottom { flex-direction: column; }
  .vsc-hamburger { display: inline-flex !important; }
}

/* ============ MOBILE HAMBURGER NAV ============ */
.vsc-hamburger {
  display: none;
  background: none; border: none; padding: 10px; margin-left: 4px;
  cursor: pointer; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--midnight);
  border-radius: 10px;
  transition: background 0.2s;
}
.vsc-hamburger:hover { background: var(--rose-soft); }
.vsc-hamburger svg { width: 24px; height: 24px; }

.vsc-mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 9990;
  background: var(--ivory);
  padding: 80px 24px 40px;
  overflow-y: auto;
}
.vsc-mobile-menu.active { display: block; }
.vsc-mobile-menu-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--midnight);
}
.vsc-mobile-menu ul {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column;
}
.vsc-mobile-menu li a {
  display: block; padding: 20px 8px;
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', serif;
  font-size: 24px; font-weight: 500;
  color: var(--midnight); text-decoration: none;
  letter-spacing: -0.3px;
}
.vsc-mobile-menu li a:hover { color: var(--rose-hover); }

/* ============ MOBILE P0/P1 FIXES ============ */
@media (max-width: 640px) {
  /* P0 — prevent iOS input zoom on focus (font-size must be ≥16px) */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="number"],
  select, textarea {
    font-size: 16px !important;
  }

  /* P0 — auth gate scrollable + tighter padding */
  .vsc-gate {
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 16px;
  }
  .vsc-gate-card { padding: 28px 22px; }
  .vsc-gate-card h2 { font-size: 26px; }

  /* P0 — reduce top padding on pages with banner */
  .vsc-page.has-banner .vsc-page-hero { padding-top: 150px; }

  /* P1 — 44×44 touch targets */
  .vsc-cart-close,
  .vsc-cart-item-remove,
  .vsc-cart-upsell-close,
  .vsc-qty-btn,
  .vsc-pdp-qty button,
  .vsc-footer-socials a {
    min-width: 44px; min-height: 44px;
  }
  .vsc-category-pill { padding: 12px 20px; min-height: 44px; }
  .vsc-tab-btn { min-height: 44px; }

  /* P1 — homepage hero visual overflow fix */
  .vsc-hero-container { grid-template-columns: 1fr !important; gap: 40px !important; }
  .vsc-hero-visual { height: auto !important; min-height: 460px; }
  .vsc-product-main {
    position: relative !important;
    width: 100% !important; max-width: 340px !important;
    right: auto !important; top: auto !important;
    margin: 0 auto !important;
  }
  .vsc-float-1, .vsc-float-2 { display: none !important; }

  /* P1 — PDP purchase row wrap (legacy: only when cart sits alone in .vsc-pdp-purchase) */
  .vsc-pdp-purchase { flex-wrap: wrap; gap: 12px; }
  .vsc-pdp-purchase .vsc-pdp-cart { flex: 1 1 100%; min-width: 100%; padding: 16px 24px; }
  /* v4.9.1: Add button now lives beside the CoA pill in .vsc-pdp-actions — must shrink to fit, not force 100% width */
  .vsc-pdp-actions .vsc-pdp-cart { flex: 1 1 auto; min-width: 0; white-space: nowrap; }

  /* P1 — shop hero stats tighter */
  .vsc-shop-stats { gap: 6px; }
  .vsc-shop-stat { padding: 14px 6px; }
  .vsc-shop-stat-num { font-size: 28px; }
  .vsc-shop-stat-label { font-size: 9px; letter-spacing: 1px; }

  /* P1 — side cart drawer item layout (matches aminoclub reference card) */
  .vsc-cart-item {
    grid-template-columns: 80px 1fr !important;
    padding: 16px !important;
    gap: 14px;
    align-items: center !important;
  }
  .vsc-cart-item-img { width: 80px !important; height: 80px !important; align-self: center !important; }
  /* qty pill + stacked price share one baseline row */
  .vsc-cart-item-bottom { flex-wrap: nowrap; gap: 10px; margin-top: 14px; align-items: flex-end; }

  /* P1 — qty dropdown stays inside viewport */
  .vsc-cart-drawer .vsc-qty-dropdown {
    right: 0 !important; left: auto !important;
  }

  /* P1 — FAQ sidebar collapse */
  .vsc-faq-nav { display: none; }

  /* P1 — product gallery thumb grid */
  .vsc-gallery-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 10px;
  }

  /* P2 — category pills horizontal scroll to avoid 4-row stack */
  .vsc-category-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .vsc-category-pills::-webkit-scrollbar { display: none; }
  .vsc-category-pill { flex-shrink: 0; }
}


/* ===== SHOP PAGE STYLES (from shop.html) ===== */
/* ========== Shop hero with stats ========== */
  .vsc-shop-hero {
    padding: 130px 32px 60px;
    background:
      radial-gradient(ellipse 900px 600px at 85% 25%, var(--rose-soft) 0%, transparent 60%),
      radial-gradient(ellipse 600px 500px at 10% 90%, #F0EDF5 0%, transparent 60%),
      var(--ivory);
    position: relative; overflow: hidden;
  }
  .vsc-shop-hero-container {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 60px; align-items: center;
  }
  .vsc-shop-hero-left { max-width: 580px; }
  .vsc-shop-hero .vsc-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--vsc-cyan); margin-bottom: 16px;
  }
  .vsc-shop-hero h1 {
    font-family: 'Inter', serif;
    font-size: clamp(44px, 6vw, 72px); font-weight: 500;
    line-height: 1.02; color: var(--midnight);
    letter-spacing: -1.5px; margin-bottom: 24px;
  }
  .vsc-shop-hero p {
    font-size: 17px; color: var(--text-muted);
    line-height: 1.7; max-width: 540px;
  }
  .vsc-shop-hero p strong { color: var(--midnight); }
  .vsc-shop-hero-desc-mobile { display: none; }

  .vsc-shop-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .vsc-shop-stat {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 18px;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(8, 32, 64, 0.04);
  }
  .vsc-shop-stat-num {
    font-family: 'Inter', serif;
    font-size: 44px; font-weight: 600;
    color: var(--midnight);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
  }
  .vsc-shop-stat-num .vsc-italic { color: var(--vsc-cyan); font-style: italic; }
  .vsc-shop-stat-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ========== Filter bar ========== */
  .vsc-filter-bar {
    max-width: 1280px; margin: 0 auto 40px;
  }
  .vsc-filter-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
  }
  .vsc-search {
    flex: 1; min-width: 240px; max-width: 480px;
    display: flex; align-items: center; gap: 12px;
    background: var(--white); border: 1px solid var(--border);
    padding: 10px 20px; border-radius: 100px;
    transition: border-color 0.2s;
  }
  .vsc-search:focus-within { border-color: var(--rose); }
  .vsc-search svg { color: var(--text-muted); flex-shrink: 0; }
  .vsc-search input {
    flex: 1; border: none; outline: none;
    font-size: 14px; color: var(--midnight);
    font-family: inherit; background: transparent;
  }
  .vsc-search input::placeholder { color: var(--text-muted); }

  .vsc-shop-sort {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--text-muted);
  }
  .vsc-shop-sort select {
    background: var(--white); border: 1px solid var(--border);
    padding: 10px 18px; border-radius: 100px;
    font-size: 13px; color: var(--midnight); font-family: inherit;
    cursor: pointer; outline: none;
  }

  .vsc-category-pills {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .vsc-category-pill {
    padding: 10px 20px; border-radius: 100px;
    background: var(--white); border: 1px solid var(--border);
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; transition: all 0.2s;
    font-family: inherit;
  }
  .vsc-category-pill:hover:not(.active) { border-color: var(--rose); color: var(--midnight); }
  .vsc-category-pill.active {
    background: var(--midnight); color: var(--white);
    border-color: var(--midnight);
  }
  .vsc-category-pill span {
    margin-left: 6px; opacity: 0.6; font-size: 11px;
  }
  .vsc-category-pill.active span { opacity: 0.8; }

  .vsc-shop-count {
    font-size: 13px; color: var(--text-muted); letter-spacing: 0.3px;
    padding-top: 12px; border-top: 1px solid var(--border);
  }
  .vsc-shop-count strong { color: var(--midnight); }

  /* ========== Grid (full width, no sidebar) ========== */
  .vsc-shop-grid {
    max-width: 1280px; margin: 0 auto;
  }
  .vsc-shop-results { min-height: 500px; }
  .vsc-products-grid-lg {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  @media (max-width: 1024px) {
    .vsc-shop-hero-container { grid-template-columns: 1fr; gap: 40px; }
    .vsc-products-grid-lg { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    /* Center-align the hero copy on mobile */
    .vsc-shop-hero-left { max-width: none; text-align: center; margin: 0 auto; }
    .vsc-shop-hero-left .vsc-eyebrow { display: inline-block; }
    .vsc-shop-hero-left p { max-width: 460px; margin-left: auto; margin-right: auto; }
    /* Swap to short, formatted mobile description */
    .vsc-shop-hero-desc-desktop { display: none !important; }
    .vsc-shop-hero-desc-mobile { display: block !important; font-size: 13px !important; line-height: 1.55 !important; max-width: 320px !important; }
    /* Hide the Sort By dropdown on mobile */
    .vsc-shop-sort { display: none !important; }
  }
  @media (max-width: 640px) {
    .vsc-shop-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .vsc-shop-stat { padding: 18px 10px; }
    .vsc-shop-stat-num { font-size: 32px; }
    .vsc-products-grid-lg { grid-template-columns: 1fr; }
  }

/* ===== PRODUCT PAGE STYLES (from product.html) ===== */
.vsc-product-detail {
    padding: 32px 32px 80px;
    background: var(--ivory);
  }
  .vsc-breadcrumb {
    max-width: 1280px; margin: 0 auto 32px;
    font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px;
  }
  .vsc-breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
  .vsc-breadcrumb a:hover { color: var(--rose-hover); }
  .vsc-breadcrumb span { margin: 0 10px; opacity: 0.5; }
  .vsc-breadcrumb strong { color: var(--midnight); }

  .vsc-product-layout {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 80px; align-items: start;
  }

  /* Gallery */
  .vsc-gallery { position: sticky; top: 100px; }
  .vsc-gallery-main {
    background: linear-gradient(160deg, var(--rose-soft) 0%, #E8EDF5 100%);
    border-radius: 28px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .vsc-gallery-main .vsc-shop-bottle {
    width: 200px; height: 360px; border-radius: 16px 16px 24px 24px;
  }
  .vsc-gallery-main .vsc-shop-bottle::before { width: 60px; height: 30px; top: -26px; }
  .vsc-gallery-main .vsc-shop-bottle::after { font-size: 26px; }
  .vsc-gallery-thumbs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-top: 18px;
  }
  .vsc-gallery-thumb {
    aspect-ratio: 1 / 1; border-radius: 14px;
    background: linear-gradient(160deg, var(--rose-soft) 0%, #E8EDF5 100%);
    border: 2px solid transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s;
  }
  .vsc-gallery-thumb.active { border-color: var(--midnight); }
  .vsc-gallery-thumb .vsc-shop-bottle {
    width: 45px; height: 80px; border-radius: 6px 6px 10px 10px;
  }
  .vsc-gallery-thumb .vsc-shop-bottle::before, .vsc-gallery-thumb .vsc-shop-bottle::after { display: none; }

  /* Info */
  /* Product title = the homepage h1 system (display face, 400, -0.022em, 1.06).
     Was Inter 500 with a `serif` fallback and an absolute -1px track. */
  .vsc-pdp-info h1 {
    font-family: var(--grotesk, 'Onest', sans-serif);
    font-size: clamp(40px, 5vw, 60px); font-weight: 400;
    line-height: 1.06; letter-spacing: -0.022em; color: var(--midnight);
    margin-bottom: 14px;
  }
  .vsc-pdp-category {
    font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--vsc-cyan); margin-bottom: 14px;
  }
  .vsc-pdp-reviews {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px; padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .vsc-pdp-reviews .vsc-trust-stars {
    color: var(--vsc-cyan); font-size: 15px; letter-spacing: 2px;
  }
  .vsc-pdp-reviews span { font-size: 13px; color: var(--text-muted); }
  .vsc-pdp-price {
    font-family: 'Inter', serif;
    font-size: 42px; font-weight: 600; color: var(--midnight);
    margin-bottom: 8px;
  }
  .vsc-pdp-subscribe {
    font-size: 13px; color: var(--text-muted); margin-bottom: 28px;
  }
  .vsc-pdp-subscribe strong { color: var(--vsc-cyan); }
  .vsc-pdp-desc {
    font-size: 16px; color: var(--text-muted); line-height: 1.7;
    margin-bottom: 32px;
  }

  .vsc-pdp-options { margin-bottom: 32px; }
  .vsc-pdp-option-label {
    font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--midnight); margin-bottom: 12px; display: block;
  }
  .vsc-pdp-option-label span { color: var(--text-muted); font-weight: 400; }
  .vsc-pdp-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px; margin-bottom: 24px;
  }
  .vsc-pdp-size {
    padding: 12px 8px; border-radius: 12px;
    border: 1.5px solid var(--border); background: var(--white);
    cursor: pointer; text-align: center; transition: all 0.2s;
    text-decoration: none; min-width: 0;
  }
  .vsc-pdp-size.active { border-color: var(--midnight); background: var(--ivory); }
  .vsc-pdp-size strong { display: block; font-size: 14px; color: var(--midnight); margin-bottom: 2px; }
  .vsc-pdp-size span { font-size: 12px; color: var(--text-muted); }

  .vsc-pdp-purchase { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
  .vsc-pdp-qty {
    display: flex; align-items: center;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 100px; padding: 4px;
  }
  .vsc-pdp-qty button {
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; border: none; font-size: 18px;
    color: var(--midnight); cursor: pointer;
  }
  .vsc-pdp-qty input {
    width: 40px; border: none; text-align: center;
    font-size: 15px; font-weight: 600; color: var(--midnight);
    font-family: inherit; outline: none;
  }
  .vsc-pdp-cart {
    flex: 1; background: var(--rose); color: var(--midnight);
    padding: 19px 32px; border-radius: 100px;
    font-weight: 600; font-size: 15px; letter-spacing: 0.3px;
    border: none; cursor: pointer; transition: all 0.3s;
    box-shadow: 0 8px 28px rgba(var(--vsc-cyan-rgb), 0.45);
    font-family: inherit;
  }
  .vsc-pdp-cart:hover { background: var(--rose-hover); }

  .vsc-pdp-benefits {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; padding-top: 28px; border-top: 1px solid var(--border);
  }
  .vsc-pdp-benefit {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-muted);
  }
  .vsc-pdp-benefit svg { color: var(--vsc-cyan); flex-shrink: 0; }

  /* Tabs */
  .vsc-pdp-tabs {
    max-width: 1280px; margin: 100px auto 0;
    border-top: 1px solid var(--border);
    padding-top: 60px;
  }
  .vsc-tab-nav {
    display: flex; gap: 40px; border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
  }
  .vsc-tab-btn {
    background: none; border: none; padding: 16px 0;
    font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; font-family: inherit;
    text-transform: uppercase;
  }
  .vsc-tab-btn.active { color: var(--midnight); border-bottom-color: var(--midnight); }

  .vsc-tab-content { display: none; max-width: 820px; }
  .vsc-tab-content.active { display: block; }
  .vsc-tab-content p {
    font-size: 16px; color: var(--text-muted);
    line-height: 1.8; margin-bottom: 20px;
  }
  .vsc-tab-content h4 {
    font-family: 'Inter', serif;
    font-size: 26px; color: var(--midnight); margin: 28px 0 14px;
  }
  .vsc-ingredient-list { list-style: none; padding: 0; }
  .vsc-ingredient-list li {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; gap: 24px;
  }
  .vsc-ingredient-list strong { font-family: 'Inter', serif; font-size: 18px; color: var(--midnight); }
  .vsc-ingredient-list span { font-size: 14px; color: var(--text-muted); max-width: 500px; text-align: right; }

  .vsc-related { padding: 100px 32px; background: var(--white); }
  .vsc-related-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 28px; max-width: 1280px; margin: 0 auto;
  }

  @media (max-width: 1024px) {
    .vsc-product-layout { grid-template-columns: 1fr; gap: 48px; }
    .vsc-gallery { position: static; }
    .vsc-related-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .vsc-pdp-benefits { grid-template-columns: 1fr; gap: 8px !important; padding-top: 16px !important; }
    .vsc-pdp-benefit { font-size: 12px !important; }
    .vsc-tab-nav { gap: 20px; overflow-x: auto; }
    .vsc-related-grid { grid-template-columns: 1fr; }
    /* Hide secondary thumbnail on mobile */
    .vsc-gallery-thumbs { display: none !important; }
    /* Tighter product layout */
    .vsc-product-layout { gap: 20px !important; }
    .vsc-gallery-main { border-radius: 18px !important; }
    .vsc-pdp-info h1 { font-size: 30px !important; margin-bottom: 4px !important; line-height: 1.1 !important; }
    .vsc-pdp-category { font-size: 11px !important; margin-bottom: 8px !important; letter-spacing: 1.2px !important; }
    .vsc-pdp-sku { font-size: 11px !important; margin-bottom: 8px !important; }
    .vsc-pdp-reviews { margin-bottom: 14px !important; padding-bottom: 14px !important; gap: 8px !important; }
    .vsc-pdp-reviews .vsc-trust-stars { font-size: 12px !important; }
    .vsc-pdp-reviews span { font-size: 12px !important; }
    .vsc-pdp-qtyrow .vsc-pdp-price { font-size: 26px !important; margin: 0 0 0 auto !important; }
    .vsc-pdp-subscribe { font-size: 12px !important; margin-bottom: 14px !important; }
    .vsc-pdp-desc { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }
    .vsc-pdp-options { margin-bottom: 16px !important; }
    .vsc-pdp-option-label { font-size: 14px !important; margin: 0 !important; }
    .vsc-pdp-options .vsc-pdp-sizes { gap: 8px !important; margin: 0 !important; }
    .vsc-pdp-cart { padding: 14px 24px !important; font-size: 14px !important; }
  }

  /* ============ COMPOUND INFORMATION ============ */
  .vsc-compound-info, .vsc-sources {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 0;
  }
  .vsc-compound-info { border-top: 1px solid var(--border); }
  .vsc-sources { border-top: 1px solid var(--border); }
  .vsc-compound-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 32px;
  }
  .vsc-compound-header-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--vsc-cyan-wash); color: var(--vsc-cyan);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .vsc-compound-header-icon.sources { background: var(--rose-soft); color: var(--vsc-cyan); }
  .vsc-compound-header h2 {
    font-family: 'Inter', serif;
    font-size: 36px; font-weight: 600; color: var(--midnight);
    line-height: 1.1; letter-spacing: -0.5px;
    margin-bottom: 4px;
  }
  .vsc-compound-header p {
    font-size: 14px; color: var(--text-muted);
    margin: 0;
  }

  .vsc-compound-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .vsc-compound-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 20px; padding: 32px;
  }
  .vsc-compound-card-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 12px;
  }
  .vsc-compound-card h3 {
    font-size: 22px; font-weight: 700; color: var(--midnight);
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
  }
  .vsc-compound-specs {
    background: var(--ivory); border-radius: 14px;
    padding: 4px 20px; margin-bottom: 16px;
  }
  .vsc-compound-specs div {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  .vsc-compound-specs div:last-child { border-bottom: none; }
  .vsc-compound-specs dt { color: var(--text-muted); font-weight: 400; }
  .vsc-compound-specs dd {
    color: var(--midnight); font-weight: 700; margin: 0;
    font-family: 'Inter', sans-serif;
  }
  .vsc-compound-specs dd.mono { font-family: 'Courier New', monospace; font-size: 13px; }

  .vsc-compound-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--vsc-cyan); font-weight: 500;
    text-decoration: none; margin-top: 8px;
  }
  .vsc-compound-link:hover { color: #082040; }

  .vsc-compound-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
  }
  .vsc-compound-pill {
    padding: 8px 16px; border-radius: 100px;
    background: var(--ivory); border: 1px solid var(--border);
    font-size: 13px; font-weight: 500; color: var(--midnight);
  }
  .vsc-compound-storage {
    display: flex; flex-direction: column; gap: 10px;
  }
  .vsc-compound-storage-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-radius: 14px;
    background: var(--ivory); border: 1px solid var(--border);
  }
  .vsc-compound-storage-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  /* cold / warm / special used to be THREE different blues (#1E6FBF, the cyan,
     and the hover tint) sitting next to each other in the same block. The glyph
     carries the meaning here, not the colour — so all three are THE cyan now.
     NOTE: on the PDP this is still overridden to #4FA3FF by vsc-dark.css:173,
     which is outside this file. That override has to go for the PDP to match. */
  .vsc-compound-storage-icon.cold { background: var(--vsc-cyan-wash); color: var(--vsc-cyan); }
  .vsc-compound-storage-icon.warm { background: var(--vsc-cyan-wash); color: var(--vsc-cyan); }
  .vsc-compound-storage-icon.special { background: var(--rose-soft); color: var(--vsc-cyan); }
  .vsc-compound-storage-text {
    font-size: 13px; color: var(--text-muted);
  }
  .vsc-compound-storage-text strong {
    display: block; color: var(--midnight); font-weight: 700;
    font-size: 15px;
  }

  /* ============ SOURCES & REFERENCES ============ */
  .vsc-sources-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .vsc-source-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 18px; padding: 22px;
    display: flex; flex-direction: column;
  }
  .vsc-source-journal {
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--vsc-cyan);
    margin-bottom: 10px; line-height: 1.4;
  }
  .vsc-source-title {
    font-size: 14px; font-weight: 600; color: var(--midnight);
    line-height: 1.4; margin-bottom: 14px;
  }
  .vsc-source-meta {
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 10px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
  }
  .vsc-source-meta span:not(:last-child)::after {
    content: '•'; margin-left: 8px; opacity: 0.5;
  }
  .vsc-source-authors {
    font-size: 12px; color: var(--text-muted);
    font-style: italic; margin-bottom: 12px;
    line-height: 1.5;
  }
  .vsc-source-link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--vsc-cyan); font-weight: 500;
    text-decoration: none;
  }
  .vsc-source-link:hover { color: #082040; }
  .vsc-sources-note {
    margin-top: 24px; padding: 14px 18px;
    background: var(--ivory); border-radius: 12px;
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
  }
  .vsc-sources-empty {
    padding: 40px 24px; text-align: center;
    background: var(--ivory); border-radius: 16px;
    color: var(--text-muted); font-size: 14px;
  }

  @media (max-width: 1024px) {
    .vsc-compound-grid { grid-template-columns: 1fr; }
    .vsc-sources-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .vsc-sources-grid { grid-template-columns: 1fr; }
    .vsc-compound-info, .vsc-sources { padding: 40px 0; }
    .vsc-compound-header h2 { font-size: 28px; }
    /* Stop long spec values (the amino-acid Sequence + Formula are unbreakable tokens)
       from setting the card's min-content width and pushing the whole page wider than
       the phone. Let the grid item + flex rows shrink, and let the values wrap/break. */
    .vsc-compound-card { min-width: 0 !important; }
    .vsc-compound-grid { min-width: 0; }
    .vsc-compound-specs div { min-width: 0; gap: 14px; }
    .vsc-compound-specs dt { flex-shrink: 0; }
    .vsc-compound-specs dd { min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: right; }
    .vsc-compound-specs dd.mono { word-break: break-all; }
  }

/* =============================================================
   Lumina Checkout Page — overrides WC classic checkout styling.
   ============================================================= */

/* Load Inter for the checkout page (scoped — rest of site keeps Inter/Cormorant) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Checkout palette — DARK NAVY (v4.49.0 single-page rebuild).
 *
 * The dark look is delivered HERE, by repainting this token block, NOT by joining
 * html.vsc-dark — the checkout deliberately stays out of that gate (see
 * vsv4_dark_preview_gate in functions.php) so vsc-dark.css's !important rules and
 * the live snippets keyed on it never touch this page. Every rule downstream of
 * these tokens flips with them; hardcoded light values inside this checkout
 * section were converted to token refs in the same pass. body.vsc-co-dark
 * (page-checkout.php) is the specificity anchor for the overrides that live in
 * vsc-checkout.css.
 *
 *   --vsc-field is NEW: inputs want an OPAQUE navy (autofill + Stripe iframes sit
 *   on it), while cards keep the site's translucent panel fill.
 *   --vsc-tile is NEW: the light photo tile behind product cut-outs — the same
 *   light-tile-on-dark-card pattern the shop's stack cards use. */
.vsc-checkout-page-body {
  --vsc-bg: #0F1620;
  --vsc-card: rgba(38, 46, 61, 0.55);
  --vsc-field: #141D2E;
  --vsc-tile: #EBECEF;
  --vsc-border: rgba(255, 255, 255, 0.08);
  --vsc-text: #EEF4FB;
  --vsc-muted: #94A3B8;
  --vsc-green: var(--vsc-cyan);
  --vsc-green-bg: rgba(14, 165, 233, 0.10);
  --vsc-req: #F87171;
  background: linear-gradient(180deg, #262E3D 0%, #1A2230 45%, #0F1620 100%) fixed, #0F1620;
  margin: 0;
  color: var(--vsc-text);
  color-scheme: dark;
  font-family: 'Inter', 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}
.vsc-checkout-page-body *,
.vsc-checkout-page-body input,
.vsc-checkout-page-body select,
.vsc-checkout-page-body textarea,
.vsc-checkout-page-body button {
  font-family: 'Inter', 'Inter', system-ui, -apple-system, sans-serif;
}
/* transparent: the page ground is the body's navy gradient (token block above) */
.vsc-checkout-page { background: transparent; min-height: 80vh; padding: 0 0 80px; }

.vsc-checkout-topbar {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--vsc-border);
}
.vsc-checkout-topbar .vsc-checkout-back { justify-self: start; }
.vsc-checkout-logo {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', serif;
  font-size: 22px; font-weight: 600; color: var(--midnight);
  text-decoration: none; letter-spacing: -0.3px;
}
.vsc-checkout-logo .vsc-logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--rose-soft), var(--rose) 70%);
  box-shadow: 0 4px 12px rgba(var(--vsc-cyan-rgb), 0.4);
}
.vsc-checkout-topbar .vsc-checkout-secure { justify-self: end; }
@media (max-width: 640px) {
  /* 2-col layout on mobile: Back on left, Secure on right, hide center logo */
  .vsc-checkout-topbar {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px 18px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--vsc-border);
  }
  .vsc-checkout-logo { display: none !important; }
  .vsc-checkout-back {
    font-size: 14px; gap: 8px;
    color: var(--vsc-text);
    justify-self: start;
  }
  .vsc-checkout-back svg { width: 18px; height: 18px; }
  .vsc-checkout-secure {
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
    gap: 6px;
    justify-self: end;
    border-radius: 100px;
  }
  .vsc-checkout-secure svg { width: 13px; height: 13px; }
}
.vsc-checkout-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--vsc-text); font-weight: 600; font-size: 14px;
  text-decoration: none; transition: color 0.2s;
}
.vsc-checkout-back:hover { color: var(--vsc-muted); }
.vsc-checkout-secure {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: var(--vsc-card); border: 1px solid var(--vsc-cyan-tint);
  color: var(--vsc-green); font-weight: 600; font-size: 13px;
}
.vsc-checkout-secure svg { color: var(--vsc-green); }

.vsc-checkout-container {
  max-width: 1280px; margin: 0 auto;
  padding: 0 32px;
}

.vsc-checkout-header { margin-bottom: 20px; padding-top: 24px; }
.vsc-checkout-header h1 {
  font-family: inherit;
  font-size: clamp(26px, 2.8vw, 32px); font-weight: 800;
  color: var(--vsc-text); letter-spacing: -0.5px; margin: 0 0 4px;
}
.vsc-checkout-header p { font-size: 13px; color: var(--vsc-muted); }
@media (max-width: 640px) {
  .vsc-checkout-header { margin-bottom: 8px !important; padding-top: 12px !important; }
  .vsc-checkout-header h1 { font-size: 20px !important; margin-bottom: 2px !important; }
  .vsc-checkout-header p { font-size: 12px !important; }
}

/* ============ MOBILE STICKY BOTTOM BAR + ORDER SUMMARY SHEET ============ */
.vsc-mobile-bar { display: none; }
@media (max-width: 768px) {
  .vsc-mobile-bar {
    display: block; position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--vsc-field, #fff);
    border-top: 1px solid var(--vsc-border, #E5E5E5);
    padding: 8px 20px 14px;
    z-index: 998;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
    cursor: pointer;
  }
  .vsc-mobile-bar-chevron {
    display: flex; justify-content: center; margin-bottom: 4px;
  }
  .vsc-mobile-bar-chevron svg { color: var(--vsc-cyan); }
  .vsc-mobile-bar-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px;
  }
  .vsc-mobile-bar-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--vsc-cyan, #0EA5E9); color: var(--vsc-on-cyan, #fff);
    font-weight: 700; font-size: 12px;
    margin-right: 8px;
  }
  .vsc-mobile-bar-count { color: var(--vsc-muted, #6B7280); display: inline-flex; align-items: center; }
  .vsc-mobile-bar-total { color: var(--vsc-muted, #6B7280); }
  .vsc-mobile-bar-total strong { font-size: 16px; color: var(--vsc-text, #082040); margin-left: 4px; font-weight: 700; }
  .vsc-checkout-page { padding-bottom: 90px !important; }
}
.vsc-mobile-summary-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 9998; opacity: 0; transition: opacity 0.3s;
}
.vsc-mobile-summary-backdrop.is-open { opacity: 1; }
.vsc-mobile-summary-backdrop[hidden] { display: none; }
.vsc-mobile-summary-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--vsc-field, #fff);
  border-radius: 20px 20px 0 0;
  z-index: 9999;
  max-height: 85vh; max-height: 85svh; overflow-y: auto;
  padding: 12px 20px 24px;
  transform: translateY(100%); transition: transform 0.3s ease;
}
.vsc-mobile-summary-sheet.is-open { transform: translateY(0); }
.vsc-mobile-summary-sheet[hidden] { display: none; }
.vsc-mobile-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(148, 163, 184, 0.45); margin: 0 auto 12px;
}
.vsc-mobile-sheet-title {
  text-align: center; font-size: 17px; font-weight: 700;
  color: var(--vsc-text, #082040); margin: 0 0 4px;
}
.vsc-mobile-sheet-meta {
  text-align: center; font-size: 13px; color: var(--vsc-muted, #6B7280);
  margin: 0 0 16px;
}
.vsc-mobile-sheet-items { border-top: 1px solid var(--vsc-border, #E5E5E5); padding-top: 14px; }
.vsc-mobile-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.vsc-mobile-sheet-item img {
  width: 56px; height: 56px; border-radius: 8px;
  object-fit: contain; background: var(--vsc-tile, #F5F5F5);
}
.vsc-mobile-sheet-item-info { flex: 1; }
.vsc-mobile-sheet-item-name { font-weight: 600; font-size: 14px; color: var(--vsc-text, #082040); }
.vsc-mobile-sheet-item-qty { font-size: 12px; color: var(--vsc-muted, #6B7280); margin-top: 2px; }
.vsc-mobile-sheet-item-price { font-weight: 700; color: var(--vsc-text, #082040); font-size: 14px; }
.vsc-mobile-sheet-promo-wrap {
  border-top: 1px solid var(--vsc-border, #E5E5E5); border-bottom: 1px solid var(--vsc-border, #E5E5E5);
  margin: 8px 0 14px;
  padding: 4px 0;
}
.vsc-mobile-sheet-promo {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--vsc-text, #082040);
  background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
  font-family: inherit;
}
.vsc-mobile-promo-form {
  display: flex; gap: 8px; padding: 0 0 12px;
}
.vsc-mobile-promo-form[hidden] { display: none; }
.vsc-mobile-promo-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--vsc-border, #E5E5E5);
  border-radius: 10px;
  font-size: 13px; font-family: inherit;
  outline: none;
  background: var(--vsc-field, #fff);
  color: var(--vsc-text, #082040);
}
.vsc-mobile-promo-input:focus { border-color: var(--vsc-cyan, #0EA5E9); }
.vsc-mobile-promo-apply {
  background: var(--vsc-cyan, #0EA5E9); color: var(--vsc-on-cyan, #fff);
  border: none; border-radius: 10px;
  padding: 10px 18px; font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.vsc-mobile-promo-apply:disabled { opacity: 0.6; cursor: wait; }
.vsc-mobile-promo-msg {
  font-size: 12px; padding: 4px 0 8px;
  color: var(--vsc-cyan);
}
.vsc-mobile-promo-msg.is-error { color: #F87171; }
.vsc-mobile-promo-msg[hidden] { display: none; }
.vsc-mobile-sheet-totals {
  padding-top: 4px;
}
.vsc-mobile-sheet-row {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--vsc-text, #082040); margin-bottom: 8px;
}
.vsc-mobile-sheet-row .is-free { color: var(--vsc-cyan); font-weight: 600; }
.vsc-mobile-sheet-row .is-discount { color: var(--vsc-cyan); }
.vsc-mobile-sheet-total {
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: 16px; color: var(--vsc-text, #082040);
  padding-top: 14px; border-top: 1px solid var(--vsc-border, #E5E5E5);
  margin-top: 6px;
}
.vsc-mobile-sheet-done {
  width: 100%; padding: 16px;
  background: var(--vsc-cyan, #0EA5E9); color: var(--vsc-on-cyan, #fff);
  border: none; border-radius: 100px;
  font-weight: 700; font-size: 14px;
  margin-top: 18px; cursor: pointer;
  font-family: inherit;
}

/* 2-column layout: main form + sticky order summary sidebar */
.vsc-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* Cards */
.vsc-checkout-card {
  background: var(--vsc-card);
  border: 1px solid var(--vsc-border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 22px 26px;
}
.vsc-checkout-card.is-locked { display: none; }
.vsc-checkout-step-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.vsc-checkout-step-head-left {
  display: flex; align-items: center; gap: 14px;
}
.vsc-checkout-step-head h3 {
  font-family: inherit;
  font-size: 17px; font-weight: 700; color: var(--vsc-text);
  margin: 0; letter-spacing: -0.2px;
}
.vsc-checkout-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vsc-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.vsc-step-check { display: none; }
.vsc-checkout-card.is-complete .vsc-step-check { display: inline-block; }
.vsc-checkout-card.is-complete .vsc-checkout-step-num { background: var(--midnight); }
.vsc-step-edit {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--vsc-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  display: none;
}
.vsc-checkout-card.is-complete .vsc-step-edit { display: inline-block; }
.vsc-step-edit:hover { color: var(--rose-hover); }

/* Trust icons row */
.vsc-checkout-trust {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 0 0 14px;
  font-size: 11px; font-weight: 500; color: var(--vsc-green);
}
.vsc-checkout-trust svg { stroke: var(--vsc-green); }
.vsc-checkout-trust span {
  display: inline-flex; align-items: center; gap: 6px;
}
.vsc-checkout-trust svg { flex-shrink: 0; }
.vsc-checkout-card.is-complete .vsc-checkout-trust { display: none; }

/* Continue button at bottom of step 1 */
.vsc-step-continue {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; min-width: 220px; margin: 24px auto 4px;
  padding: 14px 32px;
  background: var(--vsc-text); color: #fff;
  border: none; border-radius: 100px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: 0.3px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-step-continue:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,10,10,0.2); }
/* Center the continue button in its column */
.vsc-step-body { display: flex; flex-direction: column; }
.vsc-step-body > .vsc-step-continue { align-self: center; }

/* Collapsed summary view — hidden by default, shown only when card is complete */
.vsc-step-summary {
  display: none;
  grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.vsc-summary-label {
  font-size: 13px; font-weight: 700; color: var(--vsc-text);
  margin-bottom: 10px;
}
.vsc-summary-value {
  font-size: 14px; color: var(--vsc-text); line-height: 1.6;
}
.vsc-summary-hint {
  font-size: 12px; color: var(--vsc-muted);
  margin-top: 8px;
}
.vsc-checkout-card.is-complete [data-step-body] { display: none; }
.vsc-checkout-card.is-complete .vsc-step-summary { display: grid; }

/* Mobile: stack summary columns as individual cards */
@media (max-width: 768px) {
  .vsc-step-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .vsc-summary-col {
    background: #F5F5F5;
    border-radius: 12px;
    padding: 14px 16px;
  }
  .vsc-summary-label { margin-bottom: 6px !important; font-size: 13px !important; }
  .vsc-summary-value { font-size: 14px !important; color: var(--vsc-muted) !important; }
  .vsc-summary-hint { font-size: 11px !important; margin-top: 6px !important; }
}

/* 3-step progress indicator at top of checkout */
/* Named steps, not anonymous dots — a shopper mid-checkout should be able to see what
   comes next without guessing. The dots keep their data-progress-dot hooks (vsc-checkout.js
   toggles is-active/is-current on them); only their look and the labels are new. */
.vsc-checkout-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; max-width: 560px; margin: 0 auto 24px;
  padding-top: 16px;
}
.vsc-progress-step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.vsc-progress-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #E2E8F0; color: #94A3B8;
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: background 0.3s, color 0.3s;
}
.vsc-progress-dot.is-active { background: var(--vsc-cyan); color: #fff; }
.vsc-progress-dot.is-current { background: var(--vsc-text, #082040); color: #fff; transform: none; }
.vsc-progress-lbl { font-size: 14px; font-weight: 600; color: #94A3B8; white-space: nowrap; }
.vsc-progress-step:has(.is-active) .vsc-progress-lbl { color: var(--vsc-text, #082040); }
.vsc-progress-line {
  flex: 1 1 auto; height: 1.5px; background: #CBD5E1; max-width: 80px; min-width: 24px;
}
@media (max-width: 560px) {
  .vsc-checkout-progress { gap: 8px; }
  .vsc-progress-lbl { font-size: 12.5px; }
  .vsc-progress-line { max-width: 40px; }
}

/* Stripe's express wallets (Apple Pay / Google Pay / Link) render as two side-by-side
   StripeElements here, which left Google Pay squeezed next to an empty white slot.
   Stack them full-width — one wallet per row, the way the design asks. */
#wc-stripe-express-checkout-element { display: flex; flex-direction: column; gap: 10px; }
#wc-stripe-express-checkout-element > .StripeElement { width: 100% !important; }

/* Step sub-headers (used in Delivery Method) */
.vsc-step-sub {
  font-size: 15px; font-weight: 600; color: var(--vsc-text, #082040);
  margin-bottom: 4px;
}
.vsc-step-sub-help {
  font-size: 13px; color: var(--vsc-muted, #6B7280);
  margin-bottom: 16px;
}

/* Shipping option cards (custom step 2 picker) */
.vsc-shipping-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vsc-shipping-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--vsc-card, #fff);
  border: 1.5px solid var(--vsc-border, #E5E5E5);
  border-radius: 12px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.vsc-shipping-card.is-selected,
.vsc-shipping-card:has(input:checked) {
  border-color: var(--vsc-cyan, #0EA5E9);
  background: rgba(14, 165, 233, 0.10);
}
.vsc-shipping-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.vsc-shipping-card-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.8px solid rgba(148, 163, 184, 0.55); flex-shrink: 0;
  position: relative;
}
.vsc-shipping-card.is-selected .vsc-shipping-card-radio,
.vsc-shipping-card:has(input:checked) .vsc-shipping-card-radio {
  border-color: var(--vsc-cyan, #0EA5E9);
}
.vsc-shipping-card.is-selected .vsc-shipping-card-radio::after,
.vsc-shipping-card:has(input:checked) .vsc-shipping-card-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--vsc-cyan, #0EA5E9);
}
.vsc-shipping-card-body {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.vsc-shipping-card-name {
  font-size: 14px; font-weight: 600; color: var(--vsc-text, #082040);
}
.vsc-shipping-card-price {
  font-size: 14px; font-weight: 700; color: var(--vsc-text, #082040);
}
.vsc-shipping-card-price.is-free { color: var(--vsc-cyan); }

/* Single-rate delivery row. When only one rate is available (always, today: Cold-Chain $15, or
   FREE at $250+) there is nothing to pick, so the row renders with no radio -- just the method
   name and its price. It keeps .is-selected so vsc-checkout.js still finds it when mirroring the
   price into the sidebar, but it must not LOOK or FEEL clickable, so we undo the "selected" card
   treatment. Three classes deep on purpose: .vsc-shipping-card.is-selected above is (0,2,0), and
   specificity beats source order. */
.vsc-shipping-card.vsc-shipping-card-fixed,
.vsc-shipping-card.vsc-shipping-card-fixed.is-selected {
  cursor: default;
  border-color: var(--vsc-border, #E5E5E5);
  background: var(--vsc-card, #fff);
}

/* Shipping methods as selectable cards (WC default radio list) */
.woocommerce-checkout #shipping_method {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex; flex-direction: column; gap: 10px;
}
.woocommerce-checkout #shipping_method li {
  position: relative;
  border: 1.5px solid var(--vsc-border);
  border-radius: 12px;
  padding: 14px 16px 14px 44px;
  background: var(--vsc-card);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.woocommerce-checkout #shipping_method li:has(input:checked) {
  border-color: var(--vsc-text);
  background: var(--vsc-bg);
}
.woocommerce-checkout #shipping_method li input[type="radio"] {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; accent-color: var(--vsc-text);
  margin: 0 !important;
}
.woocommerce-checkout #shipping_method li label {
  margin: 0 !important; padding: 0 !important;
  font-weight: 600; color: var(--vsc-text); font-size: 14px;
  flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.woocommerce-checkout #shipping_method li label .amount {
  color: var(--vsc-text); font-weight: 700;
}
.woocommerce-checkout #shipping_method li:has(input[value*="free"]) label .amount,
.woocommerce-checkout #shipping_method li label .amount:has(.free_shipping) { color: var(--vsc-green); }

/* Body padding adjustment since card is now padded directly */
.vsc-checkout-card-body { padding: 0; }

/* Form fields — brand WC's billing/shipping inputs */
/* Hide WC section headings ("Billing details", etc.) — our step head already says "Shipping Address" */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 { display: none; }

/* Hide the "Have a coupon?" link above the form — coupon entry lives in the sidebar */
.vsc-checkout-page .woocommerce-form-coupon-toggle,
.vsc-checkout-page .woocommerce-info.woocommerce-form-coupon-toggle,
.vsc-checkout-page form.checkout_coupon,
.vsc-checkout-page .checkout_coupon,
.vsc-checkout-page .woocommerce-form-login-toggle,
.vsc-checkout-page .woocommerce-form.woocommerce-form-login,
.vsc-checkout-page-body .woocommerce-form-coupon-toggle,
.vsc-checkout-page-body form.checkout_coupon { display: none !important; }

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
}
/* City + State render side-by-side, like the amino reference (WC defaults them to full-width) */
#billing_city_field, #billing_state_field,
#shipping_city_field, #shipping_state_field { grid-column: auto !important; }

/* Injected section headers ("Your Information" / "Delivery Address") */
.vsc-form-section {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 500;
  color: var(--vsc-muted);
  letter-spacing: 0.2px;
  margin: 14px 0 4px;
  padding-top: 4px;
}
.vsc-form-section:first-child { margin-top: 0; padding-top: 0; }
.woocommerce form .form-row {
  margin: 0 !important;
  padding: 0;
  display: flex; flex-direction: column;
  position: relative;
}
/* Override WC's legacy 47% width + floats on .form-row-first / .form-row-last
   so the CSS grid lays them out cleanly with our gap */
.vsc-checkout-form .form-row-first,
.vsc-checkout-form .form-row-last {
  width: auto !important;
  float: none !important;
  margin-right: 0 !important;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes {
  grid-column: 1 / -1;
}
/* Floating label inside the field (top-left, small) */
.woocommerce form .form-row label {
  position: absolute;
  top: 8px; left: 16px;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--vsc-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}
.woocommerce form .form-row label .required { color: var(--vsc-req); font-weight: 500; text-decoration: none; margin-left: 1px; }
.woocommerce form .form-row label .optional { font-weight: 400; color: var(--vsc-muted); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-selection,
.woocommerce form .form-row .select2-container--default .select2-selection--single {
  width: 100% !important;
  padding: 22px 16px 8px !important;
  border: 1px solid var(--vsc-border) !important;
  border-radius: 12px !important;
  background: var(--vsc-field, var(--vsc-card)) !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--vsc-text);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 54px;
  line-height: 1.4;
}
.woocommerce-checkout .select2-selection--single {
  height: 54px !important;
  min-height: 54px !important;
  position: relative !important;
  overflow: hidden !important;
}
.woocommerce-checkout .select2-selection__rendered {
  position: absolute !important;
  left: 16px !important;
  right: 36px !important;
  bottom: 10px !important;
  top: auto !important;
  line-height: 1 !important;
  font-size: 14px !important;
  color: var(--vsc-text, var(--midnight)) !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: 18px !important;
}
.woocommerce-checkout .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
  right: 12px;
  height: 20px !important;
}
.select2-dropdown { z-index: 10000 !important; }
@media (max-width: 640px) {
  /* Keep select2-hidden native select truly hidden (don't restyle it) */
  .woocommerce-checkout .select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
    min-height: 0 !important;
  }
  .woocommerce form .form-row select:not(.select2-hidden-accessible),
  .woocommerce-checkout .select2-selection--single {
    height: 54px !important;
    min-height: 54px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .woocommerce-checkout .select2-selection__rendered {
    position: absolute !important;
    left: 16px !important;
    right: 36px !important;
    bottom: 10px !important;
    top: auto !important;
    line-height: 1 !important;
    font-size: 14px !important;
    color: var(--vsc-text, var(--midnight)) !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: 18px !important;
  }
  .woocommerce-checkout .select2-container,
  .woocommerce-checkout .select2 { width: 100% !important; }
  .woocommerce-checkout .select2-selection__arrow { top: 50% !important; right: 14px !important; }
  /* Dropdown panel — make sure it floats above other fields */
  .select2-dropdown { z-index: 10000 !important; }
  .select2-results__options { max-height: 240px !important; }
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
  border-color: var(--vsc-cyan, #0EA5E9) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
  outline: none !important;
}

/* Hide WC's native "Ship to a different address?" checkbox — we use our own inverted version */
#ship-to-different-address { display: none !important; }

/* Our bottom-of-step checkboxes — stack each on its own line */
.vsc-checkout-checks {
  margin: 18px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vsc-check {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: 14px; line-height: 1.45;
  margin-bottom: 6px;
}
.vsc-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.vsc-check-box {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid rgba(148, 163, 184, 0.55); background: var(--vsc-field, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 1px;
}
.vsc-check-box::after {
  content: ''; width: 10px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity 0.15s;
}
.vsc-check input:checked + .vsc-check-box::after { opacity: 1; }
.vsc-check-text { color: var(--vsc-text, var(--midnight)); }

/* All checkout checkboxes (billing-same, SMS, email/Omnisend) share ONE exact
   accent so they look identical. */
.vsc-check-sms input:checked + .vsc-check-box,
.vsc-check-billing input:checked + .vsc-check-box,
.vsc-check-newsletter input:checked + .vsc-check-box,
.vsc-check-omni input:checked + .vsc-check-box { background: var(--vsc-cyan); border-color: var(--vsc-cyan); }
.vsc-check-sms input:checked ~ .vsc-check-text,
.vsc-check-billing input:checked ~ .vsc-check-text,
.vsc-check-newsletter input:checked ~ .vsc-check-text,
.vsc-check-omni input:checked ~ .vsc-check-text { color: var(--vsc-text, #0F2233); font-weight: 500; }

.vsc-check-fineprint {
  margin: 0 0 16px 28px;
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.vsc-check-fineprint a { color: var(--vsc-text, var(--midnight)); text-decoration: underline; }

/* Billing address fields are HIDDEN by default (when "Billing same as shipping" is checked).
   Visible only when the form has the .vsc-billing-different class — toggled by JS. */
.vsc-checkout-form .woocommerce-shipping-fields,
.vsc-checkout-form [data-vsc-section="billing-address"] {
  display: none !important;
}
.vsc-checkout-form.vsc-billing-different .woocommerce-shipping-fields,
.vsc-checkout-form.vsc-billing-different [data-vsc-section="billing-address"] {
  display: block !important;
}

/* When billing is different, relabel the revealed shipping section as "Billing address" */
.woocommerce-shipping-fields {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.woocommerce-shipping-fields > h3 {
  display: block !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--vsc-text, var(--midnight)) !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.2px;
}
.woocommerce-shipping-fields > h3 #ship-to-different-address-checkbox { display: none; }

/* Order review table inside Payment card */
.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
  display: none; /* Items are shown in the sidebar, hide duplicate table */
}
.woocommerce-checkout #payment {
  background: transparent; border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0; border-bottom: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 16px; border: 1px solid var(--vsc-border, #E5EAF0);
  border-radius: 12px; margin-bottom: 10px;
  background: var(--vsc-card, #fff); list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--vsc-cyan, #0EA5E9);
  background: rgba(14, 165, 233, 0.08);
}
.woocommerce-checkout #payment ul.payment_methods label {
  font-weight: 600; color: var(--vsc-text, var(--midnight));
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--vsc-field, #F7F5F1); border-radius: 10px; color: var(--vsc-text, #0F2233);
  margin-top: 10px; padding: 14px; font-size: 13px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 16px; }
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 16px 24px !important;
  background: var(--vsc-cyan, #0EA5E9) !important;
  color: var(--vsc-on-cyan, #fff) !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 18px;
}
.woocommerce-checkout #place_order:hover {
  transform: translateY(-1px);
  background: var(--vsc-cyan-hover, #38BDF8) !important;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.25);
}

/* Hide the "returning customer?" and "have a coupon?" prompts at top
   — users are already logged in, and coupon entry lives elsewhere. */
.woocommerce-info.woocommerce-no-payment-methods-reason,
.woocommerce form.login,
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle { display: block; }
.woocommerce-form-login-toggle { display: none !important; }

/* ------- Sidebar summary ------- */
.vsc-checkout-col-side { position: sticky; top: 32px; }
@media (max-width: 768px) {
  .vsc-checkout-col-side { display: none !important; }
}
.vsc-checkout-summary {
  background: var(--vsc-card);
  border: 1px solid var(--vsc-border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}
.vsc-checkout-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--vsc-border);
  margin-bottom: 0;
}
.vsc-checkout-summary-head h3 {
  font-size: 16px; font-weight: 800;
  color: var(--vsc-text); margin: 0;
}
.vsc-checkout-summary-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--vsc-muted);
}
.vsc-checkout-summary-edit {
  font-size: 13px; font-weight: 600;
  color: var(--vsc-text); text-decoration: underline;
  text-underline-offset: 3px;
  background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit;
}
.vsc-checkout-summary-edit:hover { color: var(--vsc-muted); }
.vsc-checkout-promo-toggle {
  width: 100%; padding: 16px 22px;
  background: none; border: none;
  border-bottom: 1px solid var(--vsc-border);
  margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--vsc-text); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
}
.vsc-checkout-promo-toggle:hover { background: var(--vsc-bg); }
.vsc-promo-wrap { margin: 0; }
.vsc-promo-wrap .vsc-checkout-promo-toggle { margin: 0; }
.vsc-promo-form { padding: 0 22px 14px; }
.vsc-promo-msg:not([hidden]) { margin: 10px 22px 14px; }
.vsc-promo-form {
  display: flex; gap: 8px; margin-top: 10px;
}
.vsc-promo-input {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--vsc-border); border-radius: 10px;
  font-size: 13px; font-family: inherit;
  background: var(--vsc-field, var(--vsc-card)); color: var(--vsc-text);
  outline: none; min-height: 40px;
}
.vsc-promo-input:focus {
  border-color: var(--vsc-cyan, #0EA5E9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.vsc-promo-apply {
  padding: 0 18px; min-height: 40px;
  background: var(--vsc-cyan, #0EA5E9); color: var(--vsc-on-cyan, #fff);
  border: none; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.vsc-promo-apply:hover { background: var(--vsc-cyan-hover, #38BDF8); }
.vsc-promo-apply:disabled { opacity: 0.6; cursor: wait; }
.vsc-promo-msg {
  margin-top: 8px;
  font-size: 12px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
}
.vsc-promo-msg.is-error { background: rgba(239, 68, 68, 0.12); color: #FCA5A5; border: 1px solid rgba(239, 68, 68, 0.35); }
.vsc-promo-msg.is-success { background: rgba(14, 165, 233, 0.10); color: var(--vsc-cyan-on-dark, #7DD3FC); border: 1px solid rgba(14, 165, 233, 0.35); }
/* Paid shipment-protection row with an on/off TOGGLE SWITCH (pre-selected, opt-out).
 * Replaces the old checkbox + "?" tooltip — the sub-line explains it inline, no "?". */
.vsc-checkout-row-protection { align-items: center; gap: 12px; padding: 6px 0; }
.vsc-checkout-row-protection .vsc-protection-label {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--vsc-text); font-weight: 600;
}
.vsc-protection-shield { flex-shrink: 0; }
.vsc-protection-textwrap { display: flex; flex-direction: column; line-height: 1.25; }
.vsc-protection-name { color: var(--vsc-text); font-weight: 600; font-size: 14px; }
.vsc-protection-sub { color: var(--vsc-muted); font-weight: 500; font-size: 11.5px; margin-top: 1px; }
.vsc-protection-right { display: flex; align-items: center; gap: 12px; }
.vsc-checkout-row-protection .vsc-protection-price { font-weight: 700; color: var(--vsc-text); }
/* the switch */
.vsc-toggle {
  position: relative; display: inline-block;
  width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; margin: 0;
}
.vsc-toggle .vsc-protection-check {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
  appearance: none; -webkit-appearance: none;
}
.vsc-toggle-track {
  position: absolute; inset: 0; border-radius: 100px;
  background: rgba(148, 163, 184, 0.40); transition: background .18s ease;
}
.vsc-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s ease;
}
.vsc-toggle .vsc-protection-check:checked ~ .vsc-toggle-track { background: var(--vsc-cyan); }
.vsc-toggle .vsc-protection-check:checked ~ .vsc-toggle-track .vsc-toggle-thumb { transform: translateX(18px); }
.vsc-toggle .vsc-protection-check:focus-visible ~ .vsc-toggle-track { outline: 2px solid var(--vsc-cyan); outline-offset: 2px; }
.vsc-checkout-summary-edit:hover { color: var(--rose-hover); }

.vsc-checkout-summary-items {
  padding: 14px 22px;
  border-bottom: 1px solid var(--vsc-border);
}
.vsc-checkout-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 10px 0;
}
.vsc-checkout-summary-thumb {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--vsc-tile, #ECEEF1); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.vsc-checkout-summary-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vsc-checkout-summary-name {
  font-size: 14px; font-weight: 700; color: var(--vsc-text);
  line-height: 1.3;
}
.vsc-checkout-summary-qty {
  font-size: 12px; color: var(--vsc-muted); margin-top: 4px;
}
.vsc-checkout-summary-line {
  font-size: 15px; font-weight: 800; color: var(--vsc-text);
  letter-spacing: -0.2px;
}

.vsc-checkout-summary-totals {
  padding: 14px 22px;
}
.vsc-checkout-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--vsc-muted);
  padding: 3px 0;
}
.vsc-checkout-row span:last-child { color: var(--vsc-text); font-weight: 600; }
.vsc-checkout-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--vsc-border);
  font-family: inherit;
}
.vsc-checkout-total span:first-child { font-size: 16px; font-weight: 800; color: var(--vsc-text); }
.vsc-checkout-total span:last-child {
  font-size: 22px; font-weight: 800; color: var(--vsc-text); letter-spacing: -0.3px;
}
.vsc-checkout-total .amount { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.3px; }

.vsc-checkout-summary-trust {
  display: flex; align-items: center; gap: 8px;
  padding: 0 22px 18px;
  font-size: 12px; color: var(--vsc-muted, var(--text-muted));
}

/* Standalone Secure Checkout button below the summary card */
.vsc-checkout-secure-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 14px;
  padding: 16px 20px;
  background: var(--vsc-card); border: 1px solid var(--vsc-border);
  border-radius: 100px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--vsc-text); cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.vsc-checkout-secure-btn:hover { background: var(--vsc-bg); box-shadow: 0 4px 16px rgba(10,10,10,0.06); }
.vsc-checkout-secure-btn svg { color: var(--vsc-green); }

/* Responsive */
@media (max-width: 1024px) {
  .vsc-checkout-grid { grid-template-columns: 1fr; }
  .vsc-checkout-col-side { position: static; }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .vsc-checkout-container { padding: 0 20px; }
  .vsc-checkout-card-body { padding: 20px; }
  .vsc-checkout-step { padding: 18px 20px 14px; }
}/* =============================================================
   Lumina My Account — dashboard, tiles { background: #F5F6F7; min-height: 70vh; padding: 120px 0 80px; }/* These two are <span>s { display: flex; flex-direction: column; gap: 2px; min-width: 0; }/* Sub-pages (Profile, Addresses { padding: 20px 0; }

/* Partner program page */
/* Prominent referral link hero, shown after the partner account is created */
.vsc-partner-link-hero {
  background: linear-gradient(135deg, var(--vsc-cyan) 0%, var(--vsc-cyan) 100%);
  border-radius: 18px; padding: 24px 26px;
  margin-bottom: 24px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(79,70,229,0.25);
}
.vsc-partner-link-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.vsc-partner-link-hero-row {
  display: flex; gap: 10px; align-items: stretch;
}
.vsc-partner-link-hero-input {
  flex: 1; padding: 14px 16px;
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 14px;
  outline: none; min-width: 0; cursor: text;
}
.vsc-partner-link-hero-input::selection { background: rgba(255,255,255,0.35); }
.vsc-partner-link-hero-copy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 20px;
  background: #fff; color: var(--vsc-cyan);
  border: none; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-partner-link-hero-copy:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.vsc-partner-link-hero-copy.is-copied { background: var(--vsc-cyan); color: #fff; }
.vsc-partner-link-hero-hint {
  margin-top: 12px; font-size: 12px; color: rgba(255,255,255,0.8);
}
@media (max-width: 640px) {
  .vsc-partner-link-hero-row { flex-direction: column; }
  .vsc-partner-link-hero-copy { justify-content: center; padding: 12px; }
}

.vsc-partner-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.vsc-partner-stat {
  background: #fff; border: 1px solid #E8EAED;
  border-radius: 12px; padding: 16px 18px;
}
.vsc-partner-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #6B7280; margin-bottom: 6px; }
.vsc-partner-stat-value { font-size: 20px; font-weight: 800; color: #082040; letter-spacing: -0.3px; }
.vsc-partner-stat-accent { background: linear-gradient(135deg, var(--vsc-cyan) 0%, var(--vsc-cyan) 100%); border-color: transparent; }
.vsc-partner-stat-accent .vsc-partner-stat-label { color: rgba(255,255,255,0.8); }
.vsc-partner-stat-accent .vsc-partner-stat-value { color: #fff; }
@media (max-width: 900px) { .vsc-partner-stats { grid-template-columns: repeat(2, 1fr); } }

.vsc-partner-why {
  background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(79,70,229,0.08) 100%);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 24px;
}
.vsc-partner-why h3 {
  font-size: 18px; font-weight: 700; color: #082040;
  margin: 0 0 18px;
}
.vsc-partner-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px;
}
.vsc-partner-perk {
  display: flex; align-items: flex-start; gap: 12px;
}
.vsc-partner-perk-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vsc-partner-perk-icon--rose  { background: var(--vsc-cyan-wash); color: var(--vsc-cyan); }
/* --blue stays #2563EB ON PURPOSE. It is not a brand accent: it is one swatch in
   a colour-CODED set (blue / green / amber) where the colour is the meaning, and
   #2563EB is a true blue, not a cyan. Folding it into --vsc-cyan would make it
   identical to --rose above and collapse the set. If Kaseton wants it cyan
   anyway, this is the one line to change. */
.vsc-partner-perk-icon--blue  { background: var(--vsc-cyan-wash); color: #2563EB; }
.vsc-partner-perk-icon--green { background: var(--vsc-cyan-wash); color: #059669; }
.vsc-partner-perk-icon--amber { background: #FEF3C7; color: #D97706; }
.vsc-partner-perk-title { font-weight: 700; font-size: 14px; color: #082040; margin-bottom: 2px; }
.vsc-partner-perk-sub { font-size: 13px; color: #6B7280; line-height: 1.5; }

.vsc-partner-card {
  background: #fff;
  border: 1px solid #E8EAED;
  border-radius: 16px;
  padding: 26px 28px;
}
.vsc-partner-card h3 {
  font-size: 18px; font-weight: 700; color: #082040;
  margin: 0 0 4px;
}
.vsc-partner-card-sub { font-size: 13px; color: #6B7280; margin: 0 0 20px; }
.vsc-partner-form label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: #082040; margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.vsc-partner-form input[type="text"] {
  width: 100%; padding: 14px 18px;
  border: 1px solid #E8EAED; border-radius: 10px;
  font-size: 14px; color: #082040;
  font-family: inherit; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vsc-partner-form input[type="text"]:focus {
  border-color: #082040;
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.vsc-partner-hint { font-size: 12px; color: #6B7280; margin-top: 6px; }
.vsc-partner-link-box {
  background: #F5F6F7; border-radius: 10px;
  padding: 14px 18px; margin: 18px 0;
}
.vsc-partner-link-box--preview code { color: #6B7280; }
.vsc-partner-link-label { font-size: 12px; font-weight: 600; color: #082040; margin-bottom: 6px; }
.vsc-partner-link-row { display: flex; align-items: center; gap: 10px; }
.vsc-partner-link-row code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px; color: #082040; word-break: break-all;
}
.vsc-partner-copy {
  padding: 6px 14px;
  background: #fff; border: 1px solid #E8EAED;
  border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #082040; cursor: pointer;
}
.vsc-partner-copy:hover { background: #F5F6F7; }
.vsc-partner-submit {
  width: 100%; padding: 15px 20px;
  background: linear-gradient(135deg, var(--vsc-cyan) 0%, var(--vsc-cyan) 100%);
  color: #fff; border: none; border-radius: 100px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vsc-partner-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,0.3); }
.vsc-partner-agree {
  /* the border was #F1B9CB -- a pink left over from the old rose brand, framing a cyan box */
  background: var(--vsc-cyan-wash); border: 1px solid var(--vsc-cyan-tint);
  border-radius: 12px; padding: 14px 16px;
  margin: 16px 0;
}
.vsc-partner-agree-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.55; color: var(--midnight);
  cursor: pointer;
}
.vsc-partner-agree-row input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--vsc-cyan); }
.vsc-partner-agree-row a { color: var(--vsc-cyan); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.vsc-partner-agree-ver { color: #6B7280; font-weight: 500; font-size: 11px; }
.vsc-partner-agreed {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E7F6EC; color: #1F6A3B;
  border: 1px solid #B4E0C2;
  padding: 8px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  margin: 14px 0; width: fit-content;
}
.vsc-partner-agreed a { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 2px; }
.vsc-partner-alert {
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  margin-bottom: 16px;
}
.vsc-partner-alert.success { background: var(--vsc-cyan-wash); color: #065F46; border: 1px solid var(--vsc-cyan-tint); }
.vsc-partner-alert.error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

@media (max-width: 768px) {
  .vsc-partner-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .vsc-partner-why-grid { grid-template-columns: 1fr 1fr; }
}

/* Old .vsc-account-wrap — no longer used but keep a minimal fallback */
.vsc-account-wrap { max-width: 1080px; margin: 0 auto; }

/* =============================================================
   WC My Account SUB-PAGES — orders list, edit-account, addresses
   Renders inside .vsc-acct-subpage-wrap from page-my-account.php
   ============================================================= */
/* Compliance banner — shrink to fit one line on mobile instead of hiding */
@media (max-width: 768px) {
  .vsc-research-banner {
    font-size: 8.5px !important;
    letter-spacing: 0.3px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Desktop: hide mobile-only items (menu head, divider, secondary links, Contact) */
.vsc-mobile-menu-head,
.vsc-nav-divider,
.vsc-nav-secondary,
.vsc-nav-mobile-only { display: none; }
.vsc-nav-links .vsc-nav-chev { display: none; }

/* Mobile hamburger */
.vsc-nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: none; border: none; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.vsc-nav-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--midnight);
  transition: transform 0.25s, opacity 0.2s;
}
.vsc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vsc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vsc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .vsc-nav { padding: 12px 0; }
  .vsc-nav-container { display: flex; align-items: center; justify-content: flex-start; padding: 0 16px; gap: 10px; }

  /* Hamburger: far left */
  .vsc-nav-burger { display: flex; order: 1; width: 36px; height: 36px; margin: 0; }

  /* Logo: right next to the hamburger */
  .vsc-logo { order: 2; font-size: 20px; margin: 0; }

  /* Icons container — push to the far right via auto margin */
  .vsc-nav-icons { order: 3; margin-left: auto; gap: 4px; display: flex; align-items: center; }
  .vsc-nav-icons .vsc-nav-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }

  /* Hide the account/person icon on mobile — My Account now lives in the slide-in menu */
  .vsc-nav-icons > a[aria-label="Account"] { display: none; }

  /* Full-screen slide-in menu */
  .vsc-nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh; height: 100dvh; width: 100vw; width: 100dvw;
    background: var(--white);
    padding: 0;
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 9999;
    overflow-y: auto;
    list-style: none;
    margin: 0;
  }
  .vsc-nav-links.is-open { transform: translateX(0); }

  /* When menu is open, promote the nav stacking context above the research banner,
     pin it to top:0 regardless of banner offset, and disable backdrop-filter (which
     breaks fixed-position children into the nav's containing block on iOS). */
  body.has-mobile-nav-open .vsc-nav {
    z-index: 100000 !important;
    top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--white) !important;
  }
  body.has-mobile-nav-open .vsc-research-banner { z-index: 0 !important; }
  .vsc-nav-links > .vsc-mobile-menu-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid #F0F0F0;
    background: var(--white); list-style: none;
  }
  .vsc-nav-links > .vsc-mobile-menu-head .vsc-logo {
    font-family: 'Inter', serif; font-size: 20px;
    font-weight: 600; color: var(--midnight); letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 8px; text-decoration: none;
    margin: 0; padding: 0;
  }
  .vsc-nav-links > .vsc-mobile-menu-head .vsc-mobile-menu-close {
    width: 32px; height: 32px; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    color: var(--midnight);
  }
  .vsc-nav-links li { list-style: none; margin: 0; padding: 0; }
  .vsc-nav-links li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px;
    font-family: 'Inter', Georgia, serif;
    font-size: 28px; font-weight: 500;
    color: var(--midnight);
    text-decoration: none;
    letter-spacing: -0.3px;
    line-height: 1.1;
    transition: color 0.15s, padding-left 0.2s;
  }
  .vsc-nav-links li:not(.is-current) a:hover { color: var(--rose-hover); }
  .vsc-nav-links .vsc-nav-chev { color: #D1D5DB; flex-shrink: 0; display: inline-block; transition: transform 0.2s, color 0.15s; }
  .vsc-nav-links li:not(.is-current) a:hover .vsc-nav-chev { transform: translateX(4px); color: var(--rose-hover); }
  /* Current / active page — a RESTING state, so it holds THE cyan the whole
     time (it used to hold the lighter hover tint, which is why the current
     nav item rendered a different blue from every other accent beside it). */
  .vsc-nav-links li.is-current > a,
  .vsc-nav-links li.is-current > a .vsc-nav-chev { color: var(--vsc-cyan); }
  .vsc-nav-links li.is-current > a { font-weight: 600; }
  /* Kill iOS tap-highlight that keeps the last-tapped link pink after navigating */
  .vsc-nav-links li a { -webkit-tap-highlight-color: transparent; }
  .vsc-nav-links li a:focus:not(:focus-visible) { outline: none; color: var(--midnight); }
  .vsc-nav-links li.vsc-nav-divider { display: block; height: 20px; border: none; border-top: 1px solid #F0F0F0; margin: 8px 24px 0; }
  .vsc-nav-links li.vsc-nav-secondary,
  .vsc-nav-links li.vsc-nav-mobile-only { display: block; }
  .vsc-nav-links li.vsc-nav-secondary a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px; font-weight: 500;
    color: #6B7280; letter-spacing: 0.1px;
    padding: 14px 24px;
  }
  .vsc-nav-links li.vsc-nav-secondary:not(.is-current) a:hover { color: var(--midnight); }
  .vsc-nav-links li.vsc-nav-secondary.is-current a { color: var(--vsc-cyan); font-weight: 600; }
  .vsc-nav-links li.vsc-nav-secondary a {
    color: #9CA3AF; font-weight: 500;
  }
  .vsc-nav-links li.vsc-nav-secondary .vsc-nav-chev { color: #CBD5E1; }
  body.has-mobile-nav-open { overflow: hidden; }

  /* Flush the nav against the banner on mobile (banner is ~24px tall when shrunk) */
  .vsc-page.has-banner .vsc-nav { top: 24px; }
}

/* =============================================================
   Lumina Auth shell — shared by /login/ AND /my-account/lost-password/
   ============================================================= */
.vsc-auth-body { margin: 0; }
.vsc-auth-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 20px 60px;
  background: radial-gradient(ellipse 800px 600px at 50% 30%, var(--rose-soft) 0%, transparent 60%), var(--ivory);
  display: flex; align-items: flex-start; justify-content: center;
}
.vsc-auth-card {
  width: 100%; max-width: 460px;
  background: var(--white); border-radius: 24px;
  padding: 20px 36px 36px;
  box-shadow: 0 30px 80px rgba(8, 32, 64, 0.12);
  border: 1px solid var(--border);
}
.vsc-auth-logo {
  display: flex; align-items: center; justify-content: center;
  margin: -16px 0 -28px; text-decoration: none;
}
.vsc-auth-logo img { max-width: 250px; width: 100%; height: auto; display: block; }
.vsc-auth-card h2 {
  font-family: 'Inter', serif;
  font-size: 36px; font-weight: 500; line-height: 1.1;
  color: var(--midnight); text-align: center;
  margin: 0 0 14px; letter-spacing: -0.5px;
}
.vsc-auth-card h2 .vsc-italic { color: var(--vsc-cyan); font-style: italic; }
.vsc-auth-intro {
  font-size: 14px; color: var(--text-muted);
  text-align: center; line-height: 1.6; margin: 0 0 24px;
}
.vsc-auth-forgot { text-align: center; margin: 16px 0 0; font-size: 13px; }
.vsc-auth-forgot a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.vsc-auth-forgot a:hover { color: var(--rose-hover); }

/* Style the WC lost-password / reset-password form inside the auth card */
.vsc-auth-reset .woocommerce-notices-wrapper { margin-bottom: 16px; }
.vsc-auth-reset form.lost_reset_password,
.vsc-auth-reset form.woocommerce-ResetPassword {
  display: flex; flex-direction: column; gap: 14px;
  background: none; border: none; padding: 0; margin: 0;
}
.vsc-auth-reset form p.form-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vsc-auth-reset form label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--midnight);
}
.vsc-auth-reset form input.input-text {
  font-family: inherit; font-size: 16px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 12px; outline: none;
  color: var(--midnight); background: var(--white);
  transition: border-color 0.2s; width: 100%;
}
.vsc-auth-reset form input.input-text:focus { border-color: var(--rose-hover); }
.vsc-auth-reset form button[type="submit"],
.vsc-auth-reset form .woocommerce-Button {
  width: 100%; padding: 16px;
  background: var(--midnight) !important; color: var(--white) !important;
  border: none !important; border-radius: 100px !important;
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px; cursor: pointer; margin-top: 6px;
  transition: background 0.2s;
}
.vsc-auth-reset form button[type="submit"]:hover { background: #142955 !important; }
.vsc-auth-reset .woocommerce-error,
.vsc-auth-reset .woocommerce-message,
.vsc-auth-reset .woocommerce-info {
  list-style: none; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 10px; font-size: 13px; line-height: 1.5;
}
.vsc-auth-reset .woocommerce-error { background: #FDECEC; color: #991B1B; border: 1px solid #F3C2C2; }
.vsc-auth-reset .woocommerce-message { background: var(--vsc-cyan-wash); color: #065F46; border: 1px solid var(--vsc-cyan-tint); }
/* The two notice colours here are BODY TEXT sitting on the pale cyan wash, so they
   stay dark on purpose — --vsc-cyan on --vsc-cyan-wash is 2.4:1 and would be
   unreadable at 13px. The chrome around them (border) IS unified to the cyan tint. */
.vsc-auth-reset .woocommerce-info { background: var(--vsc-cyan-wash); color: #1E40AF; border: 1px solid var(--vsc-cyan-tint); }
.vsc-auth-reset .woocommerce-error::before,
.vsc-auth-reset .woocommerce-message::before,
.vsc-auth-reset .woocommerce-info::before { display: none; }
.vsc-auth-reset .woocommerce-error li { list-style: none; padding: 0; margin: 0; }/* Subpage wrapper — one full-width card { width: 100%; padding: 0; }/* Logged-out / password-reset flows (lost-password, reset-password, login {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: #fff; border: 1px solid #E8EAED; border-radius: 16px;
  padding: 32px 32px 28px;
}/* WC notice banners (errors, success {
  list-style: none; margin: 0 0 20px; padding: 14px 18px 14px 46px;
  border-radius: 12px; font-size: 13px; font-weight: 500;
  position: relative; line-height: 1.55;
}
@media (max-width: 640px) {
}

@media (max-width: 900px) {
}
.vsc-account-wrap .woocommerce-MyAccount-navigation {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  position: sticky; top: 100px;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li {
  margin: 0;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center;
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li a:hover {
  background: var(--ivory);
  color: var(--midnight);
}
.vsc-account-wrap .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--midnight);
  color: var(--white);
  font-weight: 600;
}
.vsc-account-wrap .woocommerce-MyAccount-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 40px;
}
.vsc-account-wrap .woocommerce-MyAccount-content > h2,
.vsc-account-wrap .woocommerce-MyAccount-content > h3 {
  font-family: 'Inter', serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  color: var(--midnight);
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  line-height: 1.1;
}
.vsc-account-wrap .woocommerce-MyAccount-content > p {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
.vsc-account-wrap .woocommerce-MyAccount-content a {
  color: var(--vsc-cyan);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vsc-account-wrap .woocommerce-MyAccount-content a:hover { color: var(--midnight); }

/* Orders table */
.vsc-account-wrap .woocommerce-orders-table,
.vsc-account-wrap table.shop_table {
  width: 100%; border-collapse: collapse; margin: 20px 0;
  font-size: 14px;
}
.vsc-account-wrap .woocommerce-orders-table th,
.vsc-account-wrap table.shop_table th {
  text-align: left;
  padding: 14px 16px;
  background: var(--ivory);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--midnight);
  border-bottom: 1px solid var(--border);
}
.vsc-account-wrap .woocommerce-orders-table td,
.vsc-account-wrap table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--midnight);
}
.vsc-account-wrap .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.vsc-account-wrap table.shop_table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.vsc-account-wrap .woocommerce-orders-table__cell-order-actions .button,
.vsc-account-wrap .button {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--midnight);
  color: var(--white) !important;
  border: none;
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s;
}
.vsc-account-wrap .button:hover { background: #1a2d52; }

/* Addresses grid */
.vsc-account-wrap .woocommerce-Addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 20px;
}
.vsc-account-wrap .woocommerce-Address {
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.vsc-account-wrap .woocommerce-Address-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.vsc-account-wrap .woocommerce-Address-title h2,
.vsc-account-wrap .woocommerce-Address-title h3 {
  font-family: 'Inter', serif;
  font-size: 22px; font-weight: 600; color: var(--midnight);
  margin: 0;
}
.vsc-account-wrap .woocommerce-Address address {
  font-style: normal;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 14px;
}

/* Account details form */
.vsc-account-wrap form.edit-account,
.vsc-account-wrap form.woocommerce-EditAccountForm,
.vsc-account-wrap form.woocommerce-address-fields,
.vsc-account-wrap form.woocommerce-form-login {
  display: grid; gap: 16px;
}
.vsc-account-wrap form .form-row {
  display: flex; flex-direction: column; margin: 0;
}
.vsc-account-wrap form .form-row label {
  font-size: 12px; font-weight: 600;
  color: var(--midnight);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.vsc-account-wrap form .form-row input,
.vsc-account-wrap form .form-row select,
.vsc-account-wrap form .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 14px;
  color: var(--midnight);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vsc-account-wrap form .form-row input:focus,
.vsc-account-wrap form .form-row select:focus,
.vsc-account-wrap form .form-row textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(var(--vsc-cyan-rgb), 0.18);
}
.vsc-account-wrap form .form-row-first,
.vsc-account-wrap form .form-row-last {
  width: auto !important; float: none !important;
}
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-first,
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-last {
  display: inline-block;
  width: calc(50% - 8px) !important;
  vertical-align: top;
}
.vsc-account-wrap .woocommerce-EditAccountForm .form-row-first { margin-right: 14px; }

.vsc-account-wrap fieldset {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 12px;
}
.vsc-account-wrap fieldset legend {
  padding: 0 8px;
  font-weight: 600; color: var(--midnight);
  font-size: 14px;
}

.vsc-account-wrap .woocommerce-MyAccount-content p.form-row button[type="submit"] {
  margin-top: 6px;
}

/* "Login / Register" forms on /my-account/ for logged-out users */
.vsc-account-wrap .u-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.vsc-account-wrap .u-column1,
.vsc-account-wrap .u-column2 {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
}

@media (max-width: 900px) {
  .vsc-account-wrap .woocommerce {
    grid-template-columns: 1fr;
  }
  .vsc-account-wrap .woocommerce-MyAccount-navigation {
    position: static;
  }
  .vsc-account-wrap .woocommerce-Addresses,
  .vsc-account-wrap .u-columns {
    grid-template-columns: 1fr;
  }
  .vsc-account-wrap .woocommerce-MyAccount-content { padding: 24px; }
}

/* =============================================================
   Checkout — required field validation + collapsed summary header
   ============================================================= */

.vsc-step-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #b91c1c;
  font-size: 0.9em;
  line-height: 1.5;
}
.vsc-step-error strong { color: #991b1b; }

.vsc-checkout-form .form-row.vsc-invalid input,
.vsc-checkout-form .form-row.vsc-invalid select,
.vsc-checkout-form .woocommerce-input-wrapper.vsc-invalid input,
.vsc-checkout-form .woocommerce-input-wrapper.vsc-invalid select,
.vsc-checkout-form input.vsc-invalid,
.vsc-checkout-form select.vsc-invalid {
  border-color: #ef4444 !important;
  background: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

/* Match radius styling on Select2 dropdowns (state, country) */
.select2-container--open .select2-dropdown {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}


/* ============================================================
   V4 PATCH 3 (2026-05-28) — Header layout reset + Lumina-style
   Forces clean horizontal header against any conflicting cascade.
   Hides mobile-only items on desktop with strong priority.
   Constrains logo image size (was rendering at natural size = huge).
   ============================================================ */

/* Body padding so fixed nav doesn't overlap content */
body.vsc-page { padding-top: 80px !important; }
body.vsc-page.admin-bar { padding-top: 112px !important; }

/* Nav container — force horizontal flex row */
nav.vsc-nav {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border, #E5EAF0) !important;
  z-index: 1000 !important;
  padding: 14px 0 !important;
}
body.admin-bar nav.vsc-nav { top: 32px !important; }

nav.vsc-nav .vsc-nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  gap: 24px !important;
}

/* Logo — constrain image to header height */
nav.vsc-nav .vsc-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
nav.vsc-nav .vsc-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  object-fit: contain !important;
}
nav.vsc-nav .vsc-logo .custom-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
}

/* Nav links — horizontal row on desktop */
nav.vsc-nav .vsc-nav-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}
nav.vsc-nav .vsc-nav-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav.vsc-nav .vsc-nav-links li > a {
  color: var(--midnight, #082040) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
nav.vsc-nav .vsc-nav-links li > a:hover {
  color: var(--vsc-cyan) !important;
}

/* Hide mobile-only items on desktop — STRONG priority */
@media (min-width: 901px) {
  nav.vsc-nav .vsc-mobile-menu-head,
  nav.vsc-nav .vsc-nav-divider,
  nav.vsc-nav .vsc-nav-secondary,
  nav.vsc-nav .vsc-nav-mobile-only,
  nav.vsc-nav .vsc-nav-burger,
  nav.vsc-nav .vsc-mobile-menu-close { display: none !important; }
}

/* Icons (account + cart) — right side */
nav.vsc-nav .vsc-nav-icons {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
nav.vsc-nav .vsc-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--midnight, #082040) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: background 0.15s, color 0.15s !important;
}
nav.vsc-nav .vsc-nav-icon:hover {
  background: var(--rose-soft, var(--vsc-cyan-wash)) !important;
  color: var(--vsc-cyan) !important;
}
nav.vsc-nav .vsc-nav-icon svg {
  width: 22px !important; height: 22px !important;
  display: block !important;
}

/* Cart count badge */
nav.vsc-nav .vsc-cart-toggle .cart-count {
  position: absolute !important;
  top: 2px !important; right: 2px !important;
  min-width: 18px !important; height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  background: var(--vsc-cyan) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFFFFF !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Hide cart count when 0 */
nav.vsc-nav .vsc-cart-toggle .cart-count:empty,
nav.vsc-nav .vsc-cart-toggle .cart-count[data-vsc-nav-count="0"] { display: none !important; }

/* Shop dropdown — Lumina-style hover dropdown */
nav.vsc-nav .vsc-nav-dropdown {
  position: relative !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu {
  position: absolute !important;
  top: 100% !important; left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: var(--white, #FFFFFF) !important;
  border: 1px solid var(--border, #E5EAF0) !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  min-width: 220px !important;
  box-shadow: 0 12px 32px rgba(8,32,64,0.12) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s !important;
  z-index: 2000 !important;
  margin-top: 4px !important;
}
nav.vsc-nav .vsc-nav-dropdown:hover .dropdown-menu,
nav.vsc-nav .vsc-nav-dropdown:focus-within .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a {
  display: block !important;
  padding: 9px 18px !important;
  color: var(--midnight, #082040) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a:hover {
  background: var(--rose-soft, var(--vsc-cyan-wash)) !important;
  color: var(--vsc-cyan) !important;
}
nav.vsc-nav .vsc-nav-dropdown > a .dropdown-arrow {
  font-size: 9px !important;
  margin-left: 4px !important;
  transition: transform 0.2s !important;
}
nav.vsc-nav .vsc-nav-dropdown:hover > a .dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* MOBILE BREAKPOINT — burger + slide-in menu */
@media (max-width: 900px) {
  nav.vsc-nav .vsc-nav-container {
    justify-content: space-between !important;
    padding: 0 16px !important;
    gap: 10px !important;
  }
  nav.vsc-nav .vsc-nav-burger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 40px !important; height: 40px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    order: 1 !important;
    padding: 0 !important;
  }
  nav.vsc-nav .vsc-nav-burger span {
    display: block !important;
    width: 22px !important; height: 2px !important;
    background: var(--midnight, #082040) !important;
    border-radius: 2px !important;
    transition: transform 0.25s, opacity 0.2s !important;
  }
  nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
  nav.vsc-nav .vsc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  nav.vsc-nav .vsc-logo { order: 2 !important; }
  nav.vsc-nav .vsc-logo img { height: 36px !important; }

  nav.vsc-nav .vsc-nav-icons { order: 3 !important; margin-left: auto !important; }

  /* Hide desktop nav-links, show only when mobile menu opens */
  nav.vsc-nav .vsc-nav-links {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: var(--white, #FFFFFF) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }
  nav.vsc-nav .vsc-nav-links.is-open {
    transform: translateX(0) !important;
  }
  nav.vsc-nav .vsc-mobile-menu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--border, #E5EAF0) !important;
  }
  nav.vsc-nav .vsc-mobile-menu-close {
    width: 36px !important; height: 36px !important;
    background: none !important; border: none !important;
    cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  nav.vsc-nav .vsc-nav-links li {
    display: block !important;
    border-bottom: 1px solid var(--border, #E5EAF0) !important;
  }
  nav.vsc-nav .vsc-nav-links li > a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
  }
  nav.vsc-nav .vsc-nav-divider {
    display: block !important;
    height: 8px !important;
    background: var(--ivory, #F5F6F7) !important;
    border: none !important;
  }
  nav.vsc-nav .vsc-nav-mobile-only,
  nav.vsc-nav .vsc-nav-secondary { display: block !important; }
  /* Mobile dropdown — expand inline, no positioning trick */
  nav.vsc-nav .vsc-nav-dropdown .dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: var(--ivory, #F5F6F7) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  nav.vsc-nav .vsc-nav-dropdown .dropdown-menu a {
    padding: 12px 36px !important;
    font-size: 14px !important;
  }
}


/* ============================================================
   V4 PATCH 4 (2026-05-28) — Step 3 (Payment) hard layout fix
   Forces the form-row.place-order to be a clean vertical stack:
     1. Privacy text
     2. Terms checkbox (with clickable label)
     3. Place Order button
   Each in its own block, with clear gap, no overlap possible.
   Also CSS-hides any duplicate free-ship banner (safety net for
   browser-cached old JS).
   ============================================================ */

/* Container that wraps terms + place_order */
.woocommerce-checkout .form-row.place-order {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 0 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Privacy text — clear standalone paragraph */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  display: block !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--vsc-muted, #6B7A94) !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p {
  margin: 0 !important;
}

/* Terms wrapper — own block with bottom margin */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
  clear: both !important;
}

/* The actual terms checkbox row */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p.form-row.validate-required,
.woocommerce-checkout p.form-row.terms,
.woocommerce-checkout p.form-row.validate-required:has(input[name="terms"]) {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--vsc-card, #FFFFFF) !important;
  border: 1.5px solid var(--vsc-border, #E5EAF0) !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* The label inside the terms row */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label[for="terms"],
.woocommerce-checkout p.form-row.validate-required label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--vsc-text, #082040) !important;
  font-weight: 500 !important;
}

/* The actual checkbox input — make it big and obviously clickable */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.woocommerce-checkout input#terms {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  accent-color: var(--vsc-cyan) !important;
  opacity: 1 !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* The label text + asterisk */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  flex: 0 1 auto !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--vsc-text, #082040) !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-link {
  color: var(--vsc-cyan) !important;
  text-decoration: underline !important;
}

/* V4 PATCH 8 — clean, consistent checkboxes for the Stripe "Save payment information"
 * row + the Terms row (custom sky checkbox, white card, proper spacing).
 * The <p> box is the flex row; input + label sit centered in one line. */
.woocommerce-checkout p.form-row.woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout p.form-row:has(#wc-stripe-new-payment-method) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 12px 14px !important;
  background: var(--vsc-card, #fff) !important;
  border: 1.5px solid var(--vsc-border, #E5EAF0) !important;
  border-radius: 12px !important;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label,
.woocommerce-checkout label[for="wc-stripe-new-payment-method"] {
  display: inline !important;
  margin: 0 !important; cursor: pointer !important;
  font-size: 13.5px !important; line-height: 1.4 !important; font-weight: 500 !important;
  color: var(--vsc-text, #082040) !important;
}
/* Custom sky checkbox shared by the terms + save-payment checkboxes */
.woocommerce-checkout input#terms,
.woocommerce-checkout #wc-stripe-new-payment-method {
  -webkit-appearance: none !important; appearance: none !important;
  width: 20px !important; height: 20px !important; flex: 0 0 20px !important;
  margin: 0 !important; padding: 0 !important; cursor: pointer !important;
  border: 1.5px solid rgba(148, 163, 184, 0.55) !important; border-radius: 6px !important;
  background: var(--vsc-field, #fff) !important; position: relative !important; vertical-align: top !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.woocommerce-checkout input#terms:checked,
.woocommerce-checkout #wc-stripe-new-payment-method:checked {
  background: var(--vsc-cyan) !important; border-color: var(--vsc-cyan) !important;
}
.woocommerce-checkout input#terms:checked::after,
.woocommerce-checkout #wc-stripe-new-payment-method:checked::after {
  content: '' !important; position: absolute !important; left: 6px !important; top: 2px !important;
  width: 5px !important; height: 10px !important; border: solid #fff !important;
  border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important;
}

/* "Researchers also bought" upsell cards (shared by checkout aside + side-cart drawer) */
.vsc-also { padding: 14px 22px; border-bottom: 1px solid var(--vsc-border, #E5EAF0); }
.vsc-also-head { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--vsc-muted, #6B7280); margin-bottom: 10px; }
.vsc-also-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vsc-also-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 10px; background: var(--vsc-cyan-wash); border: 1px solid var(--vsc-cyan-tint); border-radius: 12px; }
.vsc-also-img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; }
.vsc-also-name { font-size: 12px; font-weight: 600; color: #082040; line-height: 1.25; }
.vsc-also-price { font-size: 13px; font-weight: 700; color: var(--vsc-cyan); }
.vsc-also-add { margin-top: 2px; background: #082040; color: #fff; border: none; border-radius: 100px; padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 34px; }
.vsc-also-add:hover { background: var(--blue-secondary, #1E3A6B); }
.vsc-also-add:disabled { opacity: .7; cursor: default; }
@media (max-width: 380px) { .vsc-also-grid { grid-template-columns: 1fr; } }
.woocommerce-checkout .form-row .required {
  color: #EF4444 !important;
  text-decoration: none !important;
  margin-left: 2px !important;
  font-weight: 700 !important;
}

/* Place Order button — its own block, clearly below terms */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  background: var(--vsc-cyan, #0EA5E9) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
  transition: background 0.15s, transform 0.15s !important;
  min-height: 56px !important;
}
.woocommerce-checkout #place_order:hover {
  background: var(--vsc-cyan-hover, #38BDF8) !important;
  transform: translateY(-1px) !important;
}

/* CSS safety net — hide any 2nd / 3rd / Nth free-ship banner from JS dupes */
.vs-ship-progress ~ .vs-ship-progress,
.vsc-sidebar-shipbar ~ .vsc-sidebar-shipbar,
[id="vsc-sidebar-shipbar"] ~ [id="vsc-sidebar-shipbar"] { display: none !important; }


/* ============================================================
   V4 PATCH 5 (2026-05-28) — Payment method radio visibility
   Currently lumina_qbo is the only gateway. WC hides the radio
   when only one option is available. When there are multiple
   gateways, WC shows the radio automatically. Either way, make
   the payment method look like a selected card with visible
   selection state.
   ============================================================ */
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  border: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none !important;
  padding: 16px 18px !important;
  margin: 0 0 10px !important;
  border: 1.5px solid var(--border, #E5EAF0) !important;
  border-radius: 14px !important;
  background: var(--white, #FFFFFF) !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
  position: relative !important;
}
.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--vsc-cyan) !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked),
.woocommerce-checkout #payment ul.payment_methods li.checked {
  border-color: var(--midnight, #082040) !important;
  background: var(--rose-soft, var(--vsc-cyan-wash)) !important;
  box-shadow: 0 4px 12px rgba(8,32,64,0.06) !important;
}

/* Show the radio button visibly */
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  appearance: radio !important;
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  accent-color: var(--vsc-cyan) !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  display: inline-block !important;
  opacity: 1 !important;
  position: relative !important;
}

/* Method title label */
.woocommerce-checkout #payment ul.payment_methods label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  color: var(--midnight, #082040) !important;
  font-size: 15px !important;
  margin: 0 !important;
}

/* Payment box (description + extra fields) */
.woocommerce-checkout #payment div.payment_box {
  background: var(--ivory, #F5F6F7) !important;
  border-radius: 10px !important;
  margin-top: 12px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text-muted, #475569) !important;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment div.payment_box p { margin: 0 !important; }
.woocommerce-checkout #payment div.payment_box strong { color: var(--midnight, #082040) !important; }

/* V4 PATCH 7 — single Stripe gateway: drop the redundant "Payment options" radio +
 * label and the double box, so the Stripe Payment Element (card fields) sits flat
 * under "— OR —". Scoped to li:only-child so a future 2nd gateway auto-restores the
 * radio. Only chrome is removed — #payment / .payment_box / the Stripe iframe stay shown. */
.woocommerce-checkout #payment ul.payment_methods { margin: 0 !important; padding: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li {
  border: none !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li:hover,
.woocommerce-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked),
.woocommerce-checkout #payment ul.payment_methods li.checked {
  border: none !important; background: transparent !important; box-shadow: none !important;
}
/* hide the gateway radio + its "Payment options" title only when one gateway exists */
.woocommerce-checkout #payment ul.payment_methods li:only-child > input[type="radio"] {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; pointer-events: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li:only-child > label[for^="payment_method_"] { display: none !important; }
/* flatten the inner payment_box so the Stripe element has no nested box around it */
.woocommerce-checkout #payment div.payment_box {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important;
}

/* V4 PATCH 9 — the "Save payment information" checkbox row lives INSIDE
 * #payment .payment_box, so two ID-level rules above were hijacking it:
 *   #payment ul.payment_methods label        -> forced inline-flex + 700 (gateway-title rule)
 *   #payment div.payment_box p { margin:0 }   -> killed its top gap (flush to the card box)
 * Re-assert a clean, centered white-pill row with ID-level specificity so it wins. */
.woocommerce-checkout #payment p.form-row.woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1.5px solid var(--border, #E5EAF0) !important;
  border-radius: 12px !important;
}
.woocommerce-checkout #payment ul.payment_methods label[for="wc-stripe-new-payment-method"],
.woocommerce-checkout #payment p.woocommerce-SavedPaymentMethods-saveNew label[for="wc-stripe-new-payment-method"] {
  display: block !important;
  position: static !important;   /* a payment-label rule absolutely-positions it to the corner — undo */
  left: auto !important;
  top: auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  align-items: initial !important;
  gap: 0 !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--midnight, #082040) !important;
  cursor: pointer !important;
}


/* ============================================================
   V4 PATCH 6 (2026-05-28) — Checkout topbar logo image size
   Lumina uses a TEXT logo ("Lumina Aminos"), so their original
   `.vsc-checkout-logo` rules set font-size only. Ventra uses an
   IMAGE logo (ventra-logo-dark.png), so we need an explicit
   `img` size constraint or the image renders at natural ~800px.
   ============================================================ */
.vsc-checkout-topbar .vsc-checkout-logo img {
  height: 32px !important;
  width: auto !important;
  max-width: 180px !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 640px) {
  .vsc-checkout-topbar .vsc-checkout-logo img {
    height: 26px !important;
    max-width: 140px !important;
  }
}

/* ================================================================
   v4.6.2 — MOBILE HEADER (pixel-matched to aminoclub.com)
   Header at <=900px:
     - 3-column grid: burger 48px | logo 1fr | cart 48px
     - White background, subtle bottom border, no big drop shadow
     - Logo image capped at 28px tall (was 48px from v3 base)
     - Cart icon 22px stroke, badge top-right
     - My own .vsv4-mobile-burger (in header.php) is the visible
       hamburger; snippet #31's injected .vsv3-hamburger is hidden
       so we don't get a duplicate
   Drawer (snippet #31 owns the markup):
     - Primary items get a right chevron
     - Secondary items (Account, Cart added by vsc-cart.js) appear
       at the bottom in lighter gray with a top divider
   ================================================================ */
.vsv4-mobile-burger { display: none; }

@media (max-width: 900px) {
  /* Reset main-nav: white, no padding, subtle border, no big shadow */
  .main-nav,
  .main-nav.main-nav-v5 {
    background: #FFFFFF !important;
    padding: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    box-shadow: none !important;
  }

  /* 3-column grid: burger | logo | cart actions.
     Selectors prefixed with `html body` (0,3,2) so they beat snippet #14
     (vsv3-nuclear-fix) and snippet #31, both of which redefine
     `.main-nav .nav-inner` (0,2,0) inline AFTER this external file loads.
     grid-template-rows is a single explicit 60px row; grid-auto-rows:0 +
     overflow guards stop any stray child from creating an implicit 2nd row. */
  html body .main-nav .nav-inner,
  html body .main-nav.main-nav-v5 .nav-inner {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    grid-template-rows: 60px !important;
    grid-auto-rows: 0 !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* My own burger button — left column.
     40x40 hit area (was 36x36 = under the 40px minimum tap target). The grid
     column is 48px wide, so this grows inside its own cell — no reflow; the
     22px bars stay centred. */
  html body .main-nav .vsv4-mobile-burger,
  .vsv4-mobile-burger {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    position: static !important;
    z-index: auto !important;
  }
  .vsv4-mobile-burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #0F2540 !important;
    border-radius: 1px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }
  .vsv4-mobile-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .vsv4-mobile-burger.is-open span:nth-child(2) { opacity: 0 !important; }
  .vsv4-mobile-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Logo: centered, height capped 28px. grid-row:1 pins it to the single row. */
  html body .main-nav .nav-logo-official,
  html body .main-nav.main-nav-v5 .nav-logo-official {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 200px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body .main-nav .nav-logo-official img,
  html body .main-nav.main-nav-v5 .nav-logo-official img {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
  }

  /* Action icons: cart only on right, hide search + standalone account.
     grid-row:1 pins the bag to the same row as burger + logo — without it,
     snippet #14's grid redefinition let nav-actions fall into an implicit
     second row, dropping the bag below the logo. */
  html body .main-nav .nav-actions,
  html body .main-nav.main-nav-v5 .nav-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .main-nav .nav-actions > .nav-action-btn:not(.vsc-cart-toggle) {
    display: none !important;
  }
  /* v3's mobile-toggle: was the old hamburger, kept hidden by snippet #31 — make sure */
  .main-nav .mobile-toggle { display: none !important; }
  /* Snippet #31's injected hamburger lives inside .nav-actions and its own
     rule (.vsv3-hamburger{display:flex!important}) loads AFTER this file, so
     equal specificity would lose on source order. Bump specificity to win:
     .main-nav .nav-actions .vsv3-hamburger is 0,3,0 vs the snippet's 0,1,0.
     My .vsv4-mobile-burger (top-left) is the real hamburger; this removes the
     duplicate snippet #31 keeps re-appending to the right via reorderHeaderIcons. */
  .main-nav .nav-actions .vsv3-hamburger,
  .main-nav .vsv3-hamburger,
  body .vsv3-hamburger { display: none !important; }
  /* Lights search overlay element shouldn't bleed into header on mobile */
  .vsv3-search-overlay { z-index: 9999; }

  /* Cart button compact.
     40x40 hit area (was 36x36 = under the 40px minimum tap target). Sits in the
     48px right grid column, so it grows inside its own cell — no reflow. */
  .main-nav .nav-actions .vsc-cart-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #0F2540 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  .main-nav .nav-actions .vsc-cart-toggle svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }
  .main-nav .vsc-cart-toggle .cart-count {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: var(--vsc-cyan) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide the badge when cart is empty (count == 0) */
  .main-nav .vsc-cart-toggle .cart-count[data-count="0"] { display: none !important; }

  /* Drawer: right chevron on every row, Account + Cart at the bottom as secondary */
  .vsv3-drawer nav a::after,
  .vsv3-drawer nav .vsv3-drawer-secondary::after {
    content: '\203A' !important; /* › */
    font-size: 24px !important;
    color: #94A3B8 !important;
    margin-left: auto !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
  .vsv3-drawer nav .vsv3-drawer-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #94A3B8 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-family: inherit !important;
    text-align: left !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 20px 24px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .vsv3-drawer nav .vsv3-drawer-secondary:first-of-type {
    margin-top: 24px !important;
    border-top: 1px solid #E2E8F0 !important;
  }
}

/* ============================================================
   Passwordless checkout auth — full-page flow (vsc-auth.js)
   Rendered inside the checkout page body when the visitor is not a
   signed-in researcher with a complete profile. Reference-matched:
   centered logo, soft inputs, segmented code boxes, pill CTAs.
   ============================================================ */
#vsc-auth-flow{max-width:440px;margin:8px auto 0;background:#fff;border:1px solid #eef2f7;border-radius:20px;padding:36px 30px;box-shadow:0 18px 50px rgba(8,32,64,0.08);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.vsc-authp-intro{text-align:center;font-size:14px;line-height:1.55;color:#475569;margin:0 0 22px;}
.vsc-authp-logo{text-align:center;margin:0 0 18px;}
.vsc-authp-logo img{height:30px;width:auto;display:inline-block;}
#vsc-auth-flow h2{text-align:center;font-size:26px;font-weight:700;color:#082040;margin:0 0 8px;letter-spacing:-0.4px;line-height:1.2;}
.vsc-authp-sub{text-align:center;font-size:15px;line-height:1.55;color:#64748b;margin:0 0 24px;}
.vsc-authp-sub strong{color:#082040;font-weight:700;}
.vsc-authp-label{display:block;font-size:14px;font-weight:600;color:#082040;margin:16px 0 8px;}
.vsc-authp-label span{color:#94a3b8;font-weight:400;}
.vsc-authp-input{width:100%;box-sizing:border-box;padding:16px 18px;border:1.5px solid transparent;border-radius:14px;font-size:16px;font-family:inherit;color:#1f2937;background:#f1f5f9;outline:none;transition:border-color .15s,background .15s;}
.vsc-authp-input::placeholder{color:#94a3b8;}
.vsc-authp-input:focus{border-color:var(--vsc-cyan);background:#fff;}
select.vsc-authp-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23082040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer;}
/* iOS <input type=date> ignores width/box-sizing, centers its value, and
   overflows right. Normalise it to match the text fields. */
input[type="date"].vsc-authp-input{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;text-align:left;cursor:pointer;}
input[type="date"].vsc-authp-input::-webkit-date-and-time-value{text-align:left;margin:0;}
input[type="date"].vsc-authp-input::-webkit-calendar-picker-indicator{margin-left:auto;}
/* Primary-CTA system (matches the homepage .btn-primary / contact .ct-btn):
   Onest 12.5 / 500 / +.05em / UPPERCASE / r100px.  NEVER font-family:inherit
   here -- this button lives inside #vsc-auth-flow, whose container font is
   Inter, so `inherit` silently rendered the CTA in Inter 16/600. Declare the
   family explicitly. Typography only: geometry + handlers are unchanged. */
.vsc-authp-btn{width:100%;margin-top:20px;padding:17px;border:none;border-radius:100px;background:#082040;color:#fff;font-family:var(--grotesk,'Onest','Inter',-apple-system,'Segoe UI',Roboto,sans-serif);font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,opacity .2s,transform .1s;}
.vsc-authp-btn:hover{background:var(--vsc-cyan);}
.vsc-authp-btn:active{transform:scale(0.99);}
.vsc-authp-fine{font-size:12.5px;line-height:1.5;color:#94a3b8;margin:18px 0 0;text-align:center;}
.vsc-authp-fine a{color:var(--vsc-cyan);text-decoration:underline;}
.vsc-authp-hint{text-align:center;font-size:13px;color:#94a3b8;margin:18px 0 0;}
.vsc-authp-resend{text-align:center;font-size:13px;color:#94a3b8;margin:14px 0 0;min-height:18px;}
/* Segmented one-time-code boxes */
.vsc-auth-code-boxes{display:flex;gap:10px;justify-content:center;margin:6px 0 0;}
.vsc-auth-digit{width:48px;height:58px;text-align:center;font-size:24px;font-weight:700;color:#082040;background:#f1f5f9;border:1.5px solid transparent;border-radius:14px;outline:none;font-family:inherit;transition:border-color .15s,background .15s;}
.vsc-auth-digit:focus{border-color:var(--vsc-cyan);background:#fff;}
.vsc-auth-err{color:#B22234;font-size:13.5px;line-height:1.45;text-align:center;margin-top:12px;}
.vsc-auth-err:empty{margin-top:0;}
.vsc-auth-link{background:none;border:none;color:var(--vsc-cyan);font-family:inherit;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;}
@media (max-width:480px){
  #vsc-auth-flow{padding:28px 20px;border-radius:16px;}
  #vsc-auth-flow h2{font-size:23px;}
  .vsc-auth-digit{width:44px;height:54px;font-size:22px;}
  .vsc-auth-code-boxes{gap:8px;}
}

/* =============================================================
   PDP REDESIGN v4.9 — RUO banner, badges, bundle, CoA, sticky bar
   One accent (cyan --rose), one pill radius (100px), 12/16 card radii.
   ============================================================= */

/* RUO disclaimer banner — full-bleed navy, flush under header */
.vsc-ruo-banner { background: var(--midnight); border-top: 1px solid rgba(255,255,255,0.08); }
.vsc-ruo-banner-inner {
  max-width: 760px; margin: 0 auto; padding: 13px 20px;
  display: flex; gap: 10px; align-items: flex-start; justify-content: center; text-align: center;
}
.vsc-ruo-icon { color: var(--rose); flex-shrink: 0; margin-top: 1px; }
.vsc-ruo-banner p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.vsc-ruo-lead { color: var(--rose); font-weight: 700; letter-spacing: 0.3px; }

/* Title badges — neutral data pill + one cyan RUO accent pill */
.vsc-pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vsc-pdp-badge {
  display: inline-flex; align-items: center; border-radius: 100px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  border: 1.5px solid var(--border); color: var(--text-muted); background: var(--white);
}
.vsc-pdp-badge.is-accent { border-color: var(--rose); color: var(--vsc-cyan); background: var(--rose-soft); }

/* Bundle & save — selectable quantity cards with vial thumbnails (AminoClub-style) */
.vsc-pdp-bundle { margin-bottom: 22px; }
.vsc-bundle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.vsc-bundle-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center;
  text-align: center; padding: 16px 8px 12px; border: 1.5px solid var(--border); border-radius: 16px;
  background: #F6FAFF; cursor: pointer; transition: border-color 0.2s, background 0.2s; font-family: inherit;
}
.vsc-bundle-card:hover { border-color: var(--rose); }
.vsc-bundle-card.active { border-color: var(--rose); background: var(--rose-soft); }
/* Single clean vial REPEATED 'buy' times, cropped tight (object-fit:cover trims the
 * image whitespace) so the count reads as a clean row. Buy 10 = aligned 5-over-5 grid. */
.vsc-bundle-thumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; height: 60px; overflow: hidden; }
.vsc-bundle-thumbs img { display: block; object-fit: cover; height: 46px; width: 17px; }
.vsc-bundle-card[data-bundle-buy="5"]  .vsc-bundle-thumbs img { height: 40px; width: 15px; }
.vsc-bundle-card[data-bundle-buy="10"] .vsc-bundle-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; align-content: center; justify-items: center;
}
.vsc-bundle-card[data-bundle-buy="10"] .vsc-bundle-thumbs img { height: 25px; width: 11px; }
.vsc-bundle-qty { font-size: 14px; font-weight: 700; color: var(--midnight); line-height: 1.1; }
/* Savings: green so the discount pops (deliberate exception to the cyan accent). */
.vsc-bundle-save { font-size: 12.5px; font-weight: 700; color: #0E9F6E; min-height: 15px; }
.vsc-bundle-card .vsc-bundle-save:empty { display: none; }
/* "Standard price" on the 1-bottle card is neutral, not green. */
.vsc-bundle-card[data-bundle-qty="1"] .vsc-bundle-save { color: var(--text-muted); font-weight: 500; }

/* Color-coded ribbons (AminoClub-style): popular = teal, value = amber. */
.vsc-bundle-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase; border-radius: 100px;
  padding: 4px 11px; white-space: nowrap; box-shadow: 0 3px 8px rgba(8,32,64,0.18);
}
.vsc-bundle-tag--popular { background: #0E9F8E; }
.vsc-bundle-tag--value   { background: #E8920C; }
/* Give the ribbon room so it never clips against the card above. */
.vsc-bundle-row { margin-top: 18px; }

/* Compact section labels (override legacy block/margin styling) */
.vsc-pdp-option-label { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--midnight); margin: 0; }
.vsc-pdp-bundle .vsc-pdp-option-label { display: block; }

/* Dosage row — label inline with pills (compact, AminoClub-style) */
.vsc-pdp-options-row,
.vsc-pdp-options { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vsc-pdp-options .vsc-pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.vsc-pdp-options .vsc-pdp-size {
  padding: 11px 22px; border-radius: 100px; border: 1.5px solid var(--border);
  background: var(--white); color: var(--midnight); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; text-align: center; min-width: 0;
}
.vsc-pdp-options .vsc-pdp-size.active { border-color: var(--midnight); background: var(--midnight); color: #fff; }

/* Quantity row — label + stepper + big price on the right (AminoClub position) */
.vsc-pdp-qtyrow { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.vsc-pdp-qtyrow .vsc-pdp-price { font-family: 'Inter', serif; font-size: 30px; font-weight: 700; color: var(--midnight); margin: 0 0 0 auto; }

/* Trust strip — compact soft card (Ventra wording, AminoClub container feel) */
.vsc-pdp-trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  background: var(--ivory); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; margin-top: 4px;
}
.vsc-pdp-trust-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.vsc-pdp-trust-item svg { color: var(--vsc-cyan); flex-shrink: 0; }
@media (max-width: 600px) {
  .vsc-pdp-trust { grid-template-columns: 1fr; gap: 9px; padding: 14px 16px; }
  .vsc-pdp-qtyrow .vsc-pdp-price { font-size: 26px; }
}

/* Action row — CoA outline pill + primary Add button */
.vsc-pdp-actions { display: flex; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.vsc-pdp-coa {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 20px;
  border-radius: 100px; border: 1.5px solid var(--border); background: var(--white);
  color: var(--midnight); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.vsc-pdp-coa:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-pdp-coa svg { flex-shrink: 0; }
/* The button's own `display:inline-flex` (0,1,0) out-specifies the UA [hidden]{display:none}
   rule, so the `hidden` attribute alone never hid it — a no-certificate product rendered a
   dead CoA button that opened nothing on click. This restores true hiding. */
.vsc-pdp-coa[hidden] { display: none !important; }

/* Sticky add-to-cart bar — reveals on scroll */
/* Pinned bottom buy bar. Hidden by default; JS toggles .is-visible whenever the
   main Add-to-Cart row is off screen (shown on load + once scrolled past the
   buy box, hidden while the on-page Add to Cart is visible). */
.vsc-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(8,32,64,0.08);
  transform: translateY(110%); opacity: 0; pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.vsc-stickybar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* White filler that bleeds below the bar so any mobile-browser bottom-chrome
   gap (Chrome iOS toolbar, etc.) reads as part of the bar — looks attached to
   the screen bottom without dragging the bar down. Off-screen, non-interactive. */
.vsc-stickybar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: 160px; background: var(--white); pointer-events: none;
}
/* Reserve space so the bar never covers the last content/footer when shown. */
body:has(.vsc-stickybar) { padding-bottom: 76px; }
@media (max-width: 600px) { body:has(.vsc-stickybar) { padding-bottom: 66px; } }
.vsc-stickybar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.vsc-stickybar-info { display: flex; flex-direction: column; min-width: 0; }
.vsc-stickybar-name {
  font-size: 14px; font-weight: 600; color: var(--midnight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.vsc-stickybar-price { font-size: 17px; font-weight: 700; color: var(--midnight); }
.vsc-stickybar-sizes { display: flex; gap: 6px; margin-left: auto; overflow-x: auto; }
.vsc-stickybar-size {
  padding: 8px 12px !important; border-radius: 100px !important;
  border: 1.5px solid var(--border) !important; background: var(--white); color: var(--midnight);
  font-size: 13px !important; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 0;
}
.vsc-stickybar-size.active { background: var(--midnight) !important; color: #fff; border-color: var(--midnight) !important; }
.vsc-stickybar-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--midnight); color: #fff; border: none; border-radius: 100px;
  padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.vsc-stickybar-add:hover { background: var(--blue-secondary); }

/* Disabled Add buttons (multi-variant, no dosage chosen yet) — greyed out. */
.vsc-pdp-cart:disabled, .vsc-pdp-cart[disabled],
.vsc-stickybar-add:disabled, .vsc-stickybar-add[disabled] {
  background: #E5EAF0 !important; color: #9AA7BC !important;
  box-shadow: none !important; cursor: not-allowed; opacity: 1;
}

/* Stacked variant (single-dosage products, no pills): name+price row on top,
   full-width Add button below — matches the AminoClub single-product bar. */
.vsc-stickybar--stacked .vsc-stickybar-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 16px; }
.vsc-stickybar--stacked .vsc-stickybar-info { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
.vsc-stickybar--stacked .vsc-stickybar-name { font-size: 15px; max-width: 65vw; }
.vsc-stickybar--stacked .vsc-stickybar-price { font-size: 19px; }
.vsc-stickybar--stacked .vsc-stickybar-add { width: 100%; justify-content: center; padding: 11px 22px; font-size: 15px; }

/* Multi-variation: dosage pills + Add share the bottom row; pills hug-left,
   Add flexes to fill the remaining width (matches the buy-box action row). */
.vsc-stickybar--multi .vsc-stickybar-sizes { flex: 0 0 auto; margin: 0; }
.vsc-stickybar--multi .vsc-stickybar-add { width: auto; flex: 1 1 auto; min-width: 0; }
/* Wrap the pill group + Add together on the second row. */
.vsc-stickybar--multi .vsc-stickybar-row2 { display: flex; align-items: center; gap: 10px; width: 100%; }

@media (max-width: 600px) {
  .vsc-ruo-banner-inner { padding: 11px 16px; gap: 8px; }
  .vsc-ruo-banner p { font-size: 12px; }
  .vsc-pdp-badges { margin-bottom: 12px; }
  .vsc-bundle-row { gap: 8px; }
  .vsc-bundle-card { padding: 12px 10px; border-radius: 14px; }
  .vsc-bundle-qty { font-size: 13px; }
  .vsc-bundle-save { font-size: 11px; }
  .vsc-bundle-tag { font-size: 8.5px; letter-spacing: 0.3px; padding: 3px 8px; top: -8px; }
  .vsc-pdp-actions { gap: 10px; }
  .vsc-pdp-actions .vsc-pdp-cart { padding: 14px 16px !important; font-size: 14px !important; min-width: 0 !important; }
  .vsc-pdp-coa { padding: 0 14px; font-size: 13px; }
  .vsc-stickybar-inner { gap: 10px; padding: 10px 12px; }
  .vsc-stickybar-name { display: none; }
  .vsc-stickybar-price { font-size: 16px; }
  .vsc-stickybar-sizes { margin-left: 0; }
  .vsc-stickybar-add { padding: 11px 18px; font-size: 14px; margin-left: auto; }
  /* Stacked variant on mobile: keep the name visible + full-width Add, compact. */
  .vsc-stickybar--stacked .vsc-stickybar-inner { gap: 6px; padding: 8px 14px; }
  .vsc-stickybar--stacked .vsc-stickybar-name { display: block; font-size: 14px; }
  .vsc-stickybar--stacked .vsc-stickybar-price { font-size: 18px; }
  .vsc-stickybar--stacked .vsc-stickybar-add { width: 100%; margin-left: 0; padding: 11px 22px; font-size: 15px; justify-content: center; }
  /* Multi-variation on mobile: pills hug-left, Add fills the rest of row 2. */
  .vsc-stickybar--multi .vsc-stickybar-row2 { display: flex; align-items: center; gap: 8px; width: 100%; }
  .vsc-stickybar--multi .vsc-stickybar-sizes { flex: 0 0 auto; margin: 0; }
  .vsc-stickybar--multi .vsc-stickybar-add { width: auto; flex: 1 1 auto; margin-left: 0; padding: 11px 16px; font-size: 15px; }
}

/* =============================================================
   PDP v4.9.3 — Certificate of Analysis slide-up modal (inline PDF)
   ============================================================= */
.vsc-coa-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.vsc-coa-modal.is-open { display: block; }
.vsc-coa-overlay {
  position: absolute; inset: 0; background: rgba(8,32,64,0.55);
  opacity: 0; transition: opacity 0.25s ease;
}
.vsc-coa-modal.is-open .vsc-coa-overlay { opacity: 1; }
.vsc-coa-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--white); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(8,32,64,0.25);
  display: flex; flex-direction: column;
  max-height: 80vh; height: 80vh;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.vsc-coa-modal.is-open .vsc-coa-sheet { transform: translateY(0); }
.vsc-coa-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vsc-coa-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vsc-coa-flask {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  background: var(--rose-soft); color: var(--vsc-cyan);
  display: inline-flex; align-items: center; justify-content: center;
}
.vsc-coa-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vsc-coa-eyebrow { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--midnight); }
.vsc-coa-count { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.vsc-coa-product { font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-coa-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vsc-coa-dl {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 100px; border: 1.5px solid var(--border); background: var(--white);
  color: var(--midnight); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.vsc-coa-dl:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-coa-x {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 100px;
  border: 1.5px solid var(--border); background: var(--white); color: var(--midnight);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.vsc-coa-x:hover { border-color: var(--rose); color: var(--rose-hover); }
.vsc-coa-body { flex: 1 1 auto; min-height: 0; background: var(--ivory); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vsc-coa-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.vsc-coa-page { width: 100%; max-width: 820px; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(8,32,64,0.12); background: var(--white); }
.vsc-coa-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 56px 20px; color: var(--text-muted); font-size: 14px;
}
.vsc-coa-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--rose);
  animation: vsc-coa-spin 0.7s linear infinite;
}
@keyframes vsc-coa-spin { to { transform: rotate(360deg); } }
.vsc-coa-error { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.vsc-coa-error a { color: var(--vsc-cyan); text-decoration: underline; font-weight: 600; }
.vsc-coa-note {
  flex-shrink: 0; margin: 0; padding: 12px 20px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted); border-top: 1px solid var(--border); background: var(--white);
}
.vsc-coa-note a { color: var(--vsc-cyan); text-decoration: underline; }

/* CoA per-size tabs (multi-certificate products) — one cyan-accented pill per certified size,
   sitting between the modal head and the PDF body. Horizontal-scrolls so a product with many
   sizes never overflows the viewport; single-certificate products render no tab strip. */
.vsc-coa-tabs {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  background: var(--white); flex-shrink: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.vsc-coa-tabs::-webkit-scrollbar { display: none; }
.vsc-coa-tab {
  flex: 0 0 auto; padding: 8px 18px; border-radius: 100px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--midnight); font-size: 13.5px; font-weight: 600;
  line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.vsc-coa-tab:hover { border-color: var(--vsc-cyan); color: var(--vsc-cyan); }
.vsc-coa-tab.is-active { border-color: var(--vsc-cyan); background: var(--vsc-cyan); color: #fff; }

@media (max-width: 600px) {
  .vsc-coa-dl span { display: none; }
  .vsc-coa-dl { padding: 9px; }
  .vsc-coa-pages { padding: 12px; gap: 12px; }
  .vsc-coa-tabs { padding: 10px 12px; gap: 6px; }
  .vsc-coa-tab { padding: 7px 14px; font-size: 13px; }
}

@media (min-width: 768px) {
  /* Center as a card on desktop instead of full-width bottom sheet */
  .vsc-coa-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(880px, 92vw); height: 80vh; max-height: 80vh;
    border-radius: 20px; transform: translate(-50%, -45%); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
  }
  .vsc-coa-modal.is-open .vsc-coa-sheet { transform: translate(-50%, -50%); opacity: 1; }
}

/* =============================================================
   SHOP ARCHIVE CARDS v4.13.0 — AminoClub-style (.product-card.vsc-acard)
   Overrides the v3 parent .product-card. Layout 1:1 with the reference:
   full uncropped vial, title + "From $price" row, italic subtitle, black
   "View" pill. (Product photos keep their real studio background.)
   ============================================================= */
.product-card.vsc-acard {
  background: #F8F8F8; border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column; padding: 0;
  box-shadow: none; transition: box-shadow .2s, transform .2s; position: relative;
}
.product-card.vsc-acard:hover { box-shadow: 0 18px 40px rgba(8,32,64,0.12); transform: translateY(-4px); }
.vsc-acard .vsc-acard-image {
  display: block; aspect-ratio: 1/1; background: var(--ivory); overflow: hidden;
}
.vsc-acard .vsc-acard-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vsc-acard .vsc-acard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vsc-acard .vsc-acard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Title: lighter + smaller than before so it reads like the reference and
   doesn't dominate or jam into 3 tight lines. */
.vsc-acard .vsc-acard-title { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: normal; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; margin: 0; }
.vsc-acard .vsc-acard-title a { color: var(--midnight); text-decoration: none; }
.vsc-acard .vsc-acard-price { text-align: right; flex-shrink: 0; line-height: 1.05; }
.vsc-acard .vsc-acard-price-pre { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; }
.vsc-acard .vsc-acard-price-amt { font-size: 18px; font-weight: 800; color: var(--midnight); white-space: nowrap; }
.vsc-acard .vsc-acard-price-amt .woocommerce-Price-amount { font-weight: 800; color: var(--midnight); }
/* Subtitle: plain grey (not italic), ~70% of the title, single line, matching the reference's secondary line. */
.vsc-acard .vsc-acard-sub { font-size: 14.5px; font-style: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.vsc-acard .vsc-acard-origin { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sky); margin: 6px 0 0; }
.vsc-acard .vsc-acard-origin svg { width: 13px; height: 13px; flex-shrink: 0; }
.vsc-acard .vsc-acard-cta { margin-top: auto; display: block; text-align: center; background: var(--midnight); color: #fff; padding: 14px; border-radius: 100px; text-decoration: none; font-size: 15px; font-weight: 700; transition: background .2s; }
.vsc-acard .vsc-acard-cta:hover { background: var(--blue-secondary); }
/* CARD PILL GEOMETRY — ONE box, shared by the Sale pill and the Sold Out pill.
   Nothing here sets a colour. Both pills occupy the same top-left slot and only
   one is ever emitted (archive-product.php: sold-out wins), so they must stay
   the same shape -- keeping the box in a single declaration is what stops the
   two drifting apart the next time one of them is nudged. Paint lives in the
   two authoritative colour blocks below. */
.vsc-acard .sale-badge,
.vsc-acard .vsc-oos-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 100px; }
/* Sale paint, unchanged in effect. The literals became tokens because :root
   forbids a cyan hex outside the ramp; both resolve to the same colour, and the
   authoritative !important block below repaints this anyway. */
.vsc-acard .sale-badge { background: var(--vsc-cyan); color: var(--vsc-on-cyan); }
/* ============================================================================
   SALE PILL - BRAND CYAN (AUTHORITATIVE). Single source of truth for the colour
   of every sale pill on the site. Do not set sale-pill colour anywhere else.

   WHY THE SELECTOR LOOKS LIKE THIS - it is not a typo.
   The class is repeated to reach specificity (0,4,0) WITHOUT naming a single
   ancestor. It therefore does not depend on:
     - the `home` body class  (dropping it on 2026-08-04 is what turned the
       pills gold, because vsc-dark.css scoped its gold to body:not(.home))
     - the `vsc-dark` html class
     - the card wrapper (.vsc-acard / .product-card) or the page template
   Any future template change can drop any of those and this rule still holds.
   The class is repeated FIVE times = (0,5,0). That is deliberate. Snippets
   print AFTER the theme stylesheet, so specificity - not source order - is
   what has to win. The competing rules today are:
     Code Snippet #31  html body.woocommerce ul.products li.product .onsale
                       = (0,4,4) !important  (green gradient)
     Code Snippet #17  body.woocommerce ul.products li.product .onsale
                       = (0,4,3) !important  (green gradient)
     Code Snippet #17  ul.products li.product .sale-badge
                       = (0,3,2) !important
   Class count is compared BEFORE element count, so (0,5,0) beats all of them.
   An earlier version of this rule used four repeats = (0,4,0), which TIED the
   snippets on class count and then LOST on element count - .onsale would have
   rendered GREEN if WooCommerce's native sale flash were ever re-enabled.

   CONTRAST: #0EA5E9 with #0A1628 ink = 6.54:1. The pill text is 12px/700,
   which WCAG treats as NORMAL text (AA 4.5:1 - passes; AAA 7:1 - does not). Do NOT change the ink to white:
   white on #0EA5E9 is 2.77:1 and fails AA. The pill was previously #FDB813
   with WHITE ink at 1.74:1, plus a leftover green box-shadow from snippet #17.
   ============================================================================ */
.sale-badge.sale-badge.sale-badge.sale-badge,
.onsale.onsale.onsale.onsale.onsale {
  background: #0EA5E9 !important;
  background-color: #0EA5E9 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30) !important;
  border-color: transparent !important;
}
/* ============================================================================
   SOLD OUT PILL + SOLD-OUT CARD (AUTHORITATIVE). Single source of truth.

   The pill mirrors the sale pill's block above on purpose: the class is repeated
   to reach (0,4,0) WITHOUT naming an ancestor, so it does not depend on the
   `home` body class, the `vsc-dark` html class, or the card wrapper. No snippet
   targets .vsc-oos-badge today -- snippets #17/#31 only know .onsale and
   .sale-badge -- so this is not currently winning a fight. It is written this
   way so that if one ever does start targeting it, the theme still holds.

   The card treatment is what actually communicates "sold out" at a glance; the
   pill alone reads as decoration on a 51-card grid.

   THE CTA STAYS A WORKING LINK. It is labelled "Sold Out" and painted like a
   disabled control, but it still opens the product page, because the owner
   asked to be able to go into a sold-out product ("when you go into it..."), and
   because the image and title are links to the same place -- killing only the
   third link would be inconsistent, not safer. It is therefore muted but kept
   LEGIBLE (6.26:1), not dropped to the 2.01:1 of the genuinely-inert
   :disabled Add buttons. archive-product.php gives it an aria-label so a screen
   reader hears that it still navigates.
   ============================================================================ */
.vsc-oos-badge.vsc-oos-badge.vsc-oos-badge.vsc-oos-badge {
  background: var(--vsc-oos) !important;
  background-color: var(--vsc-oos) !important;
  background-image: none !important;
  color: var(--vsc-on-oos) !important;
  -webkit-text-fill-color: var(--vsc-on-oos) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* Dim the product photo. Scoped to the <img>, not the tile, so it works in BOTH
   themes from this one rule -- vsc-dark.css paints the tile background and adds
   a ::after wash but never touches the img, so nothing competes. */
.vsc-acard.is-oos .vsc-acard-image img { opacity: 0.55; filter: saturate(0.55); }
/* Price steps back to muted so it stops reading as a live offer. */
.vsc-acard.is-oos .vsc-acard-price-amt,
.vsc-acard.is-oos .vsc-acard-price-amt .woocommerce-Price-amount { color: var(--text-muted); }
/* CTA: disabled-LOOKING, still clickable (see note above). */
.vsc-acard.is-oos .vsc-acard-cta { background: var(--border); color: var(--vsc-oos-ink); }
.vsc-acard.is-oos .vsc-acard-cta:hover { background: #D8E0EA; }
/* Cancel the hover lift: a card that rises to meet the cursor is an invitation.
   (0,4,0) beats the base .product-card.vsc-acard:hover at (0,3,0). */
.product-card.vsc-acard.is-oos:hover { box-shadow: none; transform: none; }
@media (max-width: 600px) {
  .vsc-acard .vsc-acard-body { padding: 14px 12px 16px; gap: 8px; }
  /* Title-extend fix: the dark theme pins the price column to min-width:70px, which on
     narrow 2-col cards left the title only ~61px so single-word peptide names split
     mid-word ("Cagrilinti/de"). Trim the price column so the title extends past the
     halfway point and fits on one line — layout stays title-left / price-right.
     (Dark-theme price min-width override lives in vsc-dark.css.) */
  .vsc-acard .vsc-acard-head { gap: 6px !important; }
  .vsc-acard .vsc-acard-title { font-size: 13.5px !important; letter-spacing: -0.5px !important; }
  .vsc-acard .vsc-acard-price { min-width: 0 !important; }
  .vsc-acard .vsc-acard-price-amt { font-size: 14px !important; white-space: nowrap !important; }
  .vsc-acard .vsc-acard-price-pre { font-size: 10.5px !important; }
  .vsc-acard .vsc-acard-sub { font-size: 13px; }
  .vsc-acard .vsc-acard-sub { font-size: 12.5px; }
  .vsc-acard .vsc-acard-cta { padding: 12px; font-size: 14px; }
}

/* =============================================================
   SHOP ARCHIVE — top-filter layout v4.14.0 (AminoClub-style)
   Header + search/sort + category pills across the top; full-width
   responsive grid below (bigger cards on desktop). Replaces the v3
   parent left-sidebar layout (.shop-layout etc. no longer emitted).
   ============================================================= */
.vsc-shop-wrap { max-width: 1640px; margin: 0 auto; padding: 36px 32px 64px; }
/* The search box (border-radius:100px) and pills/cards read ~12px inset from
   the wrap edge because of their heavy rounding, so flush heading text looks
   too far left beside them. Indent the text-only blocks (heading, subhead,
   meta) to line up with the boxes' visible left edge. */
.vsc-shop-head { margin: 0; padding: 0 0 0 12px; }
/* Page titles carry the shared page-header treatment (membership / contact /
   COA headers): clamp / 600 / -.02em / 1.06. A fixed 34px is what made this
   title read as a label beside those pages; every other page-header scales.
   COLOUR IS NOT TAKEN FROM THAT STANDARD - the reference paints #fff for a dark
   hero, this one takes its ink from vsc-dark.css/--midnight per theme, and a
   hard-coded white would go invisible if the light theme is ever used. */
.vsc-shop-h1 { font-family: var(--grotesk, 'Onest', system-ui, sans-serif); font-size: clamp(34px, 5.4vw, 62px); font-weight: 600; letter-spacing: -.02em; line-height: 1.06; color: var(--midnight); margin: 0 0 6px; padding: 0; }
.vsc-shop-subhead { font-size: 15px; color: var(--text-muted); margin: 0 0 24px; padding: 0; }
.vsc-shop-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding: 0; }
.vsc-shop-search { position: relative; flex: 1 1 380px; max-width: 560px; margin: 0; }
.vsc-shop-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.vsc-shop-search input { width: 100%; margin: 0; padding: 14px 18px 14px 46px; border: 1px solid var(--border); background: #F7F9FB; border-radius: 100px; font-family: inherit; font-size: 15px; color: var(--midnight); outline: none; }
.vsc-shop-search input:focus { border-color: var(--rose); background: #fff; }
.vsc-shop-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vsc-shop-pill { background: #F1F4F8; border: 1px solid transparent; color: var(--midnight); font-family: var(--grotesk, 'Onest', sans-serif); font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 100px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.vsc-shop-pill:hover { background: #E3E9F0; }
.vsc-shop-pill.is-active { background: var(--midnight); color: #fff; }
.vsc-shop-pill-count { font-weight: 500; opacity: 0.6; margin-left: 3px; font-size: 12.5px; }
.vsc-shop-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; padding-left: 12px; }
.vsc-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: none; margin: 0; }
.vsc-shop-empty { text-align: center; padding: 64px 24px; color: var(--text-muted); }
.vsc-shop-empty h3 { font-size: 20px; color: var(--midnight); margin: 0 0 8px; }
@media (max-width: 1200px) { .vsc-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .vsc-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) {
  .vsc-shop-wrap { padding: 24px 12px 48px; }
  /* No size step: the clamp floors at 34px, which is what the other page
     headers render at this width. A 26px override would re-open the gap. */
  .vsc-shop-controls { gap: 12px; }
  .vsc-shop-search { flex: 1 1 100%; max-width: none; }
  .vsc-shop-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px 14px; padding: 0 12px 4px; }
  .vsc-shop-pill { flex: 0 0 auto; }
  .vsc-shop-grid { gap: 12px; }
  /* Mobile: trim the heading/meta optical indent (12px reads too wide vs the
     search bar here) so the title lines up with the search box + pills. */
  .vsc-shop-head { padding-left: 6px; }
  .vsc-shop-meta { padding-left: 6px; }
}

/* ==========================================================================
 * BUILD YOUR OWN STACK — Bundles tab (vsc-stack.js) — v4.26.0
 * Light base + html.vsc-dark overrides (the shop funnel runs dark).
 * ========================================================================== */
/* The strip is sized purely by the sum of its labels, so a longer tab name used to push the
   whole PAGE wider than the phone ("Nasals" -> "Nasal Research" cost 19px of horizontal
   overflow at 375px). Clamp it to the viewport and let the strip itself scroll instead. */
.vsc-shop-tabs {
  display: inline-flex; gap: 4px; margin: 4px 0 8px;
  background: var(--rose-soft, var(--vsc-cyan-wash)); border: 1px solid var(--border, #E5EAF0);
  border-radius: 100px; padding: 4px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vsc-shop-tabs::-webkit-scrollbar { display: none; }
.vsc-shoptab { flex: 0 0 auto; }
.vsc-shoptab {
  border: none; background: transparent; cursor: pointer;
  font-family: 'Onest','Inter',sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-muted, #6B7A94); padding: 9px 20px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1; transition: all .15s ease;
}
.vsc-shoptab.is-active { background: #fff; color: var(--midnight, #082040); box-shadow: 0 2px 6px rgba(8,32,64,.12); }
.vsc-shoptab-badge {
  background: var(--vsc-cyan); color: #fff; font-family: 'Inter',sans-serif;
  font-weight: 800; font-size: 10px; padding: 2px 7px; border-radius: 100px;
}

/* Featured rail — hidden until Bundles mode */
.vsc-stack-featured { display: none; margin: 6px 0 14px; }
body.vsc-stack-on .vsc-stack-featured { display: block; }
.vsc-stack-featured-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted, #6B7A94); margin-bottom: 12px;
}
.vsc-stack-frail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.vsc-stack-fcard {
  flex: 0 0 240px; scroll-snap-align: start; border: 1px solid var(--border, #E5EAF0);
  border-radius: 16px; padding: 16px; background: linear-gradient(180deg,#F2F9FF,#fff);
  display: flex; flex-direction: column;
}
.vsc-stack-fcard h3 { margin: 0 0 4px; font-size: 16px; font-family: 'Onest','Inter',sans-serif; color: var(--midnight,#082040); }
.vsc-stack-fcard-tag { font-size: 12px; color: var(--text-muted,#6B7A94); line-height: 1.4; min-height: 34px; }
.vsc-stack-fcard-area {
  align-self: flex-start; font-size: 10px; font-weight: 700; color: var(--vsc-cyan);
  background: var(--rose-soft,var(--vsc-cyan-wash)); border-radius: 100px; padding: 3px 9px; margin: 8px 0;
}
.vsc-stack-fcard-items { font-size: 12px; color: var(--midnight,#082040); opacity: .8; line-height: 1.4; margin-bottom: 10px; }
.vsc-stack-fcard-pr { font-size: 14px; font-weight: 700; color: var(--midnight,#082040); margin-bottom: 12px; margin-top: auto; }
.vsc-stack-fcard-pr s { color: #9AA5B4; font-weight: 500; margin-right: 6px; }
.vsc-stack-fcard-pr .sv { color: var(--vsc-cyan); margin-left: 6px; }
.vsc-stack-fload {
  width: 100%; border: none; border-radius: 100px; background: var(--midnight,#082040); color: #fff;
  font-weight: 700; font-size: 13px; height: 40px; cursor: pointer;
}
.vsc-stack-fload:hover { background: #0a2a55; }

/* Card stepper footer (Build Your Own) */
/* Pin the Add-to-stack footer to the bottom of the card (like .vsc-acard-cta "View") so every
 * button is level regardless of product-name length. */
.vsc-stack-foot { margin-top: auto; padding-top: 10px; }
.vsc-acard.vsc-stack-incard { outline: 2px solid var(--vsc-cyan); outline-offset: -2px; }
/* Match the site's primary add-to-cart button (.vsc-pdp-cart): rose, pill, soft glow. */
.vsc-stack-add {
  width: 100%; border: none; background: var(--vsc-cyan); color: var(--midnight,#082040);
  border-radius: 100px; height: 40px; font-weight: 600; font-size: 13px; letter-spacing: .3px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--vsc-cyan-rgb), .35); transition: all .3s; font-family: inherit;
}
.vsc-stack-add:hover { background: var(--vsc-cyan); }
.vsc-stack-stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--vsc-cyan); border-radius: 100px; overflow: hidden; height: 48px;
}
.vsc-stack-stepper button { border: none; background: transparent; width: 42px; height: 48px; font-size: 20px; font-weight: 700; color: var(--midnight,#082040); cursor: pointer; }
.vsc-stack-stepper .vsc-stack-q { font-weight: 700; font-size: 15px; color: var(--midnight,#082040); }
/* Hide the "View" CTA while building a stack (the stepper takes its place) */
body.vsc-stack-on .vsc-acard-cta { display: none; }

/* Sticky bottom bar */
.vsc-stack-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: none;
  background: #fff; border-top: 1px solid var(--border,#E5EAF0); box-shadow: 0 -8px 24px rgba(8,32,64,.10);
}
.vsc-stack-bar.show { display: block; }
.vsc-stack-bar-inner { max-width: 1200px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 20px; }
.vsc-stack-bar-info { flex: 1; min-width: 0; }
.vsc-stack-bar-line { font-size: 14px; font-weight: 600; color: var(--midnight,#082040); }
.vsc-stack-bar-line .vsc-stack-count { font-weight: 700; }
.vsc-stack-bar-line .sv, .vsc-stack-bar-line .vsc-stack-on-pct { color: var(--vsc-cyan); font-weight: 700; }
.vsc-stack-bar-line s { color: #9AA5B4; font-weight: 500; }
.vsc-stack-bar-line .vsc-stack-warn { color: #B45309; font-weight: 600; }
.vsc-stack-bar-track { height: 7px; background: #EEF2F7; border-radius: 100px; margin-top: 8px; overflow: hidden; max-width: 560px; }
.vsc-stack-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--vsc-cyan), var(--midnight,#082040)); border-radius: 100px; transition: width .25s ease; }
.vsc-stack-cta {
  border: none; border-radius: 100px; background: var(--vsc-cyan); color: #fff; font-weight: 700;
  font-size: 15px; padding: 14px 26px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.vsc-stack-cta:disabled { background: #CBD5E1; cursor: default; }
/* Stay cyan once a discount tier unlocks (was flipping to dark navy) — keeps it clean. */
.vsc-stack-cta.is-ready { background: var(--vsc-cyan); }

/* ---- dark theme overrides (shop runs dark) ---- */
html.vsc-dark .vsc-shop-tabs { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html.vsc-dark .vsc-shoptab { color: rgba(255,255,255,.62); }
html.vsc-dark .vsc-shoptab.is-active { background: rgba(255,255,255,.96); color: #082040; }
html.vsc-dark .vsc-stack-fcard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html.vsc-dark .vsc-stack-fcard h3, html.vsc-dark .vsc-stack-fcard-items, html.vsc-dark .vsc-stack-fcard-pr { color: #EAF2FF; }
html.vsc-dark .vsc-stack-fcard-area { background: rgba(var(--vsc-cyan-rgb), .16); color: var(--vsc-cyan); }
html.vsc-dark .vsc-stack-fcard-tag { color: rgba(255,255,255,.6); }
html.vsc-dark .vsc-stack-fload, html.vsc-dark .vsc-stack-add { background: var(--vsc-cyan); border-color: var(--vsc-cyan); }
html.vsc-dark .vsc-stack-fload:hover, html.vsc-dark .vsc-stack-add:hover { background: var(--vsc-cyan); }
html.vsc-dark .vsc-stack-stepper { border-color: var(--vsc-cyan); }
html.vsc-dark .vsc-stack-stepper button, html.vsc-dark .vsc-stack-stepper .vsc-stack-q { color: #EAF2FF; }
html.vsc-dark .vsc-stack-bar { background: #0B1424; border-top-color: rgba(255,255,255,.10); }
html.vsc-dark .vsc-stack-bar-line { color: #EAF2FF; }
html.vsc-dark .vsc-stack-bar-line .sv, html.vsc-dark .vsc-stack-bar-line .vsc-stack-on-pct { color: var(--vsc-cyan); }
html.vsc-dark .vsc-stack-bar-track { background: rgba(255,255,255,.10); }
html.vsc-dark .vsc-stack-bar-line .vsc-stack-warn { color: #FBBF77; }

@media (max-width: 880px) {
  .vsc-stack-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .vsc-stack-cta { width: 100%; }
  .vsc-stack-fcard { flex-basis: 200px; }
  body.vsc-stack-on { padding-bottom: 120px; }
}
body.vsc-stack-on { padding-bottom: 96px; }

/* ---- Bundle card vial tiles + featured badge + tags + explainer (v4.26.1) ---- */
.vsc-stack-fcard { flex-basis: 288px; }
.vsc-stack-fcard.is-feat { border-color: var(--vsc-cyan); box-shadow: 0 0 0 1px var(--vsc-cyan) inset, 0 14px 32px rgba(var(--vsc-cyan-rgb), .20); }
.vsc-stack-featbadge { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--vsc-cyan); border-radius: 100px; padding: 4px 11px; margin-bottom: 10px; }
.vsc-stack-vials { display: flex; gap: 6px; justify-content: center; background: var(--ice,#F6FAFF); border: 1px solid var(--border,#E5EAF0); border-radius: 12px; padding: 12px 8px; margin-bottom: 12px; }
.vsc-stack-vtile { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vsc-stack-vtile img { height: 58px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(8,32,64,.18)); }
.vsc-stack-vn { font-size: 9.5px; font-weight: 600; color: var(--midnight,#082040); opacity: .85; text-align: center; line-height: 1.15; }
.vsc-stack-fcard h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vsc-stack-countpill { font-size: 10px; font-weight: 700; color: var(--vsc-cyan); background: var(--rose-soft,var(--vsc-cyan-wash)); border-radius: 100px; padding: 3px 9px; }
.vsc-stack-tagrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.vsc-stack-ttag { font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted,#6B7A94); border: 1px solid var(--border,#E5EAF0); border-radius: 100px; padding: 2px 7px; }
.vsc-stack-explainer { display: none; margin: 24px 0 8px; border: 1px solid var(--border,#E5EAF0); border-radius: 14px; padding: 16px 18px; background: var(--ice,#F6FAFF); font-size: 13px; line-height: 1.6; color: var(--text-muted,#6B7A94); }
.vsc-stack-explainer b { color: var(--midnight,#082040); }
body.vsc-stack-on .vsc-stack-explainer { display: block; }

/* dark theme */
html.vsc-dark .vsc-stack-vials { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
html.vsc-dark .vsc-stack-vtile img { filter: drop-shadow(0 6px 9px rgba(0,0,0,.4)); }
html.vsc-dark .vsc-stack-vn { color: #EAF2FF; }
html.vsc-dark .vsc-stack-countpill { color: var(--vsc-cyan); background: rgba(var(--vsc-cyan-rgb), .16); }
html.vsc-dark .vsc-stack-ttag { color: rgba(234,242,255,.6); border-color: rgba(255,255,255,.12); }
html.vsc-dark .vsc-stack-explainer { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: rgba(234,242,255,.7); }
html.vsc-dark .vsc-stack-explainer b { color: #EAF2FF; }
html.vsc-dark .vsc-stack-fcard.is-feat { box-shadow: 0 0 0 1px var(--vsc-cyan) inset, 0 14px 32px rgba(var(--vsc-cyan-rgb), .28); }

/* ---- Cart drawer: cart-aware "Researchers also bought" upsell (v4.27.0) ---- */
.vsc-cart-recos { border-top: 1px solid #E5EAF0; padding-top: 14px; margin-top: 6px; }
.vsc-cart-recos-h { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #6B7A94; margin-bottom: 10px; }
.vsc-cart-recos-list { display: flex; flex-direction: column; gap: 8px; }
.vsc-cart-reco { display: flex; align-items: center; gap: 10px; }
.vsc-cart-reco-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #F6FAFF; flex: 0 0 44px; }
.vsc-cart-reco-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vsc-cart-reco-text strong { font-size: 13px; font-weight: 600; color: #082040; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-cart-reco-text span { font-size: 12px; color: #6B7A94; }
.vsc-cart-reco-add { flex: 0 0 auto; border: none; background: var(--vsc-cyan); color: #fff; border-radius: 100px; padding: 8px 15px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s; font-family: inherit; }
.vsc-cart-reco-add:hover { background: var(--vsc-cyan); }
.vsc-cart-reco-add:disabled { opacity: .55; cursor: default; }

/* ---- Featured stacks: big AscendBioLabs-style cards w/ per-SKU product cards (v4.27.1) ---- */
.vsc-stack-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .vsc-stack-fgrid { grid-template-columns: 1fr; } }
.vsc-stack-featured .vsc-stack-fcard { flex: none; width: auto; padding: 20px; }
.vsc-stack-fcard h3 { font-size: 20px; letter-spacing: -.3px; margin: 6px 0 4px; }
.vsc-stack-members { display: flex; gap: 10px; margin: 14px 0 4px; }
.vsc-stack-member { flex: 1 1 0; min-width: 0; border: 1px solid var(--border,#E5EAF0); border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; }
.vsc-stack-member-ph { height: 86px; display: flex; align-items: center; justify-content: center; }
.vsc-stack-member-ph img { height: 82px; width: auto; object-fit: contain; }
.vsc-stack-member-n { font-size: 11.5px; font-weight: 600; color: var(--midnight,#082040); text-align: center; line-height: 1.2; }
.vsc-stack-member-pr { font-size: 11px; font-weight: 700; color: var(--vsc-cyan); }
.vsc-stack-fcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.vsc-stack-fcard-pr { font-size: 16px; margin: 0; }
.vsc-stack-fadd { border: none; background: var(--vsc-cyan); color: var(--midnight,#082040); border-radius: 100px; height: 44px; padding: 0 24px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(var(--vsc-cyan-rgb), .35); transition: all .3s; font-family: inherit; white-space: nowrap; }
.vsc-stack-fadd:hover { background: var(--vsc-cyan); }
.vsc-stack-fadd:disabled { opacity: .6; cursor: default; }
.vsc-stack-ttag.is-count { background: var(--rose-soft,var(--vsc-cyan-wash)); color: var(--vsc-cyan); border-color: transparent; }
/* dark */
html.vsc-dark .vsc-stack-member { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html.vsc-dark .vsc-stack-member-n { color: #EAF2FF; }
/* small cyan type on a dark card -- the one place THE cyan is too dark to read (see the
   --vsc-cyan-on-dark note in :root). Same colour, one step up, so AA still passes. */
html.vsc-dark .vsc-stack-member-pr, html.vsc-dark .vsc-stack-ttag.is-count { color: var(--vsc-cyan-on-dark); }
html.vsc-dark .vsc-stack-ttag.is-count { background: rgba(var(--vsc-cyan-rgb), .16); }
@media (max-width: 480px) {
  .vsc-stack-members { gap: 6px; }
  .vsc-stack-member-ph { height: 132px; }
  .vsc-stack-fcard-foot { flex-direction: column; align-items: stretch; }
  .vsc-stack-fadd { width: 100%; }
}

/* === Featured stacks: DARK cards matching the site + light studio-vial photo tiles (v4.27.5) === */
.vsc-stack-fcard, html.vsc-dark .vsc-stack-fcard { background: rgba(38,46,61,0.55) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 12px 30px rgba(0,0,0,.22) !important; }
.vsc-stack-fcard.is-feat, html.vsc-dark .vsc-stack-fcard.is-feat { box-shadow: 0 0 0 1.5px var(--vsc-cyan) inset, 0 16px 36px rgba(var(--vsc-cyan-rgb), .22) !important; }
.vsc-stack-fcard h3, html.vsc-dark .vsc-stack-fcard h3 { color: #EAF2FF; }
.vsc-stack-fcard .vsc-stack-fcard-tag, html.vsc-dark .vsc-stack-fcard .vsc-stack-fcard-tag { color: rgba(234,242,255,.62); }
.vsc-stack-fcard .vsc-stack-fcard-pr, html.vsc-dark .vsc-stack-fcard .vsc-stack-fcard-pr { color: #EAF2FF; }
.vsc-stack-fcard .vsc-stack-fcard-pr s { color: rgba(234,242,255,.42); }
.vsc-stack-fcard .vsc-stack-fcard-pr .sv { color: var(--vsc-cyan-on-dark); }
.vsc-stack-fcard .vsc-stack-ttag, html.vsc-dark .vsc-stack-fcard .vsc-stack-ttag { color: rgba(234,242,255,.6); border-color: rgba(255,255,255,.14); background: transparent; }
.vsc-stack-fcard .vsc-stack-ttag.is-count, html.vsc-dark .vsc-stack-fcard .vsc-stack-ttag.is-count { color: var(--vsc-cyan-on-dark); background: rgba(var(--vsc-cyan-rgb), .16); border-color: transparent; }
/* the vial sits in a clean light photo tile (studio shots have light backgrounds that blend here) */
.vsc-stack-member, html.vsc-dark .vsc-stack-member { background: #EBECEF !important; border-color: rgba(255,255,255,.08) !important; }
.vsc-stack-member-n, html.vsc-dark .vsc-stack-member-n { color: var(--midnight,#082040) !important; }
/* full-scale studio vial image filling the member box (no blend — these are clean studio shots) */
.vsc-stack-member { padding: 8px 6px !important; }
.vsc-stack-member-ph { height: 190px; width: 100%; display: flex; align-items: center; justify-content: center; }
.vsc-stack-member-ph img { height: 100%; width: 100%; object-fit: contain; mix-blend-mode: normal !important; }
/* foot: price line + full-width button — EXACT match to the live shop card button (#262E3D on dark) */
.vsc-stack-fcard-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.vsc-stack-add, html.vsc-dark .vsc-stack-add,
.vsc-stack-fadd, html.vsc-dark .vsc-stack-fadd {
  width: 100%; display: block; text-align: center; background: #262E3D !important; color: #fff !important;
  border: none !important; padding: 14px; height: auto; border-radius: 100px; font-size: 15px; font-weight: 700;
  letter-spacing: normal; box-shadow: none !important; cursor: pointer; transition: background .2s; font-family: inherit;
}
.vsc-stack-add:hover, html.vsc-dark .vsc-stack-add:hover,
.vsc-stack-fadd:hover, html.vsc-dark .vsc-stack-fadd:hover { background: #313C4F !important; }

/* Big tiles that fill the card (3-vial cards naturally get larger vials than 4-vial — intended),
 * with bigger vial images, all bottom-aligned. The featured "Stack of the Month" badge floats
 * (absolute) so that card's content sits level with its row-mate instead of being pushed down. */
.vsc-stack-member { flex: 1 1 0 !important; max-width: none; padding: 6px 6px !important; }
.vsc-stack-members { align-items: flex-end; }
.vsc-stack-member-ph { height: 210px; }
.vsc-stack-member-ph img { object-position: center bottom; }
.vsc-stack-fcard { position: relative; }
.vsc-stack-featbadge { position: absolute; top: -12px; left: 18px; margin: 0 !important; z-index: 3; box-shadow: 0 6px 14px rgba(var(--vsc-cyan-rgb), .40); }
/* Mobile: size the vial box to the image aspect (no fixed height) so 4-vial cards don't
 * leave a tall white gap with a tiny bottom-anchored vial — uniform, centered, clean. */
@media (max-width: 600px) {
  .vsc-stack-member { padding: 4px !important; }
  .vsc-stack-member-ph { height: auto !important; aspect-ratio: 4 / 5; min-height: 0; }
  .vsc-stack-member-ph img { height: 100%; width: 100%; object-fit: contain; object-position: center !important; }
}
.vsc-stack-fadd:disabled, .vsc-stack-add:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .vsc-stack-add, .vsc-stack-fadd { padding: 12px; font-size: 14px; } }

/* =============================================================
   MOBILE TAP TARGETS — audit fix.
   Each selector below is a real interactive control whose computed
   height on a phone was under the 40px minimum. Size only: no colour,
   no layout, no redesign. Scoped to <=600px so desktop is untouched.
   (Buttons/inline-flex controls centre their own content, so a
   min-height is all that's needed.)
   ============================================================= */
@media (max-width: 600px) {
  /* Shop | Bundles segmented tabs: 9px padding + 14px text @ line-height 1 = 32px */
  .vsc-shoptab { min-height: 40px; }

  /* "Researchers also bought" Add buttons (side-cart drawer + checkout aside):
     8px padding + 12px text = ~30px; the .vsc-also variant was pinned to 34px. */
  .vsc-cart-reco-add { min-height: 40px; }
  .vsc-also-add { min-height: 40px; }

  /* COA download pill: its label is display:none at this width, leaving a
     ~33px icon-only button. Keep it square and centred at 40px. */
  .vsc-coa-dl { min-height: 40px; min-width: 40px; justify-content: center; }

  /* Partner referral-link "Copy" button: 6px padding + 12px text = ~28px */
  .vsc-partner-copy { min-height: 40px; }
}

/* ==========================================================================
 * BUNDLES TAB v4.32.0 — featured stacks + Build Your Own Stack
 *
 * Authoritative. Supersedes the v4.26/v4.27 stack rules above: the sticky bottom
 * bar and the in-card steppers are gone (the builder now owns its own grid and a
 * pinned summary panel), and `body.vsc-stack-on` now hides the shop chrome
 * outright instead of overlaying it. Kept the old selectors alive rather than
 * deleting them so a stale cached bundle can't render a half-styled page.
 * ========================================================================== */
body.vsc-stack-on { padding-bottom: 0; }
.vsc-stack-bar { display: none !important; }               /* replaced by .vsc-byos-panel */

/* Bundles/Build views take over the page: hide search, pills, count, product grid.
 *
 * SPECIFICITY IS LOAD-BEARING HERE — do not "simplify" these selectors.
 * A live WP Code Snippet (`vsv3-mobile-cards-unified`) is printed in the FOOTER, i.e. AFTER
 * this stylesheet, and re-declares the product grid on phones:
 *
 *   @media (max-width:768px){ html body #shopGrid:not(.vsv3-frt-grid){ display:grid !important } }
 *
 * That selector scores (1,1,2) — the argument of `:not()` counts toward specificity — so it
 * outranked the old `body.vsc-stack-on #shopGrid` (1,1,1) and un-hid the whole 57-product
 * catalog INSIDE the Bundles view, pushing the stack cards ~9,000px down the page. Every
 * viewport <=768px looked like "the Bundles tab does nothing" (it was rendering the entire
 * time, just below eleven screens of shop grid).
 *
 * `html body.vsc-stack-on #shopGrid:not(.vsv3-frt-grid)` scores (1,2,2) and therefore wins on
 * SPECIFICITY, not on source order — so the snippet can be reordered, re-saved or re-scoped
 * without silently flipping the bug back on. vsc-stack.js additionally stamps an inline
 * `display:none !important` on these nodes while a panel view is up (an inline important
 * declaration outranks every stylesheet), so a future snippet can't out-specify us either. */
html body.vsc-stack-on .vsc-shop-controls,
html body.vsc-stack-on .vsc-shop-pills,
html body.vsc-stack-on .vsc-shop-meta,
html body.vsc-stack-on #shopGrid,
html body.vsc-stack-on #shopGrid:not(.vsv3-frt-grid),
html body.vsc-stack-on .vsc-shop-empty { display: none !important; }

.vsc-bundles { display: none; }
.vsc-bundles.is-on { display: block; }
.vsc-bundles-view { display: none; }
.vsc-bundles.is-on .vsc-bundles-view[data-view="bundles"] { display: block; }
body.vsc-stack-build .vsc-bundles-view[data-view="bundles"] { display: none !important; }
body.vsc-stack-build .vsc-bundles-view[data-view="build"] { display: block; }

/* ---- featured stack cards ---- */
.vsc-stack-featured { display: block !important; margin: 8px 0 0; }
.vsc-stack-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vsc-stack-fcard {
  display: flex; flex-direction: column; width: auto; flex: none;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 22px;
}
.vsc-stack-fcard h3 { font-size: 24px; letter-spacing: -.4px; margin: 8px 0 6px; }
.vsc-stack-fcard-tag { min-height: 0; margin-bottom: 2px; font-size: 13.5px; line-height: 1.5; }
.vsc-stack-tagrow { align-items: center; gap: 6px; margin: 0; }
.vsc-stack-ttag { font-size: 10px; padding: 4px 10px; letter-spacing: .3px; }
.vsc-stack-ttag.is-count { margin-left: auto; color: var(--vsc-cyan); border-color: rgba(var(--vsc-cyan-rgb), .45); background: rgba(var(--vsc-cyan-rgb), .12); }
.vsc-stack-featbadge { position: absolute; top: -11px; left: 20px; margin: 0; }
.vsc-stack-fcard.is-feat { position: relative; }

.vsc-stack-members { display: flex; gap: 10px; margin: 16px 0 4px; }
.vsc-stack-member { padding: 0; overflow: hidden; gap: 0; }
.vsc-stack-member-ph { height: auto; width: 100%; aspect-ratio: 1 / 1; }
.vsc-stack-member-ph img { height: 100%; width: 100%; object-fit: cover; }
.vsc-stack-member-n { padding: 9px 4px; width: 100%; font-size: 11.5px; }

.vsc-stack-priceline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.vsc-stack-priceline s { font-size: 14px; color: #9AA5B4; }
.vsc-stack-priceline b { font-size: 30px; font-weight: 700; letter-spacing: -1px; font-family: 'Onest','Inter',sans-serif; color: var(--midnight,#082040); }
.vsc-stack-savepill { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--vsc-cyan); border-radius: 100px; padding: 4px 10px; }
.vsc-stack-pervial { margin-left: auto; font-size: 13px; color: var(--text-muted,#6B7A94); }

.vsc-stack-fadd {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 16px; height: 50px; padding: 0 20px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #EAF2FF; border-radius: 12px; font-weight: 600; font-size: 15px;
  cursor: pointer; box-shadow: none; font-family: inherit; transition: background .2s, border-color .2s;
}
.vsc-stack-fadd svg { width: 18px; height: 18px; flex: 0 0 18px; }
.vsc-stack-fadd:hover { background: rgba(255,255,255,.09); }
.vsc-stack-fcard.is-feat .vsc-stack-fadd {
  background: var(--vsc-cyan); border-color: var(--vsc-cyan); color: var(--vsc-on-cyan); font-weight: 700;
  box-shadow: 0 8px 24px rgba(var(--vsc-cyan-rgb), .32);
}
.vsc-stack-fcard.is-feat .vsc-stack-fadd:hover { background: var(--vsc-cyan-hover); }

/* ---- "Build your own stack" band ---- */
.vsc-byos-band {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin: 22px 0 8px; padding: 34px 36px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(115deg, rgba(var(--vsc-cyan-rgb), .10), rgba(var(--vsc-cyan-rgb), .02) 62%);
}
.vsc-byos-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--vsc-cyan); }
.vsc-byos-eyebrow svg { width: 15px; height: 15px; }
.vsc-byos-band h2 { margin: 12px 0 10px; font-size: 34px; letter-spacing: -.9px; font-family: 'Onest','Inter',sans-serif; color: var(--midnight,#082040); }
.vsc-byos-band p { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--text-muted,#6B7A94); }
.vsc-byos-start {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  height: 52px; padding: 0 26px; border: none; border-radius: 100px;
  background: var(--vsc-cyan); color: var(--vsc-on-cyan); font-weight: 700; font-size: 15px;
  cursor: pointer; font-family: inherit; box-shadow: 0 10px 28px rgba(var(--vsc-cyan-rgb), .35); transition: background .2s;
}
.vsc-byos-start:hover { background: var(--vsc-cyan-hover); }
.vsc-byos-start svg { width: 18px; height: 18px; }

/* ---- build view ---- */
.vsc-byos-back {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px;
  border: none; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-muted,#6B7A94);
}
.vsc-byos-back:hover { color: var(--vsc-cyan); }
.vsc-byos-back svg { width: 18px; height: 18px; }
.vsc-byos-grid-wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 28px; align-items: start; }
.vsc-byos-h2 { margin: 0 0 6px; font-size: 38px; letter-spacing: -1.1px; font-family: 'Onest','Inter',sans-serif; color: var(--midnight,#082040); }
.vsc-byos-sub { margin: 0 0 22px; font-size: 15.5px; color: var(--text-muted,#6B7A94); }
.vsc-byos-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1180px) { .vsc-byos-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.vsc-byos-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
  background: rgba(255,255,255,.03); transition: border-color .2s, box-shadow .2s;
}
.vsc-byos-card.is-on { border-color: var(--vsc-cyan); box-shadow: 0 0 0 1px var(--vsc-cyan) inset; }
.vsc-byos-img { aspect-ratio: 1 / 1; overflow: hidden; }
.vsc-byos-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsc-byos-body { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.vsc-byos-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vsc-byos-name { font-size: 15px; font-weight: 600; color: var(--midnight,#082040); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-byos-price { font-size: 15px; font-weight: 700; color: var(--midnight,#082040); flex: 0 0 auto; }
.vsc-byos-size { font-size: 13px; color: var(--text-muted,#6B7A94); }
.vsc-byos-add {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; height: 42px; width: 100%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #EAF2FF; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.vsc-byos-add svg { width: 16px; height: 16px; }
.vsc-byos-add:hover { background: rgba(255,255,255,.10); }
.vsc-byos-add.is-on { background: var(--vsc-cyan); border-color: var(--vsc-cyan); color: var(--vsc-on-cyan); font-weight: 700; }
.vsc-byos-add.is-on:hover { background: var(--vsc-cyan-hover); }

/* ---- your-stack panel ---- */
.vsc-byos-side { position: sticky; top: 96px; }
.vsc-byos-panel { border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(255,255,255,.03); padding: 24px; }
.vsc-byos-panel-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-muted,#6B7A94); }
.vsc-byos-count { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; font-size: 34px; font-weight: 700; letter-spacing: -1px; font-family: 'Onest','Inter',sans-serif; color: var(--midnight,#082040); }
.vsc-byos-pct { font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: #fff; background: var(--vsc-cyan); border-radius: 100px; padding: 5px 11px; }
.vsc-byos-track { height: 5px; border-radius: 100px; background: rgba(255,255,255,.10); overflow: hidden; }
.vsc-byos-fill { height: 100%; width: 0; border-radius: 100px; background: var(--vsc-cyan); transition: width .25s ease; }
.vsc-byos-hint { margin: 12px 0 18px; font-size: 13.5px; font-weight: 600; color: var(--vsc-cyan); }
.vsc-byos-hint b { font-weight: 700; }
.vsc-byos-lines { border-top: 1px solid rgba(255,255,255,.10); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.vsc-byos-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 14.5px; color: var(--text-muted,#6B7A94); }
.vsc-byos-line span:last-child { color: var(--midnight,#082040); font-weight: 600; }
.vsc-byos-line.is-save span { color: #34D399; }
.vsc-byos-line.is-total { margin-top: 2px; }
.vsc-byos-line.is-total span { font-size: 17px; font-weight: 700; color: var(--midnight,#082040); }
.vsc-byos-line.is-total span:last-child { font-size: 28px; letter-spacing: -.8px; font-family: 'Onest','Inter',sans-serif; }
.vsc-byos-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 20px; height: 52px; border: none; border-radius: 12px;
  background: var(--vsc-cyan); color: var(--vsc-on-cyan); font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 26px rgba(var(--vsc-cyan-rgb), .32); transition: background .2s;
}
.vsc-byos-cta svg { width: 18px; height: 18px; flex: 0 0 18px; }
.vsc-byos-cta:hover { background: var(--vsc-cyan-hover); }
.vsc-byos-cta:disabled { background: rgba(255,255,255,.07); color: rgba(234,242,255,.42); box-shadow: none; cursor: default; }
.vsc-byos-foot { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-muted,#6B7A94); }

/* ---- light-theme fallbacks (the shop funnel runs dark, but never ship a page
        that only works with one <html> class) ---- */
html:not(.vsc-dark) .vsc-stack-fcard,
html:not(.vsc-dark) .vsc-byos-card,
html:not(.vsc-dark) .vsc-byos-panel { background: #fff; border-color: var(--border,#E5EAF0); }
html:not(.vsc-dark) .vsc-byos-band { border-color: var(--border,#E5EAF0); background: linear-gradient(115deg, #EFF9FF, #F8FBFF 62%); }
html:not(.vsc-dark) .vsc-stack-fadd,
html:not(.vsc-dark) .vsc-byos-add { background: #fff; border-color: var(--border,#E5EAF0); color: var(--midnight,#082040); }
html:not(.vsc-dark) .vsc-byos-track,
html:not(.vsc-dark) .vsc-byos-lines { border-color: var(--border,#E5EAF0); }
html:not(.vsc-dark) .vsc-byos-track { background: #EEF2F7; }

/* ---- dark theme ---- */
html.vsc-dark .vsc-stack-fcard h3,
html.vsc-dark .vsc-stack-priceline b,
html.vsc-dark .vsc-byos-h2,
html.vsc-dark .vsc-byos-band h2,
html.vsc-dark .vsc-byos-name,
html.vsc-dark .vsc-byos-price,
html.vsc-dark .vsc-byos-count,
html.vsc-dark .vsc-byos-line span:last-child,
html.vsc-dark .vsc-byos-line.is-total span,
html.vsc-dark .vsc-stack-member-n { color: #EAF2FF; }
html.vsc-dark .vsc-stack-member { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html.vsc-dark .vsc-byos-sub,
html.vsc-dark .vsc-byos-size,
html.vsc-dark .vsc-byos-band p,
html.vsc-dark .vsc-stack-pervial,
html.vsc-dark .vsc-byos-line,
html.vsc-dark .vsc-byos-panel-lbl,
html.vsc-dark .vsc-byos-foot,
html.vsc-dark .vsc-byos-back { color: rgba(234,242,255,.62); }
html.vsc-dark .vsc-stack-priceline s { color: rgba(234,242,255,.42); }
html.vsc-dark .vsc-byos-line.is-save span { color: #34D399; }

/* ---- mobile ---- */
@media (max-width: 980px) {
  .vsc-byos-grid-wrap { grid-template-columns: 1fr; }
  /* The summary panel becomes a bottom sheet so the running total never scrolls away. */
  .vsc-byos-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90; }
  .vsc-byos-panel { border-radius: 18px 18px 0 0; border-bottom: none; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); background: #0B1424; box-shadow: 0 -12px 32px rgba(0,0,0,.45); }
  html:not(.vsc-dark) .vsc-byos-panel { background: #fff; }
  .vsc-byos-count { margin: 6px 0 10px; font-size: 24px; }
  .vsc-byos-hint { margin: 8px 0 12px; font-size: 12.5px; }
  .vsc-byos-lines { padding-top: 12px; gap: 6px; }
  .vsc-byos-line { font-size: 13.5px; }
  .vsc-byos-line.is-total span:last-child { font-size: 22px; }
  .vsc-byos-cta { margin-top: 12px; height: 48px; }
  .vsc-byos-foot { display: none; }
  body.vsc-stack-build { padding-bottom: 300px; }
}
@media (max-width: 760px) {
  .vsc-stack-fgrid { grid-template-columns: 1fr; }
  .vsc-byos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .vsc-byos-band { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 22px; }
  .vsc-byos-band h2 { font-size: 26px; }
  .vsc-byos-start { width: 100%; justify-content: center; }
  .vsc-byos-h2 { font-size: 28px; }
  .vsc-stack-fcard h3 { font-size: 20px; }
  .vsc-stack-priceline b { font-size: 26px; }
  .vsc-stack-pervial { margin-left: 0; width: 100%; }
}

/* ---- phone: the featured stack cards, now that they're actually reachable ----
 * The members row is a single flex line, which is right on the 2-column desktop grid (~176px
 * tiles) but collapses to ~73px tiles inside a 366px phone card: the vial crop loses its label
 * and every compound name wraps to three lines. Two-up restores them to ~155px — the same
 * optical size desktop gives them — and a 3-vial stack centres its odd tile instead of
 * stretching it. The !important is not decoration: the v4.27 rules above pinned
 * `.vsc-stack-member { flex: 1 1 0 !important }`, so a normal declaration can't reach it. */
@media (max-width: 600px) {
  .vsc-stack-fcard .vsc-stack-members { flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 2px; }
  .vsc-stack-fcard .vsc-stack-member {
    flex: 0 1 calc(50% - 4px) !important;
    max-width: calc(50% - 4px);
    min-width: 0;
  }
  .vsc-stack-fcard .vsc-stack-member-n { font-size: 12px; padding: 8px 4px; }
  .vsc-stack-fcard { padding: 18px 16px; border-radius: 18px; }
  .vsc-stack-fcard-tag { font-size: 13px; }
  .vsc-stack-priceline { padding-top: 14px; gap: 8px; }

  /* Tap targets. "Back to bundles" is a bare text+icon button (~20px tall) and was the only
     control in the bundles/build flow under the 40px minimum. */
  .vsc-byos-back { min-height: 40px; }
}

/* ============================================================================
   CHECKOUT v4.34.0 — Shipping -> Payment -> Review
   Payment step: wallets slot, "or pay another way" rule, accepted-card marks.
   Review step: ship-to / payment / order-items cards + the relocated place-order row.
   ========================================================================= */

.vsc-pay-express { margin: 0 0 4px; }
.vsc-pay-express:empty { display: none; }
/* Stripe lays the wallet buttons out INSIDE its own iframe, driven by the layout options the
   gateway passes it (maxColumns / maxRows / overflow). We can't reach inside the iframe from
   here, so the arrangement -- Apple Pay + Google Pay side by side, Link on its own full-width
   row -- is set in vsc-checkout.js via the express-element layout. All this rule does is let
   the element take the full width it's given. */
.vsc-pay-express #wc-stripe-express-checkout-element { display: block; width: 100%; }

.vsc-pay-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.vsc-pay-divider::before, .vsc-pay-divider::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }
.vsc-pay-divider > span {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #94A3B8; white-space: nowrap;
}
.vsc-pay-divider[hidden] { display: none; }

/* The Stripe gateway prints its own "— OR —" rule as a SIBLING of the express element and
 * un-hides it once a wallet renders. We only move the element itself, so its separator would
 * stay orphaned back in #payment, floating above the card form with nothing above it. Our
 * .vsc-pay-divider replaces it. */
#wc-stripe-express-checkout-button-separator { display: none !important; }

.vsc-cardmarks { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.vsc-cardmarks-lbl { font-size: 12px; color: #6B7280; margin-right: 2px; }
.vsc-cardmark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 38px; padding: 0 6px;
  border: 1px solid #E2E8F0; border-radius: 5px; background: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.vsc-cardmark-visa { color: #1A1F71; }
.vsc-cardmark-amex { color: #fff; background: #2E77BC; border-color: #2E77BC; }
/* Mastercard's interlocking circles, drawn rather than shipped as an image. */
.vsc-cardmark-mc { gap: 0; }
.vsc-cardmark-mc i { display: block; width: 13px; height: 13px; border-radius: 50%; }
.vsc-cardmark-mc i:first-child { background: #EB001B; }
.vsc-cardmark-mc i:last-child  { background: #F79E1B; margin-left: -5px; }

.vsc-review-card { border: 1px solid #E6EAF0; border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.vsc-review-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #EEF2F6;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #64748B;
}
.vsc-review-edit {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vsc-cyan);
}
.vsc-review-edit:hover { text-decoration: underline; }
.vsc-review-card-body { padding: 14px 16px; font-size: 14px; color: #0F2233; line-height: 1.5; }
.vsc-review-sub { margin-top: 6px; color: #64748B; font-size: 13px; }

.vsc-review-items { padding: 6px 16px 12px; }
.vsc-review-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
.vsc-review-item:last-child { border-bottom: 0; }
.vsc-review-item-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #F8FAFC; flex: 0 0 44px; }
.vsc-review-item-info { flex: 1; min-width: 0; }
.vsc-review-item-name { font-size: 14px; font-weight: 600; color: #0F2233; }
.vsc-review-item-meta { font-size: 12px; color: #6B7280; margin-top: 2px; }
.vsc-review-item-price { font-size: 14px; font-weight: 700; color: #0F2233; white-space: nowrap; }
.vsc-review-item-price.is-free { color: #16A34A; }

/* The relocated WooCommerce place-order row (terms + #place_order). It keeps WooCommerce's own
   markup; we only give it room and make the button read as the primary action of the page. */
.vsc-review-place { margin-top: 4px; }
.vsc-review-place .place-order { margin: 0; padding: 0; }
.vsc-review-place #place_order { width: 100%; }

/* The upsell on the review step is a horizontal 3-up, not the narrow sidebar stack. */
.vsc-also-review { margin: 16px 0 18px; }
.vsc-also-review .vsc-also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) {
  .vsc-also-review .vsc-also-grid { grid-template-columns: 1fr; }
  .vsc-cardmarks { flex-wrap: wrap; }
}

/* ── Footer newsletter "Send": same white ink as every other cyan fill ────────────────────────
 * The button is styled in the v3 parent theme with a dark-navy ink on a cyan fill, which made it
 * the last cyan button on the site not matching Add to Cart. Ink only -- the fill is untouched. */
html body .footer .subscribe-form button,
html body .footer-subscribe .subscribe-form button {
  color: var(--vsc-on-cyan, #FFFFFF) !important;
}


/* ============================================================
   DARK-CONTEXT OVERRIDES FOR THE PASSWORDLESS AUTH CARD.

   The block above was written for a WHITE card (#vsc-auth-flow has
   background:#fff), so every text colour in it is a dark navy meant to sit on
   white. On /my-account/ the card renders on the dark surface, and none of
   those colours was ever re-declared - the "Email or phone number" label was
   painting #082040 on navy at 1.29:1, i.e. invisible, and the subhead sat at
   4.41:1, just under AA.

   Re-declared rather than changed at source, because the same card is used in
   the light checkout flow where the navy is correct.
   ============================================================ */
html.vsc-dark #vsc-auth-flow h2{color:#fff;}
html.vsc-dark .vsc-authp-label{color:#EAF2FF;}
html.vsc-dark .vsc-authp-label span{color:#9FB0C4;}
html.vsc-dark .vsc-authp-sub{color:#C9D8E8;}
html.vsc-dark .vsc-authp-sub strong{color:#fff;}
html.vsc-dark .vsc-authp-intro{color:#C9D8E8;}
html.vsc-dark .vsc-authp-fine{color:#A9BACD;}
html.vsc-dark .vsc-authp-hint{color:#A9BACD;}
html.vsc-dark .vsc-authp-input{color:#EAF2FF;}
html.vsc-dark .vsc-authp-input::placeholder{color:#8FA3B8;}

/* ============================================================
   ONE HERO FACE ACROSS THE SITE.

   The PARENT theme sets h1..h6 to "Space Grotesk", which this theme never
   loads, so every heading was silently falling back. The hero face the store
   actually uses is Onest -- which, until the @import at the top of this file,
   was only ever loaded on the homepage.

   2026-08-14: widened from h1 to h1..h6. The only headings that actually fall
   through to the parent rule are the three footer <h4>s (every page) and the
   account "Sign in or sign up" <h2>; everything else declares its own family and
   is unaffected. Measured live before shipping: no reflow, no wrap, no height
   change at 1440 or 390.
   ============================================================ */
h1,h2,h3,h4,h5,h6{font-family:'Onest','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;}


/* ============================================================
   THE STRUCK "WAS" PRICE ON SHOP CARDS AND THE PDP.

   The theme renders prices through wc_price() on a bare float, which cannot
   produce WooCommerce's own <del>/<ins> markup - so a product could be flagged
   SALE while showing only one number. archive-product.php now emits an explicit
   <del class="vsc-acard-price-was">; this is what makes it read as a former
   price rather than a second price.
   ============================================================ */
.vsc-acard-price-was,
.vsc-shop-price del,
.woocommerce div.product p.price del {
  opacity:.55;
  font-weight:500;
  text-decoration:line-through;
  margin-left:7px;
  white-space:nowrap;
}
.vsc-acard-price-was .woocommerce-Price-amount,
.vsc-shop-price del .woocommerce-Price-amount { font-size:.82em; }
.vsc-shop-price ins,
.woocommerce div.product p.price ins { text-decoration:none; }


/* ===========================================================================
   Cart-family thumbnails: one vial size regardless of product type
   ---------------------------------------------------------------------------
   Every thumbnail below is a SQUARE box rendering product art with
   object-fit:contain. But vsc_clean_img_id() hands SIMPLE products a 1:1
   (1600x1600) shop render and VARIATIONS a 4:5 (1118x1400) studio render. With
   `contain`, the 4:5 art letterboxes inside the square and the vial draws
   1.24x SMALLER than a simple product's.

   Measured: in the 84px drawer a simple product's vial is 27.4px wide against
   21.8px for a variable one; in the 44px checkout review, 14.3px against 11.4px.
   So a cart holding KPV (simple) beside KLOW (variable) shows two vials at
   visibly different sizes in the same list - the "no ones that are singled out"
   defect, on the surface a customer is looking at while deciding to pay.

   `cover` fixes it, and is the value the order emails and thank-you page already
   use - they measure 0.99x parity, which is how we know cover is the right
   answer rather than a guess.

   Crop safety was measured before shipping, not assumed: the vial silhouette
   occupies y 13.6%-80.0% of the frame on both 4:5 and 1:1 art, while a square
   centre-crop keeps 10.1%-89.8%. Comfortable clearance top and bottom - nothing
   is cut. 1:1 art is unaffected by definition.

   object-fit is the only property overridden, and it carries !important solely
   because several of these boxes are also styled by live Code Snippets, which
   print after this stylesheet and would otherwise win on source order.
   =========================================================================== */
.vsc-cart-item-img,
.vsc-cart-upsell-img,
.vsc-cart-reco-img,
.vsc-also-img,
.vsc-review-item-img,
.vsc-checkout-summary-thumb img {
  object-fit: cover !important;
  object-position: center center !important;
}


/* ===========================================================================
   Footer grid blowout - the site-wide iOS sideways-drag
   ---------------------------------------------------------------------------
   On iOS Safari at 390px the whole page could be dragged ~29px sideways. Traced
   by DOM bisection to the footer, and then measured precisely: .footer-grid
   resolves grid-template-columns to a FIXED 358.95px track inside a container
   whose content box is only 270px. A grid track cannot shrink below its
   declared minimum, so the column - and everything in it, including the
   newsletter form - hangs 29px past the viewport edge.

   body{overflow-x:hidden} was masking it from scrollWidth, which is why a naive
   overflow check reported 0. It does not stop iOS Safari letting the user drag,
   which is the symptom actually being seen on the phone.

   minmax(0, 1fr) is the canonical fix: it lets the track shrink to its
   container. min-width:0 on the children handles the same blowout one level
   down (grid and flex items both default to min-width:auto, which refuses to
   shrink below intrinsic content width).

   Chromium never showed this because it resolves the track against the
   container more aggressively - which is exactly why this needed WebKit to find.
   Present on /contact/, /affiliate/, /shop/, product pages (3px each) and
   /my-account/ (14px) too, so this is a site-wide fix, not a homepage one.
   =========================================================================== */
@media (max-width: 768px) {
  .footer .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .footer .footer-grid > * { min-width: 0 !important; }
  .footer .footer-subscribe { max-width: 100%; }
  .footer .subscribe-form { flex-wrap: wrap; max-width: 100%; }
  .footer .subscribe-form input { min-width: 0 !important; }
}

/* ============================================================================
   2-VIAL RESEARCH STACKS: SAME TILE SIZE AS A 3-VIAL STACK  (4.68.0)
   ============================================================================
 * `.vsc-stack-member` is `flex: 1 1 0 !important` (line 4953), so a member tile
 * is (rowWidth - gaps) / N wide. At N=2 that is 52% wider than at N=3, and the
 * photo box's HEIGHT follows its width -- `.vsc-stack-member-ph` declares
 * `aspect-ratio: 1 / 1` (line 5057) but its `min-height` resolves to `auto`, so
 * the flex item's automatic minimum size floors it at the image's natural height
 * and the square never constrains it. Measured at 2560: a 2-vial members row is
 * 482.67px against a 3-vial row's 327.05px, which made the duo card 155.62px
 * taller than the 3-vial card sharing its grid row, and left that card 155px of
 * dead air under its tiles (`.vsc-stack-priceline` is margin-top:auto, so it
 * stays pinned to the bottom). That height difference, plus the ragged tops it
 * amplifies, is what reads as "staggered".
 *
 * The fix constrains the ROW, not the member, so every `.vsc-stack-member` rule
 * in this file is left alone and no !important is needed anywhere: give a
 * 2-member row exactly the width two 3-up tiles plus one gap would occupy, and
 * centre it. The members still divide it with their existing `flex: 1 1 0`, so
 * they land on the identical tile size the 3-vial cards use (measured 238.98px
 * against 239.00px, a sub-pixel calc-rounding difference).
 *
 * Scoping a rule at `.vsc-stack-member` instead would have needed (0,3,0)
 * !important to clear line 4953, and that would then have outranked the phone
 * block's (0,2,0) important at line 5241 and broken the mobile 2-up layout.
 *
 * GUARDED OUT OF <=600px ON PURPOSE. The phone block at line 5239 already lays
 * every stack out 2-up at `calc(50% - 4px)`, which is right there; this rule
 * would shrink a phone duo to two-thirds width. `not all and (max-width: 600px)`
 * is the exact complement of that block, with no fractional-viewport gap.
 *
 * Hook is emitted by renderRail() in vsc-stack.js as
 * `vsc-stack-members--n<count>`; a 3-vial row is `--n3` and matches nothing here,
 * so this rule is provably INERT until that JS ships. Verified: 3-vial member
 * rects byte-identical at 2560/1920/1440/1280/900/760/601/600/430/390. */
@media not all and (max-width: 600px) {
  .vsc-stack-fcard .vsc-stack-members--n2 {
    max-width: calc((100% - 20px) / 3 * 2 + 10px);
    margin-inline: auto;
  }
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vsc-dark.css?ver=4.69.1 ==== */
/* ============================================================
   VSC DARK THEME  (sitewide except homepage)
   gradient #262E3D (top) -> #0F1620 (bottom); sky-blue #0EA5E9 accent kept
   Auto-consolidated from the dark-conversion flip map. Scoped to html.vsc-dark body:not(.home).
   ============================================================ */
html.vsc-dark { background:#0F1620 !important; }
html.vsc-dark body:not(.home) { background:transparent !important; }
html.vsc-dark body:not(.home)::before { content:'' !important; position:fixed !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background:linear-gradient(180deg,#262E3D 0%, #1A2230 50%, #0F1620 100%) !important; }
html.vsc-dark .vsc-page, html.vsc-dark .vsc-product-detail, html.vsc-dark .vsc-checkout-page, html.vsc-dark .vsc-page-hero, html.vsc-dark .vsc-shop-hero, html.vsc-dark .vsc-related { background:transparent !important; }
/* product-image tiles get a dark backing so vials don't float on light squares */
html.vsc-dark body:not(.home) .vsc-acard-image, html.vsc-dark body:not(.home) .vsc-shop-image, html.vsc-dark body:not(.home) .vsc-gallery-thumb img, html.vsc-dark body:not(.home) .vsc-pdp-gallery-img { background:#141d2e !important; }

html.vsc-dark body:not(.home) .vsc-check-newsletter input:checked + .vsc-check-box { background:#06B6D4 !important; }
html.vsc-dark body:not(.home) .vsc-ruo-banner { background:#0A1220 !important; }
html.vsc-dark body:not(.home) .vsc-category-pill.active,
html.vsc-dark body:not(.home) .vsc-shop-pill.is-active,
html.vsc-dark body:not(.home) .vsc-pdp-size.active,
html.vsc-dark body:not(.home) .vsc-pdp-options .vsc-pdp-size.active,
html.vsc-dark body:not(.home) .vsc-stickybar-add,
html.vsc-dark body:not(.home) .vsc-step-continue,
html.vsc-dark body:not(.home) .vsc-progress-dot.is-active,
html.vsc-dark body:not(.home) .vsc-shipping-card:has(input:checked) .vsc-shipping-card-radio::after,
html.vsc-dark body:not(.home) .vsc-check-sms input:checked + .vsc-check-box,
html.vsc-dark body:not(.home) .vsc-promo-apply,
html.vsc-dark body:not(.home) .vsc-mobile-bar-pill,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-done,
html.vsc-dark body:not(.home) .vsc-authp-btn { background:#0EA5E9 !important; }
html.vsc-dark body:not(.home) .vsc-gallery-thumb,
html.vsc-dark body:not(.home) .vsc-coa-sheet { background:#1A2847 !important; }
html.vsc-dark body:not(.home) .vsc-checkout-step-num,
html.vsc-dark body:not(.home) .vsc-protection-tip { background:#1E293B !important; }
html.vsc-dark body:not(.home) .vsc-shop-cart,
html.vsc-dark body:not(.home) .vsc-acard-cta,
html.vsc-dark body:not(.home) .vsc-coa-page { background:#262E3D !important; }
html.vsc-dark body:not(.home) .vsc-bundle-tag--popular { background:#26D0CE !important; }
html.vsc-dark body:not(.home) .vsc-check-billing input:checked + .vsc-check-box { background:#3B82F6 !important; }
/* SALE PILL IS DELIBERATELY NOT IN THIS RULE.
   The sale pill is brand cyan and is defined ONCE, page-independently, in vsc-core.css
   (search: "SALE PILL - BRAND CYAN"). `.sale-badge` used to be listed on this selector,
   which is exactly what turned the pills gold on 2026-08-04: home-v2.php dropped the
   `home` body class (to stop the header flipping white on scroll), so the homepage began
   matching body:not(.home) and inherited this gold. DO NOT re-add .sale-badge here.
   .vsc-bundle-tag--value below is a DIFFERENT component - the PDP "Best value" bundle
   tier tag, paired with the teal .vsc-bundle-tag--popular "Most popular" tag. Its gold
   is intentional and matches its light-mode base (#E8920C in vsc-core.css). */
html.vsc-dark body:not(.home) .vsc-bundle-tag--value { background:#FDB813 !important; }
html.vsc-dark body:not(.home) .vsc-gallery-main { background:linear-gradient(160deg, rgba(38,46,61,0.6) 0%, rgba(30,58,107,0.5) 100%) !important; }
html.vsc-dark body:not(.home) .vsc-page-hero,
html.vsc-dark body:not(.home) .vsc-shop-hero { background:radial-gradient(ellipse 800px 600px at 85% 20%, rgba(14,165,233,0.08) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(139,92,246,0.06) 0%, transparent 60%), transparent !important; }
html.vsc-dark body:not(.home) .vsc-coa-overlay { background:rgba(0,0,0,0.60) !important; }
html.vsc-dark body:not(.home) .vsc-compound-header-icon,
html.vsc-dark body:not(.home) .vsc-compound-storage-icon.cold,
html.vsc-dark body:not(.home) .vsc-compound-storage-icon.warm,
html.vsc-dark body:not(.home) .vsc-pdp-badge.is-accent,
html.vsc-dark body:not(.home) .vsc-coa-flask { background:rgba(14,165,233,0.15) !important; }
html.vsc-dark body:not(.home) .vsc-bundle-card:hover,
html.vsc-dark body:not(.home) .vsc-bundle-card.active { background:rgba(14,165,233,0.20) !important; }
html.vsc-dark body:not(.home) .vsc-checkout-promo-toggle:hover { background:rgba(148, 163, 184, 0.1) !important; }
html.vsc-dark body:not(.home) .vsc-checkout-summary-thumb { background:rgba(148, 163, 184, 0.15) !important; }
html.vsc-dark body:not(.home) .vsc-protection-help { background:rgba(148, 163, 184, 0.2) !important; }
html.vsc-dark body:not(.home) .vsc-progress-dot,
html.vsc-dark body:not(.home) .vsc-protection-help:hover { background:rgba(148, 163, 184, 0.3) !important; }
html.vsc-dark body:not(.home) .vsc-mobile-sheet-handle { background:rgba(148, 163, 184, 0.4) !important; }
html.vsc-dark body:not(.home) input.input-text,
html.vsc-dark body:not(.home) textarea,
html.vsc-dark body:not(.home) select,
html.vsc-dark body:not(.home) .select2-selection,
html.vsc-dark body:not(.home) .vsc-check-box,
html.vsc-dark body:not(.home) .vsc-promo-input { background:rgba(15, 23, 42, 0.4) !important; }
html.vsc-dark body:not(.home) .vsc-authp-input { background:rgba(15, 23, 42, 0.5) !important; }
html.vsc-dark body:not(.home) .vsc-mobile-summary-sheet { background:rgba(15, 23, 42, 0.95) !important; }
html.vsc-dark body:not(.home) .vsc-stickybar { background:rgba(15,22,32,0.95) !important; }
html.vsc-dark body:not(.home) .vsc-promo-msg.is-success { background:rgba(16, 185, 129, 0.15) !important; }
html.vsc-dark body:not(.home) .vsc-promo-msg.is-error { background:rgba(239, 68, 68, 0.15) !important; }
html.vsc-dark body:not(.home) .vsc-compound-specs,
html.vsc-dark body:not(.home) .vsc-coa-note { background:rgba(255,255,255,0.04) !important; }
html.vsc-dark body:not(.home) .vsc-search,
html.vsc-dark body:not(.home) .vsc-shop-search input,
html.vsc-dark body:not(.home) .vsc-shop-sort select,
html.vsc-dark body:not(.home) .vsc-sources-note,
html.vsc-dark body:not(.home) .vsc-sources-empty,
html.vsc-dark body:not(.home) .vsc-pdp-trust { background:rgba(255,255,255,0.05) !important; }
html.vsc-dark body:not(.home) .vsc-pdp-size,
html.vsc-dark body:not(.home) .vsc-pdp-options .vsc-pdp-size,
html.vsc-dark body:not(.home) .vsc-pdp-qty,
html.vsc-dark body:not(.home) .vsc-compound-storage-item,
html.vsc-dark body:not(.home) .vsc-bundle-card,
html.vsc-dark body:not(.home) .vsc-pdp-coa { background:rgba(255,255,255,0.06) !important; }
html.vsc-dark body:not(.home) .vsc-category-pill,
html.vsc-dark body:not(.home) .vsc-shop-pill,
html.vsc-dark body:not(.home) .vsc-compound-pill,
html.vsc-dark body:not(.home) .vsc-pdp-badge,
html.vsc-dark body:not(.home) .vsc-stickybar-size,
html.vsc-dark body:not(.home) .vsc-coa-dl,
html.vsc-dark body:not(.home) .vsc-coa-x { background:rgba(255,255,255,0.08) !important; }
html.vsc-dark body:not(.home) .vsc-pdp-cart:disabled,
html.vsc-dark body:not(.home) .vsc-stickybar-add:disabled { background:rgba(255,255,255,0.12) !important; }
html.vsc-dark body:not(.home) .vsc-shipping-card,
html.vsc-dark body:not(.home) .vsc-checkout-secure-btn { background:rgba(30, 41, 59, 0.5) !important; }
html.vsc-dark body:not(.home) .vsc-checkout-card,
html.vsc-dark body:not(.home) .vsc-checkout-summary,
html.vsc-dark body:not(.home) .vsc-checkout-secure-btn { background:rgba(30, 41, 59, 0.6) !important; }
html.vsc-dark body:not(.home) #vsc-auth-flow { background:rgba(30, 41, 59, 0.7) !important; }
html.vsc-dark body:not(.home) .vsc-shipping-card.is-selected,
html.vsc-dark body:not(.home) .vsc-shipping-card:has(input:checked) { background:rgba(30, 41, 59, 0.8) !important; }
html.vsc-dark body:not(.home) .vsc-mobile-bar { background:rgba(30, 41, 59, 0.95) !important; }
html.vsc-dark body:not(.home) .vsc-compound-card,
html.vsc-dark body:not(.home) .vsc-source-card { background:rgba(38,46,61,0.4) !important; }
html.vsc-dark body:not(.home) .vsc-shop-card,
html.vsc-dark body:not(.home) .product-card.vsc-acard { background:rgba(38,46,61,0.5) !important; }
html.vsc-dark body:not(.home) .vsc-shop-tag { background:rgba(38,46,61,0.8) !important; }
html.vsc-dark body:not(.home) .vsc-related { background:transparent !important; }
html.vsc-dark body:not(.home) .vsc-tab-btn.active,
html.vsc-dark body:not(.home) input:focus,
html.vsc-dark body:not(.home) textarea:focus,
html.vsc-dark body:not(.home) select:focus,
html.vsc-dark body:not(.home) .select2-container--focus .select2-selection,
html.vsc-dark body:not(.home) .vsc-shipping-card:has(input:checked),
html.vsc-dark body:not(.home) .vsc-promo-input:focus { border-color:#0EA5E9 !important; }
html.vsc-dark body:not(.home) .vsc-protection-tip::after { border-color:#1E293B !important; }
html.vsc-dark body:not(.home) .vsc-checkout-card,
html.vsc-dark body:not(.home) .vsc-checkout-summary,
html.vsc-dark body:not(.home) .vsc-checkout-summary-head,
html.vsc-dark body:not(.home) .vsc-checkout-total,
html.vsc-dark body:not(.home) .vsc-mobile-bar,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-items,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-promo-wrap,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-total,
html.vsc-dark body:not(.home) .vsc-checkout-secure-btn { border-color:rgba(148, 163, 184, 0.2) !important; }
html.vsc-dark body:not(.home) .vsc-shipping-card-radio,
html.vsc-dark body:not(.home) .vsc-check-box { border-color:rgba(148, 163, 184, 0.4) !important; }
html.vsc-dark body:not(.home) .vsc-shop-card,
html.vsc-dark body:not(.home) .product-card.vsc-acard,
html.vsc-dark body:not(.home) .vsc-search,
html.vsc-dark body:not(.home) .vsc-shop-search input,
html.vsc-dark body:not(.home) .vsc-category-pill,
html.vsc-dark body:not(.home) .vsc-shop-pill,
html.vsc-dark body:not(.home) .vsc-shop-sort select,
html.vsc-dark body:not(.home) .vsc-pdp-size,
html.vsc-dark body:not(.home) .vsc-pdp-qty,
html.vsc-dark body:not(.home) .vsc-pdp-benefits,
html.vsc-dark body:not(.home) .vsc-pdp-tabs,
html.vsc-dark body:not(.home) .vsc-tab-nav,
html.vsc-dark body:not(.home) .vsc-ingredient-list li,
html.vsc-dark body:not(.home) .vsc-compound-card,
html.vsc-dark body:not(.home) .vsc-compound-specs div,
html.vsc-dark body:not(.home) .vsc-compound-pill,
html.vsc-dark body:not(.home) .vsc-compound-storage-item,
html.vsc-dark body:not(.home) .vsc-source-card,
html.vsc-dark body:not(.home) .vsc-pdp-badge,
html.vsc-dark body:not(.home) .vsc-bundle-card,
html.vsc-dark body:not(.home) .vsc-pdp-trust,
html.vsc-dark body:not(.home) .vsc-pdp-coa,
html.vsc-dark body:not(.home) .vsc-stickybar,
html.vsc-dark body:not(.home) .vsc-stickybar-size,
html.vsc-dark body:not(.home) .vsc-coa-head,
html.vsc-dark body:not(.home) .vsc-coa-dl,
html.vsc-dark body:not(.home) .vsc-coa-x,
html.vsc-dark body:not(.home) .vsc-coa-note { border-color:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-coa-spinner { border-color:rgba(255,255,255,0.15) !important; }
html.vsc-dark body:not(.home) input:focus,
html.vsc-dark body:not(.home) textarea:focus,
html.vsc-dark body:not(.home) .select2-container--focus .select2-selection { box-shadow:0 0 0 3px rgba(14, 165, 233, 0.2) !important; }
html.vsc-dark body:not(.home) .vsc-bundle-tag { color:#000000 !important; }
html.vsc-dark body:not(.home) .vsc-pdp-category,
html.vsc-dark body:not(.home) .vsc-compound-header-icon,
html.vsc-dark body:not(.home) .vsc-compound-link,
html.vsc-dark body:not(.home) .vsc-compound-storage-icon.warm,
html.vsc-dark body:not(.home) .vsc-source-journal,
html.vsc-dark body:not(.home) .vsc-source-link,
html.vsc-dark body:not(.home) .vsc-pdp-badge.is-accent,
html.vsc-dark body:not(.home) .vsc-pdp-coa:hover,
html.vsc-dark body:not(.home) .vsc-coa-flask,
html.vsc-dark body:not(.home) .vsc-shipping-card-price.is-free,
html.vsc-dark body:not(.home) .vsc-check-sms input:checked ~ .vsc-check-text { color:#0EA5E9 !important; }
html.vsc-dark body:not(.home) .vsc-step-continue,
html.vsc-dark body:not(.home) .vsc-promo-apply,
html.vsc-dark body:not(.home) .vsc-mobile-bar-pill,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-done,
html.vsc-dark body:not(.home) .vsc-authp-btn { color:#0F1620 !important; }
html.vsc-dark body:not(.home) .vsc-compound-storage-icon.cold { color:#4FA3FF !important; }
html.vsc-dark body:not(.home) .vsc-bundle-save { color:#5CDB8F !important; }
html.vsc-dark body:not(.home) .vsc-promo-msg.is-success { color:#86EFAC !important; }
html.vsc-dark body:not(.home) .vsc-checkout-summary-meta,
html.vsc-dark body:not(.home) .vsc-summary-hint,
html.vsc-dark body:not(.home) .vsc-checkout-row,
html.vsc-dark body:not(.home) .vsc-checkout-summary-qty,
html.vsc-dark body:not(.home) .vsc-protection-help,
html.vsc-dark body:not(.home) .vsc-checkout-total span:first-child { color:#94A3B8 !important; }
html.vsc-dark body:not(.home) input.input-text,
html.vsc-dark body:not(.home) textarea,
html.vsc-dark body:not(.home) select,
html.vsc-dark body:not(.home) .select2-selection__rendered,
html.vsc-dark body:not(.home) .vsc-shipping-card-name,
html.vsc-dark body:not(.home) .vsc-shipping-card-price,
html.vsc-dark body:not(.home) .vsc-checkout-summary-name,
html.vsc-dark body:not(.home) .vsc-checkout-row span:last-child,
html.vsc-dark body:not(.home) .vsc-checkout-promo-toggle,
html.vsc-dark body:not(.home) .vsc-promo-input,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-item-name,
html.vsc-dark body:not(.home) .vsc-checkout-secure-btn,
html.vsc-dark body:not(.home) .vsc-authp-input { color:#E2E8F0 !important; }
html.vsc-dark body:not(.home) .vsc-promo-msg.is-error,
html.vsc-dark body:not(.home) .woocommerce form .form-row label .required,
html.vsc-dark body:not(.home) .vsc-step-error strong { color:#FCA5A5 !important; }
html.vsc-dark body:not(.home) .vsc-page-hero h1,
html.vsc-dark body:not(.home) .vsc-shop-hero h1,
html.vsc-dark body:not(.home) .vsc-section-header h2,
html.vsc-dark body:not(.home) .vsc-shop-name,
html.vsc-dark body:not(.home) .vsc-acard-title,
html.vsc-dark body:not(.home) .vsc-shop-price,
html.vsc-dark body:not(.home) .vsc-acard-price-amt,
html.vsc-dark body:not(.home) .vsc-shop-tag,
html.vsc-dark body:not(.home) .vsc-search input,
html.vsc-dark body:not(.home) .vsc-shop-search input,
html.vsc-dark body:not(.home) .vsc-shop-sort select,
html.vsc-dark body:not(.home) .vsc-shop-count strong,
html.vsc-dark body:not(.home) .vsc-breadcrumb strong,
html.vsc-dark body:not(.home) .vsc-pdp-info h1,
html.vsc-dark body:not(.home) .vsc-pdp-price,
html.vsc-dark body:not(.home) .vsc-pdp-option-label,
html.vsc-dark body:not(.home) .vsc-pdp-size,
html.vsc-dark body:not(.home) .vsc-pdp-options .vsc-pdp-size,
html.vsc-dark body:not(.home) .vsc-pdp-size strong,
html.vsc-dark body:not(.home) .vsc-pdp-qty input,
html.vsc-dark body:not(.home) .vsc-pdp-qty button,
html.vsc-dark body:not(.home) .vsc-pdp-cart,
html.vsc-dark body:not(.home) .vsc-tab-btn.active,
html.vsc-dark body:not(.home) .vsc-tab-content h4,
html.vsc-dark body:not(.home) .vsc-ingredient-list strong,
html.vsc-dark body:not(.home) .vsc-compound-header h2,
html.vsc-dark body:not(.home) .vsc-compound-card h3,
html.vsc-dark body:not(.home) .vsc-compound-specs dd,
html.vsc-dark body:not(.home) .vsc-compound-pill,
html.vsc-dark body:not(.home) .vsc-compound-storage-text strong,
html.vsc-dark body:not(.home) .vsc-source-title,
html.vsc-dark body:not(.home) .vsc-ruo-banner p,
html.vsc-dark body:not(.home) .vsc-bundle-qty,
html.vsc-dark body:not(.home) .vsc-pdp-coa,
html.vsc-dark body:not(.home) .vsc-stickybar-name,
html.vsc-dark body:not(.home) .vsc-stickybar-price,
html.vsc-dark body:not(.home) .vsc-stickybar-size,
html.vsc-dark body:not(.home) .vsc-coa-eyebrow,
html.vsc-dark body:not(.home) .vsc-coa-dl,
html.vsc-dark body:not(.home) .vsc-coa-x,
html.vsc-dark body:not(.home) .vsc-checkout-summary-head h3,
html.vsc-dark body:not(.home) .vsc-checkout-summary-line,
html.vsc-dark body:not(.home) .vsc-checkout-total span:last-child,
html.vsc-dark body:not(.home) .vsc-checkout-total .amount,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-title,
html.vsc-dark body:not(.home) .vsc-mobile-sheet-item-price,
html.vsc-dark body:not(.home) #vsc-auth-flow h2 { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-pdp-cart:disabled,
html.vsc-dark body:not(.home) .vsc-stickybar-add:disabled { color:rgba(255,255,255,0.40) !important; }
html.vsc-dark body:not(.home) .vsc-search input::placeholder,
html.vsc-dark body:not(.home) .vsc-shop-search input::placeholder { color:rgba(255,255,255,0.50) !important; }
html.vsc-dark body:not(.home) .vsc-breadcrumb,
html.vsc-dark body:not(.home) .vsc-breadcrumb a,
html.vsc-dark body:not(.home) .vsc-tab-btn,
html.vsc-dark body:not(.home) .vsc-ingredient-list span,
html.vsc-dark body:not(.home) .vsc-compound-card-label,
html.vsc-dark body:not(.home) .vsc-compound-specs dt,
html.vsc-dark body:not(.home) .vsc-source-meta,
html.vsc-dark body:not(.home) .vsc-source-authors,
html.vsc-dark body:not(.home) .vsc-sources-empty { color:rgba(255,255,255,0.60) !important; }
html.vsc-dark body:not(.home) .vsc-shop-desc,
html.vsc-dark body:not(.home) .vsc-acard-price-pre,
html.vsc-dark body:not(.home) .vsc-pdp-benefit { color:rgba(255,255,255,0.64) !important; }
html.vsc-dark body:not(.home) .vsc-shop-category,
html.vsc-dark body:not(.home) .vsc-acard-sub,
html.vsc-dark body:not(.home) .vsc-shop-count,
html.vsc-dark body:not(.home) .vsc-shop-meta,
html.vsc-dark body:not(.home) .vsc-compound-header p,
html.vsc-dark body:not(.home) .vsc-compound-storage-text,
html.vsc-dark body:not(.home) .vsc-sources-note,
html.vsc-dark body:not(.home) .vsc-coa-count,
html.vsc-dark body:not(.home) .vsc-coa-product,
html.vsc-dark body:not(.home) .vsc-coa-loading,
html.vsc-dark body:not(.home) .vsc-coa-note { color:rgba(255,255,255,0.65) !important; }
html.vsc-dark body:not(.home) .vsc-section-header p,
html.vsc-dark body:not(.home) .vsc-category-pill,
html.vsc-dark body:not(.home) .vsc-shop-pill,
html.vsc-dark body:not(.home) .vsc-tab-content p,
html.vsc-dark body:not(.home) .vsc-pdp-badge,
html.vsc-dark body:not(.home) .vsc-pdp-trust-item,
html.vsc-dark body:not(.home) .vsc-coa-error { color:rgba(255,255,255,0.70) !important; }
html.vsc-dark body:not(.home) .vsc-page-hero p,
html.vsc-dark body:not(.home) .vsc-shop-hero p,
html.vsc-dark body:not(.home) .vsc-pdp-desc { color:rgba(255,255,255,0.72) !important; }

/* ============================================================
   TARGETED OVERRIDES — beat aggressive normalizers + child-element colors
   ============================================================ */
/* a product-card normalizer forces `html body #shopGrid .product-card{background:#fff!important}` (spec 1,1,2);
   match with #shopGrid + .vsc-dark to out-specify it on every breakpoint */
html.vsc-dark #shopGrid .product-card,
html.vsc-dark #shopGrid > div,
html.vsc-dark body:not(.home) .shop-product-grid .product-card,
html.vsc-dark body:not(.home).woocommerce ul.products li.product { background:rgba(38,46,61,0.55) !important; border:1px solid rgba(255,255,255,0.10) !important; }
/* card title text lives on the <a> child, not the container */
html.vsc-dark body:not(.home) .vsc-acard-title a,
html.vsc-dark body:not(.home) .vsc-shop-name a,
html.vsc-dark body:not(.home) #shopGrid .product-card .vsc-acard-title a { color:#FFFFFF !important; }
/* darken the product-image tile slightly so the light vial photos tone into the dark card */
html.vsc-dark body:not(.home) .vsc-acard-image { position:relative; }
html.vsc-dark body:not(.home) .vsc-acard-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(15,22,32,0) 40%, rgba(15,22,32,0.30) 100%); }

/* ---- SOLD OUT, dark shop grid --------------------------------------------
   Reuses the vocabulary already in this codebase rather than inventing a second
   grey: rgba(255,255,255,.07) is the existing dark disabled fill (vsc-core.css,
   .vsc-byos-cta:disabled) and rgba(255,255,255,0.60) is the muted-ink step this
   file already uses for secondary card text. Measured on the composited card
   (~#212937): CTA label 5.37:1, muted price 6.20:1 -- both clear AA.
   Specificity: (0,5,2)/(0,6,2) with !important, which is what it takes to beat
   the blanket `html.vsc-dark body:not(.home) .vsc-acard-cta{background:#262E3D
   !important}` at (0,3,2) and the white price rule at (0,3,2).
   The PILL is deliberately absent: it is opaque and legible on both grounds, so
   it is defined once in vsc-core.css. The IMAGE dim is likewise absent -- the
   core rule targets the <img>, which nothing in this file touches.
   NOTE: .is-oos is only ever printed on a card whose parent product is out of
   stock, so none of this can fire on a buyable card. */
html.vsc-dark body:not(.home) .vsc-acard.is-oos .vsc-acard-cta { background:rgba(255,255,255,0.07) !important; color:rgba(255,255,255,0.60) !important; }
html.vsc-dark body:not(.home) .vsc-acard.is-oos .vsc-acard-cta:hover { background:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-acard.is-oos .vsc-acard-price-amt,
html.vsc-dark body:not(.home) .vsc-acard.is-oos .vsc-acard-price-amt .amount,
html.vsc-dark body:not(.home) .vsc-acard.is-oos .vsc-acard-price-amt .woocommerce-Price-amount { color:rgba(255,255,255,0.60) !important; }

/* ---- text-color fixes: real shop heading class + the inner price-amount element ---- */
html.vsc-dark body:not(.home) .vsc-shop-h1 { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-shop-subhead { color:rgba(255,255,255,0.70) !important; }
/* the price digits live in .woocommerce-Price-amount which keeps its own navy color; flip every price amount */
html.vsc-dark body:not(.home) .woocommerce-Price-amount,
html.vsc-dark body:not(.home) .vsc-acard-price-amt,
html.vsc-dark body:not(.home) .vsc-acard-price-amt .amount,
html.vsc-dark body:not(.home) .vsc-pdp-price,
html.vsc-dark body:not(.home) .vsc-pdp-price .woocommerce-Price-amount { color:#FFFFFF !important; }
/* a little more room so "From / $80.00" isn't cramped */
html.vsc-dark body:not(.home) .vsc-acard-price { min-width:70px; }
/* …but on narrow 2-col phones, drop that floor so the title gets the room it needs to
   keep single-word names on one line (paired with the vsc-core title-extend fix). */
@media (max-width:600px){ html.vsc-dark body:not(.home) .vsc-acard-price { min-width:0 !important; } }

/* ============================================================
   BUNDLE CARDS — light #F6FAFF so the new color-matched vial illustrations
   (composited on #F6FAFF) blend in seamlessly; dark text on the light card.
   ============================================================ */
html.vsc-dark body:not(.home) .vsc-bundle-card { background:#F6FAFF !important; border-color:#E1E8F0 !important; }
html.vsc-dark body:not(.home) .vsc-bundle-card:hover { border-color:#0EA5E9 !important; background:#F6FAFF !important; }
html.vsc-dark body:not(.home) .vsc-bundle-card.active { border-color:#0EA5E9 !important; background:#F6FAFF !important; box-shadow:0 0 0 2px rgba(14,165,233,0.25) !important; }
html.vsc-dark body:not(.home) .vsc-bundle-qty { color:#0B1F33 !important; }
html.vsc-dark body:not(.home) .vsc-bundle-save { color:#0E9F6E !important; }
html.vsc-dark body:not(.home) .vsc-bundle-card[data-bundle-qty="1"] .vsc-bundle-save { color:#5B6B7E !important; font-weight:500 !important; }

/* ============================================================
   FAST-FOLLOW — FAQ + CONTACT pages dark (match shop / COA)
   ============================================================ */
/* FAQ — accordion + sidebar */
html.vsc-dark body:not(.home) .faq-sidebar { background:rgba(38,46,61,0.5) !important; border:1px solid rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .sidebar-header { background:rgba(255,255,255,0.05) !important; color:#FFFFFF !important; border-bottom:1px solid rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .faq-sidebar-body a { color:rgba(255,255,255,0.62) !important; border-color:rgba(255,255,255,0.07) !important; }
html.vsc-dark body:not(.home) .faq-sidebar-body a:hover { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .faq-sidebar-body a.active { color:#38BDF8 !important; background:rgba(14,165,233,0.12) !important; }
html.vsc-dark body:not(.home) .faq-item { border-bottom:1px solid rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .faq-question { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .faq-icon { color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .faq-answer,
html.vsc-dark body:not(.home) .faq-answer p { color:rgba(255,255,255,0.70) !important; }
/* CONTACT — info cards + form (scoped to the contact page template) */
html.vsc-dark body.page-template-page-contact .contact-card { background:rgba(38,46,61,0.5) !important; border:1px solid rgba(255,255,255,0.10) !important; }
html.vsc-dark body.page-template-page-contact .contact-card h4 { color:#FFFFFF !important; }
html.vsc-dark body.page-template-page-contact h2 { color:#FFFFFF !important; }
html.vsc-dark body.page-template-page-contact label { color:rgba(255,255,255,0.78) !important; }
html.vsc-dark body.page-template-page-contact input,
html.vsc-dark body.page-template-page-contact textarea { background:rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.14) !important; color:#FFFFFF !important; }
html.vsc-dark body.page-template-page-contact input::placeholder,
html.vsc-dark body.page-template-page-contact textarea::placeholder { color:rgba(255,255,255,0.45) !important; }
html.vsc-dark body.page-template-page-contact .btn { background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%) !important; color:#FFFFFF !important; border:none !important; }

/* ============================================================
   UNIVERSAL HEADER — homepage-style header on all non-home, non-checkout pages.
   Shown only under the dark preview (html.vsc-dark); old .main-nav hidden then.
   ============================================================ */
html.vsc-dark body:not(.home) .main-nav,
html.vsc-dark body:not(.home) .vsv3-search-overlay { display:none !important; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr {
  display:flex !important; position:sticky; top:0; z-index:9999; align-items:center;
  padding:16px clamp(18px,4vw,56px); color:#fff;
  background:linear-gradient(180deg, rgba(12,20,34,0.92), rgba(12,20,34,0.55));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
/* DESKTOP: real logo FAR-LEFT · nav (Home/Shop/COA's/Contact) centered · account + cart FAR-RIGHT */
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .menu-btn { display:none; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-link { display:none; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .brand { flex:1; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; line-height:1; text-decoration:none; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .b-name,
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .b-sub { display:none; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .brand-logo-img { display:block; height:34px; width:auto; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-nav { flex:0 0 auto; display:flex; align-items:center; gap:clamp(20px,2.5vw,40px); }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-nav a { color:#fff; font-family:var(--grotesk,system-ui,sans-serif); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.85; text-decoration:none; white-space:nowrap; transition:opacity .2s; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-nav a:hover { opacity:1; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-right { flex:1; display:flex; align-items:center; justify-content:flex-end; gap:18px; margin:0; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .acct-btn { display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; opacity:.9; transition:opacity .2s; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .acct-btn:hover { opacity:1; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .acct-btn svg { width:23px; height:23px; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .cart-btn { position:relative; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .cart-btn svg { width:19px; height:19px; }
html.vsc-dark body:not(.home) .site-header.vsc-uhdr .cart-count { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#0EA5E9; color:#04162c; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #0a1626; }
/* MOBILE (UNCHANGED): hamburger-left · centered logo image · cart-right; nav + account icon hidden */
@media (max-width:880px){
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr { padding:14px 18px; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .menu-btn { display:flex !important; flex:1; flex-direction:row !important; justify-content:flex-start !important; align-items:center; gap:10px; background:none; border:none; color:#fff; cursor:pointer; padding-left:0 !important; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .menu-btn svg { width:18px; height:18px; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .menu-label,
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-nav,
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .acct-btn { display:none !important; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .brand { flex:0 0 auto; justify-content:center; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .brand-logo-img { height:30px; }
  html.vsc-dark body:not(.home) .site-header.vsc-uhdr .hdr-right { flex:1; justify-content:flex-end; }
}

/* ============================================================
   COA LISTING CARDS (snippet #73: .coa-card) — match the shop cards exactly
   ============================================================ */
html.vsc-dark body:not(.home) .coa-card { background:rgba(38,46,61,0.55) !important; border:1px solid rgba(255,255,255,0.10) !important; box-shadow:none !important; }
html.vsc-dark body:not(.home) .coa-card-image { background:#141d2e !important; }
/* card title -> white (title is an h2/h3/h4 or a name link, no fixed class) */
html.vsc-dark body:not(.home) .coa-card h2,
html.vsc-dark body:not(.home) .coa-card h3,
html.vsc-dark body:not(.home) .coa-card h4,
html.vsc-dark body:not(.home) .coa-card .coa-card-title,
html.vsc-dark body:not(.home) .coa-card a:not(.coa-view):not(.view-coa):not(.btn) { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .coa-card p,
html.vsc-dark body:not(.home) .coa-card .coa-card-sub,
html.vsc-dark body:not(.home) .coa-card-info p { color:rgba(255,255,255,0.65) !important; }
/* "View COA" = match the shop "View" button (dark pill, white text, full-width); beat the vsv3 .btn normalizer (spec 0,2,3) */
html.vsc-dark body:not(.home) .coa-card .coa-view,
html.vsc-dark body:not(.home) a.btn.coa-view,
html.vsc-dark body:not(.home) a.btn.view-coa,
html.vsc-dark body:not(.home) .coa-card a.btn.btn-primary { background:#262E3D !important; background-color:#262E3D !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,0.14) !important; border-radius:100px !important; }
html.vsc-dark body:not(.home) .coa-card .coa-view:hover,
html.vsc-dark body:not(.home) a.btn.coa-view:hover { background:#0EA5E9 !important; color:#0F1620 !important; border-color:#0EA5E9 !important; }

/* ---- COA cards: match the SHOP card FORMAT (not just color) — same radius, square image,
        body padding, left title, full-width pill button at the bottom ---- */
html.vsc-dark body:not(.home) .coa-card { border-radius:20px !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; padding:0 !important; }
html.vsc-dark body:not(.home) .coa-card-image { aspect-ratio:1/1 !important; padding:0 !important; display:block !important; overflow:hidden !important; border-radius:0 !important; }
/* Full-bleed like the shop card: the COA images are tall (818x1024) vs the shop's square
   300x300 thumbnail, so 'contain' letterboxed them inside a rounded frame. 'cover' fills the
   1:1 box edge-to-edge (center-crop = same as the shop's square thumb); max:none defeats any
   snippet #73 max-size; radius:0 lets the card's own overflow:hidden round the top corners. */
html.vsc-dark body:not(.home) .coa-card-image img { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; display:block !important; border-radius:0 !important; }
html.vsc-dark body:not(.home) .coa-card-info { padding:18px 18px 20px !important; display:flex !important; flex-direction:column !important; gap:10px !important; flex:1 1 auto !important; }
html.vsc-dark body:not(.home) .coa-card-info h4,
html.vsc-dark body:not(.home) .coa-card h4 { text-align:left !important; font-family:'Inter',sans-serif !important; font-size:18px !important; font-weight:800 !important; letter-spacing:-0.4px !important; line-height:1.15 !important; margin:0 !important; }
html.vsc-dark body:not(.home) .coa-card .coa-view,
html.vsc-dark body:not(.home) .coa-card a.btn.coa-view,
html.vsc-dark body:not(.home) .coa-card a.btn.view-coa { margin-top:auto !important; display:block !important; width:100% !important; text-align:center !important; padding:14px !important; font-size:15px !important; font-weight:700 !important; }
@media (max-width:600px){
  html.vsc-dark body:not(.home) .coa-card-info { padding:14px 12px 16px !important; gap:8px !important; }
  /* Match the shop card's CURRENT mobile sizing exactly (title-extend + tighter button + 12px gap). */
  html.vsc-dark body:not(.home) .coa-card-info h4,
  html.vsc-dark body:not(.home) .coa-card h4 { font-size:13.5px !important; letter-spacing:-0.5px !important; }
  html.vsc-dark body:not(.home) .coa-card .coa-view,
  html.vsc-dark body:not(.home) .coa-card a.btn.coa-view,
  html.vsc-dark body:not(.home) .coa-card a.btn.view-coa { padding:12px !important; font-size:14px !important; }
}

/* ---- COA page: remove the "Browse COAs" sidebar; make the grid full-width 4-up like the shop ---- */
html.vsc-dark body:not(.home) .coa-sidebar { display:none !important; }
/* widen ONLY the COA page's container (it caps at 1280px) so 4 cards match the shop's ~370px width */
html.vsc-dark body:not(.home) .container:has(.coa-layout) { max-width:1600px !important; }
html.vsc-dark body:not(.home) .coa-layout { display:block !important; max-width:1600px !important; margin:0 auto !important; }
html.vsc-dark body:not(.home) .coa-grid { grid-template-columns:repeat(4,1fr) !important; gap:28px !important; max-width:none !important; margin:0 !important; }
@media (max-width:1200px){ html.vsc-dark body:not(.home) .coa-grid { grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:880px){  html.vsc-dark body:not(.home) .coa-grid { grid-template-columns:repeat(2,1fr) !important; gap:16px !important; } }
@media (max-width:600px){  html.vsc-dark body:not(.home) .coa-grid { gap:12px !important; } } /* match shop's ≤600 gap (after the ≤880 rule so it wins) */

/* ---- Page hero (.page-header, e.g. the COA banner): remove the molecular background photo + navy band
        so the title sits on the dark page gradient like the shop. (::before = the parent-theme image,
        ::after = navy gradient tint.) ---- */
html.vsc-dark body:not(.home) .page-header { background:transparent !important; }
html.vsc-dark body:not(.home) .page-header::before,
html.vsc-dark body:not(.home) .page-header::after { display:none !important; background-image:none !important; }

/* ============================================================
   ICE CARDS ON A LIGHTER BODY — side-cart drawer + checkout.
   Body is a near-white cool grey (#F1F4F9) — just LIGHTER than the ice cards (#E8EDF3),
   so the cards read as soft inset ice panels. Body is light, so text stays NAVY. html.vsc-pv.
   ============================================================ */
/* --- side-cart drawer: light cool body --- */
html.vsc-pv .vsc-cart-drawer,
html.vsc-pv .vsc-cart-body,
html.vsc-pv .vsc-cart-header,
html.vsc-pv .vsc-cart-footer { background:#F1F4F9 !important; border-color:#DDE4EE !important; }
/* ice cards (slightly darker than the body) */
html.vsc-pv .vsc-cart-item,
html.vsc-pv .vsc-cart-protection,
html.vsc-pv .vsc-cart-upsell,
html.vsc-pv .vsc-cart-totals,
html.vsc-pv .vsc-cart-subtotal-row { background:#E8EDF3 !important; border-color:#D5DEEA !important; }
html.vsc-pv .vsc-cart-promo:hover { background:#E6EBF2 !important; }
/* --- checkout: same — light body, ice cards ---
 * RE-GATED 2026-08-26 (this is the v4.49.1 fix, which had been lost in the
 * 2026-08-25 theme revert and left the checkout painted white again).
 *
 * $launch_dark in vsv4_dark_preview_gate() is ( $is_commerce || $is_co ), so the
 * checkout DOES carry html.vsc-dark. These ICE rules are light-era and carry
 * !important, so ungated they beat every dark rule in vsc-checkout.css (which
 * keys off body.vsc-co-dark) and repaint the page and cards #F1F4F9 / #E8EDF3.
 * :not(.vsc-dark) makes them stand down on the dark checkout while still serving
 * any light-preview surface that never gets the dark class.
 *
 * #vsc-auth-flow is DELIBERATELY excluded from the gate: the signed-out auth card
 * stays light by design, so it keeps the original ungated rule below. */
html.vsc-pv:not(.vsc-dark) .vsc-checkout-page-body,
html.vsc-pv:not(.vsc-dark) .vsc-checkout-page { background:#F1F4F9 !important; }
html.vsc-pv:not(.vsc-dark) .vsc-checkout-card,
html.vsc-pv:not(.vsc-dark) .vsc-checkout-summary,
html.vsc-pv:not(.vsc-dark) .vsc-shipping-card,
html.vsc-pv:not(.vsc-dark) .vsc-checkout-secure-btn,
html.vsc-pv:not(.vsc-dark) .vsc-mobile-bar,
html.vsc-pv:not(.vsc-dark) .vsc-mobile-summary-sheet { background:#E8EDF3 !important; border-color:#D5DEEA !important; }
/* auth card stays light on purpose, dark or not */
html.vsc-pv #vsc-auth-flow { background:#E8EDF3 !important; border-color:#D5DEEA !important; }

/* --- cart: replace pure-white sub-elements with the light palette --- */
html.vsc-pv .vsc-qty-btn,
html.vsc-pv .vsc-qty-dropdown { background:#F1F4F9 !important; border-color:#D5DEEA !important; }
html.vsc-pv .vsc-qty-option:hover { background:#DCE5F0 !important; }
html.vsc-pv .vsc-cart-upsell-img { background:#E8EDF3 !important; }

/* ---- mobile/desktop slide-out MENU drawer (.vsv3-drawer) — dark to match the theme.
        Scoped to html.vsc-pv so it's consistent on EVERY page (incl. the dark homepage). ---- */
html.vsc-pv .vsv3-drawer { background:#0F1D2E !important; }
html.vsc-pv .vsv3-drawer-footer { background:#0B1626 !important; border-top-color:rgba(255,255,255,0.08) !important; }
html.vsc-pv .vsv3-drawer nav a,
html.vsc-pv .vsv3-drawer nav a strong { color:#E8EDF3 !important; border-bottom-color:rgba(255,255,255,0.08) !important; }
html.vsc-pv .vsv3-drawer nav a svg,
html.vsc-pv .vsv3-drawer nav a .vsv3-chev,
html.vsc-pv .vsv3-drawer nav a::after { color:rgba(232,237,243,0.45) !important; stroke:rgba(232,237,243,0.45) !important; }
html.vsc-pv .vsv3-drawer .vsv3-drawer-secondary { color:rgba(232,237,243,0.55) !important; border-bottom-color:rgba(255,255,255,0.08) !important; }
html.vsc-pv .vsv3-drawer-close { color:#E8EDF3 !important; }

/* ============================================================
   MY ACCOUNT — dark theme (gate adds vsc-dark on is_account_page)
   Light account styling lives in vsc-core.css (.vsc-acct-*); these
   override the white surfaces / dark text to match the dark site.
   ============================================================ */
html.vsc-dark body:not(.home) .vsc-acct-main { background:transparent !important; }
/* logged-out passwordless sign-in card (inline-styled in form-login.php) */
html.vsc-dark body:not(.home) .vsc-passwordless-login { background:rgba(38,46,61,0.55) !important; border:1px solid rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-passwordless-login h2 { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-passwordless-login p { color:rgba(255,255,255,0.65) !important; }
html.vsc-dark body:not(.home) .vsc-passwordless-login a { background:linear-gradient(135deg,#38BDF8,#0EA5E9) !important; color:#FFFFFF !important; }
/* dashboard tiles */
html.vsc-dark body:not(.home) .vsc-acct-tile { background:rgba(38,46,61,0.55) !important; border-color:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-acct-tile-icon { background:rgba(255,255,255,0.06) !important; color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .vsc-acct-tile-title { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-tile-sub { color:rgba(255,255,255,0.55) !important; }
/* orders card */
html.vsc-dark body:not(.home) .vsc-acct-orders { background:rgba(38,46,61,0.55) !important; border-color:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-head { border-bottom-color:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-icon { background:#0EA5E9 !important; color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-title { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-sub { color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-view-all { color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-empty { color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-empty a { color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .vsc-acct-empty-icon { background:rgba(255,255,255,0.06) !important; color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-list li { border-bottom-color:rgba(255,255,255,0.10) !important; }
html.vsc-dark body:not(.home) .vsc-acct-orders-list li a { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-order-items { color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-order-total { color:#FFFFFF !important; }
/* sub-pages (profile / addresses / etc.) */
html.vsc-dark body:not(.home) .vsc-acct-subpage-title { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-subpage-sub { color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-backlink { color:rgba(255,255,255,0.55) !important; }
html.vsc-dark body:not(.home) .vsc-acct-backlink:hover { color:#FFFFFF !important; }
/* WooCommerce default account elements (orders/addresses endpoints, forms, nav) */
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation ul li a { color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation ul li.is-active a { color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-content,
html.vsc-dark body:not(.home) .woocommerce-MyAccount-content p { color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-content a { color:#38BDF8 !important; }
html.vsc-dark body:not(.home) .woocommerce table.shop_table,
html.vsc-dark body:not(.home) .woocommerce .woocommerce-Address,
html.vsc-dark body:not(.home) .woocommerce address { background:rgba(38,46,61,0.55) !important; border-color:rgba(255,255,255,0.10) !important; color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce table.shop_table th,
html.vsc-dark body:not(.home) .woocommerce table.shop_table td { border-color:rgba(255,255,255,0.10) !important; color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-content .woocommerce-Address-title h3 { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .woocommerce form .form-row label { color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce form .input-text { background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.14) !important; color:#FFFFFF !important; }

/* PDP "Related research compounds" heading — inline color:var(--midnight) is unreadable
   on the dark product page; force white (desktop + mobile). Nothing else changed. */
html.vsc-dark body:not(.home) .vsc-related h2 { color:#FFFFFF !important; }

/* ============================================================
   MY ACCOUNT — custom dashboard (woocommerce/myaccount/dashboard.php)
   ============================================================ */
html.vsc-dark body:not(.home) .vsc-acct-dash { max-width:760px; margin:0 auto; }
html.vsc-dark body:not(.home) .vsc-acct-dash .vsc-acct-hero { margin:0 0 24px !important; border-radius:18px !important; }
html.vsc-dark body:not(.home) .vsc-acct-track { display:inline-flex; align-items:center; gap:7px; margin:2px 0 14px; font-size:12.5px; font-weight:600; color:#38BDF8 !important; text-decoration:none; }
html.vsc-dark body:not(.home) .vsc-acct-track:hover { color:#7DD3FC !important; }
html.vsc-dark body:not(.home) .vsc-acct-ship { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.10); }
html.vsc-dark body:not(.home) .vsc-acct-ship-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.42); font-weight:700; margin-bottom:6px; }
html.vsc-dark body:not(.home) .vsc-acct-ship-addr { font-size:14px; color:rgba(255,255,255,0.82); line-height:1.6; margin-bottom:10px; }
/* default WooCommerce account layout cards (nav) -> dark */
html.vsc-dark body:not(.home) .woocommerce-account .woocommerce { color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation,
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation ul { background:transparent !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation ul { border:1px solid rgba(255,255,255,0.10) !important; border-radius:16px !important; overflow:hidden; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation li { border-bottom:1px solid rgba(255,255,255,0.08) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation li a { color:rgba(255,255,255,0.82) !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation li a:hover { background:rgba(255,255,255,0.04) !important; color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation li.is-active a { background:rgba(14,165,233,0.14) !important; color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .woocommerce-MyAccount-content { background:transparent !important; }


/* ============================================================
   MY ACCOUNT - dashboard v2 (mockup port: status pills, generic
   card shell, quick-links card, honest Rewards teaser).
   Scoped to the dark account page; reuses .vsc-acct-* conventions.
   ============================================================ */

/* generic dark surface card (shipping address + quick links) */
html.vsc-dark body:not(.home) .vsc-acct-card {
  background:rgba(38,46,61,0.55); border:1px solid rgba(255,255,255,0.10);
  border-radius:16px; padding:22px 26px; margin-top:20px;
}
html.vsc-dark body:not(.home) .vsc-acct-card-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;
}
html.vsc-dark body:not(.home) .vsc-acct-card-title {
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; color:#FFFFFF;
}
html.vsc-dark body:not(.home) .vsc-acct-card-title svg {
  width:17px; height:17px; stroke:#0EA5E9; fill:none; stroke-width:1.8;
}
html.vsc-dark body:not(.home) .vsc-acct-card .vsc-acct-tiles { margin-bottom:0; }

/* order status -> pill, color by status */
html.vsc-dark body:not(.home) .vsc-acct-order-status {
  display:inline-block; margin-top:6px;
  font-size:11px; font-weight:600; padding:3px 11px; border-radius:50px;
  color:#38BDF8; background:rgba(14,165,233,0.12);
}
html.vsc-dark body:not(.home) .vsc-acct-status--processing { color:#38BDF8 !important; background:rgba(14,165,233,0.12) !important; }
html.vsc-dark body:not(.home) .vsc-acct-status--completed { color:#34D399 !important; background:rgba(52,211,153,0.12) !important; }
html.vsc-dark body:not(.home) .vsc-acct-status--shipped { color:#FDB813 !important; background:rgba(253,184,19,0.12) !important; }
html.vsc-dark body:not(.home) .vsc-acct-status--pending,
html.vsc-dark body:not(.home) .vsc-acct-status--on-hold { color:#FDB813 !important; background:rgba(253,184,19,0.12) !important; }
html.vsc-dark body:not(.home) .vsc-acct-status--cancelled,
html.vsc-dark body:not(.home) .vsc-acct-status--refunded,
html.vsc-dark body:not(.home) .vsc-acct-status--failed { color:rgba(255,255,255,0.6) !important; background:rgba(255,255,255,0.08) !important; }

/* tile hover (dark) */
html.vsc-dark body:not(.home) .vsc-acct-tile:hover {
  border-color:rgba(14,165,233,0.32) !important; background:rgba(14,165,233,0.06) !important;
}

/* Rewards teaser (the one soft accent block) */
html.vsc-dark body:not(.home) .vsc-acct-rewards {
  display:flex; gap:16px; align-items:flex-start;
  background:linear-gradient(150deg,rgba(14,165,233,0.16) 0%,rgba(38,46,61,0.5) 62%);
  border:1px solid rgba(14,165,233,0.26); border-radius:16px;
  padding:24px 26px; margin-top:20px;
}
html.vsc-dark body:not(.home) .vsc-acct-rewards-icon {
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(253,184,19,0.12); color:#FDB813;
}
html.vsc-dark body:not(.home) .vsc-acct-rewards-body h2 {
  font-size:17px; font-weight:700; color:#FFFFFF; margin:0 0 6px;
}
html.vsc-dark body:not(.home) .vsc-acct-rewards-body p {
  font-size:14px; color:rgba(255,255,255,0.7); line-height:1.6; margin:0;
}
html.vsc-dark body:not(.home) .vsc-acct-rewards-soon {
  display:inline-block; margin-top:12px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#FDB813; background:rgba(253,184,19,0.10);
  border:1px solid rgba(253,184,19,0.24); border-radius:50px; padding:4px 11px;
}

/* tighten the 5-tile grid on smaller widths */
@media (max-width:560px) {
  html.vsc-dark body:not(.home) .vsc-acct-rewards { flex-direction:column; gap:12px; }
}

/* ============================================================
   MY ACCOUNT - REWARDS CARD + PROGRESS + REDEEM + REWARDS TAB
   (dashboard.php real-points card + the /my-account/rewards/ endpoint).
   Scoped to the dark account page; reuses .vsc-acct-* conventions.
   Tokens mirror vsc-affiliate.css: #0EA5E9 acc / #38BDF8 acc2 /
   gradient 135deg(#38BDF8->#0EA5E9) / #FDB813 gold / #34D399 green.
   ============================================================ */

/* hero greeting tweaks so the dash matches the mockup spacing */
html.vsc-dark body:not(.home) .vsc-acct-dash .vsc-acct-hero-actions { display:none; }
html.vsc-dark body:not(.home) .vsc-acct-dash .vsc-acct-hero-sub { margin-bottom:0; }

/* ---- REWARDS CARD (the one hero accent) ---- */
html.vsc-dark body:not(.home) .vsc-acct-rw {
  background:linear-gradient(150deg,rgba(14,165,233,0.16) 0%,rgba(38,46,61,0.5) 62%);
  border:1px solid rgba(14,165,233,0.26); border-radius:16px;
  padding:26px 28px; margin-top:20px;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:20px;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-k {
  font-size:11.5px; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,0.52); margin-bottom:6px;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-bal {
  font-family:'Space Grotesk',Inter,sans-serif; font-size:46px; font-weight:800; line-height:.95;
  background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-bal small {
  font-size:16px; font-weight:600; color:rgba(255,255,255,0.52);
  -webkit-text-fill-color:rgba(255,255,255,0.52); margin-left:7px;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-worth { text-align:right; }
html.vsc-dark body:not(.home) .vsc-acct-rw-w {
  font-family:'Space Grotesk',Inter,sans-serif; font-size:25px; font-weight:700; color:#FFFFFF;
}
html.vsc-dark body:not(.home) .vsc-acct-rw-w .woocommerce-Price-amount,
html.vsc-dark body:not(.home) .vsc-acct-rw-w bdi { color:#FFFFFF !important; }
html.vsc-dark body:not(.home) .vsc-acct-rw-ws { font-size:11.5px; color:rgba(255,255,255,0.52); margin-top:2px; }

/* researcher-member badge (gold chip) */
html.vsc-dark body:not(.home) .vsc-acct-tier {
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:12px; font-weight:700; color:#FDB813;
  background:rgba(253,184,19,0.10); border:1px solid rgba(253,184,19,0.24);
  border-radius:50px; padding:5px 12px;
}
html.vsc-dark body:not(.home) .vsc-acct-tier svg { width:13px; height:13px; fill:#FDB813; }

/* progress bar */
html.vsc-dark body:not(.home) .vsc-acct-bar {
  height:10px; border-radius:50px; background:rgba(255,255,255,0.09);
  overflow:hidden; position:relative;
}
html.vsc-dark body:not(.home) .vsc-acct-bar i {
  position:absolute; top:0; left:0; bottom:0; min-width:6px;
  background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%); border-radius:50px;
  box-shadow:0 0 12px rgba(14,165,233,0.45);
}
html.vsc-dark body:not(.home) .vsc-acct-bar-foot {
  display:flex; justify-content:space-between; gap:12px; margin-top:11px;
  font-size:13px; color:rgba(255,255,255,0.82);
}
html.vsc-dark body:not(.home) .vsc-acct-bar-foot b { color:#FFFFFF; font-weight:700; }
html.vsc-dark body:not(.home) .vsc-acct-bar-foot .woocommerce-Price-amount,
html.vsc-dark body:not(.home) .vsc-acct-bar-foot bdi { color:#FFFFFF !important; font-weight:700; }

/* redeem buttons */
html.vsc-dark body:not(.home) .vsc-acct-rw-cta { margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
html.vsc-dark body:not(.home) .vsc-acct-redeem {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14.5px; font-weight:600; color:#FFFFFF !important; text-decoration:none;
  background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
  border:none; border-radius:50px; padding:13px 26px; transition:.18s; cursor:pointer;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(14,165,233,0.34); }
html.vsc-dark body:not(.home) .vsc-acct-redeem--ghost {
  background:rgba(14,165,233,0.10); color:#38BDF8 !important;
  border:1px solid rgba(14,165,233,0.28); padding:12px 22px; font-size:13.5px;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem--ghost:hover { background:rgba(14,165,233,0.17); box-shadow:none; }
html.vsc-dark body:not(.home) .vsc-acct-redeem.disabled,
html.vsc-dark body:not(.home) .vsc-acct-redeem[aria-disabled="true"] {
  opacity:.45; pointer-events:none; filter:grayscale(.3);
}

/* ---- ORDERS: per-order sub row (FedEx track + points earned) ---- */
html.vsc-dark body:not(.home) .vsc-acct-osub {
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:11px;
}
html.vsc-dark body:not(.home) .vsc-acct-order-main { display:flex; align-items:center; justify-content:space-between; gap:14px; }
html.vsc-dark body:not(.home) .vsc-acct-track {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:#38BDF8 !important; text-decoration:none;
  background:rgba(14,165,233,0.06); border:1px solid rgba(14,165,233,0.18);
  border-radius:8px; padding:7px 12px;
}
html.vsc-dark body:not(.home) .vsc-acct-track:hover { color:#7DD3FC !important; background:rgba(14,165,233,0.12); }
html.vsc-dark body:not(.home) .vsc-acct-track svg { width:13px; height:13px; }
html.vsc-dark body:not(.home) .vsc-acct-pe {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:#FDB813;
}
html.vsc-dark body:not(.home) .vsc-acct-pe svg { width:13px; height:13px; fill:#FDB813; }

/* ---- NAV: points-balance badge on the Rewards menu item ---- */
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation-link--rewards a {
  display:flex !important; align-items:center; justify-content:space-between; gap:8px;
}
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation-link--rewards a::after {
  content:var(--vsc-pts,"");
  font-family:'Space Grotesk',Inter,sans-serif; font-size:12px; font-weight:700;
  color:#FDB813; background:rgba(253,184,19,0.12);
  border-radius:50px; padding:2px 9px; line-height:1.4;
}
html.vsc-dark body:not(.home) .woocommerce-MyAccount-navigation-link--rewards a[data-empty="1"]::after { content:""; padding:0; }

/* ============================================================
   REWARDS ENDPOINT TAB  (/my-account/rewards/)
   ============================================================ */
html.vsc-dark body:not(.home) .vsc-acct-rewards-page .vsc-acct-rw { margin-top:0; }
html.vsc-dark body:not(.home) .vsc-acct-rw-page-head { margin-bottom:18px; }
html.vsc-dark body:not(.home) .vsc-acct-rw-page-head h2 { font-size:22px; font-weight:700; color:#FFFFFF; margin:0 0 5px; }
html.vsc-dark body:not(.home) .vsc-acct-rw-page-head p { font-size:14px; color:rgba(255,255,255,0.6); margin:0; }

/* redeem options grid */
html.vsc-dark body:not(.home) .vsc-acct-redeem-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:4px;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(38,46,61,0.55); border:1px solid rgba(255,255,255,0.10);
  border-radius:13px; padding:16px 18px;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt.is-ready { border-color:rgba(14,165,233,0.32); background:rgba(14,165,233,0.06); }
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt .ro-pts {
  font-family:'Space Grotesk',Inter,sans-serif; font-size:17px; font-weight:700; color:#FFFFFF;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt .ro-val { font-size:12.5px; color:rgba(255,255,255,0.55); margin-top:2px; }
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt .ro-cta {
  font-size:13px; font-weight:600; color:#38BDF8 !important; white-space:nowrap;
  border:1px solid rgba(14,165,233,0.28); background:rgba(14,165,233,0.10);
  border-radius:50px; padding:8px 16px; text-decoration:none; transition:.16s;
}
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt .ro-cta:hover { background:rgba(14,165,233,0.18); }
html.vsc-dark body:not(.home) .vsc-acct-redeem-opt .ro-locked { font-size:12px; color:rgba(255,255,255,0.4); white-space:nowrap; }

/* points history list */
html.vsc-dark body:not(.home) .vsc-acct-hist { display:flex; flex-direction:column; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hrow {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.10); font-size:14px;
}
html.vsc-dark body:not(.home) .vsc-acct-hist .hrow:last-child { border-bottom:none; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hl { color:#FFFFFF; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hd { font-size:12px; color:rgba(255,255,255,0.5); margin-top:2px; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hp { font-family:'Space Grotesk',Inter,sans-serif; font-weight:700; white-space:nowrap; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hp.plus { color:#34D399; }
html.vsc-dark body:not(.home) .vsc-acct-hist .hp.minus { color:#38BDF8; }
html.vsc-dark body:not(.home) .vsc-acct-hist-empty { font-size:13.5px; color:rgba(255,255,255,0.55); padding:6px 0; }

/* "how points become credit" explainer */
html.vsc-dark body:not(.home) .vsc-acct-callout {
  display:flex; gap:12px; background:rgba(14,165,233,0.06);
  border:1px solid rgba(14,165,233,0.2); border-radius:12px;
  padding:16px 18px; font-size:13.5px; color:rgba(255,255,255,0.82); line-height:1.6;
}
html.vsc-dark body:not(.home) .vsc-acct-callout svg { width:20px; height:20px; stroke:#38BDF8; fill:none; stroke-width:1.8; flex-shrink:0; margin-top:1px; }
html.vsc-dark body:not(.home) .vsc-acct-callout b { color:#FFFFFF; font-weight:600; }

/* responsive */
@media (max-width:560px) {
  html.vsc-dark body:not(.home) .vsc-acct-rw-top { gap:14px; }
  html.vsc-dark body:not(.home) .vsc-acct-rw-worth { text-align:left; }
  html.vsc-dark body:not(.home) .vsc-acct-rw-bal { font-size:40px; }
  html.vsc-dark body:not(.home) .vsc-acct-redeem-grid { grid-template-columns:1fr; }
  html.vsc-dark body:not(.home) .vsc-acct-redeem,
  html.vsc-dark body:not(.home) .vsc-acct-redeem--ghost { flex:1; }
}

/* redeem result banners (Rewards tab) */
html.vsc-dark body:not(.home) .vsc-acct-redeem-ok{background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.30);color:#A7F3D0;border-radius:12px;padding:16px 18px;margin-bottom:18px;font-size:14px;line-height:1.55}
html.vsc-dark body:not(.home) .vsc-acct-redeem-ok strong{color:#fff;font-family:'Space Grotesk',sans-serif;letter-spacing:.5px}
html.vsc-dark body:not(.home) .vsc-acct-redeem-err{background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.28);color:#FCA5A5;border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:14px}

/* ── Full-width clean account dashboard (un-squish the WC 2-col grid) ── */
/* mobile-first: single column by default; 2-col only on real desktop widths */
html.vsc-dark body.woocommerce-account .woocommerce{display:grid !important;grid-template-columns:1fr !important;gap:18px !important;width:100% !important;max-width:1140px !important;margin:0 auto !important;align-items:start !important}
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content{max-width:none !important;width:auto !important;background:transparent !important;border:none !important;padding:0 !important;margin:0 !important}
html.vsc-dark body.woocommerce-account .vsc-acct-dash{max-width:none !important;width:100% !important}
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation{position:static !important}
@media (min-width:901px){html.vsc-dark body.woocommerce-account .woocommerce{grid-template-columns:250px minmax(0,1fr) !important;gap:30px !important}html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky !important;top:90px !important;align-self:start}}

html.vsc-dark body.woocommerce-account .page-content{max-width:1140px !important;width:100% !important}

/* mobile: kill the account grid entirely so sidebar + content stack as blocks (max specificity) */
@media (max-width:900px){
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce{display:block !important}
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content{width:100% !important;max-width:100% !important;display:block !important;float:none !important;margin:0 0 16px !important}
}

/* ── FINAL dark-theme account sub-pages (orders/view-order/addresses) + redeem text + mobile nav ── */
/* redeem buttons: white text for clarity (out-specify the generic content `a` cyan rule) */
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content a.vsc-acct-redeem,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content a.vsc-acct-redeem--ghost,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content a.ro-cta,
html.vsc-dark body.woocommerce-account .vsc-acct-redeem,
html.vsc-dark body.woocommerce-account .ro-cta{color:#FFFFFF !important}
/* orders + order-detail + any account table -> dark glass (beats snippet #22 light styling) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-orders-table,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .shop_table,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-table--order-details,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .order_details{background:rgba(38,46,61,0.42) !important;border:1px solid rgba(255,255,255,0.10) !important;border-radius:16px !important;color:rgba(255,255,255,0.85) !important;overflow:hidden}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table th{background:rgba(255,255,255,0.03) !important;color:#FFFFFF !important;border-color:rgba(255,255,255,0.08) !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table td{background:transparent !important;color:rgba(255,255,255,0.82) !important;border-color:rgba(255,255,255,0.07) !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table tfoot th,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table tfoot td{background:rgba(255,255,255,0.02) !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table a{color:#38BDF8 !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table .button,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table a.button{background:rgba(14,165,233,0.12) !important;color:#38BDF8 !important;border:1px solid rgba(14,165,233,0.30) !important;box-shadow:none !important}
/* address cards (View Order + Addresses tab) -> dark glass */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Address,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-customer-details .woocommerce-column,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-customer-details address{background:rgba(38,46,61,0.42) !important;border:1px solid rgba(255,255,255,0.10) !important;border-radius:16px !important;color:rgba(255,255,255,0.82) !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Address-title h2,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Address-title h3,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-customer-details h2,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-column__title,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address{color:#FFFFFF !important}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Address address{color:rgba(255,255,255,0.82) !important;font-style:normal}
/* order intro line + status mark */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-order > p,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content mark{color:rgba(255,255,255,0.85) !important;background:transparent !important}
/* mobile: account nav -> dark like desktop (kill white pills) */
@media (max-width:900px){
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{border:1px solid rgba(255,255,255,0.10) !important;border-radius:16px !important;overflow:hidden;background:rgba(38,46,61,0.42) !important;list-style:none !important;margin:0 0 16px !important;padding:0 !important}
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li{border-bottom:1px solid rgba(255,255,255,0.08) !important;background:transparent !important;margin:0 !important}
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a{background:transparent !important;color:rgba(255,255,255,0.85) !important;border-radius:0 !important;display:block !important;padding:13px 16px !important}
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a{background:rgba(14,165,233,0.14) !important;color:#FFFFFF !important}
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vsc-confirm.css?ver=4.69.1 ==== */
/* ============================================================================
 * Ventra Sciences — "Confirm to continue" express sheet (vsc-confirm.js)
 * v1.0.0 (4.49.0)
 *
 * SELF-CONTAINED on purpose: this sheet opens over the cart drawer on ANY page
 * (shop, PDP, home), where the checkout stylesheet is not loaded and the page
 * may or may not carry html.vsc-dark. Every color is declared locally on
 * #vsc-confirm's own token block — nothing inherited, nothing leaked out
 * (every selector is scoped under #vsc-confirm / body.vsc-confirm-open).
 *
 * Design language: Ventra dark navy (S4). Onest for the title/buttons, Inter
 * body — both already load sitewide via vsc-core.css; the font-family stacks
 * below just reference them with system fallbacks.
 *
 * Wallet buttons keep BRAND colors, never cyan: the disabled skins are a grey
 * Apple Pay bar, a dimmed black GPay bar and a pale Link green (RECON-A B6).
 * The REAL buttons are Stripe-rendered inside .vsc-confirm-ece and can't be
 * styled here — only revealed.
 * ========================================================================== */

#vsc-confirm {
  /* local tokens — the ONE-CYAN rule: these mirror the theme :root values */
  --vscc-cyan: #0EA5E9;
  --vscc-cyan-hover: #38BDF8;
  --vscc-cyan-on-dark: #7DD3FC;
  --vscc-card: #141D2E;
  --vscc-card-2: #0F1620;
  --vscc-ink: #EEF4FB;
  --vscc-muted: #94A3B8;
  --vscc-border: rgba(255, 255, 255, 0.12);
  --vscc-border-soft: rgba(255, 255, 255, 0.08);
  --vscc-field: #0D1626;
  --vscc-err: #F87171;

  position: fixed;
  inset: 0;
  z-index: 10500;                 /* over the drawer (9999) + its backdrop */
  font-family: var(--inter, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
#vsc-confirm[hidden] { display: none; }

body.vsc-confirm-open { overflow: hidden; }

#vsc-confirm .vsc-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 22, 0.62);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
#vsc-confirm.is-open .vsc-confirm-backdrop { opacity: 1; }

/* ---- the card: desktop = floating modal over the drawer's lower half ---- */
#vsc-confirm .vsc-confirm-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 408px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--vscc-card) 0%, var(--vscc-card-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(4, 10, 20, 0.55);
  padding: 22px 20px 18px;
  color: var(--vscc-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#vsc-confirm.is-open .vsc-confirm-card { opacity: 1; transform: translateY(0); }

#vsc-confirm .vsc-confirm-handle { display: none; }

#vsc-confirm .vsc-confirm-title {
  margin: 0 0 4px;
  font-family: var(--grotesk, 'Onest', var(--inter, 'Inter'), sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vscc-ink);          /* re-declare: never trust inherited color under global h3 rules */
}
#vsc-confirm .vsc-confirm-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vscc-muted);
}

/* ---- attestation check-cards ---- */
#vsc-confirm .vsc-confirm-attest {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  margin: 0 0 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vscc-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
#vsc-confirm .vsc-confirm-attest:hover { border-color: rgba(255, 255, 255, 0.22); }
#vsc-confirm .vsc-confirm-attest input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
#vsc-confirm .vsc-confirm-attest-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#vsc-confirm .vsc-confirm-attest input:checked ~ .vsc-confirm-attest-box {
  background: var(--vscc-cyan);
  border-color: var(--vscc-cyan);
}
#vsc-confirm .vsc-confirm-attest input:checked ~ .vsc-confirm-attest-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#vsc-confirm .vsc-confirm-attest input:focus-visible ~ .vsc-confirm-attest-box {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}
#vsc-confirm .vsc-confirm-attest input:checked ~ .vsc-confirm-attest-text { color: var(--vscc-ink); }
/* Selected card state via a JS-toggled class — NOT :has(), so the tint works on
 * every engine the store supports (and the JS never queries :has either). */
#vsc-confirm .vsc-confirm-attest.is-checked {
  border-color: var(--vscc-cyan);
  background: rgba(14, 165, 233, 0.08);
}
#vsc-confirm .vsc-confirm-attest-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vscc-muted);
}
#vsc-confirm .vsc-confirm-attest-text strong { color: var(--vscc-ink); font-weight: 600; }

#vsc-confirm .vsc-confirm-helper {
  margin: 2px 0 12px;
  text-align: center;
  font-size: 12px;
  color: var(--vscc-cyan-on-dark);   /* cyan TYPE on dark only — never a fill */
}

/* ---- OTP step ---- */
#vsc-confirm .vsc-confirm-otp {
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1px solid var(--vscc-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
#vsc-confirm .vsc-confirm-otp[hidden] { display: none; }
#vsc-confirm .vsc-confirm-otp-step[hidden] { display: none; }
#vsc-confirm .vsc-confirm-otp-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vscc-ink);
}
#vsc-confirm .vsc-confirm-otp-row { display: flex; gap: 8px; }
#vsc-confirm .vsc-confirm-otp-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  background: var(--vscc-field);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: var(--vscc-ink);
  font-size: 14px;
  font-family: inherit;
  color-scheme: dark;
}
#vsc-confirm .vsc-confirm-otp-input::placeholder { color: rgba(148, 163, 184, 0.6); }
#vsc-confirm .vsc-confirm-otp-input:focus {
  outline: none;
  border-color: var(--vscc-cyan);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}
#vsc-confirm .vsc-confirm-otp-digits {
  letter-spacing: 6px;
  font-weight: 700;
  text-align: center;
}
#vsc-confirm .vsc-confirm-otp-btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--vscc-cyan);
  color: #fff;
  font-family: var(--grotesk, 'Onest', var(--inter, 'Inter'), sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
#vsc-confirm .vsc-confirm-otp-btn:hover { background: var(--vscc-cyan-hover); }
#vsc-confirm .vsc-confirm-otp-btn:disabled { opacity: 0.55; cursor: default; }
#vsc-confirm .vsc-confirm-otp-msg {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--vscc-muted);
}
#vsc-confirm .vsc-confirm-otp-msg.is-error { color: var(--vscc-err); }
#vsc-confirm .vsc-confirm-otp-msg[hidden] { display: none; }

/* ---- the wallet button zone ----
 * The REAL button (Stripe iframe) mounts in .vsc-confirm-ece at open, so it is
 * laid out (never display:none — a hidden mount renders blank forever) but
 * invisible + inert until the card gains .is-enabled. The brand-correct
 * DISABLED skin sits on top meanwhile. */
#vsc-confirm .vsc-confirm-paywrap {
  position: relative;
  min-height: 50px;
  margin: 0 0 10px;
}
#vsc-confirm .vsc-confirm-ece {
  opacity: 0;
  pointer-events: none;
}
#vsc-confirm .vsc-confirm-card.is-enabled .vsc-confirm-ece {
  opacity: 1;
  pointer-events: auto;
}
#vsc-confirm .vsc-confirm-fake {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 12px;
  font-family: var(--grotesk, 'Onest', var(--inter, 'Inter'), sans-serif);
  font-size: 16px;
  font-weight: 600;
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
}
#vsc-confirm .vsc-confirm-card.is-enabled .vsc-confirm-fake { display: none; }
#vsc-confirm .vsc-confirm-fake > span { display: none; align-items: center; gap: 5px; }
#vsc-confirm .vsc-confirm-fake b { font-weight: 700; }
/* brand-correct disabled skins, keyed off the tapped wallet */
#vsc-confirm .vsc-confirm-paywrap[data-wallet="apple_pay"] .vsc-confirm-fake {
  background: #3A4351;
  color: rgba(255, 255, 255, 0.45);
}
#vsc-confirm .vsc-confirm-paywrap[data-wallet="apple_pay"] .vsc-confirm-fake-ap { display: inline-flex; }
#vsc-confirm .vsc-confirm-paywrap[data-wallet="google_pay"] .vsc-confirm-fake {
  background: #000;
  color: #fff;
  opacity: 0.4;
}
#vsc-confirm .vsc-confirm-paywrap[data-wallet="google_pay"] .vsc-confirm-fake-gp { display: inline-flex; }
#vsc-confirm .vsc-confirm-paywrap[data-wallet="link"] .vsc-confirm-fake {
  background: #BDEFE2;                /* pale Link green */
  color: rgba(1, 62, 47, 0.5);
}
#vsc-confirm .vsc-confirm-paywrap[data-wallet="link"] .vsc-confirm-fake-link { display: inline-flex; }

/* ---- cancel + legal ---- */
#vsc-confirm .vsc-confirm-cancel {
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid var(--vscc-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--vscc-ink);
  font-family: var(--grotesk, 'Onest', var(--inter, 'Inter'), sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
#vsc-confirm .vsc-confirm-cancel:hover { background: rgba(255, 255, 255, 0.1); }
#vsc-confirm .vsc-confirm-legal {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(148, 163, 184, 0.85);
}
#vsc-confirm .vsc-confirm-legal a {
  color: var(--vscc-cyan-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#vsc-confirm .vsc-confirm-legal a:hover { color: var(--vscc-cyan-hover); }

/* ---- mobile: bottom sheet ---- */
@media (max-width: 768px) {
  #vsc-confirm .vsc-confirm-card {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: 86svh;
    padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  #vsc-confirm.is-open .vsc-confirm-card { transform: translateY(0); }
  #vsc-confirm .vsc-confirm-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
  }
  #vsc-confirm .vsc-confirm-title { font-size: 18px; }
}

/* Reduced motion: no slide/fade choreography, just appear. */
@media (prefers-reduced-motion: reduce) {
  #vsc-confirm .vsc-confirm-backdrop,
  #vsc-confirm .vsc-confirm-card { transition: none; }
}


/* ==== https://ventrasciences.com/wp-content/themes/ventra-sciences-v4/assets/vsc-account.css?ver=4.69.1 ==== */
/* ============================================================================
   VENTRA - MY ACCOUNT
   Enqueued on is_account_page() with a dependency on `vsv4-dark`, so this file
   ALWAYS prints after vsc-core.css and vsc-dark.css and therefore wins every
   equal-specificity tie on source order. That is load-bearing - see section 1.

   ---------------------------------------------------------------------------
   THE CLASS CONTRACT  (one vocabulary; the templates emit EXACTLY these)
   ---------------------------------------------------------------------------
   SHELL - navigation.php emits the hero (it is the first child of .woocommerce)
     .vsc-acct-pagehero            centred hero, spans both grid tracks
     .vsc-acct-pagehero-eyebrow    "YOUR ACCOUNT"
     .vsc-acct-pagehero h1         "My account"

   NAV - navigation.php (WooCommerce's own <nav>/<li> classes are preserved)
     .vsc-acct-nav                 <ul>
     .vsc-acct-nav-link            <a>
     .vsc-acct-nav-ic              leading icon
     .vsc-acct-nav-label           text
     .vsc-acct-nav-badge           REAL badge markup (live points balance)
     .vsc-acct-nav-sep             divider <li> before Log out
     li.is-active                  WooCommerce-supplied active state

   SHARED
     .vsc-acct-card                panel
     .vsc-acct-card-head           title row
     .vsc-acct-card-title          28px page-level title
     .vsc-acct-card-title--sm      20px section title
     .vsc-acct-card-sub            muted sub-line
     .vsc-acct-card-link           right-side cyan link
     .vsc-acct-icontile            40px cyan-tinted icon tile
     .vsc-acct-btn                 pill base
     .vsc-acct-btn--cyan           filled cyan + glow (the primary action)
     .vsc-acct-btn--ghost          outline
     .vsc-acct-btn--dark           dark / disabled pill
     .is-disabled                  disabled modifier
     .vsc-acct-empty (+ -ic)       empty state

   DASHBOARD - dashboard.php
     .vsc-acct-dash                wrapper
     .vsc-acct-welcome             gradient welcome card (spec 4a)
     .vsc-acct-welcome-row / -name / -email / -sub
     .vsc-acct-avatar
     .vsc-acct-two                 bottom two-up grid (spec 4d)
     .vsc-acct-ship                shipping address lines
     .vsc-acct-ql / -row / -label / -sub    quick links

   REWARDS BALANCE CARD - dashboard 4b AND rewards page 8 (via the --gold modifier)
     .vsc-acct-rw  (+ .vsc-acct-rw--gold)
     .vsc-acct-rw-top / -col / -col--right
     .vsc-acct-rw-k                uppercase kicker
     .vsc-acct-rw-bal / -bal-u     big number + "pts"
     .vsc-acct-rw-worth / -worth-sub
     .vsc-acct-tier                gold "Researcher member" pill
     .vsc-acct-bar > i             progress track + fill
     .vsc-acct-bar-foot
     .vsc-acct-rw-cta              button row

   ORDER ROWS - dashboard.php + orders.php (one row design, both places)
     .vsc-acct-olist / .vsc-acct-orow / .vsc-acct-orow-main
     .vsc-acct-onum / .vsc-acct-ometa / .vsc-acct-opts (GOLD)
     .vsc-acct-oright / .vsc-acct-ototal
     .vsc-acct-ostatus (+ --completed/--failed/--on-hold/...)
     .vsc-acct-track (+ -n)        full-width tracking button
     .vsc-acct-oactions            WooCommerce actions (includes "Pay")
     .vsc-acct-oextra (+ -k)       plugin-added column
     .vsc-acct-pager               WooCommerce pagination

   ADDRESSES - my-address.php
     .vsc-acct-addr-grid / .vsc-acct-addr
     .vsc-acct-addr-head / -k / -body / -empty

   FORMS - form-edit-account.php, form-edit-address.php
     .vsc-acct-form / .vsc-acct-fgrid
     .vsc-acct-fsubmit / .vsc-acct-fnote / .vsc-acct-fieldnote
     .vsc-acct-pwd-extra (+ .is-open)   JS-revealed password fields
     (full-width fields use WooCommerce's own .form-row-wide - no second name for it)

   VIEW ORDER - view-order.php
     .vsc-acct-vo-head / -num / -date / -note
     .vsc-acct-vo-track (+ -ic / -txt / -k / -n)
     .vsc-acct-vo-notes / -note-date / -note-body
     .vsc-acct-vo-details

   REWARDS PAGE - snippet #109
     .vsc-acct-rewards
     .vsc-acct-redeem-grid / .vsc-acct-redeem-tile
     .vsc-acct-redeem-amt / .vsc-acct-redeem-pts
     .vsc-acct-hist / .vsc-acct-hrow / -hl / -hd / -hp (.plus / .minus)
     .vsc-acct-callout

   OWNED BY SNIPPET #108 - THESE NAMES ARE FIXED, DO NOT RENAME:
     .vsc-acct-redeem-ok / .vsc-acct-redeem-err
     (the points engine echoes them itself; we only skin them)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS  (spec section 1)
   -------------------------------------------------------------------------- */
:root {
  --acct-panel:      rgba(30, 38, 50, 0.60);
  --acct-panel-2:    rgba(255, 255, 255, 0.04);
  --acct-border:     rgba(255, 255, 255, 0.08);
  --acct-ink:        #FFFFFF;
  --acct-ink-soft:   #C7D2DE;
  --acct-ink-mute:   #8FA0B4;

  /* Cyan comes from the sitewide ramp in vsc-core.css. Never re-declare the
     literal here - one cyan, one place. */
  --acct-cyan:       var(--vsc-cyan, #0EA5E9);
  --acct-cyan-ink:   var(--vsc-on-cyan, #FFFFFF);
  --acct-cyan-hover: var(--vsc-cyan-hover, #38BDF8);
  --acct-cyan-rgb:   var(--vsc-cyan-rgb, 14, 165, 233);

  --acct-gold:       #F5C451;
  --acct-gold-bg:    rgba(245, 196, 81, 0.12);
  --acct-green:      #4ADE80;
  --acct-green-bg:   rgba(74, 222, 128, 0.12);
  --acct-red:        #F87171;
  --acct-red-bg:     rgba(248, 113, 113, 0.12);

  --acct-r:          16px;   /* card */
  --acct-r-tile:     12px;   /* tile / input */
  --acct-r-pill:     999px;
  --acct-tap:        44px;   /* WCAG 2.5.5 minimum touch target */
  --acct-display:    'Space Grotesk', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --acct-glow:       0 8px 24px rgba(14, 165, 233, 0.35);
}


/* ==========================================================================
   1. HOW THIS FILE WINS  (read this before "simplifying" a selector)

   Live Code Snippet #22 prints an INLINE <style> in wp_head. Enqueued sheets
   print at priority 8; a snippet echoing at priority 10 lands AFTER us. So on an
   equal-specificity tie WITH !important, snippet #22 wins on source order.

     #22   body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2
           = (0,3,2)  ->  color:#0A1F3D !important   (navy on dark = INVISIBLE)

     ours  html.vsc-dark body.woocommerce-account.logged-in
           .woocommerce-MyAccount-content h2
           = (0,4,3)  ->  out-SPECIFIES it, so source order stops mattering.

   Against vsc-dark.css / vsc-core.css (which still hold the LEGACY .vsc-acct-*
   rules, at (0,3,2)-(0,4,2)) we win on specificity AND on source order, via the
   vsv4-dark dependency. Both mechanisms point the same way. Do not shorten the
   prefix - the headings go invisible again and the legacy rules come back.
   ========================================================================== */

/* 1a. INVISIBLE HEADINGS. #22 forces navy on every h2/h3/legend in the content.
   WooCommerce emits some of those itself (order-details.php's "Order details",
   the edit-account <legend>) through hooks we must keep firing, so this cannot be
   fixed in a template. COLOUR is forced here; SIZE is left to the classes below,
   so a card title can still be 28px. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h1,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h3,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset legend {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display) !important;
  letter-spacing: -0.01em;
}
/* Default size for a heading WooCommerce injects and we do not control. Our own
   titles carry .vsc-acct-card-title, which is a class and therefore wins. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset legend {
  border-bottom: 1px solid var(--acct-border) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 0 0 12px !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}

/* 1b. NAV / CONTENT ALIGNMENT.
   `<main class="site-main">` computes `overflow-y:auto`, which makes it a SCROLL
   CONTAINER. `position:sticky` on the nav therefore resolves against main's
   scrollport, not the viewport - so the nav never actually stuck to anything and
   simply sat a permanent 30px (one grid gap) below the content, at every scroll
   position. Static costs nothing and fixes it.
   This also unwinds WooCommerce's core float layout (nav float:left/width:35%,
   content float:right/width:65%), which fights the grid. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
  position: static !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  align-self: start !important;
  background: var(--acct-panel) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: var(--acct-r) !important;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 1c. KILL THE LEGACY ::after BADGE.
   vsc-dark.css paints the Rewards nav badge with `content: var(--vsc-pts,"")`,
   and snippet #109 USED to fill that var from an inline <style>. The badge is now
   REAL MARKUP emitted by navigation.php (.vsc-acct-nav-badge), so the pseudo has
   to be silenced - otherwise we render two badges, or (worse) an EMPTY gold pill,
   because dark.css gives ::after padding + background even when the content
   string resolves to "".
   This also makes the theme and the snippet ORDER-INDEPENDENT: whichever deploys
   first, we never double-render. */
html.vsc-dark body .woocommerce-MyAccount-navigation-link--rewards a::after {
  content: none !important;
  display: none !important;
}

/* Keyboard users must be able to see where they are. */
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content a:focus-visible,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content button:focus-visible,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  outline: 2px solid var(--acct-cyan-hover);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 1d. .screen-reader-text - THE THEME NEVER DEFINED IT.
   WordPress and WooCommerce both emit `<span class="screen-reader-text">` as
   visually-hidden context for assistive tech, and this theme has no rule for it
   anywhere - so every such span was rendering as PLAIN VISIBLE TEXT. (It is what
   would have printed "45 points available" right next to the Rewards badge.)
   This is the standard WP visually-hidden pattern. It is unscoped on purpose, but
   harmless: this stylesheet only loads on account pages. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. PAGE SHELL  (spec section 2)
   ========================================================================== */

/* The hero is the FIRST child of .woocommerce and spans BOTH tracks, so the nav
   and the content still auto-place side by side on the row beneath it. No extra
   wrapper element is needed - and none is available, because my-account.php is
   WooCommerce core and we do not override it. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
  display: grid !important;
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero {
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px 0 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--acct-ink-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero h1 {
  margin: 0;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   2b. LOGGED-OUT SIGN-IN CARD  (spec section 10)  -  THE OFF-CENTRE BUG.

   ROOT CAUSE: `body.woocommerce-account` is present when logged OUT too. An
   UNSCOPED 2-col grid rule on `.woocommerce` therefore gave the logged-out page a
   250px phantom sidebar track. The auth card is the only in-flow child, so it
   auto-placed into COLUMN 2 and sat exactly 280px (250px track + 30px gap) right
   of centre at >=901px - while looking perfectly fine below 901px, where the grid
   collapses. No float and no explicit grid-column was ever involved: it was pure
   grid auto-placement into the wrong track.

   Every logged-in rule in this file is scoped `.logged-in`. This block is its
   mirror - scoped `:not(.logged-in)` - and force-collapses the shell to a single
   centred column, so the card cannot be pushed into a phantom track no matter
   what any other stylesheet says (including a stale cached copy of one).
   -------------------------------------------------------------------------- */
html.vsc-dark body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}
/* The card itself: margin-inline auto is the belt to the shell's braces. */
html.vsc-dark body.woocommerce-account:not(.logged-in) .vsc-account-auth-wrap {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 56px !important;
  float: none !important;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) .vsc-authp-card {
  background: rgba(38, 46, 61, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--acct-r) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
}
/* WooCommerce's stock login form is NOT used here (this is the passwordless OTP
   card), but neutralise its float/width defaults anyway: if WC ever renders one,
   or a plugin injects one, it must not be able to re-introduce the offset. */
html.vsc-dark body.woocommerce-account:not(.logged-in) form.woocommerce-form-login,
html.vsc-dark body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Vertically comfortable: a centred block, not jammed under the page header.
   These ancestor trims are safe because this stylesheet only loads on account
   pages (is_account_page()). */
html.vsc-dark body.woocommerce-account:not(.logged-in) .page-header {
  padding-bottom: 28px !important;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) main.site-main {
  min-height: 60vh;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) main.site-main .container {
  padding-top: 14px !important;
}


/* ==========================================================================
   3. SIDEBAR NAV  (spec section 3)   [card chrome is in 1b]
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: var(--acct-tap);
  padding: 14px 16px !important;
  border-radius: 10px !important;
  color: var(--acct-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--acct-ink) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-ic {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: .75;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ACTIVE: 4px rounded CYAN accent bar flush to the item's left edge. */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--acct-ink) !important;
  font-weight: 700 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link .vsc-acct-nav-ic {
  opacity: 1;
  color: var(--acct-cyan);
}

/* REWARDS BADGE - real markup (see 1c: the legacy ::after pseudo is dead). */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Divider, then a muted Log out. */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-sep {
  height: 1px;
  margin: 8px 12px !important;
  padding: 0;
  background: var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.woocommerce-MyAccount-navigation-link--customer-logout > .vsc-acct-nav-link {
  color: var(--acct-ink-mute) !important;
  font-weight: 500 !important;
}


/* ==========================================================================
   4. SHARED - cards, titles, buttons, empty states
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card {
  background: var(--acct-panel);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 26px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card:last-child {
  margin-bottom: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head > div {
  min-width: 0;
}
/* A class beats the bare-h2 rule in 1a, so a card title is 28px even as an <h2>. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title {
  display: block;
  margin: 0 !important;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title--sm {
  font-size: 20px !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-sub {
  margin: 6px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
  line-height: 1.5;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-link {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--acct-cyan) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-link:hover {
  color: var(--acct-cyan-hover) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-icontile {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--acct-r-tile);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
}

/* BUTTONS. vsc-dark.css has a generic `a { color: cyan }` for the content area,
   so ink colour needs !important on every filled control or the label goes cyan
   on cyan. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--acct-tap);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--acct-r-pill) !important;
  font-family: var(--acct-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--cyan {
  background: var(--acct-cyan) !important;
  border-color: var(--acct-cyan) !important;
  color: var(--acct-cyan-ink) !important;
  box-shadow: var(--acct-glow);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--cyan:hover {
  background: var(--acct-cyan-hover) !important;   /* a hover BRIGHTENS */
  border-color: var(--acct-cyan-hover) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--ghost {
  background: transparent !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
  box-shadow: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--dark {
  background: var(--acct-panel-2) !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink-mute) !important;
  box-shadow: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn.is-disabled,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn[disabled] {
  opacity: .55;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* WooCommerce's own buttons: "Pay" (an unpaid order - real money), "Order again",
   "Save address", "Save changes", pagination. They render as bare .button /
   .woocommerce-Button, so without this they ship as unstyled grey rectangles. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .button,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--acct-tap);
  padding: 12px 24px !important;
  background: var(--acct-cyan) !important;
  border: 1px solid var(--acct-cyan) !important;
  border-radius: var(--acct-r-pill) !important;
  color: var(--acct-cyan-ink) !important;
  font-family: var(--acct-display);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: var(--acct-glow);
  cursor: pointer;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .button:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--acct-cyan-hover) !important;
  border-color: var(--acct-cyan-hover) !important;
}
/* Secondary actions read as ghost pills, so on an unpaid order "Pay" is the only
   filled control on the row. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button.cancel,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--previous,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--next {
  background: transparent !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
  box-shadow: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button.cancel:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--previous:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--next:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--acct-ink) !important;
}

/* EMPTY STATES */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  color: var(--acct-ink-mute);
  font-size: 15px;
  text-align: center;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--acct-r-tile);
  background: var(--acct-panel-2);
  color: var(--acct-ink-mute);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty a:not(.button) {
  color: var(--acct-cyan) !important;
  font-weight: 600;
}


/* ==========================================================================
   5. DASHBOARD  (spec section 4)
   ========================================================================== */

/* 4a. WELCOME CARD - gradient, lighter navy top-left -> panel. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome {
  background: linear-gradient(135deg, rgba(56, 70, 92, 0.72) 0%, var(--acct-panel) 62%);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 30px;
  margin: 0 0 24px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-row > div {
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-avatar {
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0F1620;
  font-family: var(--acct-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-name {
  margin: 0 !important;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-email {
  margin: 4px 0 0 !important;
  color: var(--acct-cyan) !important;
  font-size: 15px;
  overflow-wrap: anywhere;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-sub {
  margin: 18px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* 4b / 8. REWARDS BALANCE CARD.
   Cyan on the dashboard; the --gold modifier is what the Rewards page uses. ONLY
   the accent changes - the geometry is identical in both places, which is why the
   accent is a variable rather than a second copy of the card. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw {
  --rw-accent: var(--acct-cyan);
  background: var(--acct-panel);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 26px;
  margin: 0 0 24px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw--gold {
  --rw-accent: var(--acct-gold);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col {
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col--right {
  text-align: right;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-k {
  margin: 0 0 8px;
  color: var(--acct-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--rw-accent);
  font-family: var(--acct-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal-u {
  color: var(--acct-ink-mute);
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* wc_price() wraps its output in <span class="woocommerce-Price-amount"><bdi>. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth .woocommerce-Price-amount,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth bdi {
  color: inherit !important;
  font: inherit !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth-sub {
  margin: 6px 0 0;
  color: var(--acct-ink-mute);
  font-size: 13px;
  line-height: 1.45;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 5px 12px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
  font-size: 12px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-tier svg {
  width: 13px;
  height: 13px;
}

/* Progress bar - identical track geometry in both variants (spec 4b + 8). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar {
  display: block;
  height: 8px;
  border-radius: var(--acct-r-pill);
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--acct-r-pill);
  background: var(--rw-accent);
  transition: width .4s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 0;
  color: var(--acct-ink-mute);
  font-size: 13px;
  line-height: 1.5;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot b,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot .woocommerce-Price-amount {
  color: var(--acct-ink) !important;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot > span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

/* 4d. BOTTOM TWO-UP */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two > .vsc-acct-card {
  margin: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ship {
  color: var(--acct-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-row {
  display: block;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--acct-r-tile);
  background: var(--acct-panel-2);
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-label {
  display: block;
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-sub {
  display: block;
  margin-top: 3px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
}


/* ==========================================================================
   6. ORDER ROWS  (dashboard 4c + orders section 5 - one design, both places)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-olist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow:last-child {
  padding-bottom: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-onum {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 16px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ometa {
  margin-top: 4px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  line-height: 1.5;
}
/* The "+N pts" segment is GOLD (spec 4c). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-opts {
  color: var(--acct-gold) !important;
  font-weight: 600;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oright {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal .woocommerce-Price-amount {
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal small {
  color: var(--acct-ink-mute) !important;
  font-weight: 500;
}

/* STATUS PILLS (spec 4c): completed=green, failed=red, on-hold=gold, else cyan. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--acct-r-pill);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--completed {
  background: var(--acct-green-bg);
  color: var(--acct-green);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--failed,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--cancelled,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--refunded {
  background: var(--acct-red-bg);
  color: var(--acct-red);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--on-hold,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--pending {
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
}

/* TRACKING BUTTON - full width of the row (spec section 5). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--acct-tap);
  margin: 14px 0 0;
  padding: 12px 18px;
  box-sizing: border-box;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: 10px;
  color: var(--acct-ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track:hover {
  background: rgba(255, 255, 255, 0.08);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track svg {
  flex: 0 0 auto;
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track-n {
  color: var(--acct-ink-mute) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* WooCommerce order actions - the "Pay" action for an unpaid order lives here. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oextra {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--acct-ink-soft);
  font-size: 13px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oextra-k {
  color: var(--acct-ink-mute);
  font-weight: 600;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pager {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
}


/* ==========================================================================
   7. ADDRESSES  (spec section 6)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
/* (the clearfix that was breaking this grid is neutralised in section 13) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr {
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  padding: 22px;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-k {
  color: var(--acct-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-body {
  color: var(--acct-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-empty {
  color: var(--acct-ink-mute);
}


/* ==========================================================================
   8. FORMS  (spec section 7)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px;
}
/* WooCommerce emits .form-row-first / -last for a 2-up pair and .form-row-wide for
   a full-width field. Map those onto the grid instead of core's float math. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid .form-row {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
/* `.form-row-wide` is what WooCommerce puts on a full-width field, and what our own
   password-disclosure block carries, so this one rule spans both. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid .form-row-wide {
  grid-column: 1 / -1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid > .clear {
  display: none !important;   /* core's float clearfix; meaningless inside a grid */
}

/* FLOATING-LABEL UNWIND.
   vsc-core.css styles EVERY `.woocommerce form .form-row label` as
   `position:absolute; top:8px; left:16px; pointer-events:none` - that is the
   CHECKOUT's floating-label design, where the input is padded to leave room for it.
   Inherited here, it printed the label directly on top of the field's value
   ("First name" over "Kaseton"). Setting display:block alone does NOT undo it; the
   absolute positioning has to be explicitly reset. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .form-row label,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-form label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;   /* so tapping the label focuses the field */
  display: block;
  margin: 0 0 8px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .form-row label .required {
  color: var(--acct-cyan) !important;
  text-decoration: none;
  border: 0;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="text"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="email"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="tel"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="password"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content select,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--acct-tap);
  padding: 14px 16px !important;
  background: var(--acct-panel-2) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  color: var(--acct-ink) !important;
  /* 16px, NOT the spec's 15px. Anything under 16px makes iOS Safari zoom the page
     on focus, which is itself a horizontal-overflow bug. Deliberate deviation. */
  font-size: 16px !important;
  line-height: 1.4;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text:focus,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input:focus,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--acct-cyan) !important;
  box-shadow: 0 0 0 3px rgba(var(--acct-cyan-rgb), 0.18);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text::placeholder,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input::placeholder {
  color: var(--acct-ink-mute) !important;
  opacity: 1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-password-hint,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fieldnote {
  display: block;
  margin-top: 6px;
  color: var(--acct-ink-mute) !important;
  font-size: 12px;
  font-style: normal;
}

/* PASSWORD DISCLOSURE (spec rule 2).
   WooCommerce REQUIRES password_current AND password_2 for a password change to
   go through, but the design shows only "New password". So both live in the DOM
   and are revealed by the template's JS the moment a new password is typed. At
   rest the page matches the design exactly; the change still works. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pwd-extra {
  display: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pwd-extra.is-open {
  display: block;
  animation: vsc-acct-fade .18s ease both;
}
@keyframes vsc-acct-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* WooCommerce (10.9.x) already draws its own eye toggle, as a background-image on
   `.show-password-input::before`, swapping to the eye-with-slash via
   `.display-password::before`. So do NOT add a glyph here - an earlier pass did,
   and the field rendered TWO eyes side by side. The only thing WC gets wrong is
   the colour: its SVG is dark (it assumes a light form). Inverting it turns it
   white and keeps both states working for free. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .password-input {
  position: relative;
  display: block;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .password-input .input-text {
  padding-right: 52px !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input:hover {
  background: transparent !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input::before {
  filter: invert(1);
  opacity: .55;
  transition: opacity .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input:hover::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input.display-password::before {
  opacity: 1;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fsubmit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 4px 0 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fnote {
  color: var(--acct-ink-mute);
  font-size: 13px;
}

/* select2 (the country / state pickers on the address form) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection__rendered {
  padding: 0 !important;
  color: var(--acct-ink) !important;
  line-height: 1.4 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection__arrow {
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%);
}


/* ==========================================================================
   9. VIEW ORDER
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-num {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-date,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note {
  margin: 8px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-ic {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--acct-r-tile);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-txt {
  flex: 1 1 auto;
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-k {
  display: block;
  color: var(--acct-ink) !important;
  font-size: 14px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-n {
  display: block;
  margin-top: 2px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes li {
  padding: 14px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes li:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-date {
  margin: 0 0 4px !important;
  color: var(--acct-ink-mute) !important;
  font-size: 12px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-body,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-body p {
  margin: 0 !important;
  color: var(--acct-ink-soft) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* The line-item table WooCommerce renders into .vsc-acct-vo-details through the
   woocommerce_view_order hook. We do not own that markup - only its skin. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .shop_table {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-collapse: collapse;
  color: var(--acct-ink-soft) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table th {
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink) !important;
  font-size: 13px;
  text-align: left;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table td {
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink-soft) !important;
  font-size: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table a {
  color: var(--acct-cyan) !important;
  text-decoration: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-customer-details address {
  padding: 18px;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  color: var(--acct-ink-soft);
  font-style: normal;
  line-height: 1.7;
}


/* ==========================================================================
   10. REWARDS PAGE  (snippet #109 - spec section 8)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  box-sizing: border-box;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: 14px;
  text-align: center;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt .woocommerce-Price-amount,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt bdi {
  color: var(--acct-cyan) !important;
  font-family: var(--acct-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-pts {
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-tile .vsc-acct-btn {
  width: 100%;
  margin-top: 12px;
}

/* HISTORY */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hist {
  display: flex;
  flex-direction: column;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hrow:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hl {
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 600;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hd {
  margin-top: 2px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp.plus {
  color: var(--acct-green) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp.minus {
  color: var(--acct-ink-mute) !important;
}

/* CALLOUT */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(var(--acct-cyan-rgb), 0.07);
  border: 1px solid rgba(var(--acct-cyan-rgb), 0.20);
  border-radius: var(--acct-r-tile);
  color: var(--acct-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout b {
  color: var(--acct-ink) !important;
}

/* REDEEM RESULT BANNERS.
   These two class names are emitted by SNIPPET #108 (vsc_points_redeem_notice),
   which this build does NOT own. The names are therefore FIXED - renaming them
   here would silently un-style the one message that tells a customer the coupon
   code they just paid points for. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-ok {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--acct-green-bg);
  border: 1px solid rgba(74, 222, 128, 0.30);
  border-radius: var(--acct-r-tile);
  color: #A7F3D0;
  font-size: 14px;
  line-height: 1.55;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-ok strong {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  letter-spacing: .5px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-err {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--acct-red-bg);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: var(--acct-r-tile);
  color: #FCA5A5;
  font-size: 14px;
}

/* WooCommerce notices ("Account details changed successfully.", validation errors) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-info {
  background: var(--acct-panel) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: var(--acct-r-tile) !important;
  color: var(--acct-ink) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-info::before {
  content: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error li,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message li {
  color: var(--acct-ink) !important;
}


/* ==========================================================================
   11. RESPONSIVE  -  single column < 900px, 0px horizontal overflow.
   ========================================================================== */

/* Nothing in the account area may establish a wider-than-viewport box. The usual
   culprits are a long tracking number, an email address, and WooCommerce's tables. */
html.vsc-dark body.woocommerce-account .woocommerce,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  /* Single column: the sidebar card first, content below (spec section 2). */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-grid,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome {
    padding: 20px;
  }
  /* The balance row stacks, so a 54px number and a 40px price never collide. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-top {
    flex-direction: column;
    gap: 18px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col--right {
    text-align: left;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal {
    font-size: 44px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
    font-size: 32px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-name {
    font-size: 26px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title {
    font-size: 24px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow-main {
    align-items: flex-start;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-cta .vsc-acct-btn {
    flex: 1 1 100%;
  }
  /* WooCommerce's order-details table is the one box that can still exceed the
     viewport. Let IT scroll rather than the page. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-details {
    overflow-x: auto;
  }
}

/* ============================================================================
   12. OWNERSHIP + PLACEMENT FIXES

   The .vsc-acct-* vocabulary is REUSED from an older account design. Its rules used
   to live in vsc-dark.css / vsc-core.css and only lost to this sheet on the exact
   properties this sheet happened to re-declare -- so a legacy `justify-content`, a
   legacy `-webkit-text-fill-color`, or a legacy `display:flex` kept leaking through
   (it laid the Rewards tab out sideways, painted the gold balance cyan, and shoved
   the "Recent orders" title to the right edge). Those 221 legacy rules have now been
   DELETED from both sheets, so this file is the single owner of the vocabulary.
   The rules below are the ones the design needs that the legacy sheet had been
   silently providing, plus two placement fixes.
   ========================================================================= */

/* (a) DOUBLE <h1>. The account page runs through the parent theme's page.php, which
   prints .page-header > h1 and WooCommerce fills it with the ENDPOINT title. Our hero
   adds its own, so every view shipped two: the dashboard read "My account" twice and
   /orders/ read "Orders" then a 96px "My account". The hero IS the title. */
html.vsc-dark body.woocommerce-account.logged-in .page-header { display: none !important; }

/* (b) HERO RENDERED AT THE BOTTOM OF THE PAGE. The hero is the FIRST child of
   .woocommerce, but the account grid explicitly pins the nav and the content to
   grid-row:1 -- so grid auto-placement pushed the (unplaced) hero down into row 2,
   i.e. below everything, even though it comes first in the DOM. Place all three
   explicitly: hero spans row 1, nav + content sit in row 2. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .vsc-acct-pagehero {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
  grid-row: 2 !important;
}

/* (c) Properties the design needs that the deleted legacy rules had been supplying. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head {
  justify-content: flex-start;   /* icon + title group LEFT; .vsc-acct-card-link is
                                    pushed right by its own margin-left:auto. The legacy
                                    space-between was right-aligning the whole title. */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
  text-align: right;             /* "WORTH RIGHT NOW" column */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar {
  position: relative;            /* the fill <i> is absolutely positioned against it */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-dash {
  display: block;
}
/* Every address in the design is a plain block of text. Both of ours are <address>
   elements, and vsc-dark.css hands EVERY <address> the same panel background it hands
   WooCommerce's tables:

       html.vsc-dark body:not(.home) .woocommerce address { background: ...!important }
       ...  .woocommerce-MyAccount-content .woocommerce-Address address { color: ...!important }

   ...so each address was drawn as a second, narrower panel floating inside its own card.

   Those legacy rules are `!important`, which beats source order -- so the override has to
   be `!important` too. (It is not enough to simply declare the property later: that is the
   exact mistake that left this boxed through 4.39.3.)

   Scoped to the two classes WE emit, so the identical vsc-dark rule keeps styling the
   addresses it is genuinely responsible for -- View Order, checkout, order-received. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-ship,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-addr-body {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-addr-body {
  color: var(--acct-ink-soft) !important;   /* the legacy rule forces its own colour here too */
}

/* (d) Belt-and-braces: the balance number must never inherit a gradient text-fill
   (that is what painted the GOLD rewards balance cyan). currentColor tracks
   --rw-accent in both the cyan (dashboard) and gold (rewards page) variants. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal-u {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   13. THE CLEARFIX-IN-A-GRID TRAP

   WooCommerce clears floats the 2011 way, on four of the exact elements this
   design turns into grid/flex containers:

       .woocommerce .col2-set::before,       .col2-set::after,
       .woocommerce-Address-title::before,   ::after,
       .woocommerce .form-row::before,       ::after,
       .woocommerce::before,                 ::after
           { content: " "; display: table; }

   A clearfix is INVISIBLE in a float layout -- that is the whole point of it. In
   a grid or flex container it is not: a pseudo-element with a `content` value is a
   real box, and a real box in a grid is a GRID ITEM. So every one of these
   containers was silently carrying two phantom children:

     - .vsc-acct-addr-grid  ->  ::before took cell 1, so the first address card was
                                pushed into cell 2 and the second wrapped onto row 2.
                                The two cards were never side by side; they were laid
                                out diagonally. This is the bug the design comparison
                                caught, and it was NOT caused by their DOM order --
                                swapping the cards just moved which one sat where.
     - .woocommerce         ->  two phantom items in the top-level nav|content grid.
                                Harmless only because section 12 pins the hero, nav
                                and content to explicit rows; the moment anything is
                                auto-placed again, they bite.
     - .vsc-acct-addr-head  ->  two phantom flex items in each address card header.
     - .form-row            ->  two phantom flex items in every Account-details row.

   Kill `content`, not just `display`: `display:none` alone still leaves a generated
   box in some engines, whereas `content:none` means the pseudo is never generated at
   all, so it cannot be a grid/flex item under any circumstances.

   Scoped to the account area only -- the same clearfix is load-bearing elsewhere on
   the site (cart, checkout), where those elements really are float layouts.

   NOT touched (both are deliberate and both are position:absolute, so they are out
   of flow and were never grid/flex items to begin with):
     - .vsc-acct-nav-link::before   -- our active-item cyan bar
     - .show-password-input::before -- WooCommerce's show/hide-password eye
   ========================================================================== */
html.vsc-dark body.woocommerce-account .woocommerce::before,
html.vsc-dark body.woocommerce-account .woocommerce::after,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-grid::before,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-grid::after,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-head::before,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-head::after,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content .form-row::before,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content .form-row::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   14. MOBILE: RELEASE THE DESKTOP ROW PINNING  (the "chopped" bug)

   Section 12 pins the hero to grid-row 1 and BOTH the nav and the content to
   grid-row 2. That is right for the 2-column desktop shell -- but below 901px the
   shell collapses to a SINGLE column, and then those two row-2 items collide:

     - nav takes   row 2 / column 1
     - content has nowhere left on row 2, so grid auto-placement invents an
       IMPLICIT second column for it
     - that implicit column is `auto`-sized, so it takes ~300px of a 390px screen
     - which starves the single EXPLICIT `minmax(0,1fr)` track down to 0px
     - and the hero + the nav both live in that 0px track

   Result: the <h1> wrapped to one CHARACTER per line and the nav rendered as a
   22px sliver. Nothing overflowed the viewport, so an overflow check sees nothing
   wrong -- the layout was crushed INWARD, not outward.

   Fix: below 901px, release the explicit placement and force every direct child to
   span the one column. Then the three of them simply stack: hero, nav, content.
   ========================================================================== */
@media (max-width: 900px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .vsc-acct-pagehero,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  /* Belt to that braces: even if some other sheet ever manages to place a child
     into a phantom column, an implicit track can no longer starve the real one. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }
  /* The hero is the page title on mobile too -- just smaller, and it must never be
     the thing that decides the column width. */
  html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero {
    padding: 4px 0 10px !important;
  }
}

/* ==========================================================================
   15. ACCOUNT NAV: OUT-SPECIFY THE TWO LIVE SNIPPETS

   Two ACTIVE snippets still ship a LIGHT-THEME account nav -- white list cards,
   slate borders, and a cyan `box-shadow: 0 0 0 1px #0EA5E9 inset` on the active
   item:

       #17  "Ventra v3 Modern Aminos Style (FINAL)"        (global, 59KB)
       #31  "Ventra Mobile - hamburger nav + responsive"   (global, 77KB)

   #31's copy sits inside a mobile media query, which is why the account nav looked
   right on desktop and wore a cyan OUTLINE box on a phone. Neither snippet can be
   deactivated: #31 is the site's entire mobile hamburger navigation, and #17 is the
   v3 base style. So the theme has to out-specify them.

   Their selectors top out at `body.woocommerce-account .woocommerce-MyAccount-navigation
   ul li.is-active` = (0,3,3). `!important` alone is NOT enough here, because they are
   `!important` too and a snippet prints AFTER the theme stylesheet -- so on a tie the
   snippet wins on source order. The chain below is (0,5,4)+ and therefore decisive.

   This restates the design's own nav (spec section 3): the item is plain, and the
   ACTIVE state is a 4px rounded cyan bar on the left edge -- never a boxed outline.
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li > a.vsc-acct-nav-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--acct-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--acct-ink) !important;
  font-weight: 700 !important;
}
/* THE active indicator. A snippet was overriding this pseudo's background to
   transparent on mobile, which is why the bar vanished and only their outline box
   was left. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  right: auto !important;
  width: 4px !important;
  height: auto !important;
  border-radius: var(--acct-r-pill) !important;
  background: var(--acct-cyan) !important;
  opacity: 1 !important;
}
/* Log out keeps its icon; the navigational items are plain text (spec section 3). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link .vsc-acct-nav-ic {
  color: var(--acct-cyan) !important;
  opacity: 1 !important;
}
/* ==========================================================================
   MEMBERSHIP  (.vsmem-*)  -  append to assets/vsc-account.css
   --------------------------------------------------------------------------
   Every colour, radius and font here is an EXISTING --acct-* token. Nothing
   below re-declares a literal cyan, a panel colour or a font stack: the one
   ramp lives in vsc-core.css and vsc-account.css section 0 already aliases it.
   A membership card must be indistinguishable from an orders card.

   Contrast, against the dark panel these sit on:
     --acct-ink       #FFFFFF  ~16.9:1
     --acct-ink-soft  #C7D2DE  ~11.6:1
     --acct-ink-mute  #8FA0B4  ~6.4:1   used only at >= 13px
   The tier price and the points figure use --acct-ink, never a mid grey, and
   cyan is never used as small type: #0EA5E9 on this ground is about 4.4:1,
   which is why --acct-cyan-hover (#38BDF8, ~7.9:1) is the one used for text.
   ========================================================================== */

/* ---- notices ---------------------------------------------------------- */
.vsmem-note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
.vsmem-note--ok   { border-left: 3px solid var(--acct-green); }
.vsmem-note--warn { border-left: 3px solid var(--acct-gold); }
.vsmem-note--err  { border-left: 3px solid var(--acct-red); }

/* ---- status pill ------------------------------------------------------ */
.vsmem-pill {
  border-radius: var(--acct-r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vsmem-pill--active    { background: var(--acct-green-bg); color: var(--acct-green); }
.vsmem-pill--past_due  { background: var(--acct-gold-bg);  color: var(--acct-gold);  }
.vsmem-pill--cancelled { background: var(--acct-gold-bg);  color: var(--acct-gold);  }
.vsmem-pill--expired   { background: var(--acct-red-bg);   color: var(--acct-red);   }

/* ---- the plan block --------------------------------------------------- */
.vsmem-plan {
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  padding: 18px 20px;
  margin: 4px 0 20px;
}
.vsmem-plan-name {
  font-family: var(--acct-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--acct-ink);
  line-height: 1.15;
}
.vsmem-plan-price {
  margin-top: 4px;
  font-size: 16px;
  color: var(--acct-ink-soft);
}
.vsmem-plan-price span { color: var(--acct-ink-mute); font-size: 14px; }
.vsmem-plan-renew {
  margin-top: 10px;
  font-size: 14px;
  color: var(--acct-ink-soft);
}
.vsmem-plan-renew strong { color: var(--acct-ink); }
.vsmem-plan .vsmem-note { margin: 14px 0 0; }

/* ---- benefit list ----------------------------------------------------- */
.vsmem-benefits {
  list-style: none;
  margin: 8px 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.vsmem-benefits li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}
/* The tick is decorative; the benefit text carries the meaning, so it is a
   pseudo-element and never reaches a screen reader as content. */
.vsmem-benefits li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--acct-cyan-hover);
  border-bottom: 2px solid var(--acct-cyan-hover);
  transform: translateY(-50%) rotate(-45deg);
}

/* ---- the ladder shown to a non-member --------------------------------- */
.vsmem-ladder {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 16px;
}
.vsmem-tier {
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.vsmem-tier-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.vsmem-tier-name {
  font-family: var(--acct-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--acct-ink);
}
.vsmem-tier-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--acct-ink);
  white-space: nowrap;
}
.vsmem-tier-per { font-size: 13px; font-weight: 400; color: var(--acct-ink-mute); }
.vsmem-tier-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}
/* The auto-renewal disclosure. Deliberately NOT --acct-ink-mute: a legally
   required disclosure is not fine print, and it sits directly above the CTA. */
.vsmem-disclose {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--acct-border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--acct-ink-soft);
}

/* ---- cancel / resume -------------------------------------------------- */
.vsmem-actions { margin: 4px 0 0; }
.vsmem-actions-sub {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-ink-mute);
  max-width: 52ch;
}

/* ---- points ----------------------------------------------------------- */
.vsmem-points { margin-top: 4px; }
.vsmem-points-big {
  font-family: var(--acct-display);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  color: var(--acct-ink);
  line-height: 1.1;
}
.vsmem-points-big span { font-size: 16px; font-weight: 400; color: var(--acct-ink-mute); }
.vsmem-points-worth {
  margin-top: 6px;
  font-size: 15px;
  color: var(--acct-ink-soft);
}
.vsmem-points-worth strong { color: var(--acct-ink); }
.vsmem-points-split {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  font-size: 14px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}
.vsmem-points-split span { color: var(--acct-ink); font-weight: 600; }
.vsmem-points-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--acct-ink-mute);
  max-width: 56ch;
}
.vsmem-mult {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--acct-r-pill);
  background: rgba(var(--acct-cyan-rgb), .12);
  color: var(--acct-cyan-hover);
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width: 640px) {
  .vsmem-ladder { grid-template-columns: 1fr; }
  .vsmem-plan { padding: 16px; }
  /* The button already meets --acct-tap via .vsc-acct-btn; full width makes the
     target span the card rather than sit in a corner. */
  .vsmem-actions .vsc-acct-btn { width: 100%; }
}


/* ==== inline #(anonymous) ==== */
.woocommerce-product-gallery{ opacity: 1 !important; }

/* ==== inline #uagb-style-conditional-extension ==== */
@media (min-width: 1025px){body .uag-hide-desktop.uagb-google-map__wrap,body .uag-hide-desktop{display:none !important}}@media (min-width: 768px) and (max-width: 1024px){body .uag-hide-tab.uagb-google-map__wrap,body .uag-hide-tab{display:none !important}}@media (max-width: 767px){body .uag-hide-mob.uagb-google-map__wrap,body .uag-hide-mob{display:none !important}}

/* ==== inline #uagb-style-frontend-13 ==== */
.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}

/* ==== inline #uagb-style-frontend-13 ==== */
.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}

/* ==== inline #vmemcta-retired ==== */

#vmemcta,
#vmemcta.vmemcta-in{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ==== inline #vsc-sidecart-compact-css ==== */

	/* ---------- line items ---------- */
	.vsc-cart-drawer .vsc-cart-item{ align-items:stretch; padding:12px 40px 12px 0; }
	.vsc-cart-drawer .vsc-cart-item-img{ align-self:start; }
	.vsc-cart-drawer .vsc-cart-item-details{ display:flex; flex-direction:column; }
	.vsc-cart-drawer .vsc-cart-item-details h4{
		font-size:14px; line-height:1.25; margin:0 0 2px;
		display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	}
	.vsc-cart-drawer .vsc-cart-item-size{ font-size:11.5px; margin:0 0 4px; }
	.vsc-cart-drawer .vsc-cart-badges{ margin:0 0 6px; }
	.vsc-cart-drawer .vsc-cart-item-bottom{ margin-top:auto; }
	.vsc-cart-drawer .vsc-qty-btn{ min-height:32px; padding:6px 10px; }
	.vsc-cart-drawer .vsc-cart-item-remove{ top:10px; }

	/* ---------- footer: tight, carded ---------- */
	.vsc-cart-drawer .vsc-cart-footer{
		padding:12px 16px 16px !important;
		background:#F5F6F7;
		display:flex; flex-direction:column; gap:9px;
	}

	/* promo: compact toggle + a real ROW -> [ input (x) ] [ Apply ]
	   The x used to be an absolutely-positioned overlay floating on the input, and the
	   room it sat in came from a padding-right that a theme mobile rule fought over
	   (vsc-cart.js ships `.vsc-cart-promo{padding:8px 12px!important}` under 640px).
	   Whichever won, the x had no guaranteed gutter, so on a phone it collided with
	   the border. Layout now does that work instead of coordinates: the field is a
	   flex row, and the ONE variable below feeds both the x's position and the
	   input's reserved padding, so the two can never drift apart again. */
	.vsc-cart-drawer .vsc-cart-promo-toggle{
		padding:4px 2px !important; border-top:none !important;
		font-size:12.5px !important; font-weight:600 !important; color:#475569 !important; gap:7px;
	}
	.vsc-cart-drawer .vsc-cart-promo-toggle svg{ width:14px; height:14px; color:#0EA5E9 !important; }
	.vsc-cart-drawer .vsc-cart-promo-wrap{
		--vsc-promo-x: 28px;              /* single source of truth: x size + input gutter.
		   40 not 32: at 32 the chip was a 32px-wide tap target, under Apple's 44pt
		   guidance. The input's reserved gutter is calc(this + 6px) so it tracks
		   automatically - at 390px that still leaves 170px of text room against a
		   158px longest-measured affiliate code. */
		position:static !important; padding:0 !important; margin:0 !important;
	}
	.vsc-cart-drawer .vsc-promo-row{ display:flex; align-items:stretch; gap:8px; }
	.vsc-cart-drawer .vsc-promo-field{ position:relative; flex:1 1 auto; min-width:0; }

	/* the input: padding-right reserves exactly the x's lane. !important on BOTH
	   breakpoints -- a non-important mobile override cannot beat an important
	   desktop one, which is the bug this replaces. */
	.vsc-cart-drawer .vsc-cart-promo{
		box-sizing:border-box !important; width:100% !important; display:block !important;
		margin:0 !important;
		padding:10px calc(var(--vsc-promo-x) + 16px) 10px 13px !important;
		border:1px solid #E5EAF0 !important; border-radius:10px; font-size:13px !important;
		/* 44px, NOT 42. A pre-existing global rule
		   @media(max-width:900px){button{min-height:44px!important}} forces the x and
		   Apply to 44px; an <input> is not matched by it and kept its intrinsic 42px.
		   align-items:stretch then made the FIELD 44 while the input stayed 42, so the
		   absolutely-centred x centred on the field and hung 2px below the input's
		   rounded border. Matching 44 here makes every item in the row one height, so
		   the x centres on a box identical to the input and the bottoms all align. */
		height:44px !important; line-height:1.2 !important;
	}
	.vsc-cart-drawer .vsc-cart-promo:focus{ border-color:#0EA5E9 !important; outline:none !important; }
	/* iOS renders its own clear affordance on some inputs; ours is the only one. */
	.vsc-cart-drawer .vsc-cart-promo::-webkit-search-cancel-button,
	.vsc-cart-drawer .vsc-cart-promo::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
	.vsc-cart-drawer .vsc-cart-promo-msg{ margin-top:5px !important; }

	/* the x: clears the typed code. Deliberately quiet -- it is a utility, not an
	   action, so it must never compete with Apply.
	   THREE things were making it read as a chunky overlapping box:
	     1. it was not square. `width:40px` but the site's global
	        @media(max-width:900px){button{min-height:44px!important}} forced the
	        height to 44, so it painted a 40x44 rounded rectangle. Beaten here with a
	        higher-specificity min-height:0 + explicit height.
	     2. it carried a filled #EEF2F6 background at rest, which on a white input
	        reads as a second, overlapping control rather than an affordance.
	     3. the glyph was the `&times;` CHARACTER, whose optical centre shifts with
	        the font -- it never sat true in its box. It is a stroked SVG now, drawn
	        on the same 2px round-cap grid as the drawer's tag and shipping icons, so
	        it belongs to the same icon family as the rest of the cart.
	   Visually 28px; the tap target is restored to full height by an invisible
	   expanded hit area (::after), so subtle does NOT mean hard to hit. */
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close{
		position:absolute; top:50%; transform:translateY(-50%); right:8px;
		width:var(--vsc-promo-x) !important; height:var(--vsc-promo-x) !important;
		min-height:0 !important; min-width:0 !important;
		border:none; background:transparent; color:#94A3B8;
		border-radius:7px; padding:0; cursor:pointer; z-index:2;
		display:flex; align-items:center; justify-content:center;
		transition:background .15s ease, color .15s ease, opacity .15s ease;
		opacity:.55;
	}
	/* invisible, larger hit region so a 28px glyph is still a 44px-tall target */
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close::after{
		content:''; position:absolute; top:-8px; right:-8px; bottom:-8px; left:-6px;
	}
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close svg{
		width:11px; height:11px; display:block; pointer-events:none;
	}
	/* wakes up once there is something to clear */
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close.is-active{ opacity:1; color:#64748B; }
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close:hover{
		background:#F1F5F9; color:#0EA5E9; opacity:1;
	}
	.vsc-cart-drawer .vsc-promo-field .vsc-promo-close:active{ background:#E2E8F0; }

	/* Apply: the whole point. Brand cyan pill, same height as the field, never
	   shrinks below a tappable target. */
	.vsc-cart-drawer .vsc-promo-apply{
		flex:0 0 auto; min-width:82px; height:44px; padding:0 18px;
		border:none; border-radius:10px; cursor:pointer;
		background:#0EA5E9; color:#fff; font-family:inherit;
		font-size:13px; font-weight:700; letter-spacing:.2px;
		display:flex; align-items:center; justify-content:center;
		transition:background .15s ease, opacity .15s ease;
	}
	.vsc-cart-drawer .vsc-promo-apply:hover{ background:#0284C7; }
	.vsc-cart-drawer .vsc-promo-apply:active{ transform:translateY(1px); }
	.vsc-cart-drawer .vsc-promo-apply[disabled]{ opacity:.6; cursor:default; }

	/* phones: keep the 44px tap target, just tighten the type */
	@media (max-width:640px){
		.vsc-cart-drawer .vsc-cart-promo{ font-size:16px !important; }  /* >=16px stops iOS zoom-on-focus */
		.vsc-cart-drawer .vsc-promo-apply{ min-width:76px; padding:0 14px; font-size:12.5px; }
		.vsc-cart-drawer .vsc-promo-row{ gap:7px; }
	}

	/* subtotal card */
	.vsc-cart-drawer .vsc-cart-totals{
		background:#fff; border:1px solid #E5EAF0; border-radius:12px; padding:12px 14px;
	}
	.vsc-cart-drawer .vsc-cart-subtotal-row{ margin:0 !important; font-size:14px !important; font-weight:600; }
	.vsc-cart-drawer .vsc-cart-subtotal-amount{ font-size:15px; }
	.vsc-cart-drawer .vsc-cart-discount-row{ margin:5px 0 0 !important; font-size:12.5px !important; }

	/* free-shipping incentive card (soft cyan) */
	.vsc-cart-drawer .vsc-cart-shipping-progress{
		margin:0 !important; background:#F0F9FF; border:1px solid #BAE6FD;
		border-radius:12px; padding:11px 13px;
	}
	.vsc-cart-drawer .vsc-cart-shipping-label{ font-size:12px; margin-bottom:8px; line-height:1.35; }
	.vsc-cart-drawer .vsc-cart-progress-track{ height:5px; background:#D6ECFB; }
	.vsc-cart-drawer .vsc-cart-progress-fill{ background:#0EA5E9; }

	/* checkout CTA: full-width, prominent, pill kept (brand button language) */
	.vsc-cart-drawer .vsc-cart-checkout,
	.vsc-cart-drawer .vsc-cart-checkout:link,
	.vsc-cart-drawer .vsc-cart-checkout:visited{
		margin:1px 0 0 !important; width:100% !important;
		padding:15px 24px !important; font-size:13px !important; letter-spacing:0.4px;
	}
	.vsc-cart-drawer .vsc-cart-checkout:active{ transform:translateY(1px); }

	@media (max-width:480px){
		.vsc-cart-drawer .vsc-cart-item-details{ min-height:72px; }
	}
	

/* ==== inline #wp-custom-css ==== */

/* === Shop by Category — clean white-bg cards (smaller + wrapping labels) === */
  html body .cat-slider-wrap { position: relative !important; padding: 8px 52px !important; }
  html body .cat-arrow { position:absolute !important; top:50% !important; transform:translateY(-50%) !important; width:36px !important; height:36px !important; border-radius:50% !important; background:#F1F5F9 !important; border:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; color:#64748B !important; cursor:pointer !important; z-index:5 !important; }
  html body .cat-arrow:hover { background:#E2E8F0 !important; color:#0EA5E9 !important; }
  html body .cat-arrow svg { width:15px !important; height:15px !important; }
  html body .cat-arrow-prev { left:0 !important; } html body .cat-arrow-next { right:0 !important; }
  html body .cat-slider { display:flex !important; gap:14px !important; overflow-x:auto !important; scroll-behavior:smooth !important; scrollbar-width:none !important; padding:12px 4px !important; align-items:stretch !important; }
  html body .cat-slider::-webkit-scrollbar { display:none !important; }
  html body .cat-slider::before { content:none !important; }
  html body .cat-slider .cat-chip, html body .cat-slider-wrap .cat-chip {
    flex:0 0 158px !important; width:158px !important; min-width:158px !important; max-width:158px !important;
    background:#FFFFFF !important; border:1px solid #E5E7EB !important; border-radius:14px !important; padding:16px 12px 14px !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important;
    text-align:center !important; text-decoration:none !important;
    font-size:13px !important; font-weight:700 !important; color:#0A1F3D !important; line-height:1.25 !important;
    white-space:normal !important; overflow-wrap:break-word !important; word-break:break-word !important; hyphens:auto !important; overflow:hidden !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; box-sizing:border-box !important; gap:0 !important;
  }
  html body .cat-slider .cat-chip:hover { transform:translateY(-3px) !important; box-shadow:0 8px 20px rgba(15,23,42,.06) !important; border-color:#CBD5E1 !important; }
  html body .cat-slider .cat-chip::before {
    content:"" !important; display:block !important; width:100% !important; aspect-ratio:1/1 !important; margin:0 0 12px !important; border-radius:12px !important;
    background-color:#FFFFFF !important; background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; flex:0 0 auto !important;
  }
  html body .cat-slider .cat-chip[href*="product_cat=healing-recovery"]::before  { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/dgmPm4RdHO4zgiTAAR829_recovery-research.png") !important; }
  html body .cat-slider .cat-chip[href*="product_cat=weight-loss"]::before        { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/J4ND8mGkDPrmWuyVHtW7Y_metabolic-research.png") !important; }
  html body .cat-slider .cat-chip[href*="product_cat=cognitive-focus"]::before    { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/ME9DsVleA5kTKBVwqa_7M_nootropic-research.png") !important; }
  html body .cat-slider .cat-chip[href*="product_cat=anti-aging"]::before         { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/bynIb_Egztn_fpOUcXtDR_longevity-research.png") !important; }
  html body .cat-slider .cat-chip[href*="product_cat=growth-performance"]::before { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/4vbB0PboZfs-Ls1KMUdUz_growth-performance.png") !important; }
  html body .cat-slider .cat-chip[href*="product_cat=skin-tanning"]::before       { background-image:url("https://v3b.fal.media/files/b/0a9c14b8/pMZH9g8mg_z-WsCVE3MMZ_skin-pigmentation.png") !important; }
  @media (max-width:768px){
    html body .cat-slider-wrap { padding:8px 10px !important; }
    html body .cat-arrow { display:none !important; }
    html body .cat-slider { gap:10px !important; padding:4px 4px 12px !important; scroll-snap-type:x mandatory !important; }
    html body .cat-slider .cat-chip { flex:0 0 138px !important; width:138px !important; min-width:138px !important; max-width:138px !important; padding:14px 10px 12px !important; scroll-snap-align:start !important; font-size:12px !important; }
  }


/* ==== inline #vsv3-mobile ==== */

@media (max-width: 900px) {
    /* Kill the theme's existing hamburger + mobile menu — we replace with our own clean drawer */
    .mobile-toggle { display: none !important; }
    .main-nav .nav-links,
    .main-nav .nav-links.mobile-open { display: none !important; }

    /* Header: logo left, action icons right + clean hamburger */
    .nav-inner {
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .nav-logo-official { flex: 0 0 auto !important; }
    .nav-logo-official img,
    .nav-logo-official svg { max-height: 36px !important; max-width: 130px !important; height: auto !important; width: auto !important; }
    .nav-actions {
        display: flex !important;
        gap: 2px !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    .nav-action-btn { width: 36px !important; height: 36px !important; padding: 6px !important; }
    .nav-action-btn svg { width: 20px !important; height: 20px !important; }
    .cart-count { font-size: 9px !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; }

    /* Mobile header — kill any inline nav links bleeding into the bar.
       Only logo + 4 icons (search, profile, cart, burger) should appear. */
    .main-nav .nav-links a,
    .main-nav .nav-links li,
    .main-nav .menu-item,
    .main-nav .menu > li,
    .nav-inner > nav,
    .nav-inner > ul { display: none !important; }

    /* Action icons — uniform sizing, consistent spacing in MA order:
       search → profile → cart → hamburger */
    .nav-actions { gap: 4px !important; }
    .nav-action-btn,
    .nav-actions a,
    .nav-actions button:not(.vsv3-hamburger) {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #0A1F3D !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    .nav-action-btn svg,
    .nav-actions a svg,
    .nav-actions button svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
        color: #0A1F3D !important;
    }

    /* Cart count badge — MA style: small red dot top-right of cart icon */
    .cart-count,
    .nav-actions .cart-count,
    .nav-actions a[href*="cart"] .count {
        position: absolute !important;
        top: 2px !important; right: 2px !important;
        min-width: 16px !important; height: 16px !important;
        padding: 0 4px !important;
        font-size: 10px !important; font-weight: 700 !important;
        line-height: 16px !important;
        background: #EF4444 !important; color: #FFFFFF !important;
        border-radius: 50% !important;
        text-align: center !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }

    /* Hamburger button — clean 3-line, RIGHT-most position */
    .vsv3-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 38px !important;
        height: 38px !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-left: 2px !important;
        position: relative !important;
        z-index: 1000 !important;
        flex-shrink: 0 !important;
        order: 99 !important;  /* always last in flex order */
    }
    .vsv3-hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #0A1F3D !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    .vsv3-hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) !important; }
    .vsv3-hamburger.is-open span:nth-child(2) { opacity: 0 !important; }
    .vsv3-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) !important; }

    /* Drawer overlay */
    .vsv3-drawer-overlay {
        position: fixed !important; inset: 0 !important;
        background: rgba(8,28,52,0.55) !important; backdrop-filter: blur(4px) !important;
        z-index: 9990 !important; opacity: 0 !important; visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    .vsv3-drawer-overlay.is-open { opacity: 1 !important; visibility: visible !important; }

    /* Slide-out drawer from LEFT */
    .vsv3-drawer {
        position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 320px !important; max-width: 85vw !important;
        background: #FFFFFF !important; z-index: 9999 !important;
        transform: translateX(-100%) !important; transition: transform 0.3s ease !important;
        box-shadow: 4px 0 30px rgba(0,0,0,0.18) !important;
        overflow-y: auto !important; display: flex !important; flex-direction: column !important;
    }
    .vsv3-drawer.is-open { transform: translateX(0) !important; }

    /* Drawer header — solid Ventra navy (matches site header) */
    .vsv3-drawer-header {
        padding: 22px 22px !important;
        background: #0A1F3D !important;
        color: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    .vsv3-drawer-header .vsv3-menu-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        letter-spacing: 0.2px !important;
    }
    .vsv3-drawer-header img { display: none !important; }  /* hide old logo */
    .vsv3-drawer-close {
        width: 32px !important; height: 32px !important;
        background: transparent !important;
        color: #FFFFFF !important; border: 0 !important;
        font-size: 24px !important; cursor: pointer !important; line-height: 1 !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        padding: 0 !important;
    }
    .vsv3-drawer-close:hover { opacity: 0.7 !important; }

    /* Drawer nav rows — clean MA-pattern list with thin dividers, big tap targets */
    .vsv3-drawer nav { padding: 0 !important; flex: 1 !important; }
    .vsv3-drawer nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 24px !important;
        color: #0A1F3D !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 17px !important;
        border-bottom: 1px solid #F1F5F9 !important;
        transition: background 0.15s !important;
    }
    .vsv3-drawer nav a:active,
    .vsv3-drawer nav a:hover {
        background: #F8FAFC !important;
        color: #0EA5E9 !important;
    }
    .vsv3-drawer-footer {
        padding: 18px 24px !important; border-top: 1px solid #E2E8F0 !important;
        background: #F8FAFC !important; text-align: center !important;
    }
    .vsv3-drawer-footer a { display: block !important; color: #0EA5E9 !important; font-size: 13px !important; text-decoration: none !important; margin-bottom: 6px !important; }

    /* GENERAL */
    body { font-size: 14px !important; }

    /* Hero — proportional, clean (matches Modern Aminos compact feel) */
    .hero-v5 { padding: 40px 0 50px !important; min-height: auto !important; }
    .hero-v5 .h5-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 18px !important; }
    .hero-v5 .h5-badge { font-size: 11px !important; padding: 6px 12px !important; }
    .hero-v5 .h5-title { font-size: 32px !important; line-height: 1.1 !important; }
    .hero-v5 .h5-subtitle { font-size: 16px !important; }
    .hero-v5 .h5-desc { font-size: 13px !important; line-height: 1.6 !important; }
    .hero-v5 .h5-buttons { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
    .hero-v5 .h5-btn-primary,
    .hero-v5 .h5-btn-outline { width: 100% !important; justify-content: center !important; padding: 14px !important; font-size: 14px !important; }
    .hero-v5 .h5-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .hero-v5 .h5-stat { padding: 12px 6px !important; }
    .hero-v5 .h5-stat strong { font-size: 18px !important; }
    .hero-v5 .h5-stat span { font-size: 9px !important; }
    .hero-v5 .h5-review { padding: 16px !important; }
    .hero-v5 .h5-quote { font-size: 13px !important; }

    /* Trust bar — match desktop grey ribbon — minimal 1px borders, clean */
    .trust-bar { padding: 28px 12px !important; background: #F1F3F5 !important; border-top: 1px solid #CFD5DB !important; border-bottom: 1px solid #CFD5DB !important; }
    .trust-bar .trust-grid {
        display: block !important;
        position: relative !important;
        height: 100px !important;
        overflow: hidden !important;
        padding: 0 !important;
        max-width: 100% !important;
        background: transparent !important;
        border: 0 !important;
    }
    .trust-bar .trust-item {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        opacity: 0 !important;
        transition: opacity 0.6s ease !important;
        text-align: center !important;
        padding: 0 24px !important;
    }
    .trust-bar .trust-item.vsv3-active { opacity: 1 !important; }
    .trust-bar .trust-badge-img { width: 36px !important; height: 36px !important; }
    .trust-bar .trust-item h4 { font-size: 14px !important; margin: 4px 0 2px !important; font-weight: 700 !important; }
    .trust-bar .trust-item p { font-size: 11px !important; margin: 0 !important; line-height: 1.4 !important; color: #475569 !important; }

    /* === UNIVERSAL PRODUCT CARD — 2-col grid (Modern Aminos style)
       High-specificity selectors using html body[class] to beat theme CSS. */
    html body .product-grid,
    html body .product-grid-8,
    html body .product-grid-4,
    html body .product-grid-3,
    html body .shop-product-grid,
    html body #shopGrid,
    html body.woocommerce ul.products,
    html body .woocommerce ul.products,
    html body .related ul.products,
    html body .up-sells ul.products,
    html body .related .product-grid,
    html body .up-sells .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .product-card,
    html body .shop-product-grid > .product-card,
    html body .shop-product-grid > div,
    html body #shopGrid > .product-card,
    html body #shopGrid > div,
    html body.woocommerce ul.products li.product,
    html body .related .product-card,
    html body .up-sells .product-card {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(15,23,42,0.08) !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        float: none !important;
    }
    .product-card:hover { border-color: rgba(14,165,233,0.3) !important; box-shadow: 0 4px 12px rgba(14,165,233,0.08) !important; }

    /* Image area — square, image fills.
       Scoped tightly to product cards only. .product-canvas is the
       homepage section wrapper and must NOT get this style. */
    .product-card .product-image,
    .shop-product-grid .product-image,
    #shopGrid .product-image,
    body.woocommerce ul.products li.product .product-image {
        background: #F8FAFC !important;
        border-radius: 10px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .product-card img,
    .product-card .product-image img,
    body.woocommerce ul.products li.product img {
        width: 92% !important;
        max-width: 92% !important;
        height: 92% !important;
        max-height: 92% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .product-info { padding: 4px 4px 0 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
    .product-card h3,
    .product-card .product-name,
    .product-card .product-title,
    body.woocommerce ul.products li.product h2,
    body.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        min-height: 36px !important;
        padding: 6px 4px 4px !important;
        margin: 0 !important;
    }
    .product-card .price,
    .product-card .product-price,
    body.woocommerce ul.products li.product .price {
        font-size: 14px !important;
        padding: 0 4px 8px !important;
        margin: 0 !important;
    }
    .product-card .button,
    .product-card .add-to-cart-btn,
    body.woocommerce ul.products li.product .button {
        padding: 10px !important;
        font-size: 12px !important;
        min-height: 38px !important;
        margin-top: auto !important;
    }

    /* Why Ventra → stack 1-col, clean card */
    .why-grid { grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 16px !important; }
    .why-card { padding: 18px !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; }
    .why-photo { height: 160px !important; border-radius: 10px !important; }

    /* Test grid → stack, clean card */
    .test-grid { grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 16px !important; }
    .test-card { padding: 18px !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 14px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; }
    .test-photo { height: 160px !important; border-radius: 10px !important; }

    /* QR section → stack, image proportional */
    .qr-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 16px !important; }
    .qr-section img,
    .qr-visual img { max-width: 100% !important; height: auto !important; }
    .qr-content { padding: 0 !important; }

    /* Section padding overall */
    section.section { padding: 40px 0 !important; }
    .section-header { padding: 0 16px 24px !important; }
    .section-header h2,
    .section-title { font-size: 24px !important; line-height: 1.2 !important; }
    .section-header p { font-size: 13px !important; }

    /* Inner Circle */
    .inner-circle { padding: 40px 0 !important; }
    .inner-circle .container { padding: 0 16px !important; }
    .inner-circle .ic-h2 { font-size: 26px !important; }
    .inner-circle .ic-p { font-size: 14px !important; }
    .inner-circle .ic-perks { grid-template-columns: 1fr !important; gap: 10px !important; }
    .inner-circle .ic-form { flex-direction: column !important; border-radius: 16px !important; padding: 10px !important; gap: 8px !important; }
    .inner-circle .ic-input { width: 100% !important; }
    .inner-circle .ic-submit { width: 100% !important; border-radius: 12px !important; padding: 14px !important; }

    /* === SHOP SIDEBAR → mobile: hide, replaced by Filter dropdown button === */
    .shop-sidebar,
    .shop-layout > aside,
    aside.shop-sidebar { display: none !important; }
    .shop-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }
    .shop-top-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E2E8F0 !important;
        gap: 10px !important;
    }
    .shop-top-bar p,
    .shop-top-bar #productCount { font-size: 13px !important; color: #475569 !important; margin: 0 !important; }

    /* Filter button (injected by JS) */
    .vsv3-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #FFFFFF !important;
        color: #0A1F3D !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 999px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }
    .vsv3-filter-btn svg { width: 14px !important; height: 14px !important; }
    .vsv3-filter-btn .vsv3-filter-count {
        background: #0EA5E9 !important; color: #FFFFFF !important;
        font-size: 11px !important; padding: 2px 6px !important; border-radius: 999px !important;
        margin-left: 2px !important;
    }
    .vsv3-filter-count:empty { display: none !important; }

    /* Bottom-sheet filter panel (injected by JS) */
    .vsv3-filter-panel {
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        max-height: 85vh !important;
        background: #FFFFFF !important;
        border-radius: 18px 18px 0 0 !important;
        z-index: 99998 !important;
        transform: translateY(100%) !important;
        transition: transform 0.28s ease !important;
        box-shadow: 0 -10px 40px rgba(8,28,52,0.18) !important;
        display: flex !important; flex-direction: column !important;
        overflow: hidden !important;
    }
    .vsv3-filter-panel.is-open { transform: translateY(0) !important; }
    .vsv3-filter-overlay {
        position: fixed !important; inset: 0 !important;
        background: rgba(8,28,52,0.5) !important;
        backdrop-filter: blur(3px) !important;
        z-index: 99997 !important;
        opacity: 0 !important; visibility: hidden !important;
        transition: opacity 0.2s !important;
    }
    .vsv3-filter-overlay.is-open { opacity: 1 !important; visibility: visible !important; }
    .vsv3-filter-panel-header {
        padding: 18px 20px !important;
        border-bottom: 1px solid #F1F5F9 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .vsv3-filter-panel-header h3 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: #0A1F3D !important; }
    .vsv3-filter-panel-close {
        background: transparent !important; border: 0 !important; padding: 0 !important;
        font-size: 24px !important; line-height: 1 !important; color: #64748B !important;
        width: 32px !important; height: 32px !important; cursor: pointer !important;
    }
    .vsv3-filter-panel-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 18px 20px 8px !important;
    }
    .vsv3-filter-panel-section { margin-bottom: 22px !important; }
    .vsv3-filter-panel-section h4 {
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #64748B !important;
        margin: 0 0 10px !important;
    }
    .vsv3-filter-panel-section label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        color: #0A1F3D !important;
        cursor: pointer !important;
    }
    .vsv3-filter-panel-section label.is-checked {
        background: #F0F9FF !important;
        border-color: #0EA5E9 !important;
        color: #0EA5E9 !important;
        font-weight: 600 !important;
    }
    .vsv3-filter-panel-section label input { margin-right: 10px !important; accent-color: #0EA5E9 !important; }
    .vsv3-filter-panel-footer {
        display: flex !important;
        gap: 10px !important;
        padding: 14px 20px 22px !important;
        border-top: 1px solid #F1F5F9 !important;
        background: #FFFFFF !important;
    }
    .vsv3-filter-panel-footer button {
        flex: 1 1 50% !important;
        padding: 14px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        cursor: pointer !important;
        border: 0 !important;
    }
    .vsv3-filter-clear { background: #F1F5F9 !important; color: #475569 !important; }
    .vsv3-filter-apply { background: #0EA5E9 !important; color: #FFFFFF !important; }

    /* Hide the in-page sort/heading clutter */
    .shop-filter-heading,
    .filter-section-title { display: none !important; }

    /* === COA PAGE — exact product card mirror === */
    html body .coa-layout,
    html body .coa-grid-wrap {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }
    html body .coa-sidebar { display: none !important; }
    html body .coa-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .coa-card {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(15,23,42,0.08) !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    html body .coa-card-image,
    html body .coa-card .coa-card-image {
        background: #F8FAFC !important;
        border-radius: 10px !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    html body .coa-card-image img {
        width: 92% !important;
        max-width: 92% !important;
        height: 92% !important;
        max-height: 92% !important;
        object-fit: contain !important;
    }
    html body .coa-card-info {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        padding: 4px 4px 0 !important;
    }
    html body .coa-card-info h3,
    html body .coa-card-info .coa-card-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        margin: 0 0 8px !important;
        padding: 6px 4px 4px !important;
        min-height: 36px !important;
        text-align: left !important;
    }
    html body .coa-card .coa-button,
    html body .coa-card a.btn,
    html body .coa-card .button,
    html body .coa-card a:not(.coa-card-title) {
        display: block !important;
        width: 100% !important;
        margin: auto 0 0 !important;
        padding: 12px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        background: #FFFFFF !important;
        color: #0EA5E9 !important;
        border: 1px solid #0EA5E9 !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        min-height: 40px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    /* === SINGLE PRODUCT PAGE — Modern Aminos mobile layout === */
    /* Force single-column. Theme rule is `body.single-product .product.type-product`
       (0,3,1) — we beat it with 0,5,3 + !important. */
    html body.single-product.woocommerce-page .woocommerce div.product.type-product,
    html body.single-product .woocommerce div.product.type-product,
    html body.single-product .product.type-product,
    html body.single-product .woocommerce div.product,
    html body.single-product div.product,
    html body.single-product .product,
    html body.woocommerce-page .woocommerce div.product.type-product,
    html body.woocommerce-page .woocommerce div.product,
    html body.woocommerce-page div.product {
        display: block !important;
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        padding: 0 16px !important;
        margin: 0 0 24px !important;
        gap: 0 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        float: none !important;
    }
    /* Gallery: 100% width, full bleed, NO float, FIRST in DOM order */
    html body.single-product .woocommerce div.product.type-product .woocommerce-product-gallery,
    html body.single-product .product.type-product .woocommerce-product-gallery,
    html body.single-product .woocommerce div.product .woocommerce-product-gallery,
    html body.single-product div.product .woocommerce-product-gallery,
    html body.single-product .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        position: relative !important;
        order: 1 !important;
        display: block !important;
    }
    /* Sale badge wrapping span — also first */
    html body.single-product .woocommerce div.product > .onsale {
        order: 0 !important;
    }
    /* Summary: 100% width, no float, BELOW gallery */
    html body.single-product .woocommerce div.product.type-product .summary,
    html body.single-product .woocommerce div.product.type-product .entry-summary,
    html body.single-product .product.type-product .summary,
    html body.single-product .product.type-product .entry-summary,
    html body.single-product .woocommerce div.product .summary,
    html body.single-product .woocommerce div.product .entry-summary,
    html body.single-product div.product .summary,
    html body.single-product div.product .entry-summary,
    html body.single-product .summary,
    html body.single-product .entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        order: 2 !important;
        display: block !important;
    }
    /* Unified sale badge — green pill (matches best-sellers .sale-badge gradient) */
    html body .onsale,
    html body.single-product .onsale,
    html body .related .onsale,
    html body .up-sells .onsale,
    html body .upsells .onsale,
    html body.woocommerce ul.products li.product .onsale,
    html body .wc-block-grid__product-onsale {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
        background-color: #10B981 !important;
        color: #FFFFFF !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-radius: 999px !important;
        padding: 6px 14px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        line-height: 1 !important;
        z-index: 5 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(16,185,129,0.25) !important;
        border: 0 !important;
        text-decoration: none !important;
    }
    /* On the BIG single-product gallery, scale up slightly */
    html body.single-product .woocommerce-product-gallery .onsale,
    html body.single-product div.product > .onsale {
        font-size: 12px !important;
        padding: 7px 18px !important;
        top: 14px !important;
        left: 14px !important;
    }
    /* Gallery container — rounded square */
    html body.single-product .woocommerce-product-gallery {
        width: 100% !important;
        margin: 0 0 16px !important;
        float: none !important;
        opacity: 1 !important;
    }
    html body.single-product .woocommerce-product-gallery__wrapper {
        background: #F1F5F9 !important;
        border-radius: 16px !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin: 0 !important;
        position: relative !important;
    }
    html body.single-product .woocommerce-product-gallery__wrapper > div,
    html body.single-product .woocommerce-product-gallery__image {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body.single-product .woocommerce-product-gallery__image img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    /* Thumbnail strip below main image */
    html body.single-product .flex-control-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        margin: 0 0 18px !important;
        list-style: none !important;
        scrollbar-width: none !important;
    }
    html body.single-product .flex-control-thumbs::-webkit-scrollbar { display: none !important; }
    html body.single-product .flex-control-thumbs li {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
        margin: 0 !important;
    }
    html body.single-product .flex-control-thumbs li img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: #F1F5F9 !important;
        border-radius: 10px !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    /* Summary block (title, price, variations, ATC) */
    html body.single-product .summary,
    html body.single-product .entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 32px !important;
        float: none !important;
    }
    /* Category pill above title */
    html body.single-product .summary .posted_in,
    html body.single-product .product-category-pill {
        display: inline-block !important;
        background: #F0F9FF !important;
        color: #0EA5E9 !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        margin: 0 0 12px !important;
        border: 0 !important;
    }
    html body.single-product .summary .posted_in a {
        color: #0EA5E9 !important;
        text-decoration: none !important;
    }
    /* Product title */
    html body.single-product .product_title {
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        line-height: 1.2 !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }
    /* Short description */
    html body.single-product .woocommerce-product-details__short-description {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #475569 !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }
    html body.single-product .woocommerce-product-details__short-description p {
        margin: 0 0 8px !important;
    }
    /* Price */
    html body.single-product .summary > .price,
    html body.single-product .summary p.price {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        margin: 0 0 22px !important;
        line-height: 1.2 !important;
    }
    html body.single-product .summary .price del {
        color: #94A3B8 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        margin-right: 8px !important;
    }
    html body.single-product .summary .price ins {
        text-decoration: none !important;
        background: transparent !important;
        color: #0A1F3D !important;
    }
    /* Variations table — stack rows */
    html body.single-product .variations { display: block !important; width: 100% !important; margin: 0 0 14px !important; }
    html body.single-product .variations tbody { display: block !important; }
    html body.single-product .variations tr { display: block !important; margin-bottom: 14px !important; }
    html body.single-product .variations th.label,
    html body.single-product .variations td.label {
        display: block !important;
        width: auto !important;
        padding: 0 0 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #0A1F3D !important;
        text-align: left !important;
        background: transparent !important;
    }
    html body.single-product .variations td.value {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
    }
    html body.single-product .variations select {
        width: 100% !important;
        padding: 14px 18px !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        color: #0EA5E9 !important;
        background: #FFFFFF !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
    }
    html body.single-product .variations .reset_variations {
        font-size: 12px !important;
        color: #94A3B8 !important;
        margin-top: 6px !important;
        display: inline-block !important;
    }

    /* Quantity — outlined pill with -/+ */
    html body.single-product .quantity,
    html body.single-product form.cart .quantity {
        display: flex !important;
        width: 100% !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 14px 0 18px !important;
        background: #FFFFFF !important;
        align-items: center !important;
    }
    html body.single-product .quantity input.qty {
        flex: 1 1 auto !important;
        text-align: center !important;
        border: 0 !important;
        padding: 14px 0 !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #0A1F3D !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }
    html body.single-product .quantity .qty-btn,
    html body.single-product .quantity .qty-minus,
    html body.single-product .quantity .qty-plus,
    html body.single-product .quantity button {
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 52px !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #0EA5E9 !important;
        cursor: pointer !important;
    }

    /* Add to cart button — full-width pill */
    html body.single-product .single_add_to_cart_button,
    html body.single-product button.single_add_to_cart_button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 18px !important;
        background: #0EA5E9 !important;
        color: #FFFFFF !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        margin: 0 0 18px !important;
        line-height: 1.2 !important;
        min-height: 52px !important;
    }
    html body.single-product .single_add_to_cart_button:disabled,
    html body.single-product .single_add_to_cart_button.disabled {
        background: #CBD5E1 !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    /* Hide order metadata cruft */
    html body.single-product .product_meta { display: none !important; }
    html body.single-product .single-product-meta { display: none !important; }

    /* Tabs (Description / Additional Info / Disclaimer) — equal-width, scrollable on overflow */
    html body.single-product .woocommerce-tabs {
        margin: 0 -16px !important;
        padding: 0 !important;
        clear: both !important;
    }
    html body.single-product .woocommerce-tabs ul.tabs,
    html body.single-product .woocommerce-tabs .wc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
        gap: 0 !important;
        background: transparent !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }
    html body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; }
    html body.single-product .woocommerce-tabs ul.tabs::before,
    html body.single-product .woocommerce-tabs ul.tabs::after { display: none !important; }
    html body.single-product .woocommerce-tabs ul.tabs li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        text-align: center !important;
    }
    html body.single-product .woocommerce-tabs ul.tabs li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #94A3B8 !important;
        text-decoration: none !important;
        border-bottom: 2px solid transparent !important;
        white-space: normal !important;
        word-break: normal !important;
        line-height: 1.25 !important;
        height: 100% !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }
    html body.single-product .woocommerce-tabs ul.tabs li.active a {
        color: #0EA5E9 !important;
        border-bottom: 2px solid #0EA5E9 !important;
    }
    html body.single-product .woocommerce-tabs .panel {
        padding: 18px 16px 24px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: #475569 !important;
        margin: 0 !important;
    }

    /* Related / Up-sells — enforce identical product-card aesthetic so they
       can't render stretched. 2-col grid, square 1:1 image area. */
    html body.single-product .related,
    html body.single-product .up-sells,
    html body.single-product .related.products,
    html body.single-product .up-sells.products {
        padding: 0 16px !important;
        margin: 24px 0 !important;
    }
    html body.single-product .related.products ul.products,
    html body.single-product .up-sells.products ul.products,
    html body.single-product .upsells.products ul.products,
    html body.single-product .up-sells.upsells.products ul.products,
    html body.single-product .related ul.products,
    html body.single-product .up-sells ul.products,
    html body.single-product .upsells ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }
    html body.single-product .related.products ul.products li.product,
    html body.single-product .up-sells.products ul.products li.product,
    html body.single-product .upsells.products ul.products li.product,
    html body.single-product .up-sells.upsells.products ul.products li.product,
    html body.single-product .related ul.products li.product,
    html body.single-product .up-sells ul.products li.product,
    html body.single-product .upsells ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(15,23,42,0.08) !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        list-style: none !important;
        float: none !important;
        position: relative !important;
    }
    /* JS wraps the related/upsell <img> in .vs-rel-img.product-image —
       these styles make it match the best-seller card image area EXACTLY. */
    html body.single-product .related li.product .vs-rel-img,
    html body.single-product .up-sells li.product .vs-rel-img,
    html body.single-product .upsells li.product .vs-rel-img,
    html body.single-product li.product .vs-rel-img {
        background: #F8FAFC !important;
        border-radius: 10px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        position: relative !important;
        flex: 0 0 auto !important;
    }
    html body.single-product .vs-rel-img img {
        width: 80% !important;
        max-width: 80% !important;
        height: 80% !important;
        max-height: 80% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* The image inside related cards — wrap in a square container */
    html body.single-product .related ul.products li.product > a,
    html body.single-product .up-sells ul.products li.product > a,
    html body.single-product .related ul.products li.product .woocommerce-LoopProduct-link,
    html body.single-product .up-sells ul.products li.product .woocommerce-LoopProduct-link {
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none !important;
        color: inherit !important;
        width: 100% !important;
    }
    html body.single-product .related ul.products li.product img,
    html body.single-product .up-sells ul.products li.product img,
    html body.single-product .up-sells.upsells.products ul.products li.product img,
    html body.single-product .related ul.products li.product .attachment-woocommerce_thumbnail,
    html body.single-product .up-sells ul.products li.product .attachment-woocommerce_thumbnail {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain !important;
        background: #F8FAFC !important;
        border-radius: 10px !important;
        padding: 8% !important;
        box-sizing: border-box !important;
        margin: 0 0 10px !important;
        float: none !important;
    }
    /* Sale badge inside related cards — uses unified .onsale block above */
    html body.single-product .related ul.products li.product,
    html body.single-product .up-sells ul.products li.product,
    html body.single-product .upsells ul.products li.product {
        position: relative !important;
    }
    /* Title — LEFT aligned, 13px, fixed 2-line height for card alignment */
    html body.single-product .related ul.products li.product .woocommerce-loop-product__title,
    html body.single-product .up-sells ul.products li.product .woocommerce-loop-product__title,
    html body.single-product .upsells ul.products li.product .woocommerce-loop-product__title,
    html body.single-product .related ul.products li.product h2,
    html body.single-product .up-sells ul.products li.product h2,
    html body.single-product .upsells ul.products li.product h2 {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        line-height: 1.3 !important;
        text-align: left !important;
        margin: 10px 4px 4px !important;
        padding: 0 !important;
        min-height: 34px !important;
        max-height: 34px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-word !important;
    }
    /* Price — LEFT aligned, 13px, FIXED HEIGHT so all cards align identically */
    html body.single-product .related ul.products li.product .price,
    html body.single-product .up-sells ul.products li.product .price,
    html body.single-product .upsells ul.products li.product .price {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        text-align: left !important;
        margin: 0 4px 12px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        display: block !important;
        min-height: 18px !important;
        max-height: 18px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    /* Sale strikethrough price — same compact size */
    html body.single-product .related ul.products li.product .price del,
    html body.single-product .up-sells ul.products li.product .price del,
    html body.single-product .upsells ul.products li.product .price del {
        font-size: 12px !important;
        color: #94A3B8 !important;
        margin-right: 6px !important;
        font-weight: 500 !important;
    }
    html body.single-product .related ul.products li.product .price ins,
    html body.single-product .up-sells ul.products li.product .price ins,
    html body.single-product .upsells ul.products li.product .price ins {
        text-decoration: none !important;
        color: #0A1F3D !important;
        font-weight: 700 !important;
    }
    /* Card minimum height — so all 4 align identically regardless of title/price width */
    html body.single-product .related ul.products li.product,
    html body.single-product .up-sells ul.products li.product,
    html body.single-product .upsells ul.products li.product {
        min-height: 280px !important;
    }
    /* Button — SLIM clean pill, ICON + TEXT INLINE (matches desktop "View Product") */
    html body.single-product .related ul.products li.product .button,
    html body.single-product .up-sells ul.products li.product .button,
    html body.single-product .upsells ul.products li.product .button {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: auto 0 0 !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
        background: #FFFFFF !important;
        color: #0EA5E9 !important;
        border: 1px solid #0EA5E9 !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        min-height: 0 !important;
        height: 38px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    html body.single-product li.product .button:hover,
    html body.single-product li.product .button:focus,
    html body.single-product li.product .button:active,
    html body.single-product li.product .button:visited {
        text-decoration: none !important;
    }
    html body.single-product li.product .button .vs-cart-ico {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 14px !important;
        height: 14px !important;
        text-decoration: none !important;
    }
    html body.single-product li.product .button .vs-cart-ico svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
    }
    html body.single-product li.product .button .vs-btn-txt {
        display: inline-block !important;
        line-height: 1 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
    html body.single-product .related.products > h2,
    html body.single-product .up-sells.products > h2,
    html body.single-product .related > h2,
    html body.single-product .up-sells > h2 {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        padding: 0 !important;
        margin: 0 0 14px !important;
    }

    /* Page headers */
    .page-header { padding: 36px 16px 28px !important; min-height: 130px !important; }
    .page-header h1 { font-size: 26px !important; }
    .page-header p { font-size: 13px !important; padding: 0 10px !important; }

    /* Footer */
    .site-footer .footer-grid,
    .footer .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 20px !important; }

    /* My Account — MA-style full-width stacked cards */
    body.woocommerce-account.logged-in .woocommerce,
    body.woocommerce-account.logged-in .woocommerce-account-container {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 16px 12px 32px !important;
    }
    /* Navigation as stacked white cards */
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        float: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        list-style: none !important;
        overflow: hidden !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 20px !important;
        color: #0A1F3D !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        line-height: 1 !important;
        border: 0 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li::after,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li::before,
    html body.woocommerce-account .woocommerce-MyAccount-navigation li a::after,
    html body.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
        display: none !important;
        content: none !important;
        background: none !important;
        border: 0 !important;
    }
    /* Hide any inline SVG/icon arrow chevrons inside nav links */
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > svg,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > i,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > .arrow,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > .chevron,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > .icon-arrow,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > .dashicons-arrow-right-alt2,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li a > .dashicons {
        display: none !important;
    }
    /* Active state — OUTLINE only, text stays readable (no solid blue fill) */
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
        background: #FFFFFF !important;
        border-color: #0EA5E9 !important;
        border-width: 2px !important;
        box-shadow: 0 0 0 1px #0EA5E9 inset, 0 1px 2px rgba(15,23,42,0.04) !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        color: #0EA5E9 !important;
        font-weight: 600 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
        display: none !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover { border-color: #0EA5E9 !important; }

    /* Billing + Shipping address cards — fix awkward text wrapping */
    body.woocommerce-account .woocommerce-Addresses,
    body.woocommerce-account .u-columns.col2-set {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    body.woocommerce-account .woocommerce-Address {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 14px !important;
        padding: 18px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        box-sizing: border-box !important;
    }
    /* Address title — title on top, Edit link below.
       Critical: padding-bottom + overflow:visible + line-height 1.5 so the
       descender of "g" in "Shipping" / "Billing" never gets clipped. */
    html body.woocommerce-account .woocommerce-Address-title {
        display: block !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        line-height: 1.5 !important;
        overflow: visible !important;
    }
    html body.woocommerce-account .woocommerce-Address-title h3,
    html body.woocommerce-account .woocommerce-Address h3 {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 4px 0 6px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        color: #0A1F3D !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    html body.woocommerce-account .woocommerce-Address-title .edit,
    html body.woocommerce-account .woocommerce-Address-title > a {
        display: inline-block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0EA5E9 !important;
        text-decoration: none !important;
        background: #F0F9FF !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        line-height: 1.2 !important;
    }
    body.woocommerce-account .woocommerce-Address address {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #475569 !important;
        font-style: normal !important;
        margin: 0 !important;
    }
    /* Logout — keep visually distinct from nav */
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 16px !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        color: #EF4444 !important;
        font-weight: 600 !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::after { display: none !important; }

    /* Content panel below the nav cards */
    body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-top: 8px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
    .woocommerce-MyAccount-content .woocommerce-Addresses,
    .woocommerce-MyAccount-content .u-columns.col2-set { grid-template-columns: 1fr !important; }

    /* Age gate stacks */
    #vsAgeGateCustom .vs-ag-card { grid-template-columns: 1fr !important; max-width: 540px !important; }
    #vsAgeGateCustom .vs-ag-left { padding: 32px 24px 20px !important; border-right: 0 !important; }
    #vsAgeGateCustom .vs-ag-right { padding: 24px !important; }

    /* Search dropdown */
    .vsv3-search-overlay,
    #vsSearchPanel,
    #vsv3SearchOverlay { width: calc(100vw - 16px) !important; right: 8px !important; left: auto !important; top: 70px !important; }

    /* Touch targets */
    .button, button, .btn, input[type="submit"] { min-height: 44px !important; }

    /* iOS feel — no text select on chrome */
    .nav-inner, .vsv3-drawer-header, .vsv3-hamburger { -webkit-user-select: none !important; user-select: none !important; }
}
@media (min-width: 901px) {
    .vsv3-hamburger, .vsv3-drawer, .vsv3-drawer-overlay { display: none !important; }
}


/* ==== inline #ventra-hero-mobile-center ==== */

    @media (max-width: 768px) {
      /* Universal sanity: nothing inside .hero-v5 can overflow */
      .hero-v5,
      .hero-v5 * {
        box-sizing: border-box !important;
        max-width: 100% !important;
      }
      /* Section itself: symmetric padding, no horizontal scroll */
      .hero-v5 {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: hidden !important;
      }
      /* All inner wrappers: full width, centered, no margins */
      .hero-v5 .container,
      .hero-v5 .h5-grid,
      .hero-v5 .h5-left,
      .hero-v5 .h5-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        position: relative !important;
      }
      /* Grid into single centered column */
      .hero-v5 .h5-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 1.5rem !important;
      }
      /* Left + right columns: stack, fully centered */
      .hero-v5 .h5-left,
      .hero-v5 .h5-right {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* Every text element: center text + center horizontally */
      .hero-v5 .h5-title,
      .hero-v5 .h5-subtitle,
      .hero-v5 .h5-desc,
      .hero-v5 .h5-author,
      .hero-v5 .h5-quote,
      .hero-v5 .h5-badge {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      /* Flex rows (buttons, stats, stars): center their items */
      .hero-v5 .h5-buttons,
      .hero-v5 .h5-stats,
      .hero-v5 .h5-stars,
      .hero-v5 .h5-review {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        text-align: center !important;
        gap: 0.75rem !important;
      }
      .hero-v5 .h5-stats {
        gap: 1rem !important;
      }
      /* Each stat block: center the strong + label */
      .hero-v5 .h5-stat {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      /* Divi overrides (in case Divi wraps the hero in et_pb_* classes) */
      .hero-v5 .et_pb_column,
      .hero-v5 .et_pb_row,
      .hero-v5 .et_pb_section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        float: none !important;
      }
    }
    

/* ==== inline #vsv3-nuclear-fix ==== */

/* ══════════════════════════════════════════════
   LOGO — HARD LOCK for custom-logo upload (581×248 source)
   ══════════════════════════════════════════════ */
.main-nav .nav-logo-official,
.main-nav-v5 .nav-logo-official,
.nav-logo-official {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    max-height: 40px !important;
    max-width: 200px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.main-nav .nav-logo-official .custom-logo-link,
.main-nav-v5 .nav-logo-official .custom-logo-link,
.nav-logo-official .custom-logo-link,
.nav-logo-official > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    max-height: 40px !important;
    max-width: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Target ALL possible logo image selectors with brute force */
.main-nav img.custom-logo,
.main-nav-v5 img.custom-logo,
.nav-logo-official img.custom-logo,
.nav-logo-official img,
.main-nav .nav-logo-official img,
.main-nav-v5 .nav-logo-official img,
img.custom-logo {
    height: 36px !important;
    max-height: 36px !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 180px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════
   NAV CONTAINER — restore 3-column grid
   ══════════════════════════════════════════════ */
.main-nav,
.main-nav-v5 {
    background: #FFFFFF !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
}
.main-nav .nav-inner,
.main-nav-v5 .nav-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 6px 28px !important;
    min-height: 56px !important;
}

/* ══════════════════════════════════════════════
   NAV LINKS — centered tabs
   ══════════════════════════════════════════════ */
.main-nav .nav-links,
.main-nav-v5 .nav-links,
#navLinks {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
}
.main-nav .nav-links > a,
.main-nav-v5 .nav-links > a,
.nav-links > a,
.main-nav .nav-links .nav-dropdown > a,
#navLinks > a,
#navLinks .nav-dropdown > a {
    color: #0A1F3D !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    padding: 8px 0 !important;
    transition: color 0.15s !important;
    background: transparent !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.nav-links a:hover { color: #38BDF8 !important; }

/* Hide any stray badges/bubbles on nav links */
.nav-links > a .dropdown-arrow,
.nav-links .nav-dropdown > a .dropdown-arrow {
    display: inline !important;
    font-size: 10px !important;
    margin-left: 4px !important;
}

/* ══════════════════════════════════════════════
   NAV ACTIONS (search + account + cart) — restore icons
   ══════════════════════════════════════════════ */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.nav-action-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 8px !important;
    cursor: pointer !important;
    color: #0A1F3D !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}
.nav-action-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #0A1F3D !important;
    fill: none !important;
}
.nav-action-btn .cart-count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: #38BDF8 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════════════════
   DROPDOWN MENU polish
   ══════════════════════════════════════════════ */
.nav-dropdown { position: relative !important; }
.nav-dropdown .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    background: #FFFFFF !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    min-width: 220px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 50 !important;
}
.nav-dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}
.dropdown-menu a {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    color: #0A1F3D !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    transition: background 0.15s !important;
}
.dropdown-menu a:hover {
    background: #F0F7FC !important;
    color: #38BDF8 !important;
}

/* ══════════════════════════════════════════════
   MOBILE — stack nav
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .main-nav .nav-inner,
    .main-nav-v5 .nav-inner {
        grid-template-columns: auto 1fr auto !important;
        padding: 6px 14px !important;
        gap: 12px !important;
    }
    .main-nav .nav-links,
    .main-nav-v5 .nav-links {
        display: none !important;
    }
    .main-nav .nav-links.mobile-open,
    .main-nav-v5 .nav-links.mobile-open {
        display: flex !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        background: #FFFFFF !important;
        padding: 20px !important;
        flex-direction: column !important;
        gap: 4px !important;
        z-index: 100 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
    }
    .nav-logo-official img,
    img.custom-logo {
        height: 30px !important;
        max-height: 30px !important;
        max-width: 150px !important;
    }
}
@media (min-width: 901px) {
    .mobile-toggle { display: none !important; }
}


/* ==== inline #vsv3-master-ui ==== */

      :root {
        --vs-navy: #0F1D2E;
        --vs-navy-hover: #1a3450;
        --vs-img-gray: #e8e8e8;
        --vs-border: #e0e0e0;
        --vs-near-black: #1a1a1a;
        --vs-text-gray: #999;
      }

      html body .Search, html body button.Search, html body a.Search,
      html body .header-search button[type="submit"],
      html body form[role="search"] button[type="submit"] { display: none !important; }

      html body .product-card .btn,
      html body .product-card a.btn,
      html body a.btn:not(.vsv3-frt-card-arrow),
      html body button.btn:not(.vsv3-frt-card-arrow),
      html body .button:not(.single_add_to_cart_button),
      html body .add_to_cart_button,
      html body .checkout-button,
      html body a.button,
      html body .view-all,
      html body .view-all-faqs,
      html body .vsv3-frt-view-all,
      html body a[href*="faq"].btn,
      html body .see-all-peptides {
        background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none
   !important;
        color: var(--vs-navy) !important; border: 2px solid var(--vs-navy) !important;
        border-radius: 50px !important; padding: 10px 22px !important;
        font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
        display: inline-flex !important; align-items: center !important; justify-content: center
  !important;
        gap: 8px !important; white-space: nowrap !important; box-shadow: none !important;
  transition: all 0.2s !important;
      }
      html body .product-card .btn:hover, html body a.btn:hover, html body button.btn:hover,
      html body .button:hover, html body .add_to_cart_button:hover, html body
  .checkout-button:hover,
      html body a.button:hover, html body .view-all:hover, html body .vsv3-frt-view-all:hover {
        background: var(--vs-navy) !important; background-color: var(--vs-navy) !important; color:
  #FFFFFF !important;
      }

      html body h1 .accent, html body h2 .accent, html body h3 .accent,
      html body .accent, html body em.accent, html body span.accent,
      html body .text-accent, html body .highlight-blue, html body .nav-logo .accent {
        color: var(--vs-navy) !important;
      }

      html body.single-product .single_add_to_cart_button {
        background: var(--vs-navy) !important; background-color: var(--vs-navy) !important;
        color: #FFFFFF !important; border: 2px solid var(--vs-navy) !important;
        border-radius: 50px !important; padding: 14px 28px !important;
        font-size: 14px !important; font-weight: 600 !important;
      }

      html body .product-card {
        background: #FFFFFF !important; border-radius: 12px !important;
        border: 1px solid var(--vs-border) !important; overflow: hidden !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        display: flex !important; flex-direction: column !important; padding: 0 !important;
      }
      html body .product-card .product-image {
        width: 100% !important; aspect-ratio: 1/1 !important;
        background: var(--vs-img-gray) !important; border-radius: 10px 10px 0 0 !important;
        display: flex !important; align-items: center !important; justify-content: center
  !important;
        padding: 0 !important; margin: 0 !important; overflow: hidden !important;
      }
      html body .product-card .product-image a {
        display: flex !important; align-items: center !important; justify-content: center
  !important;
        width: 100% !important; height: 100% !important;
      }
      html body .product-card .product-image img {
        width: 85% !important; height: 85% !important; max-width: 85% !important; max-height: 85%
  !important;
        object-fit: contain !important; object-position: center !important; margin: auto !important;
        transform: scale(1.25) !important; background: transparent !important;
      }
      html body .product-card .product-info {
        padding: 10px 10px 12px 10px !important; display: flex !important; flex-direction: column
  !important;
        align-items: center !important; text-align: center !important;
      }
      html body .product-card .product-name, html body .product-card .product-name a {
        font-size: 14px !important; font-weight: 700 !important; color: var(--vs-navy) !important;
        text-decoration: none !important; line-height: 1.3 !important; margin: 0 !important;
        display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient:
  vertical !important; overflow: hidden !important;
      }
      html body .product-card .product-price,
      html body .product-card .product-price .woocommerce-Price-amount,
      html body .product-card .product-price bdi {
        font-size: 14px !important; font-weight: 700 !important; color: var(--vs-near-black)
  !important;
        margin: 6px 0 8px 0 !important;
      }
      html body .product-card .btn { width: 100% !important; height: 40px !important; padding: 0
  16px !important; }

      html body .shop-product-grid { display: grid !important; grid-template-columns: repeat(4, 1fr)
   !important; gap: 14px !important; }
      @media (max-width: 1024px) { html body .shop-product-grid { grid-template-columns: repeat(3,
  1fr) !important; } }
      @media (max-width: 640px) {
        html body .shop-product-grid { grid-template-columns: 1fr 1fr !important; gap: 10px
  !important; padding: 0 12px !important; }
      }
      /* === single-product gallery rules MOVED to snippet 67 (consolidation) === */
      html body .vsv3-frt-section { margin: 32px 0 !important; padding: 0 !important; position:
  relative !important; }
      html body .vsv3-frt-header {
        display: flex !important; align-items: flex-start !important; justify-content: space-between
   !important;
        gap: 16px !important; margin: 0 0 16px 0 !important; padding: 0 12px !important;
      }
      html body .vsv3-frt-title-group { display: flex !important; flex-direction: column !important;
   gap: 2px !important; }
      html body .vsv3-frt-title { font-weight: 800 !important; font-size: 20px !important; color:
  var(--vs-near-black) !important; margin: 0 !important; }
      html body .vsv3-frt-subtitle { font-size: 13px !important; color: #888 !important; margin: 0 
  !important; }

      html body .vsv3-frt-scroll {
        display: flex !important; overflow-x: auto !important; gap: 12px !important;
        padding: 4px 12px 10px 12px !important; -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; scroll-snap-type: x mandatory !important;
      }
      html body .vsv3-frt-scroll::-webkit-scrollbar { display: none !important; height: 0
  !important; }

      html body .vsv3-frt-card {
        flex: 0 0 175px !important; width: 175px !important; scroll-snap-align: start !important;
        background: #FFFFFF !important; border: 1px solid var(--vs-border) !important;
        border-radius: 12px !important; overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
      }
      @media (min-width: 1024px) { html body .vsv3-frt-card { flex: 0 0 calc(25% - 9px) !important;
  width: auto !important; max-width: 280px !important; } }

      html body .vsv3-frt-card-image {
        width: 100% !important; height: 150px !important; background: var(--vs-img-gray) !important;
        border-radius: 10px 10px 0 0 !important; padding: 8px !important; box-sizing: border-box
  !important;
        display: flex !important; align-items: center !important; justify-content: center
  !important; overflow: hidden !important;
      }
      @media (min-width: 1024px) { html body .vsv3-frt-card-image { height: auto !important;
  aspect-ratio: 1/1 !important; } }
      html body .vsv3-frt-card-image img {
        width: 80% !important; height: 80% !important; max-width: 80% !important; max-height: 80%
  !important;
        object-fit: contain !important; transform: scale(1.25) !important; margin: auto !important;
  background: transparent !important;
      }
      html body .vsv3-frt-card-info { padding: 10px !important; display: flex !important;
  flex-direction: column !important; gap: 2px !important; }
      html body .vsv3-frt-card-name {
        font-weight: 700 !important; font-size: 13px !important; color: var(--vs-navy) !important;
        text-decoration: none !important; white-space: nowrap !important; overflow: hidden
  !important; text-overflow: ellipsis !important;
      }
      html body .vsv3-frt-card-category { font-size: 11px !important; color: var(--vs-text-gray)
  !important; margin-top: 2px !important; }
      html body .vsv3-frt-card-price-row { display: flex !important; align-items: center !important;
   justify-content: space-between !important; margin-top: 6px !important; gap: 8px !important; }
      html body .vsv3-frt-card-price,
      html body .vsv3-frt-card-price .woocommerce-Price-amount,
      html body .vsv3-frt-card-price bdi { font-weight: 700 !important; font-size: 13px !important;
  color: var(--vs-near-black) !important; }
      html body .vsv3-frt-card-arrow {
        flex-shrink: 0 !important; width: 28px !important; height: 28px !important;
        border-radius: 50% !important; background: var(--vs-navy) !important; color: #FFFFFF 
  !important;
        display: inline-flex !important; align-items: center !important; justify-content: center
  !important; text-decoration: none !important;
      }
      html body .vsv3-frt-card-arrow svg { width: 14px !important; height: 14px !important; }

      @media (max-width: 768px) {
        body.single-product .product .summary { padding: 0 16px !important; }
        body.single-product .product_title, body.single-product h1.entry-title { font-size: 24px
  !important; margin: 12px 0 8px 0 !important; }
        body.single-product .summary .price { font-size: 20px !important; }
        body.single-product .summary p { font-size: 14px !important; line-height: 1.5 !important; }
      }
      

/* ==== inline #vsv3-modern-style ==== */

@keyframes vsv3-mol-drift {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.08) translate(-2%, -1%); }
}
@keyframes vsv3-fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED MOLECULAR BG — hero + inner circle + ALL inner page headers
   Deeper Ventra logo blue, faded molecular pattern
   ═══════════════════════════════════════════════════════════════ */
.hero-v5,
.inner-circle,
.page-header,
body.woocommerce .page-header,
body.woocommerce.post-type-archive-product .page-header,
body.woocommerce.tax-product_cat .page-header,
body.woocommerce.woocommerce-account .page-header,
body.page .page-header,
body.single-post .page-header {
    position: relative !important;
    background-color: #081C34 !important;
    color: #F0F9FF !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.hero-v5::before,
.inner-circle::before,
.page-header::before,
body.woocommerce .page-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url('/media/themes/ventra-sciences-v3/assets/images/molecular-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.09 !important;
    z-index: 0 !important;
    animation: vsv3-mol-drift 60s ease-in-out infinite alternate !important;
    pointer-events: none !important;
    display: block !important;
    filter: hue-rotate(-10deg) saturate(0.8) !important;
}
.hero-v5::after,
.inner-circle::after,
.page-header::after,
body.woocommerce .page-header::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(180deg, rgba(8,28,52,0.82) 0%, rgba(8,28,52,0.88) 60%, rgba(8,28,52,0.95) 100%),
        radial-gradient(ellipse at 25% 20%, rgba(14,165,233,0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 75%, rgba(56,189,248,0.22) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(14,165,233,0.18) 0%, transparent 60%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
}
.hero-v5 > .container,
.hero-v5 > .dsm-overlay + .container,
.inner-circle > .container,
.inner-circle > .ic-container,
.page-header > .container {
    position: relative !important;
    z-index: 2 !important;
}
.hero-v5 > .dsm-overlay,
.inner-circle .dsm-overlay { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE HEADERS — molecular bg matches hero (handled above)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
    padding: 90px 0 70px !important;
    min-height: 240px !important;
    border: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
.page-header > .container {
    text-align: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
}
.page-header h1,
.page-header .page-title,
.page-header .woocommerce-products-header__title {
    color: #FFFFFF !important;
    font-size: 48px !important;
    font-weight: 400 !important;
    letter-spacing: -0.022em !important;
    margin: 0 0 12px !important;
    text-align: center !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
}
.page-header p,
.page-header .term-description,
.page-header .archive-description {
    color: rgba(203,213,225,0.92) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO V5 (homepage only)
   ═══════════════════════════════════════════════════════════════ */
.hero-v5 {
    padding: 100px 0 120px !important;
    min-height: 640px !important;
}
.hero-v5 .h5-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
.hero-v5 .h5-left { animation: vsv3-fade-in-up 0.9s ease-out !important; }
.hero-v5 .h5-right { animation: vsv3-fade-in-up 1s ease-out 0.15s both !important; }
.hero-v5 .h5-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: rgba(56,189,248,0.12) !important;
    border: 1px solid rgba(56,189,248,0.3) !important;
    border-radius: 999px !important;
    color: #7DD3FC !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(8px) !important;
    margin-bottom: 28px !important;
}
.hero-v5 .h5-title {
    font-size: 64px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 18px !important;
}
.hero-v5 .h5-subtitle {
    font-size: 24px !important;
    color: #CBD5E1 !important;
    margin: 0 0 22px !important;
    font-style: italic !important;
}
.hero-v5 .h5-desc {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: rgba(203,213,225,0.85) !important;
    margin: 0 0 34px !important;
    max-width: 520px !important;
}
.hero-v5 .h5-btn-primary {
    background: #0EA5E9 !important;
    color: #FFFFFF !important;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 8px 24px rgba(14,165,233,0.35) !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hero-v5 .h5-btn-primary:hover { background: #38BDF8 !important; transform: translateY(-2px) !important; }
.hero-v5 .h5-btn-outline {
    background: rgba(255,255,255,0.05) !important;
    color: #F0F9FF !important;
    padding: 14px 30px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hero-v5 .h5-review {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(56,189,248,0.2) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-bottom: 18px !important;
    backdrop-filter: blur(10px) !important;
}
.hero-v5 .h5-stars { color: #FBBF24 !important; font-size: 18px !important; letter-spacing: 2px !important; margin-bottom: 14px !important; }
.hero-v5 .h5-quote { color: #E2E8F0 !important; font-size: 15px !important; line-height: 1.6 !important; font-style: italic !important; margin: 0 0 14px !important; }
.hero-v5 .h5-author { color: rgba(203,213,225,0.7) !important; font-size: 13px !important; }
.hero-v5 .h5-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.hero-v5 .h5-stat {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(56,189,248,0.15) !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    text-align: center !important;
}
.hero-v5 .h5-stat strong { display: block !important; color: #38BDF8 !important; font-size: 30px !important; font-weight: 800 !important; margin-bottom: 6px !important; }
.hero-v5 .h5-stat span { color: rgba(203,213,225,0.6) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* ═══════════════════════════════════════════════════════════════
   INNER CIRCLE — pill form, molecular bg, matches local
   ═══════════════════════════════════════════════════════════════ */
.inner-circle { padding: 110px 0 !important; }
.inner-circle .ic-container { max-width: 720px !important; margin: 0 auto !important; text-align: center !important; padding: 0 20px !important; }
.inner-circle .ic-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 18px !important; background: rgba(56,189,248,0.12) !important; border: 1px solid rgba(56,189,248,0.3) !important; border-radius: 999px !important; color: #7DD3FC !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 22px !important; }
.inner-circle .ic-h2 { font-size: 48px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -1px !important; color: #FFFFFF !important; margin: 0 0 18px !important; }
.inner-circle .ic-h2 .accent-glow { background: linear-gradient(135deg, #38BDF8, #7DD3FC) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
.inner-circle .ic-p { font-size: 16px !important; line-height: 1.7 !important; color: rgba(203,213,225,0.85) !important; max-width: 540px !important; margin: 0 auto 36px !important; }
.inner-circle .ic-perks { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; margin-bottom: 40px !important; text-align: left !important; }
.inner-circle .ic-perk { display: flex !important; gap: 12px !important; align-items: flex-start !important; padding: 16px !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(56,189,248,0.15) !important; border-radius: 10px !important; backdrop-filter: blur(8px) !important; }
.inner-circle .ic-perk svg { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; color: #38BDF8 !important; margin-top: 2px !important; }
.inner-circle .ic-perk-title { font-size: 13px !important; font-weight: 600 !important; color: #F0F9FF !important; margin-bottom: 2px !important; }
.inner-circle .ic-perk-sub { font-size: 12px !important; color: rgba(203,213,225,0.65) !important; line-height: 1.4 !important; }
.inner-circle .ic-form { display: flex !important; gap: 10px !important; max-width: 480px !important; margin: 0 auto !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(56,189,248,0.25) !important; border-radius: 999px !important; padding: 6px !important; backdrop-filter: blur(12px) !important; }
.inner-circle .ic-form:focus-within { border-color: #38BDF8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important; }
.inner-circle .ic-input { flex: 1 !important; background: transparent !important; border: 0 !important; outline: none !important; padding: 12px 18px !important; color: #F0F9FF !important; font-size: 14px !important; }
.inner-circle .ic-input::placeholder { color: rgba(203,213,225,0.5) !important; }
.inner-circle .ic-submit { background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; padding: 12px 28px !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; white-space: nowrap !important; }
.inner-circle .ic-fine { font-size: 12px !important; color: rgba(203,213,225,0.55) !important; margin-top: 20px !important; }

/* ═══════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — kill sidebar HARD, force 2-col, related full-width
   ═══════════════════════════════════════════════════════════════ */
body.single-product { background: #FFFFFF !important; }
/* NUCLEAR sidebar kill — every known sidebar/widget selector */
body.single-product #secondary,
body.single-product .secondary,
body.single-product #sidebar,
body.single-product .sidebar,
body.single-product .sidebar-primary,
body.single-product .sidebar-main,
body.single-product .widget-area,
body.single-product aside.sidebar,
body.single-product aside.widget-area,
body.single-product aside[id*="sidebar"],
body.single-product aside[class*="sidebar"],
body.single-product aside[class*="widget"],
body.single-product .ast-content-sidebar-wrap > aside,
body.single-product .site-content > aside,
body.single-product main + aside,
body.single-product #main + aside,
body.single-product .col-sidebar,
body.single-product .has-sidebar aside,
body.single-product .widgets-sidebar,
body.single-product .wp-block-group:has(.wp-block-search):has(.wp-block-page-list),
body.single-product .widget_pages,
body.single-product .widget_search,
body.single-product .widget_archive,
body.single-product .widget_categories,
body.single-product .widget_recent_entries,
body.single-product .widget_meta { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }
/* Force the page wrapper full-width on single product */
body.single-product .ast-container,
body.single-product .site-content,
body.single-product .site-content > .container,
body.single-product .site-content > .ast-container,
body.single-product #primary,
body.single-product .content-area,
body.single-product .ast-content-sidebar-wrap,
body.single-product .row,
body.single-product .has-sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    grid-template-columns: 1fr !important;
    flex: 1 1 100% !important;
}
body.single-product main,
body.single-product #main,
body.single-product .site-main,
body.single-product .woocommerce-main {
    background: #FFFFFF !important;
    padding: 40px 20px 80px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
}
body.single-product div.product,
body.single-product .product.type-product,
body.single-product .woocommerce div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 60px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto 80px !important;
    width: 100% !important;
    float: none !important;
}
/* Description / tabs / related must span full width, not stack inside the grid columns */
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > .related,
body.single-product div.product > .up-sells,
body.single-product .woocommerce-tabs,
body.single-product .related,
body.single-product .up-sells {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
}
/* Sale badge — SMALL ROUNDED-RECT BOX in top-left corner, GREEN, applied site-wide.
   Targets BOTH WC .onsale AND custom theme .sale-badge */
.onsale,
span.onsale,
.sale-badge,
span.sale-badge,
.product .sale-badge,
.bs-card .sale-badge,
li.product .sale-badge,
ul.products li.product .sale-badge,
.woocommerce .onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce-page .onsale,
body .onsale,
body .sale-badge,
body.home .onsale,
body.home .sale-badge,
body.page .onsale,
body.archive .onsale,
body.single-product .onsale,
body.single-product .sale-badge,
body.woocommerce ul.products li.product .onsale,
.products li.product .onsale,
.product .onsale,
ul.products .onsale,
.wc-block-grid__product .onsale,
.wc-block-grid__product-onsale,
.product-loop-card .onsale,
.bestseller-card .onsale,
.featured-product .onsale,
.product-card .onsale {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    padding: 7px 14px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important;
    border: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    font-style: normal !important;
}
/* Ensure parent containers anchor the banner to the top of the card */
.product,
li.product,
.products li.product,
.wc-block-grid__product,
.product-card,
.bestseller-card,
.product-loop-card,
.featured-product,
.woocommerce ul.products li.product { position: relative !important; overflow: hidden !important; }
/* On the single product gallery, anchor to the gallery card not the whole product grid */
body.single-product .product { overflow: visible !important; }
/* === Modern Aminos gallery rules MOVED to snippet 67 (consolidation) === */
body.single-product .product > .summary .onsale { display: none !important; }
body.single-product .product .flex-control-thumbs {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}
body.single-product .product .flex-control-thumbs li {
    width: 80px !important;
    height: 80px !important;
    margin: 0 !important;
}
body.single-product .product .flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #F5F8FC !important;
    padding: 8px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    opacity: 0.75 !important;
}
body.single-product .product .flex-control-thumbs .flex-active,
body.single-product .product .flex-control-thumbs img:hover {
    opacity: 1 !important;
    border-color: #38BDF8 !important;
}
body.single-product .woocommerce-product-gallery__trigger { display: none !important; }

/* Summary right side */
body.single-product .product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
body.single-product .product .product_title {
    font-size: 36px !important;
    color: #0A1F3D !important;
    font-weight: 800 !important;
    margin: 0 0 16px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
}
body.single-product .product .summary .price {
    font-size: 30px !important;
    color: #0A1F3D !important;
    font-weight: 800 !important;
    margin: 16px 0 24px !important;
}
body.single-product .product .summary .price del {
    opacity: 0.45 !important;
    font-size: 20px !important;
    margin-right: 10px !important;
    color: #6B7A94 !important;
    font-weight: 500 !important;
}
body.single-product .product .summary .price ins,
body.single-product .product .summary .price .amount {
    text-decoration: none !important;
    color: #0A1F3D !important;
}
body.single-product .product .woocommerce-product-details__short-description {
    color: #475569 !important;
    line-height: 1.7 !important;
    margin: 0 0 28px !important;
    font-size: 15px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

/* Variations — pill buttons (Modern Aminos style) */
body.single-product .product form.cart .variations {
    margin: 0 0 24px !important;
    border-collapse: collapse !important;
    width: 100% !important;
    display: block !important;
}
body.single-product .product form.cart .variations tbody { display: block !important; width: 100% !important; }
body.single-product .product form.cart .variations tr { display: block !important; width: 100% !important; }
body.single-product .product form.cart .variations th,
body.single-product .product form.cart .variations td {
    padding: 8px 0 !important;
    border: 0 !important;
    vertical-align: middle !important;
    display: block !important;
    width: 100% !important;
}
body.single-product .product form.cart .variations th {
    font-weight: 700 !important;
    color: #0A1F3D !important;
    padding-right: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}
/* Hide native select once JS has rendered pills */
body.single-product .product form.cart .variations select.vsv3-pillified { display: none !important; }
body.single-product .product form.cart .variations select {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #0A1F3D !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}
/* Pill container injected by JS */
body.single-product .vsv3-variant-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 6px 0 0 !important;
}
body.single-product .vsv3-variant-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    border: 1.5px solid #0EA5E9 !important;
    background: #FFFFFF !important;
    color: #0EA5E9 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    user-select: none !important;
}
body.single-product .vsv3-variant-pill:hover {
    background: rgba(14,165,233,0.06) !important;
}
body.single-product .vsv3-variant-pill.is-active {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(14,165,233,0.35) !important;
}
body.single-product .product .woocommerce-variation-price { margin: 12px 0 !important; }
body.single-product .product .reset_variations { display: none !important; }

body.single-product .product form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
}
body.single-product .product form.cart .qty {
    padding: 14px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    width: 80px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
body.single-product .product form.cart .single_add_to_cart_button {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(14,165,233,0.35) !important;
    vertical-align: middle !important;
}
body.single-product .product form.cart .single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(14,165,233,0.5) !important;
}
body.single-product .product .product_meta {
    margin-top: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E2E8F0 !important;
    color: #64748B !important;
    font-size: 13px !important;
}
/* View COA button — injected via JS below add-to-cart */
body.single-product .vsv3-view-coa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
    padding: 13px 24px !important;
    background: #FFFFFF !important;
    color: #0EA5E9 !important;
    border: 1.5px solid #0EA5E9 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    width: auto !important;
}
body.single-product .vsv3-view-coa:hover {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(14,165,233,0.32) !important;
}
body.single-product .vsv3-view-coa svg { width: 16px !important; height: 16px !important; }
body.single-product .product .product_meta > span { display: block !important; margin-bottom: 6px !important; }
body.single-product .product .product_meta a { color: #0EA5E9 !important; text-decoration: none !important; }

/* Tabs — wrapped in Modern Aminos style card */
body.single-product .woocommerce-tabs {
    max-width: 1200px !important;
    margin: 32px auto 24px !important;
    padding: 32px 40px 36px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(10,31,61,0.05) !important;
    clear: both !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
}
body.single-product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
    display: flex !important;
    gap: 4px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    background: transparent !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
    padding: 14px 24px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    display: block !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #0EA5E9 !important;
    border-bottom-color: #0EA5E9 !important;
}
body.single-product .woocommerce-tabs .panel {
    color: #475569 !important;
    line-height: 1.75 !important;
    font-size: 15px !important;
    padding: 0 !important;
}

/* Related products — Modern Aminos style */
body.single-product .related.products,
body.single-product .up-sells.products {
    max-width: 1200px !important;
    margin: 16px auto 80px !important;
    padding: 20px 20px 0 !important;
    border-top: 0 !important;
    clear: both !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
}
body.single-product .related.products > h2,
body.single-product .up-sells.products > h2 {
    font-size: 38px !important;
    color: #0A1F3D !important;
    text-align: left !important;
    margin: 0 0 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
}
body.single-product .related.products > h2 .vsv3-rel-title {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
body.single-product .related.products > h2 .accent,
body.single-product .related.products > h2 em {
    color: #0EA5E9 !important;
    font-style: normal !important;
    margin-left: 0 !important;
}
body.single-product .related.products .vsv3-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(14,165,233,0.3) !important;
    transition: all 0.2s !important;
}
body.single-product .related.products .vsv3-view-all:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(14,165,233,0.45) !important;
}
body.single-product .related.products .vsv3-view-all svg {
    width: 16px !important; height: 16px !important;
}
/* Force related + up-sells sections to break out of parent grid + go full width */
body.single-product .related,
body.single-product .related.products,
body.single-product .up-sells,
body.single-product .up-sells.products,
body.single-product .upsells,
body.single-product .upsells.products,
body.single-product section.related,
body.single-product section.up-sells {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}
/* Up-sells — IDENTICAL container as Related Products */
body.single-product .up-sells.products,
body.single-product .upsells.products {
    max-width: 1200px !important;
    margin: 16px auto 30px !important;
    padding: 20px 20px 0 !important;
    border-top: 0 !important;
    clear: both !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    text-align: left !important;
    position: relative !important;
}
body.single-product .up-sells.products > h2,
body.single-product .upsells.products > h2 {
    font-size: 38px !important;
    color: #0A1F3D !important;
    text-align: left !important;
    margin: 0 0 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    display: block !important;
    width: 100% !important;
}
body.single-product .up-sells.products > h2 .vsv3-rel-title,
body.single-product .upsells.products > h2 .vsv3-rel-title {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    white-space: nowrap !important;
}
body.single-product .up-sells.products > h2 .accent,
body.single-product .upsells.products > h2 .accent { color: #0EA5E9 !important; font-style: normal !important; }
body.single-product .up-sells.products ul.products,
body.single-product .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: 1200px !important;
    width: 100% !important;
    justify-content: start !important;
    justify-items: start !important;
    place-content: start !important;
    place-items: start !important;
    text-align: left !important;
}
/* FORCE first up-sell card into column 1 (defeats single-item auto-centering) */
body.single-product .up-sells.products ul.products li.product:first-child,
body.single-product .upsells.products ul.products li.product:first-child {
    grid-column: 1 / 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: start !important;
}
body.single-product .up-sells.products ul.products li.product:nth-child(2) { grid-column: 2 / 3 !important; }
body.single-product .up-sells.products ul.products li.product:nth-child(3) { grid-column: 3 / 4 !important; }
body.single-product .up-sells.products ul.products li.product:nth-child(4) { grid-column: 4 / 5 !important; }
body.single-product .up-sells.products ul.products li.product,
body.single-product .upsells.products ul.products li.product {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    margin: 0 !important;
    border: 1px solid #E2E8F0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 420px !important;
    box-sizing: border-box !important;
}
body.single-product .up-sells.products ul.products li.product img,
body.single-product .upsells.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #EEF2F7 !important;
    padding: 24px !important;
    margin: 0 0 16px !important;
    box-sizing: border-box !important;
}
body.single-product .up-sells.products ul.products li.product h2,
body.single-product .up-sells.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells.products ul.products li.product h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0A1F3D !important;
    text-align: center !important;
    height: 44px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    margin: 4px 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
body.single-product .up-sells.products ul.products li.product .price,
body.single-product .upsells.products ul.products li.product .price {
    font-size: 16px !important;
    color: #0A1F3D !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 0 14px !important;
    display: block !important;
}
body.single-product .up-sells.products ul.products li.product .button,
body.single-product .upsells.products ul.products li.product .button {
    width: 100% !important;
    padding: 13px 16px !important;
    background: transparent !important;
    color: #0EA5E9 !important;
    border: 1.5px solid #0EA5E9 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}
body.single-product .up-sells.products ul.products li.product .button:hover,
body.single-product .upsells.products ul.products li.product .button:hover {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}
body.single-product .related.products ul.products,
body.single-product .up-sells.products ul.products,
body.single-product ul.products.columns-3,
body.single-product ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: 1200px !important;
    width: 100% !important;
    float: none !important;
}
body.single-product .related.products ul.products::before,
body.single-product .related.products ul.products::after { content: none !important; display: none !important; }
body.single-product .related.products ul.products li.product,
body.single-product .up-sells.products ul.products li.product {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.25s !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 420px !important;
    box-sizing: border-box !important;
}
body.single-product .related.products ul.products li.product > a:not(.button),
body.single-product .up-sells.products ul.products li.product > a:not(.button) {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    width: 100% !important;
}
body.single-product .related.products ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
    border-color: rgba(56,189,248,0.3) !important;
}
body.single-product .related.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #EEF2F7 !important;
    padding: 24px !important;
    margin: 0 0 16px !important;
    display: block !important;
    box-sizing: border-box !important;
}
/* Fixed-height title (2 lines max) so price/button align across all cards */
body.single-product .related.products ul.products li.product h2,
body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
    color: #0A1F3D !important;
    font-weight: 700 !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.35 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
/* Fixed-height price block so del + ins both line up */
body.single-product .related.products ul.products li.product .price {
    font-size: 16px !important;
    color: #0A1F3D !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    text-align: center !important;
    display: block !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
}
body.single-product .related.products ul.products li.product .price del,
body.single-product .related.products ul.products li.product .price ins {
    text-decoration: none !important;
    display: inline !important;
    margin: 0 4px !important;
}
body.single-product .related.products ul.products li.product .price del { opacity: 0.45 !important; font-size: 13px !important; text-decoration: line-through !important; font-weight: 500 !important; }
body.single-product .related.products ul.products li.product .price ins { font-weight: 700 !important; }
body.single-product .related.products ul.products li.product .button {
    width: 100% !important;
    padding: 13px 16px !important;
    background: transparent !important;
    color: #0EA5E9 !important;
    border: 1.5px solid #0EA5E9 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
}
body.single-product .related.products ul.products li.product .button::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: filter 0.2s !important;
}
body.single-product .related.products ul.products li.product .button:hover {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(14,165,233,0.35) !important;
}
body.single-product .related.products ul.products li.product .button:hover::before {
    filter: brightness(0) invert(1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT — side-by-side login | register when logged out
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce-account .woocommerce-main {
    padding: 60px 20px 100px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
body.woocommerce-account .u-columns.col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    max-width: 900px !important;
    margin: 40px auto !important;
    width: 100% !important;
    float: none !important;
}
body.woocommerce-account .u-columns.col2-set .col-1,
body.woocommerce-account .u-columns.col2-set .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    background: #F5F8FC !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
body.woocommerce-account .u-columns h2 {
    font-size: 22px !important;
    color: #0A1F3D !important;
    margin: 0 0 24px !important;
    font-weight: 700 !important;
}
body.woocommerce-account .form-row label {
    display: block !important;
    color: #0A1F3D !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}
body.woocommerce-account .form-row input.input-text {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}
body.woocommerce-account .form-row input.input-text:focus {
    border-color: #38BDF8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important;
}
/* SCOPED by scripts/fetch-account-chrome.mjs - `.woocommerce` added.
   Live's selector names no container, so it also matched the newsletter's
   Subscribe button in the site footer, the only submit button on the page.
   Re-narrow it there, not here - this file is generated. */
body.woocommerce-account .woocommerce button.woocommerce-button,
body.woocommerce-account .woocommerce button[type="submit"] {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(14,165,233,0.3) !important;
    transition: transform 0.15s !important;
}
body.woocommerce-account .woocommerce button[type="submit"]:hover {
    transform: translateY(-1px) !important;
}
body.woocommerce-account .lost_password a {
    color: #0EA5E9 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

/* Logged-in account dashboard */
body.woocommerce-account.logged-in .woocommerce-account-container {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    gap: 40px !important;
    max-width: 1100px !important;
    margin: 40px auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #F5F8FC !important;
    border-radius: 14px !important;
    padding: 20px !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(10,31,61,0.06) !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0 !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #0A1F3D !important;
    padding: 12px 8px !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #0EA5E9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH — ANCHORED DROPDOWN (not full-page overlay)
   ═══════════════════════════════════════════════════════════════ */
/* Search overlay — kill theme's full-screen modal, render as right-anchored dropdown */
body div#vsv3SearchOverlay,
body div#vsv3SearchOverlay.vsv3-search-overlay,
.vsv3-search-overlay {
    display: none !important;
    position: fixed !important;
    top: 80px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    z-index: 99999 !important;
    width: 480px !important;
    max-width: calc(100vw - 40px) !important;
    background: transparent !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
body div#vsv3SearchOverlay.open,
body div#vsv3SearchOverlay.vsv3-search-overlay.open,
.vsv3-search-overlay.open {
    display: block !important;
    animation: vsv3-fade-in-up 0.2s ease-out !important;
}
/* Strip the theme's form/input/button base styling so OUR styles below take over */
body div#vsv3SearchOverlay form { max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; display: block !important; position: static !important; }
body div#vsv3SearchOverlay input[type="search"] { padding: 14px 8px !important; font-size: 15px !important; border-radius: 0 !important; background: transparent !important; color: #0A1F3D !important; flex: 1 !important; border: 0 !important; }
body div#vsv3SearchOverlay button[type="button"] { position: static !important; top: auto !important; right: auto !important; border: 0 !important; background: #F5F8FC !important; color: #64748B !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; font-size: 18px !important; line-height: 1 !important; }
.vsv3-search-overlay .vsv3-search-icon {
    width: 18px !important;
    height: 18px !important;
    color: #94A3B8 !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}
.vsv3-search-overlay.open {
    display: block !important;
    animation: vsv3-fade-in-up 0.2s ease-out !important;
}
.vsv3-search-overlay .search-form {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid #E2E8F0 !important;
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.vsv3-search-overlay .search-input-wrap {
    display: flex !important;
    gap: 0 !important;
    align-items: center !important;
    padding: 4px 8px 4px 18px !important;
    border-radius: 14px 14px 0 0 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
}
.vsv3-search-overlay input[type="search"] {
    flex: 1 !important;
    padding: 14px 8px !important;
    font-size: 15px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0A1F3D !important;
    outline: none !important;
}
.vsv3-search-overlay input[type="search"]::placeholder { color: #94A3B8 !important; }
.vsv3-search-overlay .vsv3-search-close {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #F5F8FC !important;
    color: #64748B !important;
    border: 0 !important;
    font-size: 18px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    margin: 0 4px !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vsv3-search-overlay .vsv3-search-close:hover {
    background: #E2E8F0 !important;
    color: #0A1F3D !important;
}
.vsv3-search-overlay .vsv3-search-submit {
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.vsv3-search-results {
    margin: 0 !important;
    background: #FFFFFF !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    display: none !important;
}
.vsv3-search-results.has-results,
.vsv3-search-results.loading,
.vsv3-search-results.no-results { display: block !important; }

.vsv3-search-result {
    display: flex !important;
    gap: 14px !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid rgba(10,31,61,0.06) !important;
    text-decoration: none !important;
    color: #0A1F3D !important;
    align-items: center !important;
}
.vsv3-search-result:hover { background: #F5F8FC !important; }
.vsv3-search-result:last-child { border-bottom: 0 !important; }
.vsv3-search-result img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #F5F8FC !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
}
.vsv3-search-result-info { flex: 1 !important; min-width: 0 !important; }
.vsv3-search-result-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0A1F3D !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.vsv3-search-result-name mark {
    background: transparent !important;
    color: #0EA5E9 !important;
    font-weight: 700 !important;
    padding: 0 !important;
}
.vsv3-search-result-price {
    color: #64748B !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}
.vsv3-search-empty,
.vsv3-search-loading {
    padding: 28px 20px !important;
    text-align: center !important;
    color: #94A3B8 !important;
    font-size: 14px !important;
}
.vsv3-search-seeall {
    display: block !important;
    padding: 12px !important;
    text-align: center !important;
    background: #F5F8FC !important;
    color: #0EA5E9 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-top: 1px solid rgba(10,31,61,0.08) !important;
}
.vsv3-search-seeall:hover { background: #E0F2FE !important; }

/* ═══════════════════════════════════════════════════════════════
   SHOP ARCHIVE — clean cards, equal height, modern Select Options
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce.post-type-archive-product ul.products,
body.woocommerce.tax-product_cat ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px auto !important;
    max-width: 1280px !important;
}
body.woocommerce ul.products li.product,
.woocommerce ul.products li.product {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 16px rgba(10,31,61,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.25s !important;
    text-align: center !important;
}
body.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 36px rgba(10,31,61,0.1) !important;
    border-color: rgba(56,189,248,0.4) !important;
}
body.woocommerce ul.products li.product > a:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
}
body.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #F5F8FC !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 14px !important;
    box-sizing: border-box !important;
    display: block !important;
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0A1F3D !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
}
body.woocommerce ul.products li.product .price {
    color: #0A1F3D !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    margin: 4px 0 14px !important;
}
body.woocommerce ul.products li.product .price del { opacity: 0.45 !important; font-size: 14px !important; margin-right: 6px !important; }
body.woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .added_to_cart {
    width: 100% !important;
    padding: 12px 16px !important;
    background: transparent !important;
    color: #0EA5E9 !important;
    border: 1.5px solid #0EA5E9 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    margin: auto 0 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s !important;
    letter-spacing: 0.02em !important;
}
body.woocommerce ul.products li.product .button:hover,
body.woocommerce ul.products li.product .added_to_cart:hover {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(14,165,233,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT — make sure logged-out users see proper login form
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation,
body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content {
    display: none !important;
}
body.woocommerce-account:not(.logged-in) .u-columns.col2-set,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register {
    display: block !important;
}
body.woocommerce-account:not(.logged-in) .u-columns.col2-set {
    display: grid !important;
}
body.woocommerce-account .woocommerce-form-login p.form-row,
body.woocommerce-account .woocommerce-form-register p.form-row { margin-bottom: 16px !important; }
body.woocommerce-account .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 8px !important; margin: 12px 0 !important; }
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit { width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL CENTERING AUDIT
   ═══════════════════════════════════════════════════════════════ */
.container,
.site-content > .container,
.entry-content > .container,
.woocommerce > .container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
body, .site, .site-content, main { overflow-x: hidden !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-v5 { padding: 60px 0 80px !important; min-height: auto !important; }
    .hero-v5 .h5-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .hero-v5 .h5-title { font-size: 42px !important; }
    .page-header { padding: 40px 0 30px !important; }
    .page-header h1 { font-size: 30px !important; }
    .inner-circle { padding: 70px 0 !important; }
    .inner-circle .ic-h2 { font-size: 36px !important; }
    .inner-circle .ic-perks { grid-template-columns: 1fr !important; }
    .inner-circle .ic-form { flex-direction: column !important; border-radius: 16px !important; padding: 10px !important; }
    .inner-circle .ic-submit { border-radius: 12px !important; padding: 14px !important; }
    body.single-product .product { grid-template-columns: 1fr !important; gap: 30px !important; }
    /* Modern Aminos gallery padding now in snippet 67 */
    body.single-product .product .product_title { font-size: 28px !important; }
    body.single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    body.woocommerce ul.products,
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    body.woocommerce ul.products li.product img { height: 160px !important; padding: 10px !important; }
    .page-header { padding: 60px 20px 50px !important; min-height: 180px !important; }
    .page-header h1 { font-size: 34px !important; }
    body.woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr !important; gap: 20px !important; }
    body.woocommerce-account.logged-in .woocommerce-account-container { grid-template-columns: 1fr !important; }
    .vsv3-search-overlay {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
        top: 58px !important;
    }
}


/* ==== inline #vsv3-mobile-cards-unified ==== */

@media (max-width: 768px) {

    /* === Unified product card === */
    html body .product-card,
    html body .shop-product-grid .product-card,
    html body .product-grid .product-card,
    html body .product-grid-4 .product-card,
    html body .product-grid-3 .product-card,
    html body .product-grid-8 .product-card,
    html body .vsv3-frt-grid .product-card,
    html body section[class*="best"] .product-card,
    html body .featured-product-grid .product-card,
    html body .related .product-card,
    html body .up-sells .product-card,
    html body .product-canvas .product-card,
    html body #shopGrid .product-card,
    html body #shopGrid > div,
    html body.woocommerce ul.products li.product {
        background: #FFFFFF !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        box-sizing: border-box !important;
        list-style: none !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* === Unified image panel — edge-to-edge inside card, 1:1 square === */
    html body .product-card .product-image,
    html body .shop-product-grid .product-card .product-image,
    html body .product-grid .product-card .product-image,
    html body .product-grid-4 .product-card .product-image,
    html body .vsv3-frt-grid .product-card .product-image,
    html body section[class*="best"] .product-card .product-image,
    html body .featured-product-grid .product-card .product-image,
    html body .product-canvas .product-card .product-image,
    html body #shopGrid .product-card .product-image,
    html body.woocommerce ul.products li.product .product-image {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        background: #F1F5F9 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* === Unified image — fills the panel, no gray bars === */
    html body .product-card .product-image img,
    html body .product-card > a > img,
    html body .product-card img,
    html body .shop-product-grid .product-card img,
    html body .product-grid .product-card img,
    html body .product-grid-4 .product-card img,
    html body .vsv3-frt-grid .product-card img,
    html body section[class*="best"] .product-card img,
    html body .featured-product-grid .product-card img,
    html body .product-canvas .product-card img,
    html body #shopGrid .product-card img,
    html body.woocommerce ul.products li.product img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        display: block !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* === Unified info section — padded, flex column, button at bottom === */
    html body .product-card .product-info,
    html body .shop-product-grid .product-card .product-info,
    html body .product-grid .product-card .product-info,
    html body .vsv3-frt-grid .product-card .product-info,
    html body section[class*="best"] .product-card .product-info,
    html body .featured-product-grid .product-card .product-info,
    html body .product-canvas .product-card .product-info {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        background: #FFFFFF !important;
    }

    /* === Title === */
    html body .product-card .product-name,
    html body .product-card h3,
    html body .product-card .product-title,
    html body .shop-product-grid .product-card .product-name,
    html body .vsv3-frt-grid .product-card .product-name,
    html body section[class*="best"] .product-card .product-name,
    html body .featured-product-grid .product-card .product-name,
    html body.woocommerce ul.products li.product h2,
    html body.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    html body .product-card .product-name a,
    html body .vsv3-frt-grid .product-card .product-name a,
    html body section[class*="best"] .product-card .product-name a {
        color: #0A1F3D !important;
        text-decoration: none !important;
    }

    /* === Price === */
    html body .product-card .product-price,
    html body .product-card .price,
    html body .shop-product-grid .product-card .product-price,
    html body .vsv3-frt-grid .product-card .product-price,
    html body section[class*="best"] .product-card .product-price,
    html body .featured-product-grid .product-card .product-price,
    html body.woocommerce ul.products li.product .price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0A1F3D !important;
        margin: 4px 0 8px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* === Button — Ventra cyan pill, full width, sits at bottom === */
    html body .product-card .btn,
    html body .product-card .button,
    html body .product-card .add-to-cart-btn,
    html body .product-card a.btn,
    html body .shop-product-grid .product-card .btn,
    html body .vsv3-frt-grid .product-card .btn,
    html body section[class*="best"] .product-card .btn,
    html body .featured-product-grid .product-card .btn,
    html body.woocommerce ul.products li.product .button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        background: #0EA5E9 !important;
        color: #FFFFFF !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        padding: 0 16px !important;
        margin: auto 0 0 !important;
        box-shadow: 0 1px 4px rgba(14,165,233,0.25) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    /* === Grid container — 2 cols on shop/home, single product FRT carousel takes precedence === */
    html body .shop-product-grid:not(.vsv3-frt-grid),
    html body .product-grid:not(.vsv3-frt-grid),
    html body .product-grid-4:not(.vsv3-frt-grid),
    html body .product-grid-3:not(.vsv3-frt-grid),
    html body .product-grid-8:not(.vsv3-frt-grid),
    html body #shopGrid:not(.vsv3-frt-grid),
    html body.woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        list-style: none !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==== inline #(anonymous) ==== */
.site-header.vsc-uhdr{display:none}

/* ==== inline #vsc-foot-css ==== */


.vsc-foot .footer-grid{ align-items:start; padding-bottom:0; border-bottom:0; }

.vsc-foot h4{ font-family:var(--grotesk); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.vsc-foot .footer-disclaimer{ border-top:1px solid rgba(125,211,252,.10); }
.vsc-foot .vsc-foot-bottom{ border-top:1px solid rgba(125,211,252,.08); }

/* Brand column */
.vsc-foot .footer-logo a{ display:inline-block; line-height:0; border-radius:4px; }
.vsc-foot .footer-logo a:focus-visible{ outline:2px solid var(--vsc-cyan-hover,#38BDF8); outline-offset:4px; }
.vsc-foot .footer-desc{ margin:16px 0 0; max-width:34ch; }
.vsc-foot .vsc-foot-contact{ margin-top:18px; gap:8px; }
.vsc-foot .footer-complaint{ font-size:11.5px; line-height:1.55; opacity:.72; max-width:36ch; }

/* Two link columns. Own class so the mobile snippet's
   `.footer .footer-grid{grid-template-columns:1fr!important}` cannot flatten
   them — staying two-up is the single biggest reason the phone footer got
   shorter rather than just narrower. */
.vsc-foot .vsc-foot-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; }
.vsc-foot .vsc-foot-cols h4{ margin:0 0 12px; }
.vsc-foot .vsc-foot-cols .footer-links{ gap:8px; }

/* Disclaimer — tightened, text untouched. border-bottom dropped: the bottom
   bar's own border-top already draws that seam, and having both stacked a
   double-weight line. */
.vsc-foot .footer-disclaimer{ margin-top:40px; padding:22px 0 20px; border-bottom:0; }

/* Bottom bar: social · copyright · policies, on one line at desktop */
.vsc-foot .vsc-foot-bottom{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:14px 28px; padding:16px 0 24px; }
.vsc-foot .vsc-foot-copy{ margin:0; font-size:12px; line-height:1.5; color:#7E93A9; order:2; }
.vsc-foot .footer-bottom-links{ display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 20px; order:3; }
.vsc-foot .footer-bottom-links a{ font-family:var(--inter); font-size:12px; line-height:1.5;
  color:#94A3B8; text-decoration:none; transition:color .2s ease; }
.vsc-foot .footer-bottom-links a:hover,
.vsc-foot .footer-bottom-links a:focus-visible{ color:var(--vsc-cyan-hover,#38BDF8); }

.vsc-foot .vsc-foot-social{ display:flex; align-items:center; gap:4px; order:1; margin-left:-10px; }
.vsc-foot .vsc-foot-social a{ display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:#C9D8E8; text-decoration:none;
  transition:color .2s ease, background-color .2s ease; }
.vsc-foot .vsc-foot-social a:hover{ color:var(--vsc-cyan-hover,#38BDF8);
  background:rgba(var(--vsc-cyan-rgb,14,165,233),.10); }
.vsc-foot .vsc-foot-social a:focus-visible{ color:var(--vsc-cyan-hover,#38BDF8);
  outline:2px solid var(--vsc-cyan-hover,#38BDF8); outline-offset:2px; }
.vsc-foot .vsc-foot-social svg{ display:block; width:20px; height:20px; }

@media (max-width:900px){
  /* 64px of empty navy at the top of a phone footer is 6% of the viewport
     spent on nothing. */
  .vsc-foot{ padding-top:44px; }
  /* .footer-grid is forced to one column by the mobile snippet; give it a
     sensible rhythm rather than the 28px it inherits at every seam. */
  .vsc-foot .footer-grid{ gap:30px; }
  .vsc-foot .footer-disclaimer{ margin-top:32px; padding:20px 0 16px; }
  .vsc-foot .footer-desc,
  .vsc-foot .footer-complaint{ max-width:none; }
  /* Bottom bar centres and the social row caps it instead of trailing off the
     end, so the bar reads as a deliberate divider and not an afterthought. */
  .vsc-foot .vsc-foot-bottom{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:14px 0 22px; }
  .vsc-foot .vsc-foot-social{ margin-left:0; }
  .vsc-foot .footer-bottom-links{ justify-content:center; gap:6px 18px; }
}
@media (max-width:420px){
  /* Two columns still fit at 390 (roughly 150px each inside the snippet's 20px
     gutters) and that is what keeps this from becoming a tall stack. */
  .vsc-foot .vsc-foot-cols{ gap:20px 18px; }
}

.vsc-nl{
  padding:clamp(34px,4.6vw,66px) 0;
  background:linear-gradient(180deg, #0F1620 0%, #0F1620 22%, #0F1D2E 100%);
}
.vsc-nl-in{ width:min(1240px, calc(100% - 40px)); margin-inline:auto; }

.vsc-nl-panel{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(20px,3vw,46px); align-items:center;
  padding:clamp(24px,2.8vw,38px) clamp(22px,3vw,40px);
  border-radius:22px;
  border:1px solid rgba(125,211,252,.13);
  background:linear-gradient(118deg, rgba(14,165,233,.10), rgba(19,37,60,.74));
}

.vsc-nl-copy{ min-width:0; }
.vsc-nl-h{
  margin:0; font-family:var(--grotesk, 'Onest', system-ui, sans-serif);
  font-size:clamp(22px,2.5vw,30px); font-weight:500; line-height:1.14;
  letter-spacing:-.02em; color:#FFFFFF;
}
.vsc-nl-sub{
  margin:11px 0 0; max-width:46ch;
  font-family:var(--inter, 'Inter', system-ui, sans-serif);
  font-size:14px; line-height:1.55; color:#C9D8E8;
}

.vsc-nl-form{ min-width:0; }
.vsc-nl-form .subscribe-form{
  display:flex; align-items:center; gap:8px;
  width:min(430px, 100%);
  margin:0; padding:6px;
  border-radius:999px;
  background:rgba(148,183,214,.08);
  border:1px solid rgba(125,211,252,.16);
  transition:border-color .2s ease;
}
html.vsc-dark body .vsc-nl-form .subscribe-form:focus-within,
.vsc-nl-form .subscribe-form:focus-within{
  border-color:rgba(56,189,248,.65);
  box-shadow:0 0 0 3px rgba(14,165,233,.20);
}
.vsc-nl-form .subscribe-form input{
  flex:1 1 auto; min-width:0; height:44px;
  margin:0; padding:0 6px 0 16px;
  background:transparent; border:0; border-radius:999px; box-shadow:none;
  font-family:var(--inter, 'Inter', system-ui, sans-serif);
  font-size:14px; color:#EEF6FB;
}
html.vsc-dark body .vsc-nl-form .subscribe-form input:focus,
html.vsc-dark body .vsc-nl-form .subscribe-form input:focus-visible,
.vsc-nl-form .subscribe-form input:focus,
.vsc-nl-form .subscribe-form input:focus-visible{
  outline:none !important; box-shadow:none !important; border:0 !important;
}
/* 5.89:1 on the pill. The obvious muted grey measures 4.31:1 and fails. */
.vsc-nl-form .subscribe-form input::placeholder{ color:#9FB2C6; opacity:1; }

/* Midnight ink on brand cyan = 5.87:1. White on this cyan is 4.09:1 and fails
   AA at this size; white on the brand's primary cyan is 2.77:1. Never white. */
.vsc-nl-form .subscribe-form button{
  flex:0 0 auto; height:44px; margin:0; padding:0 22px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--vsc-cyan,#0EA5E9); color:#082040;
  font-family:var(--grotesk, 'Onest', system-ui, sans-serif);
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.vsc-nl-form .subscribe-form button:hover{ background:var(--vsc-cyan-hover,#38BDF8); }
.vsc-nl-form .subscribe-form button:focus-visible{
  outline:2px solid var(--vsc-cyan-hover,#38BDF8); outline-offset:3px;
}
.vsc-nl-form .subscribe-form button:disabled{ opacity:.72; cursor:default; }

/* Fallback handler's output node. Empty at rest, so it must not take layout. */
.vsc-nl-form .subscribe-feedback{ margin:10px 0 0; font-size:12px; color:#C9D8E8; }
.vsc-nl-form .subscribe-feedback:empty{ display:none; margin:0; }

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

@media (max-width:860px){
  .vsc-nl-panel{ grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
  .vsc-nl-sub{ max-width:none; }
  .vsc-nl-form .subscribe-form{ width:100%; }
}
@media (max-width:560px){
  /* Stack the pill. At 390 the field and an inline button share ~338px, which
     clips the placeholder mid-word - the exact defect the reference ships. */
  .vsc-nl{ padding:30px 0; }
  .vsc-nl-panel{ padding:22px 18px; border-radius:18px; }
  .vsc-nl-form .subscribe-form{
    flex-direction:column; align-items:stretch; gap:8px;
    padding:0; background:none; border:0; border-radius:0;
  }
  .vsc-nl-form .subscribe-form:focus-within{ border-color:transparent; }
  .vsc-nl-form .subscribe-form input{
    height:48px; padding:0 18px; border-radius:999px;
    background:rgba(148,183,214,.08);
    border:1px solid rgba(125,211,252,.16) !important;
  }
  /* Stacked, the field IS the pill, so it carries the indicator itself.
     Same (0,4,3) escalation as above for the same reason. */
  html.vsc-dark body .vsc-nl-form .subscribe-form input:focus,
  html.vsc-dark body .vsc-nl-form .subscribe-form input:focus-visible,
  .vsc-nl-form .subscribe-form input:focus,
  .vsc-nl-form .subscribe-form input:focus-visible{
    border-color:rgba(56,189,248,.65) !important;
    box-shadow:0 0 0 3px rgba(14,165,233,.20) !important;
  }
  .vsc-nl-form .subscribe-form button{ height:48px; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .vsc-nl-form .subscribe-form,
  .vsc-nl-form .subscribe-form input,
  .vsc-nl-form .subscribe-form button{ transition:none !important; }
}

.vsc-nl .vsc-nl-form > div:not(.vsv3-form-msg){
  background:rgba(16,185,129,.14) !important;
  border-color:rgba(52,211,153,.38) !important;
  color:#6EE7B7 !important;
}
.vsc-nl .vsc-nl-form > .vsv3-form-msg{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(251,191,36,.34) !important;
  color:#FCD34D !important;
}

.vsc-foot .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }


/* ==== inline #(anonymous) ==== */

  #vscPromo, #vscPromo * { box-sizing: border-box; }
  #vscPromo {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }

  /* ============ LAUNCHER ============ */
  .vscp-launch {
    position: fixed; right: 20px; bottom: 20px; z-index: 99990;
    display: inline-flex; align-items: center; gap: 11px;
    padding: 10px 24px 10px 10px; border: 1px solid rgba(127,184,217,0.34);
    border-radius: 999px; background: #0A1628; color: #F4F9FC;
    font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
    cursor: pointer; box-shadow: 0 10px 30px rgba(5,13,26,0.34);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .vscp-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(5,13,26,0.42); }
  .vscp-launch-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px; flex: 0 0 42px;
    background: linear-gradient(150deg, #7FB8D9 0%, #548DB3 100%); color: #06111F;
  }
  .vscp-launch-badge svg { width: 23px; height: 23px; }

  /* ============ SHEET ============ */
  .vscp-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 99992;
    width: 420px; max-width: 100vw; overflow-y: auto;
    padding: 28px 30px 26px; color: #F4F9FC;
    background: #0A1628;
    background-image:
      radial-gradient(ellipse at 85% 8%, rgba(127,184,217,0.24) 0%, transparent 58%),
      radial-gradient(ellipse at 10% 96%, rgba(84,141,179,0.18) 0%, transparent 60%);
    border-left: 1px solid rgba(127,184,217,0.20);
    border-radius: 22px 0 0 22px;
    box-shadow: -18px 0 48px rgba(5,13,26,0.42);
    transform: translateX(100%); transition: transform .34s cubic-bezier(.22,.75,.25,1);
  }
  .vscp-sheet.is-open { transform: translateX(0); }

  .vscp-close {
    position: absolute; top: 18px; right: 18px;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid rgba(127,184,217,0.24);
    background: rgba(244,249,252,0.05); color: #C5D3E0; cursor: pointer; padding: 0;
  }
  .vscp-close:hover { color: #F4F9FC; background: rgba(244,249,252,0.11); }

  .vscp-head { margin: 6px 40px 18px 0; }
  .vscp-kicker {
    margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: #7FB8D9;
  }
  .vscp-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; }

  .vscp-state { display: none; }
  .vscp-state.is-active { display: block; }

  .vscp-copy { margin: 0 0 20px; font-size: 14.5px; line-height: 1.62; color: #C5D3E0; }

  .vscp-label {
    display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: #C5D3E0;
  }
  .vscp-label span { color: #6B7B8E; font-weight: 500; }
  .vscp-input {
    width: 100%; margin: 0 0 15px; padding: 13px 15px;
    border: 1px solid rgba(127,184,217,0.26); border-radius: 14px;
    background: rgba(244,249,252,0.05); color: #F4F9FC;
    font-family: inherit; font-size: 15px; outline: none;
    transition: border-color .16s ease, background .16s ease;
  }
  .vscp-input::placeholder { color: #6B7B8E; }
  .vscp-input:focus { border-color: #7FB8D9; background: rgba(244,249,252,0.09); }
  .vscp-input.has-error { border-color: #ff9d9d; }

  .vscp-consent { display: flex; gap: 10px; margin: 4px 0 16px; cursor: pointer; }
  .vscp-consent input { margin: 2px 0 0; flex: 0 0 auto; accent-color: #7FB8D9; width: 15px; height: 15px; }
  .vscp-consent span { font-size: 11.5px; line-height: 1.55; color: #8FA3B8; }
  .vscp-consent a { color: #7FB8D9; }

  .vscp-error { margin: 0 0 12px; font-size: 13px; color: #ff9d9d; }

  .vscp-cta {
    display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 14px;
    background: linear-gradient(150deg, #7FB8D9 0%, #548DB3 100%); color: #06111F;
    font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
    cursor: pointer; text-align: center; text-decoration: none;
    box-shadow: 0 8px 24px rgba(127,184,217,0.26);
  }
  .vscp-cta:disabled { opacity: .6; cursor: default; box-shadow: none; }
  .vscp-cta-link { line-height: 1.2; }

  .vscp-no {
    display: block; width: 100%; margin-top: 12px; padding: 6px; border: 0; background: none;
    color: #6B7B8E; font-family: inherit; font-size: 13px; cursor: pointer;
  }
  .vscp-no:hover { color: #C5D3E0; }

  .vscp-code {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 20px; padding: 16px 18px; border-radius: 18px;
    border: 1px dashed rgba(127,184,217,0.44); background: rgba(127,184,217,0.09);
  }
  .vscp-code-label {
    width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: #7FB8D9;
  }
  .vscp-code-value { font-size: 21px; font-weight: 700; letter-spacing: 0.04em; color: #F4F9FC; }
  .vscp-copy-btn {
    margin-left: auto; padding: 7px 15px; border-radius: 999px;
    border: 1px solid rgba(127,184,217,0.4); background: transparent; color: #7FB8D9;
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .vscp-copy-btn:hover { background: rgba(127,184,217,0.14); }

  .vscp-fine { margin: 20px 0 0; font-size: 10.5px; line-height: 1.5; color: #6B7B8E; }

  /* ============ MOBILE ============ */
  @media (max-width: 720px) {
    .vscp-launch { right: 16px; bottom: 16px; padding: 8px; gap: 0; }
    .vscp-launch-text { display: none; }
    .vscp-launch-badge { width: 50px; height: 50px; flex: 0 0 50px; }
    .vscp-launch-badge svg { width: 27px; height: 27px; }
    .vscp-sheet {
      width: 100%; border-radius: 22px 22px 0 0; border-left: 0;
      border-top: 1px solid rgba(127,184,217,0.20);
      top: auto; max-height: 92vh; padding: 24px 20px 22px;
      transform: translateY(100%);
      box-shadow: 0 -18px 48px rgba(5,13,26,0.5);
    }
    .vscp-sheet.is-open { transform: translateY(0); }
    .vscp-title { font-size: 23px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .vscp-sheet, .vscp-launch { transition: none; }
  }