/* =====================================================================
   前台視覺系統 — 「香港精品美妝」
   象牙白底 / 暖炭黑文字 / 玫瑰金強調 / 襯線標題 + 無襯線內文
   ===================================================================== */
:root {
  --bg: #fbf9f6;          /* 象牙白頁底 */
  --surface: #ffffff;
  --tile: #f3eee8;        /* 商品圖底色 */
  --ink: #1d1a17;         /* 暖炭黑 */
  --ink-2: #4a443f;
  --muted: #847c75;
  --line: #e8e1d9;
  --rose: #b3747a;        /* 玫瑰 */
  --rose-dark: #8f565c;
  --rose-soft: #f6ecec;
  --gold: #c5a46d;
  --gold-soft: #efe4cf;
  --success: #4f7d5c;
  --danger: #b0413e;
  --serif: "Cormorant Garamond", "Noto Serif TC", "Songti TC", Georgia, serif;
  --sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --radius: 4px;
  --shadow: 0 10px 30px rgba(29, 26, 23, .08);
  --brand: var(--ink);
  --brand-dark: var(--rose-dark);
}
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: .95rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .h1, .h2, .h3, .section-title, .page-title, .site-logo { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
a { color: var(--ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--rose-dark); }
::selection { background: var(--gold-soft); }

/* ---- 按鈕 ---- */
.btn { border-radius: var(--radius); font-weight: 500; letter-spacing: .04em; transition: all .18s ease; }
.btn-brand { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; }
.btn-brand:disabled { background: #cfc8c0; border-color: #cfc8c0; }
.btn-outline-brand { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn-outline-brand:hover { background: var(--ink); color: #fff; }
.btn-outline-secondary { border-color: var(--line); color: var(--ink-2); }
.btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-lg { padding: .7rem 1.6rem; }
.text-brand { color: var(--rose-dark) !important; }

/* ---- 表單 ---- */
.form-control, .form-select { border-color: var(--line); border-radius: var(--radius); background: var(--surface); }
.form-control:focus, .form-select:focus { border-color: var(--rose); box-shadow: 0 0 0 .2rem rgba(179, 116, 122, .15); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-label { font-size: .85rem; color: var(--ink-2); }

/* ---- 頂欄 ---- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.topbar a { color: var(--muted); }
.topbar a:hover { color: var(--ink); }
.topbar .dropdown-toggle::after { vertical-align: .12em; }
.topbar .dropdown-menu { font-size: .85rem; text-transform: none; letter-spacing: 0; border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.topbar .dropdown-item.active, .topbar .dropdown-item:active { background: var(--ink); }

/* 語言切換 */
.lang-switch a { color: var(--muted); padding: .1rem .35rem; border-radius: 3px; text-transform: none; letter-spacing: .04em; }
.lang-switch a:hover { color: var(--ink); background: var(--tile); }
.lang-switch a.active { color: #fff; background: var(--ink); }
.lang-switch .sep { color: var(--line); }

/* ---- 標頭 ---- */
.site-header { background: var(--surface); padding: 1.4rem 0 !important; }
.site-logo { font-size: 1.55rem; color: var(--ink); text-transform: uppercase; letter-spacing: .14em; line-height: 1.1; display: inline-block; }
.site-logo small { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .38em; color: var(--gold); font-weight: 600; margin-top: .3rem; }
.site-logo img { max-height: 56px; }
.site-logo:hover { color: var(--ink); }
.search-form .form-control { border-radius: 999px 0 0 999px; padding-left: 1.2rem; border-right: 0; }
.search-form .btn { border-radius: 0 999px 999px 0; }
.header-cart { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; color: var(--ink); white-space: nowrap; background: var(--surface); transition: all .18s; }
.header-cart:hover { border-color: var(--ink); }
.header-cart .badge { background: var(--rose-dark); font-weight: 500; }

/* ---- 主選單 ---- */
.mainnav { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mainnav .navbar-nav { gap: .25rem; }
.mainnav .nav-link { color: var(--ink); font-weight: 500; font-size: .9rem; letter-spacing: .1em; padding: .9rem 1.1rem; position: relative; }
.mainnav .nav-link::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: .55rem; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .2s; }
.mainnav .nav-link:hover::after, .mainnav .nav-link.active::after { transform: scaleX(1); }
.mainnav .nav-link.active { color: var(--rose-dark); }
.mainnav .navbar-toggler { color: var(--ink) !important; }

/* ---- 麵包屑 / 標題 ---- */
.breadcrumb { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; background: transparent; padding: 0; margin-bottom: 1.25rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "·"; color: var(--gold); }
.breadcrumb-item.active { color: var(--muted); }
.page-title { font-size: 2rem; margin-bottom: 1.25rem; }
.section-title { font-size: 1.7rem; text-align: center; margin: 2.5rem 0 1.5rem; position: relative; padding-bottom: .8rem; }
.section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 40px; height: 1px; background: var(--gold); transform: translateX(-50%); }

/* ---- 首頁編排式主視覺 (無上傳橫幅時) ---- */
.hero-edit { position: relative; overflow: hidden; background: linear-gradient(135deg, #fbf9f6 0%, #f3eee8 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 3rem 2.5rem; }
.hero-edit::before { content: ""; position: absolute; right: -140px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 201, 204, .85) 0%, rgba(246, 236, 236, .45) 55%, rgba(251, 249, 246, 0) 72%); pointer-events: none; }
.hero-edit::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(197, 164, 109, .45); border-radius: 2px; pointer-events: none; }
.hero-edit > .row { position: relative; z-index: 1; }
.hero-edit .eyebrow { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--rose-dark); font-weight: 600; margin-bottom: 1.1rem; }
.hero-edit h1 { font-family: var(--serif); font-size: 3.4rem; font-weight: 600; line-height: 1.05; letter-spacing: .04em; margin-bottom: 1rem; }
.hero-edit h1 span { display: block; font-family: var(--sans); font-size: 1.05rem; font-weight: 500; letter-spacing: .25em; color: var(--ink-2); margin-top: .8rem; text-transform: uppercase; }
.hero-edit .lead { font-size: .98rem; color: var(--muted); max-width: 36ch; margin-bottom: 1.5rem; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: center; padding: 1.5rem 0; }
.hero-tiles .tile { display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--tile); box-shadow: var(--shadow); }
.hero-tiles .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hero-tiles .tile:hover img { transform: scale(1.05); }
.hero-tiles .t0 { transform: translateY(18px); }
.hero-tiles .t1 { transform: translateY(-22px); }
.hero-tiles .t2 { transform: translateY(10px); }
@media (max-width: 767px) {
  .hero-edit { padding: 1.5rem 1.1rem 1.25rem; }
  .hero-edit::after { inset: 8px; }
  .hero-edit h1 { font-size: 2.1rem; }
  .hero-edit h1 span { font-size: .8rem; letter-spacing: .18em; margin-top: .5rem; }
  .hero-edit .hero-text { text-align: center; }
  .hero-edit .lead { font-size: .9rem; margin: 0 auto 1rem; }
  .hero-tiles { gap: .6rem; padding: .5rem 0 0; }
  .hero-tiles .t0, .hero-tiles .t1, .hero-tiles .t2 { transform: none; }
}

/* ---- 首頁輪播 / 分頁 ---- */
.hero .carousel-inner { border-radius: var(--radius); box-shadow: var(--shadow); }
.hero .carousel-item img { width: 100%; max-height: 480px; object-fit: cover; }
.hero .carousel-caption { left: 8%; right: auto; bottom: 14%; text-align: left; background: rgba(251, 249, 246, .92); color: var(--ink); padding: 1.4rem 1.8rem; border-radius: var(--radius); max-width: 420px; }
.hero .carousel-caption h5 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.home-tabs { border-bottom: 1px solid var(--line); justify-content: center; }
.home-tabs .nav-link { color: var(--muted); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: .6rem 1.4rem; letter-spacing: .06em; }
.home-tabs .nav-link:hover { color: var(--ink); }
.home-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }

/* ---- 商品卡 ---- */
.product-card { background: transparent; border: 0; height: 100%; display: flex; flex-direction: column; }
.product-card .thumb { aspect-ratio: 1 / 1; display: block; background: var(--tile); border-radius: var(--radius); overflow: hidden; position: relative; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .ribbon { position: absolute; top: .7rem; left: .7rem; background: var(--ink); color: #fff; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 2px; }
.product-card .body { padding: .9rem .2rem .4rem; display: flex; flex-direction: column; flex: 1; }
.product-card .brand { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.product-card .ribbon-gold { background: var(--gold); color: #1d1a17; }
.product-card .name { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.product-card .price { font-weight: 600; color: var(--ink); margin-top: .35rem; letter-spacing: .02em; }
.product-card .price del { color: var(--muted); font-weight: 400; font-size: .85rem; margin-right: .4rem; }
.product-card .actions { display: flex; gap: .4rem; margin-top: .7rem; }
.product-card .actions .btn-brand { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem .6rem; }
.product-card .actions .btn-outline-secondary { border-color: var(--line); }
@media (min-width: 992px) {
  .product-card .actions { opacity: 0; transform: translateY(6px); transition: all .22s ease; }
  .product-card:hover .actions, .product-card:focus-within .actions { opacity: 1; transform: none; }
}

/* ---- 商品頁 ---- */
.product-gallery .main { background: var(--tile); border-radius: var(--radius); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-gallery .main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-gallery .thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.product-gallery .thumbs img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; opacity: .75; transition: all .15s; }
.product-gallery .thumbs img.active, .product-gallery .thumbs img:hover { border-color: var(--ink); opacity: 1; }
.product-price { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--ink); }
.product-price del { font-size: 1.15rem; color: var(--muted); font-weight: 400; margin-right: .6rem; }
.qty-group { max-width: 150px; }
.qty-group .btn { border-color: var(--line); }
.rating .bi-star-fill { color: var(--gold); }
.rating .bi-star { color: #d8d1c8; }
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; letter-spacing: .04em; }
.nav-tabs .nav-link.active { color: var(--ink); background: transparent; border-bottom-color: var(--ink); }
.tab-content.border { border-color: var(--line) !important; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.info-content { max-width: 820px; }

/* ---- 卡片 / 表格 / 分頁 ---- */
.card { border-color: var(--line); border-radius: var(--radius); background: var(--surface); }
.card-header { background: var(--surface); border-bottom-color: var(--line); letter-spacing: .04em; }
.table { --bs-table-border-color: var(--line); }
.table > :not(caption) > * > * { background: transparent; }
.table-light, .table thead.table-light th { --bs-table-bg: var(--tile); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.pagination .page-link { color: var(--ink); border-color: var(--line); border-radius: 0 !important; margin-left: -1px; }
.pagination .page-item.active .page-link { background: var(--ink); border-color: var(--ink); }
.pagination .page-link:hover { background: var(--tile); }
.alert { border-radius: var(--radius); }
.accordion-button { background: var(--surface); color: var(--ink); font-size: .9rem; letter-spacing: .04em; }
.accordion-button:not(.collapsed) { background: var(--rose-soft); color: var(--ink); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--line); }
.accordion-item { border-color: var(--line); }
.list-group-item { border-color: var(--line); }

/* ---- 會員側欄 ---- */
.account-menu .list-group-item { font-size: .9rem; color: var(--ink-2); background: var(--surface); }
.account-menu .list-group-item:hover { background: var(--tile); }
.account-menu .list-group-item.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- 購物車 / 結帳 ---- */
.cart-table img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); background: var(--tile); }
.totals-table td { padding: .45rem .75rem; border-color: var(--line); }
.totals-table .grand td { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; border-top: 1px solid var(--ink); }
.method-option { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .5rem; cursor: pointer; background: var(--surface); transition: all .15s; }
.method-option:hover { border-color: var(--ink-2); }
.method-option:has(input:checked) { border-color: var(--ink); background: var(--tile); }

/* ---- 頁尾 ---- */
.site-footer { background: var(--ink); color: #b8b0a8; margin-top: 4rem; padding: 3.5rem 0 1.5rem; font-size: .88rem; }
.site-footer h5 { color: var(--gold); font-family: var(--sans); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.site-footer a { color: #cfc7bf; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer .copy { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2rem; padding-top: 1.2rem; color: #7f776f; font-size: .78rem; letter-spacing: .04em; }

/* ---- 其他 ---- */
.toast-container { z-index: 1080; }
.brand-group h4 { font-size: 1.4rem; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.brand-group a { color: var(--ink-2); }
.badge.text-bg-light { background: var(--tile) !important; color: var(--ink-2) !important; letter-spacing: .04em; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
@media (max-width: 767px) {
  .site-logo { font-size: 1.25rem; }
  .mainnav .nav-link { padding: .65rem .8rem; }
  .product-price { font-size: 1.5rem; }
  .page-title { font-size: 1.55rem; }
  .hero .carousel-caption { left: 5%; right: 5%; bottom: 8%; padding: .9rem 1.1rem; }
}

/* =====================================================================
   手機版 UI/UX
   ===================================================================== */
.text-ink { color: var(--ink) !important; }
.site-header .site-logo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offcanvas { background: var(--bg); max-width: 84vw; }
.offcanvas .site-logo { font-size: 1.05rem; letter-spacing: .08em; }
.offcanvas .site-logo small { font-size: .55rem; letter-spacing: .14em; margin-top: .15rem; }
.mobile-nav .list-group-item { background: transparent; border-color: var(--line); padding: .9rem 1.25rem; font-size: 1rem; letter-spacing: .05em; color: var(--ink); }
.mobile-nav .list-group-item.active { background: var(--tile); color: var(--rose-dark); border-color: var(--line); font-weight: 600; }
.mobile-nav .list-group-item.active::before { content: ""; display: inline-block; width: 3px; height: 1em; background: var(--gold); margin-right: .75rem; vertical-align: -0.15em; }

/* 商品頁底部購買列 (手機) */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--surface); border-top: 1px solid var(--line); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .75rem; box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
.buy-bar .price { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.buy-bar .btn { flex: 1; padding: .7rem; }
body:has(.buy-bar:not(.d-none)) main { padding-bottom: 84px; }

/* 購物車手機卡片 */
.cart-item-m img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); background: var(--tile); }

@media (max-width: 991px) {
  /* 會員選單: 頂部橫向滑動膠囊 */
  .account-menu { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .45rem; padding: .1rem 0 .4rem; margin-bottom: .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .account-menu::-webkit-scrollbar { display: none; }
  .account-menu .list-group-item { flex: 0 0 auto; white-space: nowrap; border-radius: 999px !important; border: 1px solid var(--line) !important; padding: .4rem .9rem; font-size: .85rem; margin-top: 0 !important; }
  .account-menu .list-group-item.active { background: var(--ink); color: #fff; border-color: var(--ink) !important; }
}

@media (max-width: 767px) {
  body { font-size: .95rem; }
  .topbar { font-size: .72rem; }
  .site-header { padding: 0 !important; }
  .site-logo { font-size: 1.05rem; letter-spacing: .08em; line-height: 1.15; }
  .site-logo small { font-size: .5rem; letter-spacing: .12em; margin-top: .15rem; }
  .site-logo img { max-height: 40px; }
  .header-cart { padding: .35rem .7rem; }
  .search-form .form-control { font-size: 1rem; }
  .breadcrumb { font-size: .7rem; margin-bottom: .9rem; white-space: nowrap; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .page-title { font-size: 1.45rem; margin-bottom: 1rem; }
  .section-title { font-size: 1.35rem; margin: 1.75rem 0 1rem; }
  .home-tabs .nav-link { font-size: .95rem; padding: .5rem .6rem; letter-spacing: .02em; }
  .product-card .name { font-size: .92rem; }
  .product-card .actions .btn-brand { padding: .55rem .4rem; font-size: .74rem; letter-spacing: .04em; }
  .product-card .actions .btn-outline-secondary { padding: .55rem .6rem; }
  .product-price { font-size: 1.5rem; }
  .qty-group { max-width: 140px; }
  .nav-tabs .nav-link { padding: .5rem .75rem; font-size: .9rem; }
  .tab-content.border { padding: 1rem !important; }
  .table { font-size: .9rem; }
  .totals-table .grand td { font-size: 1.1rem; }
  .method-option { padding: .7rem .85rem; }
  .site-footer { padding: 2.25rem 0 1rem; margin-top: 2.5rem; }
  .site-footer .copy { flex-direction: column; gap: .25rem !important; }
  .toast-container { left: 0; right: 0; bottom: 0 !important; padding: .75rem !important; }
  .toast-container .toast { width: 100%; }
  body:has(.buy-bar:not(.d-none)) .toast-container { bottom: 76px !important; }
  .hero .carousel-item img { max-height: 220px; }
  main.container { padding-top: 1rem !important; }
}
.min-width-0 { min-width: 0; }