/* 佳禾製茶廠品牌主題：鼠尾草綠、米白與深茶綠 */
:root {
  --jh-sage: #71836f;
  --jh-sage-dark: #526754;
  --jh-tea: #315b43;
  --jh-tea-deep: #244533;
  --jh-cream: #f8fbf0;
  --jh-paper: #fffdf8;
  --jh-line: #dce6d4;
  --jh-accent: #9c2f82;
}
html, body, #wrapper, #main, section { background-color:#f8fbf0 !important; }
.shop-item, .product-item { background-color:#f8fbf0 !important; }

html, body { background: #f8fbf0 !important; color: #405246; }
body { background-image: none !important; }

/* 測試站預載入層會因部分遠端資源未回應而停留，避免遮住整個頁面 */
#preloader { display: none !important; opacity: 0 !important; visibility: hidden !important; }

#header, header, .navbar, #topBar, .topBar {
  background-color: var(--jh-cream) !important;
  border-color: var(--jh-line) !important;
}
#topBar, .top-bar, .top-header {
  background: var(--jh-sage) !important;
  color: #fff !important;
}
#topBar.dark {
  background: var(--jh-sage) !important;
  color: #fff !important;
}
#topBar a, .top-bar a, .top-header a { color: #fff !important; }
#topBar.dark .top-links > li > a {
  color: #fff !important;
}
#topBar.dark .top-links > li > a:hover,
#topBar.dark .top-links > li > a:focus {
  color: #f3d3e9 !important;
}

#header, #topNav {
  background: var(--jh-cream) !important;
}
#topMain.nav-pills > li > a {
  color: var(--jh-tea) !important;
}

.navbar-nav > li > a, .nav > li > a, .main-menu a {
  color: var(--jh-tea) !important;
}
.navbar-nav > li > a:hover, .nav > li > a:hover, .main-menu a:hover,
.navbar-nav > li.active > a, .nav > li.active > a {
  color: var(--jh-accent) !important;
  background-color: #eef5e8 !important;
}

/* Logo 紫色作為品牌重點色，少量用於互動與提示 */
#topMain.nav-pills > li.active > a,
#topMain.nav-pills > li:hover > a,
#topMain.nav-pills > li:focus > a {
  color: var(--jh-accent) !important;
  box-shadow: inset 0 -3px 0 var(--jh-accent);
}
.badge, .cart-count, .shop-cart-count, .nav-cart-count {
  background-color: var(--jh-accent) !important;
}
.section-title:before, .heading-title:before, .product-category-title:before {
  border-left-color: var(--jh-accent) !important;
}
.wishlist.active, .wishlist:hover, .fa-heart:hover, .product-item .fa-heart:hover {
  color: var(--jh-accent) !important;
}

/* 會員中心下拉選單 */
#header ul.header-buttons > li > .dropdown-menu,
#topNav ul.dropdown-menu {
  background: var(--jh-tea-deep) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(36, 69, 51, .28) !important;
}
#header ul.header-buttons > li > .dropdown-menu > a,
#topNav ul.dropdown-menu > li > a {
  color: #f7fbf1 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(232, 241, 223, .22) !important;
}
#header ul.header-buttons > li > .dropdown-menu > a:hover,
#header ul.header-buttons > li > .dropdown-menu > a.active,
#topNav ul.dropdown-menu > li > a:hover,
#topNav ul.dropdown-menu > li.active > a {
  color: #fff !important;
  background: var(--jh-sage-dark) !important;
}
#header ul.header-buttons > li > .dropdown-menu > a.dropdown-item.dropdown-custom-icon > i,
#header ul.header-buttons > li > .dropdown-menu > a.dropdown-item:before {
  color: #d8b879 !important;
}
#header ul.header-buttons > li > .dropdown-menu > a.dropdown-myaccount-logout {
  color: #fff !important;
  background: var(--jh-sage-dark) !important;
  border-bottom: 0 !important;
}

a { color: var(--jh-tea); }
a:hover, a:focus { color: var(--jh-accent); }
h1, h2, h3, h4, h5, h6, .section-title, .heading-title {
  color: var(--jh-tea-deep);
}
h1, h2, h3, h4, h5, h6 {
  background-color: transparent !important;
}
div.heading-title h1 span, div.heading-title h2 span, div.heading-title h3 span,
div.heading-title h4 span, div.heading-title h5 span, div.heading-title h6 span {
  background: transparent !important;
}
.btn-primary, .btn-success, .btn-theme, button.btn-primary {
  background-color: var(--jh-sage-dark) !important;
  border-color: var(--jh-sage-dark) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-theme:hover, button.btn-primary:hover {
  background-color: var(--jh-tea) !important;
  border-color: var(--jh-tea) !important;
}
.shop-item-buttons .addCartSimple,
.shop-item-buttons .btn-brown,
button.addCartSimple {
  background: #71836f !important;
  border-color: #71836f !important;
  color: #fff !important;
}
.shop-item-buttons .addCartSimple:hover,
.shop-item-buttons .btn-brown:hover,
button.addCartSimple:hover {
  background: var(--jh-accent) !important;
  border-color: var(--jh-accent) !important;
  color: #fff !important;
}
.price, .product-price, .product-item .price, .shop-item .price {
  color: var(--jh-accent) !important;
}
.alert-mini.alert-primary {
  background: var(--jh-accent) !important;
  border-color: var(--jh-accent) !important;
  color: #fff !important;
}
.alert-mini.alert-primary strong,
.alert-mini.alert-primary a,
.alert-mini.alert-primary i {
  color: #fff !important;
}
.product-item, .shop-item, .panel, .well, .content-box {
  border-color: var(--jh-line);
  background-color: rgba(255,255,255,.82);
}
.shop-item .thumbnail,
.shop-item .ProductImgBox,
.shop-item .ProductImg,
.shop-item .white-bg,
.product-item .thumbnail,
.product-item .ProductImgBox,
.product-item .ProductImg,
.product-item .white-bg {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.shop-item .thumbnail,
.product-item .thumbnail { padding: 0 !important; }
.featured .shop-item .thumbnail,
.featured .shop-item .thumbnail img,
.product-item .thumbnail { border-radius:12px; overflow:hidden; }
body.home-page #wrapper { background-color: #f8fbf0 !important; }
body.home-page #wrapper > section { background-color: transparent !important; }
.featured .shop-item { display:flex; flex-direction:column; height:100%; }
.featured .shop-item-summary { display:flex; flex-direction:column; flex:1 1 auto; }
.featured .shop-item-summary h2 { height:3.2em; margin:0 0 8px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.6; }
.featured .shop-item-buttons { margin-top:auto; padding-top:10px; }
.featured .shop-item-buttons .btn { width:80%; min-height:48px; margin-left:auto; margin-right:auto; }
.content-slider-with-thumbs .overlay-container { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.content-slider-with-thumbs .overlay-container > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.content-slider-thumbs .owl-nav-thumb { aspect-ratio: 1 / 1; overflow: hidden; }
.content-slider-thumbs .owl-nav-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  background: var(--jh-sage-dark) !important;
}

#footer, footer, .footer {
  background: var(--jh-sage) !important;
  color: #f4f8ef !important;
  border-top: 5px solid var(--jh-sage-dark);
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  color: #fff !important;
}
#footer a, footer a, .footer a { color: #eef6e7 !important; }
#footer a:hover, footer a:hover, .footer a:hover { color: #fff !important; }
#footer .copyright, footer .copyright, .footer .copyright {
  background: var(--jh-sage-dark) !important;
  color: #e8f1df !important;
}
#footer .copyright a, footer .copyright a, .footer .copyright a { color: #fff !important; }

@media (max-width: 767px) {
  .navbar-collapse, .mobile-menu, .main-menu { background: var(--jh-cream) !important; }
  .navbar-toggle { background: var(--jh-sage-dark) !important; border-color: var(--jh-sage-dark) !important; }
}
.home-promo-layout{display:flex;gap:16px;align-items:stretch;min-width:0;overflow:hidden}
.home-promo-main{flex:1.7 1 0;width:0;min-width:0;overflow:hidden}
.home-promo-main,.home-promo-main .owl-carousel,.home-promo-main .owl-wrapper-outer,.home-promo-main .owl-item,.home-promo-main .owl-item>a{height:100%;min-width:0;max-width:100%}
.home-promo-main .owl-item>a{display:block;overflow:hidden;border-radius:14px;background:#eee}
.home-hero-video{position:relative;width:100%;height:auto;aspect-ratio:1.72/1;min-height:0;overflow:hidden;border-radius:14px;background:#000}
.home-hero-video iframe{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;min-height:0;border:0}
.home-hero-video-link{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:var(--jh-accent);color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important;box-shadow:0 3px 12px rgba(0,0,0,.38);transition:background .2s ease,transform .2s ease}
.home-hero-video-link:hover,.home-hero-video-link:focus{background:var(--jh-accent);color:#fff!important;transform:translateY(-1px)}
.home-hero-video-link.is-unset{background:rgba(36,69,51,.94);cursor:default}
.home-promo-main .owl-item img{display:block;width:100%;max-width:100%;height:100%;min-height:0;object-fit:cover;object-position:center}
.home-promo-main .owl-carousel,.home-promo-main .owl-wrapper-outer{width:100%!important;max-width:100%!important;overflow:hidden}
.home-promo-grid{flex:1 1 0;width:0;display:grid;grid-template-columns:1fr;grid-template-rows:none;align-content:start;gap:16px;min-width:0;min-height:0;height:auto;overflow:hidden}
.home-promo-card{display:block;position:relative;overflow:hidden;aspect-ratio:auto;margin:0!important;border-radius:12px;background:#eee;box-shadow:0 8px 22px rgba(35,52,42,.10)}
.home-promo-card img{display:block;width:100%;height:100%;margin:0!important;padding:0!important;object-fit:cover;object-position:center;transition:transform .45s ease}
.home-promo-card:hover img{transform:scale(1.06)}
.home-promo-card-shade{position:absolute;inset:auto 0 0;padding:28px 14px 13px;color:#fff;font-size:14px;background:linear-gradient(transparent,rgba(27,48,39,.72));display:flex;justify-content:space-between;align-items:end;opacity:0;transition:opacity .3s ease}
.home-promo-card:hover .home-promo-card-shade{opacity:1}
.home-promo-hidden{display:none!important}
@media (min-width:992px){.home-promo-layout{align-items:stretch}.home-promo-main{aspect-ratio:auto;height:auto;min-height:0;align-self:stretch}.home-promo-main .owl-carousel{height:100%;min-height:0}.home-promo-grid{height:auto;min-height:0}.home-promo-card{aspect-ratio:2.1/1}}
@media (max-width:767px){.footer-news{display:none!important}}
@media (max-width:1199px){.home-promo-grid{align-content:stretch}.home-promo-card{aspect-ratio:auto}}
@media (min-width:768px) and (max-width:1199px){.home-promo-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:stretch}.home-promo-main{width:auto;aspect-ratio:auto;align-self:stretch}.home-promo-main .owl-carousel,.home-promo-main .owl-wrapper-outer,.home-promo-main .owl-item{height:100%!important}.home-hero-video{aspect-ratio:16/9}.home-promo-grid{width:auto;height:auto!important;aspect-ratio:1.147/1;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}.home-promo-card{aspect-ratio:auto}.home-promo-card-shade{padding:24px 10px 10px;font-size:12px}}
@media (max-width:767px){.home-promo-layout{display:block;overflow:visible}.home-promo-main{width:100%;height:auto}.home-promo-grid{width:100%;height:auto}}
@media (max-width:767px){.home-promo-section{margin-top:10px!important;padding-bottom:18px!important}.home-promo-main,.home-promo-main .owl-carousel,.home-promo-main .owl-wrapper-outer,.home-promo-main .owl-item,.home-promo-main .owl-item>a{height:auto!important}.home-promo-main .owl-item>a{border-radius:10px}.home-promo-main .owl-item img{display:block;height:auto;min-height:0;aspect-ratio:16/9;object-fit:cover}.home-hero-video{aspect-ratio:16/9;min-height:0;border-radius:10px}.home-promo-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto;margin-top:16px}.home-promo-card:nth-child(n+3){display:none}.home-promo-card{min-height:0;aspect-ratio:2.2/1;border-radius:9px}.home-promo-card img{display:block;min-height:0;height:100%}.home-promo-card-shade{display:none}}