/*
Theme Name: 鑫業3C出租 (rent858)
Theme URI: https://www.rent858.com/
Author: 鑫業整合行銷有限公司
Description: rent858.com 的自有佈景主題。取代舊站的 thebigshop（2017 年商業佈景）與 WPBakery 頁面建構器，改用一般 WordPress 樣板，功能交給 rent858-core 外掛。
Version: 0.1.4
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: rent858
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* =====================================================================
 *  設計 token
 *
 *  數值全部取自舊站 www.rent858.com 的實際運算樣式，不是目測：
 *    品牌橘 #F15A23 在頁面上出現 1,482 次，是無疑的主色
 *    價格藍 #3E7CB4、內文 #222、頁面底色 #EEE、容器寬度 1170px
 * ================================================================== */
:root {
    --brand:        #F15A23;
    --brand-dark:   #cf4712;
    --price:        #3E7CB4;
    --ink:          #222;
    --ink-soft:     #333;
    --muted:        #999;
    --line:         #ddd;
    --line-soft:    #eaeaea;
    --page-bg:      #eee;
    --surface:      #fff;
    --footer-bg:    #2b2b2b;
    --footer-ink:   #bbb;
    --shadow:       rgba(0, 0, 0, .06);

    --container:    1170px;
    --radius:       3px;

    --font: "Microsoft YaHei UI", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont,
            "PingFang TC", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;

    color-scheme: light;
}

/* =====================================================================
 *  深色模式
 *
 *  三層規則，順序有意義：
 *    1. @media (prefers-color-scheme: dark) —— 使用者沒選過時，跟隨系統
 *    2. [data-theme="dark"]  —— 使用者手動選深色，即使系統是淺色也要生效
 *    3. [data-theme="light"] —— 使用者手動選淺色，即使系統是深色也要蓋回來
 *
 *  第 3 條常被漏掉，結果是「系統深色的人選不了淺色」。
 *
 *  品牌橘與價格藍在深底上要調亮，否則對比度不足：
 *    #3E7CB4 在 #1f2226 上只有約 3:1，看不清楚
 * ================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:      #ff7a45;
        --brand-dark: #ff9066;
        --price:      #7bb0e4;
        --ink:        #e6e6e6;
        --ink-soft:   #cfcfcf;
        --muted:      #8b8b8b;
        --line:       #3a4048;
        --line-soft:  #2a2e33;
        --page-bg:    #16181b;
        --surface:    #1f2226;
        --footer-bg:  #101214;
        --footer-ink: #9a9a9a;
        --shadow:     rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --brand:      #ff7a45;
    --brand-dark: #ff9066;
    --price:      #7bb0e4;
    --ink:        #e6e6e6;
    --ink-soft:   #cfcfcf;
    --muted:      #8b8b8b;
    --line:       #3a4048;
    --line-soft:  #2a2e33;
    --page-bg:    #16181b;
    --surface:    #1f2226;
    --footer-bg:  #101214;
    --footer-ink: #9a9a9a;
    --shadow:     rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .6em; color: var(--ink); font-weight: 700; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.r858-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }

.screen-reader-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- 頁首 ---------- */
.r858-utility {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
}
.r858-utility .r858-container { display: flex; justify-content: flex-end; gap: 14px; padding-top: 6px; padding-bottom: 6px; }
.r858-utility a { color: var(--muted); }
.r858-utility a:hover { color: var(--brand); }

.r858-header { background: var(--surface); padding: 18px 0; }
.r858-header .r858-container {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(200px, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.r858-logo { font-size: 30px; font-weight: 400; color: var(--brand); line-height: 1.1; }
.r858-logo a { color: inherit; text-decoration: none; }
.r858-logo .r858-tagline { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

.r858-search { position: relative; }
.r858-search input[type="search"] {
    width: 100%; padding: 9px 42px 9px 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13px; font-family: inherit;
}
.r858-search button {
    position: absolute; top: 0; right: 0; height: 100%; width: 38px;
    border: 0; background: var(--brand); color: #fff;
    border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; font-size: 14px;
}
.r858-search button:hover { background: var(--brand-dark); }

.r858-contact { font-size: 12px; color: var(--ink-soft); text-align: right; line-height: 1.7; }
.r858-contact .r858-line { color: #d23; font-weight: 700; }
.r858-cart { margin-top: 6px; }
.r858-cart a { font-weight: 700; }

/* ---------- 詢價流程橫幅 ---------- */
/* 舊站首頁最醒目的元素，把租賃流程一次講清楚，保留下來 */
.r858-flow { background: var(--surface); border-top: 1px solid var(--line-soft); }
.r858-flow ol {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px 4px; margin: 0; padding: 14px 15px; list-style: none;
    font-size: 20px; font-weight: 700; color: var(--ink);
}
.r858-flow li + li::before { content: "＞"; color: var(--brand); margin: 0 6px 0 2px; font-weight: 400; }

/* ---------- 版面 ---------- */
.r858-main { padding: 20px 0 40px; }

/*
 * 格線的欄寬一律用 minmax(0, 1fr)，不要只寫 1fr。
 *
 * `1fr` 展開其實是 `minmax(auto, 1fr)`，而那個 auto 最小值是**內容的
 * min-content 寬度** —— 只要欄位裡有一個縮不下去的東西（不換行的長網址、
 * 寬表格、固定寬度的圖），整欄就會被撐得比容器還寬，然後整頁橫向捲動。
 *
 * 2026-08-11 實測：手機 375px 下商品頁 scrollWidth 是 589px，
 * 元凶是商品描述裡一段 <pre> 內含 66 字元的 YouTube 網址。
 * 換成 minmax(0, 1fr) 之後欄寬才會真的被容器限制住。
 */
.r858-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.r858-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }

.r858-content { background: var(--surface); padding: 22px; border-radius: var(--radius); }

/*
 * 商品描述是站主從舊站帶過來的自由 HTML，裡面什麼都有可能。
 * 這幾條是「不管內容怎麼寫，都不准撐破版面」的保險。
 */
.r858-content img,
.r858-content video { max-width: 100%; height: auto; }

/*
 * iframe 只限寬度，**不要**寫 height: auto。
 *
 * <img> 有內在比例，height:auto 會依比例縮；iframe 沒有，
 * CSS 規範對這種替換元素的 height:auto 是回退到預設的 150px。
 * 2026-08-11 先前寫成 max-width:100%; height:auto 的結果是
 * 133 件商品、369 支 YouTube 影片全部被壓成 301×150（應為 301×169）。
 */
.r858-content iframe { max-width: 100%; }

/*
 * 影片嵌入要跟著容器縮，高度用 aspect-ratio 從寬度算出來。
 *
 * 只鎖定影片來源與舊站的 .videoWrapper —— 不要對所有 iframe 套 16:9，
 * 日後若嵌 Google 地圖或表單，那些不是 16:9，套下去一樣是壓扁。
 */
.r858-content .videoWrapper iframe,
.r858-content iframe[src*="youtube.com"],
.r858-content iframe[src*="youtube-nocookie.com"],
.r858-content iframe[src*="youtu.be"],
.r858-content iframe[src*="vimeo.com"] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/*
 * aspect-ratio 是 2021 年才全面支援的。更舊的瀏覽器（例如 Safari 14）
 * 退回經典的 padding-top 撐高法 —— 只在不支援時啟用，兩者不會疊加。
 */
@supports not (aspect-ratio: 16 / 9) {
    .r858-content .videoWrapper {
        position: relative;
        height: 0;
        padding-top: 56.25%;   /* 9 / 16 */
    }
    .r858-content .videoWrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* <pre> 預設 white-space: pre，一行長網址就能把整頁推寬 */
.r858-content pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* 貼上來的長網址／型號字串（中文可以斷行，這類不行） */
.r858-content a,
.r858-content p,
.r858-content li,
.r858-content td,
.r858-content th { overflow-wrap: anywhere; }

/* 舊站帶來的表格常常有寫死的 width，讓它自己橫向捲，不要拖著整頁走 */
.r858-content table { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- 側欄 ---------- */
.r858-sidebar { background: var(--surface); padding: 16px; border-radius: var(--radius); }
.r858-sidebar .widget + .widget { margin-top: 22px; }
.r858-sidebar .widget-title {
    font-size: 15px; margin: 0 0 10px; padding-bottom: 6px;
    border-bottom: 2px solid var(--brand);
}
.r858-sidebar ul { list-style: none; margin: 0; padding: 0; }
.r858-sidebar li { border-bottom: 1px solid var(--line-soft); }
.r858-sidebar li a { display: block; padding: 9px 4px; color: var(--ink-soft); }
.r858-sidebar li a:hover { color: var(--brand); text-decoration: none; }
.r858-sidebar .count { color: var(--muted); font-size: 12px; }

/* ---------- 商品列表 ---------- */
.woocommerce ul.products {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px;
    margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
/*
 * 卡片用 flex 直排，圖片固定成正方形容器、object-fit: contain。
 * 商品圖的原始比例差很多（筆電是橫的、手機是直的），
 * 不固定容器的話標題與按鈕會參差不齊。
 */
.woocommerce ul.products li.product {
    width: auto !important; margin: 0 !important; float: none !important;
    text-align: center;
    display: flex; flex-direction: column;
    background: var(--surface); padding: 10px; border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}
.woocommerce ul.products li.product:hover { border-color: var(--brand); }

/*
 * 注意 WooCommerce 的結構：迴圈裡第一個 <a> 是「圖片＋標題＋價格」整包，
 * 不是只有圖片。對它套 aspect-ratio / flex 會把標題也一起壓扁，
 * 所以只約束 img 本身。
 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex; flex-direction: column; flex: 1 0 auto;
}
.woocommerce ul.products li.product img {
    width: 100%; height: 170px; object-fit: contain; margin: 0 0 10px;
}

/* 標題撐開剩餘空間，按鈕就會全部對齊在底部 */
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 1 0 auto; }
.woocommerce ul.products li.product .button { margin-top: 10px; align-self: center; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px; font-weight: 700; color: var(--brand); padding: 0; margin: 0 0 6px;
}
.woocommerce ul.products li.product .price { color: var(--price); font-weight: 700; font-size: 13px; display: block; margin-bottom: 8px; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; }

/* 按鈕：舊站的「加入詢價」是淺底深框，沿用 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--page-bg); color: var(--ink-soft);
    border: 1px solid var(--ink-soft); border-radius: var(--radius);
    padding: 7px 14px; font-size: 14px; font-weight: 400; line-height: 1.4;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* ---------- 捲到底自動載入下一頁 ---------- */
/*
 * 分頁列是隱藏不是刪除 —— 那 9 頁的連結是爬蟲走到第 2 頁以後商品的
 * 唯一路徑，這個站不能少掉它。腳本沒載入時這個 class 不會被加上，
 * 分頁列就照常顯示。
 */
.woocommerce-pagination.r858-pagination--js { display: none; }

.r858-more { text-align: center; margin: 28px 0 8px; }

.r858-more__btn {
    background: var(--page-bg); color: var(--ink-soft);
    border: 1px solid var(--ink-soft); border-radius: var(--radius);
    padding: 11px 28px; font-size: 15px; line-height: 1.4;
    cursor: pointer;
    /* 手指點得到：44px 是觸控目標的下限 */
    min-height: 44px;
}
.r858-more__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.r858-more__btn:disabled { opacity: .6; cursor: default; }
.r858-more__btn:disabled:hover { background: var(--page-bg); border-color: var(--ink-soft); color: var(--ink-soft); }

.r858-more__status { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 1.4em; }

/* ---------- 單一商品 ---------- */
.woocommerce div.product .product_title { font-size: 22px; color: var(--ink); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--price); font-size: 20px; font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand); }

/* ---------- 表格與表單 ---------- */
.woocommerce table.shop_table { border-radius: var(--radius); }
.woocommerce table.shop_table th { background: #fafafa; }
.woocommerce form .form-row label { font-weight: 700; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
    font-family: inherit; font-size: 13px;
}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message { border-top-color: var(--brand); }
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { color: var(--brand); }

/* ---------- 麵包屑 ---------- */
.woocommerce .woocommerce-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

/* ---------- 頁尾 ---------- */
.r858-footer { background: #2b2b2b; color: #bbb; margin-top: 30px; padding: 28px 0 20px; font-size: 12px; }
.r858-footer a { color: #ddd; }
.r858-footer a:hover { color: var(--brand); }
.r858-footer .r858-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.r858-footer h3 { color: #fff; font-size: 14px; margin-bottom: 10px; }
.r858-footer ul { list-style: none; margin: 0; padding: 0; }
.r858-footer li { padding: 3px 0; }
.r858-colophon { border-top: 1px solid #3d3d3d; margin-top: 22px; padding-top: 14px; text-align: center; color: #888; }

/* ---------- 文章 ---------- */
.r858-entry + .r858-entry { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.r858-entry-meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; }

.r858-pagination { margin-top: 24px; }
.r858-pagination .page-numbers {
    display: inline-block; padding: 6px 11px; margin-right: 4px;
    border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
}
.r858-pagination .page-numbers.current,
.r858-pagination .page-numbers:hover { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }

/* ---------- 響應式 ---------- */
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .r858-header .r858-container { grid-template-columns: 1fr; text-align: center; }
    .r858-contact { text-align: center; }
    .r858-layout { grid-template-columns: minmax(0, 1fr); }
    /*
     * 單欄之後，側欄要排到內容後面。
     *
     * HTML 的順序是「側欄在前」，桌機沒問題（它在左邊），但手機一疊起來
     * 就變成要先滑過 17 個分類連結才看得到商品本身 —— 實測商品內容的
     * top 是 1182px，側欄只有 336px。
     *
     * 用 order 而不是改 HTML：桌機的視覺順序（側欄在左）要保持，
     * 而且螢幕閱讀器仍照 DOM 順序讀，導覽在前是合理的。
     */
    .r858-layout > .r858-sidebar { order: 2; }
    .r858-layout > .r858-content,
    .r858-layout > .r858-main-col,
    .r858-layout > main { order: 1; }
    .r858-flow ol { font-size: 15px; }
}
@media (max-width: 600px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
    .r858-flow ol { font-size: 13px; }
}

/* =====================================================================
 *  深色模式：補上 WooCommerce 寫死顏色的地方
 *
 *  WooCommerce 自己的樣式表有不少寫死的白底與淺灰，CSS 變數蓋不到，
 *  必須逐一指定。用 :is() 一次涵蓋「手動選深色」與「跟隨系統深色」兩種情況，
 *  避免整段規則重複兩次。
 * ================================================================== */
:is(:root[data-theme="dark"], :root[data-theme="dark"] *) {
    scrollbar-color: #555 var(--page-bg);
}

:root[data-theme="dark"] .woocommerce table.shop_table,
:root[data-theme="dark"] .woocommerce table.shop_table td,
:root[data-theme="dark"] .woocommerce table.shop_table th {
    background: var(--surface); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] .woocommerce table.shop_table th { background: #262a2f; }

:root[data-theme="dark"] .woocommerce form .form-row input.input-text,
:root[data-theme="dark"] .woocommerce form .form-row textarea,
:root[data-theme="dark"] .woocommerce form .form-row select,
:root[data-theme="dark"] .r858-search input[type="search"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: #14161a; color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] ::placeholder { color: #6d7278; }

:root[data-theme="dark"] .woocommerce .woocommerce-info,
:root[data-theme="dark"] .woocommerce .woocommerce-message,
:root[data-theme="dark"] .woocommerce .woocommerce-error,
:root[data-theme="dark"] .woocommerce-checkout #payment,
:root[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods,
:root[data-theme="dark"] .woocommerce-checkout #payment div.form-row {
    background: #262a2f; color: var(--ink); border-color: var(--line);
}

:root[data-theme="dark"] .woocommerce a.button,
:root[data-theme="dark"] .woocommerce button.button,
:root[data-theme="dark"] .woocommerce input.button,
:root[data-theme="dark"] .woocommerce #respond input#submit {
    background: #2c3137; color: var(--ink); border-color: var(--line);
}

/* 商品圖多半是白底去背，深色模式下直接貼會像挖了個洞。
   給圖片一層淺色底並稍微降低亮度，視覺上比較不刺眼。 */
:root[data-theme="dark"] .woocommerce ul.products li.product img,
:root[data-theme="dark"] .woocommerce div.product div.images img {
    background: #f2f2f2; border-radius: 2px; filter: brightness(.94);
}

/* ---------- 深色模式切換按鈕 ---------- */
.r858-theme-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 12px; line-height: 1; padding: 5px 9px;
}
.r858-theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
.r858-theme-toggle .r858-toggle-icon { font-size: 13px; }

/* 圖示與文字依目前模式切換：淺色時顯示月亮，深色時顯示太陽 */
.r858-theme-toggle .r858-toggle-dark { display: none; }
:root[data-theme="dark"] .r858-theme-toggle .r858-toggle-dark { display: inline; }
:root[data-theme="dark"] .r858-theme-toggle .r858-toggle-light { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .r858-theme-toggle .r858-toggle-dark { display: inline; }
    :root:not([data-theme="light"]) .r858-theme-toggle .r858-toggle-light { display: none; }
}

/* ---------- 回到頂端 ---------- */

/*
 * 位置避開右下角可能有的客服浮動元件，所以留了一點距離。
 * hidden 屬性由 assets/back-to-top.js 控制；這裡加 [hidden] 的規則是因為
 * display:flex 會蓋掉瀏覽器對 hidden 的預設 display:none。
 */
.r858-totop {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    /* 手機上 44×44 是可點擊目標的下限，不要再縮小 */
}

.r858-totop[hidden] { display: none; }

.r858-totop:hover,
.r858-totop:focus {
    color: #fff;
    filter: brightness(1.08);
}

.r858-totop:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* 出現時淡入。開了「減少動態效果」就直接出現，不要動。 */
@media (prefers-reduced-motion: no-preference) {
    .r858-totop { animation: r858-totop-in .18s ease-out; }
    @keyframes r858-totop-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}

@media print {
    .r858-totop { display: none !important; }
}

/* ---------- 登入頁（WooCommerce 會員專區，未登入時） ---------- */

/*
 * 只在「未登入的會員專區」套用，所以 body 同時要有 woocommerce-account
 * 與沒有 logged-in。登入之後那頁是訂單列表與帳號設定，不該被排成一張登入卡。
 *
 * 用 CSS 排版而不是覆寫 WooCommerce 的 form-login.php：
 * 那支樣板裡有 nonce、記住我、忘記密碼、登入後導向這些邏輯，
 * 複製一份出來就得跟著 WooCommerce 的更新自己維護，不划算。
 */

body.woocommerce-account:not(.logged-in) .r858-content > article > h1 {
    text-align: center;
    margin-bottom: 6px;
}

body.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 420px;
    margin: 10px auto 40px;
}

body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
    text-align: center;
    font-size: 18px;
    margin: 0 0 14px;
    color: var(--muted);
    font-weight: 500;
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface, #fff);
    padding: 26px 24px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .input-text {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .input-text:focus {
    border-color: var(--brand);
    outline: none;
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .form-row {
    margin-bottom: 14px;
}

/* 送出鈕拉到整行寬：登入頁上它是唯一的主要動作 */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login button[type="submit"] {
    width: 100%;
    padding: 11px 16px;
    font-size: 15px;
}

/* 「記住我」與送出鈕之間留點距離，勾選框不要黏在文字上 */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .woocommerce-form-login__rememberme {
    display: block;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
}

body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .lost_password {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 480px) {
    body.woocommerce-account:not(.logged-in) form.woocommerce-form-login { padding: 20px 16px 16px; }
}