/* NeoPhoenix Mobile v5 — responsive layer for public site + staff/admin */
:root{--np-mobile-gold:#e8bd4f;--np-safe-top:env(safe-area-inset-top,0px);--np-safe-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;min-width:0}
body.mobile-menu-open{overflow:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}
.mobile-nav-toggle{display:none}
.vehicle-mobile-hint{display:none}

@media(pointer:coarse){
  .btn,.nav a,.user-menu-btn,.admin-tab,button,select{min-height:44px}
  input,textarea{min-height:44px}
}

@media(max-width:1080px){
  .container{padding-left:20px;padding-right:20px}
  .hero{padding:44px 34px}
  .hero h1{font-size:clamp(42px,7.5vw,64px)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-image{height:270px}
  .info-grid,.account-grid{grid-template-columns:1fr}
  .order-panel{width:min(760px,calc(100vw - 28px))}
}

@media(max-width:820px){
  #siteHeader{padding:calc(7px + var(--np-safe-top)) 8px 0!important;position:sticky!important;top:0!important;z-index:100!important}
  #siteHeader .header-inner{min-height:58px!important;padding:7px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:8px 10px!important;align-items:center!important;border-radius:15px!important;flex-wrap:nowrap!important}
  #siteHeader .brand{min-width:0!important;overflow:hidden;padding:2px 4px!important;gap:8px!important}
  #siteHeader .brand-mark{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;background-size:88px auto!important}
  #siteHeader .brand #siteBrandText{font-size:17px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.045em!important}
  .mobile-nav-toggle{display:flex;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;color:#fff;grid-column:2;grid-row:1;cursor:pointer}
  .mobile-nav-toggle span{display:block;width:20px;height:2px;border-radius:3px;background:currentColor;transition:.2s ease}
  #siteHeader.menu-open .mobile-nav-toggle{color:#17120a;background:linear-gradient(135deg,#f2ce70,#dcae39);border-color:rgba(255,222,128,.6)}
  #siteHeader.menu-open .mobile-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #siteHeader.menu-open .mobile-nav-toggle span:nth-child(2){opacity:0}
  #siteHeader.menu-open .mobile-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #siteHeader .nav{grid-column:1/-1;grid-row:2;display:none!important;width:100%!important;margin:0!important;padding:8px!important;max-height:56dvh;overflow:auto!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(16,16,16,.985);box-shadow:0 22px 60px rgba(0,0,0,.42);-webkit-overflow-scrolling:touch}
  #siteHeader.menu-open .nav{display:flex!important}
  #siteHeader .nav a{display:flex!important;width:100%!important;min-height:44px!important;padding:10px 12px!important;align-items:center;justify-content:space-between;border-radius:10px!important;white-space:normal!important;font-size:14px!important}
  #siteHeader .nav a.active{background:linear-gradient(135deg,#f2ce70,#dcae39)!important;color:#17120a!important}
  #siteHeader .user-area{grid-column:1/-1;grid-row:3;display:none!important;margin:0!important;padding:2px 8px 8px!important;gap:8px;background:rgba(16,16,16,.985);border-radius:0 0 14px 14px}
  #siteHeader.menu-open .user-area{display:flex!important}
  #siteHeader .user-area>.btn{flex:1;justify-content:center}
  #siteHeader .user-menu-btn{width:100%;justify-content:flex-start!important;min-height:48px!important}
  #siteHeader .user-menu{position:static!important;width:100%!important;margin-top:6px!important;box-shadow:none!important;background:rgba(255,255,255,.035)!important;border-radius:12px!important}
  #siteHeader .user-area.open{display:block!important}

  .container{padding:22px 12px calc(48px + var(--np-safe-bottom))!important;max-width:100%!important}
  .page-title{margin-bottom:17px!important;gap:10px!important}
  .page-title h1,.section-head h2{font-size:clamp(28px,8vw,36px)!important;line-height:1.05}
  .hero{min-height:0!important;padding:28px 18px!important;margin-bottom:14px!important;border-radius:18px!important}
  .hero h1{font-size:clamp(34px,10.8vw,50px)!important;line-height:1.02!important;margin:11px 0!important}
  .hero p{font-size:15px!important;line-height:1.5!important;max-width:100%!important}
  .fitment{padding:18px 14px!important;margin-bottom:14px!important;border-radius:18px!important}
  .fitment-grid{grid-template-columns:1fr!important;gap:10px!important}
  .fitment-grid .btn{grid-column:auto!important;width:100%!important}
  .loyalty-preview{padding:18px 15px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .loyalty-preview .btn{width:100%}

  .product-grid{grid-template-columns:1fr!important;gap:13px!important}
  .product-card{border-radius:17px!important;overflow:hidden}
  .product-image{height:min(68vw,300px)!important}
  .product-body{padding:15px!important;gap:8px!important}
  .product-body h3{font-size:20px!important;line-height:1.15!important}
  .product-body p{min-height:0!important}
  .specs{grid-template-columns:1fr 1fr!important;font-size:12px!important;gap:7px 12px!important}
  .price{font-size:22px!important}
  .product-actions,.favorite-page-actions,.related-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .product-actions .btn,.favorite-page-actions .btn,.related-actions .btn{width:100%!important;min-width:0!important}
  .product-actions .btn:last-child:nth-child(odd),.favorite-page-actions .btn:last-child:nth-child(odd){grid-column:1/-1}

  .product-detail-top{grid-template-columns:1fr!important;gap:13px!important}
  .product-gallery-card,.product-info-card{padding:13px!important;border-radius:17px!important}
  .product-main-image{height:min(86vw,380px)!important}
  .product-buy-row{grid-template-columns:88px 1fr!important;gap:8px!important}
  .product-detail-grid{grid-template-columns:1fr!important}
  .related-grid{grid-template-columns:1fr!important}
  .compat-row{flex-direction:column!important;align-items:flex-start!important;gap:4px!important}

  .auth-wrap{min-height:calc(100dvh - 70px)!important;padding:22px 11px calc(22px + var(--np-safe-bottom))!important}
  .auth-card{padding:20px 16px!important;border-radius:18px!important;width:100%!important}
  .auth-card h1{font-size:31px!important}
  .auth-links{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  input,select,textarea{font-size:16px!important} /* prevents iOS input zoom */
  .form-grid,.saved-cars,.info-grid,.order-info,.account-grid{grid-template-columns:1fr!important}
  .panel,.glass.panel{padding:16px!important;border-radius:17px!important}
  .panel-head-row{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .panel-head-row .btn{width:100%!important}
  .saved-car{padding:14px!important}

  .table-wrap{margin-inline:-3px;overflow:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .data-table{min-width:680px}
  .data-table th,.data-table td{padding:11px 9px!important}

  .order-modal{padding:6px!important;align-items:flex-end!important}
  .order-panel{width:100%!important;max-height:92dvh!important;padding:18px 14px calc(18px + var(--np-safe-bottom))!important;border-radius:20px 20px 0 0!important}
  .toast{left:10px!important;right:10px!important;bottom:calc(10px + var(--np-safe-bottom))!important;text-align:center!important}

  /* CRM */
  body[data-page="crm"] .container{padding-top:16px!important}
  body[data-page="crm"] .page-title{margin-bottom:14px!important}
  body[data-page="crm"] .table-wrap{border-radius:14px}

  /* Owner/admin */
  body[data-page="admin"] .container{padding-top:14px!important}
  body[data-page="admin"] .page-title{display:none!important}
  body[data-page="admin"] .admin-control-bar{top:70px!important;margin:0 0 12px!important;padding:7px!important;border-radius:14px!important}
  body[data-page="admin"] .admin-control-row{display:block!important}
  body[data-page="admin"] .admin-control-title{display:none!important}
  body[data-page="admin"] .admin-tabs{display:flex!important;overflow:auto!important;flex-wrap:nowrap!important;gap:6px!important;padding:1px 1px 5px!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  body[data-page="admin"] .admin-tab{flex:0 0 auto!important;min-height:40px!important;padding:0 13px!important;scroll-snap-align:start}
  body[data-page="admin"] .admin-section-block{margin-top:11px!important;padding:14px!important;border-radius:16px!important;scroll-margin-top:122px!important}
  body[data-page="admin"] .admin-category-workspace{grid-template-columns:1fr!important}
  body[data-page="admin"] .admin-catalog-summary{grid-template-columns:1fr 1fr!important;gap:8px!important}
  body[data-page="admin"] .admin-catalog-summary>div{padding:11px!important}
  body[data-page="admin"] .admin-modal{padding:5px!important;align-items:flex-end!important;justify-content:center!important}
  body[data-page="admin"] .admin-modal-card{width:100%!important;max-width:100%!important;max-height:94dvh!important;border-radius:20px 20px 0 0!important}
  body[data-page="admin"] .admin-modal-head{padding:15px!important;position:sticky!important;top:0;z-index:4;background:rgba(22,22,22,.985)!important}
  body[data-page="admin"] .product-editor-form-v2{padding:11px 11px 0!important}
  body[data-page="admin"] .editor-section{padding:11px!important;border-radius:14px!important}
  body[data-page="admin"] .product-editor-grid,body[data-page="admin"] .product-editor-grid.three-cols{grid-template-columns:1fr!important}
  body[data-page="admin"] .admin-modal-footer{position:sticky!important;bottom:0;z-index:4;padding:10px 11px calc(10px + var(--np-safe-bottom))!important;background:rgba(17,17,17,.985)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body[data-page="admin"] .admin-modal-footer .btn{width:100%!important;min-width:0!important}

  .vehicle-hub-head{padding:18px 15px!important;align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  .vehicle-hub-title h2{font-size:25px!important}
  .vehicle-hub-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .vehicle-total-card{width:100%!important}
  .vehicle-new-btn{width:100%!important;min-width:0!important}
  .vehicle-workspace-card{padding:12px!important}
  .vehicle-admin-toolbar{grid-template-columns:1fr!important;gap:8px!important;padding:9px!important}
  .vehicle-list-stat{justify-content:flex-start!important}
  .vehicle-bulk-bar{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;padding:10px!important;gap:9px!important}
  .vehicle-bulk-selection{min-width:0!important}
  .vehicle-bulk-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .vehicle-bulk-actions select,.vehicle-bulk-actions input,.vehicle-bulk-actions .btn{width:100%!important}
  .vehicle-table-caption{padding:10px 12px!important;align-items:flex-start!important;flex-direction:column!important}
  .vehicle-table-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch}
  .vehicle-admin-table{min-width:980px!important}
  .vehicle-mobile-hint{display:block;color:rgba(255,255,255,.5);font-size:11px;margin:0 0 8px;padding:0 2px}
  .vehicle-editor-modal{padding:0!important;align-items:flex-end!important;justify-content:center!important}
  .vehicle-modal-card{width:100%!important;max-height:95dvh!important;border-radius:20px 20px 0 0!important}
  .vehicle-modal-head{padding:16px!important}
  .vehicle-modal-form{padding:13px 13px 0!important}
  .vehicle-modal-section{padding:13px!important;margin-bottom:11px!important}
  .vehicle-modal-grid,.vehicle-modal-grid-4,.vehicle-modal-grid-3,.vehicle-modal-grid-2{grid-template-columns:1fr!important;gap:10px!important}
  .vehicle-modal-footer{margin:0 -13px!important;padding:11px 13px calc(11px + var(--np-safe-bottom))!important;display:grid!important;grid-template-columns:1fr!important}
  .vehicle-modal-footer .btn{width:100%!important}
}

@media(max-width:480px){
  #siteHeader .brand #siteBrandText{font-size:15px!important}
  #siteHeader .brand-mark{width:31px!important;height:31px!important;flex-basis:31px!important}
  .container{padding-left:10px!important;padding-right:10px!important}
  .hero{padding:23px 15px!important}.hero h1{font-size:33px!important}
  .specs{grid-template-columns:1fr!important}
  .product-actions,.favorite-page-actions,.related-actions{grid-template-columns:1fr!important}
  .product-actions .btn,.favorite-page-actions .btn{grid-column:auto!important}
  body[data-page="admin"] .admin-catalog-summary{grid-template-columns:1fr!important}
  body[data-page="admin"] .admin-modal-footer{grid-template-columns:1fr!important}
  .vehicle-bulk-actions{grid-template-columns:1fr!important}
}


/* ===== NeoPhoenix Mobile v6 — icon quick-nav + readable vehicle modal ===== */
.mobile-quick-nav{display:none}
@media(max-width:820px){
  #siteHeader .header-inner{grid-template-columns:minmax(0,1fr) 44px!important;grid-template-rows:auto auto auto auto!important}
  #siteHeader .brand-mark{width:40px!important;height:36px!important;flex-basis:40px!important;background:none!important;border:0!important;box-shadow:none!important}
  #siteHeader .brand-mark::before{width:64px!important;height:35px!important;background-size:64px auto!important;background-position:center top!important}
  .mobile-quick-nav{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(4,1fr);gap:7px;padding:2px 0 3px}
  .mobile-quick-nav a{position:relative;display:grid;place-items:center;min-height:46px;border:1px solid rgba(255,255,255,.085);border-radius:13px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.78);text-decoration:none;transition:.16s ease}
  .mobile-quick-nav a:active,.mobile-quick-nav a.active{background:linear-gradient(135deg,#f2ce70,#dcae39);border-color:rgba(255,222,128,.58);color:#17120a;box-shadow:0 7px 18px rgba(226,184,75,.16)}
  .mobile-quick-nav .quick-icon{width:23px;height:23px;display:grid;place-items:center}
  .mobile-quick-nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-quick-nav .quick-count{position:absolute;right:8px;top:5px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#efc550;color:#17120a;font-size:10px;font-weight:900;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .mobile-quick-nav a.active .quick-count{background:#17120a;color:#efc550}
  #siteHeader .nav{grid-row:3!important}
  #siteHeader .user-area{grid-row:4!important}
  #siteHeader:not(.menu-open) .nav,#siteHeader:not(.menu-open) .user-area{display:none!important}
  #siteHeader.menu-open .nav{display:grid!important}
  #siteHeader.menu-open .user-area{display:flex!important}
  .vehicle-modal-grid input,.vehicle-modal-grid textarea,.vehicle-modal-grid select{font-size:16px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;caret-color:#efc550!important;background:rgba(8,8,8,.88)!important}
  .vehicle-modal-grid input::placeholder,.vehicle-modal-grid textarea::placeholder{color:rgba(255,255,255,.42)!important;-webkit-text-fill-color:rgba(255,255,255,.42)!important}
}
@media(max-width:480px){
  .mobile-quick-nav{gap:6px}
  .mobile-quick-nav a{min-height:43px;border-radius:12px}
  .mobile-quick-nav .quick-icon,.mobile-quick-nav svg{width:21px;height:21px}
}