:root {
  --bg-dark: #2a1b10;      /* 深色背景 */
  --bg-darker: #000;   /* 更深的背景色 */
  --text: #fff;         /* 預設文字顏色 */
  --accent: #b88351;       /* 強調色（例如按鈕或標題） */
  --shadow: 0 10px 24px rgba(0,0,0,.18); /* 陰影樣式 */
  --container: 1200px;     /* 最大內容寬度 */
}

.icon-img {
  width: 24px;
  height: 24px;
}

    /* 固定頂端外層：把上排與下排包起來，永遠固定在視窗上方 */
    .new-header-wrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

    /* 統一使用 new- 前綴，避免撞名 */
    .new-container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

    /* 固定頂端外層：把上排與下排包起來，永遠固定在視窗上方 */
    .new-header-wrapper { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

    .new-container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

    /* === 上排工具列（僅三顆快捷） === */
    .new-topbar { background: var(--bg-dark); color: var(--text); }
    .new-topbar .new-inner { display: flex; align-items: center; justify-content: flex-end; height: 48px; }

    .new-top-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
    .new-top-actions a, .new-top-actions button {
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding-top: 4px;
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: 4px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    }
    .new-top-actions .icon-svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; display: block; }

    /* 大面積四角方框（上排） */
    .new-top-actions a::before, .new-top-actions button::before {
      content: ""; position: absolute; inset: 0; background: transparent; border-radius: 0;
      transition: background .3s ease; z-index: 0;
    }
    .new-top-actions a:hover::before, .new-top-actions button:hover::before,
    .new-top-actions a:focus-visible::before, .new-top-actions button:focus-visible::before {
      background: rgba(255,255,255,.12);
    }

    /* 購物車下拉 */
    .new-cart { position: relative; }
    .new-cart-badge { background: #c30d23; color: #fff; font-size: 12px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-left: 6px; }

.new-cart-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0px);
  width: min(280px, 92vw);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
  /* 過去用 display: none/block 會卡住轉場，改用以下屬性實現絲滑開合 */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0,-8px,0) scale(.98);
  transition:
    max-height .36s cubic-bezier(.25,.8,.25,1),
    opacity .28s ease,
    transform .36s cubic-bezier(.25,.8,.25,1),
    visibility 0s linear .36s; /* 收合結束後才隱藏，避免白縫 */
  z-index: 1000;
  will-change: transform, opacity;
  backface-visibility: hidden;

}
.new-cart-content {
  flex: none; /* 讓內容高度由商品數量決定 */
  padding-bottom: 10px;
}

.new-cart-footer {
  border-top: 1px solid rgba(255,255,255,0.2); /* 上方細線 */
  margin-top: 12px;                            /* 與內容分隔 */
  padding: 12px 16px;                          /* 內距 */
  display: flex;
  flex-direction: column;                      /* 垂直排列（小計在上，按鈕在下） */
  align-items: stretch;                        /* 按鈕滿寬 */
  gap: 8px;                                    /* 元素間距 */
  flex-shrink: 0;                              /* 避免壓縮 */
  text-align: right;                           /* 小計靠右 */
  background: rgba(0,0,0,0.85);                /* 背景有透明感 */
}
/* 1) 把大面積白底 hover 僅限於選單用 */
.new-top-actions a::before,
.new-top-actions button::before { /* 這是上排三顆的效果（保留） */ }

.new-nav .new-nav-list li::before { /* 這是下排主選單的效果（保留） */ }

/* 2) 在購物車區塊，全面取消 a 的白底 hover */
.new-cart a,
.new-cart a:hover,
.new-cart a:focus {
  background: transparent !important;
}

/* 若有任何全域 a::before 的白底，這裡直接關掉 */
.new-cart a::before {
  content: none !important;
}

/* 3) 圖片黑色 90% 遮罩（保留你要的效果） */
.new-cart-thumb-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0 !important; /* 移除原本 padding */
}

.new-cart-thumb-link img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* 確保在遮罩下層 */
  padding: 0 !important; /* 確保圖片本身沒有內距 */
}

.new-cart-thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
 background: rgba(255,255,255,0.3); /* 白 30% */
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2; /* 遮罩在最上層 */
}

.new-cart-thumb-link:hover::after {
  opacity: 1;
}


.new-cart-subtotal {
    font-size: 16px;
    text-align: right;

    font-weight: 500;
    margin-left: 4px;
}

.new-btn-checkout {
  width: 100%;
  padding: 10px;
  background: #e74c3c;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}


@media (prefers-reduced-motion: reduce) {
  .new-cart-panel { transition: none; transform: none; }
}
.new-cart-panel.show {
  pointer-events: auto;
  visibility: visible;
  max-height: 70vh; /* 展開最大高度，避免過長 */
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: 0s;
}

    .new-cart-panel.show { display: block; }
    .new-cart-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px; }
    .new-cart-item + .new-cart-item { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; margin-top: 8px; }
    .new-cart-thumb { width: 75px; height: 59px;  object-fit: cover; background: #555; }
    .new-cart-title { font-size: 16px; margin: 0 0 4px; color: #fff;  }
    .new-cart-meta { font-size: 14px; color: #cab8a3;  }
    .new-cart-footer {
    margin-top: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
    text-align: right;
    border-top: 1px solid rgba(255,255,255,.08);
}
    .new-btn-checkout {
  width: 100% !important;
  padding: 12px 14px;
  background: #90622d !important; /* 咖啡色底 */
  color: #fff !important;
  font-size: 16px !important;
  border-radius: 6px !important; /* 稍微圓角 */
  font-weight: 500 !important;

  display: flex;                /* 加這行 */
  justify-content: center;      /* 水平置中 */
  align-items: center;          /* 垂直置中 */

  text-align: center !important;
}
    .new-btn-checkout:hover {
	  background: #6c4517 !important;
}

    /* === 下排主導覽（LOGO 左、選單右） === */
    .new-nav {
    position: relative;
    color: var(--text);
    background-image: url(../images/top_manu_bg.png);
    background-repeat: repeat-x;
    padding-top: 29px;
    padding-bottom: 29px;
}
    .new-nav .new-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }

    .new-brand { display: flex; align-items: center; gap: 12px; }
    .new-brand img {
    width: auto;
    height: 100px;
    display: block;
}

    .new-nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
    .new-nav-list li { position: relative; }
    .new-nav-list a { color: var(--text); text-decoration: none; display: block; padding: 16px 20px; border-radius: 0; font-size: 18px; position: relative; z-index: 1; }
    /* 大面積四角方框（下排） */
    .new-nav-list li::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background .2s ease; z-index: 0; }
    .new-nav-list li:hover::before, .new-nav-list a:focus-visible::before { background: rgba(255,255,255,.12); }

    .new-nav-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 28px; cursor: pointer; line-height: 1; transition: transform .4s cubic-bezier(.25,.8,.25,1), opacity .32s ease; will-change: transform; backface-visibility: hidden; }
    .new-nav-toggle.is-open { transform: rotate(90deg) scale(1.06); }



    /* === RWD === */
    @media (max-width: 990px) {
      .new-top-actions { gap: 8px; }
      .new-top-actions .label { display: block; }

      .new-brand img {
    width: 144px;
    height: auto;
}
		.new-nav {
        padding-top: 15px;
    padding-bottom: 15px;
}
      .new-nav .new-inner { align-items: center; }
      .new-nav-toggle { display: block; margin-left: auto; }

      /* 手機版選單：避免白縫，與導覽列重疊 1px */
      .new-nav-list {
		  position: absolute; left: 0;
		  right: 0;
		  top: calc(100% - 1px);
		  z-index: 999;
		  background: rgba(0, 0, 0, 0.85);
		  flex-direction: column;
		  gap: 0;
		  padding: 8px 16px 12px;
		  box-shadow: var(--shadow);
		  pointer-events: none;
		  visibility: hidden;
		  max-height: 0;
		  overflow: hidden;
		  opacity: 0;
		  transform: translate3d(0,-6px,0);
		  transition: max-height .4s cubic-bezier(.25,.8,.25,1), opacity .32s ease, transform .4s cubic-bezier(.25,.8,.25,1), visibility 0s linear .4s;
		  will-change: transform, opacity; backface-visibility: hidden;
		}


      .new-nav-list.show { pointer-events: auto; visibility: visible; transition-delay: 0s; max-height: 70vh; opacity: 1; transform: translate3d(0,0,0); }
      .new-nav-list li a { display: block; width: 100%; padding: 12px 8px; }

      /* 購物車面板在手機改為固定定位，避免超出 */
      .new-cart-panel { position: fixed; right: 0px; left: 0px; top: 48px; width: auto; }

      @media (prefers-reduced-motion: reduce) {
        .new-nav-toggle { transition: none; }
        .new-nav-list { transition: none; transform: none; }
      }
		.new-cart-panel {
    padding-top: 20px;
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 20px;
    }

  }
/* 避免內容被頂部的固定選單擋住，主內容要加上 padding-top */
.new-main {
  padding-top: 162px; /* 上排高度 + 下排高度 */
}

@media(max-width:768px){
	.new-main {
  padding-top: 134px; /* 上排高度 + 下排高度 */

}
	.icon-img {
    width: 26px!important;
    height: 26px!important;
    margin-bottom: 8px;
}
	.new-top-actions a, .new-top-actions button {

   padding-right: 0px;
    padding-left: 8px;
}

	}