/* =========================================================
   SATRUPA V8 FINAL UI PATCH
   Home-page visual language + mobile safety.
   No API selectors are changed.
   ========================================================= */
:root{
  --v8-bg:#EDE5D8;
  --v8-surface:#fff;
  --v8-olive:#3D4B2A;
  --v8-olive-dark:#2F3A20;
  --v8-yellow:#D4AF37;
  --v8-yellow-soft:#F4E7B5;
  --v8-ink:#171A10;
  --v8-muted:rgba(0,0,0,.52);
  --v8-line:rgba(61,75,42,.13);
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;min-width:320px;overflow-x:hidden!important}
body{background:var(--v8-bg)!important;color:var(--v8-ink)}
img{max-width:100%}
button,input,select,textarea{max-width:100%}

/* ---------- Brand buttons / hover ---------- */
.btn-gold,.shop-hero-btn,.shop-cta-inner a,.add-cart-btn,.buy-btn,
.place-order-btn,.checkout-btn,.auth-btn,.send-btn,.whatsapp-btn,
.view-btn,.track-shop-btn,.track-back-btn,#createCoupon,
.toggleCoupon{transition:background-color .2s ease,border-color .2s ease,
color .2s ease,transform .2s ease,box-shadow .2s ease!important}

.btn-gold:hover,.shop-hero-btn:hover,.shop-cta-inner a:hover,
.add-cart-btn:hover,.buy-btn:hover,.place-order-btn:hover,
.checkout-btn:hover,.auth-btn:hover,.send-btn:hover,.whatsapp-btn:hover,
.view-btn:hover,.track-shop-btn:hover,.track-back-btn:hover,
#createCoupon:hover,.toggleCoupon:hover{
  background:var(--v8-yellow)!important;
  border-color:var(--v8-yellow)!important;
  color:var(--v8-ink)!important;
  transform:translateY(-1px);
}

/* ---------- Mobile menu: full drawer, never overlaps page ---------- */
.site-header{position:sticky!important;top:0!important;z-index:5000!important;overflow:visible!important}
.mobile-menu{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:66px!important;
  width:100%!important;
  height:calc(100dvh - 66px)!important;
  max-height:none!important;
  overflow-y:auto!important;
  padding:16px!important;
  background:rgba(237,229,216,.985)!important;
  border-top:1px solid rgba(61,75,42,.12)!important;
  box-shadow:0 18px 40px rgba(23,26,16,.18)!important;
  z-index:4999!important;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{display:block!important}
.mobile-links{width:min(560px,100%)!important;margin:0 auto!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.mobile-links a{
  min-height:52px!important;
  padding:14px 16px!important;
  display:flex!important;
  align-items:center!important;
  border-radius:12px!important;
  color:var(--v8-ink)!important;
  font-size:15px!important;
  font-weight:500!important;
}
.mobile-links a:hover,.mobile-links a:focus-visible{background:var(--v8-yellow)!important;color:var(--v8-ink)!important}
body.admin-menu-open,body:has(.mobile-menu.open){overflow:hidden!important}

/* ---------- Shop banner: sharp, responsive, text always above ---------- */
.shop-hero{position:relative!important;isolation:isolate!important;overflow:hidden!important}
.shop-hero-image{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important}
.shop-hero-image img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;object-position:center!important;
  transform:none!important;filter:none!important;animation:none!important;
  image-rendering:auto!important;
}
.shop-hero:hover .shop-hero-image img{transform:none!important}
.shop-hero-overlay{z-index:1!important;pointer-events:none!important}
.shop-hero-content{z-index:3!important;position:absolute!important;opacity:1!important;visibility:visible!important}
.shop-hero-content h1,.shop-hero-content p,.shop-hero-content span,.shop-hero-content a{visibility:visible!important;opacity:1!important}
.shop-hero-content h1{color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.48)!important}
.shop-hero-content p{color:rgba(255,255,255,.94)!important;text-shadow:0 2px 10px rgba(0,0,0,.42)!important}
.shop-hero-btn{background:var(--v8-olive)!important;color:#fff!important;border:1px solid var(--v8-olive)!important}

/* ---------- Checkout offers: horizontal carousel, no card collision ---------- */
.checkout-page,.checkout-container,.checkout-right,.order-summary,.coupon-box,.available-offers{min-width:0!important;max-width:100%!important}
.coupon-box{display:block!important;overflow:hidden!important}
.offers-scroll{
  display:flex!important;flex-wrap:nowrap!important;gap:12px!important;
  width:100%!important;max-width:100%!important;overflow-x:auto!important;
  overflow-y:hidden!important;padding:4px 3px 10px!important;
  scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
}
.offer-card{
  flex:0 0 210px!important;width:210px!important;min-width:210px!important;
  margin:0!important;scroll-snap-align:start!important;
  border:1px solid #e2dccd!important;border-left:4px solid var(--v8-olive)!important;
  border-radius:14px!important;background:#fff!important;padding:15px!important;
  box-shadow:0 7px 18px rgba(23,26,16,.07)!important;
}
.offer-card h4{font-size:15px!important;color:var(--v8-olive)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offer-save{background:var(--v8-olive)!important;color:#fff!important;font-size:12px!important;padding:7px 11px!important}
.offer-info{font-size:11px!important;line-height:1.55!important;color:#666!important}
.offer-card button{background:var(--v8-olive)!important;color:#fff!important;min-height:40px!important;font-size:11px!important}
.offer-card button:hover{background:var(--v8-yellow)!important;color:var(--v8-ink)!important}
.coupon-box>input#couponCode{width:calc(100% - 94px)!important;max-width:100%!important}
.coupon-box>#applyCouponBtn{width:94px!important;max-width:94px!important}

/* ---------- Product lightbox ---------- */
.image-lightbox{padding:14px!important}
.image-lightbox img{width:auto!important;height:auto!important;max-width:min(92vw,1100px)!important;max-height:88dvh!important;object-fit:contain!important}
.lightbox-arrow,.lightbox-close{z-index:2!important}

/* ---------- Product CTA: avoid invisible text on white ---------- */
.product-cta{background:var(--v8-olive)!important;color:#fff!important}
.product-cta span{color:var(--v8-yellow)!important}
.product-cta h2{color:#fff!important}
.product-cta p{color:rgba(255,255,255,.78)!important}
.product-cta a{background:#fff!important;color:var(--v8-olive)!important}
.product-cta a:hover{background:var(--v8-yellow)!important;color:var(--v8-ink)!important}

/* ---------- Contact WhatsApp card ---------- */
.whatsapp-box{background:var(--v8-olive)!important;color:#fff!important}
.whatsapp-icon{color:var(--v8-olive)!important;background:var(--v8-yellow-soft)!important;border-color:rgba(212,175,55,.5)!important}
.whatsapp-btn{background:#fff!important;color:var(--v8-olive)!important}
.whatsapp-btn:hover{background:var(--v8-yellow)!important;color:var(--v8-ink)!important}

/* ---------- Cart empty state ---------- */
.empty-cart{background:#fff!important;color:var(--v8-ink)!important;border:1px solid var(--v8-line)!important}
.empty-cart h2{color:var(--v8-olive)!important;font-family:"Playfair Display",serif!important;font-weight:500!important}
.empty-cart p{color:var(--v8-muted)!important}
.empty-cart .checkout-btn{background:var(--v8-olive)!important;color:#fff!important}

/* ---------- Reviews ---------- */
.reviews-section{width:100%;padding:70px 0;background:var(--v8-bg)}
.reviews-container{width:min(1120px,calc(100% - 32px));margin:0 auto}
.reviews-heading{text-align:center;margin-bottom:30px}
.reviews-heading .section-label{display:block;color:var(--v8-yellow);font-size:10px;font-weight:700;letter-spacing:.22em}
.reviews-heading h2{margin:10px 0 8px;color:var(--v8-olive);font:500 clamp(30px,4vw,42px)/1.15 "Playfair Display",serif}
.reviews-heading p{margin:0;color:var(--v8-muted);font-size:13px}
.reviews-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:18px;align-items:start}
.review-summary,.review-form-card,.review-list{background:#fff;border:1px solid var(--v8-line);border-radius:20px;box-shadow:0 14px 40px rgba(23,26,16,.06)}
.review-summary{padding:28px;text-align:center}
.review-score{font:500 52px/1 "Playfair Display",serif;color:var(--v8-olive)}
.review-stars{color:var(--v8-yellow);letter-spacing:3px;font-size:18px;margin:10px 0}
.review-count{color:var(--v8-muted);font-size:12px}
.review-form-card{padding:24px;margin-bottom:16px}
.review-form-card h3{margin:0 0 14px;color:var(--v8-olive);font:500 24px "Playfair Display",serif}
.review-star-picker{display:flex;gap:6px;margin-bottom:14px}
.review-star-picker button{border:0;background:transparent;color:#cfc7b4;font-size:27px;padding:0;cursor:pointer}
.review-star-picker button.active{color:var(--v8-yellow)}
.review-form-card textarea{width:100%;min-height:110px;padding:13px;border:1px solid #ddd8ca;border-radius:12px;resize:vertical;outline:none;font-size:14px}
.review-form-card textarea:focus{border-color:var(--v8-olive);box-shadow:0 0 0 3px rgba(58,73,33,.08)}
.review-submit{margin-top:12px;width:100%;min-height:46px;border:0;border-radius:999px;background:var(--v8-olive);color:#fff;font-weight:700;cursor:pointer}
.review-list{padding:8px 22px}
.review-item{padding:18px 0;border-bottom:1px solid #eee8dc}
.review-item:last-child{border-bottom:0}
.review-item-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.review-user{font-weight:700;color:var(--v8-ink);font-size:13px}
.review-date{color:#999;font-size:10px}
.review-item .review-stars{font-size:13px;margin:6px 0;letter-spacing:2px}
.review-comment{margin:0;color:#555;font-size:12px;line-height:1.7}
.verified-badge{display:inline-flex;margin-left:8px;padding:3px 7px;border-radius:999px;background:#f0f4e9;color:var(--v8-olive);font-size:9px;font-weight:700}
.review-empty{padding:35px 10px;text-align:center;color:#999;font-size:12px}

/* ---------- Admin coupon page ---------- */
.admin-layout{min-width:0!important}
.coupon-content{min-width:0!important}
.coupon-content .container{min-width:0!important}
#productSelector{min-width:0!important}
#couponTable{min-width:980px!important}
.coupon-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-menu-toggle{z-index:4001!important}
.admin-mobile-overlay{z-index:2999!important}

@media(max-width:900px){
  .checkout-container{grid-template-columns:1fr!important}
  .order-summary{position:static!important}
  .reviews-layout{grid-template-columns:1fr!important}
}

@media(max-width:700px){
  .mobile-menu{top:66px!important;height:calc(100dvh - 66px)!important}
  .shop-hero{height:560px!important;width:100%!important;margin:0!important;border-radius:0!important}
  .shop-hero-image img{object-position:center!important}
  .shop-hero-overlay{background:linear-gradient(180deg,rgba(23,26,16,.03) 0%,rgba(23,26,16,.16) 35%,rgba(23,26,16,.82) 72%,rgba(23,26,16,.95) 100%)!important}
  .shop-hero-content{left:20px!important;right:20px!important;top:auto!important;bottom:28px!important;transform:none!important;max-width:none!important}
  .shop-hero-content h1{font-size:clamp(36px,10vw,48px)!important}
  .shop-hero-content p{font-size:13px!important;max-width:360px!important}
  .shop-hero-btn{width:100%!important;justify-content:center!important}
  .checkout-progress{width:calc(100% - 20px)!important;gap:6px!important}
  .progress-step{font-size:10px!important}
  .checkout-card,.order-summary{padding:18px!important}
  .payment-options{grid-template-columns:1fr!important}
  .checkout-product{grid-template-columns:54px minmax(0,1fr) auto!important}
  .checkout-product-img{width:54px!important;height:68px!important}
  .coupon-box{padding:10px!important}
  .offer-card{flex-basis:190px!important;width:190px!important;min-width:190px!important}
  .coupon-box>input#couponCode{width:calc(100% - 86px)!important}
  .coupon-box>#applyCouponBtn{width:86px!important}
  .reviews-container{width:calc(100% - 20px)!important}
  .review-summary,.review-form-card{padding:20px!important}
  .review-list{padding:4px 16px!important}
}

@media(max-width:480px){
  .mobile-links a{min-height:50px!important;font-size:14px!important}
  .shop-hero{height:540px!important}
  .shop-hero-content h1{font-size:36px!important}
  .checkout-product{grid-template-columns:48px minmax(0,1fr) auto!important}
  .checkout-product-img{width:48px!important;height:60px!important}
  .checkout-product-info h4{font-size:11px!important}
  .checkout-product-price{font-size:11px!important}
  .review-score{font-size:46px}
  .review-form-card textarea{font-size:16px!important}
}

@media(max-width:360px){
  .shop-hero{height:520px!important}
  .shop-hero-content h1{font-size:33px!important}
  .offer-card{flex-basis:178px!important;width:178px!important;min-width:178px!important}
}

/* ---------- Password reset pages ---------- */
.reset-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--v8-bg)!important}
.reset-card{width:min(460px,100%);padding:38px;background:#fff;border:1px solid var(--v8-line);border-radius:24px;box-shadow:0 20px 60px rgba(23,26,16,.09)}
.reset-brand{display:inline-block;color:var(--v8-olive);font:500 26px "Playfair Display",serif;letter-spacing:.16em;text-decoration:none}
.reset-label{display:block;margin-top:30px;color:var(--v8-yellow);font-size:10px;font-weight:700;letter-spacing:.2em}
.reset-card h1{margin:10px 0;color:var(--v8-olive);font:500 36px/1.15 "Playfair Display",serif}
.reset-card>p{margin:0 0 24px;color:var(--v8-muted);font-size:13px;line-height:1.7}
.reset-card form{display:grid;gap:9px}
.reset-card label{color:#33392d;font-size:12px;font-weight:700}
.reset-card input{width:100%;height:50px;padding:0 14px;border:1px solid #ddd8ca;border-radius:12px;outline:none;font-size:16px;background:#fff}
.reset-card input:focus{border-color:var(--v8-olive);box-shadow:0 0 0 3px rgba(58,73,33,.08)}
.reset-card form button{margin-top:8px;min-height:50px;border:0;border-radius:999px;background:var(--v8-olive);color:#fff;font-weight:700;cursor:pointer}
.reset-back{display:block;margin-top:18px;text-align:center;color:var(--v8-olive);font-size:12px;text-decoration:none}
@media(max-width:480px){.reset-page{padding:14px}.reset-card{padding:25px 20px;border-radius:18px}.reset-card h1{font-size:31px}}

/* ---------- Home banner: same sharp behavior ---------- */
.hero-container{position:relative!important;isolation:isolate!important;overflow:hidden!important}
.hero-container #homeBanner{position:relative!important;z-index:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important;filter:none!important}
.hero-container:hover #homeBanner{transform:none!important}
.hero-container::after{z-index:1!important}
.hero-content{z-index:3!important}
.hero-content h1,.hero-content p,.hero-eyebrow{visibility:visible!important;opacity:1!important}


/* =========================================================
   V8.1 FINAL HERO + NAV + MOTION PATCH
   Fixes hero text being clipped behind the image, keeps the
   banner sharp, restores My Orders on desktop, and adds
   restrained premium motion without blur.
   ========================================================= */

/* ---------- Home hero stacking: image must NOT consume layout height ---------- */
.hero{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.hero > #homeBanner,
.hero > img#homeBanner{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center 38%!important;
  filter:none!important;
  transform:none!important;
  animation:none!important;
}
.hero > .hero-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
}
.hero > .hero-content{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
}
.hero-copy,.hero-title,.hero-desc,.hero-actions,.eyebrow{
  position:relative!important;
  z-index:4!important;
}
.hero-copy{opacity:0;animation:satrupaHeroReveal .75s cubic-bezier(.2,.75,.25,1) .08s forwards}
.hero-title{animation:satrupaHeroTitle .75s cubic-bezier(.2,.75,.25,1) .16s both}
.hero-desc{animation:satrupaFadeUp .65s ease .28s both}
.hero-actions{animation:satrupaFadeUp .65s ease .38s both}

/* Desktop: keep copy safely inside the banner */
@media (min-width:901px){
  .hero-content{padding:0 56px!important}
  .hero-copy{max-width:540px!important}
  .desktop-nav{gap:26px!important}
}

/* Tablet */
@media (max-width:1100px) and (min-width:901px){
  .desktop-nav{gap:18px!important}
  .desktop-nav a{font-size:13px!important}
  .hero-content{padding-inline:40px!important}
  .hero-title{font-size:clamp(46px,6vw,60px)!important}
}

/* Mobile: keep the model visible while giving the text a protected lower zone */
@media (max-width:900px){
  .hero{height:clamp(500px,78svh,620px)!important;min-height:500px!important}
  .hero > #homeBanner,
  .hero > img#homeBanner{
    object-position:62% center!important;
  }
  .hero > .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(31,39,22,.02) 0%,
      rgba(31,39,22,.08) 30%,
      rgba(31,39,22,.30) 48%,
      rgba(31,39,22,.90) 77%,
      rgba(31,39,22,.97) 100%
    )!important;
  }
  .hero > .hero-content{
    align-items:flex-end!important;
    justify-content:flex-start!important;
    padding:0 20px 30px!important;
  }
  .hero-copy{width:min(100%,560px)!important;max-width:100%!important}
  .hero-title{font-size:clamp(35px,9.8vw,50px)!important;line-height:1.04!important}
  .hero-desc{max-width:430px!important;font-size:13px!important;line-height:1.65!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:min(100%,430px)!important}
  .hero-actions a{width:100%!important}
}

@media (max-width:520px){
  .hero{height:560px!important;min-height:0!important}
  .hero > #homeBanner,
  .hero > img#homeBanner{object-position:64% center!important}
  .hero > .hero-content{padding:0 16px 24px!important}
  .hero-title{font-size:clamp(32px,10vw,43px)!important}
  .hero-desc{font-size:12px!important}
  .hero-actions{grid-template-columns:1fr!important;gap:8px!important}
  .hero-actions a{min-height:46px!important}
}

/* ---------- Premium motion, intentionally subtle ---------- */
@keyframes satrupaHeroReveal{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes satrupaHeroTitle{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes satrupaFadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes satrupaCardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.features .feature,
.cards .luxury-card,
.products-grid .product-card{
  animation:satrupaCardIn .55s ease both;
}
.features .feature:nth-child(2),.cards .luxury-card:nth-child(2){animation-delay:.08s}
.features .feature:nth-child(3),.cards .luxury-card:nth-child(3){animation-delay:.16s}
.features .feature:nth-child(4){animation-delay:.24s}

/* ---------- Global premium hover ---------- */
.desktop-nav a,
.icon-btn,
.mobile-links a,
.luxury-card,
.product-card,
.btn-gold,
.btn-glass,
.view-all,
.footer-links a{
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease,
    transform .25s ease!important;
}
.desktop-nav a:hover,
.footer-links a:hover,
.view-all:hover{color:var(--v8-yellow)!important}

/* ---------- Never let nav text wrap into the controls ---------- */
.desktop-nav{white-space:nowrap;min-width:0}
.desktop-nav a{white-space:nowrap}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-copy,.hero-title,.hero-desc,.hero-actions,
  .features .feature,.cards .luxury-card,.products-grid .product-card{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   V9.2 FINAL BANNER + ADMIN LOGOUT PATCH
   ========================================================= */

/* Home banner eyebrow: visible premium accent on dark image */
.hero .eyebrow{
  color:#D4AF37!important;
  text-shadow:0 2px 10px rgba(0,0,0,.45)!important;
}
.hero .eyebrow .gold-line{
  background:#D4AF37!important;
  box-shadow:0 0 10px rgba(212,175,55,.22)!important;
}

/* Keep the new single-line hero headline elegant and responsive */
.hero-title{
  max-width:720px!important;
  color:#fff!important;
  text-shadow:0 4px 22px rgba(0,0,0,.48)!important;
  letter-spacing:-.025em!important;
}
.hero-title i{color:#fff!important}

/* Crisp banner rendering. Never blur, filter or scale the source. */
.hero > img#homeBanner,
.shop-hero-image img{
  filter:none!important;
  -webkit-filter:none!important;
  image-rendering:auto!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}

/* Prevent accidental low-height/crop combinations on common screens. */
.hero{min-height:520px!important}
.hero > img#homeBanner{object-fit:cover!important}

@media (min-width:901px){
  .hero{height:clamp(540px,42vw,650px)!important}
  .hero > img#homeBanner{object-position:center center!important}
  .hero > .hero-content{align-items:center!important}
}

@media (max-width:900px){
  .hero{height:clamp(540px,78svh,680px)!important;min-height:540px!important}
  .hero > img#homeBanner{object-position:62% center!important}
  .hero .hero-title{font-size:clamp(34px,9.2vw,50px)!important;line-height:1.06!important}
  .hero .eyebrow{font-size:10px!important;letter-spacing:.18em!important}
}

@media (max-width:520px){
  .hero{height:570px!important;min-height:570px!important}
  .hero > img#homeBanner{object-position:64% center!important}
  .hero .hero-title{font-size:clamp(31px,9.8vw,42px)!important}
  .hero .eyebrow{font-size:9px!important;letter-spacing:.14em!important}
}

@media (prefers-reduced-motion:reduce){
  .hero > img#homeBanner{animation:none!important}
}