/*
 * Layout ported from the Cannelle Orange design mockup
 * (cannelle-orange/project/Modale Upsell Vase.html).
 *
 * Colors/fonts come from --wcum-accent/--wcum-ink/--wcum-paper/--wcum-font-*
 * custom properties, set inline per-site from the plugin's Settings page
 * (see WCUM\Frontend::get_style_variables_css()). Derived tones (lighter
 * paper shades, translucent line colors) are computed here with color-mix()
 * so a single accent/ink/paper choice still produces a full palette.
 */
:root {
	--wcum-paper-2: color-mix( in srgb, var( --wcum-paper ), #fff 30% );
	--wcum-paper-3: color-mix( in srgb, var( --wcum-paper ), #fff 55% );
	--wcum-accent-2: color-mix( in srgb, var( --wcum-accent ), #000 12% );
	--wcum-line: color-mix( in srgb, var( --wcum-ink ), transparent 88% );
	--wcum-line-soft: color-mix( in srgb, var( --wcum-ink ), transparent 94% );
}

.wcum-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 14, 11, 10, .55 );
	display: grid;
	place-items: center;
	padding: 20px;
	/* Above theme mini-cart drawers (e.g. WoodMart), which use their own high z-index. */
	z-index: 2147483001 !important;
	box-sizing: border-box;
}

.wcum-overlay[hidden] {
	display: none;
}

.wcum-overlay *,
.wcum-overlay *::before,
.wcum-overlay *::after {
	box-sizing: border-box;
}

.wcum-modal {
	background: var( --wcum-paper-2 );
	width: 100%;
	max-width: 620px;
	max-height: 88vh;
	border-radius: 24px;
	box-shadow: 0 40px 80px -30px rgba( 0, 0, 0, .5 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: var( --wcum-font-body );
}

.wcum-m-head {
	padding: 38px 40px 24px;
	text-align: center;
	position: relative;
	border-bottom: 1px solid var( --wcum-line-soft );
}

/*
 * !important on position/sizing/background/margin here defends against
 * themes (e.g. WoodMart) that apply global !important rules to every
 * <button> element (background, position, margins) — without it, this
 * button loses its absolute positioning and circular shape and falls back
 * into normal document flow as a themed rectangle.
 */
#wcum-modal-overlay .wcum-m-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: var( --wcum-paper-3 ) !important;
	border: 1px solid var( --wcum-line ) !important;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

#wcum-modal-overlay .wcum-m-close:hover {
	background: var( --wcum-accent ) !important;
	border-color: var( --wcum-accent ) !important;
}

#wcum-modal-overlay .wcum-m-close:hover svg {
	stroke: #fff !important;
}

#wcum-modal-overlay .wcum-m-close svg {
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
	stroke: var( --wcum-ink ) !important;
	stroke-width: 2px !important;
	fill: none !important;
	opacity: 1 !important;
	display: inline-block !important;
	visibility: visible !important;
	transition: stroke .2s;
}

#wcum-modal-overlay .wcum-m-close svg path {
	stroke: inherit !important;
	stroke-width: inherit !important;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.wcum-m-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --wcum-accent );
	margin-bottom: 10px;
}

.wcum-m-head h2 {
	font-family: var( --wcum-font-display );
	font-weight: 500;
	font-size: 32px;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var( --wcum-ink );
	margin: 0;
}

.wcum-m-head h2 em {
	font-style: italic;
	color: var( --wcum-accent );
}

.wcum-m-head p {
	margin: 10px auto 0;
	font-size: 14px;
	color: var( --wcum-ink );
	opacity: .6;
	max-width: 420px;
	line-height: 1.5;
}

.wcum-m-body {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 28px 40px 10px;
}

.wcum-m-body::-webkit-scrollbar {
	width: 6px;
}

.wcum-m-body::-webkit-scrollbar-thumb {
	background: var( --wcum-line );
	border-radius: 99px;
}

.wcum-products-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 18px;
}

.wcum-product-card {
	background: var( --wcum-paper-3 );
	border: 1px solid var( --wcum-line );
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .2s, transform .2s, box-shadow .2s;
	display: flex;
	flex-direction: column;
}

.wcum-product-card:hover {
	transform: translateY( -3px );
	border-color: var( --wcum-accent );
	box-shadow: 0 18px 34px -20px rgba( 14, 11, 10, .35 );
}

.wcum-product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var( --wcum-paper );
}

.wcum-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcum-product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	color: var( --wcum-ink );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 10px -4px rgba( 0, 0, 0, .25 );
}

.wcum-product-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.wcum-product-name {
	font-family: var( --wcum-font-display );
	font-size: 19px;
	font-weight: 600;
	color: var( --wcum-ink );
	line-height: 1.1;
	text-decoration: none;
}

.wcum-product-price {
	font-size: 13px;
	color: var( --wcum-ink );
	opacity: .55;
}

.wcum-product-price ins {
	text-decoration: none;
}

#wcum-modal-overlay .wcum-product-add {
	position: static !important;
	margin: auto 0 0 !important;
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 14px !important;
	border-radius: 999px !important;
	background: var( --wcum-ink ) !important;
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background .2s, transform .2s;
	border: 0 !important;
	cursor: pointer;
	text-decoration: none;
}

#wcum-modal-overlay .wcum-product-add:hover {
	background: var( --wcum-accent ) !important;
	transform: translateY( -1px );
	color: #fff !important;
}

#wcum-modal-overlay .wcum-product-add.added {
	background: #15a35a !important;
}

#wcum-modal-overlay .wcum-product-add svg,
#wcum-modal-overlay .wcum-product-add svg path {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2px !important;
	opacity: 1 !important;
}

.wcum-icon-plus,
.wcum-icon-check {
	width: 13px;
	height: 13px;
}

.wcum-icon-check {
	display: none;
}

.wcum-product-add.added .wcum-icon-plus {
	display: none;
}

.wcum-product-add.added .wcum-icon-check {
	display: inline-block;
}

.wcum-m-foot {
	padding: 22px 40px 32px;
	border-top: 1px solid var( --wcum-line-soft );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: var( --wcum-paper-2 );
}

/* See the .wcum-m-close comment above re: theme !important button resets. */
#wcum-modal-overlay .wcum-m-skip {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --wcum-ink ) !important;
	opacity: .55;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

#wcum-modal-overlay .wcum-m-skip:hover {
	opacity: 1;
}

#wcum-modal-overlay .wcum-m-continue {
	position: static !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 15px 28px !important;
	border-radius: 999px !important;
	background: var( --wcum-accent ) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	border: 0 !important;
	cursor: pointer;
	transition: background .2s, transform .2s;
	text-decoration: none;
}

#wcum-modal-overlay .wcum-m-continue:hover {
	background: var( --wcum-accent-2 ) !important;
	transform: translateY( -1px );
	color: #fff !important;
}

.wcum-arr {
	width: 14px;
	height: 14px;
	position: relative;
	display: inline-block;
}

.wcum-arr::before {
	content: "";
	position: absolute;
	top: 6px;
	width: 12px;
	height: 1.5px;
	background: #fff;
}

.wcum-arr::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid #fff;
	border-top: 1.5px solid #fff;
	transform: rotate( 45deg );
}

@media ( max-width: 560px ) {
	.wcum-m-head {
		padding: 30px 24px 20px;
	}

	.wcum-m-head h2 {
		font-size: 26px;
	}

	.wcum-m-body {
		padding: 22px 24px 6px;
	}

	.wcum-products-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.wcum-m-foot {
		padding: 18px 24px 26px;
		flex-direction: column-reverse;
		gap: 14px;
	}

	#wcum-modal-overlay .wcum-m-continue {
		justify-content: center;
		width: 100% !important;
	}
}