/* Appily Nineteen — global mobile responsive enhancements */

/* Touch-friendly inputs site-wide */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }

  .btn,
  button[type="submit"],
  [class*="-btn"]:not(.vg-menu-btn):not(.vg-cart-toggle):not(.vg-drawer-close) {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  /* Page heroes — shared pattern across themed pages */
  [class*="-hero"] {
    padding-top: clamp(20px, 4vw, 32px) !important;
    padding-bottom: clamp(16px, 3vw, 24px) !important;
  }

  [class*="-hero"] h1,
  [class*="-hero-copy"] h1 {
    font-size: clamp(1.55rem, 6vw, 2.1rem) !important;
  }

  [class*="-hero-grid"],
  [class*="-layout"],
  [class*="-bench-grid"],
  [class*="-pipe-inner"],
  [class*="-wrap"],
  [class*="-shell-grid"],
  [class*="-deck-grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-floor"],
  [class*="-deck"],
  [class*="-registry"] {
    padding-bottom: 40px;
  }

  /* Two-column page layouts → stack */
  [class*="-layout"]:not(.vg-footer-grid) {
    gap: 24px !important;
  }

  /* Breadcrumb / pipe trails */
  .vg-breadcrumb-bar,
  [class*="-pipe-trail"],
  [class*="-trail"] {
    padding-top: 12px;
  }

  [class*="-crumb"],
  [class*="-pipe-inner"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Meta grids → two columns on tablet */
  [class*="-meta-grid"],
  [class*="-plate-grid"],
  [class*="-profile-grid"] {
    grid-template-columns: 1fr 1fr;
  }

  /* Form footers stack */
  [class*="-form-foot"],
  [class*="-form-actions"],
  [class*="-manifest-foot"],
  [class*="-ticket-actions"],
  [class*="-stamp-row"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  [class*="-form-foot"] .btn,
  [class*="-form-foot"] [class*="-btn"],
  [class*="-form-actions"] [class*="-btn"],
  [class*="-ticket-actions"] [class*="-btn"] {
    width: 100%;
  }

  /* Sidebars become static */
  aside[class*="-slate"],
  aside[class*="-desk"],
  aside[class*="-rack"],
  aside[class*="-registry"],
  aside[class*="-tuner"],
  aside[class*="-title-block"],
  [class*="-drafting-rail"],
  [class*="-waypoints"],
  [class*="-compass"],
  [class*="-milepost"] {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  /* Home — ox- */
  .ox-bento-grid {
    grid-template-columns: 1fr !important;
  }

  .ox-bento-tile-large,
  .ox-bento-tile-tall {
    grid-row: auto !important;
    min-height: 220px;
  }

  .ox-hero-split {
    grid-template-columns: 1fr !important;
  }

  .ox-category-scroll {
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Shop — op- */
  .op-vault-hero-inner,
  .op-pantry-layout {
    grid-template-columns: 1fr !important;
  }

  .op-orbit-aisles {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .op-orbit-chip {
    flex: 0 0 auto;
  }

  /* Cart — vk- */
  .vk-cart-layout {
    grid-template-columns: 1fr !important;
  }

  .vk-sidebar {
    order: -1;
  }

  /* Checkout — oe- */
  .oe-weighbridge,
  .oe-bridge-grid {
    grid-template-columns: 1fr !important;
  }

  /* Orders — od- */
  .od-ledger-layout,
  .od-ticket-grid {
    grid-template-columns: 1fr !important;
  }

  /* Account — oa- */
  .oa-wrap,
  .oa-chart {
    grid-template-columns: 1fr !important;
  }

  .oa-waypoints {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .oa-waypoint {
    flex: 0 0 auto;
    min-width: 120px;
  }

  /* Contact — ow- */
  .ow-layout,
  .ow-hero-grid {
    grid-template-columns: 1fr !important;
  }

  /* Track — ot- */
  .ot-beacon-layout,
  .ot-waybill-grid {
    grid-template-columns: 1fr !important;
  }

  /* Help — og- */
  .og-desk-layout,
  .og-hero-inner {
    grid-template-columns: 1fr !important;
  }

  .og-waypoint-rail {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .og-waypoint {
    flex: 0 0 auto;
    min-width: 130px;
  }

  /* Product — oy- */
  .oy-dossier-grid,
  .oy-spotlight-stage {
    grid-template-columns: 1fr !important;
  }

  .oy-filmstrip {
    margin-left: -8px;
    margin-right: -8px;
  }

  /* Company — ob- */
  .ob-layout,
  .ob-hero-inner {
    grid-template-columns: 1fr !important;
  }

  .ob-drafting-rail {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ob-rail-pin {
    flex: 1 1 auto;
    min-width: 130px;
  }

  /* Order status — ol- / cv- */
  .ol-relay-grid,
  .cv-van-layout {
    grid-template-columns: 1fr !important;
  }

  /* Collections */
  .vg-collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vg-collection-card {
    min-height: 140px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(1280px, calc(100% - 16px));
  }

  [class*="-meta-grid"],
  [class*="-fields-duo"],
  [class*="-drawers-grid"],
  [class*="-details-grid"],
  [class*="-neighbors-head"],
  [class*="-plate-grid"],
  [class*="-legend-grid"],
  [class*="-profile-grid"],
  [class*="-plate-grid"] .ob-plate-wide,
  [class*="-plate-grid"] .ob-plate-primary {
    grid-template-columns: 1fr !important;
  }

  [class*="-meta-grid"] {
    grid-template-columns: 1fr 1fr;
  }

  /* Horizontal scroll rows */
  [class*="-cell-row"],
  [class*="-scroll-track"],
  [class*="-filmstrip-track"] {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Policy pages */
  .policy-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .policy-nav::-webkit-scrollbar {
    display: none;
  }

  .policy-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 8px 12px;
  }

  .policy-card,
  .policy-content {
    padding: 18px 16px;
  }

  .policy-content table,
  .policy-detail table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }

  /* Order success & generic panels */
  .section .panel {
    padding: 22px 16px !important;
  }

  .section .panel h1 {
    font-size: 1.45rem;
  }

  .section .panel [style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .section .panel .btn {
    width: 100%;
    text-align: center;
  }

  /* Collections single column */
  .vg-collections-grid {
    grid-template-columns: 1fr !important;
  }

  /* Home grids */
  .ox-prod-grid-6,
  .ox-explore-grid,
  .ox-services-grid,
  .ox-brand-row {
    grid-template-columns: 1fr !important;
  }

  .ox-prod-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Shop tiles */
  .page-orchard-pantry .op-tile-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cart summary full width */
  .vk-sidebar-card {
    position: static !important;
  }

  /* Checkout payment grid */
  .oe-pay-grid,
  .wb-pay-grid {
    grid-template-columns: 1fr !important;
  }

  /* Orders ticket */
  .od-ticket-meta,
  .rt-ticket-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Track support */
  .ot-scan-fields,
  .gh-scan-form .gh-fields {
    grid-template-columns: 1fr !important;
  }

  /* Help glossary */
  .og-faq-grid,
  .rg-term-grid {
    grid-template-columns: 1fr !important;
  }

  /* Product bench */
  .oy-meta-tiles,
  .oy-notes-grid {
    grid-template-columns: 1fr !important;
  }

  /* Company stamps */
  .ob-stamp-row {
    justify-content: center;
  }

  .ob-dispatch-ticket {
    grid-template-columns: 1fr !important;
  }

  .ob-ticket-perf {
    height: 10px;
    background:
      radial-gradient(circle at 6px 0, var(--ob-cream, #f6f3ec) 4px, var(--ob-line, #c8d4dc) 4.5px) 0 0 / 12px 12px repeat-x;
  }

  /* Account folio */
  .oa-folio {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .oa-folio-actions {
    flex-direction: column;
    width: 100%;
  }

  .oa-folio-actions .oa-btn {
    width: 100%;
  }

  /* Contact telegraph */
  .ow-telegraph-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Footer payment row */
  .vg-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  /* Tables overflow */
  table {
    max-width: 100%;
  }

  .vk-table-wrap,
  [class*="-table-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(1280px, calc(100% - 12px));
  }

  [class*="-meta-grid"] {
    grid-template-columns: 1fr !important;
  }

  .vg-drawer-actions {
    grid-template-columns: 1fr;
  }

  .vg-drawer-footer a {
    flex: 1 1 100%;
  }

  .ov-mobile-chip {
    min-width: 64px;
    padding: 7px 10px 9px;
  }

  .ov-chip-label {
    font-size: 0.62rem;
  }

  .ox-prod-grid-6 {
    grid-template-columns: 1fr !important;
  }

  .ox-hero-stats,
  .ob-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .ob-stamp {
    width: 110px;
    height: 110px;
  }

  .ob-ticket-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* Mega menu in drawer */
  .vg-mega-links {
    grid-template-columns: 1fr !important;
  }

  .vg-mega-featured {
    display: none;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .vg-nav.is-open {
      padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    .vg-cart-dropdown {
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}