/* Appily Twenty — global mobile responsive */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@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(.at-menu-btn):not(.at-drawer-close):not(.ep-view-btn):not(.ed-carousel-btn):not(.ed-hero-arrow) {
    min-height: 44px;
  }
}

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

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

  /* Home (ed-) */
  .ed-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: unset;
  }

  .ed-hero-main,
  .ed-hero-tall {
    grid-row: auto;
  }

  .ed-hero-slider,
  .ed-hero-slide.is-active {
    min-height: 300px;
  }

  .ed-hero-slide.is-active {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.25rem;
  }

  .ed-hero-slide-img { order: -1; }

  .ed-hero-stack {
    flex-direction: column;
  }

  .ed-features-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ed-cat-row {
    grid-template-columns: 1fr;
  }

  .ed-prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ed-promo-trio-grid,
  .ed-promo-duo-grid {
    grid-template-columns: 1fr;
  }

  .ed-best-grid {
    grid-template-columns: 1fr;
  }

  .ed-carousel .ed-prod-card {
    flex: 0 0 calc(50% - 6px);
    min-width: 140px;
  }

  .ed-carousel-btn {
    display: none;
  }

  /* Shop (ep-) */
  .ep-layout {
    grid-template-columns: 1fr;
  }

  .ep-sidebar {
    position: static;
    border: 1px solid var(--ep-border, #e5e5e5);
    border-radius: 8px;
    padding: 0 0.75rem;
  }

  .ep-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ep-view-switch {
    justify-content: flex-end;
  }

  .ep-grid-3,
  .ep-grid-4,
  .ep-grid-5,
  .ep-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Catalog (ec-) */
  .ec-intro-inner,
  .ec-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ec-intro-cta {
    width: 100%;
    text-align: center;
  }

  .ec-aisle-grid {
    grid-template-columns: 1fr;
  }

  /* Footer (pf-) */
  .pf-canopy-grid {
    grid-template-columns: 1fr;
  }

  .pf-bento {
    grid-template-columns: 1fr;
  }

  .pf-stem-post {
    grid-column: auto;
  }

  .pf-compass-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .pf-compass-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pf-compass-track::-webkit-scrollbar {
    display: none;
  }

  .pf-compass-petal {
    flex-shrink: 0;
  }

  .pf-sill-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Themed pages — shared layout patterns */
  [class*="-hero-grid"],
  [class*="-layout"],
  [class*="-bench-grid"],
  [class*="-pipe-inner"],
  [class*="-split"],
  [class*="-grid"]:not(.ep-grid):not(.ed-prod-grid):not(.ed-best-grid) {
    grid-template-columns: 1fr !important;
  }

  [class*="-hero"] {
    padding-top: clamp(20px, 4vw, 32px) !important;
    padding-bottom: clamp(16px, 3vw, 24px) !important;
  }

  aside[class*="-slate"],
  aside[class*="-desk"],
  aside[class*="-rack"],
  aside[class*="-registry"],
  aside[class*="-sidebar"] {
    position: static !important;
    top: auto !important;
  }
}

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

  .at-ribbon-left a:nth-child(n+3) {
    display: none;
  }

  .at-ribbon-right span:last-child {
    display: none;
  }

  .ed-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ed-section {
    padding: 2rem 0;
  }

  .ed-wrap {
    width: min(1280px, calc(100% - 16px));
  }

  .ep-grid-3,
  .ep-grid-4,
  .ep-grid-5,
  .ep-grid-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ep-pagehead,
  .ec-pagehead {
    padding: 1.5rem 0 1.25rem;
  }

  .ec-aisle-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .ec-aisle-visual {
    justify-self: start;
    width: 88px;
    height: 88px;
  }

  .at-drawer-quick {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Account, cart, checkout, orders */
  [class*="-meta-grid"],
  [class*="-fields-duo"],
  [class*="-details-grid"],
  [class*="-pay-grid"],
  [class*="-manifest-grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="-form-foot"],
  [class*="-form-actions"],
  [class*="-manifest-foot"] {
    flex-direction: column;
    align-items: stretch !important;
  }

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

  /* Policy */
  .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;
  }

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

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

  /* Product page */
  .fs-bench-grid,
  .fs-gallery-grid {
    grid-template-columns: 1fr !important;
  }

  /* Help center */
  .pc-topic-grid,
  .pc-glossary-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact */
  .pd-desk-grid {
    grid-template-columns: 1fr !important;
  }

  /* Company */
  .ac-charter-grid {
    grid-template-columns: 1fr !important;
  }

  .pf-scroll-top {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 400px) {
  .ed-prod-grid,
  .ep-grid-3,
  .ep-grid-4,
  .ep-grid-5,
  .ep-grid-6 {
    grid-template-columns: 1fr;
  }

  .ed-carousel .ed-prod-card {
    flex: 0 0 85%;
  }

  .at-drawer-quick {
    grid-template-columns: repeat(2, 1fr);
  }

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