/* ══════════════════════════════════════════════════════════════════════════
   VENTAS GABY — LANDING PAGE PREMIUM  v2.1.0
   Autor: sustentaweb.cl  |  Mobile-First  |  Paleta: #1E2A50
 ══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* ── Paleta Ventas Gaby — color principal del logo ── */
  --vg-green:    #1E2A50;
  --vg-mid:      #263460;
  --vg-emerald:  #3b82f6;
  --vg-gold:     #c9a227;
  --vg-cream:    #f4f5f8;
  --vg-white:    #ffffff;
  --vg-text:     #1a1f35;
  --vg-muted:    #64748b;
  --vg-border:   rgba(30,42,80,.10);
  --vg-glass:    rgba(255,255,255,.92);
  --vg-sh-sm:    0 2px 12px -2px rgba(30,42,80,.07);
  --vg-sh-md:    0 12px 40px -6px rgba(30,42,80,.11);
  --vg-sh-lg:    0 24px 64px -8px rgba(30,42,80,.17);
  --vg-r:        20px;
  --vg-r-sm:     12px;
  --vg-ease:     cubic-bezier(.16,1,.3,1);
  --vg-tap:      48px;
}

/* ── Resets página ──────────────────────────────────────────────────────── */
body.single-product,
body.single-product.woocommerce {
  background: var(--vg-cream) !important;
  font-family: "Inter", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
.single-product #primary,
.single-product #main,
.single-product .site-main { max-width: 100% !important; }
.single-product .woocommerce-breadcrumb { display: none !important; }

/* ── Neutralizar colores rosa/fucsia del tema Hello Elementor / WooCommerce ── */
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--vg-green) !important;
}
.single-product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--vg-green) !important;
}
.single-product .product,
.single-product .woocommerce-product-details__short-description,
.single-product .summary {
  background: none !important;
  color: var(--vg-text) !important;
}
.single-product a { color: var(--vg-green); }
.single-product a:hover { color: var(--vg-emerald); }

/* ── Override global: evitar que Elementor coloree botones dentro de nuestra landing ── */
.vgp-landing button,
.vgp-landing button:hover,
.vgp-landing button:focus,
.vgp-landing button:active {
  background-color: transparent;
  box-shadow: none;
}
/* Excepción: botones de acción sí deben tener color propio */
.vgp-landing .single_add_to_cart_button,
.vgp-landing .single_add_to_cart_button:hover,
.vgp-landing .vgp-related-card__btn,
.vgp-landing .vgp-related-card__btn:hover {
  background-color: var(--vg-green) !important;
}

/* ── Utilidades compartidas ─────────────────────────────────────────────── */
.vgp-landing { width: 100%; overflow-x: hidden; }

.vgp-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 480px)  { .vgp-section-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .vgp-section-inner { padding: 0 2.5rem; } }

.vgp-section-header { text-align: center; margin-bottom: 2rem; }
@media (min-width: 768px) { .vgp-section-header { margin-bottom: 3rem; } }

.vgp-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--vg-emerald); margin: 0 0 .5rem;
}
.vgp-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800; color: var(--vg-green); margin: 0; line-height: 1.15;
}

/* ── Animaciones de entrada (IntersectionObserver) ─────────────────────── */
.vgp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--vg-ease), transform .65s var(--vg-ease);
}
.vgp-reveal--delay-1 { transition-delay: .12s; }
.vgp-reveal--delay-2 { transition-delay: .24s; }
.vgp-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .vgp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 1 — HERO
 ══════════════════════════════════════════════════════════════════════════ */
.vgp-hero {
  padding: 1.5rem 0 2rem;
  background: linear-gradient(160deg, #eaecf4 0%, var(--vg-cream) 55%);
}
@media (min-width: 768px)  { .vgp-hero { padding: 2.5rem 0 3rem; } }
@media (min-width: 1024px) { .vgp-hero { padding: 3.5rem 0 4rem; } }

.vgp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px; margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 480px)  { .vgp-hero__inner { padding: 0 1.5rem; } }
@media (min-width: 900px) {
  .vgp-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 3.5vw, 4rem);
    align-items: start;
    padding: 0 2.5rem;
  }
}

/* Galería */
.vgp-hero__gallery {
  background: var(--vg-glass);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--vg-r);
  padding: 1rem;
  box-shadow: var(--vg-sh-md);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 900px) {
  .vgp-hero__gallery { padding: 1.6rem; position: sticky; top: 80px; }
  .vgp-hero__gallery:hover { box-shadow: var(--vg-sh-lg); }
}
/* Imagen principal — zoom CSS suave y contenido */
.vgp-hero__gallery .woocommerce-product-gallery__image {
  overflow: hidden !important;
  border-radius: 14px !important;
  display: block !important;
}
.vgp-hero__gallery .woocommerce-product-gallery__image img {
  border-radius: 14px !important;
  width: 100% !important;
  display: block !important;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94) !important;
  transform-origin: center center !important;
  will-change: transform;
}
.vgp-hero__gallery .woocommerce-product-gallery__image:hover img {
  transform: scale(1.06) !important;
}
/* Imagen genérica (por si WC no envuelve en el div anterior) */
.vgp-hero__gallery > img,
.vgp-hero__gallery .woocommerce-main-image {
  border-radius: 14px !important;
  width: 100% !important;
}
/* Deshabilitar el cursor de lupa del zoom nativo */
.vgp-hero__gallery .zoomImg { display: none !important; }
.vgp-hero__gallery figure { margin: 0; cursor: default !important; }
.vgp-hero__gallery .flex-control-thumbs {
  display: flex !important; gap: .5rem !important;
  padding: 0 !important; margin-top: .8rem !important;
}
.vgp-hero__gallery .flex-control-thumbs li {
  list-style: none !important; flex: 1 !important; margin: 0 !important;
}
.vgp-hero__gallery .flex-control-thumbs li img {
  border-radius: 8px !important; opacity: .6 !important;
  border: 2px solid transparent !important;
  transition: opacity .3s, border-color .3s !important; cursor: pointer !important;
}
.vgp-hero__gallery .flex-control-thumbs li img:hover,
.vgp-hero__gallery .flex-control-thumbs li img.flex-active {
  opacity: 1 !important; border-color: var(--vg-green) !important;
}
.vgp-hero__gallery .onsale {
  background: var(--vg-gold) !important; color: #fff !important;
  font-family: "Outfit", sans-serif !important; font-weight: 700 !important;
  border-radius: 50px !important; padding: .25rem .8rem !important; font-size: .82rem !important;
}

/* Pitch */
.vgp-hero__pitch {
  background: var(--vg-glass);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--vg-r);
  padding: 1.4rem;
  box-shadow: var(--vg-sh-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@media (min-width: 480px)  { .vgp-hero__pitch { padding: 1.8rem; } }
@media (min-width: 900px)  { .vgp-hero__pitch { padding: clamp(1.8rem, 3vw, 2.8rem); } }

.vgp-badge {
  display: inline-block; border-radius: 50px; font-size: .7rem;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: .25rem .8rem; margin-bottom: .8rem;
}
.vgp-badge--cat { background: rgba(30,42,80,.08); color: var(--vg-green); }

.vgp-title {
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
  font-weight: 900 !important; line-height: 1.1 !important;
  color: var(--vg-green) !important; margin: 0 0 .5rem !important;
  letter-spacing: -.4px !important;
}

.vgp-rating { margin-bottom: .75rem; }
.vgp-rating .star-rating { color: var(--vg-gold) !important; }
.vgp-rating .woocommerce-review-link { font-size: .8rem !important; color: var(--vg-muted) !important; }

.vgp-price { margin: .75rem 0 1rem; }
.vgp-price .price {
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  font-weight: 800 !important; color: var(--vg-green) !important; line-height: 1.1 !important;
}
.vgp-price .price del { opacity: .55 !important; font-size: 1rem !important; }
.vgp-price .price ins { text-decoration: none !important; }

.vgp-benefits { margin: 1rem 0; }
.vgp-benefits__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--vg-emerald); margin: 0 0 .6rem;
}
.vgp-benefits__list {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: flex; flex-direction: column; gap: .5rem;
}
.vgp-benefits__list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .92rem; color: var(--vg-text); line-height: 1.5;
}
.vgp-check {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  background: rgba(59,130,246,.1); color: var(--vg-emerald);
  border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
}

.vgp-stock {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; margin: .75rem 0 1rem;
  padding: .3rem .75rem; border-radius: 50px;
}
.vgp-stock--in  { color: #16a34a; background: rgba(22,163,74,.09); }
.vgp-stock--out { color: #ef4444; background: rgba(239,68,68,.09); }
.vgp-stock__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; animation: vgpPulse 2s ease-in-out infinite;
}

/* ── CTA — carrito ──────────────────────────────────────────────────────── */
.vgp-cta .cart {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: .75rem !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
}
.vgp-cta .quantity {
  display: inline-flex !important; align-items: center !important;
  background: var(--vg-white) !important;
  border: 1.5px solid var(--vg-border) !important;
  border-radius: 50px !important; padding: .1rem .4rem !important;
  float: none !important; margin: 0 !important; min-height: var(--vg-tap) !important;
}
.vgp-cta .quantity input.qty {
  width: 44px !important; height: 44px !important; border: none !important;
  text-align: center !important; font-family: "Outfit", sans-serif !important;
  font-size: 1.05rem !important; font-weight: 700 !important;
  color: var(--vg-green) !important; background: transparent !important;
  outline: none !important; -moz-appearance: textfield !important;
}
.vgp-cta .quantity input.qty::-webkit-outer-spin-button,
.vgp-cta .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}
.vgp-qty-btn {
  border: none; background: none; cursor: pointer;
  min-width: var(--vg-tap); min-height: var(--vg-tap);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--vg-green);
  flex-shrink: 0; padding: 0; transition: background .2s ease;
}
.vgp-qty-btn:hover  { background: rgba(30,42,80,.07); }
.vgp-qty-btn:active { background: rgba(30,42,80,.14); }

.vgp-cta .single_add_to_cart_button {
  flex: 1 1 auto !important; min-height: var(--vg-tap) !important;
  background: var(--vg-green) !important; color: #fff !important;
  font-family: "Outfit", sans-serif !important; font-size: 1rem !important;
  font-weight: 800 !important; padding: .85rem 1.6rem !important;
  border-radius: 50px !important; border: none !important; cursor: pointer !important;
  letter-spacing: .15px !important; text-transform: none !important;
  float: none !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important; gap: .45rem !important;
  position: relative !important; overflow: hidden !important;
  transition: background .35s var(--vg-ease), box-shadow .35s var(--vg-ease), transform .2s var(--vg-ease) !important;
  box-shadow: 0 8px 24px -4px rgba(30,42,80,.28) !important;
  white-space: nowrap !important; -webkit-tap-highlight-color: transparent !important;
}
.vgp-cta .single_add_to_cart_button::before { content: "🛒"; font-size: .9rem; }
.vgp-cta .single_add_to_cart_button::after {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.vgp-cta .single_add_to_cart_button:hover {
  background: var(--vg-emerald) !important;
  box-shadow: 0 14px 32px -4px rgba(59,130,246,.36) !important;
  transform: translateY(-2px) !important;
}
.vgp-cta .single_add_to_cart_button:hover::after { left: 130%; transition: left .55s ease; }
.vgp-cta .single_add_to_cart_button:active { transform: translateY(0) !important; }

@media (max-width: 479px) {
  .vgp-cta .cart { flex-direction: column !important; align-items: stretch !important; }
  .vgp-cta .quantity { align-self: center !important; }
  .vgp-cta .single_add_to_cart_button { min-width: 100% !important; }
}

.vgp-trust {
  list-style: none !important; padding: 0 !important; margin: 1rem 0 0 !important;
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
}
.vgp-trust__item { font-size: .76rem; color: var(--vg-muted); font-weight: 500; display: flex; align-items: center; gap: .3rem; }

.vgp-meta { border-top: 1px solid var(--vg-border); padding-top: .9rem; margin-top: 1rem; font-size: .82rem; color: var(--vg-muted); }
.vgp-meta .product_meta { margin: 0 !important; border: none !important; }
.vgp-meta .product_meta a { color: var(--vg-green) !important; font-weight: 600 !important; }

/* ── BLOQUE 1.5 — DESCRIPCIÓN COMPLETA ── */
.vgp-description {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: var(--vg-white);
  border-top: 1px solid var(--vg-border);
}
.vgp-description__title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  font-weight: 850;
  color: var(--vg-green);
  margin: 0 0 1.5rem;
}
.vgp-description__text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--vg-text);
}
.vgp-description__text p {
  margin-bottom: 1.2rem;
}
.vgp-description__text p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 2 — FAQs
 ══════════════════════════════════════════════════════════════════════════ */
.vgp-faqs {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: var(--vg-cream);
}

.vgp-faqs__grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
  .vgp-faqs__grid { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; margin-bottom: 3.5rem; }
}

.vgp-accordion__item { border-bottom: 1px solid var(--vg-border); }

.vgp-accordion__btn {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: .75rem;
  padding: 1rem 0;
  /* ── Override crítico: Elementor/Hello Theme sobreescriben background de <button> ── */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important; cursor: pointer;
  text-align: left; font-family: "Outfit", sans-serif;
  font-size: .95rem; font-weight: 700; color: var(--vg-text);
  min-height: var(--vg-tap);
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  outline-offset: 2px;
}
.vgp-accordion__btn:hover,
.vgp-accordion__btn:focus,
.vgp-accordion__btn[aria-expanded="true"] {
  color: var(--vg-green) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.vgp-accordion__icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(30,42,80,.07);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .35s var(--vg-ease); position: relative;
}
.vgp-accordion__icon::before,
.vgp-accordion__icon::after {
  content: ""; position: absolute; background: var(--vg-green); border-radius: 2px;
}
.vgp-accordion__icon::before { width: 10px; height: 2px; }
.vgp-accordion__icon::after  { width: 2px; height: 10px; transition: opacity .2s ease; }
.vgp-accordion__btn[aria-expanded="true"] .vgp-accordion__icon {
  background: rgba(30,42,80,.12); transform: rotate(45deg);
}

.vgp-accordion__panel { overflow: hidden; max-height: 0; transition: max-height .4s var(--vg-ease); }
.vgp-accordion__panel:not([hidden]) { display: block !important; max-height: 800px; }
.vgp-accordion__panel > * { font-size: .9rem; line-height: 1.75; color: var(--vg-muted); padding-bottom: 1rem; }

.vgp-specs { }
@media (min-width: 900px) { .vgp-specs { position: sticky; top: 80px; } }

.vgp-specs__title {
  font-family: "Outfit", sans-serif; font-size: 1.05rem;
  font-weight: 700; color: var(--vg-green); margin: 0 0 .9rem;
}
.vgp-specs__table {
  width: 100%; border-collapse: collapse; font-size: .86rem;
  border-radius: var(--vg-r-sm); overflow: hidden; box-shadow: var(--vg-sh-sm);
}
.vgp-specs__table th,
.vgp-specs__table td {
  padding: .7rem .9rem; text-align: left;
  border-bottom: 1px solid var(--vg-border); vertical-align: top;
}
.vgp-specs__table th {
  background: rgba(30,42,80,.04); font-weight: 600;
  color: var(--vg-green); white-space: nowrap; width: 40%;
}
.vgp-specs__table td { color: var(--vg-muted); }
.vgp-specs__table tr:last-child th,
.vgp-specs__table tr:last-child td { border-bottom: none; }

.vgp-full-desc { margin-top: 1.2rem; }

/* CTA final */
.vgp-cta-bottom {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; text-align: center;
  padding: 2rem 1.2rem;
  background: var(--vg-white);
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-r); box-shadow: var(--vg-sh-md);
}
@media (min-width: 480px) { .vgp-cta-bottom { padding: 2.5rem 2rem; } }

.vgp-cta-bottom__copy {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 700; color: var(--vg-green); margin: 0;
}
.vgp-cta-bottom .cart {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: .75rem !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
}
.vgp-cta-bottom .quantity {
  display: inline-flex !important; align-items: center !important;
  background: var(--vg-cream) !important;
  border: 1.5px solid var(--vg-border) !important;
  border-radius: 50px !important; padding: .1rem .4rem !important;
  float: none !important; margin: 0 !important; min-height: var(--vg-tap) !important;
}
.vgp-cta-bottom .quantity input.qty {
  width: 44px !important; height: 44px !important; border: none !important;
  text-align: center !important; font-family: "Outfit", sans-serif !important;
  font-size: 1rem !important; font-weight: 700 !important;
  color: var(--vg-green) !important; background: transparent !important;
  outline: none !important; -moz-appearance: textfield !important;
}
.vgp-cta-bottom .quantity input.qty::-webkit-outer-spin-button,
.vgp-cta-bottom .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.vgp-cta-bottom .single_add_to_cart_button {
  background: var(--vg-green) !important; color: #fff !important;
  font-family: "Outfit", sans-serif !important; font-size: 1rem !important;
  font-weight: 800 !important; padding: .85rem 2rem !important;
  border-radius: 50px !important; border: none !important; cursor: pointer !important;
  min-height: var(--vg-tap) !important;
  transition: background .3s var(--vg-ease), transform .2s var(--vg-ease), box-shadow .3s var(--vg-ease) !important;
  box-shadow: 0 8px 24px -4px rgba(30,42,80,.28) !important;
  float: none !important; display: inline-flex !important;
  align-items: center !important; gap: .4rem !important;
  -webkit-tap-highlight-color: transparent !important;
}
.vgp-cta-bottom .single_add_to_cart_button::before { content: "🛒"; }
.vgp-cta-bottom .single_add_to_cart_button:hover {
  background: var(--vg-emerald) !important;
  box-shadow: 0 14px 32px -4px rgba(59,130,246,.35) !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 479px) {
  .vgp-cta-bottom .cart { flex-direction: column !important; align-items: center !important; }
  .vgp-cta-bottom .single_add_to_cart_button { min-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE 3 — PRODUCTOS RELACIONADOS
 ══════════════════════════════════════════════════════════════════════════ */
.vgp-related {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: var(--vg-white);
  border-top: 1px solid var(--vg-border);
}

.vgp-related__title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 800; color: var(--vg-green);
  margin: 0 0 1.8rem; text-align: center;
}
@media (min-width: 768px) { .vgp-related__title { text-align: left; } }

.vgp-related__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 600px)  { .vgp-related__grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
@media (min-width: 1024px) { .vgp-related__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.vgp-related-card {
  background: var(--vg-glass); border: 1px solid var(--vg-border);
  border-radius: var(--vg-r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s var(--vg-ease), box-shadow .4s var(--vg-ease);
  text-decoration: none; color: inherit;
}
@media (hover: hover) {
  .vgp-related-card:hover { transform: translateY(-6px); box-shadow: var(--vg-sh-md); text-decoration: none; color: inherit; }
  .vgp-related-card:hover .vgp-related-card__img img { transform: scale(1.04); }
}

.vgp-related-card__img { overflow: hidden; background: var(--vg-cream); aspect-ratio: 1 / 1; }
.vgp-related-card__img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: transform .5s var(--vg-ease);
}

.vgp-related-card__body { padding: .9rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
@media (min-width: 600px) { .vgp-related-card__body { padding: 1.1rem; } }

.vgp-related-card__name {
  font-family: "Outfit", sans-serif; font-size: .9rem; font-weight: 700;
  color: var(--vg-text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 600px) { .vgp-related-card__name { font-size: .97rem; } }

.vgp-related-card__price { font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 800; color: var(--vg-green); }
.vgp-related-card__price del { opacity: .5; font-size: .82rem; font-weight: 400; }
.vgp-related-card__price ins { text-decoration: none; }

.vgp-related-card__btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem; padding: .6rem 1rem;
  background: var(--vg-green); color: #fff;
  font-family: "Outfit", sans-serif; font-size: .82rem; font-weight: 700;
  border-radius: 50px; border: none; cursor: pointer; width: 100%;
  min-height: var(--vg-tap);
  transition: background .3s var(--vg-ease), transform .2s var(--vg-ease);
  -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.vgp-related-card__btn:hover { background: var(--vg-emerald) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes vgpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,42,80,.35); }
  55%       { box-shadow: 0 0 0 6px rgba(30,42,80,0); }
}
@keyframes vgpRipple {
  to { transform: scale(4); opacity: 0; }
}