/* =========================================================
   DFM Merchant Storefront Arrival
   ========================================================= */

/*
 * WooCommerce floats the result count left and the sorting control right.
 * Clearing both floats prevents those controls from overlapping the product
 * destination panel, which caused the crowded v0.1.7 appearance.
 */
.woocommerce .dfm-merchant-products-arrival {
  clear: both;
  width: 100%;
  scroll-margin-top: 118px;
  margin: 18px 0 26px;
  padding: 16px 20px;
  background: rgba(15, 34, 59, 0.76);
  /* Use one consistent orange border on every side of the panel. */
  border: 1px solid rgba(255, 111, 15, 0.72);
  border-radius: 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.woocommerce .dfm-merchant-products-arrival__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.woocommerce .dfm-merchant-products-arrival h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.2;
}

.woocommerce .dfm-merchant-products-arrival p {
  margin: 0;
  color: #b7c8dc;
  font-size: 15px;
  line-height: 1.45;
}

/*
 * Keep the native WooCommerce result count and sorting row above the compact
 * destination panel instead of allowing their floats to enter the panel.
 */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: 12px;
}

.woocommerce .dfm-merchant-products-arrival.is-arrival-target {
  border-color: #ff7a1a;
  box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.12), 0 12px 28px rgba(0, 0, 0, 0.2);
}

@media (max-width: 782px) {
  .woocommerce .dfm-merchant-products-arrival {
    scroll-margin-top: 92px;
    margin: 16px 0 22px;
    padding: 14px 16px;
  }

  .woocommerce .dfm-merchant-products-arrival__text {
    display: block;
  }

  .woocommerce .dfm-merchant-products-arrival h2 {
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce .dfm-merchant-products-arrival {
    transition: none;
  }
}