.trending-section {
  background-color: #f8f3eb;
  background-image:
    repeating-radial-gradient(ellipse at 8% 18%, transparent 0 34px, rgb(183 164 138 / 8%) 35px 36px, transparent 37px 58px),
    repeating-radial-gradient(ellipse at 78% 65%, transparent 0 48px, rgb(183 164 138 / 7%) 49px 50px, transparent 51px 76px);
}

.trending-flourish {
  margin-top: -12px;
  color: #ff5722;
  font: 27px/1 var(--maia-heading-font, "Cormorant Garamond", serif);
  letter-spacing: 4px;
}

.products-section .product-card,
.trending-section .product-card {
  position: relative;
  min-width: 0;
  text-align: left;
}

.product-hover-actions {
  position: absolute;
  z-index: 7;
  top: 50%;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition: opacity .22s, transform .22s, visibility .22s;
}

.product-card:hover .product-hover-actions,
.product-card:focus-within .product-hover-actions {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.product-hover-actions > button,
.product-hover-actions > a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e4e0da;
  background: #fff;
  color: #171614;
  box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
  font-size: 0; /* icon comes from ::before; text stays for a11y */
  line-height: 0;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

/* Icons drawn from inline SVG masks so they never depend on font glyph coverage.
   currentColor follows the button's color (dark by default, white on hover). */
.product-hover-actions > button::before,
.product-hover-actions > a::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: center / 20px 20px no-repeat var(--maia-action-icon);
  mask: center / 20px 20px no-repeat var(--maia-action-icon);
}

.product-hover-actions > .add-to-cart {
  --maia-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.product-hover-actions > .add-to-wishlist {
  --maia-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.5 5.5 0 0 0-9.8-1.7A5.5 5.5 0 0 0 1.2 5.6c0 3.8 4 6.9 9.8 12.4 5.8-5.5 9.8-8.6 9.8-12.4z'/%3E%3C/svg%3E");
}

.product-hover-actions > .compare-product {
  --maia-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3l4 4-4 4'/%3E%3Cpath d='M20 7H4'/%3E%3Cpath d='M8 21l-4-4 4-4'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E");
}

.product-hover-actions > .quick-view {
  --maia-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.product-hover-actions > button:hover,
.product-hover-actions > a:hover,
.product-hover-actions > .saved,
.product-hover-actions > .is-active {
  border-color: #ff5722;
  background: #ff5722;
  color: #fff;
}

/* Deal Of The Day cards have a fixed 320px image plus copy, so 50% of the whole
   card would drop the popup into the text. Anchor it to the image instead. */
.deal-card .product-hover-actions {
  top: 160px;
}

.product-prices {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}

.product-prices .old-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
}

.product-prices strong {
  color: #ff5722;
  font-size: 16px;
}

.product-meta-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #929292;
}

.product-brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rating {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
}

.product-rating .rating {
  display: inline;
  letter-spacing: -1px;
}

.product-rating .review-count {
  color: #999;
  font-size: 10px;
}

.product-thumbnails {
  display: flex;
  gap: 5px;
  min-height: 39px;
  margin-top: 10px;
}

.product-thumbnails button {
  width: 39px;
  height: 39px;
  padding: 3px;
  border: 1px solid #e4e0da;
  background: #fff;
}

.product-thumbnails button.active,
.product-thumbnails button:hover {
  border-color: #ff5722;
}

.product-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 800px) {
  .product-hover-actions {
    top: 12px;
    right: 12px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-hover-actions > button,
  .product-hover-actions > a {
    width: 36px;
    height: 36px;
  }

  .product-hover-actions > button::before,
  .product-hover-actions > a::before {
    width: 18px;
    height: 18px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }
}

@media (max-width: 520px) {
  .product-hover-actions { gap: 4px; }
  .product-hover-actions > button,
  .product-hover-actions > a { width: 32px; height: 32px; }
  .product-meta-row { display: block; }
  .product-rating { display: flex; margin-top: 4px; }
  .product-thumbnails { display: none; }
}