.product-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-m);
  padding: clamp(4rem, 3.5875rem + 2.0625vw, 6.0625rem)
    clamp(0.375rem, 0.2rem + 0.875vw, 1.25rem)
    clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
  cursor: pointer;
  height: 100%;
  transition: opacity 0.2s ease;
}

.product-card--cups {
  background-color: var(--color-tag-discount);
}



.product-card--cups:hover {
    background-color: #4D2B1A;
}




.product-card__tag {
  position: absolute;
  display: inline-block;
  background-color: var(--color-tag-brown);
  color: var(--color-bg);
  font-family: var(--font-body-regular);
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  line-height: clamp(1rem, 0.8625rem + 0.6875vw, 1.688rem);
  padding: var(--space-3xs) var(--space-s);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  left: 0;
  top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
}

.product-card__tag-popular {
  background-color: var(--color-tag-popular);
}

.product-card__tag-new {
  background-color: var(--color-tag-new);
}

.product-card__tag-discount {
  background-color: var(--color-tag-discount);
}

.product-card-wrapper {
  display: block;
  width: 100%;
  text-align: center;
}

.product-card__media {
  width: auto;
  max-height: clamp(12.5rem, 10rem + 12.5vw, 25rem);
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 auto;
}

/* <picture> is injected around the image server-side (webP sources). */
.product-card__media picture {
  display: flex;
  align-content: center;
  align-items: center;
}

.product-card__img {
  max-width: 100%;
  max-height: 70%;
  object-fit: scale-down;
  display: block;
}

.product-card__body {
  text-align: center;
}

.product-card__title {
  margin-top: clamp(0rem, -0.125rem + 0.625vw, 0.625rem);
  padding-top: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading-bold);
  font-size: clamp(1.3125rem, 1.1375rem + 0.875vw, 2.1875rem);
  line-height: clamp(1.5625rem, 1.35rem + 1.0625vw, 2.625rem);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  margin-top: var(--space-2xs);
  font-family: var(--font-body-regular);
  font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  line-height: clamp(1.5625rem, 1.475rem + 0.4375vw, 2rem);
  color: var(--color-primary-soft);
  text-align: center;
  margin-bottom: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta strong {
  color: var(--color-primary);
}

.product-card--cups .product-card__title,
.product-card--cups .product-card__meta,
.product-card--cups .product-card__meta strong {
  color: var(--color-surface);
}

.product-card__price {
  font-family: var(--font-body-bold);
  font-size: clamp(1.5625rem, 1.5rem + 0.3125vw, 1.875rem);
  line-height: clamp(2.125rem, 2.0375rem + 0.4375vw, 2.5625rem);
  color: #844615;
  text-align: center;
  margin-bottom: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem);
}

.product-card__price--discounted {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  flex-wrap: wrap;
}

.product-card__price-old {
  font-family: var(--font-body-regular);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.2;
  color: rgb(132 70 21 / 30%);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.8;
}

.product-card__price-current {
  color: inherit;
}

.product-card__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: 0;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  font-family: var(--font-body-semibold);
  font-size: clamp(1rem, 0.8875rem + 0.5625vw, 1.5625rem);
  line-height: clamp(1.375rem, 1.25rem + 0.625vw, 2rem);
  margin-top: auto;
  align-self: center;
  cursor: pointer;
  align-items: stretch;
}

.product-card__order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-card--out-of-stock {
  opacity: 0.72;
}

.product-card__order--out-of-stock {
  background-color: var(--color-primary-soft);
  color: var(--color-bg);
  cursor: default;
  pointer-events: none;
}

.card-capsules .product-card__order-wrap {
  margin-top: auto;
  align-self: center;
}

.card-capsules .product-card__order-wrap .product-card__order {
  margin-top: 0;
}

.product-card__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0.625rem, 0.525rem + 0.5vw, 1.125rem);
  border-right: 2px solid var(--color-bg);
  font-family: var(--font-body-bold);
  font-size: clamp(1.5625rem, 1.375rem + 0.9375vw, 2.5rem);
  line-height: clamp(2.125rem, 1.8624rem + 1.313vw, 3.438rem);
}

.product-card__text {
  padding: clamp(0.375rem, 0.325rem + 0.25vw, 0.625rem)
    clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
}

.product-detail__order {
  font-family: var(--font-body-semibold);
  font-size: clamp(1.5625rem, 1.4375rem + 0.625vw, 2.1875rem);
  line-height: clamp(2.125rem, 1.95rem + 0.875vw, 3rem);
}

.product-detail__plus {
  padding: 0 1.5rem;
  border-right: 3px solid var(--color-bg);
  font-family: var(--font-body-bold);
  font-size: clamp(2.1875rem, 2rem + 0.9375vw, 3.125rem);
  line-height: clamp(3.0625rem, 2.825rem + 1.1875vw, 4.25rem);
}

.product-detail__text {
  padding: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem) 3.125rem;
}

.product-card--cups .product-card__order {
  background-color: var(--color-surface);
}

.product-card--cups .product-card__plus,
.product-card--cups .product-card__text {
  color: var(--color-primary);
}

.product-card--cups .product-card__plus {
  border-right: 2px solid var(--color-tag-discount);
}

@media (min-width: 768px) {
  .product-detail__text {
    padding: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem) 1.625rem;
  }
}

/* Hover motion (js/modules/productCardsHover.js): the image lifts off the
   card and this contact shadow, placed under the image by JS, softens/grows. */
.product-card {
  --product-card-shadow: rgba(60, 34, 20, 0.3);
}

.product-card--cups {
  --product-card-shadow: rgba(20, 10, 4, 0.45);
}

.product-card__media {
  position: relative;
}

.product-card__img {
  position: relative;
  z-index: 1;
}

.product-card__shadow {
  position: absolute;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--product-card-shadow), transparent);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

.product-card.is-product-hover .product-card__shadow {
  opacity: 1;
  transform: scale(1.12);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}