/* =========================================================
   SATRUPA FINAL CUSTOMER SYSTEM
   Master visual language: cream + olive green
   Reference: Satrupa brand logo
   ========================================================= */
:root{
  --sat-cream:#EDE5D8;
  --sat-cream-2:#F4EFE6;
  --sat-olive:#3D4B2A;
  --sat-olive-hover:#2F3A20;
  --sat-olive-soft:#E5E8DC;
  --sat-ink:#202817;
  --sat-muted:#6E6D64;
  --sat-line:#D9D1C2;
  --sat-white:#FFFFFF;
  --sat-shadow:0 14px 40px rgba(46,56,31,.08);
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;max-width:100%;overflow-x:hidden;background:var(--sat-cream)!important;color:var(--sat-ink);font-family:"DM Sans",Arial,sans-serif}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit;max-width:100%}
a,button{touch-action:manipulation}

/* ---------- Shared brand colors ---------- */
.site-header,.mobile-menu,.footer{background:var(--sat-cream)!important}
.site-header{border-bottom:1px solid rgba(61,75,42,.12)!important}
.brand-name,.footer-name,.site-header .logo{color:var(--sat-olive)!important}
.logo-mark{border-color:var(--sat-olive)!important;color:var(--sat-olive)!important;background:transparent!important}
.desktop-nav a,.nav-links a{color:rgba(32,40,23,.62)!important}
.desktop-nav a:hover,.desktop-nav a.active,.nav-links a:hover,.nav-links a.active{color:var(--sat-olive)!important}
.desktop-nav a::after,.nav-links a::after{background:var(--sat-olive)!important}
.icon-btn{background:#fff!important;border-color:rgba(61,75,42,.18)!important;color:var(--sat-olive)!important}
.icon-btn:hover{background:var(--sat-olive)!important;color:#fff!important;border-color:var(--sat-olive)!important}
.cart-btn{background:var(--sat-olive)!important;border-color:var(--sat-olive)!important;color:#fff!important}
.cart-btn:hover{background:var(--sat-olive-hover)!important;border-color:var(--sat-olive-hover)!important}
.cart-count{background:var(--sat-cream)!important;color:var(--sat-olive)!important}
.menu-btn{display:none}
.mobile-menu{border-top:1px solid rgba(61,75,42,.12)!important}
.mobile-links a:hover,.mobile-links a.active{background:var(--sat-olive-soft)!important;color:var(--sat-olive)!important}
.mobile-links a:first-child{background:transparent!important}

/* Remove old gold branding globally */
.gold-line,.shop-eyebrow .gold-line{background:var(--sat-olive)!important}
.eyebrow,.section-label,.shop-eyebrow,.contact-box-header span,.small-title,.popup-label{color:var(--sat-olive)!important}
.feature-icon,.card-icon,.card-link,.view-all{color:var(--sat-olive)!important}
.btn-gold,.shop-hero-btn,.shop-cta-inner a,.add-cart-btn,.buy-btn,.place-order-btn,.checkout-btn{background:var(--sat-olive)!important;color:#fff!important;border-color:var(--sat-olive)!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{background:var(--sat-olive-hover)!important;border-color:var(--sat-olive-hover)!important;color:#fff!important}
.btn-glass:hover{background:rgba(61,75,42,.28)!important}

/* ---------- Home hero: crisp, no artificial blur ---------- */
.hero,.hero-container{background:var(--sat-olive)!important}
.hero img,.hero-container #homeBanner,.hero-container>img#homeBanner{filter:none!important;transform:none!important;animation:none!important;image-rendering:auto!important;backface-visibility:visible!important}
.hero:hover img,.hero-container:hover #homeBanner{transform:none!important}
.hero-overlay{background:linear-gradient(90deg,rgba(31,39,22,.78),rgba(31,39,22,.42) 42%,rgba(31,39,22,.08) 76%,transparent)!important}

/* ---------- Shop banner ---------- */
.shop-hero{background:var(--sat-olive)!important;overflow:hidden!important}
.shop-hero-image img,.shop-hero img{filter:none!important;transform:none!important;animation:none!important;image-rendering:auto!important}
.shop-hero:hover .shop-hero-image img{transform:none!important}
.shop-hero-overlay{background:linear-gradient(90deg,rgba(31,39,22,.80),rgba(31,39,22,.42) 46%,rgba(31,39,22,.06))!important}

/* ---------- Generic surfaces ---------- */
.luxury-card,.product-card,.checkout-card,.order-summary,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.orders-toolbar-wrap,.team-card,.auth-card,.login-box,.settings-card,.content-card,.admin-card,.dashboard-card,.stat-card,.chart-card,.insight-card,.table-card,.form-card,.report-card{background:#fff!important;border-color:var(--sat-line)!important;box-shadow:var(--sat-shadow)!important}
.luxury-card:hover,.product-card:hover{box-shadow:0 18px 42px rgba(46,56,31,.12)!important}

/* ---------- Forms ---------- */
input,select,textarea{border-color:var(--sat-line)!important;background:#fff!important;color:var(--sat-ink)!important}
input:focus,select:focus,textarea:focus{border-color:var(--sat-olive)!important;box-shadow:0 0 0 3px rgba(61,75,42,.10)!important;outline:none!important}
input::placeholder,textarea::placeholder{color:#969187}

/* ---------- Product images ---------- */
.products-grid .product-card img,.product-card img,.main-image img,.thumbnail-gallery img{filter:none!important;image-rendering:auto!important}

/* ---------- Responsive master ---------- */
@media(max-width:1100px){
  .nav-inner{padding-inline:20px!important}
  .hero,.shop-hero{width:calc(100% - 24px)!important}
  .collection,.products-section,.shop-products-section{padding-inline:24px!important}
  .cards,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-inner{padding-inline:24px!important}
}
@media(max-width:900px){
  .desktop-nav{display:none!important}
  .menu-btn{display:grid!important}
  .nav-inner{height:70px!important;padding-inline:16px!important}
  .hero,.shop-hero{margin-top:10px!important;border-radius:18px!important}
  .hero-content{padding-inline:34px!important}
  .hero-title{font-size:clamp(44px,7vw,58px)!important}
  .collection-head,.cta-inner{gap:24px}
}
@media(max-width:700px){
  .nav-inner{height:66px!important;padding-inline:12px!important}
  .brand-name{font-size:21px!important;letter-spacing:.13em!important}
  .logo-mark{width:32px!important;height:32px!important}
  .nav-actions{gap:6px!important}
  .icon-btn{width:38px!important;height:38px!important}
  .mobile-menu{padding:10px 12px!important}
  .mobile-links a{min-height:44px!important;display:flex!important;align-items:center!important;padding:11px 14px!important}
  .hero,.shop-hero{width:100%!important;margin:0!important;border-radius:0!important;height:540px!important}
  .hero img,.shop-hero-image img{object-position:center center!important}
  .hero-overlay,.shop-hero-overlay{background:linear-gradient(180deg,rgba(31,39,22,.02) 8%,rgba(31,39,22,.14) 34%,rgba(31,39,22,.90) 100%)!important}
  .hero-content,.shop-hero-content{height:100%!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;padding:0 20px 30px!important;align-items:flex-end!important;justify-content:flex-end!important}
  .hero-copy{max-width:100%!important}
  .hero-title,.shop-hero-content h1{font-size:clamp(34px,10vw,46px)!important}
  .hero-desc,.shop-hero-content p{font-size:12.5px!important;line-height:1.65!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .hero-actions a,.shop-hero-btn{width:100%!important}
  .features-inner{grid-template-columns:1fr 1fr!important}
  .feature{padding:16px 12px!important}
  .collection,.products-section,.shop-products-section{padding:50px 16px 60px!important}
  .collection-head{display:block!important}
  .section-title{font-size:clamp(31px,9vw,40px)!important}
  .view-all{display:inline-flex!important;margin-top:14px}
  .cards,.products-grid{grid-template-columns:1fr!important;gap:14px!important}
  .luxury-card,.products-grid .product-card{padding:12px!important;border-radius:16px!important}
  .cta-inner,.shop-cta-inner{padding:54px 16px!important;flex-direction:column!important;align-items:flex-start!important}
  .cta-title,.shop-cta-inner .cta-title{font-size:clamp(34px,9vw,42px)!important}
  .footer-inner{grid-template-columns:1fr!important;padding:42px 16px!important}
  .footer-links.two{grid-template-columns:1fr 1fr!important}
  .copyright{padding:18px 12px!important}
  .checkout-container,.cart-container,.product-container,.contact-page,.track-container,.orders-container{width:calc(100% - 20px)!important}
  .product-layout,.checkout-container,.cart-layout,.contact-grid,.track-overview{grid-template-columns:1fr!important}
  .order-summary{position:static!important}
  .checkout-grid{grid-template-columns:1fr!important}
  .payment-options{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .nav-actions .icon-btn:first-child{display:none!important}
  .nav-inner{padding-inline:10px!important}
  .hero,.shop-hero{height:510px!important}
  .hero-content,.shop-hero-content{padding:0 16px 24px!important}
  .features-inner{grid-template-columns:1fr!important}
  .feature{border-right:0!important;border-bottom:1px solid rgba(61,75,42,.08)!important}
  .feature:last-child{border-bottom:0!important}
  .products-grid .product-card{padding:9px!important}
  .footer-links.two{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* =========================================================
   SATRUPA V6 FINAL RESPONSIVE + HOVER FIX
   Home UI remains the source of truth.
   ========================================================= */

:root{
  --sat-yellow:#D4AF37;
  --sat-yellow-soft:#F4E7B5;
  --sat-yellow-dark:#8B6E18;
}

/* ---------- Safe global sizing ---------- */
html,body{width:100%;min-width:320px;max-width:100%;overflow-x:hidden}
body{overflow-x:hidden}
.site-header{position:sticky!important;top:0!important;z-index:5000!important;width:100%;max-width:100%;overflow:visible!important}
.nav-inner{width:100%!important;max-width:1240px!important;margin:0 auto!important;min-width:0!important}
.brand,.nav-actions,.desktop-nav{min-width:0}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-actions{flex:0 0 auto}

/* ---------- Yellow hover, olive remains base ---------- */
.desktop-nav a:hover,.nav-links a:hover{color:var(--sat-yellow)!important}
.desktop-nav a.active,.nav-links a.active{color:var(--sat-olive)!important}
.desktop-nav a::after,.nav-links a::after{background:var(--sat-yellow)!important}

.btn-gold,.shop-hero-btn,.shop-cta-inner a,.add-cart-btn,.buy-btn,.place-order-btn,.checkout-btn,.auth-btn{
  transition:background-color .2s ease,color .2s ease,border-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{
  background:var(--sat-yellow)!important;
  border-color:var(--sat-yellow)!important;
  color:#202817!important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(61,75,42,.12)!important;
}
.icon-btn:hover{background:var(--sat-yellow)!important;border-color:var(--sat-yellow)!important;color:#202817!important}
.cart-btn:hover{background:var(--sat-yellow)!important;border-color:var(--sat-yellow)!important;color:#202817!important}

.category-btn:hover,.view-all:hover,.card-link:hover,.contact-info a:hover{color:var(--sat-yellow)!important}

/* ---------- Mobile menu: real overlay/drawer, no overlap ---------- */
.mobile-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:100%!important;
  width:100%!important;
  max-height:calc(100vh - 66px)!important;
  overflow-y:auto!important;
  z-index:4999!important;
  box-shadow:0 16px 35px rgba(23,26,16,.12)!important;
  -webkit-overflow-scrolling:touch!important;
}
.mobile-links{width:min(1240px,100%)!important;padding:0!important}
.mobile-links a{display:flex!important;align-items:center!important;min-height:46px!important}
.mobile-links a:hover,.mobile-links a:focus-visible{background:var(--sat-yellow-soft)!important;color:var(--sat-olive)!important}
.mobile-links a:first-child{background:transparent!important}

/* ---------- Prevent common mobile overflow ---------- */
main,section,article,aside,footer,.product-container,.checkout-container,.cart-container,.contact-page,.track-container,.orders-container{min-width:0;max-width:100%}
.product-info,.product-gallery,.checkout-left,.checkout-right,.cart-items-section,.cart-summary,.contact-box,.track-card,.order-card{min-width:0}
.product-info h1,.product-description,.card-title,.card-text,.order-card h3,.checkout-product-info h4{overflow-wrap:anywhere;word-break:normal}

/* Tables always scroll instead of breaking layout */
.table-responsive,.table-wrapper,.responsive-table,.orders-table-wrapper,.invoice-table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.table-responsive table,.table-wrapper table,.responsive-table table,.orders-table-wrapper table{min-width:620px}

/* Images never stretch the page */
img,video,canvas,svg{max-width:100%;height:auto}

/* ---------- Checkout ---------- */
.checkout-container{width:min(1180px,calc(100% - 32px))!important}
.checkout-grid,.payment-options{min-width:0}
.payment-card{min-width:0!important}
.terms-box label{min-width:0}
.order-summary{min-width:0}

/* ---------- Cart ---------- */
.cart-layout{min-width:0}
.cart-items{min-width:0}
.cart-buttons{display:flex;flex-wrap:wrap;gap:10px}
.cart-buttons>*{min-width:0;flex:1 1 180px}

/* ---------- Modals / popups ---------- */
.image-lightbox,.size-popup{z-index:10000!important}
.size-popup-content,.lightbox-content,.modal-content,.order-modal-content{max-width:calc(100vw - 24px)!important}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  .desktop-nav{display:none!important}
  .menu-btn{display:grid!important;flex:0 0 40px!important}
  .nav-inner{height:70px!important;padding:0 16px!important}
  .brand-name{font-size:22px!important}
  .hero,.shop-hero{max-width:100%!important}
}

@media(max-width:700px){
  .site-header{z-index:5000!important}
  .nav-inner{height:66px!important;padding:0 12px!important;gap:8px!important}
  .brand{gap:9px!important;min-width:0!important}
  .brand-name{font-size:20px!important;letter-spacing:.12em!important}
  .logo-mark{width:32px!important;height:32px!important}
  .nav-actions{gap:5px!important}
  .icon-btn{width:38px!important;height:38px!important}
  .mobile-menu{padding:10px 12px!important;background:var(--sat-cream)!important}
  .mobile-links{gap:5px!important}
  .mobile-links a{padding:11px 13px!important;font-size:13px!important}

  .hero,.shop-hero{width:100%!important;margin:0!important;border-radius:0!important}
  .hero-content,.shop-hero-content{min-width:0!important}

  .checkout-container,.product-container,.cart-container,.track-container,.orders-container,.contact-page{width:calc(100% - 20px)!important;margin-left:auto!important;margin-right:auto!important}
  .checkout-container,.product-layout,.cart-layout,.contact-grid,.track-overview,.customer-grid{grid-template-columns:minmax(0,1fr)!important}
  .checkout-card,.order-summary,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.orders-toolbar-wrap{width:100%!important}

  .checkout-grid{grid-template-columns:minmax(0,1fr)!important}
  .payment-options{grid-template-columns:minmax(0,1fr)!important}
  .payment-card{width:100%!important}
  .checkout-product{grid-template-columns:54px minmax(0,1fr) auto!important}
  .checkout-product-info{min-width:0!important}

  .cart-buttons{flex-direction:column!important}
  .cart-buttons>*{width:100%!important;flex:0 0 auto!important}

  .contact-field input,.contact-field textarea,.orders-search input,.orders-toolbar select{width:100%!important;max-width:100%!important}
  .contact-grid{gap:14px!important}

  .product-actions,.cart-actions,.invoice-buttons{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
  .product-actions>* ,.cart-actions>* ,.invoice-buttons>*{flex:1 1 180px!important;min-width:0!important}

  .checkout-progress{max-width:calc(100% - 20px)!important;overflow-x:auto!important;justify-content:flex-start!important}
  .progress-step{flex:0 0 auto!important}

  .modal-content,.order-modal-content,.dialog,.popup,.size-popup-content{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:90vh!important;overflow:auto!important}
}

@media(max-width:420px){
  .nav-inner{padding:0 9px!important}
  .nav-actions .icon-btn:first-child{display:none!important}
  .brand-name{font-size:18px!important}
  .menu-btn{flex-basis:38px!important;width:38px!important}
  .icon-btn{width:36px!important;height:36px!important}
  .checkout-container,.product-container,.cart-container,.track-container,.orders-container,.contact-page{width:calc(100% - 16px)!important}
  .checkout-card,.order-summary,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.orders-toolbar-wrap{padding:15px!important}
  .checkout-product{grid-template-columns:48px minmax(0,1fr) auto!important}
  .checkout-product-img{width:48px!important;height:60px!important}
  .checkout-product-price{font-size:11px!important}
  .product-actions>* ,.cart-actions>* ,.invoice-buttons>*{flex-basis:100%!important}
}


/* FINAL: shop card review action */
.product-buttons{display:flex!important;gap:10px!important;align-items:stretch!important;flex-wrap:wrap!important}
.product-buttons .view-btn,.product-buttons .review-card-btn{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center;text-decoration:none!important;border-radius:999px!important;font-weight:700!important;padding:11px 12px!important;box-sizing:border-box!important}
.product-buttons .review-card-btn{background:transparent!important;color:var(--sat-olive,#3D4B2A)!important;border:1px solid var(--sat-olive,#3D4B2A)!important}
.product-buttons .review-card-btn:hover{background:var(--sat-yellow,#D4AF37)!important;border-color:var(--sat-yellow,#D4AF37)!important;color:#202817!important;transform:translateY(-2px)}
.satrupa-final-safe{overflow-x:hidden}
@media(max-width:480px){.product-buttons{gap:8px!important}.product-buttons .view-btn,.product-buttons .review-card-btn{font-size:12px!important;padding:10px 8px!important}}
