/* 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);
}

@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. */
	.spp-offer-box {
		position: sticky;
		bottom: 0;
		z-index: 40;
		box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	}
}

/* ---------- 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);
}