/*
 * Shared product-card layout.
 *
 * The archive, accessory, and upsell loops all use content-product.php. Keep
 * the content slots here so every loop gets the same vertical rhythm without
 * maintaining a separate copy of the card rules for each page context.
 */

@keyframes pei-product-card-added-to-cart {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-archive {
  --pei-product-card-title-lines: 3;
  --pei-product-card-title-line-height: 1.4;
  --pei-product-card-title-height: 4.2em;
  --pei-product-card-price-height: 70px;
  --pei-product-card-stock-height: 44px;
  --pei-product-card-action-height: 35px;
}

.products {
  align-items: stretch;
}

.products > .product-archive {
  display: flex;
  align-self: stretch;
}

.products > .product-archive,
.product-archive .product-card,
.product-archive .product-info {
  height: 100%;
}

.product-archive .product-card {
  width: 100%;
}

.product-archive .product-info > .product-link {
  display: grid !important;
  grid-template-rows: auto auto minmax(
      var(--pei-product-card-stock-height),
      1fr
    );
  flex: 1 1 auto !important;
  height: auto !important;
}

.product-archive .product-info-middle {
  display: grid;
  grid-template-rows: auto minmax(var(--pei-product-card-price-height), auto);
  flex: 0 0 auto;
  justify-content: stretch !important;
}

.product-archive .product-title {
  display: -webkit-box;
  height: var(--pei-product-card-title-height);
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--pei-black-lighter-4);
  font-size: 14px !important;
  line-height: var(--pei-product-card-title-line-height) !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pei-product-card-title-lines);
}

.product-archive:hover .product-title {
  color: var(--pei-accent-color);
  cursor: pointer;
}

/* Keep sale and regular prices on the same baseline. */
.product-archive .product-info-middle > .product-price {
  display: flex;
  min-height: var(--pei-product-card-price-height);
  flex-direction: column;
  justify-content: flex-end;
}

.product-archive .product-price .currency {
  position: relative;
  top: -0.7em !important;
  color: var(--pei-black-lighter-4);
  font-size: 1.04em !important;
}

.product-archive .deal {
  display: block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 1px 20px;
  border-radius: 15px;
  background-color: var(--pei-red);
  color: var(--pei-white);
  font-size: 0.85em !important;
  font-weight: 600;
  text-align: center;
}

.product-archive .percent-off {
  margin: 0 3px 10px 0;
  color: var(--pei-red);
  font-size: 1.6em !important;
}

.product-archive .product-price .sale-price,
.product-archive .product-price .list-price {
  margin: 0 0 10px -3.5px;
  color: var(--pei-black-lighter-4);
  font-size: 1.9em !important;
}

.product-archive .product-price .sale-price-decimals,
.product-archive .product-price .list-price-decimals {
  position: relative;
  top: -0.8em !important;
  margin: 0 0 0 -3.5px;
  color: var(--pei-black-lighter-4);
  font-size: 0.9em !important;
}

.product-archive .product-price .list-price-with-sale {
  margin: 0.1em 0 0 0.5em;
  color: var(--pei-black-lighter-4);
  font-size: 1em !important;
}

/* Stock gets its own fixed slot immediately above the action row. */
.product-archive .product-link > .product-info-bottom {
  display: flex;
  min-height: var(--pei-product-card-stock-height);
  align-items: center;
}

.product-archive .product-info .product-stock {
  width: 100%;
  margin: 10px 0;
}

.product-archive .product-info .product-stock .availability-message .leadtime,
.product-archive .product-info .product-stock .availability-message .in-stock,
.product-archive .product-info .product-stock .availability-message .obsolete,
.product-archive
  .product-info
  .product-stock
  .availability-message
  .out-of-stock,
.product-archive
  .product-info
  .product-stock
  .availability-message
  .cant-manage-stock {
  display: block;
  color: var(--pei-black-lighter-4) !important;
  font-size: 1.2em !important;
  font-weight: 600;
}

.product-archive .product-info .product-stock .admin-details {
  display: block;
  margin: 0 0 0 7px;
  color: var(--pei-white-darker-4);
  font-size: 0.8em;
}

/* Every purchase state occupies the same action row. */
.product-archive .product-info .product-cart-buttons {
  display: grid;
  width: 100%;
  min-height: var(--pei-product-card-action-height);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--pei-product-card-action-height);
  gap: 10px;
  align-items: stretch;
}

.product-archive .product-info .add_to_cart_button,
.product-archive .product-info .buy-now,
.product-archive .product-info .added_to_cart,
.product-archive .product-info .not-available {
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  height: var(--pei-product-card-action-height) !important;
  min-height: var(--pei-product-card-action-height) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 15px !important;
  background-color: var(--pei-primary-color) !important;
  box-shadow: 0 2px 5px var(--pei-black-transparent);
  color: var(--pei-black-lighter-4) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none !important;
}

.product-archive .product-info .add_to_cart_button {
  grid-column: 1;
  grid-row: 1;
}

.product-archive .product-info .add_to_cart_button:hover,
.product-archive .product-info .added_to_cart:hover {
  background-color: var(--pei-primary-color-lighter-2) !important;
}

.product-archive .product-info .pei-buy-now-form {
  display: flex;
  width: 100%;
  margin: 0 !important;
  grid-column: 2;
  grid-row: 1;
}

.product-archive .product-info .buy-now {
  flex: 1 1 auto;
  cursor: pointer;
  background-color: var(--pei-accent-color) !important;
}

.product-archive .product-info .buy-now:hover {
  background-color: var(--pei-accent-color-lighter-2) !important;
}

.product-archive .product-info .not-available {
  grid-column: 1 / -1;
  background-color: var(--pei-white-darker-2) !important;
  cursor: not-allowed;
}

.product-archive .product-info .added_to_cart {
  grid-column: 1 / -1;
  grid-row: 2;
  opacity: 0;
  animation: pei-product-card-added-to-cart 250ms
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 767px) {
  /*
   * A phone layout has one card per row, so it does not need the reserved
   * desktop slots that keep cards in multi-column grids aligned. Let each
   * section use its content height instead of leaving empty rows between it
   * and the next section.
   */
  .products > .product-archive,
  .product-archive .product-card,
  .product-archive .product-info {
    height: auto;
  }

  .product-archive .product-info > .product-link {
    grid-template-rows: repeat(3, auto);
  }

  .product-archive .product-info-middle {
    grid-template-rows: repeat(2, auto);
  }

  .product-archive .product-title {
    height: auto;
    margin: 10px 0 10px !important;
  }

  .product-archive .product-info-middle > .product-price,
  .product-archive .product-link > .product-info-bottom {
    min-height: 0;
  }

  .product-archive .product-info .product-stock {
    margin: 6px 0 10px 0;
  }

  .product-archive .product-info .product-cart-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-archive .product-info .add_to_cart_button {
    grid-column: 1;
    grid-row: 1;
  }

  .product-archive .product-info .pei-buy-now-form {
    grid-column: 1;
    grid-row: 2;
  }

  .product-archive .product-info .added_to_cart {
    grid-column: 1;
    grid-row: 3;
  }
}