
/* RupaDigital V12.8 — Global responsive layer
   Desktop PC, MacBook, tablet, iPhone/iOS, Android */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font-size:16px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
input,select,textarea{max-width:100%}
table{max-width:100%}
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
@media(max-width:1024px){
  .container,.rd-wrap{width:min(100% - 28px,1180px)!important}
}
@media(max-width:768px){
  .container,.rd-wrap{width:min(100% - 20px,1180px)!important}
  body{font-size:14px}
  h1{font-size:clamp(24px,7vw,34px)}
  h2{font-size:clamp(20px,5.5vw,28px)}
  .card{border-radius:14px}
}
@media(max-width:480px){
  .container,.rd-wrap{width:min(100% - 14px,1180px)!important}
  body{font-size:13.5px}
  button,.btn,.topbtn{min-height:42px}
}

/* Header / navigation */
@media(max-width:760px){
  .headrow{gap:8px!important}
  .head-actions{width:auto!important}
  .topbtn{padding:9px 10px!important}
  .buyer-profile-pill{max-width:155px}
  .buyer-profile-text b{max-width:84px!important}
}
@media(max-width:480px){
  .head-actions{gap:6px!important}
  .buyer-profile-pill{padding:5px!important}
  .buyer-profile-text{display:none!important}
  .buyer-profile-avatar{width:36px!important;height:36px!important}
}

/* Buyer center */
@media(max-width:900px){
  .layout{grid-template-columns:1fr!important}
  .side{position:static!important;min-height:auto!important}
}
@media(max-width:620px){
  .menu{grid-template-columns:1fr 1fr!important}
  .menu a{font-size:13px!important}
  .pagehead h1{font-size:26px!important}
  .grid.g4,.grid.g3,.grid.g2,.g4,.g3,.g2{grid-template-columns:1fr!important}
  .order-row{grid-template-columns:1fr!important}
  .order-tools{display:block!important}
  .order-search{min-width:0!important;max-width:none!important;width:100%!important}
  .order-search button{min-width:74px}
  .order-product img{width:52px!important;height:52px!important}
}
@media(max-width:420px){
  .menu{grid-template-columns:1fr!important}
  .profile{align-items:flex-start!important}
}

/* Homepage */
@media(max-width:980px){
  .rd-hero-box{grid-template-columns:1fr!important}
  .rd-hero-side{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  .rd-head{height:auto!important;padding:10px 0!important;flex-wrap:wrap!important}
  .rd-logo img{width:42px!important;height:42px!important}
  .rd-searchbar{order:3;flex:1 1 100%!important}
  .rd-actions{margin-left:auto}
  .rd-mini-row{overflow-x:auto!important;scrollbar-width:none}
  .rd-mini-row::-webkit-scrollbar{display:none}
  .rd-hero{padding-top:16px!important}
  .rd-hero-box{padding:22px!important;border-radius:20px!important}
  .rd-hero h1{font-size:clamp(29px,8vw,38px)!important}
  .rd-cats{grid-template-columns:repeat(2,1fr)!important}
  .rd-products{grid-template-columns:repeat(2,1fr)!important}
  .rd-strip{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .rd-head{gap:8px!important}
  .rd-actions a{padding:8px 9px!important}
  .rd-hero-box{padding:18px!important}
  .rd-hero-side{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .rd-stat{padding:12px!important}
  .rd-stat b{font-size:18px!important}
  .rd-stat span{font-size:10px!important}
  .rd-cats{gap:8px!important}
  .rd-cat{min-height:88px!important;padding:12px!important}
  .rd-products{gap:9px!important}
  .rd-img{height:118px!important}
  .rd-body{padding:10px!important}
  .rd-price{font-size:17px!important}
}

/* Product detail */
@media(max-width:980px){
  .product-shell{grid-template-columns:1fr!important}
  .purchase-card{position:static!important}
  .product-body{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .product-hero{padding:16px!important}
  .product-hero h1{font-size:24px!important}
  .product-body{padding:12px!important}
  .gallerypanel .image{height:280px!important}
  .price-main{font-size:29px!important}
  .guide-steps{grid-template-columns:1fr!important}
  .similar-grid{grid-template-columns:repeat(2,1fr)!important}
  .buy-actions{grid-template-columns:48px 1fr!important}
}
@media(max-width:430px){
  .product-chip{font-size:10px!important;padding:6px 8px!important}
  .gallerypanel .image{height:235px!important}
  .similar-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .similar-img{height:105px!important}
  .similar-body{padding:9px!important}
  .similar-title{font-size:12px!important;height:34px!important}
  .purchase-card{padding:14px!important}
}

/* Cart / checkout / payment common */
@media(max-width:900px){
  .checkout-grid,.cart-grid,.payment-grid{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  .summary,.checkout-summary,.payment-summary{position:static!important}
  .cart-item{grid-template-columns:64px 1fr!important}
  .cart-item .price,.cart-item .actions{grid-column:2!important}
}

/* Auth forms */
@media(max-width:620px){
  .auth,.auth-card,.login-card,.register-card{width:min(100% - 20px,520px)!important;margin-left:auto!important;margin-right:auto!important}
}

/* Admin workspace */
@media(max-width:1050px){
  .shell{grid-template-columns:84px 1fr}
}
@media(max-width:760px){
  .shell{display:block!important}
  .sidebar{position:static!important;height:auto!important;padding:10px!important}
  .brand{justify-content:flex-start!important;padding:4px 6px 10px!important}
  .brand div:last-child{display:block!important}
  .nav{display:flex!important;gap:7px!important;overflow-x:auto!important;padding-bottom:3px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .navlabel{display:none!important}
  .navitem{flex:0 0 auto!important;justify-content:center!important;padding:9px 11px!important}
  .navitem span:last-child{display:inline!important}
  .sidebottom{position:static!important;display:flex!important;margin-top:9px!important}
  .sidebtn{flex:1;font-size:12px!important}
  .sidebtn:after{content:none!important}
  .topbar{position:sticky!important;top:0!important;height:auto!important;min-height:62px!important;padding:10px 14px!important}
  .topbar h1{font-size:19px!important}
  .page{padding:14px!important}
  .g4,.g3,.g2,.formgrid{grid-template-columns:1fr!important}
  .tablewrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{min-width:720px}
}
@media(max-width:480px){
  .navitem{font-size:12px!important;padding:8px 9px!important}
  .topbar .badge{display:none!important}
  .page{padding:10px!important}
  .card{padding:13px!important}
}
