/* ================================================================
   shopto_design.css  v2.0
   電商風格設計覆蓋層 — 依照 shopto 設計規範
   主色:   #365a9e  (品牌藍)
   CTA:    #F97316  (橙色轉換鈕)
   Footer: #1a1a1a bg / #ccc text
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

:root {
    --sp-primary:        #365a9e;
    --sp-primary-dark:   #2a4780;
    --sp-primary-light:  #eef2fb;
    --sp-primary-mid:    #6887c4;
    --sp-cta:            #F97316;
    --sp-cta-dark:       #EA580C;
    --sp-text:           #1a1a2e;
    --sp-text-sub:       #666;
    --sp-text-light:     #999;
    --sp-border:         #e8edf5;
    --sp-bg:             #f5f7fc;
    --sp-white:          #ffffff;
    --sp-card-radius:    10px;
    --sp-btn-radius:     6px;
    --sp-shadow:         0 2px 12px rgba(54,90,158,0.10);
    --sp-shadow-hover:   0 8px 28px rgba(54,90,158,0.18);
}

html, body {
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--sp-text);
    background-color: var(--sp-bg);
    background-image: none;
}

a, a:link, a:visited, a:active { color: var(--sp-text); text-decoration: none; }
a:hover { color: var(--sp-primary); }

/* ════════ HEADER — 毛玻璃效果 ════════ */
.myBoxHeader_top {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 0 rgba(232,237,245,0.8), 0 2px 20px rgba(0,0,0,0.06) !important;
    min-height: 70px !important;
    height: 70px !important;
    overflow: visible !important;
    /* 頁面頂端時建立堆疊上下文，讓 sub_nav z-index 生效 */
    position: relative;
    z-index: 900;
}
/* 滾動後 JS 加 .header--fixed → fixed 蓋過 relative，置頂功能正常運作 */
.myBoxHeader_top.header--fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 900 !important;
}

.header_logo { width: 200px; padding: 0 16px; margin-right: 16px; }

.nav_right {
    min-height: 70px;
    height: 70px;        /* 明確設定高度，讓子層 height:100% 可以繼承 */
    padding: 0 28px;
    align-items: stretch;
    display: flex;
    overflow: visible;   /* 確保 sub_nav dropdown 不被裁切 */
}

.nav_itemgroups {
    width: calc(100% - 360px);
    height: 100%;
    gap: 0;
    align-items: stretch !important; /* 讓每個 nav_item 撐滿 header 高度 */
    overflow: visible;               /* 確保 sub_nav dropdown 不被裁切 */
}

/*
 * !! 關鍵修正 !!
 * nav_item 保留原本 height:100%（繼承自 nav_right / header）
 * 不可固定 height:70px，否則 sub_nav 的 top 計算基準會錯
 * padding 改為上下對稱，讓文字垂直置中
 */
.nav_item {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--sp-text);
    padding: 0 16px;          /* 左右間距，高度繼承父層 */
    height: 100%;             /* 撐滿 header，hover 面積夠大 */
    line-height: 1;
    border-radius: 0;
    display: flex;
    flex-wrap: nowrap;        /* 不換行，避免撐破 */
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.nav_item:hover {
    color: var(--sp-primary) !important;
    background-color: var(--sp-primary-light);
    border-radius: 0;
}

/* 底部藍色指示線 */
.nav_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--sp-primary);
    transition: width 0.25s ease;
    pointer-events: none;
}
.nav_item:hover::after { width: 100%; }

/*
 * !! sub_nav 修正 !!
 * top: 100% = 緊貼 nav_item 底部（nav_item height:100% = header 完整高度）
 * 滑鼠從選單文字移到 sub_nav 之間「零空隙」→ 不會意外觸發 mouseout
 */
.nav_item ul.sub_nav {
    display: none;
    position: absolute;
    top: 100%;          /* 貼齊 nav_item 底部，無任何空隙 */
    left: 0;
    width: 210px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    background-color: var(--sp-white);
    border-radius: 0 0 var(--sp-card-radius) var(--sp-card-radius);
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: none !important; /* 關閉所有 transition，防止滑鼠移過間隙觸發 mouseout */
}
/* 讓 nav_item 和 sub_nav 之間完全無間隙 */
.nav_item { overflow: visible !important; }

.nav_item:hover ul.sub_nav { display: block; }

/* sub_nav 第一層 li */
.nav_item ul.sub_nav > li {
    width: 210px;
    padding: 12px 14px 12px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav_item ul.sub_nav > li:last-child { border-bottom: 0; }

.nav_item ul.sub_nav > li:hover {
    background-color: var(--sp-primary-light);
    color: var(--sp-primary);
}

/*
 * !! three_nav 第三層修正 !!
 * top: 0 / left: 210px → 貼齊父層 li 右側
 * 父層 li 已是 position:relative，所以三級選單定位正確
 */
.nav_item ul.three_nav {
    display: none;
    position: absolute;
    top: 0;
    left: 210px;
    width: 200px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    background-color: var(--sp-white);
    border-top: 3px solid var(--sp-primary);
    border-radius: 0 var(--sp-card-radius) var(--sp-card-radius) 0;
    box-shadow: 4px 8px 28px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: none;
}

/* hover li 時顯示三級選單（原本邏輯） */
.nav_item ul.sub_nav li:hover ul.three_nav { display: block; }

.nav_item ul.three_nav > li {
    padding: 10px 14px 10px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav_item ul.three_nav > li:last-child { border-bottom: 0; }
.nav_item ul.three_nav > li:hover { background-color: var(--sp-primary-light); color: var(--sp-primary); }

/* icon 按鈕群 */
.nav_icongroups { width: 140px; height: 70px; }

.nav_iconlist {
    font-size: 19px;
    color: var(--sp-text-sub);
    padding: 0 10px;
    height: 70px;
    border-radius: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav_iconlist:hover {
    color: var(--sp-primary);
    background-color: var(--sp-primary-light);
    transform: none;
}

.floating_shopCount { background: var(--sp-cta); width: 17px; height: 17px; font-size: 10px; top: 18px; left: 22px; }

.navbar-toggle_modify .icon-bar { background-color: var(--sp-text); }

/* ════════ 手機選單 ════════ */

/* nav_left：display 由 header_nav.css @media 控制，不覆寫 */
.nav_left {
    background-color: var(--sp-white);
    min-height: 60px;
    padding: 0 16px;
    box-shadow: 0 1px 0 var(--sp-border);
}

/* 選單主體：白底 */
.mobile_menu {
    background-color: #fff;
    width: 290px;
    box-shadow: 4px 0 32px rgba(0,0,0,0.10);
}

/* Header 品牌區塊 */
.mm_title {
    background: linear-gradient(145deg, var(--sp-primary) 0%, #4872be 100%);
    padding: 24px 18px 18px;
}

.mm_tsfonts {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    text-align: left;
    margin-bottom: 14px;
}

/* 社群 icon */
.mm_tsbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    margin: 0 3px;
    transition: background 0.2s, color 0.2s;
}
.mm_tsbtn:hover { color: #fff; background: rgba(255,255,255,0.22); }

/* 主選單 body 背景 */
.mm_body { background: #fff; }

/* ── 一級選單項目 ──
   覆蓋 header_nav.css 的 color:#fff 和 padding-left:20px */
.mm_mainMenu li.mm_mainlist {
    position: relative;
    width: 100%;
    color: var(--sp-text) !important;   /* 覆蓋 header_nav 的 #fff */
    padding: 0 12px;
    margin: 2px 0;
    border-bottom: none;
    transition: background 0.15s;
}
.mm_mainMenu li.mm_mainlist:hover {
    background-color: transparent;
    color: var(--sp-text) !important;
}

/* 無子選單的單一連結 */
.mm_mainMenu li.mm_mainlist.only_item > a {
    display: block;
    padding: 13px 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sp-text) !important;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.mm_mainMenu li.mm_mainlist.only_item > a:hover {
    background: var(--sp-primary-light);
    color: var(--sp-primary) !important;
}

/* 有子選單的展開列 */
.mm_onelifonts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 13px 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sp-text) !important;
    border-radius: 8px;
    margin-bottom: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mm_onelifonts:hover {
    background: var(--sp-primary-light);
    color: var(--sp-primary) !important;
}

/* active 展開狀態 — 淡藍底，深藍字，不用太多顏色 */
.mm_mainMenu li.mm_mainlist.active > .mm_onelifonts {
    background: var(--sp-primary-light);
    color: var(--sp-primary) !important;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

/* 箭頭 */
.mm_liicon {
    font-size: 12px;
    color: #bbb;
    transition: transform 0.25s ease, color 0.2s;
    flex-shrink: 0;
}
.mm_mainMenu li.mm_mainlist.active i.mm_liicon {
    transform: rotate(90deg);
    color: var(--sp-primary);
}

/* ── 子選單容器 ── */
.mm_subMenu {
    display: none;
    width: 100%;
    list-style: none;
    padding: 4px 0 8px;
    background: #f8faff;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid var(--sp-border);
}
/* header_nav.css 的 display:block 規則已處理展開邏輯，我們只需樣式 */

/* ── 子選單項目 ── */
.mm_subMenu li.mm_sublist {
    background-color: transparent;
    background-image: none;
    padding: 0;
    margin: 1px 8px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 6px;
    transition: background 0.15s;
}
.mm_subMenu li.mm_sublist > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 24px;
    font-size: 14px;
    color: var(--sp-text-sub) !important;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mm_subMenu li.mm_sublist > a::before {
    content: '';
    width: 12px;
    height: 1px;
    background: var(--sp-border);
    flex-shrink: 0;
}
.mm_subMenu li.mm_sublist:hover {
    background-color: transparent;
    background-position: unset;
}
.mm_subMenu li.mm_sublist:hover > a {
    background: var(--sp-primary-light);
    color: var(--sp-primary) !important;
}

/* 確保 a 連結顏色正確（覆蓋 header_nav 的 color:#fff） */
.mm_mainMenu li.mm_mainlist a { color: var(--sp-text) !important; }
.mm_subMenu li.mm_sublist a { color: var(--sp-text-sub) !important; }

/* ════════ 區塊標題 ════════ */
.html_indextitle {
    font-size: 26px;
    font-weight: 700;
    color: var(--sp-text);
    text-align: center;
    margin-top: 52px;
    margin-bottom: 28px;
    letter-spacing: 1.5px;
    line-height: 1.3;
    position: relative;
}

.html_indextitle::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--sp-primary);
    margin: 12px auto 0;
    border-radius: 2px;
}

/* ════════ 商品卡片 ════════ */
ul.shop_selllist { padding: 0 20px 40px; gap: 15px; }

ul.shop_selllist.v_index li { width: calc((100% - 20px * 3) / 4); }

.v_grid .shop_pblock {
    background-color: var(--sp-white);
    border-radius: var(--sp-card-radius);
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.v_grid .shop_pblock:hover {
    box-shadow: var(--sp-shadow-hover);
    transform: translateY(-5px);
    border-color: var(--sp-border);
}

.v_grid .shop_pimg { background-color: #f4f6fb; overflow: hidden; }
.v_grid .shop_pblock:hover .scale_img { transform: scale(1.06); transition: transform 0.5s ease; }

.v_grid .shop_listcon { padding: 14px 16px 8px; flex: 1; display: flex; flex-direction: column; }

.v_grid .shop_pname {
    font-size: 14px; font-weight: 600; color: var(--sp-text);
    line-height: 1.55; margin-bottom: 8px;
}

.v_grid .shop_price {
    font-size: 17px; font-weight: 700; color: var(--sp-cta);
    margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}

.v_grid .shop_price_urdel { font-size: 13px; color: var(--sp-text-light); text-decoration: line-through; font-weight: 400; }

.v_grid .shop_pbtn { padding: 10px 16px 14px; text-align: center; }

.v_grid .shop_isoff { font-size: 13px; color: var(--sp-text-light); border-top: 1px solid var(--sp-border); background: #fafbfc; text-align: center; padding: 10px; }

/* ── 按鈕 ── */
.prodaddv2_btn {
    background-color: var(--sp-primary) !important;
    color: #fff !important;
    border-radius: var(--sp-btn-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    border: none !important;
}
.prodaddv2_btn:hover {
    background-color: var(--sp-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(54,90,158,0.30) !important;
}

.cartaddv2_btn {
    background-color: var(--sp-cta) !important; color: #fff !important;
    border-radius: var(--sp-btn-radius) !important; font-weight: 600 !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.cartaddv2_btn:hover { background-color: var(--sp-cta-dark) !important; box-shadow: 0 4px 14px rgba(249,115,22,0.32) !important; }

.cartaddv3_btn {
    background-color: var(--sp-primary-light) !important; color: var(--sp-primary) !important;
    border: 1.5px solid var(--sp-primary) !important; border-radius: var(--sp-btn-radius) !important;
    font-weight: 600 !important; transition: all 0.2s ease !important;
}
.cartaddv3_btn:hover { background-color: var(--sp-primary) !important; color: #fff !important; }

/* ════════ 「點我看更多」按鈕 — 重新設計 ════════ */
.news_bbtnblock {
    text-align: center;
    padding: 28px 0 48px;
}

/* shoptosendv2_btn 作為「看更多」的主要樣式 */
.shoptosendv2_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 1px;
    padding: 13px 40px !important;
    min-width: 160px;
    box-shadow: 0 4px 18px rgba(54,90,158,0.28) !important;
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
	cursor:pointer;
}

.shoptosendv2_btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.shoptosendv2_btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(54,90,158,0.38) !important;
    color: #fff !important;
}

.shoptosendv2_btn:hover::before { opacity: 1; }

/* 若按鈕文字有箭頭符號 → 補充動畫感 */
.shoptosendv2_btn:hover::after {
    content: ' →';
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.callv2_btn { background-color: #16a34a !important; color: #fff !important; border-radius: var(--sp-btn-radius) !important; font-weight: 600 !important; }

/* ════════ 最新消息：現代卡片網格（2欄，16:9圖片）════════ */
ul.news_main {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding: 0 20px 16px !important;
    background: transparent !important;
    list-style: none;
    margin: 0;
    flex-wrap: unset !important;
}

ul.news_main li {
    width: 100% !important;
    flex-direction: column !important;
    padding: 0 !important;
    background-color: var(--sp-white) !important;
    border-radius: var(--sp-card-radius) !important;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow) !important;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 移除預設 border-top（已由 grid gap 取代） */
ul.news_main li + li { border-top: none !important; }

ul.news_main li:hover {
    background-color: var(--sp-white) !important;
    box-shadow: var(--sp-shadow-hover) !important;
    transform: translateY(-5px) !important;
}

ul.news_main li:hover .imgAreaContain { transform: scale(1.04) !important; }

/* ── 圖片容器：強制 16:9 比例 ── */
.nmain_liimg {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* padding-bottom: 56.25% = 16:9 */
.nmain_liimg .imgAreaContain {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0;
    transition: transform 0.4s ease;
}

/* 隱藏佔位圖（保留原 img 讓 background-image 運作）*/
.nmain_liimg .imgAreaContain img {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    visibility: hidden !important;
}

/* ── 文字資訊區塊 ── */
.nmain_liinfo {
    width: 100% !important;
    padding: 18px 20px 16px !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.nmain_lcinfo { width: 100%; align-self: auto !important; }

/* ── 分類標籤 ── */
.nmain_classtag {
    display: inline-block !important;
    background-color: var(--sp-primary-light) !important;
    color: var(--sp-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    letter-spacing: 0.8px;
    margin-bottom: 10px !important;
    text-transform: uppercase;
}

/* 無分類時隱藏空標籤 */
.nmain_classtag:empty { display: none !important; }

/* ── 標題 ── */
.nmain_btitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--sp-text) !important;
    line-height: 1.5;
    margin-top: 0 !important;
    white-space: normal !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

ul.news_main li:hover .nmain_btitle { color: var(--sp-primary) !important; }

/* ── 摘要描述 ── */
.nmain_desc {
    font-size: 13px !important;
    color: var(--sp-text-sub) !important;
    margin-top: 8px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    line-height: 1.65;
}

/* ── 底部：日期 + 閱讀更多 ── */
.amain_othermsg {
    font-size: 12px !important;
    color: var(--sp-text-light) !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--sp-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    align-self: flex-end !important;
}

/* 在日期右側加入「閱讀更多」提示 */
.amain_othermsg::after {
    content: '閱讀更多 →';
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

ul.news_main li:hover .amain_othermsg::after {
    opacity: 1;
    transform: translateX(0);
}

/* ════════ 推薦文章：三欄卡片 ════════ */
.aindexmain_block { padding: 0 20px; overflow: visible !important; }

ul.article_indexmain {
    flex-wrap: wrap !important;
    gap: 20px;
    overflow: visible !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.article_indexmain li {
    width: calc((100% - 40px) / 3) !important;
    margin: 0 !important;
    border-radius: var(--sp-card-radius) !important;
    box-shadow: var(--sp-shadow) !important;
    border: 1px solid var(--sp-border);
    background: var(--sp-white) !important;
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease !important;
    overflow: hidden;
}

ul.article_indexmain li:hover {
    box-shadow: var(--sp-shadow-hover) !important;
    transform: translateY(-5px) !important;
}

ul.article_indexmain li:hover .imgAreaContain { transform: scale(1.05) !important; }
.aindexmain_liimg { overflow: hidden; }
.aindexmain_liinfo { padding: 16px 18px 18px !important; }
.aindexmain_classtag { margin-bottom: 6px !important; }
.aindexmain_time { font-size: 12px !important; color: var(--sp-text-light) !important; margin-left: 8px; }

.aindexmain_btitle {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sp-text) !important;
    margin-top: 6px !important;
    line-height: 1.5;
    -webkit-line-clamp: 2 !important;
}

ul.article_indexmain li:hover .aindexmain_btitle { color: var(--sp-primary) !important; }

.aindexmain_desc {
    font-size: 13px !important;
    color: var(--sp-text-sub) !important;
    margin-top: 6px;
    -webkit-line-clamp: 2 !important;
    line-height: 1.6;
}

.aindexmain_more {
    font-size: 13px !important;
    color: var(--sp-primary) !important;
    margin-top: 14px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* ════════ Footer ════════ */
.footer_block {
    background-color: #1a1a1a !important;
    color: #ccc !important;
    padding: 44px 36px 24px !important;
    border-top: 3px solid var(--sp-primary);
}

.footer_left  { width: calc(100% / 3); padding-right: 28px; padding-bottom: 24px; }
.footer_middle{ width: calc(100% / 3); padding-bottom: 24px; }
.footer_right { width: calc(100% / 3); padding-bottom: 24px; }

.footer_section_title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2e2e2e;
}

.fm_li { font-size: 14px !important; color: #aaa !important; line-height: 2 !important; letter-spacing: 0.3px !important; }
.fm_li label { font-size: 13px !important; font-weight: 600 !important; color: #ccc !important; }
.fm_li.fcompname:before,.fm_li.fidnumber:before,.fm_li.fphone:before,.fm_li.fmail:before,.fm_li.faddr:before { color: var(--sp-primary-mid) !important; }

.fm_liv1 { font-size: 14px !important; color: #aaa !important; line-height: 1.9 !important; }
.fm_liv1 label { color: #ccc !important; font-weight: 600 !important; font-size: 13px !important; }
.fm_liv1.fservicetime:before { color: var(--sp-primary-mid) !important; }

.footer_block a { color: #aaa !important; transition: color 0.18s ease; }
.footer_block a:hover { color: #fff !important; text-decoration: none; }

.fr_li {
    font-size: 14px !important;
    color: #aaa !important;
    letter-spacing: 0.3px !important;
    margin: 2px 0 !important;
    display: block !important;
    line-height: 2.2 !important;
}

.footer_btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 20px !important;
    border-radius: 50% !important;
    cursor: pointer;
    margin: 6px 4px !important;
    color: #888 !important;
    background: transparent !important;
    border: 1px solid #2e2e2e !important;
    transition: all 0.2s ease !important;
}

.footer_btn:hover {
    color: #fff !important;
    background-color: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(54,90,158,0.3);
}

.footer_full {
    color: #555 !important;
    font-size: 13px !important;
    border-top: 1px solid #2a2a2a !important;
    padding: 16px 0 12px !important;
    letter-spacing: 0.3px !important;
    width: 100%;
    text-align: center;
    line-height: 1.7;
}
.footer_full a { color: var(--sp-primary-mid) !important; }
.footer_full a:hover { color: #fff !important; }

.footer_img { padding: 16px 0 8px; border-top: 1px solid #2a2a2a; }

/* ════════ 手機底部 TabBar ════════ */
.footermenu_mob {
    background: rgba(20,20,20,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #2a2a2a;
    padding: 6px 0;
}

.fmob_icon { color: #888; font-size: 20px; }
.fmob_fonts { color: #888; font-size: 11px; font-weight: 500; }
.footm_li:hover .fmob_icon,.footm_li:hover .fmob_fonts { color: var(--sp-primary-mid); }
.footm_shopCount { background: var(--sp-cta); }

/* ════════ 側邊浮動按鈕 ════════
   大容器透明（無背景），每個 icon 有獨立圓形白底+毛玻璃
   ═══════════════════════════════════════════════════════ */
.floatisFixed {
    right: 14px;
    bottom: 18%;
    box-shadow: none !important;
}

/* 移除外層大背景容器 */
.floatisFixed .list_unstyled {
    background: transparent !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* 每個 icon 按鈕：獨立毛玻璃圓形背景 */
.float_item {
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    margin: 0 !important;
    color: var(--sp-primary) !important;
}

.top_only { border-top: none !important; }

.flitem_icon {
    font-size: 20px !important;
    color: var(--sp-primary) !important;
    transition: color 0.2s ease, transform 0.22s ease;
    display: block;
}

.float_item:hover {
    background: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
    box-shadow: 0 4px 18px rgba(54,90,158,0.32) !important;
    transform: translateY(-3px) scale(1.08);
}

.float_item:hover .flitem_icon,
.float_item:hover a {
    color: #fff !important;
}

.float_item a {
    color: var(--sp-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ════════ 其他雜項 ════════ */
.breadcrumb { font-size: 13px; color: var(--sp-text-sub); background: transparent; padding: 10px 20px; }
.breadcrumb > li a:hover { color: var(--sp-primary); }

.html_title {
    font-size: 24px; font-weight: 700; color: var(--sp-text);
    letter-spacing: 1px; padding: 6px 0; margin-top: 16px; margin-bottom: 4px; text-align: center;
}
.html_title::after { content: ''; display: block; width: 36px; height: 3px; background: var(--sp-primary); border-radius: 2px; margin: 8px auto 0; }

.show_msg { background-color: var(--sp-primary) !important; border-radius: var(--sp-btn-radius); font-size: 14px; font-weight: 600; }

.cart_listblock { border-radius: var(--sp-card-radius) 0 0 var(--sp-card-radius) !important; box-shadow: -4px 0 28px rgba(0,0,0,0.12) !important; border: none !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f2f7; }
::-webkit-scrollbar-thumb { background: #c5cde8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sp-primary); }

/* ════════ RWD ════════ */
@media (max-width: 1100px) {
    ul.shop_selllist.v_index li { width: calc((100% - 20px * 2) / 3); }
    ul.article_indexmain li { width: calc((100% - 20px) / 2) !important; }
}

@media (max-width: 768px) {
    .html_indextitle { font-size: 21px; margin-top: 36px; margin-bottom: 20px; }
    ul.shop_selllist { padding: 0 12px 28px; gap: 12px; }
    ul.shop_selllist.v_index li { width: calc((100% - 12px) / 2); }
    ul.news_main { padding: 0 12px 8px !important; gap: 14px !important; grid-template-columns: 1fr !important; }
    ul.news_main li { width: 100% !important; }
    ul.article_indexmain li { width: 100% !important; }
    .aindexmain_block { padding: 0 12px; }
    .footer_left,.footer_middle,.footer_right { width: 100%; padding-right: 0; }
    .footer_block { padding: 28px 18px 16px !important; }
    .fr_li { display: inline-block !important; margin: 3px 8px !important; }
}

@media (max-width: 480px) {
    ul.shop_selllist.v_index li { width: calc((100% - 10px) / 2); }
    ul.shop_selllist { gap: 10px; }
}

/* ============================================================
   大圖輪播 UX/UI 優化
   ============================================================ */

/* 輪播容器 */
#index_carousel {
    position: relative;
    overflow: hidden;
}

/* 每一張輪播 item */
#index_carousel .imgAreaContain {
    position: relative;
    overflow: hidden;
}

/* 圖片 Ken Burns 縮放動畫（滑動時的視差感） */
#index_carousel .owl-item.active .imgAreaContain {
    animation: carouselZoomIn 10s ease-out forwards;
}

@keyframes carouselZoomIn {
    0%   { background-size: 108%; }
    100% { background-size: 100%; }
}

/* ── 漸層遮罩：底部文字區底色 ── */
#index_carousel .imgAreaContain::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(0,0,0,0.18) 70%,
        rgba(0,0,0,0.42) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── 圖片說明文字（滑入動畫）── */
#index_carousel .slide_caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 28px 36px 32px;
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
    pointer-events: none;
}

#index_carousel .owl-item.active .slide_caption {
    opacity: 1;
    transform: translateY(0);
}

.slide_caption_title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    margin: 0 0 6px;
}

.slide_caption_sub {
    font-size: 14px;
    opacity: 0.85;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ── 左右切換箭頭 ── */
#index_carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 14px;
    z-index: 10;
}

#index_carousel .owl-prev,
#index_carousel .owl-next {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18) !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.25s ease, transform 0.2s ease, opacity 0.25s ease !important;
    opacity: 0;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* 僅在 hover 輪播區時顯示箭頭 */
#index_carousel:hover .owl-prev,
#index_carousel:hover .owl-next {
    opacity: 1;
}

#index_carousel .owl-prev:hover,
#index_carousel .owl-next:hover {
    background: rgba(255,255,255,0.32) !important;
    transform: scale(1.08);
}

#index_carousel .owl-prev:active,
#index_carousel .owl-next:active {
    transform: scale(0.95);
}

/* ── 底部圓點指示器 ── */
#index_carousel .owl-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 8px;
    z-index: 10;
}

#index_carousel .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.5) !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
    display: block;
    margin: 0 !important;
}

#index_carousel .owl-dot.active span {
    background: #fff !important;
    transform: scale(1.35);
}

#index_carousel .owl-dot:hover span {
    background: rgba(255,255,255,0.85) !important;
}

/* ── 進度條（自動播放倒數視覺） ── */
#index_carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.75);
    z-index: 20;
    animation: none;
    width: 0%;
}

#index_carousel.is-playing::after {
    animation: slideProgress 10s linear infinite;
}

@keyframes slideProgress {
    0%   { width: 0%; }
    100% { width: 100%; }
}

/* ── 手機版微調 ── */
@media (max-width: 768px) {
    #index_carousel .owl-prev,
    #index_carousel .owl-next {
        width: 36px;
        height: 36px;
        font-size: 16px !important;
        opacity: 0.65 !important; /* 手機版常顯 */
    }

    .slide_caption_title { font-size: 17px; }
    .slide_caption_sub   { font-size: 12px; }

    #index_carousel .slide_caption {
        padding: 18px 18px 28px;
    }
}


/* navText 為空字串時，用 CSS ::before 繪製箭頭符號 */
#index_carousel .owl-prev::before { content: '❮'; font-size: 18px; color: #fff; }
#index_carousel .owl-next::before { content: '❯'; font-size: 18px; color: #fff; }