/* Appily thirtyeight — global responsive overrides */

@media (max-width: 1100px) {
  .catalog-layout,
  .product-layout,
  .dual,
  .contact-grid,
  .checkout-grid,
  .form-grid,
  .policy-layout,
  .help-layout,
  [class*="a38-"][class*="-layout"],
  [class*="a38-"][class*="-grid"]:not(.a38-drawer-cat-grid):not(.a38-footer-grid):not(.a38-veg-cat-grid) {
    grid-template-columns: 1fr !important;
  }

  .summary-box,
  .filter-panel,
  [class*="a38-"][class*="-sidebar"]:not(.a38-drawer-nav) {
    position: static;
    top: auto;
  }

  .a38-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .a38-footer-newsletter-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .a38-footer-subscribe {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .a38-header-shell {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "browse brand menu"
      "search search search";
  }

  .a38-browse-toggle { grid-area: browse; }
  .a38-brand--stacked { grid-area: brand; justify-self: center; }
  .a38-menu-toggle { grid-area: menu; justify-self: end; }
  .a38-search-ribbon { grid-area: search; width: 100%; }

  .a38-header-actions { display: none; }
  .a38-ribbon-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .a38-ribbon-nav-inner::-webkit-scrollbar { display: none; }

  .a38-hotline-left span:not(.a38-hotline-badge) { display: none; }
  .a38-veg-promo-grid--triple { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container {
    width: min(1280px, 92vw);
  }

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

  /* Topbar / hotline compact */
  .a38-hotline-inner {
    justify-content: center;
    text-align: center;
    padding: 0.45rem 0;
    font-size: 0.74rem;
  }

  .a38-hotline-right {
    justify-content: center;
    width: 100%;
  }

  /* Category strip scroll */
  .a38-cat-strip-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
  }

  .a38-cat-strip-inner::-webkit-scrollbar { display: none; }
  .a38-cat-pill { flex-shrink: 0; }

  /* Shared legacy layouts */
  .page-panel { padding: 1.25rem 0 2.5rem; }
  .panel { padding: 1.15rem; }
  .panel-lg { padding: 1.25rem; }
  .dual { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr; }

  .action-row {
    flex-direction: column;
  }

  .action-row .btn {
    width: 100%;
    text-align: center;
  }

  /* Touch-friendly buttons site-wide */
  .btn,
  button[type="submit"]:not(.a38-drawer-close):not(.a38-menu-toggle):not(.a38-browse-close),
  .a38-btn {
    min-height: 44px;
  }

  /* Tables scroll on small screens */
  .a38-marquee-table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer & newsletter */
  .a38-footer-base {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .a38-footer-subscribe {
    flex-direction: column;
    border-radius: var(--a38-radius);
    overflow: hidden;
  }

  .a38-footer-subscribe input {
    min-width: 0;
    width: 100%;
    text-align: center;
  }

  .a38-footer-subscribe button {
    width: 100%;
    padding: 0.75rem;
  }

  .a38-footer-perks {
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Page-specific hero padding */
  [class*="a38-"][class*="-hero"],
  [class*="a38-"][class*="-marquee"],
  [class*="a38-"][class*="-sign"],
  [class*="a38-"][class*="-atelier"],
  [class*="a38-"][class*="-skylight"],
  [class*="a38-"][class*="-stage"],
  [class*="a38-"][class*="-plaza"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Full-width buttons in custom page footers */
  [class*="a38-"][class*="-foot"] .btn,
  [class*="a38-"][class*="-actions"] .btn,
  [class*="a38-"][class*="-foot"] {
    flex-direction: column;
  }

  [class*="a38-"][class*="-foot"] .btn,
  [class*="a38-"][class*="-actions"] .btn {
    width: 100%;
    text-align: center;
  }

  /* Product / catalog cards */
  .product-grid,
  .product-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)) !important;
  }

  /* Status / gateway pages */
  .checkout-layout .dual { grid-template-columns: 1fr; }
  .status-card { padding: 1.5rem 1.15rem; }
  .a38-gateway-page { padding: 1rem; }

  /* Mobile drawer tweaks */
  .a38-drawer-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a38-drawer-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Two-column form rows → stack */
  .form-grid--2,
  .a38-checkout-form-row,
  .a38-contact-form-row {
    grid-template-columns: 1fr;
  }

  /* Policy / help sidebars */
  .policy-layout,
  .help-layout {
    grid-template-columns: 1fr !important;
  }

  /* Browse panel full width on phones */
  .a38-browse-sheet {
    width: min(100vw, 360px);
  }
}

@media (max-width: 640px) {
  .a38-brand-word { font-size: 1.2rem; }
  .a38-brand-petal { width: 26px; height: 26px; }

  .a38-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .a38-header-actions { gap: 0.25rem; }
  .a38-action { width: 36px; height: 36px; }

  .a38-footer-grid { grid-template-columns: 1fr; }

  /* Drawer: stack quick actions on narrow phones */
  .a38-drawer-quick { grid-template-columns: 1fr; }
  .a38-drawer-quick-btn {
    flex-direction: row;
    align-items: center;
    min-height: 56px;
  }

  .a38-drawer-cat-grid { grid-template-columns: 1fr; }
  .a38-drawer-foot { grid-template-columns: 1fr; }

  /* Homepage grids */
  .a38-veg-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .a38-veg-feat-grid { grid-template-columns: 1fr; }
  .a38-veg-hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .a38-veg-hero-slide-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container { width: min(1280px, 94vw); }

  .a38-hotline { font-size: 0.7rem; }
  .a38-hotline-badge { font-size: 0.62rem; }

  .a38-veg-cat-grid { grid-template-columns: 1fr; }

  .a38-mobile-panel {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  .a38-drawer-nav-link {
    padding: 0.82rem 0.85rem;
  }

  .a38-drawer-foot-btn,
  .a38-drawer-foot a {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 52px;
    padding: 0.75rem 1rem;
    text-align: left;
  }

  .a38-drawer-foot-btn span:first-child,
  .a38-drawer-foot a span:first-child {
    width: 28px;
    text-align: center;
  }

  /* Prevent horizontal overflow */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  pre, code {
    overflow-x: auto;
    word-break: break-word;
  }

  /* Safe area for notched phones */
  .a38-mobile-panel {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .a38-drawer-hero {
    padding-top: max(1.1rem, env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .a38-mobile-panel,
  .a38-mobile-backdrop,
  .a38-browse-sheet,
  .a38-browse-backdrop,
  .a38-menu-bar,
  .a38-menu-toggle,
  .a38-gateway-pulse::before,
  .a38-gateway-pulse::after,
  .a38-pulse-card .notice::before {
    animation: none;
    transition: none;
  }
}