:root {
    --primary: #c93426;
    --mobile-nav-h: 74px;
}

/* Header 背景 */
#header .header-body {
    background: #eeeae5;
}

/* 桌機主選單字級 */
@media (min-width: 992px) {
    #header .header-nav-main nav > ul > li > a {
        font-size: 16px;
    }

    #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
        font-size: 1em;
        padding: 10px 18px;
    }

    #header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
        padding: 0 .5rem;
    }
}

/* 手機主選單字級 */
@media (max-width: 991.98px) {
    #header .header-nav-main nav > ul li a {
        font-size: 16px;
    }

    /* 讓內容不被底部 nav 蓋住 */
    body {
        padding-bottom: var(--mobile-nav-h);
    }
}

#header .header-nav-features .header-nav-top-icon,
#header .header-nav-features .header-nav-top-icon-img {
    font-size: 1.2rem;
}

#header .header-nav-features .header-nav-features-cart .cart-info .cart-qty {
    top: -12px;
    right: -10px;
    width: 18px;
    height: 18px;
    font-size: 9px;
    line-height: 17px;
}

#mainNav .home-hover:hover {
    background-color: #efe5d8;
}

/* ========= 手機版 / 平板版 header 修正 ========= */
@media (max-width: 991.98px) {
    /* 漢堡按鈕維持可見 */
    #header .header-btn-collapse-nav {
        outline: 0;
        display: block;
        position: relative;
        z-index: 1001;
    }

    /* 手機版：主選單項目正常顯示，不要全部隱藏 */
    #mainNav > li {
        display: block !important;
        width: 100%;
    }

    /* 手機版：中間 logo 隱藏 */
    #mainNav > li.header-logo-li {
        display: none !important;
    }

    /* 避免 sticky/shrink/fixed header 把展開的選單裁掉 */
    #header .header-body,
    #header .header-container,
    #header .header-row,
    #header .header-column,
    #header .header-nav,
    #header .header-nav-main,
    #header .header-nav-main nav {
        overflow: visible !important;
    }

    /* 手機折疊選單展開時，容器高度交給內容撐開 */
    #header .header-nav-main nav.show,
    #header .header-nav-main nav.collapsing {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 手機版下拉項目維持直式排列 */
    #header .header-nav-main nav > ul {
        width: 100%;
    }

    #header .header-nav-main nav > ul > li {
        float: none;
    }

    /* 浮球在手機版先隱藏 */
    .chat-fab, .assistant-fab, .ai-fab,
    .mascot-fab, .mascot-widget {
        display: none !important;
    }
}

@media (max-width: 1199.98px) {
    /* 底部 mobile nav */
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 74px;
        background: #fff;
        border-top: 1px solid #eee;
        z-index: 99;
        align-items: center;
    }

    .mobile-bottom-nav .nav-item {
        flex: 1;
        text-align: center;
        text-decoration: none;
        color: #d60000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6px 0;
    }

    .mobile-bottom-nav .nav-item i {
        display: block;
        font-size: 18px;
        margin-bottom: 3px;
    }

    .mobile-bottom-nav .nav-item span {
        font-size: 16px;
        margin-top: 7px;
        line-height: 1.1;
    }
}

.mobile-bottom-nav .nav-item:not(:last-child) {
    border-right: 1px solid #ebebeb;
}

/* ========= 桌機版 header 修正 ========= */
@media (min-width: 1200px) {
    /* 桌機版：中間 logo 顯示 */
    #mainNav > li.header-logo-li {
        display: flex !important;
        align-items: center;
    }

    /* 其他選單交給原本 theme 排版，不強制全部改 flex */
    #mainNav > li:not(.header-logo-li) {
        display: flex;
        align-items: center;
    }

    .fs-7 {
        font-size: 1.5rem !important;
    }
    .fs-8 {
        font-size: 1.875rem !important;
    }
    .fs-9 {
        font-size: 2.25rem !important;
    }
    .fs-10 {
        font-size: 2.5rem !important;
    }
    .fs-11 {
        font-size: 2.8125rem !important;
    }
    .fs-12 {
        font-size: 3rem !important;
    }
    .fs-13 {
        font-size: 3.4375rem !important;
    }
}

/* 文字尺寸 */
.text-1 {
    font-size: 0.9rem !important;
}

.text-2 {
    font-size: 1em !important;
}

.text-3 {
    font-size: 1.1em !important;
}

.fs-1 {
    font-size: 0.625rem !important;
}

.fs-2 {
    font-size: 0.75rem !important;
}

.fs-3 {
    font-size: 0.875rem !important;
}

.fs-4 {
    font-size: 1rem !important;
}

.fs-5 {
    font-size: 1.125rem !important;
}

.fs-6 {
    font-size: 1.25rem !important;
}

.fs-7 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-8 {
    font-size: calc(1.3125rem + 0.75vw) !important;
}

.fs-9 {
    font-size: calc(1.35rem + 1.2vw) !important;
}

.fs-10 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-11 {
    font-size: calc(1.40625rem + 1.875vw) !important;
}

.fs-12 {
    font-size: calc(1.425rem + 2.1vw) !important;
}

.fs-13 {
    font-size: calc(1.46875rem + 2.625vw) !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.fw-bolder {
    font-weight: 700 !important;
}

/* 其他原本樣式 */
#footer a:not(.btn):not(.no-footer-css) {
    color: white;
    transition: 0.1s ease-in-out;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.float-right {
    float: right !important;
}

.text-color-secondary,
.text-secondary {
    color: #8d8d8d !important;
}

.text-color-white {
    color: #fff !important;
}

.text-muted {
    color: #575757 !important;
    font-size: 16px;
}

.invalid-feedback {
    font-size: 0.9rem;
}

.btn {
    font-size: 0.85rem;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745 #28a745 #1e7e34;
    color: #FFF;
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8 #17a2b8 #117a8b;
    color: #FFF;
}

.btn-outline.btn-success {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
    padding: 3px 6px !important;
}

.btn-outline.btn-success:hover,
.btn-outline.btn-success.hover {
    font-size: 1.2rem;
    color: #FFF;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-primary:hover,
.btn-primary.hover {
    background-color: #FF3A29;
    border-color: #FF3A29 #FF3A29 #FF3A29;
    color: #FFF;
}

.btn-primary:hover:not(.bg-transparent),
.btn-primary.hover:not(.bg-transparent) {
    background-color: #FF3A29;
}

.btn-primary:active:not(.bg-transparent),
.btn-primary.active:not(.bg-transparent) {
    background-color: #c93426 !important;
}

.btn-primary:focus:not(.bg-transparent),
.btn-primary.focus:not(.bg-transparent) {
    background-color: #c93426 !important;
}

.btn-primary:active,
.btn-primary.active {
    border-color: #c93426 !important;
}

.btn-primary:focus,
.btn-primary.focus {
    border-color: #c93426 !important;
}

.btn:focus-visible {
    background-color: #c93426 !important;
    border-color: #c93426 !important;
}

.primary.active {
    border-color: #c93426 !important;
}

a:focus {
    color: #dc3445;
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}

.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.close:hover {
    color: #000;
    text-decoration: none;
}

.img-thumbnail.img-thumbnail-hover-icon:before {
    background: rgba(0, 0, 0, 0);
}

.img-thumbnail.img-thumbnail-hover-icon:after {
    transition: all 0.4s;
    color: #eee;
    font-size: 34px;
}

.featured-box {
    text-align: left;
}

.featured-box .box-content:not(.box-content-border-0) {
    top: -1px;
    border-top-width: 1px;
}

.featured-box-primary .box-content {
    border-top-color: #ececec;
}

.table > :not(caption) > * > * {
    background-color: transparent;
}

.table td,
.table th {
    border-color: rgba(0, 0, 0, 0.2);
}

.shop .actions-continue {
    float: right;
}

.toast {
    opacity: 0.95 !important;
}

#toast-container.toast-bottom-center > div {
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .15);
}

#toast-container {
    z-index: 1060;
}

@media (max-width: 991px) {
    #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
        color: #d30000 !important;
    }
}

.bg-warning {
    background-color: rgba(240, 180, 0, 1)!important;
}

@media (min-width: 992px) and (min-width: 1200px) {
    #header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
        padding: 0 .6rem;
    }
}

.home-hero {
    position: relative;
    overflow: hidden;
    background-color: #eeeae5;
}

.home-hero__item {
    position: relative;
    height: clamp(420px, 40vw, 760px);
    overflow: hidden;
}

.home-hero__item picture {
    position: absolute;
    inset: 0;
}

.home-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.28);
}

.home-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 40px 20px;
    color: #fff;
    text-align: center;
}

.home-hero__title {
    margin-bottom: 16px;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
}

.home-hero__subtitle {
    max-width: 760px;
    margin: 0 auto 24px;
    color: #fff;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    line-height: 1.7;
    white-space: pre-line;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.home-hero__button {
    min-width: 150px;
    padding: 12px 28px;
}

.home-hero .owl-nav button.owl-prev,
.home-hero .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-50%);
}

.home-hero .owl-nav button.owl-prev {
    left: 24px;
}

.home-hero .owl-nav button.owl-next {
    right: 24px;
}

.home-hero .owl-dots {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 3;
}

@media (max-width: 767.98px) {
    .home-hero__item {
        height: 520px;
    }

    .home-hero__content {
        padding: 40px 24px;
    }

    .home-hero .owl-nav {
        display: none;
    }

    .home-hero__subtitle {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}