/* =========================
   1BY1 CHROME/BLUE GLOBAL THEME
   Paste into SellAuth Custom CSS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --cb-bg: #070A12;
  --cb-text: rgba(255,255,255,.92);
  --cb-muted: rgba(255,255,255,.68);

  --cb-blue: #3b82f6;
  --cb-blue2:#0ea5e9;

  --cb-glass: rgba(12, 14, 20, .60);
  --cb-glass2: rgba(255,255,255,.035);
  --cb-border: rgba(255,255,255,.14);
  --cb-border2: rgba(255,255,255,.09);

  --cb-shadow: 0 22px 70px rgba(0,0,0,.58);
  --cb-glow: 0 0 60px rgba(59,130,246,.22);

  --cb-r: 18px;
}

/* Page background */
html, body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(59,130,246,.26), transparent 60%),
    radial-gradient(800px 520px at 90% 0%, rgba(14,165,233,.18), transparent 58%),
    var(--cb-bg) !important;
  color: var(--cb-text) !important;
}

/* Text */
p, span, small, li, label{
  color: var(--cb-muted) !important;
}
h1, h2, h3, h4{
  color: rgba(255,255,255,.95) !important;
  letter-spacing: -.6px !important;
}

/* Links */
a{
  color: rgba(255,255,255,.9) !important;
  text-decoration: none !important;
}
a:hover{ color: #fff !important; }

/* Global “card/panel” styling (covers most themes) */
.card, .panel, .box, .container .content, .content-box,
.product-card, .product, .store-product, .listing,
[class*="card"], [class*="panel"], [class*="box"]{
  background: var(--cb-glass) !important;
  border: 1px solid var(--cb-border2) !important;
  border-radius: var(--cb-r) !important;
  box-shadow: var(--cb-shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Subtle “chrome stroke” highlight */
.card, .panel, .box, [class*="card"], [class*="panel"]{
  position: relative;
  overflow: hidden;
}
.card::before, .panel::before, .box::before,
[class*="card"]::before, [class*="panel"]::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
  pointer-events:none;
  opacity:.85;
}

/* Hover polish + sheen sweep */
.card, .panel, .box, [class*="card"], [class*="panel"]{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover, .panel:hover, .box:hover, [class*="card"]:hover, [class*="panel"]:hover{
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.32) !important;
  box-shadow: 0 28px 95px rgba(0,0,0,.62), var(--cb-glow) !important;
}
.card::after, .panel::after, .box::after,
[class*="card"]::after, [class*="panel"]::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.14), transparent 65%);
  transform: translateX(-45%);
  opacity:0;
  transition: transform .8s ease, opacity .35s ease;
  pointer-events:none;
}
.card:hover::after, .panel:hover::after, .box:hover::after,
[class*="card"]:hover::after, [class*="panel"]:hover::after{
  transform: translateX(45%);
  opacity:.55;
}

/* Buttons */
button, .btn, .button, [type="submit"],
a.btn, a.button, .btn-primary, .primary{
  border-radius: 999px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.92) !important;
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}

button:hover, .btn:hover, .button:hover, [type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.35) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 28px rgba(59,130,246,.18);
}

/* Primary / buy / checkout buttons */
.btn-primary, .primary, .checkout-btn, .buy-btn,
button.primary, a.primary{
  border: none !important;
  background: linear-gradient(135deg, var(--cb-blue), var(--cb-blue2)) !important;
  box-shadow: 0 0 44px rgba(59,130,246,.28) !important;
}
.btn-primary:hover, .primary:hover, .checkout-btn:hover, .buy-btn:hover{
  filter: brightness(1.06);
}

/* Inputs */
input, select, textarea{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.92) !important;
  outline: none !important;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.16) !important;
}

/* Dividers */
hr, .divider, [class*="divider"]{
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important;
  opacity:.9;
}

/* Badges/tags */
.badge, .tag, [class*="badge"], [class*="tag"]{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 800 !important;
}

/* Make page sections breathe */
section, .section, [class*="section"]{
  margin-top: 18px !important;
}
/* Deep Dark Theme Overrides */
body, .main-content {
    background-color: #050505 !important;
    color: #ffffff !important;
}

/* Container Layout (Flexbox) */
.product-page-container {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

/* Styling the Variant/Price Buttons */
.variant-selector-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.variant-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* Gives it the pill shape */
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

/* Active/Hover State - Blue Glow */
.variant-item:hover, .variant-item.active {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
}

.variant-name {
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.variant-price {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Custom Status Badge (Undetected) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #10b981; /* Green */
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.status-dot {
    height: 8px;
    width: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}/* ===== Blitz-style Product Page ===== */
.col-xl-3{min-width:260px}
.bp-card{
  display:grid;grid-template-columns: 1.12fr .88fr;gap:22px;
  border-radius:26px;overflow:hidden;
  background: rgba(12,14,20,.45);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}
@media(max-width:980px){ .bp-card{grid-template-columns:1fr} }

.bp-left{padding:22px}
.bp-right{padding:22px;border-left:1px solid rgba(255,255,255,.08)}
@media(max-width:980px){ .bp-right{border-left:none;border-top:1px solid rgba(255,255,255,.08)} }

.bp-media{
  border-radius:18px;overflow:hidden;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
}
.bp-mainimg{width:100%;height:auto;display:block;object-fit:cover}
.bp-fallback{aspect-ratio:16/9;background:radial-gradient(800px 420px at 30% 10%, rgba(59,130,246,.25), transparent 60%), rgba(5,10,20,.55)}

.bp-thumbs{display:flex;gap:10px;margin-top:12px;overflow:auto;padding-bottom:4px}
.bp-thumb{
  border:none;background:transparent;padding:0;cursor:pointer;
  border-radius:14px;overflow:hidden;flex:0 0 auto;
  width:92px;height:58px;
  border:1px solid rgba(255,255,255,.12);
}
.bp-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.bp-thumb:hover{border-color:rgba(14,165,233,.45)}

.bp-title{margin:0;color:#fff;font-weight:1000;letter-spacing:-.6px;font-size:34px;line-height:1.1}
.bp-sub{margin:10px 0 14px;color:rgba(255,255,255,.72);line-height:1.55}

.bp-variantGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media(max-width:520px){ .bp-variantGrid{grid-template-columns:1fr} }

.bp-variant{display:block}
.bp-variant input{position:absolute;opacity:0;pointer-events:none}
.bp-variantInner{
  border-radius:18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  padding:14px 14px;
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.bp-variantInner:hover{
  transform: translateY(-2px);
  border-color: rgba(14,165,233,.45);
  box-shadow: 0 18px 44px rgba(0,0,0,.35), 0 0 26px rgba(59,130,246,.14);
}
.bp-variant input:checked + .bp-variantInner{
  border-color: rgba(59,130,246,.70);
  box-shadow: 0 0 0 2px rgba(59,130,246,.25), 0 18px 44px rgba(0,0,0,.35);
}

.bp-variantTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bp-variantName{color:#fff;font-weight:1000;letter-spacing:-.2px}
.bp-stock{color:rgba(34,197,94,.92);font-weight:900;font-size:12px}

.bp-variantPrice{color:#3b82f6;font-weight:1000;font-size:18px}

.bp-qtyRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 14px}
.bp-qtyLabel{color:rgba(255,255,255,.75);font-weight:900}
.bp-qty{
  display:flex;align-items:center;gap:10px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 10px;
}
.bp-qtyBtn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;font-weight:1000;cursor:pointer;
}
.bp-qtyInput{
  width:54px;background:transparent;border:none;
  color:#fff;font-weight:900;text-align:center;outline:none;
}

.bp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.bp-btn{
  flex:1 1 180px;
  border-radius:999px;
  padding:12px 18px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.bp-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 28px rgba(59,130,246,.18);
}
.bp-btn.primary{
  border:none;
  background: linear-gradient(135deg,#3b82f6,#0ea5e9);
  box-shadow:0 0 44px rgba(59,130,246,.28);
}
.bp-btn.primary:hover{filter:brightness(1.06)}
.bp-btn.ghost{background: rgba(255,255,255,.05)}

.bp-note{
  margin-top:14px;
  color:rgba(255,255,255,.60);
  font-weight:800;
  font-size:13px;
}

.bp-desc{
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  line-height:1.65;
}/* ===== FIX: product card CSS rendering as text ===== */
/* (this must be in custom.css, not inside .njk snippets) */

.product-card{
  position: relative;
  display: block;
  border-radius: 22px !important;
  overflow: hidden;
  background: rgba(12, 14, 20, .55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  text-decoration: none !important;
  height: 100%;
  transform: translateZ(0);
}

.product-card:hover{
  border-color: rgba(59,130,246,.40);
  box-shadow: 0 22px 80px rgba(0,0,0,.55), 0 0 50px rgba(59,130,246,.14);
  transform: translateY(-2px);
}

/* Image wrapper: forces correct size so it’s not tiny */
.product-card .card-img-top{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* change to 16/10 if you want taller */
  background:
    radial-gradient(800px 420px at 30% 10%, rgba(59,130,246,.22), transparent 60%),
    rgba(5,10,20,.60);
  overflow: hidden;
}

/* Image fills wrapper */
.product-card .card-img-top img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* can change to scale-down */
  display: block;
}

/* Overlay button */
.product-card .overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));
  transition: opacity .25s ease;
  pointer-events: none;
}

.product-card:hover .overlay{
  opacity: 1;
}

.product-card .overlay .btn{
  pointer-events: auto;
  border-radius: 999px;
  font-weight: 900;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(59,130,246,.85);
}

/* Badges */
.product-card .badges{
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

.product-card .badges > div{
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,.25);
}

/* Body spacing */
.product-card .card-body{
  padding: 14px 16px 16px;
}

.product-card .info{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.product-card .price{
  margin:0;
  font-weight: 1000;
  color: rgba(255,255,255,.90);
}

.product-card .text-primary{
  margin:0;
  font-weight: 900;
  color: rgba(59,130,246,.95) !important;
}

.product-card .card-title{
  margin:0;
  color:#fff;
  font-weight: 1000;
  letter-spacing: -.2px;
  line-height: 1.2;
}/* =========================
   1BY1 / Products Page Skin
   Glass + Pills + Soft Cards
========================= */

.p-page{
  position: relative;
}

/* HERO */
.p-hero{
  position: relative;
  padding: 84px 16px 28px;
}
.p-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(var(--cl-accent), .20), transparent 60%),
    radial-gradient(700px 420px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 420px at 80% 10%, rgba(255,255,255,.04), transparent 60%);
  pointer-events:none;
}
.p-heroInner{
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}
.p-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.p-title{
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}
.p-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
}

/* CONTROLS PANEL */
.p-controls{
  margin: 26px auto 0;
  max-width: 920px;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
.p-searchRow{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.p-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.p-searchIcon{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.65);
}
.p-searchInput{
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}
.p-searchInput::placeholder{
  color: rgba(255,255,255,.45);
}
.p-clearBtn{
  border: 1px solid rgba(var(--cl-accent), .35);
  background: rgba(var(--cl-accent), .12);
  color: rgba(255,255,255,.92);
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12px;
  transition: .2s ease;
}
.p-clearBtn:hover{
  background: rgba(var(--cl-accent), .20);
  transform: translateY(-1px);
}
.p-count{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* CHIPS */
.p-chips{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 10px;
}
.p-