/* ESB Loja: base compartilhada. Variáveis --esb-primary e --esb-dark vêm das configurações. */
:root {
	/* Identidade do site principal: preto e branco, botões em pílula, DM Sans + Space Grotesk (docs/site-principal.md §10.2). */
	--esb-primary: #000000;
	--esb-primary-contrast: #ffffff;
	--esb-dark: #000000;
	--esb-accent: #1e3446;
	--esb-text: #525252;
	--esb-muted: #727272;
	--esb-border: #ebebeb;
	--esb-bg-soft: #f5f5f5;
	--esb-success: #1f7a45;
	--esb-danger: #c0392b;
	--esb-whatsapp: #25d366;
	--esb-radius: 4px;
	--esb-radius-input: 6px;
	--esb-radius-pill: 50px;
	--esb-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	--esb-shadow-card: 0 5px 15px rgba(68, 68, 68, .06);
	--esb-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--esb-font-title: "Space Grotesk", "DM Sans", system-ui, sans-serif;
}

/* Tipografia dos componentes do plugin (o tema já carrega DM Sans e Space Grotesk). */
.esb-config, .esb-galeria, .esb-frete, .esb-filtros, .esb-fin-cta, .esb-fin-parcelas, .esb-fin-sucesso,
.esb-parceiros, dialog.esb-modal {
	font-family: var(--esb-font);
}
.esb-caixa-preco__valor, .esb-forma__preco, .esb-frete__total, .esb-card-produto__preco-valor,
.esb-card-produto__titulo, .esb-parceiros__card-titulo, .esb-section-title, .esb-modal__title,
.esb-filtros__titulo, .esb-parceiros__titulo, .esb-fin-done__title {
	font-family: var(--esb-font-title);
}

.esb-card {
	background: #fff;
	border: 1px solid var(--esb-border);
	border-radius: var(--esb-radius);
	padding: 1rem 1.1rem;
}

.esb-section-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--esb-dark);
	margin: 0 0 .6rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.esb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 44px;
	padding: .6rem 1.1rem;
	border-radius: var(--esb-radius-pill);
	border: 2px solid var(--esb-dark);
	background: var(--esb-dark);
	color: #fff;
	font-family: var(--esb-font);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .15s ease, background .15s ease;
}
.esb-btn:hover { background: #fff; color: var(--esb-dark); }
.esb-btn:disabled, .esb-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.esb-btn--primary { background: var(--esb-primary); border-color: var(--esb-primary); color: var(--esb-primary-contrast); }
.esb-btn--primary:hover { background: var(--esb-primary-contrast); color: var(--esb-primary); }
.esb-btn--ghost { background: transparent; color: var(--esb-dark); border-width: 1px; }
.esb-btn--ghost:hover { background: var(--esb-bg-soft); color: var(--esb-dark); }
.esb-btn--whatsapp { background: var(--esb-whatsapp); border-color: var(--esb-whatsapp); color: #fff; }
.esb-btn--whatsapp:hover { background: #fff; color: #128c4a; }
.esb-btn--block { width: 100%; }

.esb-input, .esb-select, .esb-textarea {
	width: 100%;
	min-height: 44px;
	padding: .55rem .75rem;
	border: 1px solid var(--esb-border);
	border-radius: var(--esb-radius-input);
	background: #fff;
	color: var(--esb-text);
	font: inherit;
	box-sizing: border-box;
}
.esb-input:focus, .esb-select:focus, .esb-textarea:focus {
	outline: 2px solid var(--esb-primary);
	outline-offset: 1px;
	border-color: var(--esb-primary);
}
.esb-label { display: block; font-size: .85rem; font-weight: 600; color: var(--esb-dark); margin-bottom: .3rem; }
.esb-help { font-size: .8rem; color: var(--esb-muted); margin-top: .25rem; }
.esb-error { color: var(--esb-danger); font-size: .85rem; margin-top: .35rem; }
.esb-success { color: var(--esb-success); }
.esb-muted { color: var(--esb-muted); }

.esb-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--esb-muted);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
}
.esb-info-btn:hover { color: var(--esb-primary-contrast); border-color: var(--esb-primary); background: var(--esb-primary); }

/* ---------- Modal ---------- */
html.esb-modal-open { overflow: hidden; }
dialog.esb-modal {
	border: 0;
	padding: 0;
	border-radius: var(--esb-radius);
	width: min(720px, calc(100vw - 24px));
	max-height: calc(100vh - 32px);
	box-shadow: var(--esb-shadow);
	color: var(--esb-text);
}
dialog.esb-modal::backdrop { background: rgba(15, 17, 20, .6); }
dialog.esb-modal[open] { display: flex; flex-direction: column; }
.esb-modal__box { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.esb-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.2rem;
	border-bottom: 1px solid var(--esb-border);
	background: var(--esb-dark);
	color: #fff;
}
.esb-modal__title { margin: 0; font-size: 1.1rem; font-weight: 600; color: #fff; }
.esb-modal__close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .25rem;
}
.esb-modal__body { padding: 1.2rem; overflow-y: auto; }
.esb-modal__body img { max-width: 100%; height: auto; border-radius: 8px; }
.esb-modal__body iframe { max-width: 100%; }
.esb-modal--wide { width: min(1000px, calc(100vw - 24px)); }

@media (max-width: 600px) {
	dialog.esb-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; margin: 0; }
	.esb-modal__box { max-height: 100vh; height: 100%; }
}

.esb-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: esb-spin .7s linear infinite;
	vertical-align: -2px;
}
@keyframes esb-spin { to { transform: rotate(360deg); } }

.esb-sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}