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

/* ---------- Cabeçalho minimalista (página de carrinho) ---------- */
.sse-minimal-header {
	padding: 1.5rem 1rem;
	text-align: center;
	border-bottom: 1px solid var(--sse-border);
}
.sse-minimal-header__inner { display: inline-block; }
.sse-minimal-header .custom-logo-link { display: inline-block; }
.sse-minimal-header .custom-logo {
	/* Alguns temas (Kadence incluído) definem a logo com "width: 100%"
	   à espera do wrapper .site-branding próprio deles, que este template
	   minimalista não tem — sem largura explícita aqui, o link/imagem
	   colapsa para 0px (bug confirmado 2026-08-27). */
	display: block;
	height: 48px;
	width: auto;
	max-width: 240px;
	max-height: 48px;
}
.sse-minimal-header__site-name {
	font-size: 1.25rem; font-weight: 700; color: var(--sse-ink); text-decoration: none;
}
.sse-minimal-main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

/* ---------- Polimento leve do bloco nativo do carrinho do WooCommerce
   ---------- Mantém o layout/comportamento nativo (pedido explícito,
   2026-08-27: preferência pelo aspecto mais limpo, tipo shopinox.eu) —
   só afinações de espaçamento e cor de marca, nada estrutural. */
.wp-block-woocommerce-cart.alignwide {
	/* A classe "alignwide" do bloco depende de uma variável CSS
	   (--global-content-wide-width) só definida dentro da estrutura
	   normal de conteúdo do Kadence (.entry-content/.wp-site-blocks),
	   que este template minimalista não tem — sem isto, o bloco
	   colapsava para uma largura mínima, deixando um vazio enorme à
	   direita (bug confirmado 2026-08-27, visto num PDF enviado pelo
	   utilizador). Aqui o bloco ocupa sempre a largura do contentor. */
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img { border-radius: 6px; }
.wp-block-woocommerce-cart .wc-block-components-totals-item,
.wp-block-woocommerce-cart .wc-block-components-panel {
	font-size: 0.9375rem;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button {
	background: var(--sse-accent) !important;
	border-color: var(--sse-accent) !important;
}

/* ---------- Cross-sell do Flux Checkout (Kadence Shop Kit) ---------- */
/* O template deles (class-cross-sell.php) imprime get_short_description()
   inteira, sem qualquer limite — desenhado para descrições curtas de 1-2
   frases. Desde que a descrição breve passou a poder ter bullets de
   características (keySellingPoints, 2026-08-27), alguns produtos ficaram
   com cartões de sugestão enormes no checkout (confirmado num PDF enviado
   pelo utilizador). Trunca visualmente aqui, sem tocar no template deles
   nem nos dados — o conteúdo completo continua no DOM. */
.flux-crosssell__description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 2.8em;
}
.flux-crosssell__description ul,
.flux-crosssell__description ol {
	margin: 0;
	padding-left: 1.1em;
}

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

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