/* Appily Twentyfour — global mobile responsive polish */

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

  .cs-section {
    padding: 28px 0;
  }

  .page-hero {
    padding: 22px 0;
  }

  .page-hero h1 {
    font-size: 1.35rem;
  }

  .catalog-page {
    padding: 20px 0 36px;
  }

  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sort-select {
    width: 100%;
  }

  .product-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .product-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .policy-page {
    padding: 20px 0 36px;
  }

  .policy-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .policy-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .panel,
  .dual {
    padding: 18px !important;
  }

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

  .auth-form input,
  .auth-form textarea,
  .auth-form select,
  input,
  textarea,
  select {
    font-size: 16px;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cs-product-card,
  .at24-product-card,
  .product-card {
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px;
  }

  .product-foot .btn,
  .panel .btn-primary,
  .auth-form .btn,
  form .btn-primary {
    width: 100%;
  }

  .cs-btn-hero,
  .cs-options,
  .cs-mobile-quick-btn,
  .cs-mobile-link,
  .cs-mobile-call {
    width: auto;
  }
}

/* Inner page layout safety net */
@media (max-width: 768px) {
  [class*="-workspace-grid"],
  [class*="-workplace-grid"],
  [class*="-layout"]:not(.catalog-layout):not(.cs-best-layout):not(.cs-new-layout),
  [class*="-bento"],
  [class*="-grid"]:not(.product-grid):not(.cs-perks-grid):not(.cs-footer-grid):not(.cs-discount-grid):not(.cs-deals-grid):not(.cs-cat-circles):not(.cs-best-grid):not(.cs-featured-list) {
    grid-template-columns: 1fr !important;
  }

  [class*="-hero-grid"],
  [class*="-roof-inner"],
  [class*="-stage-grid"],
  [class*="-bench-grid"],
  [class*="-window-grid"],
  [class*="-dispatch-hero"] [class*="-hero-grid"],
  [class*="-canopy-inner"],
  [class*="-arbour-inner"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-actions"] .btn,
  [class*="-actions"] a[class*="btn"],
  [class*="-form-foot"] .btn,
  [class*="-form-foot"] a[class*="btn"],
  [class*="-miss-actions"] .btn,
  [class*="-miss-actions"] a[class*="btn"],
  [class*="-pulse-links"] a,
  [class*="-catalog-actions"] a {
    width: 100%;
    justify-content: center;
  }

  [class*="-related-scroll"] {
    padding-bottom: 12px;
  }

  [class*="-member-actions"],
  [class*="-miss-actions"],
  [class*="-pulse-links"],
  [class*="-form-foot"]:not(.cs-form-foot) {
    flex-direction: column;
    align-items: stretch;
  }
  [class*="-folder-tabs"],
  [class*="-index-tabs"],
  [class*="-shelf-tabs"],
  [class*="-rail"],
  [class*="-drafting-rail"] {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  [class*="-row"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-legal-grid"],
  [class*="-aisle-grid"],
  [class*="-policy-slats"],
  [class*="-runway"],
  [class*="-pay-options"] {
    grid-template-columns: 1fr !important;
  }
}