@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700;900&display=swap');

/* ============================================================================
 * Boutique 模版 — 暖陽精品 Warm Boutique
 * templates/themes/boutique/style.css
 *
 * 設計語言:暖赤陶 #c0653f · 奶油 #f7f1e6 · 墨綠 #2f4a3c · 暖沙 #e8dcc8。
 * Noto Serif TC 標題 + Inter 內文。大留白、24px 圓角卡、拱形商品圖、
 * 雜誌式置中分區標題。所有規則 scope 喺 body[data-template="boutique"],
 * 唔會影響其他模版。
 * ========================================================================== */

/* ── 設計 token ──
 * 主色調(terracotta / ink-green / 文字 / 價格)跟隨後台「主題設定」色彩,
 * 所以可以後台切換顏色(同 default 一樣);manifest 的 default_colors 提供
 * 暖色預設,後台「套用預設色」即可一鍵還原暖陽精品配色。
 * 深/淺色用 color-mix 自動由 --primary / --accent 衍生(附 hex fallback)。
 * 中性暖色基調(cream / sand / line)同 --bg / --border 一樣係模版固有設計常數
 * (default 主題嘅 --bg / --border 亦非後台色),維持暖紙質感。
 */
body[data-template="boutique"] {
    /* 中性暖色基調(設計常數) */
    --bq-cream: #f7f1e6;
    --bq-cream: var(--primary-light, #f7f1e6);
    --bq-cream-deep: #f0e7d6;
    --bq-cream-deep: color-mix(in srgb, var(--bq-cream) 88%, var(--primary, #c0653f) 12%);
    --bq-sand: #e8dcc8;
    --bq-ink-soft: #6b6157;
    --bq-line: #e4d8c5;
    --bq-line-soft: #efe6d6;
    --bq-gold: #b08a4f;
    --bq-serif: 'Noto Serif TC', 'Songti TC', 'Source Han Serif TC', 'Times New Roman', serif;

    /* 主色調 token —— 跟隨後台色(fallback 為暖陽精品預設) */
    --bq-terracotta: var(--primary, #c0653f);            /* 後台 primary_color */
    --bq-terracotta-dark: #a3502f;
    --bq-terracotta-dark: color-mix(in srgb, var(--primary, #c0653f) 80%, #1c0f08); /* 深主色 */
    --bq-terracotta-soft: #f3e6dc;
    --bq-terracotta-soft: color-mix(in srgb, var(--primary, #c0653f) 12%, #fffdf8); /* 淺主色 */
    --bq-ink-green: var(--accent, #2f4a3c);              /* 後台 accent_color */
    --bq-ink-green-soft: #e4ece6;
    --bq-ink-green-soft: color-mix(in srgb, var(--accent, #2f4a3c) 13%, #fffdf8);
    --bq-ink: var(--text, #2b2622);                      /* 後台文字色(secondary_color) */

    /* 版式 / 中性設計常數 */
    --text-mid: var(--bq-ink-soft);
    --text-light: #9c9082;
    --bg: var(--bq-cream);
    --border: var(--bq-line);
    --border-light: var(--bq-line-soft);
    --radius: 20px;
    --radius-sm: 12px;
    --max-width: 1240px;
    --shadow-sm: 0 1px 2px rgba(74,53,32,.05);
    --shadow: 0 4px 18px rgba(74,53,32,.06);
    --shadow-md: 0 10px 30px rgba(74,53,32,.09);
    --shadow-lg: 0 20px 50px rgba(74,53,32,.13);

    background: var(--bq-cream);
    color: var(--bq-ink);
}

/* 細緻紋理背景(米紙感) */
body[data-template="boutique"] {
    background-image:
        radial-gradient(circle at 12% 8%, rgba(192,101,63,.04), transparent 32%),
        radial-gradient(circle at 88% 92%, rgba(47,74,60,.04), transparent 34%);
    background-attachment: fixed;
}

body[data-template="boutique"] .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 標題:Serif ── */
body[data-template="boutique"] h1,
body[data-template="boutique"] h2,
body[data-template="boutique"] h3,
body[data-template="boutique"] .bq-serif,
body[data-template="boutique"] .section-header h2 {
    font-family: var(--bq-serif);
    letter-spacing: .2px;
    color: var(--bq-ink);
}
body[data-template="boutique"] a { color: var(--bq-terracotta-dark); }
body[data-template="boutique"] a:hover { color: var(--bq-terracotta); }

/* ── 通用按鈕 ── */
body[data-template="boutique"] .bq-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
    font-size: 14px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
    background: var(--bq-terracotta); color: #fbf7f0;
    transition: all .28s cubic-bezier(.4,0,.2,1); text-align: center;
}
body[data-template="boutique"] .bq-btn:hover {
    background: var(--bq-terracotta-dark); color: #fbf7f0;
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(192,101,63,.28);
}
body[data-template="boutique"] .bq-btn-ghost {
    background: transparent; color: var(--bq-ink);
    border-color: var(--bq-line);
}
body[data-template="boutique"] .bq-btn-ghost:hover {
    background: var(--bq-terracotta-soft); color: var(--bq-terracotta-dark);
    border-color: var(--bq-terracotta-soft); box-shadow: none; transform: translateY(-2px);
}
body[data-template="boutique"] .bq-btn-green { background: var(--bq-ink-green); }
body[data-template="boutique"] .bq-btn-green:hover { background: #25382c; box-shadow: 0 10px 24px rgba(47,74,60,.26); }
body[data-template="boutique"] .bq-btn-block { display: flex; width: 100%; }
body[data-template="boutique"] .bq-btn-lg { padding: 16px 36px; font-size: 15px; }
body[data-template="boutique"] .bq-btn-sm { padding: 9px 18px; font-size: 13px; }
body[data-template="boutique"] .bq-btn:disabled,
body[data-template="boutique"] .bq-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── 卡片 ── */
body[data-template="boutique"] .bq-card {
    background: #fffdf8; border: 1px solid var(--bq-line-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
body[data-template="boutique"] .bq-card-pad { padding: 28px; }

/* ── 雜誌式分區標題 ── */
body[data-template="boutique"] .bq-section { padding: 64px 0; }
body[data-template="boutique"] .bq-section-head {
    text-align: center; max-width: 640px; margin: 0 auto 40px;
}
body[data-template="boutique"] .bq-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; color: var(--bq-terracotta);
    margin-bottom: 12px; font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .bq-eyebrow::before,
body[data-template="boutique"] .bq-eyebrow::after {
    content: ""; display: inline-block; width: 24px; height: 1px;
    background: var(--bq-terracotta); vertical-align: middle; margin: 0 10px;
    opacity: .6;
}
body[data-template="boutique"] .bq-section-head h2 {
    font-size: 34px; font-weight: 700; line-height: 1.2; margin: 0;
}
body[data-template="boutique"] .bq-section-head .sub {
    margin-top: 12px; color: var(--bq-ink-soft); font-size: 15px; line-height: 1.7;
}
/* 左右排版分區標題(列表頁用) */
body[data-template="boutique"] .bq-row-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
    border-bottom: 1px solid var(--bq-line); padding-bottom: 16px;
}
body[data-template="boutique"] .bq-row-head h2 { font-size: 26px; font-weight: 700; margin: 0; }
body[data-template="boutique"] .bq-row-head .bq-eyebrow { margin-bottom: 6px; }
body[data-template="boutique"] .bq-row-head .bq-eyebrow::before,
body[data-template="boutique"] .bq-row-head .bq-eyebrow::after { display: none; }
body[data-template="boutique"] .bq-viewall {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
    font-weight: 600; color: var(--bq-terracotta-dark); white-space: nowrap;
}
body[data-template="boutique"] .bq-viewall:hover { gap: 10px; }

/* ============================================================================
 * 共用產品卡 .product-card / .pc-*(restyle includes/components/product-card.php)
 * ========================================================================== */
body[data-template="boutique"] .product-grid,
body[data-template="boutique"] .bq-product-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
body[data-template="boutique"] .product-card {
    background: #fffdf8; border: 1px solid var(--bq-line-soft);
    border-radius: var(--radius); overflow: hidden; position: relative;
    display: flex; flex-direction: column; color: var(--bq-ink);
    box-shadow: var(--shadow-sm); transition: all .4s cubic-bezier(.4,0,.2,1);
}
body[data-template="boutique"] .product-card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-md);
    border-color: var(--bq-sand);
}
/* 商品圖頂部:由卡片 20px 圓角 + overflow:hidden 處理上方圓角。
   注意:特價/折扣 badge 位於 .pc-image 內,所以 .pc-image 唔可以用
   大拱形圓角(會切走 badge)。戲劇性拱形只保留喺無 badge 嘅分類磚。 */
body[data-template="boutique"] .product-card .pc-image {
    display: block; position: relative; overflow: hidden;
    background: var(--bq-cream-deep);
    border-radius: 0;
}
body[data-template="boutique"] .product-card .pc-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}
body[data-template="boutique"] .product-card:hover .pc-image img { transform: scale(1.06); }
body[data-template="boutique"] .pc-badge,
body[data-template="boutique"] .pc-badge-custom {
    position: absolute; z-index: 2; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; padding: 5px 11px; border-radius: 999px;
    background: var(--bq-terracotta); color: #fff; font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .pc-sold-out {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(43,38,34,.55); color: #fff; font-weight: 600; letter-spacing: 1px;
    font-family: var(--bq-serif); z-index: 3;
}
body[data-template="boutique"] .pc-info { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
body[data-template="boutique"] .pc-brand {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--bq-ink-green); font-weight: 600; margin-bottom: 6px; font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .pc-name {
    font-family: var(--bq-serif); font-size: 16px; font-weight: 600; line-height: 1.45;
    color: var(--bq-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 10px; min-height: 2.9em;
}
body[data-template="boutique"] .pc-name:hover { color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
body[data-template="boutique"] .pc-price-now { font-size: 19px; font-weight: 700; color: var(--price); font-family: var(--bq-serif); }
body[data-template="boutique"] .pc-price-was { font-size: 13px; color: var(--bq-ink-soft); text-decoration: line-through; }
body[data-template="boutique"] .pc-member-price { margin-top: 6px; font-size: 12px; color: var(--bq-ink-green); }
body[data-template="boutique"] .pc-qty-discount,
body[data-template="boutique"] .pc-promo-label {
    margin-top: 8px; font-size: 12px; color: var(--bq-terracotta-dark);
    background: var(--bq-terracotta-soft); display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px; width: fit-content;
}
body[data-template="boutique"] .pc-flex-spacer { flex: 1; }
body[data-template="boutique"] .pc-add-cart-btn {
    margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border-radius: 999px; border: 1px solid var(--bq-ink-green);
    background: transparent; color: var(--bq-ink-green); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .28s; width: 100%; text-decoration: none;
}
body[data-template="boutique"] .pc-add-cart-btn:hover {
    background: var(--bq-ink-green); color: #fbf7f0; transform: translateY(-1px);
}

@media (max-width: 1100px) {
    body[data-template="boutique"] .product-grid,
    body[data-template="boutique"] .bq-product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    body[data-template="boutique"] .product-grid,
    body[data-template="boutique"] .bq-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    body[data-template="boutique"] .pc-name { font-size: 14px; min-height: 2.7em; }
    body[data-template="boutique"] .pc-price-now { font-size: 16px; }
}

/* ============================================================================
 * 麵包屑 / 分頁 / badge / 提示
 * ========================================================================== */
body[data-template="boutique"] .bq-breadcrumb {
    font-size: 13px; color: var(--bq-ink-soft); padding: 22px 0 6px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: 'Inter', sans-serif;
    min-width: 0;
}
body[data-template="boutique"] .bq-breadcrumb a { color: var(--bq-ink-soft); }
body[data-template="boutique"] .bq-breadcrumb a:hover { color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .bq-breadcrumb .sep { color: var(--bq-line); width: 12px; height: 12px; flex-shrink: 0; }
body[data-template="boutique"] .bq-breadcrumb a,
body[data-template="boutique"] .bq-breadcrumb span { overflow-wrap: anywhere; }

body[data-template="boutique"] .bq-pagination {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 48px; flex-wrap: wrap;
}
body[data-template="boutique"] .bq-pagination a,
body[data-template="boutique"] .bq-pagination span {
    min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border-radius: 999px; border: 1px solid var(--bq-line);
    background: #fffdf8; color: var(--bq-ink); font-size: 14px; font-weight: 600;
    transition: all .25s;
}
body[data-template="boutique"] .bq-pagination a:hover { border-color: var(--bq-terracotta); color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .bq-pagination .current { background: var(--bq-terracotta); color: #fff; border-color: var(--bq-terracotta); }
body[data-template="boutique"] .bq-pagination .disabled { opacity: .4; pointer-events: none; }

body[data-template="boutique"] .bq-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
    border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .3px;
    background: var(--bq-terracotta-soft); color: var(--bq-terracotta-dark); font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .bq-pill-green { background: var(--bq-ink-green-soft); color: var(--bq-ink-green); }

body[data-template="boutique"] .bq-alert {
    padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6;
    border: 1px solid var(--bq-line); background: #fffdf8; margin-bottom: 18px;
}
body[data-template="boutique"] .bq-alert-success { background: var(--bq-ink-green-soft); border-color: #cfe0d6; color: #25382c; }
body[data-template="boutique"] .bq-alert-error { background: #fbe9e4; border-color: #f0cdc2; color: #9a3b22; }
body[data-template="boutique"] .bq-alert-info { background: var(--bq-terracotta-soft); border-color: #ecd6c6; color: #8a4a2c; }

/* ── 空狀態 ── */
body[data-template="boutique"] .bq-empty {
    text-align: center; padding: 80px 24px; max-width: 460px; margin: 0 auto;
}
body[data-template="boutique"] .bq-empty .ico {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bq-terracotta-soft); color: var(--bq-terracotta);
}
body[data-template="boutique"] .bq-empty .ico svg { width: 40px; height: 40px; }
body[data-template="boutique"] .bq-empty h2 { font-size: 24px; margin: 0 0 10px; }
body[data-template="boutique"] .bq-empty p { color: var(--bq-ink-soft); margin: 0 0 24px; line-height: 1.7; }

/* ============================================================================
 * 表單
 * ========================================================================== */
body[data-template="boutique"] .bq-field { margin-bottom: 18px; }
body[data-template="boutique"] .bq-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--bq-ink);
    margin-bottom: 7px; letter-spacing: .2px;
}
body[data-template="boutique"] .bq-input,
body[data-template="boutique"] .bq-select,
body[data-template="boutique"] .bq-textarea {
    width: 100%; padding: 13px 16px; border: 1px solid var(--bq-line);
    border-radius: var(--radius-sm); background: #fffdf8; color: var(--bq-ink);
    font-size: 14px; font-family: inherit; transition: all .25s; outline: none;
}
body[data-template="boutique"] .bq-input:focus,
body[data-template="boutique"] .bq-select:focus,
body[data-template="boutique"] .bq-textarea:focus {
    border-color: var(--bq-terracotta); box-shadow: 0 0 0 3px var(--bq-terracotta-soft);
}
body[data-template="boutique"] .bq-textarea { resize: vertical; min-height: 120px; }
body[data-template="boutique"] .bq-input-group { position: relative; }

/* ── 表格 ── */
body[data-template="boutique"] .bq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
body[data-template="boutique"] .bq-table th {
    text-align: left; padding: 14px 16px; font-size: 12px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--bq-ink-soft); font-weight: 600;
    border-bottom: 2px solid var(--bq-line); font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .bq-table td { padding: 16px; border-bottom: 1px solid var(--bq-line-soft); vertical-align: middle; }
body[data-template="boutique"] .bq-table tr:last-child td { border-bottom: none; }

/* ============================================================================
 * 頁首 chrome(沿用系統 nav class,只 restyle)
 * ========================================================================== */
/* 頂部 utility 資訊欄 */
body[data-template="boutique"] .bq-utilitybar {
    background: var(--bq-ink-green); color: #e9efe9;
    font-size: 12.5px; letter-spacing: .4px; font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .bq-utilitybar .container {
    display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 12px;
}
body[data-template="boutique"] .bq-utilitybar .left { display: flex; gap: 22px; align-items: center; }
body[data-template="boutique"] .bq-utilitybar .left span { display: inline-flex; align-items: center; gap: 7px; opacity: .92; }
body[data-template="boutique"] .bq-utilitybar svg { width: 14px; height: 14px; opacity: .8; }
body[data-template="boutique"] .bq-utilitybar a { color: #fff; }

body[data-template="boutique"] .announce-bar {
    background: var(--bq-terracotta); color: #fff; text-align: center;
    font-size: 13px; padding: 9px 16px; letter-spacing: .3px; font-weight: 500;
}

body[data-template="boutique"] .site-header {
    background: var(--header-bg, var(--bq-cream)); border-bottom: 1px solid var(--bq-line);
    position: sticky; top: 0; z-index: 200;
}
body[data-template="boutique"] .site-header .header-top {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, auto) minmax(0, 1fr); align-items: center;
    gap: 20px; padding: 18px 0;
}
body[data-template="boutique"] .header-logo {
    justify-self: center; grid-column: 2; text-align: center;
    min-width: 0; max-width: min(720px, 56vw);
}
body[data-template="boutique"] .header-logo a.logo-image-link {
    display: block;
}
body[data-template="boutique"] .header-logo img {
    display: block; max-width: 100%; height: auto;
}
body[data-template="boutique"] .header-logo .text-logo {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
    font-family: var(--bq-serif); font-size: var(--bq-text-logo-size, 27px); font-weight: 700; color: var(--bq-ink);
    letter-spacing: 1px; line-height: 1.12; max-height: 2.24em;
}
body[data-template="boutique"] .header-search { grid-column: 1; grid-row: 1; justify-self: start; max-width: 280px; width: 100%; }
body[data-template="boutique"] .header-search form { position: relative; }
body[data-template="boutique"] .header-search input {
    width: 100%; padding: 11px 42px 11px 18px; border: 1px solid var(--bq-line);
    border-radius: 999px; background: #fffdf8; font-size: 13.5px; outline: none; transition: all .25s;
}
body[data-template="boutique"] .header-search input:focus { border-color: var(--bq-terracotta); box-shadow: 0 0 0 3px var(--bq-terracotta-soft); }
body[data-template="boutique"] .header-search button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--bq-ink-soft); padding: 6px;
}
body[data-template="boutique"] .header-search button svg { width: 18px; height: 18px; }
body[data-template="boutique"] .header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
body[data-template="boutique"] .header-actions .h-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--bq-ink); padding: 6px 10px; border-radius: 12px; position: relative;
    font-size: 11px; transition: all .25s;
}
body[data-template="boutique"] .header-actions .h-btn:hover { color: var(--bq-terracotta-dark); background: var(--bq-terracotta-soft); }
body[data-template="boutique"] .header-actions .h-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body[data-template="boutique"] .header-actions .h-label { font-family: 'Inter', sans-serif; }
body[data-template="boutique"] .header-actions .h-btn .count {
    position: absolute; top: 0; right: 4px; background: var(--bq-terracotta); color: #fff;
    font-size: 10px; min-width: 17px; height: 17px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700;
}

/* nav */
body[data-template="boutique"] .header-nav { background: var(--header-bg, var(--bq-cream)); border-top: 1px solid var(--bq-line-soft); }
body[data-template="boutique"] .nav-list {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
body[data-template="boutique"] .nav-list > li > a {
    display: inline-flex; align-items: center; gap: 6px; padding: 14px 16px;
    font-size: 14px; font-weight: 500; color: var(--bq-ink); position: relative;
    letter-spacing: .3px;
}
body[data-template="boutique"] .nav-list > li > a::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 1.5px;
    background: var(--bq-terracotta); transform: scaleX(0); transform-origin: center;
    transition: transform .3s;
}
body[data-template="boutique"] .nav-list > li > a:hover::after,
body[data-template="boutique"] .nav-list > li > a.active::after { transform: scaleX(1); }
body[data-template="boutique"] .nav-list > li > a:hover,
body[data-template="boutique"] .nav-list > li > a.active { color: var(--bq-terracotta-dark); }

/* dropdown / mega */
body[data-template="boutique"] .nav-dropdown,
body[data-template="boutique"] .nav-sub-dropdown,
body[data-template="boutique"] .nav-flyout,
body[data-template="boutique"] .mega-menu {
    background: #fffdf8; border: 1px solid var(--bq-line); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 10px;
}
body[data-template="boutique"] .nav-dropdown a,
body[data-template="boutique"] .nav-sub-dropdown a,
body[data-template="boutique"] .nav-flyout a {
    display: block; padding: 9px 14px; border-radius: 10px; font-size: 14px; color: var(--bq-ink);
}
body[data-template="boutique"] .nav-dropdown a:hover,
body[data-template="boutique"] .nav-sub-dropdown a:hover,
body[data-template="boutique"] .nav-flyout a:hover { background: var(--bq-terracotta-soft); color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .mega-col-title { font-family: var(--bq-serif); font-weight: 600; color: var(--bq-ink); padding: 8px 14px; display: block; }
body[data-template="boutique"] .mega-menu-footer { border-top: 1px solid var(--bq-line-soft); margin-top: 8px; padding-top: 8px; }
body[data-template="boutique"] .mega-view-all { color: var(--bq-terracotta-dark); font-weight: 600; padding: 8px 14px; display: inline-block; }

body[data-template="boutique"] .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
body[data-template="boutique"] .hamburger span { width: 22px; height: 2px; background: var(--bq-ink); border-radius: 2px; }

/* 手機抽屜 restyle */
body[data-template="boutique"] .mobile-drawer { background: var(--bq-cream); }
body[data-template="boutique"] .mobile-drawer-header { border-bottom: 1px solid var(--bq-line); }
body[data-template="boutique"] .drawer-brand {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-width: 0; max-width: calc(100% - 48px); overflow: hidden;
    overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
    max-height: 2.3em;
    font-family: var(--bq-serif); font-size: var(--bq-drawer-brand-size, 20px); font-weight: 700; color: var(--bq-ink);
}
body[data-template="boutique"] .mobile-drawer-nav a,
body[data-template="boutique"] .mobile-page-link { color: var(--bq-ink); }
body[data-template="boutique"] .mobile-drawer-divider { background: var(--bq-line-soft); }

/* ============================================================================
 * 頁尾(自包含,見 footer.php;此處只放共用 token)
 * ========================================================================== */
body[data-template="boutique"] .whatsapp-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 300;
    width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
body[data-template="boutique"] .whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
/* 排在 WhatsApp 浮動掣（20px + 54px 高）之上；原本兩者同樣是 20px，會完全疊住。 */
body[data-template="boutique"] .back-to-top {
    position: fixed; right: 20px; bottom: 88px; z-index: 250; width: 46px; height: 46px;
    border-radius: 50%; background: #fffdf8; border: 1px solid var(--bq-line); color: var(--bq-ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transition: all .3s;
}
body[data-template="boutique"] .back-to-top.visible { opacity: 1; visibility: visible; }
body[data-template="boutique"] .back-to-top:hover { background: var(--bq-terracotta); color: #fff; border-color: var(--bq-terracotta); }

/* ── 動畫 ── */
body[data-template="boutique"] .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
body[data-template="boutique"] .animate-on-scroll.visible { opacity: 1; transform: none; }
@keyframes bqFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body[data-template="boutique"] .fade-in { animation: bqFade .6s both; }

/* ============================================================================
 * 共用全域 class 覆蓋(令沿用 default markup 嘅頁面自動變暖陽精品風)
 * 涵蓋:列表頁 / 麵包屑 / 表單 / 按鈕 / badge / 購物車 / 結帳 / 會員
 * ========================================================================== */

/* 通用 .btn / .badge / .form-control(部分頁面沿用) */
body[data-template="boutique"] .btn,
body[data-template="boutique"] button.btn,
body[data-template="boutique"] .btn-primary {
    border-radius: 999px !important; font-weight: 600; letter-spacing: .3px;
}
body[data-template="boutique"] .btn-primary,
body[data-template="boutique"] .btn-checkout,
body[data-template="boutique"] .btn-buy {
    background: var(--bq-terracotta) !important; color: #fbf7f0 !important; border-color: var(--bq-terracotta) !important;
}
body[data-template="boutique"] .badge {
    border-radius: 999px; font-weight: 600; letter-spacing: .2px; font-family: 'Inter', sans-serif;
}
body[data-template="boutique"] .form-control,
body[data-template="boutique"] input[type="text"]:not(.header-search input),
body[data-template="boutique"] input[type="email"],
body[data-template="boutique"] input[type="password"],
body[data-template="boutique"] input[type="tel"],
body[data-template="boutique"] input[type="number"],
body[data-template="boutique"] input[type="search"],
body[data-template="boutique"] select,
body[data-template="boutique"] textarea {
    border-radius: var(--radius-sm); border-color: var(--bq-line);
}
body[data-template="boutique"] .form-control:focus,
body[data-template="boutique"] input:focus,
body[data-template="boutique"] select:focus,
body[data-template="boutique"] textarea:focus {
    border-color: var(--bq-terracotta); box-shadow: 0 0 0 3px var(--bq-terracotta-soft); outline: none;
}

/* ── 麵包屑(全域 .breadcrumb)── */
body[data-template="boutique"] .breadcrumb { color: var(--bq-ink-soft); font-size: 13px; }
body[data-template="boutique"] .breadcrumb a { color: var(--bq-ink-soft); }
body[data-template="boutique"] .breadcrumb a:hover { color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .breadcrumb svg { stroke: var(--bq-line); }

/* ── 分類 Hero ── */
body[data-template="boutique"] .cat-hero {
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bq-line-soft);
    background: var(--bq-cream-deep); margin-top: 8px;
}
body[data-template="boutique"] .cat-hero-content h1 { font-family: var(--bq-serif); }
body[data-template="boutique"] .cat-count { color: var(--bq-ink-green); }
body[data-template="boutique"] .cat-banner { border-radius: var(--radius); overflow: hidden; }

/* ── 子分類 chip ── */
body[data-template="boutique"] .subcat-chip,
body[data-template="boutique"] .filter-tag {
    border-radius: 999px !important; border: 1px solid var(--bq-line) !important; background: #fffdf8 !important;
    color: var(--bq-ink) !important;
}
body[data-template="boutique"] .subcat-chip.active,
body[data-template="boutique"] .subcat-chip:hover {
    background: var(--bq-terracotta) !important; border-color: var(--bq-terracotta) !important; color: #fff !important;
}
body[data-template="boutique"] .filter-tag a { color: var(--bq-terracotta-dark); }

/* ── 列表佈局 + 側欄 ── */
body[data-template="boutique"] .cat-sidebar,
body[data-template="boutique"] .sidebar-section {
    background: transparent;
}
body[data-template="boutique"] .sidebar-section {
    background: #fffdf8; border: 1px solid var(--bq-line-soft); border-radius: var(--radius);
    padding: 20px; margin-bottom: 18px;
}
body[data-template="boutique"] .sidebar-section h3 { font-family: var(--bq-serif); color: var(--bq-ink); font-size: 16px; }
body[data-template="boutique"] .cat-list a,
body[data-template="boutique"] .filter-item {
    color: var(--bq-ink); border-radius: 10px;
}
body[data-template="boutique"] .cat-list a.active,
body[data-template="boutique"] .filter-item.active,
body[data-template="boutique"] .cat-list a:hover,
body[data-template="boutique"] .filter-item:hover {
    color: var(--bq-terracotta-dark); background: var(--bq-terracotta-soft);
}
body[data-template="boutique"] .cat-list .cnt,
body[data-template="boutique"] .filter-item .cnt { color: var(--bq-ink-soft); }
body[data-template="boutique"] .fake-checkbox { border-radius: 6px; border-color: var(--bq-line); }
body[data-template="boutique"] .fake-checkbox.checked { background: var(--bq-terracotta); border-color: var(--bq-terracotta); }
body[data-template="boutique"] .swatch.active { outline-color: var(--bq-terracotta); }
body[data-template="boutique"] .price-inputs input { border-radius: var(--radius-sm); border-color: var(--bq-line); }
body[data-template="boutique"] .btn-filter {
    background: var(--bq-ink-green); color: #fbf7f0; border-radius: 999px; border: none; font-weight: 600;
}
body[data-template="boutique"] .btn-filter:hover { background: #25382c; }

/* ── 工具列 + 排序 ── */
body[data-template="boutique"] .cat-toolbar {
    background: #fffdf8; border: 1px solid var(--bq-line-soft); border-radius: var(--radius);
    padding: 14px 18px;
}
body[data-template="boutique"] .filter-toggle,
body[data-template="boutique"] .sort-select {
    border-radius: 999px !important; border: 1px solid var(--bq-line) !important; background: #fffdf8 !important;
    color: var(--bq-ink) !important;
}
body[data-template="boutique"] .result-count { color: var(--bq-ink-soft); }
body[data-template="boutique"] .view-toggle { border-radius: 999px; border: 1px solid var(--bq-line); overflow: hidden; }
body[data-template="boutique"] .view-toggle button { color: var(--bq-ink-soft); background: #fffdf8; }
body[data-template="boutique"] .view-toggle button.active { background: var(--bq-terracotta-soft); color: var(--bq-terracotta-dark); }

/* products grid 容器(列表頁用 .products-grid) */
body[data-template="boutique"] .products-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 760px) {
    body[data-template="boutique"] .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── 全域分頁 .pagination ── */
body[data-template="boutique"] .pagination a,
body[data-template="boutique"] .pagination span {
    border-radius: 999px !important; border: 1px solid var(--bq-line) !important; background: #fffdf8 !important;
    color: var(--bq-ink) !important;
}
body[data-template="boutique"] .pagination .active,
body[data-template="boutique"] .pagination a:hover {
    background: var(--bq-terracotta) !important; border-color: var(--bq-terracotta) !important; color: #fff !important;
}
body[data-template="boutique"] .pagination .dots { border: none !important; background: transparent !important; }

/* ── 列表空狀態 ── */
body[data-template="boutique"] .cat-empty {
    background: #fffdf8; border: 1px solid var(--bq-line-soft); border-radius: var(--radius); color: var(--bq-ink-soft);
}
body[data-template="boutique"] .cat-empty h3 { font-family: var(--bq-serif); color: var(--bq-ink); }
body[data-template="boutique"] .cat-empty svg { stroke: var(--bq-terracotta); }

/* ── 列表/描述卡 ── */
body[data-template="boutique"] .cat-desc-top,
body[data-template="boutique"] .cat-desc-bottom {
    background: #fffdf8 !important; border-color: var(--bq-line-soft) !important; border-radius: var(--radius) !important;
    color: var(--bq-ink-soft) !important;
}

/* ── 通用 section-header(沿用 default 嘅頁面)── */
body[data-template="boutique"] .section-header h2 { font-family: var(--bq-serif); }
body[data-template="boutique"] .section-header h2::before { background: var(--bq-terracotta) !important; }
body[data-template="boutique"] .section-header .view-all { color: var(--bq-terracotta-dark); }
body[data-template="boutique"] .section-header .view-all:hover { background: var(--bq-terracotta-soft); }

/* ── RWD 頁首 ── */
@media (max-width: 920px) {
    body[data-template="boutique"] .bq-utilitybar .right { display: none; }
    body[data-template="boutique"] .bq-utilitybar .left { gap: 14px; font-size: 11px; }
    body[data-template="boutique"] .bq-utilitybar .left span:nth-child(2) { display: none; }
    body[data-template="boutique"] .header-nav { display: none; }
    body[data-template="boutique"] .hamburger { display: flex; }
    body[data-template="boutique"] .site-header .header-top { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; }
    body[data-template="boutique"] .header-search { display: none; }
    body[data-template="boutique"] .header-logo { grid-column: 1; justify-self: stretch; max-width: 100%; }
    body[data-template="boutique"] .header-actions { grid-column: 2; }
    body[data-template="boutique"] .header-logo .text-logo { font-size: var(--bq-text-logo-size-tablet, 22px); line-height: 1.12; }
    body[data-template="boutique"] .header-actions .h-label { display: none; }
    body[data-template="boutique"] .bq-section { padding: 44px 0; }
    body[data-template="boutique"] .bq-section-head h2 { font-size: 26px; }
    body[data-template="boutique"] .container { padding: 0 16px; }
}
@media (max-width: 560px) {
    body[data-template="boutique"] .header-actions { gap: 2px; }
    body[data-template="boutique"] .header-actions .h-btn { padding: 6px 7px; }
    body[data-template="boutique"] .hamburger { padding: 8px 6px; }
    body[data-template="boutique"] .header-logo { max-width: 100%; }
    body[data-template="boutique"] .header-logo .text-logo {
        -webkit-line-clamp: 3;
        font-size: var(--bq-text-logo-size-mobile, 20px);
        line-height: 1.1;
        max-height: 3.3em;
    }
    body[data-template="boutique"] .drawer-brand { font-size: var(--bq-drawer-brand-size-mobile, 18px); }
}