/*
 * 新又美 N&B 配色
 * ------------------------------------------------------------
 * 店主指定：內文字 #333333，底色 #F3EFEA。
 * 那組是很暖的米白配深灰，安靜、耐看，適合大量文字。
 * 但它本身沒有「這是哪一家店」的訊號，所以強調色取自招牌與 Logo：
 * 招牌的紅底方塊（N&B 那一格）與 Logo 的黃底。
 *
 * 用法：紅色只出現在少數幾個要人動作的地方（主要按鈕、價格），
 * 黃色當標記與底線用。整頁的重量留給米白與深灰，這樣紅才有力量。
 *
 * 這支放在 style-fontsize.css 之後載入，同特異性時它要贏。
 */

:root {
    /* 店主指定 */
    --nb-bg:   #F3EFEA;   /* 底色：暖米白 */
    --nb-text: #333333;   /* 內文字 */

    /* 取自招牌與 Logo */
    --nb-red:    #B4232A;   /* 招牌上 N&B 那格的紅，主要按鈕與價格 */
    --nb-red-dk: #8E181E;   /* 紅色壓深，hover 用 */
    --nb-gold:   #F2B705;   /* Logo 的黃，標記與底線 */

    /* 由底色推出來的層次。同一個暖色系往上下各走一階，
       頁面才有層次又不會冒出一個突兀的灰。 */
    --nb-surface: #FBF9F6;   /* 卡片、輸入框底 */
    --nb-line:    #E2DBD2;   /* 分隔線、外框 */
    --nb-muted:   #6E6459;   /* 次要文字 */
    --nb-ink:     #1F1B17;   /* 標題，比內文再深一階 */

    /* 語意色，跟品牌色分開 */
    --nb-ok:   #2E7D32;
    --nb-warn: #B26A00;
}

body {
    background-color: var(--nb-bg);
    color: var(--nb-text);
}

/* 首頁與分類頁原本鋪的冷灰底，換成品牌的暖米白 */
body#page_index,
body#page_index #main .wrapper.catalog-layout,
body#page_category,
body#page_category #main .wrapper.catalog-layout,
body#page_search,
body#page_goods,
body#page_article,
body#page_article_cat {
    background-color: var(--nb-bg);
}

/* ---------- 標題與連結 ---------- */
#main .box > .hd h3 {
    color: var(--nb-ink);
    border-left: 4px solid var(--nb-red);
    padding-left: 12px;
}

#main a:hover {
    color: var(--nb-red);
}

/* ---------- 卡片 ---------- */
#main .box,
.goods_box,
.mk-card {
    background: var(--nb-surface);
    border-color: var(--nb-line);
}

/* ---------- 按鈕 ---------- */
#main a.button.bright_button,
#main .button.bright_button,
.nb-btn {
    background: var(--nb-red);
    border: 1px solid var(--nb-red);
    color: #FFFFFF;
    min-height: 44px;
    border-radius: 4px;
    font-weight: 600;
}

#main a.button.bright_button:hover,
#main .button.bright_button:hover,
.nb-btn:hover {
    background: var(--nb-red-dk);
    border-color: var(--nb-red-dk);
    color: #FFFFFF;
}

/* 次要按鈕：留白底，只有外框帶顏色 */
#main a.button.dim_button,
.nb-btn-ghost {
    background: var(--nb-surface);
    border: 1px solid var(--nb-line);
    color: var(--nb-text);
}

#main a.button.dim_button:hover,
.nb-btn-ghost:hover {
    border-color: var(--nb-red);
    color: var(--nb-red);
}

/* ---------- 價格 ---------- */
.price strong,
#pd_amount,
.goods_price,
em.price {
    color: var(--nb-red);
    font-variant-numeric: tabular-nums;
}

/* ---------- 標記 ---------- */
.nb-tag {
    display: inline-block;
    padding: 2px 10px;
    background: var(--nb-gold);
    border-radius: 3px;
    color: var(--nb-ink);
    font-size: 12px;
    font-weight: 700;
}

/* 招牌上那三項是這家店的特色，值得在頁面上有自己的樣子 */
.nb-specialty {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.nb-specialty li {
    padding: 8px 16px;
    background: var(--nb-surface);
    border: 1px solid var(--nb-line);
    border-bottom: 3px solid var(--nb-gold);
    border-radius: 4px;
    color: var(--nb-ink);
    font-size: 15px;
    font-weight: 600;
}

/* ---------- 表格（文章頁的店家資訊用） ---------- */
.nb-table {
    width: 100%;
    margin: 14px 0 20px;
    border-collapse: collapse;
    font-size: 15px;
}

.nb-table th,
.nb-table td {
    padding: 10px 14px;
    border: 1px solid var(--nb-line);
    text-align: left;
    line-height: 1.75;
}

.nb-table th {
    width: 28%;
    background: var(--nb-surface);
    color: var(--nb-ink);
    font-weight: 600;
    white-space: nowrap;
}

/* 寬內容自己捲，頁面本體不橫向捲動 */
.article_content table,
.nb-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- 頁尾 ---------- */
#footer,
.footer {
    background: var(--nb-ink);
    color: #E8E2DA;
}

#footer a,
.footer a {
    color: #E8E2DA;
}

#footer a:hover,
.footer a:hover {
    color: var(--nb-gold);
}

/* ---------- 手機 ---------- */
@media screen and (max-width: 767px) {
    .nb-specialty li {
        flex: 1 1 auto;
        text-align: center;
        font-size: 14px;
    }

    .nb-table th {
        width: 36%;
    }
}