/* ============================================================
 * THATS IT 模版 — 外觀樣式（參考 thit.store 排版）
 * templates/themes/thatsit/style.css
 *
 * 只在 thatsit 模版啟用時載入；全部規則以 body[data-template="thatsit"]
 * 作 scope，唔會影響其他模版。
 *
 * 顏色：全部沿用後台「主題設定 → 顏色」嘅 CSS 變數（--primary / --text /
 * --header-bg / --header-text / --border / --price …），所以管理員可以同
 * 其他模版一樣，喺後台自由轉色，桌面同手機一致生效。
 * 本檔只負責「排版 / 結構」（扁平、無邊框系列格、彈窗、提出意見 band 等），
 * 唔再寫死任何顏色。
 * ============================================================ */

/* ── Header：底部一條幼線、無陰影（顏色用後台設定）── */
body[data-template="thatsit"] .site-header {
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
body[data-template="thatsit"] .header-nav { border-top: none; }
body[data-template="thatsit"] .header-nav .nav-list { gap: 4px; }
body[data-template="thatsit"] .header-nav .nav-list > li > a {
    font-weight: 500;
    letter-spacing: .3px;
}

/* ── Banner：平面全圖、淺色圓形箭咀、無深色遮罩 ── */
body[data-template="thatsit"] .banner-section { background: var(--white); }
body[data-template="thatsit"] .banner-slide img {
    height: auto;
    max-height: 620px;
    object-fit: contain;
    background: var(--white);
}
body[data-template="thatsit"] .banner-arrows button {
    background: rgba(255, 255, 255, .7);
    color: var(--text);
    box-shadow: none;
    opacity: 1;
}
body[data-template="thatsit"] .banner-arrows button:hover { background: #fff; }
body[data-template="thatsit"] .banner-text .btn-banner { box-shadow: none; }

/* ── Section 標題：簡約、無左側色條 ── */
body[data-template="thatsit"] .section-header h2 { padding-left: 0; font-weight: 700; }
body[data-template="thatsit"] .section-header h2::before { display: none; }

/* ── 需求 #2：產品系列陣列 = 三欄一行、無邊框、無陰影、純圖片 ── */
body[data-template="thatsit"] .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
body[data-template="thatsit"] .cat-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
}
body[data-template="thatsit"] .cat-card:hover {
    transform: none;
    box-shadow: none !important;
    border: none;
}
body[data-template="thatsit"] .cat-card .img-container { border-radius: 0; }
body[data-template="thatsit"] .cat-card img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--white);
}
body[data-template="thatsit"] .cat-card:hover img { transform: none; }
body[data-template="thatsit"] .cat-card .name { font-weight: 500; font-size: 14px; }
@media (max-width: 768px) {
    body[data-template="thatsit"] .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ── 產品卡片：扁平、淡邊（顏色用後台設定）── */
body[data-template="thatsit"] .product-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
}
body[data-template="thatsit"] .product-card:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    border-color: var(--border);
}

/* ── 頂部「送貨方式 / 付款方式」觸發鈕 ── */
body[data-template="thatsit"] .nav-info-trigger {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ── 需求 #4 #5：資訊彈窗（送貨方式 / 付款方式）── */
body[data-template="thatsit"] .info-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
    background: rgba(40, 40, 40, .55);
}
body[data-template="thatsit"] .info-modal.open { display: flex; }
body[data-template="thatsit"] .info-modal-box {
    background: var(--white);
    border-radius: 8px;
    width: 100%;
    max-width: 920px;
    max-height: 84vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    animation: thitModalIn .2s ease;
}
@keyframes thitModalIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
body[data-template="thatsit"] .info-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--white);
}
body[data-template="thatsit"] .info-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
body[data-template="thatsit"] .info-modal-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
}
body[data-template="thatsit"] .info-modal-close:hover { color: var(--text); }
body[data-template="thatsit"] .info-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 22px;
}
body[data-template="thatsit"] .info-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    min-height: 96px;
}
body[data-template="thatsit"] .info-card h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
body[data-template="thatsit"] .info-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.6;
}
@media (max-width: 768px) {
    body[data-template="thatsit"] .info-modal-grid { grid-template-columns: 1fr; }
}

/* ── 需求 #2 #8：首頁底部「提出意見」— 全寬淺灰底 band + 置中底線連結 ── */
body[data-template="thatsit"] .home-feedback {
    margin: 24px 0 0;
    padding: 30px 16px;
    background: var(--border-light);
}
body[data-template="thatsit"] .home-feedback-link {
    display: block;
    text-align: center;
    color: var(--text-mid);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body[data-template="thatsit"] .home-feedback-link:hover { color: var(--text); }

/* ════════════════════════════════════════════════════════════
 * Header：1:1 對齊 thit.store
 *   桌面：[🐎 Logo] ……… [登入/註冊] [HKD｜繁▾] [🔍] [🛒]
 *         中間「冇」大搜尋框；搜尋係右側 icon；願望清單心心唔顯示；
 *         帳戶用純文字「登入 / 註冊」（無人像 icon）；購物車 icon-only。
 *   手機：[漢堡 🔍] [Logo 置中] [登入 🛒]
 * ════════════════════════════════════════════════════════════ */

/* 中間大搜尋框：thit 冇 → 全尺寸移除（改用右側／手機左側 icon）*/
body[data-template="thatsit"] .header-search { display: none; }
/* 願望清單心心：thit 冇 → 隱藏 */
body[data-template="thatsit"] .header-actions .h-btn[href*="wishlist"] { display: none; }
/* 帳戶：thit 用純文字「登入 / 註冊」，無人像 icon */
body[data-template="thatsit"] .thit-account svg { display: none; }
body[data-template="thatsit"] .thit-account .h-label { display: inline; }
/* 購物車：thit 桌面亦 icon-only（無「購物車」文字）*/
body[data-template="thatsit"] .header-actions .h-btn[href*="/cart"] .h-label { display: none; }

/* 桌面：隱藏手機左側組；顯示右側搜尋 icon */
body[data-template="thatsit"] .thit-mobile-left { display: none; }
body[data-template="thatsit"] .thit-d-search { display: inline-flex; align-items: center; }

@media (min-width: 769px) {
    /* 右側次序：登入/註冊 → HKD｜繁 → 搜尋 → 購物車 */
    body[data-template="thatsit"] .header-actions { gap: 10px; }
    body[data-template="thatsit"] .thit-account                       { order: 1; }
    body[data-template="thatsit"] .header-actions .i18n-sw            { order: 2; }
    body[data-template="thatsit"] .thit-d-search                      { order: 3; }
    body[data-template="thatsit"] .header-actions .h-btn[href*="/cart"] { order: 4; }
}

@media (max-width: 768px) {
    body[data-template="thatsit"] .header-top { gap: 6px; }

    /* 左：漢堡 + 搜尋 icon */
    body[data-template="thatsit"] .thit-mobile-left {
        display: flex;
        align-items: center;
        gap: 2px;
        order: -1;
    }
    body[data-template="thatsit"] .thit-mobile-left .hamburger {
        display: block;
        position: static;
        margin: 0;
    }
    body[data-template="thatsit"] .thit-m-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }
    body[data-template="thatsit"] .thit-m-search svg { width: 22px; height: 22px; }

    /* 中：Logo 置中 */
    body[data-template="thatsit"] .header-logo {
        order: 0;
        flex: 1;
        text-align: center;
    }
    body[data-template="thatsit"] .header-logo a { justify-content: center; }

    /* 右：登入（純文字「登入」）+ 購物車（icon）；其餘收起 */
    body[data-template="thatsit"] .header-actions { order: 1; gap: 2px; }
    body[data-template="thatsit"] .thit-account .thit-reg { display: none; }   /* 手機只顯示「登入」 */
    body[data-template="thatsit"] .thit-d-search { display: none; }            /* 手機改用左側搜尋 */
    body[data-template="thatsit"] .header-actions .i18n-sw { display: none; }  /* 語言放抽屜內，頂部唔重複 */
}