/* ---------- Light theme only (no dark mode) ---------- */
  :root {
    --brand-50:  #eef4ff;
    --brand-200: #c7d7ff;
    --brand-400: #7aa8ff;
    --brand-500: #5b8dff;
    --brand-600: #6b68f7;
    --brand-700: #7a49f0;
    --brand-800: #6a3dd7;

    --header-bg: rgba(255,255,255,.80);
    --header-fg: #0c1021;
    --body-bg:   #f6f7fb;
    --body-fg:   #0c1021;
    --card-bg:   #ffffff;
    --muted:     #596074;
    --border:    rgba(0,0,0,.10);
    --accent-grad: linear-gradient(90deg, var(--brand-400), var(--brand-700));
  }

  html, body { height: 100%; }
  body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    background: var(--body-bg);
    color: var(--body-fg);
  }

  /* Header */
  .site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 1030;
    background: var(--header-bg); color: var(--header-fg);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .2s ease, background-color .2s ease, transform .2s ease;
  }
  .site-header.scrolled {
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.25);
    background: color-mix(in oklab, var(--header-bg) 92%, black 8%);
  }
  .brand-gradient {
    background: var(--accent-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; text-fill-color: transparent;
  }
  .brand-chip { background: var(--accent-grad); color: #fff; border-radius: 999px; }
  .nav-link { color: var(--header-fg); opacity: .85; }
  .nav-link:hover, .nav-link.active { opacity: 1; }
  .nav-underline .nav-link.active { position: relative; }
  .nav-underline .nav-link.active::after {
    content:""; position:absolute; left:0; right:0; bottom:-.4rem; height:2px; background: var(--accent-grad);
  }

  /* Search pill */
  .search-pill .form-control {
    background: rgba(0,0,0,.03);
    border: 1px solid var(--border);
    color: var(--header-fg);
  }

  /* Page padding below fixed header (set via JS) */
  /*.page-main { padding-top: var(--header-h, 88px); }*/

  /* Cards & utilities */
  .card { background-color: var(--card-bg); border-color: var(--border); }
  .shadow-soft { box-shadow: 0 .25rem 1rem rgba(0,0,0,.12); }

  /* Buttons */
  .btn-brand { background: var(--accent-grad); color: #fff; border: none; }
  .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--body-fg); }

  /* Icon badges (cart) */
  .icon-badge { position: relative; }
  .icon-badge .badge {
    position: absolute; top: -6px; right: -8px;
    transform: translate(50%,-50%);
    background: var(--accent-grad);
  }

  /* Product cards */
  .product-card{ transition:.2s ease; border-color:var(--bs-border-color); }
  /*.product-card:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08); }*/
  .product-thumb{ position:relative; aspect-ratio:4/3; width:100%; max-height:clamp(180px, 24vw, 320px); overflow:hidden; background:#f8f9fa; }
  .product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .save-btn{
    position:absolute; top:.5rem; right:.5rem;
    border:0; outline:0; width:36px; height:36px; border-radius:999px;
    background:rgba(255,255,255,.92);
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.10);
    transition:transform .15s ease;
  }
  .save-btn:hover{ transform:scale(1.06); }
  .save-btn .bi{ font-size:1.1rem; color:#1f2937; }
  .save-btn.active{ background:#fff0f4; }
  .save-btn.active .bi{ color:#e11d48; }

  .account-wrap{min-height:60vh}
  .sidebar .card{border:0; border-radius:18px}
  .sidebar .list-group-item{border:0; padding:.85rem 1rem; border-radius:12px; margin:.15rem 0}
  .sidebar .list-group-item.active{
    background: linear-gradient(135deg,#6f9cfb, #a37bff);
    color:#fff; box-shadow:0 8px 16px rgba(0,0,0,.08)
  }
  .sidebar .mini-profile{background:linear-gradient(135deg,#eef3ff,#f5efff); border-radius:14px; padding:12px}

  /* =======================================================
     MODERN ANIMATED FOOTER (pro-footer) — ONLY footer styles
     ======================================================= */
/* === Modern footer with single-logo crest & subtle animations === */
.neo-footer{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  color:#0c1021;
}
.neo-footer__topline{
  height:2px;
  background: linear-gradient(90deg, #7aa8ff, #7a49f0);
}

/* Crest (logo + animated shine + gentle float) */
.neo-footer__crest{
  position: relative;
  padding: 38px 0 10px;   /* taller hero */
}
.neo-crest__wrap{
  display:inline-block; position:relative;
  padding: 10px 18px; border-radius: 16px;
  background: #fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
  animation: crestFloat 6s ease-in-out infinite;
}
.neo-crest__logo{
  display:block; height:54px; width:auto;
}
.neo-crest__wrap::after{
  /* SHINE sweep */
  content:""; position:absolute; inset:-2px;
  --shine: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 48%, transparent 62%);
  -webkit-mask: var(--shine); mask: var(--shine);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: crestShine 4.5s ease-in-out infinite;
  border-radius: inherit;
}
.neo-crest__tag{
  margin: 10px 0 0; font-size: 1.05rem; font-weight: 600;
}

/* Subtle background orbs behind crest */
.neo-footer__crest::before,
.neo-footer__crest::after{
  content:""; position:absolute; z-index:-1; filter: blur(40px); opacity:.25; border-radius:999px;
}
.neo-footer__crest::before{
  width: 520px; height: 520px; left: -180px; top: -220px;
  background: radial-gradient(closest-side, #7a49f0 0%, transparent 70%);
  animation: orbA 12s ease-in-out infinite;
}
.neo-footer__crest::after{
  width: 520px; height: 520px; right: -200px; top: -240px;
  background: radial-gradient(closest-side, #7aa8ff 0%, transparent 70%);
  animation: orbB 14s ease-in-out infinite;
}

/* Social links */
.neo-footer__hero{
  padding: 12px 0 16px;
  border-top: 1px dashed rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.neo-footer__social a{
  color:#1f2937; text-decoration:none; font-size:.95rem;
  margin:0 .75rem; position:relative;
}
.neo-footer__social a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  background: linear-gradient(90deg, #7aa8ff, #7a49f0);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.neo-footer__social a:hover::after{ transform:scaleX(1); }

/* Grid */
.neo-footer__grid{ padding: 28px 0 18px; }

/* Column title */
.neo-coltitle{ font-weight:600; margin-bottom:.5rem; }

/* Links */
.neo-link{
  color:#334155; text-decoration:none; position:relative; display:inline-block;
}
.neo-link:hover{ color:#111827; }
.neo-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background: currentColor; opacity:.15; transform:scaleX(0); transform-origin:left;
  transition: transform .2s ease, opacity .2s ease;
}
.neo-link:hover::after{ transform:scaleX(1); opacity:.35; }

/* Newsletter (light) */
.neo-newsletter{
  display:flex; gap:.5rem; align-items:center;
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  padding:.35rem .35rem .35rem .5rem; background:#fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}
.neo-newsletter input{
  flex:1; border:0; outline:0; background:transparent; padding:.45rem .6rem; font-size:.95rem;
}
.neo-newsletter button{
  border:0; outline:0; border-radius:999px; padding:.45rem .9rem;
  color:#fff; font-weight:600; font-size:.95rem;
  background: linear-gradient(90deg, #7aa8ff, #7a49f0);
  transition: transform .12s ease, box-shadow .2s ease;
}
.neo-newsletter button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124,58,237,.18);
}

/* Bottom bar */
.neo-footer__bottom{
  border-top:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0 18px; color:#475569; font-size:.95rem;
}

/* Brand gradient helper (uses your global var) */
.brand-gradient{
  background: var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Animations */
@keyframes crestFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(6px); }
}
@keyframes crestShine{
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes orbA{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(10px,14px); }
}
@keyframes orbB{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(-12px,10px); }
}

/* Responsive */
@media (max-width: 991.98px){
  .neo-footer__crest{ padding: 30px 0 6px;overflow: hidden;}
  .neo-crest__logo{ height:48px; }
  .neo-footer__hero{ text-align:center; }
  .neo-footer__social a{ margin:0 .6rem; }
  .neo-footer__bottom{ flex-direction:column; gap:.5rem; text-align:center; }
  .neo-newsletter button{position:absolute;right:6px;top:5.5px;}
  .neo-newsletter{position:relative;}
}
.logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;   /* ✅ keeps shine inside only */
}

.logo-anim { 
  height:40px;
  display: block;
  position: relative;
  z-index: 1;         /* ✅ keep image above */
}

/* Shine sweep only over image */
.logo-wrap::after {
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  --shine: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 48%, transparent 62%);
  -webkit-mask: var(--shine); 
  mask: var(--shine);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: crestShine 4.5s ease-in-out infinite;
}


  /* Allow pointer on the tracks */
  .best-track.pe-none, .new-track.pe-none,.cat-track.pe-none { pointer-events: auto !important; }
  
  /* ============ Imaginoz Splash Pro ============ */
.splash-pro{
  position: fixed; inset:0; z-index: 2000;
  display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 50% -20%, rgba(122,168,255,.18), transparent 60%),
              radial-gradient(1200px 600px at 50% 120%, rgba(122,73,240,.14), transparent 60%),
              var(--body-bg, #f6f7fb);
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.splash-pro.out{ opacity:0; visibility:hidden; transform: scale(.985); }

/* Background decor */
.splash-pro .splash-bg{ position:absolute; inset:0; pointer-events:none; }
.splash-pro .halo{
  position:absolute; inset:-40% -40%;
  background: conic-gradient(from 0deg, rgba(122,168,255,.12), rgba(122,73,240,.06), rgba(122,168,255,.12));
  animation: halo-rotate 24s linear infinite;
  filter: blur(28px); opacity:.7;
}
@keyframes halo-rotate{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}
.splash-pro .orb{
  position:absolute; width:48vmax; height:48vmax; border-radius:999px; filter: blur(42px); opacity:.22;
}
.splash-pro .orb-a{ left:-18vmax; top:-22vmax; background: radial-gradient(closest-side, #7a49f0, transparent 70%); animation: orbA 14s ease-in-out infinite; }
.splash-pro .orb-b{ right:-20vmax; bottom:-24vmax; background: radial-gradient(closest-side, #7aa8ff, transparent 70%); animation: orbB 16s ease-in-out infinite; }
@keyframes orbA{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,14px)} }
@keyframes orbB{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-12px,10px)} }

/* Fine grain for depth (no network) */
.splash-pro .grain{
  position:absolute; inset:-100px;
  opacity:.06; mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(0,0,0,.6) 0 1px, transparent 1px 3px);
  animation: grainShift 9s steps(10) infinite;
}
@keyframes grainShift{
  0%{ transform: translate(0,0) }
  100%{ transform: translate(30px, -25px) }
}

/* Center content */
.splash-pro .splash-center{ position:relative; display:grid; gap:14px; place-items:center; text-align:center; }
.splash-pro .crest{
  padding: 14px 22px; border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
  backdrop-filter: saturate(140%) blur(10px);
  animation: crest-float 6s ease-in-out infinite;
}
@keyframes crest-float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(6px) } }

.splash-pro .logo-wrap{
  position: relative; display:inline-block; overflow:hidden; border-radius: 12px;
}
.splash-pro .logo{ height: 72px; display:block; }

/* Shine sweep across the logo */
.splash-pro .logo-wrap::after{
  content:""; position:absolute; inset:0;
  --shine: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 48%, transparent 62%);
  -webkit-mask: var(--shine); mask: var(--shine);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: logo-shine 4.5s ease-in-out infinite;
}
@keyframes logo-shine{
  0%{ transform: translateX(-120%) }
  55%{ transform: translateX(120%) }
  100%{ transform: translateX(120%) }
}

/* Tagline with subtle shimmer on “Imaginoz” */
.splash-pro .tagline{
  margin: 6px 0 0; font-weight: 600; color: #0c1021;
  font-size: clamp(16px, 2.2vw, 20px);
}
.splash-pro .tagline span{
  background: var(--accent-grad, linear-gradient(90deg, #7aa8ff, #7a49f0));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-fill-color: transparent;
  position:relative;
}
.splash-pro .tagline span::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--accent-grad, linear-gradient(90deg,#7aa8ff,#7a49f0));
  border-radius: 999px; transform: scaleX(0); transform-origin:left; animation: text-underline 1.2s .35s ease forwards;
}
@keyframes text-underline{ to{ transform: scaleX(1) } }

/* Progress line */
.splash-pro .progress{
  width: min(380px, 72vw);
  height: 6px; border-radius: 999px;
  background: rgba(0,0,0,.07);
  overflow: hidden; position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.splash-pro .progress .bar{
  position:absolute; inset:0; width:0%;
  background: var(--accent-grad, linear-gradient(90deg,#7aa8ff,#7a49f0));
  border-radius: inherit; box-shadow: 0 8px 18px rgba(124,58,237,.22);
  animation: loadbar 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes loadbar{ to{ width: 100% } }

/* Exit confetti canvas sits above */
.splash-pro .burst{ position:absolute; inset:0; pointer-events:none; }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .splash-pro .halo,
  .splash-pro .orb,
  .splash-pro .grain,
  .splash-pro .crest,
  .splash-pro .logo-wrap::after,
  .splash-pro .progress .bar{ animation: none !important; }
}
.partner-strip {
  background: #10122b; /* dark strip under footer */
  color: #f8f9fa;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.partner-strip .brand-icon {
  height: 20px;
  width: auto;
  object-fit: contain;
}

  .cart-badge {
  font-size: 0.65rem;   /* smaller text */
  min-width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
}
.btn-whatsapp{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}
.btn-whatsapp:hover{
  color:#25D366;
  filter:brightness(.95);
}
.content-card {
    background-color: #ffffff;
    padding: 30px;
}
ol, ul{padding-left:1.3rem;}
ul.arrowlist{list-style:none;padding-left:0;}
ul.arrowlist li{position:relative;padding-left:15px;}
ul.arrowlist li:before {
    content: '';
    position: absolute;
    background: var(--accent-grad);
    width: 9px;
    height: 9px;
    left:0;
    top: 7px;
    border-radius: 50%;
} 
ul.arrowlist li {
    margin-bottom: 10px;
}
.content-card {
    background-color: #ffffff;
    padding: 30px;
    /* font-size: 15px; */
    color: var(--bs-secondary-color) !important;
}
.sidebar-menu {
    padding:15px;
     background-color:#fff;
}
.sidebar-card{ 
    max-height: 400px;
    overflow: auto;
    padding:0;
}
    

.sidebar-menu .list-group-item {
    background-color:#f6f7fb; 
    /* border: 1px solid #eee !important; */
    margin-bottom: 7px;
    padding: 12px 12px;
    border-radius: 0;
    box-shadow: 0px 2px 0px rgba(179, 180, 184, .3);
}
.content-card .h5, content-card h5 {
    font-size: 1.5rem;
}
.table-responsive tr td {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 12px;
}
.table-responsive tr td span.kbd {
    background: var(--accent-grad);
    padding: 7px 12px;
    border-radius: 5px;
    color: #fff;
}
.table-responsive tr th {
    background: #f6f7fb;
    padding: 10px 15px;
    border: 1px solid #eee;
}
.Card-Design {
    background-color: #fff; 
    padding: 25px;
    position:relative;
}
.Card-Design h1.h4 {
    font-size: 20px;
    font-weight: 200 !important;
    /* color: #332d2d; */
}


/*delivery form css start*/

    .commen-class{
    display: flex;
    align-items: start;
    gap: 30px;
        font-size: 15px;
}
.commen-class li {
font-size: 15px;

}
    }
    .delivery-code-box label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }
.delivery-code-input {
    padding:0;
    border: 0;
    font-size: 14px;
    outline: none;
    margin-bottom: 0;
    font-weight: 500;
    max-width: 150px;
}
    .delivery-code-input:focus {
        border-color: #ff9800;
    }
.delivery-code-btn {
    width: 100%;
    padding: 0;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: #7a50f1;
    text-transform: uppercase;
    max-width: max-content;
}

    .delivery-message {
        font-size: 13px;
        margin-top: 6px;
        display: none;
    }
    
    form#deliveryForm {
    display: flex;
    align-items: center;
    border-bottom:2px solid #7a50f1;
    padding-bottom: 5px;
}
.title-tt {
    min-width: 150px;
    color: #878787;
    font-size: 15px;
    font-weight: 500;
}
/*delivery form css End*/

.jhlkjl {
    display: flex;
    align-items: flex-end;
    gap:10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.jhlkjl .sdfds {
    background: var(--accent-grad);
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
}
    div#result {
    display: none !important;}
    








@media screen and (min-width:200px) and (max-width:991px){
.Card-Design {padding:15px;}
}

@media screen and (min-width:200px) and (max-width:575px){
    
    .commen-class{flex-wrap:wrap;gap:7px;}
    .add-to-cart, .buy-now {
    padding: 12x 6px!important;
    font-size: 12px !important;;
}
}

@media screen and (min-width:768px){.sticky-image-wrapper {
    position: sticky;
    top: 90px;
    z-index: 10;
}

}

@media screen and (min-width:992px){
    
    .neo-footer__crest::after{right:0;}
    .neo-footer__crest::before{left:0;}
    
}

@media screen and (max-width:767px){.product-selectbx{flex-direction:column-reverse;}
.side-show-imagess{flex-direction:row!important; overflow: auto;}
.logo-anim{height:30px;}
.logo-wrap{overflow:visible;}
}

@media screen and (min-width:1499px){
 .row-cols-lg-4>*{width: 20%;}

}



/*product page css*/
.products_immage {
aspect-ratio: 1 / 1;
overflow:hidden;
border-radius: 8px 8px 0 0;
position:relative;
}

.products_immage img {
    width: 100%;
    height:100%;
    object-fit: cover;
        border-radius: 8px 8px 0 0;
    transition: 300ms;
}
.produc-b-x:hover img {
    transform: scale(1.1);
    transition: 300ms;
}

.produc-b-x {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.Product_Name {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.controls label {
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}
.controls select.form-select.form-select-sm {
    line-height: 27px;
}
.controls {
    background-color: #ffff;
    padding: 30px;
    border-radius: 4px;
        margin-bottom: 35px;
}
.mx-limit {
  max-width: 30ch;   /* ~30 characters */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
button.btn.btn-outline-dark.btn-sm.js-add-to-cart {
    /* background: var(--accent-grad); */
    width: 100%;
    /* color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 7px;
}