/* VIVI家族商品入口：桌機 Drawer、手機 Bottom Sheet。 */
body.vivi-lite-page .vivi-family-product-modal[hidden] {
	display: none !important;
}

body.vivi-lite-page .vivi-family-product-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1000002 !important;
	display: block !important;
	padding: 0 !important;
	background: transparent !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity .22s ease !important;
	font-family: var(--vivi-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
	color: var(--vivi-color-text, #5A5A5A) !important;
}

body.vivi-lite-page .vivi-family-product-modal.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
}

body.vivi-lite-page .vivi-family-product-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, .54) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

body.vivi-lite-page .vivi-family-product-panel {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	width: min(560px, 100vw) !important;
	max-width: 100vw !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	border-radius: 0 !important;
	background: var(--vivi-color-card, #fff) !important;
	box-shadow: -24px 0 70px rgba(15, 23, 42, .24) !important;
	outline: none !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
	box-sizing: border-box !important;
	transform: translateX(104%) !important;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1) !important;
	will-change: transform !important;
}

body.admin-bar.vivi-lite-page .vivi-family-product-panel {
	top: 32px !important;
	height: calc(100dvh - 32px) !important;
	max-height: calc(100dvh - 32px) !important;
}

body.vivi-lite-page .vivi-family-product-modal.is-open .vivi-family-product-panel {
	transform: translateX(0) !important;
}

body.vivi-lite-page .vivi-family-product-sheet-handle {
	display: none !important;
}

body.vivi-lite-page .vivi-family-product-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	z-index: 7 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	border-radius: var(--vivi-radius, 8px) !important;
	background: color-mix(in srgb, var(--vivi-color-card, #fff) 92%, transparent) !important;
	color: var(--vivi-color-heading, #393432) !important;
	box-shadow: 0 8px 22px rgba(15, 23, 42, .10) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

body.vivi-lite-page .vivi-family-product-close::before {
	content: '×' !important;
	display: block !important;
	color: currentColor !important;
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	transform: translateY(-1px) !important;
}

body.vivi-lite-page .vivi-family-product-close span {
	display: none !important;
}

body.vivi-lite-page .vivi-family-product-head {
	position: relative !important;
	z-index: 4 !important;
	flex: 0 0 auto !important;
	min-height: 78px !important;
	padding: 22px 72px 16px 24px !important;
	border-bottom: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	background: color-mix(in srgb, var(--vivi-color-card, #fff) 96%, transparent) !important;
	box-sizing: border-box !important;
}

body.vivi-lite-page .vivi-family-product-title-wrap > span {
	display: block !important;
	margin: 0 0 5px !important;
	color: var(--vivi-color-primary, #996515) !important;
	font-size: var(--vivi-fs-xs, 12px) !important;
	font-weight: var(--vivi-fw-bold, 700) !important;
	letter-spacing: .08em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
}

body.vivi-lite-page .vivi-family-product-head h2 {
	margin: 0 !important;
	color: var(--vivi-color-heading, #393432) !important;
	font-family: var(--vivi-font-heading, inherit) !important;
	font-size: var(--vivi-fs-h3, 24px) !important;
	font-weight: var(--vivi-fw-bold, 700) !important;
	line-height: 1.25 !important;
}

body.vivi-lite-page .vivi-family-product-body {
	flex: 0 0 auto !important;
	min-height: 0 !important;
	padding: 20px !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	background: var(--vivi-color-bg, #f8f6f1) !important;
}

body.vivi-lite-page .vivi-family-product-loading,
body.vivi-lite-page .vivi-family-product-error {
	display: flex !important;
	min-height: 280px !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	padding: 28px !important;
	border: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	border-radius: var(--vivi-radius-md, 16px) !important;
	background: var(--vivi-color-card, #fff) !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

body.vivi-lite-page .vivi-family-product-error strong {
	color: var(--vivi-color-heading, #393432) !important;
	font-size: var(--vivi-fs-body-lg, 18px) !important;
}

body.vivi-lite-page .vivi-family-product-error p {
	margin: 0 !important;
	color: var(--vivi-color-text-muted, #7A7470) !important;
	line-height: 1.65 !important;
}

body.vivi-lite-page .vivi-family-product-spinner {
	display: inline-block !important;
	width: 28px !important;
	height: 28px !important;
	border: 3px solid rgba(153, 101, 21, .18) !important;
	border-top-color: var(--vivi-color-primary, #996515) !important;
	border-radius: 999px !important;
	animation: viviFamilyProductSpin .8s linear infinite !important;
}

@keyframes viviFamilyProductSpin {
	to { transform: rotate(360deg); }
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-detail {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 16px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-media {
	position: relative !important;
	overflow: hidden !important;
	border-radius: var(--vivi-radius-md, 16px) !important;
	background: #eee6d8 !important;
	box-shadow: var(--vivi-shadow-soft, 0 18px 42px rgba(31, 26, 23, .10)) !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-main-img,
body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-howto-img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-main-img {
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-image-empty {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 260px !important;
	color: var(--vivi-color-primary, #996515) !important;
	font-size: 42px !important;
	font-weight: 800 !important;
	letter-spacing: .08em !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-section {
	padding: 18px !important;
	border: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	border-radius: var(--vivi-radius-md, 16px) !important;
	background: var(--vivi-color-card, #fff) !important;
	box-shadow: 0 12px 28px rgba(31, 26, 23, .06) !important;
	box-sizing: border-box !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 0 10px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-tags span,
body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-brand-tags em {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 28px !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--vivi-color-primary, #996515) 10%, transparent) !important;
	color: var(--vivi-color-primary, #996515) !important;
	font-size: var(--vivi-fs-xs, 12px) !important;
	font-style: normal !important;
	font-weight: 700 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-title {
	margin: 0 !important;
	color: var(--vivi-color-heading, #393432) !important;
	font-family: var(--vivi-font-heading, inherit) !important;
	font-size: clamp(22px, 2vw, 30px) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-price-row {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 8px 12px !important;
	margin-top: 14px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-price-row del {
	color: var(--vivi-color-text-muted, #7A7470) !important;
	font-size: 14px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-price-row strong {
	color: var(--vivi-color-orange, #D7772D) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-share-row {
	display: none !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-meta {
	display: grid !important;
	gap: 10px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-meta > div {
	display: grid !important;
	grid-template-columns: 86px minmax(0, 1fr) !important;
	gap: 10px !important;
	align-items: start !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-meta span {
	color: var(--vivi-color-text-muted, #7A7470) !important;
	font-size: var(--vivi-fs-small, 14px) !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-meta strong {
	min-width: 0 !important;
	color: var(--vivi-color-heading, #393432) !important;
	font-size: var(--vivi-fs-small, 14px) !important;
	line-height: 1.55 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 16px !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-family-checkout-btn,
body.vivi-lite-page .vivi-family-product-body .vivi-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 46px !important;
	padding: 0 18px !important;
	border-radius: var(--vivi-radius, 8px) !important;
	text-decoration: none !important;
	font-weight: 800 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-family-checkout-btn,
body.vivi-lite-page .vivi-family-product-body .vivi-btn-primary {
	width: 100% !important;
	background: var(--vivi-color-primary, #996515) !important;
	color: #fff !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-description,
body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-short-description {
	color: var(--vivi-color-text, #5A5A5A) !important;
	font-size: var(--vivi-fs-body, 16px) !important;
	line-height: 1.75 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-description > *:first-child,
body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-short-description > *:first-child {
	margin-top: 0 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-description > *:last-child,
body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-short-description > *:last-child {
	margin-bottom: 0 !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-rules-shell {
	position: relative !important;
	overflow: hidden !important;
	transition: max-height .22s ease !important;
}

body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-rules-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 36px !important;
	margin-top: 12px !important;
	padding: 0 14px !important;
	border: 1px solid var(--vivi-color-border, rgba(31, 26, 23, .12)) !important;
	border-radius: var(--vivi-radius, 8px) !important;
	background: var(--vivi-color-card, #fff) !important;
	color: var(--vivi-color-primary, #996515) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
}

body.vivi-lite-page.vivi-family-product-open {
	overflow: hidden !important;
}

@media (max-width: 860px) {
	body.vivi-lite-page .vivi-family-product-modal {
		inset: 0 !important;
		z-index: var(--vivi-mobile-sheet-z-index, 99980) !important;
		display: block !important;
		padding: 0 !important;
		opacity: 1 !important;
		pointer-events: none !important;
		background: transparent !important;
		transition: none !important;
	}

	body.vivi-lite-page .vivi-family-product-modal.is-open {
		pointer-events: auto !important;
	}

	body.vivi-lite-page .vivi-family-product-modal[hidden] {
		display: none !important;
	}

	body.vivi-lite-page .vivi-family-product-backdrop {
		background: var(--vivi-mobile-sheet-backdrop-bg, transparent) !important;
		backdrop-filter: blur(var(--vivi-mobile-sheet-backdrop-blur, 0px)) !important;
		-webkit-backdrop-filter: blur(var(--vivi-mobile-sheet-backdrop-blur, 0px)) !important;
	}

	body.vivi-lite-page .vivi-family-product-panel,
	body.admin-bar.vivi-lite-page .vivi-family-product-panel {
		position: absolute !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		width: var(--vivi-mobile-sheet-width, 100%) !important;
		max-width: var(--vivi-mobile-sheet-max-width, 100%) !important;
		height: var(--vivi-mobile-sheet-height) !important;
		max-height: var(--vivi-mobile-sheet-max-height) !important;
		padding: 0 !important;
		border: 0 !important;
		border-top: var(--vivi-mobile-sheet-border-top) !important;
		border-radius: var(--vivi-mobile-sheet-radius) !important;
		background: var(--vivi-mobile-sheet-bg) !important;
		box-shadow: var(--vivi-mobile-sheet-shadow) !important;
		outline: none !important;
		overflow: hidden !important;
		overscroll-behavior: contain !important;
		box-sizing: border-box !important;
		transform: var(--vivi-mobile-sheet-transform-closed) !important;
		transition: var(--vivi-mobile-sheet-transition) !important;
		will-change: transform !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	body.vivi-lite-page .vivi-family-product-modal.is-open .vivi-family-product-panel {
		transform: var(--vivi-mobile-sheet-transform-open, translateY(0)) !important;
	}

	body.vivi-lite-page .vivi-family-product-sheet-handle {
		position: absolute !important;
		top: var(--vivi-mobile-sheet-handle-top, 8px) !important;
		left: 50% !important;
		z-index: 6 !important;
		display: block !important;
		width: var(--vivi-mobile-sheet-handle-width, 38px) !important;
		height: var(--vivi-mobile-sheet-handle-height, 4px) !important;
		margin: 0 !important;
		border-radius: var(--vivi-radius, 8px) !important;
		background: var(--vivi-mobile-sheet-handle-bg, #c4c7c5) !important;
		transform: translateX(-50%) !important;
	}

	body.vivi-lite-page .vivi-family-product-close {
		position: absolute !important;
		top: var(--vivi-mobile-sheet-close-top, 18px) !important;
		right: var(--vivi-mobile-sheet-close-right, 14px) !important;
		z-index: 7 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: var(--vivi-mobile-sheet-close-size, 36px) !important;
		height: var(--vivi-mobile-sheet-close-size, 36px) !important;
		min-width: var(--vivi-mobile-sheet-close-size, 36px) !important;
		min-height: var(--vivi-mobile-sheet-close-size, 36px) !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: var(--vivi-radius, 8px) !important;
		background: var(--vivi-mobile-sheet-close-bg, rgba(17, 24, 39, .06)) !important;
		color: var(--vivi-mobile-sheet-close-color, var(--vivi-color-heading, #111)) !important;
		box-shadow: none !important;
		font-size: 0 !important;
		line-height: 1 !important;
		cursor: pointer !important;
	}

	body.vivi-lite-page .vivi-family-product-close::before {
		display: none !important;
		content: none !important;
	}

	body.vivi-lite-page .vivi-family-product-close span {
		display: block !important;
		color: currentColor !important;
		font-size: 22px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		transform: translateY(-1px) !important;
	}

	body.vivi-lite-page .vivi-family-product-head {
		position: relative !important;
		z-index: 5 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		flex: 0 0 var(--vivi-mobile-sheet-header-height, 72px) !important;
		min-height: var(--vivi-mobile-sheet-header-height, 72px) !important;
		margin: 0 !important;
		padding: var(--vivi-mobile-sheet-header-padding, 18px 58px 10px 18px) !important;
		border: 0 !important;
		background: var(--vivi-mobile-sheet-header-bg, var(--vivi-color-card, #fff)) !important;
		box-sizing: border-box !important;
	}

	body.vivi-lite-page .vivi-family-product-title-wrap {
		display: flex !important;
		min-width: 0 !important;
		flex-direction: column !important;
		gap: 2px !important;
		padding-top: 2px !important;
	}

	body.vivi-lite-page .vivi-family-product-title-wrap > span {
		display: block !important;
		margin: 0 !important;
		color: var(--vivi-mobile-sheet-kicker-color, var(--vivi-color-text-muted, #7A7470)) !important;
		font-size: 11px !important;
		font-weight: 500 !important;
		letter-spacing: 0 !important;
		line-height: 1.25 !important;
		text-transform: none !important;
	}

	body.vivi-lite-page .vivi-family-product-head h2 {
		overflow: hidden !important;
		margin: 0 !important;
		color: var(--vivi-mobile-sheet-title-color, var(--vivi-color-heading, #393432)) !important;
		font-family: var(--vivi-font-heading, inherit) !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	body.vivi-lite-page .vivi-family-product-body {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		padding: var(--vivi-mobile-sheet-body-padding) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
	}

	body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-section {
		padding: 16px !important;
		border-radius: var(--vivi-radius, 8px) !important;
	}

	body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-main-img {
		aspect-ratio: 16 / 10 !important;
	}

	body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-title {
		font-size: 21px !important;
	}

	body.vivi-lite-page .vivi-family-product-body .vivi-ticket-popup-price-row strong {
		font-size: 24px !important;
	}
}

/* 0.12.04: VIVI Family product sheet scroll and close-button contract.
   The family product content is taller than the standard QR/manager sheets, so the sheet panel itself
   owns vertical scrolling. The close button lives inside the sticky header so its position is anchored
   to the sheet, not to the viewport. */
body.vivi-lite-page .vivi-family-product-panel {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
}

body.vivi-lite-page .vivi-family-product-head {
	position: sticky !important;
	top: 0 !important;
	z-index: 8 !important;
	overflow: visible !important;
}

body.vivi-lite-page .vivi-family-product-close {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	z-index: 12 !important;
	margin: 0 !important;
}

@media (max-width: 860px) {
	body.vivi-lite-page .vivi-family-product-panel,
	body.admin-bar.vivi-lite-page .vivi-family-product-panel {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		touch-action: pan-y !important;
	}

	body.vivi-lite-page .vivi-family-product-body {
		flex: 0 0 auto !important;
		min-height: auto !important;
		height: auto !important;
		overflow: visible !important;
		-webkit-overflow-scrolling: auto !important;
		overscroll-behavior: auto !important;
		padding: var(--vivi-mobile-sheet-body-padding) !important;
	}

	body.vivi-lite-page .vivi-family-product-head {
		position: sticky !important;
		top: 0 !important;
		z-index: 9 !important;
		box-shadow: 0 1px 0 var(--vivi-color-border, rgba(31,26,23,.12)) !important;
	}

	body.vivi-lite-page .vivi-family-product-sheet-handle {
		position: sticky !important;
		top: var(--vivi-mobile-sheet-handle-top, 8px) !important;
		z-index: 10 !important;
		flex: 0 0 var(--vivi-mobile-sheet-handle-height, 4px) !important;
		margin: var(--vivi-mobile-sheet-handle-top, 8px) auto calc(-1 * var(--vivi-mobile-sheet-handle-height, 4px)) !important;
		transform: none !important;
	}

	body.vivi-lite-page .vivi-family-product-close {
		position: absolute !important;
		top: var(--vivi-mobile-sheet-close-top, 18px) !important;
		right: var(--vivi-mobile-sheet-close-right, 14px) !important;
		z-index: 12 !important;
		margin: 0 !important;
		transform: none !important;
	}
}