/* Appily Twentytwo — global mobile responsive enhancements */

@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"],
  .pv-search-btn,
  .pv-browse-btn,
  [class*="-btn"] {
    min-height: 44px;
  }

  .page-main {
    overflow-x: hidden;
  }
}

@media (max-width: 900px) {
  /* ── Shared hero / cover patterns ── */
  [class*="-hero"],
  [class*="-dock"],
  [class*="-booth"],
  [class*="-desk"],
  [class*="-counter"],
  [class*="-drafting"],
  [class*="-cabinet"],
  [class*="-greenhouse"],
  [class*="-canopy"],
  [class*="-cover"],
  [class*="-vitrine"],
  [class*="-folio-cover"],
  [class*="-bark"],
  [class*="-relay"],
  [class*="-tube"] {
    padding-top: clamp(20px, 4vw, 36px) !important;
  }

  [class*="-hero"] h1,
  [class*="-hero-copy"] h1,
  [class*="-dock-copy"] h1,
  [class*="-booth-copy"] h1,
  [class*="-desk-copy"] h1,
  [class*="-counter-copy"] h1,
  [class*="-drafting-copy"] h1,
  [class*="-cabinet-copy"] h1,
  [class*="-greenhouse-copy"] h1,
  [class*="-cover-copy"] h1,
  [class*="-vitrine-copy"] h1,
  [class*="-bark-copy"] h1,
  [class*="-relay-copy"] h1 {
    font-size: clamp(1.55rem, 6vw, 2.15rem) !important;
  }

  /* ── Shared grid layouts ── */
  [class*="-hero-grid"],
  [class*="-dock-grid"],
  [class*="-booth-grid"],
  [class*="-desk-grid"],
  [class*="-counter-grid"],
  [class*="-drafting-grid"],
  [class*="-cabinet-grid"],
  [class*="-greenhouse-inner"],
  [class*="-canopy-grid"],
  [class*="-cover-grid"],
  [class*="-layout"],
  [class*="-bench-grid"],
  [class*="-pipe-inner"],
  [class*="-wrap"],
  [class*="-shell-grid"],
  [class*="-deck-grid"],
  [class*="-cover-inner"],
  [class*="-gate"],
  [class*="-story-grid"],
  [class*="-punch-wrap"],
  [class*="-ring-wrap"],
  [class*="-tape-scene"],
  [class*="-catalog-row"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  [class*="-story-grid-reverse"] {
    direction: ltr !important;
  }

  [class*="-lede"],
  [class*="-dock-copy"] .bp-lede,
  [class*="-booth-copy"] .dt-lede,
  [class*="-desk-copy"] .ef-lede,
  [class*="-counter-copy"] .va-lede,
  [class*="-drafting-copy"] .bp-lede,
  [class*="-cabinet-copy"] .pc-lede,
  [class*="-greenhouse-copy"] .gb-lede {
    margin-left: auto;
    margin-right: auto;
  }

  [class*="-stats"],
  [class*="-specimen-tags"],
  [class*="-remedy-tags"],
  [class*="-benefit-strip"],
  [class*="-catalog-actions"],
  [class*="-policy-row"],
  [class*="-miss-actions"],
  [class*="-guest-actions"] {
    justify-content: center;
  }

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

  [class*="-layout"]:not(.pv-footer-grid) {
    gap: 24px !important;
  }

  /* Sidebars first on mobile where useful */
  [class*="-aside"],
  [class*="-flap"],
  [class*="-scale"],
  [class*="-shelf"],
  [class*="-operator"],
  [class*="-coupon"] {
    order: -1;
    position: static !important;
  }

  /* ── Forms & actions ── */
  [class*="-fields-duo"],
  [class*="-fields-route"],
  [class*="-meta"],
  [class*="-meta-grid"],
  [class*="-plate-grid"],
  [class*="-profile-grid"],
  [class*="-registrar-body"],
  [class*="-registrar"] .bp-registrar-body {
    grid-template-columns: 1fr !important;
  }

  [class*="-form-foot"],
  [class*="-form-actions"],
  [class*="-manifest-foot"],
  [class*="-registry-actions"],
  [class*="-strip-foot"],
  [class*="-chronicle-foot"],
  [class*="-actions"],
  [class*="-foot"],
  .auth-dash-actions,
  .orders-head {
    flex-direction: column;
    align-items: stretch !important;
  }

  [class*="-form-foot"] .btn,
  [class*="-form-actions"] .btn,
  [class*="-manifest-foot"] .btn,
  [class*="-registry-actions"] [class*="-btn"],
  [class*="-strip-foot"] [class*="-btn"],
  [class*="-chronicle-foot"] [class*="-btn"],
  [class*="-actions"] [class*="-btn"],
  [class*="-foot"] [class*="-btn"],
  [class*="-catalog-actions"] [class*="-btn"],
  [class*="-shelf-links"] [class*="-btn"] {
    width: 100%;
    justify-content: center;
  }

  /* ── Shop / product / cart globals ── */
  .gs-breadcrumb-bar,
  [class*="-pipe-trail"],
  [class*="-trail"],
  [class*="-crease-trail"],
  [class*="-visa-trail"],
  [class*="-ruler-rail"] {
    padding-top: 12px;
  }

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

  .gs-dual,
  .gs-dual-wide,
  .gs-cart-layout,
  .catalog-layout,
  .product-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .gs-summary,
  .summary-box,
  .filter-panel {
    position: static !important;
  }

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

  .pv-mega-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Page-specific: cart (vc-) ── */
  .vc-slat-card {
    grid-template-columns: 64px 1fr !important;
  }

  .vc-slat-unit,
  .vc-slat-qty,
  .vc-slat-line {
    grid-column: 2;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ── Page-specific: account (gb-) ── */
  .gb-wrap,
  .gb-workbench {
    grid-template-columns: 1fr !important;
  }

  .gb-markers {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 8px;
  }

  .gb-marker {
    flex: 0 0 auto;
    min-width: 120px;
  }

  /* ── Page-specific: help (pc-) ── */
  .pc-layout,
  .pc-cabinet-wrap {
    grid-template-columns: 1fr !important;
  }

  .pc-cabinet {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Page-specific: track (sr-) ── */
  .sr-pipe-layout,
  .sr-tube-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Page-specific: orders (fi-) ── */
  .fi-slots,
  .petalvault-flindex {
    grid-template-columns: 1fr !important;
  }

  /* ── Page-specific: order status (dt-) ── */
  .dt-punches {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dt-punches::before {
    display: none;
  }

  .dt-punch-wrap {
    flex-direction: column;
    align-items: center;
  }

  .dt-readouts {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .dt-readouts li {
    flex: 1;
    min-width: 90px;
  }

  /* ── Page-specific: company (bp-) ── */
  .bp-layout {
    grid-template-columns: 1fr !important;
  }

  .bp-ruler-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bp-line, #c8d8e8);
  }

  .bp-rail-line {
    display: none;
  }

  .bp-tab {
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--bp-line, #c8d8e8);
  }

  .bp-tab-num {
    display: none;
  }

  .bp-compass {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 72px;
    max-width: 100%;
  }

  .bp-compass-ring,
  .bp-compass-core {
    grid-column: 1 / -1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 8px;
  }

  .bp-bearing {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    max-width: none;
    width: 100%;
  }

  .bp-bearing-n,
  .bp-bearing-s {
    grid-column: 1 / -1;
  }

  .bp-plot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Page-specific: rosette / compass legacy ── */
  .oc-rosette,
  .bp-compass {
    max-width: 100%;
  }

  /* ── Policy pages ── */
  .policy-nav {
    gap: 6px;
  }

  .policy-nav a {
    flex: 1 1 calc(50% - 6px);
    text-align: center;
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  .policy-card {
    padding: 20px 16px;
  }

  table {
    max-width: 100%;
  }

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

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .gs-page {
    padding: 24px 0 40px;
  }

  .gs-panel {
    padding: 20px 16px;
  }

  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .action-row .btn {
    width: 100%;
    justify-content: center;
  }

  .pv-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .dt-punches,
  .vc-slots,
  .fi-slots {
    grid-template-columns: 1fr !important;
  }

  .pc-drawer-tab {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .bp-plot-grid,
  .oc-sigil-grid {
    grid-template-columns: 1fr !important;
  }

  .bp-registrar-body {
    grid-template-columns: 1fr !important;
  }
}

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

  .policy-nav a {
    flex: 1 1 100%;
  }

  .gs-values-grid {
    grid-template-columns: 1fr !important;
  }

  [class*="-sheet"],
  [class*="-foldout"],
  [class*="-script"],
  [class*="-registry"],
  [class*="-strip"],
  [class*="-chronicle"],
  [class*="-folio"],
  [class*="-leaflet"],
  [class*="-catalog"],
  [class*="-clothesline"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vc-registry-actions,
  .ef-registry-actions {
    flex-direction: column;
  }

  .vc-registry-actions .vc-btn,
  .ef-actions .ef-btn {
    width: 100%;
  }

  .dt-tape-roll {
    width: 100%;
    max-width: 200px;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .pv-nav.is-open .pv-drawer-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .page-wrap {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}