/* ===== 手機選單面板：白底深色文字 ===== */
.site-nav-mobile__panel {
  background: var(--white);
}

.site-nav-mobile__panel-title,
.site-nav-mobile__nav-link,
.site-nav-mobile__back-btn,
.site-nav-mobile__nav-arrow {
  color: var(--gray-900);
}

.site-nav-mobile__nav-link:hover {
  color: var(--brand-1);
  background-color: var(--gray-100);
}

.site-nav-mobile__close {
  background-color: var(--gray-500);
}

/* ===== Banner 不限制高度 ===== */
.site-banner-image {
  height: auto;
}

/* ===== 產品詳細頁英文副標色 ===== */
.product-detail__info-subtitle {
  color: var(--gray-500);
}

/* ===== 頁面標題左中文右英文 ===== */
.site-page-header {
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  text-align: left;
}

.site-page-header__title {
  order: 1;
}

.site-page-header__subtitle {
  order: 2;
  color: inherit;
}

/* ===== 麵包屑置右 ===== */
.site-breadcrumb__list {
  justify-content: flex-end;
}

/* ===== Hero Banner 文案深色、移除遮罩 ===== */
.home-hero__header {
  color: var(--gray-900);
}

.home-hero__title {
  color: var(--brand-1);
}

.home-hero__swiper .swiper-slide::after {
  display: none;
}

/* ===== Hero Banner 分頁圓點 ===== */
.home-hero__swiper .home-hero__pagination {
  display: block;
}

/* ===== 頁底導覽連結 2欄等寬 ===== */
.site-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--gap-1);
}

/* ===== 頁底導覽列強制 grid ===== */
.site-footer__navbar.site-col-layout {
  display: grid;
}

/* ===== 頁底資訊欄 label 寬度覆寫 ===== */
.site-footer__info-label {
  width: auto;
  min-width: 0;
}

/* ===== 頁底 Copyright 對齊底部 ===== */
.site-footer__body .site-footer__copyright-text {
  align-self: end;
}

/* ===== 頁底 Logo 寬度覆寫 ===== */
.site-footer__logo {
  max-width: 300px;
}

/* ===== 頁底背景色 & 內距 ===== */
.site-footer {
  background-color: var(--brand-2);
  padding: 60px 0;
}

@media (max-width: 767.98px) {
  .site-footer {
    padding: 30px 0;
  }
}

/* ===== 導覽列電話按鈕 ===== */
.site-nav__phone-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background-color: var(--brand-1);
  border: 1px solid var(--brand-1);
  border-radius: var(--border-radius-pill, 9999px);
  font-size: var(--fs-fixed-xs, 0.8rem);
  font-weight: var(--fw-medium, 500);
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* ===== Logo 寬度覆寫 ===== */
.site-brand img {
  width: 240px;
}

@media (max-width: 1199.98px) {
  .site-brand img {
    width: 180px;
  }
}

/* ===== 背景圖 ===== */
.site-page-bg {
  background-image: url("/images/shared/background.png");
}

/* ===== 網站地圖頁：5 欄響應式 Grid ===== */
.site-sitemap-grid {
  display: grid;
  gap: var(--gap-6);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .site-sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .site-sitemap-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .site-sitemap-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.site-sitemap-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.site-sitemap-col__heading {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--brand-2);
  color: var(--white);
  font-size: var(--font-size-body);
  font-weight: var(--fw-semibold);
  text-align: center;
  transition: background-color 0.2s ease;
}

.site-sitemap-col__heading:hover {
  background-color: var(--brand-2-hover);
  color: var(--white);
}

.site-sitemap-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.site-sitemap-col__link {
  display: block;
  font-size: var(--font-size-body);
  color: var(--gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-sitemap-col__link:hover {
  color: var(--brand-2);
}

/* ===== 聯絡我們頁：表單背景色移除 ===== */
.site-contact__form {
  background-color: transparent;
  padding: 0;
}

/* ===== 送出按鈕通用（移除外匡線、icon 在左）===== */
.site-btn-arrow {
  border-color: transparent;
  gap: 12px;
  padding: 8px 14px;
  font-size: var(--font-size-body);
}

.site-btn-arrow:hover {
  border-color: transparent;
}

.site-btn-arrow__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius);
  border-bottom-right-radius: 0;
  font-size: 1.25em;
}

.site-btn-arrow__icon iconify-icon {
  transition: transform 0.3s ease;
}

.site-btn-arrow:hover .site-btn-arrow__icon iconify-icon {
  transform: rotate(90deg);
}

.site-contact__desc {
  margin-bottom: var(--gap-2);
}

.site-contact__required-note {
  margin-bottom: var(--gap-6);
  margin-top: var(--gap-6);
}

/* ===== 營運項目頁卡片（business.html）===== */
.business-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.business-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.business-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.3s ease;
}

.business-card:hover .business-card__image::after {
  background-color: rgba(0, 0, 0, 0.15);
}

.business-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.business-card:hover .business-card__img {
  transform: scale(1.05);
}

.business-card__body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  background-color: #d5ecff;
}

.business-card--accent .business-card__body {
  background-color: #d5e18a;
}

.business-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.business-card__icon {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--brand-1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.business-card__title {
  font-size: var(--font-size-subheading, 1.25rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--gray-900);
  margin: 0;
}

.business-card__text {
  font-size: var(--font-size-body, 1rem);
  color: var(--gray-700);
  line-height: 1.7;
  margin: 0;
  padding-left: 36px;
}

/* ===== 主要產品頁：圓形卡片（product_category_index.html）===== */
.product-circle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-5);
}

.product-circle-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-5);
  text-decoration: none;
  color: inherit;
}

.product-circle-card__image {
  position: relative;
  width: min(280px, 80vw);
  height: min(280px, 80vw);
  border-radius: 9999px;
  padding: 10px;
  flex-shrink: 0;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}

/* 遮罩層 */
.product-circle-card__image::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 箭頭層：從右側滑入，停在圓心（translateX(-50%) 讓尖端對齊中心） */
.product-circle-card__image::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(60%, -50%);
  width: 30%;
  height: 23%;
  background-image: url("/public/images/product/product-arrow-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.product-circle-card__link:hover .product-circle-card__image::after {
  opacity: 1;
}

.product-circle-card__link:hover .product-circle-card__image::before {
  opacity: 1;
  transform: translate(0%, -50%);
}

/* 各卡片漸層邊框（從上到下） */
.product-circle-card__image--1 {
  background: linear-gradient(to bottom, #d5ecff, #ffffff);
}
.product-circle-card__image--2 {
  background: linear-gradient(to bottom, #fff7ad, #ffffff);
}
.product-circle-card__image--3 {
  background: linear-gradient(to bottom, #d5e18a, #ffffff);
}
.product-circle-card__image--4 {
  background: linear-gradient(to bottom, #f6d1ab, #ffffff);
}

.product-circle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
  display: block;
}

.product-circle-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
}

.product-circle-card__title {
  font-size: var(--font-size-subheading);
  font-weight: var(--fw-bold);
  color: var(--brand-1);
  margin: 0;
}

.product-circle-card__en {
  font-size: var(--font-size-caption);
  color: var(--gray-500);
  margin: 0;
}

.product-circle-card__desc {
  font-size: var(--font-size-body);
  color: var(--gray-800);
  line-height: 1.7;
  margin: 0;
  max-width: 340px;
}

/* ==================== 關於我們頁錨點滑動 ==================== */
html {
  scroll-behavior: smooth;
}

.about-anchor-section[id] {
  scroll-margin-top: 80px;
}

/* ===== 首頁區塊標題：並排置中 ===== */
.home-section-header {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
}

.home-section-header .site-section-label {
  color: var(--color-text-heading);
}

/* ===== 首頁關於我們內文取消內距 ===== */
.home-about__body {
  padding-left: 0;
}

/* ===== 首頁關於我們標題品牌色 ===== */
.home-about .site-section-title {
  color: var(--brand-1);
}

/* ===== 首頁主要產品區塊 ===== */
.home-product-cards .product-circle-card__image {
  width: min(200px, 70vw);
  height: min(200px, 70vw);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-product-cards .product-circle-card__image {
    width: min(220px, 40vw);
    height: min(220px, 40vw);
  }
}

@media (min-width: 1200px) {
  .home-product-cards .product-circle-card__image {
    width: min(220px, 16vw);
    height: min(220px, 16vw);
  }
}

/* ===== 導覽列 hover：移除灰底、文字品牌色 ===== */
.site-nav__link:hover {
  background-color: transparent;
  color: var(--brand-1);
}

/* ===== 頁底選單 hover：移除底色、文字變淺灰 ===== */
.site-footer__nav-link:hover {
  background-color: transparent;
  color: var(--gray-200);
}

/* ===== 浮動選單：取消手機版底部列，統一右側固定 ===== */
.site-float-menu {
  position: fixed;
  right: 15px;
  top: auto;
  left: auto;
  bottom: 100px;
  width: auto;
  transform: none;
}

.site-float-menu__list {
  flex-direction: column;
  background-color: transparent;
  box-shadow: none;
}

.site-float-menu__item {
  flex: none;
  width: auto;
  height: auto;
  border-right: none;
}

.site-float-menu__link {
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  border: none;
  border-radius: 9999px;
  background-color: var(--brand-1);
  color: var(--white);
}

.site-float-menu__link:hover {
  background-color: var(--brand-1-hover, var(--brand-2));
  color: var(--white);
}

.site-float-menu.is-visible ~ .site-footer {
  margin-bottom: 0;
}

/* ===== 產品詳情頁主圖輪播：移除背景色 ===== */
#product-main-swiper {
  background-color: transparent;
}