/* Preview breakpoints follow the selected frame, not the dashboard viewport. */
[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  :is(
    .swift-commerce-popup-close,
    .swift-commerce-popup-buttons > .swift-commerce-button
  ) {
  pointer-events: auto;
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-container.swift-commerce-popup-preview {
  min-block-size: 36rem;
  block-size: 36rem;
  padding: var(--swift-commerce-space-4);
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  .swift-commerce-popup {
  inline-size: min(100%, var(--swift-commerce-popup-width));
  max-block-size: calc(100% - (2 * var(--swift-commerce-space-4)));
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  .swift-commerce-popup-flyout {
  inline-size: min(20rem, 72%);
  max-block-size: none;
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  .swift-commerce-popup-solid-bar {
  inline-size: 100%;
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  .swift-commerce-popup-buttons
  > .swift-commerce-button {
  min-inline-size: 0;
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-popup-preview
  .swift-commerce-popup-related-products {
  grid-template-columns: repeat(
    var(--swift-commerce-popup-related-columns),
    minmax(0, 1fr)
  );
}

@container swift-commerce-appearance-preview (max-width: 479px) {
  [data-swift-commerce-appearance-frame]
    .swift-commerce-popup-container.swift-commerce-popup-preview {
    min-block-size: 44rem;
    block-size: 44rem;
    padding: var(--swift-commerce-space-2);
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-popup-preview
    .swift-commerce-popup-flyout {
    inline-size: 82%;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-popup-preview
    .swift-commerce-popup-buttons
    > .swift-commerce-button {
    min-inline-size: 100%;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-popup-preview
    .swift-commerce-popup-related-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .swift-commerce-stock-appearance-fields {
    flex-direction: column;
  }
}

.swift-commerce-search-preview-results {
  grid-template-columns: repeat(
    var(--swift-commerce-search-preview-columns, 1),
    minmax(0, 1fr)
  );
}

[data-swift-commerce-appearance-frame] .swift-commerce-wishlist-loop-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page--modern-cards
  .swift-commerce-wishlist-table
  tbody {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Restore wide-frame table semantics even when the dashboard itself is narrow. */
[data-swift-commerce-appearance-frame] .swift-commerce-wishlist-table thead {
  display: table-header-group;
}
[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page:not(.swift-commerce-wishlist-page--modern-cards)
  .swift-commerce-wishlist-table {
  display: table;
}
[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page:not(.swift-commerce-wishlist-page--modern-cards)
  .swift-commerce-wishlist-table
  tbody {
  display: table-row-group;
}
[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page:not(.swift-commerce-wishlist-page--modern-cards)
  .swift-commerce-wishlist-table
  tr {
  display: table-row;
  padding: 0;
}
[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page:not(.swift-commerce-wishlist-page--modern-cards)
  .swift-commerce-wishlist-table
  td {
  display: table-cell;
  padding: var(--swift-commerce-space-3);
}
[data-swift-commerce-appearance-frame]
  .swift-commerce-wishlist-page:not(.swift-commerce-wishlist-page--modern-cards)
  .swift-commerce-wishlist-table
  .product-remove {
  position: static;
  width: auto;
}

@container swift-commerce-appearance-preview (max-width: 767px) {
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-loop-products {
    grid-template-columns: 1fr;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page--modern-cards
    .swift-commerce-wishlist-table
    tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-swift-commerce-appearance-frame] .swift-commerce-wishlist-table thead {
    display: none;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page:not(
      .swift-commerce-wishlist-page--modern-cards
    )
    :is(
      .swift-commerce-wishlist-table,
      .swift-commerce-wishlist-table tbody,
      .swift-commerce-wishlist-table tr,
      .swift-commerce-wishlist-table td
    ) {
    display: block;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page:not(
      .swift-commerce-wishlist-page--modern-cards
    )
    .swift-commerce-wishlist-table
    tr {
    position: relative;
    padding: var(--swift-commerce-space-4) 0;
    border-bottom: 1px solid var(--swift-commerce-color-border);
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page:not(
      .swift-commerce-wishlist-page--modern-cards
    )
    .swift-commerce-wishlist-table
    td {
    padding: var(--swift-commerce-space-1) 0;
    border: 0;
  }
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page:not(
      .swift-commerce-wishlist-page--modern-cards
    )
    .swift-commerce-wishlist-table
    .product-remove {
    position: absolute;
    top: var(--swift-commerce-space-3);
    right: 0;
    width: auto;
  }
}

@container swift-commerce-appearance-preview (max-width: 480px) {
  [data-swift-commerce-appearance-frame]
    .swift-commerce-wishlist-page--modern-cards
    .swift-commerce-wishlist-table
    tbody {
    grid-template-columns: 1fr;
  }
  .swift-commerce-search-preview-results {
    grid-template-columns: minmax(0, 1fr);
  }
}