/* ============================================================
   高砂串堂 take.com.tw 深色主題 override（第一版）
   在 style.css 之後載入，用高特異性覆蓋洗衣店的白底紅字配色。
   串燒風格：深炭底 + 暖橘金點綴，取代原本的品牌紅 #d92630。
   之後逐頁微調時，新規則往這支檔案的檔尾加即可。
   ============================================================ */

:root {
    --take-bg:      #1c1613;   /* 全站深炭底 */
    --take-panel:   #26201b;   /* 區塊卡片底 */
    --take-panel-2: #302822;   /* 稍亮的卡片底 */
    --take-line:    #3d332b;   /* 分隔線 */
    --take-gold:    #e2a03c;   /* 主點綴：暖橘金 */
    --take-gold-d:  #c9852a;   /* 深一階金（hover） */
    --take-text:    #ece3d8;   /* 主文字：暖白 */
    --take-muted:   #a99b8b;   /* 次要文字 */
}

/* ---- 全站底色與文字 ---- */
body,
body#page_index,
body#page_goods,
body#page_category,
body#page_article {
    background: var(--take-bg) !important;
    color: var(--take-text) !important;
}

#main, .wrapper, .catalog-layout {
    background: transparent !important;
}

/* ---- 連結與主色（紅 → 金）---- */
a { color: var(--take-text); }
a:hover { color: var(--take-gold) !important; }

.catalog-page-title,
.section-title,
.box .hd h3,
.box .hd h2 {
    color: var(--take-text) !important;
    border-color: var(--take-line) !important;
}

/* ---- 頁首 / 導覽列 ---- */
#header, .header, #topbar, .top-bar, .site-header,
#nav, .nav, .main-nav, .service-nav {
    background: #15100d !important;
    color: var(--take-text) !important;
    border-color: var(--take-line) !important;
}
.service-nav-item {
    background: var(--take-panel) !important;
    color: var(--take-text) !important;
    border-color: var(--take-line) !important;
}
.service-nav-item.is-active,
.service-nav-item:hover {
    background: var(--take-gold) !important;
    color: #1c1613 !important;
    border-color: var(--take-gold) !important;
}

/* ---- 區塊卡片 ---- */
.box, .goods_box, .product-card, .article-card-item,
.four_col > div, .has_tab_box, .tab_wrapper {
    background: var(--take-panel) !important;
    border-color: var(--take-line) !important;
    color: var(--take-text) !important;
}
.box .bd, .product-info { color: var(--take-text) !important; }

/* ---- 商品卡 ---- */
.product-card { border: 1px solid var(--take-line) !important; }
.product-name a { color: var(--take-text) !important; }
.product-price { color: var(--take-gold) !important; }
.product-price del { color: var(--take-muted) !important; }
.product-badge { background: var(--take-gold) !important; color: #1c1613 !important; }
.action-btn {
    background: var(--take-gold) !important;
    color: #1c1613 !important;
    border-color: var(--take-gold) !important;
}
.action-btn:hover { background: var(--take-gold-d) !important; }

/* ---- 按鈕（紅系 → 金系）---- */
.button, .btn, input[type="submit"], button.submit,
.btn_s3, .btn_s3_b, .bright_button, .dim_button {
    background: var(--take-gold) !important;
    color: #1c1613 !important;
    border-color: var(--take-gold) !important;
}
.button:hover, .btn:hover, input[type="submit"]:hover {
    background: var(--take-gold-d) !important;
}

/* ---- 首頁輪播背景（原本米色 #dabea7 → 深色）---- */
body#page_index #index_banner,
body#page_index #index_banner .swiper-container,
body#page_index #index_banner .swiper-wrapper,
body#page_index #index_banner .swiper-slide {
    background: #15100d !important;
}

/* ---- 表格 ---- */
.data_table th, .user-order-table th { background: var(--take-panel-2) !important; color: var(--take-text) !important; }
.data_table td, .user-order-table td { border-color: var(--take-line) !important; color: var(--take-text) !important; }

/* ---- 表單欄位 ---- */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], textarea, select {
    background: var(--take-panel-2) !important;
    color: var(--take-text) !important;
    border-color: var(--take-line) !important;
}

/* ---- 頁尾 ---- */
#footer, .footer, .site-footer, .app-bottom-nav {
    background: #15100d !important;
    color: var(--take-muted) !important;
    border-color: var(--take-line) !important;
}
#footer a, .footer a { color: var(--take-muted) !important; }
#footer a:hover, .footer a:hover { color: var(--take-gold) !important; }

/* ---- 通用：把原本大量的紅色主色點綴改成金色 ---- */
.price, em.price, .red, .txt_red { color: var(--take-gold) !important; }

/* ============================================================
   首頁 Hero + 分類卡片（照 GPT 版面重排）
   ============================================================ */

/* 首頁那行 SEO 標題視覺隱藏（保留給搜尋引擎，畫面用 hero 大標） */
.take-seo-h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Hero ---- */
.take-hero {
    position: relative;
    /* 換照片：把下行的 url() 換成你的串燒橫幅照片；沒有圖時顯示深色漸層底 */
    background:
        linear-gradient(rgba(15,11,9,0.62), rgba(15,11,9,0.82)),
        radial-gradient(circle at 30% 30%, #3a2a1e, #140f0c) ,
        #140f0c;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 72px 20px 64px;
    border-bottom: 3px solid var(--take-gold);
}
.take-hero-inner { max-width: 720px; margin: 0 auto; }
.take-hero-logo {
    font-size: 52px;
    font-weight: 900;
    letter-spacing: 6px;
    color: var(--take-gold);
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    margin: 0 0 14px;
}
.take-hero-tagline {
    font-size: 20px;
    color: var(--take-text);
    letter-spacing: 3px;
    margin: 0 0 8px;
}
.take-hero-sub {
    font-size: 15px;
    color: var(--take-muted);
    margin: 0 0 26px;
}
.take-hero-cta {
    display: inline-block;
    padding: 13px 42px;
    background: var(--take-gold);
    color: #1c1613 !important;
    font-size: 17px;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    transition: background .2s;
}
.take-hero-cta:hover { background: var(--take-gold-d); color: #1c1613 !important; }

/* ---- 分類卡片格 ---- */
.take-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 16px;
}
.take-cat-card {
    display: block;
    background: var(--take-panel);
    border: 1px solid var(--take-line);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s, border-color .18s;
}
.take-cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--take-gold);
}
.take-cat-photo {
    display: block;
    height: 150px;
    /* 沒有照片時顯示深色底 + 中央小標，換照片把 lbi 裡的 url() 指到真實圖片即可 */
    background-color: #17110d;
    background-size: cover;
    background-position: center;
}
.take-cat-name {
    display: block;
    text-align: center;
    padding: 14px 8px;
    color: var(--take-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ---- 手機版 ---- */
@media screen and (max-width: 800px) {
    .take-hero { padding: 48px 16px 42px; }
    .take-hero-logo { font-size: 38px; letter-spacing: 4px; }
    .take-hero-tagline { font-size: 16px; }
    .take-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .take-cat-photo { height: 120px; }
}