/* ===================================================================
   v1-1 篩選抽屜（右側滑出）—— 版型比照 V4 的 .filter-drawer，
   視覺全走 v1-1：白卡面＋奶油白色帶、陶土紅點綴與膠囊、昭源宋體標題、
   陶土紅短線 kicker（不用 V4 的金線／金字）。

   同時把 .shop__layout 從「側欄＋主欄」兩欄改成單欄（篩選移進抽屜後
   側欄就沒了，不改的話主欄會擠在原本的側欄格）。
   =================================================================== */

/* ── 版面：沒有側欄了 ── */
.shop__layout--drawer {
    display: block !important;
}
.shop__layout--drawer .shop__main {
    width: 100%;
}

/* ── 工具列上的篩選鈕 ──
   不框起來：工具列右側是「排序」下拉＋「篩選」，兩個都框會變成兩顆按鈕互搶，
   篩選改成純文字＋圖示，與左側件數同一層級，hover 才用陶土紅點出來。 */
.v11-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    position: relative;
    background: none;
    border: 0;
    padding: 0.4rem 0;
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--sgtn-cocoa, #2B1712);
    cursor: pointer;
    transition: color .2s ease;
}
.v11-filter-btn i { font-size: 1.3rem; color: var(--sgtn-muted-text, #7A6A5F); transition: color .2s ease; }
.v11-filter-btn:hover,
.v11-filter-btn:focus-visible {
    color: var(--sgtn-terracotta-hover, #A94737);
}
.v11-filter-btn:hover i,
.v11-filter-btn:focus-visible i { color: var(--sgtn-terracotta-hover, #A94737); }
/* hover 用陶土紅底線代替外框，維持 v1-1 的細線語彙 */
.v11-filter-btn span[data-i18n-text] {
    border-bottom: 1px solid transparent;
    padding-bottom: 0.2rem;
    transition: border-color .2s ease;
}
.v11-filter-btn:hover span[data-i18n-text],
.v11-filter-btn:focus-visible span[data-i18n-text] {
    border-bottom-color: var(--sgtn-terracotta, #C95F4A);
}
/* 已套用條件時的小紅點，關著也看得出來有篩選中 */
.v11-filter-btn__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--sgtn-terracotta, #C95F4A);
}
.shop__toolbar .shop__tools {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

/* ── 抽屜本體 ──
   色票與其他 v1-1 模組（brand.css／culture.css）取同一組區域變數，
   以後調色只改這裡。 */
.v11-drawer {
    --fd-ink: var(--sgtn-cocoa, #2B1712);
    --fd-accent: var(--sgtn-terracotta, #C95F4A);
    /* 小字用深一階陶土紅：#C95F4A 在白／奶油白只有 4.0:1，未達 AA */
    --fd-accent-text: var(--sgtn-terracotta-hover, #A94737);
    --fd-muted: var(--sgtn-muted-text, #7A6A5F);
    --fd-line: var(--sgtn-line-sand, #DDD1C3);
    --fd-line-soft: #EDE3D7;
    --fd-paper: var(--sgtn-warm-white, #F7F2EA);
    --fd-tint: #F6EDE4;

    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    font-family: "Noto Sans TC", system-ui, sans-serif;
}
/* 遮罩用可可棕（非中性黑），壓深一點讓面板浮起來 */
.v11-drawer__mask {
    position: absolute;
    inset: 0;
    background: rgba(43, 23, 18, 0.46);
    opacity: 0;
    transition: opacity .3s ease;
}
/* v1-1 的層次是「白卡面 ＋ 奶油白色帶」（見 culture.css 的 .v11cul-sec--paper）：
   面板主體給白底，頭尾兩條固定列給奶油白，跟站上其他區塊同一種交錯。 */
.v11-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(40rem, 92vw);
    background: #fff;
    border-left: 1px solid var(--fd-line-soft);
    box-shadow: -14px 0 44px rgba(43, 23, 18, 0.16);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s ease;
}
.v11-drawer.is-open { pointer-events: auto; }
.v11-drawer.is-open .v11-drawer__mask { opacity: 1; }
.v11-drawer.is-open .v11-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .v11-drawer__mask,
    .v11-drawer__panel { transition: none; }
}

.v11-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.2rem 2.6rem;
    background: var(--fd-paper);
    border-bottom: 1px solid var(--fd-line-soft);
}
/* 標題比照 v1-1 各頁大標：昭源宋體、不加寬字距，前面掛一條陶土紅短線
   （與 .v11brand-hero__kicker、.v11cul 頁首同一個記號） */
.v11-drawer__title {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-family: "Chiron Sung HK", "Noto Serif TC", serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fd-ink);
}
.v11-drawer__title::before {
    content: "";
    width: 2.8rem;
    height: 3px;
    border-radius: 2px;
    background: var(--fd-accent);
    flex: 0 0 auto;
}
.v11-drawer__close {
    background: none;
    border: 0;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--fd-muted);
    cursor: pointer;
    padding: 0.2rem 0.8rem;
    transition: color .2s ease;
}
.v11-drawer__close:hover,
.v11-drawer__close:focus-visible { color: var(--fd-accent-text); }

/* 表單本身不捲動：內層 __scroll 捲，底部動作固定在面板下緣，
   兩者分離才不會出現「動作列疊在選項上、下緣露出半截」 */
.v11-drawer__form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.v11-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 2.6rem 1.2rem;
    overscroll-behavior: contain;
}

/* ── 各篩選群組 ── */
.v11-fd-group {
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--fd-line-soft);
}
.v11-fd-group:last-of-type { border-bottom: 0; }
/* 群組標題＝v1-1 的 kicker（陶土紅短線＋中文小標），
   原本的金字不在 v1-1 色票裡（金線是 V4 的記號） */
.v11-fd-group h5 {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--fd-accent-text);
    margin: 0 0 1.2rem;
}
.v11-fd-group h5::before {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: var(--fd-accent);
    flex: 0 0 auto;
}
.v11-fd-label {
    font-family: "Chiron Sung HK", "Noto Serif TC", serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fd-ink);
    margin: 1.4rem 0 0.4rem;
}
.v11-fd-check {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.4rem;
    color: var(--fd-ink);
    padding: 0.6rem 1rem;
    margin: 0 -1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.v11-fd-check:hover { background: var(--fd-tint); color: var(--fd-accent-text); }
.v11-fd-check--sub { padding-left: 2.6rem; }
.v11-fd-check input { accent-color: var(--fd-accent); }
.v11-fd-check span { flex: 1; }
.v11-fd-check em {
    font-style: normal;
    font-size: 1.2rem;
    color: var(--fd-muted);
}
.v11-fd-input {
    width: 100%;
    border: 1px solid var(--fd-line);
    border-radius: 999px;
    background: #fff;
    padding: 0.9rem 1.6rem;
    font-size: 1.4rem;
    font-family: inherit;
    color: var(--fd-ink);
    transition: border-color .2s ease;
}
.v11-fd-input::placeholder { color: var(--fd-muted); }
.v11-fd-input:focus {
    outline: 2px solid rgba(201, 95, 74, 0.28);
    outline-offset: 1px;
    border-color: var(--fd-accent);
}

/* 價格帶快選：點了直接套用，不必再按「套用篩選」 */
.v11-fd-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}
/* 膠囊樣式對齊 culture.css 的 .v11cul-nav__item */
.v11-fd-band {
    border: 1px solid var(--fd-line);
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-size: 1.35rem;
    color: var(--fd-ink);
    background: #fff;
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.v11-fd-band:hover,
.v11-fd-band:focus-visible {
    border-color: var(--fd-accent);
    color: var(--fd-accent-text);
    text-decoration: none;
}
.v11-fd-band.is-active {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: #fff;
}
.v11-fd-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.v11-fd-price span { color: var(--fd-muted); }

/* ── 底部動作 ── */
.v11-drawer__actions {
    flex: 0 0 auto;
    background: var(--fd-paper);
    padding: 1.8rem 2.6rem 2.2rem;
    border-top: 1px solid var(--fd-line-soft);
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
/* 主／次動作＝v1-1 的實心陶土紅膠囊＋線框膠囊（比照 .v11cul-fb__cta 與 .v11cul-back） */
.v11-fd-apply {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: var(--fd-accent);
    border: 1px solid var(--fd-accent);
    border-radius: 999px;
    padding: 1.2rem 2rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}
.v11-fd-apply:hover,
.v11-fd-apply:focus-visible {
    background: var(--fd-accent-text);
    border-color: var(--fd-accent-text);
}
.v11-fd-reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2rem;
    border: 1px solid var(--fd-line);
    border-radius: 999px;
    background: #fff;
    font-size: 1.4rem;
    color: var(--fd-muted);
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease;
}
.v11-fd-reset:hover,
.v11-fd-reset:focus-visible {
    border-color: var(--fd-accent);
    color: var(--fd-accent-text);
    text-decoration: none;
}

@media (max-width: 575px) {
    .v11-drawer__head,
    .v11-drawer__scroll,
    .v11-drawer__actions { padding-inline: 1.8rem; }
}