/* ============================================================
   compact.css — FINAL OVERRIDE LAYER (load LAST on storefront)
   Goals: compact spacing · classic clean look · faster paint ·
   fully mobile-friendly with a native-app style bottom nav.
   Purely additive — safe to delete to revert.
   ============================================================ */

/* ---------- 1. CLASSIC / COMPACT DESKTOP ---------- */
:root{
  --hdr-h: 56px;                 /* slimmer header */
}
.wrap{padding:0 14px}
.btn{padding:9px 15px;border-radius:9px}
.btn-sm{padding:7px 11px;border-radius:8px}
.pgrid{gap:11px}
.hdr-cart:hover,.btn-amber:hover,.btn-primary:hover,.subnav-inner a:hover{transform:none}   /* calmer, classic */
.hdr-btn{border-radius:9px}
.modal{border-radius:14px}
.drawer-head h3{font-size:16px}

/* Softer, faster shadows everywhere (blur is expensive to paint) */
.card,.panel,.kpi{box-shadow:0 1px 2px rgba(15,23,42,.05)}

/* ---------- 2. PERFORMANCE ---------- */
/* Skip layout/paint for offscreen product cards — huge scroll win on long grids */
.pgrid>*{content-visibility:auto;contain-intrinsic-size: 270px 340px}

/* On lite devices (flag set by the head probe) kill the expensive stuff */
.lite .hdr, .lite .modal, .lite .drawer{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.lite *{animation-duration:.15s !important;transition-duration:.12s !important}
.lite body::before, .lite body::after{display:none !important}   /* aurora layers */

/* Only paint hover transforms on devices that actually hover */
@media (hover:none){
  .hdr-cart:hover,.btn:hover,.subnav-inner a:hover{transform:none !important;box-shadow:none}
}

/* ---------- 3. MOBILE LAYOUT (≤ 760px) ---------- */
@media (max-width:760px){

  /* Header: logo row + full-width search row */
  .hdr-main{flex-wrap:wrap;height:auto;padding:8px 0 6px;gap:8px}
  .brand-logo img{height:26px}
  .search-box{order:3;flex:1 1 100%;width:100%}
  .search-box select{max-width:74px;font-size:12px}
  .search-box input{font-size:16px}          /* 16px prevents iOS zoom-on-focus */
  .hdr-actions{margin-left:auto;gap:2px}
  .hdr-btn .t1{display:none}                  /* compact: single-line labels */
  .hdr-btn{padding:8px}
  .hdr-cart .t2{display:none}
  .subnav-inner{padding:6px 0}
  .subnav-inner a{padding:6px 11px;font-size:11.5px}

  /* Product grid: clean 2-up like classic marketplace apps */
  .pgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .pgrid>*{contain-intrinsic-size: 170px 300px}

  /* Drawers become full-width sheets */
  .drawer{width:100vw !important;max-width:100vw !important;border-radius:0}

  /* Modals become bottom sheets — thumb friendly */
  .modal{width:calc(100vw - 0px) !important;max-width:100vw !important;
    top:auto !important;bottom:0;left:0;right:0;transform:none !important;
    border-radius:18px 18px 0 0;max-height:92vh;overflow:auto}

  /* Touch targets ≥ 44px */
  .btn,.btn-sm,.icon-btn,.subnav-inner a,.field input,.field select{min-height:44px}
  .field input,.field select,.field textarea{font-size:16px}

  /* Tables (orders / account) scroll sideways instead of breaking layout */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* Footer: leave room for the bottom nav */
  .ft{padding-bottom:76px}

  /* Toasts above bottom nav */
  .toast-stack,.toasts{bottom:74px !important}
}

/* ---------- 4. APP-STYLE BOTTOM NAV (injected by boost.js, mobile only) ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;
    background:rgba(255,255,255,.97);border-top:1px solid #e5e7eb;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(15,23,42,.07)}
  .mbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;font-size:10.5px;font-weight:600;color:#64748b;background:none;border:0}
  .mbar button.on{color:var(--brand,#6b57ff)}
  .mbar svg{width:22px;height:22px}
  .mbar .mb-badge{position:absolute;margin-left:16px;margin-top:-4px;background:#ef4444;color:#fff;
    font-size:9.5px;font-weight:800;min-width:15px;height:15px;line-height:15px;border-radius:999px;
    text-align:center;padding:0 3px}
}

/* ---------- 5. SMALL PHONES (≤ 400px) ---------- */
@media (max-width:400px){
  .pgrid{gap:7px}
  .wrap{padding:0 10px}
}