/* Interaction and viewport fixes. Load after the layout and typography files. */

/* Keep the search controls visible and give results the remaining dialog space. */
.search-dialog[open] {
  display: flex;
  flex-direction: column;
  height: min(720px, calc(var(--search-viewport-height, 100dvh) - 40px));
  overflow: hidden;
  padding-bottom: 0;
}
.search-dialog > .dialog-header,
.search-dialog > .search-large,
.search-dialog > .subtle {
  flex: 0 0 auto;
}
.search-dialog .mini-results {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: 24px;
  scroll-padding-block: 12px;
}
.search-dialog .mini-product > span {
  overflow-wrap: anywhere;
}
.search-dialog .dialog-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.search-dialog .dialog-header [data-close] {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  :root {
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-nav-height: 64px;
    --mobile-buy-height: 72px;
  }
  body {
    --mobile-bar-height: var(--mobile-nav-height);
    padding-bottom: calc(var(--mobile-bar-height) + var(--mobile-safe-bottom));
  }
  body[data-page="product"] {
    --mobile-bar-height: var(--mobile-buy-height);
    padding-bottom: calc(var(--mobile-bar-height) + var(--mobile-safe-bottom));
  }
  .mobile-bottom-nav {
    height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    min-height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    padding: 8px 10px calc(8px + var(--mobile-safe-bottom));
    align-items: center;
  }
  .mobile-bottom-nav > a,
  .mobile-bottom-nav > button {
    min-height: 44px;
    justify-content: center;
  }
  .pdp-mobile-buy {
    height: calc(var(--mobile-buy-height) + var(--mobile-safe-bottom));
    min-height: calc(var(--mobile-buy-height) + var(--mobile-safe-bottom));
    padding: 12px 17px calc(12px + var(--mobile-safe-bottom));
    gap: 12px;
  }
  .pdp-mobile-buy .button {
    min-width: 0;
    min-height: 44px;
    height: 46px;
    padding: 10px 12px;
    gap: 8px;
  }
  .whatsapp-float,
  body[data-page="product"] .whatsapp-float {
    bottom: calc(var(--mobile-bar-height) + var(--mobile-safe-bottom) + 16px);
  }
  .toast {
    bottom: calc(var(--mobile-bar-height) + var(--mobile-safe-bottom) + 16px);
    max-width: calc(100% - 32px);
    overflow-wrap: anywhere;
  }

  /* Enlarge hit areas without enlarging the dot, swatch or icon artwork. */
  .product-wish,
  .pdp-image-wish,
  .dialog-header .icon-button,
  .product-close,
  .pdp-share,
  .pdp-swatch,
  .qty-control button,
  .pdp-quantity button,
  .pdp-gallery-controls .icon-button,
  .pdp-zoom-header .icon-button,
  .pdp-zoom-controls .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  .hero-controls {
    bottom: 2px;
    gap: 4px;
  }
  .hero-controls > .icon-button,
  .hero-dots button,
  .pdp-gallery-dots button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
  .hero-dots {
    gap: 0;
  }
  .pdp-gallery-controls {
    max-width: 100%;
    padding-inline: 12px;
    gap: 4px;
  }
  .pdp-gallery-dots {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .pdp-image-tools > button,
  .pdp-size-help,
  .pdp-zoom-controls > a,
  .remove-button,
  .wishlist-item-action,
  .continue-shopping,
  .filter-scroll button,
  .filter-toggle,
  .clear-filters,
  .quick-categories > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .remove-button,
  .wishlist-item-action {
    min-width: 44px;
  }
  .sort-label select,
  .secondary-filters select {
    min-height: 44px;
  }

  .bag-item {
    grid-template-columns: 85px minmax(0, 1fr);
  }
  .bag-item > div,
  .product-card,
  .pdp-title-row h1,
  .pdp-label-row > strong,
  .dialog-header h2,
  .menu-brand > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .bag-item-controls,
  .bag-total,
  .pdp-label-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .qty-control {
    flex: 0 0 auto;
  }
  .bag-footer .button {
    min-width: 0;
    gap: 10px;
  }
  .dialog-header .icon-button {
    margin-right: 0;
  }
  .pdp-specification-list dd,
  .product-specs dd,
  .footer-grid a,
  .footer-grid button {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .social-banner-links {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .social-banner-links a,
  .social-icons a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .social-icons a {
    justify-content: center;
  }

  .search-dialog[open] {
    height: var(--search-viewport-height, 100dvh);
    max-height: var(--search-viewport-height, 100dvh);
  }
  .search-dialog .mini-results {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(16px + var(--mobile-safe-bottom));
  }
  .search-dialog .search-large input {
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .pdp-mobile-buy {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Short viewports leave room for results while the search field stays usable. */
@media (max-height: 500px) {
  .search-dialog[open] {
    height: var(--search-viewport-height, 100dvh);
    max-height: var(--search-viewport-height, 100dvh);
    margin-block: 0;
  }
  .search-dialog > .dialog-header {
    padding-block: 8px;
  }
  .search-dialog > .search-large {
    margin-block: 6px;
    padding-block: 4px;
  }
  .search-dialog > .subtle {
    margin-block: 6px;
  }
}