/*
 * 這是網站的自定義 CSS 檔案。
 * 用於覆寫主題（theme.css）或其他函式庫（如 slick.css）的預設樣式。
 */

/* =========================================================================
   I. 全域字體設定
   ========================================================================= */

.kalisa-serif {
    /* 使用 Google Fonts 的 'Noto Serif TC' 作為襯線字體 */
    font-family: 'Noto Serif TC', serif !important;
    letter-spacing: 1px; /* 增加字距，看起來更優雅 */
}

h2, .h2, h1, .h1 {
  font-weight: 500;  
}

.short-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .homeBanner .banner-01 img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}

.product-description img,
.tab-content img,
.product-tabs img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}




.megamenu-shop-banner .card-img {
    width: 300px !important;
    height: auto !important;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* 密碼強度條外觀 */
.password-strength-meter {
    height: 6px;              /* 可以再調小／調大 */
    background-color: #f1f1f1;
    border-radius: 999px;
    overflow: hidden;
}

/* 預設進度條樣式 */
.password-strength-meter .progress-bar {
    transition: width 0.25s ease;
}

/* 弱：紅色 */
.password-strength-meter .progress-bar.strength-weak {
    background-color: #dc3545;  /* Bootstrap danger 紅 */
}

/* 中：橘色 */
.password-strength-meter .progress-bar.strength-medium {
    background-color: #fd7e14;  /* Bootstrap orange */
}

/* 強：綠色 */
.password-strength-meter .progress-bar.strength-strong {
    background-color: #28a745;  /* Bootstrap success 綠 */
}

//首頁用到
.kalisa-img-box {
    width: 100%;
    aspect-ratio: 4 / 5;   /* 固定比例 */
    overflow: hidden;
    border-radius: 16px;
    background: #fdf1ed;
}

.kalisa-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 會員中心左側選單外框高度：至少跟畫面一樣高 */
.member-sidebar {
    min-height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* 每一行選單的基本樣式 */
.member-sidebar .list-group-item {
    background-color: transparent;
}

/* 主項目與子項目都吃同一個連結樣式 */
/* 第一層主選單連結：略微往左，層級差異更明顯 */
.member-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1rem;        /* 原本是 0.85rem 1.25rem */
    border-radius: 0.5rem;
    transition: background-color .2s ease, color .2s ease;
}

/* icon 固定寬度，文字對齊好看 */
.member-sidebar .sidebar-item-icon {
    width: 40px;
    text-align: center;
}

/* 子選單縮排、小一點字 */
.member-sidebar .sub-menu .sidebar-link {
    padding-left: 2.5rem;
    font-size: 0.875rem;
}

/* hover / active 灰底效果 */
.member-sidebar .sidebar-link:hover,
.member-sidebar .sidebar-link.active {
    background-color: #f3f3f3;   /* 灰色底 */
    color: #111111;
}

/* 讓 active 狀態的 icon 也一併變色（可選） */
.member-sidebar .sidebar-link.active .sidebar-item-icon,
.member-sidebar .sidebar-link:hover .sidebar-item-icon {
    color: #111111;
}
/* 子選單整組再往右一階 */
.member-sidebar .sub-menu {
    padding-left: 2.4rem;         /* 原本 1.75rem，整個區塊往右 */
    margin-top: 0.25rem;
}

/* 子選單每一項 */
.member-sidebar .sub-menu .sidebar-item {
    margin-bottom: 0.25rem;
}

/* 子選單連結本身再多縮一點，文字與圓點距離更舒服 */
.member-sidebar .sub-menu .sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    padding-left: 2.2rem;         /* 原本 1.5rem */
    font-size: 14px;
    color: #555;
    border-radius: 0.4rem;
    position: relative;
}

/* 灰色小圓點的位置也一起往右帶 */
.member-sidebar .sub-menu .sidebar-link::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #b8b8b8;
    border-radius: 50%;
    position: absolute;
    left: 0.9rem;                 /* 原本 0.5rem */
}

/* hover */
.member-sidebar .sub-menu .sidebar-link:hover,
.member-sidebar .sub-menu .sidebar-link.active {
    background-color: #f3f3f3;
    color: #111;
}

.member-dashboard .member-hero {
    background: linear-gradient(135deg, #fff7f5, #f8ece8);
}

.member-level-badge {
    background-color: #f3d9c6;
    color: #5c4a3c;
    font-size: 13px;
}

:root[data-bs-theme="dark"] .member-dashboard .member-hero {
    background: linear-gradient(
        135deg,
        #2b2421,
        #3a2f2b
    );
}

:root[data-bs-theme="dark"] .member-level-badge {
    background-color: #4a3a32;
    color: #f3e8df;
    font-size: 13px;
}

.member-stat-card:hover,
.member-shortcut-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    transform: translateY(-2px);
    transition: all .2s ease;
}

.member-order-table tbody tr:hover {
    background-color: #faf5f2;
}

.member-shortcut-icon {
    font-size: 18px;
    line-height: 1;
}

/*=====會員選單 dropdown 本體=====*/
.member-nav {
    position: relative; /* 再寫一次也沒關係，確保有生效 */
}
/* 會員 dropdown：浮在 ICON 下方，不要撐開版面 */
.member-nav .member-dropdown {
    position: absolute;
    top: 100%;           /* 貼在 ICON 容器底邊 */
    right: 0;            /* 靠右對齊 ICON */
    margin-top: 6px;     /* 和 ICON 留一點距離 */
    z-index: 1050;       /* 比 header 其他元素高，避免被蓋住 */

    display: none;       /* 預設隱藏，交給 JS 控制顯示 */

    font-size: 0.875rem;
    min-width: 180px;
    padding: 0.5rem 0;
    background-color: var(--bs-body-bg);
    border: 1px solid #eee;
    border-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* 每個選項 */
.member-nav .member-dropdown .dropdown-item {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.35rem 1rem;
    white-space: nowrap;
}

.member-nav .member-dropdown .dropdown-divider {
    margin: 0.35rem 0;
}
/*=====//END 會員選單 dropdown 本體=====*/





/* =========================================================================
   II. Hero Banner A 區設定（覆蓋 theme.css - 解決高度和縮放問題）
   ========================================================================= */

/* 確保 Slick Slider 容器是相對定位，以便內部元素絕對定位 */
.hero-header-01 {
    position: relative;
    z-index: 10;
}

/* 1. 解決高度為 1px 的問題：移除 .vh-100，改用 aspect-ratio 定義高度 */
/* 這個規則用於定義單一 Banner Slide 的尺寸。 */
.hero-header-01 .hero-slide { /* <--- 選取器已修正 */
    position: relative;
    height: auto !important;              /* **覆蓋原本的高度，讓 aspect-ratio 生效** */
    aspect-ratio: 1920 / 770;             /* 使用固定的長寬比 (寬 / 高) */
    overflow: hidden;                     /* 確保內容溢出時被裁切，解決縮放爆版 */
}



/* 3. 背景圖鋪滿整個 slide 區塊：同樣移除 .vh-100 */
.hero-header-01 .hero-slide .lazy-bg { /* <--- 選取器已修正 */
    position: absolute;
    inset: 0;                             /* top, right, bottom, left 皆為 0 (全鋪滿) */
    width: 100%;
    height: 100%;
    background-size: cover;               /* 確保背景圖覆蓋整個容器 */
    background-position: center center;   /* 圖片居中顯示 */
}

/* =========================================================================
   III. 響應式圖片切換邏輯 (PC/Mobile)
   ========================================================================= */

/* PC / Mobile 只管尺寸切換，不動 light/dark 邏輯 */
.hero-header-01 .pc-img,
.hero-header-01 .mobile-img {
    /* 預設隱藏所有切換圖片，再依媒體查詢顯示 */
    display: none;
}

/* 1. 桌機版（含大螢幕筆電）：寬度 >= 769px 顯示 PC 圖 */
@media (min-width: 769px) {
    .hero-header-01 .pc-img {
        display: block;
    }
}

/* 2. 手機與小平板：寬度 <= 768px 顯示 Mobile 圖 */
@media (max-width: 768px) {
    .hero-header-01 .mobile-img {
        display: block;
    }
    /* 1. 調整 Banner 比例 (如步驟一) */
    .hero-header-01 .hero-slide {
        aspect-ratio: 1 / 1; 
    }
}

/* 關閉首頁 Hero Banner 的 lazy-bg 骨架灰底＆亮亮動畫 */
.hero-header-01 .lazy-bg.lazy-bg {
    background-color: transparent !important;  /* 或改成 #fff，看你版面底色 */
}

/* 把那層閃爍的漸層遮罩拿掉 */
.hero-header-01 .lazy-bg.lazy-bg::after {
    content: none !important;
    display: none !important;
}

/* =========================================================================
   Mobile Bottom Nav（Kalisa 寶雅風導覽列）
   ========================================================================= */

.kalisa-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 520px; 
    margin: 0 auto;
    z-index: 900;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
    padding: 0 8px;
}

/* 每個項目 */
.kalisa-bottom-nav__item {
    flex: 1 0 20%;
    text-align: center;
    text-decoration: none;
    color: #333333; /* 文字再深一點 */
    position: relative;
    font-weight: bold;
}

/* icon 區塊 */
.kalisa-bottom-nav__icon,
.kalisa-bottom-nav__center-icon {
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.kalisa-bottom-nav__icon img {
    width: 26px;   /* 一般 icon 稍微加大 24 → 26 */
    height: 26px;
    object-fit: contain;
    margin: 0 auto;
}

/* 文字（一般） */
.kalisa-bottom-nav__label {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: #333333;
}

/* =========================================================================
   中間圓形購物車按鈕（新版放大）
   ========================================================================= */

.kalisa-bottom-nav__item--center {
    flex: 0 0 auto;
    transform: translateY(-22px); /* 往上更浮一點 */
}

/* 圓形背景加大：56px → 64px */
.kalisa-bottom-nav__center-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #4e7661;     /* Kalisa 綠 */
    box-shadow: 0 6px 14px rgba(78, 118, 97, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kalisa-bottom-nav__center-icon img {
    width: 30px;  /* 購物車 icon 更加大 */
    height: 30px;
    object-fit: contain;
}

/* 圓形下面的文字（購物車） */
.kalisa-bottom-nav__label--center {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #2F453E; /* 你想深色，可改成 #2F453E */
    font-weight: bold;
}

/* =========================================================================
   RWD：只在 ≤ 640px 顯示 bottom nav
   ========================================================================= */

@media (max-width: 640px) {
    .kalisa-bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: 90px; /* 下方多讓空一點，不要被擠 */
    }
}

@media (min-width: 641px) {
    .kalisa-bottom-nav {
        display: none;
    }
}

/* 容器 */
.kalisa-fab-wrap{
  position: fixed;
  right: 18px;
  bottom: var(--kalisa-fab-bottom, 18px);
  z-index: 1000;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.kalisa-fab-wrap.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 按鈕本體（用圖片） */
.kalisa-fab{
  width: var(--kalisa-fab-size);
  height: var(--kalisa-fab-size);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* 圖片 */
.kalisa-fab__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================
   ✅ 尺寸規則（你指定的）
   ========================= */

/* 1920（含）以上 → 70x70 */
:root{
  --kalisa-fab-size: 70px;
}

/* 1920 以下：階段性縮放 */
@media (max-width: 1919.98px){
  :root{ --kalisa-fab-size: 64px; }
}

@media (max-width: 1599.98px){
  :root{ --kalisa-fab-size: 58px; }
}

@media (max-width: 1399.98px){
  :root{ --kalisa-fab-size: 52px; }
}

@media (max-width: 1199.98px){
  :root{ --kalisa-fab-size: 46px; }
}

@media (max-width: 991.98px){
  :root{ --kalisa-fab-size: 40px; }
}


/* Checkout 選項卡：共用樣式 */
.checkout-choice-card{
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.checkout-choice-card.is-active{
  transform: translateY(-1px);
}

/* Light mode：選中框 */
:root[data-bs-theme="light"] .checkout-choice-card.is-active{
  border-color: rgba(0,0,0,.85) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.10) !important;
}

/* Dark mode：選中框 */
:root[data-bs-theme="dark"] .checkout-choice-card{
  border-color: rgba(255,255,255,.16) !important;
}
:root[data-bs-theme="dark"] .checkout-choice-card.is-active{
  border-color: rgba(255,255,255,.85) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14) !important;
}


/* Register button (match login button size, different color) */
.btn-register{
  --bs-btn-color: #000;
  --bs-btn-bg: #f3f3f3;
  --bs-btn-border-color: #f3f3f3;

  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e9e9e9;
  --bs-btn-hover-border-color: #e9e9e9;

  --bs-btn-focus-shadow-rgb: 0, 0, 0;

  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e2e2e2;
  --bs-btn-active-border-color: #e2e2e2;

  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f3f3f3;
  --bs-btn-disabled-border-color: #f3f3f3;
}

/* Cart reminder bar (inline text + button) */
.cart-reminder{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:14px 16px;
  border-radius:10px;

  /* subtle warm reminder */
  background: #FFF6E8;
  border: 1px solid #FFE1B8;

  color:#2b2b2b;
}

.cart-reminder__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.25;
}

.cart-reminder__sub{
  font-size:13px;
  opacity:.85;
}

/* keep button from stretching weirdly */
.cart-reminder__btn{
  white-space:nowrap;
  padding-left:18px;
  padding-right:18px;
}

/* Mobile: stack nicely */
@media (max-width: 576px){
  .cart-reminder{
    flex-direction:column;
    align-items:stretch;
  }
  .cart-reminder__btn{
    width:100%;
  }
}


.btn-reminder{
  --bs-btn-color:#5A3A14;
  --bs-btn-bg:#FFD9A3;
  --bs-btn-border-color:#FFD9A3;

  --bs-btn-hover-color:#5A3A14;
  --bs-btn-hover-bg:#FFC97D;
  --bs-btn-hover-border-color:#FFC97D;

  --bs-btn-active-color:#5A3A14;
  --bs-btn-active-bg:#FFBE63;
  --bs-btn-active-border-color:#FFBE63;
}