/* =========================================================
   MG PRODUCTO · CSS ESPECIFICO (producto.html)
   - No pisa mg.css global
   - Dark theme via html.mg-theme-dark ...
   ========================================================= */

/* -------------------------
   Layout base de la página
------------------------- */
.page-wrapper {
  min-height: 100vh;
  padding: 30px 12px;
}

/* -------------------------
   Topbar (Volver + Toggle)
------------------------- */
.mg-producto-topbar {
  margin-bottom: 1.5rem; /* similar a mb-4 */
}

/* Migración del inline style del botón Volver */
.mg-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  border-radius: 12px;
  padding: 6px 14px;
  background: #fff7f0;
  border: 1px solid #ff8a33;
  color: #d45a00;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 115, 0, 0.25);
}

.mg-btn-back:hover {
  color: #b94b00;
  background: #fff1e6;
}

.mg-btn-back .mg-btn-back-icon {
  font-size: 1.2rem;
  line-height: 1;
}

/* “Inline mode” para el toggle: usa tu .mg-theme-toggle del mg.css,
   acá solo lo adaptamos para que quede con look de botón junto a Volver. */
.mg-theme-toggle.mg-theme-toggle-inline {
  border-radius: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* -------------------------
   Card principal
------------------------- */
.card-main {
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05);
}

/* -------------------------
   Tipografía y bloques
------------------------- */
.product-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.product-subtitle {
  font-size: 0.95rem;
}

/* -------------------------
   Cantidades / botones
------------------------- */
.quantity-btn-group .btn {
  border-radius: 999px;
  padding-inline: 18px;
  font-size: 0.9rem;
}

.quantity-btn-group .btn.active {
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.3);
}

/* -------------------------
   Precio
------------------------- */
.price-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.price-value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
}

/* -------------------------
   CTA
------------------------- */
.btn-cta {
  border-radius: 999px;
  padding: 0.75rem 1.8rem;
  font-weight: 600;
  font-size: 0.98rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  box-shadow: 0 14px 30px rgba(99, 102, 241, 0.35);
}

.btn-cta:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.badge-pill {
  border-radius: 999px;
}

/* -------------------------
   Swiper / Galería
------------------------- */
.mySwiperMain {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.mySwiperMain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.mySwiperThumbs {
  height: 300px;
}

.mySwiperThumbs .swiper-slide {
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0;
}

.mySwiperThumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .mySwiperThumbs { height: 260px; }
}

@media (max-width: 767px) {
  .mySwiperThumbs {
    height: auto;
    padding-top: 10px;
  }
}

/* -------------------------
   Responsive general
------------------------- */
@media (max-width: 991.98px) {
  .page-wrapper {
    padding-top: 18px;
  }
  .price-value {
    font-size: 2rem;
  }
}

/* =========================================================
   DARK THEME OVERRIDES (solo overrides de producto)
   (Tu mg.css ya aplica base de fondo/texto/tokens). :contentReference[oaicite:2]{index=2}
   ========================================================= */

html.mg-theme-dark .card-main {
  /* refuerza look card en producto sin pelear con global */
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

html.mg-theme-dark .mg-btn-back {
  background: rgba(255, 138, 51, 0.10);
  border: 1px solid rgba(255, 138, 51, 0.40);
  color: rgba(255, 200, 160, 0.98);
  box-shadow: 0 4px 14px rgba(255, 115, 0, 0.18);
}

html.mg-theme-dark .mg-btn-back:hover {
  background: rgba(255, 138, 51, 0.14);
  color: rgba(255, 220, 190, 0.98);
}

html.mg-theme-dark .mg-theme-toggle.mg-theme-toggle-inline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}