/* 在 Shopline 原主題之上的調整：蝦皮按鈕、手機選單、商品圖庫 */

/* 原站後台的自訂 CSS（頁首梅花底圖、選單白字） */
body { font-family: 'Noto Sans TC', '微軟正黑體', sans-serif !important; }
.navbar-wrapper {
  position: relative;
  padding-bottom: 4rem;
  background-color: #ea5442;
  background-image: url('img/5d8c661d50f87f003299ab44.gif');
}
.navbar-menu ul li a,
.navbar-menu ul li a:hover { color: #ffffff; }
.navbar { border-bottom: 1px solid #d2d2d2; }
.body-content { margin-bottom: 0; }

/* 蝦皮按鈕（取代原本右上角的會員／購物車） */
.shopee-top { position: absolute; top: 14px; right: 16px; z-index: 20; }
.shopee-top-btn {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  background: #fff; color: #ee4d2d !important; font-weight: 700; font-size: 14px;
  text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.shopee-top-btn:hover { background: #fff3ef; }
.btn-shopee {
  background: #ee4d2d !important; border-color: #ee4d2d !important;
  color: #fff !important; text-decoration: none !important;
}
.btn-shopee:hover { background: #d73211 !important; border-color: #d73211 !important; }
.btn-block-lg { display: block; width: 100%; max-width: 380px; padding: 14px 28px; font-size: 18px; }
.buy-note { margin: 12px 0 20px; font-size: 13px; }
.shop-note { margin-bottom: 20px; }

/* 手機版頁首 */
.mobile-navbar { background: transparent; }
.mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px; }
.mobile-logo { height: 84px; width: auto; }
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 9px; background: none; border: 0;
}
.menu-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.mobile-menu { display: none; background: #fff; }
.nav-open .mobile-menu { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0 16px; }
.mobile-menu li a { display: block; padding: 12px 0; border-bottom: 1px solid #eee; color: #333; }
.mobile-menu .nav-dropdown-menu { padding-left: 16px; }
.mobile-menu .caret { display: none; }

/* 商品頁圖庫（原本是 Shopline 的 JS 元件） */
.product-gallery-main img { width: 100%; height: auto; }
.product-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 20px; }
.product-gallery-thumbs button {
  width: 72px; height: 72px; padding: 0; background: #fff;
  border: 2px solid transparent; overflow: hidden;
}
.product-gallery-thumbs button.on { border-color: #ea5442; }
.product-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 說明圖片維持原站寬度 */
.description-container img, .detail-media-container img { max-width: min(720px, 100%); margin: 0 auto; height: auto !important; }
.description-container, .detail-media-container { overflow-wrap: anywhere; }

.privacy h2 { font-size: 20px; margin-top: 28px; }
.sticky-buy { display: none; }

@media (max-width: 767px) {
  .shopee-top { top: 10px; right: 12px; }
  .shopee-top-btn { padding: 6px 14px; font-size: 13px; }
  .product-detail-container { padding-bottom: 76px; }
  .sticky-buy {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid #eee;
  }
  .sticky-buy .btn { display: block; width: 100%; }
}