/* ==========================================================================
   Search Modal - Horizon-style full dialog search
   ========================================================================== */

/* ---------- Predictive search loading state (Dawn defaults) ---------- */
predictive-search .spinner {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
}
predictive-search:not([loading]) .predictive-search__loading-state,
predictive-search:not([loading]) .predictive-search-status__loading {
  display: none;
}
predictive-search[loading] .predictive-search__loading-state {
  display: flex;
  justify-content: center;
  padding: 1rem;
}
predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predictive-search__loading-state {
  display: none;
}

/* When Shopify's predictive-search section HTML is injected straight into
   our modal (no <predictive-search> wrapper), the spinner element above
   would otherwise stay visible permanently. Hide it inside the modal
   results container — we render our own search-modal__spinner during the
   actual fetch. */
[data-predictive-search] .predictive-search__loading-state,
[data-predictive-search] .predictive-search-status__loading {
  display: none !important;
}

/* ---------- Dialog base ---------- */
search-modal {
  display: contents;
}

.search-modal-dialog {
  border: none;
  border-radius: 1.6rem;
  padding: 0;
  max-width: 68rem;
  width: calc(100% - 3.2rem);
  /* Both height and max-height — without explicit height the flex:1
     children collapse to 0 (browser default `<dialog> { height: fit-content }`
     + flex children with flex:1 = circular sizing → 0px). */
  height: 80vh;
  max-height: 80vh;
  min-height: 40rem;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  box-shadow: 0 2.5rem 5rem -1.2rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Only apply flex layout when open - otherwise native display:none handles hiding */
.search-modal-dialog[open] {
  display: flex;
  flex-direction: column;
}

.search-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Open animation */
.search-modal-dialog[open] {
  animation: search-modal-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.search-modal-dialog[open]::backdrop {
  animation: search-backdrop-in 0.3s ease forwards;
}

/* Close animation */
.search-modal-dialog.is-closing {
  animation: search-modal-out 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.search-modal-dialog.is-closing::backdrop {
  animation: search-backdrop-out 0.2s ease forwards;
}

@keyframes search-modal-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes search-modal-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(2rem);
  }
}

@keyframes search-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes search-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ---------- Form container (must flex to allow results scrolling) ---------- */
.search-modal-dialog .search-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* Allow predictive search dropdown to overflow in header search */
.desktop-search .search-modal__form {
  overflow: visible;
}

/* ---------- Search input area ---------- */
.search-modal__input-wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  position: sticky;
  top: 0;
  background: rgb(var(--color-background));
  z-index: 2;
}

.search-modal__input-wrap .icon-search {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
}

.search-modal__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 1.6rem;
  font-family: var(--font-body-family);
  color: rgb(var(--color-foreground));
  padding: 0;
  line-height: 1.5;
}

.search-modal__input::placeholder {
  color: rgba(var(--color-foreground), 0.5);
}

.search-modal__input::-webkit-search-cancel-button,
.search-modal__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.search-modal__reset {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(var(--color-foreground), 0.08);
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.search-modal__reset svg {
  width: 1.2rem;
  height: 1.2rem;
}

.search-modal__reset.visible {
  display: flex;
}

.search-modal__close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font-body-family);
  background: rgba(var(--color-foreground), 0.06);
  border-radius: 0.4rem;
  padding: 0.3rem 0.8rem;
  color: rgba(var(--color-foreground), 0.5);
  transition: background 0.15s ease, color 0.15s ease;
}

.search-modal__close-btn:hover {
  background: rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
}

.search-modal__close-btn-text {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
}

.search-modal__close-btn-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  .search-modal__close-btn-text {
    display: none;
  }

  .search-modal__close-btn-icon {
    display: flex;
  }

  .search-modal__close-btn {
    background: none;
    padding: 0.4rem;
    border-radius: 50%;
  }
}

/* ---------- Results area ---------- */
.search-modal__results {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2rem 2rem;
  flex: 1;
}

.search-modal__results:empty {
  display: none;
}

/* ---------- Loading ---------- */
.search-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

.search-modal__spinner {
  width: 2.4rem;
  height: 2.4rem;
  border: 0.2rem solid rgba(var(--color-foreground), 0.15);
  border-top-color: rgb(var(--color-foreground));
  border-radius: 50%;
  animation: search-spin 0.6s linear infinite;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Result groups ---------- */
.search-modal__result-group {
  padding-top: 2rem;
}

.search-modal__result-group:first-child {
  padding-top: 1.6rem;
}

.search-modal__group-heading {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0 0 1.2rem;
}

/* Stagger group animations */
.search-modal__result-group:nth-child(1) { animation: search-group-in 0.3s ease 0.05s both; }
.search-modal__result-group:nth-child(2) { animation: search-group-in 0.3s ease 0.1s both; }
.search-modal__result-group:nth-child(3) { animation: search-group-in 0.3s ease 0.15s both; }
.search-modal__result-group:nth-child(4) { animation: search-group-in 0.3s ease 0.2s both; }

@keyframes search-group-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Pill suggestions ---------- */
.search-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-modal__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  background: rgba(var(--color-foreground), 0.05);
  border-radius: 10rem;
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.search-modal__pill:hover {
  background: rgba(var(--color-foreground), 0.08);
  transform: scale(1.03);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
}

.search-modal__pill[aria-selected="true"] {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
  background: rgba(var(--color-foreground), 0.08);
}

.search-modal__pill .styled-text b,
.search-modal__pill .styled-text strong {
  font-weight: 700;
}

/* ---------- Visual / photo search ---------- */
.search-modal__camera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  border: none;
  background: none;
  color: rgba(var(--color-foreground), 0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-modal__camera:hover {
  background: rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
}
/* Hover/focus tooltip — explains what the camera does (uses the button's
   data-hint attribute, set in _initVisualSearch). Pure CSS, no JS needed. */
.search-modal__camera { position: relative; }
.search-modal__camera::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 0.6rem;
  font-size: 1.2rem;
  line-height: 1.4;
  width: max-content;
  max-width: 28rem;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.search-modal__camera::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0.6rem;
  border: 0.6rem solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.88);
  margin-top: -0.4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}
.search-modal__camera:hover::after,
.search-modal__camera:focus-visible::after,
.search-modal__camera:hover::before,
.search-modal__camera:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

/* First-visit discovery bubble (one-shot, dismissed after 8s or first click).
   Anchored to the input wrap; points at the camera button. */
.search-modal__camera-hint {
  position: absolute;
  top: calc(100% + 1rem);
  right: 5.2rem; /* room for the ESC button + a bit of margin */
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  padding: 1.2rem 3.2rem 1.2rem 1.4rem;
  border-radius: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.4;
  max-width: 30rem;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
  z-index: 12;
  animation: msHintIn 0.25s ease-out both;
}
.search-modal__camera-hint.is-leaving { animation: msHintOut 0.2s ease-in both; }
.search-modal__camera-hint strong { display: block; font-size: 1.4rem; margin-bottom: 0.2rem; }
.search-modal__camera-hint span { display: block; opacity: 0.85; }
.search-modal__camera-hint::after {
  /* arrow pointing up-right at the camera */
  content: "";
  position: absolute;
  bottom: 100%;
  right: 1.8rem;
  border: 0.7rem solid transparent;
  border-bottom-color: rgb(var(--color-foreground));
}
.search-modal__camera-hint-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: rgb(var(--color-background));
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0.4rem;
}
.search-modal__camera-hint-close:hover { opacity: 1; }
@keyframes msHintIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes msHintOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}
@media (hover: none) {
  /* On touch devices the hover tooltip can't fire — but the first-visit
     hint already handles discovery. Suppress the CSS tooltip there. */
  .search-modal__camera::after,
  .search-modal__camera::before { display: none; }
}
.search-modal__visual-hint {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.6);
  text-align: center;
}

.search-modal__yourphoto {
  border-radius: 1.2rem;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
}
.search-modal__yourphoto img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.search-modal__newphoto {
  margin-top: 1.2rem;
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border-radius: 10rem;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-modal__newphoto:hover { background: rgba(var(--color-foreground), 0.06); }

/* ---------- Wide two-column results (worker + visual): sidebar + 3-col grid ---------- */
@media screen and (min-width: 990px) {
  .search-modal-dialog { max-width: 104rem; }
}
@media screen and (min-width: 750px) {
  .search-modal__results-inner--cols {
    display: grid;
    grid-template-columns: 19rem 1fr;
    column-gap: 2.8rem;
    align-items: start;
  }
  .search-modal__results-inner--cols .search-modal__side { position: sticky; top: 0; }
  .search-modal__results-inner--cols .search-modal__side .search-modal__result-group:first-child { padding-top: 1.6rem; }
  .search-modal__results-inner--cols .search-modal__main .search-modal__products { grid-template-columns: repeat(3, 1fr); }
  .search-modal__results-inner--cols .search-modal__search-for { grid-column: 1 / -1; }
}

/* Full search-results page (takeover): tighter grid, smaller images, capped width */
/* Match the theme's .page-width horizontal padding so our injected content (popular
   searches, filter chips, products) lines up with the native "Search results" heading
   and search box above it (was flush to the viewport edge on mobile). */
.ms-search-page { padding-bottom: 4rem; padding-inline: 1.5rem; }
@media screen and (min-width: 750px) {
  .ms-search-page { padding-inline: 5rem; }
}
.ms-search-page .search-modal__results-inner { max-width: 160rem; margin-inline: auto; }
@media screen and (min-width: 750px) {
  .ms-search-page .search-modal__results-inner--cols { grid-template-columns: 16rem 1fr; column-gap: 2.4rem; }
  .ms-search-page .search-modal__main .search-modal__products { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.8rem 1.6rem; }
}
.ms-search-page .search-modal__product-title { font-size: 1.2rem; }
.ms-search-page .search-modal__product-price { font-size: 1.2rem; }
.ms-search-page .search-modal__product-vendor { font-size: 1rem; }

/* Infinite-scroll sentinel: an empty tracker that only shows a spinner mid-load. */
.search-modal__scroll-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0.1rem;
  padding: 0;
}
.search-modal__scroll-sentinel .search-modal__spinner { display: none; }
.search-modal__scroll-sentinel.is-loading { padding: 3rem 0; }
.search-modal__scroll-sentinel.is-loading .search-modal__spinner { display: block; }

/* ---------- Facet filter chips ---------- */
.search-modal__facets {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0 0 1.6rem;
}
.search-modal__facet-group { display: flex; flex-direction: column; gap: 0.6rem; }
.search-modal__facet-group-title {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--color-foreground), 0.55);
  font-weight: 600;
}
.search-modal__facet-group-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.search-modal__facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  background: rgb(var(--color-background));
  border-radius: 10rem;
  font-size: 1.3rem;
  line-height: 1;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.search-modal__facet-chip:hover {
  background: rgba(var(--color-foreground), 0.06);
}

.search-modal__facet-chip.is-active {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-foreground));
}

.search-modal__facet-count {
  font-size: 1.1rem;
  color: rgba(var(--color-foreground), 0.45);
}

.search-modal__facet-x {
  font-size: 1.5rem;
  line-height: 0.8;
}

/* ---------- Collection cards (horizontal scroll) ---------- */
.search-modal__collections {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.search-modal__collections::-webkit-scrollbar {
  display: none;
}

.search-modal__collection-card {
  flex: 0 0 14rem;
  scroll-snap-align: start;
}

.search-modal__collection-link {
  display: block;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  border-radius: 1.2rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-modal__collection-link:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
}

.search-modal__collection-link[aria-selected="true"] {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}

.search-modal__collection-image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.2rem;
  background: rgba(var(--color-foreground), 0.04);
}

.search-modal__collection-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-modal__collection-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0.8rem 0 0;
  line-height: 1.3;
}

.search-modal__collection-count {
  font-size: 1.1rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0.2rem 0 0;
}

/* ---------- Product cards (grid) ---------- */
.search-modal__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 750px) {
  .search-modal__products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.search-modal__product-card {
  position: relative;
}

.search-modal__product-link {
  display: block;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  border-radius: 1.2rem;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-modal__product-link:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}

.search-modal__product-link[aria-selected="true"] {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}

.search-modal__product-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.2rem;
  background: rgba(var(--color-foreground), 0.04);
}

.search-modal__product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.search-modal__product-image--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.search-modal__product-link:hover .search-modal__product-image--secondary {
  opacity: 1;
}

.search-modal__product-info {
  padding: 0.8rem 0.4rem 0;
}

.search-modal__product-vendor {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0 0 0.2rem;
}

.search-modal__product-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-modal__product-price {
  font-size: 1.3rem;
  margin: 0;
}

.search-modal__product-price s {
  color: rgba(var(--color-foreground), 0.5);
  margin-right: 0.4rem;
  font-weight: 400;
}

.search-modal__product-price .price--on-sale {
  color: #c41230;
  font-weight: 600;
}

.search-modal__discount-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: #c41230;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  line-height: 1;
  z-index: 1;
}

/* ---------- Merchandising extras (banner / message / redirect card) ---------- */
.search-modal__merch-banner {
  display: block;
  margin: 0 0 1.6rem 0;
  border-radius: 0.6rem;
  overflow: hidden;
  line-height: 0;
}
.search-modal__merch-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.search-modal__merch-message {
  margin: 0 0 1.6rem 0;
  padding: 1rem 1.2rem;
  border-left: 0.3rem solid #c41230;
  background: rgba(196, 18, 48, 0.06);
  border-radius: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: rgb(var(--color-foreground));
}
.search-modal__merch-redirect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.6rem 0;
  padding: 1.2rem 1.4rem;
  background: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.search-modal__merch-redirect:hover { background: rgba(196, 18, 48, 0.04); }
.search-modal__merch-redirect-label {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--color-foreground), 0.6);
}
.search-modal__merch-redirect-url {
  flex: 1;
  margin: 0 0.8rem;
  font-weight: 600;
  font-size: 1.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Pages / articles list ---------- */
.search-modal__pages-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-modal__page-item {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.06);
}

.search-modal__page-item:last-child {
  border-bottom: none;
}

.search-modal__page-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 0.8rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  border-radius: 0.8rem;
  transition: background 0.15s ease;
}

.search-modal__page-link:hover {
  background: rgba(var(--color-foreground), 0.04);
}

.search-modal__page-link[aria-selected="true"] {
  background: rgba(var(--color-foreground), 0.06);
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: -0.2rem;
}

.search-modal__page-icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  opacity: 0.4;
}

.search-modal__page-title {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
}

.search-modal__page-type {
  font-size: 1.1rem;
  color: rgba(var(--color-foreground), 0.5);
  margin-left: auto;
  flex-shrink: 0;
}

/* ---------- "Search for..." button ---------- */
.search-modal__search-for {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.4rem 2rem;
  margin-top: 2rem;
  background: rgba(var(--color-foreground), 0.04);
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.search-modal__search-for:hover {
  background: rgba(var(--color-foreground), 0.08);
}

.search-modal__search-for[aria-selected="true"] {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.2rem;
}

.search-modal__search-for svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ---------- Empty state (recently viewed) ---------- */
.search-modal__empty-state {
  padding: 2rem 0;
}

.search-modal__empty-heading {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0 0 1.6rem;
}

.search-modal__empty-message {
  text-align: center;
  padding: 4rem 0;
  color: rgba(var(--color-foreground), 0.4);
  font-size: 1.4rem;
}

/* ---------- IKEA-side autocomplete (Op 49) ---------- */
.search-modal__ikea-suggest {
  padding: 1rem 0 1.6rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  margin-bottom: 1.6rem;
}

.search-modal__ikea-suggest-heading {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0 0 0.8rem;
}

.search-modal__ikea-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.search-modal__ikea-suggest-item { margin: 0; }

.search-modal__ikea-suggest-btn {
  background: rgba(var(--color-foreground), 0.05);
  border: 1px solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.search-modal__ikea-suggest-btn:hover,
.search-modal__ikea-suggest-btn:focus-visible {
  background: rgba(var(--color-foreground), 0.1);
  border-color: rgba(var(--color-foreground), 0.25);
}

/* ---------- SKU exact-match preview ---------- */
.search-modal__sku-preview {
  padding: 1rem 0 1.6rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  margin-bottom: 1.6rem;
}

.search-modal__sku-preview-heading {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: rgba(var(--color-foreground), 0.5);
  margin: 0 0 0.8rem;
}

.search-modal__sku-preview-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem;
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-radius: 0.8rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.search-modal__sku-preview-card:hover,
.search-modal__sku-preview-card:focus-visible {
  background: rgba(var(--color-foreground), 0.04);
  border-color: rgba(var(--color-foreground), 0.25);
}

.search-modal__sku-preview-image-wrap {
  flex: 0 0 6rem;
  width: 6rem;
  height: 6rem;
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
  overflow: hidden;
}

.search-modal__sku-preview-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-modal__sku-preview-info {
  flex: 1;
  min-width: 0;
}

.search-modal__sku-preview-title {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.search-modal__sku-preview-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 1.3rem;
  margin: 0;
}

.search-modal__sku-preview-price {
  font-weight: 600;
}

.search-modal__sku-preview-stock--in {
  color: #2e7d32;
}

.search-modal__sku-preview-stock--out {
  color: rgba(var(--color-foreground), 0.5);
}

/* ---------- ARIA live region ---------- */
.search-modal__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Mobile: full screen ---------- */
/* Fullscreen treatment whenever the viewport is narrow OR short. The
   `(max-height: 700px)` clause catches iPad split-view, Stage Manager,
   Chrome devtools docked at the bottom, and any other case where the
   default 80vh-centered desktop modal collapses too small to use. */
@media screen and (max-width: 768px), screen and (max-height: 700px) {
  /* Force fullscreen. position:fixed + inset:0 + dynamic viewport units
     handle the iOS Safari URL-bar quirks where 100vh overflows. */
  .search-modal-dialog {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100vh;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .search-modal-dialog[open] {
    animation: search-modal-in-mobile 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  .search-modal-dialog.is-closing {
    animation: search-modal-out-mobile 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  /* Tighter input area */
  .search-modal__input-wrap {
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }
  /* iOS Safari auto-zooms on inputs <16px which reflows the dialog and pushes
     the search bar below the fold. Force ≥16px CSS pixels via 1.6rem (Dawn's
     html { font-size: 62.5% } => 1rem = 10px). */
  .search-modal__input {
    font-size: 1.6rem;
    /* Also disable explicit fixed-px overrides from Dawn defaults */
    line-height: 1.4;
  }

  /* Results scrolls inside the dialog */
  .search-modal__results {
    padding: 0 1.2rem 1.6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Smaller IKEA-suggest / Trending pill rows on mobile */
  .search-modal__ikea-suggest {
    padding: 0.8rem 0 1rem;
    margin-bottom: 1rem;
  }
  .search-modal__ikea-suggest-heading {
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
  }
  .search-modal__ikea-suggest-list { flex-wrap: wrap; gap: 0.4rem; }
  .search-modal__ikea-suggest-btn {
    font-size: 1.1rem;
    padding: 0.35rem 0.75rem;
  }

  /* Empty state heading + product cards smaller on mobile */
  .search-modal__empty-state { padding: 1rem 0; }
  .search-modal__empty-heading { font-size: 0.9rem; margin: 0 0 1rem; }
  .search-modal__empty-message { padding: 2rem 0; font-size: 1.2rem; }
  .search-modal__product-card { padding: 0; }
  .search-modal__product-title { font-size: 1.2rem; }
  .search-modal__product-price { font-size: 1.2rem; }
  /* Visual-search "Your photo" reference stays compact on mobile (the sidebar
     stacks above the products in the single-column layout). */
  .search-modal__yourphoto { max-width: 16rem; }
  .search-modal__newphoto { max-width: 16rem; }
}

/* Use a small translateY (not 100%) so the input-wrap is never positioned
   a full viewport away from where it'll end up — that triggers a focus-
   auto-scroll race on iOS that pushes the search bar below the fold. */
@keyframes search-modal-in-mobile {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes search-modal-out-mobile {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(2rem);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .search-modal-dialog[open],
  .search-modal-dialog[open]::backdrop,
  .search-modal-dialog.is-closing,
  .search-modal-dialog.is-closing::backdrop,
  .search-modal__result-group {
    animation-duration: 0.01ms !important;
  }

  .search-modal__spinner {
    animation: none;
  }

  .search-modal__pill:hover,
  .search-modal__collection-link:hover,
  .search-modal__product-link:hover {
    transform: none;
  }
}