/* The empty cart (inc/class-empty-cart.php): the side cart's empty state and
   the Cart block's, one block in two places.

   Self-contained on purpose. The cards carry the shop card's classes, so
   woocommerce-shop.css dresses them on the pages that load it (shop, product,
   home, 404), but the drawer is on every page and the cart page loads only the
   cart/checkout sheet. Everything here is scoped to .fn-empty-cart and lays the
   cards out two up with or without the shop sheet, at the drawer's 390–420 px. */

/* WooCommerce's own line ("No products in the cart.") stays in the template,
   untouched; this block says it instead. */
.widget_shopping_cart_content .fn-empty-cart ~ .woocommerce-mini-cart__empty-message {
  display: none;
}

.fn-empty-cart {
  width: 100%;
  padding: var(--sg-space-6) 0 var(--sg-space-8);
  color: var(--sg-text);
  text-align: left;
}

.fn-empty-cart--drawer {
  border-top: 1px solid var(--sg-border);
}

.fn-empty-cart--page {
  max-width: 960px;
  margin: 0 auto;
  padding-top: var(--sg-space-4);
}

/* A short entrance, only for those who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .fn-empty-cart {
    animation: fn-empty-cart-in 0.32s var(--sg-lux-ease) both;
  }
}

@keyframes fn-empty-cart-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- The line ------------------------------------------------------------ */

.fn-empty-cart__lead {
  margin: 0 0 var(--sg-space-6);
  font: var(--sg-body-md);
  color: var(--sg-muted);
}

.fn-empty-cart__lead strong {
  display: block;
  margin-bottom: var(--sg-space-1);
  font: var(--sg-h4);
  letter-spacing: var(--sg-track-display);
  color: var(--sg-text);
}

/* Focused only by script, when the line the shopper was on has gone
   (assets/js/empty-cart.js); never a Tab stop, so no ring. */
.fn-empty-cart__lead:focus {
  outline: none;
}

.fn-empty-cart__title {
  margin: 0 0 var(--sg-space-3);
  font: var(--sg-eyebrow);
  letter-spacing: var(--sg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--sg-text);
}

/* --- Cards: two up --------------------------------------------------------
   Doubled classes beat the parent's and the shop sheet's ul.products /
   li.product widths, floats and grid rules without !important, and the
   parent's .widget ul / .widget li (the drawer is a WC_Widget_Cart). */

.fn-empty-cart ul.products.fn-empty-cart__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sg-space-5) var(--sg-space-3);
  width: 100%;
  margin: 0 0 var(--sg-space-6);
  padding: 0;
  overflow: visible;
  border: 0;
  box-shadow: none;
  list-style: none;
}

.fn-empty-cart ul.products.fn-empty-cart__products::before,
.fn-empty-cart ul.products.fn-empty-cart__products::after {
  display: none;
}

@media (min-width: 768px) {
  .fn-empty-cart--page ul.products.fn-empty-cart__products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sg-space-6) var(--sg-space-5);
  }
}

.fn-empty-cart ul.products li.product.fn-empty-cart__item {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  position: static;
}

.fn-empty-cart ul.products li.product.fn-empty-cart__item::before,
.fn-empty-cart ul.products li.product.fn-empty-cart__item::after {
  display: none;
}

.fn-empty-cart .fn-empty-cart__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--sg-text);
  text-decoration: none;
}

.fn-empty-cart .fn-empty-cart__card .woocommerce-image__wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: #fff;
}

.fn-empty-cart .fn-empty-cart__card .woocommerce-image__wrapper img:not(.fragnatium-card-decant__vial) {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.fn-empty-cart .fn-empty-cart__card .woocommerce-card__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sg-space-2) 0 0;
}

.fn-empty-cart .fn-empty-cart__card .product__categories {
  margin: 0;
  font: var(--sg-caption);
  letter-spacing: var(--sg-track-caps-tight);
  text-transform: uppercase;
  color: var(--sg-muted);
}

.fn-empty-cart .fn-empty-cart__card .woocommerce-loop-product__title {
  margin: 0;
  font: 500 1rem/1.3 var(--sg-display);
  color: var(--sg-text);
  overflow-wrap: anywhere;
}

.fn-empty-cart .fn-empty-cart__card .price {
  margin: 0;
  font: var(--sg-body-sm);
  color: var(--sg-text);
}

.fn-empty-cart .fn-empty-cart__card:hover .woocommerce-loop-product__title,
.fn-empty-cart .fn-empty-cart__card:focus-visible .woocommerce-loop-product__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- The delivery fact and the links ------------------------------------- */

.fn-empty-cart__fact {
  margin: 0 0 var(--sg-space-4);
  font: var(--sg-body-sm);
  color: var(--sg-muted);
}

.fn-empty-cart__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-2) var(--sg-space-5);
  margin: 0;
}

.fn-empty-cart .fn-empty-cart__builder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sg-space-5);
  border: 1px solid var(--sg-ink);
  border-radius: var(--sg-radius-md);
  background: var(--sg-ink);
  color: var(--sg-on-dark);
  font: 600 0.875rem/1.2 var(--sg-body);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--sg-dur-fast) var(--sg-lux-ease);
}

.fn-empty-cart .fn-empty-cart__builder:hover {
  background: var(--sg-slate);
  color: var(--sg-on-dark);
}

.fn-empty-cart .fn-empty-cart__shop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sg-text);
  font: var(--sg-body-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The drawer is one narrow column: the set builder button takes its width. */
.fn-empty-cart--drawer .fn-empty-cart__links {
  flex-direction: column;
  align-items: stretch;
}

.fn-empty-cart--drawer .fn-empty-cart__shop {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .fn-empty-cart .fn-empty-cart__builder {
    transition: none;
  }
}

/* --- The cart page around it --------------------------------------------- */

/* "Review your decants before your next discovery." under the H1 has nothing
   to review once the cart block is showing the empty state. Only after the
   block has mounted (it drops .is-loading): before that the server markup
   holds this block for a cart that may turn out to be full. */
.fn-purchase-heading:has(+ .wp-block-woocommerce-cart:not(.is-loading) .fn-empty-cart)
  .fn-purchase-heading__intro > p:not(.fn-purchase-eyebrow) {
  display: none;
}