/* 基本設定與 momo 變數 */
:root {
    --momo-pink: #e6006c;
    --momo-pink-dark: #c0005a;
    --momo-red: #e60000;
}

body.momo-style {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6; /* momo 背景色 */
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: #333;
}

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

/* 頁首 (Header) */
.momo-header {
    background-color: #fff;
    border-bottom: 3px solid var(--momo-pink);
}

/* 1. 頂部列 */
.top-bar {
    background-color: #f1f1f1;
    font-size: 0.9rem;
    padding: 5px 0;
}
.top-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* 置右 */
}
.top-links li {
    margin-left: 15px;
}
.top-links a {
    color: #666;
}
.top-links a:hover {
    color: var(--momo-pink);
}

/* 2. 主頁首 (Logo + Search) */
.main-header .container {
    display: flex;
    align-items: center;
    padding: 20px 0;
}
.logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--momo-pink);
    flex-shrink: 0;
    margin-right: 30px;
}
.search-bar-container {
    flex-grow: 1;
}
.search-form {
    display: flex;
    border: 3px solid var(--momo-pink);
    height: 42px;
}
.search-form input[type="text"] {
    border: none;
    padding: 0 15px;
    font-size: 1rem;
    flex-grow: 1;
}
.search-form input:focus {
    outline: none;
}
.search-form button {
    border: none;
    background-color: var(--momo-pink);
    color: #fff;
    width: 60px;
    cursor: pointer;
    font-size: 1.3rem;
}
.hot-keywords {
    margin-top: 5px;
}
.hot-keywords a {
    font-size: 0.9rem;
    color: #777;
    margin-right: 10px;
}
.hot-keywords a:hover {
    color: var(--momo-pink);
}

.cart-icon {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 1.1rem;
    margin-left: 30px;
    position: relative;
}
.cart-icon i {
    font-size: 2rem;
    color: var(--momo-pink);
    margin-right: 8px;
}
.cart-count {
    position: absolute;
    top: -5px;
    left: 15px;
    background-color: var(--momo-red);
    color: #fff;
    font-size: 0.8rem;
    border-radius: 50%;
    padding: 2px 6px;
}

/* 3. 主導覽列 */
.main-nav-bar {
    background-color: var(--momo-pink);
}
.main-nav-bar .container {
    display: flex;
}
.nav-all-categories {
    background-color: var(--momo-pink-dark);
    color: #fff;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
}
.main-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-nav-links li a {
    display: block;
    color: #fff;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 500;
}
.main-nav-links li a:hover {
    background-color: rgba(255,255,255,0.1);
}

/* RWD 手機版選單 (同前，先隱藏) */
.mobile-nav-toggle, .mobile-nav {
    display: none;
}

/* 主要內容 (momo 佈局) 
*/
.page-content {
    display: flex;
    gap: 20px;
    padding-top: 20px;
}

/* 1. 左側分類欄 */
.left-sidebar {
    flex: 0 0 220px; /* 固定寬度 220px */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: fit-content; /* 高度隨內容 */
}
.left-sidebar h3 {
    font-size: 1.2rem;
    color: #333;
    padding: 15px;
    margin: 0;
    border-bottom: 1px solid #eee;
}
.left-sidebar h3 i {
    color: var(--momo-pink);
    margin-right: 10px;
}
.category-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.category-menu li {
    border-bottom: 1px solid #f0f0f0;
}
.category-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    font-size: 1rem;
    color: #444;
    transition: background-color 0.2s;
}
.category-menu a:hover {
    background-color: #fdf0f7; /* 淺粉紅 */
    color: var(--momo-pink);
    font-weight: bold;
}
.category-menu a i {
    font-size: 0.8rem;
    color: #aaa;
}

/* 2. 右側主內容區 */
.main-content-area {
    flex: 1; /* 佔滿剩餘空間 */
    min-width: 0; /* 修正 flex 溢位 */
}

/* 2.1 輪播圖 + 快速連結 */
.top-content {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.hero-carousel {
    flex: 2; /* 佔 2/3 寬 */
    height: 300px;
    position: relative;
    overflow: hidden;
    background-color: #eee;
    border-radius: 5px;
}
/* (輪播圖 .slide CSS 同蝦皮版) */
.hero-carousel .slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.hero-carousel .slide.active { opacity: 1; }
.hero-carousel .slide img { width: 100%; height: 100%; object-fit: cover; }

.quick-links-grid {/* 暫時不顯示 */
    flex: 1; /* 佔 1/3 寬 */
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.quick-link {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-weight: 500;
}
.quick-link:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.quick-link i {
    font-size: 2rem;
    color: var(--momo-pink);
    margin-bottom: 10px;
}

/* 2.2 商品區塊 */
.product-block {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}
.block-title {
    font-size: 1.8rem;
    margin: 0 0 20px 0;
    border-bottom: 3px solid var(--momo-pink);
    display: inline-block;
    padding-bottom: 5px;
}
.block-title span {
    position: relative;
}
/* 標題的裝飾 */
.block-title::after {
    content: attr(data-title);
    font-size: 1rem;
    color: #ccc;
    margin-left: 10px;
    font-weight: normal;
}

/* 水平商品 (限時特賣) */
.product-grid-horizontal {
    display: flex;
    overflow-x: auto;
    gap: 15px;
}
.product-card-small {
    flex: 0 0 200px; /* 固定寬度 */
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
}
.product-card-small img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* 一般商品卡 (4欄) */
.product-grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.product-card-momo {
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.product-card-momo:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-card-momo .product-image {
    width: 100%;
    padding-top: 100%; /* 1:1 正方形 */
    position: relative;
}
.product-card-momo .product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card-momo .product-info {
    padding: 15px;
    text-align: left;
}
.product-name {
    font-size: 1rem;
    line-height: 1.4;
    height: 2.8em; /* 限制 2 行 */
    overflow: hidden;
    margin: 0 0 10px 0;
}
.price-momo {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--momo-red); /* momo 價格常用紅色 */
    display: block;
    margin-bottom: 10px;
}
.add-to-cart-btn {
    width: 100%;
    border: 1px solid var(--momo-pink);
    background-color: #fff;
    color: var(--momo-pink);
    padding: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.add-to-cart-btn:hover {
    background-color: var(--momo-pink);
    color: #fff;
}


/* RWD 響應式 */
@media (max-width: 992px) {
    /* 平板：隱藏左側欄，內容滿版 */
    .left-sidebar {
        display: none;
    }
    .product-grid-4-col {
        grid-template-columns: repeat(3, 1fr);
    }
    .top-content {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    /* 手機：採用與蝦皮版類似的 RWD 邏輯 */

    /* 隱藏電腦版導覽 */
    .top-bar, .main-nav-bar {
        display: none;
    }

    /* 固定搜尋列在頂部 */
    .momo-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        border-bottom: 1px solid var(--momo-pink);
    }
    .main-header .container {
        padding: 10px 0;
        height: 60px;
        box-sizing: border-box;
    }
    .logo, .cart-icon span {
        display: none; /* 手機版隱藏 Logo 文字和購物車文字 */
    }
    .search-bar-container {
        margin: 0 10px;
    }
    .cart-icon {
        margin-left: 0;
    }
    .hot-keywords {
        display: none;
    }

    /* 顯示漢堡按鈕 */
    .mobile-nav-toggle {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px; /* momo 放左邊 */
        font-size: 1.5rem;
        background: none;
        border: none;
        color: var(--momo-pink);
        z-index: 1001;
    }
    .search-bar-container {
        margin-left: 60px; /* 留空間給漢堡鈕 */
    }
    
    /* 手機版選單 (同蝦皮版) */
    .mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        background-color: #fff;
        z-index: 1002;
        padding-top: 60px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    .mobile-nav.active { display: block; }
    .mobile-nav ul { list-style: none; padding: 0; margin: 0; }
    .mobile-nav li a { display: block; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; color: #333; }
    
    /* 內容區加上 padding-top 避開固定的搜尋列 */
    .momo-main {
        padding-top: 80px; /* 60px (搜尋列) + 20px (間距) */
    }
    .container {
        width: 95%;
    }
    .page-content {
        padding-top: 0;
    }

    /* 內容區塊改為 2 欄或 1 欄 */
    .product-grid-4-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-card-momo .product-info { padding: 10px; }
    .product-name { font-size: 0.9rem; }
    .price-momo { font-size: 1.2rem; }
    .add-to-cart-btn { font-size: 0.8rem; padding: 6px; }

    .quick-links-grid {
        grid-template-columns: repeat(4, 1fr); /* 快速連結改 4 欄 */
    }
    .quick-link i { font-size: 1.5rem; }
    .quick-link span { font-size: 0.8rem; }
}

/* ==========================
   美化後的頁尾 (Footer)
   ========================== */

.main-footer {
    background-color: #ffffff; /* momo/蝦皮 footer 常用的白色背景 */
    color: #555;
    padding-top: 40px;
    border-top: 4px solid var(--momo-pink, var(--shopee-orange, #e6006c)); /* 抓 momo 或 蝦皮的主色，如果都沒有就用桃紅色 */
    font-size: 0.9rem;
    margin-top: 30px;
}

.footer-grid {
    display: grid;
    /* 電腦版：自動分配欄位寬度 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.footer-column h4 {
    font-size: 1.1rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.footer-column p {
    line-height: 1.7;
    margin: 0;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-links a:hover {
    color: var(--momo-pink, var(--shopee-orange, #e6006c)); /* 再次使用主色 */
    padding-left: 5px; /* 滑鼠懸停時增加一點位移 */
}

/* 社群圖示 */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    font-size: 2.2rem;
    color: #777;
    transition: color 0.2s;
}

.social-icons a:hover {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}

/* 付款圖示 (範例) */
.payment-icons {
    display: flex;
    gap: 10px;
    font-size: 2.5rem; /* Font Awesome 的 Logo 尺寸 */
    color: #aaa;
}

/* 頁尾底線 */
.footer-bottom-bar {
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

.footer-bottom-bar p {
    margin: 5px 0;
}

/* RWD 響應式 */
@media (max-width: 768px) {
    .footer-grid {
        /* 手機版：改為 2 欄 */
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .footer-column {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        /* 小手機：改為 1 欄 */
        grid-template-columns: 1fr;
    }
}

/* ==========================
   登入頁面 (Login Page)
   ========================== */

/* 讓 .login-page-container 填滿 main 的最小高度 */
.login-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直置中 */
    align-items: center;     /* 水平置中 */
    min-height: calc(100vh - 250px - 150px); /* 粗估：100% 視窗高 - 頁首高 - 頁尾高 */
    padding: 40px 0;
}

.login-wrapper {
    width: 100%;
    max-width: 450px; /* 登入框的最大寬度 */
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--momo-pink, var(--shopee-orange, #e6006c)); /* 呼應主題色 */
}

.login-wrapper h2 {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.login-wrapper p {
    text-align: center;
    color: #777;
    margin-bottom: 25px;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.login-form input[type="email"],
.login-form input[type="password"], 
.login-form input[type="text"]{
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* 確保 padding 不會撐爆寬度 */
    transition: border-color 0.2s;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    box-shadow: 0 0 5px rgba(230, 0, 108, 0.2);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.form-options .remember-me {
    display: flex;
    align-items: center;
    color: #666;
    font-weight: normal;
}
.form-options .remember-me input {
    margin-right: 5px;
}

.form-options .forgot-link {
    color: var(--momo-pink, var(--shopee-orange, #007bff));
    text-decoration: none;
}
.form-options .forgot-link:hover {
    text-decoration: underline;
}

/* 登入按鈕 */
.btn-login {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-login:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* 錯誤訊息 */
.login-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

/* --- 分隔線 與 社群登入 --- */
.social-login {
    margin-top: 25px;
    text-align: center;
}

.divider-text {
    display: block;
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 20px;
    position: relative;
}
/* 分隔線 */
.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background-color: #ddd;
}
.divider-text::before {
    left: 0;
}
.divider-text::after {
    right: 0;
}

.social-buttons {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 10px;
}

.social-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 0.95rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}
.social-buttons a:hover {
    opacity: 0.9;
}
.social-buttons a i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* (可選) 社群按鈕顏色 */
.btn-social-google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
}
.btn-social-facebook {
    background-color: #1877F2;
    color: #fff;
    border: 1px solid #1877F2;
}

/* 註冊連結 */
.register-link {
    text-align: center;
    margin-top: 25px;
    font-size: 0.95rem;
    color: #555;
}
.register-link a {
    color: var(--momo-pink, var(--shopee-orange, #007bff));
    font-weight: bold;
    text-decoration: none;
}
.register-link a:hover {
    text-decoration: underline;
}

/* RWD */
@media (max-width: 480px) {
    .login-wrapper {
        padding: 20px;
        box-shadow: none;
        border: none;
        background-color: #f6f6f6; /* 在手機上可考慮移除背景 */
    }

    .login-page-container {
        padding: 10px 0;
        min-height: auto;
    }
}

/* ==========================
   註冊頁面 (Register Page)
   ========================== */

/* 註冊成功訊息 */
.login-success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

/* ==========================
   關於我們 (About Us) 頁面
   ========================== */

/* 1. 頁面橫幅 */
.about-hero {
    /* 請替換 'images/about-hero-banner.jpg' 
      建議尺寸：1920x400 
      建議主題：日本風景、禪風庭園 或 質感靜物 
    */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/about-hero-banner.png') no-repeat center center/cover;
    background-color: #eee; /* 圖片載入失敗時的底色 */
    height: 300px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.about-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.about-hero p {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.9;
}

/* 2. 主要內容區 */
.about-page-content {
    padding: 40px 0;
    display: flex; /* 使用 flex 來置中內容區塊 */
    justify-content: center;
}

.about-text-section {
    max-width: 900px; /* 設定一個易讀的最大寬度 */
    background-color: #fff;
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    line-height: 1.8; /* 增加行高，易於閱讀 */
}

.about-text-section h2 {
    font-size: 2.2rem;
    color: var(--momo-pink, var(--shopee-orange, #e6006c)); /* 抓取品牌主色 */
    margin-top: 30px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}
/* 第一個 h2 不要有上邊距 */
.about-text-section h2:first-of-type {
    margin-top: 0;
}

.about-text-section p {
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 20px;
}

/* 視覺插圖 */
.about-visual-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover; /* 保持圖片比例並填滿 */
    border-radius: 8px;
    margin: 20px 0 10px 0;
}

/* 核心價值格線 */
.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 電腦版 3 欄 */
    gap: 25px;
    margin-top: 20px;
    text-align: center;
}

.value-item {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.value-item i {
    font-size: 2.5rem;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    margin-bottom: 15px;
}

.value-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 行動呼籲 (CTA) 按鈕 */
.btn-cta-shop {
    display: inline-block;
    padding: 12px 35px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-cta-shop:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* RWD 響應式 */
@media (max-width: 768px) {
    .about-hero h1 {
        font-size: 2.5rem;
    }
    .about-hero p {
        font-size: 1.2rem;
    }
    .about-text-section {
        padding: 30px;
    }
    /* 核心價值改為 1 欄 */
    .values-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .about-hero {
        height: 200px;
    }
    .about-hero h1 {
        font-size: 2rem;
    }
    .about-hero p {
        font-size: 1rem;
    }
    /* 在手機上移除白底和陰影 */
    .about-text-section {
        padding: 20px 10px;
        background-color: transparent;
        box-shadow: none;
    }
}

/* ==========================
   靜態文字頁面 (Terms, Privacy... etc.)
   ========================== */

/* 我們在 'about.php' 建立了 .about-page-content 和 .about-text-section
   這裡我們建立更通用的版本
*/
.text-page-container {
    padding: 40px 0;
    background-color: #f9f9f9; /* 淺灰色背景 */
}

.text-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    line-height: 1.7; /* 增加行高，易於閱讀法律條文 */
}

.text-content-wrapper h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.text-content-wrapper .effective-date {
    text-align: center;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 30px;
}

.text-content-wrapper h2 {
    font-size: 1.8rem;
    color: var(--momo-pink, var(--shopee-orange, #e6006c)); /* 抓取品牌主色 */
    margin-top: 35px;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}

.text-content-wrapper p,
.text-content-wrapper ul {
    font-size: 1rem;
    color: #444;
    margin-bottom: 15px;
}

.text-content-wrapper ul {
    padding-left: 25px; /* 內縮清單 */
}

.text-content-wrapper li {
    margin-bottom: 8px;
}

/* 法律免責聲明 (AI 提醒用) */
.legal-disclaimer-box {
    background-color: #fffbeb; /* 淺黃色 */
    border: 2px solid #f9ca24; /* 醒目黃色框線 */
    border-radius: 8px;
    padding: 20px 25px;
    margin: 20px 0 30px 0;
}

.legal-disclaimer-box strong {
    color: #d9534f; /* 醒目紅色 */
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
}

/* RWD for Text Pages */
@media (max-width: 768px) {
    .text-content-wrapper {
        padding: 30px 25px;
    }
    .text-content-wrapper h1 {
        font-size: 2rem;
    }
    .text-content-wrapper h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .text-page-container {
        padding: 10px 0;
    }
    .text-content-wrapper {
        padding: 20px 15px;
        box-shadow: none; /* 手機上移除陰影 */
        background-color: #f9f9f9; /* 手機上移除白底 */
    }
}

/* ==========================
   產品頁面 (Product Detail Page)
   ========================== */

.product-page-container {
    padding-top: 20px;
}

/* 麵包屑 */
.breadcrumbs {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: #555;
}
.breadcrumbs a:hover {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}
.breadcrumbs .fa-angle-right {
    margin: 0 8px;
}

/* 主要佈局 (左右欄) */
.product-main-layout {
    display: flex;
    gap: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}

/* 1. 左側：圖片庫 */
.product-gallery {
    flex: 0 0 40%;
    max-width: 450px;
}
.main-image-wrapper {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}
#main-product-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.thumbnail-list {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.thumbnail-item {
    flex: 1;
    border: 2px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}
.thumbnail-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}
.thumbnail-item:hover,
.thumbnail-item.active {
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
}

/* 2. 右側：商品資訊 */
.product-info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-info-details h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.product-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}
.product-meta .divider {
    margin: 0 10px;
    color: #ddd;
}

/* 價格 */
.product-price-block {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}
.old-price {
    font-size: 1.1rem;
    color: #999;
    text-decoration: line-through;
}
.new-price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--momo-red, var(--shopee-orange-dark, #e60000));
}

/* 簡短描述 */
.product-short-desc {
    margin-bottom: 20px;
}
.product-short-desc ul {
    list-style: none;
    padding-left: 0;
    color: #444;
}
.product-short-desc li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.product-short-desc li::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    position: absolute;
    left: 0;
    top: 2px;
}

/* 選項 */
.product-variants, .product-quantity {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.product-variants label,
.product-quantity label {
    flex: 0 0 100px;
    font-weight: 600;
    color: #555;
    font-size: 1rem;
}
.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.variant-btn {
    padding: 8px 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.variant-btn:hover {
    border-color: #999;
}
.variant-btn.active {
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    background-color: #fff8f5;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    font-weight: bold;
}

/* 數量 */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.qty-btn {
    width: 35px;
    height: 35px;
    border: none;
    background-color: #f5f5f5;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
}
#quantity {
    width: 60px;
    height: 35px;
    text-align: center;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 1.1rem;
    /* 隱藏 number input 的上下箭頭 */
    -moz-appearance: textfield;
}
#quantity::-webkit-outer-spin-button,
#quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 動作按鈕 */
.product-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}
.btn-add-to-cart, .btn-buy-now {
    flex: 1;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-add-to-cart {
    background-color: #fff8f5;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: 1px solid var(--momo-pink, var(--shopee-orange, #e6006c));
}
.btn-buy-now {
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    color: #fff;
    border: 1px solid var(--momo-pink, var(--shopee-orange, #e6006c));
}
.btn-add-to-cart:hover {
    background-color: #fef0ec;
}
.btn-buy-now:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}


/* 3. 下方：Tabs */
.product-lower-section {
    margin-top: 30px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.product-tabs {
    display: flex;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}
.tab-link {
    padding: 15px 25px;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.tab-link.active {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border-bottom: 3px solid var(--momo-pink, var(--shopee-orange, #e6006c));
}

.tab-content {
    display: none;
    padding: 30px;
    line-height: 1.8;
}
.tab-content.active {
    display: block;
}
.tab-content img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 5px;
}

/* 規格表 */
.specs-table {
    width: 100%;
    border-collapse: collapse;
}
.specs-table th, .specs-table td {
    padding: 12px 15px;
    border: 1px solid #eee;
    text-align: left;
}
.specs-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    width: 25%;
}


/* RWD 響應式 */
@media (max-width: 992px) {
    .product-main-layout {
        flex-direction: column;
    }
    .product-gallery {
        max-width: 100%;
    }
    #main-product-image {
        height: 400px;
    }
}

@media (max-width: 768px) {
    #main-product-image {
        height: 350px;
    }
    .thumbnail-item img {
        height: 60px;
    }
    .product-info-details h1 {
        font-size: 1.8rem;
    }
    .product-actions {
        flex-direction: column; /* 按鈕改垂直排列 */
    }
    .product-tabs {
        justify-content: space-around;
    }
    .tab-link {
        padding: 12px 10px;
        font-size: 1rem;
    }
    .tab-content {
        padding: 20px;
    }
}

/* ==========================
   如何購買 (How to Buy) 頁面
   ========================== */

/* 購物流程圖 */
.shopping-flow {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 25px 30px;
    margin: 30px 0 40px 0;
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 20px;
}

.flow-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.flow-text h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #333;
}

.flow-text span {
    font-size: 1rem;
    color: #555;
}

/* 流程箭頭 */
.flow-arrow {
    text-align: center;
    font-size: 1.5rem;
    color: #ccc;
    margin: 10px 0 10px 28px; /* 配合 icon 寬度做一點偏移 */
}

/* (選用) 行動呼籲按鈕 (在 about.php 已經定義過) */
/*
.btn-cta-shop {
    display: inline-block;
    padding: 12px 35px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-cta-shop:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}
*/

/* ==========================
   幫助中心 (Help Center) 頁面
   ========================== */

/* 讓 wrapper 寬一點，以容納卡片 */
.help-center-wrapper {
    max-width: 1000px; 
}

/* 幫助中心搜尋列 */
.help-search-bar {
    margin: 20px 0 30px 0;
}
.help-search-bar form {
    display: flex;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid var(--momo-pink, var(--shopee-orange, #e6006c));
    border-radius: 5px;
    overflow: hidden;
}
.help-search-bar input[type="text"] {
    flex-grow: 1;
    border: none;
    padding: 12px 15px;
    font-size: 1.1rem;
}
.help-search-bar input[type="text"]:focus {
    outline: none;
}
.help-search-bar button {
    border: none;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    color: #fff;
    padding: 0 20px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.help-search-bar button:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* h2 標題 (熱門主題) */
.help-center-wrapper h2 {
    text-align: center;
    font-size: 1.8rem;
    color: #333;
    margin-top: 40px;
    margin-bottom: 25px;
    border-bottom: none; /* 覆蓋 text-content-wrapper 的 h2 樣式 */
}

/* 分類卡片格線 */
.help-category-grid {
    display: grid;
    /* RWD: 自動適應，每欄最小 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.help-category-card {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 25px 20px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.help-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.help-category-card .card-icon {
    font-size: 2.5rem;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    margin-bottom: 15px;
}

.help-category-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #333;
}

.help-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* 連結靠左對齊 */
}

.help-links li {
    margin-bottom: 8px;
}

.help-links a {
    color: #007bff; /* 使用藍色連結色，表示可點擊 */
    text-decoration: none;
    font-size: 1rem;
}
.help-links a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* 聯絡我們區塊 */
.help-contact-box {
    background-color: #f9f9f9;
    border-top: 3px solid var(--momo-pink, var(--shopee-orange, #e6006c));
    border-radius: 0 0 8px 8px;
    padding: 25px 30px;
    margin-top: 30px;
}
.help-contact-box h4 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}
.help-contact-box p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* RWD: 手機上把格線改為 1 或 2 欄 */
@media (max-width: 576px) {
    .help-category-grid {
        grid-template-columns: 1fr; /* 手機上改為 1 欄 */
    }
}


/* ==========================
   購物車 (Cart Page)
   ========================== */

.cart-page-container {
    padding-top: 20px;
    padding-bottom: 40px;
}

.cart-page-container h1 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    text-align: center;
}

/* (S) 購物車為空 */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px dashed #ddd;
}
.cart-empty .fa-shopping-cart {
    font-size: 5rem;
    color: #ccc;
    margin-bottom: 20px;
}
.cart-empty h2 {
    font-size: 1.8rem;
    color: #555;
    margin-bottom: 10px;
}
.cart-empty p {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 30px;
}
/* (我們在 about.php 已定義過 .btn-cta-shop) */


/* (S) 購物車有商品 */
.cart-layout {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    gap: 30px;
}

/* 左側：商品列表 */
.cart-items-list {
    flex: 1; /* 佔滿剩餘空間 */
    min-width: 500px; /* 最小寬度 */
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
}

/* 列表標頭 (電腦版) */
.cart-header {
    display: flex;
    padding: 10px 15px;
    border-bottom: 2px solid #f0f0f0;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

/* 商品列 */
.cart-item-row {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    border-bottom: 1px solid #f5f5f5;
}

.col-product {
    flex: 2.5; /* 佔 2.5 份 */
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 250px;
}
.col-product img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 5px;
}
.col-product .product-name {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin: 0;
}
.col-product .product-variant {
    font-size: 0.9rem;
    color: #777;
    margin: 5px 0 0 0;
}

.col-price, .col-subtotal {
    flex: 1;
    text-align: center;
    font-size: 1rem;
}

.col-quantity {
    flex: 1.2;
    display: flex;
    justify-content: center;
}
/* (沿用 product.php 的 .quantity-selector 樣式) */

.col-remove {
    flex: 0.5;
    text-align: right;
}
.cart-remove-btn {
    font-size: 1.2rem;
    color: #aaa;
    transition: color 0.2s;
}
.cart-remove-btn:hover {
    color: var(--momo-red, #e60000);
}

/* 右側：訂單摘要 */
.cart-summary {
    flex: 0 0 320px; /* 固定寬度 320px */
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    height: fit-content; /* 高度隨內容 */
    border-top: 4px solid var(--momo-pink, var(--shopee-orange, #e6006c));
}
.cart-summary h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
}
.cart-summary hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 20px 0;
}
.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
}
.summary-total .total-price {
    color: var(--momo-red, #e60000);
}

.btn-checkout {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-checkout:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* RWD 響應式 */
@media (max-width: 992px) {
    .cart-layout {
        /* 改為垂直堆疊 */
        flex-direction: column;
    }
    .cart-items-list {
        min-width: 100%;
        order: 2; /* 摘要在上面 */
    }
    .cart-summary {
        flex: 1; /* 滿版 */
        order: 1; /* 摘要在上面 */
    }
}

@media (max-width: 768px) {
    /* (S) 手機版：將列表轉換為卡片 */
    .cart-header {
        display: none; /* 隱藏電腦版標頭 */
    }
    .cart-item-row {
        flex-direction: column; /* 垂直堆疊 */
        align-items: flex-start; /* 靠左對齊 */
        padding: 15px 10px;
        position: relative; /* 為了刪除按鈕 */
    }
    
    .col-product {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .col-price, .col-quantity, .col-subtotal {
        display: flex;
        justify-content: space-between; /* 標題和內容左右對齊 */
        width: 100%;
        text-align: left;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
    }
    
    /* 顯示 data-label 的內容 */
    .col-price::before, 
    .col-quantity::before, 
    .col-subtotal::before {
        content: attr(data-label);
        font-weight: 500;
        color: #555;
    }
    
    .col-quantity .quantity-selector {
        /* (沿用) */
    }
    
    .col-remove {
        position: absolute; /* 移到右上角 */
        top: 15px;
        right: 10px;
    }
    /* (E) 手機版：將列表轉換為卡片 */
}

/* ==========================
   結帳頁面 (Checkout Page)
   ========================== */

.checkout-page-container {
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: #f9f9f9; /* 結帳頁通常用淺灰底 */
}

.checkout-page-container h1 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    text-align: center;
}

.checkout-layout {
    display: flex;
    flex-wrap: wrap-reverse; /* RWD: 讓 sidebar 在手機上跑到上面 */
    gap: 30px;
}

/* (S) 左側：主要表單 */
.checkout-main {
    flex: 1;
    min-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.checkout-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px 30px;
}
.checkout-section h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

/* 沿用 login.php 的表單樣式 */
.checkout-main .form-group {
    margin-bottom: 15px;
}
.checkout-main label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.checkout-main input[type="text"],
.checkout-main input[type="tel"],
.checkout-main input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
.checkout-main input:focus {
    outline: none;
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
}

.form-row {
    display: flex;
    gap: 15px;
}
.form-group.half-width {
    flex: 1;
}

/* 付款方式 */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}
.payment-option:hover {
    background-color: #fcfcfc;
}
.payment-option.active {
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    background-color: #fff8f5;
    border-width: 2px;
}
.payment-option input[type="radio"] {
    margin-right: 15px;
    /* (選用) 美化 radio */
    width: 18px;
    height: 18px;
}
.payment-option i {
    font-size: 1.5rem;
    margin-right: 15px;
    color: #555;
    width: 30px; /* 固定寬度對齊 */
    text-align: center;
}
.payment-option span {
    font-size: 1.1rem;
    font-weight: 500;
}

/* 信用卡填寫區 */
.payment-details {
    display: none; /* 預設隱藏 */
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 20px;
    margin-top: 5px;
}
.payment-details.active {
    display: block; /* JS 控制顯示 */
}


/* (S) 右側：訂單摘要 */
.checkout-sidebar {
    flex: 0 0 350px;
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    height: fit-content;
    border: 1px solid #ddd;
}
.checkout-sidebar h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

/* 摘要商品列表 */
.order-summary-items {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px; /* 捲軸空間 */
}
.summary-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
}
.summary-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.summary-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}
.summary-item-info {
    flex: 1;
}
.summary-item-info .name {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 5px 0;
}
.summary-item-info .variant,
.summary-item-info .qty {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}
.summary-item .price {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap; /* 避免價格換行 */
}

/* 總計 */
.order-summary-totals {
    /* (沿用 cart.php 的樣式) */
    margin-top: 20px;
}
.order-summary-totals .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}
.order-summary-totals hr {
    border: 0;
    border-top: 1px dashed #ccc;
    margin: 15px 0;
}
.order-summary-totals .summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.order-summary-totals .summary-total .total-price {
    color: var(--momo-red, #e60000);
}

/* 結帳按鈕區 */
.checkout-footer p {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.5;
    margin-bottom: 15px;
}
.checkout-footer a {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    text-decoration: underline;
}

.btn-place-order {
    /* (沿用 cart.php .btn-checkout 樣式) */
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-place-order:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* RWD 響應式 */
@media (max-width: 992px) {
    .checkout-layout {
        /* (已設定 flex-wrap-reverse) */
    }
    .checkout-main {
        min-width: 100%; /* 滿版 */
    }
    .checkout-sidebar {
        flex: 1; /* 滿版 */
    }
}


/* ==========================
   會員中心 (Member Center) - 通用版型
   ========================== */

/* (沿用 .text-page-container 的灰色背景) */

.member-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* 確保內容區和側邊欄頂部對齊 */
}

/* (S) 左側：會員導覽列 */
.member-sidebar {
    flex: 0 0 220px; /* 固定寬度 220px */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    padding: 15px 0;
}

.member-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.member-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    font-size: 1.05rem;
    color: #444;
    text-decoration: none;
    border-right: 3px solid transparent;
    transition: all 0.2s;
}
.member-nav a i {
    width: 20px; /* 固定圖示寬度 */
    text-align: center;
    color: #888;
}
.member-nav a:hover {
    background-color: #f9f9f9;
}
.member-nav a.active {
    background-color: #fff8f5;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    font-weight: 600;
    border-right-color: var(--momo-pink, var(--shopee-orange, #e6006c));
}
.member-nav a.active i {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}

/* (E) 左側：會員導覽列 */

/* (S) 右側：主要內容區 */
.member-content {
    flex: 1; /* 佔滿剩餘空間 */
    min-width: 0; /* 修正 flex 溢位 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    padding: 30px;
    min-height: 400px;
}
.member-content h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
/* (E) 右側：主要內容區 */


/* ==========================
   我的訂單 (Orders Page)
   ========================== */

/* (S) 訂單為空 */
.order-empty {
    /* (沿用 cart.php .cart-empty 樣式) */
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed #ddd;
    border-radius: 8px;
}
.order-empty .fa-receipt {
    font-size: 5rem;
    color: #ccc;
    margin-bottom: 20px;
}
.order-empty h2 {
    border-bottom: none; /* 覆蓋 .member-content h2 樣式 */
    padding-bottom: 0;
    font-size: 1.8rem;
    color: #555;
    margin-bottom: 30px;
}

/* (S) 訂單列表 (卡片式) */
.order-card-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.order-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 確保圓角 */
}

/* 卡片 - 頁首 */
.order-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}
.order-card-header .order-id {
    font-weight: 600;
    color: #333;
}
.order-status {
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
}
/* 訂單狀態顏色 */
.status-shipped { background-color: #e0f7fa; color: #007bff; } /* 藍色 */
.status-delivered { background-color: #e8f5e9; color: #28a745; } /* 綠色 */
.status-cancelled { background-color: #f5f5f5; color: #6c757d; } /* 灰色 */
/* (您可以再增加 .status-pending 處理中) */

/* 卡片 - 內容 */
.order-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 欄 */
    gap: 15px;
    padding: 20px;
}
.order-card-body > div {
    display: flex;
    flex-direction: column;
}
.order-card-body .label {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 5px;
}
.order-card-body span {
    font-size: 1rem;
    color: #333;
}
.order-card-body .price {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 卡片 - 頁尾 */
.order-card-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #f5f5f5;
}
.btn-view-order {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-view-order:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}


/* RWD 響應式 */
@media (max-width: 992px) {
    /* 平板：會員中心改為垂直堆疊 */
    .member-layout {
        flex-direction: column;
    }
    .member-sidebar {
        flex: auto; /* 寬度 100% */
        width: 100%;
    }
    .member-nav {
        display: flex;
        overflow-x: auto; /* 產生水平捲軸 */
    }
    .member-nav li {
        flex-shrink: 0; /* 確保項目不被壓縮 */
    }
    .member-nav a {
        border-right: none;
        border-bottom: 3px solid transparent;
    }
    .member-nav a.active {
        border-right: none;
        border-bottom-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    }
}

@media (max-width: 480px) {
    /* 手機：訂單卡片內容改為 1 欄 */
    .order-card-body {
        grid-template-columns: 1fr;
    }
    .member-content {
        padding: 20px;
    }
}

/* ==========================
   訂單詳情 (Order Detail) 頁面
   ========================== */

/* 內容區標題 (含返回按鈕) */
.member-content-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.member-content-header h2 {
    /* 覆蓋 .member-content h2 的樣式 */
    margin: 0;
    padding: 0;
    border: none;
}
.back-to-orders-link {
    font-size: 0.95rem;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    text-decoration: none;
    font-weight: 500;
}
.back-to-orders-link:hover {
    text-decoration: underline;
}
.back-to-orders-link i {
    margin-right: 5px;
}

/* 1. 訂單摘要 (狀態、編號、日期) */
.order-detail-summary-grid {
    display: grid;
    /* RWD: 自動適應 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.summary-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
}
.summary-box .label {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 8px;
}
.summary-box .value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    word-break: break-all; /* 避免長編號溢出 */
}
.summary-box .value.price {
    font-size: 1.3rem;
    color: var(--momo-red, #e60000);
}
/* (沿用 .order-status 樣式) */


/* 2. 收件人 / 付款資訊 */
.order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 欄 */
    gap: 20px;
    margin-bottom: 30px;
}
.info-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 25px;
}
.info-box h4 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}
.info-box h4 i {
    margin-right: 8px;
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}
.info-box p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin: 0;
}
.info-box p strong {
    color: #333;
}


/* 3. 商品清單 */
.order-item-list-title {
    /* (類似 .info-box h4) */
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}
.order-item-list {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* 確保圓角 */
}
/* 列表標頭 (沿用 cart.php .cart-header) */
.order-item-list-header {
    display: flex;
    padding: 10px 15px;
    background-color: #f9f9f9;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}
/* 商品列 (沿用 cart.php .cart-item-row) */
.order-item-row {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    border-bottom: 1px solid #f5f5f5;
}
.order-item-row:last-child {
    border-bottom: none;
}
/* (沿用 .col-product, .col-price, .col-subtotal) */

/* 靜態的數量欄位 */
.col-qty-static {
    flex: 1.2;
    text-align: center;
    font-size: 1rem;
}


/* RWD 響應式 */
@media (max-width: 768px) {
    /* 收件/付款資訊 改為 1 欄 */
    .order-detail-grid {
        grid-template-columns: 1fr;
    }

    /* (S) 手機版：商品列表 (同 cart.php RWD) */
    .order-item-list-header {
        display: none; /* 隱藏電腦版標頭 */
    }
    .order-item-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .col-product {
        width: 100%;
        margin-bottom: 15px;
    }
    .col-price, .col-qty-static, .col-subtotal {
        display: flex;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
    }
    .col-price::before, 
    .col-qty-static::before, 
    .col-subtotal::before {
        content: attr(data-label);
        font-weight: 500;
        color: #555;
    }
    /* (E) 手機版：商品列表 */
}

/* ==========================
   訂單確認 (Confirmation) 頁面
   ========================== */

/* (沿用 .text-page-container 的灰色背景) */
/* .text-page-container {
    background-color: #f9f9f9;
} */

.confirmation-wrapper {
    max-width: 600px;
    margin: 40px auto; /* 上下留白，水平置中 */
    background-color: #fff;
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    border-top: 5px solid #28a745; /* 綠色，表示成功 */
}

.confirmation-icon {
    font-size: 5rem;
    color: #28a745; /* 成功綠 */
    margin-bottom: 20px;
    /* (選用) 簡易動畫 */
    transform: scale(0.8);
    opacity: 0;
    animation: popIn 0.5s ease 0.1s forwards;
}
/* 簡易動畫 */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}


.confirmation-wrapper h1 {
    font-size: 2.2rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.confirmation-subtext {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

/* 訂單資訊盒 */
.order-info-box {
    background-color: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.order-info-box p {
    font-size: 1.1rem;
    color: #666;
    margin: 10px 0;
}
.order-info-box .order-id,
.order-info-box .order-total {
    font-weight: 600;
    color: #333;
    font-size: 1.2rem;
}
.order-info-box .order-total {
    color: var(--momo-red, #e60000);
}

.next-steps {
    font-size: 1rem;
    color: #777;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* 行動呼籲按鈕 */
.confirmation-actions {
    display: flex;
    flex-wrap: wrap; /* RWD 換行 */
    justify-content: center;
    gap: 15px;
}

/* (S) 定義主要/次要按鈕樣式 */
/* (a 標籤，但外觀像 button) */
.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* 主要按鈕 (品牌色) */
.btn-primary {
    background-color: var(--momo-pink, var(--shopee-orange, #e6006c));
    color: #fff;
    border-color: var(--momo-pink, var(--shopee-orange, #e6006c));
}
.btn-primary:hover {
    background-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
    border-color: var(--momo-pink-dark, var(--shopee-orange-dark, #c0005a));
}

/* 次要按鈕 (灰色) */
.btn-secondary {
    background-color: #f5f5f5;
    color: #555;
    border-color: #ddd;
}
.btn-secondary:hover {
    background-color: #eee;
    border-color: #ccc;
}
/* (E) 按鈕樣式結束 */


/* RWD */
@media (max-width: 480px) {
    .confirmation-wrapper {
        padding: 30px 20px;
    }
    .confirmation-wrapper h1 {
        font-size: 1.8rem;
    }
    .confirmation-subtext {
        font-size: 1.1rem;
    }
}


/* ==========================
   會員資料 (Member Profile) 頁面
   ========================== */

/* 兩個表單區塊之間的間距 */
.member-content .checkout-section {
    margin-bottom: 25px;
}
.member-content .checkout-section:last-child {
    margin-bottom: 0;
}

/* 表單內的 h3 */
.member-content .checkout-section h3 {
    font-size: 1.3rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
}

/* 讓表單欄位不要太寬 */
.member-content .form-group {
    max-width: 400px;
}
.member-content .form-group small {
    font-size: 0.9rem;
    color: #888;
    margin-top: 5px;
    display: block;
}

/* 唯讀 (disabled) 欄位的樣式 */
.member-content input[disabled] {
    background-color: #f5f5f5;
    color: #888;
    cursor: not-allowed;
    border-color: #eee;
}

/* 按鈕微調 */
.member-content .btn-primary,
.member-content .btn-secondary {
    padding: 10px 25px;
    font-size: 1rem;
    margin-top: 10px; /* 與上方欄位保持距離 */
}

/* 成功/失敗 提示訊息 */
.member-alert {
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.member-alert.success {
    /* (沿用 order_confirmation.php 的綠色) */
    background-color: #e8f5e9; 
    color: #28a745;
    border-color: #c3e6cb;
}
.member-alert.error {
    /* (沿用 login.php 的紅色) */
    background-color: #f8d7da; 
    color: #721c24;
    border-color: #f5c6cb;
}

/* ==========================
   優惠券 (Coupons Page)
   ========================== */

/* (沿用 .member-content h2, .order-empty, .member-alert) */
/* (沿用 .checkout-section, .form-group, .btn-primary) */

/* 輸入代碼表單 (微調) */
.coupon-input-section {
    margin-bottom: 25px;
}
.coupon-input-form {
    display: flex;
    flex-wrap: wrap; /* RWD */
    gap: 15px;
    align-items: flex-end; /* 讓標籤和按鈕對齊 */
}
.coupon-input-form .form-group {
    flex: 1; /* 佔滿空間 */
    margin-bottom: 0;
    min-width: 250px;
}
.coupon-input-form button {
    flex-shrink: 0; /* 按鈕不壓縮 */
    margin-top: 0;
}

/* 優惠券卡片列表 */
.coupon-card-list {
    display: grid;
    /* RWD: 自動適應，每欄最小 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.coupon-card {
    display: flex;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    overflow: hidden;
    position: relative; /* 為了遮罩 */
    transition: box-shadow 0.2s;
}
.coupon-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 卡片左側 (資訊) */
.coupon-left {
    flex: 1;
    padding: 15px 20px;
    border-right: 2px dashed #eee; /* 虛線 */
}
.coupon-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.coupon-desc {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 12px 0;
}
.coupon-date {
    font-size: 0.9rem;
    color: #888;
    margin: 0;
}

/* 卡片右側 (狀態) */
.coupon-right {
    flex: 0 0 100px; /* 固定寬度 100px */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.coupon-status-text {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* 狀態：可使用 (品牌色) */
.coupon-card.status-available {
    border-left: 5px solid var(--momo-pink, var(--shopee-orange, #e6006c));
}
.status-available .coupon-name {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}
.status-available .coupon-status-text {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
}

/* 狀態：已使用 / 已過期 (灰色) */
.coupon-card.status-used,
.coupon-card.status-expired {
    border-left: 5px solid #aaa;
}
.status-used .coupon-name,
.status-expired .coupon-name {
    color: #999;
}
.status-used .coupon-status-text,
.status-expired .coupon-status-text {
    color: #888;
}

/* 遮罩 (用於已使用/已過期) */
.coupon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色遮罩 */
}

/* (選用) 已過期文字加刪除線 */
.status-expired .coupon-name,
.status-expired .coupon-desc,
.status-expired .coupon-date {
    text-decoration: line-through;
    text-decoration-color: #bbb;
}


/* ==========================
   產品分類 (Product List Page)
   ========================== */

/* (沿用 .page-content, .left-sidebar, .category-menu) */

/* 左側欄：目前分類的 active 狀態 */
.category-menu a.active {
    background-color: #fdf0f7; /* 淺粉紅 */
    color: var(--momo-pink, #e6006c);
    font-weight: bold;
}
.category-menu a.active i {
    color: var(--momo-pink, #e6006c);
}


/* (S) 右側內容區 */
.category-page-title {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* 排序工具列 */
.product-list-toolbar {
    display: flex;
    flex-wrap: wrap; /* RWD */
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid #eee;
}
.product-count {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
}
.sort-options label {
    font-size: 0.95rem;
    color: #333;
    margin-right: 5px;
}
.sort-options select {
    font-size: 0.95rem;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.sort-options select:focus {
    outline: none;
    border-color: var(--momo-pink, #e6006c);
}

/* (沿用 .product-grid-4-col, .product-card-momo) */
/* 調整：分類頁的 '查看詳情' 按鈕 */
.product-card-momo .add-to-cart-btn {
    /* (沿用 momo index.php 的樣式) */
    width: 100%;
    border: 1px solid var(--momo-pink);
    background-color: #fff;
    color: var(--momo-pink);
    padding: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.product-card-momo:hover .add-to-cart-btn {
    background-color: var(--momo-pink);
    color: #fff;
}


/* 找不到商品 */
.product-list-empty {
    /* (沿用 order-empty 樣式) */
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    margin-top: 20px;
}
.product-list-empty .fa-search {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 20px;
}
.product-list-empty h2 {
    font-size: 1.8rem;
    color: #555;
    margin-bottom: 10px;
}
.product-list-empty p {
    font-size: 1.1rem;
    color: #777;
    margin-bottom: 30px;
}


/* 分頁 (Pagination) */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}
.pagination .page {
    display: inline-block;
    padding: 8px 15px;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.2s;
}
.pagination .page:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}
.pagination .page.active {
    background-color: var(--momo-pink, #e6006c);
    color: #fff;
    border-color: var(--momo-pink, #e6006c);
    font-weight: 600;
}
.pagination .page.disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f9f9f9;
}
.pagination .page.disabled:hover {
    border-color: #ddd;
}

/* ==========================
   搜尋結果 (Search Page)
   ========================== */

/* (沿用 .text-page-container, .text-content-wrapper) */
/* (沿用 .product-list-toolbar, .product-list-empty) */
/* (沿用 .product-grid-4-col, .product-card-momo, .pagination) */

/* 讓搜尋頁的白色內容框寬一點 */
.search-page-wrapper {
    max-width: 1200px; /* 同 .container 最大寬度 */
}

.search-page-wrapper h1 {
    /* (沿用 .text-content-wrapper h1 樣式) */
    text-align: center;
    font-size: 2.2rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

/* 顯示搜尋關鍵字 */
.search-term {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 25px;
}
.search-term strong {
    color: var(--momo-pink, var(--shopee-orange, #e6006c));
    font-weight: 600;
}

/* 關鍵字高亮 */
.product-name mark {
    background-color: #fff3cd; /* 淺黃色 */
    color: #555;
    padding: 0 2px;
    font-weight: 600;
}