/* ================= 共用區塊 ================= */
* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, sans-serif, "微軟正黑體", Arial;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

a {
	text-decoration:none;
}	

/* ================= 頁首區塊 ================= */
		.site-header {
		  background-color: white;
		  padding: 10px 16px;
		  position: relative;
		  z-index: 10;
		  width: 100;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		}
		.container {
		  padding: 10px 16px;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  flex-wrap: wrap;
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		}

		.site-logo {
		  display: block;
		  height: 36px;
		  margin-right: 26px;
		}
		.logo-desktop {
		  display: block;
		  height: 36px;
		}
		.logo-mobile {
		  display: none;
		}

		/* Header 右側欄位 */
		.header-right {
		  display: flex;
		  align-items: center;
		  gap: 12px;
		  flex: 1;
		  justify-content: flex-end;
		}
		.help-link {
		  font-size: 15px;
		  color: #9a6eff;
		  border: 1px solid #d8d8f0;
		  padding: 4px 10px;
		  border-radius: 20px;
		  text-decoration: none;
		  white-space: nowrap;
		  font-weight: bolder;
		}

		/* ================= 搜尋框統一樣式 ================= */
		.search-box {
		  position: relative;
		  flex: 1;
		  max-width: 1200px;
		}
		.search-input {
		  width: 100%;
		  padding: 6px 36px 6px 12px;
		  font-size: 14px;
		  border: 1px solid #ccc;
		  border-radius: 20px;
		  background-color: #fff;
		  z-index: 1;
		}
		.search-icon {
		  position: absolute;
		  right: 12px;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 24px;
		  height: 24px;
		  z-index: 10;
		  cursor: pointer;
		}

		/* 桌機搜尋框顯示 */
		.desktop-search {
		  display: flex;
		}
		/* 小網預設不顯示 */
		.mobile-search {
		  display: none;
		  padding: 12px 16px;
		  background-color: #fff;
		  position: relative;
		}
		
		/* ================= 小網 header 專用搜尋列 ================= */
		.mobile-search-row {
		  display: none;
		  padding: 0px 16px 0px 16px;
		  flex-wrap: nowrap;
		  align-items: center;
		  justify-content: space-between;
		  gap: 12px;
		}
		.mobile-search-row .search-box {
		  flex: 1;
		  max-width: none;
		}
		.mobile-search-row .help-link {
		  font-size: 15px;
		  color: #7a4de6;
		  background-color: #fff;
		  border: 1px solid #e0e0ff;
		  border-radius: 20px;
		  white-space: nowrap;
		}

		/* ================= 小網（767px 以下） ================= */
		@media (max-width: 767px) {
		  .site-header {
			background-color: #a58efb;
		  }

		  .container {
			flex-direction: column;
			align-items: flex-start;
			padding: 5px;
		  }

		  .header-right {
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin-top: 8px;
		  }

		  .logo-desktop {
			display: none;
		  }

		  .site-header .site-logo {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 10px;
		  }

		  .site-header .logo-mobile {
			display: block;
			height: 20px;
		  }

		  .desktop-search {
			display: none;
		  }

		  .mobile-search {
			display: block;
		  }

		  .mobile-search .search-input {
			padding: 6px 36px 6px 12px;
			font-size: 14px;
			z-index: 1;
		  }

		  .mobile-search .search-icon {
			right: 24px;
			z-index: 10;
			cursor: pointer;
		  }

		  .search-box {
			max-width: none;
			width: 100%;
		  }
		  .mobile-search {
			display: none; /* 既有舊版隱藏 */
		  }

		  .mobile-search-row {
			display: flex;
		  }
		 .help-link {
		  font-weight: normal;
		 }
		}


/* ================= 輪播 top-banner ================= */
		.top-banner {
		  position: relative;
		  margin-top: 15px;
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		  overflow: hidden;
		}

		.top-banner .swiper-slide img {
		  width: 100%;
		  height: auto;
		  display: block;
		  border: 1px solid #F0F0F0;
		}

		.custom-banner-arrow {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  z-index: 2;
		  width: 24px;
		  height: 24px;
		  cursor: pointer;
		}
		.custom-banner-arrow.left {
		  left: 2%;
		}
		.custom-banner-arrow.right {
		  right: 2%;
		}
		.custom-banner-arrow img {
		  width: 100%;
		  height: auto;
		}
		@media (max-width: 767px) {
		  .top-banner {
			margin: 16px;
		  }

		  .top-banner .swiper {
			overflow: hidden; /* 防止輪播左右溢出 */
		  }

		  .top-banner .swiper-slide {
			width: 100% !important;
			flex-shrink: 0;
			overflow: hidden;
			padding-left: 16px;
			padding-right: 16px;
		  }

		  .top-banner .swiper-wrapper {
			margin-left: 0 !important ;
		  }
		  .top-banner .swiper-slide img {
			width: 100%;
			display: block;
			object-fit: cover;
		  }
		  .custom-banner-arrow.left {
		    display:none;
		  }
		  .custom-banner-arrow.right {
		    display:none;
	  	  }
		}




/* ================= 精選 highlight-banner ================= */
		.highlight-banner {
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		  margin-top: 15px;
		  overflow: hidden;
		  position: relative;
		}

		.highlight-banner img {
		  width: 100%;
		  display: block;
		  border-radius: 20px 20px 0 0;
		}
		.custom-banner-arrow {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}	

		/* highlight-banner Swiper 自訂箭頭 */
		#s2 .custom-banner-arrow {
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
			top: 50%;
		}
		#s2 .custom-banner-arrow.left {
		  left: 6%;
		}
		#s2 .custom-banner-arrow.right {
		  right: 6%;
		}

		/* 小網調整 highlight-banner 圖圓角 */
		@media (max-width: 767px) {
		  .highlight-banner img {
			border-radius: 10px;
			margin-top: 0px;
		  }

		  .highlight-banner .swiper {
			overflow: hidden; /* 防止輪播左右溢出 */
		  }

		  .highlight-banner  .swiper-slide {
			width: 100% !important;
			flex-shrink: 0;
			overflow: hidden;
			padding-left: 16px;
			padding-right: 16px;
		  }

		  .highlight-banner  .swiper-wrapper {
			margin-left: 0 !important ;
		  }
		  .highlight-banner .swiper-slide img {
			width: 100%;
			display: block;
			object-fit: cover;
		  }
		  
		  .custom-banner-arrow.left {
		    left: 6%;
		  }
		  .custom-banner-arrow.right {
		    right: 6%;
		  }
		  #s2 .custom-banner-arrow {
		    top: 50%;
		  }
		  #s2 .custom-banner-arrow.left {
		    left: 6%;
	  	  }
		  #s2 .custom-banner-arrow.right {
		    right: 6%;
		  }
		}

/* ================= 跑馬燈 marquee ================= */
		.marquee-bar {
		  width: 100%;
		  text-align: center;
		  margin: 0 auto;
		}
		.marquee-viewport {
		  background-color: #a58efb;
		  color: #fff;
		  font-size: 16px;
		  line-height: 1.6;
		  height: 36px;
		  overflow: hidden;
		  position: relative;
		  border-radius: 0 0 20px 20px;
		  max-width: 1200px;
		  margin: 0 auto;
		}
		.marquee-list {
		  display: flex;
		  flex-direction: column;
		  animation: scrollUp 15s linear infinite;
		  margin: 0;
		  padding: 0;
		}
		.marquee-list a{
		  text-decoration: none;
		  color: #ffffff;
		}
		.marquee-list li {
		  height: 36px;
		  line-height: 36px;
		  list-style: none;
		  white-space: nowrap;
		}
		
		/* 滑過 li 裡的 a 時字變粗 */
		.marquee-list li:hover a {
		  font-weight: bold;
		}

		/* 滑過整個 marquee 時，暫停動畫 */
		.marquee-viewport:hover .marquee-list {
		  animation-play-state: paused;
		}

		@keyframes scrollUp {
		  0% { transform: translateY(100%); }
		  10% { transform: translateY(0%); }
		  40% { transform: translateY(-30%); }
		  70% { transform: translateY(-60%); }
		  100% { transform: translateY(-100%); }
		}
		
		/* 小網調整 跑馬燈 marquee樣式 */
		@media (max-width: 767px) {
			.marquee-bar {
			  width: 100%;
			  background-color: #a58efb;
			  margin-top: 16px;
			}
			.marquee-viewport {
			  border-radius: 0;
			}
		}


/* ================= 導覽 nav-area 按鈕區 ================= */
		.nav-area {
		  max-width: 1200px;
		  margin: 15px auto;
		}

		.nav-black {
		  background-color: #fff;
		  padding: 16px;
		  border-radius: 10px;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		  overflow-x: auto;
		}

		.button-grid {
		  display: flex;
		  justify-content: space-around;
		  margin-bottom: 10px;
		}

		.nav-btn {
		  font-size: 16px;
		  padding: 10px;
		  background-color: #fafafa;
		  border-radius: 8px;
		  width: 30%;
		  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
		}

		.icon-btn {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  font-size: 16px;
		  background-color: #fff;
		  border: 1px solid #F0F0F0;
		  border-radius: 12px;
		  padding: 10px 8px;
		  transition: all 0.2s ease;
		  font-weight: bold;
		}
		.icon-btn a{
		  text-decoration: none;
		  color: #4F4F4F;
		}
		.icon-btn img {
		  width: 64px;
		  height: 64px;
		  margin-bottom: 6px;
		}
		.icon-btn.active {
		  border-color: #a58efb;
		  font-weight: bold;
		}
		.icon-btn.active span {
		  color: #6C6C6C;
		  font-weight: bold;
		}
		.icon-btn.active a {
		  color:#a58efb;
		  font-weight: bold;
		  text-decoration: none;
		}
		.icon-btn.active {
		  color: #a58efb;
		  font-weight: bold;
		  text-decoration: none;
		}
		.icon-btn:hover {
		  color: #a58efb;
		  border-color: #a58efb;
		  font-weight: bold;
		  text-decoration: none;
		  
		}
		
		

		/* ================= tag group ================= */
		.tag-group {
		  display: flex;
		  max-width: 100%;
		  overflow-x: auto;
		  flex-wrap: nowrap;
		  gap: 6px;
		  padding: 8px 0;
		  -webkit-overflow-scrolling: touch;
		  scrollbar-width: thin;
		  white-space: nowrap;
		  overflow-x: auto;
		}
		.tag-group::-webkit-scrollbar {
		  display: none;
		}
		.tag-label {
		  flex: 0 0 auto;
		  padding: 6px 12px;
		  font-size: 13px;
		  color: #2d2d2d;
		  background-color: #fff;
		  border: 1px solid #2d2d2d;
		  border-radius: 20px;
		  white-space: nowrap;
		  cursor: pointer;
		  transition: all 0.2s ease;
		}
		.tag-label a{
		  font-size: 13px;
		  color: #2d2d2d;
		  text-decoration:none;
		}
		.tag-label.active {
		  color: #9a6eff;
		  border-color: #a58efb;
		  font-weight: bold;
		}
		
		.tag-label:hover {
		  color: #a58efb;
		  border-color: #a58efb;
		  font-weight: bold;
		}
		
		.tag-label.active a {
		  color: #9a6eff;
		  border-color: #a58efb;
		  font-weight: bold;
		  text-decoration: none;
		}
		
		/* 小網調整 導覽 nav-area 按鈕區 樣式 */
		@media (max-width: 767px) {
		  .nav-area {
		    padding: 0 16px 0 16px;
		  }
		  .tag-group {
		    scrollbar-width: none;
		  }
		}

/* ================= 熱門店家區塊 ================= */
		.hot-merchants {
		  color: #000;
		  font-weight: bold;
		  max-width: 1200px;
		  margin: 0 auto;
		}

		.section-title {
		  font-size: 16px;
		  font-weight: bold;
		  margin-bottom: 8px;
		}

		.merchant-scroll {
		  margin-top: 8px;
		  background-color: #fff;
		  border-radius: 10px;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		  display: flex;
		  padding: 20px 16px 20px 16px;
		  overflow-x: auto;
		  gap: 15px;
		  -webkit-overflow-scrolling: touch;
		  scrollbar-width: thin;
		}
		.merchant-scroll::-webkit-scrollbar {
		  display: none;
		}

		.merchant-card {
		  flex: 0 0 auto;
		  width: 140px;
		  border-radius: 10px;
		  background-color: #fff;
		  text-align: left;
		  position: relative;
		}
		.merchant-card img {
		  width: 100%;
		  object-fit: contain;
		  margin: 0 auto;
		  border-radius: 6px;
		  max-width: 140px;
		}

		.merchant-name {
		  font-size: 12px;
		  margin: 8px 0 4px;
		  color: #777;
		}

		.merchant-desc {
		  font-size: 14px;
		  font-weight: bold;
		  margin: 0;
		  color: #000;
		  height: 34px;
		}

		.point-badge {
		  margin-top: 8px;
		  font-size: 13px;
		  color: #f6412e;
		  font-weight: bold;
		  display: inline-block;
		}
		.point-badge img {
		  width: 18px;
		  height: 18px;
		  vertical-align: middle;
		  margin-right: 2px;
		}
		.point-badge span {
		  font-size: 14px;
		  vertical-align: middle;
		}

		.tag {
		  position: absolute;
		  top: -20px;
		  left: 0;
		  font-size: 13px;
		  padding: 5px 9px 5px 9px;
		  color: white;
		  border-radius: 12px 12px 12px 0px;
		  border: 2px solid #fff;
		  white-space: nowrap;
		  z-index: 2;
		  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
		}


		/* 小網調整 熱門店家 樣式 */
		@media (max-width: 767px) {
		  .merchant-card {
			width: 120px;
		  }
		  .merchant-scroll {
		    padding: 20px 16px 20px 16px;
		  }
		  .hot-merchants {
		    padding: 0 16px;
		  }
		  .merchant-scroll {
		    scrollbar-width: none;
		  }
		}



/* ================= 精選品牌區塊 ================= */
		.featured-brands {
		  color: #000;
		  font-weight: bold;
		  max-width: 1200px;
		  margin: 0 auto;
		}

		.brand-tabs {
		  display: flex;
		  overflow-x: auto;
		  gap: 18px;
		  background-color: #a58efb;
		  border-radius: 16px 16px 0 0;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		  padding: 0px 8px 0px 8px; 
		  margin: 0;
		  -webkit-overflow-scrolling: touch; 
		  scrollbar-width: thin; 
		}
		.brand-tabs::-webkit-scrollbar {
		  display: none;
		}

		.brand-tabs .tab {
		  flex: 0 0 auto;
		  background: none;
		  border: none;
		  color: #fff;
		  font-size: 18px;
		  padding: 8px 0 10px;
		  position: relative;
		  cursor: pointer;
		  font-weight: bold;
		  white-space: nowrap;
		  z-index: 1;
		}

		.brand-tabs .tab.active {
		  color: #ffd633; /* 黃色文字 */
		  font-weight: bold;
		}

		.brand-tabs .tab.active::after {
		  content: '';
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 4px;
		  background-color: #ffd633; /* 黃色底線 */
		}

		/* 顯示/隱藏用 */
		.brand-grid {
		  display: none;
		}
		.brand-grid.active {
		  display: block;
		}
		
		/* 整體可橫向滑動 + 二行 */
		.brand-scroll-area {
		  display: grid;
		  grid-auto-flow: column;
		  grid-template-rows: repeat(2, auto); /* 兩行 */
		  gap: 10px;
		  overflow-x: auto;
		  overflow-y: hidden;
		  scroll-snap-type: x mandatory;
		  -webkit-overflow-scrolling: touch;
		  padding-bottom: 0px;
		  padding-top: 15px;
		}
		.brand-scroll-area::-webkit-scrollbar {
		  display: none;
		}
		
		.brand-container .brand-grid {
		  padding: 24px 16px 24px 16px; /* 下方空間多一點 */
		  padding: 16px;
		  background-color: #ffffff;
		  border-radius: 16px ;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		  gap: 15px;
		  z-index: 5;
		  overflow-x: auto;
		  scroll-snap-align: start;		  
		}

		/* 卡片樣式 */
		.brand-card {
		  flex: 0 0 auto;
		  width: 120px;
		  min-height: 150px;
		  text-align: left;
		  scroll-snap-align: start;
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-start;
		  align-items: flex-start;
		  position: relative;
		}
		.brand-card img {
		  width: 100%;
		  object-fit: contain;
		  margin-bottom: 6px;
		  border-radius: 10px;
		  border: 1px solid #eee;
		  max-width: 130px;
		}
		.brand-name {
		  font-size: 13px;
		  margin: 0;
		  color: #333;
		  min-height: 33px;
		}
		
		.brand-card .point-badge {
		  margin-top: 0px;
		  font-size: 13px;
		  color: #f6412e;
		  font-weight: bold;
		  display: inline-block;
		}
		.brand-card .point-badge img {
		  width: 18px;
		  height: 18px;
		  vertical-align: middle;
		  margin-right: 2px;
		}
		.brand-card .point-badge span {
		  font-size: 14px;
		  vertical-align: top;
		}

		.card-tags {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 4px;
		  justify-content: flex-start;
		  min-height: 20px;
		  margin: 6px 0;
		  position: absolute;
		  border: 1px solid #fff;
		  top: -3px;
		  left: 0px;
		  z-index: 5;
		}
		.card-tags .tag {
		  font-size: 13px;
		  padding: 5px 9px 5px 9px;
		  color: white;
		  border-radius: 12px 12px 12px 0px;
		  border: 2px solid #fff;
		  white-space: nowrap;
		  line-height: 1.2;
		  z-index: 10;
		  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
		}

		
		/* 小網調整 精選品牌 樣式 */
		@media (max-width: 767px) {
		  .featured-brands {
		    padding: 16px;
		  }
		  .brand-card {
		    width: 100px;
		  }
		  .brand-scroll-area {
		    scrollbar-width: none;
		  }
		}	

/* ================= 商品區塊 ================= */
		.product-slider {
		  margin-top: 15px;
		  overflow: hidden;
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		  background-color: #ffffff;
		  border-radius: 10px;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		}
		
		/* 商品區塊 Banner 輪播容器 */
		.slider-banner-wrapper {
		  position: relative;
		  overflow: hidden;
		  border-radius: 10px 10px 0px 0px;
		}
		/* banner 內的 swiper-slide */
		.slider-header {
		  display: flex;
		  gap: 0;
		  overflow-x: auto;
		  scroll-snap-type: x mandatory;
		}
		
		.slider-header.swiper-wrapper {
		  width: 100% !important;
		}
		
		.slider-header .swiper-slide {
		  flex: 0 0 100%;
		  scroll-snap-align: center;
		  border-radius: 10px 10px 0px 0px;
		  overflow: hidden;
		  padding-left: 0;
		  padding-right: 0;
		}
		.slider-header .slider-header img {
		  display: block;
		  border-radius: 10px 10px 0px 0px;
		  width: 100% !important;
		}
		
	    .slider-banner-wrapper .swiper-slide {
		  width: 100% !important;
		  flex-shrink: 0;
		  padding-left: 0px;
		  padding-right: 0px;
		  box-sizing: border-box;
	    }
		

		/* 自訂箭頭（重用 top-banner 風格） */
		.slider-banner-wrapper .custom-banner-arrow {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 24px;
		  height: 24px;
		  z-index: 2;
		  cursor: pointer;
		}
		.slider-banner-wrapper .custom-banner-arrow.left {
		  left: 12px;
		}
		.slider-banner-wrapper .custom-banner-arrow.right {
		  right: 12px;
		}
		.slider-banner-wrapper .custom-banner-arrow img {
		  width: 100%;
		  height: auto;
		}
		.product-carousel {
		  padding: 0px 16px 16px 16px;
		  margin-top: 16px;
		  display: flex;
		  gap: 6px;
		  overflow-x: auto;
		  scroll-snap-type: x mandatory;
		  padding-bottom: 8px;
		}
		.product-card {
		  flex: 0 0 auto;
		  width: 170px;
		  border-radius: 10px;
		  padding: 3px;
		  text-align: left;
		  scroll-snap-align: left;
		  background-color: #fff;
		}
		.product-card img {
		  width: 100%;
		  object-fit: cover;
		  margin-bottom: 5px;
		  max-width: 170px;
		}
		.price {
		  font-size: 14px;
		  margin: 0 0 4px;
		}
		.price .current {
		  color: #f51616;
		  font-weight: bold;
		}
		.price .original {
		  text-decoration: line-through;
		  color: #999;
		  font-size: 12px;
		  margin-left: 4px;
		}
		.title {
		  font-size: 13px;
		  color: #333;
		  margin: 0 0 4px;
		}
		.brand {
		  font-size: 11px;
		  color: #6b6b6b;
		  margin-bottom: 6px;
		}
		.product-card .point-badge {
		  margin-top: 8px;
		  font-size: 13px;
		  color: #f6412e;
		  font-weight: bold;
		  display: inline-block;
		}
		.product-card .point-badge img {
		  width: 18px;
		  height: 18px;
		  vertical-align: middle;
		  margin-right: 2px;
		}
		.product-card .point-badge span {
		  font-size: 14px;
		  vertical-align: top;
		}

		/* 小網調整 精選商品 樣式 */
		@media (max-width: 767px) {
		  .product-slider {
		    margin: 16px;
		  }
		  .product-carousel {
			gap: 3px;
		  }
		  .slider-banner-wrapper {
			padding: 0;
			overflow: hidden;
		  }
		  .product-card {
		    width: 100px;
		  }

		  .slider-banner-wrapper .swiper-wrapper {
			margin-left: 0 !important;
		  }
		  
		  .slider-banner-wrapper .swiper-slide {
			width: 100% !important;
			flex-shrink: 0;
			padding-left: 0px;
			padding-right: 0px;
			box-sizing: border-box;
		  }

		  .slider-banner-wrapper .swiper-slide img {
			width: 100% !important;
			height: auto;
			object-fit: cover;
			display: block;
			border-radius: 10px 10px 0 0;
		  }

		  .slider-banner-wrapper .custom-banner-arrow.left {
			left: 6%;
		  }

		  .slider-banner-wrapper .custom-banner-arrow.right {
			right: 6%;
		  }
		  .slider-header .swiper-slide {
			border-radius: 10px 10px 0 0;
			overflow: hidden;
		  }

		 .slider-header .swiper-slide img {
	 	   width: 100%;
		   height: auto;
		   display: block;
		   object-fit: cover;
		   border-radius: 10px 10px 0 0;
		 }


		}



/* ================= 新增 productauto-slider 區塊 ================= */
.productauto-slider {
  margin-top: 15px;
  overflow: hidden;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.productauto-slider .slider-banner-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
}



.slider-banner-wrapper .slider-header {
  width: 100%;
  margin: 5px auto;
}

.productauto-slider .slider-banner-wrapper .slider-header .swiper-slide {
  max-width: 36%; /* Logo 寬度依需求 */
  margin-left: 20px; /* Logo 左邊間距 */
  border-radius: 0px;
}

.productauto-slider .slider-banner-wrapper .slider-header .swiper-slide img {
  max-width: 36%;
  height: auto;
  display: block;
  border-radius: 0px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}



/* 商品列使用與 product-slider 一致 */
.productauto-slider .product-carousel {
  padding: 0px 16px 16px 16px;
  margin-top: 5px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible; /* ✅ 允許標籤往上超出 */
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.productauto-slider .product-card {
  flex: 0 0 auto;
  width: 170px;
  border-radius: 10px;
  padding: 16px 3px 3px 3px;
  text-align: left;
  scroll-snap-align: left;
  background-color: #fff;
  position: relative;
  overflow: visible; /* ✅ 確保標籤可以超出卡片 */
}

.productauto-slider .product-card img {
  width: 100%;
  object-fit: cover;
  margin-bottom: 5px;
  max-width: 170px;
}

.productauto-slider .price {
  font-size: 14px;
  margin: 0 0 4px;
}

.productauto-slider .price .current {
  color: #f51616;
  font-weight: bold;
}

.productauto-slider .price .original {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  margin-left: 4px;
}

.productauto-slider .title {
  font-size: 13px;
  color: #333;
  margin: 0 0 4px;
}

.productauto-slider .brand {
  font-size: 11px;
  color: #6b6b6b;
  margin-bottom: 6px;
}

.productauto-slider .point-badge {
  margin-top: 8px;
  font-size: 13px;
  color: #f6412e;
  font-weight: bold;
  display: inline-block;
}

.productauto-slider .point-badge img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 2px;
}

.productauto-slider .point-badge span {
  font-size: 14px;
  vertical-align: top;
}

/* ========== 卡片 Tags 樣式 (沿用 brand-card) ========== */
.productauto-slider .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  min-height: 20px;
  margin: 6px 0;
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 5;
}

.productauto-slider .card-tags .tag {
  font-size: 13px;
  padding: 5px 9px;
  color: white;
  border-radius: 12px 12px 12px 0;
  border: 2px solid #fff;
  white-space: nowrap;
  line-height: 1.2;
  z-index: 10;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

/* 小網調整與 product-slider 一致 */
@media (max-width: 767px) {
  .productauto-slider {
    margin: 16px;
  }
  .productauto-slider .product-carousel {
    gap: 3px;
  }
  .productauto-slider .product-card {
    width: 100px;
  }
  .productauto-slider .slider-banner-wrapper img {
    max-width: 120px;
  }
}



/* ================= 全部品牌區塊 ================= */
		/* 全部品牌區塊容器 */
		.all-brands {
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		}
		


		/* 品牌網格排列，非橫向滑動 */
		.all-brands .brand-grid {
		  display: grid;
		  grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
		  gap: 16px; /* 或用固定間距，例如 16px、20px，更穩定 */
		  padding: 17px;
		  background-color: #ffffff;
		  border-radius: 16px;
		  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
		  justify-content: start;
		  justify-items: center;
		}

		/* 品牌卡片樣式重用現有 brand-card */
		.all-brands .brand-card {
		  text-align: left;
		  width: 15.6%;
		}
		
		.all-brands .brand-card img {
		  max-width: 150 px;
		}

		/* 新位置下方置中 */
		.collapse-btn-container {
			width: 100%;
			text-align: right;
		}	
		.collapse-btn-container.below-grid {
		  margin-top: 12px;
		  text-align: center;
		}

		/* 灰字、無框、無底色樣式 */
		.collapse-btn {
		  background: none;
		  border: none;
		  color: #b0b0b0;
		  font-size: 12px;
		  cursor: pointer;
		  padding: 6px 0;
		  transition: color 0.2s ease;
		}
		.collapse-btn:hover {
		  color: #888;
		}
		.brand-grid.full-list {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: flex-start;
		  gap: 12px;
		}
		.brand-grid.full-list.collapsed {
		  display: none !important;
		}
		
		/* 小網調整 全部品牌 樣式 */
		@media (max-width: 767px) {
		  .all-brands {
		    margin: 16px;
		  }
		  .all-brands .brand-grid {
		    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
		    gap: 8px; /* 或用固定間距，例如 16px、20px，更穩定 */
		    justify-items: center;      /* 讓每個項目靠左 */
		    justify-content: start;   /* 整個 grid 靠左 */
		  }
		  .all-brands .brand-card {
		    text-align: left;
		    width: 31%;
		 }

		}




/* ================= 頁腳區塊 ================= */
		.site-footer {
		  background-color: #111;
		  color: #ccc;
		  font-size: 13px;
		  padding: 24px 16px;
		  margin-top: 40px;
		}

		.footer-links {
		  display: flex;
		  flex-direction: row; /* ✅ 強制橫向排列 */
		  justify-content: space-between;
		  flex-wrap: wrap;
		  gap: 8px;
		  margin-bottom: 20px;
		  max-width: 1200px;
		  margin-left: auto;
		  margin-right: auto;
		}
		.footer-column {
		  flex: 1 1 30%;
		  min-width: 100px;
		}


		.footer-column h4 {
		  color: #fff;
		  font-size: 14px;
		  margin-bottom: 8px;
		}

		.footer-column ul {
		  list-style: none;
		  padding: 0;
		  margin: 0;
		}
		.footer-column ul li {
		  margin-bottom: 4px;
		}
		.footer-column ul li a {
		  color: #ccc;
		  text-decoration: none;
		  transition: color 0.2s;
		}
		.footer-column ul li a:hover {
		  color: #fff;
		}

		.footer-bottom {
		  font-size: 12px;
		  text-align: center;
		  color: #888;
		  border-top: 1px solid #333;
		  padding-top: 12px;
		}

		/* 小網調整 頁腳 樣式 */
		@media (max-width: 767px) {
			.footer-links {
			  display: flex;
			  flex-direction: row; /* ✅ 強制橫向排列 */
			  justify-content: space-between;
			  flex-wrap: wrap;
			  gap: 5px;
			  margin-bottom: 20px;
			}
			.footer-column {
			  flex: 1 1 30%;
			  min-width: 100px;
			}
		}


/* ================= 搜尋結果頁 ================= */
		/* 搜尋頁返回按鈕列 */
		.search-header {
		  display: flex;
		  align-items: center;
		  gap: 12px;
		  padding: 16px;
		  background-color: #fff;
		}

		.back-button img {
		  width: 24px;
		  height: 24px;
		}
/* ================= 搜尋結果頁商家列表 ================= */
		.search-merchant-list {
		  max-width: 1200px;
		  margin: 0 auto 24px auto;
		  padding: 0 16px;
		  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
		  background-color: #fff;
		  border-radius: 10px;
		  border: 1px solid #eee;
		}

		.search-merchant-card {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  padding: 12px;
		  border-bottom: 1px solid #eee;
		  margin-bottom: 12px;
		  
		}

		.search-merchant-card img {
		  width: 64px;
		  height: 64px;
		  object-fit: contain;
		  border-radius: 8px;
		  flex-shrink: 0;
		}

		.search-merchant-card .merchant-info {
		  flex: 1;
		  padding-left: 16px;
		}

		.search-merchant-card .merchant-name {
		  font-size: 14px;
		  font-weight: bold;
		  color: #333;
		  margin: 0 0 4px;
		}

		.search-merchant-card .merchant-desc {
		  font-size: 13px;
		  color: #666;
		  margin: 0;
		}

		.search-merchant-card .point-badge {
		  font-size: 14px;
		  font-weight: bold;
		  color: #f6412e;
		  display: flex;
		  align-items: center;
		  white-space: nowrap;
		}

		.search-merchant-card .point-badge img {
		  width: 18px;
		  height: 18px;
		  margin-right: 4px;
		}
		
		.search-merchant-card .point-badge span {
		  color: #e85d04;
		  text-decoration:none;
		}
		
		.search-merchant-card {
		  position: relative;
		}
		
		/* 商品圖片加上品牌 logo */
		.product-card .product-image-container {
		  position: relative;
		}

		.product-image-container .brand-product img {
		  display: block;
		  width: 100%;
		  height: auto;
		  border-radius: 8px;
		}

		.product-image-container .brand-logo {
		  position: absolute;
		  bottom: -7%;
		  left: 65%;
		  width: 30%;
		  background-color: #fff;
		  padding: 4px;
		  border-radius: 6px;
		  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
		  object-fit: contain;
		}
		
		.product-image-container.brand-logo img {
		  width: 10%;
		}


		/* 商家標籤 */
		.search-merchant-tag {
		  position: absolute;
		  top: -8px;
		  left: 0;
		  font-size: 11px;
		  padding: 5px 9px;
		  color: #fff;
		  border-radius: 12px 12px 12px 0;
		  border: 2px solid #fff;
		  z-index: 2;
		  font-weight: bold;
		  white-space: nowrap;
		  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.08);
		}

		
		.search-product-slider {
		  max-width: 1200px;
		  margin: 0 auto 24px auto;
		  padding: 0 16px;
		  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
		  background-color: #fff;
		  border-radius: 10px;
		  border: 1px solid #eee;
		}

		.search-product-carousel {
		  padding: 0px 0px 0px 0px;
		  margin-top: 16px;
		  display: flex;
		  gap: 3px;
		  overflow-x: auto;
		  scroll-snap-type: x mandatory;
		  padding-bottom: 8px;
		}

		/* 小網調整 搜尋結果店家 樣式 */
		@media (max-width: 767px) {
			.search-merchant-list {
				margin: 16px;
			}
			.search-product-slider {
				margin: 16px;
			}
		  .search-merchant-card {
		    gap: 6px;		  
		  }
		}


/* ================= Lightbox 搜尋樣式 ================= */
		.search-lightbox-overlay {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.65);
		  z-index: 999;
		  display: none;
		  justify-content: center;
		  align-items: flex-start;
		  padding-top: 10vh;
		}

		.search-lightbox-content {
		  background-color: #fff;
		  width: 90%;
		  max-width: 500px;
		  height: 60%;
		  border-radius: 16px;
		  padding: 60px 20px 20px 20px;
		  overflow-y: auto;
		  position: relative;
		  margin-left: auto;
		  margin-right: auto;
		}

		.search-lightbox-header {
		  position: relative;
		}

		.search-lightbox-input {
		  width: 100%;
		  padding: 10px 40px 10px 16px;
		  border-radius: 20px;
		  border: 1px solid #ccc;
		  font-size: 14px;
		  z-index: 1;
		}

		.search-lightbox-icon {
		  position: absolute;
		  right: 16px;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 20px;
		  height: 20px;
		}

		.search-lightbox-close {
		  position: absolute;
		  top: -60px;
		  right: -8px;
		  font-size: 28px;
		  color: #999;
		  cursor: pointer;
		  background-color: #fff;
		  border-radius: 50%;
		  padding: 4px 12px;
		  font-weight: bold;
		  z-index: 1;
		}

		.search-lightbox-body {
		  margin-top: 20px;
		}

		.search-section {
		  margin-bottom: 20px;
		}

		.search-section-header {
		  font-size: 14px;
		  font-weight: bold;
		  margin-bottom: 10px;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		}

		.search-clear-btn {
		  background: none;
		  border: none;
		  padding: 0;
		  cursor: pointer;
		}

		.search-clear-btn img {
		  width: 18px;
		  height: 18px;
		}

		.search-tags {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 8px;
		}

		.search-tag {
		  padding: 6px 12px;
		  font-size: 13px;
		  border: 1px solid #a58efb;
		  color: #7a4de6;
		  border-radius: 20px;
		  white-space: nowrap;
		}
		
		.search-tag a{
		  text-decoration:none;
		  color: #7a4de6;
		}


/* ================= Go Top 按鈕 ================= */
		.go-top-button {
		  position: fixed;
		  bottom: 40px;
		  right: 20px;
		  z-index: 998;
		  background-color: rgba(255,255,255,0.45);
		  border: 1px solid #E0E0E0;
		  border-radius: 50%;
		  padding: 4px 3px 2px 3px;
		  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
		  display: none;
		  cursor: pointer;
		  transition: opacity 0.3s ease;
		}

		.go-top-button img {
		  width: 24px;
		  height: 24px;
		}


/* ================= 光箱語法 ================= */		
.custom-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.custom-lightbox.show {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #fff;
  color: #333;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}