/**
 * stock-notify.css — Notify-me-when-available modal.
 *
 * Visual contract: matches the design system used by lpk-toast + cart drawer:
 *   - rounded white panel on a dimmed backdrop
 *   - 100% Manrope typography
 *   - brand black CTA, mint accent for success state
 *
 * The product card's "Notify me when available" affordance is also styled here
 * (`.product-card__notify`) so the engine ships as one stylesheet.
 */

/* ---------- [hidden] attribute override ----------
   The HTML `hidden` attribute maps to `display: none` at user-agent
   stylesheet specificity (0,0,0,1). Several site rules force
   display:inline-flex / flex on the elements we toggle (stock
   indicator, notify trigger, CTA row, sticky bar), which beats UA and
   leaves them visible. These class-targeted [hidden] rules win the
   cascade so the JS toggle does what its name promises. */
.product-card__stock[hidden],
.product-card__notify[hidden],
.lpk-pdp__cta-row[hidden],
.lpk-pdp__sticky-cart[hidden],
.lpk-pdp__notify-subtext[hidden],
.lpk-pdp__buy-now[hidden] { display: none !important; }

/* ---------- variable-product swatch OOS hint ----------
   Subtle diagonal line through the swatch thumb communicates that this
   variant is unavailable, before the shopper has to click it. */
.swatch--oos {
	position: relative;
	opacity: 0.7;
}
.swatch--oos::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(45deg, transparent 47%, rgba(220, 38, 38, 0.55) 47%, rgba(220, 38, 38, 0.55) 53%, transparent 53%);
	border-radius: inherit;
	pointer-events: none;
}

/* ---------- product-card affordance ----------
   Matches the original .text-caption.text-error span (pre-engine) for
   weight/size — regular weight, caption size — so the card layout
   reads visually identical. */
.product-card__notify {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--color-error, #DC2626);
	font-size: var(--fs-caption, 12px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	cursor: pointer;
	position: relative;
	z-index: 2; /* escape .product-card__stretched-link */
	text-align: left;
}
.product-card__notify:hover { text-decoration: underline; }
.product-card__notify:focus-visible {
	outline: 2px solid var(--color-brand, #00B89E);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- PDP OOS notify CTA ----------
   Layout overrides the global .lpk-pdp__cta-row grid rule on mobile —
   we want a horizontal flex row that fits in a single visible line with
   no overflow off-screen. The notify button grows; the wishlist heart
   stays fixed at icon size so it never gets pushed past the viewport. */
.lpk-pdp__cta-row--oos {
	display: flex !important;
	grid-template-areas: none !important;
	gap: 10px;
	align-items: stretch;
	flex-wrap: nowrap;
}
.lpk-pdp__cta-row--oos .lpk-pdp__notify-btn {
	flex: 1 1 auto;
	min-width: 0; /* allow truncation if button label is unusually long */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lpk-pdp__cta-row--oos .lpk-pdp__wishlist-btn {
	flex: 0 0 48px;
	width: 48px;
	min-width: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lpk-pdp__notify-subtext {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--color-text-secondary, #5A5A5A);
	line-height: 1.5;
}
/* Mobile: ensure both children stay within the visible row, never overflow. */
@media (max-width: 767px) {
	.lpk-pdp__cta-row--oos {
		grid-template-columns: none !important;
	}
	.lpk-pdp__cta-row--oos .lpk-pdp__notify-btn {
		font-size: 14px;
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ---------- modal scaffold ---------- */
.lpk-nm-modal[hidden] { display: none; }
.lpk-nm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.lpk-nm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 21, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.lpk-nm-modal__panel {
	position: relative;
	background: #FFFFFF;
	border-radius: 14px;
	width: 100%;
	max-width: 440px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
	padding: 28px 28px 24px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html.lpk-nm-modal-open { overflow: hidden; }

/* ---------- close button ---------- */
.lpk-nm-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F4F6F8;
	color: #1A1A1A;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lpk-nm-modal__close:hover { background: #E9ECEF; }
.lpk-nm-modal__close:focus-visible { outline: 2px solid var(--color-brand, #00B89E); outline-offset: 2px; }

/* ---------- product strip ---------- */
.lpk-nm-modal__product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid #F0F2F4;
	margin-bottom: 20px;
}
.lpk-nm-modal__product-img {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	flex-shrink: 0;
}
.lpk-nm-modal__product-img[hidden] { display: none; }
.lpk-nm-modal__product-label {
	font-size: 11px;
	color: #8C8F94;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.lpk-nm-modal__product-name {
	font-size: 14.5px;
	font-weight: 700;
	color: #1A1A1A;
	margin-top: 2px;
	line-height: 1.35;
}

/* ---------- body ---------- */
.lpk-nm-modal__title {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #1A1A1A;
	margin: 0 0 8px;
	line-height: 1.25;
}
.lpk-nm-modal__sub {
	font-size: 14px;
	line-height: 1.55;
	color: #5A5A5A;
	margin: 0 0 18px;
}
.lpk-nm-modal__sub strong { color: #1A1A1A; }

/* ---------- form ---------- */
.lpk-nm-modal__form { display: block; }
.lpk-nm-modal__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #1A1A1A;
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}
.lpk-nm-modal__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	color: #1A1A1A;
	background: #FFFFFF;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lpk-nm-modal__input:focus {
	outline: 0;
	border-color: #1A1A1A;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
.lpk-nm-modal__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12.5px;
	color: #5A5A5A;
	margin: 14px 0 4px;
	line-height: 1.5;
	cursor: pointer;
}
.lpk-nm-modal__consent input {
	margin-top: 2px;
	accent-color: #1A1A1A;
	flex-shrink: 0;
}
.lpk-nm-modal__error {
	background: rgba(220, 38, 38, 0.08);
	color: #B91C1C;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 13px;
	margin: 12px 0 4px;
	line-height: 1.45;
}

.lpk-nm-modal__submit {
	width: 100%;
	margin-top: 16px;
	padding: 14px 20px;
	background: #000000;
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease;
}
.lpk-nm-modal__submit:hover { background: #1A1A1A; }
.lpk-nm-modal__submit:active { transform: scale(0.98); }
.lpk-nm-modal__submit:disabled { opacity: 0.6; cursor: wait; }
.lpk-nm-modal__submit--secondary {
	background: #F4F6F8;
	color: #1A1A1A;
}
.lpk-nm-modal__submit--secondary:hover { background: #E9ECEF; }

.lpk-nm-modal__legal {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: #8C8F94;
	line-height: 1.5;
	text-align: center;
}

/* ---------- success / already state ---------- */
.lpk-nm-modal__icon {
	text-align: center;
	margin: 4px 0 14px;
}

/* ---------- mobile ---------- */
@media (max-width: 480px) {
	.lpk-nm-modal { padding: 0; align-items: flex-end; }
	.lpk-nm-modal__panel {
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		padding: 24px 20px 20px;
		max-height: 92vh;
	}
}