/* Front V53 shell — header / footer / navbar / layout scope / legacy spacing
   Extracted from Content/mainStyle.css (PLAN-02). Global reset omitted (BS 5.3).
*/
img {
    max-width: 100%;
    height: auto;
}

/* 懸停展示下拉菜單效果的樣式 BEGIN */

/* Bootstrap 5.3 兼容性調整 */
.dropdown-backdrop {
    position: static;
}

/* 桌面：hover 展開；手機維持 BS click（.show） */
.navbar .dropdown-menu {
    display: none;
}

.navbar .dropdown-menu.show {
    display: block !important;
}

@media (min-width: 768px) {
    /* 懸停開選單：綁在 .nav-item.dropdown，滑到子選單仍保持 :hover */
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    /*
     * 橋接觸發列與選單之間的空隙（margin / --bs-dropdown-spacer）。
     * 空隙若不可點，游標一離 PRODUCT／Help 就失去 :hover，選單立刻收起。
     */
    .navbar .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.75rem;
    }
}

/* 懸停展示下拉菜單效果的樣式 END */

a {
    text-decoration: none;
    color:#2e2e2e;
}

label,span{
     font-weight:500;
     font-size:1em;
     font-family: Microsoft YaHei, simhei,Verdana, Arial, Helvetica, sans-serif;
}

.body-content { 
    padding-left: 0px;
    padding-right: 0px;
}
 
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.floatFooter {
    left: 0;
    position: fixed;
    bottom: 8px;
    width: 100%;
    z-index: 0;
    text-align: center;
    float:none;
}

.footer {
    width: 100%;
    background-color: #f5f5f5;
}

/* V53 header: 輕淺灰，與 footer 一致 */
nav.front-v53-header {
    --front-v53-header-height: 53px;
    --bs-navbar-padding-y: 0;
    background-color: #f7f7f7;
    border-bottom: 3px solid #d4d0d1;
    min-height: var(--front-v53-header-height);
    box-sizing: border-box;
}

nav.front-v53-header .navbar-brand img {
    max-height: 50px;
    width: auto;
}

nav.front-v53-header .front-v53-header-brand {
    color: #212529;
}

/* 兩行店名：Bootstrap 5.3 d-flex flex-column；子節點各佔一 row */
nav.front-v53-header .shop-header-brand {
    max-height: 50px;
}

nav.front-v53-header .shop-header-brand > * {
    line-height: 1.1;
}

.shop-header-brand p,
.shop-header-brand div,
.shop-header-brand h1,
.shop-header-brand h2,
.shop-header-brand h3,
.shop-header-brand h4,
.shop-header-brand h5,
.shop-header-brand h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.1;
}

nav.front-v53-header .nav-link {
    color: #212529;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
}

nav.front-v53-header .nav-link:hover,
nav.front-v53-header .nav-link:focus {
    color: #495057;
}

nav.front-v53-header .front-v53-header-icon {
    color: #212529;
    line-height: 1;
    vertical-align: middle;
}

/* dropdown-toggle 與一般 nav-link 同高，避免 btn 殘留 padding 造成縮進／偏高 */
nav.front-v53-header .nav-link.dropdown-toggle {
    padding-top: var(--bs-nav-link-padding-y);
    padding-bottom: var(--bs-nav-link-padding-y);
}

nav.front-v53-header .nav-dropdown-toggle:focus,
nav.front-v53-header .nav-dropdown-toggle:active,
nav.front-v53-header .nav-dropdown-toggle.show {
    box-shadow: none;
    outline: none;
}

/* ========== Header v2（_LayOutHeader53.v2）========== */
nav.front-v53-header-v2 {
    --front-v53-navy: var(--site-navy, #0b0454);
    --front-v53-accent: var(--site-accent, #c52d2f);
    --front-v53-wa: var(--site-wa, #25d366);
    background-color: var(--site-surface, #fff);
    border-bottom: none;
    box-shadow:
        0 1px 0 var(--front-v53-navy),
        0 2px 8px var(--site-shadow, rgba(11, 4, 84, 0.06));
}

nav.front-v53-header-v2 .front-v53-header-inner {
    min-height: var(--front-v53-header-height);
}

nav.front-v53-header-v2 .navbar-brand {
    min-height: var(--front-v53-header-height);
}

nav.front-v53-header-v2 .front-v53-toggler {
    border-color: rgba(11, 4, 84, 0.2);
    padding: 0.35rem 0.5rem;
}

nav.front-v53-header-v2 .front-v53-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(11, 4, 84, 0.2);
}

nav.front-v53-header-v2 .nav-link {
    position: relative;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--site-text, #1a1a1a);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    transition: color 0.15s ease;
}

nav.front-v53-header-v2 .nav-link:hover,
nav.front-v53-header-v2 .nav-link:focus {
    color: var(--front-v53-navy);
}

/* 桌面：主導覽 hover 底線（用 ::before，避免蓋掉 dropdown-toggle 的 caret ::after） */
@media (min-width: 768px) {
    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link {
        min-height: var(--front-v53-header-height);
        align-items: center;
    }

    /* 標籤與 icon 同一基線；避免全局 span{font-size:1em} 與 caret 造成 PRODUCT 偏高 */
    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link > span {
        display: inline-block;
        line-height: 1;
        font-size: inherit;
        font-weight: inherit;
        font-family: inherit;
        vertical-align: middle;
    }

    /* BS dropdown-toggle::after 預設 vertical-align:.255em，flex 下列文字會顯得比 HOME/CONTACT 高 */
    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link.dropdown-toggle::after {
        vertical-align: 0;
        margin-top: 0;
        align-self: center;
        border-top-width: 0.3em;
        position: relative;
        top: 0.05em;
    }

    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link::before {
        content: "";
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.2rem;
        height: 2px;
        background: var(--front-v53-navy);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.18s ease;
        border-radius: 1px;
    }

    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link:hover::before,
    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link:focus::before,
    nav.front-v53-header-v2 .front-v53-nav-primary > .nav-item > .nav-link.show::before {
        transform: scaleX(1);
    }

    nav.front-v53-header-v2 .front-v53-nav-sep {
        width: 1px;
        height: 1.25rem;
        margin: 0 0.35rem;
        background: rgba(11, 4, 84, 0.15);
        align-self: center;
        padding: 0;
    }
}

nav.front-v53-header-v2 .front-v53-nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}

/* WhatsApp pill（桌面） */
nav.front-v53-header-v2 .front-v53-wa-pill {
    color: var(--front-v53-wa) !important;
}

@media (min-width: 768px) {
    nav.front-v53-header-v2 .front-v53-wa-pill {
        padding: 0.25rem 0.65rem;
        margin-inline: 0.15rem;
        border-radius: 999px;
        background: rgba(37, 211, 102, 0.12);
        border: 1px solid rgba(37, 211, 102, 0.35);
        font-size: 1.15rem;
        line-height: 1;
    }

    nav.front-v53-header-v2 .front-v53-wa-pill:hover,
    nav.front-v53-header-v2 .front-v53-wa-pill:focus {
        background: rgba(37, 211, 102, 0.22);
        color: #128c7e !important;
    }
}

nav.front-v53-header-v2 .front-v53-dropdown {
    border-radius: 0.5rem;
    /* 視覺間距改由 ::before 橋接區承擔，避免 margin 造成不可 hover 的空隙 */
    margin-top: 0;
    padding: 0.35rem 0;
}

/* 覆寫 BS [data-bs-popper] 的 --bs-dropdown-spacer，避免再出現空隙 */
nav.front-v53-header-v2 .dropdown-menu[data-bs-popper] {
    margin-top: 0;
}

nav.front-v53-header-v2 .front-v53-dropdown .dropdown-item {
    font-size: 0.875rem;
    padding: 0.4rem 1rem;
    color: #212529;
}

nav.front-v53-header-v2 .front-v53-dropdown .dropdown-item:hover,
nav.front-v53-header-v2 .front-v53-dropdown .dropdown-item:focus {
    background-color: rgba(11, 4, 84, 0.06);
    color: var(--front-v53-navy);
}

nav.front-v53-header-v2 .front-v53-user-chip .front-v53-user-name {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 手機：固定 icon 欄，避免縮進不一致 */
@media (max-width: 767.98px) {
    nav.front-v53-header-v2 .navbar-collapse {
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid rgba(11, 4, 84, 0.08);
        margin-top: 0.25rem;
    }

    nav.front-v53-header-v2 .nav-link {
        width: 100%;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        font-size: 0.9rem;
    }

    nav.front-v53-header-v2 .front-v53-nav-ico {
        width: 1.75rem;
        font-size: 1.15rem;
        margin-right: 0.15rem;
    }

    nav.front-v53-header-v2 .front-v53-wa-pill {
        color: #128c7e !important;
    }

    nav.front-v53-header-v2 .front-v53-nav-tools {
        border-top: 1px dashed rgba(11, 4, 84, 0.12);
        padding-top: 0.35rem;
        margin-top: 0.25rem;
    }

    nav.front-v53-header-v2 .front-v53-nav-account {
        border-top: 1px dashed rgba(11, 4, 84, 0.12);
        padding-top: 0.35rem;
    }
}

/* ========== Footer v2（_FooterTemplate53.v2）— 對齊 header-v2 ========== */
/* 有 Footer v2 時關掉舊 #footer 紅線，只留 navy 一條 */
body.front-v53 #footer:has(.front-v53-footer-v2),
body.front-v53 footer.footer:has(.front-v53-footer-v2) {
    border-top: none;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.front-v53-footer-v2 {
    --front-v53-navy: var(--site-navy, #0b0454);
    --front-v53-accent: var(--site-accent, #c52d2f);
    --front-v53-wa: var(--site-wa, #25d366);
    margin-top: 1.5rem;
    background: var(--site-surface, #f8f9fb);
    border-top: 2px solid var(--front-v53-navy);
    color: var(--site-text, #212529);
}

.front-v53-footer-v2-inner {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

.front-v53-footer-v2-brand-name {
    display: inline-block;
    position: relative;
    padding-left: 0.85rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--front-v53-navy);
    line-height: 1.3;
}

.front-v53-footer-v2-brand-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: 2px;
    background: var(--front-v53-navy);
}

.front-v53-footer-v2-heading {
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--front-v53-navy);
    border-bottom: 1px solid rgba(11, 4, 84, 0.12);
}

.front-v53-footer-v2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.front-v53-footer-v2-tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #495057;
    background: #fff;
    border: 1px solid rgba(11, 4, 84, 0.12);
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front-v53-footer-v2-links > li,
.front-v53-footer-v2-contact > li {
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.front-v53-footer-v2-links a,
.front-v53-footer-v2-contact a,
.front-v53-footer-v2-legal a {
    color: #343a40;
    text-decoration: none;
    transition: color 0.15s ease;
}

.front-v53-footer-v2-links a:hover,
.front-v53-footer-v2-links a:focus,
.front-v53-footer-v2-contact a:hover,
.front-v53-footer-v2-contact a:focus,
.front-v53-footer-v2-legal a:hover,
.front-v53-footer-v2-legal a:focus {
    color: var(--front-v53-accent);
}

.front-v53-footer-v2-muted {
    color: #6c757d;
}

.front-v53-footer-v2-contact > li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.front-v53-footer-v2-ico {
    width: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: var(--front-v53-navy);
    opacity: 0.75;
    text-align: center;
}

.front-v53-footer-v2-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #128c7e !important;
    text-decoration: none !important;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.front-v53-footer-v2-wa:hover,
.front-v53-footer-v2-wa:focus {
    background: rgba(37, 211, 102, 0.22);
    color: #075e54 !important;
}

.front-v53-footer-v2-bar {
    background: #fff;
    border-top: 1px solid rgba(11, 4, 84, 0.1);
}

.front-v53-footer-v2-meta {
    color: #495057;
}

.front-v53-footer-v2-legal {
    color: #6c757d;
}

.front-v53-footer-v2-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(11, 4, 84, 0.35);
}

/* 覆寫舊 footer #footer 連結色（v2 自管） */
footer.footer .front-v53-footer-v2 a:hover {
    color: var(--front-v53-accent);
}

/* Bootstrap 5.3 layout: 覆寫舊版 #footer 深色背景 */
footer.footer #footer {
    background: none;
    color: #000;
    border-top: none;
    font-size: inherit;
}
footer.footer #footer a {
    color: inherit;
}
footer.footer #footer a:hover {
    color: #c52d2f;
}
footer.footer #footer ul > li.copyright {
    border-bottom: 1px solid #ddd;
}
footer.footer #footer .text-start {
    text-align: start;
}

.margin-top5 {
    margin-top: 5px;
}

.margin-top10 {
    margin-top: 10px;
}
.margin-top15 {
    margin-top: 15px;
}

.margin-left3 {
    margin-left: 3px;
}

.margin-left5 {
    margin-left: 5px;
}

.margin-left10 {
    margin-left: 10px;
}

.margin-left15 {
    margin-left: 15px;
}

.margin-right3 {
    margin-right: 3px;
}

.margin-right5 {
    margin-right: 5px;
}

.margin-right5 {
    margin-right: 5px;
}

.margin-right10 {
    margin-right: 10px;
}

.margin-right15 {
    margin-right: 15px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-top5 {
    padding-top: 5px;
}

.padding-top10{
    padding-top:10px;
}

.padding-bottom5 {
    padding-bottom: 5px;
}

.padding-bottom10 {
    padding-bottom: 10px;
}

.padding-left5 {
    padding-left: 5px;
}

.padding-left10 {
    padding-left: 10px;
}
.padding-left15 {
    padding-left: 15px;
}

.padding-right5 {
    padding-right: 5px;
}

.padding-right15 {
    padding-right: 15px;
}

.padding-3 {
    padding: 3px;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.radius3 {
    border-radius: 3px;
}

.radius5{
    border-radius:5px;
}

.deleted {
    text-decoration: line-through;
}

/*footer Module background: #f1eeee;*/ 
#footer { padding-top: 10px; padding-bottom: 10px; background: #f1eeee46; border-top:3px solid #ed1b23;} 
#footer ul { list-style: none; padding: 0; margin: 0;}
#footer ul > li { overflow:hidden; margin-bottom:3px;}
#footer ul > li.copyright{ border-bottom:1px solid #4d4d4d; padding-bottom:10px;}

/* 圖片斷鏈處理 START */  

/* 隐藏失效图片 */
img.broken-image {
    display: none;
}

/* 可选：如果需要显示自定义占位符而不是完全隐藏 */
img.broken-image {
    visibility: hidden;
    position: relative;
} 

img.broken-image::before {
    content: 'Image cannot be loaded';
    visibility: visible;
    display: block;
    width: 600px;
    height: 300px;
    background: #f1f1f1;
    border: 1px dashed #ccc;
    text-align: center;
    line-height: 300px;
    color: #999;
} 
/* 圖片斷鏈處理 END */

/* ===== 全局分隔線樣式  from Featur b-example-divider 的樣式 ===== */
.b-feature-divider {
    width: 100%;
    height: 3rem;
    /* 主背景色 - 更浅的灰色 */
    background-color: rgba(0, 0, 0, 0.05);
    /* 边框颜色 - 更浅的灰色边框 */
    border: solid rgba(0, 0, 0, 0.08);
    border-width: 1px 0;
    /* 阴影效果 - 更浅的阴影 */
    box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.05), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.08);
}

/* ===== Chrome 移動端滾動修復 ===== */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Chrome/Edge/Safari 專用修復 */
    html {
        overflow-y: auto; /* 允許 html 滾動作為備份 */
        -webkit-overflow-scrolling: touch;
    }

    body {
        /* 確保 body 可以滾動 */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* iPhone Chrome 特定修復 */
@supports (-webkit-touch-callout: none) {
    /* 檢測 iOS 設備 */
    body {
        /* 確保最小高度足夠 */
        min-height: -webkit-fill-available !important;
    }

    html, body {
        /* 在 iOS 上使用更可靠的滾動方式 */
        height: auto !important;
        min-height: 100vh !important;
    }
}

/* ===== V53 前台作用域（Phase 1） ===== */
body.front-v53 {
    --front-v53-header-height: 53px;
}

/* 全域: 短頁面時 header 與 footer 不會相連 (min-height:100% 的父層 <main> 無明確高度無法撐開, 改用視窗高度減 header) */
body.front-v53 #mainbody {
    padding-top: var(--front-v53-header-height);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
    min-height: calc(100vh - var(--front-v53-header-height));
}

body.front-v53 #footer {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f1eeee46;
    border-top: 3px solid #ed1b23;
}

/* BS5 legacy class restore (views still using .text-left / .left) */
.text-left { text-align: left; }
.left { text-align: left; }