/* Project E — buy buttons: button states, the quick view and the toast.
 *
 * The buttons' layout and box model, and the merchant's design, are NOT here:
 * Jett_Woo_Buy_Now::print_base_css() prints them in <head>, because this sheet
 * is enqueued from inside the shortcode and lands in the footer on Elementor
 * pages. Everything in this file only matters after a hover, a click, or the
 * quick view opening — by which time the sheet has loaded.
 *
 * Specificity is raised on purpose by repeating a class (.jw-qv.jw-qv,
 * .jw-bb-btn.jw-bb-btn): themes style every bare button, link, heading and
 * input at up to 0,2,1 — Hello's [type=button], an Elementor kit's
 * `.elementor-kit-N button:hover` — and a sheet that prints after this one
 * wins any tie. Measured against exactly that in the local test harness.
 */

.jw-bb [hidden],
.jw-qv [hidden] { display: none !important; }

/* WooCommerce inserts a "View cart" link after any button it sees in an
   `added_to_cart` event. The drawer / toast already says it. */
.jw-bb .added_to_cart { display: none !important; }

/* ---------- Button states ---------- */

a.jw-buy-now,
.jw-bb .jw-bb-btn {
	position: relative;
	transition: filter 160ms ease, transform 140ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.jw-buy-now.jw-buy-now:visited,
.jw-buy-now.jw-buy-now:hover,
.jw-buy-now.jw-buy-now:focus,
.jw-bb .jw-bb-btn.jw-bb-btn:visited,
.jw-bb .jw-bb-btn.jw-bb-btn:hover,
.jw-bb .jw-bb-btn.jw-bb-btn:focus {
	color: var(--jw-bn-text);
	background: var(--jw-bn-bg);
	border-color: var(--jw-bn-border-color);
	text-decoration: none;
}

.jw-buy-now.jw-buy-now:hover,
.jw-bb .jw-bb-btn.jw-bb-btn:hover {
	filter: brightness(0.92);
}

.jw-buy-now.jw-buy-now:focus-visible,
.jw-bb .jw-bb-btn.jw-bb-btn:focus-visible {
	outline: 2px solid var(--jw-bn-focus-ring, #2563eb);
	outline-offset: 2px;
}

.jw-buy-now.jw-buy-now:active,
.jw-bb .jw-bb-btn.jw-bb-btn:active {
	transform: scale(0.985);
}

a.jw-buy-now--disabled,
button.jw-buy-now--disabled,
.jw-buy-now--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}

/* Waiting on a choice: still clickable, so the click can say what is missing. */
.jw-bb .jw-bb-btn.jw-bb-btn.is-pending,
.jw-bb .jw-bb-btn.jw-bb-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	filter: none;
}

.jw-bb-ico {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

/* The arrow is drawn pointing left — "forward" in Hebrew. */
.jw-bb-ico--dir:dir(ltr) { transform: scaleX(-1); }

.jw-bb-label { min-width: 0; }

.jw-bb-spin {
	display: none;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: jw-bb-spin 0.7s linear infinite;
}

.jw-bb-btn.is-loading { cursor: progress; }
.jw-bb-btn.is-loading .jw-bb-spin { display: inline-block; }
.jw-bb-btn.is-loading .jw-bb-ico { display: none; }

@keyframes jw-bb-spin { to { transform: rotate(360deg); } }

/* The ✓ after an add (shown/hidden by the <head> rules) pops in. */
.jw-bb-btn.is-added .jw-bb-done { animation: jw-bb-pop 360ms cubic-bezier(.34, 1.56, .64, 1); }

@keyframes jw-bb-pop {
	0% { transform: scale(0.3); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.jw-bb-spin { animation-duration: 2s; }
	.jw-bb-btn.is-added .jw-bb-done { animation: none; }
}

/* A variable product's own form, when a buy button needs a choice made there. */
.jw-bb-attn {
	border-radius: 8px;
	animation: jw-bb-attn 1.5s ease;
}

@keyframes jw-bb-attn {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
	20%, 65% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.9); }
}

/* ---------- Toast (only when no drawer is there to open) ---------- */

.jw-bb-toast {
	position: fixed;
	z-index: 2147483000;
	inset-inline: 16px;
	bottom: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	margin-inline: auto;
	max-width: 440px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 18px;
	background: #111827;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 200ms ease, transform 200ms ease;
	box-sizing: border-box;
}

.jw-bb-toast.is-in { opacity: 1; transform: none; }

.jw-bb-toast a.jw-bb-toast__link,
.jw-bb-toast a.jw-bb-toast__link:hover,
.jw-bb-toast a.jw-bb-toast__link:visited {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------- Quick view ---------- */

body.jw-qv-active { overflow: hidden; }
html.pe-sb-stable { scrollbar-gutter: stable; }

.jw-qv {
	/* Below the Project E drawer (2147482000+), above any sticky header. */
	z-index: 2147481500;
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	color: #111827;
	font-size: 15px;
	line-height: 1.5;
	text-align: start;
	--jw-qv-line: #d1d5db;
	--jw-qv-muted: #4b5563;
	--jw-qv-soft: #f5f5f4;
}

/* ---------- Buy box (the shortcode on the product's own page) ----------
   The quick view's picker, inline: it shares every .jw-qv__* rule below. */

.jw-bb-box {
	--jw-qv-line: #d1d5db;
	--jw-qv-muted: #4b5563;
	--jw-qv-soft: #f5f5f4;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	text-align: start;
	box-sizing: border-box;
}

.jw-bb-box *,
.jw-bb-box *::before,
.jw-bb-box *::after { box-sizing: border-box; }

.jw-bb-box .jw-qv__form { gap: 18px; }
.jw-bb-box .jw-qv__buy { gap: 8px; }
.jw-bb-box .jw-qv__price { font-size: 24px; }

.jw-qv.is-open { display: flex; }

/* Opened from the Ajax Search popup (2147483000): above it, below its video
   lightbox (2147483200). Closing returns the shopper to their results. */
.jw-qv.jw-qv--top { z-index: 2147483100; }

.jw-qv *,
.jw-qv *::before,
.jw-qv *::after { box-sizing: border-box; }

.jw-qv__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	transition: opacity 220ms ease;
}

.jw-qv.is-in .jw-qv__backdrop { opacity: 1; }

.jw-qv__panel {
	position: relative;
	width: 100%;
	max-width: 900px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 220ms ease, transform 220ms ease;
	outline: none;
}

.jw-qv.is-in .jw-qv__panel { opacity: 1; transform: none; }

.jw-qv.jw-qv button.jw-qv__x,
.jw-qv.jw-qv button.jw-qv__x:hover,
.jw-qv.jw-qv button.jw-qv__x:focus {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	min-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: #111827;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
	cursor: pointer;
}

.jw-qv.jw-qv button.jw-qv__x:focus-visible,
.jw-qv.jw-qv button.jw-qv__opt:focus-visible,
.jw-bb-box.jw-bb-box button.jw-qv__opt:focus-visible,
.jw-qv.jw-qv button.jw-qv__step:focus-visible,
.jw-bb-box.jw-bb-box button.jw-qv__step:focus-visible,
.jw-qv.jw-qv button.jw-qv__thumb:focus-visible,
.jw-qv.jw-qv a.jw-qv__more:focus-visible {
	outline: 2px solid var(--jw-bn-focus-ring, #2563eb);
	outline-offset: 2px;
}

.jw-qv__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 320px;
	color: var(--jw-qv-muted);
}

.jw-qv__loading .jw-bb-spin {
	display: inline-block;
	width: 22px;
	height: 22px;
}

.jw-qv__grid {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
}

.jw-qv__media {
	padding: 22px;
	padding-inline-end: 0;
	min-width: 0;
}

.jw-qv__frame {
	aspect-ratio: 1 / 1;
	background: var(--jw-qv-soft);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jw-qv.jw-qv img.jw-qv__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.jw-qv__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.jw-qv.jw-qv button.jw-qv__thumb,
.jw-qv.jw-qv button.jw-qv__thumb:hover,
.jw-qv.jw-qv button.jw-qv__thumb:focus {
	width: 58px;
	height: 58px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--jw-qv-soft);
	box-shadow: none;
	cursor: pointer;
}

.jw-qv.jw-qv button.jw-qv__thumb.is-on { border-color: var(--jw-qv-accent, #0f172a); }

.jw-qv__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.jw-qv__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 26px 24px 24px;
}

.jw-qv.jw-qv h2.jw-qv__title,
.jw-bb-box.jw-bb-box h2.jw-qv__title {
	margin: 0;
	padding-inline-end: 44px;
	color: inherit;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.jw-qv.jw-qv h2.jw-qv__title a,
.jw-bb-box.jw-bb-box h2.jw-qv__title a,
.jw-qv.jw-qv h2.jw-qv__title a:hover,
.jw-bb-box.jw-bb-box h2.jw-qv__title a:hover,
.jw-qv.jw-qv h2.jw-qv__title a:visited,
.jw-bb-box.jw-bb-box h2.jw-qv__title a:visited {
	color: inherit;
	text-decoration: none;
}

.jw-qv__price {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.jw-qv__price del,
.jw-qv__price ins { display: inline-block; }

.jw-qv__price del {
	opacity: 0.55;
	font-size: 0.8em;
	font-weight: 400;
	margin-inline-end: 8px;
}

.jw-qv__price ins { text-decoration: none; }

.jw-qv__desc {
	margin: 0;
	color: var(--jw-qv-muted);
	font-size: 14px;
}

.jw-qv__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jw-qv__attr-head {
	margin-bottom: 8px;
	font-size: 14px;
}

.jw-qv__attr-label { font-weight: 700; }

.jw-qv__attr-value {
	margin-inline-start: 4px;
	color: var(--jw-qv-muted);
}

.jw-qv__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Shared with the admin preview, hence not qualified by .jw-qv alone. */
.jw-qv.jw-qv button.jw-qv__opt,
.jw-bb-box.jw-bb-box button.jw-qv__opt,
.jw-qv.jw-qv button.jw-qv__opt:hover,
.jw-bb-box.jw-bb-box button.jw-qv__opt:hover,
.jw-qv.jw-qv button.jw-qv__opt:focus,
.jw-bb-box.jw-bb-box button.jw-qv__opt:focus,
.jw-bb-preview-qv .jw-qv__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	/* A long option label wraps inside the pill. Themes (Hello Elementor)
	   set `button { white-space: nowrap }`, which pushed it past the screen. */
	max-width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 15px;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
	border: 1.5px solid var(--jw-qv-line, #d1d5db);
	border-radius: min(var(--jw-bn-border-radius, 10px), 21px);
	background: #fff;
	color: #111827;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.jw-qv.jw-qv button.jw-qv__opt:hover,
.jw-bb-box.jw-bb-box button.jw-qv__opt:hover { border-color: #9ca3af; }

.jw-qv.jw-qv button.jw-qv__opt.is-on,
.jw-bb-box.jw-bb-box button.jw-qv__opt.is-on,
.jw-bb-preview-qv .jw-qv__opt.is-on {
	border-color: var(--jw-qv-accent, #0f172a);
	box-shadow: inset 0 0 0 1px var(--jw-qv-accent, #0f172a);
	background: #fff;
	background: color-mix(in srgb, var(--jw-qv-accent, #0f172a) 8%, #fff);
	font-weight: 700;
}

/* Not available with the other choices: a diagonal slash, the way fashion
   stores mark a sold-out size (a line-through on one letter reads as "Ł"). */
.jw-qv.jw-qv button.jw-qv__opt.is-out,
.jw-bb-box.jw-bb-box button.jw-qv__opt.is-out,
.jw-bb-preview-qv .jw-qv__opt.is-out {
	color: #9ca3af;
	border-color: #e5e7eb;
	background-image: linear-gradient(to top right, transparent calc(50% - 0.75px), #d1d5db calc(50% - 0.75px), #d1d5db calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.jw-qv__attr--need .jw-qv__attr-label { color: #b91c1c; }
.jw-qv__attr--need .jw-qv__opts { animation: jw-qv-shake 380ms ease; }

@keyframes jw-qv-shake {
	0%, 100% { transform: none; }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.jw-qv__stock:empty { display: none; }

.jw-qv__stock p {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.jw-qv__stock .in-stock { color: #15803d; }
.jw-qv__stock .out-of-stock { color: #b91c1c; }

.jw-qv__qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.jw-qv__qty {
	display: inline-flex;
	align-items: stretch;
	height: 42px;
	border: 1.5px solid var(--jw-qv-line);
	border-radius: min(var(--jw-bn-border-radius, 10px), 21px);
	overflow: hidden;
	background: #fff;
}

.jw-qv.jw-qv button.jw-qv__step,
.jw-bb-box.jw-bb-box button.jw-qv__step,
.jw-qv.jw-qv button.jw-qv__step:hover,
.jw-bb-box.jw-bb-box button.jw-qv__step:hover,
.jw-qv.jw-qv button.jw-qv__step:focus,
.jw-bb-box.jw-bb-box button.jw-qv__step:focus {
	width: 40px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #111827;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.jw-qv.jw-qv button.jw-qv__step:hover,
.jw-bb-box.jw-bb-box button.jw-qv__step:hover { background: var(--jw-qv-soft); }

.jw-qv.jw-qv input.jw-qv__qty-input,
.jw-bb-box.jw-bb-box input.jw-qv__qty-input,
.jw-qv.jw-qv input.jw-qv__qty-input:focus,
.jw-bb-box.jw-bb-box input.jw-qv__qty-input:focus {
	width: 46px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.jw-qv.jw-qv input.jw-qv__qty-input::-webkit-inner-spin-button,
.jw-bb-box.jw-bb-box input.jw-qv__qty-input::-webkit-inner-spin-button,
.jw-qv.jw-qv input.jw-qv__qty-input::-webkit-outer-spin-button,
.jw-bb-box.jw-bb-box input.jw-qv__qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.jw-qv__buy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jw-qv__msg {
	margin: 0;
	color: #b91c1c;
	font-size: 14px;
	font-weight: 600;
}

.jw-qv__msg:empty { display: none; }

.jw-qv.jw-qv a.jw-qv__more,
.jw-qv.jw-qv a.jw-qv__more:visited {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #374151;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jw-qv.jw-qv a.jw-qv__more:hover { color: #111827; }

/* Phones: a bottom sheet, the buttons pinned to its bottom edge. */
@media (max-width: 640px) {
	.jw-qv {
		align-items: flex-end;
		padding: 0;
	}

	.jw-qv__panel {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 18px 18px 0 0;
		transform: translateY(48px);
	}

	.jw-qv__grid { grid-template-columns: minmax(0, 1fr); }

	.jw-qv__media { padding: 14px 14px 0; }

	/* Short enough that the first options show without scrolling. */
	.jw-qv__frame {
		aspect-ratio: auto;
		height: 26vh;
		max-height: 240px;
	}

	.jw-qv__thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-top: 8px;
	}

	.jw-qv.jw-qv button.jw-qv__thumb,
	.jw-qv.jw-qv button.jw-qv__thumb:hover,
	.jw-qv.jw-qv button.jw-qv__thumb:focus {
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
	}

	.jw-qv__info {
		gap: 12px;
		padding: 14px 16px 0;
	}

	.jw-qv.jw-qv h2.jw-qv__title { font-size: 19px; }
	.jw-qv__price { font-size: 18px; }

	.jw-qv .jw-qv__buy {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 0 -16px;
		padding: 10px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, 0.35);
	}

	.jw-qv.jw-qv a.jw-qv__more { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.jw-qv__panel,
	.jw-qv__backdrop,
	.jw-bb-toast { transition: none; }
	.jw-qv__attr--need .jw-qv__opts,
	.jw-bb-attn { animation: none; }
}

/* Box overrides: no close button to clear, and it sits in the page's flow. */
.jw-bb-box.jw-bb-box h2.jw-bb-box__title {
	padding-inline-end: 0;
	font-size: 24px;
}

.jw-bb-box--out .jw-qv__stock p { font-size: 15px; }