/* Puella upsell. Retheme via the --pu-* custom properties from your own stylesheet
   rather than editing the rules below. */

.puella-upsell {
  --pu-surface: transparent;
  --pu-border: #e0e0e0;
  --pu-accent: #e2097e;
  --pu-accent-hover: #b50764;
  --pu-accent-text: #ffffff;
  --pu-sale: #e81616;
  --pu-success: #009901;
  --pu-qty-bg: #e6e6e6;
  --pu-qty-bg-hover: #cdcdcd;

  --pu-radius: 8px;
  --pu-image-size: 110px;
  --pu-gap: 12px;

  margin-top: 15px;
  margin-bottom: 15px;
  padding: var(--pu-gap);
  border: 1px solid var(--pu-border);
  border-radius: var(--pu-radius);
  background-color: var(--pu-surface);
}

/* Only takes effect if #product-detail-form turns out to be flex/grid; one lower than
   productRelations.css's `order: -7`, to keep the stacking DOM order already gives. */
.puella-upsell--product-detail {
  order: -8;
}

.puella-upsell__heading {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
}

.puella-upsell__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.puella-upsell__item {
  display: flex;
  align-items: center;
  gap: var(--pu-gap);
}

/* Kill any bullet/counter the theme puts on list items. */
.puella-upsell__item::before,
.puella-upsell__item::marker {
  content: none;
  display: none;
}

.puella-upsell__image-wrapper {
  flex-shrink: 0;
  width: var(--pu-image-size);
}

.puella-upsell__image {
  display: block;
  width: var(--pu-image-size);
  height: var(--pu-image-size);
  object-fit: contain;
}

.puella-upsell__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.puella-upsell__details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.puella-upsell__name {
  color: inherit;
  text-decoration: none;
}

a.puella-upsell__name:hover,
a.puella-upsell__name:focus {
  text-decoration: underline;
}

.puella-upsell__prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.puella-upsell__discount {
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background-color: var(--pu-accent);
  color: var(--pu-accent-text);
  font-size: 0.75em;
  white-space: nowrap;
}

.puella-upsell__price-standard {
  color: var(--pu-sale);
  font-size: 0.75em;
  text-decoration: line-through;
}

.puella-upsell__price-final {
  font-weight: 700;
}

.puella-upsell__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.puella-upsell__qty {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
}

.puella-upsell__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--pu-radius);
  background-color: var(--pu-qty-bg);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s;
}

.puella-upsell__qty-btn:hover,
.puella-upsell__qty-btn:focus {
  background-color: var(--pu-qty-bg-hover);
}

.puella-upsell__qty-value {
  min-width: 28px;
  text-align: center;
}

/* The button carries no theme classes, so it owns its whole look. Values are the
   redesign's btn-size-m + btn-primary, converted from its 62.5% root. */
.puella-upsell__add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--pu-radius);
  background-color: var(--pu-accent);
  color: var(--pu-accent-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.puella-upsell__add-to-cart:hover,
.puella-upsell__add-to-cart:focus {
  background-color: var(--pu-accent-hover);
  color: var(--pu-accent-text);
}

/* !important only here: a theme rule reaching the button by element or by ancestor
   (`#product-detail-form button`) would outrank the plain class above. */
.puella-upsell__add-to-cart--added,
.puella-upsell__add-to-cart--added:hover {
  background-color: var(--pu-success) !important;
  color: var(--pu-accent-text) !important;
  pointer-events: none;
}

@media (max-width: 575px) {
  .puella-upsell {
    --pu-image-size: 80px;
  }

  .puella-upsell__add-to-cart {
    width: 100%;
    margin-left: 0;
  }
}