/* =========================================================
   SATRUPA V7 FINAL CUSTOMER RESPONSIVE PATCH
   Home is the master UI. Loaded LAST.
   Olive base + restrained yellow hover.
   No business logic/API selectors changed.
   ========================================================= */
:root{
  --sat-bg:#EDE5D8;
  --sat-olive:#3D4B2A;
  --sat-olive-dark:#2F3A20;
  --sat-yellow:#D4AF37;
  --sat-yellow-soft:#F4E7B5;
  --sat-ink:#171A10;
  --sat-line:rgba(61,75,42,.12);
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;min-width:320px;max-width:100%;overflow-x:hidden}
body{background:var(--sat-bg)!important;color:var(--sat-ink)!important}
main,section,article,aside,footer,header,div{min-width:0}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{max-width:100%}

/* Brand colours */
.section-label,.checkout-banner .eyebrow,.track-eyebrow,.orders-eyebrow,.contact-eyebrow,.popup-label{color:var(--sat-olive)!important}
.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}
.mobile-links a:hover,.mobile-links a:focus-visible{background:var(--sat-yellow-soft)!important;color:var(--sat-olive)!important}

/* Yellow hover without changing the base olive identity */
.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{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{background:var(--sat-yellow)!important;border-color:var(--sat-yellow)!important;color:#202817!important;transform:translateY(-1px)}
.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}

/* Header never clips its drawer */
.site-header{position:sticky!important;top:0!important;z-index:5000!important;overflow:visible!important}
.nav-inner{width:100%!important;max-width:1240px!important;margin:0 auto!important;min-width:0!important}
.brand,.desktop-nav,.nav-actions{min-width:0}
.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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,.14)!important;-webkit-overflow-scrolling:touch}
.mobile-menu.open{display:block!important}
.mobile-links{width:min(1240px,100%)!important;margin:0 auto!important}
.mobile-links a{display:flex!important;align-items:center!important;min-height:46px!important}

/* Keep long content inside cards */
.product-info,.product-gallery,.checkout-left,.checkout-right,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.order-card,.order-summary{min-width:0!important;max-width:100%}
.product-info h1,.product-description,.card-title,.card-text,.order-card h3,.checkout-product-info h4{overflow-wrap:anywhere}

/* Any table must scroll, never widen the page */
.table-responsive,.table-wrapper,.responsive-table,.orders-table-wrapper,.invoice-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.table-responsive table,.table-wrapper table,.responsive-table table,.orders-table-wrapper table{min-width:620px}

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

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

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

@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;gap:8px!important}
  .hero,.shop-hero{max-width:100%!important}
}

@media(max-width:700px){
  .nav-inner{height:66px!important;padding:0 12px!important}
  .brand{gap:9px!important}
  .brand-name{font-size:20px!important;letter-spacing:.12em!important}
  .logo-mark{width:32px!important;height:32px!important;min-width:32px!important}
  .nav-actions{gap:5px!important}
  .icon-btn{width:38px!important;height:38px!important;min-width:38px!important}
  .mobile-menu{padding:10px 12px!important;background:var(--sat-bg)!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{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}
  .form-group{min-width:0!important}
  .form-group input,.form-group select,.form-group textarea{width:100%!important;max-width:100%!important;font-size:16px!important}
  .payment-card{padding:14px!important}
  .checkout-product{grid-template-columns:54px minmax(0,1fr) auto!important}
  .checkout-product-img{width:54px!important;height:68px!important}
  .checkout-product-info{min-width:0!important}
  #couponCode{width:calc(100% - 82px)!important}
  #applyCouponBtn{width:82px!important}

  .contact-page{width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .contact-grid{width:100%!important}
  .track-page,.orders-page{padding-left:12px!important;padding-right:12px!important}
  .orders-toolbar{flex-direction:column!important;align-items:stretch!important}
  .orders-toolbar select,.orders-search{width:100%!important;max-width:100%!important}

  .footer-inner{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .nav-inner{padding:0 10px!important}
  .brand-name{font-size:19px!important}
  .nav-actions .icon-btn:first-child{display:none!important}
  .hero,.shop-hero{height:510px!important}
  .hero-content,.shop-hero-content{padding-left:16px!important;padding-right:16px!important;padding-bottom:24px!important}
  .checkout-container,.product-container,.cart-container,.track-container,.orders-container{width:calc(100% - 16px)!important}
  .checkout-card,.order-summary,.cart-items-section,.cart-summary,.contact-box,.track-card,.timeline-card,.orders-toolbar-wrap{padding:16px!important;border-radius:16px!important}
  .checkout-banner h1{font-size:34px!important}
  .checkout-progress{width:calc(100% - 16px)!important}
  .progress-step span{display:none!important}
  .progress-line{min-width:14px!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}
  .products-grid{grid-template-columns:1fr 1fr!important}
  .cart-buttons>*{flex-basis:100%!important}
}

@media(max-width:360px){
  .brand-name{font-size:18px!important}
  .logo-mark{width:30px!important;height:30px!important;min-width:30px!important}
  .icon-btn{width:36px!important;height:36px!important;min-width:36px!important}
  .products-grid{gap:8px!important}
}