:root{
  --gold:#D4AF37;
  --maroon:#5A0F1B;
  --ivory:#FAF7F2;
  --text:#2C2C2C;

  --gold-grad:linear-gradient(135deg,#FFF1A8 0%,#D4AF37 35%,#B4881A 65%,#FFF1A8 100%);
  --maroon-grad:linear-gradient(135deg,#7A1A2A 0%,#5A0F1B 50%,#7A1A2A 100%);

  --gold-glow:0 0 26px rgba(212,175,55,.58);
  --maroon-glow:0 0 30px rgba(90,15,27,.58);

  --radius:12px;
  --radius-lg:16px;
  --radius-sm:12px;
  --shadow:0 18px 60px rgba(0,0,0,.12);

  --section-pad:54px;
  --block-pad:18px;
  --stack-gap:14px;
  --text-gap:10px;
  --container:1180px;
  --font-head:"Cinzel", serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(900px 520px at 92% 0%, rgba(90,15,27,.22), transparent 55%),
    var(--ivory);
  line-height:1.6;
}

/* Consistent vertical spacing across pages */
section{margin:0}
.section,
.heroPoster,
.homeBrowse,
.anm-creator,
.anms-creator,
.products-with-filters,
.category-slider-wrapper{
  padding-top:var(--section-pad);
  padding-bottom:var(--section-pad);
}

.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.94}
.small{font-size:.92rem}
.muted{opacity:.78}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Global soft corners for block sections/divs across all pages */
:where(section, main, nav, article, aside, div){
  border-radius: var(--radius);
}
/* Exclusions: keep top strip sharp */
.topStrip{
  border-radius: 0;
}

/* ===== Shine ===== */
@keyframes shineMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.goldShine{background:var(--gold-grad);background-size:260% 260%;animation:shineMove 5.2s ease infinite;box-shadow:var(--gold-glow)}
.maroonShine{background:var(--maroon-grad);background-size:220% 220%;animation:shineMove 6.2s ease infinite;box-shadow:var(--maroon-glow)}

/* ===== Language Toggle ===== */
body[data-lang="en"] .only-ta{display:none !important;}
body[data-lang="ta"] .only-en{display:none !important;}
.langPill{
  display:inline-flex;align-items:center;gap:var(--text-gap);
  height:44px;
  padding:10px 16px;border-radius:12px;
  font-family:var(--font-body);
  font-size:14px;font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.langPill:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}

/* ===== Top Strip ===== */
.topStrip{background:var(--maroon-grad);color:rgba(255,255,255,.94);border-bottom:1px solid rgba(255,255,255,.14)}
.topStrip__inner{padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:var(--stack-gap);flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:var(--text-gap);
  padding:7px 12px;border-radius: var(--radius-sm);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  font-weight:900;letter-spacing:.01em
}
.topLinks{display:flex;gap:var(--stack-gap);flex-wrap:wrap;align-items:center}
.topLinks a{
  padding:7px 10px;border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}

/* ===== Running Gold Rate Bar ===== */
@keyframes goldRateScroll{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}
.gold-rate-marquee{
  width:100%;
  overflow:hidden;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  box-shadow:var(--maroon-glow);
  padding:6px 0;
}
.gold-rate-track{
  display:inline-flex;
  white-space:nowrap;
  will-change:transform;
  animation:goldRateScroll 15s linear infinite;
}
.gold-rate-text{
  display:inline-block;
  padding-right:48px;
  white-space:nowrap;
  font-weight:1000;
  font-size:0.98rem;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.gold-rate-text::after{
  content:attr(data-text);
  padding-left:48px;
}
.gold-rate-text span{
  color:#fff6c8;
  text-shadow:0 0 10px rgba(212,175,55,.6);
}

/* ===== Header / Nav ===== */
.header{position:sticky;top:0;z-index:60;background:var(--maroon-grad);border-bottom:1px solid rgba(255,255,255,.14)}
.header__inner{padding:12px 0;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand {
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  min-width: 260px;
}

/* keep logical height smaller */
.brand__mark {
  height: 56px;                 /* fits inside header */
  display: flex;
  align-items: center;
}

/* visually increase logo ONLY */
.brand__mark img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  margin-left: -75px;

  transform: scale(7.35);       /* 🔥 makes logo bigger */
  transform-origin: left center;
}


.brand__name{font-family:var(--font-head);font-weight:600;color:#fff}
.brand__tag{font-size:.86rem;color:rgba(255,255,255,.80);margin-top:2px}

/* ===============================
   MOBILE HEADER BRAND LOGO
   =============================== */
@media (max-width: 768px) {

  .header__inner{
    min-height: 60px;     /* slightly tighter header */
    padding: 8px 0;
  }

  .brand{
    min-width: unset;
    gap: 8px;
  }

  /* logical container height */
  .brand__mark{
    height: 44px;         /* controls header height */
  }

  /* visual logo size */
  .brand__mark img{
    height: 100%;
    transform: scale(3.0);     /* 👈 tuned for mobile */
    transform-origin: left center;
    margin-left:-25px !important;
  }

  .brand__name{
    font-size: 0.95rem;
  }

  .brand__tag{
    font-size: 0.75rem;
    margin-top: 0;
  }
}


.nav{display:flex;align-items:center;gap:12px}
.nav__toggle{
  display:none;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  border-radius:12px;
  height:44px;padding:23px 16px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.nav__toggle:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.nav__toggleIcon{width:20px;height:2px;background:rgba(255,255,255,.92);display:block;position:relative}
.nav__toggleIcon::before,.nav__toggleIcon::after{content:"";position:absolute;left:0;width:20px;height:2px;background:rgba(255,255,255,.92)}
.nav__toggleIcon::before{top:-6px}
.nav__toggleIcon::after{top:6px}

.nav__menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav__menu a{
  color:rgba(255,255,255,.92);
  height:44px;
  padding:10px 16px;border-radius:12px;
  font-family:var(--font-body);
  font-size:14px;font-weight:700;
  position:relative;display:inline-flex;align-items:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.nav__menu a:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)}
.nav__menu a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:999px;
  background:transparent;transition:.15s ease
}
.nav__menu a:hover::after{background:transparent;box-shadow:none}
.nav__menu a.is-active{background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.30)}
.nav__menu a.is-active::after{background:transparent;box-shadow:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--text-gap);
  padding:12px 16px;border-radius: var(--radius-sm);
  border:1px solid rgba(0,0,0,.12);
  background:var(--maroon);
  color:#fff;font-weight:1000;cursor:pointer;transition:transform .12s ease
}
.btn:hover{transform:translateY(-1px)}
.btn--gold{color:#fff}

/* ===== Poster Slider (Home) ===== */
.heroPoster{
  padding:2px 2px;     /* minimal vertical spacing */
}

.heroPoster .container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.slider{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(90,15,27,.22);
  box-shadow:var(--shadow);
  /*background:#000;*/
  position:relative;
}
.slides{display:flex;transition:transform .55s ease}
.slide{
  min-width:100%;
  height:min(560px, 72vh);
  position:relative;
  /*background:#111;*/
}
.slide::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(90,15,27,.94) 0%, rgba(90,15,27,.82) 46%, rgba(0,0,0,.22) 100%),
    radial-gradient(900px 520px at 14% 10%, rgba(212,175,55,.35), transparent 58%);
  z-index:1;
}
.slideBg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
}
.slideContent{
  position:relative;z-index:2;
  height:100%;
  display:grid;
  align-content:center;
  padding:26px;
  max-width:720px;
  color:#fff;
}
.slideKicker{
  letter-spacing:.18em;text-transform:uppercase;
  font-weight:900;font-size:.86rem;color:rgba(255,255,255,.85);
  margin:0 0 var(--text-gap);
}
.slideTitle{
  font-family:var(--font-head);
  font-size:clamp(2.0rem, 2.2vw + 1rem, 3.1rem);
  line-height:1.12;margin:0 0 var(--text-gap);
}
.slideText{margin:0;color:rgba(255,255,255,.85);max-width:64ch}
.slideSlogan{
  margin-top:var(--stack-gap);
  padding:12px 14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.slideActions{margin-top:var(--stack-gap);display:flex;gap:var(--stack-gap);flex-wrap:wrap}

.sliderNav{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.arrow{
  pointer-events:auto;
  width:46px;height:46px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  display:grid;place-items:center;
  margin:0 12px;
  cursor:pointer;
}
.arrow:hover{background:rgba(212,175,55,.14);box-shadow:var(--gold-glow)}
.arrow svg{width:20px;height:20px;fill:#fff}

.dots{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;gap:8px;justify-content:center;
  z-index:3;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
}
.dot.is-active{background:rgba(212,175,55,.92);box-shadow:var(--gold-glow);}

/* ===============================
   FORCE DESKTOP-LIKE BANNER ON MOBILE
   =============================== */
@media (max-width: 768px) {

  /* hero section should not feel like a page section */
  .heroPoster{
    padding: 5px;
  }

  /* banner stays wide, not tall */
  .slide{
    height: 200px;              /* 🔥 landscape height */
    min-height: unset;
  }

  /* background behaves like desktop */
  .slideBg{
    object-fit: cover;
    object-position: center top; /* 👈 prevents vertical crop */
  }

  /* content stays left & centered vertically */
  .slideContent{
    max-width: 85%;
    padding: 12px 16px;
    align-content: center;
  }

  /* typography scaled but NOT stacked */
  .slideTitle{
    font-size: 1.2rem;
    line-height: 1.15;
    margin-bottom: 4px;
  }

    .slideText{
    display: none;
  }

  /* remove items that cause vertical height */
  .slideKicker,
  .slideSlogan{
    display: none;
  }

  /* buttons stay inline */
  .slideActions{
    margin-top: 8px;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .slideActions .btn{
    font-size: 0.8rem;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* arrows & dots scale down */
  .arrow{
    width: 34px;
    height: 34px;
  }

  .dots{
    bottom: 6px;
  }
}



/* ===== Sections / cards / gallery (same as before but kept compact) ===== */
.section{padding:var(--section-pad) 0}
.section--maroon{background:rgba(90,15,27,.10);border-top:1px solid rgba(90,15,27,.12);border-bottom:1px solid rgba(90,15,27,.12)}
.section--gold{background:rgba(212,175,55,.12);border-top:1px solid rgba(212,175,55,.18);border-bottom:1px solid rgba(212,175,55,.18)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:var(--stack-gap);flex-wrap:wrap}
.section__title{font-family:var(--font-head);font-size:clamp(1.45rem, 1.1vw + 1rem, 2.1rem);margin:0;color:var(--maroon)}
.section__subtitle{margin:0;max-width:72ch;color:rgba(44,44,44,.82)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack-gap)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack-gap)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--stack-gap)}

.card{
  border-radius:var(--radius);
  border:1px solid rgba(90,15,27,.16);
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 46px rgba(0,0,0,.08);
  overflow:hidden;
}
.card--padded{padding:var(--block-pad)}
.card__title{margin:0 0 var(--text-gap);font-size:1.12rem;font-weight:1000;color:var(--maroon)}
.cardLine{height:2px;width:120px;border-radius:999px;margin:var(--text-gap) 0 var(--stack-gap)}
.list{margin:0;padding-left:18px}
.list li{margin:var(--text-gap) 0}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--stack-gap);flex-wrap:wrap;margin-bottom:var(--stack-gap)}
.tabs{display:flex;gap:var(--stack-gap);flex-wrap:wrap}
.tab{
  border-radius: var(--radius-sm);padding:10px 12px;
  border:1px solid rgba(90,15,27,.22);
  background:rgba(255,255,255,.85);
  color:var(--maroon);font-weight:1000;cursor:pointer
}
.tab.is-active{color:#1f1f1f}
.search input{
  width:min(340px, 78vw);
  border-radius: var(--radius-sm);padding:12px 14px;
  border:1px solid rgba(90,15,27,.22);
  background:rgba(255,255,255,.90);
}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack-gap)}
.tile{
  border-radius: var(--radius-sm);overflow:hidden;
  border:1px solid rgba(90,15,27,.18);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  position:relative;
}
.tile__img{width:100%;height:230px;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.tile__meta{padding:var(--block-pad)}
.tile__title{margin:0;font-weight:1000;color:var(--maroon)}
.tile__tag{margin:var(--text-gap) 0 0;color:rgba(44,44,44,.76)}
.tile__tam{margin:var(--text-gap) 0 0;color:rgba(44,44,44,.86);font-weight:900}
.tile__action{
  position:absolute;top:12px;right:12px;
  border-radius: var(--radius-sm);padding:9px 12px;
  border:1px solid rgba(255,255,255,.22);
  color:#1f1f1f;font-weight:1000;cursor:pointer
}
.tile[hidden]{display:none !important}

.note{margin-top:var(--stack-gap);padding:var(--block-pad);border-radius:var(--radius);border:1px dashed rgba(90,15,27,.26);background:rgba(255,255,255,.82)}

/* ===== About Split Section ===== */
.aboutSplit{display:grid;gap:var(--stack-gap)}
.aboutRow{
  display:grid;
   grid-template-columns: 1.2fr 1fr;
  gap:var(--stack-gap);
  align-items:center;
  padding:var(--block-pad);
  border-radius:var(--radius);
  border:1px solid rgba(90,15,27,.12);
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 46px rgba(0,0,0,.08);
}
.aboutRow__content p{margin:0}
.aboutRow__media img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:var(--radius-sm);
}
/* ===============================
   DESKTOP ONLY TWEAKS
   =============================== */
@media (min-width: 769px){

  /* first row image */
  .aboutRow:first-child .aboutRow__media img{
    width: 43% !important;
    margin-left: auto;
    display: block;
  }

  /* second row image */
  .aboutRow:nth-of-type(2) .aboutRow__media img{
    width: 88%;
    height: 400px;
    margin-right: auto;   /* move image to LEFT */
    margin-left: 0;
    display: block;
    
  }
   .aboutRow:nth-of-type(2){
    grid-template-columns: 1fr 620px; 
    column-gap: 5px;
  }

}


.aboutRow.is-reverse .aboutRow__media{order:1}
.aboutRow.is-reverse .aboutRow__content{order:2}

/* ===== Footer (strict) ===== */
.footer{margin-top:0;background:var(--maroon-grad);color:rgba(255,255,255,.94);border-top:1px solid rgba(255,255,255,.14)}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--stack-gap);padding:26px 0}
.footerLogo{display:flex;align-items:center;gap:var(--stack-gap)}
.footerLogo__img{width:184px;height:176px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08)}
.footer__title{margin:0 0 10px;font-weight:1000;color:rgba(255,255,255,.95)}
.footer__links{list-style:none;margin:0;padding:0;display:grid;gap:var(--text-gap)}
.footer__links a{
  color:rgba(255,255,255,.90);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(212,175,55,.55)
}
.footer__links a:hover{color:var(--gold);text-shadow:var(--gold-glow);text-decoration-color:rgba(212,175,55,.92)}

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:14px 0 18px;
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--stack-gap);flex-wrap:wrap
}
.iconRow{display:flex;align-items:center;gap:var(--stack-gap);flex-wrap:wrap}
.iconBtn{
  width:42px;height:42px;border-radius: var(--radius-sm);
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08)
}
.iconBtn:hover{background:rgba(212,175,55,.14);box-shadow:var(--gold-glow)}
.iconBtn svg{width:20px;height:20px;fill:#fff}

/* WhatsApp FAB */
.whatsappFab{
  position:fixed;right:16px;bottom:16px;
  width:58px;height:58px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;z-index:80;
  border:0;
  background:#25D366;
  box-shadow:0 10px 22px rgba(37,211,102,.35);
}
.whatsappFab svg{width:22px;height:22px;fill:#fff;display:block}

/* ===== Responsive ===== */
@media (max-width:980px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr}
  .aboutRow{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;right:20px;top:calc(100% + 10px);
    width:min(380px, calc(100vw - 40px));
    display:none;flex-direction:column;align-items:stretch;gap:var(--stack-gap);
    padding:var(--block-pad);border-radius:var(--radius);border:1px solid rgba(255,255,255,.18);
    background:rgba(90,15,27,.98);box-shadow:0 22px 70px rgba(0,0,0,.18)
  }
  .nav__menu.is-open{display:flex}
  .gallery{grid-template-columns:1fr}
  /* .slide{height:min(520px, 72vh)} */
  .slide{height:min(520px, 34vh)}
}
/* ===== Quick View Modal ===== */
.qvModal{position:fixed;inset:0;display:none;z-index:120}
.qvModal.is-open{display:block}
.qvBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.qvPanel{
  position:relative;
  width:min(920px, calc(100% - 36px));
  margin:8vh auto 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(90,15,27,.22), transparent 55%),
    rgba(250,247,242,.98);
}
.qvHead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--stack-gap);
  padding:16px;
  background:linear-gradient(90deg, rgba(90,15,27,.92), rgba(90,15,27,.78));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.qvTitle{margin:0;font-family:var(--font-head);font-size:1.35rem}
.qvSub{margin:var(--text-gap) 0 0;color:rgba(255,255,255,.82)}
.qvClose{
  width:44px;height:44px;border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;font-weight:900;cursor:pointer
}
.qvBody{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.qvImg{width:100%;height:430px;object-fit:cover}
.qvInfo{padding:var(--block-pad)}
.qvTag{margin:0;font-weight:900;color:var(--maroon)}
.qvTam{margin:var(--text-gap) 0 0;font-weight:900}
.qvBadges{display:flex;gap:var(--stack-gap);flex-wrap:wrap;margin-top:var(--stack-gap)}
.qvBadge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  font-weight:1000;font-size:.92rem
}
.qvActions{display:flex;gap:var(--stack-gap);flex-wrap:wrap;margin-top:var(--stack-gap)}

@media (max-width: 768px){

  /* modal container */
  .qvModal{
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .qvModal.is-open{
    display: flex;
  }

  /* panel sizing */
  .qvPanel{
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-height: 90vh;          /* 🔥 KEY FIX */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* header fixed height */
  .qvHead{
    padding: 12px;
    flex-shrink: 0;
  }

  .qvTitle{
    font-size: 1.05rem;
  }

  .qvSub{
    font-size: 0.8rem;
  }

  /* body scrolls */
  .qvBody{
    grid-template-columns: 1fr;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* image height REDUCED (important) */
  .qvImg{
    width: 100%;
    height: 220px;             /* 🔥 prevents bottom cut */
    object-fit: cover;
    flex-shrink: 0;
  }

  /* info area */
  .qvInfo{
    padding: 14px;
  }

  .qvBadge{
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* buttons */
  .qvActions{
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .qvActions .btn{
    font-size: 0.85rem;
    padding: 8px 14px;
  }
}


/* FORCE visibility for Showroom Only pill */
.qvBadge.maroonShine,
.qvBadge.maroonShine * {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
   FIX 1: BUTTON TEXT VISIBILITY (GLOBAL SAFE FIX)
========================================================= */
.btn{
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}

/* Buttons on LIGHT sections should follow global style (keep maroon background) */
.section .btn{
  color: #fff;
  background: var(--maroon);
  border: 1px solid rgba(0,0,0,.12);
}

/* Keep GOLD shine / gold buttons consistent with global maroon style */
.btn--gold, .btn.goldShine{
  color: #fff !important;
  background: var(--maroon) !important;
  background-image: none !important;
  font-size: 14px;
}

/* Maroon shine buttons stay white text */
.btn.maroonShine{
  color:#fff !important;
  font-size: 14px;
  font-weight: 1000;
}

/* Ensure other button-like controls always have readable text */
.btn,
.topSearch__btn,
.nav__menu a,
.filterBtn,
.filterClose,
.iconBtn,
.fab,
.tile__action,
.qvClose{
  color: #fff;
  -webkit-text-fill-color: #fff;
  line-height: 1.2;
}


.showActions .btn{
  font-family: inherit;
  font-weight: 700 !important;        /* 🔥 SAME WEIGHT */
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;              /* fix <a> */
}

/* remove button default boldness */
.showActions button.btn{
  font-weight: 700 !important;
}

/* remove anchor default thin text */
.showActions a.btn{
  font-weight: 700 !important;
}


/* =========================================================
   FIX 2: HOME ICON STYLE
========================================================= */
.navHome{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.homeIcon{
  width:18px;
  height:18px;
  fill: rgba(255,255,255,.95);
}

/* =========================================================
   FIX 3: HOME TOP SEARCH BAR (ONLY index.html uses it)
========================================================= */
.topSearch{
  display:flex;
  align-items:center;
  gap:var(--text-gap);
  flex: 1;
  min-width: 280px;
  max-width: 640px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.topSearch__icon{ color:#fff; opacity:.9; }
.topSearch input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-weight:600;
}
.topSearch input::placeholder{ color:rgba(255,255,255,.72); }
.topSearch__btn{
  border:none;
  padding:8px 14px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-weight:900;
}

/* =========================================================
   HOME BLOCK: CATEGORY SLIDER (COLOR CHANGE ONLY)
========================================================= */
.category-slider-wrapper{
  display:flex;
  align-items:center;
  gap:var(--stack-gap);
  padding: var(--section-pad) 0;
  background: rgba(90,15,27,.06);
  border-top: 1px solid rgba(90,15,27,.10);
  border-bottom: 1px solid rgba(90,15,27,.10);
}
.category-slider{
  display:flex;
  gap:var(--stack-gap);
  overflow-x:auto;
  scroll-behavior:smooth;
  padding: 0 10px;
}
.category-slider::-webkit-scrollbar{ height:8px; }
.category-slider::-webkit-scrollbar-thumb{ background: rgba(90,15,27,.25); border-radius:999px; }

.category-card{
  min-width: 150px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(90,15,27,.14);
  border-radius:var(--radius-sm);
  padding: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  text-align:center;
}
.category-image{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:var(--radius-sm);
  margin: 0 auto 8px;
}
.category-name{
  font-weight:900;
  color: var(--maroon);
}

/* =========================================================
   HOME BLOCK: PRODUCTS WITH FILTERS (COLOR CHANGE ONLY)
========================================================= */
.products-with-filters{
  padding: var(--section-pad) 0;
  background: rgba(212,175,55,.10);
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.filter-header{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--stack-gap);
  flex-wrap:wrap;
}
.filter-btn{
  background: var(--maroon);
  color:#fff;
  border:none;
  border-radius: var(--radius-sm);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.sort-dropdown{
  display:flex;
  align-items:center;
  gap:var(--text-gap);
  font-weight:900;
  color: var(--maroon);
}
.sort-dropdown select{
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(90,15,27,.22);
  background:#fff;
}

/* =========================================================
   HOME BLOCK: SHOP BY CATEGORY
========================================================= */
.shopByCategory{ padding: var(--section-pad) 0; }
.shopGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--stack-gap);
}
.shopCard{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 16px 10px;
  border-radius: 18px;
  background: rgba(90,15,27,.90);
  color:#fff;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
}
.shopCard:hover{
  background: rgba(90,15,27,.98);
  box-shadow: 0 0 26px rgba(212,175,55,.35);
}

@media (max-width:980px){
  .shopGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* =========================================
   HOME BROWSE SECTION (NEW) - MISSING CSS
========================================= */

.homeBrowse{
  padding: var(--section-pad) 0;
}

/* ===== CATEGORY SLIDER ===== */
.catWrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
  margin-top: var(--stack-gap);
}

.catSlider{
  display: flex;
  gap: var(--stack-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 8px;
  flex: 1;
}
.catSlider::-webkit-scrollbar{ height: 8px; }
.catSlider::-webkit-scrollbar-thumb{
  background: rgba(90,15,27,.25);
  border-radius: 999px;
}

.catArrow{
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(90,15,27,.25);
  background: rgba(255,255,255,.8);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  color: var(--maroon);
}
.catArrow:hover{
  box-shadow: var(--shadow);
  background: rgba(212,175,55,.15);
}

/* Category Cards */
.catCard{
  min-width: 150px;
  height: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(90,15,27,.12);
  background: linear-gradient(135deg, rgba(212,175,55,.10), rgba(90,15,27,.04));
  padding: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}
.catCard:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}
.catCard.is-active{
  border: 1px solid rgba(212,175,55,.65);
  box-shadow: var(--gold-glow);
}

/* Decorative rotated square behind image for a layered maroon/gold look */
.catCard::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -20%;
  background: linear-gradient(135deg, rgba(90,15,27,.06), rgba(212,175,55,.06));
  transform: rotate(12deg);
  z-index: 0;
}

.catRing{
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.02));
  z-index: 1;
}
.catRing img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catName{
  font-weight: 700;
  /*color: #1f1f1f;*/
  color: var(--maroon);
  font-size: .95rem;
  z-index: 1;
  margin-top: 6px;
}

/* Make sure the category slider keeps horizontal scrolling and spacing */
/* =========================================
   HIDE HORIZONTAL SCROLLBAR (GLOBAL FIX)
========================================= */

/* Category slider */
.category-slider,
.catSlider{
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}

.category-slider::-webkit-scrollbar,
.catSlider::-webkit-scrollbar{
  display: none;                /* Chrome / Safari */
}




/* ===== BROWSE BAR (FILTER + DROPDOWN) ===== */
.browseBar{
  margin-top: var(--stack-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-gap);
  flex-wrap: wrap;
  padding: var(--block-pad);
  border-radius: 18px;
  border: 1px solid rgba(90,15,27,.18);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 46px rgba(0,0,0,.08);
}

.filterBtn{
  display: inline-flex;
  align-items: center;
  gap: var(--text-gap);
  font-weight: 1000;
}

.browseDrop{
  display: flex;
  align-items: center;
  gap: var(--stack-gap);
}
.browseLabel{
  font-weight: 900;
  color: var(--maroon);
}
.browseSelect{
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid rgba(90,15,27,.22);
  background: rgba(255,255,255,.92);
  font-weight: 700;
  outline: none;
}

/* ===== FILTER PANEL ===== */
.filterPanel{
  margin-top: var(--stack-gap);
  border-radius: 20px;
  border: 1px solid rgba(90,15,27,.18);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: var(--block-pad);
  display: none;
}
.filterPanel.is-open{
  display: block;
}

.filterPanel__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-gap);
  padding-bottom: var(--text-gap);
  border-bottom: 1px solid rgba(90,15,27,.12);
  margin-bottom: var(--stack-gap);
}

.filterTitle{
  font-weight: 1000;
  color: var(--maroon);
  font-size: 1.05rem;
}

.filterClose{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(90,15,27,.18);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  font-weight: 1000;
  color: var(--maroon);
}
.filterClose:hover{
  box-shadow: var(--shadow);
}

.filterGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stack-gap);
}

.filterGroup{
  border-radius: 18px;
  border: 1px solid rgba(90,15,27,.12);
  background: rgba(250,247,242,.9);
  padding: var(--block-pad);
}

.filterGroup__title{
  font-weight: 1000;
  color: var(--maroon);
  margin-bottom: var(--text-gap);
}

.check{
  display: flex;
  gap: var(--text-gap);
  align-items: center;
  margin: var(--text-gap) 0;
  font-weight: 700;
  color: rgba(44,44,44,.86);
}

.filterSearch{
  width: 100%;
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  border: 1px solid rgba(90,15,27,.22);
  background: rgba(255,255,255,.92);
  outline: none;
}

.filterActions{
  display: flex;
  gap: var(--stack-gap);
  flex-wrap: wrap;
  margin-top: var(--stack-gap);
}

/* ===== SHOW GRID ===== */
.showGrid{
  margin-top: var(--stack-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stack-gap);
}

.showCard{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(90,15,27,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 46px rgba(0,0,0,.08);
}

.showCard img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

.showInfo{
  padding: var(--block-pad);
}

.showInfo h3{
  margin: 0;
  color: var(--maroon);
  font-weight: 1000;
}

.showActions{
  display: flex;
  gap: var(--stack-gap);
  flex-wrap: wrap;
  margin-top: var(--stack-gap);
}

/* =========================================
   CREATOR BOX SECTION (anm-creator) - CSS
========================================= */

.anm-creator{
  padding: var(--section-pad) 18px;
  background: rgba(90,15,27,.10);
  border-top: 1px solid rgba(90,15,27,.12);
  border-bottom: 1px solid rgba(90,15,27,.12);
}

.anm-creator-head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--stack-gap);
}

.anm-creator-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 20px;
  font-weight: 1000;
  color: #1f1f1f;
}
.anm-creator h2{
  margin: 0;
  font-family: var(--font-head);
  color: var(--maroon);
}
.anm-creator p{
  margin: var(--text-gap) 0 0;
  color: rgba(44,44,44,.82);
  font-weight: 700;
}

.anm-creator-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-gap);
  max-width: 1180px;
  margin: 0 auto;
}

.anm-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(90,15,27,.18);
  box-shadow: 0 20px 70px rgba(0,0,0,.12);
  background: rgba(255,255,255,.92)18
}

.anm-card img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

.anm-overlay{
  position: absolute;
  inset: 0;
  padding: var(--block-pad);
  display: grid;
  align-content: start;
  color: #fff;
  /*background: linear-gradient(180deg, rgba(90,15,27,.55), rgba(0,0,0,.10));*/
}

.anm-big{
  font-size: 54px;
  font-weight: 1000;
  line-height: 1;
}
.anm-mid{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .12em;
}
.anm-small{
  margin-top: var(--text-gap);
  font-weight: 800;
  opacity: .9;
}

.anm-strip{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  font-weight: 900;
  font-size: .85rem;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.12);
}

.anm-right{
  align-content: center;
  text-align: left;
}

.anm-rt1{font-size: 26px;font-weight: 900;}
.anm-rt2{font-size: 46px;font-weight: 1000;text-transform: lowercase;}
.anm-rt3{font-size: 22px;font-weight: 900;margin-bottom: var(--text-gap);}

.anm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  width: fit-content;
}
.anm-btn:hover{
  background: rgba(212,175,55,.18);
  box-shadow: var(--gold-glow);
}


/* ===== Responsive for new sections ===== */
@media (max-width: 980px){
  .filterGrid{grid-template-columns: 1fr;}
  .showGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .anm-creator-grid{grid-template-columns: 1fr;}
}
@media (max-width: 760px){
  .showGrid{grid-template-columns: 1fr;}
  .catCard{min-width: 120px;}
  .anm-card img{height: 360px;}
}

.anms-creator{
  padding: var(--section-pad) 18px;
  background: rgba(90,15,27,.10);
  border-top: 1px solid rgba(90,15,27,.12);
  border-bottom: 1px solid rgba(90,15,27,.12);
}

.anms-creator-head{
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--stack-gap);
}

.anms-creator-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 20px;
  font-weight: 1000;
  color: #1f1f1f;
}
.anms-creator h2{
  margin: 0;
  font-family: var(--font-head);
  color: var(--maroon);
}
.anms-creator p{
  margin: var(--text-gap) 0 0;
  color: rgba(44,44,44,.82);
  font-weight: 700;
}

.anms-creator-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-gap);
  max-width: 1180px;
  margin: 0 auto;
}

.anms-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(90,15,27,.18);
  box-shadow: 0 20px 70px rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
}

.anms-card img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

.anms-overlay{
  position: absolute;
  inset: 0;
  padding: var(--block-pad);
  display: grid;
  align-content: start;
  color: #fff;
  background: linear-gradient(180deg, rgba(90,15,27,.82), rgba(0,0,0,.18));
}

.anms-big{
  font-size: 54px;
  font-weight: 1000;
  line-height: 1;
}
.anms-mid{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .12em;
}
.anms-small{
  margin-top: var(--text-gap);
  font-weight: 800;
  opacity: .9;
}

.anms-strip{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  font-weight: 900;
  font-size: .85rem;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.12);
}

.anms-right{
  align-content: center;
  text-align: left;
}

.anms-rt1{font-size: 26px;font-weight: 900;}
.anms-rt2{font-size: 46px;font-weight: 1000;text-transform: lowercase;}
.anms-rt3{font-size: 22px;font-weight: 900;margin-bottom: var(--text-gap);}

.anms-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  width: fit-content;
}
.anms-btn:hover{
  background: rgba(212,175,55,.18);
  box-shadow: var(--gold-glow);
}

/* Home: keep showcase grid spacing consistent within Explore Collections */
.homeBrowse .anms-creator{
  margin-top: var(--stack-gap);
  padding: 0;
}
.homeBrowse .anms-creator .showGrid{
  margin-top: 0;
}