/******
  * @name: content_99購物節
  * @author: openAI
  * @version: 1.0.1
  * @update: 2026/8/24
******/
    :root {
      /*品牌強調色*/
      --accent: #fe5e37;
      /*主文字*/
      --fg: #181300;
      /*次要文字*/
      --muted: #00cdcd;
      /*回上層文字*/
      --back-to-top-text: #fff;
      /*主背景*/
      --bg: #ec2e53;
      /*區塊/卡片背景*/
      --surface: #f64500;
      /*弧角*/
      --img-radius: 16px;
      /*內框弧角*/
      --inner-radius: 30px;
      --inner-radius-sm: 14px;
      /*內框間距*/
      --inset-border-sm: 5px;
      /* 內縮比例，數字越小，內縮越明顯 */
      --inset-duration: .25s;
      /*桌機板選單位置*/
      --menu-width: 5%;
      --menu-right: 20px;


      /* ==================================================
     FONT SYSTEM
     375px → 1440px
     ================================================== */
      /* Hero 大型主視覺標題 40px → 64px */
      --font-hero: clamp(40px, 31.55px + 2.25vw, 64px);
      /* H1 頁面主標題 32px → 48px */
      --font-h1: clamp(32px, 26.37px + 1.5vw, 48px);
      /* H2 區塊標題 24px → 36px */
      --font-h2: clamp(24px, 19.77px + 1.13vw, 36px);
      /* H3 卡片／小標題 20px → 28px */
      --font-h3: clamp(20px, 17.18px + 0.75vw, 28px);
      /* 一般內文 16px → 18px */
      --font-body: clamp(16px, 15.3px + 0.19vw, 18px);
      /* 次要文字 14px → 16px */
      --font-small: clamp(14px, 13.3px + 0.19vw, 16px);
      /* 註解／日期／標籤 12px → 14px */
      --font-caption: clamp(12px, 11.3px + 0.19vw, 14px);
      /* Copyright 12px → 13px */
      --font-copyright: clamp(12px, 11.65px + 0.094vw, 13px);

      /* ==================================================
     SPACING SYSTEM
     margin / padding / gap
     375px → 1440px
     ================================================== */
      /* 極小間距 4px → 6px */
      --space-2xs: clamp(4px, 3.3px + 0.19vw, 6px);
      /* 小間距 6px → 10px */
      --space-xs: clamp(6px, 4.59px + 0.38vw, 10px);
      /* 一般小間距 8px → 12px */
      --space-sm: clamp(8px, 6.59px + 0.38vw, 12px);
      /* 一般間距 12px → 20px */
      --space-md: clamp(12px, 9.18px + 0.75vw, 20px);
      /* 一般大間距 16px → 24px */
      --space-lg: clamp(16px, 13.18px + 0.75vw, 24px);
      /* 元件／卡片間距 24px → 40px */
      --space-xl: clamp(24px, 18.37px + 1.5vw, 40px);
      /* 大區塊間距 32px → 56px */
      --space-2xl: clamp(32px, 23.55px + 2.25vw, 56px);
      /* 大型版面間距 48px → 80px */
      --space-3xl: clamp(48px, 36.73px + 3vw, 80px);
      /* Section 上下留白 64px → 128px */
      --space-section: clamp(64px, 41.46px + 6vw, 128px);
      /* 網頁左右安全距離 20px → 48px */
      --space-page-x: clamp(20px, 10.14px + 2.63vw, 48px);
    }

    body {
      margin: 0;
      box-sizing: border-box;
    }

    /*** 主要框架 ***/
    .mainframe {
      margin: 0 auto;
      padding: 0;
      font-family: 'Noto Sans TC', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
      width: 100%;
      background: var(--bg, #ec2e53);
    }

    .bgframe01 {
      background: var(--bg, #ec2e53);
      padding-block: var(--space-xl) 0;
    }

    .bgframe02 {
      background: linear-gradient(to bottom, #ec2e53 0%, #ffc337 30%, #ff3d11 80%);
      padding-block: var(--space-xl) var(--space-xl);
    }

    .bgframe03 {
      background: #fff;
      padding-block: var(--space-xl) 0;
    }

    .cutframe {
      margin: 0 auto;
    }

    @media (min-width:480px) {
      .cutframe {
        max-width: 640px;
      }
    }

    @media (min-width:768px) {
      .cutframe {
        max-width: 840px;
      }
    }

    @media (min-width:1024px) {
      .cutframe {
        max-width: 980px;
      }
    }

    @media (min-width:1280px) {
      .cutframe {
        max-width: 1100px;
      }
    }

    .mainframe h1,
    .mainframe h2,
    .mainframe h3,
    .mainframe h4 {
      margin: 0 auto;
      width: 90%;
    }

    .mainframe p {
      margin: 0 0 1rem;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .partner>a.img-prd {
        flex: 0 0 30%;
      }
    }

    /*** 3大保證 ***/
    .ensure {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
    }

    .ensure>img {
      margin: 0 .2rem;
      max-width: 33%;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .ensure>img {
        margin: 0 1rem;
      }
    }

    /*** 內容 ***/

    /*活動詳情*/
    .notice {
      margin: 0 auto;
      padding-bottom: 5rem;
      width: 90%;
      font-size: var(--font-body);
      line-height: 1.65;
      color: var(--fg);
    }

    .notice a {
      color: var(--accent);
      font-weight: 500;
    }

    h2.title-notice {
      display: flex;
      justify-content: center;
      align-items: center;
      /*margin: 0 auto var(--space-lg);*/
      margin: 0 auto 5rem;
      padding-bottom: var(--space-lg);
      width: 90%;
      font-size: var(--font-h1);
      font-weight: 900;
      line-height: 1.5;
      color: var(--accent);
      border-bottom: 1px solid var(--accent);
    }

    /* 開啟時 */
    h2.title-notice.is-open {
      margin: 0 auto 2rem;
    }

    .title-notice button {
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    .title-notice button:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 6px;
    }

    .notice[hidden] {
      display: none;
    }

    .notice h3 {
      margin: 0;
      font-size: var(--font-h3);
      font-weight: 700;
      line-height: 1.5;
      color: var(--accent);
    }

    .notice h4 {
      margin: 1.2rem 0 0 0.5rem;
      font-size: var(--font-body);
      font-weight: 700;
      line-height: 1.5;
      color: #fe814a;
    }

    .notice h4+ul {
      margin-left: 1rem;
    }

    .notice p {
      padding: 0;
      margin: 0 0 1rem;
      font-size: var(--font-body);
      text-align: justify;
    }

    .notice span.bold {
      font-size: var(--font-body);
      color: var(--accent);
      font-weight: 700;
    }

    .notice span.caption {
      font-size: var(--font-caption);
      color: var(--muted);
    }

    @media (min-width:768px) {
      .notice h4 {
        max-width: 80%;
      }
    }

    @media (min-width:1024px) {
      .notice h4 {
        max-width: 80%;
      }
    }

    /*版頭*/
    .header {
      overflow: hidden;
      position: relative;
      background: url(../images/Header_bg.jpg?260528) no-repeat top center/cover;
      padding-bottom: 10px;
    }

    .header a.main-photo {
      display: block;
      text-align: center;
    }

    .header a.main-photo img {
      width: 90%;
    }

    .header a.btn-event01,
    .header a.btn-event02,
    .header a.btn-freedel {
      position: absolute;
      text-align: center;
      z-index: 999;
    }

    .header a.btn-event01 img,
    .header a.btn-event02 img {
      width: 50%;
    }

    .header a.btn-freedel img {
      width: 100%;
    }

    .header .btn-event01 {
      bottom: 55%;
      left: 15%;
      transform: translateX(-50%) translateY(50%);
    }

    .header .btn-event02 {
      bottom: 55%;
      right: 15%;
      transform: translateX(50%) translateY(50%);
    }

    .header .btn-freedel {
      bottom: 0%;
      left: 50%;
      transform: translateX(-50%);
    }

    /*選單*/
    menu {
      width: 95%;
      position: fixed;
      z-index: 99;
      bottom: -2.2%;
      right: 50%;
      transform: translateX(50%);
      background-color: rgba(255, 232, 62, 1);
      box-shadow: 0px -8px 0px rgb(255 240 125 / 100%);
      border-radius: 0;
      padding: 10px 10px 30px;
    }

    menu ul {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    menu ul li {
      margin: 0;
      text-align: center;
      font-size: var(--font-caption);
      font-weight: bold;
    }

    menu ul li a {
      text-decoration: none;
      color: #111;
      transition: color 0.3s ease;
    }

    menu ul li a:hover {
      color: #00cccc;
    }

    menu ul li img {
      width: 80%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /*框架*/
    h2.title-sp {
      text-align: center;
    }

    h2.title-sp img {
      width: 100%;
    }

    .frame00,
    .frame01,
    .frame02,
    .frame03,
    .frame04 {
      width: 90%;
      position: relative;
      border-radius: var(--inner-radius-sm);
      overflow: hidden;
      /*padding: var(--space-md);*/
    }

    .frame00 {
      background: #ffe889;
      /*background: linear-gradient(to bottom, #ffe889 43.2%, #00cdcd 43.3%);*/
      box-shadow: 0 -8px 0 rgba(255, 245, 220, 1);
    }

    .frame01 {
      background: #ff8b8b;
      /*background: linear-gradient(to bottom, #ffe8e8 22%, #ff8b8b 22.1%);*/
      box-shadow: 0 -8px 0 rgba(255, 240, 235, 1);
    }

    .frame01 h2 {
      background: #ffe8e8;
      width: 100%;
      display: block;
    }

    .frame02 {
      background: #fff94a;
      /*background: linear-gradient(to bottom, #fffdc2 22%, #fff94a 22.1%);*/
      box-shadow: 0 -8px 0 rgba(255, 245, 230, 1);
    }

    .frame02 h2 {
      background: #fffdc2;
      width: 100%;
      display: block;
    }

    .frame03 {
      background: #65d0ff;
      /*background: linear-gradient(to bottom, #e5f7ff 22%, #65d0ff 22.1%);*/
      box-shadow: 0 -8px 0 rgba(250, 253, 255, 1);
    }

    .frame03 h2 {
      background: #e5f7ff;
      width: 100%;
      display: block;
    }

    .frame04 {
      background: #ff9b65;
      /*background: linear-gradient(to bottom, #ffece2 22%, #ff9b65 22.1%);*/
      box-shadow: 0 -8px 0 rgba(255, 250, 245, 1);
    }

    .frame04 h2 {
      background: #ffece2;
      width: 100%;
      display: block;
    }

    .bottomSpace {
      margin-bottom: var(--space-xl);
    }

    .bottomSpace_end {
      margin-bottom: var(--space-lg);
    }

    /* 回到頂部按鈕 */
    .back-to-top {
      position: fixed;
      right: 12px;
      bottom: 140px;
      bottom: calc(140px + env(safe-area-inset-bottom, 0px));
      z-index: 1000;

      width: 48px;
      height: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;

      background: var(--accent, #fe5e37);
      color: var(--back-to-top-text, #fff);
      border-radius: 50%;
      box-shadow: 0px -8px 0px rgb(255 140 100 / 100%);
      text-decoration: none;

      font-family: Arial, sans-serif;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;

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

    .back-to-top svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (hover: hover) {
      .back-to-top:hover {
        transform: translateY(-3px);
        background-color: var(--muted, #00cdcd);
        box-shadow: 0px -4px 0px rgb(45 225 225 / 100%);
      }
    }

    .back-to-top:active {
      transform: translateY(-6px);
      background-color: var(--muted, #00cdcd);
      box-shadow: 0px 0px 0px rgb(45 225 225 / 100%);
    }

    .back-to-top:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }

    /*=== 平板以上 768px ===*/
    @media screen and (min-width: 768px) {
      .back-to-top {
        right: calc(var(--menu-right) + var(--menu-width) / 1.7);
        bottom: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        translate: 50% 0;

        width: 56px;
        height: 56px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .back-to-top {
        transition: none;
      }
    }

    /*斷行*/
    .mobile-br {
      /*display: initial;*/
      display: none;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {

      /*版頭*/
      .header {
        background-size: contain;
      }

      .header a.main-photo img {
        width: 70%;
      }

      .header a.btn-event01 img,
      .header a.btn-event02 img,
      .header a.btn-freedel img {
        width: 80%;
      }

      .header .btn-event01 {
        left: 18%;
      }

      .header .btn-event02 {
        right: 18%;
      }

      /*框架*/
      h2.title-sp {
        top: -60px;
      }

      h2.title-sp img {
        width: 80%;
      }

      .frame00,
      .frame01,
      .frame02,
      .frame03,
      .frame04 {
        width: 100%;
        border-width: 8px;
        border-radius: var(--inner-radius);
        /*padding: var(--space-md);*/
      }

      /*.frame00 {
        background: linear-gradient(to bottom, #ffe889 31%, #00cdcd 31.1%);
      }*/


      /*選單*/
      menu {
        width: var(--menu-width);
        border-radius: 80px;
        padding-bottom: 10px;
        bottom: 10%;
        right: var(--menu-right);
        transform: translateX(0);
      }

      menu ul {
        flex-direction: column;
      }

      menu ul li {
        margin: 8px 5px;
      }

      /*斷行*/
      .mobile-br {
        display: none;
      }
    }

    /* =========================================================
      桌機以上 1024px
    ========================================================= */
    @media screen and (min-width: 1024px) {

      /*版頭*/
      .header a.btn-event01 img,
      .header a.btn-event02 img,
      .header a.btn-freedel img {
        width: 90%;
      }

      .header .btn-event01 {
        left: 24%;
      }

      .header .btn-event02 {
        right: 24%;
      }

    }

    .footer {
      padding: 10px 0 18px;
      text-align: center;
      color: var(--accent);
      font-size: var(--font-copyright);
    }

    /* =========================================================
      桌機以上 1100px
    ========================================================= */
    @media screen and (min-width: 1100px) {

      /*版頭*/
      .header a.btn-event01 img,
      .header a.btn-event02 img,
      .header a.btn-freedel img {
        width:100%;
      }

      .header .btn-event01 {
        left: 22%;
      }

      .header .btn-event02 {
        right: 22%;
      }

    }

    /* =========================================================
      桌機以上 1200px
    ========================================================= */
    @media screen and (min-width: 1200px) {

      /*版頭*/
      .header a.btn-event01 img,
      .header a.btn-event02 img,
      .header a.btn-freedel img {
        width:110%;
      }

      .header .btn-event01 {
        left: 24%;
      }

      .header .btn-event02 {
        right: 24%;
      }

    }

    /* =========================================================
      桌機以上 1300px
    ========================================================= */
    @media screen and (min-width: 1300px) {

      /*版頭*/
      .header .btn-event01 {
        left: 28%;
      }

      .header .btn-event02 {
        right: 28%;
      }

    }

    /* ========================================
            頁簽切換效果
            productTabs 套件 - Mobile First
            使用方式：
            <div class="product-tabs" id="productTabs">
              <div class="product-tabs__nav" role="tablist" aria-label="精選人氣商品分類">
                <button class="product-tabs__button is-active" type="button" role="tab"
                  aria-selected="true" aria-controls="tab-contactlens"
                  data-tab-target="tab-contactlens">
                  name1
                </button>
              </div>
              <div class="product-tabs__panels">
                <div class="tab_item is-active" id="tab-contactlens" role="tabpanel">
                </div>
                <div class="tab_item" id="tab-frame" role="tabpanel" hidden>
                </div>
                <div class="tab_item" id="tab-mitie" role="tabpanel" hidden>
                </div>
                <div class="tab_item" id="tab-cleaner" role="tabpanel" hidden>
                </div>
              </div>
            </div>
    ======================================== */

    /* =========================
   整個 tab 區塊
   ========================= */
    #productTabs {
      width: 100%;
      margin: 0 auto;
    }

    /* =========================
   上方 tab 按鈕區
   手機版：頁簽平均排列
   ========================= */
    #productTabs .product-tabs__nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      width: 90%;
      margin: 0 auto;
      /*margin: 0 auto 16px;*/
    }


    /* =========================
   TAB 按鈕
   顏色可依你的版面自行調整
   ========================= */
    #productTabs .product-tabs__button {
      appearance: none;
      /*border: 4px solid #fff77e;*/
      border: 0;
      background-color: #fffde4;
      padding: 5px 4px;
      border-radius: 12px 12px 0 0;
      cursor: pointer;

      font-size: var(--font-body);
      line-height: 1.45;
      text-align: center;
      color: #ff6633;

      transition:
        color 0.25s ease,
        background-color 0.25s ease;
    }

    #productTabs .product-tabs__button span {
      font-size: var(--font-caption);
    }


    /* 目前選中的 tab 按鈕 */
    #productTabs .product-tabs__button.is-active {
      /*border: 4px solid #fff77e;*/
      color: #fff;
      background: var(--muted, #00cdcd);
      font-weight: 700;
    }


    /* 可自行換成你原本的底線或選取效果 */
    #productTabs .product-tabs__button.is-active::after {
      content: "";
      display: block;
      width: 42px;
      height: 2px;
      margin: 7px auto 0;
      background-color: currentColor;
    }


    /* =========================
   輪播內容外層
   修改重點：
   使用 grid 讓輪播重疊於同一位置，
   但仍保有正確寬度可供 carousel 計算。
   ========================= */
    #productTabs .product-tabs__panels {
      display: grid;
      width: 100%;
      margin: 0 auto;
      padding: 1rem;
      /*border-radius: var(--inner-radius-sm);*/
      background: var(--muted, #00cdcd);
      box-sizing: border-box;
    }


    /* =========================
   TAB 內容預設狀態
   重要：
   這裡強制 display:block，
   覆蓋原本可能存在的 display:none。
   ========================= */
    #productTabs .tab_item {
      display: block !important;

      grid-column: 1;
      grid-row: 1;

      width: 100%;
      min-width: 0;

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

      position: relative;
      z-index: 0;

      text-align: center;
      /*
         不建議在這裡加 transition，
         否則輪播切換時可能看起來又有淡入或尺寸變動。
      */
    }

    #productTabs .tab_item img {
      max-width: 100%;
      height: auto;
    }

    /* 目前顯示中的商品輪播 */
    #productTabs .tab_item.is-active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
    }


    /* =========================
   覆蓋 HTML 的 hidden 屬性
   原因：
   hidden 預設會等同 display:none，
   會讓 carousel 無法在初始化時取得正確寬度。
   ========================= */
    #productTabs .tab_item[hidden] {
      display: block !important;
    }


    /* =========================
   輪播尺寸穩定設定
   不更動你原本的輪播排版邏輯，
   僅避免圖片或 slide 撐大。
   ========================= */
    #productTabs .carousel {
      width: 100%;
      min-width: 0;
    }

    #productTabs .carousel__viewport {
      width: 100%;
      overflow: hidden;
    }

    #productTabs .carousel__track {
      width: 100%;
    }

    #productTabs .carousel__slide {
      min-width: 0;
    }

    #productTabs .carousel__slide a {
      display: block;
      width: 100%;
    }

    #productTabs .carousel__img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }


    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {

      #productTabs .product-tabs__nav {
        /* margin-bottom: 22px; */
        gap: 8px;
      }

      #productTabs .product-tabs__button {
        padding: 14px 8px;
        border-radius: var(--img-radius) var(--img-radius) 0 0;
      }

      /*#productTabs .product-tabs__panels {
        width: 100%;
        border-radius: var(--inner-radius);
      }*/

    }


    /* =========================================================
   桌機以上 1280px
   ========================================================= */
    @media screen and (min-width: 1280px) {}

    /* ========================================
            響應式產品輪播效果
            carousel-box 套件 - Mobile First
            使用方式：
            <div class="carousel-box">
                <div class="box_inn01">
                    <!-- 內容 -->
                </div>
                <div class="box_inn02">
                    <!-- 內容 -->
                </div>
            </div>
    ======================================== */

    .carousel-box {
      width: 90%;
      margin: 1rem auto;
    }

    .box_inn01 {
      padding: 1rem;
      border-radius: var(--inner-radius-sm) var(--inner-radius-sm) 0 0;
      background-color: #ff81aa;
    }

    .box_inn02 {
      padding: 1rem;
      border-radius: 0 0 var(--inner-radius-sm) var(--inner-radius-sm);
      background-color: #fdc9da;
    }

    /* =========================================================
   平板以上 768px
   ========================================================= */
    @media screen and (min-width: 768px) {
      .box_inn01 {
        border-radius: var(--inner-radius) var(--inner-radius) 0 0;
      }

      .box_inn02 {
        border-radius: 0 0 var(--inner-radius) var(--inner-radius);
      }
    }

    /* 共用 dots 容器（可自由排版） */
    .carousel-dots-box-hot,
    .carousel-dots-box-all,
    .carousel-dots-box-special {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-wrap: wrap;
      overflow: hidden;
    }

    /* 對齊工具類（會套到任何 dots 容器上：內置/外置/自訂） */
    .dots-align-start {
      justify-content: flex-start !important;
    }

    .dots-align-center {
      justify-content: center !important;
    }

    .dots-align-end {
      justify-content: flex-end !important;
    }

    .dots-align-between {
      justify-content: space-between !important;
      width: 100%;
    }

    /* 基礎樣式（外掛依據這些 class 操作） */
    .carousel {
      position: relative;
      overflow: hidden;
      border-radius: var(--img-radius);
      /*background: #ffe2a9;
      box-shadow: 0 10px 30px #ffe2a9;*/
      margin: 0px 0 10px;
      /*18px 0 10px*/
      --slides: 1;
      /* 由外掛設定 */
      --aspect-w: 1;
      /* 由外掛設定 */
      --aspect-h: 1;
    }

    /* 輪播容器 */
    .carousel__viewport {
      position: relative;
      width: 100%;
    }

    /* 輪播軌道 */
    .carousel__track {
      display: flex;
      height: 100%;
      transition: transform .5s ease;
      will-change: transform;
      touch-action: pan-y;
    }

    /* 1% 間距 + 可配置比例（預設 1:1） */
    .carousel__slide {
      flex: 0 0 calc((100% - (1% * (var(--slides) - 1))) / var(--slides));
      margin-right: 1%;
      aspect-ratio: var(--aspect-w, 1) / var(--aspect-h, 1);
      position: relative;
      height: auto;
      user-select: none;
      border-radius: var(--img-radius);
      /*box-shadow: 0 6px 16px rgba(0, 0, 0, .22);*/
      cursor: pointer;
      overflow: hidden;
    }

    .carousel__slide>.effect-inset {
      /*** 內縮效果參數 ***/
      --inset-scaleY: .965;
      --inset-scaleX: .95;

      display: block;
      width: 100%;
      height: 100%;
    }

    .carousel__slide>.effect-inset>.carousel__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 讓 loading 狀態出現 spinner */
    .carousel__slide.loading::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      z-index: 3;
    }

    /* 圖片載入完成時關掉 spinner */
    .carousel__slide:not(.loading)::before {
      display: none;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }


    /********* 圖片 ********/
    .carousel__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: initial;
    }

    /* 未載入/載入中/載入完成 */
    .carousel__img.is-loading {
      filter: blur(8px);
      transform: scale(1.02);
    }

    /* 載入完成 */
    .carousel__img.is-loaded {
      filter: none;
      transform: none;
      transition: .25s ease, transform .25s ease;
    }


    /********* 按鈕 ********/
    .carousel__nav {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      padding: 0 8px;
    }

    /*** 按鈕(Arrow) ***/
    .carousel__btn {
      pointer-events: auto;
      border: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(255, 225, 160, .45);
      color: #ff6e37;
      cursor: pointer;
      transition: transform .15s ease, background .2s ease, color .2s ease;
    }

    /*手機*/
    @media (max-width:480px) {
      .carousel__btn {
        width: 24px;
        height: 24px;
      }
    }

    /*平板以上*/
    @media (min-width:480.1px) {
      .carousel__btn {
        width: 42px;
        height: 42px;
      }
    }

    /* 滑鼠移入 */
    .carousel__btn:hover {
      background: rgba(255, 225, 160, .9);
      color: #ff6e37;
      transform: scale(1.04)
    }

    /* 按鈕按壓 */
    .carousel__btn:active {
      transform: scale(.96)
    }

    /*** 按鈕(dots) ***/
    /* dots：內置（覆蓋在圖片上） */
    .carousel__dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    /* dots：外置（圖片外 / 正常文流） */
    .carousel__dots--outside {
      position: static;
      display: flex;
      gap: 8px;
      margin: 10px 0 18px;
    }

    .carousel__dot {
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      background: rgba(255, 225, 160, .8);
      transition: transform .15s ease, background .2s ease;
    }

    /*手機*/
    @media (max-width:480px) {

      .carousel__dot {
        width: 8px;
        height: 8px;
      }
    }

    /*平板以上*/
    @media (min-width:480.1px) {
      .carousel__dot {
        width: 10px;
        height: 10px;
      }
    }

    .carousel__dot[aria-current="true"] {
      background: var(--accent);
      transform: scale(1.25)
    }

    .carousel__controls {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .carousel__control-btn {
      border: 0;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(15, 23, 42, .7);
      color: #e5e7eb;
      cursor: pointer;
    }

    /* ========================================
            滑入與內縮效果
            Effect-inset 套件 - Mobile First
            使用方式：
            <a href="#" class="effect-inset inset-orange">
                <img src="images/prd_hot01_1.jpg" alt="A1">
            </a>
    ======================================== */

    /* 共用內縮效果 */
    .effect-inset {
      /*** 內縮效果參數 ***/
      /* 內縮半徑 */
      --img-inner-radius: 11px;
      /* 內縮背景色 */
      --inset-bg: rgba(255, 255, 255, .65);
      /* 內縮縮放比例 */
      --inset-scaleY: .97;
      --inset-scaleX: .97;

      position: relative;
      display: block;
      overflow: hidden;
      border-radius: var(--img-inner-radius);
      background-color: transparent;
      transition: background-color var(--inset-duration) ease;
    }

    .effect-inset>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: inherit;
      transform: scale(1);
      transition: transform var(--inset-duration) ease;
    }

    /* 顏色主題 */
    .inset-blue {
      --inset-bg: rgba(26, 170, 237, .9);
    }

    .inset-skyblue {
      --inset-bg: rgba(26, 215, 237, .9);
    }

    .inset-greenblue {
      --inset-bg: rgba(34, 229, 172, .9);
    }

    .inset-green {
      --inset-bg: rgba(42, 212, 138, .9);
    }


    .inset-orange {
      --inset-bg: rgba(255, 142, 73, .9);
    }

    .inset-pinkorange {
      --inset-bg: rgba(255, 182, 118, .9);
    }

    .inset-grandorange {
      --inset-bg: rgba(255, 158, 97, .9);
    }

    .inset-darkorange {
      --inset-bg: rgba(246, 82, 34, .9);
    }

    .inset-pinkred {
      --inset-bg: rgba(255, 108, 108, .9);
    }

    .inset-pink {
      --inset-bg: rgba(250, 121, 188, .9);
    }



    /* 桌機：互動時才顯示 */
    @media (min-width: 1280.1px) {

      .effect-inset:hover,
      .effect-inset:focus-visible {
        background-color: var(--inset-bg);
      }

      .effect-inset:hover>img,
      .effect-inset:focus-visible>img {
        transform: scaleY(var(--inset-scaleY)) scaleX(var(--inset-scaleX));
        transform-origin: center;
      }
    }

    /* 平板以下：固定顯示 */
    @media (max-width: 1280px) {
      .effect-inset {
        /*background-color: var(--inset-bg);*/
        background-color: transparent;
      }

      .effect-inset>img {
        /* transform: scaleY(var(--inset-scaleY)) scaleX(var(--inset-scaleX)); */
        transform: scale(1);
        transform-origin: center;
      }
    }

    /* ========================================
            按鈕效果
            Arc Button 套件 - Mobile First
            使用方式：
            <a href="#" class="btn-arc arc-blue">
                <span>了解更多</span>
            </a>
    ======================================== */

    /* ========================================
            按鈕共用設定
            預設：手機版
        ======================================= */
    .btn-arc {
      /* 預設色彩，可由下方顏色 class 覆蓋 */
      --btn-color: #f8f8f8;
      --btn-hover-color: #f0f0f0;
      --btn-hover-text-color: #ffffff;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      /* 手機版：滿版按鈕 */
      width: 100%;
      min-width: 0;
      padding: 13px 20px;

      background-color: transparent;
      border: 1px solid var(--btn-color);
      border-radius: 999px;
      overflow: hidden;

      color: var(--btn-color);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.08rem;
      line-height: 1.4;
      text-decoration: none;

      box-sizing: border-box;
      cursor: pointer;

      transition:
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.3s ease,
        box-shadow 0.35s ease;
    }

    /* hover 時淡入的背景色 */
    .btn-arc::before {
      content: "";
      position: absolute;
      inset: 0;

      background-color: var(--btn-hover-color);
      opacity: 0;

      transition: opacity 0.35s ease;
    }

    /* 文字保持在 hover 背景上方 */
    .btn-arc span {
      position: relative;
      z-index: 1;
    }

    /* ========================================
            桌機滑鼠 hover 效果
        ======================================== */
    @media (hover: hover) {
      .btn-arc:hover {
        color: var(--btn-hover-text-color);
        border-color: var(--btn-hover-color);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      }

      .btn-arc:hover::before {
        opacity: 1;
      }
    }

    /* 手機與桌機點擊效果 */
    .btn-arc:active {
      color: var(--btn-hover-text-color);
      border-color: var(--btn-hover-color);
      transform: translateY(0);
    }

    .btn-arc:active::before {
      opacity: 1;
    }

    /* 鍵盤操作時的外框 */
    .btn-arc:focus-visible {
      outline: 2px solid var(--btn-color);
      outline-offset: 4px;
    }

    /* ========================================
            色彩套件
            之後自行新增或修改顏色即可
        ======================================== */

    /* 藍色 */
    .arc-blue {
      --btn-color: #4951fb;
      --btn-hover-color: #252eeb;
    }

    /* 粉彩色 */
    .arc-magenta {
      --btn-color: #ff68c4;
      --btn-hover-color: #e41895;
    }

    /* 黑灰色 */
    .arc-gray {
      --btn-color: #777777;
      --btn-hover-color: #444444;
    }

    /* 橘紅色 */
    .arc-orange {
      --btn-color: #fe5e37;
      --btn-hover-color: #de4a2f;
    }

    .arc-red {
      --btn-color: #f92b6e;
      --btn-hover-color: #d50549;
    }


    /* ========================================
            按鈕群組
            預設：手機版，上下排列
        ======================================== */
    .btn-group {
      margin: 1rem auto 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .btn-group-partner {
      width: 90%;
    }

    /* ========================================
            平板版：481px 以上
        ======================================== */
    @media screen and (min-width: 481px) {
      .btn-group {
        margin: 1.2rem auto 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
      }

      .btn-arc {
        width: auto;
        min-width: 160px;
        padding: 12px 28px;
      }

      .btn-group-partner {
        width: 100%;
      }
    }

    /* ========================================
            桌機版：769px 以上
        ======================================== */
    @media screen and (min-width: 769px) {
      .btn-arc {
        min-width: 180px;
        padding: 14px 32px;
        font-size: 18px;
      }
    }

    /* ========================================
            跑馬燈效果（連續版本）
            Marquee 套件 - Mobile First
            使用方式：
            <div class="marquee marquee-yellow">
                <div class="marquee__track">
                    <span class="marquee__item">
                        📢 最新公告：活動期間滿額享優惠，數量有限，售完為止！
                    </span>
                    <span class="marquee__item" aria-hidden="true">
                        📢 最新公告：活動期間滿額享優惠，數量有限，售完為止！
                    </span>
                </div>
            </div>
    ======================================== */

    .marquee {
      /* 可自行修改的參數 */
      /* 背景色 */
      --marquee-bg: #fff3cd;
      /* 邊框色 */
      --marquee-border: #ffe08a;
      /* 背景框陰影 */
      --marquee-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.25);
      /* 文字顏色 */
      --marquee-color: #856404;
      /* 跑動速度 */
      --marquee-speed: 20s;
      /* 文字間距 */
      --marquee-gap: 48px;
      /* 文字大小 */
      --marquee-font-size: 14px;
      /* 上下內距 */
      --marquee-padding-y: 8px;
      /* 圓角 */
      --marquee-radius: 50px;
      /* 物件上距離 */
      --marquee-margin-top: 0;
      /* 物件下距離 */
      --marquee-margin-bottom: 20px;

      width: 90%;
      /* width: 100%; */
      margin: var(--marquee-margin-top) auto var(--marquee-margin-bottom);
      overflow: hidden;
      background-color: var(--marquee-bg);
      border: 1px solid var(--marquee-border);
      border-radius: var(--marquee-radius);
      padding: var(--marquee-padding-y) 0;
      box-sizing: border-box;
      white-space: nowrap;
      /* 背景框陰影 */
      box-shadow: var(--marquee-shadow);
    }

    .marquee__track {
      display: flex;
      min-width: max-content;
      gap: var(--marquee-gap);
      animation: marquee-loop var(--marquee-speed) linear infinite;
    }

    .marquee__item {
      flex-shrink: 0;
      margin: 0;
      padding-top: .2rem;
      color: var(--marquee-color);
      font-size: var(--marquee-font-size);
      line-height: 1.5;
    }

    /* 滑鼠移入時暫停，主要適用於桌機 */
    .marquee:hover .marquee__track {
      animation-play-state: paused;
    }

    /* 跑馬燈動畫 */
    @keyframes marquee-loop {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(calc(-50% - var(--marquee-gap) / 2));
      }
    }

    /* ========================================
            色彩套件
            之後自行新增或修改顏色即可
        ======================================== */

    /* 黃色公告款 */
    .marquee-yellow {
      --marquee-bg: #fff3cd;
      --marquee-border: #ffe08a;
      --marquee-color: #856404;
    }

    /* 粉色活動款 */
    .marquee-pink {
      --marquee-bg: #fff0f5;
      --marquee-border: #f6bfd2;
      --marquee-color: #c04c75;
    }

    /* 藍色通知款 */
    .marquee-blue {
      --marquee-bg: #eef7ff;
      --marquee-border: #b8dcff;
      --marquee-color: #2774a8;
    }

    /* 紅色放送款 */
    .marquee-red {
      --marquee-bg: #ff6a9b;
      --marquee-border: #ffb5cd;
      --marquee-color: #fff540;
      --marquee-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.25);
    }


    /* =========================
   平板版｜768px 以上
    ========================= */
    @media screen and (min-width: 768px) {
      .marquee {
        --marquee-speed: 22s;
        --marquee-gap: 64px;
        --marquee-font-size: 16px;
        --marquee-padding-y: 10px;
        --marquee-radius: 50px;
      }

      .marquee__item {
        padding-top: .2rem;
        line-height: 1.5;
      }
    }

    /* =========================
   桌機版｜1280px 以上
    ========================= */
    @media screen and (min-width: 1280px) {
      .marquee {
        --marquee-speed: 24s;
        --marquee-gap: 80px;
        --marquee-font-size: 18px;
        --marquee-padding-y: 12px;
        --marquee-radius: 50px;

        max-width: 1000px;
      }
    }

    /* ========================================
   單圖按鈕輪播系統
   手機版優先 Mobile First
   預設：手機
   768px 以上：左右排列
======================================== */

    .promo-switch,
    .promo-switch * {
      box-sizing: border-box;
    }

    /* ========================================
   組件與配色
======================================== */

    .promo-switch {
      --green: #0bc69a;
      --green-light: #1bcea3;
      --green-shadow: #009e7b;

      --yellow: #ffff66;
      --yellow-shadow: #ffc52e;

      --red: #ff5050;
      --frame: #19ddb0;

      /* 手機：圖片在上、按鈕在下 */
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 20px;

      /*width: 92%;*/
      margin-inline: auto;
      padding: 1rem;

    }

    /* ========================================
   圖片區
======================================== */

    .promo-switch__visual {
      min-width: 0;
      overflow: hidden;

      aspect-ratio: 1.56;

      border: 5px solid var(--frame);
      border-radius: clamp(28px, 7vw, 54px);
      background: #fff0e7;

      transition: border-color 250ms ease;
    }

    /* 黃色按鈕：切換成黃色圖片框 */
    .promo-switch.is-yellow .promo-switch__visual {
      border-color: var(--yellow);
    }

    .promo-switch__image {
      display: block;
      width: 100%;
      height: 100%;

      /* 完整顯示圖片，不裁切文字 */
      object-fit: contain;

      opacity: 1;
      transition: opacity 250ms ease;
    }

    /* JS 切換圖片時加入此 class */
    .promo-switch__image.is-fading {
      opacity: 0;
    }

    /* 圖片連結填滿圖片框 */
    .promo-switch__link {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* 鍵盤操作時的焦點提示 */
    .promo-switch__link:focus-visible {
      outline: 3px solid #333;
      outline-offset: -5px;
    }

    /* ========================================
   按鈕排列
   手機、桌機皆維持 2 欄 × 3 排
======================================== */

    .promo-switch__buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, 1fr);
      gap: 14px 16px;

      min-width: 0;

      /* 預留按鈕底部陰影空間 */
      padding-bottom: 5px;
    }

    /* ========================================
   按鈕共用樣式
======================================== */

    .promo-btn {
      appearance: none;
      text-decoration: none;

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

      min-width: 0;
      min-height: 74px;
      padding: 12px 6px;

      border: 0;
      border-radius: 999px;

      font: inherit;
      font-size: clamp(17px, 4.5vw, 32px);
      font-weight: 700;
      line-height: 1.15;
      text-align: center;

      cursor: pointer;

      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
    }

    .promo-btn strong {
      font-weight: 800;
    }

    /* 綠色按鈕 */
    .promo-btn--green {
      color: #fff;
      background: var(--green);
      box-shadow: 0 5px 0 var(--green-shadow);
    }

    .promo-btn--green strong {
      color: var(--yellow);
    }

    /* 第三個按鈕：大包裝活動 */
    .promo-btn--green:nth-child(3) {
      background: var(--green-light);
    }

    /* 黃色按鈕 */
    .promo-btn--yellow {
      color: #37372f;
      background: var(--yellow);
      box-shadow: 0 5px 0 var(--yellow-shadow);
    }

    .promo-btn--yellow strong {
      color: var(--red);
    }

    /* ========================================
   按鈕互動狀態
======================================== */

    /* 目前選取的按鈕 */
    .promo-btn.is-active {
      outline: 3px solid var(--accent, #fe5e37);
      /* rgba(0, 0, 0, 0.2) 黑色*/
      outline-offset: -6px;
    }

    /* 按壓效果 */
    .promo-btn:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 var(--green-shadow);
    }

    .promo-btn--yellow:active {
      box-shadow: 0 2px 0 var(--yellow-shadow);
    }

    /* 鍵盤操作焦點 */
    .promo-btn:focus-visible {
      outline: 3px solid #333;
      outline-offset: -4px;
    }

    /* ========================================
   狀態訊息
======================================== */

    .promo-switch__status {
      grid-column: 1 / -1;
      margin: 0;

      color: #b02723;
      font-size: 14px;
    }

    .promo-switch__status:empty {
      display: none;
    }

    /* ========================================
   768px 以上：較大尺寸版面
======================================== */

    @media (min-width: 768px) {
      .promo-switch {
        /* 左圖 44：右側按鈕 56 */
        grid-template-columns:
          minmax(0, 44fr) minmax(0, 56fr);

        gap: 14px;
        width: min(100%, 1200px);
      }

      .promo-switch__visual {
        border-width: 8px;
        border-radius: clamp(28px, 5vw, 54px);
      }

      .promo-switch__buttons {
        margin-inline-start: 2rem;
        gap: 12px 12px;
      }

      .promo-btn {
        min-height: 72px;
        padding: 10px 8px;
        font-size: clamp(18px, 2.6vw, 32px);
      }
    }

    /* ========================================
   支援滑鼠懸停的裝置
   依輸入能力判斷，不依螢幕尺寸
======================================== */

    @media (hover: hover) {
      .promo-btn:hover {
        filter: brightness(1.04);
        transform: translateY(-2px);
      }

      .promo-btn:active {
        transform: translateY(3px);
      }
    }

    /* ========================================
   減少動畫偏好
======================================== */

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

      .promo-switch__visual,
      .promo-switch__image,
      .promo-btn {
        transition: none;
      }
    }