/* ==========================================================================
   MOBILE GLOBAL — site-wide responsive (mobile/tablet only)
   Loaded last on every page. Desktop layout unchanged. Images untouched.
   ========================================================================== */

/* ----- Universal foundations ----- */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  .toast-stack {
    left: 16px;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-box {
    max-height: 88vh;
    width: 100%;
  }

  .table-wrap {
    -webkit-overflow-scrolling: touch;
    margin-left: -4px;
    margin-right: -4px;
  }

  .spec-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flex.gap-8,
  .flex.gap-12,
  .flex.gap-16 {
    flex-wrap: wrap;
  }
}

/* ----- Delivery location strip — mobile only (desktop unchanged) ----- */
@media (max-width: 768px) {
  .topbar--v3,
  body:not(.page-home) > .topbar,
  .topbar-loc {
    display: none !important;
  }
}

/* ----- Homepage ----- */
@media (max-width: 768px) {
  .page-home {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .page-home--v2 .section .container {
    overflow-x: clip;
  }

  /* Hero: ensure container inset even if padding shorthand is overridden elsewhere */
  .page-home--v2 .hero-static-inner.container {
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .page-home--v2 .hero-static-copy,
  .page-home--v2 .hero-static-visual,
  .page-home--v2 .hero-static-bento {
    min-width: 0;
    max-width: 100%;
  }
}

/* ----- Customer header search (inner pages) ----- */
@media (max-width: 768px) {
  body:not(.page-home) .header-search .cat-select {
    display: none;
  }

  body:not(.page-home) .header-row {
    gap: 8px;
  }
}

/* ----- Cart / checkout / account grids ----- */
@media (max-width: 768px) {
  .cart-grid,
  .checkout-grid,
  .account-shell,
  .listing-shell,
  .pd-grid {
    min-width: 0;
  }

  .checkout-steps {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .checkout-steps::-webkit-scrollbar {
    display: none;
  }

  .payment-option-row {
    align-items: flex-start;
  }

  .summary-box {
    position: static;
    top: auto;
  }
}

/* ----- Product detail sticky bar + bottom nav spacing ----- */
@media (max-width: 768px) {
  body.page-product-detail {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  body.page-product-detail .pd-sticky-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  body.page-product-detail .pd-similar-row,
  body.page-pharmacy-detail .pd-similar-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }

  body.page-product-detail .pd-similar-row .product-card,
  body.page-pharmacy-detail .pd-similar-row .product-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }
}

/* ----- Dashboard & vendor panel ----- */
@media (max-width: 1080px) {
  body.dash-body .dash-main,
  body.admin-panel .dash-main,
  body.admin-panel.sidebar-collapsed .dash-main {
    margin-left: 0 !important;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  body.dash-body .dash-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }

  body.dash-body .dash-topbar .dt-left,
  body.dash-body .dash-topbar .dt-right {
    min-width: 0;
  }

  body.dash-body .dash-topbar .dt-right {
    gap: 8px;
  }

  body.dash-body .panel-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.dash-body .panel-card-head > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  body.dash-body .panel-card-head input,
  body.dash-body .panel-card-head select,
  body.dash-body .panel-card-head .input,
  body.dash-body .dash-content input.input[style*="width"],
  body.dash-body .dash-content select.input[style*="width"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.dash-body .btn-row,
  body.dash-body .flex.gap-8.mb-16,
  body.dash-body .toolbar-row {
    flex-wrap: wrap;
  }

  body.dash-body .step-progress {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.dash-body .mini-bar-chart {
    height: 140px;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  body.dash-body .dash-content {
    padding: 12px;
  }

  body.dash-body .dash-topbar h1 {
    font-size: 14px;
    line-height: 1.25;
  }

  body.dash-body .panel-card {
    padding: 14px;
  }
}

/* ----- Admin panel ----- */
@media (max-width: 768px) {
  body.admin-panel .admin-topbar {
    padding: 10px 12px;
    gap: 10px;
  }

  body.admin-panel .admin-global-search {
    min-width: 0;
    width: 100%;
  }

  body.admin-panel .admin-global-search input {
    width: 100%;
    min-width: 0;
  }

  body.admin-panel .dt-profile .info {
    display: none;
  }

  body.admin-panel .admin-quick-actions {
    flex-direction: column;
  }

  body.admin-panel .admin-quick-action {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 auto;
  }

  body.admin-panel .admin-modules-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  body.admin-panel .admin-modules-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-panel .admin-toolbar,
  body.admin-panel .admin-table-toolbar {
    flex-wrap: wrap;
  }

  body.admin-panel .admin-toolbar .input,
  body.admin-panel .admin-table-toolbar .input {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  body.admin-panel .admin-modules-grid {
    gap: 10px;
  }
}

/* ----- Premium & pharmacy landing ----- */
@media (max-width: 768px) {
  body.page-premium .premium-hero-grid,
  body.page-pharmacy .ph-hero,
  body.page-pharmacy .ph-layout {
    grid-template-columns: 1fr !important;
  }

  body.page-pharmacy .ph-rx-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ----- Vendor landing / storefront ----- */
@media (max-width: 768px) {
  body.page-vendor-landing .vendor-hero,
  body.page-vendor-landing .vendor-benefits-grid {
    grid-template-columns: 1fr;
  }

  body.page-vendor-landing [style*="min-width:200px"] {
    min-width: 0 !important;
    width: 100%;
  }
}

/* ----- Auth ----- */
@media (max-width: 768px) {
  .auth-shell {
    min-height: 100dvh;
    padding: 20px 12px;
  }

  .auth-card {
    width: 100%;
    max-width: 420px;
  }
}

/* ----- Prototype hub ----- */
@media (max-width: 768px) {
  .page-prototype-hub .proto-hero__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-prototype-hub .proto-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-prototype-hub .proto-hero__actions .btn {
    justify-content: center;
  }
}

/* ----- Touch-friendly controls ----- */
@media (max-width: 768px) {
  .btn:not(.btn-sm):not(.btn-xs),
  a.btn:not(.btn-sm):not(.btn-xs) {
    min-height: 42px;
  }

  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .pagination button,
  .pagination a,
  .pagination span {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ----- Horizontal scroll helpers ----- */
@media (max-width: 768px) {
  .product-row,
  .scroll-row,
  .deals-row,
  .brands-row,
  [class*="__track"],
  [class*="__runway"] {
    -webkit-overflow-scrolling: touch;
  }
}