/* =================================================================
   Virtual Pro — Ajustes específicos de WordPress sobre main.css
   (offset del admin-bar para el header sticky, helpers de integración)
   ================================================================= */

/* El header v2 es sticky top:0 → bajarlo bajo la admin bar de WP */
.admin-bar .vp-header-v2 { top: 32px; }
@media (max-width: 782px) { .admin-bar .vp-header-v2 { top: 46px; } }

/* Mini-cart: el botón del carrito es <a> dentro del trigger; sin subrayado */
.vp-cart-trigger .btn-icon { text-decoration: none; }

/* Estado "agregado" del botón ajax de WooCommerce en las cards */
.vp-card__add.added { background: var(--success); color: #fff; }
.vp-card__add.loading { opacity: .7; pointer-events: none; }
.vp-card__add.loading::after {
  content: ""; width: 13px; height: 13px; margin-left: 2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: vp-spin .6s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }
/* Woo agrega un link "Ver carrito" tras el botón ajax — lo ocultamos en la card */
.vp-card__footer .added_to_cart { display: none; }

/* Mensajes / notices de WooCommerce sobre fondo oscuro */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; padding: 14px 18px; margin: 0 0 18px; border-radius: var(--r-md);
  background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--text);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.woocommerce-error { border-color: rgba(248,113,113,.4); }
.woocommerce-message { border-color: var(--border-cyan); }
/* El icono ::before (check/info del parent) se posiciona absolute en left:1.25rem;
   nuestro padding de arriba había tapado el gutter → quedaba encima del texto.
   Restauramos el espacio a la izquierda y centramos el icono verticalmente. */
.woocommerce-message, .woocommerce-info, .woocommerce-error { padding-left: 46px; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  left: 18px; top: 50%; transform: translateY(-50%);
}

/* =================================================================
   Offcanvas de Bootscore (carrito #offcanvas-cart + cuenta #offcanvas-user)
   skinneados al diseño v4. Bootstrap dark mode (data-bs-theme) hace el resto.
   ================================================================= */

/* Drawers en glass v4 (override del dark gris de Bootstrap) */
#offcanvas-cart, #offcanvas-user, #mobileMenu {
  --bs-offcanvas-bg: transparent;
  background: rgba(15, 26, 46, .92) !important;
  backdrop-filter: saturate(1.6) blur(28px); -webkit-backdrop-filter: saturate(1.6) blur(28px);
  border-left: 1px solid var(--border-glass-strong) !important;
  color: var(--text);
}
#offcanvas-cart .offcanvas-header,
#offcanvas-user .offcanvas-header { border-bottom: 1px solid var(--border-glass); }
#offcanvas-cart .offcanvas-title,
#offcanvas-user .offcanvas-title,
#mobileMenu .offcanvas-title { font-family: var(--font-display); font-weight: 700; color: var(--text); }

/* Badge del contador del carrito (fragment .cart-content-count de Bootscore) */
.btn-icon .cart-content { position: static; }
.btn-icon .cart-content-count {
  position: absolute; top: -5px; right: -5px; left: auto !important;
  transform: none !important;
  background: var(--cyan) !important; color: var(--bg-deep) !important;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px;
  border: 2px solid var(--bg-base); border-radius: var(--r-pill);
}
/* Subtotal junto al icono: ocultar en el botón compacto del header */
.btn-icon .cart-total { display: none !important; }

/* Mini-cart (drawer): items + footer en glass, botones v4 */
#offcanvas-cart .woocommerce-mini-cart__empty-message { color: var(--text-soft); background: transparent; border: 1px dashed var(--border-glass); }
#offcanvas-cart .cart-footer,
#offcanvas-cart .bg-body-tertiary { background: rgba(255, 255, 255, .04) !important; border-top: 1px solid var(--border-glass); }
#offcanvas-cart .woocommerce-mini-cart-item { border-color: var(--border-glass) !important; }
#offcanvas-cart .woocommerce-Price-amount { color: var(--cyan); font-family: var(--font-mono); }
#offcanvas-cart a.remove { color: var(--text-soft) !important; }
#offcanvas-cart a.remove:hover { color: var(--danger) !important; background: transparent !important; }
/* Botones View cart / Checkout del mini-cart → estilo v4 */
#offcanvas-cart .btn-primary {
  background: var(--cyan); border-color: var(--cyan); color: var(--bg-deep); font-weight: 600;
  border-radius: var(--r-pill);
}
#offcanvas-cart .btn-primary:hover { background: var(--cyan-ice); border-color: var(--cyan-ice); color: var(--bg-deep); }
#offcanvas-cart .btn-secondary {
  background: var(--bg-glass); border: 1px solid var(--border-glass-strong); color: var(--text);
  border-radius: var(--r-pill);
}
#offcanvas-cart .btn-secondary:hover { background: var(--bg-glass-hover); border-color: var(--cyan); color: var(--text); }

/* Offcanvas cuenta: form de login (ajax) con acentos v4 */
#offcanvas-user .form-control:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,189,230,.15); }
#offcanvas-user .btn-primary { background: var(--cyan); border-color: var(--cyan); color: var(--bg-deep); border-radius: var(--r-pill); font-weight: 600; }
#offcanvas-user a { color: var(--cyan); }
/* Excepción: el botón accent (cyan sólido) necesita texto oscuro, no cyan
   (si no, el ID #offcanvas-user a lo deja invisible: cyan sobre cyan). */
#offcanvas-user .btn-pill--accent { color: var(--bg-deep); }
#offcanvas-user .btn-pill--accent:hover { color: var(--bg-deep); }

/* Mobile menu: ítems del menú WP en glass v4 */
#mobileMenu .vp-mobile-menu a { display: block; padding: 12px; color: var(--text); border-radius: var(--r-sm); background: var(--bg-glass); margin-bottom: 4px; }
#mobileMenu .vp-mobile-menu a:hover { background: var(--bg-glass-hover); color: var(--cyan); }

/* ── Mini-cart item (markup Bootscore: .row > .item-image/.item-name/.remove) ── */
#offcanvas-cart .offcanvas-body { padding: 0; }
#offcanvas-cart .woocommerce-mini-cart { padding: 6px 4px; }
#offcanvas-cart .woocommerce-mini-cart-item.list-group-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--border-glass);
  padding: 16px 18px;
}
#offcanvas-cart .item-image img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-sm); background: var(--bg-deep); border: 1px solid var(--border-glass);
}
#offcanvas-cart .cart-product-title {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--text) !important;
  line-height: 1.3;
}
#offcanvas-cart .cart-product-title:hover { color: var(--cyan) !important; }
#offcanvas-cart .cart-product-excerpt { color: var(--text-soft) !important; font-size: .76rem; }
#offcanvas-cart .item-quantity { margin-top: 8px; }
#offcanvas-cart .item-quantity .quantity:not(.hidden) { display: inline-flex; align-items: center; }
#offcanvas-cart .qty_text { font-family: var(--font-mono); color: var(--text-soft); font-size: .78rem; }

/* Stepper de cantidad (WC quantity input + botones Bootscore) → pill v4 */
#offcanvas-cart .quantity {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border-glass); background: var(--bg-glass);
  border-radius: var(--r-pill); overflow: hidden; margin-top: 6px;
}
#offcanvas-cart .quantity input.qty {
  width: 40px; text-align: center; background: transparent; border: 0; color: var(--text);
  font-family: var(--font-mono); font-weight: 600; font-size: .85rem; padding: 4px 0; box-shadow: none;
}
#offcanvas-cart .quantity .minus,
#offcanvas-cart .quantity .plus,
#offcanvas-cart .quantity button {
  width: 32px; height: 34px; border: 0; background: transparent; color: var(--text-soft);
  cursor: pointer; font-size: 1rem; display: grid; place-items: center; transition: color .2s;
}
#offcanvas-cart .quantity .minus:hover,
#offcanvas-cart .quantity .plus:hover,
#offcanvas-cart .quantity button:hover { color: var(--cyan); }

#offcanvas-cart .bootscore-custom-render-total {
  font-family: var(--font-display); font-weight: 800; color: var(--text) !important;
  font-size: 1rem; margin-bottom: 12px !important;
}
#offcanvas-cart .bootscore-custom-render-total .woocommerce-Price-amount { color: var(--cyan); }
#offcanvas-cart a.remove {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--border-glass); background: var(--bg-glass);
  font-size: .85rem; line-height: 1;
}

/* Footer del mini-cart: total grande + botones full-width */
#offcanvas-cart .woocommerce-mini-cart__total {
  font-family: var(--font-display); font-weight: 800; color: var(--text);
  padding: 4px 2px 12px; font-size: 1.05rem;
}
#offcanvas-cart .woocommerce-mini-cart__total .woocommerce-Price-amount { color: var(--cyan); }
#offcanvas-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; }
#offcanvas-cart .woocommerce-mini-cart__buttons .btn { width: 100%; }

/* ── Offcanvas cuenta: navegación WC My Account estilo v4 ── */
#offcanvas-user .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
#offcanvas-user .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--bg-glass); border: 1px solid var(--border-glass);
  color: var(--text) !important; font-size: .9rem; font-weight: 500; transition: all .2s;
}
#offcanvas-user .woocommerce-MyAccount-navigation li a:hover { background: var(--bg-glass-hover); border-color: var(--border-cyan); color: var(--cyan) !important; }
#offcanvas-user .woocommerce-MyAccount-navigation li.is-active a { background: var(--cyan); border-color: var(--cyan); color: var(--bg-deep) !important; }
#offcanvas-user .my-offcanvas-account > p:first-child,
#offcanvas-user .woocommerce-MyAccount-content { color: var(--text-soft); font-size: .9rem; }
#offcanvas-user .my-offcanvas-account a { color: var(--cyan); }

/* =================================================================
   Shop — sidebar de filtros como offcanvas en mobile (offcanvas-lg).
   En ≥992px Bootstrap lo deja estático; el skin glass solo aplica abajo.
   ================================================================= */
@media (max-width: 991.98px) {
  #filtersCanvas.offcanvas-lg {
    --bs-offcanvas-bg: transparent;
    background: rgba(15, 26, 46, .96) !important;
    backdrop-filter: saturate(1.6) blur(28px); -webkit-backdrop-filter: saturate(1.6) blur(28px);
    border-right: 1px solid var(--border-glass-strong) !important;
    color: var(--text); width: min(86vw, 340px);
  }
  #filtersCanvas .offcanvas-header { border-bottom: 1px solid var(--border-glass); }
  #filtersCanvas .offcanvas-title { font-family: var(--font-display); font-weight: 700; color: var(--text); }
}
/* El sort y la grilla en vista lista */
.vp-grid--list { grid-template-columns: 1fr !important; }
.vp-grid--list .vp-card { flex-direction: row; }

/* =================================================================
   Logo — usamos la variante dark (virtualpro-fc-dark.svg): ícono a color
   + wordmark blanco. Anulamos el filtro brightness(0)/invert(1) de main.css
   que lo aplanaba a una silueta blanca (perdía el detalle del ícono).
   ================================================================= */
.vp-header .vp-logo img,
.vp-header-v2 .vp-logo img,
.vp-footer-v2 .vp-footer__logo { filter: none !important; }

/* =================================================================
   Hero slider — título: bajamos el tamaño y evitamos que palabras
   largas (PERFORMANCE, COMPROMISOS) se corten a la mitad.
   ================================================================= */
.vp-hero-slide__title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
@media (max-width: 575.98px) {
  .vp-hero-slide__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* =================================================================
   Single product — boxes nuevos (transferencia/efectivo, cuotas,
   config, comprar ahora, pago seguro, ayuda). Estética dark glass.
   ================================================================= */
.vp-pricing { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }

/* Descuento por transferencia/efectivo */
.vp-discount-box {
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(16,185,129,.03));
  border: 1px solid rgba(16,185,129,.30); border-radius: var(--r-lg); padding: 18px 20px;
}
.vp-discount-box__head { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 4px; font-weight: 700; color: var(--text); font-size: .95rem; line-height: 1.35; }
.vp-discount-box__head i { color: var(--success); font-size: 1.15rem; flex: none; margin-top: 1px; }
.vp-discount-box__note { margin: 0 0 12px; font-size: .8rem; color: var(--text-mute); font-style: italic; }
.vp-discount-box__prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vp-discount-box__old { font-family: var(--font-mono); font-size: .95rem; color: var(--text-mute); text-decoration: line-through; }
.vp-discount-box__now { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; color: var(--success); }

/* Cuotas */
.vp-installments {
  background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--r-lg);
  padding: 18px 20px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.vp-installments__hero { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-glass); }
.vp-installments__hero strong { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; color: var(--cyan); line-height: 1; }
.vp-installments__hero span { font-size: .9rem; color: var(--text-soft); }
.vp-installments__hero b { color: var(--text); }
.vp-installments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vp-installments__list li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text-soft); }
.vp-installments__list li i { color: var(--cyan); font-size: 1rem; }
.vp-installments__list li strong { color: var(--text); }
.vp-installments__list li span { margin-left: auto; font-family: var(--font-mono); font-weight: 600; color: var(--cyan); }

/* "Elegí tu configuración" */
.vp-config-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin: 6px 0 14px; }
.vp-config-title i { color: var(--cyan); }

/* Comprar ahora */
.vp-buy-now { width: 100%; justify-content: center; margin-top: 10px; background: var(--success); color: #04140d; border: 1px solid var(--success); font-weight: 700; }
.vp-buy-now:hover { background: #34d39e; border-color: #34d39e; color: #04140d; box-shadow: 0 8px 24px rgba(16,185,129,.3); transform: translateY(-2px); }
.vp-buy-now.disabled, .vp-buy-now:disabled { opacity: .45; pointer-events: none; box-shadow: none; transform: none; }

/* Pago seguro + Ayuda */
.vp-trust-box, .vp-help-box {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-top: 12px;
  background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--r-md);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.vp-trust-box > i, .vp-help-box > i { font-size: 1.6rem; color: var(--cyan); flex: none; }
.vp-trust-box > i { color: var(--success); }
.vp-trust-box strong, .vp-help-box strong { display: block; color: var(--text); font-size: .92rem; }
.vp-trust-box span, .vp-help-box span { display: block; color: var(--text-soft); font-size: .82rem; }
.vp-help-box__text { flex: 1; }
.vp-help-box__actions { display: flex; gap: 8px; }
.vp-help-box__actions a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-glass-hover); border: 1px solid var(--border-glass); color: var(--text); transition: all .2s;
}
.vp-help-box__actions a:hover { border-color: var(--border-cyan); color: var(--cyan); }

/* =================================================================
   Footer "Aceptamos:" — pills dinámicos de los gateways activos del
   checkout (ícono + título). Restilamos el .vp-pay-pill del mockup
   (que era blanco/ancho fijo) a glass oscuro con ancho automático.
   ================================================================= */
.vp-footer-v2__pay-icons .vp-pay-pill {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; min-width: 0; height: auto; padding: 7px 13px;
  background: var(--bg-glass); color: var(--text-soft);
  border: 1px solid var(--border-glass); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-weight: 500; font-size: .76rem; letter-spacing: .02em;
}
.vp-footer-v2__pay-icons .vp-pay-pill i { color: var(--cyan); font-size: .95rem; }

/* =================================================================
   Mi cuenta — vista logueada-OUT (form-login.php): card de auth.
   Centrada; en doble columna si el registro está habilitado.
   ================================================================= */
.vp-auth { max-width: 460px; margin: 8px auto 0; }
.vp-auth--wide { max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 767.98px) { .vp-auth--wide { grid-template-columns: 1fr; } }
.vp-auth__card { padding: 32px; }
.vp-auth__card .h-section { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.vp-auth__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -2px 0 18px; font-size: .86rem; flex-wrap: wrap; }
.vp-auth__row a { color: var(--cyan); }
.vp-auth__row a:hover { color: var(--cyan-ice); }
.vp-auth .vp-check { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--text-soft); font-family: var(--font-body); font-size: .86rem; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: pointer; }
.vp-auth .vp-check input { width: auto; margin: 0; }

/* Recuperar / restablecer contraseña (form-lost-password / reset, sin override
   de template): heredan el look de campos del theme aunque estén fuera de .vp-account__main. */
.woocommerce-ResetPassword .form-row,
.woocommerce-LostPassword + form .form-row { margin-bottom: 14px; }
.woocommerce-ResetPassword label,
.woocommerce-ResetPassword .woocommerce-Input,
form.lost_reset_password .woocommerce-Input { color: var(--text); }
.woocommerce-ResetPassword input.input-text,
form.lost_reset_password input.input-text {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-glass);
  border-radius: var(--r-sm); background: var(--bg-glass); color: var(--text); outline: none;
}
.woocommerce-ResetPassword input:focus,
form.lost_reset_password input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43,189,230,.15); }

/* =================================================================
   Ocultar el título por defecto de page.php (the_title en .entry-header)
   en las páginas WC: cart/checkout/account/order-received ya traen su
   propio encabezado (breadcrumb + "Carrito"/"Hola, X"/"¡Gracias!").
   ================================================================= */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-account .entry-header,
.woocommerce-order-received .entry-header { display: none; }

/* =================================================================
   Asistente AI — ícono de marca (isotipo Virtual Pro) en FAB + avatar.
   El isotipo ya es un "coin" circular (navy + líneas cyan); fondo navy
   para que el margen transparente del SVG se funda con el círculo.
   Sin overflow:hidden en el FAB: el pulse (scale 1.6) se anima por fuera.
   ================================================================= */
.vp-asst__fab { background: radial-gradient(120% 120% at 50% 30%, #1c4258 0%, #0b1f30 72%); }
.vp-asst__fab-icon .vp-asst__brand-ico { width: 60px; height: 60px; display: block; border-radius: 50%; }
.vp-asst__avatar { background: radial-gradient(120% 120% at 50% 30%, #1c4258 0%, #0b1f30 72%); }
.vp-asst__avatar .vp-asst__brand-ico { width: 38px; height: 38px; display: block; border-radius: 50%; }

/* =================================================================
   Header móvil — íconos pegados al borde derecho + botón de búsqueda
   que despliega la barra inline (.vp-search-inline) como fila full-width.
   ================================================================= */
@media (max-width: 991.98px) {
	/* La fila ES el .container-vp; recortamos padding lateral para correr
	   logo e íconos hacia los bordes ("más al costado"). */
	.vp-header-v2__row { padding-left: 16px; padding-right: 16px; gap: 12px; }

	/* Barra de búsqueda desplegable (toggle desde .vp-search-toggle). */
	.vp-header-v2.is-search-open .vp-search-inline {
		display: block;
		position: absolute;
		left: 0; right: 0; top: 100%;
		padding: 12px 16px;
		background: rgba(15, 26, 46, .97);
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--border-glass);
		box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
		z-index: 60;
	}
	.vp-header-v2.is-search-open .vp-search-inline input { width: 100%; }
	.vp-header-v2.is-search-open .vp-search-inline__hint { display: none; }
	.vp-search-toggle[aria-expanded="true"] { border-color: var(--cyan); color: var(--cyan); }
}

/* =================================================================
   Single product — qty stepper centrado en móvil (antes flex-start).
   ================================================================= */
@media (max-width: 767.98px) {
	.vp-actions .vp-qty { align-self: center; }
}

/* =================================================================
   Reviews — formulario (comment_form de WC) estilado al diseño v4.
   El override single-product-reviews.php deja solo el form; acá lo
   skinneamos: campos dark-glass + botón "Enviar" como pill accent.
   ================================================================= */
.vp-reviews .comment-reply-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0 0 18px; display: block; }
.vp-reviews .comment-form p { margin: 0 0 16px; }
.vp-reviews .comment-form label { display: block; font-size: .85rem; color: var(--text-soft); margin-bottom: 6px; font-weight: 600; }
.vp-reviews .comment-form .required { color: var(--cyan); }
.vp-reviews .comment-form input[type="text"],
.vp-reviews .comment-form input[type="email"],
.vp-reviews .comment-form textarea {
	width: 100%;
	background: var(--bg-glass);
	border: 1px solid var(--border-glass);
	border-radius: var(--r-md);
	color: var(--text);
	padding: 12px 14px;
	font-size: .92rem;
	outline: none;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: border-color .2s, box-shadow .2s;
}
.vp-reviews .comment-form textarea { min-height: 130px; resize: vertical; }
.vp-reviews .comment-form input:focus,
.vp-reviews .comment-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(43, 189, 230, .12); }
.vp-reviews .comment-form ::placeholder { color: var(--text-mute); }

/* Estrellas de puntuación (p.stars que genera WC al reemplazar el select) */
.vp-reviews .comment-form-rating { margin-bottom: 16px; }
.vp-reviews p.stars a { color: var(--text-mute); }
.vp-reviews p.stars a:hover,
.vp-reviews p.stars:hover a,
.vp-reviews p.stars.selected a.active,
.vp-reviews p.stars.selected a:not(.active) { color: #f5b301; }

/* Botón Enviar → pill accent (reemplaza el botón azul por defecto) */
.vp-reviews .form-submit { margin: 8px 0 0; }
.vp-reviews .form-submit input[type="submit"] {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	background: linear-gradient(135deg, var(--cyan), #1a98c4);
	border: 0; color: var(--bg-deep); font-weight: 700; font-size: .92rem;
	padding: 12px 30px; border-radius: var(--r-pill);
	box-shadow: 0 4px 18px rgba(43, 189, 230, .35);
	transition: transform .2s, box-shadow .2s;
}
.vp-reviews .form-submit input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(43, 189, 230, .5); }

.vp-reviews .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; color: var(--text-mute); }
.vp-reviews .comment-form-cookies-consent input { width: auto; }
.vp-reviews .must-log-in,
.vp-reviews .woocommerce-verification-required { color: var(--text-mute); font-size: .9rem; }
.vp-reviews .must-log-in a { color: var(--cyan); }

/* =================================================================
   Single product — lista de beneficios como recuadro (card glass),
   con más respiro entre ítems (antes era una lista "pegada").
   ================================================================= */
.vp-benefits {
	margin-top: 22px;
	padding: 14px 20px;
	background: var(--bg-glass);
	border: 1px solid var(--border-glass);
	border-radius: var(--r-md);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	gap: 0 28px;
}
.vp-benefits li { padding: 11px 0; font-size: .88rem; }
@media (max-width: 575.98px) {
	.vp-benefits { padding: 6px 18px; }
	.vp-benefits li { padding: 13px 0; }
}

/* =================================================================
   Section head — cuando el header envuelve en móvil (título + botón
   "Ver más"), damos row-gap para que el botón no quede pegado al
   título y los márgenes queden parejos con el resto.
   ================================================================= */
.section-head { gap: 12px 16px; }