/* =========================
   Voluntary Discomfort — Global Styles
   Palette + Core UI (site-wide)
========================= */

:root{
  /* =========================
     BRAND PALETTE (SITE WIDE)
  ========================= */

  /* Backgrounds */
  --bg:#100C08;          /* main background (deep) */
  --bg2:#36454F;         /* secondary surface (slate) */

  /* Text */
  --text:#F5F7FF;
  --muted:rgba(245,247,255,.72);

  /* Borders / depth */
  --border:rgba(245,247,255,.10);
  --border2:rgba(245,247,255,.16);
  --shadow:0 18px 40px rgba(0,0,0,.55);

  /* Glows (subtle ambient only) */
  --glow1:#008080;       /* teal */
  --glow2:#30D5C8;       /* turquoise */

  /* Primary CTA */
  --accent:#93E9BE;      /* main button */
  --accentHi:#BDF6DA;    /* highlight */
  --accentDeep:#61D6A0;  /* depth */

  /* Gradients */
  --accentFill:linear-gradient(180deg,var(--accentHi) 0%, var(--accent) 55%, var(--accentDeep) 100%);
}

/* =========================
   FONTS — Bebas Neue (Local)
========================= */
@font-face{
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);         /* ✅ ONE base background everywhere */
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:hidden;
  position:relative;
}

/* ✅ Seamless ambient glows (site-wide)
   - No section bands
   - Random spherical glows
   - Extremely soft transitions */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-420px;
  pointer-events:none;
  z-index:-1;
  will-change:transform;
}

/* Primary glow field */
body::before{
  background:
    radial-gradient(1100px 780px at 14% 8%,   rgba(0,128,128,.18), transparent 68%),
    radial-gradient(980px 720px  at 86% 14%,  rgba(0,128,128,.12), transparent 70%),
    radial-gradient(980px 700px  at 22% 52%,  rgba(48,213,200,.10), transparent 72%),
    radial-gradient(920px 680px  at 78% 58%,  rgba(64,224,208,.09), transparent 74%),
    radial-gradient(980px 760px  at 50% 88%,  rgba(54,69,79,.22),  transparent 76%),
    radial-gradient(760px 620px  at 12% 112%, rgba(0,128,128,.10), transparent 76%),
    radial-gradient(820px 660px  at 92% 118%, rgba(48,213,200,.08), transparent 78%);
  filter:saturate(1.06);
  opacity:1;
}

/* Soft vignette to keep edges premium (no harsh stops) */
body::after{
  background:
    radial-gradient(1400px 900px at 50% 20%, rgba(0,0,0,.22), transparent 62%),
    radial-gradient(1400px 900px at 50% 92%, rgba(0,0,0,.28), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity:1;
}

/* TOP GLOW: teal (#008080) dominates near the top */
body::before{
  background:
    radial-gradient(900px 700px at 14% -6%, rgba(0,128,128,.26), transparent 62%),
    radial-gradient(760px 620px at 86% 4%, rgba(0,128,128,.18), transparent 64%),
    radial-gradient(900px 650px at 52% 28%, rgba(54,69,79,.22), transparent 70%),
    linear-gradient(180deg, rgba(0,128,128,.10), transparent 55%);
  filter:saturate(1.08) blur(0px);
  opacity:1;
}

/* LOWER GLOW: turquoise (#40E0D0) dominates down the page */
body::after{
  background:
    radial-gradient(980px 720px at 18% 108%, rgba(64,224,208,.22), transparent 62%),
    radial-gradient(860px 680px at 86% 112%, rgba(64,224,208,.18), transparent 64%),
    radial-gradient(1000px 760px at 50% 128%, rgba(54,69,79,.24), transparent 70%),
    linear-gradient(180deg, transparent 20%, rgba(64,224,208,.06) 92%, transparent 110%);
  /* push the “turquoise zone” lower so it appears more as you scroll */
  transform:translateY(420px);
  filter:saturate(1.10);
  opacity:.95;
}

a{color:inherit;text-decoration:none}

.vd-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* =============================
   BUTTONS
============================= */

.vd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  font-size:14px;
  border:1px solid var(--border);
}

.vd-btn--ghost{
  background:transparent;
  border:1px solid rgba(245,247,255,.22);
  color:rgba(245,247,255,.90);
}

.vd-btn--ghost:hover{
  border-color:rgba(245,247,255,.34);
  color:var(--text);
}

.vd-btn--primary{
  background:var(--accentFill);
  color:#06120D;
  border:0;
  box-shadow:0 14px 34px rgba(147,233,190,.18);
}

.vd-btn--block{width:100%}

/* =============================
   MAIN + FOOTER
============================= */

.vd-main{padding:26px 0 60px}

.vd-footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  color:var(--muted);
  background:rgba(54,69,79,.12);
}

/* =============================
   CART BUTTON (global style only)
============================= */

.vd-cartbtn{
  position:relative;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(245,247,255,.16);
  background:rgba(245,247,255,.06);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.vd-cartbtn__count{
  position:absolute;
  top:-8px;
  right:-8px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--accentFill);
  color:#06120D;
  font-weight:1000;
  font-size:12px;
  display:grid;
  place-items:center;
  border:2px solid var(--bg);
}

/* =============================
   CART DRAWER
============================= */

.vd-cart{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
}

.vd-cart.is-open{display:block}

.vd-cart__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
}

.vd-cart__panel{
  position:absolute;
  right:18px;
  top:18px;
  bottom:18px;
  width:min(420px, calc(100% - 36px));
  background:linear-gradient(180deg, rgba(245,247,255,.08), rgba(245,247,255,.03));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.vd-cart__head{
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}

.vd-cart__head h3{
  margin:0;
  font-size:16px;
  font-weight:1000;
}

.vd-iconbtn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(245,247,255,.16);
  background:rgba(245,247,255,.06);
  color:var(--text);
  cursor:pointer;
}

.vd-cart__body{
  padding:14px 16px;
  overflow:auto;
  flex:1;
}

.vd-cart__foot{
  padding:14px 16px;
  border-top:1px solid var(--border);
  background:rgba(54,69,79,.12);
}

.vd-cart__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.vd-muted{color:var(--muted)}
.vd-tiny{font-size:12px}

/* =============================
   CART ITEMS
============================= */

.vd-cartitem{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(245,247,255,.10);
}

.vd-cartitem:last-child{border-bottom:0}

.vd-cartitem img{
  width:60px;
  height:60px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(245,247,255,.12);
}

.vd-cartitem__title{
  font-weight:900;
  margin:0 0 4px;
}

.vd-cartitem__meta{
  font-size:13px;
  color:var(--muted);
}

.vd-cartqty{
  display:flex;
  align-items:center;
  gap:8px;
}

.vd-qtybtn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(245,247,255,.16);
  background:rgba(245,247,255,.06);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}

/* =========================
   TYPOGRAPHY — Headings
========================= */
h1, h2, h3, h4, h5, h6,
.vd-h1, .vd-h2, .vd-h3{
  font-family: "Bebas Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
}


/* ✅ REMOVE SHOPIFY "NEXT PAGE" BUTTON (ALL PATCHES EMBED) */

/* Most common class used by Shopify Buy Button collection pagination */
.shopify-buy__collection-pagination-button,
button.shopify-buy__collection-pagination-button{
  display:none !important;
}

/* If Shopify renders it as a generic button with both classes */
button.shopify-buy__collection-pagination-button.shopify-buy__btn,
.shopify-buy__collection-pagination-button.shopify-buy__btn{
  display:none !important;
}

/* If it’s inside the iframe DOM and your styles are injected there by Shopify,
   this won’t apply. BUT in your screenshot it’s visible to your page CSS,
   so the above should work. This is just extra belt + braces: */
.shopify-buy__collection-pagination{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}