/* SS Pre-Orders — uses theme tokens with fallbacks */
.ss-po-notice,
.ss-po-modal,
.ss-po-cart-notice {
	--po-forest: var(--forest, #0B3D2E);
	--po-leaf: var(--leaf, #1A6645);
	--po-mist: var(--mist, #EAF2EC);
	--po-cream: var(--cream, #F5F2ED);
	--po-gold: var(--gold, #C9A84C);
	--po-gold-lt: var(--gold-lt, #F0DFA0);
	--po-ink: var(--ink, #1C1C1E);
	--po-mid: var(--mid, #3A3A3C);
	--po-dust: var(--dust, #8A8A8E);
	--po-r: var(--r-xl, 1.125rem);
	--po-r-sm: var(--r-lg, .75rem);
}

/* ---------- Product page notice ---------- */
.ss-po-notice {
	display: flex;
	gap: .875rem;
	align-items: flex-start;
	margin: 0 0 1rem;
	padding: 1rem 1.125rem;
	border-radius: var(--po-r);
	background: linear-gradient(135deg, var(--po-cream) 0%, #fff 100%);
	border: 1px solid rgba(201, 168, 76, .45);
	box-shadow: var(--sh, 0 2px 12px rgba(11, 61, 46, .07));
	color: var(--po-ink);
}
.ss-po-notice__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--po-forest);
	color: var(--po-gold-lt);
}
.ss-po-notice__body { min-width: 0; }
.ss-po-pill {
	display: inline-block;
	margin-bottom: .3rem;
	padding: .12rem .6rem;
	border-radius: 999px;
	background: var(--po-gold-lt);
	color: var(--po-forest);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ss-po-notice__title {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.35rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--po-forest);
}
.ss-po-notice__title strong { color: var(--po-leaf); font-weight: 700; }
.ss-po-notice__sub,
.ss-po-notice__note {
	margin: .3rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--po-mid);
}
.ss-po-notice__note { color: var(--po-dust); font-style: italic; }

/* ---------- Card badge ---------- */
.ss-po-badge {
	display: inline-block;
	margin: .25rem 0;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: var(--forest, #0B3D2E);
	color: var(--gold-lt, #F0DFA0);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.5;
	white-space: nowrap;
}

/* ---------- Cart / checkout / thank-you notice ---------- */
.ss-po-cart-notice {
	display: flex;
	gap: .65rem;
	align-items: center;
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-radius: var(--po-r-sm);
	background: var(--po-gold-lt);
	color: var(--po-forest);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.45;
}
.ss-po-cart-notice svg { flex: 0 0 auto; }

/* ---------- Modal ---------- */
.ss-po-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.ss-po-modal[hidden] { display: none; }
.ss-po-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 61, 46, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: ss-po-fade .2s ease-out;
}
.ss-po-modal__card {
	position: relative;
	width: 100%;
	max-width: 400px;
	padding: 1.75rem 1.5rem 1.5rem;
	border-radius: var(--po-r);
	background: #fff;
	text-align: center;
	color: var(--po-ink);
	box-shadow: 0 24px 60px rgba(11, 61, 46, .25);
	animation: ss-po-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.ss-po-modal__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto .75rem;
	border-radius: 50%;
	background: var(--po-forest);
	color: var(--po-gold-lt);
	box-shadow: 0 0 0 6px var(--po-mist);
}
.ss-po-modal__eyebrow {
	margin: 0 0 .25rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--po-gold);
}
.ss-po-modal__title {
	margin: 0 0 1rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.6rem;
	line-height: 1.15;
	font-weight: 600;
	color: var(--po-forest);
}
.ss-po-modal__date {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-radius: var(--po-r-sm);
	background: var(--po-mist);
	border: 1px dashed rgba(26, 102, 69, .35);
}
.ss-po-modal__date span {
	font-size: .75rem;
	color: var(--po-mid);
}
.ss-po-modal__date strong {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--po-leaf);
}
.ss-po-modal__body {
	margin: 0 0 1.25rem;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--po-mid);
}
.ss-po-modal__actions {
	display: flex;
	flex-direction: column-reverse;
	gap: .5rem;
}
.ss-po-modal__actions button {
	width: 100%;
	min-height: 48px;
	padding: .75rem 1rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .1s ease, background-color .15s ease;
}
.ss-po-modal__actions button:active { transform: scale(.98); }
.ss-po-modal__ok { background: var(--po-forest); color: #fff; }
.ss-po-modal__ok:hover { background: var(--po-leaf); }
.ss-po-modal__cancel { background: transparent; color: var(--po-mid); }
.ss-po-modal__cancel:hover { background: var(--po-cream); }
.ss-po-modal button:focus-visible {
	outline: 2px solid var(--po-gold);
	outline-offset: 2px;
}
body.ss-po-lock { overflow: hidden; }

/* Mobile: bottom sheet */
@media (max-width: 600px) {
	.ss-po-modal { align-items: flex-end; padding: 0; }
	.ss-po-modal__card {
		max-width: none;
		border-radius: var(--po-r) var(--po-r) 0 0;
		padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
		animation: ss-po-up .26s cubic-bezier(.2, .9, .3, 1);
	}
}

@keyframes ss-po-fade { from { opacity: 0; } }
@keyframes ss-po-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes ss-po-up { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
	.ss-po-modal__backdrop,
	.ss-po-modal__card { animation: none; }
}