/**
 * Oishya Button widget styles.
 *
 * Self-contained port of the redesign's ".oi-shop .btn" pill (crimson /
 * outline-dark / outline-light) so the widget renders identically anywhere,
 * not only inside the page-scoped .oi-shop wrapper. Palette mirrors kit 63791
 * globals; ship via the widget's own registered stylesheet (LiteSpeed UCSS is
 * unreliable on kit custom_css / in-<style>). See memory:
 * elementor-html-widget-image-gotchas, oishya-button-widget.
 */
.oishya-btn-wrap {
	--oi-cream: #efe7da;
	--oi-crimson: #991b3a;
	--oi-crimson-dk: #771027;
	--oi-charcoal: #2b2b2b;
	display: flex;
	flex-wrap: wrap;
}

.oishya-btn {
	display: inline-block;
	font-family: 'Graphik', 'Public Sans', system-ui, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Crimson (filled) */
.oishya-btn--crimson {
	background: var(--oi-crimson);
	color: var(--oi-cream);
	border: 1px solid var(--oi-crimson);
}
.oishya-btn--crimson:hover {
	background: var(--oi-crimson-dk);
	border-color: var(--oi-crimson-dk);
	color: var(--oi-cream);
}

/* Outline — dark (for light backgrounds) */
.oishya-btn--outline-dk {
	background: transparent;
	color: var(--oi-charcoal);
	border: 1px solid var(--oi-charcoal);
}
.oishya-btn--outline-dk:hover {
	background: var(--oi-charcoal);
	color: var(--oi-cream);
}

/* Outline — light (for dark backgrounds) */
.oishya-btn--outline-lt {
	background: transparent;
	color: var(--oi-cream);
	border: 1px solid var(--oi-cream);
}
.oishya-btn--outline-lt:hover {
	background: var(--oi-cream);
	color: var(--oi-charcoal);
}