/* =========================================================
   Varam Crackers — Shared Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --maroon-1:#1a0505;
  --maroon-2:#3a0a0a;
  --maroon-3:#5c0e0e;
  --red:#c0392b;
  --red-2:#e8492f;
  --orange:#ff7a1a;
  --gold:#ffcc33;
  --gold-2:#f4b400;
  --cream:#fff8ee;
  --text-light:#fff3e0;
  --text-muted:#e8c9a8;
  --dark-glass: rgba(20,6,6,0.65);
  --shadow-glow: 0 0 25px rgba(255,204,51,0.35);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  color:var(--text-light);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,122,26,0.10), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(255,204,51,0.10), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(192,57,43,0.18), transparent 45%),
    linear-gradient(180deg, var(--maroon-1) 0%, var(--maroon-2) 45%, var(--maroon-1) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

h1,h2,h3,h4,.brand,.btn,.nav-links a{
  font-family:'Baloo 2', sans-serif;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
input, select, textarea, button{ font-family:inherit; }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* Sparkle dots overlay */
.sparkle-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,204,51,0.6), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,122,26,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 25%, rgba(255,204,51,0.5), transparent 60%),
    radial-gradient(2px 2px at 55% 15%, rgba(255,255,255,0.3), transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{ opacity:.5; }
  100%{ opacity:1; }
}

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--dark-glass);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,204,51,0.25);
  box-shadow:0 2px 20px rgba(0,0,0,0.35);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size:1.5rem; font-weight:700; color:var(--gold);
  letter-spacing:.3px;
}
.brand .flame{ font-size:1.7rem; filter:drop-shadow(0 0 8px rgba(255,150,30,0.8)); }
.brand small{ display:block; font-family:'Poppins',sans-serif; font-size:.6rem; font-weight:400; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:10px 16px; border-radius:999px; font-weight:600; font-size:.98rem;
  color:var(--text-light); transition:all .25s ease; position:relative;
}
.nav-links a:hover{ background:rgba(255,204,51,0.12); color:var(--gold); }
.nav-links a.active{
  background:linear-gradient(135deg, var(--gold), var(--orange));
  color:#2b0a02;
  box-shadow:var(--shadow-glow);
}
.nav-links a.cart-link{ display:flex; align-items:center; gap:6px; }
.cart-badge{
  background:var(--red-2); color:#fff; font-size:.7rem; font-weight:700;
  border-radius:999px; min-width:20px; height:20px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px;
}

.nav-toggle{
  display:none; background:none; border:none; color:var(--gold); font-size:1.6rem; cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(20,6,6,0.97); backdrop-filter:blur(10px);
    padding:12px; border-bottom:1px solid rgba(255,204,51,0.25);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ text-align:center; }
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px; border-radius:999px; font-weight:700; font-size:1rem;
  border:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
  color:#2b0a02; box-shadow:0 6px 20px rgba(255,150,30,0.35);
}
.btn-primary:hover{ box-shadow:0 10px 28px rgba(255,150,30,0.5); }
.btn-outline{
  background:transparent; color:var(--gold); border:2px solid var(--gold);
}
.btn-outline:hover{ background:rgba(255,204,51,0.12); }
.btn-whatsapp{
  background:linear-gradient(135deg,#25d366,#128c4a); color:#fff;
  box-shadow:0 6px 20px rgba(37,211,102,0.35);
}
.btn-block{ width:100%; }
.btn-sm{ padding:8px 16px; font-size:.85rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ================= HERO ================= */
.hero{
  position:relative; padding:90px 24px 70px; text-align:center; overflow:hidden;
}
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-content{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
.hero-tag{
  display:inline-block; padding:6px 18px; border-radius:999px; margin-bottom:18px;
  background:rgba(255,204,51,0.12); border:1px solid rgba(255,204,51,0.4);
  color:var(--gold); font-weight:600; font-size:.85rem; letter-spacing:1px;
}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.1; margin:0 0 18px;
  background:linear-gradient(135deg,#fff8ee, var(--gold) 55%, var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:1.15rem; color:var(--text-muted); margin:0 0 32px; line-height:1.6; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.admin-hero-btn{
  position:absolute; top:18px; right:24px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px; font-size:.8rem; font-weight:700;
  color:var(--gold); border:1.5px solid rgba(255,204,51,0.4); background:rgba(20,6,6,0.55);
  backdrop-filter:blur(6px); transition:all .2s ease;
}
.admin-hero-btn:hover{ background:rgba(255,204,51,0.15); border-color:var(--gold); }
@media (max-width:560px){
  .admin-hero-btn{ top:10px; right:12px; padding:7px 12px; font-size:.72rem; }
}

/* ================= SECTIONS ================= */
section{ position:relative; z-index:1; padding:70px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
.section-tag{ color:var(--gold); font-weight:700; letter-spacing:2px; font-size:.8rem; text-transform:uppercase; }
.section-head h2{ font-size:clamp(1.7rem,3.5vw,2.4rem); margin:10px 0 12px; color:var(--cream); }
.section-head p{ color:var(--text-muted); line-height:1.6; }

/* ================= CARDS / GRID ================= */
.grid{ display:grid; gap:26px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,204,51,0.18);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,204,51,0.5);
  box-shadow:0 14px 34px rgba(0,0,0,0.35), var(--shadow-glow);
}
.card .icon{ font-size:2.4rem; margin-bottom:14px; display:block; }
.card h3{ margin:0 0 8px; color:var(--gold); font-size:1.15rem; }
.card p{ color:var(--text-muted); font-size:.92rem; line-height:1.6; margin:0; }

.stat-card{ text-align:center; }
.stat-card .num{
  font-family:'Baloo 2',sans-serif; font-size:2.4rem; font-weight:800;
  background:linear-gradient(135deg,var(--gold),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .label{ color:var(--text-muted); font-size:.9rem; margin-top:4px; }

/* ================= HOME SHOWCASE CARDS ================= */
.showcase-card{
  position:relative; border-radius:var(--radius); overflow:hidden; height:220px;
  border:1px solid rgba(255,204,51,0.18); background:rgba(0,0,0,0.15);
}
.showcase-card img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block; }
.showcase-card:hover img{ transform:scale(1.08); }
.showcase-label{
  position:absolute; bottom:0; left:0; right:0; padding:14px 16px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
  color:var(--cream); font-weight:700; display:flex; align-items:center; gap:8px; font-size:.98rem;
}
.showcase-label span{ font-size:1.3rem; }

/* ================= PRODUCT CARD ================= */
.category-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid rgba(255,204,51,0.35);
  background:rgba(255,255,255,0.03); color:var(--text-light); font-weight:600; font-size:.88rem;
  cursor:pointer; transition:all .2s ease;
}
.chip:hover{ border-color:var(--gold); }
.chip.active{ background:linear-gradient(135deg,var(--gold),var(--orange)); color:#2b0a02; border-color:transparent; }

.product-card{
  display:flex; flex-direction:column; background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,204,51,0.18); border-radius:var(--radius); overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{ transform:translateY(-6px); border-color:rgba(255,204,51,0.5); box-shadow:0 14px 34px rgba(0,0,0,0.35), var(--shadow-glow); }
.product-media{
  height:170px; display:flex; align-items:center; justify-content:center; font-size:3.4rem;
  background:radial-gradient(circle at 50% 30%, rgba(255,204,51,0.18), transparent 70%), rgba(0,0,0,0.15);
  position:relative; overflow:hidden;
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.1) contrast(1.05);
  transition:transform .3s ease;
}
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-fallback-icon{ font-size:3.4rem; line-height:1; }
.product-tag{
  position:absolute; top:10px; left:10px; background:var(--red-2); color:#fff;
  font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px;
}
.product-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3{ margin:0; color:var(--cream); font-size:1.05rem; }
.product-cat{ color:var(--gold); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.product-desc{ color:var(--text-muted); font-size:.85rem; line-height:1.5; margin:0; flex:1; }
.product-price{ font-size:1.25rem; font-weight:800; color:var(--gold); font-family:'Baloo 2',sans-serif; }
.product-price span{ font-size:.75rem; color:var(--text-muted); font-weight:500; }

.qty-row{ display:flex; align-items:center; gap:10px; }
.stepper{ display:flex; align-items:center; border:1.5px solid rgba(255,204,51,0.35); border-radius:999px; overflow:hidden; }
.stepper button{
  width:32px; height:32px; background:rgba(255,204,51,0.08); color:var(--gold); border:none;
  font-size:1.1rem; cursor:pointer; font-weight:700;
}
.stepper button:hover{ background:rgba(255,204,51,0.2); }
.stepper input{
  width:42px; text-align:center; background:transparent; border:none; color:var(--text-light); font-weight:600;
}
.stepper input:focus{ outline:none; }

/* ================= PRODUCT LIST VIEW ================= */
.product-list{ display:flex; flex-direction:column; gap:18px; }
.product-row{
  display:flex; align-items:center; gap:22px; padding:18px;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,204,51,0.18); border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-row:hover{
  transform:translateY(-3px); border-color:rgba(255,204,51,0.5);
  box-shadow:0 12px 28px rgba(0,0,0,0.3), var(--shadow-glow);
}
.product-row-media{
  position:relative; width:110px; height:110px; border-radius:12px; overflow:hidden; flex-shrink:0;
  background:radial-gradient(circle at 50% 30%, rgba(255,204,51,0.18), transparent 70%), rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem;
}
.product-row-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05); }
.product-row-media .product-tag{ position:absolute; top:6px; left:6px; font-size:.6rem; padding:3px 8px; }
.product-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.product-row-body h3{ margin:2px 0 4px; color:var(--cream); font-size:1.08rem; }
.product-row-body .product-desc{ margin:0; }
.product-row-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0; }
.qty-label{ margin:0; font-size:.78rem; color:var(--text-muted); font-weight:600; }

/* ===== Quantity stepper (− / +) — shared by product & admin pages ===== */
.qty-stepper{
  display:inline-flex; align-items:center; border:1.5px solid rgba(255,204,51,0.3);
  border-radius:10px; background:rgba(0,0,0,0.25); overflow:hidden;
}
.qty-stepper:focus-within{ border-color:var(--gold); }
.qty-stepper .qty-btn{
  width:32px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,204,51,0.08); color:var(--gold); border:none; padding:0;
  font-size:1.15rem; font-weight:700; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease;
  -webkit-user-select:none; user-select:none;
}
.qty-stepper .qty-btn:hover{ background:rgba(255,204,51,0.22); }
.qty-stepper .qty-btn:active{ background:rgba(255,204,51,0.34); }
.qty-stepper .qty-btn:disabled{ opacity:.35; cursor:not-allowed; background:rgba(255,204,51,0.05); }
.qty-stepper .qty-input,
.qty-stepper .stock-qty-input{
  width:48px; height:38px; text-align:center; padding:0 2px; border:none;
  background:transparent; color:var(--text-light); font-weight:700;
}
.qty-stepper .qty-input:focus,
.qty-stepper .stock-qty-input:focus{ outline:none; }
/* hide native number spinner arrows */
.qty-stepper input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.qty-stepper input[type=number]::-webkit-outer-spin-button,
.qty-stepper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

@media (max-width:720px){
  .product-row{ flex-wrap:wrap; }
  .product-row-actions{ width:100%; align-items:stretch; }
  .qty-row{ justify-content:space-between; }
}

.low-stock-note{ color:#ffb020; font-size:.78rem; font-weight:700; margin:2px 0 0; }
.product-row.out-of-stock{ opacity:.65; }
.product-row.out-of-stock .product-row-media img{ filter:grayscale(0.6); }
.stock-badge{
  position:absolute; top:6px; right:6px; z-index:2; background:rgba(20,6,6,0.9); color:#ff8a80;
  font-size:.62rem; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px;
  border:1px solid rgba(255,138,128,0.5);
}

/* ================= TOAST ================= */
.toast{
  position:fixed; bottom:100px; right:24px; z-index:400;
  background:linear-gradient(135deg,var(--gold),var(--orange)); color:#2b0a02;
  padding:14px 22px; border-radius:12px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(20px); transition:all .35s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ================= WHATSAPP FLOAT ================= */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:300;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#25d366,#128c4a); color:#fff;
  padding:14px 20px; border-radius:999px; font-weight:700; font-size:.95rem;
  box-shadow:0 10px 30px rgba(18,140,74,0.5);
  animation: pulseWa 2.4s ease-in-out infinite;
}
.wa-float:hover{ transform:scale(1.05); }
.wa-float svg{ width:24px; height:24px; }
@keyframes pulseWa{
  0%,100%{ box-shadow:0 10px 30px rgba(18,140,74,0.5); }
  50%{ box-shadow:0 10px 40px rgba(37,211,102,0.85); }
}
@media (max-width:560px){
  .wa-float span{ display:none; }
  .wa-float{ padding:16px; }
}

/* ================= FOOTER ================= */
.site-footer{
  background:rgba(10,3,3,0.85); border-top:1px solid rgba(255,204,51,0.2);
  padding:56px 0 24px; margin-top:60px;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--gold); margin:0 0 16px; font-size:1rem; }
.footer-grid p, .footer-grid a{ color:var(--text-muted); font-size:.9rem; line-height:2; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; text-align:center;
  color:var(--text-muted); font-size:.82rem;
}
.customer-file-widget{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.file-status{ font-size:.82rem; color:var(--text-muted); }
.file-status.connected{ color:#4ade80; font-weight:600; }
.form-note{
  display:flex; gap:10px; align-items:flex-start; background:rgba(37,211,102,0.08);
  border:1px solid rgba(37,211,102,0.3); border-radius:var(--radius-sm); padding:12px 16px;
  font-size:.82rem; color:var(--text-muted); margin-bottom:20px;
}
.social-row{ display:flex; gap:12px; margin-top:6px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,204,51,0.1); border:1px solid rgba(255,204,51,0.3);
}
.social-row a:hover{ background:var(--gold); color:#2b0a02; }

/* ================= FORMS ================= */
.form-panel{
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,204,51,0.2); border-radius:var(--radius); padding:34px;
}
.form-row{ display:grid; gap:18px; margin-bottom:18px; }
.form-row.two{ grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .form-row.two{ grid-template-columns:1fr; } }
label{ display:block; font-size:.85rem; font-weight:600; color:var(--gold); margin-bottom:8px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], select, textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid rgba(255,204,51,0.25);
  background:rgba(0,0,0,0.25); color:var(--text-light); font-size:.95rem; transition:border-color .2s ease;
}
input::placeholder, textarea::placeholder{ color:rgba(232,201,168,0.55); }

/* password field with show/hide eye toggle */
.pw-field{ position:relative; }
.pw-field input{ padding-right:48px; }
.pw-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; padding:0; cursor:pointer;
  color:var(--text-muted); border-radius:8px; transition:color .18s ease, background .18s ease;
}
.pw-toggle:hover{ color:var(--gold); background:rgba(255,204,51,0.12); }
.pw-toggle svg{ width:20px; height:20px; display:block; }
.pw-toggle .eye-off{ display:none; }
.pw-toggle.showing{ color:var(--gold); }
.pw-toggle.showing .eye-on{ display:none; }
.pw-toggle.showing .eye-off{ display:block; }
/* kill Edge/IE's built-in reveal button so there aren't two */
.pw-field input::-ms-reveal, .pw-field input::-ms-clear{ display:none; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold); }
input[readonly]{ background:rgba(255,204,51,0.08); font-weight:700; color:var(--gold); cursor:not-allowed; }
textarea{ resize:vertical; min-height:90px; }
.field-hint{ font-size:.75rem; color:var(--text-muted); margin-top:6px; }
.error-msg{ color:#ff8a80; font-size:.78rem; margin-top:6px; display:none; }
.invalid{ border-color:#ff5c4d !important; }
.invalid + .error-msg{ display:block; }

/* ================= CART PAGE ================= */
.cart-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }
.cart-item{
  display:flex; align-items:center; gap:16px; padding:16px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,204,51,0.15); background:rgba(255,255,255,0.03); margin-bottom:14px;
}
.cart-item .media{ font-size:2rem; width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,204,51,0.1); flex-shrink:0; overflow:hidden; }
.cart-item .media img{ width:100%; height:100%; object-fit:cover; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .info h4{ margin:0 0 4px; color:var(--cream); font-size:.98rem; }
.cart-item .info .unit-price{ color:var(--text-muted); font-size:.8rem; }
.cart-item .subtotal{ font-weight:700; color:var(--gold); min-width:80px; text-align:right; }
.cart-item .remove-btn{ background:none; border:none; color:#ff8a80; font-size:1.2rem; cursor:pointer; padding:4px 8px; }
.cart-item-warning{ color:#ff8a80; font-size:.78rem; font-weight:600; margin-top:4px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state .icon{ font-size:3rem; margin-bottom:16px; }

.summary-row{ display:flex; justify-content:space-between; padding:10px 0; color:var(--text-muted); font-size:.92rem; border-bottom:1px dashed rgba(255,204,51,0.2); }
.summary-row.total{ color:var(--gold); font-weight:800; font-size:1.15rem; border-bottom:none; padding-top:16px; }

.badge-note{
  display:flex; gap:10px; align-items:flex-start; background:rgba(255,204,51,0.08);
  border:1px solid rgba(255,204,51,0.25); border-radius:var(--radius-sm); padding:14px 16px; font-size:.85rem; color:var(--text-muted);
  margin-top:18px;
}

/* misc */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.divider{ height:1px; background:rgba(255,204,51,0.15); margin:24px 0; }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pill-list li{
  background:rgba(255,204,51,0.08); border:1px solid rgba(255,204,51,0.25); padding:8px 16px;
  border-radius:999px; font-size:.85rem; color:var(--text-muted); font-weight:600;
}
.banner-cta{
  text-align:center; padding:60px 24px; border-radius:24px; margin:0 24px;
  background:linear-gradient(135deg, rgba(255,122,26,0.18), rgba(255,204,51,0.1));
  border:1px solid rgba(255,204,51,0.3);
}
.banner-cta h2{ color:var(--cream); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 12px; }
.banner-cta p{ color:var(--text-muted); margin:0 0 26px; }

/* ================= COLLAPSIBLE SECTION ================= */
.btn.collapse-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn.collapse-btn .chev{
  font-size:.85em; line-height:1; transition:transform .22s ease; display:inline-block;
}
.btn.collapse-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.btn.collapse-btn .chev-right{ transition:transform .22s ease; display:inline-block; }
.btn.collapse-btn:hover .chev-right{ transform:translateX(4px); }
.collapse-body{ animation:collapseIn .22s ease; }
@keyframes collapseIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ================= EXCEL STOCK IMPORT ================= */
.drop-zone{
  border:2px dashed rgba(255,204,51,0.35); border-radius:var(--radius); padding:30px 20px;
  text-align:center; background:rgba(0,0,0,0.18); cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.drop-zone:hover{ border-color:var(--gold); background:rgba(255,204,51,0.07); }
.drop-zone.dragging{ border-color:var(--gold); background:rgba(255,204,51,0.14); transform:scale(1.01); }
.drop-zone .dz-icon{ font-size:2.2rem; margin-bottom:10px; }
.drop-zone .dz-main{ color:var(--cream); font-weight:700; margin:0 0 6px; }
.drop-zone .dz-sub{ color:var(--text-muted); font-size:.8rem; margin:0; }
.drop-zone input[type=file]{ display:none; }

.import-summary{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px;
}
.import-chip{
  font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px;
  background:rgba(255,204,51,0.1); border:1px solid rgba(255,204,51,0.3); color:var(--text-muted);
}
.import-chip.ok{ color:#4ade80; border-color:rgba(74,222,128,0.4); background:rgba(74,222,128,0.1); }
.import-chip.warn{ color:#ffb020; border-color:rgba(255,176,32,0.4); background:rgba(255,176,32,0.1); }

.import-table-wrap{ max-height:320px; overflow-y:auto; border:1px solid rgba(255,204,51,0.18); border-radius:var(--radius-sm); }
table.import-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
table.import-table th, table.import-table td{ padding:9px 12px; text-align:left; border-bottom:1px solid rgba(255,204,51,0.12); }
table.import-table th{
  position:sticky; top:0; z-index:1; background:#2b0808; color:var(--gold);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.5px;
}
table.import-table td{ color:var(--text-light); }
table.import-table tr:last-child td{ border-bottom:none; }
table.import-table td.num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
table.import-table td.was{ color:var(--text-muted); }
table.import-table td.now{ color:var(--gold); }
table.import-table .renamed{ display:block; font-size:.72rem; color:var(--text-muted); margin-top:2px; }
.delta-up{ color:#4ade80; font-weight:700; }
.delta-down{ color:#ff8a80; font-weight:700; }
.delta-same{ color:var(--text-muted); }

.import-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.import-actions .btn{ flex:1; min-width:180px; }
.import-unmatched{
  margin-top:14px; background:rgba(255,176,32,0.08); border:1px solid rgba(255,176,32,0.3);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:.8rem; color:var(--text-muted);
}
.import-unmatched strong{ color:#ffb020; }
.import-unmatched ul{ margin:8px 0 0; padding-left:18px; list-style:disc; }
.import-unmatched li{ margin:3px 0; }

/* ================= ADMIN TOPBAR (profile / settings) ================= */
.admin-topbar{
  display:flex; align-items:center; gap:12px; justify-content:flex-end;
  margin-bottom:20px; position:relative;
}
.admin-topbar .topbar-hello{
  margin-right:auto; color:var(--text-muted); font-size:.9rem;
}
.admin-topbar .topbar-hello strong{ color:var(--cream); font-weight:700; }
.icon-btn{
  width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; padding:0;
  background:rgba(255,204,51,0.08); border:1.5px solid rgba(255,204,51,0.3); color:var(--gold);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-btn:hover{ background:rgba(255,204,51,0.2); border-color:var(--gold); transform:translateY(-1px); }
.icon-btn.active{ background:var(--gold); border-color:var(--gold); color:#3a0a0a; }
.icon-btn svg{ width:22px; height:22px; display:block; }

.admin-popover{
  display:none; position:absolute; top:56px; right:0; z-index:40; width:min(340px, calc(100vw - 40px));
  background:linear-gradient(160deg, #2b0808, #1d0505);
  border:1px solid rgba(255,204,51,0.35); border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(0,0,0,0.55); padding:20px; text-align:left;
}
.admin-popover.open{ display:block; }
.admin-popover h3{ margin:0 0 4px; color:var(--cream); font-size:1rem; }
.admin-popover .pop-note{ color:var(--text-muted); font-size:.78rem; line-height:1.5; margin:0 0 16px; }
.admin-popover label{ font-size:.78rem; }
.admin-popover .form-row{ margin-bottom:12px; }
.admin-popover .divider{ margin:16px 0; }

.profile-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.profile-avatar{
  width:52px; height:52px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#3a0a0a;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.15rem; letter-spacing:.5px;
}
.profile-head .who{ min-width:0; }
.profile-head .who .nm{ color:var(--cream); font-weight:700; font-size:1rem; margin:0; overflow-wrap:anywhere; }
.role-badge{
  display:inline-block; margin-top:4px; font-size:.68rem; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
  background:rgba(255,204,51,0.14); border:1px solid rgba(255,204,51,0.35); color:var(--gold);
}
.pw-strength{ font-size:.75rem; font-weight:700; margin-top:6px; }
.pw-strength.weak{ color:#ff8a80; }
.pw-strength.fair{ color:#ffb020; }
.pw-strength.good{ color:#4ade80; }

@media (max-width:600px){
  .admin-popover{ right:auto; left:0; }
  .admin-topbar .topbar-hello{ font-size:.82rem; }
}

/* ================= ADMIN PANEL ================= */
.admin-row{
  display:flex; align-items:center; gap:18px; padding:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,204,51,0.18); border-radius:var(--radius-sm); margin-bottom:12px;
}
.admin-row-media{
  width:64px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:rgba(255,204,51,0.08);
}
.admin-row-media img{ width:100%; height:100%; object-fit:cover; }
.admin-row-body{ flex:1; min-width:0; }
.admin-row-body h4{ margin:2px 0; color:var(--cream); font-size:.98rem; }
.admin-row-price{ color:var(--text-muted); font-size:.85rem; }
.admin-row-toggle{ display:flex; align-items:center; gap:14px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.stock-state{ font-size:.8rem; font-weight:700; min-width:96px; text-align:right; }
.stock-state.in{ color:#4ade80; }
.stock-state.out{ color:#ff8a80; }
.qty-edit{ display:flex; align-items:center; gap:8px; }

.switch{ position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.slider{
  position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,0.15);
  border-radius:999px; transition:.2s; border:1px solid rgba(255,204,51,0.3);
}
.slider::before{
  content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:linear-gradient(135deg,var(--gold),var(--orange)); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

@media (max-width:600px){
  .admin-row{ flex-wrap:wrap; }
}

/* ----- Admin stock table (simple data table — no photos/cards) ----- */
.admin-stock-table-wrap{
  overflow-x:auto; border:1px solid rgba(255,204,51,0.18); border-radius:var(--radius-sm);
}
table.admin-stock-table{ width:100%; border-collapse:collapse; min-width:760px; table-layout:fixed; }
table.admin-stock-table th{
  text-align:left; padding:12px 14px; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--gold); background:rgba(255,204,51,0.08);
  border-bottom:1px solid rgba(255,204,51,0.18); white-space:nowrap;
}
table.admin-stock-table td{
  padding:12px 14px; border-bottom:1px solid rgba(255,204,51,0.1); vertical-align:middle;
  color:var(--text-light); font-size:.88rem; overflow-wrap:break-word;
}
table.admin-stock-table tr:last-child td{ border-bottom:none; }
table.admin-stock-table tr:hover td{ background:rgba(255,255,255,0.02); }
/* Fixed column widths so the header always sits directly over its
   column's content, no matter how wide any single row's text is. */
table.admin-stock-table th:nth-child(1), table.admin-stock-table td:nth-child(1){ width:26%; color:var(--cream); font-weight:700; }
table.admin-stock-table th:nth-child(2), table.admin-stock-table td:nth-child(2){ width:20%; color:var(--text-muted); }
table.admin-stock-table th:nth-child(3), table.admin-stock-table td:nth-child(3){ width:14%; color:var(--text-muted); }
table.admin-stock-table th:nth-child(4), table.admin-stock-table td:nth-child(4){ width:12%; }
table.admin-stock-table th:nth-child(5), table.admin-stock-table td:nth-child(5){ width:10%; }
table.admin-stock-table th:nth-child(6), table.admin-stock-table td:nth-child(6){ width:18%; }
table.admin-stock-table td.num, table.admin-stock-table th.num{ text-align:center; }
table.admin-stock-table td.admin-stock-update, table.admin-stock-table th.admin-stock-update{ text-align:center; }
table.admin-stock-table .stock-state{ font-size:.88rem; font-weight:700; }
table.admin-stock-table .stock-state.in{ color:#4ade80; }
table.admin-stock-table .stock-state.low{ color:#ffb020; }
table.admin-stock-table .stock-state.out{ color:#ff8a80; }
.stock-warning{ display:block; font-size:.68rem; font-weight:700; margin-top:2px; }
.stock-warning.low{ color:#ffb020; }
.stock-warning.out{ color:#ff8a80; }
table.admin-stock-table .qty-edit{ display:inline-flex; flex-wrap:nowrap; justify-content:center; }

@media (max-width:600px){
  table.admin-stock-table{ min-width:680px; }
}

.admin-footer-link{ opacity:.5; font-size:.75rem; }
.admin-footer-link:hover{ opacity:1; }


/* =========================================================
   HOME PAGE — CREATIVE / ANIMATED LAYER
   (scoped mostly to .home-* and [data-reveal] so other pages
   are untouched)
   ========================================================= */

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal="flip"]{ transform:perspective(900px) rotateX(-14deg) translateY(30px); }
[data-reveal].revealed{
  opacity:1;
  transform:none;
}

/* ---------- HERO UPGRADES ---------- */
.hero{ padding:110px 24px 90px; min-height:88vh; display:flex; align-items:center; }
.hero-content{ width:100%; }

/* soft moving colour orbs behind the hero */
.hero-orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-orbs i{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  animation:orbDrift 18s ease-in-out infinite alternate;
}
.hero-orbs i:nth-child(1){ width:340px; height:340px; left:-80px; top:6%;  background:rgba(255,122,26,.45); animation-duration:20s; }
.hero-orbs i:nth-child(2){ width:300px; height:300px; right:-70px; top:22%; background:rgba(255,204,51,.35); animation-duration:26s; animation-delay:-6s; }
.hero-orbs i:nth-child(3){ width:380px; height:380px; left:38%; bottom:-140px; background:rgba(192,57,43,.5); animation-duration:23s; animation-delay:-11s; }
@keyframes orbDrift{
  0%{   transform:translate3d(0,0,0) scale(1); }
  50%{  transform:translate3d(50px,-40px,0) scale(1.15); }
  100%{ transform:translate3d(-40px,30px,0) scale(.92); }
}

.hero-tag{
  position:relative; overflow:hidden;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) both;
}
.hero-tag::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45), transparent 80%);
  transform:translateX(-120%);
  animation:sheen 3.6s ease-in-out 1.4s infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-120%);} 55%,100%{ transform:translateX(160%);} }

/* IMPORTANT: the gradient must live on the inner lines, NOT on the <h1>.
   A parent with background-clip:text uses ALL descendant glyphs as its mask,
   so opacity:0 children still punch through — which made every rotating
   word show at once. Each line now clips its own gradient. */
.hero h1{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--cream);
  animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .1s both;
}
.hero h1 .hl-line,
.word-rotator > span{
  background:linear-gradient(115deg,#fff8ee 0%, var(--gold) 35%, var(--orange) 55%, #fff8ee 80%);
  background-size:250% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shimmerText 7s linear infinite;
}
.hero h1 .hl-line{ display:inline-block; }
@keyframes shimmerText{ to{ background-position:250% center; } }

.hero p{ animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .22s both; }
.hero-actions{ animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .34s both; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}

/* rotating word inside the headline */
.word-rotator{
  display:inline-grid;
  vertical-align:top;
  justify-items:center;
  text-align:center;
  perspective:600px;
}
.word-rotator > span{
  grid-area:1/1;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translateY(55%) rotateX(-75deg);
  transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility .55s;
}
.word-rotator > span.on{ opacity:1; visibility:visible; transform:none; }
.word-rotator > span.out{ opacity:0; visibility:visible; transform:translateY(-55%) rotateX(75deg); }

/* animated scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-muted); font-size:.7rem; letter-spacing:2.5px; text-transform:uppercase;
  animation:fadeUp 1s ease 1s both;
}
.scroll-cue .mouse{
  width:24px; height:38px; border:2px solid rgba(255,204,51,.55); border-radius:14px;
  position:relative;
}
.scroll-cue .mouse::before{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%);
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,14px);} }
@media (max-width:860px){ .scroll-cue{ display:none; } }

/* ---------- BUTTONS: shimmer + ripple ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-22deg); transition:left .65s ease; pointer-events:none;
}
.btn:hover::before{ left:150%; }
.btn-primary{ box-shadow:0 6px 22px rgba(255,150,30,.28); }
.btn-pulse{ animation:btnPulse 2.6s ease-in-out infinite; }
@keyframes btnPulse{
  0%,100%{ box-shadow:0 6px 22px rgba(255,150,30,.30); }
  50%{ box-shadow:0 10px 34px rgba(255,150,30,.62); }
}

/* ---------- MARQUEE STRIP ---------- */
.marquee{
  position:relative; z-index:1; overflow:hidden; padding:16px 0;
  border-block:1px solid rgba(255,204,51,.2);
  background:linear-gradient(90deg, rgba(255,122,26,.10), rgba(255,204,51,.06), rgba(192,57,43,.12));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:10px; padding:0 30px;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--gold); white-space:nowrap;
}
.marquee-track span::after{ content:"✦"; color:var(--orange); font-size:.8rem; margin-left:22px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- TILT / GLOW CARDS ---------- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .3s ease, border-color .3s ease;
}
.glow-card{ position:relative; overflow:hidden; isolation:isolate; }
.glow-card::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,204,51,.22), transparent 62%);
  opacity:0; transition:opacity .35s ease;
}
.glow-card:hover::before{ opacity:1; }

.card .icon{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
.card:hover .icon{ transform:translateY(-6px) scale(1.18) rotate(-8deg); }

/* animated gradient border on hover */
.card.beam{ position:relative; }
.card.beam::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--a,0deg), transparent 0 62%, var(--gold) 78%, var(--orange) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.card.beam:hover::after{ opacity:1; animation:spinBeam 2.4s linear infinite; }
@property --a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spinBeam{ to{ --a:360deg; } }

/* ---------- SHOWCASE UPGRADES ---------- */
.showcase-card{ transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
.showcase-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,204,51,.28), transparent 55%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.showcase-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(255,204,51,.55);
  box-shadow:0 20px 48px rgba(0,0,0,.45), var(--shadow-glow);
}
.showcase-card:hover::after{ opacity:1; }
.showcase-label{ transition:padding-bottom .35s ease; }
.showcase-card:hover .showcase-label{ padding-bottom:22px; }

/* ---------- PILL LIST ---------- */
.pill-list li{ transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.pill-list li:hover{ transform:translateY(-4px) scale(1.04); border-color:var(--gold); background:rgba(255,204,51,.14); }

/* ---------- STAT COUNTERS ---------- */
.stat-card{ position:relative; overflow:hidden; }
.stat-card .num{ display:inline-block; }
.stat-card::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--orange));
  transform:translateX(-50%); transition:width .45s ease;
}
.stat-card:hover::after{ width:70%; }

/* ---------- STEPS / TIMELINE ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; }
.steps::before{
  content:""; position:absolute; left:6%; right:6%; top:34px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,204,51,.45), rgba(255,122,26,.45), transparent);
}
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr);} .steps::before{ display:none; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ text-align:center; position:relative; z-index:1; }
.step .dot{
  width:68px; height:68px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; font-size:1.8rem;
  background:linear-gradient(150deg, rgba(255,204,51,.20), rgba(255,122,26,.10));
  border:1.5px solid rgba(255,204,51,.4);
  box-shadow:0 0 0 0 rgba(255,204,51,.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.step:hover .dot{ transform:translateY(-6px) scale(1.08); box-shadow:0 0 0 10px rgba(255,204,51,.10), var(--shadow-glow); }
.step h4{ margin:0 0 6px; color:var(--gold); font-size:1.02rem; }
.step p{ margin:0; color:var(--text-muted); font-size:.88rem; line-height:1.6; }
.step .step-no{
  position:absolute; top:-6px; left:50%; margin-left:20px;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:800; color:#2b0a02;
  background:linear-gradient(135deg,var(--gold),var(--orange));
}

/* ---------- TESTIMONIALS ---------- */
.quote-card{ position:relative; }
.quote-card::before{
  content:"❝"; position:absolute; top:6px; right:18px;
  font-size:3.6rem; line-height:1; color:rgba(255,204,51,.18);
  font-family:Georgia, serif;
}
.quote-card .who{ margin-top:14px; display:flex; align-items:center; gap:10px; }
.quote-card .who .av{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--orange)); color:#2b0a02; font-weight:800;
  font-family:'Baloo 2',sans-serif;
}
.quote-card .who b{ color:var(--cream); font-size:.9rem; display:block; }
.quote-card .who small{ color:var(--text-muted); font-size:.76rem; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; margin-bottom:10px; }

/* ---------- COUNTDOWN / CTA BANNER ---------- */
.banner-cta{ position:relative; overflow:hidden; }
.banner-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px circle at 10% 0%, rgba(255,204,51,.16), transparent 60%),
    radial-gradient(500px circle at 90% 100%, rgba(255,122,26,.18), transparent 60%);
  animation:ctaGlow 8s ease-in-out infinite alternate;
}
@keyframes ctaGlow{ from{ opacity:.55; } to{ opacity:1; } }

/* ---------- FLOATING EMOJI CONFETTI (decorative) ---------- */
.floaties{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.floaties i{
  position:absolute; bottom:-40px; font-style:normal; font-size:1.2rem; opacity:.25;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{   transform:translateY(0) rotate(0deg); opacity:0; }
  10%{  opacity:.35; }
  90%{  opacity:.25; }
  100%{ transform:translateY(-115vh) rotate(320deg); opacity:0; }
}

/* ---------- SECTION HEADINGS: underline draw ---------- */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; left:50%; bottom:-8px; height:3px; width:0; border-radius:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, var(--gold), var(--orange));
  transition:width .8s cubic-bezier(.16,1,.3,1) .2s;
}
.section-head.revealed h2::after,
.section-head [data-reveal].revealed h2::after{ width:64%; }

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:999;
  background:linear-gradient(90deg, var(--gold), var(--orange), var(--red-2));
  box-shadow:0 0 12px rgba(255,204,51,.7);
  transition:width .1s linear;
}

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed; right:24px; bottom:96px; z-index:60;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,6,6,.75); border:1.5px solid rgba(255,204,51,.45); color:var(--gold);
  backdrop-filter:blur(6px); cursor:pointer; font-size:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:rgba(255,204,51,.18); }
@media (max-width:560px){ .to-top{ right:14px; bottom:86px; } }

/* ---------- STAGGER HELPER ---------- */
[data-reveal][style*="--d"]{ transition-delay:var(--d); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero-orbs, .floaties, .scroll-cue{ display:none; }
  .marquee-track{ animation:none; }
}


/* =========================================================
   HEADER v2 — logo mark, uppercase nav, WhatsApp CTA
   (overrides the base header rules above; sitewide)
   ========================================================= */
.site-header{
  background:linear-gradient(180deg, rgba(12,3,3,.92), rgba(20,6,6,.78));
  border-bottom:1px solid rgba(255,204,51,.18);
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(10,3,3,.96);
  box-shadow:0 6px 30px rgba(0,0,0,.55);
  border-bottom-color:rgba(255,204,51,.34);
}
.header-inner{
  gap:18px; padding:12px 24px;
  transition:padding .3s ease;
}
.site-header.scrolled .header-inner{ padding:8px 24px; }

/* --- brand --- */
.brand{ gap:12px; font-size:1.28rem; }
.brand-mark{
  width:40px; height:40px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center; color:#2b0a02;
  background:linear-gradient(140deg, var(--gold), var(--orange));
  box-shadow:0 4px 16px rgba(255,150,30,.45);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.brand-mark svg{ width:24px; height:24px; }
.brand:hover .brand-mark{ transform:rotate(72deg) scale(1.06); box-shadow:0 6px 22px rgba(255,150,30,.7); }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-family:'Baloo 2',sans-serif; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cream);
  font-size:1.18rem; white-space:nowrap;
}
.brand-name em{
  font-style:normal;
  background:linear-gradient(120deg, var(--gold), var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand small{
  font-family:'Poppins',sans-serif; font-size:.56rem; font-weight:500;
  letter-spacing:4px; text-transform:uppercase; color:var(--text-muted); margin-top:3px;
}
.site-header.scrolled .brand-mark{ width:34px; height:34px; }
.site-header.scrolled .brand-mark svg{ width:20px; height:20px; }

/* --- nav --- */
.nav-links{ gap:2px; margin-left:auto; }
.nav-links a{
  padding:10px 14px; border-radius:8px; background:none;
  font-family:'Poppins',sans-serif; font-weight:600;
  font-size:.80rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--text-light);
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--orange));
  transform:scaleX(0); transform-origin:left; border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover{ background:none; color:var(--gold); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{
  background:none; color:var(--gold); box-shadow:none;
}
.nav-links a.active::after{ transform:scaleX(1); }

/* --- WhatsApp CTA in the header --- */
.header-cta{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  padding:11px 22px; border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:700;
  font-size:.80rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gold); border:1.5px solid rgba(255,204,51,.5);
  background:rgba(255,204,51,.07);
  transition:color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.header-cta svg{ width:17px; height:17px; flex-shrink:0; }
.header-cta:hover{
  color:#2b0a02; border-color:transparent; transform:translateY(-2px);
  background:linear-gradient(135deg, var(--gold), var(--orange));
  box-shadow:0 8px 24px rgba(255,150,30,.45);
}

/* --- hamburger --- */
.nav-toggle{
  width:40px; height:36px; padding:0; border-radius:8px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  border:1px solid rgba(255,204,51,.35); background:rgba(255,204,51,.06);
}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--gold);
  transition:transform .3s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1120px){
  .nav-links a{ padding:10px 10px; font-size:.74rem; letter-spacing:1px; }
  .header-cta{ padding:10px 15px; font-size:.72rem; }
  .header-cta span{ display:none; }
  .header-cta{ gap:0; }
}
@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav-links{ margin-left:0; }
  .nav-links a{ text-align:center; padding:13px; font-size:.85rem; }
  .nav-links a::after{ display:none; }
  .header-cta span{ display:inline; }
  .header-cta{ gap:9px; padding:10px 18px; }
}
@media (max-width:600px){
  .header-cta span{ display:none; }
  .header-cta{ padding:10px; gap:0; }
  .brand-name{ font-size:1rem; letter-spacing:1px; }
  .brand small{ letter-spacing:3px; }
}


/* =========================================================
   HERO BANNER CAROUSEL — slides built in CSS/SVG
   ========================================================= */
.banner{
  position:relative; z-index:1;
  height:clamp(430px, 66vh, 640px);
  overflow:hidden; outline:none;
  background:radial-gradient(ellipse at 50% 120%, #3a0a0a, #0d0303 70%);
  border-bottom:1px solid rgba(255,204,51,.2);
}

/* ---- slide shell ---- */
.banner-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s, transform 1.2s cubic-bezier(.16,1,.3,1);
  transform:scale(1.06);
}
.banner-slide.active{ opacity:1; visibility:visible; transform:scale(1); z-index:2; }
.banner-slide.leaving{ opacity:0; visibility:visible; z-index:1; }

/* ---- painted backdrop per slide ---- */
.slide-bg{ position:absolute; inset:0; overflow:hidden; }
.slide-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,204,51,.30), transparent 42%),
    radial-gradient(circle at 22% 78%, rgba(192,57,43,.42), transparent 50%),
    linear-gradient(120deg, #120404 0%, #3d0b0b 45%, #0f0404 100%);
}
.banner-slide[data-theme="range"] .slide-bg::before{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,122,26,.32), transparent 44%),
    radial-gradient(circle at 82% 72%, rgba(96,165,250,.22), transparent 46%),
    linear-gradient(135deg, #0b0413 0%, #2a0a2e 48%, #120409 100%);
}
.banner-slide[data-theme="bulk"] .slide-bg::before{
  background:
    radial-gradient(circle at 70% 18%, rgba(74,222,128,.20), transparent 42%),
    radial-gradient(circle at 18% 80%, rgba(255,204,51,.26), transparent 48%),
    linear-gradient(115deg, #04120b 0%, #0d2a1c 45%, #050f0a 100%);
}
/* bokeh light dots */
.slide-bg::after{
  content:""; position:absolute; inset:0; opacity:.7;
  background-image:
    radial-gradient(5px 5px at 12% 82%, rgba(255,190,80,.65), transparent 60%),
    radial-gradient(4px 4px at 28% 90%, rgba(255,150,40,.55), transparent 60%),
    radial-gradient(6px 6px at 62% 88%, rgba(255,204,51,.5), transparent 60%),
    radial-gradient(3px 3px at 86% 84%, rgba(255,230,150,.6), transparent 60%),
    radial-gradient(4px 4px at 45% 94%, rgba(255,170,60,.5), transparent 60%),
    radial-gradient(3px 3px at 8% 40%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(2px 2px at 92% 46%, rgba(255,255,255,.30), transparent 60%);
  filter:blur(.4px);
  animation:bokehPulse 5s ease-in-out infinite alternate;
}
@keyframes bokehPulse{ from{ opacity:.45; } to{ opacity:.9; } }

/* ---- SVG firework bursts layer ---- */
.slide-fx{ position:absolute; inset:0; pointer-events:none; }
.slide-fx svg{ position:absolute; width:100%; height:100%; }
.burst > g{
  animation:burstPop 4.5s ease-out infinite; opacity:0;
  transform-origin:center; transform-box:fill-box;
}
@keyframes burstPop{
  0%{ opacity:0; transform:scale(.15); }
  8%{ opacity:1; }
  55%{ opacity:.85; transform:scale(1); }
  80%,100%{ opacity:0; transform:scale(1.14); }
}

/* ---- content ---- */
.banner-inner{
  position:relative; z-index:3; height:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 64px;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px;
}
@media (max-width:900px){
  .banner-inner{ grid-template-columns:1fr; padding:0 40px; text-align:center; justify-items:center; }
  .banner-art{ display:none; }
}
@media (max-width:560px){ .banner-inner{ padding:0 22px; } }

.banner-copy > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.banner-slide.active .banner-copy > *{ opacity:1; transform:none; }
.banner-slide.active .banner-copy > *:nth-child(1){ transition-delay:.15s; }
.banner-slide.active .banner-copy > *:nth-child(2){ transition-delay:.28s; }
.banner-slide.active .banner-copy > *:nth-child(3){ transition-delay:.41s; }
.banner-slide.active .banner-copy > *:nth-child(4){ transition-delay:.54s; }
.banner-slide.active .banner-copy > *:nth-child(5){ transition-delay:.67s; }

.banner-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:7px 18px; border-radius:999px;
  font-family:'Poppins',sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(255,204,51,.42); background:rgba(255,204,51,.09);
  backdrop-filter:blur(4px);
}
.banner-eyebrow b{ color:var(--cream); font-weight:700; letter-spacing:2px; }

/* the big display headline */
.banner-title{
  font-family:'Baloo 2',sans-serif; font-weight:800; margin:0 0 6px;
  font-size:clamp(2.5rem, 6.2vw, 5.1rem); line-height:.95;
  letter-spacing:1px; text-transform:uppercase;
}
.banner-title .l1, .banner-title .l2{ display:block; }
.gold-foil{
  background:linear-gradient(178deg,
      #fff4cf 2%, #ffdf8a 18%, #e0a318 38%, #fff6d8 50%,
      #d9930f 62%, #ffd873 82%, #b9760a 100%);
  background-size:100% 260%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,45,0,.55)) drop-shadow(0 10px 26px rgba(0,0,0,.6));
  animation:foilSweep 6s ease-in-out infinite alternate;
}
@keyframes foilSweep{ from{ background-position:0 0; } to{ background-position:0 100%; } }
.crimson-foil{
  background:linear-gradient(178deg, #ff9a7a 4%, #e8492f 32%, #7d1208 52%, #ef5b39 72%, #a01a0c 100%);
  background-size:100% 240%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(60,10,0,.6)) drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:foilSweep 6s ease-in-out .6s infinite alternate;
}

/* the "up to 50% off" plaque */
.banner-plaque{
  display:inline-flex; align-items:center; gap:12px; margin:16px 0 22px;
  padding:11px 30px; border-radius:12px;
  border:1.5px solid rgba(255,204,51,.55);
  background:linear-gradient(160deg, rgba(120,14,10,.9), rgba(60,6,6,.9));
  box-shadow:inset 0 0 24px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.45);
  font-family:'Baloo 2',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(.95rem, 2vw, 1.4rem); letter-spacing:2px; color:var(--cream);
  position:relative;
}
.banner-plaque::before, .banner-plaque::after{
  content:"—"; color:var(--gold); opacity:.75; font-weight:400;
}
.banner-plaque strong{
  font-size:1.55em; letter-spacing:1px;
  background:linear-gradient(178deg,#fff4cf,#ffd873 40%,#d9930f 75%,#fff1c6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.banner-sub{
  max-width:520px; margin:0 0 26px; color:var(--text-muted);
  font-size:1.02rem; line-height:1.65;
}
@media (max-width:900px){ .banner-sub{ margin-inline:auto; } }
.banner-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .banner-actions{ justify-content:center; } }

/* ---- right-hand art: stacked product boxes ---- */
.banner-art{
  position:relative; height:78%; display:flex; align-items:flex-end;
  justify-content:center; gap:10px; perspective:1000px; min-width:0;
}
.pbox{
  position:relative; border-radius:8px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:16px 10px; text-align:center; overflow:hidden;
  border:1.5px solid rgba(255,204,51,.45);
  box-shadow:0 22px 50px rgba(0,0,0,.65), inset 0 0 30px rgba(0,0,0,.5);
  transform:translateY(40px) rotateY(-8deg); opacity:0;
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease, box-shadow .3s ease;
}
.banner-slide.active .pbox{ transform:none; opacity:1; }
.banner-slide.active .pbox:nth-child(1){ transition-delay:.35s; }
.banner-slide.active .pbox:nth-child(2){ transition-delay:.47s; }
.banner-slide.active .pbox:nth-child(3){ transition-delay:.59s; }
.banner-slide.active .pbox:nth-child(4){ transition-delay:.71s; }
.pbox:hover{ box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 0 1px var(--gold), var(--shadow-glow); }
.pbox::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform:translateX(-100%); animation:boxSheen 5s ease-in-out infinite;
}
@keyframes boxSheen{ 0%,60%{ transform:translateX(-100%);} 85%,100%{ transform:translateX(150%);} }
.pbox .pb-mark{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.62rem;
  letter-spacing:2.5px; color:var(--gold); opacity:.85; margin-bottom:6px;
}
.pbox .pb-name{
  font-family:'Baloo 2',sans-serif; font-weight:800; line-height:1.02;
  font-size:.94rem; letter-spacing:.6px; text-transform:uppercase; color:var(--cream);
}
.pbox .pb-kicker{
  font-family:'Poppins',sans-serif; font-size:.5rem; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--text-muted); margin-top:6px;
}
.pbox .pb-glyph{ font-size:1.7rem; margin-top:auto; padding-top:12px; opacity:.9; }

.pbox.tall{ width:106px; height:74%; background:linear-gradient(165deg,#101c3d,#050a1c); }
.pbox.wide{ width:138px; height:88%; background:linear-gradient(165deg,#5c0e12,#2a0407); }
.pbox.slim{ width:66px;  height:62%; background:linear-gradient(165deg,#3a1050,#150522); border-radius:6px; }
.pbox.cone{
  width:88px; height:52%; border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;
  background:linear-gradient(165deg,#8a1410,#3a0605);
}
/* keep the box cluster from overflowing at mid widths */
@media (max-width:1150px){
  .banner-art{ gap:8px; }
  .pbox{ padding:12px 6px; }
  .pbox.tall{ width:92px; } .pbox.wide{ width:118px; }
  .pbox.slim{ width:58px; } .pbox.cone{ width:76px; }
  .pbox .pb-name{ font-size:.8rem; }
  .pbox .pb-mark{ font-size:.55rem; letter-spacing:1.6px; }
  .pbox .pb-kicker{ font-size:.45rem; letter-spacing:1.6px; }
}
.pbox.emerald{ background:linear-gradient(165deg,#0b3d2a,#04170f); }
.pbox.ink{ background:linear-gradient(165deg,#1a1030,#08040f); }

/* ---- seal badge ---- */
.banner-seal{
  position:absolute; top:26px; right:26px; z-index:4;
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; text-align:center; line-height:1.15;
  border:2px solid rgba(255,204,51,.6);
  background:radial-gradient(circle at 50% 35%, rgba(92,14,14,.95), rgba(20,4,4,.95));
  box-shadow:0 8px 26px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.6);
  font-family:'Baloo 2',sans-serif; color:var(--gold);
  animation:sealFloat 5s ease-in-out infinite;
}
.banner-seal b{ display:block; font-size:1.35rem; letter-spacing:1px; color:var(--cream); }
.banner-seal small{ display:block; font-size:.5rem; letter-spacing:2.4px; text-transform:uppercase; opacity:.85; }
@keyframes sealFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-8px) rotate(4deg);} }
@media (max-width:900px){ .banner-seal{ width:74px; height:74px; top:16px; right:16px; } .banner-seal b{ font-size:1rem; } }
@media (max-width:560px){ .banner-seal{ display:none; } }

/* ---- arrows & dots ---- */
.banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.3rem;
  color:var(--cream); border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.38); backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.banner-arrow:hover{ background:rgba(255,204,51,.22); border-color:var(--gold); color:var(--gold); }
.banner-arrow.prev{ left:18px; }
.banner-arrow.next{ right:18px; }
.banner-arrow.prev:hover{ transform:translateY(-50%) translateX(-3px); }
.banner-arrow.next:hover{ transform:translateY(-50%) translateX(3px); }
@media (max-width:560px){ .banner-arrow{ width:38px; height:38px; font-size:1.05rem; } .banner-arrow.prev{ left:8px; } .banner-arrow.next{ right:8px; } }

.banner-dots{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:6;
  display:flex; gap:9px;
}
.banner-dot{
  width:9px; height:9px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,204,51,.5); background:rgba(255,255,255,.18);
  transition:width .35s ease, background .3s ease;
}
.banner-dot.active{ width:30px; background:linear-gradient(90deg,var(--gold),var(--orange)); border-color:transparent; }


/* =========================================================
   TRUST STRIP (under the banner)
   ========================================================= */
.trust-strip{
  position:relative; z-index:1;
  background:linear-gradient(90deg, rgba(20,6,6,.9), rgba(45,10,10,.9), rgba(20,6,6,.9));
  border-bottom:1px solid rgba(255,204,51,.16);
}
.trust-grid{
  max-width:var(--maxw); margin:0 auto; padding:22px 24px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:6px 14px; position:relative;
}
.trust-item + .trust-item::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,204,51,.4), transparent);
}
.trust-item .ti-ico{
  font-size:1.5rem; flex-shrink:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.trust-item:hover .ti-ico{ transform:scale(1.22) rotate(-8deg); }
.trust-item .ti-txt{
  font-family:'Baloo 2',sans-serif; font-weight:700; line-height:1.15;
  font-size:.82rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--cream);
}
.trust-item .ti-txt span{ display:block; color:var(--gold); }
@media (max-width:860px){
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:6px 0; }
  .trust-item:nth-child(3)::before{ display:none; }
}
@media (max-width:420px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item::before{ display:none !important; }
}

/* reduced motion for the banner */
@media (prefers-reduced-motion: reduce){
  .banner-slide{ transition:none; }
  .gold-foil, .crimson-foil, .slide-bg::after, .burst > g, .pbox::after, .banner-seal{ animation:none; }
  .pbox{ opacity:1; transform:none; }
  .banner-copy > *{ opacity:1; transform:none; }
}


/* ---- live fireworks canvas sitting over the banner slides ---- */
.banner > canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; opacity:.9;
}

/* ---- admin shortcut repositioned for the banner ---- */
.banner .admin-hero-btn{
  top:auto; bottom:16px; right:20px; z-index:7;
}
@media (max-width:560px){
  .banner .admin-hero-btn{ bottom:10px; right:10px; }
}