/* ─── LifeTastic Web — Theme (Figma-accurate) ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── CSS Variables ───────────────────────────────────────────────────────── */
:root {
	--lt-primary: #aa9662;
	--lt-primary-d: #8a7a4f;
	--lt-primary-l: #d1c196;
	--lt-accent: #e45e5a;
	--lt-bg: #ffffff;
	--lt-bg-alt: #e6dcd0;
	--lt-bg-adv: #f1ece8;
	--lt-bg-light: #f5f5f5;
	--lt-bg-off: #f1f2f2;
	--lt-bg-white: #ffffff;
	--lt-bg-form: #f0f1f5;
	--lt-nav-bg: #000000;
	--lt-footer-bg: #f5f5f5;
	--lt-text: #3c3c43;
	--lt-text-dark: #000000;
	--lt-text-dark2: #1a1a1a;
	--lt-text-mid: #404040;
	--lt-text-secondary: #666666;
	--lt-text-light: #8c8c8c;
	--lt-text-dim: #777777;
	--lt-text-muted: #999999;
	--lt-link: #093c71;
	--lt-blue: #0088ff;
	--lt-border: #eeeeee;
	--lt-adv-bg: #f1ece8;
	--lt-red: #ff0000;
	--lt-brown: #7d5f38;
	--lt-shadow: 0 2px 12px rgba(0, 0, 0, .07);
	--lt-shadow-md: 0 6px 24px rgba(0, 0, 0, .11);
	--lt-radius: 4px;
	--lt-transition: .25s ease;
	--lt-header-h: 137px;
}

/* ─── Reset / Base ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	max-width: 100%;
}

body {
	font-family: 'Inter', 'Noto Sans TC', 'Noto Sans HK', Arial, sans-serif;
	color: var(--lt-text);
	background: var(--lt-bg-white);
	overflow-x: hidden;
	max-width: 100%;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

a {
	color: var(--lt-text-dark);
	text-decoration: none;
	transition: color var(--lt-transition);
}

a:hover {
	color: var(--lt-primary);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ─── Top Announcement Bar ───────────────────────────────────────────────── */
.lt-top-adv {
	background: var(--lt-bg-adv);
	border-bottom: 1px solid #e0dbd5;
	padding: 7px 43px;
	min-height: 45px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Mobile: the whole bar is tappable to expand/collapse the full text (JS), so show a
   pointer. Links inside keep their own default cursor. */
@media (max-width: 767px) {
	.lt-top-adv { cursor: pointer; }
	.lt-top-adv a { cursor: pointer; }
}

.lt-top-adv-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	overflow: hidden;
}

/* Left contact / delivery block (two small lines) */
.lt-top-adv-contact {
	flex-shrink: 0;
	font-size: .72rem;
	line-height: 1.6;
	color: var(--lt-text-dark);
}
.lt-top-adv-contact a { color: #2a6dc9; text-decoration: none; }
.lt-top-adv-contact a:hover { text-decoration: underline; }

/* Right promo, centred in the remaining space */
.lt-top-adv-promo {
	flex: 1;
	display: flex;
	justify-content: center;
	gap: 3rem;
	font-size: .9rem;
	color: var(--lt-text-dark);
	overflow: hidden;
	white-space: nowrap;
}

.lt-top-adv-item {
	font-size: .75rem;
	font-weight: 400;
	color: var(--lt-text-dark);
	white-space: nowrap;
	flex-shrink: 0;
}

.lt-top-adv-item.main-promo {
	color: var(--lt-text-dark);
	font-size: 1rem;
}

.lt-top-adv-scroll {
	display: flex;
	align-items: center;
	gap: 4rem;
	animation: advScroll 30s linear infinite;
}

.lt-top-adv:hover .lt-top-adv-scroll {
	animation-play-state: paused;
}

@keyframes advScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Mobile promo-row marquee: the text starts visible at the left and scrolls fully off
   the left edge, then loops. */
@keyframes advMarquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* Groups the promo item(s) so overflow can be measured and scrolled as one unit. */
.lt-top-adv-ticker {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	white-space: nowrap;
}

/* Desktop: when the promo text is wider than its row (class added by JS), scroll it
   like the mobile marquee instead of clipping it. Short text stays static + centred. */
@media (min-width: 768px) {
	.lt-top-adv-promo.adv-overflow {
		justify-content: flex-start;
	}

	.lt-top-adv-promo.adv-overflow .lt-top-adv-ticker {
		animation: advMarquee 18s linear infinite;
		will-change: transform;
	}

	/* Pause on hover so it can be read. */
	.lt-top-adv:hover .lt-top-adv-promo.adv-overflow .lt-top-adv-ticker {
		animation-play-state: paused;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.lt-top-adv-promo.adv-overflow .lt-top-adv-ticker {
		animation: none;
	}
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.lt-header {
	background: #002e5e;   /* solid brand blue (was a translucent black overlay) */
	position: sticky;
	top: 0;
	z-index: 1000;
	margin-bottom: -108px;
}

.lt-header-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.lt-header-row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	padding: 0 36px;
}

.lt-header-row2 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.lt-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.lt-logo img {
	height: 34px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.lt-logo-text {
	font-size: 1.4rem;
	font-weight: 900;
	color: #ffffff;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.lt-logo-text strong {
	color: #ffffff;
}

.lt-nav {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: 40px;
	gap: 0;
	width: 100%;
	position: relative;   /* anchor for the 訂購蛋糕 mega-menu */
}

.lt-nav-link {
	display: flex;
	align-items: center;
	padding: 0 20px;
	font-size: .875rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
	text-decoration: none;
	height: 100%;
	transition: color var(--lt-transition);
	letter-spacing: .3px;
}

.lt-nav-link:hover {
	color: var(--lt-primary-l);
}

.lt-nav-link.active {
	color: var(--lt-primary-l);
	font-weight: 600;
}

/* ── 訂購蛋糕 mega-menu ─────────────────────────────────────────────────── */
.lt-has-mega {
	display: flex;
	align-items: stretch;
}
.lt-nav-caret {
	font-size: .62em;
	margin-left: 5px;
	transition: transform .2s ease;
}
.lt-has-mega:hover .lt-nav-caret { transform: rotate(180deg); }

.lt-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: min(1180px, calc(100vw - 64px));
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 1200;
}
/* invisible bridge so the menu doesn't close in the gap between nav and panel */
.lt-mega::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}
.lt-has-mega:hover .lt-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.lt-mega-inner {
	display: grid;
	grid-template-columns: 230px 1fr;
}

/* Gold left panel */
.lt-mega-side {
	background: #b3a06a;
	color: #fff;
	padding: 30px 26px;
}
.lt-mega-side-title {
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 22px;
	letter-spacing: 1px;
}
.lt-mega-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	text-align: left;
	font-size: .95rem;
	padding: 12px 0;
	cursor: pointer;
}
.lt-mega-tab:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.lt-mega-tab:hover { color: #fff8e8; }
.lt-mega-tab.is-active { font-weight: 700; }
.lt-mega-tab-arrow { visibility: hidden; font-size: .8em; }
.lt-mega-tab.is-active .lt-mega-tab-arrow { visibility: visible; }

/* Right panels — only the active one (categories OR tags) shows. */
.lt-mega-panel { display: none; }
.lt-mega-panel.is-active { display: block; }

/* Right category grid */
.lt-mega-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-content: start;
	padding: 10px;
}
.lt-mega-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px;
	color: #444;
	text-decoration: none;
	border-radius: 6px;
	transition: background .15s, color .15s;
}
.lt-mega-item:hover {
	background: #faf6ee;
	color: var(--lt-primary);
}
.lt-mega-ico {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--lt-primary);
}
.lt-mega-name {
	font-size: .92rem;
	line-height: 1.3;
}

.lt-header-right {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex-shrink: 0;
}

.lt-icon-btn {
	position: relative;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .85);
	font-size: 1.05rem;
	transition: color var(--lt-transition);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
}

.lt-icon-btn:hover {
	color: var(--lt-primary-l);
}

/* Header WhatsApp button (replaces the social icons) */
.lt-wa-btn {
	font-size: 1.15rem;
}
.lt-wa-btn:hover {
	color: #25d366;   /* WhatsApp green */
}

.lt-cart-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--lt-primary);
	color: #fff;
	font-size: .48rem;
	font-weight: 700;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.lt-lang-btn {
	font-size: .78rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	border: none;
	padding: 0 4px;
	letter-spacing: .5px;
	background: none;
	cursor: pointer;
	width: auto;
}

.lt-lang-btn:hover {
	color: var(--lt-primary-l);
}

.lt-login-btn {
	background: var(--lt-primary);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	padding: .4rem 1.4rem;
	border-radius: 3px;
	border: none;
	transition: all var(--lt-transition);
	white-space: nowrap;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	height: 40px;
	margin-left: .25rem;
}

.lt-login-btn:hover {
	background: var(--lt-primary-d);
	color: #fff;
}

.lt-nav-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	padding: 0;
}

.lt-search-wrap {
	display: none;
}

.lt-icon-btns {
	display: contents;
}

/* Social links row — only shown inside mobile hamburger menu */
.lt-nav-social {
	display: none;
}

/* ─── Mobile Menu Overlay ────────────────────────────────────────────────── */
/* Positioned outside the header to avoid backdrop-filter stacking context.   */
.lt-mobile-menu {
	display: none;
	/* hidden by default; JS adds .open */
	position: fixed;
	top: 68px;
	/* matches header row1 height */
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 998;
	/* below header (1000) */
	flex-direction: column;
	overflow-y: auto;
	padding: 0.5rem 1.5rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lt-mobile-menu.open {
	display: flex;
}

.lt-mobile-menu-link {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	display: block;
	transition: color var(--lt-transition);
}

.lt-mobile-menu-link:hover,
.lt-mobile-menu-link.active {
	color: var(--lt-primary-l);
}

.lt-mobile-menu-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0 0.5rem;
	margin-top: 0.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lt-mobile-lang-btn {
	color: rgba(255, 255, 255, 0.85) !important;
}

.lt-mobile-login-btn {
	height: 36px;
	padding: 0.35rem 1.25rem;
	font-size: 0.9rem;
}

.lt-mobile-menu-social {
	display: flex;
	gap: 0.85rem;
	padding-top: 1rem;
}

/* Desktop-only elements: visible by default, hidden on mobile */
.lt-desktop-only {
	display: inline-flex;
}

/* Mobile menu never appears on desktop */
@media (min-width: 768px) {
	.lt-mobile-menu {
		display: none !important;
	}
}

/* ─── Hero Section ────────────────────────────────────────────────────────── */
.lt-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f5f5f5;
	line-height: 0;
	user-select: none;
	/* Sit BELOW the (transparent, -108px) header instead of under it, so the nav
	   bar no longer covers the top of the banner. Same compensation inner pages use. */
	margin-top: 108px;
}

.lt-hero-track {
	display: flex;
	transition: transform .6s ease;
}

.lt-hero-slide {
	flex: 0 0 100%;
	position: relative;
	line-height: 0;
}

/* The 手機版 <picture> wrapper must fill the slide like a bare <img> would —
   an inline <picture> leaves the img's width:100% / aspect-ratio resolving
   against a shrink-wrapped box (iOS Safari mis-sizes it). */
.lt-hero-slide picture {
	display: block;
	width: 100%;
	line-height: 0;
}

.lt-hero-slide img {
	width: 100%;
	/* Height: viewport minus the announcement bar + header, floored 520 / capped 960 —
	   a touch taller than the earlier 190/480/900. object-position:top keeps the top of
	   the image (logo / title); overflow is cropped from the bottom instead of the centre.
	   Mobile swaps to a portrait image via <picture> + .has-mobile. */
	height: calc(100vh - 150px);
	min-height: 520px;
	max-height: 960px;
	object-fit: cover;
	object-position: top;
	display: block;
}

.lt-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 5rem;
}

.lt-btn-order {
	display: inline-block;
	background: var(--lt-primary);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	padding: .9rem 3.5rem;
	border-radius: 3px;
	letter-spacing: 1px;
	transition: all var(--lt-transition);
	line-height: 1;
	min-width: 180px;
	text-align: center;
}

.lt-btn-order:hover {
	background: var(--lt-primary-d);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(170, 150, 98, .5);
}

.lt-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .8);
	border: none;
	color: var(--lt-text-dark);
	font-size: 1rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--lt-transition);
	padding: 0;
}

.lt-hero-arrow:hover {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.lt-hero-prev {
	left: 1.5rem;
}

.lt-hero-next {
	right: 1.5rem;
}

.lt-hero-dots {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .4rem;
	z-index: 10;
}

.lt-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: all var(--lt-transition);
	border: none;
	display: block;
}

.lt-hero-dot.active {
	background: #fff;
	width: 24px;
	border-radius: 4px;
}

/* ─── Section Common ─────────────────────────────────────────────────────── */
.lt-section {
	padding: 60px 43px;
}

.lt-section-inner {
	max-width: 1960px;
	margin: 0 auto;
}

.lt-section-title {
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--lt-primary);
	margin: 0 0 .75rem;
	line-height: 1.15;
}

.lt-section-subtitle {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--lt-text);
	margin-bottom: 2rem;
	line-height: 1.5;
}

/* ─── Featured Products — 今期推薦 ───────────────────────────────────────── */
.lt-featured-section {
	background: rgba(249, 240, 233, 0.965);
	position: relative;
	overflow: hidden;
	min-height: 400px;
}

.lt-featured-hd {
	height: 128px;
	padding: 60px 269px 25px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
}

@media (max-width: 1919px) {
	.lt-featured-hd {
		padding: 60px 14.01% 25px;
	}
}

.lt-featured-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lt-featured-icon {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.lt-featured-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
}

.lt-featured-title {
	color: rgba(170, 150, 98, 1);
	font-size: 38px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.lt-featured-more {
	color: rgba(136, 136, 136, 1);
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	align-self: flex-end;
	padding-bottom: 2px;
	transition: color var(--lt-transition);
}

.lt-featured-more:hover {
	color: rgba(170, 150, 98, 1);
}

/* Cards viewport — clips to exactly 4 cards */
.lt-feat-cards-row {
	height: fit-content;
	overflow: hidden;
	margin-left: 269px;
	width: calc(100% - 538px);
}

@media (max-width: 1919px) {
	.lt-feat-cards-row {
		margin-left: 14.01%;
		width: calc(100% - 28.02%);
	}
}

.lt-feat-track {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	height: fit-content;
	transition: transform .4s ease;
	will-change: transform;
}

/* Arrows */
.lt-feat-arrow {
	position: absolute;
	width: 64px;
	height: 64px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 278px;
	transform: translateY(-50%);
	opacity: 0.8;
	transition: opacity var(--lt-transition);
}

.lt-feat-arrow:hover {
	opacity: 1;
}

.lt-feat-arrow img {
	width: 64px;
	height: 64px;
	display: block;
}

.lt-feat-prev {
	left: 32px;
}

.lt-feat-next {
	right: 32px;
}

/* Bottom spacer */
.lt-featured-bottom {
	height: 60px;
}

/* ── Individual card ── */
/* Width is set dynamically by JS (initCardWidths) because percentage flex-basis
   on a flex container with no explicit width resolves to auto per CSS spec.    */
.lt-feat-card {
	flex: 0 0 auto;
	min-width: 0;
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.lt-feat-card:hover .lt-feat-img-box {
	box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}

/* White image box — square, border-radius 12px */
.lt-feat-img-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	transition: box-shadow var(--lt-transition);
}

/* Portrait image inner — 75.33% wide (226/300) */
.lt-feat-img-inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	overflow: hidden;
}

.lt-feat-img-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Heart — absolute top-left inside image box */
.lt-feat-heart-area {
	position: absolute;
	top: 0;
	left: 15.5px;
	width: 40px;
	padding-top: 13px;
	z-index: 2;
}

.lt-feat-heart {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	display: block;
	opacity: 0.45;
	transition: opacity var(--lt-transition);
}

.lt-feat-heart:hover {
	opacity: 1;
}

.lt-feat-heart img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

/* Icon-based heart used by the product cards (works with the wishlist handler). */
.lt-feat-heart-btn {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 40px;
	text-align: center;
	color: #c9c2b4;
	transition: color .15s;
}

.lt-feat-heart-btn:hover {
	color: #d0021b;
}

/* Tags — below the image box, first item in .lt-feat-body (normal flow) */
.lt-feat-tags {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* Tag pills */
.lt-tag-pill {
	height: 25px;
	border-radius: 4px;
	padding: 2px 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	flex-shrink: 0;
	white-space: nowrap;
	line-height: 1;
}

.lt-tag-outline {
	background: #ffffff;
	color: #c2a475;
	border: 1px solid #c2a475;
}

.lt-tag-red {
	background: #e45e5a;
	color: #ffffff;
	border: none;
}

.lt-tag-amber {
	background: #aa9662;
	color: #ffffff;
	border: none;
}

.lt-tag-green {
	background: #4caf50;
	color: #ffffff;
	border: none;
}

.lt-tag-blue {
	background: var(--lt-blue);
	color: #ffffff;
	border: none;
}

/* Card body — name + price on section bg */
.lt-feat-body {
	width: 100%;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lt-feat-name {
	color: #000000;
	font-size: 18px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	line-height: 1.4;
	width: 100%;
}

.lt-feat-price-row {
	padding-top: 6px;
}

.lt-feat-price {
	color: #aa9662;
	font-size: 22px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
}

.lt-feat-price-sale {
	color: #e45e5a;
	font-size: 22px;
	font-weight: 700;
}

.lt-feat-price-orig {
	color: #8c8c8c;
	font-size: 16px;
	text-decoration: line-through;
	margin-left: 6px;
}

/* ─── Legacy product classes ─────────────────────────────────────────────── */
.lt-product-item {
	background: var(--lt-bg-white);
	border-radius: var(--lt-radius);
	overflow: hidden;
	transition: box-shadow var(--lt-transition), transform var(--lt-transition);
	border: none;
}

.lt-product-item:hover {
	box-shadow: var(--lt-shadow-md);
	transform: translateY(-4px);
}

.lt-product-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lt-product-img-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/1;
	background: var(--lt-bg);
}

.lt-product-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.lt-product-item:hover .lt-product-img-wrap img {
	transform: scale(1.06);
}

.lt-product-tag {
	position: absolute;
	top: .6rem;
	left: .6rem;
	font-size: .7rem;
	font-weight: 700;
	padding: .22rem .6rem;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: .3px;
	z-index: 2;
	color: #fff;
	background: var(--lt-text-light);
}

.lt-tag-new {
	background: var(--lt-primary);
}

.lt-tag-hot {
	background: var(--lt-accent);
}

.lt-tag-sale {
	background: var(--lt-accent);
}

.lt-tag-limited {
	background: #a67c52;
}

.lt-tag-bestseller {
	background: var(--lt-primary-d);
}

.lt-product-info {
	padding: 1rem;
}

.lt-product-name {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--lt-text-dark);
	margin-bottom: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.lt-products-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}

.lt-product-price {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	flex-wrap: wrap;
}

.lt-price-main {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--lt-primary);
}

.lt-price-sale {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--lt-accent);
}

.lt-price-original {
	font-size: 1rem;
	color: var(--lt-text-light);
	text-decoration: line-through;
}

/* ─── About Preview Section ──────────────────────────────────────────────── */
.lt-about-section {
	background: var(--lt-bg-alt);
	padding: 60px 43px;
}

.lt-about-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.lt-about-text p {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--lt-text);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.lt-btn-more {
	display: inline-block;
	background: var(--lt-primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	padding: .65rem 2rem;
	border-radius: 3px;
	transition: all var(--lt-transition);
	text-decoration: none;
}

.lt-btn-more:hover {
	background: var(--lt-primary-d);
	color: #fff;
	transform: translateY(-2px);
}

/* ─── Products Light Section ─────────────────────────────────────────────── */
.lt-products-light {
	background: var(--lt-bg-light);
	padding: 60px 43px;
}

.lt-products-light-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

/* ─── Contact Section ────────────────────────────────────────────────────── */
.lt-contact-section {
	background: var(--lt-bg-white);
	padding: 60px 43px;
}

.lt-contact-inner {
	max-width: 900px;
	margin: 0 auto;
}

.lt-form-group {
	margin-bottom: 1.25rem;
}

.lt-form-label {
	display: block;
	font-size: .875rem;
	font-weight: 400;
	color: var(--lt-text-mid);
	margin-bottom: .4rem;
}

.lt-form-control {
	width: 100%;
	border: 1.5px solid var(--lt-border);
	border-radius: 4px;
	padding: .7rem 1rem;
	font-size: .875rem;
	font-family: inherit;
	color: var(--lt-text);
	background: var(--lt-bg-white);
	outline: none;
	transition: border-color var(--lt-transition), box-shadow var(--lt-transition);
}

.lt-form-control::placeholder {
	color: var(--lt-text-light);
}

.lt-form-control:focus {
	border-color: var(--lt-primary);
	box-shadow: 0 0 0 3px rgba(170, 150, 98, .15);
}

textarea.lt-form-control {
	resize: vertical;
	min-height: 120px;
}

.lt-btn-submit {
	background: var(--lt-primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	padding: .7rem 2.5rem;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: all var(--lt-transition);
}

.lt-btn-submit:hover {
	background: var(--lt-primary-d);
	transform: translateY(-1px);
}

/* ─── News Section ───────────────────────────────────────────────────────── */
.lt-news-section {
	background: var(--lt-bg-white);
	padding: 60px 43px;
}

.lt-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.lt-news-item {
	background: #fff;
	border: 1.5px solid #d4c08a;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
	transition: box-shadow var(--lt-transition), transform var(--lt-transition);
	display: flex;
	flex-direction: column;
	padding: 15px;
}

.lt-news-item:hover {
	box-shadow: var(--lt-shadow-md);
	transform: translateY(-4px);
}

.lt-news-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.lt-news-img-wrap {
	overflow: hidden;
	width: 100%;
	height: 380px;
	flex-shrink: 0;
	background: var(--lt-bg);
}

.lt-news-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.lt-news-item:hover .lt-news-img-wrap img {
	transform: scale(1.06);
}

.lt-news-body {
	position: relative;
	z-index: 2;
	margin-top: -40px;
	margin-right: 30px;
	background: #fff;
	padding: 34px 36px 28px;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lt-news-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--lt-primary);
	margin-bottom: .65rem;
	letter-spacing: .5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

.lt-news-date {
	font-size: 15px;
	font-weight: 600;
	color: #e04a30;
	letter-spacing: .5px;
	margin-bottom: .75rem;
}

.lt-news-more {
	font-size: 14px;
	font-weight: 700;
	color: var(--lt-primary);
	text-decoration: none;
	margin-top: auto;
	transition: color var(--lt-transition);
}

.lt-news-more:hover {
	color: var(--lt-primary-d);
}

/* ─── Latest News Section (Home — 最新消息) ──────────────────────────────── */
.lt-latest-news-section {
	background: #fdfdfd;
	/* top spacing comes from .lt-latest-news-header (like .lt-featured-hd); only the
	   bottom is on the section, so the section's top gap matches featured/pet at 60px. */
	padding: 0 0 60px;
	position: relative;
	overflow: hidden;
}

.lt-latest-news-container {
	overflow: hidden;
	margin-left: 269px;
	width: calc(100% - 538px);
}

@media (max-width: 1919px) {
	.lt-latest-news-container {
		margin-left: 14.01%;
		width: calc(100% - 28.02%);
	}
}

/* Section Header — matches lt-featured-hd layout */
.lt-latest-news-header {
	height: 128px;
	padding: 60px 269px 25px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
}

@media (max-width: 1919px) {
	.lt-latest-news-header {
		padding: 60px 14.01% 25px;
	}
}

.lt-latest-news-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.lt-latest-news-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.lt-latest-news-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lt-latest-news-title {
	color: rgba(170, 150, 98, 1);
	font-size: 38px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.lt-latest-news-more {
	color: rgba(136, 136, 136, 1);
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	align-self: flex-end;
	padding-bottom: 2px;
	transition: color var(--lt-transition);
}

.lt-latest-news-more:hover {
	color: rgba(170, 150, 98, 1);
}

/* News Viewport */
.lt-latest-news-viewport {
	position: relative;
}

/* News Arrow Buttons — matches lt-feat-arrow style */
.lt-latest-news-arrow {
	position: absolute;
	width: 64px;
	height: 64px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.8;
	transition: opacity var(--lt-transition);
}

.lt-latest-news-arrow:hover {
	opacity: 1;
}

.lt-latest-news-arrow img {
	width: 64px;
	height: 64px;
	display: block;
}

.lt-latest-news-prev {
	left: 32px;
}

.lt-latest-news-next {
	right: 32px;
}

/* News Cards Container */
.lt-latest-news-cards-wrapper {
	overflow: hidden;
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #d4c99a transparent;
}

.lt-latest-news-cards-wrapper::-webkit-scrollbar {
	height: 6px;
}

.lt-latest-news-cards-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

.lt-latest-news-cards-wrapper::-webkit-scrollbar-thumb {
	background: #d4c99a;
	border-radius: 3px;
}

.lt-latest-news-cards {
	display: flex;
	gap: 28px;
	/* Top + bottom breathing room so the card's hover lift (translateY(-4px)) and
	   shadow aren't clipped by the carousel's overflow:hidden — without the top
	   padding the lifted card's top border disappears. */
	padding: 12px 0;
}

/* Individual News Card */
.lt-latest-news-card {
	flex: 0 0 340px;
	min-width: 300px;
	background: #fff;
	border: 1.5px solid #d4c08a;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
	/* Match the news-page card hover (.lt-news-item) exactly */
	transition: box-shadow var(--lt-transition), transform var(--lt-transition);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding: 15px;
}

.lt-latest-news-card:hover {
	box-shadow: var(--lt-shadow-md);
	transform: translateY(-4px);
}

/* Card Image */
.lt-latest-news-card-image {
	width: 100%;
	height: 380px;
	overflow: hidden;
	flex-shrink: 0;
}

.lt-latest-news-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.lt-latest-news-card:hover .lt-latest-news-card-image img {
	transform: scale(1.06);
}

/* Card Content — white panel pulled up to overlap the image bottom, inset on the
   right so the photo peeks through at the bottom-right. */
.lt-latest-news-card-content {
	position: relative;
	z-index: 2;
	margin-top: -40px;
	margin-right: 15px;
	background: #fff;
	padding: 34px 36px 28px;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lt-latest-news-card-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--lt-primary);
	line-height: 1.4;
	margin: 0 0 14px;
	letter-spacing: 0.5px;
}

.lt-latest-news-card-desc {
	font-size: 14px;
	line-height: 1.7;
	color: #777;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 14px;
}

.lt-latest-news-card-date {
	font-size: 15px;
	font-weight: 600;
	color: #e04a30;
	letter-spacing: 0.5px;
}

/* Latest News — Tablet */
@media (max-width: 1024px) {
	.lt-latest-news-title {
		font-size: 32px;
	}

	.lt-latest-news-card {
		flex: 0 0 300px;
		min-width: 280px;
	}

	.lt-latest-news-card-image {
		height: 220px;
	}

	.lt-latest-news-card-title {
		font-size: 20px;
	}
}

/* Latest News — Mobile */
@media (max-width: 767px) {
	.lt-latest-news-container {
		margin-left: 0;
		width: 100%;
		padding: 0 1rem;
		overflow-x: auto;
	}

	.lt-latest-news-header {
		height: auto;
		padding: 20px 1rem 12px;
	}

	.lt-latest-news-icon {
		width: 36px;
		height: 36px;
	}

	.lt-latest-news-title {
		font-size: 26px;
	}

	.lt-latest-news-more {
		font-size: 15px;
	}

	.lt-latest-news-card {
		flex: 0 0 270px;
		min-width: 260px;
	}

	.lt-latest-news-card-image {
		height: 190px;
	}

	.lt-latest-news-card-content {
		padding: 16px 18px 16px;
	}

	.lt-latest-news-card-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.lt-latest-news-card-desc {
		font-size: 13px;
		-webkit-line-clamp: 3;
	}

	.lt-latest-news-card-date {
		font-size: 14px;
	}

	.lt-latest-news-arrow {
		display: none;
	}

	.lt-latest-news-cards-wrapper {
		overflow-x: auto;
	}
}

/* ─── PETisserie Section ─────────────────────────────────────────────────── */
.lt-pet-section {
	background: #f5f5f5;
	padding: 60px 0 60px;
	overflow: hidden;
}

.lt-pet-inner {
	display: flex;
	align-items: stretch;
	min-height: 400px;
}

/* Left brand area */
.lt-pet-brand {
	flex: 0 0 40%;
	max-width: 40%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 60px;
}

.lt-pet-brand-title {
	font-family: 'Inter', sans-serif;
	font-size: 72px;
	font-weight: 900;
	color: #3c3c43;
	letter-spacing: 3px;
	margin: 0 0 10px;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
}

.lt-pet-brand-title sup {
	font-size: 28px;
	font-weight: 400;
	vertical-align: super;
	top: -0.4em;
	position: relative;
}

.lt-pet-brand-sub {
	font-family: 'Inter', sans-serif;
	font-size: 32px;
	font-weight: 400;
	color: #6b6b6b;
	letter-spacing: 8px;
	margin: 0 0 36px;
	text-align: center;
}

.lt-pet-brand-icon {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lt-pet-brand-icon img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Right slider area */
.lt-pet-slider-wrap {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	/* Side gutters reserved for the prev/next arrows, so they never sit on a card */
	padding: 0 64px;
	/* Anchor for the manual prev/next arrows */
	position: relative;
}

/* PETisserie manual arrows — same art as .lt-feat-arrow, sized down to sit
   inside the slider. Vertically centred on the card image area (~300px tall). */
.lt-pet-arrow {
	position: absolute;
	top: 150px;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
}

.lt-pet-arrow:hover {
	opacity: 1;
}

.lt-pet-arrow img {
	width: 48px;
	height: 48px;
	display: block;
}

/* Arrows live in the wrap's 64px side gutters — outside the viewport, never over a card */
.lt-pet-prev {
	left: 8px;
}

.lt-pet-next {
	right: 8px;
}

.lt-pet-slider-viewport {
	width: 100%;
	overflow: hidden;
	/* Cap at exactly 3 cards (3×280px + 2×28px gap) so a 4th card never peeks in;
	   the slider JS derives its visible count from this width, so it adapts. */
	max-width: 896px;
	margin: 0 auto;
}

.lt-pet-slider-track {
	display: flex;
	gap: 28px;
	transition: transform .5s ease;
	will-change: transform;
}

/* Individual pet card */
.lt-pet-card {
	flex: 0 0 280px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.lt-pet-card:hover .lt-pet-card-img-box {
	box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

/* Card image box */
.lt-pet-card-img-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--lt-transition);
}

.lt-pet-card-img-inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.lt-pet-card-img-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Heart icon */
.lt-pet-card-heart-area {
	position: absolute;
	top: 0;
	left: 15px;
	width: 40px;
	padding-top: 13px;
	z-index: 2;
}

.lt-pet-card-heart {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	display: block;
	opacity: 0.45;
	transition: opacity var(--lt-transition);
}

.lt-pet-card-heart:hover {
	opacity: 1;
}

.lt-pet-card-heart img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

/* Card body */
.lt-pet-card-body {
	width: 100%;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lt-pet-card-tags {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.lt-pet-card-name {
	color: #000000;
	font-size: 16px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	line-height: 1.4;
}

.lt-pet-card-price {
	color: #aa9662;
	font-size: 20px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	padding-top: 4px;
}

/* Bottom CTA */
.lt-pet-cta {
	display: flex;
	justify-content: center;
	padding: 50px 0 10px;
}

.lt-pet-cta-btn {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: var(--lt-primary);
	background: transparent;
	border: 1.5px solid var(--lt-primary);
	border-radius: 4px;
	padding: 14px 100px;
	text-decoration: none;
	text-align: center;
	letter-spacing: 4px;
	transition: all var(--lt-transition);
}

.lt-pet-cta-btn:hover {
	background: var(--lt-primary);
	border-color: var(--lt-primary);
	color: #fff;
}

/* PETisserie — Tablet */
@media (max-width: 1200px) {
	.lt-pet-brand-title {
		font-size: 56px;
	}

	.lt-pet-brand-sub {
		font-size: 24px;
		letter-spacing: 5px;
	}

	.lt-pet-brand-icon {
		width: 120px;
	}

	.lt-pet-card {
		flex: 0 0 240px;
		min-width: 240px;
	}
}

@media (max-width: 1024px) {
	.lt-pet-brand {
		flex: 0 0 35%;
		max-width: 35%;
		padding: 30px 30px;
	}

	.lt-pet-brand-title {
		font-size: 44px;
	}

	.lt-pet-brand-sub {
		font-size: 20px;
		letter-spacing: 4px;
		margin-bottom: 24px;
	}

	.lt-pet-brand-icon {
		width: 100px;
	}

	.lt-pet-card {
		flex: 0 0 220px;
		min-width: 220px;
	}
}

/* PETisserie — Mobile */
@media (max-width: 767px) {
	.lt-pet-section {
		padding: 30px 0 30px;
	}

	.lt-pet-inner {
		flex-direction: column;
		min-height: auto;
	}

	.lt-pet-brand {
		flex: none;
		max-width: 100%;
		padding: 20px 1rem 30px;
	}

	.lt-pet-brand-title {
		font-size: 36px;
	}

	.lt-pet-brand-sub {
		font-size: 16px;
		letter-spacing: 3px;
		margin-bottom: 16px;
	}

	/* Fix 5: Bigger pet logo on mobile */
	.lt-pet-brand-icon {
		width: 180px;
	}

	.lt-pet-brand-icon img {
		width: 100%;
		height: auto;
	}

	/* Fix 6: Pet slider — scroll like news section */
	.lt-pet-slider-wrap {
		padding: 0 1rem;
		overflow: visible;
	}

	/* Mobile slides by native touch scroll (JS slider is skipped) — no arrows */
	.lt-pet-arrow {
		display: none;
	}

	.lt-pet-slider-viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Visible thin scrollbar — cue that the row scrolls (was hidden before) */
		scrollbar-width: thin;
		scrollbar-color: #aa9662 rgba(0, 0, 0, .08);
		/* Breathing room so the bar doesn't hug the card shadows */
		padding-bottom: 10px;
	}

	.lt-pet-slider-viewport::-webkit-scrollbar {
		height: 6px;
	}

	.lt-pet-slider-viewport::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, .08);
		border-radius: 3px;
	}

	.lt-pet-slider-viewport::-webkit-scrollbar-thumb {
		background: #aa9662;
		border-radius: 3px;
	}

	.lt-pet-slider-track {
		gap: 16px;
		touch-action: pan-x;
		transition: none;
		will-change: auto;
		transform: none !important;
	}

	.lt-pet-card {
		flex: 0 0 200px;
		min-width: 200px;
	}

	/* Fix 7: Button margin above the big image */
	.lt-pet-cta {
		padding: 30px 1rem 24px;
	}

	.lt-pet-cta-btn {
		padding: 12px 50px;
		font-size: 16px;
		letter-spacing: 2px;
		width: 100%;
		max-width: 280px;
	}
}

/* ─── Page Hero Banner ───────────────────────────────────────────────────── */
.lt-page-hero {
	position: relative;
	width: 100%;
	min-height: 400px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.lt-page-hero-bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	filter: brightness(.6);
}

.lt-page-hero-content {
	position: relative;
	z-index: 2;
	padding: 3rem 43px 3.5rem;
	width: 100%;
}

.lt-page-hero h1 {
	font-size: 4rem;
	font-weight: 400;
	color: var(--lt-link);
	margin: 0 0 .5rem;
}

.lt-page-hero p {
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--lt-link);
	margin: 0;
}

/* ─── About Page ─────────────────────────────────────────────────────────── */
.lt-about-hero {
	position: relative;
	width: 100%;
	height: 560px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.lt-about-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom fade so the hero photo blends into the page (photo itself is unfiltered). */
.lt-about-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to bottom, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, 1) 100%);
	z-index: 1;
	pointer-events: none;
}

.lt-about-hero-text {
	position: relative;
	z-index: 2;
	padding: 3rem 6rem 3.5rem;
}

.lt-about-hero-title {
	font-size: 3rem;
	font-weight: 500;
	color: var(--lt-link);
	margin: 0 0 .5rem;
	line-height: 1.1;
}

.lt-about-hero-sub {
	font-size: 1.85rem;
	font-weight: 400;
	color: var(--lt-link);
	margin: 0;
}

.lt-about-stories {
	background: var(--lt-bg-light);
	padding: 60px 43px;
}

.lt-about-story-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	max-width: 1960px;
	margin: 0 auto;
}

.lt-story-card {
	background: var(--lt-bg-white);
	border-radius: var(--lt-radius);
	overflow: hidden;
	padding: 1.75rem;
}

.lt-story-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--lt-primary);
	margin: 0 0 .75rem;
}

.lt-story-card p {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--lt-text-dark);
	line-height: 1.65;
	margin: 0;
}

.lt-story-card-img {
	aspect-ratio: 4/3;
	overflow: hidden;
	margin-bottom: 1.25rem;
	border-radius: 4px;
}

.lt-story-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Products Page ──────────────────────────────────────────────────────── */
.lt-products-page {
	background: var(--lt-bg-white);
	padding: 0;
	padding-top: 110px;   /* just clears the header without sitting too low */
}

.lt-products-page-inner {
	display: grid;
	grid-template-columns: 330px 1fr;
	min-height: 80vh;
	max-width: 1600px;
	margin: 0 auto;
}

.lt-filter-sidebar {
	background: var(--lt-bg-white);
	border-right: 1px solid var(--lt-border);
	padding: 2rem 1.5rem;
	position: sticky;
	top: var(--lt-header-h);
	max-height: calc(100vh - var(--lt-header-h) + 200px);
	overflow-y: auto;
}

.lt-filter-group {
	margin-bottom: 1.5rem;
}

.lt-filter-label {
	font-size: 1rem;
	font-weight: 400;
	color: var(--lt-text-mid);
	margin-bottom: .5rem;
	display: flex;
	align-items: center;
	gap: .25rem;
}

.lt-filter-label .lt-req {
	color: var(--lt-red);
}

.lt-filter-option {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem 0;
	font-size: .875rem;
	color: var(--lt-text-light);
	cursor: pointer;
	transition: color var(--lt-transition);
}

.lt-filter-option:hover,
.lt-filter-option.active {
	color: var(--lt-text-dark);
}

.lt-filter-options-grid {
	/* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 10px; */
}

.lt-filter-options-grid .lt-filter-option {
	/* display: block; */
	padding: 8px 12px;
	/* border: 1px solid var(--lt-border);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: all var(--lt-transition); */
}

.lt-filter-options-grid .lt-filter-option:hover,
.lt-filter-options-grid .lt-filter-option.active {
	background-color: var(--lt-primary);
	color: white;
	border-color: var(--lt-primary);
}

.lt-category-filter {
	width: 100%;
	border: 1.5px solid var(--lt-border);
	border-radius: 4px;
	padding: .5rem .75rem;
	font-size: .875rem;
	background: var(--lt-bg-white);
	color: var(--lt-text);
	outline: none;
	font-family: inherit;
	transition: border-color var(--lt-transition);
}

.lt-category-filter:focus {
	border-color: var(--lt-primary);
}

.lt-filter-search {
	width: 100%;
	border: 1.5px solid var(--lt-border);
	border-radius: 4px;
	padding: .65rem .85rem;
	font-size: .875rem;
	background: var(--lt-bg-white);
	color: var(--lt-text);
	outline: none;
	font-family: inherit;
	transition: border-color var(--lt-transition);
}

.lt-filter-search:focus {
	border-color: var(--lt-primary);
}

.lt-filter-search::placeholder {
	color: var(--lt-text-light);
}

/* ── Autocomplete Search ──────────────────────────────────────────── */
.lt-autocomplete-wrapper {
	position: relative;
	width: 100%;
}

.lt-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	border: 1.5px solid var(--lt-primary);
	border-top: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	max-height: 360px;
	overflow-y: auto;
	display: none;
}

.lt-autocomplete-dropdown.show {
	display: block;
}

.lt-ac-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .85rem;
	text-decoration: none;
	color: var(--lt-text);
	border-bottom: 1px solid var(--lt-border);
	transition: background var(--lt-transition);
	cursor: pointer;
}

.lt-ac-item:last-child {
	border-bottom: none;
}

.lt-ac-item:hover,
.lt-ac-item.active {
	background: #f8f4f0;
}

.lt-ac-thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
	background: var(--lt-bg-light);
}

.lt-ac-info {
	flex: 1;
	min-width: 0;
}

.lt-ac-name {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--lt-text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.lt-ac-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 2px;
	flex-wrap: wrap;
}

.lt-ac-category {
	font-size: .6875rem;
	color: var(--lt-text-light);
	background: var(--lt-bg-light);
	padding: 1px 6px;
	border-radius: 3px;
}

.lt-ac-price {
	font-size: .75rem;
	font-weight: 600;
	color: var(--lt-primary);
}

.lt-ac-price.lt-ac-sale {
	color: #e74c3c;
}

.lt-ac-price.lt-ac-original {
	font-size: .6875rem;
	font-weight: 400;
	color: var(--lt-text-light);
	text-decoration: line-through;
}

.lt-ac-empty {
	padding: 1.25rem .85rem;
	text-align: center;
	font-size: .8125rem;
	color: var(--lt-text-light);
}

.lt-btn-reset {
	width: 100%;
	background: var(--lt-primary);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: .5rem;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
	margin-top: 1rem;
	transition: background var(--lt-transition);
	text-decoration: none;
	display: block;
	text-align: center;
}

.lt-btn-reset:hover {
	background: var(--lt-primary-d);
	color: #fff;
}

.lt-products-content {
	max-width: 1270px;
	padding: 2rem 2rem 3rem;
}

.lt-products-promo {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--lt-primary);
	line-height: 1.6;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: #fff8ed;
	border-left: 3px solid var(--lt-primary);
	border-radius: 0 4px 4px 0;
}

.lt-products-content-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.lt-products-content-grid>* {
	min-width: 0;
	overflow: hidden;
}

.lt-products-results-info {
	font-size: .9rem;
	color: var(--lt-text-light);
	margin-top: 30px;
	margin-bottom: 1.25rem;
}

.lt-products-results-info strong {
	color: var(--lt-text-dark);
}

/* Per-page selector (12 / 24 / 48 / All) — sits inline in the results bar, next to the count. */
.lt-perpage {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	color: var(--lt-text-light);
	white-space: nowrap;
}
.lt-perpage label {
	margin: 0;
	white-space: nowrap;
}
.lt-perpage select {
	padding: .35rem 2rem .35rem .65rem;
	border: 1px solid var(--lt-border, #ddd);
	border-radius: 8px;
	background: #fff;
	color: var(--lt-text-dark);
	font-size: .9rem;
	cursor: pointer;
}
.lt-perpage select:focus {
	outline: none;
	border-color: #AA9662;
	box-shadow: 0 0 0 2px rgba(170, 150, 98, .2);
}

/* Results count (left) + Sort select (right) on one row. */
.lt-results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 30px;
	margin-bottom: 1.25rem;
}
.lt-results-bar .lt-products-results-info {
	margin: 0;
}
.lt-sortby {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto; /* keep it pinned right even if the count text wraps */
	font-size: .9rem;
	color: var(--lt-text-light);
	white-space: nowrap;
}
.lt-sortby label {
	margin: 0;
	white-space: nowrap;
}
.lt-sortby select {
	padding: .35rem 2rem .35rem .65rem;
	border: 1px solid var(--lt-border, #ddd);
	border-radius: 8px;
	background: #fff;
	color: var(--lt-text-dark);
	font-size: .9rem;
	cursor: pointer;
}
.lt-sortby select:focus {
	outline: none;
	border-color: #AA9662;
	box-shadow: 0 0 0 2px rgba(170, 150, 98, .2);
}

/* ─── News Page ──────────────────────────────────────────────────────────── */
.lt-news-hero {
	background: var(--lt-bg-white);
	padding: 60px 43px 40px;
}

.lt-news-hero-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: end;
}

.lt-news-hero-tagline {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--lt-text-dark);
	margin-bottom: .5rem;
}

.lt-news-hero-title {
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--lt-text-dark);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.lt-news-hero-desc {
	font-size: 1rem;
	font-weight: 400;
	color: var(--lt-text);
	line-height: 1.6;
}

.lt-news-section-header {
	max-width: 1960px;
	margin: 0 auto;
	padding: 0 43px 1.5rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.lt-news-section-title {
	margin-top: 20px;
	font-size: 2.75rem;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
}

/* Extra left/right padding wrapper for the news list (header + grid). */
.lt-news-list-pad {
	padding-left: 10rem;
	padding-right: 10rem;
}

.lt-news-page-grid {
	max-width: 1960px;
	margin: 0 auto;
	padding: 0 43px 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ─── Branches Page ──────────────────────────────────────────────────────── */
.lt-stores-hero {
	background: var(--lt-bg-adv);
	padding: 60px 43px;
	text-align: center;
}

.lt-stores-hero h1 {
	font-size: 4rem;
	font-weight: 400;
	color: var(--lt-text-dark);
	margin-bottom: 1rem;
}

.lt-stores-hero p {
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--lt-text-dark);
}

/* Stores hero — same treatment as the About hero (unfiltered full-bleed photo,
   navy title + subtitle, bottom fade to the page background). */
.lt-stores-hero-section {
	position: relative;
	width: 100%;
	height: 560px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.lt-stores-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lt-stores-hero-section::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to bottom, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, 1) 100%);
	z-index: 1;
	pointer-events: none;
}

.lt-stores-hero-text {
	position: relative;
	z-index: 2;
	padding: 3rem 10rem 3.5rem;
}

.lt-stores-hero-text h1 {
	font-size: 3rem;
	font-weight: 500;
	color: var(--lt-link);
	margin: 0 0 .5rem;
	line-height: 1.1;
}

.lt-stores-hero-text p {
	font-size: 1.85rem;
	font-weight: 400;
	color: var(--lt-link);
	margin: 0;
}

.lt-stores-grid-section {
	background: var(--lt-bg-off);
	padding: 60px 43px;
}

.lt-stores-grid {
	max-width: 1960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.lt-store-card {
	background: var(--lt-bg-white);
	border-radius: var(--lt-radius);
	overflow: hidden;
	box-shadow: var(--lt-shadow);
	transition: box-shadow var(--lt-transition);
}

.lt-store-card:hover {
	box-shadow: var(--lt-shadow-md);
}

.lt-store-card-img {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: var(--lt-bg);
}

.lt-store-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lt-store-card-body {
	padding: 1.5rem;
}

.lt-store-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--lt-text-dark);
	margin: 0 0 .5rem;
}

.lt-store-address {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--lt-text);
	margin: 0 0 .75rem;
}

.lt-store-hours {
	font-size: 1rem;
	color: var(--lt-text-light);
	margin: 0;
}

/* ─── Auth Pages ─────────────────────────────────────────────────────────── */
.lt-auth-page {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 460px 1fr;
	background: var(--lt-bg-white);
}

.lt-auth-sidebar {
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 6rem 3rem 0;
	position: relative;
	overflow: hidden;
}

/* Cake photo sits at the BOTTOM of the sidebar at full colour; the text sits at the
   top on the light background. */
.lt-auth-sidebar-bg {
	position: absolute;
	inset: auto 0 0 0;
	width: 100%;
	height: 56%;
	object-fit: cover;
	opacity: 1;
}

.lt-auth-sidebar-content {
	position: relative;
	z-index: 2;
}

.lt-auth-sidebar h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--lt-primary, #b08d57);
	margin-bottom: 1rem;
}

.lt-auth-sidebar p {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--lt-text);
	line-height: 1.65;
}

.lt-auth-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 3.5rem;
	overflow-y: auto;
}

.lt-auth-main h1 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--lt-text-dark);
	margin-bottom: 2rem;
}

/* Auth card floating on a blurred cake backdrop (register / email verification) */
.lt-auth-blur-main {
	position: relative;
	align-items: center;
	justify-content: safe center;   /* centred, but never clips a tall form */
	padding: 2.5rem 2rem 6rem;       /* generous bottom padding so the card isn't flush */
	overflow-y: visible;             /* let the PAGE scroll — no nested inner scrollbar */
}
.lt-auth-blur-main::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: url('../images/auth-bg.png') center / cover no-repeat;
	filter: blur(10px); opacity: .5;   /* no scale() → no horizontal overflow */
}
.lt-auth-blur-main > * { position: relative; z-index: 1; }
.lt-auth-card {
	background: #fff; border-radius: 18px;
	box-shadow: 0 16px 50px rgba(0, 0, 0, .16);
	padding: 34px 32px; width: 100%; max-width: 480px;
}
.lt-auth-card-logo { text-align: center; margin-bottom: 20px; }
.lt-auth-card-logo img { height: 30px; }
.lt-auth-required { color: #e53935; font-size: .8rem; margin-bottom: 14px; }
.lt-auth-req-star { color: #e53935; }
.lt-auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.lt-auth-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
	color: var(--lt-text-light);
	font-size: .875rem;
}

.lt-auth-divider::before,
.lt-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--lt-border);
}

.lt-btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	width: 100%;
	border: 1.5px solid var(--lt-border);
	border-radius: 4px;
	padding: .7rem;
	background: var(--lt-bg-white);
	font-size: .9rem;
	font-weight: 600;
	color: var(--lt-text-dark);
	cursor: pointer;
	transition: all var(--lt-transition);
}

.lt-btn-google:hover {
	border-color: var(--lt-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.lt-auth-link {
	color: var(--lt-link);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--lt-transition);
}

.lt-auth-link:hover {
	color: var(--lt-primary);
}

.lt-auth-footer-text {
	font-size: .875rem;
	color: var(--lt-text-light);
	text-align: center;
	margin-top: 1.5rem;
}

.lt-checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .875rem;
	color: var(--lt-text);
	margin-bottom: .75rem;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.lt-footer {
	background: var(--lt-footer-bg);
	padding: 3rem 43px;
}

.lt-footer-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.lt-footer-col {
	padding: 1rem 2rem 1rem 0;
}

.lt-footer-col h6 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--lt-primary);
	margin: 0 0 1.1rem;
}

.lt-footer-desc {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--lt-text-light);
	line-height: 1.75;
	margin-bottom: 1.5rem;
}

.lt-footer-contact {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--lt-text-light);
	line-height: 1.7;
}

.lt-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Two balanced columns so the link list isn't one long vertical strip. */
	column-count: 2;
	column-gap: 1rem;
}

.lt-footer-links li {
	margin-bottom: .65rem;
	break-inside: avoid;
}

.lt-footer-links li a {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--lt-text-secondary);
	transition: color var(--lt-transition);
}

.lt-footer-links li a:hover {
	color: var(--lt-primary);
}

.lt-footer-social {
	display: flex;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.lt-footer-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .08);
	color: var(--lt-text);
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--lt-transition);
}

.lt-footer-social a:hover {
	background: var(--lt-primary);
	color: #fff;
}

.lt-footer-lang {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--lt-text-light);
	display: block;
	margin-bottom: .65rem;
}

.lt-footer-lang:hover {
	color: var(--lt-primary);
}

.lt-footer-policy {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--lt-text-light);
	white-space: nowrap;
}

.lt-footer-policy a {
	display: inline;
	color: var(--lt-text-light);
	transition: color var(--lt-transition);
}

.lt-footer-policy a:hover {
	color: var(--lt-primary);
}

/* ── Footer refinements (left-aligned links + plain social + bottom-aligned lang/policy) ── */
.lt-footer-col-center {
	text-align: left;
	padding-left: 2rem;
}

.lt-footer-social {
	gap: 1.4rem;
	margin-top: .25rem;
}

.lt-footer-social a {
	width: auto;
	height: auto;
	background: transparent;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--lt-text);
}

.lt-footer-social a:hover {
	background: transparent;
	color: var(--lt-primary);
}

/* Right column: social near the top, language + policy anchored to the bottom. */
.lt-footer-col:last-child {
	display: flex;
	flex-direction: column;
}

.lt-footer-col:last-child .lt-footer-lang {
	margin-top: auto;
}

/* Contact info: regular grey labels, bold dark values (matching the brand footer). */
.lt-fc-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	margin-bottom: .1rem;
}

.lt-fc-label {
	font-weight: 400;
	color: var(--lt-text-light);
}

.lt-fc-value {
	font-weight: 700;
	color: var(--lt-text);
}

.lt-fc-hours {
	margin-top: 1.1rem;
}

.lt-fc-hours .lt-fc-label {
	margin-bottom: .25rem;
}

.lt-fc-hours .lt-fc-value {
	line-height: 1.6;
}

/* ─── FABs ────────────────────────────────────────────────────────────────── */
.lt-fab-group {
	position: fixed;
	right: 1.5rem;
	bottom: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	z-index: 999;
	display:none;
}

.lt-fab {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--lt-primary);
	color: #fff;
	border: none;
	font-size: 1.1rem;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(170, 150, 98, .45);
	transition: all var(--lt-transition);
}

.lt-fab.visible {
	display: flex;
}

.lt-fab:hover {
	background: var(--lt-primary-d);
	transform: translateY(-2px);
}

.lt-fab-group .lt-fab:last-child {
	display: flex;
	background: #25d366;
	box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
}

.lt-fab-group .lt-fab:last-child:hover {
	background: #1eb858;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.lt-alert {
	border-radius: var(--lt-radius);
	padding: .9rem 1.2rem;
	margin: 1rem 43px;
	display: flex;
	align-items: center;
	gap: .65rem;
	font-size: .92rem;
	font-weight: 500;
}

.lt-alert-success {
	background: #d4edda;
	color: #155724;
}

.lt-alert-error {
	background: #f8d7da;
	color: #721c24;
}

.lt-alert-warning {
	background: #fff3cd;
	color: #856404;
}

/* ─── Product Card (listing) ─────────────────────────────────────────────── */
.product-card {
	background: var(--lt-bg-white);
	border-radius: var(--lt-radius);
	overflow: hidden;
	transition: all var(--lt-transition);
	border: 1px solid var(--lt-border);
	height: 100%;
	display: flex;
	flex-direction: column;
	max-width: 400px;
	max-height: 400px;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lt-shadow-md);
	border-color: transparent;
}

.product-card-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/1;
	background: var(--lt-bg);
}

.product-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.product-card:hover .product-card-img img {
	transform: scale(1.06);
}

.product-badge {
	position: absolute;
	top: .4rem;
	left: .4rem;
	font-size: .6rem;
	font-weight: 700;
	padding: .15rem .4rem;
	border-radius: 2px;
	text-transform: uppercase;
	color: #fff;
	background: var(--lt-text-light);
	letter-spacing: .3px;
}

.product-badge.new {
	background: var(--lt-primary);
}

.product-badge.sale {
	background: var(--lt-accent);
}

.product-card-actions {
	position: absolute;
	bottom: -40px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: .3rem;
	padding: .4rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, .35));
	transition: bottom var(--lt-transition);
}

.product-card:hover .product-card-actions {
	bottom: 0;
}

.product-action-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lt-text-dark);
	font-size: .8rem;
	transition: all var(--lt-transition);
	cursor: pointer;
}

.product-action-btn:hover {
	background: var(--lt-primary);
	color: #fff;
}

.product-card-body {
	padding: .6rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-category-tag {
	font-size: .6rem;
	color: var(--lt-text-light);
	text-transform: uppercase;
	letter-spacing: .4px;
	font-weight: 600;
	margin-bottom: .2rem;
}

.product-card-body h5 {
	font-size: .85rem;
	font-weight: 400;
	color: var(--lt-text-dark);
	margin-bottom: .25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
}

.product-price {
	display: flex;
	align-items: center;
	gap: .3rem;
	margin-top: auto;
}

.price-current {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--lt-primary);
}

.price-original {
	font-size: .85rem;
	color: var(--lt-text-light);
	text-decoration: line-through;
}

.price-sale {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--lt-accent);
}

.btn-add-cart {
	margin-top: .5rem;
	background: var(--lt-bg);
	border: 1px solid var(--lt-border);
	border-radius: 3px;
	padding: .35rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--lt-text-dark);
	width: 100%;
	transition: all var(--lt-transition);
	cursor: pointer;
}

.btn-add-cart:hover {
	background: var(--lt-primary);
	color: #fff;
	border-color: var(--lt-primary);
}

/* ─── Product Detail ─────────────────────────────────────────────────────── */
.lt-product-detail {
	background: var(--lt-bg-white);
	padding: 3rem 43px;
}

.lt-product-detail-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

.product-detail-img {
	border-radius: var(--lt-radius);
	overflow: hidden;
	background: var(--lt-bg);
	aspect-ratio: 1/1;
}

.product-detail-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-detail-price-current {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--lt-primary);
}

.product-detail-price-original {
	font-size: 1.1rem;
	color: var(--lt-text-light);
	text-decoration: line-through;
}

.product-detail-price-sale {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--lt-accent);
}

.quantity-selector {
	display: flex;
	align-items: center;
	gap: .65rem;
}

.qty-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--lt-border);
	background: #fff;
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--lt-transition);
}

.qty-btn:hover {
	border-color: var(--lt-primary);
	color: var(--lt-primary);
}

.qty-input {
	width: 56px;
	text-align: center;
	border: 1.5px solid var(--lt-border);
	border-radius: 4px;
	padding: .35rem;
	font-size: .95rem;
	font-weight: 700;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.lt-pagination .page-link {
	color: var(--lt-primary);
	border-radius: 3px !important;
	margin: 0 2px;
	border: 1px solid var(--lt-border);
	font-weight: 500;
	font-size: .88rem;
	transition: all var(--lt-transition);
}

.lt-pagination .page-link:hover {
	background: var(--lt-primary);
	color: #fff;
	border-color: var(--lt-primary);
}

.lt-pagination .page-item.active .page-link {
	background: var(--lt-primary);
	border-color: var(--lt-primary);
	color: #fff;
}

/* "Page X of Y" label + jump-to-page box under the pagination. */
.lt-page-jump {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
	font-size: .9rem;
	color: var(--lt-text-light);
}
.lt-page-jump strong { color: var(--lt-text-dark); }
.lt-page-jump-sep { opacity: .45; }
.lt-page-jump-input {
	width: 64px;
	padding: .35rem .5rem;
	border: 1px solid var(--lt-border, #ddd);
	border-radius: 8px;
	text-align: center;
	font-size: .9rem;
}
.lt-page-jump-input:focus {
	outline: none;
	border-color: var(--lt-primary);
	box-shadow: 0 0 0 2px rgba(170, 150, 98, .2);
}
.lt-page-jump-btn {
	padding: .35rem .9rem;
	background: var(--lt-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.lt-page-jump-btn:hover { background: #94824f; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-lt-primary {
	display: inline-block;
	background: var(--lt-primary);
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: .6rem 1.6rem;
	font-weight: 600;
	font-size: .9rem;
	transition: all var(--lt-transition);
	cursor: pointer;
	text-decoration: none;
}

.btn-lt-primary:hover {
	background: var(--lt-primary-d);
	color: #fff;
	transform: translateY(-1px);
}

.btn-lt-outline {
	display: inline-block;
	background: transparent;
	color: var(--lt-primary);
	border: 1.5px solid var(--lt-primary);
	border-radius: 3px;
	padding: .55rem 1.4rem;
	font-weight: 600;
	font-size: .9rem;
	transition: all var(--lt-transition);
	cursor: pointer;
	text-decoration: none;
}

.btn-lt-outline:hover {
	background: var(--lt-primary);
	color: #fff;
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.error-page {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3rem;
}

.error-code {
	font-size: clamp(5rem, 15vw, 8rem);
	font-weight: 900;
	color: var(--lt-primary-l);
	line-height: 1;
	margin-bottom: .5rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
	.lt-footer-inner {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.lt-auth-page {
		grid-template-columns: 400px 1fr;
	}

	.lt-auth-sidebar h2 {
		font-size: 2rem;
	}
}

@media (max-width: 1024px) {
	.lt-products-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.lt-news-grid,
	.lt-news-page-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The desktop 10rem (160px) side padding crushes the news grid on tablet —
	   the content area is only ~700px at 1024px. Tighten it for tablet. */
	.lt-news-list-pad {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	/* The wishlist heart (product + featured cards) is a fixed 26px — too big on the
	   smaller tablet/phone cards. Scale it down (keeps a tappable 40px hit area). */
	.lt-feat-heart-btn {
		font-size: 20px;
	}

	/* Nudge the heart closer to the card's top-left corner on tablet/phone
	   (desktop default is left:15.5px / padding-top:13px). */
	.lt-feat-heart-area {
		left: 8px;
		padding-top: 8px;
	}

	.lt-footer-inner {
		grid-template-columns: 1fr 1fr;
	}

	.lt-about-inner {
		grid-template-columns: 1fr;
	}

	.lt-products-page-inner {
		grid-template-columns: 260px 1fr;
	}

	.lt-about-story-grid {
		grid-template-columns: 1fr;
	}

	.lt-stores-grid {
		grid-template-columns: 1fr;
	}

	.lt-auth-page {
		grid-template-columns: 1fr;
	}

	.lt-auth-sidebar {
		display: none;
	}

	.lt-news-hero-inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {

	/* Hide desktop-only header items on mobile */
	.lt-desktop-only {
		display: none !important;
	}

	/* Fix 2: Header always at top on mobile */
	.lt-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin-bottom: 0;
		background: #002e5e;
	}

	/* Push announcement bar below fixed header */
	.lt-top-adv {
		margin-top: 68px;
	}

	/* Mobile header is fixed (not the -108px desktop overlay), so the hero needs no
	   desktop top-compensation — the announcement bar already reserves the space. */
	.lt-hero {
		margin-top: 0;
	}

	.lt-header-inner {
		padding: 0;
	}

	/* Fix: reduce header row padding on mobile */
	.lt-header-row1 {
		padding: 0 0.75rem;
	}

	/* Hide social icons from header bar on mobile — shown in hamburger menu instead */
	.lt-header-right .lt-social-icon {
		display: none;
	}

	.lt-section,
	.lt-about-section,
	.lt-products-light,
	.lt-contact-section {
		padding: 40px 1rem;
	}

	.lt-featured-section {
		min-height: auto;
	}

	.lt-featured-hd {
		height: auto;
		padding: 20px 1rem 12px;
	}

	.lt-featured-title {
		font-size: 24px;
	}

	/* 今期推薦 mobile layout is defined once, lower down, as a 2-column grid
	   (see the .lt-feat-track grid rule in the next 767px block). The old
	   horizontal-carousel rules that used to live here were removed so the two
	   no longer conflict. */
	.lt-feat-img-box {
		aspect-ratio: 1/1;
	}

	.lt-feat-arrow {
		display: none;
	}

	.lt-featured-bottom {
		height: 24px;
	}

	.lt-hero-slide img {
		height: 280px;
	}

	.lt-products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.lt-news-grid,
	.lt-products-light-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.lt-products-page-inner {
		grid-template-columns: 1fr;
	}

	.lt-filter-sidebar {
		display: none;
	}

	.lt-footer {
		padding: 2.5rem 1rem;
	}

	.lt-footer-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.lt-nav {
		display: none;
	}

	/* Fix 1: Mobile nav open state */
	.lt-nav.mobile-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 68px;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.97);
		z-index: 999;
		padding: 0.5rem 1.5rem 1.25rem;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
		max-height: calc(100vh - 68px);
		overflow-y: auto;
	}

	.lt-nav.mobile-open .lt-nav-link {
		height: auto;
		padding: 0.85rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		font-size: 1rem;
		letter-spacing: 0.5px;
	}

	.lt-nav.mobile-open .lt-nav-link:last-child {
		border-bottom: none;
	}

	/* Social icons row inside hamburger menu */
	.lt-nav-social {
		display: flex;
		gap: 0.85rem;
		padding: 0.85rem 0 0;
		margin-top: 0.25rem;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	.lt-nav-social-link {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		color: rgba(255, 255, 255, 0.85);
		font-size: 1.15rem;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background var(--lt-transition), color var(--lt-transition);
		text-decoration: none;
	}

	.lt-nav-social-link:hover {
		background: var(--lt-primary);
		color: #fff;
	}

	.lt-nav-toggle {
		display: flex;
	}

	.lt-about-hero {
		height: 400px;
	}

	.lt-about-hero-title {
		font-size: 3.5rem;
	}

	.lt-page-hero h1 {
		font-size: 2.5rem;
	}

	.lt-page-hero p {
		font-size: 1.75rem;
	}

	.lt-section-title {
		font-size: 2rem;
	}

	.lt-news-section-title {
		font-size: 2rem;
	}

	.lt-alert {
		margin: .75rem 1rem;
	}
}

@media (max-width: 575px) {

	.lt-products-grid,
	.lt-news-grid,
	.lt-products-light-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .75rem;
	}

	.lt-hero-slide img {
		height: 220px;
	}

	.lt-btn-order {
		font-size: 1rem;
		padding: .65rem 1.8rem;
	}

	.lt-products-content-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* News page cards have tall fixed-height images — one per row reads better
	   than two cramped columns on a phone. */
	.lt-news-page-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── News List Hero (Figma: 2a_最新資訊) ─────────────────────────────────── */
.lt-news-list-hero {
	position: relative;
	width: 100%;
	height: 748px;
	overflow: hidden;
	display: flex;
	align-items: center;
	margin-top: 120px;
}

/* Background image layer — 80% wide, pinned to the right on desktop */
.lt-news-list-hero-bg {
	position: absolute;
	top: 0;
	right: 40px;
	width: 90%;
	height: 100%;
	z-index: 0;
}

.lt-news-list-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-news-list-hero-card {
	position: relative;
	z-index: 2;
	width: 419px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 1);
	padding: 48px 32px;
	/* margin-left: 91px; */
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
}

.lt-news-list-tagline {
	font-size: 18px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	margin-bottom: 12px;
	letter-spacing: 0.3px;
}

.lt-news-list-heading {
	font-size: 44px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	line-height: 1.2;
	margin: 0 0 1.5rem;
}

.lt-news-list-desc {
	font-size: 16px;
	font-weight: 400;
	color: rgba(85, 85, 85, 1);
	line-height: 1.75;
	margin: 0;
}

/* ─── News Detail (Figma: newsDetail) ────────────────────────────────────── */
.lt-news-detail-wrap {
	display: flex;
	width: 100%;
	min-height: 700px;
	background: #ffffff;
	align-items: stretch;
	margin-top: 108px;
}

.lt-news-detail-content {
	flex: 1 1 57%;
	padding: 80px 60px 80px 200px;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lt-news-detail-back {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lt-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 2rem;
	transition: color var(--lt-transition);
}

.lt-news-detail-back:hover {
	color: var(--lt-primary-d);
}

.lt-news-detail-title {
	font-size: 44px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	margin: 0 0 2rem;
	line-height: 1.2;
	max-width: 528px;
}

.lt-news-detail-body {
	font-size: 20px;
	font-weight: 400;
	color: rgba(60, 60, 67, 0.6);
	line-height: 1.85;
	margin-bottom: 2.5rem;
	max-width: 697px;
}

.lt-news-detail-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.lt-news-detail-date {
	font-size: 15px;
	font-weight: 600;
	color: var(--lt-primary);
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.lt-news-detail-author {
	font-size: 15px;
	font-weight: 600;
	color: var(--lt-text-dark);
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.lt-news-detail-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.lt-news-detail-cta {
	display: inline-block;
	background: var(--lt-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.6rem 2rem;
	border-radius: 3px;
	text-decoration: none;
	transition: all var(--lt-transition);
	letter-spacing: 0.5px;
}

.lt-news-detail-cta:hover {
	background: var(--lt-primary-d);
	color: #fff;
	transform: translateY(-1px);
}

.lt-news-detail-share {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.lt-news-detail-share a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--lt-bg-light);
	color: var(--lt-text-dark);
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--lt-transition);
	text-decoration: none;
}

.lt-news-detail-share a:hover {
	background: var(--lt-primary);
	color: #fff;
}

.lt-news-detail-img-panel {
	flex: 0 0 43%;
	max-width: 43%;
	position: relative;
	overflow: hidden;
	min-height: 700px;
}

.lt-news-detail-img-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Related news section */
.lt-news-related {
	background: var(--lt-bg);
	padding: 0;
}

.lt-news-related-inner {
	max-width: 1960px;
	margin: 0 auto;
	padding: 48px 43px 0;
}

.lt-news-related-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--lt-text-dark);
	margin-bottom: 1.5rem;
}

/* ─── Contact / Brand Story Page (Figma: contactUs) ──────────────────────── */
.lt-contact-page-hero {
	position: relative;
	width: 100%;
	height: 380px;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
}

.lt-contact-page-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lt-contact-page-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.lt-contact-page-hero-text {
	position: relative;
	z-index: 2;
	padding: 3rem 43px 0 43px;
}

.lt-contact-page-hero-label {
	font-size: 36px;
	font-weight: 700;
	color: rgba(9, 60, 113, 1);
	margin: 0 0 0.4rem;
	line-height: 1;
}

.lt-contact-page-hero-sub {
	font-size: 20px;
	font-weight: 400;
	color: rgba(9, 60, 113, 1);
	margin: 0;
	line-height: 1.4;
}

/* Stories section */
.lt-contact-page-stories {
	background: rgba(244, 244, 244, 1);
	padding: 60px 43px;
	margin-bottom: 150px;
}

.lt-contact-page-stories-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* Row layouts */
.lt-contact-row {
	display: flex;
	gap: 2rem;
	align-items: stretch;
}

.lt-contact-row--img-left .lt-contact-img-block {
	flex: 0 0 58%;
}

.lt-contact-row--img-left .lt-contact-card-block {
	flex: 1;
}

.lt-contact-row--card-left .lt-contact-img-block {
	flex: 0 0 42%;
}

.lt-contact-row--card-left .lt-contact-card-block {
	flex: 1;
}

.lt-contact-row--two-cards .lt-contact-img-block,
.lt-contact-row--two-cards .lt-contact-card-block {
	flex: 1;
}

/* Row 5: wide image (right ~68%) + card (left ~32%) */
.lt-contact-row--wide-img {
	align-items: flex-end;
}

.lt-contact-row--wide-img .lt-contact-card-block {
	flex: 0 0 32%;
}

.lt-contact-row--wide-img .lt-contact-img-block {
	flex: 1;
}

/* Row 5: wide image (right ~68%) + card (left ~32%) */
.lt-contact-row--wide-img {
	align-items: flex-end;
}

.lt-contact-row--wide-img .lt-contact-card-block {
	flex: 0 0 32%;
}

.lt-contact-row--wide-img .lt-contact-img-block {
	flex: 1;
}

/* Image blocks */
.lt-contact-img-block {
	overflow: hidden;
	border-radius: 2px;
	min-height: 380px;
}

.lt-contact-img-block--tall {
	min-height: 480px;
}

.lt-contact-img-block--wide {
	min-height: 520px;
}

.lt-contact-img-block--wide {
	min-height: 520px;
}

.lt-contact-img-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.lt-contact-img-block:hover img {
	transform: scale(1.04);
}

/* Card blocks */
.lt-contact-card-block {
	display: flex;
	align-items: center;
}

.lt-contact-card-block--bottom {
	align-items: flex-end;
}

/* Story cards */
.lt-contact-story-card {
	background: #ffffff;
	padding: 32px 31px;
	border-radius: 2px;
	width: 100%;
}

/* Plain story text — no white card bg, used in Row 3 */
.lt-contact-story-plain {
	width: 100%;
	padding: 0 8px;
}

/* Plain story text — no white card bg, used in Row 3 */
.lt-contact-story-plain {
	width: 100%;
	padding: 0 8px;
}

.lt-contact-story-title {
	font-size: 24px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	margin: 0 0 1rem;
	line-height: 1.3;
}

.lt-contact-story-text {
	font-size: 18px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	line-height: 1.75;
	margin: 0;
}

/* ─── Contact Us Stories — new layout classes (lt-cus-*) ─────────────────── */
/* Shared row base */
.lt-cus-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 4px;
}

/* Row 1: Image left (55%) + card right (45%) centred vertically */
.lt-cus-row--img-left {
	align-items: center;
}

.lt-cus-row--img-left .lt-cus-img {
	flex: 0 0 55%;
}

.lt-cus-row--img-left .lt-cus-card-wrap {
	flex: 1;
	padding: 0 0 0 48px;
}

/* Row 2: Card left (50%) + tall image right (50%) */
.lt-cus-row--card-left {
	align-items: stretch;
}

.lt-cus-row--card-left .lt-cus-card-wrap {
	flex: 0 0 50%;
	padding: 0 48px 0 0;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

/* Nudge the bottom card (建立蛋糕品牌) slightly to the right. */
.lt-cus-row--card-left .lt-cus-card-wrap .lt-cus-row--card-only {
	margin-left: 100px;
}

/* Right margin on the top card (草莓西瓜蛋糕). The card is width:100%, so a plain
   margin-right just overflows — shrink the width instead to leave space on the right. */
.lt-cus-row--card-left .lt-cus-card-wrap > .lt-cus-card {
	width: calc(100% - 100px);
}

.lt-cus-row--card-left .lt-cus-img {
	flex: 1;
}

/* Row 3: Card only (no image) */
.lt-cus-row--card-only {
	padding: 40px 0;
}

.lt-cus-row--card-only .lt-cus-card {
	max-width: 920px;
}

/* Images */
.lt-cus-img {
	overflow: hidden;
}

.lt-cus-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.lt-cus-img:hover img {
	transform: scale(1.03);
}

/* Row 1 image fixed height */
.lt-cus-img--r1 {
	height: 622px;
}

/* Row 2 tall image */
.lt-cus-img--r2-tall {
	height: 520px;
	align-self: stretch;
}

.lt-cus-img--r2-tall img {
	height: 100%;
}

/* Card wrapper (aligns card inside flex) */
.lt-cus-card-wrap {
	display: flex;
	align-items: center;
}

.lt-cus-card-wrap--center {
	align-items: center;
}

/* White card */
.lt-cus-card {
	background: #ffffff;
	padding: 32px 31px;
	border-radius: 2px;
	width: 100%;
}

/* Overlay rows (4 & 5): full-width image + overlaid card */
.lt-cus-overlay-row {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 4px;
}

.lt-cus-overlay-img {
	flex: 1 1 90%;
	min-width: 0;
	height: 640px;
	overflow: hidden;
}

.lt-cus-overlay-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-cus-overlay-card {
	flex: 1 1 50%;
	min-width: 0;
	padding: 0 80px;
	
}

/* image left · text right (default DOM order: img then card) */
.lt-cus-overlay-card--right {
	order: 0;
}

/* image right · text left (card pulled before the image) */
.lt-cus-overlay-card--left {
	order: -1;
	position: relative;
	z-index: 2;
	transform: translateX(120px);
}

/* 關於我們 — tablet (768–1024px): the desktop rows use 55%/50% splits, 48–80px padding,
   520–640px fixed heights and translateX(120px)/margin-left:100px nudges that overflow at
   tablet width. Tighten padding, drop the nudges, and reduce the tall image heights so the
   two-column layout fits. Range-scoped (≥768) so it never clashes with the ≤767 mobile
   stack; !important so it wins over the desktop rules regardless of source order. */
@media (min-width: 768px) and (max-width: 1024px) {
	.lt-cus-row--img-left .lt-cus-card-wrap { padding-left: 28px !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap { padding-right: 28px !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap .lt-cus-row--card-only { margin-left: 0 !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap > .lt-cus-card { width: 100% !important; }
	.lt-cus-overlay-card { padding: 0 32px !important; }
	.lt-cus-overlay-card--left { transform: none !important; }
	.lt-cus-img--r1 { height: 440px !important; }
	.lt-cus-img--r2-tall { height: 400px !important; }
	.lt-cus-overlay-img { height: 460px !important; }
}

@media (max-width: 767px) {
	.lt-cus-overlay-row { flex-direction: column; }
	.lt-cus-overlay-row .lt-cus-overlay-img { flex: none; width: 100%; }
	.lt-cus-overlay-row .lt-cus-overlay-card { flex: none; width: 100%; padding: 28px 20px; order: 0; }
}

/* ── Mobile responsive for lt-cus-* ── */
@media (max-width: 767px) {
	.lt-cus-row {
		flex-direction: column;
	}

	.lt-cus-row--img-left .lt-cus-img,
	.lt-cus-row--card-left .lt-cus-img {
		flex: none;
		width: 100%;
		height: 260px !important;
	}

	.lt-cus-row--img-left .lt-cus-card-wrap,
	.lt-cus-row--card-left .lt-cus-card-wrap {
		flex: none;
		width: 100%;
		padding: 0;
	}

	.lt-cus-overlay-img {
		height: 320px;
	}

	.lt-cus-overlay-card {
		position: static;
		width: 100%;
		bottom: auto;
		right: auto;
		left: auto;
	}
}

/* ─── Contact Us Stories — new layout classes (lt-cus-*) ─────────────────── */
/* Shared row base */
.lt-cus-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-bottom: 4px;
}

/* Row 1: Image left (55%) + card right (45%) centred vertically */
.lt-cus-row--img-left {
	align-items: center;
}

.lt-cus-row--img-left .lt-cus-img {
	flex: 0 0 55%;
}

.lt-cus-row--img-left .lt-cus-card-wrap {
	flex: 1;
	padding: 0 0 0 48px;
}

/* Row 2: Card left (50%) + tall image right (50%) */
.lt-cus-row--card-left {
	align-items: stretch;
}

.lt-cus-row--card-left .lt-cus-card-wrap {
	flex: 0 0 50%;
	padding: 0 48px 0 0;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

/* Nudge the bottom card (建立蛋糕品牌) slightly to the right. */
.lt-cus-row--card-left .lt-cus-card-wrap .lt-cus-row--card-only {
	margin-left: 100px;
}

/* Right margin on the top card (草莓西瓜蛋糕). The card is width:100%, so a plain
   margin-right just overflows — shrink the width instead to leave space on the right. */
.lt-cus-row--card-left .lt-cus-card-wrap > .lt-cus-card {
	width: calc(100% - 100px);
}

.lt-cus-row--card-left .lt-cus-img {
	flex: 1;
}

/* Row 3: Card only (no image) */
.lt-cus-row--card-only {
	padding: 40px 0;
}

.lt-cus-row--card-only .lt-cus-card {
	max-width: 920px;
}

/* Images */
.lt-cus-img {
	overflow: hidden;
}

.lt-cus-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.lt-cus-img:hover img {
	transform: scale(1.03);
}

/* Row 1 image fixed height */
.lt-cus-img--r1 {
	height: 622px;
}

/* Row 2 tall image */
.lt-cus-img--r2-tall {
	height: 520px;
	align-self: stretch;
}

.lt-cus-img--r2-tall img {
	height: 100%;
}

/* Card wrapper (aligns card inside flex) */
.lt-cus-card-wrap {
	display: flex;
	align-items: center;
}

.lt-cus-card-wrap--center {
	align-items: center;
}

/* White card */
.lt-cus-card {
	background: #ffffff;
	padding: 32px 31px;
	border-radius: 2px;
	width: 100%;
}

/* Overlay rows (4 & 5): full-width image + overlaid card */
.lt-cus-overlay-row {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 4px;
}

.lt-cus-overlay-img {
	flex: 1 1 70%;
	min-width: 0;
	height: 640px;
	overflow: hidden;
	margin-bottom: -100px;
    margin-top: 42px;
}

.lt-cus-overlay-img-top {
	flex: 1 1 70%;
	min-width: 0;
	height: 640px;
	overflow: hidden;
}

.lt-cus-overlay-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-cus-overlay-card {
	flex: 1 1 50%;
	min-width: 0;
	padding: 0 80px;
}

/* image left · text right (default DOM order: img then card) */
.lt-cus-overlay-card--right {
	order: 0;
}

/* image right · text left (card pulled before the image) */
.lt-cus-overlay-card--left {
	order: -1;
	position: relative;
	z-index: 2;
	transform: translateX(120px);
}

/* 關於我們 — tablet (768–1024px): the desktop rows use 55%/50% splits, 48–80px padding,
   520–640px fixed heights and translateX(120px)/margin-left:100px nudges that overflow at
   tablet width. Tighten padding, drop the nudges, and reduce the tall image heights so the
   two-column layout fits. Range-scoped (≥768) so it never clashes with the ≤767 mobile
   stack; !important so it wins over the desktop rules regardless of source order. */
@media (min-width: 768px) and (max-width: 1024px) {
	.lt-cus-row--img-left .lt-cus-card-wrap { padding-left: 28px !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap { padding-right: 28px !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap .lt-cus-row--card-only { margin-left: 0 !important; }
	.lt-cus-row--card-left .lt-cus-card-wrap > .lt-cus-card { width: 100% !important; }
	.lt-cus-overlay-card { padding: 0 32px !important; }
	.lt-cus-overlay-card--left { transform: none !important; }
	.lt-cus-img--r1 { height: 440px !important; }
	.lt-cus-img--r2-tall { height: 400px !important; }
	.lt-cus-overlay-img { height: 460px !important; }
}

@media (max-width: 767px) {
	.lt-cus-overlay-row { flex-direction: column; }
	.lt-cus-overlay-row .lt-cus-overlay-img { flex: none; width: 100%; }
	.lt-cus-overlay-row .lt-cus-overlay-card { flex: none; width: 100%; padding: 28px 20px; order: 0; }
}

/* ── Mobile responsive for lt-cus-* ── */
@media (max-width: 767px) {
	.lt-cus-row {
		flex-direction: column;
	}

	.lt-cus-row--img-left .lt-cus-img,
	.lt-cus-row--card-left .lt-cus-img {
		flex: none;
		width: 100%;
		height: 260px !important;
	}

	.lt-cus-row--img-left .lt-cus-card-wrap,
	.lt-cus-row--card-left .lt-cus-card-wrap {
		flex: none;
		width: 100%;
		padding: 0;
	}

	.lt-cus-overlay-img {
		height: 320px;
	}

	.lt-cus-overlay-card {
		position: static;
		width: 100%;
		bottom: auto;
		right: auto;
		left: auto;
	}

	/* Reset desktop nudges that push/cramp the story text off-screen on mobile. */
	.lt-cus-overlay-card--left { transform: none; }
	.lt-cus-row--card-left .lt-cus-card-wrap .lt-cus-row--card-only { margin-left: 0; }
	.lt-cus-row--card-left .lt-cus-card-wrap > .lt-cus-card { width: 100%; }
}

/* Contact Info Bar */
.lt-contact-info-bar {
	background: #ffffff;
	padding: 48px 43px;
	border-top: 1px solid var(--lt-border);
}

.lt-contact-info-bar-inner {
	max-width: 1960px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
}

.lt-contact-info-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 3rem;
	flex: 1;
}

.lt-contact-info-item:first-child {
	padding-left: 0;
}

.lt-contact-info-item--social {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.lt-contact-info-icon {
	font-size: 1.5rem;
	color: var(--lt-primary);
	flex-shrink: 0;
}

.lt-contact-info-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lt-text-light);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 0.2rem;
}

.lt-contact-info-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--lt-text-dark);
}

.lt-contact-info-value a {
	color: var(--lt-text-dark);
	text-decoration: none;
	transition: color var(--lt-transition);
}

.lt-contact-info-value a:hover {
	color: var(--lt-primary);
}

.lt-contact-info-divider {
	width: 1px;
	height: 48px;
	background: var(--lt-border);
	flex-shrink: 0;
}

.lt-contact-info-social {
	display: flex;
	gap: 0.65rem;
}

.lt-contact-info-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--lt-bg-light);
	color: var(--lt-text-dark);
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--lt-transition);
	text-decoration: none;
}

.lt-contact-info-social a:hover {
	background: var(--lt-primary);
	color: #fff;
}

/* ─── Responsive: News List Hero ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	.lt-news-list-hero {
		height: 500px;
	}

	.lt-news-list-hero-card {
		width: 360px;
		margin-left: 43px;
	}

	.lt-news-list-heading {
		font-size: 32px;
	}

	/* News detail */
	.lt-news-detail-wrap {
		flex-direction: column;
		margin-top: 0;
	}

	.lt-news-detail-title {
		font-size: 32px;
	}

	.lt-news-detail-body {
		font-size: 17px;
	}

	/* Contact hero */
	.lt-contact-page-hero {
		height: 560px;
	}

	.lt-contact-page-hero-text {
		padding: 0 43px 3rem 43px;
	}

	.lt-contact-page-hero-label {
		font-size: 48px;
	}

	.lt-contact-page-hero-sub {
		font-size: 28px;
	}

	/* Contact info bar */
	.lt-contact-info-bar-inner {
		gap: 1.5rem;
	}

	.lt-contact-info-item {
		padding: 0 1.5rem;
	}
}

@media (max-width: 767px) {

	/* News list hero */
	.lt-news-list-hero {
		height: auto;
		min-height: 420px;
		padding: 80px 1rem 40px;
		margin-top: 0;
		/* mobile: no top margin */
		align-items: flex-end;
	}

	.lt-news-list-hero-bg {
		width: 100%;
		left: 0;
		right: 0;
	}

	.lt-news-list-hero-card {
		width: 100%;
		margin-left: 0;
		padding: 28px 20px;
	}

	.lt-news-list-heading {
		font-size: 26px;
	}

	.lt-news-list-tagline {
		font-size: 14px;
	}

	.lt-news-list-desc {
		font-size: 14px;
	}

	/* News detail */
	.lt-news-detail-wrap {
		flex-direction: column;
		margin-top: 0;
	}

	.lt-news-detail-img-panel {
		flex: none;
		max-width: 100%;
		min-height: 280px;
		order: -1;
	}

	.lt-news-detail-content {
		padding: 40px 1rem 40px;
	}

	.lt-news-detail-title {
		font-size: 26px;
		max-width: 100%;
	}

	.lt-news-detail-body {
		font-size: 16px;
		max-width: 100%;
	}

	/* Contact hero */
	.lt-contact-page-hero {
		height: 400px;
	}

	.lt-contact-page-hero-text {
		padding: 0 1rem 2.5rem;
	}

	.lt-contact-page-hero-label {
		font-size: 36px;
	}

	.lt-contact-page-hero-sub {
		font-size: 20px;
	}

	/* Contact stories */
	.lt-contact-page-stories {
		padding: 40px 1rem;
	}

	.lt-contact-row {
		flex-direction: column;
	}

	.lt-contact-row--card-left .lt-contact-img-block {
		order: -1;
	}

	.lt-contact-img-block,
	.lt-contact-img-block--tall {
		min-height: 260px;
		flex: none;
		width: 100%;
	}

	.lt-contact-card-block {
		width: 100%;
	}

	.lt-contact-story-title {
		font-size: 20px;
	}

	.lt-contact-story-text {
		font-size: 15px;
	}

	/* Contact info bar */
	.lt-contact-info-bar {
		padding: 32px 1rem;
	}

	.lt-contact-info-bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.lt-contact-info-item {
		padding: 0;
		flex: none;
		width: 100%;
	}

	.lt-contact-info-divider {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Event Banner — Style 1 (image left + info card right)
                  Style 2 (full-width banner with text overlay)
   ══════════════════════════════════════════════════════════════════════════ */
.lt-event-section {
	width: 100%;
	overflow: hidden;
}

/* ── Style 1 ──────────────────────────────────────────────────────────── */
.lt-event-style1 {
	display: flex;
	align-items: stretch;
	min-height: 600px;
}

.lt-event-s1-img {
	flex: 0 0 55%;
	position: relative;
	overflow: hidden;
}

.lt-event-s1-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-event-s1-content {
	flex: 1;
	background: #f5f0e8;
	display: flex;
	align-items: center;
	padding: 3rem 3.5rem;
}

.lt-event-s1-inner {
	max-width: 520px;
}

.lt-event-s1-title {
	font-size: 44px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.lt-event-s1-price {
	font-size: 26px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	margin-bottom: 0.5rem;
}

.lt-event-s1-subtitle {
	font-size: 20px;
	color: rgba(60, 60, 67, 0.6);
	margin-bottom: 1rem;
	line-height: 1.5;
}

.lt-event-s1-desc {
	font-size: 18px;
	color: rgba(60, 60, 67, 0.6);
	line-height: 1.75;
}

/* ── Style 2 ──────────────────────────────────────────────────────────── */
.lt-event-style2 {
	position: relative;
	min-height: 500px;
}

.lt-event-s2-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.lt-event-s2-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-event-s2-overlay {
	position: relative;
	z-index: 1;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4rem;
	margin-left: auto;
	width: 60%;
}

.lt-event-s2-title {
	font-family: 'Inknut Antiqua', 'Georgia', serif;
	font-size: 32px;
	font-weight: 700;
	color: rgba(125, 95, 56, 1);
	text-align: center;
	text-shadow: 0 4px 4px rgba(1, 1, 1, 0.85);
	margin: 0 0 1.5rem;
	line-height: 1.3;
}

.lt-event-s2-desc {
	font-size: 22px;
	font-weight: 700;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	line-height: 1.65;
	margin: 0;
}

/* ── Mobile responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
	.lt-event-style1 {
		flex-direction: column;
		min-height: auto;
	}

	.lt-event-s1-img {
		flex: none;
		height: 260px;
	}

	.lt-event-s1-content {
		padding: 2rem 1.25rem;
	}

	.lt-event-s1-title {
		font-size: 28px;
	}

	.lt-event-s1-price {
		font-size: 20px;
	}

	.lt-event-s1-subtitle {
		font-size: 16px;
	}

	.lt-event-s1-desc {
		font-size: 15px;
	}

	.lt-event-style2 {
		min-height: 380px;
	}

	.lt-event-s2-bg {
		min-height: 380px;
	}

	.lt-event-s2-overlay {
		width: 100%;
		padding: 2rem 1.25rem;
		min-height: 380px;
	}

	.lt-event-s2-title {
		font-size: 22px;
	}

	.lt-event-s2-desc {
		font-size: 15px;
	}
}

/* ─── Login / Guest Checkout Modal ──────────────────────────────────────── */
.lt-login-guest-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.lt-login-guest-overlay.open {
	opacity: 1;
	visibility: visible;
}

.lt-login-guest-modal {
	background: #fff;
	border-radius: 12px;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	transform: translateY(20px);
	transition: transform 0.2s;
	text-align: center;
}

.lt-login-guest-overlay.open .lt-login-guest-modal {
	transform: translateY(0);
}

.lt-login-guest-hd {
	position: relative;
	color: #fff;
	padding: 1.25rem 1.5rem;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lt-login-guest-logo {
	margin: 2rem auto 0;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lt-login-guest-logo img {
	width: 180px;
	object-fit: contain;
}

.lt-login-guest-body {
	padding: 1.5rem 2rem 2rem;
}

.lt-login-guest-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #AA9662;
	margin-bottom: 0.375rem;
}

.lt-login-guest-subtitle {
	font-size: 0.875rem;
	color: #AA9662;
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

.lt-login-guest-btn {
	display: block;
	width: 100%;
	padding: 0.875rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	border: none;
	transition: background 0.2s;
}

.lt-login-guest-btn.primary {
	background: #AA9662;
	color: #fff;
}

.lt-login-guest-btn.primary:hover {
	background: #967e57;
}

.lt-login-guest-divider {
	display: flex;
	align-items: center;
	margin: 1.25rem 0;
	color: #ccc;
	font-size: 0.875rem;
	gap: 0.5rem;
}

.lt-login-guest-divider::before,
.lt-login-guest-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #ddd;
}

.lt-login-guest-guest-text {
	font-size: 1.125rem;
	color: #AA9662;
	margin-bottom: 0.75rem;
}

.lt-login-guest-btn.guest {
	background: #fff;
	color: #AA9662;
	border: 1.5px solid #AA9662;
}

.lt-login-guest-btn.guest:hover {
	background: rgba(170, 150, 98, 0.05);
}

.lt-login-guest-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	color: #1D1B20;
	font-size: 2rem;
	cursor: pointer;
	z-index: 1;
}

.lt-login-guest-close:hover {
	color: #1D1B20;
}

/* ── Product Detail Addon Options ─────────────────────────────────────── */

.pd-number-options {
	margin-top: 10px;
	padding: 10px;
	background: #f9f9f9;
	border-radius: 4px;
	border: 1px solid #eee;
}

.pd-number-options-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	color: #333;
}

.pd-number-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #eee;
}

.pd-number-option:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.pd-number-label {
	font-size: 14px;
	color: #555;
}

.pd-qty-stepper-small {
	width: 120px;
}

.pd-qty-stepper-small .pd-qty-btn {
	width: 30px;
	height: 30px;
	font-size: 14px;
}

.pd-qty-stepper-small .pd-qty-input {
	width: 40px;
	height: 30px;
	font-size: 14px;
}

.pd-free-label {
	color: #28a745;
	font-weight: bold;
	margin-right: 8px;
}

.pd-text-options {
	margin-top: 10px;
}

.pd-text-field {
	display: block;
	margin-bottom: 12px;
}

.pd-text-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #555;
	margin-bottom: 4px;
}

.pd-text-select {
	display: block;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}

.pd-text-select:focus {
	outline: none;
	border-color: #AA9662;
}

.pd-text-input {
	display: block;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	margin-top: 4px;
}

.pd-text-input:focus {
	outline: none;
	border-color: #AA9662;
}

/* Responsive styles for addon options */
@media (max-width: 600px) {
	.pd-number-option {
		flex-direction: column;
		align-items: flex-start;
	}

	.pd-number-label {
		margin-bottom: 5px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Detail Page  –  Figma "6a_選蛋糕頁(未選擇任何選項時)"
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ─────────────────────────────────────────────────────── */
.pd-section {
	background: #fff;
	padding-top:90px;
}

.pd-container {
	max-width: 1920px;
	margin: 0 auto;
	padding: 40px 302px 60px;
}

@media (max-width: 1919px) {
	.pd-container {
		padding: 40px 15.73% 60px;
	}
}

/* ── Two-column grid (left 59 / right 41 ≈ 770 : 537) ───────────────── */
.pd-layout {
	display: grid;
	grid-template-columns: 59fr 41fr;
	gap: 10px;
	align-items: start;
}

/* ════════════════════════════════════════════════════════════════════════
   LEFT COLUMN – Image Gallery
   ════════════════════════════════════════════════════════════════════════ */
.pd-gallery {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 20px;
}

/* Main image */
.pd-main-img-wrap {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	position: relative; /* anchors the swipe-transition ghost image */
	aspect-ratio: 1 / 1;
	width: 100%;
	box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.pd-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.pd-main-img-wrap:hover .pd-main-img {
	transform: scale(1.03);
}

/* Dot indicators */
.pd-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pd-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #d4c99a;
	padding: 0;
	cursor: pointer;
	transition: background .25s, transform .25s;
	flex-shrink: 0;
}

.pd-dot.active {
	background: #AA9662;
	transform: scale(1.35);
}

/* Thumbnail strip */
.pd-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.pd-thumb {
	width: 90px;
	height: 90px;
	border: 2px solid #e0d9ca;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	flex-shrink: 0;
}

.pd-thumb.active,
.pd-thumb:hover {
	border-color: #AA9662;
	box-shadow: 0 0 0 2px rgba(170,150,98,.25);
}

.pd-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   RIGHT COLUMN – Product Info
   ════════════════════════════════════════════════════════════════════════ */
.pd-info {
	display: flex;
	flex-direction: column;
}

/* ── part1_cake ──────────────────────────────────────────────────────── */
.pd-part1 {
	padding: 10px 10px 24px;
}

/* Price row */
.pd-price-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 10px;
}

.pd-price-current {
	font-size: 24px;
	font-weight: 700;
	color: #AA9662;
	line-height: 1;
}

.pd-price-original {
	font-size: 20px;
	font-weight: 400;
	color: #999;
	text-decoration: line-through;
	line-height: 1;
}

/* Product name */
.pd-name {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	margin: 0 0 14px;
	line-height: 1.4;
}

/* Gold separator */
.pd-divider {
	height: 1px;
	background: linear-gradient(to right, #AA9662 0%, #e8dfc6 100%);
	margin: 14px 0;
	opacity: .55;
}

/* Coupon notice */
.pd-coupon-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.pd-coupon-text {
	font-size: 14px;
	font-weight: 400;
	color: #AA9662;
}

.pd-coupon-help {
	width: 17px;
	height: 16px;
	border-radius: 3px;
	background: #e7e7e7;
	font-size: 10px;
	font-weight: 600;
	color: #555;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s;
}

.pd-coupon-help:hover {
	background: #d4c99a;
	color: #fff;
}

/* Tags row */
.pd-tags-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.pd-tags-label {
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

.pd-tag-icon {
	color: #AA9662;
	font-size: 17px;
	line-height: 1;
}

.pd-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.pd-tag-outline {
	color: #C2A475;
	border: 1.5px solid #C2A475;
	background: transparent;
}

.pd-tag-fill {
	color: #fff;
	background: #b3b3b3;
	border: 1.5px solid #b3b3b3;
}

/* Options container */
.pd-options {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pd-select-group,
.pd-qty-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-select-label {
	font-size: 16px;
	font-weight: 400;
	color: #303F50;
}

/* Select dropdown */
.pd-select-wrap {
	position: relative;
}

.pd-select {
	width: 100%;
	height: 52px;
	border: 1.5px solid #303030;
	border-radius: 4px;
	padding: 0 40px 0 14px;
	font-size: 14px;
	font-weight: 400;
	color: #8c8c8c;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: none;
	transition: border-color .2s, color .2s;
	font-family: inherit;
}

.pd-select:focus {
	border-color: #AA9662;
	color: #333;
}

.pd-select option:not([disabled]) {
	color: #333;
}

.pd-select-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: #303F50;
	pointer-events: none;
}

/* Quantity stepper */
.pd-qty-stepper {
	display: flex;
	align-items: center;
	width: 158px;
	height: 40px;
	border: 1.5px solid #d4c99a;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.pd-qty-btn {
	width: 40px;
	height: 100%;
	border: none;
	background: transparent;
	font-size: 20px;
	font-weight: 400;
	color: #303F50;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s;
	line-height: 1;
}

.pd-qty-btn:hover {
	background: #f5f0e8;
}

.pd-qty-input {
	flex: 1;
	height: 100%;
	border: none;
	border-left: 1px solid #e5dcc8;
	border-right: 1px solid #e5dcc8;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	color: #303F50;
	outline: none;
	-moz-appearance: textfield;
	background: transparent;
	font-family: inherit;
}

.pd-qty-input::-webkit-inner-spin-button,
.pd-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Short description */
.pd-short-desc {
	margin-top: 18px;
	font-size: 14px;
	font-weight: 400;
	color: #555;
	line-height: 1.7;
}

/* ── part2_extra & part3_addition ────────────────────────────────────── */
.pd-part2,
.pd-part3 {
	padding: 18px 10px 4px;
	border-top: 1px solid #f0e8d8;
}

/* Section header */
.pd-section-hd {
	margin-bottom: 6px;
}

.pd-section-hd-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.pd-section-title {
	font-size: 16px;
	font-weight: 700;
	color: #303F50;
	margin: 0;
}

.pd-section-desc {
	font-size: 14px;
	font-weight: 400;
	color: #AA9662;
	margin: 0 0 10px;
	line-height: 1.55;
}

.pd-section-divider {
	height: 1px;
	background: #AA9662;
	opacity: .3;
	margin: 0 0 4px;
}

/* ── Addon / Addition list ───────────────────────────────────────────── */
.pd-addon-list {
	display: flex;
	flex-direction: column;
}

.pd-addon-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f5f0e8;
}

/* A 免費 (default-free) addon row hides its quantity stepper while the cake
   quantity is 1 (the single free one; paid extras are the 額外 row). Buying 2+
   cakes earns one free PER CAKE, so the product page script overrides this with
   an inline display:flex!important when the main quantity goes above 1. */
.pd-addition-item[data-is-default-free="1"] .pd-text-qty-row { display: none !important; }

.pd-addon-item:last-child {
	border-bottom: none;
}

/* Custom checkbox */
.pd-addon-chk-wrap {
	display: flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.pd-addon-chk {
	display: none;
}

.pd-addon-chk-box {
	width: 18px;
	height: 18px;
	border-radius: 3px;
	border: 1.5px solid #ccc;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s, border-color .2s;
}

.pd-addon-chk-box.checked {
	background: #093C71;
	border-color: #093C71;
}

.pd-addon-chk-box.checked::after {
	content: '';
	display: block;
	width: 10px;
	height: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Addon image */
.pd-addon-img {
	width: 66px;
	height: 66px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #f0ebe0;
}

.pd-addon-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pd-addon-img-empty {
	background: #e8e8e8;
}

/* Addon text */
.pd-addon-info {
	cursor: pointer;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.pd-addon-name {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
}

.pd-addon-price {
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

.pd-addon-original {
	text-decoration: line-through;
	color: #999;
	margin-left: 6px;
}

.pd-addon-link {
	color: #ccc;
	font-size: 18px;
	text-decoration: none;
	flex-shrink: 0;
	transition: color .2s;
	display: flex;
	align-items: center;
}

.pd-addon-link:hover {
	color: #AA9662;
}

/* Blessing fields (hidden by default via JS) */
.pd-blessing-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.pd-blessing-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pd-blessing-label {
	font-size: 16px;
	font-weight: 400;
	color: #333;
}

.pd-blessing-input {
	width: 100%;
	height: 40px;
	border: 1.5px solid #d0d0d0;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	outline: none;
	background: #fff;
	transition: border-color .2s;
}

.pd-blessing-input:focus {
	border-color: #AA9662;
}

/* ── Action Buttons ──────────────────────────────────────────────────── */
.pd-actions {
	display: flex;
	gap: 10px;
	padding: 24px 10px 10px;
	flex-wrap: wrap;
}

.pd-btn {
	flex: 1;
	min-width: 160px;
	height: 46px;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
	text-decoration: none;
	letter-spacing: .3px;
	border-radius: 30px;
}

.pd-btn:hover {
	transform: translateY(-1px);
}

.pd-btn-cart {
	background: #fff;
	color: #AA9662;
	border: 2px solid #AA9662;
}

.pd-btn-cart:hover {
	background: #AA9662;
	color: #fff;
}

.pd-btn-buy {
	background: #AA9662;
	color: #fff;
	border: 2px solid #AA9662;
}

.pd-btn-buy:hover {
	background: #8a7a50;
	border-color: #8a7a50;
	color: #fff;
}

/* ── Related Products ────────────────────────────────────────────────── */
.pd-related {
	padding: 0 302px 60px;
}

@media (max-width: 1919px) {
	.pd-related {
		padding: 0 15.73% 60px;
	}
}

/* On the cart page the carousel already sits inside .lt-cart-page (its own padding), so
   drop the product-page side padding to avoid a doubled, oversized left/right indent. */
.lt-cart-page .pd-related {
	padding-left: 0;
	padding-right: 0;
}

.pd-related-hd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 28px;
	height: 53px;
}

.pd-related-icon {
	width: 52px;
	height: 52px;
	object-fit: contain;
	flex-shrink: 0;
}

.pd-related-title {
	font-size: 38px;
	font-weight: 700;
	color: #AA9662;
	margin: 0;
	line-height: 1;
	font-family: 'Inter', sans-serif;
}

.pd-related-row {
	position: relative;
}

.pd-related-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.pd-related-viewport::-webkit-scrollbar {
	display: none;
}

.pd-related-arrow {
	position: absolute;
	top: 150px;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 1px solid #ead9b8;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
	color: #b08d57;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, border-color .15s;
	z-index: 3;
}

.pd-related-arrow:hover {
	background: #b08d57;
	border-color: #b08d57;
	color: #fff;
}

.pd-related-arrow.prev {
	left: -64px;
}

.pd-related-arrow.next {
	right: -64px;
}

.pd-related-cards {
	display: flex;
	gap: 28px;
}

.pd-related-card {
	/* Exactly 4 per view: 25% of the viewport minus its share of the 3 × 28px gaps. */
	flex: 0 0 calc(25% - 21px);
	min-width: 160px;
}

/* ════════════════════════════════════════════════════════════════════════
   Product Detail – Responsive
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
	.pd-container,
	.pd-related {
		padding-left: 60px;
		padding-right: 60px;
	}
}

@media (max-width: 1100px) {
	.pd-layout {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.pd-container,
	.pd-related {
		padding-left: 24px;
		padding-right: 24px;
	}

	.pd-layout {
		grid-template-columns: 1fr;
	}

	.pd-gallery {
		position: static;
	}

	.pd-related-title {
		font-size: 30px;
	}

	/* The viewport is already touch-scrollable; the absolutely-positioned arrows
	   (left/right: -64px) overflow the reduced padding and cause horizontal page
	   scroll, so hide them and let users swipe. */
	.pd-related-arrow {
		display: none;
	}
}

@media (max-width: 600px) {
	.pd-container {
		padding: 16px 16px 32px;
	}

	.pd-related {
		padding: 0 16px 32px;
	}

	.pd-btn {
		font-size: 15px;
		min-width: 130px;
	}

	.pd-price-current {
		font-size: 20px;
	}

	.pd-name {
		font-size: 17px;
	}

	.pd-related-title {
		font-size: 22px;
	}

	.pd-related-cards {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #d4c99a transparent;
	}

	/* 手機版: thumbnails ate most of the screen — hide the strip entirely.
	   The main image is swipeable (JS) and the dots show the position; the
	   thumbs stay in the DOM as the swipe/jump data source. */
	.pd-thumbs {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Event Banner — Style 1 (image left + info card right)
                  Style 2 (full-width banner with text overlay)
   ══════════════════════════════════════════════════════════════════════════ */
.lt-event-section {
	width: 100%;
	overflow: hidden;
}

/* ── Style 1 ──────────────────────────────────────────────────────────── */
.lt-event-style1 {
	display: flex;
	align-items: stretch;
	min-height: 600px;
}

.lt-event-s1-img {
	flex: 0 0 55%;
	position: relative;
	overflow: hidden;
}

.lt-event-s1-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-event-s1-content {
	flex: 1;
	background: #f5f0e8;
	display: flex;
	align-items: center;
	padding: 3rem 3.5rem;
}

.lt-event-s1-inner {
	max-width: 520px;
}

.lt-event-s1-title {
	font-size: 44px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.lt-event-s1-price {
	font-size: 26px;
	font-weight: 700;
	color: rgba(170, 150, 98, 1);
	margin-bottom: 0.5rem;
}

.lt-event-s1-subtitle {
	font-size: 20px;
	color: rgba(60, 60, 67, 0.6);
	margin-bottom: 1rem;
	line-height: 1.5;
}

.lt-event-s1-desc {
	font-size: 18px;
	color: rgba(60, 60, 67, 0.6);
	line-height: 1.75;
}

/* ── Style 2 ──────────────────────────────────────────────────────────── */
.lt-event-style2 {
	position: relative;
	min-height: 500px;
}

.lt-event-s2-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.lt-event-s2-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lt-event-s2-overlay {
	position: relative;
	z-index: 1;
	min-height: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4rem;
	margin-left: auto;
	width: 60%;
}

.lt-event-s2-title {
	font-family: 'Inknut Antiqua', 'Georgia', serif;
	font-size: 32px;
	font-weight: 700;
	color: rgba(125, 95, 56, 1);
	text-align: center;
	text-shadow: 0 4px 4px rgba(1, 1, 1, 0.85);
	margin: 0 0 1.5rem;
	line-height: 1.3;
}

.lt-event-s2-desc {
	font-size: 22px;
	font-weight: 700;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	line-height: 1.65;
	margin: 0;
}

/* ── Mobile responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
	.lt-event-style1 {
		flex-direction: column;
		min-height: auto;
	}

	.lt-event-s1-img {
		flex: none;
		height: 260px;
	}

	.lt-event-s1-content {
		padding: 2rem 1.25rem;
	}

	.lt-event-s1-title {
		font-size: 28px;
	}

	.lt-event-s1-price {
		font-size: 20px;
	}

	.lt-event-s1-subtitle {
		font-size: 16px;
	}

	.lt-event-s1-desc {
		font-size: 15px;
	}

	.lt-event-style2 {
		min-height: 380px;
	}

	.lt-event-s2-bg {
		min-height: 380px;
	}

	.lt-event-s2-overlay {
		width: 100%;
		padding: 2rem 1.25rem;
		min-height: 380px;
	}

	.lt-event-s2-title {
		font-size: 22px;
	}

	.lt-event-s2-desc {
		font-size: 15px;
	}
}/* ═══════════════════════════════════════════════════════════════════════════
   INLINE CSS EXTRACTED FROM VIEW FILES
   Consolidated, deduplicated, and organized by section
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CHECKOUT STEPS (shared across cart, checkout, payment, complete) ── */
.lt-checkout-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
    gap: 0;
}

.lt-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lt-text-light, #999);
    font-size: 0.875rem;
}

.lt-step.active {
    color: var(--lt-primary, #d4a574);
    font-weight: 600;
}

.lt-step.completed {
    color: var(--lt-primary, #d4a574);
}

.lt-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.lt-step.completed .lt-step-num {
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border-color: var(--lt-primary, #d4a574);
}

.lt-step.active .lt-step-num {
    background: var(--lt-primary, #d4a574);
    color: #fff;
}

.lt-step-divider {
    width: 60px;
    height: 2px;
    background: var(--lt-border, #ddd);
    margin: 0 0.5rem;
}

.lt-step.completed + .lt-step-divider {
    background: var(--lt-primary, #d4a574);
}

/* ── 2. PRODUCTS FILTER ── */
.lt-filter-option.active {
    background: var(--lt-primary) !important;
    color: #fff !important;
    border-color: var(--lt-primary) !important;
}

/* ── 3. CART PAGE ── */
.lt-cart-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Cart Header */
.lt-cart-header {
    display: grid;
    grid-template-columns: 40px 80px 1fr 1fr 120px 140px 100px;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #F5EFE7;
    color: #AA9662;
    font-weight: 600;
    font-size: 0.875rem;
    align-items: center;
}

.lt-cart-header > div {
    text-align: left;
}

.lt-cart-header-sku {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lt-cart-header .lt-checkbox {
    border-color: #093C71;
}

.lt-cart-header .lt-checkbox.checked {
    background: #fff;
}

/* Custom Checkbox */
.lt-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #093C71;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.lt-checkbox.checked {
    background: #fff;
}

.lt-checkbox.checked::after {
    content: '✓';
    color: var(--lt-primary);
    font-weight: bold;
    font-size: 14px;
}

.lt-checkbox input {
    display: none;
}

/* Cart Items */
.lt-cart-items {
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.lt-cart-item {
    display: grid;
    grid-template-columns: 40px 80px 1fr 1fr 120px 140px 100px;
    grid-template-rows: auto auto;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--lt-border, #ddd);
    align-items: start;
}

.lt-cart-item:last-child {
    border-bottom: none;
}

.lt-cart-item.discontinued {
    opacity: 0.6;
    background: #f9f9f9;
}

/* Item Action Row */
.lt-cart-item-action-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--lt-border, #ddd);
    margin-top: 0.25rem;
}

/* Product Info */
.lt-cart-product {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.lt-cart-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.lt-cart-product-info {
    flex: 1;
}

.lt-cart-product-name {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.lt-cart-product-options {
    font-size: 0.8rem;
    color: var(--lt-text-light, #666);
    margin-bottom: 0.5rem;
}

.lt-cart-product-options span {
    display: block;
    margin-bottom: 0.125rem;
}

/* Addon Items */
.lt-cart-addons {
    font-size: 0.8rem;
}

.lt-cart-addons-title {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lt-cart-addon-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    color: var(--lt-text-light, #666);
}

.lt-cart-addon-item span:first-child {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lt-cart-addon-item span:last-child {
    font-weight: 500;
    color: var(--lt-text-dark, #333);
    min-width: 60px;
    text-align: right;
}

.lt-cart-addon-item span:last-child.free {
    color: #28a745;
    font-weight: 600;
}

.lt-cart-addon-col {
    font-size: 0.8rem;
}

.lt-cart-addon-empty {
    color: var(--lt-text-light, #ccc);
    font-size: 1.5rem;
}

/* Quantity */
.lt-cart-qty {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lt-cart-qty-inner {
    display: inline-flex;
    align-items: left;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 6px;
    overflow: hidden;
}

.lt-cart-qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--lt-text-dark, #333);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lt-cart-qty-btn:hover {
    background: #f0f0f0;
}

.lt-cart-qty-input {
    width: 36px;
    height: 28px;
    border: none;
    border-left: 1px solid var(--lt-border, #ddd);
    border-right: 1px solid var(--lt-border, #ddd);
    text-align: center;
    font-size: 0.875rem;
    -moz-appearance: textfield;
}

.lt-cart-qty-input::-webkit-outer-spin-button,
.lt-cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Price Column */
.lt-cart-price {
    text-align: left;
    font-weight: 500;
    color: var(--lt-text-dark, #333);
}

.lt-cart-price-original {
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
    text-decoration: line-through;
    display: block;
}

.lt-cart-price-sale {
    color: #e74c3c;
}

/* Total Column */
.lt-cart-total {
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: var(--lt-text-dark, #333);
}

/* Actions Column */
.lt-cart-actions {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.lt-cart-btn-change,
.lt-cart-btn-delete {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

.lt-cart-btn-change {
    border: 1px solid var(--lt-border, #ddd);
    background: #fff;
    color: var(--lt-text-dark, #333);
}

.lt-cart-btn-change:hover {
    border-color: var(--lt-primary, #d4a574);
    color: var(--lt-primary, #d4a574);
    background: rgba(212, 165, 116, 0.05);
}

.lt-cart-btn-delete {
    border: 1px solid #f5c6c6;
    background: #fff;
    color: #e74c3c;
}

.lt-cart-btn-delete:hover {
    background: #fee;
    border-color: #e74c3c;
}

/* Discontinued Badge */
.lt-cart-discontinued {
    background: #fff3cd;
    color: #856404;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    display: inline-block;
}

/* Cart Summary */
.lt-cart-summary {
    margin-left: auto;
}

.lt-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.lt-cart-summary-row.total {
    font-size: 1.125rem;
    font-weight: 700;
}

.lt-cart-summary-row.total .lt-cart-summary-value {
    color: #FF0000;
    font-size: 1.25rem;
}

/* Cart Actions */
.lt-cart-page-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lt-cart-continue {
    color: var(--lt-primary, #d4a574);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lt-cart-continue:hover {
    text-decoration: underline;
}

.lt-cart-checkout-btn {
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.lt-cart-checkout-btn:hover {
    color: #fff;
}

/* Empty Cart */
.lt-cart-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.lt-cart-empty-icon {
    font-size: 4rem;
    color: var(--lt-border, #ddd);
    margin-bottom: 1rem;
}

.lt-cart-empty h3 {
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-cart-empty p {
    color: var(--lt-text-light, #666);
    margin-bottom: 1.5rem;
}

/* Related Products Section */
.lt-related-section {
    margin-top: 3rem;
}

.lt-related-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lt-related-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--lt-primary, #d4a574);
    border-radius: 2px;
}

.lt-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.lt-product-card {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.lt-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.lt-product-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f5f5f5;
}

.lt-product-card-body {
    padding: 1rem;
}

.lt-product-card-name {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
}

.lt-product-card-price {
    font-weight: 700;
    color: var(--lt-primary, #d4a574);
    font-size: 1rem;
}

.lt-product-card-price-original {
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
    text-decoration: line-through;
    margin-left: 0.5rem;
    font-weight: 400;
}

/* Cart Bulk Actions */
.lt-cart-bulk-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.lt-btn-bulk {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lt-border, #ddd);
    background: #fff;
    color: var(--lt-text-dark, #333);
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.lt-btn-bulk:hover {
    border-color: var(--lt-primary, #d4a574);
    color: var(--lt-primary, #d4a574);
}

.lt-btn-bulk.delete:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Login / Guest Checkout Modal */
.lt-login-guest-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.lt-login-guest-overlay.open {
    opacity: 1;
    visibility: visible;
}

.lt-login-guest-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.2s;
    text-align: center;
}

.lt-login-guest-overlay.open .lt-login-guest-modal {
    transform: translateY(0);
}

.lt-login-guest-hd {
    color: #fff;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lt-login-guest-logo {
    margin: 2rem auto 0;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lt-login-guest-logo img {
    width: 180px;
    object-fit: contain;
}

.lt-login-guest-body {
    padding: 1.5rem 2rem 2rem;
}

.lt-login-guest-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #AA9662;
    margin-bottom: 0.375rem;
}

.lt-login-guest-subtitle {
    font-size: 0.875rem;
    color: #AA9662;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.lt-login-guest-btn {
    display: block;
    width: 100%;
    padding: 0.875rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    border: none;
    transition: background 0.2s;
}

.lt-login-guest-btn.primary {
    background: #AA9662;
    color: #fff;
}

.lt-login-guest-btn.primary:hover {
    background: #967e57;
}

.lt-login-guest-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: #ccc;
    font-size: 0.875rem;
    gap: 0.5rem;
}

.lt-login-guest-divider::before,
.lt-login-guest-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.lt-login-guest-guest-text {
    font-size: 1.125rem;
    color: #AA9662;
    margin-bottom: 0.75rem;
}

.lt-login-guest-btn.guest {
    background: #fff;
    color: #AA9662;
    border: 1.5px solid #AA9662;
}

.lt-login-guest-btn.guest:hover {
    background: rgba(170, 150, 98, 0.05);
}

.lt-login-guest-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #1D1B20;
    font-size: 2rem;
    cursor: pointer;
}

.lt-login-guest-close:hover {
    color: #1D1B20;
}

/* ── 4. CHECKOUT PAGE ── */
.lt-checkout-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Checkout Layout */
.lt-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

/* Section Styles */
.lt-checkout-section {
    background: #fff;
    overflow: hidden;
}

.lt-checkout-section-hd {
    color: rgba(170, 150, 98, 1);
    padding: 10px 11px;
    font-weight: 700;
    font-size: 16px;
    border-bottom: 1px solid rgba(170, 150, 98, 1);
}

.lt-checkout-section-body {
    padding: 1.25rem;
}

/* Form Styles */
.lt-form-group {
    margin-bottom: 1rem;
}

.lt-form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: #333;
    font-size: 0.875rem;
}

.lt-form-label .required {
    color: #e74c3c;
    margin-left: 2px;
}

.lt-form-input,
.lt-form-select,
.lt-form-textarea {
    width: 100%;
    padding: 12px 8px 12px 16px;
    border: 1px solid rgba(137, 148, 159, 0.8);
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.lt-form-input:focus,
.lt-form-select:focus,
.lt-form-textarea:focus {
    outline: none;
    border-color: rgba(170, 150, 98, 1);
}

.lt-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.lt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* 3-up row (e.g. 地區 / 街道 / 大廈名稱). Collapses to 1 column on mobile via the
   existing .lt-form-row media-query overrides further down this file. */
.lt-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Subtitle */
.lt-subtitle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.lt-subtitle-text {
    font-size: 16px;
    font-weight: 600;
    color: rgba(31, 31, 31, 1);
    white-space: nowrap;
}

.lt-subtitle-line {
    flex: 1;
    height: 1px;
    background: rgba(170, 150, 98, 0.3);
}

/* Radio Group */
.lt-radio-group {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-bottom: 0.75rem;
}

.lt-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}

.lt-radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(170, 150, 98, 1);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lt-radio-circle.selected {
    border-color: rgba(170, 150, 98, 1);
    background: rgba(170, 150, 98, 1);
}

.lt-radio-circle.selected::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.lt-radio-label {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
}

/* Pickup Info Fields */
.lt-pickup-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.lt-pickup-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    max-width: 600px;
}

.lt-pickup-field .field-label {
    font-size: 12px;
    line-height: 150%;
    color: rgba(17, 17, 17, 0.5);
}

.lt-pickup-field .field-value {
    font-size: 16px;
    color: rgba(178, 178, 178, 1);
}

.lt-pickup-notice {
    font-size: 14px;
    line-height: 150%;
    color: rgba(170, 150, 98, 1);
    margin-top: 8px;
}

/* Delivery Toggle */
.lt-delivery-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 1rem;
}

.lt-delivery-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid rgba(170, 150, 98, 1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: rgba(170, 150, 98, 1);
    background: transparent;
    transition: all 0.2s;
    flex: 1;
}

.lt-delivery-toggle-btn.active {
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border-color: rgba(170, 150, 98, 1);
}

.lt-delivery-toggle-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Font icons (bi-*) inherit the button's text colour (gold when inactive, white when
   active) so they stay visible in BOTH states — unlike the old fixed-colour PNGs. */
.lt-delivery-toggle-btn i {
    font-size: 18px;
    line-height: 1;
}

.lt-delivery-content {
    display: none;
}

.lt-delivery-content.active {
    display: block;
}

/* Store Selector */
.lt-store-selector {
    position: relative;
}

.lt-store-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lt-store-search-wrap input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgba(137, 148, 159, 0.8);
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.lt-store-search-wrap input:focus {
    border-color: rgba(170, 150, 98, 1);
}

.lt-store-arrow-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    color: #888;
    font-size: 12px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 2;
}

.lt-store-arrow-btn:hover {
    color: rgba(170, 150, 98, 1);
}

.lt-store-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(137, 148, 159, 0.3);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
}

.lt-store-results.open {
    display: block;
}

.lt-store-result-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.lt-store-result-item:last-child {
    border-bottom: none;
}

.lt-store-result-item:hover {
    background: rgba(170, 150, 98, 0.06);
}

.lt-store-result-item.selected {
    background: rgba(170, 150, 98, 0.1);
}

.lt-store-result-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.3;
}

.lt-store-result-name .hl {
    color: rgba(170, 150, 98, 1);
    font-weight: 700;
}

.lt-store-result-addr {
    font-size: 0.78rem;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
}

.lt-store-result-addr .hl {
    color: rgba(170, 150, 98, 1);
    font-weight: 600;
}

/* Selected store display */
.lt-store-selected {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(170, 150, 98, 0.4);
    border-radius: 4px;
    background: rgba(170, 150, 98, 0.04);
    margin-top: 8px;
}

.lt-store-selected-info {
    flex: 1;
}

.lt-store-selected-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.lt-store-selected-addr {
    font-size: 0.78rem;
    color: #888;
    margin-top: 3px;
}

.lt-store-change-btn {
    background: none;
    border: none;
    color: rgba(170, 150, 98, 1);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    flex-shrink: 0;
}

.lt-store-change-btn:hover {
    color: #967e57;
}

/* Empty / no results */
.lt-store-empty-msg {
    padding: 16px 14px;
    text-align: center;
    font-size: 0.85rem;
    color: #999;
}

/* Input with Icon */
.lt-input-with-icon {
    position: relative;
}

.lt-input-with-icon input,
.lt-input-with-icon select {
    width: 100%;
    padding: 12px 8px 12px 16px;
    border: 1px solid rgba(137, 148, 159, 0.8);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    appearance: auto;
}

.lt-input-with-icon .icon-right {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

/* When a field carries its OWN icon (calendar / clock), suppress the browser's
   native indicator so the two don't collide and clip the custom icon. Scoped with
   :has() so fields WITHOUT a custom icon (e.g. 訂單2 date/time, the plain delivery
   time select) keep their native arrow. */
.lt-input-with-icon:has(> .icon-right) input,
.lt-input-with-icon:has(> .icon-right) select {
    padding-right: 40px;
}

/* Hide the native <select> arrow so the custom clock shows in full. */
.lt-input-with-icon:has(> .icon-right) select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

/* Make the native date picker indicator a transparent, full-height click target
   over the icon area — the custom calendar icon shows on top, click still opens it. */
.lt-input-with-icon:has(> .icon-right) input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* Address Search */
.lt-address-search {
    display: flex;
    align-items: center;
    border: 1px solid rgba(137, 148, 159, 0.8);
    border-radius: 4px;
    overflow: hidden;
}

.lt-address-search input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.lt-address-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.lt-address-search-btn img {
    width: 18px;
    height: 18px;
}

/* District Selector */
.lt-district-wrapper {
    position: relative;
}

.lt-district-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lt-district-input-wrap input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgba(137, 148, 159, 0.8);
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    outline: none;
}

.lt-district-input-wrap input:focus {
    border-color: rgba(170, 150, 98, 1);
}

.lt-district-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    transition: transform 0.2s;
    z-index: 2;
}

.lt-district-arrow.open {
    transform: translateY(-50%) rotate(180deg);
}

.lt-district-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 300%;
    min-width: 400px;
    max-width: 600px;
    background: #fff;
    border: 1px solid rgba(137, 148, 159, 0.3);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
}

.lt-district-dropdown.open {
    display: block;
}

.lt-district-header {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(170, 150, 98, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #eee;
    user-select: none;
}

.lt-district-header .back-arrow {
    font-size: 16px;
    color: rgba(170, 150, 98, 1);
}

.lt-district-header:hover {
    background: rgba(170, 150, 98, 0.05);
}

.lt-district-divider {
    height: 1px;
    background: #eee;
    margin: 0;
    border: none;
}

.lt-district-options-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.lt-district-option {
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
    border-right: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.lt-district-option:nth-child(5n) {
    border-right: none;
}

.lt-district-option:hover {
    background: rgba(170, 150, 98, 0.08);
}

.lt-district-option.selected {
    background: rgba(170, 150, 98, 0.12);
    color: rgba(170, 150, 98, 1);
    font-weight: 600;
}

/* Autocomplete dropdown */
.lt-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(137, 148, 159, 0.3);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 101;
    max-height: 200px;
    overflow-y: auto;
}

.lt-autocomplete-dropdown.open {
    display: block;
}

.lt-autocomplete-item {
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.lt-autocomplete-item:hover {
    background: rgba(170, 150, 98, 0.08);
}

.lt-autocomplete-item .highlight {
    color: rgba(170, 150, 98, 1);
    font-weight: 600;
}

/* Delivery Fee Note */
.lt-delivery-fee-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: rgba(170, 150, 98, 1);
    margin-top: 0.75rem;
    padding: 8px 0;
}

.lt-delivery-fee-note .free {
    font-weight: 700;
    color: #e74c3c;
}

.lt-delivery-info-note {
    font-size: 0.75rem;
    color: rgba(170, 150, 98, 1);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Split Order Popup */
.lt-split-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.lt-split-popup.open {
    display: flex;
}

.lt-split-popup-content {
    background: #fff;
    border-radius: 8px;
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.lt-split-popup-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    font-size: 1rem;
}

.lt-split-popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
}

.lt-split-popup-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    min-height: 400px;
}

.lt-split-panel {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.lt-split-panel:first-child {
    border-right: 1px solid #eee;
}

.lt-split-panel-hd {
    font-weight: 700;
    font-size: 1rem;
    color: rgba(170, 150, 98, 1);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(170, 150, 98, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lt-split-panel-subtotal {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
}

.lt-split-panel-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-split-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    transition: all 0.2s;
}

.lt-split-popup-item:hover {
    border-color: rgba(170, 150, 98, 0.4);
}

.lt-split-popup-item-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.lt-split-popup-item-info {
    flex: 1;
    min-width: 0;
}

.lt-split-popup-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.lt-split-popup-item-addons {
    font-size: 0.7rem;
    color: rgba(170, 150, 98, 1);
    margin-top: 2px;
}

.lt-split-popup-item-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-align: right;
    flex-shrink: 0;
}

.lt-split-popup-item-qty {
    font-size: 0.7rem;
    color: #999;
    font-weight: 400;
}

.lt-split-popup-item-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(170, 150, 98, 1);
    background: transparent;
    color: rgba(170, 150, 98, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-left: 4px;
}

.lt-split-popup-item-arrow:hover {
    background: rgba(170, 150, 98, 1);
    color: #fff;
}

.lt-split-popup-item-arrow.left {
    transform: rotate(180deg);
}

.lt-split-popup-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.lt-split-popup-total {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.lt-split-popup-btn {
    padding: 10px 24px;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.lt-split-popup-btn:hover {
    background: #967e57;
}

.lt-split-popup-btn.cancel {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
}

.lt-split-popup-btn.cancel:hover {
    background: #f5f5f5;
}

.lt-split-empty-msg {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-size: 0.85rem;
}

/* Split Order Section */
.lt-split-section {
    padding: 0;
}

.lt-split-section-hd {
    margin-bottom: 0.75rem;
}

.lt-split-title {
    font-weight: 600;
    color: #333;
}

.lt-split-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}

.lt-split-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.lt-split-item-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
}

.lt-split-item-info {
    flex: 1;
}

.lt-split-item-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}

.lt-split-item-select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
}

.lt-split-delivery-note {
    font-size: 0.75rem;
    color: rgba(170, 150, 98, 1);
    line-height: 1.5;
}

/* Payment Options */
.lt-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.lt-payment-option:last-child {
    border-bottom: none;
}

.lt-payment-option .radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(170, 150, 98, 1);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lt-payment-option .radio-circle.selected {
    border-color: rgba(170, 150, 98, 1);
    background: rgba(170, 150, 98, 1);
}

.lt-payment-option .radio-circle.selected::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.lt-payment-option span {
    font-size: 14px;
    color: #333;
    min-width: 80px;
}

.lt-payment-icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lt-payment-icons img {
    object-fit: contain;
}

/* Coupon Section */
.lt-coupon-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lt-coupon-input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.875rem;
}

.lt-coupon-input:focus {
    outline: none;
    border-color: rgba(170, 150, 98, 1);
}

.lt-coupon-apply-btn-inline {
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.lt-coupon-apply-btn-inline:hover {
    background: #967e57;
}

.lt-coupon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.lt-coupon-row .label {
    color: #666;
}

.lt-coupon-select-link {
    color: rgba(170, 150, 98, 1);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.8rem;
}

.lt-coupon-applied-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(212, 165, 116, 0.08);
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.lt-coupon-applied-tag-left {
    display: flex;
    flex-direction: column;
}

.lt-coupon-applied-tag .code {
    font-weight: 700;
    color: rgba(170, 150, 98, 1);
    font-family: monospace;
    letter-spacing: 1px;
}

.lt-coupon-applied-tag .name {
    color: #666;
    font-size: 0.75rem;
}

.lt-coupon-remove-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
}

.lt-coupon-remove-btn:hover {
    text-decoration: underline;
}

.lt-coupon-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.lt-coupon-buttons .lt-btn-primary,
.lt-coupon-buttons .lt-btn-secondary {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    font-weight: 500;
}

.lt-coupon-buttons .lt-btn-primary {
    background: rgba(170, 150, 98, 1);
    color: #fff;
}

.lt-coupon-buttons .lt-btn-primary:hover {
    background: rgba(150, 130, 78, 1);
}

.lt-coupon-buttons .lt-btn-secondary {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
}

.lt-coupon-buttons .lt-btn-secondary:hover {
    background: #eee;
}

.lt-coupon-input-section {
    margin-bottom: 1rem;
}

.lt-coupon-input-row {
    display: flex;
    gap: 0.5rem;
}

.lt-coupon-input-row .lt-form-input {
    flex: 1;
}

/* Prominent on-page 優惠碼/優惠劵 entry (so customers don't have to open the modal). */
.lt-coupon-inline {
    margin-top: 14px;
    padding: 14px;
    border: 1.5px dashed #AA9662;
    border-radius: 10px;
    background: #fbf8f0;
}
.lt-coupon-inline-label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #6b5d33;
    margin-bottom: 8px;
}
.lt-coupon-inline-row {
    display: flex;
    gap: 8px;
}
.lt-coupon-inline-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d8cda6;
    border-radius: 8px;
    font-size: 0.95rem;
}
.lt-coupon-inline-input:focus {
    outline: none;
    border-color: #AA9662;
    box-shadow: 0 0 0 2px rgba(170, 150, 98, 0.2);
}
.lt-coupon-inline-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: #AA9662;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.lt-coupon-inline-btn:hover {
    background: #94824f;
}

.lt-coupon-check-result {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.lt-coupon-check-result.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.lt-coupon-check-result.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.lt-coupon-apply-section {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(170, 150, 98, 0.08);
    border: 1px solid rgba(170, 150, 98, 0.2);
    border-radius: 8px;
    text-align: center;
}

.lt-coupon-preview {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #333;
}

.lt-coupon-apply-section .lt-btn-primary {
    width: 100%;
    padding: 0.75rem;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.lt-coupon-apply-section .lt-btn-primary:hover {
    background: rgba(150, 130, 78, 1);
}

.lt-modal-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 1.5rem 0;
}

.lt-coupon-list-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.lt-or-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    color: #999;
    font-size: 0.8rem;
}

.lt-or-divider::before,
.lt-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

.lt-or-divider span {
    padding: 0 1rem;
}

.lt-coupon-apply-btn-full {
    width: 100%;
    padding: 0.875rem;
    margin-top: 1rem;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.lt-coupon-apply-btn-full:hover {
    background: rgba(150, 130, 78, 1);
}

/* Terms */
.lt-terms-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5rem;
    font-size: 14px;
}

.square-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(170, 150, 98, 1);
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.square-checkbox.checked {
    background: rgba(170, 150, 98, 1);
}

.square-checkbox.checked::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.terms-text {
    color: #000;
}

.terms-link {
    color: rgba(0, 136, 255, 1);
    text-decoration: none;
    cursor: pointer;
}

.terms-link:hover {
    text-decoration: underline;
}

/* Submit Button */
.lt-checkout-submit {
    width: 100%;
    padding: 14px 24px;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.lt-checkout-submit:hover {
    background: #967e57;
}

.lt-checkout-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Right Column - Order Summary */
.lt-order-summary {
    background: #fff;
    border: 1px solid rgba(170, 150, 98, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.lt-order-summary-hd {
    background: rgba(170, 150, 98, 1);
    color: #fff;
    padding: 10px 11px;
    font-weight: 700;
    font-size: 16px;
}

.lt-order-summary-body {
    padding: 1rem;
}

.lt-order-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lt-order-item {
    display: flex;
    gap: 10px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.lt-order-item:last-child {
    border-bottom: none;
}

.lt-order-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.lt-order-item-info {
    flex: 1;
    min-width: 0;
}

.lt-order-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #000;
    line-height: 1.3;
}

.lt-order-item-options {
    font-size: 0.75rem;
    color: rgba(170, 150, 98, 1);
    margin-top: 4px;
}

.lt-addon-section {
    margin-top: 6px;
}

.lt-addon-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(9, 60, 113, 1);
    margin-bottom: 2px;
}

.lt-addon-item {
    font-size: 0.75rem;
    color: #000;
    padding: 1px 0;
}

.lt-addon-item .blessing {
    color: rgba(170, 150, 98, 1);
}

.lt-order-item-price {
    text-align: right;
    font-weight: 600;
    font-size: 0.85rem;
    color: #000;
    flex-shrink: 0;
}

.lt-order-item-qty {
    font-weight: 400;
    font-size: 0.75rem;
    color: #666;
}

.lt-view-order-detail {
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(170, 150, 98, 1);
    cursor: pointer;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}

.lt-view-order-detail:hover {
    color: #967e57;
}

.lt-split-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
}

.lt-split-order-btn {
    background: transparent;
    border: 2px solid rgba(170, 150, 98, 1);
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(170, 150, 98, 1);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.lt-split-order-btn:hover {
    background: rgba(170, 150, 98, 0.05);
}

.lt-split-cancel-btn {
    background: transparent;
    border: 1px solid #c0392b;
    border-radius: 4px;
    padding: 7px 16px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.lt-split-cancel-btn:hover {
    background: rgba(192, 57, 43, 0.06);
}

.lt-split-order-note {
    font-size: 0.75rem;
    color: rgba(170, 150, 98, 1);
}

.lt-money-divider {
    border: none;
    border-top: 1px solid rgba(170, 150, 98, 0.3);
    margin: 0.75rem 0;
}

.lt-money-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}

.lt-money-list .label {
    color: rgba(170, 150, 98, 1);
}

.lt-money-list .value {
    font-weight: 600;
    color: #000;
}

.lt-money-list .value.red {
    color: rgba(255, 0, 0, 1);
}

/* Login Modal */
.lt-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lt-modal-overlay.open {
    display: flex;
}

.lt-modal {
    background: #fff;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.lt-modal-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    font-size: 1rem;
}

.lt-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
}

.lt-modal-body {
    padding: 1.25rem;
}

.lt-login-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 1rem;
}

.lt-login-tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: #999;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.lt-login-tab.active {
    color: rgba(170, 150, 98, 1);
    border-bottom-color: rgba(170, 150, 98, 1);
}

.lt-login-form {
    display: none;
}

.lt-login-form.active {
    display: block;
}

.lt-login-error {
    display: none;
    background: #fde8e8;
    color: #e74c3c;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.lt-login-error.show {
    display: block;
}

.lt-login-success {
    display: none;
    background: #e8fde8;
    color: #27ae60;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.lt-login-success.show {
    display: block;
}

.lt-btn-primary {
    width: 100%;
    padding: 12px;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.lt-btn-primary:hover {
    background: #967e57;
}

.lt-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lt-login-switch {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #666;
}

.lt-login-switch a {
    color: rgba(170, 150, 98, 1);
    text-decoration: none;
    font-weight: 500;
}

.lt-login-switch a:hover {
    text-decoration: underline;
}

/* Coupon Modal */
.lt-coupon-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.lt-coupon-card {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.lt-coupon-card:hover {
    border-color: rgba(170, 150, 98, 1);
}

.lt-coupon-card.applied {
    border-color: rgba(170, 150, 98, 1);
    background: rgba(212, 165, 116, 0.05);
}

.lt-coupon-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.lt-coupon-badge {
    position: absolute;
    top: -1px;
    right: 1rem;
    background: rgba(170, 150, 98, 1);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 0 0 4px 4px;
}

.lt-coupon-name {
    font-weight: 700;
    color: #333;
    margin-bottom: 0.25rem;
}

.lt-coupon-desc {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.lt-coupon-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #999;
}

.lt-coupon-code {
    font-family: monospace;
    font-weight: 700;
    color: rgba(170, 150, 98, 1);
    letter-spacing: 1px;
}

.lt-coupon-apply-btn {
    background: rgba(170, 150, 98, 1);
    color: #fff;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}

.lt-coupon-empty {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-size: 0.9rem;
}

/* Order Detail Modal */
.lt-order-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.lt-order-detail-table th {
    background: rgba(170, 150, 98, 0.15);
    color: rgba(170, 150, 98, 1);
    font-weight: 600;
    text-align: left;
    padding: 12px 8px;
    border-bottom: 2px solid rgba(170, 150, 98, 1);
}

.lt-order-detail-table th:not(:first-child) {
    text-align: center;
}

.lt-order-detail-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.lt-order-detail-table td:not(:first-child) {
    text-align: center;
}

.lt-order-detail-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lt-order-detail-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.lt-order-detail-product-name {
    font-weight: 600;
    color: #333;
}

.lt-order-detail-product-meta {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}

.lt-order-detail-price,
.lt-order-detail-qty,
.lt-order-detail-subtotal {
    color: #333;
    font-weight: 500;
}

.lt-order-detail-footer {
    margin-top: 1.5rem;
    text-align: center;
}

/* Checkout Responsive */
@media (max-width: 768px) {
    .lt-checkout-layout {
        grid-template-columns: 1fr;
    }

    .lt-form-row {
        grid-template-columns: 1fr;
    }

    .lt-delivery-toggle {
        flex-wrap: wrap;
    }
}

/* ── 5. PAYMENT PAGE ── */
.lt-payment-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Payment Methods */
.lt-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lt-payment-method {
    border: 2px solid var(--lt-border, #ddd);
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lt-payment-method:hover {
    border-color: var(--lt-primary, #d4a574);
}

.lt-payment-method.selected {
    border-color: var(--lt-primary, #d4a574);
    background: rgba(212, 165, 116, 0.05);
}

.lt-payment-method input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--lt-primary, #d4a574);
}

.lt-payment-method-icon {
    width: 48px;
    height: 32px;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.lt-payment-method-info {
    flex: 1;
}

.lt-payment-method-name {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.25rem;
}

.lt-payment-method-desc {
    font-size: 0.8rem;
    color: var(--lt-text-light, #666);
}

/* Payment Form */
.lt-payment-form {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.lt-card-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* Payment Summary */
.lt-payment-summary {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.lt-payment-summary-hd {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--lt-text-dark, #333);
}

.lt-payment-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 2px solid var(--lt-primary, #d4a574);
    font-size: 1.25rem;
    font-weight: 700;
}

.lt-payment-total .amount {
    color: var(--lt-primary, #d4a574);
    font-size: 1.5rem;
}

/* Back Button */
.lt-payment-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--lt-text-light, #666);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.lt-payment-back:hover {
    color: var(--lt-primary, #d4a574);
}

/* Secure Badge */
.lt-secure-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--lt-text-light, #666);
    margin-top: 1rem;
}

.lt-secure-badge i {
    color: #28a745;
}

/* Airwallex Elements Container */
#airwallex-container {
    min-height: 320px;
    width: 100%;
}

#airwallex-container iframe {
    width: 100% !important;
    min-height: 320px;
}

#airwallex-container .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--lt-primary, #d4a574);
}

/* ── 6. COMPLETE PAGE ── */
.lt-complete-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 1rem;
    text-align: center;
}

.lt-complete-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--lt-primary, #d4a574), #e8c9a8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.lt-complete-icon i {
    font-size: 3rem;
    color: #fff;
}

.lt-complete-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-complete-subtitle {
    font-size: 1rem;
    color: var(--lt-text-light, #666);
    margin-bottom: 2rem;
}

.lt-complete-order-box {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.lt-complete-order-hd {
    font-weight: 600;
    color: var(--lt-primary, #d4a574);
    margin-bottom: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lt-complete-order-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lt-border, #eee);
    font-size: 0.9rem;
}

.lt-complete-order-row:last-child {
    border-bottom: none;
}

.lt-complete-order-row span:first-child {
    color: var(--lt-text-light, #666);
}

.lt-complete-order-row span:last-child {
    color: var(--lt-text-dark, #333);
    font-weight: 500;
}

.lt-complete-order-row.total {
    border-top: 2px solid var(--lt-primary, #d4a574);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.125rem;
}

.lt-complete-order-row.total span:last-child {
    color: var(--lt-primary, #d4a574);
    font-weight: 700;
}

/* Order Items */
.lt-complete-items {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lt-border, #eee);
}

.lt-complete-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.lt-complete-item-info {
    flex: 1;
    text-align: left;
}

.lt-complete-item-name {
    font-weight: 500;
    color: var(--lt-text-dark, #333);
}

.lt-complete-item-qty {
    font-size: 0.75rem;
    color: var(--lt-text-light, #666);
}

.lt-complete-item-price {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
}

.lt-complete-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.lt-complete-btn {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.lt-complete-btn.primary {
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
}

.lt-complete-btn.primary:hover {
    background: #c49564;
}

.lt-complete-btn.secondary {
    background: #fff;
    color: var(--lt-primary, #d4a574);
    border: 2px solid var(--lt-primary, #d4a574);
}

.lt-complete-btn.secondary:hover {
    background: rgba(212, 165, 116, 0.05);
}

/* ── 7. HOME PAGE ── */
/* NOTE: the old ".lt-hero-section / .lt-hero-slide{height:600px;display:flex} /
   .lt-hero-slide img{height:100%} / .lt-hero-title/.lt-hero-subtitle/.lt-hero-btn"
   block that lived here was a stale duplicate of the hero design (see the
   ".lt-hero" section near the top + the ".has-mobile" portrait rule). Its
   selectors are unused in the markup EXCEPT ".lt-hero-slide" and
   ".lt-hero-slide img", which — being later in the file at equal specificity —
   overrode the real height/aspect rules and forced the portrait 手機版 banner
   into a fixed-height, flex-centered strip (blank top/bottom space + no mobile
   swap sizing). Removed so the canonical hero rules govern. */

/* Home Sections */
.lt-section {
    padding: 4rem 0;
}

.lt-section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-section-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--lt-text-light, #666);
    margin-bottom: 3rem;
}

/* Home About */
.lt-home-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.lt-home-about-img {
    width: 100%;
    border-radius: 8px;
}

.lt-home-about-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-home-about-content p {
    color: var(--lt-text-light, #666);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.lt-home-about-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

/* Home Products Grid */
.lt-home-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Home Features */
.lt-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.lt-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: rgba(212, 165, 116, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lt-feature-icon i {
    font-size: 1.5rem;
    color: var(--lt-primary, #d4a574);
}

.lt-feature h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-feature p {
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
    line-height: 1.6;
}

/* Home Newsletter */
.lt-newsletter {
    background: rgba(212, 165, 116, 0.05);
    padding: 4rem 0;
    text-align: center;
}

.lt-newsletter h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-newsletter p {
    color: var(--lt-text-light, #666);
    margin-bottom: 2rem;
}

.lt-newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 0.5rem;
}

.lt-newsletter-form input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 6px;
    font-size: 1rem;
}

.lt-newsletter-form button {
    padding: 0.875rem 2rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* ── 8. PRODUCTS PAGE ── */
.lt-products-page {
    /* Width/centering handled by .lt-products-page-inner (max-width: 1600px).
       The old max-width:1440 + margin:auto here over-constrained the page. */
}

.lt-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.lt-products-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
}

.lt-products-count {
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
}

/* Filter Bar */
.lt-filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.lt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lt-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lt-text-light, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lt-filter-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lt-filter-option {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    color: var(--lt-text-dark, #333);
}

.lt-filter-option:hover {
    border-color: var(--lt-primary, #d4a574);
    color: var(--lt-primary, #d4a574);
}

/* Products Grid */
.lt-products-grid-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Product Card (main) */
.lt-product-card-main {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.lt-product-card-main:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.lt-product-card-main-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #f5f5f5;
}

.lt-product-card-main-body {
    padding: 1rem;
}

.lt-product-card-main-name {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.lt-product-card-main-price {
    font-weight: 700;
    color: var(--lt-primary, #d4a574);
    font-size: 1.125rem;
}

.lt-product-card-main-price-original {
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
    text-decoration: line-through;
    margin-left: 0.5rem;
    font-weight: 400;
}

/* Pagination */
.lt-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.lt-page-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 4px;
    background: #fff;
    color: var(--lt-text-dark, #333);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 0.875rem;
}

.lt-page-btn:hover {
    border-color: var(--lt-primary, #d4a574);
    color: var(--lt-primary, #d4a574);
}

.lt-page-btn.active {
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border-color: var(--lt-primary, #d4a574);
}

/* ── 9. PRODUCT SHOW PAGE ── */
.lt-product-show {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lt-product-show-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.lt-product-gallery {
    position: relative;
}

.lt-product-main-img {
    width: 100%;
    border-radius: 8px;
    background: #f5f5f5;
}

.lt-product-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lt-product-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.lt-product-thumb.active {
    border-color: var(--lt-primary, #d4a574);
}

.lt-product-info h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-product-price-show {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lt-primary, #d4a574);
    margin-bottom: 1.5rem;
}

.lt-product-price-show-original {
    font-size: 1rem;
    color: var(--lt-text-light, #999);
    text-decoration: line-through;
    margin-left: 0.5rem;
    font-weight: 400;
}

.lt-product-description {
    color: var(--lt-text-light, #666);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.lt-product-options {
    margin-bottom: 2rem;
}

.lt-option-label {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.lt-option-values {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lt-option-value {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.lt-option-value:hover {
    border-color: var(--lt-primary, #d4a574);
}

.lt-option-value.selected {
    border-color: var(--lt-primary, #d4a574);
    background: rgba(212, 165, 116, 0.1);
    color: var(--lt-primary, #d4a574);
    font-weight: 600;
}

.lt-product-qty {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.lt-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lt-qty-input {
    width: 60px;
    height: 36px;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
}

.lt-add-to-cart-btn {
    width: 100%;
    padding: 1rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.lt-add-to-cart-btn:hover {
    background: #c49564;
}

/* ── 10. ABOUT PAGE ── */
.lt-about-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Legacy .lt-about-page hero — scoped so it no longer overrides the live full-bleed
   .lt-about-hero (which was being forced to 400px with rounded corners + a gap). */
.lt-about-page .lt-about-hero {
    position: relative;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.lt-about-page .lt-about-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lt-about-page .lt-about-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.lt-about-page .lt-about-hero-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.lt-about-page .lt-about-hero-content p {
    font-size: 1.125rem;
    max-width: 600px;
}

.lt-about-section {
    margin-bottom: 3rem;
}

.lt-about-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-about-section p {
    color: var(--lt-text-light, #666);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.lt-about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.lt-about-card {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.lt-about-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.lt-about-card h3 {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-about-card p {
    color: var(--lt-text-light, #666);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ── 11. CONTACT PAGE ── */
.lt-contact-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lt-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.lt-contact-info h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-contact-info p {
    color: var(--lt-text-light, #666);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.lt-contact-detail {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lt-contact-detail i {
    font-size: 1.25rem;
    color: var(--lt-primary, #d4a574);
    width: 24px;
}

.lt-contact-detail h4 {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.25rem;
}

.lt-contact-detail p {
    color: var(--lt-text-light, #666);
    font-size: 0.875rem;
}

.lt-contact-form {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    padding: 2rem;
}

.lt-contact-form h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1.5rem;
}

.lt-contact-submit {
    width: 100%;
    padding: 0.875rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── 12. STORES PAGE ── */
.lt-stores-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lt-stores-header {
    margin-bottom: 2rem;
}

.lt-stores-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-stores-header p {
    color: var(--lt-text-light, #666);
}

.lt-stores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.lt-store-card {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.lt-store-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lt-store-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.lt-store-card-body {
    padding: 1.5rem;
}

.lt-store-card-name {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-store-card-addr {
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.lt-store-card-hours {
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
    margin-bottom: 1rem;
}

.lt-store-card-phone {
    font-size: 0.875rem;
    color: var(--lt-primary, #d4a574);
    text-decoration: none;
}

/* ── 13. NEWS PAGE ── */
.lt-news-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lt-news-header {
    margin-bottom: 2rem;
}

.lt-news-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
}

.lt-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.lt-news-card {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.lt-news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.lt-news-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.lt-news-card-body {
    padding: 1.5rem;
}

.lt-news-card-date {
    font-size: 0.8rem;
    color: var(--lt-primary, #d4a574);
    margin-bottom: 0.5rem;
}

.lt-news-card-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.lt-news-card-excerpt {
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
    line-height: 1.6;
}

/* ── 14. NEWS SHOW PAGE ── */
.lt-news-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.lt-article-header {
    margin-bottom: 2rem;
}

.lt-article-date {
    font-size: 0.875rem;
    color: var(--lt-primary, #d4a574);
    margin-bottom: 0.5rem;
}

.lt-article-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.lt-article-meta {
    display: flex;
    gap: 1rem;
    color: var(--lt-text-light, #999);
    font-size: 0.875rem;
}

.lt-article-featured-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.lt-article-content {
    color: var(--lt-text-light, #666);
    line-height: 1.8;
    font-size: 1rem;
}

.lt-article-content p {
    margin-bottom: 1.5rem;
}

.lt-article-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin: 2rem 0 1rem;
}

.lt-article-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin: 1.5rem 0 0.75rem;
}

.lt-article-content img {
    max-width: 100%;
    border-radius: 4px;
    margin: 1.5rem 0;
}

.lt-article-content ul,
.lt-article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.lt-article-content li {
    margin-bottom: 0.5rem;
}

.lt-article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lt-primary, #d4a574);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.lt-article-back:hover {
    text-decoration: underline;
}

/* ── 15. AUTH PAGES (legacy centered-card styles; the active design is the
   split-screen .lt-auth-page defined earlier. The duplicate .lt-auth-page rule
   here was overriding that split and has been removed.) ── */
.lt-auth-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.lt-auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.lt-auth-logo img {
    height: 60px;
}

.lt-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    text-align: center;
    margin-bottom: 0.5rem;
}

.lt-auth-subtitle {
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
    text-align: center;
    margin-bottom: 2rem;
}

.lt-auth-btn {
    width: 100%;
    padding: 0.875rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.lt-auth-btn:hover {
    background: #c49564;
}

.lt-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
}

.lt-auth-footer a {
    color: var(--lt-primary, #d4a574);
    text-decoration: none;
    font-weight: 500;
}

.lt-auth-footer a:hover {
    text-decoration: underline;
}

.lt-auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--lt-text-light, #999);
    font-size: 0.875rem;
}

.lt-auth-divider::before,
.lt-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lt-border, #ddd);
}

.lt-auth-divider span {
    padding: 0 1rem;
}

.lt-auth-error {
    background: #fde8e8;
    color: #e74c3c;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    display: none;
}

.lt-auth-error.show {
    display: block;
}

/* ── 16. 404 PAGE ── */
.lt-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.lt-error-code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--lt-primary, #d4a574);
    line-height: 1;
    margin-bottom: 1rem;
}

.lt-error-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lt-text-dark, #333);
    margin-bottom: 1rem;
}

.lt-error-message {
    font-size: 1rem;
    color: var(--lt-text-light, #666);
    margin-bottom: 2rem;
    max-width: 500px;
}

.lt-error-btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s;
}

.lt-error-btn:hover {
    background: #c49564;
}

/* ── 17. PARTIALS ── */
/* Product Card Partial */
.lt-product-card-partial {
    background: #fff;
    border: 1px solid var(--lt-border, #ddd);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.lt-product-card-partial:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.lt-product-card-partial-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f5f5f5;
}

.lt-product-card-partial-body {
    padding: 1rem;
}

.lt-product-card-partial-name {
    font-weight: 600;
    color: var(--lt-text-dark, #333);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lt-product-card-partial-price {
    font-weight: 700;
    color: var(--lt-primary, #d4a574);
    font-size: 1rem;
}

.lt-product-card-partial-price-original {
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
    text-decoration: line-through;
    margin-left: 0.5rem;
    font-weight: 400;
}

/* ── 18. LAYOUTS ── */
/* Main Layout */
.lt-main-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lt-main-header {
    background: #fff;
    border-bottom: 1px solid var(--lt-border, #ddd);
    position: sticky;
    top: 0;
    z-index: 100;
}

.lt-main-nav {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.lt-nav-logo img {
    height: 50px;
}

.lt-nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lt-nav-links a {
    text-decoration: none;
    color: var(--lt-text-dark, #333);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.lt-nav-links a:hover {
    color: var(--lt-primary, #d4a574);
}

.lt-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.lt-nav-icon {
    color: var(--lt-text-dark, #333);
    font-size: 1.25rem;
    text-decoration: none;
    position: relative;
}

.lt-nav-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--lt-primary, #d4a574);
    color: #fff;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Main Footer */
.lt-main-footer {
    background: #333;
    color: #fff;
    padding: 3rem 1rem;
    margin-top: auto;
}

.lt-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Scoped to the legacy dark footer only — these generic .lt-footer-col rules used to
   leak into the live .lt-footer (shared class name), washing out the description colour
   and forcing the policy links onto separate lines. */
.lt-main-footer .lt-footer-col h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.lt-main-footer .lt-footer-col p,
.lt-main-footer .lt-footer-col a {
    font-size: 0.875rem;
    color: #ccc;
    text-decoration: none;
    line-height: 1.8;
    display: block;
}

.lt-main-footer .lt-footer-col a:hover {
    color: #fff;
}

.lt-footer-bottom {
    max-width: 1440px;
    margin: 2rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8rem;
    color: #999;
}

/* Checkout Layout */
.lt-checkout-layout-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
}

.lt-checkout-header {
    background: #fff;
    border-bottom: 1px solid var(--lt-border, #ddd);
    padding: 1rem 0;
}

.lt-checkout-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lt-checkout-logo img {
    height: 50px;
}

.lt-checkout-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--lt-text-light, #666);
}

.lt-checkout-header-right a {
    color: var(--lt-primary, #d4a574);
    text-decoration: none;
}

.lt-checkout-header-right a:hover {
    text-decoration: underline;
}

.lt-checkout-main {
    flex: 1;
    padding: 2rem 0;
}

.lt-checkout-footer {
    background: #fff;
    border-top: 1px solid var(--lt-border, #ddd);
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--lt-text-light, #999);
}

/* ── 19. RESPONSIVE ── */
@media (max-width: 1200px) {
    .lt-products-grid,
    .lt-products-grid-main,
    .lt-home-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .lt-footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .lt-cart-header {
        display: none;
    }

    .lt-cart-item {
        grid-template-columns: 30px 70px 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .lt-cart-product {
        grid-column: 1 / -1;
    }

    /* Addon column (加購/附加物品 e.g. 朱古力牌 + blessing) gets its own full-width
       row — otherwise it auto-flows into a ~30px cell and long blessing text
       collapses to one character per line. */
    .lt-cart-addon-col {
        grid-column: 1 / -1;
    }

    .lt-cart-qty,
    .lt-cart-price,
    .lt-cart-total,
    .lt-cart-actions {
        grid-column: 2 / -1;
    }

    .lt-products-grid,
    .lt-products-grid-main,
    .lt-home-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .lt-product-show-layout {
        grid-template-columns: 1fr;
    }

    .lt-home-about {
        grid-template-columns: 1fr;
    }

    .lt-contact-layout {
        grid-template-columns: 1fr;
    }

    .lt-stores-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lt-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lt-about-grid {
        grid-template-columns: 1fr;
    }

    .lt-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .lt-checkout-layout {
        grid-template-columns: 1fr;
    }

    .lt-form-row {
        grid-template-columns: 1fr;
    }

    .lt-delivery-toggle {
        flex-wrap: wrap;
    }

    .lt-cart-page {
        padding: 1rem 0.5rem;
    }

    .lt-cart-item {
        padding: 1rem 0.5rem;
        gap: 0.75rem;
    }

    .lt-products-grid,
    .lt-products-grid-main,
    .lt-home-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .lt-stores-grid {
        grid-template-columns: 1fr;
    }

    .lt-news-grid {
        grid-template-columns: 1fr;
    }

    .lt-footer-content {
        grid-template-columns: 1fr;
    }

    .lt-nav-links {
        display: none;
    }

    .lt-section {
        padding: 2rem 0;
    }

    .lt-section-title {
        font-size: 1.5rem;
    }

    .lt-about-hero,
    .lt-stores-hero-section {
        height: 250px;
    }

    .lt-about-hero-content h1 {
        font-size: 1.75rem;
    }

    .lt-auth-box {
        padding: 1.5rem;
    }

    .lt-checkout-steps {
        gap: 0.25rem;
        align-items: flex-start;
    }

    /* Stack the number above its label so all four steps + their text fit on a
       phone (previously the labels were hidden to save width). */
    .lt-step {
        flex-direction: column;
        gap: 5px;
        font-size: 0.68rem;
        line-height: 1.2;
        text-align: center;
        flex: 0 0 auto;
        max-width: 72px;
    }

    .lt-step span:last-child {
        display: block;
    }

    .lt-step-num {
        width: 26px;
        height: 26px;
    }

    .lt-step-divider {
        width: 16px;
        margin: 13px 2px 0;
    }

    .lt-cart-page-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .lt-cart-checkout-btn {
        width: 100%;
        justify-content: center;
    }

    .lt-cart-continue {
        justify-content: center;
    }

    .lt-login-guest-modal {
        max-width: 100%;
        margin: 0 0.5rem;
    }

    .lt-login-guest-body {
        padding: 1rem 1.25rem 1.5rem;
    }

    .lt-split-popup-body {
        grid-template-columns: 1fr;
    }

    .lt-split-panel:first-child {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .lt-district-dropdown {
        width: 100%;
        min-width: auto;
        max-width: none;
    }

    .lt-district-options-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lt-payment-page {
        padding: 1rem 0.5rem;
    }

    .lt-complete-page {
        padding: 2rem 0.5rem;
    }

    .lt-complete-actions {
        flex-direction: column;
    }

    .lt-complete-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .lt-products-grid,
    .lt-products-grid-main,
    .lt-home-products {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .lt-product-card-img,
    .lt-product-card-main-img,
    .lt-product-card-partial-img {
        height: 140px;
    }

    .lt-cart-item {
        grid-template-columns: 25px 60px 1fr;
        gap: 0.5rem;
    }

    .lt-cart-product-img {
        width: 60px;
        height: 60px;
    }

    .lt-cart-product-name {
        font-size: 0.85rem;
    }

    .lt-step-divider {
        width: 20px;
    }

    .lt-checkout-section-hd {
        font-size: 14px;
        padding: 8px 10px;
    }

    .lt-checkout-section-body {
        padding: 0.75rem;
    }

    .lt-order-summary-hd {
        font-size: 14px;
        padding: 8px 10px;
    }

    .lt-order-summary-body {
        padding: 0.75rem;
    }
}

/* Mobile filter toggle button — hidden on desktop (sidebar shows there). */
.lt-filter-toggle { display: none; }

/* Announcement-bar expand toggle — mobile only (full text shows on desktop). */
.lt-top-adv-toggle { display: none; }
@keyframes advFade { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════════════════════════════════════════════
   Mobile refinements (≤767px) — appended last so these win over earlier
   duplicate rules. Fixes reported on phones:
     • /news rendered one-character-per-line (10rem side padding crushed it)
     • /products & sections: excess top gap + clipped right product column
     • /products intro (.lt-cake-intro) cut off
     • 今期推薦 + related/co-purchase carousels: card sizing & edge peek
   ════════════════════════════════════════════════════════════════════════ */

/* 今期推薦 — tablet (768–1024px, incl. iPad Mini portrait 768 & landscape 1024):
   a 2-column grid (2×2 for the four curated picks — balanced, no orphan row) instead of
   the cramped desktop 4-up carousel. !important overrides the carousel's inline card
   sizing/transform that the JS sets at >767px; the min-width:768 floor keeps this from
   clashing with the ≤767px 2-column mobile grid below (which is also 2 columns). */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 今期推薦: 2-up carousel with prev/next arrows, inset on each side like the 最新消息
       carousel. We DON'T override .lt-feat-cards-row width/margin here, so the base 14.01%
       side inset (+ overflow:hidden) applies — that's the left/right padding. The JS sizes
       the cards (VISIBLE=2) and translates the track; arrows use the news-style position. */
    .lt-feat-track {
        display: flex !important;
        gap: 16px !important;        /* must match gapPx() in the carousel JS */
        padding: 0 !important;
        align-items: flex-start !important;
    }
    .lt-feat-card { height: auto !important; }   /* width set inline by the JS */
    .lt-feat-arrow { top: 50% !important; }      /* news-style: vertically centred; left/right 32px (base) */
}

@media (max-width: 767px) {
    /* News list: the wrapper carried 10rem (160px) side padding from desktop,
       leaving ~55px of content width on a phone → text stacked vertically. */
    .lt-news-list-pad { padding-left: 0; padding-right: 0; }
    .lt-news-section-header { padding-left: 16px; padding-right: 16px; }
    .lt-news-page-grid { padding-left: 16px; padding-right: 16px; }

    /* Products listing + detail: drop the desktop header offset (the fixed mobile
       header is only ~68px and the layout already clears it) and tighten the
       content padding. min-width:0 lets the single grid column shrink to the
       viewport instead of being floored by the cards' min-content. */
    .lt-products-page { padding-top: 8px; }
    .pd-section { padding-top: 8px; }
    .lt-products-content { padding: 1rem 1rem 2rem; min-width: 0; }
    .lt-cake-intro { padding-left: 4px; padding-right: 4px; }

    /* The mobile override used `1fr` (= minmax(auto,1fr)); the auto-min floored
       each product column at the card's min-content (~228px) so two columns
       overflowed 375px and the right column was sliced off. Let tracks shrink. */
    .lt-products-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 今期推薦: native horizontal scroll (swipe / scrollbar) like the 最新消息 section —
       same as the 768–1024px block. JS clears its inline sizing; CSS makes the row a
       scroll container with a thin scrollbar and fixed-width cards (~2 per view + peek). */
    .lt-feat-cards-row {
        overflow-x: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #d4c99a transparent;
    }
    .lt-feat-cards-row::-webkit-scrollbar { height: 6px; }
    .lt-feat-cards-row::-webkit-scrollbar-track { background: transparent; }
    .lt-feat-cards-row::-webkit-scrollbar-thumb { background: #d4c99a; border-radius: 3px; }
    .lt-feat-track {
        display: flex !important;
        gap: 16px !important;
        padding: 0 !important;
        align-items: flex-start !important;
    }
    /* Scope the 46% carousel-card width to the 今期推薦 row ONLY — as a bare selector it
       also hit the product-grid cards, shrinking them to 46% of their column (tiny cards
       with big gaps on phones). */
    .lt-feat-cards-row .lt-feat-card { flex: 0 0 46% !important; width: 46% !important; height: auto !important; }
    .lt-feat-arrow { display: none !important; }

    /* 您可能也喜歡 / 其他人同時買了: right gutter so the peeked card isn't
       sliced flush to the screen edge, and a consistent card size. */
    .pd-related-cards { gap: 16px; padding-right: 16px; }
    .pd-related-card { flex: 0 0 150px; min-width: 150px; }

    /* ── Systemic top-gap fix ──────────────────────────────────────────────
       Many content pages carry a 100–124px top offset meant for the taller
       DESKTOP sticky header. On mobile the header is fixed at 68px and the
       announcement bar already sits below it, so content should start right
       after it. Trim the per-page offset (!important overrides the inline /
       page-block margins these wrappers were given). */
    .lt-cart-page,
    .lt-checkout-page,
    .lt-complete-page,
    .lt-payment-page,
    .lt-payment-success-page,
    .acc-wrap,
    .cp-wrap,
    .od-wrap,
    .pf-wrap,
    .wl-wrap {
        margin-top: 14px !important;
    }

    /* Stores hero: .lt-stores-hero-text had 10rem (160px) side padding from
       desktop — crushed the copy into a narrow column on phones. Type scaled
       to match the About hero's mobile sizes. */
    .lt-stores-hero-text { padding-left: 1.25rem; padding-right: 1.25rem; }
    .lt-stores-hero-text h1 { font-size: 2.2rem; }
    .lt-stores-hero-text p { font-size: 1.15rem; }

    /* About hero: its own .lt-about-hero-text had 6rem (96px) side padding plus
       large hero fonts, leaving ~183px for the subtitle → it wrapped narrowly.
       Trim padding and scale the type for phones. */
    .lt-about-hero-text { padding-left: 1.25rem; padding-right: 1.25rem; }
    .lt-about-hero-title { font-size: 2.2rem; }
    .lt-about-hero-sub { font-size: 1.15rem; }

    /* Products: the filter sidebar is hidden on phones — surface a toggle button
       that reveals it as a collapsible panel so mobile users can still filter. */
    .lt-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(100% - 32px);
        margin: 12px 16px 0;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid var(--lt-primary, #b08d57);
        border-radius: 10px;
        color: var(--lt-primary, #b08d57);
        font-size: .95rem;
        font-weight: 600;
        cursor: pointer;
    }
    .lt-filter-toggle span { flex: 1; text-align: left; }
    .lt-filter-toggle-caret { transition: transform .2s ease; }
    .lt-filter-toggle[aria-expanded="true"] .lt-filter-toggle-caret { transform: rotate(180deg); }
    .lt-filter-sidebar.is-open {
        display: block;
        width: auto;
        margin: 8px 16px 0;
        padding: 16px;
        border: 1px solid #ececec;
        border-radius: 10px;
        background: #fff;
        min-height: 40vh;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Announcement bar: collapsed to a single line by default (the verbose
       delivery/hours/promo text used to clip or stack into a tall block). A ▾
       toggle expands the full content on demand — progressive disclosure. */
    .lt-top-adv {
        padding-left: 1rem;
        padding-right: 1rem;
        min-height: 0;
        height: auto;
        overflow: visible;
        align-items: center;
        gap: 0.5rem;
    }
    .lt-top-adv-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: none;
        border: 0;
        padding: 4px;
        cursor: pointer;
        color: var(--lt-text-dark);
        font-size: 0.95rem;
        line-height: 1;
    }
    .lt-top-adv-toggle i { transition: transform .2s ease; }
    .lt-top-adv.expanded .lt-top-adv-toggle i { transform: rotate(180deg); }

    .lt-top-adv-inner {
        flex: 1;
        width: auto;
        min-width: 0;
        overflow: hidden;
    }

    /* Collapsed (default): TWO compact rows — the contact line on top and the promo on
       its OWN row below. Each row shows ONE truncated line; the JS cycles each row's
       messages independently (so the promo no longer shares one line with the contact). */
    .lt-top-adv:not(.expanded) .lt-top-adv-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .lt-top-adv:not(.expanded) .lt-top-adv-contact { flex: none; min-width: 0; }
    /* No-JS fallback: show the first message of EACH row; JS rotates the rest in place. */
    .lt-top-adv:not(.expanded) .lt-top-adv-contact > div:not(:first-child),
    .lt-top-adv:not(.expanded) .lt-top-adv-promo .lt-top-adv-item:not(:first-child) {
        display: none;
    }
    /* Contact row: one truncated line (rotates between the contact lines). */
    .lt-top-adv:not(.expanded) .lt-top-adv-contact > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .lt-top-adv-contact > div.adv-fade { animation: advFade .45s ease; }
    /* Promo row: continuously scroll (marquee) the full promo text across its own row,
       so a long single banner moves instead of being cut off. */
    .lt-top-adv:not(.expanded) .lt-top-adv-promo {
        display: block;
        justify-content: flex-start;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    .lt-top-adv:not(.expanded) .lt-top-adv-promo .lt-top-adv-item {
        display: inline-block;
        white-space: nowrap;
        /* Starts visible at the left and scrolls off — so the row is moving from the
           moment it loads (no off-screen lead-in that looks static). */
        animation: advMarquee 18s linear infinite;
        will-change: transform;
    }
    /* Pause the scroll while pressed so it can be read. :active only (released on
       touch-end). Hover-pause is gated to real pointer devices — on a touchscreen
       :hover STICKS to the last-tapped element, which would otherwise freeze the
       marquee for good after tapping the bar to expand/collapse it. */
    .lt-top-adv:active .lt-top-adv-promo .lt-top-adv-item { animation-play-state: paused; }
    @media (hover: hover) {
        .lt-top-adv:hover .lt-top-adv-promo .lt-top-adv-item { animation-play-state: paused; }
    }
    /* Respect reduced-motion: no scroll, show from the start. */
    @media (prefers-reduced-motion: reduce) {
        .lt-top-adv:not(.expanded) .lt-top-adv-promo .lt-top-adv-item {
            animation: none;
            padding-left: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
        }
    }

    /* Expanded (toggle): stack and show everything (full promo text wraps). */
    .lt-top-adv.expanded .lt-top-adv-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        overflow: visible;
    }
    .lt-top-adv.expanded .lt-top-adv-contact { flex-shrink: 1; }
    .lt-top-adv.expanded .lt-top-adv-promo {
        justify-content: flex-start;
        overflow: visible;
        white-space: normal;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
    .lt-top-adv.expanded .lt-top-adv-ticker {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        white-space: normal;
    }
    .lt-top-adv.expanded .lt-top-adv-item,
    .lt-top-adv.expanded .lt-top-adv-item.main-promo {
        white-space: normal;
        flex-shrink: 1;
        min-width: 0;
    }
}

/* ── 合適人數 dual-handle range slider (storefront /products filter) ── */
.lt-range { padding: 6px 6px 2px; }
.lt-range-bar { position: relative; height: 28px; }
.lt-range-bar::before {            /* base track */
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 6px; border-radius: 6px;
    background: #e3e3e3;
}
.lt-range-fill {                   /* selected (coloured) portion */
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 6px; border-radius: 6px; background: #137a8c;  /* teal / green-blue */
}
.lt-range-bar input[type="range"] {
    position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.lt-range-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    border: 2px solid #137a8c; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25); margin-top: 0;
}
.lt-range-bar input[type="range"]::-moz-range-thumb {
    pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid #137a8c; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.lt-range-bar input[type="range"]::-webkit-slider-runnable-track { background: none; }
.lt-range-bar input[type="range"]::-moz-range-track { background: none; }
.lt-range-labels {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 0.9rem; color: #555; font-weight: 600;
}

/* ── Products listing: 2 columns on phones, made a touch bigger ────────────────
   Keep two product columns on phones (≤575px), but tighten the gap and the content
   side padding so each card is a little larger than the cramped default. This rule
   is intentionally LAST so it wins the cascade over the ≤767px 2-column rule. */
@media (max-width: 575px) {
    .lt-products-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .lt-products-content { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ─── Pet-cake Instagram icon (white bone-logo PNG, next to the main IG) ────────
   Sized to track the sibling font-icon size (1em follows the parent font-size).
   The header / mobile-menu icons sit on dark backgrounds, so the white logo is
   used as-is; the footer shows dark glyphs on a light background, so the white
   PNG is darkened with a filter to match. */
.lt-ig-pet {
	/* Same overall size as the plain IG icon (.lt-social-img). The bone occupies
	   the artwork's top ~29%, putting the IG square's center at 64.5% height —
	   the translateY re-centres the square on the shared icon centerline. */
	width: 1.10em;
	height: 1.10em;
	object-fit: contain;
	display: block;
	transform: translateY(-9.5%);
}

/* Plain IG / FB image icons (white PNGs, replace the old font icons). The IG
   square is sized to the pet icon's square portion (1.15em × ~0.78 ≈ .9em); the
   Facebook "f" is naturally narrow, width follows its aspect ratio. */
.lt-social-img {
	height: .92em;
	width: auto;
	object-fit: contain;
	display: block;
}

.lt-social-img--fb {
	height: .95em;
}

.lt-footer-social a .lt-ig-pet,
.lt-footer-social a .lt-social-img {
	filter: brightness(0) opacity(.82);
	transition: filter var(--lt-transition);
}

.lt-footer-social a:hover .lt-ig-pet,
.lt-footer-social a:hover .lt-social-img {
	filter: brightness(0) opacity(1);
}

/* ── 手機版 Hero Banner (1500×1800 portrait) ─────────────────────────────────
   Media query MUST mirror the <source media="…"> on the home hero <picture>:
   when the portrait asset is the one being displayed, the fixed strip heights
   (desktop calc / mobile 280px) give way to the image's own 5:6 ratio so it
   shows uncropped. Slides without a mobile image carry no .has-mobile class
   and keep the existing crop behaviour. */
@media (orientation: portrait) and (max-width: 1024px) {
	.lt-hero-slide img.has-mobile {
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: 1500 / 1800;
		object-fit: cover;
	}
}