/* =========================================================
   PRODUTOS RELACIONADOS — secção reutilizável
   Aparece em: página de produto, carrinho, checkout
   ========================================================= */

.pt-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #eee;
  width: 100%;
  box-sizing: border-box;
}

.pt-related__title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 20px;
  padding: 0;
  line-height: 1.3;
}

.pt-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}

/* tablet */
@media (max-width: 768px) {
  .pt-related__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* mobile */
@media (max-width: 480px) {
  .pt-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* =========================================================
   OVERRIDE — garantir que .pt-actions funciona fora da loja
   (shop.css não é carregado nestas páginas)
   ========================================================= */

.pt-related .pt-actions {
  display: flex !important;
  gap: 8px !important;
}

.pt-related .pt-actions .pt-qty {
  flex: none !important;
  width: 102px !important;
  display: grid !important;
  grid-template-columns: 28px 1fr 28px !important;
  height: 40px !important;
  box-sizing: border-box !important;
}

.pt-related .pt-actions .pt-qty .qty {
  width: 100% !important;
  min-width: 0 !important;
  -moz-appearance: textfield !important;
}

.pt-related .pt-actions .pt-qty input[type="number"]::-webkit-inner-spin-button,
.pt-related .pt-actions .pt-qty input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.pt-related .pt-actions .button.pt-add,
.pt-related .pt-actions .button.pt-view,
.pt-related .pt-actions .pt-out {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   WISHLIST BTN — dentro de related
   ========================================================= */

.pt-related .pt-wl-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  transition: color .2s, background .2s;
  z-index: 2;
}

.pt-related .pt-wl-btn:hover,
.pt-related .pt-wl-btn.is-wishlisted {
  color: #C43B46;
  background: #fff;
}