.elementor-kit-3656{--e-global-color-primary:#2C3E2D;--e-global-color-secondary:#FFF8F0;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FD5E0900;--e-global-color-67d10d1:#FD5E09;--e-global-color-3602060:#C2B280;--e-global-typography-primary-font-family:"Work Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Work Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Work Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Work Sans";--e-global-typography-accent-font-weight:500;font-family:"Noto Sans";letter-spacing:0.05em;overscroll-behavior:none;}.elementor-kit-3656 button,.elementor-kit-3656 input[type="button"],.elementor-kit-3656 input[type="submit"],.elementor-kit-3656 .elementor-button{color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#02010100;border-radius:999px 999px 999px 999px;padding:0px 0px 0px 0px;}.elementor-kit-3656 input:not([type="button"]):not([type="submit"]),.elementor-kit-3656 textarea,.elementor-kit-3656 .elementor-field-textual{border-style:solid;border-width:1px 1px 1px 1px;border-radius:999px 999px 999px 999px;padding:10px 10px 10px 10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;gap:0px;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS *//* ==========================================================
   FL 完整整理版
   Fixed Header + Series Showcase

   重要：
   1. 請用本版本取代舊有系列展示CSS。
   2. 不要再保留舊的三產品重疊版本。
   3. 不要保留舊的箭咀顯示／隱藏修正。
========================================================== */


/* ==========================================================
   01. Fixed Header
========================================================== */

:root {
    /*
     * JavaScript會將此數值更新為
     * Header底部距離viewport頂部的實際位置。
     */
    --fl-header-bottom: 0px;
    --fl-header-anchor-gap: 16px;
    --fl-header-z-index: 1100;
}

.fl-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    z-index: var(--fl-header-z-index);
}

/*
 * Target JetThemeCore Header與Footer中間的Elementor內容。
 */
body.fl-header-layout--offset:not(.elementor-editor-active)
#jet-theme-core-document
> .jet-theme-core-document__inner
> div[data-elementor-type] {
    padding-block-start: var(--fl-header-bottom);
}

/*
 * Anchor跳轉時避免內容被Fixed Header遮擋。
 */
html {
    scroll-padding-block-start:
        calc(
            var(--fl-header-bottom)
            + var(--fl-header-anchor-gap)
        );
}


/* ==========================================================
   02. Series Showcase：主要尺寸設定

   桌面版主要調整位置：
   --series-image-width      主商品闊度
   --series-image-height     主商品高度
   --series-thumb-width      小商品闊度
   --series-thumb-height     小商品高度
   --series-product-gap      商品之間距離
   --series-image-x          商品區水平位置
   --series-step             三個系列垂直距離
   --series-layout-gap       左右兩部分距離
========================================================== */

.series-showcase {
    /* 左邊文案 */
    --series-copy-width: 500px;
    --series-layout-gap: 80px;

    /* 系列名稱 */
    --series-label-top: 172px;
    --series-step: 165px;
    --series-row-height: 36px;
    --series-filter-width: 170px;

    /* 主商品 */
    --series-image-x: 185px;
    --series-image-width: 400px;
    --series-image-height: 400px;

    /* 小商品 */
    --series-thumb-width: 118px;
    --series-thumb-height: 158px;
    --series-product-gap: 0px;

    /* 整個商品列闊度 */
    --series-gallery-width: 560px;

    /* 舞台額外安全空間 */
    --series-stage-extra: 20px;

    /* 箭咀 */
    --series-arrow-width: 96px;
    --series-arrow-left: -10px;
    --series-arrow-top: 60%;

    /*
     * 手機橫向滑動時使用。
     * 桌面和平板不需要預留。
     */
    --series-scroll-reserve: 0px;

    /* 顏色 */
    --classic-color: #314a36;
    --selected-color: #c4978d;
    --rare-color: #b78625;
    --inactive-color: #a6a6a6;

    /* 動畫 */
    --series-move-duration: 580ms;
    --series-product-duration: 420ms;
    --series-color-duration: 360ms;
    --series-ease: cubic-bezier(.22, .61, .36, 1);

    /* 非主商品透明度 */
    --series-inactive-opacity: 0.72;

    /*
     * 目前系列的垂直位置。
     * 使用0.01px保持合成圖層，改善返回第一系列時的卡頓。
     */
    --series-offset-y: 0.01px;

    /* 自動計算舞台尺寸 */
    --series-stage-width:
        calc(
            var(--series-image-x)
            + var(--series-gallery-width)
            + var(--series-stage-extra)
        );

    --series-stage-height:
        calc(
            var(--series-image-height)
            + var(--series-step)
            + var(--series-step)
            + var(--series-stage-extra)
        );

    position: relative;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;

    gap: var(--series-layout-gap) !important;

    width: 100%;
    max-width: 1420px;
    height: auto !important;
    min-height: var(--series-stage-height) !important;

    margin-right: auto;
    margin-left: auto;

    padding: 0 20px 30px;

    overflow: visible !important;
    box-sizing: border-box;
    isolation: isolate;
}

/* Elementor Boxed Container */
.series-showcase > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;

    gap: var(--series-layout-gap) !important;

    width: 100%;
    max-width: 100% !important;
    min-height: var(--series-stage-height) !important;

    overflow: visible !important;
    box-sizing: border-box;
}


/* ==========================================================
   03. 三個系列狀態

   商品舞台只使用同一個transform。
   不再為三個系列分別重複寫transform規則。
========================================================== */

.series-showcase.is-series-1 {
    --series-offset-y: 0.01px;
    --series-current-color: var(--classic-color);
}

.series-showcase.is-series-2 {
    --series-offset-y: var(--series-step);
    --series-current-color: var(--selected-color);
}

.series-showcase.is-series-3 {
    --series-offset-y:
        calc(
            var(--series-step)
            + var(--series-step)
        );

    --series-current-color: var(--rare-color);
}


/* ==========================================================
   04. 左邊介紹文字
========================================================== */

.series-copy {
    --min-height: 0px;

    flex: 0 1 var(--series-copy-width) !important;

    width: var(--series-copy-width);
    max-width: var(--series-copy-width);
    min-width: 0;
    min-height: 0 !important;

    margin: 0 !important;
    padding-block-start: var(--series-label-top) !important;
}

.series-accent,
.series-accent * {
    color: var(
        --series-current-color,
        var(--classic-color)
    ) !important;

    transition:
        color
        var(--series-color-duration)
        ease !important;
}


/* ==========================================================
   05. 右邊舞台
========================================================== */

.series-stage {
    --min-height: var(--series-stage-height);

    position: relative !important;

    flex: 0 0 var(--series-stage-width) !important;

    width: var(--series-stage-width) !important;
    max-width: none !important;
    height: var(--series-stage-height) !important;
    min-height: var(--series-stage-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;

    /*
     * 保持商品移動在獨立合成圖層。
     */
    transform: translateZ(0);
    perspective: 1000px;
}


/* ==========================================================
   06. 系列名稱／篩選器
========================================================== */

.series-filter {
    position: absolute !important;

    top: 0;
    bottom: 0;
    left: 0;

    display: block !important;

    width: var(--series-filter-width) !important;
    max-width: var(--series-filter-width) !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    /*
     * Filter本身不阻擋商品操作，
     * 只有Heading可以點擊。
     */
    pointer-events: none;
    z-index: 10;
}

.series-filter > .e-con-inner {
    position: static !important;

    display: block !important;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

.series-trigger {
    position: absolute !important;
    left: 0;

    width: max-content !important;
    max-width: var(--series-filter-width) !important;
    min-height: var(--series-row-height);

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    pointer-events: auto;

    z-index: 2;
}

.series-trigger .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.series-trigger .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--inactive-color) !important;
    opacity: 0.48;

    font-size: 28px;
    font-weight: 700;
    line-height: var(--series-row-height);
    letter-spacing: 0.08em;

    white-space: nowrap;
    word-break: keep-all;

    transform:
        translate3d(0, 0, 0)
        scale(0.975);

    transform-origin: left center;

    transition:
        color
        var(--series-color-duration)
        ease,

        opacity
        var(--series-color-duration)
        ease,

        transform
        460ms
        var(--series-ease) !important;
}

/* 三個系列名稱位置 */
.series-option-1 {
    top: var(--series-label-top) !important;
}

.series-option-2 {
    top:
        calc(
            var(--series-label-top)
            + var(--series-step)
        ) !important;
}

.series-option-3 {
    top:
        calc(
            var(--series-label-top)
            + var(--series-step)
            + var(--series-step)
        ) !important;
}

/* Active及Hover效果 */
.series-trigger:hover .elementor-heading-title,
.series-trigger:focus-visible .elementor-heading-title,

.series-showcase.is-series-1
.series-option-1 .elementor-heading-title,

.series-showcase.is-series-2
.series-option-2 .elementor-heading-title,

.series-showcase.is-series-3
.series-option-3 .elementor-heading-title {
    opacity: 1;

    transform:
        translate3d(8px, 0, 0)
        scale(1);
}

/* 經典系列 */
.series-option-1:hover .elementor-heading-title,
.series-option-1:focus-visible .elementor-heading-title,
.series-showcase.is-series-1
.series-option-1 .elementor-heading-title {
    color: var(--classic-color) !important;
}

/* 精選系列 */
.series-option-2:hover .elementor-heading-title,
.series-option-2:focus-visible .elementor-heading-title,
.series-showcase.is-series-2
.series-option-2 .elementor-heading-title {
    color: var(--selected-color) !important;
}

/* 珍稀系列 */
.series-option-3:hover .elementor-heading-title,
.series-option-3:focus-visible .elementor-heading-title,
.series-showcase.is-series-3
.series-option-3 .elementor-heading-title {
    color: var(--rare-color) !important;
}

/* Keyboard Focus */
.series-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: 3px;
}


/* ==========================================================
   07. 系列名稱初次載入動畫
========================================================== */

@keyframes fl-series-label-enter {
    from {
        opacity: 0;

        transform:
            translate3d(-10px, 10px, 0);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-trigger {
    animation:
        fl-series-label-enter
        460ms
        var(--series-ease)
        both;
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-option-1 {
    animation-delay: 0ms;
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-option-2 {
    animation-delay: 70ms;
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-option-3 {
    animation-delay: 140ms;
}


/* ==========================================================
   08. JavaScript資料欄位
========================================================== */

.series-group-value,
.series-order-value {
    display: none !important;
}


/* ==========================================================
   09. Listing Grid商品舞台

   三個系列只共用這一條transform，
   避免返回第一系列時重新建立動畫。
========================================================== */

.series-product {
    position: absolute !important;

    top: 0;
    left: var(--series-image-x);

    width: var(--series-gallery-width) !important;
    max-width: var(--series-gallery-width) !important;
    height: var(--series-image-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;

    z-index: 5;

    transform:
        translate3d(
            0,
            var(--series-offset-y),
            0
        );

    transform-origin: center top;
    backface-visibility: hidden;

    transition:
        transform
        var(--series-move-duration)
        var(--series-ease) !important;

    will-change: transform;
}

/* JS初始化後，整個商品區柔和出現 */
@keyframes fl-series-gallery-ready {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-product {
    animation:
        fl-series-gallery-ready
        420ms
        ease
        both;
}


/* ==========================================================
   10. Listing Grid基本包裝
========================================================== */

.series-product > .elementor-widget-container,
.series-product .jet-listing-grid {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;
}

.series-product .jet-listing-grid__items {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: var(--series-product-gap) !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;

    /*
     * 商品列尺寸固定，避免商品切換造成整個頁面重排。
     */
    contain: layout style;
}


/* ==========================================================
   11. 所有商品的預設狀態
========================================================== */

.series-product .jet-listing-grid__item {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: none !important;

    flex: 0 0 var(--series-thumb-width) !important;

    width: var(--series-thumb-width) !important;
    max-width: var(--series-thumb-width) !important;
    height: var(--series-thumb-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    overflow: visible !important;
    box-sizing: border-box;

    filter: saturate(0.88);

    transform:
        translate3d(0, 0, 0)
        scale(0.985);

    transform-origin: center;
    z-index: 0 !important;

    transition:
        flex-basis
        var(--series-move-duration)
        var(--series-ease),

        width
        var(--series-move-duration)
        var(--series-ease),

        max-width
        var(--series-move-duration)
        var(--series-ease),

        height
        var(--series-move-duration)
        var(--series-ease),

        opacity
        300ms
        ease,

        filter
        300ms
        ease,

        transform
        420ms
        var(--series-ease) !important;
}


/* ==========================================================
   12. 目前系列內的商品
========================================================== */

.series-product
.jet-listing-grid__item.is-series-visible {
    display: block !important;

    flex: 0 0 var(--series-thumb-width) !important;

    width: var(--series-thumb-width) !important;
    max-width: var(--series-thumb-width) !important;
    height: var(--series-thumb-height) !important;

    opacity: var(--series-inactive-opacity) !important;
    visibility: visible !important;
    pointer-events: auto !important;

    filter: saturate(0.88);

    transform:
        translate3d(0, 0, 0)
        scale(0.985);

    z-index: 1 !important;

    will-change:
        flex-basis,
        width,
        height,
        opacity,
        transform;
}


/* ==========================================================
   13. 目前放大的商品

   同時支援：
   .is-active-product
   .is-active-item
========================================================== */

.series-product
.jet-listing-grid__item.is-series-visible.is-active-product,

.series-product
.jet-listing-grid__item.is-series-visible.is-active-item {
    flex: 0 0 var(--series-image-width) !important;

    width: var(--series-image-width) !important;
    max-width: var(--series-image-width) !important;
    height: var(--series-image-height) !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: none;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    z-index: 3 !important;
}


/* ==========================================================
   14. JavaScript未初始化前的第一商品後備顯示

   只有：
   1. data-series-preload-ready尚未出現；
   2. 尚未有任何is-series-visible；
   才會暫時顯示第一件商品。
========================================================== */

.series-showcase:not(
    [data-series-preload-ready="yes"]
):not(
    :has(.jet-listing-grid__item.is-series-visible)
)
.series-product
.jet-listing-grid__item:first-child,

.elementor-editor-active
.series-showcase
.series-product
.jet-listing-grid__item:first-child {
    display: block !important;

    flex: 0 0 var(--series-image-width) !important;

    width: var(--series-image-width) !important;
    max-width: var(--series-image-width) !important;
    height: var(--series-image-height) !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    filter: none;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    z-index: 2 !important;
}


/* ==========================================================
   15. 商品進場動畫

   JavaScript可選擇設定：
   --series-enter-delay: 55ms;
========================================================== */

@keyframes fl-series-product-enter {
    from {
        opacity: 0;

        transform:
            translate3d(14px, 6px, 0)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

.series-showcase[
    data-series-preload-ready="yes"
]
.series-product
.jet-listing-grid__item.is-series-visible
.product-card {
    animation:
        fl-series-product-enter
        var(--series-product-duration)
        var(--series-ease)
        var(--series-enter-delay, 0ms)
        both;
}


/* ==========================================================
   16. Listing Template包裝
========================================================== */

.series-product
.jet-listing-grid__item > .elementor,

.series-product
.jet-listing-grid__item .product-card,

.series-product
.jet-listing-grid__item
.product-card > .e-con-inner,

.series-product
.jet-listing-grid__item
.product-card > .elementor-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;
}

.series-product .product-card {
    position: relative !important;
    isolation: isolate;
}


/* ==========================================================
   17. Dynamic Image
========================================================== */

.series-product .series-product-image,
.series-product
.series-product-image
.elementor-widget-container,
.series-product
.series-product-image
.jet-listing-dynamic-image,
.series-product
.series-product-image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box;
}

.series-product .series-product-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;

    transform:
        translate3d(0, 0, 0)
        scale(1) !important;

    transform-origin: center;

    transition:
        transform
        320ms
        ease !important;
}

/* 主商品Hover */
.series-product
.jet-listing-grid__item.is-active-product:hover
.series-product-image img,

.series-product
.jet-listing-grid__item.is-active-item:hover
.series-product-image img {
    transform:
        translate3d(0, 0, 0)
        scale(1.025) !important;
}


/* ==========================================================
   18. 箭咀

   修正內容：
   1. 不再要求data-series-preload-ready才顯示。
   2. 支援is-active-product及is-active-item。
   3. 一開始已經是absolute，不會先出現在頁面頂部。
========================================================== */

.series-product .series-arrow {
    position: absolute !important;

    top: var(--series-arrow-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--series-arrow-left) !important;

    display: block !important;

    width: var(--series-arrow-width) !important;
    max-width: var(--series-arrow-width) !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    overflow: visible !important;
    line-height: 0;

    transform:
        translate3d(-6px, -50%, 0)
        scale(0.94) !important;

    transform-origin: center;

    pointer-events: none !important;
    z-index: 20 !important;

    transition:
        opacity
        200ms
        ease,

        transform
        340ms
        var(--series-ease),

        visibility
        0s
        linear
        220ms !important;
}

/* 箭咀圖片 */
.series-product
.series-arrow
.elementor-widget-container,

.series-product
.series-arrow a,

.series-product
.series-arrow img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * 目前主商品顯示箭咀。
 * 不再依賴data-series-preload-ready屬性。
 */
.series-product
.jet-listing-grid__item.is-active-product
.series-arrow,

.series-product
.jet-listing-grid__item.is-active-item
.series-arrow,

.series-product
.product-card.is-active-product
.series-arrow,

.series-product
.product-card.is-active-item
.series-arrow {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translate3d(0, -50%, 0)
        scale(1) !important;

    transition:
        opacity
        260ms
        ease
        100ms,

        transform
        380ms
        var(--series-ease)
        80ms,

        visibility
        0s
        linear
        0s !important;
}

/* Keyboard Focus */
.series-product
.jet-listing-grid__item:focus-within {
    opacity: 1 !important;
}


/* ==========================================================
   19. 中型桌面
   1101px－1365px
========================================================== */

@media (
    min-width: 1101px
) and (
    max-width: 1365px
) {

    .series-showcase {
        --series-copy-width: 360px;
        --series-layout-gap: 35px;

        --series-label-top: 120px;
        --series-step: 145px;
        --series-row-height: 34px;
        --series-filter-width: 138px;

        --series-image-x: 145px;
        --series-image-width: 225px;
        --series-image-height: 275px;

        --series-thumb-width: 88px;
        --series-thumb-height: 120px;
        --series-product-gap: 0px;
        --series-gallery-width: 430px;

        --series-stage-extra: 16px;

        --series-arrow-width: 78px;
        --series-arrow-left: -66px;

        max-width: 1150px;
    }

    .series-trigger .elementor-heading-title {
        font-size: 25px;
    }
}


/* ==========================================================
   20. 平板版
   768px－1100px

   重點：
   1. 改為上下排列。
   2. 取消桌面版justify-content:center。
   3. 強制清除Elementor min-height。
   4. 縮小文案與系列舞台之間的間距。
========================================================== */

@media (
    min-width: 768px
) and (
    max-width: 1100px
) {

    .series-showcase {
        --series-copy-width: 100%;
        --series-layout-gap: 8px;

        --series-label-top: 109px;
        --series-step: 126px;
        --series-row-height: 32px;
        --series-filter-width: 128px;

        --series-image-x: 138px;
        --series-image-width: 210px;
        --series-image-height: 250px;

        --series-thumb-width: 82px;
        --series-thumb-height: 112px;
        --series-product-gap: 0px;
        --series-gallery-width: 410px;

        --series-stage-extra: 12px;

        --series-arrow-width: 72px;
        --series-arrow-left: -60px;

        --min-height: 0px;

        max-width: 760px;
        height: auto !important;
        min-height: 0 !important;

        padding: 20px 20px 28px;
    }

    .series-showcase,
    .series-showcase > .e-con-inner {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        align-content: flex-start !important;

        gap: var(--series-layout-gap) !important;

        height: auto !important;
        min-height: 0 !important;
    }

    /*
     * 清除Elementor在手機／平板保留的Min Height及Flex Grow。
     */
    .series-copy {
        --min-height: 0px;

        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        align-self: stretch;
    }

    .series-copy > .e-con-inner {
        --min-height: 0px;

        height: auto !important;
        min-height: 0 !important;

        justify-content: flex-start !important;
    }

    .series-stage {
        flex: 0 0 auto !important;

        width: var(--series-stage-width) !important;
        max-width: 100% !important;

        margin-top: 0 !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;

        align-self: center;
    }

    .series-trigger .elementor-heading-title {
        font-size: 23px;
        letter-spacing: 0.06em;
    }
}


/* ==========================================================
   21. 手機版
   767px或以下
========================================================== */

@media (max-width: 767px) {

    .series-showcase {
        --series-copy-width: 100%;
        --series-layout-gap: 4px;

        --series-label-top: 80px;
        --series-step: 94px;
        --series-row-height: 28px;
        --series-filter-width: 96px;

        --series-image-x: 104px;
        --series-image-width: 145px;
        --series-image-height: 188px;

        --series-thumb-width: 62px;
        --series-thumb-height: 86px;
        --series-product-gap: 0px;

        --series-stage-extra: 10px;

        --series-arrow-width: 52px;
        --series-arrow-left: -5px;
        --series-arrow-top: 58%;

        /*
         * 橫向滑動容器左邊預留44px，修了26px
         * 避免負數定位的箭咀被overflow裁走。
         */
        --series-scroll-reserve: 26px;

        --series-inactive-opacity: 0.82;

        --series-move-duration: 460ms;
        --series-product-duration: 360ms;

        --min-height: 0px;

        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;

        padding: 16px 16px 24px;
    }

    .series-showcase,
    .series-showcase > .e-con-inner {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        align-content: flex-start !important;

        gap: var(--series-layout-gap) !important;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;
    }

    .series-copy {
        --min-height: 0px;

        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .series-copy > .e-con-inner {
        --min-height: 0px;

        height: auto !important;
        min-height: 0 !important;

        justify-content: flex-start !important;
    }

    .series-stage {
        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        align-self: stretch;
    }

    .series-filter {
        width: var(--series-filter-width) !important;
        max-width: var(--series-filter-width) !important;
    }

    .series-trigger {
        max-width: var(--series-filter-width) !important;
    }

    .series-trigger .elementor-heading-title {
        font-size: 20px;
        letter-spacing: 0.05em;
    }

    /*
     * 商品Scroller實際由60px左右開始，
     * 但利用左Padding令圖片仍然由104px開始。
     *
     * 這樣箭咀便可留在Scroller範圍內，
     * 不會被overflow-x:auto裁走。
     */
    .series-product {
        left:
            calc(
                var(--series-image-x)
                - var(--series-scroll-reserve)
            ) !important;

        width:
            calc(
                100%
                - var(--series-image-x)
                + var(--series-scroll-reserve)
            ) !important;

        max-width:
            calc(
                100%
                - var(--series-image-x)
                + var(--series-scroll-reserve)
            ) !important;
    }

    .series-product .jet-listing-grid__items {
        justify-content: flex-start !important;

        padding-inline-start:
            var(--series-scroll-reserve) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-padding-inline-start:
            var(--series-scroll-reserve);

        scroll-snap-type: x proximity;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        /*
         * 手機Scroller不使用Layout Containment，
         * 避免個別瀏覽器裁剪箭咀。
         */
        contain: none;
    }

    .series-product
    .jet-listing-grid__items::-webkit-scrollbar {
        display: none;
    }

    .series-product
    .jet-listing-grid__item.is-series-visible {
        scroll-snap-align: start;
    }
}


/* ==========================================================
   22. 較窄手機
========================================================== */

@media (max-width: 390px) {

    .series-showcase {
        --series-label-top: 75px;
        --series-step: 89px;
        --series-row-height: 27px;
        --series-filter-width: 90px;

        --series-image-x: 98px;
        --series-image-width: 136px;
        --series-image-height: 178px;

        --series-thumb-width: 58px;
        --series-thumb-height: 80px;
        --series-product-gap: 7px;

        --series-arrow-width: 40px;
        --series-arrow-left: -34px;

        --series-scroll-reserve: 40px;
    }

    .series-trigger .elementor-heading-title {
        font-size: 19px;
    }
}


/* ==========================================================
   23. Respect Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .series-showcase .series-product,
    .series-showcase .series-trigger,
    .series-showcase .series-trigger .elementor-heading-title,
    .series-showcase .series-accent,
    .series-showcase .series-accent *,
    .series-showcase .jet-listing-grid__item,
    .series-showcase .product-card,
    .series-showcase .series-product-image img,
    .series-showcase .series-arrow {
        animation: none !important;
        transition: none !important;
    }
}
/* ==========================================================
   24. 手機滑動商品修正
========================================================== */

@media (max-width: 767px) {

    .series-showcase {
        /*
         * 商品區起點：
         * 系列文字闊度
         * + 箭咀預留空間
         * + 文字與商品安全距離
         */
        --series-label-product-gap: 28px;

        --series-image-x:
            calc(
                var(--series-filter-width)
                + var(--series-scroll-reserve)
                + var(--series-label-product-gap)
            );
    }

    /*
     * 系列文字必須在商品圖層之上。
     */
    .series-filter {
        z-index: 40 !important;
    }

    .series-trigger {
        z-index: 41 !important;
    }

    .series-trigger .elementor-heading-title {
        position: relative;
        z-index: 2;
    }

    .series-product {
        z-index: 5 !important;
    }

    /*
     * 右邊增加空間，
     * 讓最後一件商品也能滑到中央並放大。
     */
    .series-product .jet-listing-grid__items {
        padding-inline-end: 50% !important;

        scroll-snap-type: x proximity;
    }

    .series-product
    .jet-listing-grid__item.is-series-visible {
        scroll-snap-align: center;
    }
}
@media (max-width: 767px) {

    .series-showcase.is-series-3
    .series-product .jet-listing-grid__items {
        padding-inline-end: 0 !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;
    }

    /*
     * 防止兩件商品被 Flex 壓縮至剛好填滿容器。
     */
    .series-showcase.is-series-3
    .series-product
    .jet-listing-grid__item.is-series-visible {
        flex-shrink: 0 !important;
    }

    /*
     * 真正的滑動空間，而不是容器 padding。
     */
    .series-showcase.is-series-3
    .series-product .jet-listing-grid__items::after {
        content: "";
        display: block !important;

        flex: 0 0 55vw !important;
        width: 55vw !important;
        min-width: 55vw !important;

        height: 1px;
        pointer-events: none;
        scroll-snap-align: none !important;
    }
}/* End custom CSS */