body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', Arial, sans-serif; background: #f8f9fa; margin: 0; }
html, body { overflow-x: hidden; }
.navbar { font-size: 1rem; }
/* Fix navbar text wrapping: keep links on one line and normalize spacing */
/* Keep generic navbar images tidy, but don't override the circular logo sizing */
.navbar-brand img:not(.logo-circle) { height: 48px !important; width: auto; }
.navbar-nav { align-items: center; flex-wrap: nowrap; }
.navbar-nav .nav-link { white-space: nowrap; line-height: 1.2; letter-spacing: 0; }
.product-card:hover .product-img { transform: scale(1.08); transition: 0.3s; }
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 99; }
footer a { text-decoration: none; }

/* Full-bleed footer (mobile edge-to-edge) */
.site-footer { margin-left: 0; margin-right: 0; }
.site-footer .container-fluid { padding-left: 0; padding-right: 0; }
.site-footer .row { margin-left: 0; margin-right: 0; }
/* Ensure footer background truly spans viewport width */
.site-footer { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; }
@media (max-width: 576px) {
	.site-footer .px-3 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Blog content: make embedded media responsive */
.content img,
.content figure img {
	width: auto !important;           /* override width attributes from editor */
	max-width: 100%;                  /* never overflow container */
	height: auto !important;          /* keep aspect ratio on mobile */
	display: block;
}
.content figure { margin: 1rem 0; }
.content iframe,
.content video { width: 100% !important; max-width: 100%; height: auto; }
.content a { word-break: break-word; overflow-wrap: anywhere; }

/* Optional align classes from editors */
.content img.alignleft { float: left; margin: 0 1rem 1rem 0; max-width: 48%; }
.content img.alignright { float: right; margin: 0 0 1rem 1rem; max-width: 48%; }
.content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 576px) {
	.content img.alignleft,
	.content img.alignright { float: none; margin: 0.5rem auto; max-width: 100%; }
}

/* Banner: keep consistent 3:1 aspect ratio across devices */
.home-banner-frame {
	display: block;
	position: relative;
	width: 100%;
	/* Use aspect-ratio when available */
	aspect-ratio: 3 / 1;              /* 3:1 like brand banner */
	overflow: hidden;
}
.home-banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 3 / 1) {
	.home-banner-frame {
		height: 0;
		padding-bottom: calc(100% / 3); /* 3:1 ratio => 33.333% */
	}
	.home-banner-img {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100%; height: 100%;
		object-fit: cover;
	}
}
/* No fixed heights on mobile; let aspect ratio govern on all screens */
/* Responsive fixed heights to ensure rectangular look across devices */
@media (max-width: 576px) {
	/* Small phones: force banner to 400x135, centered; shrink on narrower screens */
	.home-banner-frame,
	#bannerCarousel,
	#bannerCarousel .carousel-inner,
	#bannerCarousel .carousel-item {
		aspect-ratio: auto !important;
		/* Full-bleed width on mobile to avoid side gaps */
		width: calc(100vw + 2px);
		height: 380px !important;
		padding-bottom: 0 !important;
		/* Nudge to cancel container padding and prevent sub-pixel slivers */
		margin-left: calc(50% - 50vw - 1px);
		margin-right: calc(50% - 50vw - 1px);
	}
	.home-banner-img {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100%; height: 100%;
		object-fit: cover; /* use mobile-specific square when available */
		object-position: center;
	}
}

@media (min-width: 577px) and (max-width: 991.98px) {
	.home-banner-frame,
	#bannerCarousel,
	#bannerCarousel .carousel-inner,
	#bannerCarousel .carousel-item {
		aspect-ratio: auto !important;
		height: 560px !important; /* tablet height */
		padding-bottom: 0 !important;
	}
	.home-banner-img {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

@media (min-width: 992px) {
	.home-banner-frame,
	#bannerCarousel,
	#bannerCarousel .carousel-inner,
	#bannerCarousel .carousel-item {
		aspect-ratio: auto !important;
		height: 800px !important; /* desktop height */
		padding-bottom: 0 !important;
	}
	.home-banner-img {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/* Mid-banners under the carousel */
.mid-banner-img {
	width: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 576px) {
	.mid-banner-img { height: 380px; }
}
@media (min-width: 577px) and (max-width: 991.98px) {
	.mid-banner-img { height: 560px; }
}
@media (min-width: 992px) {
	.mid-banner-img { height: 800px; }
}

/* About page styles */
.about-hero {
	text-align: left;
	margin-bottom: 1rem;
}
.about-hero h5 {
	font-size: 1.35rem;
	letter-spacing: 0.6px;
	color: #222;
	font-weight: 700;
}
.about-content {
	background: #fff;
	padding: 32px 36px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(18,24,32,0.06);
	color: #2b2b2b;
	line-height: 1.9;
	font-size: 1rem;
}
.about-content p {
	margin-bottom: 1.05rem;
	font-size: 1.03rem;
}
.about-section-title {
	display: inline-block;
	border-left: 4px solid #f39c12;
	padding-left: 10px;
	margin-bottom: 12px;
}

/* FAQ tweaks */
.faq-item {
	margin-bottom: 2.2rem; /* larger gap between Q/A groups */
}
.faq-item h6 {
	font-weight: 700; /* make question bold */
	font-size: 1.03rem;
	margin-bottom: 0.35rem;
}
.faq-item p {
	margin-bottom: 0.6rem;
	color: #333;
}

/* Product detail gallery */
.product-main-frame {
	width: 100%;
	/* large visual on load; keep consistent ratio */
	aspect-ratio: 1 / 1; /* square by default */
	background: #f2f2f2;
	border-radius: 8px;
	overflow: hidden;
}
.product-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (min-width: 576px) {
	.product-main-frame { aspect-ratio: 4 / 5; }
}
@media (min-width: 992px) {
	.product-main-frame { aspect-ratio: 1 / 1; }
}
.product-thumb {
	height: 80px;
	width: 80px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid #e1e1e1;
}
.product-thumb:hover { outline: 2px solid #888; }

/* Full-bleed helpers for edge-to-edge sections */
.full-bleed {
	/* Slightly overdraw to avoid sub-pixel gaps */
	width: calc(100vw + 2px);
	margin-left: calc(50% - 50vw - 1px);
	margin-right: calc(50% - 50vw - 1px);
}
.full-bleed--no-top { margin-top: 0 !important; }
.full-bleed--no-bottom { margin-bottom: 0 !important; }

/* Remove default margins around full-bleed sections and carousels */
.full-bleed, .carousel { margin: 0; }

/* Ensure banner carousels inside full-bleed truly stretch edge to edge */
/* When a full-bleed section is nested inside a Bootstrap .container (which has left/right padding),
   compensate by subtracting that padding from the calc so the section truly touches the viewport edges. */
.container .full-bleed {
	/* Make section truly edge-to-edge even inside padded container */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	/* Nudge 1px extra on the right to avoid subpixel gap */
	margin-right: calc(50% - 50vw - 1px);
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.full-bleed #bannerCarousel,
.full-bleed #bannerCarousel .carousel-inner,
.full-bleed #bannerCarousel .carousel-item {
	width: calc(100vw + 2px);
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.full-bleed #bannerCarousel { border: 0; box-shadow: none; background: transparent; }

/* Blog list date badge */
.blog-card-media { position: relative; display: block; overflow: hidden; }
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-media > .blog-date-badge {
	right: auto;
	bottom: auto;
	width: auto;              /* override .ratio > * width:100% */
	height: auto;             /* override .ratio > * height:100% */
	display: inline-block;    /* shrink to content */
	pointer-events: none;     /* allow clicking the image */
}
.blog-date-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #222;                /* dark pill like reference */
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	line-height: 1;
	min-height: 28px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.blog-date-badge .day { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.4px; }
.blog-date-badge .month { font-size: 0.75rem; opacity: 0.9; }
@media (min-width: 768px) {
		.blog-date-badge { top: 10px; left: 10px; padding: 8px 12px; border-radius: 8px; }
		.blog-date-badge .month { font-size: 0.8rem; }
		.blog-date-badge .day { font-size: 1.15rem; }
}

		/* Horizontal blog list layout */
		.blog-list-card { margin-bottom: 1rem; }
		.blog-list-thumb { display: block; width: 100%; height: 100%; }
		@media (min-width: 768px) {
			.blog-list-thumb { height: 220px; }
		}
		@media (min-width: 992px) {
			.blog-list-thumb { height: 240px; }
		}
		@media (max-width: 767.98px) {
			.blog-list-thumb { aspect-ratio: 16 / 9; }
		}