/* Trust badge above title */
.product__trust-badge {
  margin-bottom: 1.4rem;
}

.product__trust-badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Price row */
.nahleh-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.8rem 0 0.6rem;
}

.nahleh-price-row__current {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nh-charcoal);
  letter-spacing: -0.01em;
}

.nahleh-price-row__compare {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nh-muted);
  text-decoration: line-through;
}

.product__tax {
  margin: 0 0 1.8rem;
  color: var(--nh-muted);
}

/* Media gallery overlays */
.nh-product-gallery {
  position: relative;
}

.nahleh-wishlist-btn {
  position: absolute;
  top: 1.6rem;
  inset-inline-end: 1.6rem;
  z-index: 2;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--nh-white);
  border: none;
  box-shadow: var(--nh-shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nh-ink);
  cursor: pointer;
  padding: 0;
}

.nahleh-wishlist-btn svg {
  width: 1.7rem;
  height: 1.7rem;
}

.nahleh-wishlist-btn.is-liked {
  color: var(--nh-coral);
}

.product-form__checkout-button {
  margin-bottom: 1rem;
}

/* More breathing room above the trust-strip cards */
.product__info-container .nahleh-trust-strip {
  margin-top: 3rem;
}

/* Give the product section itself more room to breathe than the sitewide page-width. */
@media screen and (min-width: 1200px) {
  .nh-product-wide {
    max-width: 138rem;
  }
}

/* More breathing room between the media gallery and the info column. The two
   columns' widths are computed as calc(X% - var(--grid-desktop-horizontal-spacing) / 2),
   so the gap must be raised via that same variable (scoped to .product only) rather
   than via column-gap directly — otherwise gap + widths exceed 100% and the info
   column wraps below the gallery instead of sitting beside it. Both sides subtract
   half the variable and the gap adds it back in full, so total width always stays
   at exactly 100% regardless of how large this value is — safe to raise freely. */
@media screen and (min-width: 750px) {
  .product {
    --grid-desktop-horizontal-spacing: 8rem;
  }
}

@media screen and (min-width: 1200px) {
  .product {
    --grid-desktop-horizontal-spacing: 10rem;
  }
}

/* Video experiences link */
.nh-video-link-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.4rem;
}

.nh-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nh-ink);
  text-decoration: none;
}

.nh-video-link .icon-arrow {
  width: 1.2rem;
}