/**
 * Sbalott Temu Flow — carrito y pago estilo Temu
 * Todo cuelga de body.stf-flow para no tocar el resto de la tienda.
 */
:root{
	--stf-accent: #fb7701;
	--stf-text: #222;
	--stf-muted: #767676;
	--stf-line: #ececec;
	--stf-green: #1a9c53;
	--stf-mint: #1dbf8a;
	--stf-head-h: 64px;
	--stf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Se oculta la cabecera/pie del tema y las migas de pan de Flatsome ---------- */
body.stf-flow #header,
body.stf-flow .header-wrapper,
body.stf-flow #masthead,
body.stf-flow .site-header,
body.stf-flow #top-bar,
body.stf-flow #wide-nav,
body.stf-flow #footer,
body.stf-flow .footer-wrapper,
body.stf-flow .site-footer,
body.stf-flow .absolute-footer,
body.stf-flow .page-title,
body.stf-flow .checkout-breadcrumbs,
body.stf-flow .woocommerce-breadcrumb,
body.stf-flow .sy-checkout-header{
	display: none !important;
}
body.stf-flow{ background: #fff; font-family: var(--stf-font); color: var(--stf-text); }
body.stf-flow .page-wrapper{ padding-top: 0 !important; }

/* ---------- Cabecera propia: logo + pasos ---------- */
.stf-header{
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid var(--stf-line);
	font-family: var(--stf-font);
}
.admin-bar .stf-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar .stf-header{ top: 46px; } }
.stf-header__inner{
	max-width: 1180px;
	height: var(--stf-head-h);
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.stf-logo{ display: inline-flex; align-items: center; text-decoration: none !important; flex: 0 0 auto; }
.stf-logo img{ display: block; height: 34px; width: auto; max-width: 150px; }
.stf-logo__text{ font-weight: 800; font-size: 20px; color: var(--stf-accent); }

.stf-steps ol{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.stf-step{ display: flex; align-items: center; margin: 0; padding: 0; font-size: 13.5px; color: var(--stf-muted); }
.stf-step + .stf-step::before{
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin: 0 10px;
	background: var(--stf-line);
}
.stf-step.is-done + .stf-step::before,
.stf-step.is-current::before{ background: var(--stf-green); }
.stf-step__link{ display: inline-flex; align-items: center; gap: 8px; color: inherit !important; text-decoration: none !important; }
a.stf-step__link:hover .stf-step__label{ text-decoration: underline !important; }
.stf-step__dot{
	width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; line-height: 1;
	background: #f0f0f0; color: #8a8a8a;
	flex: 0 0 auto;
}
.stf-step.is-done .stf-step__dot{ background: var(--stf-green); color: #fff; }
.stf-step.is-done{ color: var(--stf-green); }
.stf-step.is-current .stf-step__dot{ background: var(--stf-accent); color: #fff; }
.stf-step.is-current{ color: var(--stf-text); font-weight: 700; }

@media (max-width: 640px){
	:root{ --stf-head-h: 56px; }
	.stf-logo img{ height: 28px; max-width: 110px; }
	.stf-step__label{ display: none; }
	.stf-step.is-current .stf-step__label{ display: inline; font-size: 12.5px; }
	.stf-step + .stf-step::before{ width: 14px; margin: 0 6px; }
}

/* ---------- Carrito: dos columnas ---------- */
.stf-cart{
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 16px 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
	font-family: var(--stf-font);
	color: var(--stf-text);
}
.stf-cart__side{ position: sticky; top: calc(var(--stf-head-h) + 16px); }
.admin-bar .stf-cart__side{ top: calc(var(--stf-head-h) + 48px); }
.stf-cart .cart-collaterals{ width: 100%; float: none; padding: 0; margin: 0; }

.stf-items__head{
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding-bottom: 12px; border-bottom: 1px solid var(--stf-line);
}
.stf-items__title{ margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.stf-items__count{ color: var(--stf-muted); font-weight: 600; }
.stf-items__continue{ font-size: 13px; color: var(--stf-muted) !important; text-decoration: underline !important; }

.stf-list{ list-style: none; margin: 0; padding: 0; }
.stf-item{
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 32px;
	gap: 14px;
	padding: 18px 0;
	margin: 0;
	border-bottom: 1px solid var(--stf-line);
}
.stf-item__img{ position: relative; }
.stf-item__img a{ display: block; }
.stf-item__img img{ display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 8px; background: #f6f6f6; }
.stf-badge-stock{
	position: absolute; left: 0; right: 0; bottom: 0;
	background: var(--stf-accent); color: #fff;
	font-size: 11px; font-weight: 700; text-align: center;
	padding: 3px 4px; border-radius: 0 0 8px 8px;
}
.stf-item__name, .stf-item__name a{
	font-size: 13.5px; line-height: 1.4; color: var(--stf-text) !important; text-decoration: none !important;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stf-item .variation{ margin: 4px 0 0; font-size: 12px; color: var(--stf-muted); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.stf-item .variation dt, .stf-item .variation dd{ margin: 0; padding: 0; float: none; }
.stf-item .variation dd p{ margin: 0; display: inline; }
.stf-item .backorder_notification{ margin: 4px 0 0; font-size: 12px; color: var(--stf-muted); }

.stf-item__price-row{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.stf-price-old{ color: #999; font-size: 13px; text-decoration: line-through; }
.stf-price-now{ font-size: 16px; font-weight: 800; color: var(--stf-text); }
.stf-price-off{
	font-size: 11.5px; font-weight: 700; color: var(--stf-accent);
	border: 1px solid var(--stf-accent); border-radius: 3px; padding: 0 5px; line-height: 1.6;
}
.stf-item__foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.stf-item__subtotal{ font-size: 13px; color: var(--stf-muted); }
.stf-item__subtotal .amount{ color: var(--stf-text); font-weight: 700; white-space: nowrap; }

/* Cantidad */
.stf-qty .quantity{
	display: inline-flex; align-items: center; margin: 0;
	border: 1px solid #d9d9d9; border-radius: 999px; overflow: hidden; background: #fff;
}
.stf-qty .quantity input.qty{
	width: 44px; height: 34px; min-height: 0; margin: 0; padding: 0;
	border: 0; box-shadow: none; background: transparent; text-align: center;
	font-size: 14px; font-weight: 700; color: var(--stf-text); -moz-appearance: textfield;
}
.stf-qty .quantity input.qty::-webkit-outer-spin-button,
.stf-qty .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.stf-qty .quantity .minus,
.stf-qty .quantity .plus,
.stf-qty .ux-quantity__button{
	width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0;
	border: 0 !important; border-radius: 0; box-shadow: none; background: transparent !important;
	color: var(--stf-text); font-size: 16px; line-height: 1; cursor: pointer;
}

/* Eliminar: icono de papelera */
body.stf-flow .stf-item__remove a.remove{
	display: block; position: relative;
	width: 32px !important; height: 32px !important; border-radius: 50% !important;
	font-size: 0 !important; line-height: 0 !important; color: transparent !important;
	background: transparent !important; overflow: hidden; text-indent: -9999px;
}
body.stf-flow .stf-item__remove a.remove::before{
	content: ""; position: absolute; inset: 6px; text-indent: 0;
	background: #8a8a8a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zM6 9h12l-1 12H7L6 9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2zM6 9h12l-1 12H7L6 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.stf-flow .stf-item__remove a.remove:hover{ background: #f5f5f5 !important; }
body.stf-flow .stf-item__remove a.remove:hover::before{ background: var(--stf-accent); }

/* Cupón y actualizar */
.stf-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 0 4px; }
.stf-coupon{ display: flex; gap: 8px; flex: 1 1 320px; margin: 0; }
.stf-coupon .input-text{
	flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 14px;
	border: 1px solid #d9d9d9; border-radius: 999px; box-shadow: none; background: #fff; font-size: 14px;
}
.stf-coupon .input-text:focus{ border-color: var(--stf-accent); outline: none; }
body.stf-flow .stf-btn-ghost{
	height: 40px; min-height: 0; margin: 0; padding: 0 18px; line-height: 38px;
	border: 1px solid var(--stf-text); border-radius: 999px; background: #fff; color: var(--stf-text);
	font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: none; white-space: nowrap;
}
body.stf-flow .stf-btn-ghost:hover{ background: #f7f7f7; }
body.stf-flow .stf-btn-ghost[disabled]{ opacity: .45; cursor: default; }
/* El carrito se actualiza solo al cambiar la cantidad; el botón queda como respaldo. */
.stf-update{ margin-left: auto !important; }

/* ---------- Resumen del pedido ---------- */
.stf-summary{ padding: 0; margin: 0; box-sizing: border-box; }
.stf-cart *, .stf-header *{ box-sizing: border-box; }
.stf-summary__title{ margin: 0 0 12px; font-size: 16px; font-weight: 800; }
body.stf-flow .stf-summary__table{ width: 100%; border: 0; margin: 0; background: transparent; border-collapse: collapse; }
body.stf-flow .stf-summary__table th,
body.stf-flow .stf-summary__table td{
	display: table-cell; border: 0; background: none;
	padding: 8px 0; font-size: 13.5px; vertical-align: top; color: var(--stf-text);
}
body.stf-flow .stf-summary__table th{ font-weight: 400; text-align: left; color: #555; text-transform: none; }
body.stf-flow .stf-summary__table td{ text-align: right; }
body.stf-flow .stf-summary__table td::before{ display: none !important; }
.stf-summary__table .cart-discount td{ color: var(--stf-accent); font-weight: 600; }
.stf-summary__table .cart-discount td a{ color: var(--stf-muted); font-size: 12px; margin-left: 4px; }
.stf-summary__table ul#shipping_method{ list-style: none; margin: 0; padding: 0; text-align: right; }
.stf-summary__table ul#shipping_method li{ margin: 0 0 4px; padding: 0; }
.stf-summary__table .woocommerce-shipping-destination{ font-size: 12px; color: var(--stf-muted); margin: 4px 0 0; }
.stf-summary__table .shipping-calculator-button{ font-size: 12px; color: var(--stf-muted); text-decoration: underline; }
body.stf-flow .stf-summary__table .order-total th,
body.stf-flow .stf-summary__table .order-total td{
	border-top: 1px solid var(--stf-line); padding-top: 14px; font-size: 18px; font-weight: 800; color: var(--stf-text);
}
.stf-summary .wc-proceed-to-checkout{ padding: 16px 0 0; margin: 0; }
body.stf-flow .stf-checkout-btn{
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; margin: 0; padding: 12px 18px;
	border: 0; border-radius: 999px; box-shadow: none;
	background: var(--stf-accent) !important; color: #fff !important;
	font-size: 16px; font-weight: 800; text-transform: none; letter-spacing: 0; text-decoration: none !important;
}
body.stf-flow .stf-checkout-btn:hover{ filter: brightness(.94); }
.stf-note{ margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--stf-muted); text-align: center; }

/* ---------- Artículos que tal vez quieras agregar ---------- */
.stf-related{ margin-top: 28px; }
.stf-related__title{ margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.stf-related__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
/* En la columna angosta de pago (debajo de "Información adicional / Notas de
   pedido") el grid de arriba ya se acomoda solo por ser auto-fill; esto solo
   separa la sección del campo de notas que queda justo encima. */
.woocommerce-checkout .stf-related{ margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--stf-line); }
.stf-card-p{ position: relative; display: flex; flex-direction: column; min-width: 0; }
.stf-card-p__img{ position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #f6f6f6; }
.stf-card-p__img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.stf-card-p__add{
	position: absolute; top: 8px; right: 8px;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--stf-mint); color: #fff !important;
	font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.stf-card-p__name{
	margin: 8px 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--stf-text) !important; text-decoration: none !important;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stf-card-p__price{ font-size: 14px; font-weight: 800; }
.stf-card-p__price del{ font-weight: 400; font-size: 12px; color: #999; margin-right: 4px; }
.stf-card-p__price ins{ background: none; text-decoration: none; }

/* ---------- Tablet / móvil ---------- */
@media (max-width: 900px){
	.stf-cart{ grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 110px; }
	.stf-cart__side{ position: static; }
	.stf-related__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Botón "Hacer pedido" fijo abajo, como en la app */
	.stf-summary .wc-proceed-to-checkout{
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.1);
	}
	.stf-summary .stf-note{ display: none; }
}
@media (max-width: 520px){
	.stf-item{ grid-template-columns: 88px minmax(0, 1fr) 28px; gap: 10px; }
	.stf-item__img img{ width: 88px; height: 88px; }
	.stf-update{ margin-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; } }

/* ============================================================
   PASARELA DE PAGOS (carrito, pago, pedido completado y confirmaciones Yape)
   Sin cabecera del sitio, sin pie completo: solo la franja "Sbalott.com".
   ============================================================ */
body.stf-gateway .sah-wrapper-global-header,
body.stf-gateway .sah-header,
body.stf-gateway .sah-header-bottom,
body.stf-gateway .sah-cat-menu-backdrop,
body.stf-gateway .sah-back-top,
body.stf-gateway .sah-footer,
body.stf-gateway .spp-newarr,
body.stf-gateway #header,
body.stf-gateway .header-wrapper,
body.stf-gateway #masthead,
body.stf-gateway .site-header,
body.stf-gateway header.header,
body.stf-gateway #top-bar,
body.stf-gateway #wide-nav,
body.stf-gateway .page-title,
body.stf-gateway .woocommerce-breadcrumb,
body.stf-gateway .checkout-breadcrumbs,
/* pies del tema y de otros plugins */
body.stf-gateway #footer,
body.stf-gateway .footer-wrapper,
body.stf-gateway .site-footer,
body.stf-gateway #colophon,
body.stf-gateway .absolute-footer,
body.stf-gateway footer.footer,
body.stf-gateway footer:not(.stf-footer),
/* pie propio de las páginas de confirmación Yape (SSL, Privacidad, Términos...) */
body.stf-gateway .sy-footer-bottom,
body.stf-gateway .sy-checkout-header{
	display: none !important;
}
/* Fondo garantizado en blanco: el tema/otro plugin puede traer un fondo oscuro
   en estos contenedores comunes, que quedaría detrás de las tarjetas si no se
   fuerza aquí (el JS hace lo mismo por si el CSS del tema llega después). */
body.stf-gateway,
body.stf-gateway #page,
body.stf-gateway #wrapper,
body.stf-gateway #main,
body.stf-gateway #primary,
body.stf-gateway .site,
body.stf-gateway .site-content,
body.stf-gateway .content-area{
	background: #fff !important;
}
body.stf-gateway{ padding-bottom: 0 !important; }
body.stf-gateway.stf-step-1 .stf-cart{ padding-bottom: 32px; }

/* Pie mínimo: solo "Sbalott.com" + derechos */
.stf-footer{
	box-sizing: border-box;
	width: 100%;
	margin: 32px 0 0;
	padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
	background: #232f3e;
	color: #9aa5b1;
	text-align: center;
	font-family: var(--stf-font);
}
.stf-footer__brand{
	display: inline-block;
	font-size: 22px; font-weight: 800; line-height: 1.2;
	color: #fff !important; text-decoration: none !important;
}
.stf-footer__brand span{ color: var(--stf-accent); }
.stf-footer__copy{
	margin: 8px auto 0; max-width: 560px;
	font-size: 12.5px; line-height: 1.5; color: #9aa5b1;
	overflow-wrap: anywhere;
}
@media (max-width: 900px){
	/* En el carrito el botón "Hacer pedido" queda fijo abajo: se deja aire para que no tape el pie */
	body.stf-gateway.stf-step-1 .stf-footer{ margin-bottom: 76px; }
}

/* ---------- Invitación a iniciar sesión / crear cuenta ---------- */
body.stf-gateway .stf-guest{
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap;
	margin: 0 0 16px !important; padding: 14px 16px;
	background: #fff7ee !important; border: 1px solid #ffd9b0 !important; border-radius: 12px;
	font-family: var(--stf-font); color: var(--stf-text);
}
body.stf-gateway .stf-guest__text{ flex: 1 1 320px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--stf-text) !important; }
body.stf-gateway .stf-guest__text strong{ display: block; margin-bottom: 2px; font-size: 15px; }
body.stf-gateway .stf-guest__actions{ display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
/* Botones: mismo naranja de marca que "Hacer pedido" en el resto del flujo. Se fuerza cada propiedad
   con !important porque el tema aplica su propio estilo de enlaces (color, subrayado, fondo) encima. */
body.stf-gateway a.stf-guest__btn{
	display: inline-flex !important; align-items: center; justify-content: center;
	min-height: 42px; padding: 8px 18px !important; border-radius: 999px !important;
	border: 1.5px solid var(--stf-accent) !important; background: #fff !important; color: var(--stf-accent) !important;
	font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap;
	box-shadow: none !important; line-height: 1.3 !important;
}
body.stf-gateway a.stf-guest__btn--main{ background: var(--stf-accent) !important; color: #fff !important; }
body.stf-gateway a.stf-guest__btn:hover{ filter: brightness(.95); color: var(--stf-accent) !important; }
body.stf-gateway a.stf-guest__btn--main:hover{ color: #fff !important; }
@media (max-width: 520px){
	body.stf-gateway .stf-guest__actions{ width: 100%; }
	body.stf-gateway a.stf-guest__btn{ flex: 1 1 0; white-space: normal; text-align: center; }
}

/* ---------- "¿Tienes un cupón?" (aviso nativo de WooCommerce) como botón, igual que arriba ---------- */
body.stf-gateway .woocommerce-form-coupon-toggle{
	background: #f3f6fb !important; border: 1px solid #dbe3ee !important; border-radius: 12px !important;
	padding: 12px 16px !important; margin: 0 0 16px !important;
	font-family: var(--stf-font); font-size: 13.5px; color: var(--stf-text) !important;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
body.stf-gateway .woocommerce-form-coupon-toggle a{
	display: inline-flex !important; align-items: center; justify-content: center;
	min-height: 38px; padding: 7px 16px !important; border-radius: 999px !important;
	border: 1.5px solid var(--stf-accent) !important; background: #fff !important; color: var(--stf-accent) !important;
	font-size: 13.5px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap;
}
body.stf-gateway .woocommerce-form-coupon-toggle a:hover{ background: var(--stf-accent) !important; color: #fff !important; }

/* ---------- Íconos de los métodos de pago: mismo tamaño para todos (Yape, tarjeta, SBLTT, etc.) ---------- */
body.stf-gateway ul.wc_payment_methods li img,
body.stf-gateway ul.payment_methods li img,
body.stf-gateway .wc_payment_method label img{
	max-height: 26px !important; height: 26px !important; width: auto !important; max-width: 60px !important;
	vertical-align: middle !important; margin: 0 0 0 6px !important; object-fit: contain !important;
	display: inline-block !important;
}

/* ---------- Aviso de datos que faltan ---------- */
.stf-missing{
	margin: 0 0 16px; padding: 12px 16px;
	background: #fff1f0; border: 1px solid #ffb3ad; border-radius: 10px;
	color: #a12622; font-size: 14px; line-height: 1.5; font-family: var(--stf-font);
}
.stf-missing[hidden]{ display: none; }
.stf-missing ul{ margin: 6px 0 0 18px; padding: 0; }
.stf-field-bad input,
.stf-field-bad select,
.stf-field-bad .select2-selection{ border-color: #e2401c !important; box-shadow: 0 0 0 2px rgba(226,64,28,.15) !important; }