.product-modal {
  width: min(calc(100% - 2rem), 34rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;

  border: 0;
  border-radius: var(--radius-lg);

  background: var(--color-surface);
  color: var(--color-text);

  box-shadow:
    0 1.5rem 4rem rgb(75 64 52 / 0.22);

  overflow: auto;
  overscroll-behavior: contain;
}

.product-modal::backdrop {
  background: rgb(40 34 28 / 0.62);
  backdrop-filter: blur(0.2rem);
}

#product-modal-content {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  padding: var(--space-4);
}

.product-modal__close {
  position: sticky;
  top: var(--space-4);
  z-index: 2;

  align-self: flex-end;
  flex: 0 0 auto;
  margin-bottom: -3.25rem;

  width: 2.5rem;
  height: 2.5rem;
  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: rgb(255 255 255 / 0.92);
  color: var(--color-primary);

  box-shadow: 0 0.2rem 0.8rem rgb(75 64 52 / 0.15);

  font-size: 1.65rem;
  line-height: 1;

  cursor: pointer;
}

.product-modal__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;

  border-radius: var(--radius-md);
}

.product-modal__title {
  margin: var(--space-1) 0 0;

  font-size: clamp(1.25rem, 5vw, 1.6rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.product-modal__prices {
  display: grid;
  gap: var(--space-1);
}

.product-modal__prices p {
  margin: 0;
}

.product-modal__prices p:first-child {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.product-modal__direct-price {
  color: var(--color-primary);

  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-modal__saving {
  font-size: 0.9rem;
  font-weight: 600;
}

.product-modal__description {
  margin: var(--space-2) 0 0;

  font-size: 0.92rem;
  line-height: 1.6;
}

.product-modal p {
  margin-block: 0;
}

.product-modal h3 {
  margin: var(--space-2) 0 0;

  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
}

.product-modal ul {
  margin: 0;
  padding-left: 1.25rem;

  font-size: 0.88rem;
  line-height: 1.6;
}

.product-modal__note {
  padding-top: var(--space-3);

  border-top: 1px solid var(--color-border);

  color: var(--color-text-muted);

  font-size: 0.78rem;
  line-height: 1.5;
}

.product-modal__whatsapp {
  width: 100%;
  margin-top: var(--space-2);
  padding: 0.9rem var(--space-4);

  border-radius: var(--radius-sm);

  background: var(--color-primary);
  color: var(--color-text-inverse);

  font-size: 0.9rem;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .product-modal__close,
  .product-modal__whatsapp {
    transition:
      transform var(--transition-fast),
      opacity var(--transition-fast);
  }

  .product-modal__close:hover,
  .product-modal__whatsapp:hover {
    opacity: 0.92;
  }

  .product-modal__close:active,
  .product-modal__whatsapp:active {
    transform: translateY(0.0625rem);
  }
}

/* Gallery */

.product-gallery {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;

  border: 0;

  background: #171411;
  color: #fff;

  overflow: hidden;
}

.product-gallery::backdrop {
  background: #171411;
}

#product-gallery-content {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  padding:
    max(1rem, env(safe-area-inset-top))
    1rem
    max(1rem, env(safe-area-inset-bottom));
}

.product-gallery__image {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 8rem);

  object-fit: contain;
}

.product-gallery__close,
.product-gallery__previous,
.product-gallery__next {
  position: absolute;
  z-index: 2;

  width: 2.75rem;
  height: 2.75rem;
  padding: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;

  background: rgb(255 255 255 / 0.92);
  color: var(--color-primary);

  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.2);

  cursor: pointer;
}

.product-gallery__close {
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;

  font-size: 1.5rem;
}

.product-gallery__previous,
.product-gallery__next {
  top: 50%;
  transform: translateY(-50%);

  font-size: 2rem;
}

.product-gallery__previous {
  left: 1rem;
}

.product-gallery__next {
  right: 1rem;
}

.product-gallery__counter {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);

  margin: 0;
  padding: 0.4rem 0.75rem;

  border-radius: 999px;

  background: rgb(0 0 0 / 0.55);
  color: #fff;

  font-size: 0.8rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .product-gallery__close,
  .product-gallery__previous,
  .product-gallery__next {
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast);
  }

  .product-gallery__close:hover,
  .product-gallery__previous:hover,
  .product-gallery__next:hover {
    opacity: 0.85;
  }
}

.product-gallery__previous svg,
.product-gallery__next svg {
  width: 1.4rem;
  height: 1.4rem;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-modal__image-button {
  width: 100%;
  padding: 0;

  border: 0;
  border-radius: var(--radius-md);

  background: transparent;

  overflow: hidden;
  cursor: zoom-in;
}

.product-modal__image-button .product-modal__image {
  border-radius: 0;
}