/* =========================================================
   VIVI Lite Home
   Version: 0.9.27
   Purpose: 首頁第一版 / B 方案輕量獨立輸出模式
========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.vivi-lite-home-page {
	margin: 0;
	background: var(--vivi-color-bg);
	color: var(--vivi-color-text);
	font-family: var(--vivi-font-body);
	font-size: var(--vivi-fs-body);
	line-height: var(--vivi-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
body.vivi-lite-home-page a { color: inherit; text-decoration: none; }
body.vivi-lite-home-page img { display: block; max-width: 100%; height: auto; }
body.vivi-lite-home-page button { font: inherit; cursor: pointer; }

body.vivi-lite-home-page.vivi-mobile-menu-open {
	overflow: hidden;
	touch-action: none;
}
.vivi-page { width: 100%; min-height: 100vh; padding-top: 76px !important; overflow-x: hidden; overflow-y: visible; background: var(--vivi-color-bg); }

:root {
	/* 首頁舊變數名稱保留為相容層，實際值統一指向 vivi-base.css */
	--vivi-black: var(--vivi-color-black);
	--vivi-soft-black: var(--vivi-color-black-soft);
	--vivi-blue: var(--vivi-color-red);
	--vivi-yellow: var(--vivi-color-accent);
	--vivi-bg: var(--vivi-color-bg);
	--vivi-bg-soft: var(--vivi-color-bg-soft);
	--vivi-bg-warm: var(--vivi-color-bg-warm);
	--vivi-border: var(--vivi-color-border);
	--vivi-border-strong: var(--vivi-color-border-strong);
	--vivi-muted: var(--vivi-color-text-muted);
	--vivi-light: var(--vivi-color-text-light);
	--vivi-shadow: var(--vivi-shadow-card);
	--vivi-wide: var(--vivi-container-wide);
	--vivi-status-soldout: var(--vivi-color-red);
}

/* Header */
.vivi-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99999 !important;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	height: 76px;
	padding: 0 48px;
	background: color-mix(in srgb, var(--vivi-color-bg) 90%, transparent);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--vivi-border);
}
.admin-bar .vivi-header { top: 32px !important; }
.vivi-logo { display: inline-flex; align-items: center; width: 228px; min-width: 188px; line-height: 1; }
.vivi-logo img { display: block; width: 100%; height: auto; }
.vivi-nav { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--vivi-soft-black); font-size: 15px; font-weight: var(--vivi-fw-bold); }
.vivi-nav-menu { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.vivi-nav-item { position: relative; display: flex; align-items: center; margin: 0; padding: 0; }
.vivi-nav-item > a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; opacity: 0.9; transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; }
.vivi-nav-item.has-submenu > a::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.62; }
.vivi-nav-item:hover > a, .vivi-nav-item:focus-within > a { color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); opacity: 1; }
.vivi-submenu { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 60; display: grid; gap: 4px; min-width: 168px; padding: 10px; background: color-mix(in srgb, var(--vivi-color-bg) 98%, transparent); border: 1px solid var(--vivi-border); border-radius: 16px; box-shadow: var(--vivi-shadow-soft); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.vivi-nav-item:hover .vivi-submenu, .vivi-nav-item:focus-within .vivi-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vivi-submenu a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; color: var(--vivi-soft-black); border-radius: 10px; white-space: nowrap; font-size: var(--vivi-fs-small); font-weight: var(--vivi-fw-bold); transition: color .18s ease, background-color .18s ease; }
.vivi-submenu a:hover, .vivi-submenu a:focus { color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }
.vivi-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: var(--vivi-fs-small); font-weight: var(--vivi-fw-bold); }
.vivi-login { padding: 10px 4px; color: var(--vivi-soft-black); }
.vivi-register { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 18px; color: var(--vivi-color-text-inverse) !important; background: var(--vivi-black); border-radius: 999px; }
.vivi-cart-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.vivi-cart {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	margin: 0 2px 0 0;
	color: var(--vivi-soft-black);
	line-height: 1 !important;
	cursor: pointer;
}
.vivi-cart span { font-size: 0 !important; width: 0; height: 0; overflow: hidden; }
.vivi-cart .vivi-bb-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	font-size: 29px !important;
	line-height: 1 !important;
}
.vivi-cart .vivi-bb-icon::before {
	display: block !important;
	width: 1em !important;
	height: 1em !important;
	margin: 0 !important;
	line-height: 1 !important;
}
.vivi-cart b {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 5px !important;
	color: var(--vivi-color-text-inverse) !important;
	background: var(--vivi-blue) !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: var(--vivi-fw-heavy) !important;
	line-height: 1 !important;
	box-shadow: 0 0 0 2px var(--vivi-color-bg) !important;
}
.vivi-mini-cart {
	position: absolute;
	top: calc(100% + 10px);
	right: -6px;
	z-index: 80;
	width: 380px;
	max-width: calc(100vw - 28px);
	padding: 18px;
	background: var(--vivi-color-card);
	border: 1px solid var(--vivi-border);
	border-radius: 14px;
	box-shadow: 0 22px 56px color-mix(in srgb, var(--vivi-color-black) 14%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.vivi-cart-wrap.is-open .vivi-mini-cart { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.vivi-mini-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.vivi-mini-cart-head strong { color: var(--vivi-black); font-size: 18px; font-weight: var(--vivi-fw-heavy); }
.vivi-mini-cart-head a { color: var(--vivi-blue); font-size: 13px; font-weight: var(--vivi-fw-heavy); white-space: nowrap; }
.vivi-mini-cart-items { display: grid; gap: 14px; max-height: 310px; overflow: auto; padding-right: 2px; }
.vivi-mini-cart-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.vivi-mini-cart-thumb { display: block; width: 46px; height: 46px; overflow: hidden; border-radius: 8px; background: var(--vivi-bg-soft); }
.vivi-mini-cart-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vivi-mini-cart-title { display: block; color: var(--vivi-black); font-size: 14px; font-weight: var(--vivi-fw-heavy); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivi-mini-cart-meta { margin-top: 5px; color: var(--vivi-blue); font-size: 13px; font-weight: var(--vivi-fw-bold); }
.vivi-mini-cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--vivi-blue); border-radius: 999px; font-size: 16px; font-weight: var(--vivi-fw-heavy); }
.vivi-mini-cart-remove:hover { background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }
.vivi-mini-cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vivi-border); }
.vivi-mini-cart-subtotal { display: flex; align-items: center; gap: 4px; color: var(--vivi-blue); font-size: 14px; font-weight: var(--vivi-fw-heavy); }
.vivi-mini-cart-subtotal .amount { color: var(--vivi-blue); }
.vivi-mini-cart-checkout { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; color: var(--vivi-color-text-inverse) !important; background: var(--vivi-black); border-radius: 10px; font-size: 13px; font-weight: var(--vivi-fw-heavy); white-space: nowrap; }
.vivi-mini-cart-empty { padding: 20px 4px; color: var(--vivi-muted); font-size: 14px; font-weight: var(--vivi-fw-bold); text-align: center; }

.vivi-account-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.vivi-account-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 4px 8px 4px 12px;
	color: var(--vivi-soft-black);
	background: transparent;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: var(--vivi-fw-heavy);
	line-height: 1;
	cursor: pointer;
}
.vivi-account-toggle:hover,
.vivi-account-wrap.is-open .vivi-account-toggle { background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); color: var(--vivi-blue); }
.vivi-account-name { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivi-account-avatar,
.vivi-account-head-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; border-radius: 999px; background: var(--vivi-bg-soft); }
.vivi-account-avatar { width: 34px; height: 34px; }
.vivi-account-avatar img,
.vivi-account-head-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vivi-account-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 82;
	width: 280px;
	max-width: calc(100vw - 28px);
	padding: 18px;
	background: var(--vivi-color-card);
	border: 1px solid var(--vivi-border);
	border-radius: 14px;
	box-shadow: 0 22px 56px color-mix(in srgb, var(--vivi-color-black) 14%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.vivi-account-wrap.is-open .vivi-account-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.vivi-account-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px; border-radius: 12px; }
.vivi-account-head:hover { background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }
.vivi-account-head-avatar { width: 52px; height: 52px; }
.vivi-account-head-text { display: grid; gap: 4px; min-width: 0; }
.vivi-account-head-text strong { color: var(--vivi-black); font-size: 16px; font-weight: var(--vivi-fw-heavy); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivi-account-head-text em { color: var(--vivi-blue); font-size: 13px; font-style: normal; font-weight: var(--vivi-fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivi-account-menu { display: grid; gap: 4px; }
.vivi-account-menu a { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; color: var(--vivi-muted); border-radius: 10px; font-size: 14px; font-weight: var(--vivi-fw-bold); }
.vivi-account-menu a:hover { color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }
.vivi-account-menu .vivi-bb-icon { color: var(--vivi-blue); font-size: 18px; line-height: 1; }

.vivi-menu-button { display: none; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; }
.vivi-menu-button span { display: block; width: 23px; height: 2px; margin: 5px 0; background: var(--vivi-black); border-radius: 999px; }
.vivi-mobile-menu { display: none; }

/* Common */
.vivi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--vivi-btn-height); padding: 0 var(--vivi-btn-padding-x); border: 1px solid transparent; border-radius: var(--vivi-btn-radius); font-size: var(--vivi-fs-button); font-weight: var(--vivi-fw-bold); line-height: 1; white-space: nowrap; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; }
.vivi-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.vivi-btn-dark { color: var(--vivi-color-text-inverse) !important; background: var(--vivi-black); border-color: var(--vivi-black); }
.vivi-btn-light { color: var(--vivi-black); background: color-mix(in srgb, var(--vivi-color-card) 66%, transparent); border-color: var(--vivi-border-strong); }
.vivi-btn-red { color: var(--vivi-color-text-inverse) !important; background: var(--vivi-blue); border-color: var(--vivi-blue); }
.vivi-kicker, .vivi-section-kicker { margin: 0 0 12px; color: var(--vivi-blue); font-size: 13px; font-weight: var(--vivi-fw-heavy); letter-spacing: .12em; }
.vivi-section { padding: 72px 64px; }
.vivi-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: min(100%, var(--vivi-container)); margin: 0 auto 30px; }
.vivi-section-head h2, .vivi-brand-intro h2, .vivi-family h2 { margin: 0; color: var(--vivi-black); font-size: var(--vivi-fs-h2); font-weight: var(--vivi-fw-heavy); line-height: 1.18; letter-spacing: .04em; }
.vivi-section-head p:not(.vivi-section-kicker), .vivi-brand-intro p:not(.vivi-section-kicker), .vivi-family-copy > p:not(.vivi-section-kicker) { margin: 8px 0 0; color: var(--vivi-muted); font-size: 15px; font-weight: var(--vivi-fw-semibold); }
.vivi-section-head > a { color: var(--vivi-black); font-size: 15px; font-weight: var(--vivi-fw-heavy); border-bottom: 1px solid currentColor; }

/* Hero */
.vivi-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr);
	align-items: center;
	min-height: 650px;
	padding: 86px 64px 72px;
	background:
		radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--vivi-color-red) 18%, transparent), transparent 28%),
		radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--vivi-color-accent) 18%, transparent), transparent 24%),
		linear-gradient(115deg, var(--vivi-color-card-warm) 0%, var(--vivi-color-bg) 100%);
	border-bottom: 1px solid var(--vivi-border);
}
.vivi-hero::after { content: ""; position: absolute; left: 64px; right: 64px; bottom: 0; height: 1px; background: color-mix(in srgb, var(--vivi-color-black) 6%, transparent); }
.vivi-hero-copy { position: relative; z-index: 2; max-width: 600px; align-self: center; }
.vivi-hero h1 { margin: 0; color: var(--vivi-black); font-size: var(--vivi-fs-hero); font-weight: var(--vivi-fw-heavy); line-height: 1.1; letter-spacing: .035em; }
.vivi-hero-text { max-width: 540px; margin: 24px 0 0; color: var(--vivi-soft-black); font-size: 17px; font-weight: var(--vivi-fw-semibold); line-height: 1.9; }
.vivi-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.vivi-hero-mini { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vivi-hero-mini span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; color: var(--vivi-soft-black); background: color-mix(in srgb, var(--vivi-color-card) 64%, transparent); border: 1px solid var(--vivi-border); border-radius: 999px; font-size: var(--vivi-fs-xs); font-weight: var(--vivi-fw-bold); }
.vivi-hero-visual { position: relative; min-height: 480px; align-self: center; }
.vivi-hero-image { width: 100%; height: min(480px, 38vw); min-height: 420px; object-fit: cover; object-position: center; border-radius: 34px; border: 1px solid color-mix(in srgb, var(--vivi-color-card) 82%, transparent); box-shadow: var(--vivi-shadow); background: var(--vivi-bg-soft); }

/* Benefits */
.vivi-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: min(100% - 80px, var(--vivi-container)); margin: -26px auto 0; position: relative; z-index: 5; padding: 10px; background: color-mix(in srgb, var(--vivi-color-card) 94%, var(--vivi-color-bg-soft) 6%); border: 1px solid var(--vivi-border); border-radius: 24px; box-shadow: var(--vivi-shadow-soft); backdrop-filter: blur(12px); }
.vivi-benefit-card { position: relative; display: block; min-height: 116px; padding: 22px 20px 20px; color: inherit; border-radius: 18px; text-align: left; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.vivi-benefit-card + .vivi-benefit-card { border-left: 1px solid color-mix(in srgb, var(--vivi-color-black) 8%, transparent); }
.vivi-benefit-card:hover, .vivi-benefit-card:focus-visible { background: var(--vivi-color-bg-soft); transform: translateY(-1px); outline: none; }
.vivi-benefit-icon { display: none; align-items: center; justify-content: center; min-width: 34px; height: 22px; margin: 0 0 14px; color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 10%, transparent); border-radius: 999px; font-size: 11px; font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; }
.vivi-benefits strong { display: block; color: var(--vivi-black); font-size: var(--vivi-fs-body-lg); font-weight: var(--vivi-fw-heavy); line-height: 1.25; letter-spacing: .02em; }
.vivi-benefit-card > span:last-child { display: block; margin-top: 7px; color: var(--vivi-muted); font-size: 13px; font-weight: var(--vivi-fw-semibold); line-height: 1.55; }

/* Deals */
.vivi-deals { --vivi-deal-card-height: 392px; background: var(--vivi-bg); }
.vivi-deals-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.vivi-deals-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: min(100%, var(--vivi-container)); margin: 0 auto; align-items: stretch; }
.vivi-deals-countdown { display: flex; flex-direction: column; min-width: 0; height: auto; min-height: var(--vivi-deal-card-height); align-self: stretch; background: color-mix(in srgb, var(--vivi-color-card) 72%, transparent); border: 1px solid var(--vivi-border); border-radius: 18px; box-shadow: var(--vivi-shadow-soft); }
.vivi-deals-countdown-card { overflow: hidden; padding: 0; height: auto; background: linear-gradient(135deg, var(--vivi-color-card) 0%, color-mix(in srgb, var(--vivi-color-bg-warm) 82%, transparent) 100%); border-radius: 18px; }
.vivi-countdown-banner { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center; background: var(--vivi-bg-soft); }
.vivi-countdown-panel { display: grid; flex: 1 1 auto; align-content: center; gap: 12px; padding: 14px 18px 20px; }
.vivi-countdown-label { color: var(--vivi-light); font-size: var(--vivi-fs-xs); font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; text-transform: uppercase; }
.vivi-countdown-time { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vivi-countdown-time span { display: grid; align-content: center; justify-items: center; min-height: 64px; background: var(--vivi-color-card); border: 1px solid color-mix(in srgb, var(--vivi-color-black) 8%, transparent); border-radius: 14px; }
.vivi-countdown-time strong { color: var(--vivi-black); font-size: 24px; font-weight: var(--vivi-fw-heavy); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.vivi-countdown-time em { margin-top: 5px; color: var(--vivi-light); font-size: 11px; font-style: normal; font-weight: var(--vivi-fw-bold); }
.vivi-deals-carousel { position: relative; grid-column: span 3; min-width: 0; background: transparent; }
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: none !important; }
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: block !important; }
.vivi-deals-track { position: relative; min-height: var(--vivi-deal-card-height); overflow: hidden; background: transparent; }
.vivi-deals-slide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; opacity: 0; pointer-events: none; position: absolute; inset: 0; background: transparent; transform: translateX(18px); transition: opacity .34s ease, transform .34s ease; }
.vivi-deals-slide.is-active { opacity: 1; pointer-events: auto; position: relative; transform: translateX(0); }
.vivi-deals-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 16px; }
.vivi-deals-carousel-nav button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--vivi-black); background: var(--vivi-color-card); border: 1px solid var(--vivi-border); border-radius: 999px; font-size: 22px; font-weight: var(--vivi-fw-bold); line-height: 1; cursor: pointer; box-shadow: 0 8px 18px color-mix(in srgb, var(--vivi-color-black) 4%, transparent); }
.vivi-deals-carousel-nav button:hover { border-color: color-mix(in srgb, var(--vivi-color-red) 42%, transparent); color: var(--vivi-blue); }
.vivi-deals-dots { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.vivi-deals-dots button { width: 10px; height: 10px; padding: 0; border: 0; background: color-mix(in srgb, var(--vivi-color-black) 18%, transparent); box-shadow: none; font-size: 0; }
.vivi-deals-dots button.is-active { width: 36px; background: var(--vivi-blue); }

.vivi-deals-carousel img,
.vivi-brand-carousel img,
.vivi-life-carousel img,
.vivi-deals-carousel a,
.vivi-brand-carousel a,
.vivi-life-carousel a { -webkit-user-drag: none; }

/* Carousel nav: keep prev / dots / next grouped together */
.vivi-deals-carousel-nav,
.vivi-brand-carousel-nav,
.vivi-life-carousel-nav {
	justify-content: center !important;
}
.vivi-deals-carousel-nav .vivi-deals-dots,
.vivi-brand-carousel-nav .vivi-deals-dots,
.vivi-life-carousel-nav .vivi-deals-dots {
	flex: 0 0 auto !important;
}

.vivi-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: min(100%, var(--vivi-container)); margin: 0 auto; }
.vivi-product-card, .vivi-category-card, .vivi-story-card { overflow: hidden; background: var(--vivi-color-card); border: 1px solid var(--vivi-border); border-radius: 18px; box-shadow: var(--vivi-shadow-soft); transition: transform .2s ease, box-shadow .2s ease; }
.vivi-product-card:hover, .vivi-category-card:hover, .vivi-story-card:hover { transform: translateY(-2px); box-shadow: var(--vivi-shadow); }
.vivi-product-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.vivi-product-link:hover, .vivi-product-link:focus { color: inherit; text-decoration: none; }

.vivi-deals .vivi-product-card { display: flex; flex-direction: column; height: var(--vivi-deal-card-height); }
.vivi-deals .vivi-product-image { flex: 0 0 190px; min-height: 0; }
.vivi-deals .vivi-product-body { display: flex; flex: 1; flex-direction: column; }
.vivi-deals .vivi-product-body div { margin-top: auto; }
.vivi-product-image { position: relative; min-height: 190px; background-size: cover; background-position: center; }
.vivi-product-image span { position: absolute; left: 14px; top: 14px; display: inline-flex; min-height: 26px; align-items: center; padding: 0 10px; color: var(--vivi-color-text-inverse); background: color-mix(in srgb, var(--vivi-color-black) 78%, transparent); border-radius: 999px; font-size: 11px; font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; }
.vivi-product-soldout { position: absolute; right: 14px; top: 14px; display: inline-flex; min-height: 26px; align-items: center; padding: 0 10px; color: var(--vivi-color-text-inverse); background: var(--vivi-status-soldout); border-radius: 999px; font-size: 11px; font-style: normal; font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; }
.vivi-product-card.is-soldout .vivi-product-image::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--vivi-color-bg-soft) 34%, transparent); pointer-events: none; }
.vivi-product-card.is-soldout .vivi-product-image span, .vivi-product-card.is-soldout .vivi-product-soldout { z-index: 1; }
.vivi-product-body { padding: 16px 16px 18px; }
.vivi-product-body p { margin: 0 0 8px; color: var(--vivi-light); font-size: var(--vivi-fs-xs); font-weight: var(--vivi-fw-bold); }
.vivi-product-body h3 { min-height: 48px; margin: 0 0 12px; font-size: 18px; line-height: 1.42; font-weight: var(--vivi-fw-heavy); }
.vivi-product-body .vivi-product-brand { margin: -4px 0 12px; color: var(--vivi-color-text); font-size: 13px; font-weight: var(--vivi-fw-bold); line-height: 1.4; }
.vivi-product-body strong { color: var(--vivi-blue); font-size: var(--vivi-fs-price); font-weight: var(--vivi-fw-heavy); }
.vivi-product-body del { margin-left: 8px; color: var(--vivi-light); font-size: 13px; font-weight: var(--vivi-fw-semibold); }
.vivi-img-food { background-image: linear-gradient(135deg, var(--vivi-color-black), var(--vivi-color-red) 45%, var(--vivi-color-bg-warm)); }
.vivi-img-hotel { background-image: linear-gradient(135deg, var(--vivi-color-black-soft), var(--vivi-color-bg-warm) 52%, var(--vivi-color-bg)); }
.vivi-img-workshop { background-image: linear-gradient(135deg, var(--vivi-color-bg), var(--vivi-color-red) 46%, var(--vivi-color-black-soft)); }
.vivi-img-coffee { background-image: linear-gradient(135deg, var(--vivi-color-black), var(--vivi-color-accent) 42%, var(--vivi-color-bg-soft)); }
.vivi-img-care { background-image: linear-gradient(135deg, var(--vivi-color-bg), var(--vivi-color-bg-warm) 48%, var(--vivi-color-black-soft)); }
.vivi-img-family { background-image: linear-gradient(135deg, var(--vivi-color-bg-warm), var(--vivi-color-red) 54%, var(--vivi-color-bg)); }
.vivi-img-select { background-image: linear-gradient(135deg, var(--vivi-color-black-soft), var(--vivi-color-bg-warm) 48%, var(--vivi-color-bg)); }
.vivi-img-bistro { background-image: linear-gradient(135deg, var(--vivi-color-black), var(--vivi-color-red) 46%, var(--vivi-color-red)); }
.vivi-img-flower { background-image: linear-gradient(135deg, var(--vivi-color-bg-warm), var(--vivi-color-bg) 42%, var(--vivi-color-red)); }

/* Brand map */
.vivi-brand-map { display: grid; grid-template-columns: .76fr 1.24fr; gap: 42px; align-items: center; background: linear-gradient(135deg, var(--vivi-color-bg-warm) 0%, var(--vivi-color-bg) 100%); }
.vivi-brand-intro { justify-self: end; width: 100%; max-width: 380px; }
.vivi-brand-intro .vivi-btn { margin-top: 26px; }
.vivi-brand-carousel { width: 100%; max-width: 900px; min-width: 0; }
.vivi-brand-track { position: relative; min-height: 250px; overflow: hidden; background: transparent; }
.vivi-brand-slide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; align-items: stretch; opacity: 0; pointer-events: none; position: absolute; inset: 0; background: transparent; transform: translateX(18px); transition: opacity .34s ease, transform .34s ease; }
.vivi-brand-slide.is-active { opacity: 1; pointer-events: auto; position: relative; transform: translateX(0); }
.vivi-category-card { display: flex; flex-direction: column; height: 100%; min-height: 248px; padding: 14px 14px 22px; text-align: center; }
.vivi-category-image { display: block; min-height: 135px; border-radius: 14px; background-size: cover; background-position: center; }
.vivi-category-image-empty { background-image: linear-gradient(135deg, var(--vivi-color-red), var(--vivi-color-bg-warm)); }
.vivi-category-card h3 { margin: 18px 0 5px; font-size: 19px; font-weight: var(--vivi-fw-heavy); }
.vivi-category-card p { margin: 0; min-height: 36px; color: var(--vivi-muted); font-size: 13px; font-weight: var(--vivi-fw-semibold); line-height: 1.45; }
.vivi-brand-carousel-nav { margin-top: 22px; }

/* Editorial */
.vivi-life { background: var(--vivi-bg-soft); }
.vivi-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(100%, var(--vivi-container)); margin: 0 auto; align-items: stretch; }
.vivi-life-carousel { width: min(100%, var(--vivi-container)); margin: 0 auto; }
.vivi-life-track { position: relative; overflow: hidden; background: transparent; }
.vivi-life-slide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; width: 100%; opacity: 0; pointer-events: none; position: absolute; inset: 0; background: transparent; transform: translateX(18px); transition: opacity .34s ease, transform .34s ease; }
.vivi-life-slide.is-active { opacity: 1; pointer-events: auto; position: relative; transform: translateX(0); }
.vivi-life-carousel-nav { margin-top: 16px; }
.vivi-story-card { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.vivi-story-card > div:last-child { display: flex; flex-direction: column; min-height: 0; padding: 18px; }
.vivi-story-card .vivi-story-image-link { display: block; margin: 0; border: 0; }
.vivi-story-image { display: block; min-height: 190px; background-size: cover; background-position: center; }
.vivi-story-card p { margin: 0 0 8px; color: var(--vivi-blue); font-size: var(--vivi-fs-xs); font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; }
.vivi-story-card h3 { margin: 0; min-height: 56px; font-size: var(--vivi-fs-h3); font-weight: var(--vivi-fw-heavy); line-height: 1.42; }
.vivi-story-card h3 a { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; border: 0; }
.vivi-story-card a { display: inline-flex; margin-top: 18px; font-size: var(--vivi-fs-small); font-weight: var(--vivi-fw-heavy); border-bottom: 1px solid currentColor; }
.vivi-story-card .vivi-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 8px; color: var(--vivi-blue); font-size: var(--vivi-fs-xs); font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; }
.vivi-story-card .vivi-story-group-link,
.vivi-story-card .vivi-story-user-link { margin-top: 0 !important; color: inherit; font-size: inherit !important; font-weight: inherit; letter-spacing: inherit; border-bottom: 1px solid currentColor; }
.vivi-story-card .vivi-story-meta-sep { margin: 0 .35em; }
.vivi-story-excerpt { margin-top: 12px; color: var(--vivi-color-text-muted); font-size: var(--vivi-fs-small); font-weight: var(--vivi-fw-semibold); line-height: 1.7; }
.vivi-story-readmore { margin-top: auto !important; padding-top: 18px; align-self: flex-start; }
.vivi-story-a { background-image: linear-gradient(135deg, var(--vivi-color-accent), var(--vivi-color-bg) 42%, var(--vivi-color-red)); }
.vivi-story-b { background-image: linear-gradient(135deg, var(--vivi-color-black), var(--vivi-color-black-soft) 44%, var(--vivi-color-bg-warm)); }
.vivi-story-c { background-image: linear-gradient(135deg, var(--vivi-color-red), var(--vivi-color-card-warm) 54%, var(--vivi-color-accent)); }

/* Family */
.vivi-family { display: grid; grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr); gap: 44px; align-items: center; width: min(100% - 128px, var(--vivi-container)); margin: 72px auto; padding: 46px 52px; background: var(--vivi-color-card); border: 1px solid var(--vivi-border); border-radius: 30px; box-shadow: var(--vivi-shadow-soft); }
.vivi-family-copy { max-width: 560px; }
.vivi-family .vivi-btn { margin-top: 28px; }
.vivi-family-panel { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.vivi-family-guide-img { display: block; width: 100%; max-width: 640px; height: auto; object-fit: contain; border-radius: 22px; box-shadow: none; }

/* Footer */
.vivi-footer { display: block; padding: 28px 64px; color: color-mix(in srgb, var(--vivi-color-text-inverse) 76%, transparent); background: var(--vivi-black); border-top: 0; text-align: center; }
.vivi-footer-line { max-width: var(--vivi-container); margin: 0 auto; font-size: 13px; font-weight: var(--vivi-fw-semibold); line-height: 1.9; letter-spacing: .01em; }
.vivi-footer a { display: inline; min-height: 0; padding: 0; color: var(--vivi-orange); border: 0; border-radius: 0; font-size: inherit; font-weight: var(--vivi-fw-heavy); text-decoration: none; }
.vivi-footer a:hover, .vivi-footer a:focus { color: var(--vivi-color-text-inverse); }

@media (max-width: 1120px) {
	.vivi-header { padding: 0 28px; }
	.vivi-nav { gap: 18px; }
	.vivi-hero { grid-template-columns: 1fr; gap: 24px; padding: 72px 36px 56px; }
	.vivi-hero-copy { max-width: 760px; }
	.vivi-hero-visual { min-height: auto; }
	.vivi-hero-image { height: 430px; min-height: 430px; }
	.vivi-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vivi-brand-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vivi-deals-layout { grid-template-columns: 1fr; }
	.vivi-deals-carousel { grid-column: auto; }
	.vivi-deals-slide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vivi-brand-map { grid-template-columns: 1fr; }
	.vivi-brand-intro, .vivi-brand-carousel { justify-self: center; max-width: var(--vivi-container); }
}


@media (min-width: 861px) {
	.vivi-deals-carousel-desktop { display: block !important; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: none !important; }
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: block !important; }
}

@media (max-width: 860px) {
	.admin-bar .vivi-header { top: 46px !important; }
	.vivi-page { padding-top: 66px !important; }
	.vivi-header { height: 66px; padding: 0 16px; }
	.vivi-logo { width: 188px; min-width: 168px; }
	.vivi-logo-main { font-size: 27px; }
	.vivi-logo-style { font-size: var(--vivi-fs-h3); }
	.vivi-logo-red, .vivi-logo-x { font-size: var(--vivi-fs-xs); }
	.vivi-nav, .vivi-login, .vivi-register, .vivi-cart-wrap, .vivi-account-wrap { display: none; }
	.vivi-menu-button { display: block; }
	.vivi-mobile-menu { position: fixed; left: 0; right: 0; top: 66px; z-index: 45; display: none; max-height: calc(100vh - 66px); padding: 0 18px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--vivi-color-bg); border-bottom: 1px solid var(--vivi-border); box-shadow: 0 18px 42px color-mix(in srgb, var(--vivi-color-black) 8%, transparent); }
	.admin-bar .vivi-mobile-menu { top: 112px; max-height: calc(100vh - 112px); }
	.vivi-mobile-menu.is-open { display: block; }
	.vivi-mobile-group { display: block; padding: 18px 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--vivi-color-black) 8%, transparent); }
	.vivi-mobile-group strong { display: block; margin: 0 0 10px; color: var(--vivi-black); font-size: 13px; font-weight: var(--vivi-fw-heavy); letter-spacing: .08em; line-height: 1.2; }
	.vivi-mobile-group a { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 2px; color: var(--vivi-soft-black); background: transparent; border: 0; border-radius: 0; font-size: 15px; font-weight: var(--vivi-fw-bold); line-height: 1.35; }
	.vivi-mobile-group a + a { border-top: 1px solid color-mix(in srgb, var(--vivi-color-black) 4.5%, transparent); }
	.vivi-mobile-group a::after { content: ""; width: 7px; height: 7px; margin-left: 14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .28; flex: 0 0 auto; }
	.vivi-mobile-group a:hover, .vivi-mobile-group a:focus { color: var(--vivi-blue); }
	.vivi-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; }
	.vivi-mobile-actions a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; background: var(--vivi-color-card); border: 1px solid color-mix(in srgb, var(--vivi-color-black) 12%, transparent); border-radius: 12px; color: var(--vivi-black); font-size: var(--vivi-fs-small); font-weight: var(--vivi-fw-heavy); box-shadow: 0 8px 20px color-mix(in srgb, var(--vivi-color-black) 3.5%, transparent); }
	.vivi-mobile-actions a:last-child { color: var(--vivi-color-text-inverse); background: var(--vivi-black); border-color: var(--vivi-black); }
	.vivi-hero { min-height: auto; padding: 54px 16px 40px; }
	.vivi-hero::after { left: 16px; right: 16px; }
	.vivi-hero h1 { font-size: 34px; line-height: 1.14; letter-spacing: .025em; }
	.vivi-hero-text { margin-top: 18px; font-size: 15px; line-height: 1.82; }
	.vivi-hero-buttons { display: grid; grid-template-columns: 1fr; margin-top: 26px; }
	.vivi-btn { width: 100%; min-height: var(--vivi-btn-height); padding: 0 var(--vivi-btn-padding-x); font-size: var(--vivi-fs-button); border-radius: var(--vivi-btn-radius); }
	.vivi-hero-mini { margin-top: 18px; }
	.vivi-hero-mini span { width: 100%; justify-content: center; }
	.vivi-hero-visual { min-height: auto; margin-top: 8px; }
	.vivi-hero-image { height: 330px; min-height: 330px; border-radius: 24px; }
	.vivi-benefits { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: -18px; padding: 8px; border-radius: 18px; }
	.vivi-benefit-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: start; min-height: auto; padding: 15px 12px; border-radius: 13px; }
	.vivi-benefit-card + .vivi-benefit-card { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--vivi-color-black) 7.5%, transparent); }
	.vivi-benefit-icon { display: inline-flex; grid-row: 1 / span 2; min-width: 36px; height: 24px; margin: 0; font-size: 10px; }
	.vivi-benefits strong { font-size: 15px; line-height: 1.25; }
	.vivi-benefit-card > span:last-child { margin-top: 3px; font-size: var(--vivi-fs-xs); line-height: 1.45; }
	.vivi-section { padding: 48px 16px; }
	.vivi-section-head { display: block; margin-bottom: 22px; }
	.vivi-section-head h2, .vivi-brand-intro h2, .vivi-family h2 { font-size: 25px; line-height: 1.25; }
	.vivi-section-head > a { display: inline-flex; margin-top: 14px; }
	.vivi-deals-actions { align-items: stretch; gap: 12px; margin-top: 16px; }
	.vivi-deals-countdown { min-width: 0; border-radius: 16px; }
	.vivi-deals-countdown-card { padding: 0; }
	.vivi-countdown-banner { height: 150px; }
	.vivi-countdown-panel { padding: 12px 14px 16px; }
	.vivi-countdown-time span { min-height: 56px; }
	.vivi-countdown-time strong { font-size: 22px; }

	.vivi-product-grid, .vivi-story-grid { grid-template-columns: 1fr; gap: 14px; }
	.vivi-brand-slide { grid-template-columns: 1fr; gap: 14px; }
	.vivi-deals-layout { grid-template-columns: 1fr; }
	.vivi-deals-carousel { grid-column: auto; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: none !important; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: block !important; }
	.vivi-deals-countdown,
	.vivi-deals-countdown-card,
	.vivi-deals .vivi-product-card { height: auto; }
	.vivi-deals-track { min-height: 0; }
	.vivi-deals-slide { grid-template-columns: 1fr; gap: 14px; }
	.vivi-deals-carousel-nav { margin-top: 14px; gap: 10px; }
	.vivi-deals-dots { gap: 8px; }
	.vivi-deals-dots button { width: 9px; height: 9px; }
	.vivi-deals-dots button.is-active { width: 30px; }
	.vivi-product-image, .vivi-story-image { min-height: 178px; }
	.vivi-product-body h3 { min-height: auto; font-size: 17px; }
	.vivi-category-card { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 14px; text-align: left; padding: 12px; }
	.vivi-category-image { min-height: 92px; }
	.vivi-category-card h3 { margin: 0 0 4px; font-size: 18px; }
	.vivi-story-card h3 { min-height: auto; font-size: 19px; }
	.vivi-family { grid-template-columns: 1fr; width: calc(100% - 32px); margin: 48px auto; padding: 28px 20px; border-radius: 24px; gap: 24px; }
	.vivi-family-copy { max-width: none; }
	.vivi-family-panel { justify-content: center; padding: 0; border-radius: 0; }
	.vivi-family-guide-img { width: 100%; max-width: 520px; max-height: none; border-radius: 18px; }
	.vivi-footer { padding: 24px 16px; }
	.vivi-footer-line { font-size: 12px; line-height: 1.8; }
}

@media (max-width: 380px) {
	.vivi-logo { width: 174px; min-width: 154px; gap: 5px; }
	.vivi-logo-main { font-size: 24px; }
	.vivi-logo-style { font-size: 17px; }
	.vivi-hero h1 { font-size: 31px; }
	.vivi-hero-image { height: 300px; min-height: 300px; border-radius: 20px; }
}

@media (max-width: 700px) {
	.vivi-life-slide { grid-template-columns: 1fr; gap: 14px; }
	.vivi-life-carousel-nav { margin-top: 14px; }
}


/* Brand map / V生活誌：與 94小確幸使用同一套頁面切換結構 */
.vivi-brand-track,
.vivi-life-track {
	position: relative;
	overflow: hidden;
	background: transparent;
}
.vivi-brand-slide,
.vivi-life-slide {
	display: grid;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	inset: 0;
	background: transparent;
	transform: translateX(18px);
	transition: opacity .34s ease, transform .34s ease;
}
.vivi-brand-slide {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}
.vivi-life-slide {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}
.vivi-brand-slide.is-active,
.vivi-life-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
	transform: translateX(0);
}
@media (max-width: 900px) {
	.vivi-brand-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.vivi-brand-slide,
	.vivi-life-slide { grid-template-columns: 1fr; gap: 14px; }
}

/* Carousel motion smoothing: 94小確幸 / 品牌地圖 / V生活誌 */
.vivi-deals-carousel,
.vivi-brand-carousel,
.vivi-life-carousel {
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y;
	overscroll-behavior: contain;
}
.vivi-deals-track,
.vivi-brand-track,
.vivi-life-track {
	isolation: isolate;
}
.vivi-deals-slide,
.vivi-brand-slide,
.vivi-life-slide {
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.vivi-deals-slide.is-active,
.vivi-brand-slide.is-active,
.vivi-life-slide.is-active {
	animation-duration: .36s;
	animation-timing-function: cubic-bezier(.22, .72, .18, 1);
	animation-fill-mode: both;
}
.vivi-deals-carousel.is-moving-next .vivi-deals-slide.is-active,
.vivi-brand-carousel.is-moving-next .vivi-brand-slide.is-active,
.vivi-life-carousel.is-moving-next .vivi-life-slide.is-active {
	animation-name: viviCarouselInNext;
}
.vivi-deals-carousel.is-moving-prev .vivi-deals-slide.is-active,
.vivi-brand-carousel.is-moving-prev .vivi-brand-slide.is-active,
.vivi-life-carousel.is-moving-prev .vivi-life-slide.is-active {
	animation-name: viviCarouselInPrev;
}
.vivi-deals-dots button,
.vivi-deals-carousel-nav button,
.vivi-brand-carousel-nav button,
.vivi-life-carousel-nav button {
	transition: width .24s cubic-bezier(.22, .72, .18, 1), background-color .24s ease, border-color .24s ease, color .24s ease, transform .2s ease, box-shadow .2s ease;
}
.vivi-deals-carousel-nav button:hover,
.vivi-brand-carousel-nav button:hover,
.vivi-life-carousel-nav button:hover {
	transform: translateY(-1px);
}
.vivi-deals-carousel.is-dragging,
.vivi-brand-carousel.is-dragging,
.vivi-life-carousel.is-dragging {
	user-select: none;
}
@keyframes viviCarouselInNext {
	0% { opacity: 0; transform: translate3d(22px, 0, 0) scale(.995); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes viviCarouselInPrev {
	0% { opacity: 0; transform: translate3d(-22px, 0, 0) scale(.995); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.vivi-deals-slide.is-active,
	.vivi-brand-slide.is-active,
	.vivi-life-slide.is-active {
		animation: none !important;
	}
	.vivi-deals-dots button,
	.vivi-deals-carousel-nav button,
	.vivi-brand-carousel-nav button,
	.vivi-life-carousel-nav button {
		transition: none !important;
	}
}


/* v18: 94小確幸 / 品牌地圖 / V生活誌 — 頁面切換改為真正左右滑動 */
.vivi-deals-track,
.vivi-brand-track,
.vivi-life-track {
	position: relative;
	overflow: hidden;
}
.vivi-deals-slide,
.vivi-brand-slide,
.vivi-life-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	transition: none;
	animation: none !important;
	will-change: transform;
}
.vivi-deals-slide.is-active,
.vivi-brand-slide.is-active,
.vivi-life-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	animation: none !important;
}
.vivi-deals-carousel.is-sliding,
.vivi-brand-carousel.is-sliding,
.vivi-life-carousel.is-sliding {
	pointer-events: none;
}
.vivi-deals-carousel.is-dragging,
.vivi-brand-carousel.is-dragging,
.vivi-life-carousel.is-dragging {
	user-select: none;
}

/* v0.9.16 Account dropdown children */
.vivi-account-menu { position: relative; }
.vivi-account-menu-item { position: relative; }
.vivi-account-menu-link { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; color: var(--vivi-muted); border-radius: 10px; font-size: 14px; font-weight: var(--vivi-fw-bold); }
.vivi-account-menu-link:hover,
.vivi-account-menu-item:focus-within > .vivi-account-menu-link,
.vivi-account-menu-item:hover > .vivi-account-menu-link { color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }
.vivi-account-menu-link b { display: none !important; }
.vivi-account-menu .vivi-bb-icon { color: var(--vivi-blue); font-size: 18px; line-height: 1; }
.vivi-account-submenu {
	position: absolute;
	top: 0;
	right: calc(100% - 1px);
	z-index: 84;
	display: grid;
	gap: 4px;
	min-width: 150px;
	padding: 10px;
	background: var(--vivi-color-card);
	border: 1px solid var(--vivi-border);
	border-radius: 12px;
	box-shadow: 0 18px 42px color-mix(in srgb, var(--vivi-color-black) 13%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.vivi-account-menu-item:hover > .vivi-account-submenu,
.vivi-account-menu-item:focus-within > .vivi-account-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
}
.vivi-account-submenu a { display: flex; align-items: center; min-height: 34px; padding: 0 10px; color: var(--vivi-muted); border-radius: 8px; font-size: 13px; font-weight: var(--vivi-fw-bold); white-space: nowrap; }
.vivi-account-submenu a:hover,
.vivi-account-submenu a:focus { color: var(--vivi-blue); background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent); }

@media (max-width: 760px) {
	.vivi-account-submenu { position: static; display: none; min-width: 0; margin: 2px 0 8px 32px; padding: 4px; border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
	.vivi-account-menu-item:hover > .vivi-account-submenu,
	.vivi-account-menu-item:focus-within > .vivi-account-submenu { display: grid; }
	.vivi-account-submenu a { min-height: 30px; }
}


/* v0.9.19 Account dropdown reads WordPress Profile Dropdown menu + menu icons */
.vivi-cart .vivi-bb-icon { font-size: 25px !important; }
.vivi-account-menu .vivi-account-submenu .vivi-account-menu-item { position: relative; }
.vivi-account-menu .vivi-account-submenu .vivi-account-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 34px;
	padding: 0 10px;
	color: var(--vivi-muted);
	border-radius: 8px;
	font-size: 13px;
	font-weight: var(--vivi-fw-bold);
	white-space: nowrap;
}
.vivi-account-menu .vivi-account-submenu .vivi-account-menu-link:hover,
.vivi-account-menu .vivi-account-submenu .vivi-account-menu-item:focus-within > .vivi-account-menu-link,
.vivi-account-menu .vivi-account-submenu .vivi-account-menu-item:hover > .vivi-account-menu-link {
	color: var(--vivi-blue);
	background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent);
}
.vivi-account-menu .vivi-account-menu-link .vivi-bb-icon,
.vivi-account-menu .vivi-account-menu-link .dashicons,
.vivi-account-menu .vivi-account-menu-link [class*="bb-icon-"] {
	color: var(--vivi-blue);
	font-size: 18px;
	line-height: 1;
}
.vivi-account-menu .vivi-account-submenu .vivi-account-submenu {
	top: -10px;
	right: calc(100% - 1px);
}
@media (min-width: 761px) {
	.vivi-account-menu-item.has-children::before {
		content: '';
		position: absolute;
		top: -6px;
		right: 100%;
		width: 18px;
		height: calc(100% + 12px);
		z-index: 83;
	}
	.vivi-account-menu-item.has-children > .vivi-account-submenu {
		z-index: 84;
	}
}
@media (max-width: 760px) {
	.vivi-account-menu .vivi-account-submenu .vivi-account-submenu {
		position: static;
		display: none;
		margin: 2px 0 8px 18px;
	}
	.vivi-account-menu .vivi-account-submenu .vivi-account-menu-item:hover > .vivi-account-submenu,
	.vivi-account-menu .vivi-account-submenu .vivi-account-menu-item:focus-within > .vivi-account-submenu {
		display: grid;
	}
}

/* v0.9.21 Mobile menu alignment + iOS bottom safe area */
.vivi-mobile-bottom-nav { display: none; }


@media (min-width: 861px) {
	.vivi-deals-carousel-desktop { display: block !important; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: none !important; }
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: block !important; }
}

@media (max-width: 860px) {
	:root { --vivi-mobile-bottom-nav-height: calc(72px + env(safe-area-inset-bottom)); }
	body.vivi-lite-home-page { padding-bottom: var(--vivi-mobile-bottom-nav-height); }
	body.vivi-lite-home-page.vivi-mobile-menu-open { padding-bottom: var(--vivi-mobile-bottom-nav-height); }

	.vivi-header {
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 0;
		height: 66px;
		padding: 0 16px;
	}
	.vivi-header-actions { display: contents; }
	.vivi-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		width: 174px;
		min-width: 0;
	}
	.vivi-nav,
	.vivi-login,
	.vivi-register,
	.vivi-account-wrap { display: none !important; }
	.vivi-menu-button {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 7px 8px;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 8px;
	}
	body.vivi-mobile-menu-open .vivi-menu-button {
		border-color: var(--vivi-blue);
		background: color-mix(in srgb, var(--vivi-blue) 8%, transparent);
	}
	.vivi-menu-button span {
		width: 22px;
		height: 2px;
		margin: 3px 0;
	}
	.vivi-cart-wrap {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		display: inline-flex !important;
	}
	.vivi-cart {
		width: 40px !important;
		height: 40px !important;
		margin: 0 !important;
	}
	.vivi-cart .vivi-bb-icon {
		width: 28px !important;
		height: 28px !important;
		font-size: 25px !important;
	}
	.vivi-cart b {
		top: 1px !important;
		right: 1px !important;
	}
	.vivi-mini-cart {
		position: fixed;
		left: 12px;
		right: 12px;
		top: 74px;
		width: auto;
		max-width: none;
	}
	.admin-bar .vivi-mini-cart { top: 120px; }

	.vivi-mobile-menu {
		top: 66px;
		bottom: var(--vivi-mobile-bottom-nav-height);
		z-index: 99998;
		max-height: none;
		padding: 4px 18px 28px;
	}
	.admin-bar .vivi-mobile-menu {
		top: 112px;
		bottom: var(--vivi-mobile-bottom-nav-height);
		max-height: none;
	}

	.vivi-mobile-wp-menu,
	.vivi-mobile-wp-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.vivi-mobile-wp-menu > li {
		padding: 16px 0 14px;
		border-bottom: 1px solid color-mix(in srgb, var(--vivi-color-black) 8%, transparent);
	}
	.vivi-mobile-wp-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 28px;
		color: var(--vivi-black);
		font-size: 13px;
		font-weight: var(--vivi-fw-heavy);
		letter-spacing: .06em;
		line-height: 1.25;
	}
	.vivi-mobile-wp-menu > li.menu-item-has-children > a::after,
	.vivi-mobile-wp-menu .sub-menu a::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-left: auto;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: .28;
		flex: 0 0 auto;
	}
	.vivi-mobile-wp-menu .sub-menu {
		display: grid;
		gap: 0;
		margin-top: 10px;
	}
	.vivi-mobile-wp-menu .sub-menu a,
	.vivi-mobile-wp-menu > li:not(.menu-item-has-children) > a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 40px;
		padding: 0 2px;
		color: var(--vivi-soft-black);
		background: transparent;
		border: 0;
		border-radius: 0;
		font-size: 15px;
		font-weight: var(--vivi-fw-bold);
		letter-spacing: 0;
		line-height: 1.35;
	}
	.vivi-mobile-wp-menu .sub-menu li + li,
	.vivi-mobile-wp-menu > li:not(.menu-item-has-children) + li:not(.menu-item-has-children) {
		border-top: 1px solid color-mix(in srgb, var(--vivi-color-black) 4.5%, transparent);
	}
	.vivi-mobile-wp-menu a:hover,
	.vivi-mobile-wp-menu a:focus { color: var(--vivi-blue); }
	.vivi-mobile-wp-menu a .vivi-bb-icon,
	.vivi-mobile-wp-menu a [class^="vivi-icon-"],
	.vivi-mobile-wp-menu a [class*=" vivi-icon-"],
	.vivi-mobile-wp-menu a i {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		font-size: 22px;
		line-height: 1;
		flex: 0 0 24px;
	}

	.vivi-mobile-bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--vivi-color-bg) 96%, transparent);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		border-top: 1px solid var(--vivi-border);
		box-shadow: 0 -12px 32px color-mix(in srgb, var(--vivi-color-black) 8%, transparent);
	}
	.vivi-mobile-bottom-nav a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 52px;
		color: var(--vivi-soft-black);
		border-radius: 14px;
		font-size: 11px;
		font-weight: var(--vivi-fw-heavy);
		line-height: 1.15;
		text-align: center;
	}
	.vivi-mobile-bottom-nav a:hover,
	.vivi-mobile-bottom-nav a:focus {
		color: var(--vivi-blue);
		background: color-mix(in srgb, var(--vivi-color-red) 8%, transparent);
	}
	.vivi-mobile-bottom-nav .vivi-bb-icon {
		width: 22px;
		height: 22px;
		font-size: 21px;
	}
}

@media (max-width: 360px) {
	.vivi-logo { width: 164px; }
	.vivi-mobile-bottom-nav a { font-size: 10px; }
}


/* v0.9.23 94小確幸 RWD 顯示保險：桌機只顯示桌機輪播，手機只顯示手機輪播 */
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: none !important; }
body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: block !important; }
@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: none !important; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: block !important; }
}
@media (min-width: 861px) {
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-desktop { display: block !important; }
	body.vivi-lite-home-page .vivi-deals .vivi-deals-carousel-mobile { display: none !important; }
}


/* v0.9.24 品牌 / V生活誌 RWD 顯示保險：桌機使用原本 4 個一組，手機使用 1 個一頁 */
body.vivi-lite-home-page .vivi-brand-carousel-mobile,
body.vivi-lite-home-page .vivi-life-carousel-mobile { display: none !important; }
body.vivi-lite-home-page .vivi-brand-carousel-desktop,
body.vivi-lite-home-page .vivi-life-carousel-desktop { display: block !important; }
@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-brand-carousel-desktop,
	body.vivi-lite-home-page .vivi-life-carousel-desktop { display: none !important; }
	body.vivi-lite-home-page .vivi-brand-carousel-mobile,
	body.vivi-lite-home-page .vivi-life-carousel-mobile { display: block !important; }
}
@media (min-width: 861px) {
	body.vivi-lite-home-page .vivi-brand-carousel-desktop,
	body.vivi-lite-home-page .vivi-life-carousel-desktop { display: block !important; }
	body.vivi-lite-home-page .vivi-brand-carousel-mobile,
	body.vivi-lite-home-page .vivi-life-carousel-mobile { display: none !important; }
}


/* v0.9.25 手機版首頁版型微調：只作用於手機，不影響桌機 */
@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-hero {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding-top: 0;
	}
	body.vivi-lite-home-page .vivi-hero-visual {
		order: 1;
		width: calc(100% + 32px);
		margin: 0 -16px 0;
	}
	body.vivi-lite-home-page .vivi-hero-copy {
		order: 2;
		width: 100%;
	}
	body.vivi-lite-home-page .vivi-hero-image {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	body.vivi-lite-home-page .vivi-hero-buttons,
	body.vivi-lite-home-page .vivi-hero-mini,
	body.vivi-lite-home-page .vivi-benefits,
	body.vivi-lite-home-page .vivi-countdown-banner {
		display: none !important;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-brand-slide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-height: 248px;
		height: 100%;
		padding: 14px 14px 22px;
		text-align: center;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-image {
		display: block;
		width: 100%;
		min-height: 135px;
		border-radius: 14px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-card h3 {
		margin: 18px 0 5px;
		font-size: 18px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-card p {
		margin: 0;
		min-height: 36px;
	}
}

@media (max-width: 380px) {
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-brand-slide {
		gap: 10px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-card {
		padding: 10px 10px 16px;
		min-height: 218px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-image {
		min-height: 112px;
	}
	body.vivi-lite-home-page .vivi-brand-carousel-mobile .vivi-category-card h3 {
		font-size: 16px;
	}
}


/* v0.9.26 手機版：縮小 94小確幸計時器上下空間，不影響桌機 */
@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-deals .vivi-deals-countdown {
		min-height: 0 !important;
		height: auto !important;
	}
	body.vivi-lite-home-page .vivi-deals .vivi-deals-countdown-card {
		min-height: 0 !important;
		height: auto !important;
	}
	body.vivi-lite-home-page .vivi-deals .vivi-countdown-panel {
		align-content: start;
		gap: 8px;
		padding: 14px 14px 15px;
	}
	body.vivi-lite-home-page .vivi-deals .vivi-countdown-time span {
		min-height: 50px;
	}
}


/* v0.9.27 Mobile header logo + bottom nav separators */
@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-header .vivi-logo {
		width: 194px !important;
		min-width: 0 !important;
	}
	body.vivi-lite-home-page .vivi-mobile-bottom-nav a {
		position: relative;
	}
	body.vivi-lite-home-page .vivi-mobile-bottom-nav a:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 12px;
		right: 0;
		bottom: 12px;
		width: 1px;
		background: color-mix(in srgb, var(--vivi-color-black) 12%, transparent);
		pointer-events: none;
	}
}

@media (max-width: 360px) {
	body.vivi-lite-home-page .vivi-header .vivi-logo {
		width: 180px !important;
	}
}


/* v0.9.28 94小確幸計時器：活動期間紅底白字；手機版時間格上下 padding */
body.vivi-lite-home-page .vivi-deals-countdown.is-vivi-deal-active .vivi-countdown-time span {
	background: var(--vivi-status-soldout) !important;
	border-color: var(--vivi-status-soldout) !important;
}
body.vivi-lite-home-page .vivi-deals-countdown.is-vivi-deal-active .vivi-countdown-time strong,
body.vivi-lite-home-page .vivi-deals-countdown.is-vivi-deal-active .vivi-countdown-time em {
	color: var(--vivi-color-text-inverse) !important;
}

@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-deals .vivi-countdown-time span {
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* v0.9.29 94小確幸：查看更多移至計時器下方 */
body.vivi-lite-home-page .vivi-countdown-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin-top: 2px;
	padding: 0 14px;
	color: var(--vivi-black);
	background: color-mix(in srgb, var(--vivi-color-card) 86%, transparent);
	border: 1px solid var(--vivi-border);
	border-radius: 999px;
	font-size: 13px;
	font-weight: var(--vivi-fw-heavy);
	letter-spacing: .06em;
	text-decoration: none;
}
body.vivi-lite-home-page .vivi-countdown-more:hover,
body.vivi-lite-home-page .vivi-countdown-more:focus-visible {
	color: var(--vivi-blue);
	border-color: color-mix(in srgb, var(--vivi-color-red) 42%, transparent);
	outline: none;
}



/* v0.9.30 94小確幸：放大倒數狀態標題（開賣前 / 活動中） */
body.vivi-lite-home-page .vivi-deals .vivi-countdown-label {
	font-size: 16px !important;
	line-height: 1.35;
	letter-spacing: .06em;
}

@media (max-width: 860px) {
	body.vivi-lite-home-page .vivi-deals .vivi-countdown-label {
		font-size: 17px !important;
		line-height: 1.35;
	}
}