:root{
  /* 整體背景層次 */
  --bg: #f2f4f1;          /* 頁面底色，比以前再深一點的灰綠 */
  --soft: #e4ebe4;        /* 區塊的淺底色（首頁第二排那種） */

  /* 主題綠（Header / 按鈕 / Logo） */
  --prime: #2f645c;       /* 深一點的日系綠 */
  --accent: #97b8aa;      /* 點綴用的淺綠 */

  /* 文字 & 白底 */
  --green-main: var(--prime);
  --green-light: #86b3a5;
  --warm-white: #f8f7f3;
  --text-main: #233129;
  --text-light: #6b756e;

  /* 圖片卡片共用尺寸 */
  --media-max-width: 520px;
  --media-radius-lg: 22px;
}


*{box-sizing:border-box}
html,
img{max-width:100%;display:block;border-radius:16px}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:auto;padding:0 20px}
.flex{display:flex;gap:16px}
.center{justify-content:center;align-items:center;text-align:center}
.between{justify-content:space-between}
.pad-y{padding-block:16px}
.pad-y-lg{padding-block:25px}
.stack-sm>*+*{margin-top:6px}
.stack-md>*+*{margin-top:12px}
.stack-lg>*+*{margin-top:20px}
.card img{ width:100%; height:auto; display:block; }
.h1{font-size:40px;line-height:1.1;margin:0}
.h2{font-size:28px;line-height:1.2;margin:0}
.h3{font-size:20px;margin:0}
.muted{color:var(--muted)}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);z-index:10}
.site-header .brand{font-weight:700}
.nav a{padding:14px 10px;border-radius:10px}
.nav a:hover{background:var(--soft)}
.hero{background:linear-gradient(0deg,rgba(255,255,255,.85),rgba(255,255,255,.85)),center/cover no-repeat;}
.hero-inner{padding:60px 20;max-width:820px;margin: 0 auto}
.hero-title{font-size:44px;margin:0 0 8px}
.hero-sub{color:var(--muted);margin:0 0 20px}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--prime);color:#fff;border:1px solid var(--prime);transition:.2s}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:transparent;color:var(--prime)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.grid-2.flip{grid-auto-flow:dense}
.grid-2.flip .img-wrap{order:2}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.card-body{padding:14px}

.card { position: relative; }
.card a.stretch { position:absolute; inset:0; z-index:1; }
.card form { position:relative; z-index:2; }


.price{color:var(--prime);font-weight:600}
.accordion details{border:1px solid var(--line);border-radius:12px;padding:12px}
.accordion details+details{margin-top:10px}
.site-footer{border-top:1px solid var(--line);padding:24px 0;background:var(--soft);margin-top:40px}
input,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.list{list-style:none;padding:0;margin:0}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-title{font-size:36px}
}

/* --- Hero 區塊背景設定 --- */
.hero {
  background-repeat: no-repeat;
  background-size: contain;          /* 自動等比例縮放完整顯示圖案 */
  background-position: left center;  /* 圖靠左對齊、垂直置中 */
  background-color: #fff;            /* 避免透明背景時露出底色 */
  margin-bottom: 0;
  padding: 0;
}

/* Hero 內文區塊 */
.hero-inner {
  padding: 100px 0 60px;
  max-width: 820px;
  margin: 0 auto;
  text-align: right;  /* ✅ 讓文字靠右，和左邊圖呼應 */
}

/* RWD 小螢幕時改為置中顯示 */
@media (max-width: 768px) {
  .hero {
    background-size: cover;          /* 小螢幕時改成滿版 */
    background-position: center top;
  }
  .hero-inner {
    text-align: center;
    padding: 60px 0 40px;
  }
}



/* === 🌿 Essential Oils 溫柔日系背景風格 === */

/* ---- 基本主題色調 ---- */


/* ---- 柔霧暈染背景 ---- */
body{
  margin: 0;
  padding: 0;
  padding-top: 0;  /* 給 fixed header 預留空間 */
  font-family: 'Noto Sans TC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
  color: var(--text-main);

  /* 桌機版：有一點灰綠暈染的背景，偏日系 */
  background:
    radial-gradient(60vw 60vw at -10% -10%, rgba(47,100,92,0.18), transparent 60%),
    radial-gradient(50vw 50vw at 110% -5%, rgba(151,184,170,0.16), transparent 60%),
    radial-gradient(40vw 40vw at 100% 120%, rgba(151,184,170,0.12), transparent 60%),
    var(--bg);
}

@media (max-width: 768px){
  /* 手機改成單一底色，比較乾淨 */
  body{
    background: var(--bg);
  }
}


/* ---- 紙感微粒質地 ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 2px 2px;
  opacity:.6;
}

/* ---- Hero 區塊柔和覆層 ---- */
.hero{
  position:relative;
  isolation:isolate;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(40% 60% at 20% 20%, rgba(245,248,246,.75), transparent 70%),
    radial-gradient(50% 50% at 80% 30%, rgba(230,240,236,.6), transparent 70%);
  mix-blend-mode: soft-light;
}


/* ---- 區塊分隔用柔波段（可選） ---- */
.section-wave{
  position:relative;
  background: var(--soft);
  border-top: 1px solid #eef2ef;
  border-bottom: 1px solid #eef2ef;
}
.section-wave::before,
.section-wave::after{
  content:""; position:absolute; left:0; right:0; height:80px;
  background:
    radial-gradient(120px 40px at 10% 60%, rgba(153,182,174,.10), transparent 70%),
    radial-gradient(140px 60px at 80% 20%, rgba(153,182,174,.08), transparent 70%);
  filter: blur(12px);
}
.section-wave::before{ top:-40px; }
.section-wave::after{ bottom:-40px; }

/* ---- 商品卡圖片維持比例 ---- */
.card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .3s ease;
}
.card:hover img{
  transform: translateY(-4px);
}

/* ---- 區塊標題更柔和 ---- */
h2, .h2{
  color: var(--prime);
  letter-spacing: 0.02em;
}

/* ---- 按鈕美化 ---- */
.btn{
  background-color: var(--prime);
  color:#fff;
  border:none;
  padding:0.75em 1.6em;
  border-radius:30px;
  font-weight:600;
  transition: background-color .3s ease, transform .2s ease;
}
.btn:hover{
  background-color:#245d55;
  transform: translateY(-2px);
}


/* === 極淡葉影（右上角到左下，低彩線條） === */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;                 /* 在紙感層（::before）更下方或上方都可；要在上面就改成 -0.5 */
  pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 200 200'>\
<g fill='none' stroke='rgb(153,182,174)' stroke-opacity='.12' stroke-width='1.2' stroke-linecap='round'>\
<path d='M18,140 C50,98 96,78 150,52'/>\
<path d='M24,158 C64,122 112,104 170,84'/>\
<path d='M10,120 C36,92 80,64 128,40'/>\
<path d='M30,120 Q70,84 110,66'/>\
<path d='M60,164 Q104,136 150,118'/>\
</g></svg>") no-repeat right -90px top -60px;
  background-size: 720px auto;
  opacity: .9;                /* 總透明度；覺得太明顯就調到 .5 ~ .7 */
  filter: saturate(.95) blur(.0px);
}


/* === Logo 組合樣式 === */
.logo-wrap{
  display:flex;
  align-items:center;
}

.logo-link{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#111;
  font-weight:700;
  font-size:1.25em;
  letter-spacing:0.02em;
  transition:opacity .2s ease;
}

.logo-link:hover{
  opacity:.85;
}

.logo-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
  margin-top:-2px;           /* 稍微抬高，讓文字視覺居中 */
  border-radius:8px;
  background-color:white;    /* 若圖底深，留白邊 */
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}

.logo-text{
  font-family:"Noto Sans TC", "Segoe UI", sans-serif;
  font-weight:700;
  color:#2f6f66;             /* 主色呼應品牌 */
}

/* 導覽列微調 */
.nav a{
  color:#111;
  font-weight:500;
  margin-left:1.6em;
  text-decoration:none;
  transition:color .2s ease;
}

.nav a:hover{
  color:#2f6f66;
}

/* 響應式：手機居中顯示 */
@media (max-width:768px){
  .container.flex.between.center{
    flex-direction:column;
    gap:.5em;
  }
}


/* 手機端淡化與縮小，避免搶畫面 */
@media (max-width: 768px){
  body::after{
    background-position: right -120px top -80px;
    background-size: 520px auto;
    opacity: .45;
  }
}
.nav a + .muted{ margin-left:1em; }
input[type="number"]{ max-width:90px; }

.product-card {
  position: relative;
}

.product-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.product-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.badge-soldout {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
}
.stock-line {
  font-size: 13px;
  margin-top: 4px;
}

/* 商品詳情主圖視窗固定尺寸 */
.product-main-frame {
  width: 100%;
  max-width: 480px;          /* 視窗最大寬度，可依你版面調整 */
  aspect-ratio: 4 / 3;       /* 視窗比例：4:3，你可以改 1/1、16/9 都可以 */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;  /* 可以留白 */
  display: block;
}

/* 商品詳情：主圖固定比例 */
.product-main-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 容量選項 pills */
.variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.variant-pill {
  min-width: 70px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.variant-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 修復容量按鈕變白看不到的問題 */
.variant-pills {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.variant-pill {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--line, #ddd);
  background: #ffffff !important;
  color: #333 !important;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.variant-pill:hover {
  background: #e9f3f0 !important;   /* 淺綠 */
  color: #333 !important;
}

.variant-pill.active {
  background: var(--primary, #2b6e64) !important;
  color: #ffffff !important;
  border-color: var(--primary, #2b6e64) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ========== 首頁幻燈片 ========== */

.hero-slider-inner{
  position:relative;
}
.hero-slide{
  display:none;
  position:relative;
  min-height:320px;
}
.hero-slide.is-active{
  display:block;
}

.hero-btn{
  margin-top:8px;
}
.hero-dots{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:#fff8;
  cursor:pointer;
}
.hero-dot.is-active{
  background:#fff;
}


/* ========== rows 區塊 ========== */
.home-section{
  padding:60px 0;
}
.home-section-inner{
  display:flex;
  gap:32px;
  align-items:center;
}
.home-section .col.image{
  flex:1 1 50%;
}
.home-section .col.image img{
  width:100%;
  max-height:320px;      /* 桌機圖高度上限 */
  border-radius:16px;
  object-fit:cover;      /* 超出就裁掉，版面固定 */
}



/* 左圖右文：圖在左、文字在右（預設） */
.home-section.image_left .home-section-inner{
  flex-direction: row;
}

/* 左文右圖：文字在左、圖在右（跟 HTML 排列一致，不再反轉） */
.home-section.image_right .home-section-inner{
  flex-direction: row;
}

.home-section.image_top .home-section-inner,
.home-section.text_top .home-section-inner{
  flex-direction:column;
  text-align:center;
}
.home-section .col.text.center{
  text-align:center;
}

/* RWD rows */
@media (max-width: 900px){
  .home-section-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* ========== 後台 /admin/home UI ========== */
.admin-block{
  padding:20px;
  margin-bottom:24px;
}
.admin-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-bottom:12px;
  background:#fbfbfb;
}
.admin-item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.admin-item-actions .btn{
  margin-left:4px;
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.admin-grid label{
  font-size:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.form-control{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
}
.btn-sm{
  padding:4px 8px;
  font-size:13px;
}
.btn-light{
  background:#fff;
  border:1px solid var(--line);
  color:#333;
}
.btn-danger{
  background:#c0392b;
  border-color:#c0392b;
}
.btn-danger:hover{
  filter:brightness(.95);
}
/* === 幻燈片：固定合理高度，不再整個畫面超高 === */
.hero-slide{
  position:relative;
  height:420px;    /* 你可改成 360 / 400 / 450 */
  overflow:hidden;
}
.hero-slide:not(.is-active){
  display:none;                     /* 只讓目前那張顯示 */
}

.hero-slide-bg {
  position:absolute;
  inset:0;
  background-size: contain;   /* ⭐ 不裁切、不拉伸、完整顯示 */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f2f4f1;  /* ⭐ 你的底色 */
}




.hero-slide-content{
  position:relative;
  height: clamp(300px, 50vw, 520px);
  padding:40px 0 32px;       /* 上下留一點空間 */
  display:flex;
  align-items:flex-end;      /* 垂直靠底部 */
}

.hero-text-box{
  max-width:520px;
  margin-left:auto;          /* 靠右 */
  margin-bottom:12px;        /* 距底部一點距離 */
  text-align:right;          /* 文字向右對齊 */
}
@media (max-width:768px){
  .hero-slide{
    height:320px;            /* 手機高度再稍微降一點 */
  }
  .hero-slide-content{
    padding:40px 0 24px;
    align-items:flex-end;    /* 仍然靠底部 */
  }
  .hero-text-box{
    max-width:100%;
    margin:0 16px 12px 16px; /* 左右留一點內縮 */
    text-align:center;       /* 手機改成置中，如果你想維持右下就刪掉這行 */
  }
}

.logo-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.logo-icon{
  width:48px;            /* 圓形大小 */
  height:48px;
  padding:6px;           /* 讓你的 LOGO 有呼吸空間 */
  border-radius:50%;     /* 完美圓形 */
  background:#ffffff;    /* 白底 */
  border:1px solid #e9e9e9;
  object-fit:contain;    /* ⭐ 全圖顯示，不裁切 */
  box-shadow:0 2px 4px rgba(0,0,0,0.08); /* 淡淡陰影 */
}

.logo-text{
  font-size:20px;
  font-weight:600;
  color:#1f3b2d;   /* 深綠，跟你網站主色調一致 */
  letter-spacing:0.6px;
}

.logo-icon{
  transition:transform 0.25s ease;
}

.logo-link:hover .logo-icon{
  transform:scale(1.2);
}

/* ========== 手機漢堡按鈕 ============ */
.mobile-menu-btn{
  display:none;
  background:none;
  border:0;
  font-size:26px;
  cursor:pointer;
  color:#1f3b2d;
}

/* 手機版才顯示漢堡 */
@media(max-width:900px){
  .mobile-menu-btn{
    display:block;
  }
  .main-nav{
    display:none; /* 隱藏原本的桌機選單 */
  }
}

/* ========== 手機側邊欄 Drawer ============ */
.mobile-drawer{
  position:fixed;
  top:0;
  left:-260px;  /* 初始隱藏 */
  width:260px;
  height:100%;
  background:white;
  box-shadow:2px 0 8px rgba(0,0,0,0.15);
  padding:20px;
  z-index:1001;
  display:flex;
  flex-direction:column;
  transition:left 0.28s ease;
}

.mobile-drawer.open{
  left:0;
}

/* 遮罩 */
.drawer-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transition:0.25s ease;
  z-index:1000;
}
.drawer-overlay.show{
  opacity:1;
  visibility:visible;
}

/* Drawer 樣式 */
.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.drawer-logo{
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fff;
  object-fit:contain;
  border:1px solid #e0e0e0;
}

.drawer-title{
  font-size:18px;
  color:#1f3b2d;
  font-weight:600;
}

.drawer-close{
  background:none;
  border:0;
  font-size:22px;
  cursor:pointer;
}

.drawer-menu a{
  display: block;
  padding: 14px 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* ================================
   HERO 幻燈片：4:3 等比例（品牌精油風格）
   ================================ */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;  /* 核心：4:3 比例 */
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 滿版但維持比例 */
    object-position: center;
}

/* 幻燈片內文固定在右下角 */
.hero-content {
    position: absolute;
    bottom: 5%;
    right: 5%;
    text-align: right;
    color: #fff;
    max-width: 60%;
}

.hero-title {
    font-size: 1.6rem;
    line-height: 1.3;
}

.hero-sub {
    margin-top: 8px;
    font-size: 1rem;
    opacity: 0.9;
}

.hero-btn {
    margin-top: 12px;
    display: inline-block;
    background: #3a5f5f;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
}
/* ================================
   手機 Header：APP 風格
   ================================ */
.mobile-fixed {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffffee; /* 半透明 */
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e7e7e7;
}

.mobile-menu-btn {
    font-size: 1.6rem;
    background: none;
    border: none;
    padding: 8px 12px;
}

.logo-icon {
    height: 32px;
    width: auto;
}

@media (max-width: 768px) {
    .main-nav { display: none; }
}
/* ================================
   手機側邊欄 Drawer + 毛玻璃
   ================================ */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -260px;
    width: 240px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 3px 0 10px rgba(0,0,0,0.2);
    transition: left .3s ease;
    z-index: 1200;
    padding: 20px;
}

.mobile-drawer.open {
    left: 0;
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1100;
}

.drawer-overlay.show {
    display: block;
}


/* ================================
   商品卡片：手機 2 欄式
   ================================ */
@media (max-width: 768px) {
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-card img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .product-card {
        text-align: center;
    }
}

body {
    background: var(--warm-white);
    color: var(--text-main);
    font-family: 'Noto Sans TC', sans-serif;
}


.site-header a {
    color: white !important;
}
.logo-text {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: white;
}
.btn {
    background: var(--green-main);
    color: #fff;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: 0.25s;
}

.btn:hover {
    background: var(--green-light);
    color: #fff;
}
.product-card {
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(58,95,95,0.18);
}
.mobile-drawer {
    background: rgba(58, 95, 95, 0.82);
    color: #fff;
}

.mobile-drawer a {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.site-footer {
    background: #E8F0ED;
    text-align: center;
    padding: 30px 0;
    color: var(--text-light);
    font-size: 0.9rem;
}
.hero-content {
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.hero-btn {
    background: var(--green-main);
}

.hero-btn:hover {
    background: var(--green-light);
}
/* ====== 頁首排版：桌機版 ====== */
.site-header {
  background: #6F746F;          /* 日系綠 */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;

  /* 關鍵：讓 LOGO + 導覽排成一列，左右兩邊 */
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin-right: 8px;
}

/* 導覽列靠右、間距拉開 */
.main-nav {
  margin-left: auto;            /* 把 nav 推到右邊 */
  display: flex;
  align-items: center;
  gap: 24px;                    /* 每個連結的間距 */
  font-size: 15px;
}

.main-nav a,
.main-nav span {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;          /* 不要自動換行擠成兩行 */
}

.main-nav a:hover {
  text-decoration: underline;
}

/* 手機漢堡按鈕：桌機隱藏 */
.mobile-menu-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 8px;
  display: none;                /* 先隱藏，下面 media query 手機再打開 */
}

/* ====== 手機版：隱藏桌機選單，改用側邊欄 ====== */
@media (max-width: 768px) {
  .header-inner {
    padding: 8px 12px;
  }

  .mobile-menu-btn {
    display: inline-flex;       /* 手機才出現 ☰ */
  }

  .main-nav {
    display: none;              /* 手機不要顯示上面那排連結 */
  }

  .mobile-fixed {
    position: fixed;
    width: 100%;
  }

  body {
    padding-top: 0;          /* 避免 header fixed 把內容擋住 */
  }
}
/* =========================
   通用媒體區塊：首頁圖片＋商品主圖
   - 統一 4:3 比例
   - 圖片不超框，置中裁切
   ========================= */

/* 首頁「圖片＋文字」區塊排版 */
.home-section .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.home-section .col.image {
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
}

/* 首頁圖片：跟幻燈片一樣 4:3、圓角、陰影 */
.home-section .col.image img {
  width: 100%;
  max-width: var(--media-max-width);
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
  border-radius: var(--media-radius-lg);
  object-fit: contain;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

/* 文字區塊寬度控制一下，避免太寬 */
.home-section .col.text {
  flex: 1;
  max-width: 520px;
}

/* 商品詳情頁的主圖：沿用同一套規格 */
.product-main-frame {
  max-width: var(--media-max-width);
  aspect-ratio: 4 / 3;
  border-radius: var(--media-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.product-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 手機版：改成上下排、圖滿版 */
@media (max-width: 768px) {
  .home-section .row {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }

  .home-section .col.image,
  .home-section .col.text {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .home-section .col.image img,
  .product-main-frame {
    max-width: 100%;
    border-radius: 20px;
  }
}

/* 首頁第二排 & 商品主圖的白色卡片樣式加強 */
.home-section .col.image,
.product-main-frame {
  background: #ffffff;
  border-radius: var(--media-radius-lg);
  box-shadow: 0 18px 40px rgba(27,55,47,0.14);
}

/* 首頁第二排外面的大區塊，鋪上柔和底色 */
.home-section {
  background: var(--soft);
  border-radius: 40px;
}

/* =========================
   2025-11-20 配色統一 & 底色加深
   貼在 style.css 最底部就好
   ========================= */

/* 整體頁面底色：淡綠灰 */
body {
  background-color: #e9f3f0;
}

/* Hero & 有波浪背景的區塊（像品牌故事頁上面那塊） */
.section-bg,
.hero-section,
.wave-section {
  background-color: #e9f3f0;
}

/* 首頁第二排以後的大區塊容器（關於品牌、天然擴香石那個區塊） */
.home-section {
  background-color: #e9f3f0;
}

/* 卡片、內容白板：維持純白 + 柔和陰影 */
.feature-block,
.product-card,
.hero-card,
.card-white {
  background-color: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 40, 40, 0.10);
}

/* 讓區塊與背景銜接更柔和，四角稍微圓一點 */
.home-section,
.section-bg,
.wave-section {
  border-radius: 32px 32px 0 0;
}

/* 導覽列顏色維持一致（如果前面有別的設定，這裡會統一） */
.site-header {
  background-color: #6F746F;
}


/* =========================
   HERO 幻燈片：文字位置與大小
   ========================= */

/* 先確保 hero-slide 本身是定位容器 */
.hero-slide {
  position: relative;
  overflow: hidden;
}

/* 文字外框：桌機版靠右下，但更貼近下緣 */
.hero-text-box {
  position: absolute;
  right: 6vw;       /* 靠右一點，想更靠中可以改成 4vw */
  bottom: 8%;       /* 原本大多抓 16~20%，改成 8% 貼近下緣 */
  z-index: 2;
  text-align: left;
  color: #fff;
}

/* 桌機版的字大小 */
.hero-title {
  font-size: 44px;
  line-height: 1.2;
  margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  font-size: 18px;
  margin: 0 0 18px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hero-btn {
  padding: 10px 32px;
  font-size: 16px;
  border-radius: 999px;
}

/* （選配）在下半部加一點漸層，文字較不會被亮背景吃掉 */
.hero-slide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  z-index: 1;
}

/* 手機版：文字改到左下＋縮小，避免壓到主體 */
@media (max-width: 768px) {
  .hero-text-box {
    left: 7%;
    right: auto;
    bottom: 7%;
    max-width: 86%;                /* 避免整排太寬 */
  }

  .hero-title {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .hero-sub {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .hero-btn {
    padding: 8px 22px;
    font-size: 14px;
  }
}

/* ===== Hero 幻燈片：文字靠近下緣 ===== */
.hero-slide-content {
  position: relative;
  height: 500px;              /* 桌機高度 */
  display: flex;
  align-items: flex-end;      /* 垂直靠底 */
  justify-content: flex-end;  /* 水平靠右 */
  padding: 0 72px 72px 72px;  /* 左右 + 底部留白，避免貼太邊 */
  box-sizing: border-box;
}

.hero-text-box {
  max-width: 420px;
  text-align: left;
}

.hero-title {
  font-size: 27px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.hero-sub {
  font-size: 15px;
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  .hero-slide-content {
    height: 420px;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 24px 32px 24px;
  }

  .hero-text-box {
    max-width: 86%;
  }

  .hero-title {
    font-size: 22px;   /* ✅ 手機標題大小建議 20–24 */
  }

  .hero-sub {
    font-size: 14px;   /* ✅ 副標 13–15 */
  }

  .hero-btn {
    font-size: 14px;
    padding: 8px 20px;
  }
}

/* 後台商品分類篩選 pill */
.admin-cat-filter {
  margin: 16px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-cat-filter .pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d0ddd8;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

.admin-cat-filter .pill.is-active {
  background: #2f645c;
  color: #fff;
  border-color: #2f645c;
}

/* 手機 Drawer：分類區塊，略往右縮、跟主項目有區隔 */
.drawer-subcat {
  padding-left: 24px;                     /* 比主選單多一點縮排 */
  margin-top: 4px;
  margin-bottom: 10px;
  border-left: 1px solid rgba(255,255,255,0.18);  /* 左邊細線（可拿掉） */
}

/* 各分類連結：字稍微小一點，顏色略淡 */
.subcat-link {
  display: block;
  padding: 6px 0;
  font-size: 15px;        /* 比 18px 小一點 */
  color: #fff;
  opacity: 0.85;
}


.subcat-link {
  display: block;
  padding: 6px 0;
  font-size: 16px;
  color: #fff;
  opacity: .9;
}

.subcat-link:hover {
  opacity: 1;
}
/* === 手機 Drawer：全部商品可展開分類 === */

.drawer-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.drawer-cat-toggle span {
  pointer-events: none;   /* 避免點文字和箭頭行為不同 */
}

.drawer-cat-arrow {
  font-size: 0.9em;
  transition: transform 0.25s ease;
}

.drawer-cat-arrow.open {
  transform: rotate(90deg);  /* 展開時箭頭轉向右 → 下 */
}



/* =======================
   手機版：Header + Drawer
   ======================= */

/* 手機漢堡按鈕（桌機隱藏） */
.mobile-menu-btn{
  display:none;
  background:none;
  border:0;
  font-size:26px;
  cursor:pointer;
  color:#fff;
}

/* 768px 以下顯示漢堡、隱藏 main-nav */
@media(max-width:768px){
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
  }
  .main-nav{
    display:none;
  }
}

/* 手機側邊欄 Drawer */
.mobile-drawer{
  position:fixed;
  top:0;
  left:-260px;              /* 初始藏在左邊 */
  width:240px;
  height:100vh;
  background:rgba(58,95,95,0.85);
  color:#fff;
  box-shadow:3px 0 10px rgba(0,0,0,0.2);
  padding:20px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  transition:left .3s ease;
  overflow-y:auto;              /* ⭐ 讓內容可以直向捲動 */
  -webkit-overflow-scrolling:touch; /* iOS 捲動更順 */
}

.mobile-drawer.open{
  left:0;
}

/* 遮罩 */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:1100;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.drawer-overlay.show{
  opacity:1;
  visibility:visible;
}

/* Drawer 頂部：Logo + 關閉按鈕 */
.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.drawer-logo{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  object-fit:contain;
}

.drawer-title{
  font-size:18px;
  font-weight:600;
}

.drawer-close{
  background:none;
  border:0;
  font-size:22px;
  cursor:pointer;
  color:#fff;
}

/* 主選單項目：首頁 / 品牌故事 / 全部商品 / 購物車 / 登入… */
.drawer-menu{
  margin-top:8px;
}

.drawer-menu > a{
  display:block;
  padding:12px 0;
  font-size:18px;                      /* 主選單大字 */
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.25);
}

/* 分類區塊：放在「全部商品」下面 → 略往右縮、字變小 */
.drawer-subcat{
  margin:4px 0 10px 0;
  padding-left:24px;                   /* 整塊往右縮一點 */
  border-left:1px solid rgba(255,255,255,0.22);
}

/* 各分類連結（歸類在 drawer-subcat 裡） */
.drawer-subcat a{
  display:block;
  padding:4px 0;
  font-size:14px;                      /* 比 18px 小一號，很明顯 */
  color:#ffffff;
  opacity:0.80;
  border-bottom:none;                  /* 不再畫底線分隔 */
}

.drawer-subcat a:hover{
  opacity:1;
}






/* ===== Flash 訊息樣式 ===== */
.flash {
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 15px;
  text-align: center;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 成功訊息（綠） */
.flash-success {
  background-color: #e6f6ee;
  border-color: #86d3b3;
  color: #0f5132;
}

/* 一般資訊（藍） */
.flash-info {
  background-color: #e7f1ff;
  border-color: #9cc3ff;
  color: #084298;
}

/* 錯誤（紅） */
.flash-error,
.flash-danger {
  background-color: #fde2e1;
  border-color: #f5a2a0;
  color: #842029;
}
/* 登入／註冊頁下方的小連結區 */
.auth-links {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #58645a;
}

.auth-link-row {
  display: flex;
  gap: 4px;
}

.auth-link-row + .auth-link-row {
  margin-top: 4px;
}

.auth-links a {
  text-decoration: underline;
}

.auth-links a:hover {
  text-decoration: none;
}
/* about 介紹段落：保留換行，自動分行 */
.about-block-body {
    white-space: pre-line;
}

.hero-slider{
  width:100%;
  background:var(--bg);

}

.hero-slider-inner{
  position:relative;
}

.hero-slide{
  display:none;
  position:relative;
  width:100%;
  height:clamp(320px, 60vh, 520px);  /* 視窗愈大愈高，仍保留最低高度 */
}
.hero-slide.is-active{
  display:block;
}
/* ==== 桌機主選單：產品分類下拉 ==== */
.main-nav{
  display:flex;
  align-items:center;
  gap:16px;
}
.main-nav .nav-item{
  position:relative;
}
.main-nav .nav-link{
  display:inline-block;
  padding:4px 0;
}
.main-nav .nav-link.has-sub::after{
  content:"▾";
  font-size:10px;
  margin-left:4px;
}

/* 下拉選單本體 */
.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  padding:8px 0;

  box-shadow:0 8px 18px rgba(0,0,0,.20); /* 陰影更明顯 */
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  display:none;
  z-index:50;
}

.nav-dropdown a{
  display:block;
  padding:8px 18px;
  font-size:15px;
  color:#333;                   /* 文字變深 */
}

.nav-dropdown a:hover{
  background:#f1f1f1;           /* hover 變更明顯 */
}


/* hover 展開 */
.nav-item:hover > .nav-dropdown{
  display:block;
}

/* 手機寬度時，桌機下拉關掉，改用原本側邊欄 */
@media (max-width: 768px){
  .main-nav .nav-item{
    position:static;
  }
  .nav-dropdown{
    display:none !important;
  }
}
/* ==== 頁尾聯絡資訊區塊 ==== */
.site-footer{
  margin-top:40px;
  background:#6F746F !important;   /* 換成你的淺灰色 */
  color:#fff;
  padding:24px 0;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.footer-brand-name{
  font-weight:600;
  font-size:15px;
  margin-bottom:4px;
}
.footer-rights{
  font-size:13px;
  opacity:.85;
}
.footer-contact h4{
  font-size:15px;
  margin:0 0 8px;
}
.footer-contact ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-contact li{
  font-size:14px;
  line-height:1.7;
}
.footer-contact a{
  color:#fff;
  text-decoration:underline;
}
@media (max-width:768px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}
.hero-slide{
 height: clamp(300px, 50vw, 520px);
}

/* 只針對首頁 image_top 版型：讓圖片自然顯示、不硬壓高度 */
.home-section.image_top .col.image img{
  width: 100%;
  height: auto;
  max-height: none;        /* 不再限制 320px */
  object-fit: contain;     /* 保留完整照片，不裁切 */
}

/* 讓圖片卡片寬度不要太寬，置中看起來更自然 */
.home-section.image_top .col.image{
  max-width: 520px;
  margin: 0 auto;
}

.home-section .col.image,
.home-section .col.image.full,
.home-section .col.image img {
  background: #e9f3f0 !important;
}

/* 讓首頁圖片與背景完全融合（無白底、無邊角、無陰影） */
.home-section .col.image,
.home-section .col.image.full {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 圖片本身也不留背景、不留邊 */
.home-section .col.image img {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 同時移除整個 home-section 的大白框（外層卡片） */
.home-section {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 60px 0; /* 可保留上下間距，不會貼太死 */
}

/* ============================
   🟢 手の產品 下拉選單：日系綠底版本
   ============================ */

.nav-dropdown {
  background: #e9f3f0 !important;       /* 與你網站背景一致 */
  border-radius: 12px;
  padding: 10px 0;
  min-width: 180px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.06);
}

/* 下拉項目文字（清楚深綠） */
.nav-dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 15px;
  color: #225348 !important;            /* 深綠，清楚不透明 */
  background: transparent;
}

/* hover：淺綠 + 小圓角 */
.nav-dropdown a:hover {
  background: #d7ebe6 !important;       /* 比背景再深一點的綠 */
  color: #1b3d36 !important;
  border-radius: 6px;
}

/* 整個 header 固定在最上面 */
.site-header.mobile-fixed {
  position: sticky;        /* 你如果原本用 fixed 也可以保留 fixed */
  top: 0;
  z-index: 1000;
}

/* 上面品牌列（跟整體背景同色） */
.header-brand-bar {
  background: var(--bg);   /* 你的 #e9f3f0 */
  padding: 8px 0;
}

.brand-inner {
  display: flex;
  align-items: center;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brand-logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #145d52;          /* 深綠字 */
}

/* 下面深綠色導覽列 */
.header-nav-bar {
  background: #145d52;     /* 你的主色 */
}

.header-nav-bar .header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* main-nav 仍然橫排 */
.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 手機：品牌列精簡一點，或需要可以隱藏 */
@media (max-width: 768px) {
  .brand-logo-img {
    width: 32px;
    height: 32px;
  }
  .brand-logo-text {
    font-size: 16px;
  }

  /* 如果覺得兩行太高，也可以直接隱藏上面品牌列 */
  /* .header-brand-bar { display: none; } */
}

/* 上排背景（與整體背景一致） */
.header-brand-bar {
  background: var(--bg);
  padding: 8px 0;
}

/* 下排導覽列 */
.header-nav-bar {
  background: #145d52; /* 主色深綠 */
}

/* LOGO 圖片 hover 放大 */
.brand-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  transition: transform .28s ease;
}

.brand-logo-link:hover .brand-logo-img {
  transform: scale(1.18);   /* ⭐ 恢復放大效果 */
}
/* === Header：Logo 列 + 導覽列一起置中 === */

/* 上面 Logo 那條：改成跟導覽列一樣的綠色、內容置中 */
.header-brand-bar {
  background: #6F746F;   /* 深灰 */
  /*background: #145d52;        /* 和下面 header-nav-bar 一樣 */
  padding: 10px 0;
}

.brand-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;     /* ⭐ LOGO 置中 */
}

/* LOGO 文字改白色 */
.brand-logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}
/* 下面深綠導覽列：內容置中 */
.header-nav-bar {
  background: #6F746F;   /* 深灰 */
  /*background: #145d52;*/
}

.header-nav-bar .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;     /* ⭐ 導覽列整排置中 */
}

/* 把之前 main-nav 的 margin-left:auto 抵銷掉，避免被推去右邊 */
.header-nav-bar .main-nav {
  margin-left: 0;
}
/* 放大 LOGO 圖示，並加上 hover 放大效果 */
.brand-logo-img {
  width: 64px;                 /* 想更大可以 72px、80px */
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.25s ease;
}

/* 滑鼠移上去 LOGO 會微放大 */
.brand-logo-link:hover .brand-logo-img {
  transform: scale(1.15);
}

/* ========== 留言板樣式 ========== */

.guestbook-form-card,
.guestbook-message {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}

.guestbook-form-card input[type="text"],
.guestbook-form-card input[type="email"],
.guestbook-form-card textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #b5c8bf;
  background: #f8fbf8;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
}

.guestbook-form-card input:focus,
.guestbook-form-card textarea:focus {
  outline: none;
  border-color: #2b6c5a;
  box-shadow: 0 0 0 1px rgba(43,108,90,0.15);
}

.guestbook-message-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.guestbook-author {
  font-weight: 600;
  font-size: 15px;
  color: #214538;
}

.guestbook-date {
  font-size: 13px;
  color: #8a9b93;
}

.guestbook-content {
  margin: 4px 0 8px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.guestbook-reply {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d0ddd6;
  font-size: 14px;
}

.guestbook-reply-label {
  font-weight: 600;
  margin-bottom: 2px;
}
/* --- 知識小寶庫縮圖列表 --- */
.kb-thumb img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* --- 知識小寶庫兩欄 --- */
.kb-layout {
  display: flex;
  gap: 32px;
}

.kb-sidebar {
  width: 180px;
  flex-shrink: 0;
}

.kb-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kb-cat-list li {
  margin-bottom: 8px;
}

.kb-cat-list a {
  color: #214538;
  text-decoration: none;
  padding: 6px 4px;
  display: block;
  border-radius: 6px;
}

.kb-cat-list a.active,
.kb-cat-list a:hover {
  background: #e5efe9;
  font-weight: 600;
}

.kb-posts {
  flex: 1;
}

.kb-post-item {
  background:#fff;
  border-radius:20px;
  padding:20px 24px;
  margin-bottom:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}

/* 縮圖 */
.kb-thumb img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.kb-readmore {
  display:inline-block;
  margin-top:8px;
  font-size:14px;
  color:#2b6c5a;
}

.kb-article {
  white-space: pre-wrap;
  line-height: 0.8;
  font-size: 18px;
}

.kb-article p {
  margin-bottom: 18px;
}

.kb-article img {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  margin: 20px auto;
}

/* ===== 知識小寶庫 Layout ===== */

.kb-layout {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}

/* 左側分類側欄 */
.kb-sidebar {
  width: 210px;
  flex-shrink: 0;
  padding: 16px 18px;
  background: #f1f6f3;
  border-radius: 18px;
}

.kb-sidebar-title {
  margin: 0 0 10px;
  color: #214538;
}

.kb-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 綠色標籤 Pill */
.kb-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  color: #214538;
  text-decoration: none;
  background: transparent;
  transition: all .15s ease;
}

.kb-cat-pill:hover {
  background: #e3efe8;
}

.kb-cat-pill.active {
  background: #2f6c5a;
  color: #ffffff;
  font-weight: 600;
}

/* 右側文章列表：兩欄卡片網格 */
.kb-posts {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.kb-post-item {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  display: flex;
  flex-direction: column;
}

.kb-thumb-link {
  display: block;
}

.kb-thumb img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.kb-post-body {
  padding: 18px 20px 16px;
}

.kb-post-title {
  margin: 0 0 6px;
}

.kb-post-title a {
  color: #214538;
  text-decoration: none;
}

.kb-post-title a:hover {
  text-decoration: underline;
}

.kb-post-summary {
  font-size: 14px;
  color: #47574f;
  margin: 0 0 10px;
}

.kb-post-meta {
  font-size: 12px;
  color: #8a9b93;
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.kb-readmore {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #2b6c5a;
  text-decoration: none;
}

.kb-readmore:hover {
  text-decoration: underline;
}

/* 分類封面區塊 */
.kb-cat-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #f1f6f3;
  border-radius: 20px;
  margin-top: 12px;
}

.kb-cat-hero-img img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.kb-cat-hero-text h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.kb-cat-hero-text p {
  margin: 0;
  font-size: 14px;
  color: #47574f;
}

.kb-cat-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d8e7df;
  font-size: 12px;
  margin-bottom: 4px;
}

/* 文章內容排版（detail 頁用） */
.kb-article {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 18px;
  color: #2d3a33;
}

.kb-article p {
  margin: 0 0 18px;
}

.kb-article img {
  max-width: 100%;
  border-radius: 12px;
  margin: 20px auto;
  display: block;
}

/* 手機版調整 */
@media (max-width: 768px) {
  .kb-layout {
    flex-direction: column;
  }
  .kb-sidebar {
    width: 100%;
  }
  .kb-posts {
    grid-template-columns: 1fr;
  }
}
/* --- 知識小寶庫：分類側欄 --- */
.kb-sidebar {
  width: 200px;
  padding: 20px 0;
}

.kb-sidebar h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #0b4d47;
}

.kb-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kb-cat-list li {
  margin-bottom: 10px;
}

.kb-cat-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f0f5f4;         /* 淺綠背景 */
  color: #355b57;
  font-size: 15px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

/* 滑鼠移過去 */
.kb-cat-list a:hover {
  background: #dfeeea;
  border-color: #b5d8cf;
  color: #0b4d47;
}

/* 當前分類（active） */
.kb-cat-list a.active {
  background: #0b4d47;
  color: white;
  border-color: #0b4d47;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* ========== 手機版導覽列修正 ========== */
@media (max-width: 768px) {
  .header-nav-bar .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    font-size: 28px;
    background: none;
    border: none;
    color: #fff;
    position: absolute;
    left: 16px;
    top: 10px;
    z-index: 2000;
  }

  .mobile-drawer {
    position: fixed;
    left: -260px;
    top: 0;
    width: 240px;
    height: 100vh;
    background: #1f4d41;
    padding-top: 70px;
    transition: left 0.3s ease;
    z-index: 3000;
  }

  .mobile-drawer.open {
    left: 0;
  }

  .drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2500;
  }

  .drawer-overlay.show {
    display: block;
  }

  .mobile-drawer a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
  }
}

/* 導覽列靠右、間距拉開 */
.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
}

.main-nav a,
.main-nav span {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* 右上會員區 */
.nav-user{
  display:flex;
  align-items:center;
  gap:12px;           /* 每個連結之間留一點距離 */
  margin-left:16px;
  font-size:14px;
  white-space:nowrap; /* 不要在中間自己換行 */
}

.nav-user span,
.nav-user a{
  color:#fff;
  text-decoration:none;
}

.nav-user a:hover{
  text-decoration:underline;
}

.nav-hello{
  opacity:0.9;        /* 「您好，XXX」稍微淡一點 */
}

/* 手機版才顯示漢堡 */
@media(max-width:900px){
  .mobile-menu-btn{
    display:block;
  }
  .main-nav{
    display:none; /* 隱藏原本的桌機選單 */
  }
  .nav-user{
    display:none; /* ⭐ 手機上也隱藏右上會員連結，改用側邊抽屜 */
  }
}
.auth-social{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid #ddd;
}
.auth-social-title{
  margin-bottom:12px;
  font-size:14px;
  color:#555;
}
.auth-social-buttons{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.btn.btn-outline{
  background:transparent;
  border:1px solid #2f5c4f;
  color:#2f5c4f;
}
.btn.btn-outline:hover{
  background:#2f5c4f;
  color:#fff;
}
/* 登入頁／導覽列：第三方登入 Logo */
.auth-oauth-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #2f5c4f;
  background: #fff;
  color: #2f5c4f;
  text-decoration: none;
  font-size: 14px;
}

.auth-oauth-btn:hover {
  background: #2f5c4f;
  color: #fff;
}

/* 共用圖示基底 */
.oauth-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* 導覽列右上的小圖示，可以略放大一點 */
.nav-oauth .oauth-icon {
  width: 24px;
  height: 24px;
}

/* 各家 Logo 圖片路徑（請確認檔案存在） */
.oauth-google {
  background-image: url("/static/img/oauth/google.png");
}
.oauth-line {
  background-image: url("/static/img/oauth/line.png");
}
.oauth-facebook {
  background-image: url("/static/img/oauth/facebook.png");
}

/* 導覽列的容器 */
.nav-oauth {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

/*20251127*/
/* =========================================
   手機 Drawer 最終樣式（覆蓋前面設定）
   - Logo + 標題 + 關閉按鈕排好
   - 全部商品 = 大字主選單
   - 商品分類 = 可展開 / 收合，有箭頭
   - 子分類 = 縮排、小一點
   ========================================= */
@media (max-width: 900px) {

  /* 整個側邊欄 */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: -260px;                 /* 初始藏在左邊 */
    width: 240px;
    height: 100vh;
    background: #1f4d41;          /* 深綠 */
    color: #fff;
    box-shadow: 3px 0 10px rgba(0,0,0,0.3);
    padding: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    transition: left .28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer.open {
    left: 0;
  }

  /* 頂部：Logo + 標題 + 關閉 */
  .drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }

  .drawer-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
  }

  .drawer-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;               /* ⭐ 變白，跟背景對比清楚 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .drawer-close {
    background: none;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    color: #ffffff;               /* ⭐ 關閉鍵也改白色 */
  }

  /* 主選單：首頁 / 品牌故事 / 全部商品 / 知識小寶庫 … */
  .drawer-menu {
    margin-top: 4px;
  }

  .drawer-menu > a {
    display: block;
    padding: 12px 0;
    font-size: 18px;              /* 大字 */
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  .drawer-menu > a:last-child {
    border-bottom: none;
  }

  /* 「商品分類」標題 + 箭頭（點這裡展開 / 收合） */
  .drawer-cat-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
  }

  .drawer-cat-toggle span {
    pointer-events: none;         /* 點哪裡都算在一起 */
  }

  .drawer-cat-arrow {
    font-size: 0.9em;
    transition: transform 0.25s ease;
  }

  .drawer-cat-arrow.open {
    transform: rotate(90deg);     /* 展開時箭頭轉向 → 下 */
  }

  /* 子分類區塊：縮排＋細線 */
  .drawer-subcat {
    padding-left: 20px;
    margin: 4px 0 10px;
    border-left: 1px solid rgba(255,255,255,0.22);
  }

  /* 子分類連結：字稍微小一點，沒有底線 */
  .drawer-subcat .subcat-link {
    display: block;
    padding: 5px 0;
    font-size: 15px;
    color: #ffffff;
    opacity: 0.85;
    text-decoration: none;
    border-bottom: none;
  }

  .drawer-subcat .subcat-link:hover {
    opacity: 1;
  }
}
/* ===== 手機 Drawer Header 微調：logo + 標題 + 關閉鍵 ===== */
@media (max-width: 900px) {
  .drawer-header{
    gap: 10px;
    margin-bottom: 12px;
  }

  .drawer-title{
    font-size: 16px;          /* 字小一點 */
    font-weight: 500;
    max-width: 140px;         /* 限制寬度，不要吃到關閉鍵 */
    white-space: normal;      /* 允許換行，不要出現 ... */
    line-height: 1.3;
  }

  .drawer-close{
    margin-left: 4px;         /* 跟標題拉一點距離 */
  }
}
/* ===== 手機 Drawer 商品分類排版調整 ===== */
@media (max-width: 900px) {

  /* 主選單（首頁 / 品牌故事 / 全部商品 / …）維持大字 */
  .drawer-menu > a{
    padding: 14px 0;
    font-size: 17px;
  }

  /* 子分類區塊：只做縮排 + 間距，不要左邊那條線 */
  .drawer-subcat{
    padding-left: 24px;
    margin-top: 6px;          /* 和「全部商品」拉一點距離 */
    margin-bottom: 12px;
    border-left: none;        /* 移除左側直線 */
  }

  /* 子分類連結：字小一點，看得出是下一層 */
  .drawer-subcat .subcat-link{
    padding: 4px 0;
    font-size: 15px;
    border-bottom: none;
    opacity: 0.9;
  }

  .drawer-subcat .subcat-link:hover{
    opacity: 1;
  }
}

/* 手機 Drawer 頂部：Logo + 標題 + 第三方 icon + 關閉鍵 */
@media (max-width: 900px) {
  .drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .drawer-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .drawer-header-oauth {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .drawer-header-oauth .oauth-icon {
    width: 24px;
    height: 24px;   /* 和桌機版 nav-oauth 差不多大小 */
  }
}

/* 手機 Drawer：LOGO 下面的第三方登入 icon 列 */
@media (max-width: 900px) {
  .drawer-top-oauth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;     /* 和 LOGO、選單拉開距離 */
  }

  .drawer-top-oauth .oauth-icon {
    width: 26px;
    height: 26px;
  }
}
/* 手機 Drawer：LOGO 下面的第三方登入 icon 列，橫向排列 */
@media (max-width: 900px) {
  .drawer-top-oauth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;        /* 和 LOGO / 選單拉開一點距離 */
  }

  /* ⭐ 覆蓋通用的 .mobile-drawer a 樣式，改成小圓 icon 橫排 */
  .drawer-top-oauth a {
    display: inline-flex;
    padding: 0;
    margin: 0;
    border-bottom: none;
    width: auto;
  }

  .drawer-top-oauth .oauth-icon {
    width: 26px;
    height: 26px;
  }
}


/*20251128*/
/* ✅ Hero 幻燈片圓點：桌機可點，手機隱藏避免干擾側邊選單 */
.hero-dots {
  position: absolute;
  z-index: 10;           /* 不要蓋到整個世界就好 XD */
  pointer-events: auto;
}

/* 手機（含以下寬度）直接隱藏 Hero 白點 */
@media (max-width: 768px) {
  .hero-dots {
    display: none !important;
    pointer-events: none !important;
  }
}


/* ✅ 如果有覆蓋層（漸層 / 遮罩）一律禁止攔截滑鼠 */
.hero::before,
.hero::after,
.hero-slide::before {
  pointer-events: none;
}

/* =========================
   商品詳情主圖：背景顏色改成和頁面一樣
   ========================= */
.product-main-frame {
  background: #e9f3f0;   /* 跟 body 一樣的淡綠灰底 */
  box-shadow: none;      /* 可選：如果想要更扁平就拿掉陰影 */
}

.product-main-img {
  background: #e9f3f0;   /* 圖片沒填滿的地方也用同樣底色 */
  object-fit: contain;   /* 避免被裁切，保留完整花藝 */
}
/* =========================
   商品詳情主圖：去掉卡片感，和背景完全融合
   ========================= */
.product-main-frame {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;

  background: transparent !important;  /* 不再另外鋪底 */
  border-radius: 0 !important;         /* 去掉外框圓角 */
  box-shadow: none !important;         /* 去掉陰影 */
}

/* 主圖本身也不要白底 / 圓角，直接貼在背景上 */
.product-main-img {
  width: 100%;
  height: auto;
  display: block;

  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain;                 /* 保留完整照片 */
}

/* ===============================
   ✅ 商品頁主圖統一尺寸 + 徹底去除外框痕跡（最終版）
   =============================== */

/* 1️⃣ 強制整個 slider 容器「不再有任何卡片底」 */
.product-slider,
.product-slider * {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 2️⃣ 主圖顯示框：固定比例，不會忽大忽小 */
.product-slider{
  max-width: 680px;   /* ✅ 原本 520 -> 放大 */
  width:100%;
  margin:0 auto;
  overflow:hidden;
  aspect-ratio: 4 / 5;  /* ✅ 改成更適合商品比例 */
}

/* 3️⃣ 每一頁 slide 固定佔滿框 */
.product-slide-wrap{
  flex: 0 0 100%;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* 4️⃣ ✅ 關鍵：圖片改成「填滿＋裁切」→ 尺寸就會完全一致 */
.product-slide{
  width:100%;
  height:100%;
  object-fit: cover;   /* ✅ 由 contain 改為 cover */
  display:block;
}

/* 5️⃣ 縮圖也同步統一比例 */
.thumb-img{
  width:72px;
  height:72px;
  object-fit: cover;
  background: transparent;
}

/* ✅ 手機版側邊選單：隱藏三個白色第三方登入按鈕 */
@media (max-width: 768px){
 .drawer-oauth .auth-oauth-btn {
    display: none;
  }

  .auth-social-title{
    display: none !important;
  }
}
/*20251128*/
/* ===== 後台：會員管理 ===== */
.admin-user-search{
  margin:12px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.admin-user-search .input{
  min-width:220px;
}

.admin-user-table th,
.admin-user-table td{
  padding:8px 10px;
  font-size:14px;
}

.btn-sm{
  padding:6px 10px;
  font-size:13px;
}

.admin-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
}
.admin-badge.ok{
  background:#3c8c5a;
  color:#fff;
}
.admin-badge.muted{
  background:#ddd;
  color:#555;
}

.admin-card{
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:20px;
  background:#fff;
}

.admin-user-form .form-row{
  margin-bottom:14px;
}
.admin-user-form label{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}
.admin-user-form .input{
  width:100%;
  max-width:420px;
}
.admin-user-form .input-sm{
  max-width:160px;
}
.admin-user-form .readonly-field{
  padding:8px 10px;
  border-radius:8px;
  background:#f5f5f5;
  font-size:14px;
}

.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-size:14px;
}

.form-help{
  font-size:12px;
  color:#888;
  margin-top:4px;
}

.form-actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/*2025.11.28購物車*/
/* ---- 購物車版面 - Perth's King 精簡風 ---- */
.cart-steps {
  display:flex;
  gap:8px;
  margin-bottom:12px;
  font-size:13px;
}
.cart-steps .step {
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d1ddd7;
  color:#52645c;
}
.cart-steps .step.active {
  background:#245f52;
  color:#fff;
  border-color:#245f52;
}

.cart-layout {
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.cart-main {
  flex:1;
}

.cart-summary {
  width:280px;
  flex-shrink:0;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid #dde4e0;
  background:#f7faf8;
}

.cart-thumb {
  width:72px;
  height:72px;
  border-radius:10px;
  object-fit:cover;
}

.cart-qty-input {
  width:80px;
}

/* RWD：手機改成上下排 */
@media (max-width: 768px) {
  .cart-layout {
    flex-direction:column;
  }
  .cart-summary {
    width:100%;
    position:static;
  }
}

/* Checkout 付款方式選項 */
.checkout-pay-option {
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dde4e0;
  background:#fff;
  cursor:pointer;
  align-items:flex-start;
}
.checkout-pay-option + .checkout-pay-option {
  margin-top:8px;
}
.checkout-pay-option input[type="radio"] {
  margin-top:4px;
}
.checkout-pay-option .title {
  font-size:14px;
  font-weight:600;
  color:#245f52;
}
.checkout-pay-option .desc {
  font-size:12px;
  color:#666;
  line-height:1.6;
}
.checkout-pay-option:hover {
  border-color:#88b09c;
  background:#f6faf8;
}

/*1201*/
/* 付款方式整體列表 */
.checkout-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 單一付款方式卡片 */
.checkout-pay-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dde4e0;
  background: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
}

/* 小小一顆圓點就好 */
.checkout-pay-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;       /* 不要被撐大或被擠扁 */
}

/* 右邊文字區塊佔滿剩下寬度 */
.checkout-pay-option .text {
  flex: 1;
}

/* 標題／說明文字 */
.checkout-pay-option .title {
  font-size: 14px;
  font-weight: 600;
  color: #245f52;
  margin-bottom: 2px;
}

.checkout-pay-option .desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* hover 效果：只稍微變色，不改尺寸 */
.checkout-pay-option:hover {
  border-color: #88b09c;
  background: #f6faf8;
}




/*2025.11.29*/
/* ====== 我的訂單頁 UI 美化 ====== */
.order-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.order-card{
  background:#fff;
  border-radius:18px;
  padding:16px 20px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.03);
}

.order-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.order-no{
  font-size:16px;
  font-weight:600;
  margin-bottom:4px;
}

.order-meta{
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.order-meta .dot{
  opacity:.6;
}

.order-head-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.order-total-strong{
  font-size:18px;
  font-weight:700;
}

.order-items{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}

.order-items .item-name{
  font-weight:500;
  color:var(--text, #20322f);
}

.order-items .item-qty{
  margin-left:4px;
}

.order-items .item-more{
  margin-left:8px;
}

.order-footer{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px;
}

/* 狀態徽章 */
.badge{
  display:inline-block;
  padding:2px 10px 3px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  border:1px solid transparent;
  line-height:1.4;
}

.badge-success{
  background:#e2f5ee;
  border-color:#b7e3d2;
  color:#0b6b4f;
}

.badge-warning{
  background:#fff6d9;
  border-color:#ffe5a6;
  color:#946200;
}

.badge-danger{
  background:#fde5e5;
  border-color:#f3b4b4;
  color:#c0392b;
}

.badge-info{
  background:#e3efff;
  border-color:#bfd6ff;
  color:#1f5ca8;
}

.badge-muted{
  background:#f1f3f5;
  border-color:#dee2e6;
  color:#6c757d;
}

/* 手機版微調 */
@media (max-width: 768px){
  .order-card{
    padding:14px 14px 12px;
  }
  .order-card-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .order-head-right{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
}

/* === 手機 Drawer 灰色背景（#6F746F 版本） === */
.mobile-drawer {
  background: rgba(111,116,111,0.85) !important;  /* #6F746F + 毛玻璃感 */
  backdrop-filter: blur(18px) !important;
}
/* ===== 電腦版：LOGO 靠左 ===== */
@media (min-width: 769px) {
  .brand-inner {
    justify-content: flex-start !important;
  }
}

/* ===== 手機版：LOGO置中 ===== */
@media (max-width: 768px) {
  .brand-inner {
    justify-content: center !important;
  }
}

/*202511302第二台橫幅*/
/* ==== 首頁 rows：滿版橫幅模式 ==== */
.home-section-full {
  padding: 0;                    /* 上下不要再加一層大 padding，讓橫幅貼齊一點 */
}

/* 讓這一排的 container 撐到全寬，圖片才能變橫幅 */
.home-section-full > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 圖片變成橫幅，全寬、不限制高度、不圓角 */
.home-section-full .col.image img {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
}

/* 手機版可以稍微恢復一點上下間距＋左右 padding，看起來不會太緊 */
@media (max-width: 900px){
  .home-section-full {
    padding: 24px 0;
  }
  .home-section-full > .container {
    padding: 0 20px;
  }
}
/* 全站按鈕顏色修改為 #6F746F */
.btn,
.hero-btn {
  background-color: #6F746F !important;
  border-color: #6F746F !important;
}

.btn:hover,
.hero-btn:hover {
  background-color: #5f645f !important;
  border-color: #5f645f !important;
}

/*智識小寶庫*/
.kb-thumb img {
  width: 100%;
  height: auto;        /* ⭐ 讓圖片自己縮 */
  max-height: 200px;   /* 可調 */
  object-fit: contain; /* ⭐ 等比例完整顯示 */
  border-radius: 12px;
}

/*LOGO*/
/* === 品牌徽章精緻版 === */

/* 品牌列高度稍微瘦一點 */
.header-brand-bar {
  padding: 15px 0;
}

/* 讓品牌列裡面的東西靠左垂直置中 */
.brand-inner {
  display: flex;
  align-items: center;
}

/* LOGO + 文字做成一個小徽章 */
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;
  border-radius: 999px;                /* 膠囊形（你如果想方一點可以改 12px） */
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

  text-decoration: none;
}

/* LOGO 圖片縮小＋方框感 */
/* === 品牌徽章配色微調：底色跟 header 一樣、文字白色 === */

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;                 /* ⭐ 看起來跟 header 一體 */
  border: none;
  box-shadow: none;
  text-decoration: none;
}

/* LOGO：保留白底小方框，讓它更清楚 */
.brand-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  object-fit: contain;
}

/* 品牌文字：白色、細緻一點 */
.brand-logo-text {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #ffffff;                          /* ⭐ 文字改成白色 */
  white-space: nowrap;
}

/*tttt*/
/* ==== 手機版 LOGO 最終調整：上方 + 側邊欄一起縮小 ==== */
@media (max-width: 768px) {

  /* 上方灰色橫條：高度壓低一點 */
  .header-brand-bar {
    padding: 25px 0;
  }

  /* 左右間距縮小一點，不要太寬 */
  .brand-inner {
    justify-content: center;
    gap: 4px;
  }

  /* 頁首 LOGO 圖片：縮小 */
  .brand-logo-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
  }

  /* 「植感 ◎ 樸石」字體縮小一級 */
  .brand-logo-text {
    font-size: 16px !important;
    letter-spacing: 0.10em;
  }

  /* 中間那顆金色小圖示 */
  .brand-inline-icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 2px;
  }

  /* 手機左側 Drawer 上方 LOGO + 標題 */
  .drawer-header {
    padding: 10px 12px;
  }

  .drawer-logo {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
  }

  .drawer-title {
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 0.10em;
    white-space: nowrap;
  }
}

/* ---- Logo旁品牌文字：金色 + 嵌入小圖示 ---- */

.brand-logo-text {
  font-size: 15px;
  font-weight: 500;
  /*color: #d9b46a;         /* ✨金色字體 */
  color: #ffffff;
  letter-spacing: 0.08em; /* 品牌感字距 */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.brand-logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #145d52;          /* 深綠字 */
}



/* 中間那顆圖示 */
.brand-inline-icon {
  width: 20px;            /* 可改 14 / 18 看你覺得大小 */
  height: 20px;
  margin: 0 1px;
  object-fit: contain;
  display: inline-block;
}
.drawer-title .brand-inline-icon {
  width: 11px;
  height: 11px;
  margin: 0 1px;
}

/* === Hero 上下留白（桌機 + 手機都適用） === */
.hero-slider-inner {
  margin-top: 0px;      /* 上方空隙，想多一點就改 32 或 40 */
  margin-bottom: 15px;   /* 下方空隙 */
}
/*20251201order.html*/
/* ---- 後台訂單列表美化 ---- */

.admin-order-table th,
.admin-order-table td {
  vertical-align: top;
}

.admin-order-main-row td {
  padding-top: 10px;
  padding-bottom: 6px;
}

.admin-order-items-row td {
  padding-top: 4px;
  padding-bottom: 10px;
  border-top: none;
  background: rgba(255, 255, 255, 0.6);  /* 比主列淺一點的底色，可依喜好調整 */
}

.admin-order-actions {
  text-align: center;
  white-space: nowrap;
}

.admin-order-actions .btn {
  display: block;
  margin: 2px auto;
  min-width: 110px;
}

.admin-order-actions form {
  margin: 0;
}

.small {
  font-size: 0.9rem;
}

.nowrap {
  white-space: nowrap;
}

/* 刪除按鈕一點點警示色，可依你的色票調整 */
.btn.danger {
  border-color: #b85c5c;
}

.btn.danger:hover {
  background-color: #b85c5c;
  color: #fff;
}

/*20251201*/
/* ===== 最終版 LOGO 文字切換（桌機：中文，手機：英文） ===== */

/* 基本字型樣式（顏色白色，配 #6F746F 背景） */
.brand-logo-text {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* 桌機顯示中文，手機隱藏 */
.brand-logo-text-desktop {
  display: inline-flex;
}

/* 手機預設不顯示英文那行 */
.brand-logo-text-mobile {
  display: none;
}

/* 手機寬度以下：只顯示英文 Plantgems E.O. */
@media (max-width: 768px) {
  .brand-logo-img {
    display: none;              /* ❗ 手機隱藏圖示，只留文字 */
  }
  .brand-logo-text-desktop {
    display: none;
  }
  .brand-logo-text-mobile {
    display: inline-flex;
    align-items: center;
    font-size: 21px;
    letter-spacing: 0.08em;
  }
}


/*20251201購物人資料*/
/* === Checkout 表單：線條顏色 & 間距 === */

/* 補上全站共用的線條色 / 淡字色，讓 input 邊框看得清楚 */
:root {
  --line: #d0ddd6;
  --muted: #6f746f;
}

/* 收件人那幾個 label（class="stack-xs"）的上下間距 */
.stack-xs > * + * {
  margin-top: 4px;
}

/* 收件人資訊、付款方式卡片專用：邊框＋一點陰影，跟背景拉開 */
.checkout-card {
  border: 1px solid #d0ddd6;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

/* 收件人小標顏色淡一點、統一風格 */
.checkout-card .muted {
  color: var(--muted);
  font-size: 13px;
}
/*20251201購物車圖示*/
/* ===== Header 購物車圖示＋數量徽章（B-1）===== */

.nav-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
  position: relative;
}

/* 圓形底的購物車 icon */
.nav-cart-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  color: #145d52;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 右上角紅色數量徽章 */
.nav-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d86a3b;             /* 橘紅色 */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #145d52;   /* 外面加一圈深綠描邊 */
}

/* 「購物車」文字 */
.nav-cart-text {
  font-size: 14px;
}

/* 手機寬度時，可以把文字藏起來，只留 icon+數字 */
@media (max-width: 768px) {
  .nav-cart-text {
    display: none;
  }
}
/* ===== 手機 Drawer 裡的購物車列（B-2）===== */

.drawer-cart-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-cart-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #145d52;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* ===== 購物車商品卡片排版 ===== */
/*20251201*/
/* ===== 購物車商品卡片排版 ===== */

/* 桌機：左圖右文字 */
.cart-item {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* 圖片區統一寬度 */
.cart-item-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* 文字區撐滿右側 */
.cart-item-body {
  width: 100%;
}

/* 商品標題／文字排版 */
.cart-item-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.cart-item-meta {
  font-size: 14px;
  color: #58645a;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 數量 + 更新按鈕橫排 */
.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.cart-item-actions input[type="number"] {
  width: 80px;
}

/* 手機：改成圖在上、字在下 */
@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cart-item-thumb {
    max-width: 320px;
    margin: 0 auto;
  }

  .cart-item-body {
    padding: 0 12px 8px;
  }
}


/*20251201購物車彈跳*/
/* ===== 加入購物車 Toast 提醒 ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;                 /* 高度預留給手機底部結帳條 */
  transform: translateX(-50%) translateY(20px);
  z-index: 1600;

  min-width: 260px;
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 8px;

  background: rgba(76, 84, 80, 0.96); /* 灰綠色系，跟你的 header 很像 */
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  font-size: 18px;
}

.toast-text {
  line-height: 1.5;
}

/* 小螢幕微調位置 */
@media (max-width: 768px) {
  .toast {
    bottom: 96px;   /* 避開手機底部浮動結帳條 (mobile-checkout-bar) */
    font-size: 13px;
  }
}
/*20251201手機板顯示上方購物車*/
/* 手機版：品牌列右上角購物車 icon */
.nav-cart-mobile-header {
  margin-left: auto;        /* 把 icon 推到最右邊 */
  display: none;            /* 先關閉，下面 media query 再打開 */
}

/* 只在手機寬度顯示 */
@media (max-width: 768px) {
  .nav-cart-mobile-header {
    display: inline-flex;
  }

  /* 手機這顆不需要文字，只留圓形 icon + 數字 */
  .nav-cart-mobile-header .nav-cart-text {
    display: none;
  }
}

/*20251204*/
.checkout-pay-option.disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* === 結帳頁：超商別直排選單 === */
.cvs-brand-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.cvs-brand-title {
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 6px;   /* 讓標題跟第一行 radio 對齊 */
}

.cvs-brand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 每一行超商 */
.cvs-brand-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7faf8;          /* 淺底色（未選） */
  border: 1px solid #dde4e0;
  font-size: 13px;
  cursor: pointer;
}

/* 讓白點與文字垂直置中 */
.cvs-brand-item input[type="radio"] {
  margin: 0;
}

/* 讓字不要吃到點擊事件 */
.cvs-brand-item span {
  line-height: 1.4;
}

/* ✅ 有勾選的那一行，底色加深、邊框變色 */
.cvs-brand-item:has(input[type="radio"]:checked) {
  background: #e3efe7;
  border-color: #6f746f;
  font-weight: 600;
}
.cvs-brand-list {
  display: flex;
  flex-direction: column;
  gap: 4px;              /* 原本 6 → 4，整欄更緊湊一點 */
}

.cvs-brand-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;     /* 原本 6px → 4px，減少高度 */
  border-radius: 999px;
  background: #f7faf8;
  border: 1px solid #dde4e0;
  font-size: 13px;
  cursor: pointer;
}

/* 讓店名整行不換行 */
.cvs-brand-item span {
  line-height: 1.4;
  white-space: nowrap;   /* ⭐ 關鍵：不換行 */
}

/**/
/* === Checkout / 訂單摘要 & 優惠碼 === */

.cart-summary{
  background:#fff;
  border-radius:20px;
  padding:18px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
  position:sticky;
  top:96px;
}

.cart-summary .small-row{
  font-size:14px;
  margin-bottom:4px;
}

.cart-summary .summary-separator{
  border:none;
  border-top:1px solid var(--line);
  margin:8px 0 10px;
}

.coupon-input-group{
  display:flex;
  gap:8px;
  align-items:center;
}

.coupon-input-group input[type="text"]{
  flex:1;
  border-radius:999px;
  border:1px solid var(--line);
  padding:8px 12px;
  font-size:14px;
}

/* 超商品牌選擇 pill */
.cvs-brand-group{
  margin-top:8px;
}

.cvs-brand-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.cvs-brand-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  cursor:pointer;
}

.cvs-brand-pill input{
  margin:0;
}

.cvs-brand-pill:hover{
  background:var(--soft);
}

/* 手機縮小時，讓右側摘要往下排 */
@media (max-width: 768px){
  .cart-layout{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .cart-summary{
    position:static;
  }
}

.cvs-brand-group{
  margin-top:8px;
}

.cvs-brand-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.cvs-brand-pill{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  cursor:pointer;
  background:#fff;
}

.cvs-brand-pill:hover{
  background:var(--soft);
}

.cvs-brand-pill input[type="radio"]{
  margin:2px 0 0 0;  /* 靠左上 */
  transform:scale(0.9);  /* 白點小一點 */
}

.cvs-brand-pill .brand-text{
  display:flex;
  flex-direction:column;
}

.cvs-brand-pill .brand-name{
  font-weight:500;
  margin-bottom:2px;
}

.cvs-brand-pill .brand-fee{
  font-size:12px;
  color:var(--muted-text, #666);
}

/*1205*/
/* === 超商選擇 pill === */

.cvs-brand-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
  width: 100%;
}

.cvs-brand-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dcdcdc;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

/* hover 效果 */
.cvs-brand-pill:hover {
  background: #f8f8f8;
}

/* 白點（radio）縮小、靠左、置中 */
.cvs-brand-pill input[type="radio"] {
  flex-shrink: 0;
  transform: scale(1.2);
  margin: 0;
}

/* 右邊文字區 */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-name {
  font-weight: 600;
  font-size: 14px;
}

.brand-fee {
  font-size: 12px;
  color: #666;
}
/* === Checkout: 左右兩欄版 === */

.cart-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 左側內容（含收件人 + 配送方式 + 超商） */
.cart-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 右側訂單摘要 */
.cart-summary {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* 手機版：改成上下排列 */
@media (max-width: 768px){
  .cart-layout{
    flex-direction: column;
  }
  .cart-summary{
    width: 100%;
    position: static;
  }
}
/**/
/* === Checkout：超商品牌選擇 pill 最終版 === */

.cvs-brand-group {
  margin-top: 8px;
}

.cvs-brand-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  width: 100%;
}

.cvs-brand-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;              /* ⭐ 縮小高度 */
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

/* hover 輕微變色就好 */
.cvs-brand-pill:hover {
  background: var(--soft);
}

/* 左邊白點：縮小一點、置中 */
.cvs-brand-pill input[type="radio"] {
  flex-shrink: 0;
  transform: scale(0.9);
  margin: 0;
}

/* 右邊文字區 */
.cvs-brand-pill .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

/* 店名 / 運費說明 */
.cvs-brand-pill .brand-name {
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 2px;
  white-space: normal;            /* ⭐ 允許換行，不要硬塞一行 */
}

.cvs-brand-pill .brand-fee {
  font-size: 12px;
  color: var(--muted);
  white-space: normal;
}

/* 如果之前有任何地方對 .cvs-brand-pill span 設 white-space:nowrap，這裡把它蓋掉 */
.cvs-brand-pill span {
  white-space: normal !important;
}

/**/

/* 修正 radio / checkbox 被拉到 100% 寬的問題 */
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  max-width: none;
  padding: 0;        /* 不要有 input 共用的 padding */
}
/* === Checkout：超商品牌樣式，跟上面配送方式一樣 === */

.cvs-brand-group{
  margin-top: 10px;
}

.cvs-brand-group .muted{
  font-size: 13px;
}

/* 整個列表像上面一樣直排 */
.cvs-brand-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 單一超商卡片：複製 checkout-pay-option 的感覺 */
.cvs-brand-pill{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;                /* ✅ 和上面一樣方角 */
  border: 1px solid #dde4e0;
  background: #fff;
  cursor: pointer;
}

/* 左邊白點：大小、位置跟上面一樣 */
.cvs-brand-pill input[type="radio"]{
  margin-top: 4px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* 右邊文字區 */
.cvs-brand-pill .brand-text{
  flex: 1;
}

/* 標題：用同一種綠色 */
.cvs-brand-pill .brand-name{
  font-size: 14px;
  font-weight: 600;
  color: #245f52;                     /* 和「宅配到府」標題同色 */
  margin-bottom: 2px;
}

/* 說明小字 */
.cvs-brand-pill .brand-fee{
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* hover 效果也跟上面一樣 */
.cvs-brand-pill:hover{
  border-color: #88b09c;
  background: #f6faf8;
}




/* === Checkout 雙欄版：左側表單 + 右側 優惠碼＋訂單摘要 === */

/* 外層：左右兩欄 */
.cart-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

/* 左側表單：收件人＋配送方式 */
.cart-main{
  flex:1 1 auto;
  min-width:0;
}

/* 右側欄：上方優惠碼，下方訂單摘要 */
.cart-side{
  width:320px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* 訂單摘要：右側固定在畫面（桌機） */
.cart-summary{
  background:#fff;
  border-radius:20px;
  padding:18px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
  border:1px solid #dde4e0;
  position:sticky;
  top:96px;        /* 可依你 header 高度微調 */
}

/* 優惠碼 card 外觀跟左側卡片一致即可（已經有 checkout-card，可略過） */
.coupon-card{
  border-radius:20px;
}

/* 手機版：改成上下排，右側欄整個掉到下面 */
@media (max-width: 768px){
  .cart-layout{
    flex-direction:column;
  }
  .cart-side{
    width:100%;
  }
  .cart-summary{
    position:static;
  }
}
/*20251205*/
.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/*20251205粉專*/
.site-footer {
  margin-top: 40px;
  background: #6F746F;
  color: #fff;
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

/* 桌機：聯絡資訊稍微往右移一點 */
@media (min-width: 769px) {
  .footer-contact {
    margin-left: 40px;
  }
}

.footer-contact h4 {
  font-size: 15px;
  margin: 0 0 8px;
}

.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact li {
  font-size: 14px;
  line-height: 1.7;
}

/* 社群圖示區 */
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 社群 QR Code 大小 */
.footer-social img{
  width: 80px;       /* 桌機：大一點，手機掃碼比較輕鬆 */
  height: auto;
  border-radius: 0;  /* QR Code 用方形，看起來比較正常 */
}

/* 手機 / 平板稍微縮小一點 */
@media (max-width: 992px){
  .footer-social img{
    width: 70px;
  }
}

@media (max-width: 768px){
  .footer-social img{
    width: 60px;
  }
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* 一個 QR 區塊（上下排列） */
.footer-social-item {
  display: flex;
  flex-direction: column;     /* ❗ 垂直排列 */
  align-items: center;        /* ❗ 置中 */
  text-align: center;
}

/* QR 圖示放大 */
.footer-social-item img {
  width: 60px;   /* 你可自行調整 100~150 */
  height: auto;
  border-radius: 10px;  /* IG QR 比較圓角會好看 */
}

/* 文字在 QR 下方 */
.footer-social-label {
  margin-top: 8px;
  font-size: 15px;
  color: #fff;
}

/* 統一控制每個首頁段落的上下間距 */
.home-section {
  padding: 30px 0;   /* 原本 60 → 建議改成 100 或 120 */
}

/*****/
/* ===== 桌機：rows 左右兩欄置中 ===== */
@media (min-width: 901px){

  /* 左圖右文、左文右圖 這兩種版型才需要調整 */
  .home-section.image_left .home-section-inner,
  .home-section.image_right .home-section-inner{
    justify-content: center;   /* 整組往中間靠 */
  }

  /* 兩欄給固定比例，左右留一點空間 */
  .home-section.image_left .col.image,
  .home-section.image_left .col.text,
  .home-section.image_right .col.image,
  .home-section.image_right .col.text{
    flex: 0 0 44%;
    max-width: 44%;
  }

  /* 欄與欄之間再拉開一點距離（看效果可再微調） */
  .home-section-inner{
    gap: 0px;
  }
}
/***************/
/* ============================
   ★ 首頁 Rows 最佳 16:9 圖片排版 ★
   ============================ */

/* --- 更漂亮的容器（桌機版） --- */
@media (min-width: 901px){
  .container{
    max-width: 1280px;    /* 原本 1080 → 改到 1280，畫面更大更好看 */
    margin: 0 auto;
    padding: 0 32px;
  }
}

/* --- 每個區塊上下距離較自然 --- */
.home-section{
  padding: 48px 0;        /* 原本 60 → 改 48，視覺更緊實 */
}

/* --- 桌機版的圖片＋文字排列 --- */
@media (min-width: 901px){

  /* 左右並排並置中 */
  .home-section-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;            /* 圖文距離 */
  }

.home-section.image_left  .col.image,
.home-section.image_right .col.image{
    flex: 0 0 50%;
    max-width: 50%;
}

.home-section.image_left  .col.text,
.home-section.image_right .col.text{
    flex: 0 0 50%;
    max-width: 50%;
}

  /* 左圖右文（預設） */
  .home-section.image_left .home-section-inner{
    flex-direction: row;
  }

  /* 左文右圖（你的第二區會用到） */
  .home-section.image_right .home-section-inner{
    flex-direction: row;
  }

  /* --- 16:9 圖片固定比例顯示、不裁切 --- */
  .home-section .col.image img{
    width: 100%;
    aspect-ratio: 16 / 9;     /* 強制 16:9 */
    object-fit: contain;      /* 不裁掉圖片 */
    border-radius: 16px;
    background: #e3ece8;      /* 淡綠背景，不會出現黑邊 */
  }
}

/* ---------------------
   手機版維持原本排法
   --------------------- */
@media (max-width: 900px){
  .home-section-inner{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .home-section .col.image img{
    width: 100%;
    height: auto;
    object-fit: cover;    /* 手機版 cover 比較漂亮 */
    max-height: 260px;
  }
}
/*20251207手機排版*/
/* ==== 手機版修正：首頁 rows 固定「上圖下文」 & 不裁切 16:9 圖片 ==== */
@media (max-width: 900px){

  /* 兩種左右排版，手機一律改上下 */
  .home-section.image_left .home-section-inner,
  .home-section.image_right .home-section-inner {
    flex-direction: column;
    text-align: center;
  }

  /* 圖永遠排第一、文字永遠排第二 */
  .home-section .col.image {
    order: 1;
    width: 100%;
  }
  .home-section .col.text {
    order: 2;
    width: 100%;
  }

  /* 圖片保持 16:9 完整顯示，不裁切、不放大超出 */
  .home-section .col.image img {
    width: 100%;
    height: auto;            /* 保持比例 */
    aspect-ratio: 21/9;      /* 明確告訴瀏覽器是 16:9 */
    object-fit: contain;     /* 不裁圖，完整顯示 */
    max-width: 100%;
  }

  /* 文字區域與圖片保持距離 */
  .home-section .col.text {
    padding: 20px 10px;
  }
}

/* 後台訂單列表：每筆訂單之間加入分隔線（偽元素法） */
.admin-table-wrapper table tbody tr {
    position: relative;
}

.admin-table-wrapper table tbody tr::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
}

/* 最後一筆不要線 */
.admin-table-wrapper table tbody tr:last-child::after {
    display: none;
}

/* 會員「我的訂單」列表：物流進度區塊 */
.order-logistics {
  font-size: 13px;
  line-height: 1.5;
}

.order-logistics .muted {
  opacity: 0.8;
}

/* 商品頁：主圖跟縮圖緊一點 */
.product-slider {
  margin-bottom: 2px !important;      /* 主圖下面只留 4px */
}

.product-slider + .flex {
  margin-top: 2px !important;         /* 縮圖列上面只留 4px，蓋掉 inline style */
}
/*20251211*/
/* ==== 商品頁 Tabs 區塊 ==== */

.product-tabs-section {
  margin-top: 40px;
  background: var(--warm-white);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.product-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--soft, #e4ebe4);
  margin-bottom: 16px;
}

.product-tabs-nav .tab-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 999px;
  color: var(--text-light);
  transition: background 0.2s ease, color 0.2s ease;
}

.product-tabs-nav .tab-btn.active {
  background: rgba(47,100,92,0.08);
  color: var(--green-main);
  font-weight: 600;
}

.product-tabs-body .tab-panel {
  display: none;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-main);
}

.product-tabs-body .tab-panel.active {
  display: block;
}

/* 技術文件列表 */
.product-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-doc-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  text-decoration: none;
  font-size: 14px;
}

.product-doc-item:hover {
  text-decoration: underline;
}
/*20251210留言板*/
/* ===== 我的訂單 / 訂單詳情：聊天室 ===== */

.order-detail-card{
  background:#fff;
  border-radius:20px;
  padding:18px 20px;
  border:1px solid #dde4e0;
}

.order-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.order-detail-header-right{
  text-align:right;
}

.order-detail-body{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:16px;
}

.order-detail-col{
  flex:1 1 260px;
  min-width:0;
}

/* 商品列表 table */
.order-items-table table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.order-items-table th,
.order-items-table td{
  padding:8px 6px;
  border-bottom:1px solid #e1e4e2;
}
.order-items-table th{
  text-align:left;
  font-weight:600;
}

/* 聊天外框 */
.order-chat-card,
.admin-order-chat{
  margin-top:20px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #dde4e0;
  background:#f8faf8;
}

/* 訊息列表 */
.order-chat-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:260px;
  overflow-y:auto;
  padding-right:4px;
  margin-bottom:10px;
}

/* 單則訊息 */
.chat-msg{
  display:flex;
  font-size:13px;
}

/* 會員在右，客服在左（前台） */
.chat-msg.me{
  justify-content:flex-end;
}
.chat-msg.admin{
  justify-content:flex-start;
}

/* 後台：反過來（管理員在右） */
.chat-msg.customer{
  justify-content:flex-start;
}

/* 氣泡 */
.chat-msg .bubble{
  max-width:80%;
  padding:8px 10px;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}

/* 前台會員自己的氣泡顏色 */
.chat-msg.me .bubble{
  background:#dfeee6;
}

/* who + 時間 */
.chat-msg .who{
  margin-bottom:2px;
  color:#6b756e;
}

/* 輸入區 */
.chat-form{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.chat-form textarea{
  flex:1 1 auto;
  min-height:60px;
  border-radius:10px;
  border:1px solid #cfd5d1;
  padding:8px 10px;
  font-size:14px;
  resize:vertical;
}
.chat-form .btn{
  white-space:nowrap;
}

/* 我的訂單卡片底部左右排 */
.order-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.order-footer-right{
  flex-shrink:0;
}
@media (max-width: 600px){
  .order-detail-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .order-detail-header-right{
    text-align:left;
  }
  .order-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

.order-msg-cell {
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
}

.badge-alert {
  background: #c0392b;
  color: #fff;
}

.badge-muted {
  background: #e4ebe4;
  color: #6b756e;
}

.badge-empty {
  color: #bbb;
}


/* ===== Oppa Coffee Orchard additions ===== */
.page-hero{margin-bottom:18px}
.lead{font-size:18px; line-height:1.7}
.body-lg{font-size:16px; line-height:1.9}
.rounded-lg{border-radius:18px}
.shadow-soft{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card.soft{background: rgba(255,255,255,.65); backdrop-filter: blur(6px)}
.card-link{display:block; text-decoration:none; color:inherit}
.section-head{margin-bottom:12px}
.card-grid-6{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px}
.card-16x9{overflow:hidden}
.card-16x9-media{width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:16px}
.card-tag{font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:6px}
.feature-ico{font-size:28px; margin-bottom:8px}
.cta-card{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px}
.timeline{border-left:3px solid rgba(0,0,0,.08); padding-left:14px}
.timeline-item{padding:10px 0}
.timeline-year{font-weight:700; margin-bottom:4px}
.tabs{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 6px}
.tab{display:inline-block; padding:10px 14px; border-radius:999px; background:#fff; text-decoration:none; color:inherit; border:1px solid rgba(0,0,0,.08)}
.tab.is-active{border-color:rgba(0,0,0,.25); font-weight:700}

/* nav icon + text */
.main-nav a{display:flex; align-items:center; gap:8px}
.main-nav .nav-ico{font-size:16px; line-height:1}
@media (max-width: 900px){
  .card-grid-6{grid-template-columns:repeat(2,1fr)}
  .cta-card{flex-direction:column; align-items:flex-start}
}
@media (max-width: 520px){
  .card-grid-6{grid-template-columns:1fr}
}

.card-16x9-media.placeholder{
  background: rgba(0,0,0,.04);
}


/* =========================================================
   方案 A｜文字主視覺（最穩、最日系）— 歐爸的咖啡園
   - 避免破圖：logo 圖片存在才顯示（模板已做 if brand_logo）
   - 主題色可改：調整 --oppa-green / --oppa-green-2 即可
   ========================================================= */
:root{
  --oppa-green: #2f645c;     /* 主色：森林綠 */
  --oppa-green-2: #7aa08f;   /* 點綴：苔蘚綠 */
  --oppa-ink: #ffffff;       /* LOGO 文字色 */
}

.header-brand-bar{
  /* 讓上方 LOGO 區塊像「招牌」一樣穩定 */
  min-height: 64px;
  display: flex;
  align-items: center;

  /* 自然感漸層（不違和、比純灰更有質感） */
  background: linear-gradient(90deg, rgba(47,100,92,.95), rgba(122,160,143,.9));
}

.brand-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 方案A：以文字為主，不強制顯示圖片 */
.brand-logo-img{ display:none; }

.brand-logo-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand-logo-img {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18); /* 或 #2f3f39 */
}


/* 桌機字大一點 */
.brand-logo-text-desktop{
  display:inline-block;
  font-size: 30px;
}

/* 手機字稍小 */
.brand-logo-text-mobile{
  display:none;
  font-size: 18px;
}

/* RWD：手機顯示 mobile 版本 */
@media (max-width: 700px){
  .brand-logo-text-desktop{ display:none; }
  .brand-logo-text-mobile{ display:inline-block; }
  .header-brand-bar{ min-height: 58px; }
  .brand-logo-link::before{
    width:34px;height:34px;border-radius:12px;
  }
}
.brand-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;

  /* 🔑 關鍵 */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 6px;

  /* 微陰影，讓白色浮起來 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ===== Header LOGO 修正 ===== */
.brand-logo-img {
  height: auto;
  width: auto;
  opacity: 1;
  filter: none;
  display: block;
}


/*20251218*/
/* ===== Header LOGO：填滿白色圓形 ===== */
.brand-logo-img {
  width: 48px;            /* 白色圓形大小，可改 48 / 64 */
  height: 48px;

  border-radius: 50%;
  background: #ffffff;

   🔑 關鍵
  object-fit: cover;     /* 填滿圓形，多的裁掉 */
  padding: 0;            /* ❌ 一定要 0，不然永遠填不滿 */

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: block;
}
/* 導覽列下方到內容的距離（只動第一個區塊的上方）*/
main > .container:first-child,
main > section:first-child {
  padding-top: 12px;   /* 你想更貼就改 0~12px */
}
/*20251218COFFEE*/
/* ===== 桌機版導覽列文字加大 & 清楚 ===== */
@media (min-width: 900px) {
  .main-nav a {
    font-size: 18px;        /* 原本大概 14px → 調到 16px */
    font-weight: 500;       /* 比 400 清楚，但不會太粗 */
    letter-spacing: 1px;  /* 微微拉開，閱讀感會好很多 */
    color: #ffffff;         /* 保證在深色底夠亮 */
  }

  .main-nav a .nav-ico {
    font-size: 17px;        /* icon 比文字大一點點 */
    margin-right: 4px;
  }
}

/* ===== 首頁：果園環境（#features）===== */

/* icon 跟左框距離 */
#features .feature-ico{
  margin-left: 6px;
}

/* 首頁 果園環境：文字與左邊框距離 */
#features .card.soft .h3,
#features .card.soft .muted {
  margin-left: 10px;   /* ⭐ 跟 icon 一致 */
}

.header-nav-bar {
  margin-bottom: 0;
}

.hero-slider {
  margin-top: -30px;
}

@media (max-width: 768px){
  .hero-slide-bg{
    background-size: cover !important;        /* 改滿版裁切 */
    background-position: center top !important; /* 想主體偏下就改 center bottom */
  }
}

/* 首屏不要被強制留白（尤其是首頁幻燈片） */
main > .container:first-child,
main > section:first-child {
  padding-top: 0;   /* 原本 12px 會造成你紅框那段留白 */
}

/* 幻燈片不要硬往上拉（避免手機看起來一條灰帶） */
.hero-slider {
  margin-top: 0;    /* 原本 -15px */
}