/* Sbalott Product Page Pro — estilos */

/* Solicitado explícitamente: reduce el tamaño de letra de los botones
   genéricos de WooCommerce (.button) — por ejemplo, "Añadir al carrito"
   en la tienda/categorías. Ojo: esta regla es global a cualquier elemento
   con la clase .button del sitio, no solo a los de este plugin. */
.button {
	font-size: 10px !important;
}

/* ---------- Coloreado de los botones nativos en productos variables ----------
   Los productos con Color/Talla (variables) no pasan por el bloque rediseñado
   de este plugin (para no romper el selector de atributos), así que sus
   botones son los del tema o los que agregue el plugin de swatches/buy-now.
   Esta regla colorea el "Añadir al carrito" nativo de WooCommerce. Si el
   botón "Comprar ahora" de tu tema no cambia de color, es porque usa una
   clase que no es ninguna de las de abajo — inspecciónalo (clic derecho →
   Inspeccionar) y pásame la clase exacta para apuntarla con precisión. */
.single_add_to_cart_button.single_add_to_cart_button,
a.single_add_to_cart_button,
button.single_add_to_cart_button {
	background: #232f3e !important;
	border-color: #232f3e !important;
	color: #fff !important;
}
.buy_now_button,
.wc-buy-now,
.single-product a.buy-now,
.single-product .buy-now-button {
	background: linear-gradient(90deg, #ff6b1a, #ff8a3d) !important;
	border-color: #ff6b1a !important;
	color: #fff !important;
}

/* Mientras no se elige Color/Talla, WooCommerce marca el botón como
   "disabled" y muchos temas le bajan la opacidad o le meten un filtro en
   gris — por eso se veían apagados/grises en vez de azul oscuro/naranja.
   Se fuerza el color real también en ese estado. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed,
a.single_add_to_cart_button.disabled,
button.single_add_to_cart_button.disabled,
button.single_add_to_cart_button[disabled] {
	opacity: 1 !important;
	filter: none !important;
	background: #232f3e !important;
	border-color: #232f3e !important;
	color: #fff !important;
}
.buy_now_button.disabled,
.wc-buy-now.disabled,
.single-product .buy-now-button.disabled,
.single-product .buy-now-button[disabled] {
	opacity: 1 !important;
	filter: none !important;
	background: linear-gradient(90deg, #ff6b1a, #ff8a3d) !important;
	border-color: #ff6b1a !important;
	color: #fff !important;
}

/* Ajuste de espaciado/tamaño de letra en las opciones de atributo del
   plugin de swatches (Product Variations & Swatches for WooCommerce). */
.vi-wpvs-variation-wrap.vi-wpvs-variation-wrap-vi_wpvs_button_design .vi-wpvs-option-wrap {
	padding: 0px 0px !important;
	font-size: 13px;
}

:root {
	--spp-orange: #ff6b1a;
	--spp-orange-dark: #e2570f;
	--spp-orange-light: #fff1e8;
	--spp-green: #1a9c4a;
	--spp-text: #222;
	--spp-muted: #6b6b6b;
	--spp-border: #ececec;
	--spp-radius: 14px;
}

/* ---------- Bloque de oferta / botones ---------- */
.spp-offer-box {
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius);
	padding: 18px 20px;
	margin: 16px 0;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.spp-flash-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(90deg, #ffb020, var(--spp-orange));
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.spp-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.spp-discount-pct {
	background: var(--spp-orange);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	padding: 3px 9px;
	border-radius: 6px;
}

.spp-price-current {
	font-size: 30px;
	font-weight: 800;
	color: var(--spp-orange-dark);
}

.spp-price-old {
	font-size: 16px;
	color: var(--spp-muted);
	text-decoration: line-through;
}

.spp-low-stock {
	color: var(--spp-orange-dark);
	background: var(--spp-orange-light);
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 12px;
}

.spp-qty-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.spp-qty-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--spp-muted);
}
.spp-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--spp-border);
	border-radius: 8px;
	overflow: hidden;
}
.spp-qty-stepper button {
	border: none;
	background: #f7f7f7;
	width: 28px;
	height: 28px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	color: var(--spp-text);
}
.spp-qty-stepper button:hover { background: #efefef; }
.spp-qty-input {
	width: 40px;
	height: 28px;
	border: none;
	border-left: 1px solid var(--spp-border);
	border-right: 1px solid var(--spp-border);
	text-align: center;
	font-size: 13.5px;
	-moz-appearance: textfield;
}
.spp-qty-input::-webkit-outer-spin-button,
.spp-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.spp-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.spp-btn {
	flex: 1 1 160px;
	border: none;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .1s ease, opacity .2s ease;
}
.spp-btn.spp-btn-sm {
	flex: 1 1 140px;
	padding: 9px 14px;
	font-size: 13.5px;
	max-width: 220px;
}
.spp-btn:active { transform: scale(0.98); }
.spp-btn:disabled { opacity: .6; cursor: not-allowed; }

.spp-btn-cart {
	background: #232f3e;
	color: #fff;
	border: 2px solid #232f3e;
}
.spp-btn-cart:hover { background: #37475a; border-color: #37475a; }

.spp-btn-buynow {
	background: linear-gradient(90deg, var(--spp-orange), #ff8a3d);
	color: #fff;
	box-shadow: 0 4px 14px rgba(255,107,26,0.35);
}
.spp-btn-buynow:hover { filter: brightness(1.05); }

.spp-actions-feedback {
	margin-top: 10px;
	font-size: 14px;
	min-height: 18px;
}
.spp-actions-feedback.success { color: var(--spp-green); }
.spp-actions-feedback.error { color: #c0392b; }

/* ---------- Envío / SBLTT / seguridad ---------- */
.spp-trust-box {
	border-top: 1px dashed var(--spp-border);
	margin-top: 14px;
	padding-top: 14px;
}
.spp-trust-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var(--spp-text);
	padding: 6px 0;
}
.spp-trust-row .spp-icon { font-size: 17px; width: 22px; text-align: center; }
.spp-trust-row .spp-icon.spp-stars { width: auto; color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.spp-shipping { color: var(--spp-green); font-weight: 600; }
.spp-sbltt-amount { color: var(--spp-muted); font-weight: 500; }
.spp-vendor-rating { color: var(--spp-text); }

.spp-recent-order {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--spp-text);
	background: #f7f9f7;
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 10px;
}

.spp-ships-from {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--spp-text);
}

/* ---------- Reseñas ---------- */
.spp-reviews-wrap { margin-top: 10px; }

.spp-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.spp-pill {
	border: 1px solid var(--spp-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--spp-text);
	background: #fafafa;
}

.spp-review-item {
	border-bottom: 1px solid var(--spp-border);
	padding: 16px 0;
}
.spp-review-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
}
.spp-review-date { color: var(--spp-muted); font-size: 13px; }
.spp-review-stars {
	color: #f5a623;
	font-size: 16px;
	margin-bottom: 6px;
}
.spp-review-verdict {
	color: var(--spp-orange-dark);
	font-weight: 700;
	font-size: 13px;
	margin-left: 10px;
}
.spp-review-text { color: var(--spp-text); line-height: 1.5; margin: 0; }

.spp-reviews-summary {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: var(--spp-orange-light);
	border-radius: 10px;
	padding: 12px 16px;
	margin-top: 16px;
	font-size: 14.5px;
	color: var(--spp-text);
}

/* ---------- Explora tus intereses ---------- */
.spp-explore-section {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--spp-border);
}
.spp-explore-title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 16px;
}
.spp-explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.spp-explore-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--spp-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease;
}
.spp-explore-card:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.spp-explore-thumb { position: relative; }
.spp-explore-thumb img { width: 100%; height: auto; display: block; }
.spp-explore-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--spp-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
}
.spp-explore-name {
	font-size: 13.5px;
	padding: 8px 10px 2px;
	line-height: 1.3;
	min-height: 34px;
}
.spp-explore-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--spp-orange-dark);
	padding: 0 10px 10px;
}

/* ---------- Guía de tallas (ropa/calzado) ---------- */
.spp-size-guide {
	margin: 10px 0 16px;
}
.spp-size-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: var(--spp-orange-dark);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}
.spp-size-toggle:hover { color: var(--spp-orange); }
.spp-size-panel {
	margin-top: 10px;
	border: 1px solid var(--spp-border);
	border-radius: 10px;
	padding: 12px 14px;
	background: #fafafa;
	max-width: 420px;
}
.spp-size-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}
.spp-size-table th,
.spp-size-table td {
	padding: 6px 8px;
	text-align: center;
	border-bottom: 1px solid var(--spp-border);
}
.spp-size-table th { color: var(--spp-muted); font-weight: 700; }
.spp-size-note {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--spp-muted);
}

/* ---------- Bloque de oferta dentro de la barra lateral ---------- */
.spp-offer-box,
.spp-offer-box.spp-in-sidebar { background: #fff !important; }
.spp-offer-box.spp-in-sidebar,
.spp-offer-box.spp-solid-bar { position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; z-index: 2; isolation: isolate; }
.spp-offer-box.spp-in-sidebar {
	padding: 14px;
	margin: 0 0 22px;
	max-width: 100%;
	box-sizing: border-box;
}
.spp-in-sidebar .spp-flash-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 10px; }
.spp-in-sidebar .spp-price-row { gap: 6px 8px; }
.spp-in-sidebar .spp-price-current { font-size: 24px; }
.spp-in-sidebar .spp-price-old { font-size: 14px; }
.spp-in-sidebar .spp-discount-pct { font-size: 12px; padding: 2px 7px; }
.spp-in-sidebar .spp-qty-row { flex-wrap: wrap; }
.spp-in-sidebar .spp-actions { flex-direction: column; gap: 8px; }
.spp-in-sidebar .spp-btn,
.spp-in-sidebar .spp-btn.spp-btn-sm { flex: 1 1 auto; width: 100%; max-width: none; }

@media (max-width: 480px) {
	.spp-price-current { font-size: 24px; }
	.spp-actions { flex-direction: column; }

	/* Barra fija abajo, estilo app de compras: precio + botones siempre
	   visibles mientras se hace scroll en el celular. */
	/* (Antes quedaba pegada abajo al hacer scroll; ahora se queda en su sitio.) */
	.spp-offer-box {
		position: relative;
		bottom: auto;
		z-index: 2;
	}
}

/* ---------- Banner "Instalar app" (PWA) ---------- */
.spp-pwa-install {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--spp-border);
	border-radius: 14px;
	padding: 10px 12px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.spp-pwa-install-icon { font-size: 22px; }
.spp-pwa-install-text {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--spp-text);
}
#spp-pwa-install-btn {
	background: var(--spp-orange);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
#spp-pwa-install-close {
	background: none;
	border: none;
	color: var(--spp-muted);
	font-size: 15px;
	cursor: pointer;
	padding: 4px;
}
@media (min-width: 900px) {
	.spp-pwa-install { max-width: 360px; left: auto; right: 24px; bottom: 24px; }
}

/* ---------- Widget de sidebar por ubicación (shortcode spp_geo_sidebar) ---------- */
.spp-geo-widget {
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius);
	overflow: hidden;
	background: #fff;
}
.spp-geo-block + .spp-geo-block {
	border-top: 1px solid var(--spp-border);
}
.spp-geo-block-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px 4px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--spp-text);
}
.spp-geo-block-header .spp-icon { font-size: 15px; }
.spp-geo-location {
	font-size: 11.5px;
	color: var(--spp-muted);
	padding: 0 14px 8px;
}
.spp-geo-items {
	display: flex;
	flex-direction: column;
}
.spp-geo-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	text-decoration: none;
	color: inherit;
}
.spp-geo-item:hover { background: #fafafa; }
.spp-geo-item img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}
.spp-geo-item-info { min-width: 0; }
.spp-geo-item-name {
	font-size: 12.5px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.spp-geo-item-price {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--spp-orange-dark);
	margin-top: 2px;
}
.spp-geo-empty {
	padding: 10px 14px 14px;
	font-size: 12.5px;
	color: var(--spp-muted);
}

/* =========================================================
   Ventana emergente "Nuevos productos" (estilo Temu)
   ========================================================= */
.spp-newarr{
	position: fixed; right: 16px; bottom: 16px; z-index: 300;
	width: 290px; max-width: calc(100vw - 24px);
	background: #fff; border-radius: 16px;
	box-shadow: 0 12px 34px rgba(0,0,0,.18);
	overflow: hidden;
	opacity: 0; transform: translateY(24px) scale(.97);
	transition: opacity .32s ease, transform .32s ease;
}
.spp-newarr.is-visible{ opacity: 1; transform: translateY(0) scale(1); }
.spp-newarr-head{
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 8px 12px 16px;
	background: linear-gradient(90deg, var(--spp-orange), #ff8a3d);
	color: #fff;
}
.spp-newarr-title{ font-size: 14.5px; font-weight: 800; }
.spp-newarr-close{
	width: 28px; height: 28px; border: none; border-radius: 50%;
	background: rgba(255,255,255,.22); color: #fff; font-size: 18px; line-height: 1;
	cursor: pointer;
}
.spp-newarr-close:hover{ background: rgba(255,255,255,.35); }
.spp-newarr-track{
	display: flex; gap: 10px; overflow-x: auto; padding: 12px;
	scroll-snap-type: x mandatory;
}
.spp-newarr-track::-webkit-scrollbar{ height: 5px; }
.spp-newarr-track::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 6px; }
.spp-newarr-item{
	flex: 0 0 96px; scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	position: relative; color: var(--spp-text, #1f2937); text-decoration: none;
}
.spp-newarr-item img{ width: 78px; height: 78px; object-fit: cover; border-radius: 10px; border: 1px solid #f1f1f1; }
.spp-newarr-badge{
	position: absolute; top: -4px; left: 6px;
	background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
	padding: 2px 6px; border-radius: 20px; letter-spacing: .3px;
}
.spp-newarr-name{
	font-size: 11px; line-height: 1.25; margin-top: 6px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spp-newarr-price{ font-size: 12px; font-weight: 800; color: var(--spp-orange-dark); margin-top: 3px; }
.spp-newarr-viewall{
	display: block; text-align: center; padding: 10px;
	font-size: 12.5px; font-weight: 700; color: var(--spp-orange-dark);
	border-top: 1px solid #f3f4f6;
}
.spp-newarr-viewall:hover{ background: var(--spp-orange-light); }

@media (max-width: 480px){
	.spp-newarr{ right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* ---------- Guía de tallas dinámica (modal) ---------- */
.spp-sg-open { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--spp-orange); color:var(--spp-orange-dark); font-size:13px; font-weight:700; padding:7px 14px; border-radius:20px; cursor:pointer; }
.spp-sg-open:hover { background:var(--spp-orange); color:#fff; }
html.spp-sg-lock, html.spp-sg-lock body { overflow:hidden; }
.spp-sg-overlay { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:12px; }
.spp-sg-overlay[hidden] { display:none; }
.spp-sg-modal { position:relative; background:#fff; width:100%; max-width:760px; max-height:94vh; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; color:#111; }
.spp-sg-close { position:absolute; top:8px; right:12px; z-index:2; background:none; border:0; font-size:30px; line-height:1; cursor:pointer; color:#222; }
.spp-sg-tabs { display:flex; justify-content:center; gap:28px; padding:18px 44px 0; border-bottom:1px solid #eee; }
.spp-sg-tabs button { background:none; border:0; border-bottom:3px solid transparent; padding:8px 2px 10px; font-size:17px; font-weight:700; color:#777; cursor:pointer; }
.spp-sg-tabs button.is-on { color:#111; border-bottom-color:#111; }
.spp-sg-body { overflow-y:auto; padding:14px 22px 22px; }
.spp-sg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #eee; font-size:14px; font-weight:600; }
.spp-sg-seg { display:inline-flex; border:1px solid #111; border-radius:20px; overflow:hidden; }
.spp-sg-seg button { background:#fff; border:0; padding:7px 22px; font-weight:700; cursor:pointer; }
.spp-sg-seg button.is-on { background:#111; color:#fff; }
.spp-sg-cat, .spp-sg-col, .spp-sg-form select, .spp-sg-form input { border:1px solid #bbb; border-radius:18px; padding:6px 12px; font-size:13px; background:#fff; }
.spp-sg-chips, .spp-sg-horma { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 4px; align-items:center; font-size:13px; font-weight:600; }
.spp-sg-chips button, .spp-sg-horma button { border:1px solid #bbb; background:#fff; border-radius:20px; padding:6px 16px; font-size:14px; font-weight:700; cursor:pointer; min-width:52px; }
.spp-sg-chips button.is-on, .spp-sg-horma button.is-on { border:2px solid #111; background:#fff7f0; }
.spp-sg-stage { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:center; padding:8px 0; }
.spp-sg-fig svg { width:100%; height:auto; max-height:520px; display:block; }
.spp-sg-garment svg { width:100%; height:auto; display:block; }
.spp-sg-gtitle { font-size:12px; color:#777; text-align:center; margin-bottom:4px; }
.spp-sg-card { display:flex; flex-direction:column; gap:6px; background:#fff7f0; border:1px solid #ffd9bf; border-radius:12px; padding:14px; font-size:14px; }
.spp-sg-card strong { font-size:22px; }
.spp-sg-card small { color:#666; font-size:12px; }
.spp-sg-ttabs { display:flex; gap:10px; flex-wrap:wrap; padding:10px 0; }
.spp-sg-ttabs button { border:1px solid #bbb; background:#fff; border-radius:22px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.spp-sg-ttabs button.is-on { border:2px solid #111; }
.spp-sg-tscroll { overflow-x:auto; border:1px solid #eee; border-radius:6px; }
.spp-sg-t { width:100%; border-collapse:collapse; font-size:13.5px; text-align:center; white-space:nowrap; }
.spp-sg-t th, .spp-sg-t td { padding:12px 12px; border-bottom:1px solid #eee; border-right:1px solid #eee; }
.spp-sg-t thead th { background:#f7f7f7; font-weight:600; }
.spp-sg-t tbody th { background:#f7f7f7; }
.spp-sg-t tr.is-hl td, .spp-sg-t tr.is-hl th { background:#fdeee0; }
.spp-sg-note, .spp-sg-hint { font-size:12px; color:#777; margin:10px 0 0; }
.spp-sg-form { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0; }
.spp-sg-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.spp-sg-go, .spp-sg-reco button { background:var(--spp-orange); color:#fff; border:0; border-radius:22px; padding:10px 22px; font-size:14px; font-weight:700; cursor:pointer; }
.spp-sg-reco { display:flex; flex-direction:column; gap:6px; align-items:flex-start; margin-top:16px; background:#fff7f0; border:1px solid #ffd9bf; border-radius:12px; padding:14px 16px; }
.spp-sg-reco strong { font-size:30px; }
.spp-sg-reco small, .spp-sg-warn { color:#666; font-size:12.5px; }
.spp-sg-products { margin-top:20px; padding-top:14px; border-top:1px solid #eee; }
.spp-sg-products[hidden] { display:none; }
.spp-sg-ptitle { margin:0 0 10px; font-size:15px; font-weight:700; }
.spp-sg-plist { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.spp-sg-pcard { flex:0 0 120px; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:#111; position:relative; }
.spp-sg-pcard img { width:120px; height:120px; object-fit:cover; border-radius:10px; background:#f3f3f3; }
.spp-sg-pname { font-size:12px; line-height:1.3; max-height:32px; overflow:hidden; }
.spp-sg-pprice { font-size:13px; font-weight:700; color:var(--spp-orange-dark); }
.spp-sg-pcard.is-out img { opacity:.55; }
.spp-sg-pout { position:absolute; top:6px; left:6px; background:#6b7280; color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.spp-sg-loading { font-size:12px; color:#777; }
@media (max-width:560px) {
	.spp-sg-overlay { padding:0; align-items:flex-end; }
	.spp-sg-modal { max-height:96vh; border-radius:16px 16px 0 0; }
	.spp-sg-stage { grid-template-columns:1fr; }
	.spp-sg-tabs { gap:16px; padding:16px 36px 0; }
	.spp-sg-tabs button { font-size:15px; }
	.spp-sg-body { padding:10px 14px 20px; }
}

/* ---------- Reseñas bajo la imagen principal ---------- */

/* Galería del producto: miniaturas en columna a la IZQUIERDA de la foto
   principal (en vez de donde las dejaba el tema, a veces encimadas a la
   derecha). .flex-control-thumbs lo genera el propio slider de WooCommerce
   (flexslider) en cualquier tema, así que esto funciona sin depender de él. */
.woocommerce-product-gallery:not(.vargal-product-gallery){position:relative!important;display:block!important;padding-left:82px!important;box-sizing:border-box!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-viewport{overflow:hidden!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-viewport,.woocommerce-product-gallery:not(.vargal-product-gallery)>.woocommerce-product-gallery:not(.vargal-product-gallery)__wrapper{width:100%!important;max-width:100%!important;opacity:1!important;visibility:visible!important}
.woocommerce-product-gallery:not(.vargal-product-gallery) .woocommerce-product-gallery:not(.vargal-product-gallery)__image img{display:block;opacity:1}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs{position:absolute!important;left:0!important;top:0!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:8px!important;list-style:none!important;margin:0!important;padding:0!important;width:72px!important;max-height:520px!important;overflow-y:auto!important;scrollbar-width:thin}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs li{width:100%!important;height:auto!important;margin:0!important;float:none!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:8px!important;cursor:pointer;opacity:.55;border:2px solid transparent!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs li:hover img{opacity:1!important;border-color:#ff6b1a!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.spp-gr,.woocommerce-product-gallery:not(.vargal-product-gallery)>#spp-gr{margin-left:-82px!important;width:calc(100% + 82px)!important;max-width:none!important}
@media(max-width:640px){
.woocommerce-product-gallery:not(.vargal-product-gallery){padding-left:0!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs{position:static!important;flex-direction:row!important;width:100%!important;max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;margin-top:8px!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.flex-control-nav.flex-control-thumbs li{width:56px!important;flex:0 0 56px!important}
.woocommerce-product-gallery:not(.vargal-product-gallery)>.spp-gr,.woocommerce-product-gallery:not(.vargal-product-gallery)>#spp-gr{margin-left:0!important;width:100%!important}
}
.spp-gr { flex: 0 0 100%; width: 100%; max-width: 100%; grid-column: 1 / -1; order: 99; clear: both; box-sizing: border-box; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--spp-border); font-size: 14px; color: var(--spp-text); text-align: left; }
.spp-gr:not(.is-placed) { display: none; }
.spp-gr-notice { background: #e8f6ee; color: #0b7a3b; border: 1px solid #bfe5cf; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.spp-gr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--spp-border); }
.spp-gr-count { font-size: 20px; }
.spp-gr-avg { font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.spp-gr-stars { --p: 100%; font-size: 20px; letter-spacing: 2px; line-height: 1; background: linear-gradient(90deg, #111 var(--p), #d9d9d9 var(--p)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.spp-gr-badge { background: #e8f6ee; color: #0b7a3b; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 6px; }
.spp-gr-fit { margin: 14px 0 4px; display: grid; gap: 8px; }
.spp-gr-fit-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; }
.spp-gr-bar { height: 8px; background: #ececec; border-radius: 6px; overflow: hidden; }
.spp-gr-bar i { display: block; height: 100%; background: #111; border-radius: 6px; }
.spp-gr-pct { color: var(--spp-muted); font-size: 13px; }
.spp-gr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.spp-gr-pill { border: 1px solid #bbb; border-radius: 22px; padding: 7px 16px; font-size: 14px; }
.spp-gr-list { display: grid; gap: 0; }
.spp-gr-item { padding: 14px 0; border-bottom: 1px solid var(--spp-border); }
.spp-gr-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.spp-gr-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--spp-orange-light); color: var(--spp-orange-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.spp-gr-date { color: var(--spp-muted); font-size: 12.5px; }
.spp-gr-ver { color: #0b7a3b; font-size: 12px; font-weight: 700; }
.spp-gr-rate { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.spp-gr-rate .spp-gr-stars { font-size: 17px; }
.spp-gr-rate em { color: var(--spp-orange-dark); font-style: normal; font-weight: 700; }
.spp-gr-text { margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.spp-gr-all { display: inline-block; margin: 12px 0 4px; color: var(--spp-orange-dark); font-weight: 700; text-decoration: underline; cursor: pointer; }
.spp-gr-empty { display: flex; flex-direction: column; gap: 4px; background: #fafafa; border: 1px dashed #ccc; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.spp-gr-empty strong { font-size: 16px; }
.spp-gr-form form { padding-bottom: 0; }
.spp-gr-modal label { display: block; font-weight: 600; margin-bottom: 4px; }
.spp-gr-modal input[type=text], .spp-gr-modal input[type=email], .spp-gr-modal select, .spp-gr-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid #bbb; border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.spp-gr-modal p { margin: 0 0 12px; }
.spp-gr-fitq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.spp-gr-fitq label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.spp-gr-q { font-weight: 600; width: 100%; }
.spp-gr-modal .spp-gr-submit { background: var(--spp-orange); color: #fff; border: 0; border-radius: 22px; padding: 10px 24px; font-weight: 700; cursor: pointer; }
.spp-gr-modal .stars a { color: #f5a623; }

/* ---------- Cajas de compra / barras de producto: fondo blanco sólido y quietas ---------- */
.spp-solid-bar { background-color: #fff !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -4px 16px rgba(0,0,0,.10); }
/* Contenedores de la barra lateral que el tema pega/desplaza al hacer scroll: se dejan quietos. */
[data-spp-still] { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; will-change: auto !important; }

/* Reseñas de la tienda en la tarjeta de tienda */
.spp-store-rate{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:#777;line-height:1}
.spp-store-stars{--p:0%;font-size:14px;letter-spacing:1px;background:linear-gradient(90deg,#f5a623 var(--p),#d9d9d9 var(--p));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Galería "vargal" (Variation Gallery): orden FIJO — miniaturas a la izquierda, foto grande a la
   derecha y, debajo a todo el ancho, el bloque de tienda/reseñas. No depende del orden del HTML. */
@media(min-width:641px){
.vargal-product-gallery.vargal-product-gallery-wrap{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start!important;padding-left:0!important;gap:15px!important}
.vargal-product-gallery>.vargal-control-nav-wrap{order:1!important;flex:0 0 70px!important;width:70px!important;max-width:70px!important}
.vargal-product-gallery>.vargal-product-gallery__wrapper{order:2!important;flex:1 1 0!important;min-width:0!important;width:auto!important;max-width:none!important;position:relative;overflow:hidden}
.vargal-product-gallery>.spp-gr,.vargal-product-gallery>#spp-gr{order:3!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;margin:0!important}
}
@media(max-width:640px){
.vargal-product-gallery.vargal-product-gallery-wrap{display:flex!important;flex-wrap:wrap!important;padding-left:0!important}
.vargal-product-gallery>.vargal-product-gallery__wrapper{order:1!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;overflow:hidden;position:relative}
.vargal-product-gallery>.vargal-control-nav-wrap{order:2!important;flex:0 0 100%!important;width:100%!important;height:auto!important}
.vargal-product-gallery>.spp-gr,.vargal-product-gallery>#spp-gr{order:3!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;margin:0!important}
}

/* Caja de compra en la barra lateral derecha (productos variables) */
.spp-buybox.spp-in-sidebar{position:relative;z-index:2;background:#fff;border:1px solid #ececec;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:14px;margin:0 0 22px;max-width:100%;box-sizing:border-box}
.spp-buybox .price-wrapper{margin:0 0 10px}
.spp-buybox p.price{margin:0 0 8px}
.spp-buybox form.cart{margin:0}
.spp-buybox .woocommerce-variation-add-to-cart{display:flex!important;flex-wrap:wrap;gap:8px}
.spp-buybox .ux-quantity,.spp-buybox .quantity{margin:0!important}
.spp-buybox .single_add_to_cart_button,.spp-buybox .ux-buy-now-button{flex:1 1 100%;width:100%;margin:0!important}
