/* Touch controls for the N.D 82 pages and the API storefront. */
:where(a, button, input, select, summary) {
  touch-action: manipulation;
}

@media (max-width: 760px), (pointer: coarse) {
  .icon-button,
  .header-tools .icon-button,
  .look-card-caption .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 10px;
    flex-shrink: 0;
  }

  .button,
  .text-link,
  .wordmark,
  .navigation-dialog nav a {
    min-width: 44px;
    min-height: 44px;
  }

  .footer-links a:not(.wordmark),
  .footer-bottom a,
  .footer-bottom button,
  .service-layout aside a,
  .category-inline a,
  .shop-categories a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    padding-block: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .footer-links > div:not(.footer-brand) {
    gap: 4px;
  }

  .footer-bottom > div,
  .category-inline,
  .catalog-pagination,
  .cart-item-actions {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .footer-bottom button {
    text-align: left;
  }

  .look-card-caption {
    gap: 8px;
  }

  .look-card-caption > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .search-field input,
  .catalog-toolbar input,
  .catalog-selects select,
  .product-selection select,
  .product-selection input,
  .cart-item-actions input {
    min-height: 44px;
    font-size: 16px;
  }

  .catalog-selects label,
  .product-selection label {
    min-width: 0;
    font-size: 12px;
  }

  .catalog-selects select {
    padding-block: 10px;
  }

  .catalog-selects label {
    flex: 1;
  }

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

  .product-colors {
    gap: 12px;
  }

  .color-swatch {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .product-thumbnails button {
    min-width: 44px;
    min-height: 44px;
  }

  .product-card-name {
    min-width: 44px;
    min-height: 44px;
    padding-block: 6px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .catalog-pagination .text-link {
    font-size: 12px;
  }

  .product-details summary,
  .faq-list summary {
    min-height: 44px;
  }

  .product-details summary {
    padding-block: 10px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .header-inner > .wordmark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
  }

  .menu-button {
    margin-left: 0;
  }

  .header-tools {
    gap: 6px;
    margin-right: 0;
  }
}

@media (min-width: 761px) and (pointer: coarse) {
  .desktop-nav a,
  .desktop-story {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .catalog-selects {
    flex-direction: column;
    gap: 16px;
  }

  .catalog-selects label,
  .catalog-selects select {
    width: 100%;
    max-width: 100%;
  }

  .navigation-dialog {
    padding: 24px;
  }
}

@media (hover: none) {
  .icon-button:active {
    background: #00000012;
  }

  .button:active {
    opacity: .8;
  }

  .look-card-image:hover img,
  .product-card-image:hover img {
    transform: none;
  }
}