/* =========================
   VIXEN PINS styles.css
   Cleaned: removed duplicate blocks that overwrote each other
   Includes: closed landing polish, footer polish, password block
   ========================= */

:root{
  --bg:#07070b;
  --bg2:#0b0b12;
  --panel:#12121a;
  --panel2:#0f0f16;
  --text:#f4f4f7;
  --muted:#b7b7c2;

  --accent:#ff2d55;
  --accent2:#b54cff;

  --border:#242435;
  --borderSoft: rgba(255,255,255,.10);

  --shadow: 0 18px 60px rgba(0,0,0,.62);

  /* Closed landing artwork vars */
  --vpClosedBg: none; /* optional background image */
  --vpClosedGhost: url("../assets/closed-ghost-transparent.png");
  --vpClosedGhostOpacity: .42;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(181,76,255,.10), rgba(0,0,0,0)),
    radial-gradient(900px 600px at 0% 20%, rgba(255,45,85,.10), rgba(0,0,0,0)),
    linear-gradient(180deg, #07070b, #07070b 40%, #06060a);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

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

:focus-visible{
  outline: 2px solid rgba(255,45,85,.55);
  outline-offset: 2px;
  border-radius: 10px;
}

.container{max-width:1100px;margin:0 auto;padding:18px}

/* =========================
   Top bar
   ========================= */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0; gap:12px;
}

.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  user-select:none;
}

/* IMPORTANT: your HTML uses <img class="mark" ...> */
.brand img.mark{
  width:34px;height:34px;
  border-radius:10px;
  display:block;
  object-fit:cover;
  background: rgba(255,45,85,.18);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,45,85,.12);
}

.brand .name{font-weight:900;letter-spacing:.8px}

.nav{display:flex;gap:14px;align-items:center}
.nav a{
  opacity:.92;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav a:hover{
  opacity:1;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* =========================
   Banner
   ========================= */
.banner{
  background: linear-gradient(180deg, rgba(255,45,85,.16), rgba(255,45,85,.05));
  border:1px solid rgba(255,45,85,.22);
  padding:14px 14px;border-radius:16px;margin:10px 0 18px 0;
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.banner small{color:var(--muted)}

.btn{
  background:var(--accent);
  border:0;
  color:white;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  text-align:center;
  transition: transform .08s ease, filter .12s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
}
.btn.secondary:hover{
  border-color: rgba(255,45,85,.28);
  box-shadow: 0 0 0 1px rgba(255,45,85,.10);
}

.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.disabled{opacity:.55;pointer-events:none;cursor:not-allowed}

/* =========================
   Product grid + cards
   ========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media(min-width:820px){
  .grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}
.card img{width:100%;background:#0b0b12;display:block}
.card .body{padding:12px;display:flex;flex-direction:column;gap:8px}
.card .title{font-weight:900}
.card .meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}

.badge{
  font-size:12px;font-weight:900;letter-spacing:.5px;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  width:fit-content;
  background: rgba(255,255,255,.03);
}
.badge.inhand{border-color:rgba(46,213,115,.35);background:rgba(46,213,115,.10)}
.badge.preorder{border-color:rgba(255,159,10,.35);background:rgba(255,159,10,.10)}
.badge.comingsoon{border-color:rgba(90,200,250,.35);background:rgba(90,200,250,.10)}
.badge.soldout{border-color:rgba(255,69,58,.35);background:rgba(255,69,58,.10)}

.thumb{
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #0b0b12;
  display: block;
}

.productHero{
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background: #0b0b12;
  border-radius: 18px;
}

/* Locked cards */
.card.is-locked{ position: relative; }
.card.is-locked .thumb{
  filter: blur(10px) brightness(.55) saturate(.7);
  transform: scale(1.03);
}
.card.is-locked::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60));
  pointer-events: none;
}
.card.is-locked::after{
  content: attr(data-lock-label);
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .02em;
  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.card.is-live{
  outline: 1px solid rgba(255,70,140,.35);
  box-shadow: 0 0 0 1px rgba(255,70,140,.12), 0 16px 44px rgba(0,0,0,.32);
}

/* =========================
   Modals
   ========================= */
.modalWrap{
  position:fixed;inset:0;background:rgba(0,0,0,.74);
  display:none;align-items:center;justify-content:center;padding:18px;
  z-index:9999;
}
.modal{
  max-width:520px;width:100%;
  background: rgba(18,18,26,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.modal h2{margin:0 0 6px 0}
.modal p{margin:0 0 12px 0;color:var(--muted);line-height:1.4}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Cart */
.cartCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  margin-left:6px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background: rgba(255,45,85,.18);
  border: 1px solid rgba(255,45,85,.35);
  color: var(--text);
}

.cartItem{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.cartThumb{
  width:56px;height:56px;
  border-radius:12px;
  background:#0b0b12;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.08);
}
.cartTitle{ font-weight:900; margin:0; line-height:1.2; }
.cartMeta{ font-size:13px; color: var(--muted); margin-top:4px; }
.cartQty{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.cartQty button{ padding:8px 10px; border-radius:10px; }
.cartRemove{ background:transparent; border:1px solid rgba(255,255,255,.12); color: var(--text); }

/* =========================
   MailerLite section
   ========================= */
.vp-ml{
  max-width: 760px;
  margin: 24px auto;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 46, 99, 0.32);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,46,99,0.12), rgba(0,0,0,0)) #0b0b10;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.vp-ml iframe{
  width: 100%;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}
#email { margin-top: 18px; }
.vp-ml-wrap{
  max-width: 100%;
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 46, 99, 0.18);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,46,99,0.08), rgba(0,0,0,0)) #0b0b10;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* =========================
   CLOSED MODE layout
   Supports both classes:
   - vp-closed-mode (your CSS)
   - is-closed (my earlier JS)
   ========================= */
body.vp-closed-mode .container,
body.is-closed .container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.vp-closed-mode #closedRoot,
body.is-closed #closedRoot{ flex: 1; }
body.vp-closed-mode .footer,
body.is-closed .footer{ margin-top: 14px; }

/* =========================
   Shop Closed Landing
   Single definitive block (no duplicates)
   ========================= */
.vp-closed-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(900px 540px at 35% 40%, rgba(255,45,85,0.10), rgba(0,0,0,0)),
    radial-gradient(120% 120% at 70% 20%, rgba(120,70,255,0.10), rgba(0,0,0,0)),
    #07070b;
  min-height: calc(100vh - 170px);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

/* Optional background image */
.vp-closed-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  background-image: var(--vpClosedBg);
  opacity: 0.80;
  filter: saturate(1.05) contrast(1.05);
}

/* Vignette */
.vp-closed-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.84));
  pointer-events: none;
  z-index: 1;
}

/* Ghost layer */
.vp-closed-ghost{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: var(--vpClosedGhost);
  background-repeat: no-repeat;
  background-position: right 6% bottom -8%;
  background-size: min(640px, 52vw);
  opacity: var(--vpClosedGhostOpacity);
  filter:
    brightness(1.25)
    contrast(1.18)
    saturate(1.25)
    drop-shadow(0 0 34px rgba(255,45,85,.28))
    drop-shadow(0 0 44px rgba(181,76,255,.14));
}

/* Countdown */
.vp-countdown{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 18px 14px;
  background: rgba(0,0,0,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.vp-count-pill{ display: grid; justify-items: center; min-width: 92px; }
.vp-count-num{ font-size: 44px; font-weight: 900; letter-spacing: 1px; line-height: 1; }
.vp-count-lbl{ margin-top: 6px; font-size: 11px; letter-spacing: 0.18em; opacity: 0.75; }

/* Closed modal */
.vp-closed-modal{
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 26px;
  border-radius: 22px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,45,85,0.18), rgba(0,0,0,0)),
    rgba(10,10,14,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 25px 80px rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
}

.vp-closed-title{ font-weight: 900; font-size: 48px; letter-spacing: 1.5px; }
.vp-closed-sub{ margin-top: 8px; opacity: 0.92; font-weight: 750; }
.vp-closed-body{ margin-top: 14px; color: rgba(255,255,255,0.88); line-height: 1.55; font-size: 16px; }
.vp-closed-body a{
  text-decoration: underline;
  text-decoration-color: rgba(255,45,85,.55);
  text-underline-offset: 3px;
}
.vp-closed-note{ margin-top: 12px; opacity: 0.80; font-size: 13px; }

#closedEmailBtn{ padding: 14px 20px; font-size: 15px; border-radius: 14px; }

.vp-closed-actions{ margin-top: 14px; margin-bottom: 22px; }

/* Password block */
.vp-pass{ margin-top: 22px; }
.vp-pass-label{ font-weight: 800; margin-bottom: 8px; opacity: .92; }
.vp-pass-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.vp-pass-input{
  flex: 1;
  min-width: 220px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
}
.vp-pass-input:focus{
  border-color: rgba(255,45,85,.45);
  box-shadow: 0 0 0 3px rgba(255,45,85,.10);
}
.vp-pass-btn{ border-radius:14px; padding: 12px 14px; }
.vp-pass-msg{ margin-top: 8px; font-size: 13px; opacity: .88; }
.vp-pass-msg.ok{ color: rgba(46,213,115,.95); }
.vp-pass-msg.bad{ color: rgba(255,69,58,.95); }

/* =========================
   Footer (single definitive block)
   ========================= */
.footer{
  margin-top:28px;
  color:var(--muted);
  font-size:14px;

  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,45,85,.10), rgba(0,0,0,0)),
    radial-gradient(900px 260px at 80% 0%, rgba(181,76,255,.08), rgba(0,0,0,0)),
    rgba(12,12,18,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.hr{height:1px;background:rgba(255,255,255,.10);margin:14px 0}

.footer .row{
  background: rgba(10,10,14,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.footer a{ color: rgba(255,255,255,.85); opacity:.92; }
.footer a:hover{ opacity:1; color:#fff; }

.footer-social{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin: 0;
}
.footer-social a{
  opacity: .95;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.footer-social a:hover{
  border-color: rgba(255,45,85,.40);
  box-shadow: 0 0 0 1px rgba(255,45,85,.14);
}

.footer .row > div:last-child{
  display: grid;
  justify-items: end;
  gap: 10px;
}

@media (max-width: 720px){
  .footer .row{ grid-template-columns: 1fr; }
  .footer .row > div:last-child{ justify-items: start; }
  .footer-social{ justify-content:flex-start; }
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 720px) {
  .container { padding: 14px; }

  .topbar { flex-wrap: wrap; gap: 10px; }
  .nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .banner > div:last-child {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .banner .btn,
  .banner button.btn {
    width: 100%;
  }

  .grid { grid-template-columns: 1fr; }
  .thumb { height: 240px; }

  .modalWrap { padding: 12px; }
  .modal {
    width: 100%;
    max-width: 560px;
    padding: 14px;
    border-radius: 16px;
  }

  .vp-ml-wrap { padding: 14px; }
  .ml-embedded,
  .ml-embedded iframe {
    width: 100%;
    min-height: 180px;
  }

  .vp-closed-hero{ min-height: calc(100vh - 140px); border-radius: 16px; }
  .vp-countdown{ gap: 10px; padding: 14px 10px; }
  .vp-count-pill{ min-width: 70px; }
  .vp-count-num{ font-size: 30px; }

  .vp-closed-modal{
    max-width: 100%;
    margin: 18px 12px 0;
    padding: 18px;
    border-radius: 18px;
  }
  .vp-closed-title{ font-size: 34px; letter-spacing: 1px; }
  .vp-closed-body{ font-size: 15px; }

  .vp-closed-ghost{
    background-position: right -20px bottom -20px;
    background-size: min(420px, 74vw);
    opacity: .20;
  }
}

@media (max-width: 420px) {
  .brand .name { font-size: 14px; letter-spacing: 0.4px; }
  .thumb { height: 220px; }
  .btn { padding: 10px 12px; border-radius: 12px; }

  .vp-count-pill{ min-width: 62px; }
  .vp-count-num{ font-size: 26px; }
  .vp-closed-title{ font-size: 30px; }
}