/* Stratechna Shop Experience — CSS
 * Usa as variáveis de cor já definidas pelo tema quando existem
 * (--global-palette*, do Kadence), com valores de reserva neutros para
 * funcionar em qualquer tema. */

:root {
	--sse-accent: var(--global-palette1, #b3131a);
	--sse-accent-contrast: var(--global-palette9, #ffffff);
	--sse-ink: var(--global-palette3, #1f2124);
	--sse-muted: #6b7280;
	--sse-border: #e5e7eb;
	--sse-surface: #ffffff;
	--sse-surface-alt: #f8f9fa;
	--sse-radius: 10px;
	--sse-success: #1c7c3f;
}

/* ---------- Layout do carrinho ---------- */
.sse-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 2.5rem;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
}

@media (max-width: 900px) {
	.sse-cart-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.sse-cart-layout__summary { min-width: 0; }
.sse-cart-summary-sticky {
	position: sticky;
	/* --sse-sticky-offset é medida em JS a partir do cabeçalho fixo do
	   tema (qualquer tema, não só Kadence) — 1.5rem é só a reserva
	   para o caso de não haver nenhum cabeçalho fixo a medir. */
	top: calc(var(--sse-sticky-offset, 0px) + 1.5rem);
	background: var(--sse-surface);
	border: 1px solid var(--sse-border);
	border-radius: var(--sse-radius);
	padding: 1.5rem;
}

/* ---------- Barra de envio grátis ---------- */
.sse-shipping-bar { margin-bottom: 1.25rem; }
.sse-shipping-bar__label {
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
	color: var(--sse-ink);
}
.sse-shipping-bar__label--done { color: var(--sse-success); font-weight: 600; }
.sse-shipping-bar__track {
	height: 8px;
	border-radius: 999px;
	background: var(--sse-surface-alt);
	overflow: hidden;
}
.sse-shipping-bar__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sse-accent), color-mix(in srgb, var(--sse-accent) 70%, white));
	transition: width 0.4s ease;
}

/* ---------- Itens do carrinho ---------- */
.sse-cart-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.sse-cart-item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto auto auto;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	border: 1px solid var(--sse-border);
	border-radius: var(--sse-radius);
	background: var(--sse-surface);
}
.sse-cart-item__thumb img { width: 84px; height: 84px; object-fit: contain; border-radius: 6px; background: var(--sse-surface-alt); }
.sse-cart-item__name a { font-weight: 600; color: var(--sse-ink); text-decoration: none; }
.sse-cart-item__name a:hover { color: var(--sse-accent); }
.sse-cart-item__price-mobile { display: none; font-size: 0.875rem; color: var(--sse-muted); margin-top: 0.25rem; }
.sse-cart-item__price { color: var(--sse-muted); white-space: nowrap; }
.sse-cart-item__subtotal { font-weight: 700; white-space: nowrap; }
.sse-cart-item__remove a {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	color: var(--sse-muted); text-decoration: none; font-size: 1.1rem; line-height: 1;
	transition: background 0.15s, color 0.15s;
}
.sse-cart-item__remove a:hover { background: #fdecea; color: #c62828; }
.sse-cart-item__qty .quantity { display: inline-flex; }
.sse-cart-item__qty input.qty {
	width: 56px; text-align: center; border: 1px solid var(--sse-border); border-radius: 6px; padding: 0.4rem;
}

@media (max-width: 640px) {
	/* "remover" fica isolado na coluna 3, só usada por ele — "qty" e
	   "subtotal" passam a ocupar as colunas 2+3 juntas, cada um na sua
	   própria linha. Evita a coluna 3 partilhada entre "remover" (um
	   ícone pequeno) e "subtotal" (um preço) que obrigava essa coluna a
	   ficar larga o suficiente para o preço, espremendo o nome do
	   produto ao lado até quase zero (bug confirmado 2026-08-27: nome a
	   quebrar letra a letra em mobile). */
	.sse-cart-item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb info     remove"
			"thumb qty      qty"
			"thumb subtotal subtotal";
		row-gap: 0.4rem;
	}
	.sse-cart-item__thumb { grid-area: thumb; }
	.sse-cart-item__thumb img { width: 64px; height: 64px; }
	.sse-cart-item__info { grid-area: info; min-width: 0; }
	.sse-cart-item__name { overflow-wrap: break-word; }
	.sse-cart-item__remove { grid-area: remove; }
	.sse-cart-item__qty { grid-area: qty; }
	.sse-cart-item__subtotal {
		grid-area: subtotal;
		text-align: right;
		font-size: 0.9rem;
	}
	.sse-cart-item__price { display: none; }
	.sse-cart-item__price-mobile { display: block; }
}

/* ---------- Acções (cupão / atualizar) ---------- */
.sse-cart-actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
	padding-top: 1rem; border-top: 1px solid var(--sse-border);
}
.sse-cart-actions .coupon { display: flex; gap: 0.5rem; flex: 1 1 260px; }
.sse-cart-actions .coupon input { flex: 1; border: 1px solid var(--sse-border); border-radius: 6px; padding: 0.6rem 0.75rem; }

/* ---------- Selos de confiança ---------- */
.sse-trust-badges { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--sse-border); display: flex; flex-direction: column; gap: 0.75rem; }
.sse-trust-badges__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; color: var(--sse-muted); }
.sse-trust-badges__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sse-accent); }
.sse-trust-badges__icon svg { width: 100%; height: 100%; }

/* ---------- Cross-sell no drawer ---------- */
.sse-drawer-cross-sell { margin: 1rem 0; padding-top: 1rem; border-top: 1px dashed var(--sse-border); }
.sse-drawer-cross-sell__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sse-muted); margin: 0 0 0.6rem; }
.sse-drawer-cross-sell__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sse-drawer-cross-sell__item { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 0.6rem; }
.sse-drawer-cross-sell__thumb img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: var(--sse-surface-alt); }
.sse-drawer-cross-sell__info { display: flex; flex-direction: column; min-width: 0; }
.sse-drawer-cross-sell__name { font-size: 0.8125rem; color: var(--sse-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sse-drawer-cross-sell__price { font-size: 0.75rem; color: var(--sse-muted); }
.sse-drawer-cross-sell__add {
	width: 26px; height: 26px; border-radius: 50%; background: var(--sse-accent); color: var(--sse-accent-contrast);
	display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700;
}

/* ---------- Toast ---------- */
.sse-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
	background: var(--sse-ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 999px;
	font-size: 0.875rem; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
	z-index: 99999; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.sse-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Adicionar ao carrinho — estado a carregar ---------- */
a.button.add_to_cart_button.loading,
button.add_to_cart_button.loading {
	position: relative; color: transparent !important; pointer-events: none;
}
a.button.add_to_cart_button.loading::after,
button.add_to_cart_button.loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
	margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
	border-radius: 50%; animation: sse-spin 0.6s linear infinite;
}
@keyframes sse-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.sse-shipping-bar__fill, .sse-toast { transition: none; }
	a.button.add_to_cart_button.loading::after, button.add_to_cart_button.loading::after { animation: none; }
}