/* =========================================================
   CHURII — Rajasthani Bangles Store Clone
   ========================================================= */

:root{
  --maroon-dark:#3d0c0c;
  --maroon:#5c1616;
  --maroon-light:#7a2020;
  --cream:#faf3e6;
  --cream-light:#fdf9f0;
  --gold:#b8860b;
  --gold-light:#d9ab3d;
  --text-dark:#3a2418;
  --text-muted:#8a7863;
  --radius:10px;
  --shadow:0 8px 24px rgba(60,20,10,.12);
  font-size:16px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{overflow-x:hidden;}
body{
  font-family:'Poppins',sans-serif;
  background-color:var(--cream);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* subtle jaali (lattice) weave, a quiet Rajasthani textile texture */
  background-image:
    repeating-linear-gradient(45deg, rgba(184,134,11,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(184,134,11,.05) 0 1px, transparent 1px 26px);
}

h1,h2,h3,h4{font-family:'Playfair Display',serif;}

a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{display:block;max-width:100%;}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--maroon-dark);
  color:#f0e3c8;
  font-size:.72rem;
  letter-spacing:.03em;
}
.topbar-inner{
  max-width:1300px;margin:0 auto;
  display:flex;justify-content:center;gap:2.5rem;
  padding:.5rem 1rem;
}

/* ============ HEADER ============ */
.header{
  background:#DC3662;
  color:var(--cream);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.header-inner{
  max-width:1300px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.5rem;
  gap:1rem;
}
.logo{
  display:flex;align-items:center;gap:.6rem;
  flex-shrink:0;
  position:relative;
}
.logo-img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--gold-light);flex-shrink:0;
}
.logo-text{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-weight:700;
  letter-spacing:.02em;
  color:var(--gold-light);
  line-height:1.1;
}
.nav{display:flex;gap:1.8rem;font-size:.92rem;font-weight:500;flex:1;align-items:center;}
.nav-right{justify-content:flex-end;}
.nav a{position:relative;opacity:.9;transition:opacity .2s,color .2s;white-space:nowrap;}
.nav a:hover,.nav a.active{opacity:1;color:var(--gold-light);}
.nav a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold-light);
}
.chev{font-size:.7em;}

/* Shop / Collections dropdowns */
.nav-item{position:relative;}
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:200px;
  background:var(--cream-light);border:1px solid var(--gold);border-radius:8px;
  box-shadow:var(--shadow);padding:.4rem;z-index:150;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s,visibility .25s;
}
.nav-item.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{
  display:block;padding:.55rem .8rem;font-size:.85rem;color:var(--text-dark);
  border-radius:6px;white-space:nowrap;opacity:1;transition:background .2s,color .2s;
}
.dropdown-menu a:hover{background:var(--maroon);color:var(--gold-light);}
@media (hover:hover) and (pointer:fine){
  .nav-item:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
}
.header-icons{display:flex;gap:1rem;align-items:center;flex-shrink:0;}
.header-icons button{color:var(--cream);font-size:1.05rem;position:relative;}
.cart-count{
  position:absolute;top:-6px;right:-8px;background:var(--gold-light);color:var(--maroon-dark);
  font-size:.6rem;font-weight:700;border-radius:50%;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
}
.hamburger{display:none;flex-direction:column;gap:4px;}
.hamburger span{width:22px;height:2px;background:var(--cream);}

/* Wishlist header icon */
#wishlistToggle{color:var(--cream);}
.wi-actions{display:flex;gap:.5rem;margin-top:.3rem;}
.wi-addcart{
  background:var(--maroon-dark);color:#fff;font-size:.72rem;font-weight:600;
  padding:.4rem .7rem;border-radius:6px;text-transform:uppercase;letter-spacing:.02em;
  transition:background .2s;
}
.wi-addcart:hover{background:var(--gold);color:var(--maroon-dark);}

/* About section */
.about-content{max-width:760px;margin:0 auto;text-align:center;padding:0 1.5rem;}
.about-content p{color:var(--text-muted);line-height:1.8;margin-bottom:.9rem;font-size:.95rem;}

/* ============ HERO ============ */
.hero{
  position:relative;
  width:100%;
  height:78vh;min-height:480px;
  overflow:hidden;
  display:flex;align-items:center;
  background-color:var(--maroon-dark);
}
.hero-video{
  position:absolute;
  top:50%;left:50%;
  width:100%;height:100%;
  min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;object-position:center;
  z-index:0;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(30,8,8,.72) 0%,rgba(30,8,8,.35) 55%,rgba(30,8,8,.15) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:1300px;margin:0 auto;padding:0 3rem;
  color:#fff;max-width:560px;
}
.hero-eyebrow{
  text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--gold-light);margin-bottom:1rem;font-weight:600;
}
.hero-eyebrow::before{content:'✦ ';}
.hero-content h1{
  font-size:3.2rem;line-height:1.15;font-weight:700;margin-bottom:1.1rem;
  text-shadow:0 4px 20px rgba(0,0,0,.35);
}
.hero-sub{font-size:1.02rem;opacity:.92;margin-bottom:1.8rem;line-height:1.6;max-width:440px;}
.btn{
  display:inline-block;padding:.85rem 2.2rem;border-radius:4px;font-weight:600;font-size:.9rem;
  letter-spacing:.05em;text-transform:uppercase;transition:transform .25s,box-shadow .25s;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#2a0f0f;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(184,134,11,.4);}

/* Decorative gold jaali (lattice) frame inset inside the hero, Rajasthani-mahal style */
.hero-jali-frame{
  position:absolute;inset:18px;z-index:2;pointer-events:none;
  border:1px solid rgba(217,171,61,.55);
  border-radius:2px;
}
.hero-jali-frame::before,.hero-jali-frame::after{
  content:'';position:absolute;width:34px;height:34px;
  border:2px solid var(--gold-light);opacity:.85;
}
.hero-jali-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none;}
.hero-jali-frame::after{bottom:-2px;right:-2px;border-left:none;border-top:none;}

/* Scalloped temple-arch (jharokha) divider strip used between sections */
.arch-divider{
  height:20px;width:100%;
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,0 H40 V5 C40,5 34,20 20,20 C6,20 0,5 0,5 Z' fill='%235c1616'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:40px 20px;
  background-position:top center;
}
.arch-divider.on-maroon{background-color:var(--maroon);}
.arch-divider.on-maroon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,0 H40 V5 C40,5 34,20 20,20 C6,20 0,5 0,5 Z' fill='%23faf3e6'/%3E%3C/svg%3E");
}

/* ============ SECTION SHARED ============ */
.section{max-width:1300px;margin:0 auto;padding:3.2rem 1.5rem;}
.section-title{
  text-align:center;margin-bottom:2.4rem;position:relative;
  font-size:1.55rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--maroon-dark);
}
.section-title span{
  position:relative;padding:0 1rem;background:var(--cream);
  display:inline-flex;align-items:center;gap:.7rem;
}
.section-title span::before,.section-title span::after{
  content:'❧';color:var(--gold);font-size:1.1rem;opacity:.75;
}
.section-title::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 10px);
  opacity:.55;
}

/* ============ LOADING STATE (skeleton placeholders, no blank screen) ============
   While the real data is still loading from the server, the store-driven
   sections show shimmering skeleton cards/circles (see .skel below) instead
   of being hidden — so a first-time visitor immediately sees "content is
   loading here" instead of empty space that looks like there are no
   products. Once the real data arrives, script.js replaces the skeleton
   markup with the actual cards/circles/posters. */
html.churii-loading #circleTrack,
html.churii-loading #posterCarousel,
html.churii-loading #bsViewport,
html.churii-loading .reels-row,
html.churii-loading .grid.grid-4,
html.churii-loading .grid.grid-3{
  pointer-events:none;
}

/* ---- skeleton shimmer building block ---- */
.skel{
  position:relative;
  background:linear-gradient(90deg, rgba(184,134,11,.12) 25%, rgba(184,134,11,.28) 37%, rgba(184,134,11,.12) 63%);
  background-size:400% 100%;
  animation:skelShimmer 1.4s ease infinite;
  border-radius:8px;
}
@keyframes skelShimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
.skel-wrap{cursor:default;}
.skel-wrap:hover{transform:none !important;box-shadow:0 3px 12px rgba(60,20,10,.08) !important;border-color:transparent !important;}
.skel-line{height:12px;border-radius:6px;}

#circleTrack, #posterCarousel, .grid.grid-4, .grid.grid-3{
  transition:opacity .35s ease;
}
@keyframes churiiSpin{ to{ transform:rotate(360deg); } }

/* ---- loading spinner (shown instead of skeleton shimmer while
   products/collections/etc are still loading from the server;
   disappears the instant the real content is ready) ---- */
.churii-spinner-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:160px;
  grid-column:1/-1;
}
.churii-spinner{
  width:42px;
  height:42px;
  border:3px solid rgba(184,134,11,.22);
  border-top-color:var(--gold,#b8860b);
  border-radius:50%;
  animation:churiiSpin .8s linear infinite;
}

/* ============ BROWSE BY COLLECTION (circles) ============ */
.circle-row{display:flex;align-items:center;gap:.6rem;}
.circle-track{
  display:flex;gap:2.2rem;overflow-x:auto;scroll-behavior:smooth;
  flex:1;padding:.8rem 1.2rem 1rem .2rem;scrollbar-width:none;
  min-width:0;
}
.circle-track::-webkit-scrollbar{display:none;}
.circle-item{cursor:pointer;
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  width:110px;text-align:center;cursor:pointer;
}
.circle-img{
  width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:3px solid var(--gold-light);box-shadow:var(--shadow);
  transition:transform .3s,border-color .3s;
  position:relative;
  outline:1px dashed rgba(184,134,11,.55);
  outline-offset:5px;
}
.circle-item:hover .circle-img{transform:translateY(-6px) scale(1.05);border-color:var(--maroon);}
.circle-img img{width:100%;height:100%;object-fit:cover;}
.circle-item span{font-size:.82rem;font-weight:600;color:var(--text-dark);}
.circle-img-all{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold-light),var(--gold));}
.all-icon{width:34%;height:34%;color:#fff;}
.circle-nav{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--cream-light);border:1px solid var(--gold-light);color:var(--maroon);
  font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow);transition:background .2s,color .2s,border-color .2s;
}
.circle-nav:hover{background:var(--gold);color:#fff;border-color:var(--gold);}
@media (max-width:600px){
  .circle-nav{display:none;}
  .circle-track{padding-right:.6rem;}
}

/* ============ PRODUCT CARD (4:5 ratio) ============ */
.product-card{
  background:var(--cream-light);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 3px 12px rgba(60,20,10,.08);
  border:1px solid transparent;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  position:relative;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 34px rgba(60,20,10,.18);
  border-color:var(--gold-light);
}

.product-media{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#eee2c9;
}
.product-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.product-card:hover .product-media img{transform:scale(1.12) rotate(.5deg);}

.product-badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:var(--maroon);color:var(--gold-light);
  font-size:.65rem;font-weight:700;letter-spacing:.04em;
  padding:.28rem .6rem;border-radius:20px;text-transform:uppercase;
  max-width:calc(100% - 2.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wishlist-btn{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--maroon);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  transition:background .2s,transform .25s,color .2s;
  opacity:1;transform:translateY(0);
}
.wishlist-btn:hover{background:var(--maroon);color:#fff;}
.wishlist-btn.active{color:#e0455a;opacity:1;transform:translateY(0);}

.quick-add{
  position:absolute;left:.6rem;right:.6rem;bottom:-46px;z-index:2;
  background:var(--maroon-dark);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:.65rem;border-radius:6px;text-align:center;
  transition:bottom .35s ease,background .25s;
}
.quick-add:hover{background:var(--gold);color:var(--maroon-dark);}
.product-card:hover .quick-add{bottom:.6rem;}

/* Desktop-only (real mouse+hover): keep the elegant reveal-on-hover animation
   for the wishlist heart icon. Quick-add now reveals on hover/tap on every
   device, since mobile browsers already trigger :hover on tap. */
@media (hover:hover) and (pointer:fine){
  .wishlist-btn{opacity:0;transform:translateY(-6px);}
  .product-card:hover .wishlist-btn{opacity:1;transform:translateY(0);}
  .wishlist-btn.active{opacity:1;transform:translateY(0);}
}

.product-info{padding:.9rem 1rem 1.1rem;}
.product-name{
  font-size:.9rem;font-weight:600;margin-bottom:.4rem;color:var(--text-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product-rating{color:var(--gold);font-size:.72rem;margin-bottom:.4rem;letter-spacing:1px;}
.product-rating span{color:var(--text-muted);margin-left:.3rem;}
.product-price{font-size:.92rem;font-weight:700;color:var(--maroon-dark);}
.product-price del{color:var(--text-muted);font-weight:400;font-size:.8rem;margin-left:.5rem;}

/* ============ BEST SELLERS CAROUSEL ============ */
.carousel-wrap{display:flex;align-items:center;gap:.8rem;}
.carousel-viewport{
  flex:1;
  overflow:hidden;
  /* Extra vertical room + a matching negative margin means the hover
     lift/box-shadow has space to breathe without ever getting clipped
     ("cut") by the overflow:hidden edge, while taking up zero extra
     layout space outside the carousel. */
  padding:22px 0 40px;
  margin:-22px 0 -40px;
  cursor:grab;
  touch-action:pan-y;
}
.carousel-viewport.dragging{cursor:grabbing;}
.carousel-track{
  display:flex;gap:1.4rem;
  will-change:transform;
  backface-visibility:hidden;
}
.carousel-track .product-card{flex:0 0 calc(25% - 1.05rem);min-width:200px;}

/* ============ GRID (static sections) ============ */
.grid{display:grid;gap:1.4rem;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3, minmax(0,290px));justify-content:center;}

/* ============ POSTER SECTION (one at a time, auto 2s) ============ */
.poster-section{padding-top:1rem;padding-bottom:1rem;}
.poster-carousel{
  position:relative;
  width:100%;
  aspect-ratio:1200/460;
  max-height:440px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.poster-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transform:scale(1.04);
  transition:opacity .7s ease,transform 1.6s ease,visibility .7s;
}
.poster-slide.active{opacity:1;visibility:visible;transform:scale(1);}
.poster-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}
.poster-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,6,6,.72) 0%,rgba(20,6,6,.25) 50%,transparent 100%);
}
.poster-text{
  position:absolute;left:2.5rem;top:50%;transform:translateY(-50%);z-index:2;color:#fff;
  max-width:min(320px,calc(100% - 3rem));
}
.poster-text h3{font-size:clamp(1.15rem,3.2vw,1.7rem);margin-bottom:.5rem;}
.poster-text p{font-size:clamp(.78rem,2vw,.88rem);opacity:.9;margin-bottom:1rem;}
.poster-link{
  font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light);
  border-bottom:1px solid var(--gold-light);padding-bottom:2px;transition:opacity .2s;
}
.poster-link:hover{opacity:.7;}
.poster-dots{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:.5rem;
}
.poster-dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s,width .3s;
}
.poster-dots button.active{background:var(--gold-light);width:22px;border-radius:5px;}
.poster-caption{
  text-align:center;margin-top:1.4rem;text-transform:uppercase;letter-spacing:.25em;font-size:.78rem;
  color:var(--maroon-dark);font-weight:700;position:relative;
}
.poster-caption::before,.poster-caption::after{
  content:'';position:absolute;top:50%;width:60px;height:1px;background:var(--gold);
}
.poster-caption::before{left:calc(50% - 130px);}
.poster-caption::after{right:calc(50% - 130px);}

/* ============ REELS ============ */
.reels-section{
  position:relative;
  padding:3.4rem 1.5rem;
  background-color:var(--maroon-dark);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.reels-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,6,6,.78) 0%,rgba(20,6,6,.55) 45%,rgba(20,6,6,.82) 100%);
}
.reels-inner{position:relative;z-index:2;max-width:1300px;margin:0 auto;}
.reels-title span{color:#fff;background:transparent;}
.reels-title span::before,.reels-title span::after{content:'✦';color:var(--gold-light);background:none;opacity:.85;}
.reels-title::before{background:repeating-linear-gradient(90deg,var(--gold-light) 0 6px,transparent 6px 10px);opacity:.4;}
.reels-row{
  display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:1.4rem;margin-top:1.6rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--gold-light) transparent;
}
.reels-row::-webkit-scrollbar{height:6px;}
.reels-row::-webkit-scrollbar-thumb{background:var(--gold-light);border-radius:6px;}
.reels-row::-webkit-scrollbar-track{background:transparent;}
.reel-card{
  position:relative;width:200px;flex:0 0 auto;scroll-snap-align:start;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.45);border:1px solid rgba(217,171,61,.4);
  transition:transform .3s;
}
.reel-card:hover{transform:translateY(-6px);}
.reel-card video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}

/* ============ FEATURES ROW ============ */
.features-row{
  background:var(--maroon-dark);color:var(--cream);
  display:flex;justify-content:space-around;flex-wrap:wrap;
  padding:2rem 1.5rem;gap:1.5rem;
}
.feature{text-align:center;font-size:.82rem;font-weight:500;}
.f-icon{display:block;font-size:1.6rem;margin-bottom:.5rem;}

/* ============ FOOTER ============ */
.footer{
  position:relative;
  color:#eadfc9;
  background-color:#CB964C;
  background-image:url('image/footer1.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.footer-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(75,52,20,.90) 0%,rgba(75,52,20,.85) 100%);
}
.footer-top,.footer-bottom{position:relative;z-index:2;}
.footer-top{
  max-width:1300px;margin:0 auto;padding:3rem 1.5rem 2rem;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:2rem;
}
.footer-logo-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.15rem;}
.footer-logo-img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold-light);flex-shrink:0;}
.footer-brand h3{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--gold-light);}
.footer-tagline{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);opacity:.8;margin-bottom:.8rem;}
.footer-brand p{font-size:.85rem;line-height:1.6;opacity:.85;margin-bottom:1rem;}
.socials{display:flex;gap:.7rem;}
.footer-brand .socials a{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--gold-light);
  display:flex;align-items:center;justify-content:center;color:var(--gold-light);transition:background .2s,color .2s;flex-shrink:0;
  margin-bottom:0;
}
.socials a svg{display:block;}
.footer-brand .socials a:hover{background:var(--gold-light);color:var(--maroon-dark);}
.footer-col h4{font-size:.95rem;color:var(--gold-light);margin-bottom:1rem;letter-spacing:.03em;}
.footer-col a,.footer-col p{
  display:block;font-size:.82rem;opacity:.85;margin-bottom:.65rem;transition:opacity .2s,color .2s;
}
.footer-col a:hover{opacity:1;color:var(--gold-light);}
.footer-contact{position:relative;}
.footer-jali{
  position:absolute;top:0;right:0;width:34px;height:34px;opacity:.35;
  border:1.5px solid var(--gold-light);border-radius:2px;
}
.footer-jali::before,.footer-jali::after{
  content:'';position:absolute;width:14px;height:14px;border:1.5px solid var(--gold-light);
}
.footer-jali::before{top:-1.5px;left:-1.5px;border-right:none;border-bottom:none;}
.footer-jali::after{bottom:-1.5px;right:-1.5px;border-left:none;border-top:none;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  max-width:1300px;margin:0 auto;padding:1.2rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;font-size:.78rem;opacity:.8;flex-wrap:wrap;gap:.6rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .carousel-track .product-card{flex:0 0 calc(50% - .7rem);}
  .footer-top{grid-template-columns:1fr 1fr 1fr;}
  .hero-content h1{font-size:2.4rem;}
}
@media (max-width:720px){
  .nav-left,.nav-right{display:none;}
  .nav-left.mobile-open,.nav-right.mobile-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:100%;left:0;right:0;background:#DC3662;
    padding:.5rem 1.5rem 1rem;box-shadow:0 12px 20px rgba(0,0,0,.2);z-index:150;
  }
  .nav-left.mobile-open a,.nav-right.mobile-open a{width:100%;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12);}
  .nav-left.mobile-open .nav-item{width:100%;}
  .nav-left.mobile-open .dropdown-menu,.nav-right.mobile-open .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:rgba(0,0,0,.15);border:none;box-shadow:none;margin:.2rem 0 .4rem;
  }
  .nav-left.mobile-open .nav-item.open .dropdown-menu{display:block;}
  .nav-left.mobile-open .dropdown-menu a{color:var(--cream);border-bottom:none;padding:.5rem .6rem;}
  .hamburger{display:flex;order:-1;margin-right:.3rem;}
  .logo-img{width:36px;height:36px;}
  .logo-text{font-size:1.15rem;}
  .topbar-inner{gap:1rem;overflow-x:auto;white-space:nowrap;justify-content:flex-start;}
  .hero-content{padding:0 1.5rem;}
  .hero-content h1{font-size:1.9rem;}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .carousel-track .product-card{flex:0 0 92%;}
  .poster-carousel{aspect-ratio:4/5;max-height:520px;}
  .poster-text{left:1.2rem;max-width:calc(100% - 2.4rem);}
  .poster-text h3{font-size:1.3rem;}
  .poster-dots{bottom:.7rem;}
  .reels-row{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:.4rem;margin-left:-1.5rem;margin-right:-1.5rem;
    padding-left:1.5rem;padding-right:1.5rem;
  }
  .reels-row::-webkit-scrollbar{display:none;}
  .reel-card{width:150px;flex:0 0 auto;scroll-snap-align:start;}
  .footer-top{grid-template-columns:1fr;}

  /* Mobile view: eye/quick-view icon removed entirely (no real hover on
     phones to justify it), and the Add-to-Cart button is always shown as
     a small round icon — driven by viewport width so it works even on
     devices/webviews where JS touch-detection doesn't fire reliably. */
  .quickview-btn{display:none !important;}
  .quick-add{
    left:auto;
    bottom:.6rem;
    right:.6rem;
    width:34px;
    height:34px;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    line-height:1;
  }
  .quick-add::before{content:'🛒';font-size:1rem;}
  .quick-add:active{background:var(--gold);color:var(--maroon-dark);}
}
@media (max-width:420px){
  .poster-carousel{aspect-ratio:3/4;max-height:460px;}
}

/* Mobile-only consolidated icon (Wishlist / Cart) — hidden on desktop.
   Uses a more specific selector (.header-icons .mobile-quick-wrap) so the
   generic ".icon-wrap{display:flex}" rule further down the file can never
   win the cascade and leak this icon onto the desktop header. */
.header-icons .mobile-quick-wrap{display:none;}

/* =========================================================
   MOBILE HEADER ICONS: collapse Wishlist/Cart into a
   single icon (2 options inside), and stop the search panel
   from overflowing off-screen on narrow viewports.
   ========================================================= */
@media (max-width:720px){
  .desktop-only-icon{display:none !important;}
  .header-icons .mobile-quick-wrap{display:flex;}
  .mobile-quick-panel{right:-6px;width:180px;}

  /* Search panel: anchor to the full-width header instead of the
     narrow icon so it can never stick out past the screen edge */
  .header-icons .icon-wrap:first-child{position:static;}
  #searchPanel{
    left:1rem;right:1rem;width:auto;max-width:none;
  }
}

/* =========================================================
   TOUCH DEVICES: there's no real mouse hover here, so instead
   of waiting on a hover/tap gesture that's unreliable to catch,
   give every product card the "hover" elevated look permanently
   — raised card, shadow, gold border, slightly zoomed image —
   plus the small round cart button, all visible without needing
   to touch anything. Gated on .is-touch (added by script.js via
   JS feature-detection) rather than the (hover:none) media
   feature, since that media feature isn't reported consistently
   by every mobile browser/WebView.
   ========================================================= */
html.is-touch .product-card{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(60,20,10,.16);
  border-color:var(--gold-light);
}
html.is-touch .product-card .product-media img{
  transform:scale(1.06);
}
html.is-touch .product-card.touch-hover{
  transform:translateY(-8px);
  box-shadow:0 18px 34px rgba(60,20,10,.22);
}
html.is-touch .product-card.touch-hover .product-media img{
  transform:scale(1.12) rotate(.5deg);
}
html.is-touch .quick-add{
  left:auto;
  bottom:.6rem;
  right:.6rem;
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  line-height:1;
}
html.is-touch .quick-add::before{
  content:'🛒';
  font-size:1rem;
}
html.is-touch .quick-add:active{background:var(--gold);color:var(--maroon-dark);}

/* =========================================================
   HEADER: SEARCH PANEL, ACCOUNT DROPDOWN
   ========================================================= */
.icon-wrap{position:relative;display:flex;}
.search-panel{
  position:absolute;top:calc(100% + 14px);right:-10px;
  width:300px;background:var(--cream-light);border:1px solid var(--gold);
  border-radius:8px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.4rem;padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s,visibility .25s;
  z-index:200;
}
.search-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.search-panel input{
  flex:1;border:none;background:transparent;outline:none;font-family:'Poppins',sans-serif;
  font-size:.85rem;color:var(--text-dark);padding:.4rem .3rem;
}
.search-panel button{color:var(--maroon);font-size:.85rem;flex-shrink:0;}

.account-panel{
  position:absolute;top:calc(100% + 14px);right:-10px;
  width:170px;background:var(--cream-light);border:1px solid var(--gold);
  border-radius:8px;box-shadow:var(--shadow);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s,visibility .25s;
  z-index:200;
}
.account-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.account-panel a{
  display:block;padding:.65rem 1rem;font-size:.82rem;color:var(--text-dark);
  border-bottom:1px solid rgba(184,134,11,.15);transition:background .2s,color .2s;
}
.account-panel a:last-child{border-bottom:none;}
.account-panel a:hover{background:var(--maroon);color:var(--gold-light);}

.cart-count.pulse{animation:cartPulse .4s ease;}
@keyframes cartPulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.5);}
  100%{transform:scale(1);}
}

/* =========================================================
   QUICK-VIEW BUTTON on product card
   ========================================================= */
.quickview-btn{
  position:absolute;top:.6rem;right:3rem;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--maroon);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  transition:background .2s,transform .25s,color .2s;
  opacity:1;transform:translateY(0);
}
.quickview-btn:hover{background:var(--maroon);color:#fff;}
.product-media img{cursor:pointer;}

@media (hover:hover) and (pointer:fine){
  .quickview-btn{opacity:0;transform:translateY(-6px);}
  .product-card:hover .quickview-btn{opacity:1;transform:translateY(0);}
}
/* Touch devices: tapping the product image already opens quick-view (see script.js),
   so the extra eye icon is redundant here and was overlapping the badge on narrow
   mobile cards — hide it to keep the top row clean. */
html.is-touch .quickview-btn{display:none;}

/* =========================================================
   POPULAR COLLECTION — classic antique-frame look
   ========================================================= */
.grid-classic .product-card{
  border:1px solid var(--gold);
  box-shadow:0 4px 16px rgba(60,20,10,.1);
  position:relative;
}
.grid-classic .product-card::before{
  content:'';position:absolute;inset:6px;border:1px solid rgba(184,134,11,.5);
  pointer-events:none;z-index:1;
}
.grid-classic .product-card .product-media{filter:saturate(.92) sepia(.06);}
.grid-classic .product-info{
  background:var(--cream-light);
  border-top:1px dashed rgba(184,134,11,.4);
  text-align:center;
}
.grid-classic .product-name{font-family:'Playfair Display',serif;font-size:1rem;}
.grid-classic .product-price{color:var(--maroon-dark);}

/* =========================================================
   CART DRAWER
   ========================================================= */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(20,6,6,.5);z-index:300;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.drawer-overlay.open{opacity:1;visibility:visible;}

.cart-drawer{
  position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100%;
  background:var(--cream-light);z-index:301;box-shadow:-8px 0 30px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
  transition:right .4s ease;
}
.cart-drawer.open{right:0;}
.cart-drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 1.4rem;background:var(--maroon);color:var(--gold-light);
}
.cart-drawer-head h3{font-size:1.2rem;}
.cart-drawer-head button{color:#fff;font-size:1rem;}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.4rem;}
.cart-empty{color:var(--text-muted);font-size:.9rem;text-align:center;margin-top:2rem;}
.cart-item{
  display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid rgba(184,134,11,.2);align-items:center;
}
.cart-item img{width:60px;height:75px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.cart-item-info{flex:1;}
.ci-name{font-size:.85rem;font-weight:600;}
.ci-meta{font-size:.72rem;color:var(--text-muted);margin:.2rem 0;text-transform:capitalize;}
.ci-price{font-size:.8rem;font-weight:600;color:var(--maroon-dark);}
.ci-remove{color:var(--text-muted);font-size:.85rem;flex-shrink:0;transition:color .2s;}
.ci-remove:hover{color:#c0293c;}
.cart-footer{padding:1.2rem 1.4rem;border-top:1px solid rgba(184,134,11,.3);}
.cart-total{display:flex;justify-content:space-between;font-size:1rem;margin-bottom:.9rem;}
.cart-total strong{color:var(--maroon-dark);}
.cart-checkout{width:100%;text-align:center;}

/* =========================================================
   PRODUCT QUICK-VIEW MODAL
   ========================================================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,4,4,.72);z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:3vh 3vw;box-sizing:border-box;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.pv-modal{
  background:var(--cream-light);
  width:min(960px,94vw);max-width:100%;
  max-height:92vh;overflow-y:auto;overflow-x:hidden;
  border-radius:14px;
  border:1px solid var(--gold);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 6px rgba(184,134,11,.08);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;align-items:start;position:relative;
  transform:scale(.96);transition:transform .3s;
  box-sizing:border-box;
}
.modal-overlay.open .pv-modal{transform:scale(1);}
.pv-close{
  position:absolute;top:14px;right:14px;z-index:6;
  width:32px;height:32px;border-radius:50%;
  background:var(--cream-light);color:var(--maroon-dark);border:1px solid rgba(184,134,11,.4);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  font-size:.8rem;transition:background .2s,transform .2s;
}
.pv-close:hover{background:var(--gold-light);color:#2a0f0f;transform:rotate(90deg);}
.pv-gallery{
  display:flex;gap:.8rem;padding:1.6rem;
  background:var(--cream-light);
  min-width:0;
}
.pv-thumbs{display:flex;flex-direction:column;gap:.6rem;flex-shrink:0;}
.pv-thumb{
  width:56px;height:70px;border-radius:6px;overflow:hidden;border:2px solid rgba(184,134,11,.25);
  opacity:.6;transition:border-color .2s,opacity .2s;flex-shrink:0;
}
.pv-thumb img{width:100%;height:100%;object-fit:cover;}
.pv-thumb.active,.pv-thumb:hover{border-color:var(--gold);opacity:1;}
.pv-main{
  position:relative;flex:1;min-width:0;border-radius:8px;overflow:hidden;
  background:#f4efe4;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;max-height:calc(92vh - 3.2rem);
  box-shadow:inset 0 0 0 1px rgba(184,134,11,.15);
}
.pv-main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.pv-badge{
  position:absolute;top:.8rem;left:.8rem;background:var(--maroon);color:var(--gold-light);
  font-size:.66rem;font-weight:700;padding:.32rem .7rem;border-radius:20px;z-index:2;
  text-transform:uppercase;border:1px solid rgba(217,171,61,.5);
}
.pv-zoom{
  position:absolute;bottom:.8rem;right:.8rem;z-index:2;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--maroon);display:flex;align-items:center;justify-content:center;
}
.pv-zoom-hint-static{
  position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);z-index:2;
  background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;padding:.45rem 1rem;
  border-radius:20px;white-space:nowrap;pointer-events:none;backdrop-filter:blur(3px);
}

/* fullscreen tap-to-zoom lightbox */
.pv-zoom-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:60px 16px 80px;
}
.pv-zoom-overlay img{
  max-width:90vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:10px;
  cursor:zoom-in;transition:transform .3s ease;display:block;margin:0 auto;
  position:relative;z-index:2;
}
.pv-zoom-overlay img.zoomed-in{transform:scale(2.2);cursor:zoom-out;transform-origin:center top;}
.pv-zoom-close{
  position:fixed;top:14px;right:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.18);border:none;color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:99999;transition:.2s;
  backdrop-filter:blur(4px);
}
.pv-zoom-close:hover{background:rgba(255,255,255,.32);}
.pv-zoom-hint{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);
  font-size:.72rem;background:rgba(0,0,0,.5);padding:.45rem 1.1rem;border-radius:20px;
  z-index:99999;pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);
}

.pv-details{padding:2.4rem 2.2rem 1.8rem 2rem;min-width:0;}
.pv-breadcrumb{font-size:.72rem;color:var(--text-muted);margin-bottom:.8rem;}
.pv-breadcrumb span{margin:0 .3rem;}
.pv-details h2{font-size:1.5rem;margin-bottom:.5rem;color:var(--maroon-dark);line-height:1.25;}
.pv-rating{font-size:.82rem;color:var(--text-muted);margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem;}
.pv-rating span:first-child{color:var(--gold);letter-spacing:1px;}
.pv-stock{background:#e4f3e7;color:#2c7a3f;font-size:.68rem;font-weight:600;padding:.2rem .55rem;border-radius:20px;}
.pv-price{font-size:1.5rem;font-weight:700;color:var(--maroon-dark);margin-bottom:.9rem;}
.pv-price del{font-size:1rem;font-weight:400;color:var(--text-muted);margin-left:.6rem;}
.pv-desc{font-size:.85rem;line-height:1.65;color:var(--text-muted);margin-bottom:1.2rem;
  padding-bottom:1.2rem;border-bottom:1px dashed rgba(184,134,11,.35);}

.pv-select-group{margin-bottom:1.2rem;}
.pv-label{font-size:.82rem;font-weight:600;color:var(--text-dark);margin-bottom:.6rem;display:flex;justify-content:space-between;}
.pv-size-guide{font-size:.72rem;font-weight:500;color:var(--gold);text-decoration:underline;}
.pv-swatches{display:flex;gap:.6rem;}
.pv-swatch{
  width:30px;height:30px;border-radius:50%;border:2px solid transparent;outline:1px solid rgba(0,0,0,.1);
  transition:transform .2s,border-color .2s;
}
.pv-swatch.active{border-color:var(--maroon-dark);transform:scale(1.15);}
.pv-sizes{display:flex;gap:.6rem;}
.pv-size{
  width:46px;height:38px;border-radius:6px;background:#fff;border:1px solid rgba(184,134,11,.4);
  font-size:.85rem;font-weight:600;color:var(--text-dark);transition:background .2s,color .2s,border-color .2s;
}
.pv-size.active{background:var(--maroon);color:var(--gold-light);border-color:var(--maroon);}

.pv-perks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
  background:#f3ead8;border-radius:8px;padding:.9rem;margin-bottom:1.2rem;
}
.pv-perks div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;font-size:.7rem;color:var(--text-dark);}
.pv-perks span{font-size:1.1rem;}
.pv-perks small{color:var(--text-muted);font-weight:400;}

.pv-tabs{display:flex;gap:1.4rem;border-bottom:1px solid rgba(184,134,11,.3);margin-bottom:1rem;}
.pv-tab{
  font-size:.82rem;font-weight:600;color:var(--text-muted);padding-bottom:.6rem;position:relative;
}
.pv-tab.active{color:var(--maroon-dark);}
.pv-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);}
.pv-tab-panel{display:none;font-size:.82rem;color:var(--text-muted);line-height:1.7;}
.pv-tab-panel.active{display:block;}
.pv-tab-panel ul{padding-left:1.1rem;}
.pv-review{margin-bottom:.8rem;}
.pv-review strong{color:var(--text-dark);margin-right:.5rem;}

.pv-actions{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap;}
.qty-stepper{
  display:flex;align-items:center;border:1px solid rgba(184,134,11,.4);border-radius:6px;overflow:hidden;
}
.qty-stepper button{padding:.6rem .9rem;font-size:1rem;color:var(--maroon);}
.qty-stepper span{padding:.6rem .8rem;font-size:.9rem;font-weight:600;min-width:24px;text-align:center;}
.pv-wishlist{
  border:1px solid var(--maroon);color:var(--maroon);padding:.75rem 1.2rem;border-radius:6px;
  font-size:.85rem;font-weight:600;transition:background .2s,color .2s;
}
.pv-wishlist:hover,.pv-wishlist.active{background:var(--maroon);color:#fff;}
.pv-add-cart{flex:1;min-width:150px;text-align:center;}

@media (max-width:760px){
  .pv-modal{grid-template-columns:1fr;}
  .pv-gallery{flex-direction:column-reverse;padding:1rem 1rem 1.2rem;gap:1rem;}
  .pv-thumbs{flex-direction:row;overflow-x:auto;justify-content:center;gap:.5rem;}
  .pv-thumb{width:52px;height:64px;}
  .pv-main{aspect-ratio:1/1;max-height:60vh;border-radius:12px;}
  .pv-close{top:10px;right:10px;background:rgba(255,255,255,.92);}
  .pv-zoom{bottom:.7rem;right:.7rem;}
}
/* ============ FLOATING WHATSAPP BUTTON ============ */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:999;
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px;height:30px;}

@media (max-width:600px){
  .whatsapp-float{width:50px;height:50px;bottom:16px;right:16px;}
  .whatsapp-float svg{width:26px;height:26px;}
}