button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 1020px) {
  .header-inner {
    gap: 12px;
  }

  .nav a {
    padding-inline: 9px;
  }
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .mobile-menu-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--brd);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.46);
    color: var(--g1);
  }

  .nav.open {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: grid;
    gap: 0;
    padding: 10px 16px 16px;
    background: rgba(250, 248, 242, 0.98);
    border-bottom: 1px solid var(--brd);
    box-shadow: var(--shadow-md);
  }

  .nav.open a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-radius: 0;
  }

  .hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(30, 61, 34, 0.98), rgba(30, 61, 34, 0.88)),
      url("/images/coffee-placeholder.svg") center bottom / min(86vw, 520px) no-repeat,
      var(--g1);
  }

  .hero::before {
    mask-image: linear-gradient(180deg, #000, transparent 82%);
  }

  .hero-inner {
    padding: 64px 0 220px;
  }

  .grid.three,
  .grid.four,
  .grid.two,
  .brand-band,
  .cart-layout,
  .checkout-layout,
  .product-detail,
  .summary-split,
  .subscription-account-card {
    grid-template-columns: 1fr;
  }

  .filters,
  .wizard-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 24px, 1120px);
  }

  .header-inner {
    min-height: 64px;
  }

  .logo {
    font-size: 1.18rem;
  }

  .header-actions {
    gap: 8px;
  }

  .lang-switch button {
    padding-inline: 8px;
  }

  .section {
    padding: 50px 0;
  }

  .section-title {
    display: grid;
  }

  .section-title p {
    max-width: none;
  }

  .hero h1 {
    font-size: clamp(44px, 14vw, 64px);
  }

  .hero-actions,
  .section-actions,
  .cta-buttons {
    align-items: stretch;
  }

  .hero-actions .button,
  .section-actions .button,
  .cta-buttons .button {
    width: 100%;
  }

  .filters,
  .form-grid,
  .choice-grid,
  .subscription-filters,
  .wizard-progress {
    grid-template-columns: 1fr;
  }

  .grid.three,
  .grid.four,
  .products-grid,
  [data-products-grid],
  [data-featured-products] {
    grid-template-columns: 1fr;
  }

  .product-card .button,
  .checkout-layout .button,
  .cart-layout .button {
    width: 100%;
  }

  .checkout-layout input,
  .checkout-layout select,
  .checkout-layout textarea {
    width: 100%;
  }

  .wizard-progress {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .wizard-progress button {
    min-width: 142px;
    scroll-snap-align: start;
  }

  .subscription-product {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .subscription-product img {
    width: 64px;
    height: 58px;
  }

  .subscription-product .qty-row {
    grid-column: 1 / -1;
  }

  .sticky-summary {
    display: grid;
  }

  .line-item {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .line-item img {
    width: 70px;
    height: 64px;
  }

  .line-item > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .account-card,
  .password-field {
    grid-template-columns: 1fr;
  }

  .account-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .account-tabs button {
    white-space: nowrap;
  }

  .price-row {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .cookie-banner.active {
    left: 12px;
    right: 12px;
    bottom: 84px;
    display: grid;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-actions a {
    grid-column: 1 / -1;
  }

  .whatsapp-float {
    right: 16px;
    bottom: 16px;
  }
}