/* ==========================================================
   ModuCommerce — Single Product
   ========================================================== */

form.cart {
  display: none !important;
}

.mc-sp {
  padding: 2.5rem 1rem 3rem;
  background: var(--mc-bg, #ffffff);
  color: var(--mc-text, #111111);
  font-family: var(--mc-font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Grid principal */
.mc-sp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Breadcrumb */
.mc-sp__breadcrumb {
  font-size: 0.85rem;
  color: var(--mc-text-weak, #666666);
  margin-bottom: 1rem;
}
.mc-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mc-bc a { color: inherit; text-decoration: none; }
.mc-bc a:hover { text-decoration: underline; }

/* ===== Galeria ===== */
.mc-sp__gallery {
  background: var(--mc-surface, #ffffff);
  border-radius: var(--mc-radius, 16px);
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.mc-sp__viewer {
  position: relative;
  border-radius: calc(var(--mc-radius, 16px) - 4px);
  background: var(--mc-layer, #f6f7f9);
  padding: 1rem;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagem principal — PNGs inteiros e visíveis */
.mc-sp__mainimg {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  display: block;
  background: transparent; /* transparência ok */
  pointer-events: none;     /* não bloqueia clique nas setas */
  z-index: 1;
}

/* Setas da galeria (corrigidas e centralizadas) */
.mc-sp__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  width: 40px;              /* hit area maior */
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;      /* centro real do ícone */
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 50;              /* acima da imagem/overlays */
  pointer-events: auto;     /* garante o clique nas setas */
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  opacity: 0.96;
  box-shadow: 0 2px 8px rgba(2, 6, 23, .18);
}
.mc-sp__nav--prev { left: 0.75rem; }
.mc-sp__nav--next { right: 0.75rem; }
.mc-sp__nav:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.55), 0 8px 18px rgba(15, 23, 42, 0.45);
}
.mc-sp__nav:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(252,163,20,.55);
}
.mc-sp__nav:active {
  transform: translateY(-50%) scale(0.97);
}

/* Thumbs */
.mc-sp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

/* Exibir apenas 4 por padrão */
.mc-sp__thumbs.is-collapsed .mc-sp__thumb:nth-child(n+5) { display: none; }
.mc-sp__thumbs.is-expanded .mc-sp__thumb { display: inline-flex; }

/* Botões de thumb */
.mc-sp__thumb {
  border: 1px solid var(--mc-border, #e6e8ec);
  border-radius: 12px;
  padding: 0.25rem;
  background: var(--mc-layer, #f6f7f9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, background .16s ease;
}
.mc-sp__thumbimg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* garante PNG inteiro */
  display: block;
}
.mc-sp__thumb.is-active {
  border-color: var(--mc-accent, #fca314);
  box-shadow: 0 0 0 1px rgba(252, 163, 20, 0.50);
  background: #fff;
  transform: translateY(-1px);
}

/* Botão "Ver todos" */
.mc-sp__morethumbs {
  margin-top: 0.35rem;
  border: none;
  background: transparent;
  color: var(--mc-primary, #0f172a);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0;
}

/* ===== Conteúdo ===== */
.mc-sp__content { display: flex; flex-direction: column; gap: 1.25rem; }

.mc-sp__title { font-size: 1.5rem; font-weight: 600; margin: 0; }

.mc-sp__price { font-size: 1.35rem; font-weight: 600; color: var(--mc-primary, #0f172a); }
.mc-sp__price del { font-size: 0.9rem; color: var(--mc-text-weak, #666666); }
.mc-sp__price ins { text-decoration: none; }

/* Short description */
.mc-sp__excerpt { font-size: 0.95rem; color: var(--mc-text-weak, #666666); }

/* Descrição longa */
.mc-sp__desc { margin-top: 1.25rem; font-size: 0.95rem; line-height: 1.55; color: var(--mc-text, #111111); }

/* ===== Quantidade custom ===== */
.mc-qty {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid var(--mc-border, #e6e8ec);
  overflow: hidden;
  background: var(--mc-layer, #f6f7f9);
  margin-top: 0.75rem;
  width: max-content;
}
.mc-qty__btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.7rem;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.mc-qty__btn:hover { background: rgba(15, 23, 42, 0.06); }
.mc-qty .qty {
  border: none;
  width: 44px;
  text-align: center;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mc-text, #111111);
}

/* ===== CTAs ===== */
.mc-sp__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.mc-btn {
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.mc-btn--accent { background: var(--mc-accent, #fca314); color: var(--mc-accent-ink, #111111); border-color: var(--mc-accent, #fca314); }
.mc-btn--accent:hover { filter: brightness(1.05); }
.mc-btn--ghost { background: transparent; color: var(--mc-primary, #0f172a); border-color: var(--mc-border, #e6e8ec); }
.mc-btn--ghost:hover { background: rgba(15, 23, 42, 0.04); }

/* ===== Produtos relacionados ===== */
.mc-sp__related { margin-top: 3rem; }
.mc-sp__h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.mc-sp__relatedgrid ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.mc-sp__relatedgrid ul.products li.product {
  list-style: none;
  background: var(--mc-surface, #ffffff);
  border-radius: var(--mc-radius, 16px);
  padding: 0.75rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

/* ===== Responsivo ===== */
@media (max-width: 960px) {
  .mc-sp__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mc-sp { padding-inline: 0.75rem; }
  .mc-sp__viewer { padding: 0.5rem; min-height: 220px; }
  .mc-sp__thumb { width: 72px; height: 72px; }
  .mc-sp__relatedgrid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-sp__title { font-size: 1.25rem; }
}