/* =========================================================
   SATRUPA V10 — PREMIUM MOTION + RESPONSIVE OVERRIDES
   UI-only layer. Does not alter business logic.
   ========================================================= */

:root{
  --satrupa-cream:#EDE5D8;
  --satrupa-olive:#3D4B2A;
  --satrupa-dark:#263019;
  --satrupa-gold:#D4AF37;
}

html{scroll-behavior:smooth}

/* ---------- Global premium motion ---------- */
.site-header{transition:box-shadow .35s ease,background-color .35s ease}
.site-header:hover{box-shadow:0 8px 30px rgba(38,48,25,.06)}

.btn-gold,.btn-glass,.shop-hero-btn,.view-btn,.add-cart-btn,.buy-btn,
.send-btn,.whatsapp-btn,.checkout-btn,.place-order-btn,
.admin-sidebar a,.admin-btn,.logout-btn,.icon-btn,
.luxury-card,.product-card,.feature,.footer-links a,
.shop-search-wrap input,.size-option,.qty-box button{
  transition:transform .28s cubic-bezier(.2,.7,.2,1),
             box-shadow .28s ease,
             background-color .28s ease,
             color .28s ease,
             border-color .28s ease;
}

.btn-gold:hover,.shop-hero-btn:hover,.view-btn:hover,.add-cart-btn:hover,
.buy-btn:hover,.send-btn:hover,.whatsapp-btn:hover,.checkout-btn:hover,
.place-order-btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(38,48,25,.16)}

.luxury-card:hover,.product-card:hover,.feature:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(38,48,25,.10)}

.icon-btn:hover{transform:translateY(-2px) scale(1.03)}

.footer-links a:hover{transform:translateX(4px)}

/* ---------- Scroll reveal ---------- */
[data-motion="reveal"],
.motion-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}

[data-motion="reveal"].is-visible,
.motion-reveal.is-visible{opacity:1;transform:none}

[data-motion="fade"]{opacity:0;transition:opacity .8s ease}
[data-motion="fade"].is-visible{opacity:1}

[data-motion-delay="1"]{transition-delay:.08s}
[data-motion-delay="2"]{transition-delay:.16s}
[data-motion-delay="3"]{transition-delay:.24s}
[data-motion-delay="4"]{transition-delay:.32s}

/* ---------- Shop banner: never crop the source image ---------- */
.shop-hero{
  position:relative!important;
  width:min(1240px,calc(100% - 32px))!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#30391d!important;
}

.shop-hero-image{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  z-index:0!important;
}

.shop-hero-image img{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  image-rendering:auto!important;
}

.shop-hero-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(22,28,13,.78) 0%,rgba(22,28,13,.43) 43%,rgba(22,28,13,.08) 76%,rgba(22,28,13,0) 100%)!important;
}

.shop-hero-content{
  position:absolute!important;
  left:6%!important;
  top:50%!important;
  z-index:2!important;
  transform:translateY(-50%)!important;
  max-width:560px!important;
}

.shop-hero-content>span{
  color:var(--satrupa-gold)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.shop-hero-content h1,.shop-hero-content p{position:relative;z-index:2}
.shop-hero-content h1{text-shadow:0 4px 18px rgba(0,0,0,.38)!important}
.shop-hero-content p{text-shadow:0 2px 10px rgba(0,0,0,.38)!important}

.shop-hero:hover .shop-hero-image img{transform:none!important}

/* ---------- Product imagery: crisp, no fake blur ---------- */
.products-grid .product-card img,
.main-image img,
.thumbnail-gallery img,
.cart-items img,
.shop-hero-image img{
  filter:none!important;
  image-rendering:auto!important;
}

/* ---------- Better touch targets ---------- */
button,a,input,select,textarea{touch-action:manipulation}

/* ---------- Mobile shop banner ---------- */
@media(max-width:700px){
  .shop-hero{
    width:100%!important;
    border-radius:0!important;
  }
  .shop-hero-content{
    left:20px!important;
    right:20px!important;
    top:auto!important;
    bottom:24px!important;
    transform:none!important;
    max-width:none!important;
  }
  .shop-hero-overlay{
    background:linear-gradient(180deg,rgba(22,28,13,.02) 0%,rgba(22,28,13,.16) 35%,rgba(22,28,13,.86) 100%)!important;
  }
  .shop-hero-content h1{font-size:clamp(32px,9vw,46px)!important}
  .shop-hero-content p{font-size:12px!important;line-height:1.6!important}
  .shop-hero-btn{width:100%;justify-content:center}
}

@media(max-width:420px){
  .shop-hero-content{left:16px!important;right:16px!important;bottom:18px!important}
  .shop-hero-content h1{font-size:30px!important}
  .shop-hero-content>span{font-size:9px!important;letter-spacing:.15em!important}
}

/* ---------- Mobile spacing / no overlap ---------- */
@media(max-width:700px){
  .site-header{z-index:5000!important}
  .mobile-menu{position:relative!important;z-index:4999!important;max-height:calc(100vh - 72px);overflow:auto}
  main{position:relative;z-index:1}
  .products-grid{min-width:0!important}
  .products-grid>*{min-width:0!important}
  .footer-inner,.cta-inner,.shop-cta-inner{min-width:0!important}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-motion="reveal"],[data-motion="fade"],.motion-reveal{opacity:1!important;transform:none!important}
}