/**
 * Toni Car 前台覆寫樣式
 * 載入於 styles.css 之後，確保蓋過模版預設與 sticky 狀態
 */

/* 品牌色變數（header 用） */
:root {
    --toni-header-bg: #c10030;
}

/*
 * iOS Safari：頂部 overscroll／狀態列若 html 是白，會露出白邊。
 * html 用品牌紅，body 維持白底承載內容。
 */
html {
    background-color: var(--toni-header-bg);
}

body {
    background-color: #ffffff;
}

/* header-inner_wrap 品牌色 */
.tf-header .header-inner_wrap,
header.tf-header .header-inner_wrap,
header.header-sticky .header-inner_wrap,
header.header-sticky.has-by-category:not(.header-s8) .header-inner_wrap,
header.header-sticky.has-by-category.header-s6 .header-inner_wrap {
    background: var(--toni-header-bg) !important;
    background-color: var(--toni-header-bg) !important;
}

/*
 * 手機（≤1199px）：整條 header 必須同色
 * + iPhone Safari：safe-area、sticky 縫、rubber-band 白邊
 */
@media (max-width: 1199px) {
    /* 狀態列／瀏海區域固定色塊（Safari 專用補強） */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10001;
        height: env(safe-area-inset-top, 0px);
        background-color: var(--toni-header-bg);
        pointer-events: none;
        /* 強制 Safari 合成層，避免滾動時閃白 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    header.tf-header,
    header.tf-header.header-s6,
    header.tf-header.has-by-category,
    header.tf-header.header-s6.has-by-category,
    header.tf-header.header-sticky,
    header.tf-header.header-sticky:not(.header-s5):not(.header-abs),
    header.header-sticky.tf-header:not(.header-s5, .header-abs),
    header.header-sticky.has-by-category.header-s6 {
        background: var(--toni-header-bg) !important;
        background-color: var(--toni-header-bg) !important;
        /* 模版 padding 改為含 safe-area，避免 padding 區透明透白 */
        padding-top: max(15px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 15px !important;
        /* 向上延伸紅底，蓋住 sticky 縫 / 1px 白線（Safari 常見） */
        box-shadow: 0 -80px 0 80px var(--toni-header-bg) !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    /* 模版在 ≥1200 才清掉 has-by-category sticky 白底；手機強制覆蓋 */
    header.header-sticky:not(.header-s5):not(.header-abs),
    header.header-sticky:not(.header-s5, .header-abs) {
        background: var(--toni-header-bg) !important;
        background-color: var(--toni-header-bg) !important;
    }

    .tf-header .header-inner_wrap,
    .tf-header .header-inner,
    .tf-header .header-inner > .container,
    .tf-header .header-inner_wrap > .container {
        background: var(--toni-header-bg) !important;
        background-color: var(--toni-header-bg) !important;
    }

    /* 向上延伸：絕對定位偽元素（Safari 不吃 box-shadow 時備援） */
    header.tf-header {
        position: -webkit-sticky;
        position: sticky;
        overflow: visible;
    }

    header.tf-header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(-1 * env(safe-area-inset-top, 0px) - 40px);
        height: calc(env(safe-area-inset-top, 0px) + 40px);
        background-color: var(--toni-header-bg);
        z-index: -1;
        pointer-events: none;
    }

    /* 模版 br-line 分隔線，避免在紅底上顯白線 */
    .tf-header > .br-line,
    .tf-header .header-inner_wrap .br-line {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* main 頂部若透白也對齊（header 在 #wrapper 內） */
    main#wrapper {
        background-color: transparent;
    }
}

/* --------------------------------------------------------------------------
 * .header-inner：文字 / 連結 / Icon 全白（僅頂部列，不含下拉選單）
 * 使用 :not() 排除 .sub-menu / .mega-menu / .dropdown-menu，避免
 * hover 時 .cus-text 被強制白字（白底白字）
 * -------------------------------------------------------------------------- */

/* 頂部列本體與直接可見元素 */
.tf-header .header-inner {
    color: #ffffff;
}

/* Logo：保持原 SVG 色彩（勿 filter 整圖轉白） */

/* 頂部列連結（不含下拉內連結） */
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a),
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a):link,
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a):visited,
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a):hover,
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a):focus,
.tf-header .header-inner a:not(.sub-menu a):not(.mega-menu a):not(.dropdown-menu a):active {
    color: #ffffff !important;
}

/* 頂部列：item-link / nav-icon / 開選單按鈕（僅直接列上的） */
.tf-header .header-inner > .header-left .item-link,
.tf-header .header-inner > .header-left .item-link .text,
.tf-header .header-inner > .header-left .item-link .cus-text,
.tf-header .header-inner > .header-left .item-link .icon,
.tf-header .header-inner > .header-left .item-link:hover,
.tf-header .header-inner > .header-left .item-link:hover .text,
.tf-header .header-inner > .header-left .item-link:hover .cus-text,
.tf-header .header-inner > .header-left .item-link:hover .icon,
.tf-header .header-inner > .header-left .item-link:focus,
.tf-header .header-inner > .header-left .item-link:focus .text,
.tf-header .header-inner > .header-left .item-link:focus .cus-text,
.tf-header .header-inner > .header-left .item-link:focus .icon,
.tf-header .header-inner > .header-right .nav-icon-item,
.tf-header .header-inner > .header-right .nav-icon-item span,
.tf-header .header-inner > .header-right .nav-icon-item:hover,
.tf-header .header-inner > .header-right .nav-icon-item:hover span,
.tf-header .header-inner > .header-right .nav-icon-item:focus,
.tf-header .header-inner > .header-right .nav-icon-item:focus span,
.tf-header .header-inner .btn-open-menu,
.tf-header .header-inner .btn-open-menu .icon,
.tf-header .header-inner .btn-open-header-bottom,
.tf-header .header-inner .btn-open-header-bottom .icon,
.tf-header .header-inner > .box-open-menu-mobile a,
.tf-header .header-inner > .box-open-menu-mobile a .icon,
.tf-header .header-inner > .box-open-menu-mobile a:hover,
.tf-header .header-inner > .box-open-menu-mobile a:hover .icon {
    color: #ffffff !important;
}

.tf-header .header-inner > .header-left .item-link .icon::before,
.tf-header .header-inner > .header-left .item-link:hover .icon::before,
.tf-header .header-inner .btn-open-menu .icon::before,
.tf-header .header-inner .btn-open-header-bottom .icon::before,
.tf-header .header-inner > .box-open-menu-mobile .icon::before {
    color: #ffffff !important;
}

/* 下拉／mega menu：強制深色文字，覆蓋任何 header 白字規則 */
.tf-header .header-inner .sub-menu,
.tf-header .header-inner .sub-menu *,
.tf-header .header-inner .mega-menu,
.tf-header .header-inner .mega-menu *,
.tf-header .header-inner .dropdown-menu,
.tf-header .header-inner .dropdown-menu * {
    color: var(--text, #101010) !important;
}

.tf-header .header-inner .sub-menu a:hover,
.tf-header .header-inner .sub-menu a:hover .cus-text,
.tf-header .header-inner .sub-menu a:hover .text,
.tf-header .header-inner .sub-menu a:focus,
.tf-header .header-inner .sub-menu a:focus .cus-text,
.tf-header .header-inner .sub-menu a:focus .text,
.tf-header .header-inner .mega-menu a:hover,
.tf-header .header-inner .mega-menu a:hover .cus-text,
.tf-header .header-inner .mega-menu a:hover .text,
.tf-header .header-inner .mega-menu a:focus,
.tf-header .header-inner .mega-menu a:focus .cus-text,
.tf-header .header-inner .mega-menu a:focus .text,
.tf-header .header-inner .dropdown-menu a:hover,
.tf-header .header-inner .dropdown-menu a:hover .cus-text,
.tf-header .header-inner .dropdown-menu a:focus,
.tf-header .header-inner .dropdown-menu a:focus .cus-text {
    color: var(--primary, #c10030) !important;
}

.themesFlat {padding-bottom: 25px;}

@media (max-width: 1199px) {
    .home-cate-block {
        padding-top: 20px;
    }
}

/* 手機選單：搜尋在 footer 底部（桌機搜尋在 .header-bottom_wrap） */
#mobileMenu .canvas-footer {
    display: block;
    padding: 12px 16px 16px;
    border-top: 1px solid #eee;
}
#mobileMenu .canvas-footer .form_search-product {
    margin: 0;
    width: 100%;
}
#mobileMenu .sub-nav-menu {
    list-style: none;
    padding: 4px 0 8px 12px;
    margin: 0;
}
#mobileMenu .sub-nav-menu .sub-nav-link {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text, #101010);
}
#mobileMenu .mb-menu-link.has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/*
 * 桌機 ≥1200：確認搜尋列在 header 內顯示，toolbar / 開 mobile 鈕僅手機。
 * （結構上已用 d-xl-*；此處補強避免被其他樣式蓋掉）
 */
@media (min-width: 1200px) {
    .tf-header .header-bottom_wrap {
        display: block !important;
    }
    .tf-toolbar-bottom {
        display: none !important;
    }
    .tf-header .box-open-menu-mobile {
        display: none !important;
    }
    /* 對齊 styles.css：未 sticky 時不顯示收合鈕（勿被 Bootstrap d-xl-block 類蓋掉） */
    .tf-header.has-by-category:not(.header-sticky) .box-open-header-bottom {
        display: none !important;
    }
}

/* 商品 CTA 價：窄螢幕允許換行，避免被擠掉 */
.tf-product-info-wrap .btn-action-price {
    white-space: normal;
    line-height: 1.35;
}
.tf-product-info-wrap .price-add,
.tf-product-info-wrap .price-deposit-note {
    display: inline;
}

/* 靜態頁（about / shipping / terms） */
.page-static .page-static__title {
    margin-bottom: 1.75rem;
}

.page-static .page-static__body {
    max-width: 46rem;
    margin: 0 auto;
    line-height: 1.75;
}

.page-static .page-static__body p {
    margin: 0 0 0.9rem;
}

.page-static .page-static__body h6 {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1a1a;
}

.page-static .page-static__body h6:first-child {
    margin-top: 0;
}

/* 條款／派送／介紹：章節條、圓點列表、巢狀縮進 */
.page-static--terms .page-static__body h6,
.page-static--shipping .page-static__body h6,
.page-static--about .page-static__body h6 {
    padding-left: 0.75rem;
    border-left: 3px solid var(--toni-header-bg);
}

.page-static--terms .page-static__body ul,
.page-static--shipping .page-static__body ul,
.page-static--about .page-static__body ul {
    list-style-type: disc !important;
    list-style-position: outside;
    margin: 0.4rem 0 1rem;
    padding-left: 1.5rem;
}

.page-static--terms .page-static__body li,
.page-static--shipping .page-static__body li,
.page-static--about .page-static__body li {
    list-style-type: disc !important;
    display: list-item;
    margin: 0.35rem 0;
}

.page-static--terms .page-static__body li > ul,
.page-static--shipping .page-static__body li > ul,
.page-static--about .page-static__body li > ul {
    margin: 0.35rem 0 0.45rem;
    padding-left: 1.5rem;
}

@media (max-width: 767.98px) {
    .page-static .page-static__body {
        line-height: 1.7;
    }

    .page-static--terms .page-static__body ul,
    .page-static--terms .page-static__body li > ul,
    .page-static--shipping .page-static__body ul,
    .page-static--shipping .page-static__body li > ul,
    .page-static--about .page-static__body ul,
    .page-static--about .page-static__body li > ul {
        padding-left: 1.25rem;
    }
}

.page-static--opening-hour .page-static__body {
    max-width: 40rem;
}

.page-static--opening-hour .opening-hour-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: #1a1a1a;
}

.page-static--opening-hour .opening-hour-table th,
.page-static--opening-hour .opening-hour-table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #ececec;
    text-align: left;
}

.page-static--opening-hour .opening-hour-table thead th {
    width: 50%;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    background: #fafafa;
}

.page-static--opening-hour .opening-hour-table thead th span {
    display: inline-block;
    margin-top: 0.15rem;
    font-weight: 400;
    font-size: 0.82em;
    color: #888;
}

.page-static--opening-hour .opening-hour-table tbody tr:last-child td {
    border-bottom: 0;
}

.page-static--opening-hour .opening-hour-en {
    display: block;
    margin-top: 0.15rem;
    color: #888;
    font-size: 0.92em;
}

.page-static--opening-hour .opening-hour-table td.opening-hour-highlight {
    color: var(--toni-header-bg) !important;
    font-weight: 600;
}

/* Mini-cart: wrap full product name; show type / lead-time badges */
.tf-mini-cart-item {
    align-items: flex-start;
}
.tf-mini-cart-item .tf-mini-cart-info .name {
    display: block;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
    -webkit-line-clamp: unset;
}
.tf-mini-cart-item .order-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.tf-mini-cart-item .order-item-badge {
    font-size: 11px;
    padding: 1px 6px;
}

/* Language switcher (Sample .tf-languages) */
.toni-locale-form {
    margin: 0;
}
.header-right .tf-languages,
.canvas-footer .tf-languages {
    min-width: 7.5rem;
}
.header-right .tf-list.list-currenci {
    align-items: center;
}
.canvas-footer .tf-languages .bootstrap-select,
.header-right .tf-languages .bootstrap-select {
    width: auto !important;
}

/* 桌機 header 語系選擇：蓋過 .btn-light / 模版 var(--black) */
.tf-header .header-right .tf-languages .btn,
.tf-header .header-right .tf-languages .btn-light,
.tf-header .header-right .tf-languages .dropdown-toggle,
.tf-header .header-right .tf-languages .tf-dropdown-select.style-default > .dropdown-toggle,
.tf-header .header-right .tf-languages .filter-option,
.tf-header .header-right .tf-languages .filter-option-inner,
.tf-header .header-right .tf-languages .filter-option-inner-inner {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: transparent;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.tf-header .header-right .tf-languages .dropdown-toggle::after,
.tf-header .header-right .tf-languages .tf-dropdown-select.style-default > .dropdown-toggle::after {
    color: #ffffff !important;
}

.toni-related-products {
    padding-top: 50px !important;
}

/* Product detail: admin edit shortcut */
.product-infor-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.product-admin-edit {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.3;
}

/* Cart / checkout thumbs: same crop as mini-cart */
.tf-cart_item .img-prd,
.tf-cart_item .tf-mini-cart-image,
.list-order-product .img-prd,
.list-order-product .tf-mini-cart-image {
    display: block;
    max-width: 100px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.tf-cart_item .img-prd img,
.tf-cart_item .tf-mini-cart-image img,
.list-order-product .img-prd img,
.list-order-product .tf-mini-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 0.7518796992;
    display: block;
}

.toni-variant-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.toni-variant-option {
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #212529;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    display: inline-block;
}
.toni-variant-option.is-active {
    border-color: #c10030;
    color: #c10030;
    font-weight: 600;
}
.product-thumbs-slider .tf-product-media-main a.item {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.product-thumbs-slider .tf-product-media-main a.item img.tf-image-zoom {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    pointer-events: none;
}
/*
 * 放大框要蓋住整欄商品資料。
 * 模版把 .tf-zoom-main 做成 0 高度的 sticky，放大層用 absolute 溢出去；
 * 溢出去的層會被後面的名稱／售價／按鈕蓋住。白底 JPG 就只剩資料變灰，
 * 深色 WebP 還看得到放大圖。
 */
.section-image-zoom .tf-product-info-wrap {
    position: relative;
}
.section-image-zoom .tf-zoom-main {
    /* styles.css 的 .sticky-top 用了 position: sticky !important */
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: auto;
    height: auto;
    pointer-events: none;
}
@keyframes toni-drift-pane {
    from { opacity: 1; }
    to { opacity: 1; }
}
.section-image-zoom .tf-zoom-main .drift-zoom-pane,
.section-image-zoom .tf-zoom-main .drift-zoom-pane.drift-opening,
.section-image-zoom .tf-zoom-main .drift-zoom-pane.drift-open,
.section-image-zoom .tf-zoom-main .drift-zoom-pane.drift-closing {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    opacity: 1 !important;
    transform: none !important;
    z-index: 40;
}
/* 保留極短動畫，Drift 才收得到 animationend，滑鼠移開才會收起放大框。 */
.section-image-zoom .tf-zoom-main .drift-zoom-pane.drift-opening,
.section-image-zoom .tf-zoom-main .drift-zoom-pane.drift-closing {
    animation: toni-drift-pane 1ms linear !important;
}

/* 點圖放大層。contain:size 會讓部分瀏覽器不畫出 JPEG。 */
.pswp {
    position: fixed !important;
    inset: 0;
    z-index: 200000 !important;
    contain: none !important;
    will-change: auto;
}
.pswp--open {
    display: block !important;
}
.pswp--one-slide .pswp__counter {
    display: block !important;
}
.pswp .pswp__img {
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    image-orientation: from-image;
}

.toni-variant-option.is-soldout {
    opacity: 0.55;
}

.product-page-banner {
    padding-top: 12px;
}
.product-page-banner__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    border-radius: 8px;
}