/*
  Allegory — collection grid sort.

  Sold-out products sink to the bottom of the grid on each page.
  Implementation: product-card.liquid emits an `allegory-is-sold-out` class
  when `product.available == false` (true sold-out — evergreen/pre-order
  products are still "available" in Shopify's data, so they don't sink).

  We use CSS `order` — no JS, no page reload, works with pagination and
  AJAX filtering. Reorders within each page only (cross-page sort would
  require a Shopify-side change).
*/

/* Default order for all cards is 0 (the CSS initial value). */

/* Sold-out cards go to the back. Using a value higher than any realistic
   default so the sort is deterministic. */
.product-card.allegory-is-sold-out {
  order: 2;
}

/* Optional: subtle dim on sold-out cards so they feel lower-priority even
   when in view. Kept light — not so low that they look broken. */
.product-card.allegory-is-sold-out .product-card__media {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.product-card.allegory-is-sold-out:hover .product-card__media {
  opacity: 1;
}

/*
  "Hide sold out" option (future toggle).
  When an ancestor has `data-allegory-hide-sold-out="true"`, remove sold-out
  cards from the grid entirely. The JS to toggle this attribute is not built
  yet — this is a hook for a future merchant/customer-facing control.
*/
[data-allegory-hide-sold-out="true"] .product-card.allegory-is-sold-out {
  display: none;
}