/* ===================================================================
   v1-1 品牌頁（/theme/brand/{slug}，以及 /shop?brand={slug} 的品牌 hero）

   舊版 hero 在 css/shop.css，是 look-v2 留下來的：封面圖淡淡鋪底、kicker
   中英混排、字體用 Noto Serif TC／Outfit、輔助文字是冷灰 #8a8a8a。
   這裡整段換成 v1-1 語彙：奶油白色帶、左文右圖、陶土紅短線、昭源宋體大標
   ＋黑體內文、16px 圓角。淺底小字一律用深一階陶土紅 --sgtn-terracotta-hover
   才過 AA（#C95F4A 在奶油白只有 3.9:1）。

   放在 shop.css 之後載；只作用在 .v11brand-hero 與 .shop--brand，
   /shop 一般列表頁不受影響。
   =================================================================== */

.v11brand-hero {
    --vb-ink: var(--sgtn-cocoa, #2B1712);
    --vb-accent: var(--sgtn-terracotta, #C95F4A);
    --vb-accent-text: var(--sgtn-terracotta-hover, #A94737);
    --vb-muted: var(--sgtn-muted-text, #7A6A5F);
    --vb-line: #EDE3D7;

    display: block;
    background: var(--sgtn-warm-white, #F7F2EA);
    color: var(--vb-ink);
    font-family: "Noto Sans TC", system-ui, sans-serif;
    padding: 3.2rem 0 4.8rem;
}

/* ── 麵包屑 ── */
/* v1 的 common.css 有一條 `nav { border-bottom: 1px solid #d0d0d0 }` 全域規則，
   會在麵包屑下面畫一條色票外的冷灰線 */
.v11brand-hero__crumb {
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    color: var(--vb-muted);
    margin: 0 0 2.8rem;
}
.v11brand-hero__crumb a { color: var(--vb-muted); text-decoration: none; }
.v11brand-hero__crumb a:hover,
.v11brand-hero__crumb a:focus-visible { color: var(--vb-accent-text); text-decoration: underline; }
.v11brand-hero__crumb .sep { color: var(--sgtn-line-sand, #DDD1C3); }
.v11brand-hero__crumb .is-current { color: var(--vb-ink); }

/* ── 左文右圖 ── */
.v11brand-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
}
/* 沒有封面圖的品牌：文字獨佔一欄，不留空格 */
.v11brand-hero.is-noimg .v11brand-hero__grid { grid-template-columns: 1fr; }

/* kicker：短橫線 ＋ 中文小標（英文只掛在 data-text-en 上） */
.v11brand-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--vb-accent-text);
    margin-bottom: 1.2rem;
}
.v11brand-hero__kicker::before {
    content: "";
    width: 2.8rem;
    height: 1px;
    background: var(--vb-accent);
    flex: 0 0 auto;
}

.v11brand-hero__title {
    font-family: "Chiron Sung HK", "Noto Serif TC", serif;
    font-weight: 700;
    font-size: 4.4rem;
    line-height: 1.35;
    margin: 0;
}

.v11brand-hero__rule {
    width: 6rem;
    height: 3px;
    background: var(--vb-accent);
    border-radius: 2px;
    margin: 2rem 0 1.8rem;
}

.v11brand-hero__tagline {
    font-family: "Chiron Sung HK", "Noto Serif TC", serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--vb-ink);
    margin: 0 0 1.4rem;
}

.v11brand-hero__story {
    font-size: 1.6rem;
    line-height: 1.95;
    color: var(--vb-muted);
    margin: 0;
    max-width: 52ch;
}

/* ── 封面圖：完整呈現，不再當淡淡的底圖 ── */
.v11brand-hero__photo {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    /* 各品牌 banner 高度一致，換圖不跳版 */
    aspect-ratio: 3 / 2;
    background: var(--sgtn-warm-sand, #EFE7DC);
    box-shadow: 0 20px 44px rgba(43, 23, 18, 0.14);
}
.v11brand-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 商品區：把 shop.css 的冷灰輔助色換成暖色，工具列／分頁才跟 hero 同調 ── */
.shop--brand {
    --shop-muted: var(--sgtn-muted-text, #7A6A5F);
    --shop-line: #EDE3D7;
}

@media (max-width: 991px) {
    .v11brand-hero__grid { grid-template-columns: 1fr; gap: 3.2rem; }
    .v11brand-hero__photo { order: -1; }
    .v11brand-hero__title { font-size: 3.4rem; }
    .v11brand-hero__tagline { font-size: 1.8rem; }
}

@media (max-width: 575px) {
    .v11brand-hero { padding: 2.4rem 0 3.6rem; }
    .v11brand-hero__title { font-size: 2.8rem; }
}