:root{
  --bg-0:#07070a;
  --bg-1:#0b0b10;
  --card:#0f0f16;
  --stroke:rgba(255,255,255,.08);
  --text:#eaeaf2;
  --muted:rgba(234,234,242,.72);
  --red:#b10f2e;
  --red-2:#ff234f;
  --glow: 0 0 0.75rem rgba(177,15,46,.35), 0 0 2.25rem rgba(177,15,46,.18);
  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}
tbody, td, tfoot, th, thead, tr{
  color:white !important;
}


.form-select:focus{
  outline:0;
  box-shadow: none;
}
option{
  background:#09090e;
}
body{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(177,15,46,.18), transparent 60%),
    radial-gradient(800px 500px at 80% 10%, rgba(255,35,79,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0));
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .2px;
  overflow-x: hidden;
}

.bg-grid{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(700px 400px at 50% 10%, black, transparent 70%);
  z-index: 0;
}

.wrap{ position: relative; z-index: auto; }
.thumb{
  height: 170px;
  /* optional image layer */
  --thumb-img: none;

  /* keep your exact original gradients, then add the image as the last layer */
  background:
    radial-gradient(180px 120px at 70% 20%, rgba(255,35,79,.20), transparent 65%),
    radial-gradient(220px 160px at 30% 60%, rgba(177,15,46,.16), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--thumb-img);

  background-size: auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, center;
  background-repeat: no-repeat;

  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 14px;
}

/* optional: makes images look “premium” (Sellix vibe) */
.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  pointer-events:none;
}
.thumb > *{
  position: relative;
  z-index: 1;
}
/* Product cards */
    .product-card{
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      
      box-shadow: 0 16px 50px rgba(0,0,0,.40);
      overflow: hidden;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
      position: relative;
      height: 100%;
    }
    .product-card:hover{
      transform: translateY(-3px);
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
    }
    
    .badge-soft{
      background: rgba(177,15,46,.18);
      border: 1px solid rgba(255,35,79,.22);
      color: rgba(234,234,242,.92);
      border-radius: 999px;
      padding: .25rem .55rem;
      font-size: .8rem;
    }
    .stock{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      padding: .25rem .55rem;
      font-size: .8rem;
      color: rgba(234,234,242,.85);
    }

    .p-title{
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: .3px;
    }
    .p-desc{
      color: var(--muted);
      font-size: .95rem;
      min-height: 40px;
    }
    .price{
      font-weight: 800;
      letter-spacing: .4px;
    }
    .price small{
      font-weight: 600;
      color: rgba(234,234,242,.70);
    }

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

.nav-blur{
  background: rgba(7,7,10,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}


/* Hero */
    .hero{
      padding-bottom: 24px;
    }
    .hero-card{
      border-radius: calc(var(--radius) + 8px);
      background:
        radial-gradient(700px 320px at 20% 10%, rgba(177,15,46,.22), transparent 60%),
        radial-gradient(600px 320px at 80% 0%, rgba(255,35,79,.10), transparent 60%),
        linear-gradient(180deg, rgba(17,17,26,.72), rgba(7,7,10,.88));
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .hero-card::after{
      content:"";
      position:absolute; inset:-1px;
      background: linear-gradient(90deg, transparent, rgba(177,15,46,.25), transparent);
      opacity:.35;
      transform: translateX(-60%);
      animation: sweep 6.5s linear infinite;
      pointer-events:none;
    }
    @keyframes sweep{
      0% { transform: translateX(-70%); }
      100% { transform: translateX(70%); }
    }

    .eyebrow{
      display:inline-flex;
      gap:.5rem;
      align-items:center;
      padding:.35rem .6rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.25);
      color: rgba(234,234,242,.82);
      font-size: .9rem;
    }
    .hero-title{
      font-weight: 800;
      font-size: clamp(2.0rem, 4.2vw, 3.6rem);
      line-height: 1.05;
      margin-top: 14px;
    }
    .accent{
      color: var(--red-2);
      text-shadow: 0 0 18px rgba(255,35,79,.12);
    }
    .hero-sub{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 56ch;
      margin-top: 12px;
    }

    .btn-accent{
      background: linear-gradient(135deg, var(--red), rgba(177,15,46,.55));
      border: 1px solid rgba(255,255,255,.12);
      color: white;
      box-shadow: var(--glow);
    }
    .btn-accent:hover{ filter: brightness(1.08); }
    .btn-ghost{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(234,234,242,.92);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.06); }

    /* “Bat signal” shape (abstract) */
    .signal{
      width: min(420px, 100%);
      aspect-ratio: 1 / 1;
      border-radius: 28px;
      position: relative;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(240px 240px at 50% 40%, rgba(255,35,79,.18), transparent 70%),
        radial-gradient(260px 200px at 45% 55%, rgba(177,15,46,.20), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: 0 25px 90px rgba(0,0,0,.60);
      overflow: hidden;
    }
    .signal::before{
      content:"";
      position:absolute; inset:-30%;
      background: conic-gradient(from 210deg, transparent, rgba(255,35,79,.22), transparent 40%, rgba(255,35,79,.10), transparent 70%);
      animation: spin 10s linear infinite;
      opacity:.8;
    }
    @keyframes spin{
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .signal .sig-inner{
      position:absolute; inset:14px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
      border: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .sig-logo{
      width: 64%;
      max-width: 260px;
      opacity: .92;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.65));
    }

    /* Sellix-like store header */
    .store-head{
      margin-top: 28px;
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: rgba(17,17,26,.55);
      box-shadow: 0 16px 60px rgba(0,0,0,.40);
    }

    /* Filter bar */
    .filterbar{
      border-top: 1px solid var(--stroke);
      background: rgba(0,0,0,.15);
    }
    .form-control, .form-select{
      background: rgba(0,0,0,.25) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      color: rgba(234,234,242,.92) !important;
      border-radius: 12px !important;
    }
    .form-control::placeholder{ color: rgba(234,234,242,.45); }
    .input-group-text{
      background: rgba(0,0,0,.25) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      color: rgba(234,234,242,.75) !important;
      border-radius: 12px !important;
    }

.card-dark{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(400px 180px at 20% 0%, rgba(177,15,46,.14), transparent 60%),
    linear-gradient(180deg, rgba(15,15,22,.85), rgba(7,7,10,.85));
  box-shadow: 0 16px 50px rgba(0,0,0,.40);
}

.btn-accent{
  background: linear-gradient(135deg, var(--red), rgba(177,15,46,.55));
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  box-shadow: var(--glow);
}
.btn-accent:hover{ filter: brightness(1.08); }
.btn-ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,234,242,.92);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.table-darkglass{
  --bs-table-bg: rgba(0,0,0,.18);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  color: rgba(234,234,242,.92);
  border-color: rgba(255,255,255,.10);
}

.badge-soft{
  background: rgba(177,15,46,.18);
  border: 1px solid rgba(255,35,79,.22);
  color: rgba(234,234,242,.92);
}

.form-control, .form-select{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(234,234,242,.92) !important;
  border-radius: 12px !important;
}
.form-control::placeholder{ color: rgba(234,234,242,.45); }
/* ---- Fix extra blank space / full-height layout ---- */


body{
  min-height: 100vh;
  margin: 0;
}

/* Your header.php has: <div class="wrap"> ... <main> ... footer ...
   Make wrap a flex column so footer sits at bottom without creating empty space */
.wrap{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Let main take remaining height */
.wrap > main{
  flex: 1 0 auto;
}

/* Footer should not force extra space */
footer, .footer{
  flex: 0 0 auto;
}

/* Sometimes default margins add extra bottom space */
main, section{
  margin-bottom: 0;
}

/* If any container/card has an accidental min-height */
.card-dark, .hero-card{
  min-height: 0;
}
/* ----------------------------
   Bootstrap modal stacking fix
   ---------------------------- */

/* Keep site layers below modals */
.bg-grid { z-index: 0 !important; }


/* If navbar is fixed/sticky with z-index, keep it below the modal */
.navbar.fixed-top { z-index: 1030; }


/* Backdrop must be behind modal but above the page */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Modal must be above backdrop */
.modal {
  z-index: 1055 !important;
}

/* Sometimes modal content inherits weird stacking contexts */
.modal-dialog,
.modal-content {
  position: relative;
  z-index: 1056 !important;
}
/* Force dark modal theme */
.modal-content{
  background: linear-gradient(180deg, rgba(15,15,22,.92), rgba(7,7,10,.92)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(234,234,242,.92) !important;
}
.modal-header, .modal-footer{
  border-color: rgba(255,255,255,.08) !important;
}
/* -------------------------------
   FIX: Modal/backdrop above navbar
   ------------------------------- */

/* Keep background layer lowest */
.bg-grid { z-index: 0 !important; }

/* Navbar should be above page content but below modals */
.navbar.fixed-top { z-index: 1030 !important; }

/* Backdrop above everything (except modal) */
.modal-backdrop { z-index: 1040 !important; }

/* Modal above backdrop */
.modal { z-index: 1055 !important; }

/* Ensure modal content doesn't get trapped */
.modal-dialog,
.modal-content {
  position: relative;
  z-index: 1056 !important;
}
/* --- Bootstrap modal stacking fix (backdrop behind modal) --- */

/* Don't let site wrappers create a higher stacking context than modals */
.wrap,
.wrap * {
  z-index: auto;
}
.cl-btn{
    margin-left:auto !important;
}
/* Ensure modal is always above backdrop */
.modal {
  z-index: 1055 !important;
  position: fixed !important;
}

/* Backdrop below modal */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Your fixed navbar stays below modal */
.navbar.fixed-top {
  z-index: 1030 !important;
}
header, main, footer, .container, .hero, .store-head, .card-dark, .hero-card {
  z-index: auto !important;
}