/* Phone shell — rethink, not a scaled desktop */

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .utility,
  .catalog-btn,
  .logo-tagline,
  .desk-only,
  .mob-search {
    display: none !important;
  }

  .js-menu-btn {
    display: grid !important;
  }

  .site-header {
    padding-top: env(safe-area-inset-top);
    background: var(--bg);
  }

  .mainbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding-block: 0.35rem;
  }

  .logo-wordmark {
    height: 1.25rem;
  }

  .header-search {
    display: flex !important;
    max-width: none;
    min-height: 2.75rem;
    border-radius: var(--radius-md);
  }

  .header-search .search-input {
    font-size: 1rem;
    padding-inline: 0.7rem;
  }

  .header-search .search-submit {
    margin: 0.2rem;
    padding-inline: 0.75rem;
    font-size: 0.75rem;
  }

  .header-actions {
    gap: 0;
  }

  .hero {
    padding-block: 1.25rem 1.75rem;
  }

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

  .hero h1 {
    max-width: none;
    font-size: 1.75rem;
  }

  .hero-lead {
    font-size: 1rem;
    max-width: none;
  }

  .hero-search {
    margin-top: 1.1rem;
  }

  .hero-search .search {
    min-height: 3.25rem;
    flex-direction: row;
  }

  .hero-search .search-input {
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .hero-actions .btn {
    width: 100%;
    padding-inline: 0.5rem;
  }

  .hero-visual,
  .hero-visual img {
    min-height: 12.5rem;
    border-radius: var(--radius-lg);
  }

  .hero-caption {
    font-size: 0.8rem;
    padding: 0.7rem;
  }

  .section {
    padding-block: 1.75rem;
  }

  .section-head {
    margin-bottom: 1rem;
  }

  .section-head h2,
  .proof h2,
  .help h2,
  .page-intro h1 {
    font-size: 1.4rem;
  }

  .types,
  .articles,
  .proof,
  .help,
  .footer-grid,
  .finder-steps {
    grid-template-columns: 1fr;
  }

  .type-card,
  .type-card-copy {
    min-height: 11rem;
  }

  .finder {
    padding: 1rem;
    border-radius: var(--radius-lg);
  }

  .finder-steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .finder-step {
    min-width: 9.5rem;
    scroll-snap-align: start;
    min-height: 4.4rem;
    padding: 0.75rem;
  }

  .chip-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 2.75rem;
  }

  .brands {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .brand-card {
    flex: 0 0 7.2rem;
    min-height: 3.5rem;
  }

  .cats {
    grid-template-columns: 1fr;
  }

  .products {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .product-card {
    border-radius: 0.85rem;
  }

  .product-card-body {
    padding: 0.85rem;
    gap: 0.35rem;
  }

  .product-card-title {
    font-size: 0.9rem;
  }

  .product-card-media img {
    padding: 0.85rem 0.85rem 1.6rem;
  }

  .price {
    font-size: 1rem;
  }

  .product-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .product-card .btn {
    width: 100%;
    min-height: 2.5rem;
  }

  .help {
    padding: 1.1rem;
    border-radius: var(--radius-lg);
    gap: 1.1rem;
  }

  .field input,
  .field select,
  .field textarea,
  .search-input,
  .catalog-tools select {
    font-size: 1rem;
  }

  .article-card img {
    height: 8.5rem;
  }

  .site-footer {
    padding-block: 2rem 5.5rem;
  }

  .drawer {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .menu {
    width: min(100%, 22rem);
    padding-top: calc(env(safe-area-inset-top) + 1rem);
  }

  .search-page {
    padding-top: env(safe-area-inset-top);
  }

  .search-page-inner {
    margin-top: 1rem;
  }

  .toast-stack {
    right: 0.75rem;
    left: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  .cookie-consent {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-height: min(52dvh, 24rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .cookie-consent-actions {
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-consent-actions .btn {
    width: 100%;
  }

  .drawer-foot .btn {
    width: 100%;
  }

  .suggest {
    max-height: 60dvh;
    overflow: auto;
  }

  .cart-line {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.6rem;
  }

  .cart-line > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .catalog {
    padding-block: 1rem 2rem;
    gap: 1rem;
  }

  .catalog-toolbar {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    z-index: 50;
    background: var(--bg);
    padding-block: 0.5rem;
    margin-inline: -0.15rem;
  }

  .catalog-tools {
    width: 100%;
  }

  .catalog-tools select,
  .filters-toggle {
    flex: 1;
    min-height: 2.75rem;
  }

  .catalog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .filters {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: min(82dvh, 38rem);
    transform: translateY(110%);
    border-radius: 1.25rem 1.25rem 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-lg);
  }

  .filters.is-open {
    transform: none;
  }

  .pagination {
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }

  .products,
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) {
  .type-card:hover img {
    transform: none;
  }
}

@media (pointer: coarse) {
  .filter-option {
    min-height: 2.75rem;
  }

  .mega a,
  .menu a {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hero-visual,
  .hero-visual img {
    min-height: 9rem;
  }

  .type-card,
  .type-card-copy {
    min-height: 8.5rem;
  }
}