/* V233 - Customer Account Mobile Professional Fix
   Only improves mobile/tablet layout for My Orders / Account pages. Desktop design is unchanged. */
@media (max-width: 900px){
  body.global-shop.easy-customer-portal{background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%)!important;}
  .portal-container.global-container{max-width:100%!important;padding:12px 10px 96px!important;}
  .portal-account-layout{display:block!important;grid-template-columns:1fr!important;gap:0!important;}
  .account-main{width:100%!important;min-width:0!important;margin-top:14px!important;}

  /* Account sidebar becomes a clean mobile account header */
  .customer-sidebar.account-sidebar-v221,
  .pro-account-sidebar.account-sidebar-v221,
  .pro-account-sidebar{
    position:relative!important;top:auto!important;width:100%!important;margin:0 0 14px!important;padding:12px!important;border-radius:24px!important;overflow:hidden!important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))!important;
    border:1px solid rgba(203,213,225,.9)!important;box-shadow:0 18px 45px rgba(15,23,42,.08)!important;
  }
  .account-sidebar-v221:before{height:4px!important;}
  .account-profile-card,.pro-mini-profile,.customer-mini-profile.pro-mini-profile{
    display:flex!important;align-items:center!important;gap:10px!important;padding:10px!important;border-radius:20px!important;margin:0!important;
    background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 10px 24px rgba(15,23,42,.05)!important;
  }
  .account-profile-card .avatar,.pro-mini-profile .avatar{
    width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:16px!important;font-size:17px!important;
  }
  .account-profile-card b,.profile-copy b{font-size:14px!important;max-width:210px!important;}
  .account-profile-card small,.profile-copy small{font-size:11px!important;max-width:210px!important;}
  .side-balance.account-balance-card,.side-balance{
    margin:10px 0!important;padding:12px!important;border-radius:18px!important;min-height:auto!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
  }
  .side-balance span{font-size:11px!important;}
  .side-balance b{font-size:17px!important;}

  /* Mobile nav: horizontal chips, easy to tap */
  .account-menu-v221,.pro-side-nav.account-menu-v221,.pro-side-nav{
    display:flex!important;flex-direction:row!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 2px 6px!important;margin:0!important;
    -webkit-overflow-scrolling:touch!important;scroll-snap-type:x proximity!important;
  }
  .account-menu-v221::-webkit-scrollbar,.pro-side-nav::-webkit-scrollbar{height:0!important;display:none!important;}
  .account-menu-v221 .account-nav-item,.pro-side-nav a{
    flex:0 0 auto!important;min-width:118px!important;min-height:48px!important;border-radius:999px!important;padding:8px 12px 8px 8px!important;gap:8px!important;scroll-snap-align:start!important;
    background:#fff!important;border:1px solid #dbeafe!important;box-shadow:0 8px 20px rgba(15,23,42,.045)!important;transform:none!important;
  }
  .account-menu-v221 .account-nav-item:before{display:none!important;}
  .account-menu-v221 .account-nav-item.active,.pro-side-nav a.active{
    background:linear-gradient(135deg,var(--primary,#2563eb),var(--brand,#0f766e))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 14px 32px rgba(37,99,235,.22)!important;
  }
  .account-menu-v221 .nav-icon,.pro-side-nav .nav-icon{
    width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:50%!important;background:#eff6ff!important;border:1px solid #bfdbfe!important;
  }
  .account-menu-v221 .nav-icon svg,.pro-side-nav .nav-icon svg{width:18px!important;height:18px!important;}
  .account-menu-v221 .nav-label,.pro-side-nav .nav-label{font-size:12px!important;font-weight:950!important;white-space:nowrap!important;}
  .side-count{min-width:22px!important;height:22px!important;font-size:10px!important;}

  /* Account page content */
  .acc-hero{border-radius:24px!important;padding:20px!important;margin:0 0 14px!important;box-shadow:0 18px 45px rgba(37,99,235,.16)!important;}
  .acc-hero h1{font-size:27px!important;letter-spacing:-.04em!important;margin:10px 0 6px!important;}
  .acc-hero p{font-size:13px!important;line-height:1.6!important;font-weight:750!important;}
  .acc-hero-actions{gap:8px!important;margin-top:14px!important;}
  .acc-hero-actions .acc-btn{min-height:42px!important;padding:10px 13px!important;border-radius:14px!important;font-size:12px!important;}

  .acc-grid,.summary-grid,.od-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:14px!important;}
  .acc-kpi,.summary-box,.od-kpi{min-height:88px!important;border-radius:20px!important;padding:12px!important;gap:10px!important;}
  .acc-kpi .ico,.summary-box i,.od-kpi i{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:15px!important;}
  .acc-kpi span,.summary-box span,.od-kpi span{font-size:10px!important;letter-spacing:.06em!important;line-height:1.2!important;}
  .acc-kpi b,.summary-box b,.od-kpi b{font-size:19px!important;line-height:1.1!important;word-break:break-word!important;}

  .acc-two,.account-grid,.wallet-hero{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
  .acc-card,.panel,.wallet-card{border-radius:22px!important;margin-bottom:12px!important;box-shadow:0 16px 36px rgba(15,23,42,.065)!important;}
  .acc-card-head{padding:14px!important;gap:10px!important;align-items:flex-start!important;}
  .acc-card-head h2{font-size:17px!important;line-height:1.25!important;}
  .acc-card-head p{font-size:12px!important;line-height:1.45!important;}
  .acc-card-body{padding:14px!important;}

  .acc-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding:11px!important;border-radius:18px!important;}
  .acc-toolbar label{font-size:10px!important;}
  .acc-toolbar input,.acc-toolbar select{min-height:42px!important;border-radius:13px!important;font-size:13px!important;}
  .acc-table-wrap{border-radius:18px!important;overflow:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;}
  .acc-table{min-width:760px!important;}
  .acc-table th{font-size:10px!important;padding:11px 10px!important;white-space:nowrap!important;}
  .acc-table td{font-size:12px!important;padding:11px 10px!important;vertical-align:middle!important;}
  .acc-action-row{display:flex!important;gap:6px!important;flex-wrap:wrap!important;}
  .acc-action-row .acc-btn.small,.acc-btn.small{min-height:34px!important;padding:8px 10px!important;border-radius:11px!important;font-size:11px!important;}
  .acc-pagination{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;padding-top:10px!important;}
  .pager-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .acc-pagination button{width:100%!important;min-height:38px!important;border-radius:12px!important;}
  .acc-form{gap:11px!important;}
  .acc-form label{font-size:12px!important;}
  .acc-form input,.acc-form select,.acc-form textarea{min-height:44px!important;border-radius:14px!important;font-size:14px!important;}
  .acc-btn.primary,.acc-btn{min-height:42px!important;border-radius:14px!important;}
}

@media (max-width: 480px){
  .portal-container.global-container{padding-left:8px!important;padding-right:8px!important;}
  .account-menu-v221 .account-nav-item,.pro-side-nav a{min-width:106px!important;padding-right:10px!important;}
  .account-menu-v221 .nav-label,.pro-side-nav .nav-label{font-size:11.5px!important;}
  .acc-grid,.summary-grid,.od-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .acc-kpi,.summary-box,.od-kpi{min-height:80px!important;padding:10px!important;border-radius:18px!important;}
  .acc-kpi .ico,.summary-box i,.od-kpi i{width:38px!important;height:38px!important;flex-basis:38px!important;}
  .acc-kpi b,.summary-box b,.od-kpi b{font-size:17px!important;}
  .acc-hero{padding:17px!important;border-radius:22px!important;}
  .acc-hero h1{font-size:24px!important;}
  .shop-header .global-nav{padding-left:8px!important;padding-right:8px!important;}
}