@layer theme-custom {
/* =========================================================
   FŌVIΛ 專櫃風格主題 v2.5 —— 濃縮咖啡 × 香檳金
   v2.2：價格改為俐落無襯線、等高數字，提升精品感
   v2.3：文章內頁閱讀體驗、手機版細節、無障礙與觸控優化
   v2.4：側欄、商品頁、購物車、結帳頁統一專櫃風格
   v2.5：商品列表、會員登入、結帳須知、頁尾配色修正、商品排序
   ========================================================= */

div.content {
  --fv-espresso: #2B1E16;
  --fv-cocoa: #4A3426;
  --fv-champagne: #B8986A;
  --fv-champagne-light: #D9C7A7;
  --fv-sand: #EFE6DA;
  --fv-ivory: #FAF7F2;
  --fv-line: #E3D7C6;
  --fv-muted: #9C8B79;
  background-color: var(--fv-ivory) !important;
  color: var(--fv-cocoa);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

div.content h1,
div.content h2,
div.content h3,
div.content h4 {
  font-family: "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif !important;
  font-weight: 500 !important;
  color: var(--fv-espresso) !important;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

#pjax-container p,
#pjax-container li {
  line-height: 1.95;
  color: var(--fv-cocoa);
}

#pjax-container a {
  color: #8C6A3F;
  transition: color 0.3s ease;
}
#pjax-container a:hover {
  color: var(--fv-champagne);
  text-decoration: none;
}

nav.navbar {
  background-color: #FAF7F2 !important;
  border-bottom: 1px solid var(--fv-champagne-light) !important;
  box-shadow: none !important;
  z-index: 1030 !important;
}
nav.navbar a,
nav.navbar .nav-link {
  color: var(--fv-espresso) !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  white-space: nowrap;
  transition: color 0.3s ease;
}
nav.navbar .navbar-nav > li > a,
nav.navbar .navbar-nav > .nav-item > .nav-link {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
nav.navbar a:hover,
nav.navbar .nav-link:hover {
  color: var(--fv-champagne) !important;
}
nav.navbar .dropdown-menu {
  z-index: 1060 !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--fv-line) !important;
  border-top: 2px solid var(--fv-champagne) !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 36px rgba(43, 30, 22, 0.10) !important;
  padding: 10px 0 !important;
}
nav.navbar .dropdown-item,
nav.navbar .dropdown-menu a {
  font-size: 13.5px !important;
  letter-spacing: 0.05em !important;
  padding: 10px 22px !important;
  color: var(--fv-cocoa) !important;
}
nav.navbar .dropdown-item:hover,
nav.navbar .dropdown-item:focus,
nav.navbar .dropdown-menu a:hover {
  background-color: var(--fv-ivory) !important;
  color: var(--fv-champagne) !important;
}

div.content .btn-primary,
div.content .btn-dark,
div.content button[type="submit"] {
  background-color: var(--fv-espresso) !important;
  border: 1px solid var(--fv-espresso) !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
  letter-spacing: 0.2em !important;
  font-weight: 400 !important;
  padding: 13px 32px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
div.content .btn-primary:hover,
div.content .btn-dark:hover,
div.content button[type="submit"]:hover {
  background-color: var(--fv-champagne) !important;
  border-color: var(--fv-champagne) !important;
  color: #FFFFFF !important;
}
div.content .btn-outline-primary,
div.content .btn-outline-dark,
div.content .btn-default,
div.content .btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--fv-espresso) !important;
  color: var(--fv-espresso) !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em !important;
}
div.content .btn-outline-primary:hover,
div.content .btn-outline-dark:hover,
div.content .btn-default:hover,
div.content .btn-secondary:hover {
  background-color: var(--fv-espresso) !important;
  color: #FAF7F2 !important;
}

div.content input[type="text"],
div.content input[type="email"],
div.content input[type="tel"],
div.content input[type="password"],
div.content input[type="number"],
div.content select,
div.content textarea {
  border: 1px solid var(--fv-line) !important;
  border-radius: 0 !important;
  background-color: #FFFFFF !important;
  box-shadow: none !important;
}
div.content input:focus,
div.content select:focus,
div.content textarea:focus {
  border-color: var(--fv-champagne) !important;
  outline: none !important;
}

#pjax-container .card {
  border: 1px solid var(--fv-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
#pjax-container .card:hover {
  border-color: var(--fv-champagne-light) !important;
  box-shadow: 0 14px 34px rgba(43, 30, 22, 0.07) !important;
}
#pjax-container .card img,
#pjax-container .product img,
#pjax-container .item img {
  transition: transform 0.7s ease;
}
#pjax-container .card:hover img,
#pjax-container .product:hover img,
#pjax-container .item:hover img {
  transform: scale(1.03);
}

/* ---------- 價格：俐落無襯線、等高數字、精品感 ---------- */
#pjax-container [class*="price"],
#pjax-container [class*="Price"] {
  font-family: "Noto Sans TC", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.08em !important;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fv-espresso) !important;
}
#pjax-container del,
#pjax-container s,
#pjax-container [class*="origin-price"],
#pjax-container [class*="original-price"] {
  font-family: "Noto Sans TC", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  font-variant-numeric: lining-nums tabular-nums;
  color: #B9AC9D !important;
}

section.index-editor {
  padding-top: 22px;
  padding-bottom: 22px;
}
div.content hr {
  border: 0 !important;
  border-top: 1px solid var(--fv-line) !important;
  margin: 2.4em 0 !important;
  opacity: 1 !important;
}

footer {
  background-color: var(--fv-espresso) !important;
  border-top: 2px solid var(--fv-champagne) !important;
  letter-spacing: 0.08em;
}
footer,
footer p,
footer span,
footer li,
footer div,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: var(--fv-champagne-light) !important;
}
footer a {
  color: var(--fv-champagne-light) !important;
  transition: color 0.3s ease;
}
footer a:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
footer hr {
  border-top-color: rgba(217, 199, 167, 0.25) !important;
}

div.content ::selection {
  background: #E6D5BC;
  color: var(--fv-espresso);
}

/* =========================================================
   v2.3 新增
   ========================================================= */

/* ---------- 文章／消息內頁：閱讀體驗 ---------- */
body.b_blog_detail #pjax-container img,
body.b_news_detail #pjax-container img,
body.b_about_detail #pjax-container img,
body.b_service_detail #pjax-container img {
  max-width: 100%;
  height: auto;
}
body.b_blog_detail #pjax-container h3,
body.b_news_detail #pjax-container h3 {
  margin-top: 2.2em;
  margin-bottom: 0.8em;
}
body.b_blog_detail #pjax-container h4,
body.b_news_detail #pjax-container h4 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

/* 引言：香檳金細線＋襯線字，像雜誌摘句 */
#pjax-container blockquote {
  border-left: 2px solid var(--fv-champagne) !important;
  background-color: #FFFFFF;
  padding: 18px 26px !important;
  margin: 2em 0 !important;
  font-size: 1em;
}
#pjax-container blockquote p {
  font-family: "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif;
  color: var(--fv-espresso);
  letter-spacing: 0.08em;
  margin: 0;
}

/* 表格：細線、留白，避免手機版撐破 */
#pjax-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  background-color: #FFFFFF;
}
#pjax-container table th,
#pjax-container table td {
  border: 1px solid var(--fv-line);
  padding: 10px 14px;
  line-height: 1.7;
  vertical-align: top;
}
#pjax-container table th {
  background-color: var(--fv-sand);
  color: var(--fv-espresso);
  font-weight: 500;
}

/* ---------- 鍵盤操作時的焦點框（滑鼠點擊不會出現） ---------- */
div.content a:focus-visible,
div.content button:focus-visible,
div.content .btn:focus-visible {
  outline: 1px solid var(--fv-champagne) !important;
  outline-offset: 3px;
}

/* ---------- 手機版 ---------- */
@media (max-width: 575.98px) {
  div.content .btn-primary,
  div.content .btn-dark,
  div.content button[type="submit"] {
    padding: 12px 22px !important;
    letter-spacing: 0.12em !important;
  }
  div.content .btn-outline-primary,
  div.content .btn-outline-dark,
  div.content .btn-default,
  div.content .btn-secondary {
    letter-spacing: 0.1em !important;
  }
  div.content h1 {
    font-size: 1.6rem;
    letter-spacing: 0.06em;
  }
  div.content h2 {
    font-size: 1.35rem;
    letter-spacing: 0.06em;
  }
  #pjax-container p,
  #pjax-container li {
    line-height: 1.85;
  }
  #pjax-container blockquote {
    padding: 14px 18px !important;
  }
  #pjax-container table {
    display: block;
    overflow-x: auto;
  }
}

/* ---------- 觸控裝置不做放大效果，避免點擊時圖片跳動 ---------- */
@media (hover: none) {
  #pjax-container .card:hover img,
  #pjax-container .product:hover img,
  #pjax-container .item:hover img {
    transform: none;
  }
}

/* ---------- 使用者開啟「減少動態效果」時關閉動畫 ---------- */
@media (prefers-reduced-motion: reduce) {
  div.content a,
  div.content .btn,
  #pjax-container .card,
  #pjax-container .card img,
  #pjax-container .product img,
  #pjax-container .item img {
    transition: none !important;
  }
}

/* =========================================================
   v2.4 新增：側欄、商品頁、購物車、結帳頁
   ========================================================= */

/* ---------- 全站按鈕統一：金色實心 → 濃縮咖啡；金框 → 咖啡細框 ---------- */
div.content .btn-full {
  background-color: var(--fv-espresso) !important;
  border: 1px solid var(--fv-espresso) !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em !important;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
div.content .btn-full:hover {
  background-color: var(--fv-champagne) !important;
  border-color: var(--fv-champagne) !important;
  color: #FFFFFF !important;
}
div.content .btn-border,
div.content .btn-outline-secondary {
  background-color: transparent !important;
  border: 1px solid var(--fv-espresso) !important;
  color: var(--fv-espresso) !important;
  border-radius: 0 !important;
  letter-spacing: 0.12em !important;
}
div.content .btn-border:hover,
div.content .btn-outline-secondary:hover {
  background-color: var(--fv-espresso) !important;
  color: #FAF7F2 !important;
}

/* 主要行動按鈕：加入購物車／結帳，實心、加大 */
#add_to_cart,
.mobile-addcart-popup .popup-footer .btn,
#order_submit,
.b_cart_list .order-total + .row .btn-full {
  background-color: var(--fv-espresso) !important;
  border: 1px solid var(--fv-espresso) !important;
  color: #FAF7F2 !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
  letter-spacing: 0.25em !important;
  border-radius: 0 !important;
}
#add_to_cart:hover,
.mobile-addcart-popup .popup-footer .btn:hover,
#order_submit:hover,
.b_cart_list .order-total + .row .btn-full:hover {
  background-color: var(--fv-champagne) !important;
  border-color: var(--fv-champagne) !important;
}

/* ---------- 側欄（部落格、商品共用） ---------- */
#tab-side aside .form-group > div {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
#tab-side aside .input-group .btn {
  padding: 6px 16px !important;
  letter-spacing: 0.1em !important;
}
#tab-side aside .group-title {
  border: 0 !important;
  border-bottom: 1px solid var(--fv-champagne-light) !important;
  padding: 0 0 10px 0 !important;
  margin-bottom: 4px !important;
  font-family: "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif;
  font-size: 15px;
  color: var(--fv-espresso) !important;
  letter-spacing: 0.12em;
}
#tab-side .article-group li {
  margin-bottom: 0 !important;
  padding: 11px 0;
  border-bottom: 1px solid var(--fv-line);
}
#tab-side .article-group li a {
  color: var(--fv-cocoa) !important;
  font-size: 14px;
  line-height: 1.7;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  height: auto !important;
}
#tab-side .article-group li a:hover {
  color: var(--fv-champagne) !important;
}
#tab-side aside > ul > li,
#tab-side .sideBar-menu > li {
  border-bottom: 1px solid var(--fv-line);
}
#tab-side aside > ul > li > a,
#tab-side .sideBar-menu .sidebar-item > a {
  color: var(--fv-espresso) !important;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
#tab-side aside > ul > li > a:hover,
#tab-side .sideBar-menu .sidebar-item > a:hover {
  color: var(--fv-champagne) !important;
}
/* 商品側欄的標籤雲：太雜，隱藏 */
#tab-side .tag-group {
  display: none !important;
}

/* ---------- 商品頁 ---------- */
#tab-home .row:has(.product-slider-for) ul.tag-row {
  display: none !important;
}
#tab-home .row:has(.product-slider-for) h3.middle-title {
  font-size: 24px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 18px;
  word-break: normal !important;
}
@media (max-width: 575.98px) {
  #tab-home .row:has(.product-slider-for) h3.middle-title {
    font-size: 19px !important;
    letter-spacing: 0.04em !important;
  }
  #tab-home .price-area .on-sale span {
    font-size: 21px !important;
  }
}
#tab-home .row:has(.product-slider-for) > .col > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fv-cocoa);
}
#tab-home .price-area .price-block h5 {
  font-size: 12px !important;
  color: var(--fv-muted) !important;
  letter-spacing: 0.15em !important;
}
#tab-home .price-area .on-sale span {
  font-size: 24px !important;
  color: var(--fv-espresso) !important;
  letter-spacing: 0.06em !important;
}
#tab-home #price_set_original_price_pc span {
  font-size: 15px !important;
  color: #B9AC9D !important;
  text-decoration: line-through;
  font-weight: 300 !important;
}
#tab-home .standard-list li a {
  border: 1px solid var(--fv-line) !important;
  border-radius: 0 !important;
  background-color: #FFFFFF !important;
  color: var(--fv-cocoa) !important;
  padding: 6px 18px !important;
}
#tab-home .standard-list li.chosen a {
  border-color: var(--fv-espresso) !important;
  color: var(--fv-espresso) !important;
}
div.content .counter-group button,
div.content .counter-group input {
  border-color: var(--fv-line) !important;
  border-radius: 0 !important;
  background-color: #FFFFFF !important;
}

/* ---------- 購物車 ---------- */
.b_cart_list .cart-row {
  background-color: #FFFFFF !important;
  border: 1px solid var(--fv-line);
}
.b_cart_list .remove-btn {
  background-color: transparent !important;
  border: 1px solid var(--fv-line) !important;
  color: var(--fv-muted) !important;
  border-radius: 0 !important;
}
.b_cart_list .remove-btn:hover {
  border-color: var(--fv-espresso) !important;
  color: var(--fv-espresso) !important;
}
.b_cart_list .order-total {
  color: var(--fv-espresso);
  font-size: 17px;
  letter-spacing: 0.08em;
}

/* ---------- 結帳頁 ---------- */
.b_cart_checkout h3.border-title {
  border: 0 !important;
  border-bottom: 1px solid var(--fv-champagne-light) !important;
  text-align: left !important;
  padding: 0 0 10px 0 !important;
  font-size: 17px !important;
  letter-spacing: 0.12em !important;
}
.b_cart_checkout .shopping-order {
  background-color: #FFFFFF !important;
  border: 1px solid var(--fv-line);
}
.b_cart_checkout .product-block {
  background-color: var(--fv-ivory) !important;
}

/* =========================================================
   v2.5 新增：頁尾配色修正、商品列表、會員登入、結帳須知
   ========================================================= */

/* 頁尾在 div.content 之外，色票變數要另外定義，深咖啡底才會生效 */
footer {
  --fv-espresso: #2B1E16;
  --fv-cocoa: #4A3426;
  --fv-champagne: #B8986A;
  --fv-champagne-light: #D9C7A7;
  --fv-line: #E3D7C6;
}

/* ---------- 商品列表頁：圖片統一正方形、文字層次 ---------- */
#tab-home .product-group .img-box {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #FFFFFF;
}
#tab-home .product-group .img-box picture {
  display: block;
  width: 100%;
  height: 100%;
}
#tab-home .product-group .img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#tab-home .product-group .text-box {
  padding-top: 14px;
}
#tab-home .product-group .middle-title {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em !important;
  word-break: normal !important;
  margin-bottom: 6px !important;
}
#tab-home .product-group .price-row span {
  font-size: 13px !important;
  color: #B9AC9D !important;
  text-decoration: line-through;
  margin-right: 8px;
}
#tab-home .product-group .price-row span.on-sale {
  font-size: 16px !important;
  color: var(--fv-espresso) !important;
  text-decoration: none;
  font-weight: 500 !important;
}
#tab-home .product-group .text-box p {
  font-size: 13px !important;
  color: var(--fv-muted) !important;
}
@media (max-width: 575.98px) {
  #tab-home .product-group .middle-title {
    font-size: 14px !important;
  }
  #tab-home .product-group .price-row span.on-sale {
    font-size: 15px !important;
  }
}

/* ---------- 會員登入頁：白色卡片、註冊與 Passkey 改次要按鈕 ---------- */
.b_member_login .form {
  background-color: #FFFFFF;
  border: 1px solid var(--fv-line);
  padding: 36px 32px 24px;
}
.b_member_login .form button.btn-full:not(#login) {
  background-color: transparent !important;
  border: 1px solid var(--fv-espresso) !important;
  color: var(--fv-espresso) !important;
}
.b_member_login .form button.btn-full:not(#login):hover {
  background-color: var(--fv-espresso) !important;
  color: #FAF7F2 !important;
}
@media (max-width: 575.98px) {
  .b_member_login .form {
    padding: 24px 18px 16px;
  }
}

/* ---------- 結帳頁：購物須知從紅字改成溫和說明卡 ---------- */
.b_cart_checkout .shopping-order p.warning-text {
  color: var(--fv-cocoa) !important;
  background-color: var(--fv-ivory);
  border-left: 2px solid var(--fv-champagne);
  padding: 14px 18px;
  font-size: 14px !important;
  line-height: 1.85 !important;
}

/* ---------- 商品列表排序：體驗組 → 主力組合 → 正裝 → 加量組 → 多入組 → 聯名面膜 ---------- */
#tab-home .row > div:has(> .product-group) {
  order: 50 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/13"]) {
  order: 1 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/3"]) {
  order: 2 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/2"]) {
  order: 3 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/1"]) {
  order: 4 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/7"]) {
  order: 5 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/8"]) {
  order: 6 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/9"]) {
  order: 7 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/10"]) {
  order: 8 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/11"]) {
  order: 9 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/12"]) {
  order: 10 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/15"]) {
  order: 11 !important;
}
#tab-home .row > div:has(> .product-group a[href$="/detail/16"]) {
  order: 12 !important;
}

}