/* =====================================================================
   style-inner.css — 內頁版面調整（商品、文章、文章列表）＋ 全站底色
   ---------------------------------------------------------------------
   在解決什麼問題：
   2026-09-09 首頁換成 hn-* 那套新版面，但只做了首頁，
   客人點進任何一頁，底色與間距都跳回舊的，看起來像換了一個網站。

   2026-09-10 的做法分成兩層：

   （一）顏色不放在這支檔案。
        主色是 Logo 的 #147486，定義在 style-components.css 的 :root --en-*，
        全站（含結帳、會員中心、分類頁）的重點色與線條都吃那組變數。
        想微調全站顏色，改那裡就好，不要在這裡逐條蓋。

        ⚠ 2026-09-10 曾經把全站主色換成墨綠 #214f40，方向錯了，
          當天已還原成 #147486。不要再往墨綠改 —— 主色要跟 Logo 一致。

   （二）這支檔案只留「顏色以外」的東西：
        全站的頁面底色、內頁的字級與卡片間距、文章的閱讀行長，
        以及頁尾最底下那一列的排版修正。

   為什麼獨立成一支檔案：
   跟 style-fontsize.css 同樣的理由 —— 要整組退版只要把
   html_header.lbi 那一行 <link> 拿掉，不必從六千行裡挑。
   （顏色那一層退不掉，那是改在來源檔，要用 git 還原。）

   載入順序在 style-components.css 之後、style-home.css 之前。
   首頁（body#page_index）除了頁尾那一節之外不在本檔範圍。

   ⚠ 改完這支要清 temp/compiled/，並確認 functions.php 的 $_css_ver
     陣列有列入本檔，否則客人瀏覽器會吃到舊的快取版本。
   ===================================================================== */


/* ---------------------------------------------------------------
   1. 全站頁面底色
   ---------------------------------------------------------------
   style.css:54 的 body 是純白。改成規劃的頁面底色 #f7f8f5（略帶暖的淺灰），
   內容區的白色 .wrapper／.box 才浮得起來。
   #main .wrapper 維持白底 —— 結帳、會員中心那些頁面的表單
   本來就直接鋪在 wrapper 上，沒有卡片包著，拿掉會沒有邊界。 */
body {
    background-color: var(--en-ground);
}


/* ---------------------------------------------------------------
   2. 內頁共用：底色、字體、卡片
   ---------------------------------------------------------------
   這三頁的內容本來就是一張張 .box 卡片，所以 wrapper 改成透明，
   做成首頁那種「淺底上放白卡」。 */
body#page_goods,
body#page_article,
body#page_article_cat {
    color: var(--en-text);
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;
}

body#page_goods #main,
body#page_article #main,
body#page_article_cat #main {
    background-color: var(--en-ground);
}

body#page_goods #main .wrapper,
body#page_article #main .wrapper,
body#page_article_cat #main .wrapper {
    background-color: transparent;
    color: var(--en-text);
    padding-bottom: 40px;
}

/* 首頁內文是 18px。內頁沿用同一個級距，但不套用在表格與表單控制項上，
   那些元件的欄寬是照舊字級算的，放大會擠成兩行。 */
body#page_goods .box .bd > p,
body#page_article .box .bd > p,
body#page_article_cat .box .bd > p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--en-text-mid);
}

/* 區塊標題列：拿掉舊的灰底與陰影（style.css:492），改成細線分隔 */
body#page_goods #main .box .hd,
body#page_article #main .box .hd,
body#page_article_cat #main .box .hd {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--en-line-soft);
    border-radius: var(--en-radius) var(--en-radius) 0 0;
}

body#page_goods #main .box .hd h3,
body#page_article #main .box .hd h3,
body#page_article_cat #main .box .hd h2,
body#page_article_cat #main .box .hd h3 {
    color: var(--en-text);
    font-weight: 600;
    letter-spacing: .01em;
}

/* 頁面大標：跟首頁 h2 同一個 clamp 級距 */
body#page_article_cat .catalog-page-title {
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .01em;
}


/* ---------------------------------------------------------------
   3. 商品頁
   --------------------------------------------------------------- */

/* 商品名：首頁 h1 是 clamp(34px,3.7vw,50px)，商品頁不用那麼大，
   但要比原本的 20px 明顯一階。 */
body#page_goods .product_details .pd-name {
    font-size: clamp(24px, 2.3vw, 30px);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .01em;
}

body#page_goods .product_details .intro {
    font-size: 16px;
    line-height: 1.8;
    color: var(--en-text-mid);
}

body#page_goods .product_details .price_and_no .price strong {
    font-weight: 700;
    letter-spacing: .01em;
}

/* 主要行動按鈕（加入送洗清單）改成首頁 .hn-primary 那種實心圓角。
   .bright_button 在 style.css 是背景圖 + 漸層，要一起關掉才吃得到底色。 */
body#page_goods .product_details .submit .button.bright_button,
body#page_goods .product_details .submit a.button.bright_button {
    background-image: none !important;
    background-color: var(--en-brand) !important;
    border: 1px solid var(--en-brand) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-shadow: none !important;
    min-height: 48px;
    font-size: 16px;
}

/* 規格選項改成首頁那種圓角膠囊 */
body#page_goods .product_details .properties dd.radio label,
body#page_goods .product_details .properties dd.checkbox label {
    border-radius: 8px;
}

/* 分頁式區塊的頁籤（plugins.js 的 Tabiy 產生的 .tab_wrapper .tabs a）。
   顏色由 style-components.css 的 var(--en-brand) 決定，這裡只調形狀。
   ⚠ 不要改成 position:absolute —— Tabiy 會量 .tabs 的 outerHeight
     再回頭設 box 的 paddingTop/marginTop，脫離文件流會算成 0。 */
body#page_goods #goods_info .tab_wrapper .tabs a {
    border-radius: 999px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

body#page_goods .goods_properties .property_list dt {
    color: var(--en-text);
    font-weight: 600;
}

body#page_goods .goods_properties .property_list dd {
    color: var(--en-text-mid);
}

/* 手機浮動送洗列 */
body#page_goods .mobile-float-buy a {
    background-color: var(--en-brand) !important;
}

body#page_goods .mobile-float-buy .mini-price {
    color: #fff;
    font-weight: 700;
}


/* ---------------------------------------------------------------
   4. 文章頁
   --------------------------------------------------------------- */

/* 標題橫幅的漸層在 style.css:2752 是整行 !important，
   顏色吃 style.css 的主色，字級與陰影還是舊的，這裡調一次。 */
body#page_article .article h1 {
    font-size: clamp(22px, 2.2vw, 30px) !important;
    line-height: 1.45 !important;
    letter-spacing: .02em !important;
    text-shadow: none !important;
    border-radius: var(--en-radius) var(--en-radius) 0 0 !important;
}

body#page_article .box .bd .article_content {
    border-radius: 0 0 var(--en-radius) var(--en-radius) !important;
    box-shadow: none !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
    color: var(--en-text-mid) !important;
}

/* 長文的行長要收窄才好讀；首頁沒有長文，沒有對應的值可以抄。 */
body#page_article .box .bd .article_content > * {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

body#page_article .box .bd .article_content h2,
body#page_article .box .bd .article_content h3,
body#page_article .box .bd .article_content h4 {
    color: var(--en-text);
    font-weight: 600;
    line-height: 1.5;
}

/* 上一篇／下一篇 */
body#page_article .article-nav {
    gap: 12px;
}

body#page_article .article-nav .nav-item {
    font-size: 15px;
    color: var(--en-text-mid);
}

body#page_article .article-nav .nav-item a {
    color: var(--en-text);
}

body#page_article .article-nav .nav-item .label {
    color: var(--en-text-dim);
}

/* 字級工具列：按鈕改成首頁那種膠囊。
   目前選中的那顆由 article.dwt 內嵌的 <style> 上色。 */
body#page_article .article_font_toolbar .font_size_btn {
    border-radius: 999px;
    border: 1px solid var(--en-line);
    background: transparent;
    color: var(--en-text-mid);
    min-height: 36px;
    padding: 4px 14px;
}

body#page_article .article_font_toolbar .font_toolbar_label {
    color: var(--en-text-dim);
}


/* ---------------------------------------------------------------
   5. 文章列表頁（案例、常見問題）
   --------------------------------------------------------------- */

body#page_article_cat .article-card-item,
body#page_article_cat .case-card {
    background: var(--en-surface);
    border: 1px solid var(--en-line);
    border-radius: var(--en-radius);
    overflow: hidden;
}

body#page_article_cat .article-title a,
body#page_article_cat .case-title a {
    color: var(--en-text);
    font-weight: 600;
}

body#page_article_cat .article-brief,
body#page_article_cat .article-brief a,
body#page_article_cat .case-brief {
    color: var(--en-text-mid);
    font-size: 15px;
    line-height: 1.75;
}

body#page_article_cat .article-meta,
body#page_article_cat .case-meta {
    color: var(--en-text-dim);
    font-size: 13px;
}

body#page_article_cat .faq-item {
    border-bottom: 1px solid var(--en-line);
    padding: 18px 0;
}

body#page_article_cat .faq-q {
    color: var(--en-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

body#page_article_cat .faq-a {
    color: var(--en-text-mid);
    font-size: 16px;
    line-height: 1.85;
}

body#page_article_cat .article-search-form input[type="text"] {
    border: 1px solid var(--en-line);
    border-radius: 8px;
    min-height: 42px;
    padding: 0 12px;
}

body#page_article_cat .article-search-form input[type="submit"] {
    background-image: none;
    background-color: var(--en-brand);
    border: 1px solid var(--en-brand);
    border-radius: 8px;
    color: #fff;
    min-height: 42px;
    padding: 0 18px;
    text-shadow: none;
}


/* ---------------------------------------------------------------
   6. 頁尾最底下一列（全站，含首頁）
   ---------------------------------------------------------------
   兩個問題：
   一是 #copyright 寫死 float:left + width:300px、#bottom_nav 是
   float:right，而 .footer-nap 沒有浮動 —— 店名地址那一塊會鑽到
   兩欄中間，寬度不夠時三者疊在一起。
   二是右下角有固定定位的 LINE／TOP 浮動按鈕，靠右那一塊在窄螢幕
   會被蓋住。

   三塊各佔一列、置中，三種寬度下都不會疊到，
   也跟本來就置中的 NAP 一致。 */
#footer .footer-bottom .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

#footer .footer-bottom #bottom_nav {
    order: 1;
    float: none;
    margin: 0;
}

#footer .footer-bottom #copyright {
    order: 2;
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
}

#footer .footer-bottom .footer-nap {
    order: 3;
    width: 100%;
    margin-top: 4px !important;
}

/* 首頁把 .footer-main／.footer-bottom 壓成透明、只留一層深藍綠底
   （style-home.css:68），但沒跟著調字色 ——
   深綠底配 #888 的對比只有 2.4:1，版權那一行實際上讀不到。 */
body#page_index #footer .footer-bottom,
body#page_index #footer #copyright,
body#page_index #footer #bottom_nav,
body#page_index #footer #bottom_nav a {
    color: #c3d9dd !important;
}

body#page_index #footer #copyright span {
    color: #9dbcc2 !important;
}


/* ---------------------------------------------------------------
   7. 響應式：斷點沿用首頁的 1000px／700px
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
    body#page_article .box .bd .article_content > * {
        max-width: none;
    }
}

@media (max-width: 700px) {
    body#page_goods .product_details .pd-name {
        font-size: 22px;
    }

    body#page_article .box .bd .article_content {
        font-size: 16px !important;
        padding: 20px !important;
    }

    body#page_article .article-nav .nav-item {
        width: 100%;
        text-align: left;
    }

    body#page_article .article-nav .nav-item.next {
        text-align: left;
    }
}