/* VIVI shared Commerce Loop Item shell — 0.13.181
 * Shared visual component for 94小確幸、VIVI家族優惠、商品＆服務回饋.
 * Business renderers stay separate; only the card presentation is canonical here.
 */
.vivi-commerce-card{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	min-width:0;
	min-height:100%;
	background:var(--vivi-color-card,#fff);
	border:1px solid var(--vivi-color-border,#D6D9DD);
	border-radius:var(--vivi-radius,8px);
	box-shadow:var(--vivi-shadow-card,var(--vivi-shadow-soft,0 10px 28px rgba(0,0,0,.05)));
	overflow:hidden;
	transition:transform var(--vivi-transition-fast,.18s ease),border-color var(--vivi-transition-fast,.18s ease),box-shadow var(--vivi-transition-fast,.18s ease);
}
.vivi-commerce-card:hover,
.vivi-commerce-card:focus-within{
	transform:translateY(-3px);
	border-color:color-mix(in srgb,var(--vivi-color-primary,#996515) 42%,var(--vivi-color-border,#D6D9DD));
	box-shadow:var(--vivi-shadow-hero,var(--vivi-shadow-card,var(--vivi-shadow-soft,0 10px 28px rgba(0,0,0,.05))));
}
.vivi-commerce-card__media-shell{
	position:relative;
	width:100%;
	min-width:0;
	aspect-ratio:1/1;
	overflow:hidden;
	background:var(--vivi-color-bg-soft,#F2F4F5);
}
.vivi-commerce-card__media{
	position:relative!important;
	display:block!important;
	width:100%!important;
	height:100%!important;
	min-height:0!important;
	aspect-ratio:1/1!important;
	overflow:hidden!important;
	background:var(--vivi-color-bg-soft,#F2F4F5)!important;
	color:inherit;
	text-decoration:none;
}
.vivi-commerce-card__media > .vivi-product-image{
	display:block!important;
	width:100%!important;
	height:100%!important;
	min-height:0!important;
	aspect-ratio:1/1!important;
	overflow:hidden!important;
	background:var(--vivi-color-bg-soft,#F2F4F5)!important;
}
.vivi-commerce-card__image{
	display:block!important;
	width:100%!important;
	height:100%!important;
	max-width:none!important;
	max-height:none!important;
	object-fit:cover!important;
	object-position:center!important;
	transition:transform var(--vivi-transition-normal,.24s ease)!important;
}
.vivi-commerce-card:hover .vivi-commerce-card__image,
.vivi-commerce-card:focus-within .vivi-commerce-card__image{
	transform:scale(1.035)!important;
}
.vivi-commerce-card__body{
	display:flex!important;
	flex:1 1 auto!important;
	flex-direction:column!important;
	align-items:stretch!important;
	width:100%!important;
	min-width:0!important;
	padding:var(--vivi-space-sm,12px)!important;
}
.vivi-commerce-card__title{
	min-width:0!important;
	min-height:0!important;
	margin:0!important;
	padding:0!important;
	font-family:var(--vivi-font-heading,var(--vivi-font-body,inherit))!important;
	font-size:var(--vivi-fs-small,14px)!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:var(--vivi-lh-compact,1.45)!important;
	letter-spacing:-.01em!important;
	color:var(--vivi-color-heading,#000)!important;
}
.vivi-commerce-card__title a{
	display:-webkit-box!important;
	-webkit-box-orient:vertical!important;
	-webkit-line-clamp:2!important;
	overflow:hidden!important;
	color:inherit!important;
	text-decoration:none!important;
}
.vivi-commerce-card__title a:hover,
.vivi-commerce-card__title a:focus-visible{
	color:var(--vivi-color-primary,#996515)!important;
	outline:none!important;
}
.vivi-commerce-card__meta{
	margin:var(--vivi-space-xs,8px) 0 0!important;
	color:var(--vivi-color-text-muted,#5A5A5A)!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	line-height:var(--vivi-lh-compact,1.45)!important;
}
.vivi-commerce-card__footer{
	display:flex!important;
	align-items:baseline!important;
	justify-content:flex-start!important;
	flex-wrap:wrap!important;
	gap:4px 8px!important;
	width:100%!important;
	min-width:0!important;
	margin-top:auto!important;
	padding-top:var(--vivi-space-sm,12px)!important;
}
.vivi-commerce-card__regular{
	color:var(--vivi-color-text-muted,#5A5A5A)!important;
	font-family:var(--vivi-font-body,inherit)!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	font-weight:var(--vivi-fw-regular,400)!important;
	line-height:1.2!important;
	white-space:nowrap!important;
}
.vivi-commerce-card__primary{
	color:var(--vivi-color-primary,#996515)!important;
	font-family:var(--vivi-font-body,inherit)!important;
	font-size:var(--vivi-fs-small,14px)!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:1.2!important;
	white-space:nowrap!important;
}
/* 現省：全站 Commerce Card 統一採用 94小確幸既有的白底／金色描邊、圖片左上角樣式。 */
.vivi-commerce-card__saving{
	position:absolute!important;
	z-index:9!important;
	left:12px!important;
	top:12px!important;
	right:auto!important;
	bottom:auto!important;
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:auto!important;
	height:auto!important;
	min-width:0!important;
	min-height:0!important;
	max-width:calc(100% - 24px)!important;
	padding:4px 9px!important;
	border:1px solid color-mix(in srgb,var(--vivi-color-primary,#996515) 55%,transparent)!important;
	border-radius:var(--vivi-radius,8px)!important;
	background:var(--vivi-color-card,#fff)!important;
	box-shadow:0 2px 8px color-mix(in srgb,var(--vivi-color-black,#000) 10%,transparent)!important;
	color:var(--vivi-color-primary,#996515)!important;
	font-family:var(--vivi-font-body,inherit)!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:1.1!important;
	letter-spacing:.02em!important;
	white-space:nowrap!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
	pointer-events:none!important;
}
.vivi-commerce-card__kind{
	position:absolute!important;
	z-index:9!important;
	left:12px!important;
	top:12px!important;
	padding:4px 9px!important;
	border-radius:var(--vivi-radius,8px)!important;
	background:var(--vivi-color-card,#fff)!important;
	border:1px solid var(--vivi-color-border,#D6D9DD)!important;
	color:var(--vivi-color-text-muted,#5A5A5A)!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:1.1!important;
	pointer-events:none!important;
}
.vivi-commerce-card__status{
	position:absolute!important;
	z-index:10!important;
	right:8px!important;
	bottom:8px!important;
	left:auto!important;
	top:auto!important;
	display:inline-flex!important;
	align-items:center!important;
	max-width:calc(100% - 16px)!important;
	min-height:24px!important;
	padding:4px 8px!important;
	border-radius:var(--vivi-radius,8px)!important;
	background:rgba(0,0,0,.72)!important;
	color:#fff!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	font-style:normal!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:1.2!important;
	white-space:nowrap!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
}
/* 94小確幸品牌：圖片右下角 Overlay。顏色只使用網站基礎 Design Tokens，並提高 specificity 避免舊 ticket meta 規則覆蓋品牌連結。 */
.vivi-commerce-card__brand-overlay,
.vivi-ticket-card.vivi-commerce-card .vivi-ticket-brand-profile-link.vivi-commerce-card__brand-overlay{
	position:absolute!important;
	z-index:11!important;
	right:8px!important;
	bottom:8px!important;
	left:auto!important;
	top:auto!important;
	display:inline-flex!important;
	align-items:center!important;
	max-width:calc(100% - 16px)!important;
	padding:4px 8px!important;
	border:1px solid var(--vivi-color-card,#fff)!important;
	border-radius:var(--vivi-radius,8px)!important;
	background:var(--vivi-color-primary,#996515)!important;
	box-shadow:0 2px 8px color-mix(in srgb,var(--vivi-color-black,#000) 16%,transparent)!important;
	color:var(--vivi-color-text-inverse,#fff)!important;
	font-family:var(--vivi-font-body,inherit)!important;
	font-size:var(--vivi-fs-xs,12px)!important;
	font-weight:var(--vivi-fw-bold,600)!important;
	line-height:1.2!important;
	text-decoration:none!important;
	white-space:nowrap!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
}
.vivi-commerce-card__brand-overlay:hover,
.vivi-commerce-card__brand-overlay:focus-visible,
.vivi-ticket-card.vivi-commerce-card .vivi-ticket-brand-profile-link.vivi-commerce-card__brand-overlay:hover,
.vivi-ticket-card.vivi-commerce-card .vivi-ticket-brand-profile-link.vivi-commerce-card__brand-overlay:focus-visible{
	background:var(--vivi-color-blue-ink-tea,#393432)!important;
	color:var(--vivi-color-text-inverse,#fff)!important;
	text-decoration:none!important;
	outline:2px solid color-mix(in srgb,var(--vivi-color-primary,#996515) 60%,var(--vivi-color-card,#fff))!important;
	outline-offset:1px!important;
}
/* 94小確幸舊字級／body 規則必須讓位給共用 Commerce Card。 */
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-product-body.vivi-commerce-card__body{
	padding:var(--vivi-space-sm,12px)!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__title,
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__title a,
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-title-link{
	min-height:0!important;
	margin:0!important;
	font-size:var(--vivi-fs-small,14px)!important;
	line-height:var(--vivi-lh-compact,1.45)!important;
	letter-spacing:-.01em!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-price-row.vivi-commerce-card__footer{
	justify-content:flex-start!important;
	gap:4px 8px!important;
	padding-top:var(--vivi-space-sm,12px)!important;
	text-align:left!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-price-old.vivi-commerce-card__regular{
	font-size:var(--vivi-fs-xs,12px)!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-price-sale.vivi-commerce-card__primary{
	font-size:var(--vivi-fs-small,14px)!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-product-brand{display:none!important;}
/* Ticket image link now sits inside a shared media shell. */
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__media-shell .vivi-ticket-image-link{
	width:100%!important;
	height:100%!important;
	aspect-ratio:1/1!important;
}
.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__media-shell .vivi-product-image{
	width:100%!important;
	height:100%!important;
	aspect-ratio:1/1!important;
}
@media (max-width:767px){
	.vivi-commerce-card__body{padding:var(--vivi-space-xs,8px)!important;}
	.vivi-commerce-card__title{font-size:var(--vivi-fs-xs,12px)!important;}
	.vivi-commerce-card__primary{font-size:var(--vivi-fs-xs,12px)!important;}
	.vivi-commerce-card__saving{left:8px!important;top:8px!important;max-width:calc(100% - 16px)!important;padding:3px 7px!important;font-size:11px!important;}
	.vivi-commerce-card__kind{left:8px!important;top:8px!important;padding:3px 7px!important;font-size:11px!important;}
	.vivi-commerce-card__status{min-height:20px!important;padding:3px 6px!important;font-size:11px!important;}
	.vivi-commerce-card__brand-overlay{right:8px!important;bottom:8px!important;padding:3px 7px!important;font-size:11px!important;}
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-product-body.vivi-commerce-card__body{padding:var(--vivi-space-xs,8px)!important;}
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__title,
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-commerce-card__title a,
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-title-link{font-size:var(--vivi-fs-xs,12px)!important;}
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-price-row.vivi-commerce-card__footer{padding-top:var(--vivi-space-xs,8px)!important;}
	.vivi-lite-ticket-archive-page .vivi-ticket-card.vivi-commerce-card .vivi-ticket-price-sale.vivi-commerce-card__primary{font-size:var(--vivi-fs-xs,12px)!important;}
}