/* =====================================================
           PAGE BACKGROUND
        ===================================================== */    

        .travel-page {
            width: 100%;
            min-height: 100vh;
            padding: 16px 0 60px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 10% 12%,
                    rgba(255, 219, 214, .28),
                    transparent 24%
                ),
                radial-gradient(
                    circle at 92% 30%,
                    rgba(222, 242, 231, .24),
                    transparent 22%
                ),
                linear-gradient(
                    180deg,
                    #fffdfb 0%,
                    #fff9f5 45%,
                    #fffdfb 100%
                );
        }


        /* 淡淡紙張紋理 */
        .travel-page::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .16;
            background-image:
                repeating-linear-gradient(
                    0deg,
                    rgba(120, 92, 72, .04) 0,
                    rgba(120, 92, 72, .04) 1px,
                    transparent 1px,
                    transparent 5px
                );
            z-index: 0;
        }
        .container {
            width: min(1180px, calc(100% - 40px));
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }


        /* =====================================================
           TOP REGION TABS
        ===================================================== */


        /* =====================================================
   REGION TABS WRAP
===================================================== */

        .region-tabs-wrap {
            position: sticky;
            top: 0;
            z-index: 100;

            width: 100%;
            padding-top: 8px;

            background:
                linear-gradient(180deg,
                    rgba(255, 250, 247, .98),
                    rgba(255, 250, 247, .92));

            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }


        /* =====================================================
   TABS BOX
===================================================== */

        .region-tabs-box {
            position: relative;
            width: 100%;
        }


        /* =====================================================
   TABS
===================================================== */

        .region-tabs {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));

            gap: 8px;

            width: 100%;

            padding: 0;
            margin: 0;

            list-style: none;
        }


        /* =====================================================
   TAB
===================================================== */

        .region-tab {
            min-width: 0;
            min-height: 54px;

            display: flex;
            align-items: center;
            justify-content: center;

            position: relative;

            padding: 10px 15px;

            color: #283645;

            background:
                linear-gradient(180deg,
                    #f7efe9 0%,
                    #f1e6de 100%);

            border-radius: 14px 14px 0 0;

            font-size: 17px;
            font-weight: 900;

            letter-spacing: 2px;

            text-align: center;
            text-decoration: none;

            white-space: nowrap;

            transition:
                color .25s ease,
                background .25s ease,
                transform .25s ease,
                box-shadow .25s ease;
        }


        /* =====================================================
   HOVER
===================================================== */

        @media (hover: hover) {

            .region-tab:hover {
                transform: translateY(-2px);
            }

        }


        /* =====================================================
   ACTIVE
===================================================== */

        .region-tab.active {
            color: #fff;

            background:
                linear-gradient(135deg,
                    #ff727f,
                    #f64e68);

            box-shadow:
                0 7px 16px rgba(245, 82, 104, .22);
        }


        /* =====================================================
   左右箭頭
   ★ 預設隱藏
   ★ 769px 以上完全不顯示
===================================================== */

        .region-arrow {
            display: none;
        }


        /* =====================================================
   行動裝置
   768px 以下
===================================================== */

        @media (max-width: 768px) {

            .region-tabs-wrap {
                padding:
                    6px 0;
            }


            /* ---------------------------------
       外層改成 flex
    --------------------------------- */

            .region-tabs-box {

                display: flex;

                align-items: center;

                width: 100%;
            }


            /* ---------------------------------
       顯示左右箭頭
    --------------------------------- */

            .region-arrow {

                flex:
                    0 0 auto;

                display: flex;

                align-items: center;

                justify-content: center;

                width: 34px;

                height: 46px;

                padding: 0;

                border: 0;

                color: #fff;

                background:
                    linear-gradient(135deg,
                        #ff727f,
                        #f64e68);

                font-size: 22px;

                font-weight: 900;

                line-height: 1;

                cursor: pointer;

                box-shadow:
                    0 4px 10px rgba(245, 82, 104, .20);

                transition:
                    transform .25s ease,
                    opacity .25s ease;
            }


            /* 左箭頭 */

            .region-arrow-prev {

                margin-right: 5px;

                border-radius:
                    10px 4px 4px 10px;
            }


            /* 右箭頭 */

            .region-arrow-next {

                margin-left: 5px;

                border-radius:
                    4px 10px 10px 4px;
            }


            /* 禁止狀態 */

            .region-arrow:disabled {

                opacity: .25;

                cursor: default;
            }


            /* ---------------------------------
       手機 TAB 改橫向滑動
    --------------------------------- */

            .region-tabs {

                flex: 1;

                display: flex;

                gap: 5px;

                min-width: 0;

                overflow-x: auto;

                overflow-y: hidden;

                scroll-behavior: smooth;

                scroll-snap-type: x mandatory;

                scrollbar-width: none;

                -webkit-overflow-scrolling: touch;
            }


            /* 隱藏 scrollbar */

            .region-tabs::-webkit-scrollbar {
                display: none;
            }


            /* ---------------------------------
       TAB
       一次顯示約兩格
    --------------------------------- */

            .region-tab {

                flex:
                    0 0 calc(50% - 3px);

                min-width: 0;

                min-height: 46px;

                padding:
                    8px 6px;

                font-size: 14px;

                letter-spacing: .5px;

                border-radius:
                    10px 10px 0 0;

                scroll-snap-align: center;
            }

        }


        /* =====================================================
   480px 以下
===================================================== */

        @media (max-width: 480px) {

            .region-arrow {

                width: 30px;

                height: 44px;

                font-size: 19px;
            }


            .region-arrow-prev {
                margin-right: 4px;
            }


            .region-arrow-next {
                margin-left: 4px;
            }


            .region-tab {

                min-height: 44px;

                font-size: 13px;

                padding:
                    7px 5px;
            }

        }


        /* =====================================================
   360px 以下
===================================================== */

        @media (max-width: 360px) {

            .region-arrow {

                width: 27px;

                font-size: 17px;
            }


            .region-tab {

                flex:
                    0 0 calc(55% - 3px);

                font-size: 12px;
            }

        }
        /* =======END */


        /* =====================================================
           SECTION
        ===================================================== */

        .travel-region {
            padding-top: 34px;
            scroll-margin-top: 80px;
        }


        /* =====================================================
           REGION HEADER
        ===================================================== */

        .region-header {
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                auto;
            align-items: end;
            gap: 25px;
            margin-bottom: 14px;
        }
        .region-title-box {
            min-width: 0;
        }
        .region-title-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
        }


        /* 小地標 icon */    
     /* =====================================================
   REGION ICON
   使用實際圖片
===================================================== */

.region-icon {
    width: 58px;
    height: 46px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


/*
 * 你目前提供的圖片四周有較大的白色空間，
 * 所以稍微放大圖片，讓真正的 ICON 比較明顯。
 */

.region-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform: scale(1.55);

    /*
     * 如果圖片本身是白底，
     * 這個可以讓白底較自然融入網頁背景
     */
    mix-blend-mode: multiply;
}

        .region-title {
            margin: 0;
            font-size: clamp(24px, 2.8vw, 34px);
            font-weight: 900;
            letter-spacing: 2px;
            line-height: 1.2;
        }
        .north .region-title {
            color: #f2526c;
        }
        .central .region-title {
            color: #008cad;
        }
        .south .region-title {
            color: #ef5c67;
        }
        .east .region-title {
            color: #1682ad;
        }
        .region-separator {
            color: #c9aaa4;

            font-size: 18px;
            font-weight: 700;
        }
        .region-geo {
            color: #ee7182;

            font-size: 13px;
            font-weight: 800;
            letter-spacing: 1px;
        }


        /* 右側文案 */

        .region-extra {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .region-slogan {
            margin: 0;
            color: #cb766a;
            font-family:
                "DFKai-SB",
                "標楷體",
                "KaiTi",
                serif;
            font-size: 17px;
            letter-spacing: 2px;
            white-space: nowrap;
            transform: rotate(-3deg);
        }
        .more-btn {
            min-width: 118px;
            min-height: 36px;
            padding: 7px 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #e85e71;
            background: #fff;
            border: 1.5px solid #f29baa;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 800;
            transition:
                color .2s ease,
                background .2s ease,
                transform .2s ease;
        }
        .more-btn::after {
            content: "›";
            font-size: 17px;
            line-height: 1;
        }
        .more-btn:hover {
            color: #fff;
            background: #ef667c;
            transform: translateY(-2px);
        }


                /* ==============================
           北部旅遊優惠介紹區
        ============================== */

        .north-feature-wrap {
            width: calc(100% - 40px);
            max-width: 1440px;
            margin: 20px auto 28px;
        }

        .north-feature {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 420px;
            min-height: 270px;
            overflow: hidden;
            border: 1px solid #f2ded4;
            border-radius: 22px;
            background:
                radial-gradient(
                    circle at 15% 15%,
                    rgba(255, 142, 122, .11),
                    transparent 28%
                ),
                linear-gradient(
                    135deg,
                    #fffaf7 0%,
                    #fff7f1 52%,
                    #fff1e8 100%
                );
            box-shadow:
                0 12px 30px rgba(112, 64, 49, .08),
                0 3px 8px rgba(112, 64, 49, .04);
        }


        /* ==============================
           左側內容
        ============================== */

        .north-feature__content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 35px 35px 35px 45px;        
        }


        /* 上方膠囊標籤 */

        .north-feature__badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin-bottom: 18px;
            padding: 10px 20px;
            border-radius: 100px;
            background:
                linear-gradient(
                    135deg,
                    #ff5d62,
                    #ff7448
                );
            color: #fff;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 1px;
            box-shadow:
                0 7px 18px rgba(255, 91, 83, .22);
        }


        /* 喇叭 ICON */
        .north-feature__badge-icon {
            position: relative;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .north-feature__badge-icon::before {
            content: "◆";
            position: absolute;
            left: 0;
            top: 1px;
            font-size: 16px;
            color: #fff;
            transform: rotate(45deg);
        }

        .north-feature__badge-icon::after {
            content: "";
            position: absolute;
            right: 0;
            top: 4px;
            width: 5px;
            height: 15px;
            border-right: 3px solid #fff;
            border-radius: 50%;
        }


        /* 主標題 */

        .north-feature__title {
            margin: 0 0 14px;
            color: #493530;
            font-size: clamp(24px, 2.2vw, 34px);
            font-weight: 900;
            line-height: 1.45;
            letter-spacing: .5px;
        }


        /* 內文 */

        .north-feature__text {
            margin: 0;
            color: #5d514d;
            font-size: clamp(16px, 1.5vw, 21px);
            font-weight: 500;
            line-height: 2;
            letter-spacing: .2px;
        }


        /* 橘紅重點文字 */

        .north-feature__text strong {
            color: #e95939;
            font-weight: 900;
        }


        /* 最後一句 */

        .north-feature__final {
            color: #7f5546;
            font-weight: 800;
            white-space: nowrap;
        }


        /* ==============================
           右側視覺區
        ============================== */

        .north-feature__visual {
            position: relative;
            min-height: 270px;
            overflow: hidden;         
                background-image:
              linear-gradient(
                  90deg,
                  #fff7f0 0%,
                  rgba(255,247,240,.3) 35%,
                  transparent 70%
              ),
              url("../images/slogan-north.png");
              /* background-image: url(../images/slogan-north.webp); */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

        .center-feature__visual {
            position: relative;
            min-height: 270px;
            overflow: hidden;         
                background-image:
              linear-gradient(
                  90deg,
                  #fff7f0 0%,
                  rgba(255,247,240,.3) 35%,
                  transparent 70%
              ),
              url("../images/slogan-center.png");
              /* background-image: url(../images/slogan-north.webp); */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

        .Southern-feature__visual {
            position: relative;
            min-height: 270px;
            overflow: hidden;         
                background-image:
              linear-gradient(
                  90deg,
                  #fff7f0 0%,
                  rgba(255,247,240,.3) 35%,
                  transparent 70%
              ),
              url("../images/slogan-southern.png");
              /* background-image: url(../images/slogan-north.webp); */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

         .east-feature__visual {
            position: relative;
            min-height: 270px;
            overflow: hidden;         
                background-image:
              linear-gradient(
                  90deg,
                  #fff7f0 0%,
                  rgba(255,247,240,.3) 35%,
                  transparent 70%
              ),
              url("../images/slogan-east.png");
              /* background-image: url(../images/slogan-north.webp); */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }


        /*
          如果你有台北101 / 北部景色圖片，
          可以取消下面 background-image 的註解：

          background-image:
              linear-gradient(
                  90deg,
                  #fff7f0 0%,
                  rgba(255,247,240,.3) 35%,
                  transparent 70%
              ),
              url("./images/north-intro.jpg");

          background-size: cover;
          background-position: center;
        */


        /* 山景造型 */

        /* .north-feature__mountain {
            position: absolute;
            right: -20px;
            bottom: -10px;

            width: 105%;
            height: 58%;

            background:
                linear-gradient(
                    160deg,
                    transparent 0 23%,
                    rgba(217, 156, 124, .20) 24% 43%,
                    transparent 44%
                ),
                linear-gradient(
                    200deg,
                    transparent 0 35%,
                    rgba(184, 134, 112, .16) 36% 55%,
                    transparent 56%
                );

            pointer-events: none;
        } */


        /* 台北 101 簡易裝飾 */

        /* .taipei101 {
            position: absolute;

            right: 92px;
            bottom: 28px;

            width: 34px;
            height: 120px;

            background:
                linear-gradient(
                    to bottom,
                    #417f75 0 8%,
                    #75a79b 8% 18%,
                    #417f75 18% 28%,
                    #75a79b 28% 38%,
                    #417f75 38% 48%,
                    #75a79b 48% 58%,
                    #417f75 58% 68%,
                    #75a79b 68% 78%,
                    #417f75 78% 100%
                );

            clip-path:
                polygon(
                    40% 0,
                    60% 0,
                    62% 7%,
                    70% 7%,
                    72% 100%,
                    28% 100%,
                    30% 7%,
                    38% 7%
                );

            opacity: .65;
        }

        .taipei101::before {
            content: "";

            position: absolute;

            width: 4px;
            height: 30px;

            left: 50%;
            top: -28px;

            transform: translateX(-50%);

            background: #497a72;
        } */


        /* 手寫感裝飾文字 */

        /* .north-feature__slogan {
            position: absolute;

            left: 40px;
            top: 42px;

            color: #8b5b48;

            font-family:
                "DFKai-SB",
                "標楷體",
                serif;

            font-size: 26px;
            font-weight: 500;

            line-height: 1.6;

            transform: rotate(-5deg);
        }

        .north-feature__slogan::after {
            content: "";

            position: absolute;

            left: 35px;
            bottom: -3px;

            width: 100px;
            height: 2px;

            background: #f07462;

            transform: rotate(-5deg);
        } */


        /* ==============================
           便利貼
        ============================== */

        .north-feature__note {
            position: absolute;
            right: 25px;
            bottom: 42px;
            padding: 10px 16px;
            background: rgba(255,255,255,.90);
            border-radius: 5px;
            color: #936153;
            font-size: 14px;
            font-weight: 700;
            box-shadow:
                0 5px 15px rgba(107, 59, 43, .10);
            transform: rotate(-3deg);
        }

        .north-feature__note--2 {
            right: 5px;
            bottom: 8px;
            color: #9b6d5f;
            transform: rotate(-4deg);
        }


        /* ==============================
           楓葉裝飾
        ============================== */

        .maple {
            position: absolute;
            width: 23px;
            height: 23px;
            background: #f27655;
            opacity: .80;
            clip-path:
                polygon(
                    50% 0%,
                    58% 29%,
                    78% 16%,
                    70% 39%,
                    100% 46%,
                    72% 57%,
                    87% 78%,
                    60% 70%,
                    50% 100%,
                    40% 70%,
                    13% 78%,
                    28% 57%,
                    0% 46%,
                    30% 39%,
                    22% 16%,
                    42% 29%
                );
        }

        .maple--1 {
            right: 30px;
            top: 20px;
            width: 42px;
            height: 42px;
            transform: rotate(12deg);
        }

        .maple--2 {
            right: 76px;
            top: 12px;
            width: 28px;
            height: 28px;
            opacity: .55;
            transform: rotate(-18deg);
        }

        .maple--3 {
            right: 18px;
            top: 72px;
            width: 25px;
            height: 25px;
            opacity: .45;
            transform: rotate(30deg);
        }


        /* ==============================
           背景小葉子
        ============================== */

        .north-feature__content::before,
        .north-feature__content::after {
            content: "";
            position: absolute;
            width: 35px;
            height: 18px;
            border-radius: 100% 0 100% 0;
            background: rgba(238, 142, 116, .12);
            pointer-events: none;
        }

        .north-feature__content::before {
            left: 15px;
            top: 35px;
            transform: rotate(35deg);
        }

        .north-feature__content::after {
            right: 25px;
            bottom: 25px;
            transform: rotate(-25deg);
        }


        /* ==================================
           Tablet
        ================================== */

        @media (max-width: 1100px) {
            .north-feature {
                grid-template-columns: minmax(0, 1fr) 300px;
            }
            .north-feature__content {
                padding:
                    30px
                    25px
                    30px
                    30px;
            }
            .north-feature__slogan {
                left: 25px;
                top: 35px;

                font-size: 22px;
            }
            .taipei101 {
                right: 65px;
            }
            .north-feature__note {
                right: 10px;
            }
        }


        /* ==================================
           Mobile
        ================================== */

        @media (max-width: 768px) {
            .north-feature-wrap {
                width: calc(100% - 24px);
                margin:
                    15px auto
                    22px;
            }
            .north-feature {
                display: block;
                border-radius: 16px;
            }
            .north-feature__content {
                padding:
                    25px
                    20px
                    24px;
            }
            .north-feature__badge {
                margin-bottom: 14px;

                padding:
                    8px
                    15px;
                font-size: 15px;
            }
            .north-feature__title {
                margin-bottom: 10px;
                font-size: 23px;
                line-height: 1.5;
            }
            .north-feature__text {
                font-size: 16px;
                line-height: 1.85;
            }
            .north-feature__final {
                white-space: normal;
            }

            /* 手機視覺區縮小 */
            .north-feature__visual, .center-feature__visual, .Southern-feature__visual, .east-feature__visual  {
                min-height: 155px;

                border-top:
                    1px solid
                    rgba(237, 205, 190, .5);
            }
            .north-feature__slogan {
                left: 25px;
                top: 25px;

                font-size: 20px;
            }
            .taipei101 {
                right: 70px;
                bottom: 15px;

                height: 100px;
            }
            .north-feature__note {
                display: none;
            }
            .maple--1 {
                right: 20px;
            }
            .maple--2 {
                right: 65px;
            }
        }


        /* ==================================
           小型手機
        ================================== */

        @media (max-width: 430px) {
            .north-feature-wrap {
                width: calc(100% - 20px);
            }
            .north-feature__content {
                padding:
                    22px
                    17px
                    22px;
            }
            .north-feature__badge {
                font-size: 14px;
            }
            .north-feature__title {
                font-size: 21px;
            }
            .north-feature__text {
                font-size: 15px;
                line-height: 1.8;
            }
            .north-feature__visual, .center-feature__visual, .Southern-feature__visual, .east-feature__visual {
                min-height: 135px;
            }
            .north-feature__slogan {
                left: 20px;
                top: 22px;
                font-size: 18px;
            }
            .taipei101 {
                right: 50px;

                width: 28px;
                height: 85px;
            }
        }



        /* =====================================================
           PRODUCT GRID
        ===================================================== */

        .product-grid {
            display: grid;
            grid-template-columns:
                repeat(3, minmax(0, 1fr));
            gap: 14px;
        }


        /* =====================================================
           PRODUCT CARD
        ===================================================== */

        .product-card {
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: rgba(255, 255, 255, .96);
            border:
                1px solid
                rgba(224, 215, 210, .8);
            border-radius: 10px;
            box-shadow:
                0 5px 13px
                rgba(100, 80, 70, .10);
            transition:
                transform .28s ease,
                box-shadow .28s ease;
            opacity: 0;
            transform: translateY(18px);
        }
        .product-card.show {
            opacity: 1;
            transform: translateY(0);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow:
                0 12px 24px
                rgba(91, 65, 54, .16);
        }


        /* 商品圖片 */
        .product-image {
            width: 100%;
            aspect-ratio: 16 / 8.1;
            position: relative;
            overflow: hidden;
            background: #ececec;
        }
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .45s ease;
        }
        .product-card:hover
        .product-image img {
            transform: scale(1.06);
        }


        /* 圖片角標 */
        .product-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            padding: 4px 8px;
            color: #fff;
            background:
                rgba(245, 81, 99, .93);
            border-radius: 999px;
            font-size: 10px;
            font-weight: 900;
            box-shadow:
                0 3px 8px
                rgba(0, 0, 0, .12);
        }


        /* 商品內容 */

        .product-body {
            flex: 1;
            padding: 10px 12px 11px;
            display: flex;
            flex-direction: column;
        }
        .product-title {
            margin: 0 0 4px;
            color: #333740;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .product-meta {
            margin: 0 0 8px;
            color: #8e8e8e;
            font-size: 16px;
            line-height: 1.5;
        }


        /* 價格 */
        .product-price {
            margin-top: auto;
            margin-bottom: 8px;
            display: flex;
            align-items: baseline;
            gap: 7px;
        }
        .price-label {
            color: #6a6a6a;
            font-size: 11px;
            font-weight: 700;
        }
        .price-number {
            color: #f14c4a;
            font-size: 24px;
            font-weight: 900;
            letter-spacing: -1px;
        }
        .price-unit {
            color: #666;
            font-size: 10px;
            font-weight: 700;
        }


        /* CTA */
        .product-btn {
            width: 100%;
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: #fff;
            background:
                linear-gradient(
                    135deg,
                    #ff8125,
                    #ff5f17
                );
            border-radius: 7px;
            font-size: 13px;
            font-weight: 900;
            box-shadow:
                0 4px 8px
                rgba(255, 97, 26, .18);
            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }
        .product-btn::after {
            content: "›";
            font-size: 18px;
            line-height: 1;
        }
        .product-btn:hover {
            transform: translateY(-2px);
            box-shadow:
                0 7px 13px
                rgba(255, 97, 26, .28);
        }


        /* =====================================================
           SECTION DIVIDER
        ===================================================== */
        .travel-region + .travel-region {
            margin-top: 14px;
            padding-top: 38px;
            border-top:
                1px dashed
                rgba(220, 174, 164, .45);
        }


        /* =====================================================
           TABLET
        ===================================================== */

        @media (max-width: 1000px) {
            .container {
                width:
                    min(
                        900px,
                        calc(100% - 34px)
                    );
            }
            .product-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
                gap: 16px;
            }
            .region-header {
                align-items: center;
            }
            .region-slogan {
                display: none;
            }
        }


        /* =====================================================
           MOBILE 768
        ===================================================== */

        @media (max-width: 768px) {
            .travel-page {
                padding-top: 6px;
            }
            .container {
                width:
                    calc(100% - 28px);
            }


            /* tabs 可左右滑 */
            .region-tabs {
                display: flex;
                overflow-x: auto;
                gap: 6px;
                padding-bottom: 4px;
                scrollbar-width: none;
            }
            .region-tabs::-webkit-scrollbar {
                display: none;
            }
            .region-tab {
                flex:
                    0 0
                    calc(50% - 3px);
                min-height: 48px;
                border-radius:
                    12px 12px 4px 4px;
                font-size: 15px;
            }
            .travel-region {
                padding-top: 28px;
                scroll-margin-top: 68px;
            }
            .region-header {
                display: block;
                margin-bottom: 13px;
            }
            .region-title-row {
                gap: 7px;
            }
            .region-title {
                font-size: 26px;
            }
            .region-icon {
                width: 40px;
                height: 34px;
            }
            .region-extra {
                margin-top: 9px;
                justify-content:
                    space-between;
            }
            .region-slogan {
                display: block;
                font-size: 14px;
                white-space: normal;
            }
            .more-btn {
                flex: 0 0 auto;
                min-width: 105px;
                padding:
                    6px 12px;
            }
            .product-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
                gap: 11px;
            }
            .product-body {
                padding:
                    9px 9px 10px;
            }
            .product-title {
                font-size: 14px;
            }
            .price-number {
                font-size: 21px;
            }
        }


        /* =====================================================
           SMALL MOBILE
        ===================================================== */

        @media (max-width: 560px) {
            .container {
                width:
                    calc(100% - 22px);
            }
            .region-tabs-wrap {
                padding-top: 4px;
            }
            .region-tab {
                flex:
                    0 0
                    calc(50% - 3px);
                font-size: 14px;
                letter-spacing: 1px;
            }
            .region-title-row {
                align-items:
                    flex-start;
            }
            .region-title {
                font-size: 23px;
            }
            .region-separator {
                display: none;
            }
            .region-geo {
                width: 100%;
                padding-left: 47px;
            }
            .region-extra {
                margin-top: 8px;
            }
            .region-slogan {
                font-size: 12px;
            }

            /* 手機單欄 */
            .product-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .product-card {
                display: grid;
                grid-template-columns:
                    42% 58%;
                border-radius: 11px;
            }
            .product-image {
                height: 100%;
                min-height: 145px;
                aspect-ratio: auto;
            }
            .product-body {
                padding:
                    11px 12px;
            }
            .product-title {
                font-size: 15px;
            }
            .product-meta {
                margin-bottom: 5px;
            }
            .price-number {
                font-size: 22px;
            }
        }


        /* =====================================================
           EXTRA SMALL
        ===================================================== */

/* =====================================================
   390px 以下
   手機小尺寸：上圖下文
===================================================== */

@media (max-width: 390px) {
    .product-card {
        display: block;
        width: 100%;
        overflow: hidden;
    }


    /*
     * 重要：
     * 一定要把 560px 裡面的 height:100% 重設掉
     */
    .product-image {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 8.5;
        overflow: hidden;
    }
    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /*
     * 商品資訊
     */

    .product-body {
        width: 100%;
        padding: 12px 13px 13px;
        display: flex;
        flex-direction: column;
    }
    .product-title {
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.45;
    }
    .product-meta {
        margin-bottom: 7px;
        font-size: 11px;
        line-height: 1.5;
    }
    .product-price {
        margin-top: 0;
        margin-bottom: 9px;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .price-label {
        font-size: 11px;
    }
    .price-number {
        font-size: 22px;
    }
    .price-unit {
        font-size: 10px;
    }
    .product-btn {
        width: 100%;
        min-height: 35px;
        font-size: 13px;
    }


    /*
     * 區域標題
     */
    .region-extra {
        align-items: flex-start;
        gap: 10px;
    }
    .region-slogan {
        max-width: 170px;
    }
}


    /* =====================================================
        REDUCED MOTION
    ===================================================== */
    @media
    (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
            transition: none !important;
            animation: none !important;
        }
        .product-card {
            opacity: 1;
            transform: none;
        }
    }