/* SATRUPA FINAL RESPONSIVE LAYER
   Applied after page-specific styles. No framework migration, no fake data.
*/
:root{--sat-gutter:clamp(12px,3vw,32px);--sat-max:1240px}
html,body{max-width:100%;min-width:0}
body{margin:0;overflow-x:hidden}
main,section,header,footer,nav,aside,article,div{min-width:0}
img,video,canvas,svg{max-width:100%}
input,select,textarea{width:100%;min-width:0}
button,a{max-width:100%}

/* Customer pages */
@media (max-width: 900px){
  .nav-container,.nav-inner{max-width:100%;}
  .hero,.shop-hero{max-width:100%}
  .collection-head,.cta-inner{gap:20px}
  .product-layout,.checkout-grid,.cart-layout,.contact-grid,.track-overview{min-width:0}
}
@media (max-width: 768px){
  .site-header{position:sticky;top:0}
  .nav-inner{padding-inline:14px!important;min-height:64px!important}
  .nav-container{padding-inline:0!important}
  .hero{width:100%!important;margin:0!important;border-radius:0!important}
  .hero-content{padding-inline:20px!important}
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero-actions a{flex:1 1 180px;text-align:center}
  .features-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .collection{padding-inline:20px!important}
  .collection-head{align-items:flex-start;flex-wrap:wrap}
  .cards{grid-template-columns:1fr!important}
  .cta-inner{padding:56px 20px!important;flex-direction:column;align-items:flex-start}
  .footer-inner{grid-template-columns:1fr!important;padding-inline:20px!important}
  .footer-links.two{grid-template-columns:1fr 1fr}
  .product-container,.cart-container,.checkout-container,.orders-container,.track-container,.contact-page,.products-section,.shop-controls{width:calc(100% - 24px)!important}
  .product-layout,.checkout-grid,.cart-layout,.contact-grid,.track-overview,.customer-grid{grid-template-columns:1fr!important}
  .product-actions,.cart-actions,.invoice-buttons{flex-wrap:wrap}
  .product-actions>* ,.cart-actions>*{flex:1 1 180px;min-width:0}
  table{max-width:100%}
  .table-responsive,.table-wrapper,.responsive-table,.orders-table-wrapper{max-width:100%;overflow-x:auto}
  .modal-content,.order-modal-content,.dialog,.popup{width:min(94vw,760px)!important;max-width:94vw!important;max-height:90vh;overflow:auto}
}
@media (max-width: 480px){
  .nav-inner{padding-inline:10px!important}
  .hero-title{font-size:clamp(32px,10vw,46px)!important;line-height:1.05!important}
  .hero-desc{font-size:13px!important}
  .features-inner{grid-template-columns:1fr!important}
  .feature{padding-inline:0}
  .collection{padding-block:54px!important}
  .section-title{font-size:clamp(27px,8vw,38px)!important}
  .footer-inner{gap:24px!important}
  .footer-links.two{grid-template-columns:1fr!important}
  .checkout-progress{overflow-x:auto;justify-content:flex-start!important}
  .progress-step{min-width:70px}
  .cart-items .product-card{grid-template-columns:72px minmax(0,1fr)!important}
  .cart-items .product-card img{width:72px!important;height:92px!important}
}

/* Admin pages using .admin-sidebar */
.admin-menu-toggle{display:none}
.admin-main{min-width:0}
.admin-content,.content-area,.page-content{min-width:0;max-width:100%}
.admin-main .page-header,.admin-header{min-width:0}
.admin-main .page-header>* ,.admin-header>*{min-width:0}
.admin-main table{width:100%;border-collapse:collapse}
.admin-main .table-wrapper,.admin-main .responsive-table,.admin-main .orders-table-wrapper{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width: 1050px){
  .admin-sidebar{transition:transform .25s ease;}
  .admin-main{width:calc(100% - 78px)!important}
}
@media (max-width: 700px){
  .admin-sidebar{width:270px!important;transform:translateX(-100%);padding:22px 16px!important}
  .admin-sidebar.mobile-open{transform:translateX(0)}
  .admin-sidebar nav a,.admin-sidebar .logout-btn{justify-content:flex-start!important;padding:12px 14px!important}
  .admin-sidebar nav a span,.admin-sidebar .logout-btn span{display:inline!important}
  .admin-logo p{display:block!important}
  .admin-main{margin-left:0!important;width:100%!important;padding:14px!important}
  .admin-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border:0;border-radius:12px;background:#3D4B2A;color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(23,26,16,.12)}
  .admin-mobile-overlay{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999;opacity:0;pointer-events:none;transition:.25s}
  .admin-mobile-overlay.open{opacity:1;pointer-events:auto}
  .admin-header{gap:10px!important;align-items:flex-start!important}
  .admin-header .header-left{flex:1;min-width:0}
  .admin-header .header-right{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .dashboard-cards,.business-insights,.analytics-grid{grid-template-columns:1fr!important}
  .admin-main .form-grid,.admin-main .form-row,.admin-main .filters,.admin-main .search-row{grid-template-columns:1fr!important;display:grid}
  .admin-main .card,.admin-main .dashboard-card,.admin-main .stat-card,.admin-main .chart-card,.admin-main .insight-card,.admin-main .content-card{min-width:0}
}
@media (max-width: 420px){
  .admin-main{padding:10px!important}
  .admin-header .header-right{justify-content:stretch}
  .admin-header .header-right>*{flex:1 1 auto}
  .admin-main table{min-width:620px}
}

/* Coupons page: its legacy sidebar uses a different class */
.admin-layout{min-width:0}
.coupon-content{min-width:0;max-width:100%}
.coupon-form,.coupon-table,.container{max-width:100%}
.coupon-form .row{min-width:0}
.coupon-form .field{min-width:0}
@media(max-width:700px){
  .admin-layout{display:block}
  .sidebar{position:relative!important;width:100%!important;min-height:auto!important;padding:16px!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .sidebar h2,.sidebar::after{width:100%;margin:0 0 8px!important}
  .sidebar a{width:auto!important;flex:1 1 calc(50% - 8px);margin:0!important;padding:10px!important;font-size:12px!important}
  .coupon-content{margin-left:0!important;width:100%!important;padding:18px 12px!important}
  .coupon-form{padding:18px!important}
  .coupon-form .row{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
}

/* Settings page */
.settings-grid{min-width:0}
.settings-card{min-width:0;max-width:100%}
.settings-form{min-width:0}
@media(max-width:768px){
  body:has(.settings-grid){padding:18px!important}
  .page-header{padding:0!important;gap:12px!important;flex-wrap:wrap}
  .settings-grid{grid-template-columns:1fr!important}
  .settings-card{padding:18px!important}
  .settings-card-header{align-items:flex-start!important}
}
@media(max-width:480px){
  body:has(.settings-grid){padding:12px!important}
  .settings-card-header h2{font-size:18px!important}
  .settings-badge{width:100%;justify-content:center}
}

/* Touch targets and focus */
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(212,175,55,.45);outline-offset:2px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}