/* Zero ST – Experiencia de carrito */
:root {
	--zst-c-primary: var(--porto-primary-color, #4227c6);
	--zst-c-primary-dark: #2f1aa3;
	--zst-c-text: #1d2433;
	--zst-c-muted: #667085;
	--zst-c-green: #12b76a;
}

/* ---------- Bolsa del header con contador ---------- */
a.zst-bag { position: relative; display: inline-flex; align-items: center; }
.zst-bag__count {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #f04438;
	color: #fff;
	font: 700 11px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	transform: scale(1);
	transition: transform .2s ease;
}
.zst-bag__count.is-empty { transform: scale(0); }

/* ---------- Botón "Ver carrito" destacado (ficha y listados) ---------- */
a.added_to_cart.zst-viewcart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 14px 18px !important;
	border-radius: 12px !important;
	background: var(--zst-c-primary) !important;
	color: #fff !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(66, 39, 198, .25);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	animation: zstPop .35s ease;
}
a.added_to_cart.zst-viewcart:hover { background: var(--zst-c-primary-dark) !important; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(66, 39, 198, .3); }
a.added_to_cart.zst-viewcart svg { flex: 0 0 auto; }
.summary a.added_to_cart.zst-viewcart,
.entry-summary a.added_to_cart.zst-viewcart,
.product-summary-wrap a.added_to_cart.zst-viewcart {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	margin: 12px 0 4px !important;
	min-height: 54px;
	font-size: 15px !important;
}
/* Que el formulario permita que el botón baje a su propia línea a todo lo ancho */
.summary form.cart:has(a.zst-viewcart),
.entry-summary form.cart:has(a.zst-viewcart) { flex-wrap: wrap; }
@keyframes zstPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Aviso al añadir ---------- */
.zst-toast {
	position: fixed;
	z-index: 100000;
	top: 90px;
	right: 20px;
	width: 360px;
	max-width: calc(100vw - 32px);
	padding: 18px 18px 12px;
	border-radius: 16px;
	background: #fff;
	color: var(--zst-c-text);
	box-shadow: 0 20px 50px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .08);
	font-family: inherit;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity .2s ease, transform .25s ease, visibility .25s;
}
.zst-toast.is-open { opacity: 1; visibility: visible; transform: none; }
.zst-toast__x {
	position: absolute; top: 8px; right: 10px;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--zst-c-muted); font-size: 22px; line-height: 32px; cursor: pointer;
}
.zst-toast__x:hover { background: #f2f4f7; }
.zst-toast__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; }
.zst-toast__ok { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ecfdf3; color: var(--zst-c-green); }
.zst-toast__ok svg { width: 18px; height: 18px; }
.zst-toast__prod { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #f8f8fb; margin-bottom: 14px; }
.zst-toast__prod img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; background: #fff; flex: 0 0 54px; }
.zst-toast__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; }
.zst-toast__sum { display: block; margin-top: 2px; color: var(--zst-c-muted); font-size: 12.5px; }
.zst-toast__actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.zst-toast__actions a {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 48px; padding: 0 12px; border-radius: 12px;
	font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}
.zst-toast__actions a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.zst-toast__cart { border: 1.5px solid #d0d5dd; color: var(--zst-c-text) !important; background: #fff; }
.zst-toast__cart:hover { background: #f8f8fb; }
.zst-toast__checkout { background: var(--zst-c-primary); color: #fff !important; box-shadow: 0 6px 16px rgba(66, 39, 198, .28); }
.zst-toast__checkout:hover { background: var(--zst-c-primary-dark); transform: translateY(-1px); }
.zst-toast__keep {
	display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: transparent;
	color: var(--zst-c-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Barra inferior del carrito (solo móvil) ---------- */
.zst-cartbar { display: none; }

@media (max-width: 767px) {
	/* Aviso como hoja inferior en móvil */
	.zst-toast {
		top: auto; right: 0; left: 0; bottom: 0;
		width: 100%; max-width: none;
		padding: 20px 16px calc(14px + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
		box-shadow: 0 -12px 40px rgba(16, 24, 40, .25);
	}
	.zst-toast::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d0d5dd; }
	.zst-toast.is-open { transform: none; }

	.zst-cartbar {
		position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0;
		display: flex; align-items: center; gap: 10px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -6px 24px rgba(16, 24, 40, .14);
		transform: translateY(110%);
		transition: transform .3s ease;
	}
	.zst-cartbar.is-visible { transform: none; }
	.zst-cartbar__info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--zst-c-text) !important; text-decoration: none !important; }
	.zst-cartbar__ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f4f2fd; color: var(--zst-c-primary); flex: 0 0 44px; }
	.zst-cartbar__n {
		position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
		border-radius: 999px; background: #f04438; color: #fff; font: 700 11px/20px system-ui, sans-serif; text-align: center;
		box-shadow: 0 0 0 2px #fff;
	}
	.zst-cartbar__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
	.zst-cartbar__total { font-size: 17px; font-weight: 800; }
	.zst-cartbar__count { font-size: 12px; color: var(--zst-c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.zst-cartbar__go {
		display: flex; align-items: center; gap: 6px;
		min-height: 48px; padding: 0 16px; border-radius: 12px;
		background: var(--zst-c-primary); color: #fff !important;
		font-size: 14.5px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
		box-shadow: 0 6px 16px rgba(66, 39, 198, .3);
	}
	.zst-cartbar__go svg { width: 18px; height: 18px; }

	/* Espacio para que la barra no tape el contenido ni los botones flotantes */
	body.zst-has-cartbar { padding-bottom: 76px; }
	body.zst-has-cartbar #tidio-chat-iframe,
	body.zst-has-cartbar #tidio-chat { bottom: 70px !important; }
	body.zst-has-cartbar .wws-popup-container,
	body.zst-has-cartbar .wws-popup__open-btn,
	body.zst-has-cartbar #topcontrol,
	body.zst-has-cartbar .porto-sticky-add-to-cart { margin-bottom: 70px !important; }
}