/*
 * Oath Peptides — Out of Stock Modal & Banner
 * Theme-isolated: all: initial + !important on all elements
 * to prevent Savoy theme interference.
 */

/* ── Overlay ── */
.oath-oos-overlay {
	all: initial !important;
	display: flex !important;
	position: fixed !important;
	z-index: 2147483647 !important;
	left: 0 !important;
	top: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(0, 0, 0, 0.7) !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	box-sizing: border-box !important;
}

/* ── Card ── */
.oath-oos-card {
	all: initial !important;
	display: block !important;
	background: #ffffff !important;
	max-width: 400px !important;
	width: 90% !important;
	margin: 20px !important;
	position: relative !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* ── Close Button ── */
.oath-oos-close {
	all: initial !important;
	display: block !important;
	position: absolute !important;
	top: 10px !important;
	right: 14px !important;
	font-size: 28px !important;
	font-family: Arial, sans-serif !important;
	color: #666666 !important;
	cursor: pointer !important;
	line-height: 1 !important;
	z-index: 10 !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

.oath-oos-close:hover {
	color: #000000 !important;
}

/* ── Product Image ── */
.oath-oos-image {
	all: initial !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* ── Body ── */
.oath-oos-body {
	all: initial !important;
	display: block !important;
	padding: 24px 28px 28px !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

/* ── Heading ── */
.oath-oos-heading {
	all: initial !important;
	display: block !important;
	margin: 0 0 12px 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: #000000 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

/* ── Message ── */
.oath-oos-message {
	all: initial !important;
	display: block !important;
	margin: 0 0 8px 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: #444444 !important;
	text-align: center !important;
}

.oath-oos-message--no-rec {
	margin: 0 0 20px 0 !important;
}

/* ── Recommendation ── */
.oath-oos-rec {
	all: initial !important;
	display: block !important;
	margin: 0 0 20px 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	color: #444444 !important;
	text-align: center !important;
}

/* ── Bold spans ── */
.oath-oos-bold {
	all: initial !important;
	display: inline !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: #000000 !important;
}

/* ── CTA Button ── */
.oath-oos-cta {
	all: initial !important;
	display: inline-block !important;
	background: #000000 !important;
	color: #ffffff !important;
	padding: 12px 28px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.oath-oos-cta:hover {
	background: #333333 !important;
}

/* ── Hidden states ── */
.oath-oos-overlay--hidden {
	display: none !important;
}

.oath-oos-banner--hidden {
	display: none !important;
}

/* ── Banner ── */
.oath-oos-banner {
	all: initial !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: #F8F5EE !important;
	border: 1px solid #e0e0e0 !important;
	padding: 12px 16px !important;
	margin: 16px 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #444444 !important;
	box-sizing: border-box !important;
}

.oath-oos-banner-text {
	all: initial !important;
	display: inline !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #444444 !important;
}

.oath-oos-banner-label {
	all: initial !important;
	display: inline !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #000000 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}

.oath-oos-banner-link {
	all: initial !important;
	display: inline !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #000000 !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

.oath-oos-banner-link:hover {
	color: #333333 !important;
}

.oath-oos-banner-more {
	all: initial !important;
	display: inline !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 12px !important;
	color: #666666 !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	margin-left: 12px !important;
}

.oath-oos-banner-more:hover {
	color: #000000 !important;
}