/* ----------------------------------------------------
   島牧拾草 - 官方網站響應式樣式表 (responsive.css)
   功能：專治 Elementor 跑版，強制覆蓋直向與橫向 Media Queries
 ---------------------------------------------------- */

/* ─── 1. 手機直向版面 (Portrait - 390px / max-width: 767px) ─── */
@media (max-width: 600px),
(max-width: 767px) and (orientation: portrait) {

  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 0. Header 單行簡約 (高度 56px) */
  .elementor-element-6acb05c {
    height: 56px !important;
    min-height: 56px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  }

  .mobile-search-trigger-btn,
  .vamtam-header-search,
  .dgwt-wcas-search-wrapp,
  .dgwt-wcas-sf-wrapp,
  .elementor-widget-search-form,
  .elementor-element-5972092,
  .elementor-menu-toggle,
  .elementor-nav-menu--main {
    display: none !important;
  }

  /* 1. 首屏 Hero Banner 按鈕 100% 滿版 (高度 40px) */
  .elementor-element-2044447 .elementor-button-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 15px !important;
  }

  .elementor-element-2044447 .elementor-button {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 100px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. 四大特色區 2x2 網格 */
  .elementor-element-e7532ed .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px 8px !important;
  }

  .elementor-element-e7532ed .elementor-widget-icon-box {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: #FAFCF7 !important;
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    border-radius: 12px !important;
  }

  .elementor-element-e7532ed .elementor-icon-box-title {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .elementor-element-e7532ed .elementor-icon-box-description {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* 3. Footer 5 大承諾特點：改為橫向滾動微條 */
  .elementor-element-3623a1b .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .elementor-element-3623a1b .elementor-column {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 170px !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(78, 91, 4, 0.12) !important;
  }
}

/* ─── 2. 手機橫向版面 (Landscape - 844px) ─── */
@media (min-width: 601px) and (max-width: 900px),
(orientation: landscape) and (max-width: 900px) {

  /* 0. 手機橫向 Header 精簡：隱藏左側漢堡按鈕與搜尋框 */
  .mobile-search-trigger-btn,
  .vamtam-header-search,
  .dgwt-wcas-search-wrapp,
  .dgwt-wcas-sf-wrapp,
  .elementor-widget-search-form,
  .elementor-element-5972092,
  .elementor-menu-toggle,
  .elementor-nav-menu--main,
  .elementor-element-0f5a7d6 {
    display: none !important;
  }

  .elementor-element-6acb05c {
    height: 52px !important;
    min-height: 52px !important;
    padding: 6px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  }
}

/* ─── 3. 901px ~ 1024px 視窗獨立處理：隱藏舊版 Header 漢堡選單與搜尋元件 (對齊 iPad / iPhone 14 Pro Max 橫向) ─── */
@media (min-width: 901px) and (max-width: 1024px) {

  .mobile-search-trigger-btn,
  .vamtam-header-search,
  .dgwt-wcas-search-wrapp,
  .dgwt-wcas-sf-wrapp,
  .elementor-widget-search-form,
  .elementor-element-86975ab,
  .elementor-element-5972092,
  .elementor-menu-toggle,
  .elementor-location-header .elementor-nav-menu--main,
  .elementor-element-0f5a7d6,
  .elementor-element-0d5f875 .elementor-menu-toggle,
  .elementor-nav-menu--dropdown {
    display: none !important;
  }

  /* iPad 頁尾 4 欄完全展開 (解決 Brand Info 位移與子連結消失) */
  .elementor-element-87e7e46 .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px 12px !important;
    padding: 24px 16px !important;
    width: 100% !important;
  }

  .elementor-element-87e7e46 .elementor-widget-nav-menu,
  .elementor-element-87e7e46 .elementor-nav-menu--main,
  .elementor-element-87e7e46 .elementor-nav-menu__container,
  .elementor-element-87e7e46 .elementor-widget-text-editor,
  .elementor-element-87e7e46 nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  .elementor-element-87e7e46 .elementor-nav-menu a.elementor-item {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555848 !important;
    display: block !important;
    padding: 3px 0 !important;
  }
}

@media (max-width: 900px) {

  /* 0.1 📱 手機橫向登入 / 會員 Modal 彈窗 100% 全可見極致重置 (對齊圖 2 規範) */
  .dialog-type-lightbox,
  .elementor-popup-modal,
  .dialog-widget,
  .dialog-lightbox-widget {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  .dialog-widget-content,
  .elementor-popup-modal .dialog-widget-content,
  .elementor-location-popup,
  .elementor-location-popup .elementor-section-wrap,
  .dialog-message,
  .dialog-lightbox-message {
    max-height: 84vh !important;
    height: auto !important;
    min-height: 0 !important;
    width: 92% !important;
    max-width: 400px !important;
    border-radius: 20px !important;
    border: 3px solid #2E5B4B !important;
    background: #FFFFFF !important;
    padding: 8px 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
    margin: auto !important;
    position: relative !important;
  }

  /* 根治病因 1：解開 Elementor 彈窗內部所有 Section / Container 的巨額 Padding 與高度 */
  .dialog-widget-content .elementor-section,
  .elementor-location-popup .elementor-section,
  .dialog-widget-content .elementor-container,
  .elementor-location-popup .elementor-container,
  .dialog-widget-content .elementor-column,
  .elementor-location-popup .elementor-column,
  .dialog-widget-content .elementor-widget-wrap,
  .elementor-location-popup .elementor-widget-wrap {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 根治病因 2：彈窗頂部 Logo 尺寸縮微，確保 100% 露面 */
  .dialog-widget-content img,
  .elementor-location-popup img {
    max-height: 28px !important;
    width: auto !important;
    margin: 2px auto 4px auto !important;
    display: block !important;
  }

  /* 標題與內文間距極致緊湊 */
  .dialog-widget-content h2,
  .dialog-widget-content h3,
  .dialog-widget-content .elementor-heading-title,
  .elementor-location-popup h2,
  .elementor-location-popup h3,
  .elementor-location-popup .elementor-heading-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  .dialog-widget-content p,
  .elementor-location-popup p,
  .dialog-widget-content span,
  .elementor-location-popup span {
    font-size: 10px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* 輸入框與按鈕高度緊湊化 */
  .dialog-widget-content input,
  .elementor-location-popup input {
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }

  .dialog-widget-content button,
  .elementor-location-popup button,
  .dialog-widget-content .elementor-button,
  .elementor-location-popup .elementor-button {
    height: 34px !important;
    font-size: 13px !important;
    line-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 100px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* 右上角 ✕ 關閉按鈕定位 */
  .dialog-close-button,
  .dialog-lightbox-close-button,
  .elementor-popup-modal .eicon-close {
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    font-size: 18px !important;
    color: #555848 !important;
    z-index: 99999 !important;
    display: block !important;
    opacity: 1 !important;
  }

  /* 底部註冊連結 */
  .dialog-widget-content .register-link,
  .elementor-location-popup .register-link,
  .dialog-widget-content footer,
  .elementor-location-popup footer {
    font-size: 11px !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    display: block !important;
  }

  /* 1. 橫向 Hero Banner (修復偏右問題：100% 絕對正中央置中) */
  .custom-banner-side-img,
  .custom-banner-side-img.left-img,
  .custom-banner-side-img.right-img {
    display: none !important;
    /* 完全隱藏左圖與右圖 */
    width: 0 !important;
    height: 0 !important;
  }

  .elementor-element-f582ce3,
  .custom-banner-container,
  .elementor-element-f582ce3 .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
    /* 清除所有 2 欄 grid */
  }

  /* 強制將 Column 寬度重置為 100% 並正中央居中，徹底消除原生的 margin-left/width 偏右 */
  .elementor-element-f582ce3 .elementor-column,
  .elementor-element-b5e341d,
  .elementor-element-f582ce3 .elementor-widget-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 強制每一個標題與文字組件 100% 居中 */
  .elementor-element-b5e341d .elementor-widget-container,
  .elementor-element-b5e341d .elementor-heading-title,
  .elementor-element-b5e341d .e-text-path,
  .elementor-element-b5e341d svg {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* 📱 2. 手機橫向 / 平板 (601px ~ 1024px)：獨立對齊「島牧拾草」於 U·x·U 正下方 */
  .elementor-element-91175fb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(1px) !important;
    /* 👈 橫向獨立平移對齊 U·x·U 正下方 */
    width: 100% !important;
  }

  .elementor-element-91175fb svg {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 240px !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 8px !important;
  }

  .elementor-element-91175fb text,
  .elementor-element-91175fb svg text,
  .elementor-element-91175fb textPath {
    font-size: 26px !important;
    font-weight: 700 !important;
    text-anchor: middle !important;
    font-display: swap !important;
    text-rendering: optimizeLegibility !important;
  }

  .elementor-element-91175fb .e-text-path {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .elementor-element-2044447 .elementor-button-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    width: 100% !important;
  }

  .elementor-element-2044447 a.elementor-button:not(.btn-friendly-products) {
    background-color: #002842 !important;
    /* 主鈕底：#002842 */
    border-color: #002842 !important;
    color: #FFFFFF !important;
    width: auto !important;
    padding: 0 20px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 100px !important;
  }

  .elementor-element-2044447 a.btn-friendly-products {
    background-color: #987400 !important;
    /* 次鈕底：#987400 */
    border-color: #987400 !important;
    color: #FFFFFF !important;
    width: auto !important;
    padding: 0 20px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 100px !important;
  }

  /* 2. 四大特色區 (圖 2、3 修正：關閉直排寫法，橫向 4 欄一字排開 grid-cols-4) */
  .elementor-element-721bf80 .elementor-widget-wrap,
  .elementor-element-e7532ed .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    /* 橫向 4 欄一字排開 (1fr x 4) */
    gap: 8px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-element-721bf80 .elementor-widget-icon-box,
  .elementor-element-e7532ed .elementor-widget-icon-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background-color: #FAFCF7 !important;
    /* 奶綠光底 #FAFCF7 */
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    /* 邊框：#4E5B04/15 */
    border-radius: 12px !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    writing-mode: horizontal-tb !important;
    /* 徹底關閉 writing-mode: vertical-rl */
    text-orientation: mixed !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-wrapper,
  .elementor-element-e7532ed .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    /* Icon 在上，標題與內文在下 */
    align-items: center !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
    width: 100% !important;
  }

  .elementor-element-721bf80 .elementor-icon,
  .elementor-element-e7532ed .elementor-icon {
    font-size: 22px !important;
    color: #4E5B04 !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-title,
  .elementor-element-721bf80 .elementor-icon-box-title span,
  .elementor-element-e7532ed .elementor-icon-box-title,
  .elementor-element-e7532ed .elementor-icon-box-title span {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #20201F !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
    display: block !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-description,
  .elementor-element-e7532ed .elementor-icon-box-description {
    font-size: 9.5px !important;
    color: #555848 !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 3. 分類卡片區 (完整還原圖 4 的 5 個卡片，修復第 5 卡被隱藏) */
  /* 第一區塊 (2 欄)：月配箱 (50%) + 自耕草 (50%) */
  .elementor-element-3d41812 .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 欄 */
    gap: 12px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 第二區塊 (3 欄)：草餅 (33.3%) + 保健品 (33.3%) + 人寵好物 (33.3%) */
  .elementor-element-6b4b306 .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 欄 100% 露出 */
    gap: 12px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-element-3d41812 .elementor-column,
  .elementor-element-6b4b306 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }

  .elementor-element-3d41812 .elementor-cta,
  .elementor-element-6b4b306 .elementor-cta {
    background-color: #FFFFFF !important;
    /* 卡片底：純白 #FFFFFF */
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    /* 邊框：#4E5B04/15 */
    border-radius: 14px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .elementor-element-3d41812 .elementor-cta__bg-wrapper,
  .elementor-element-6b4b306 .elementor-cta__bg-wrapper {
    height: 110px !important;
    max-height: 110px !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .elementor-element-3d41812 .elementor-cta__bg,
  .elementor-element-6b4b306 .elementor-cta__bg {
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .elementor-element-3d41812 .elementor-cta__content,
  .elementor-element-6b4b306 .elementor-cta__content {
    padding: 8px 6px !important;
    text-align: center !important;
  }

  .elementor-element-3d41812 .elementor-cta__description,
  .elementor-element-6b4b306 .elementor-cta__description {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #20201F !important;
    margin-top: 2px !important;
  }

  .elementor-element-3d41812 .elementor-cta__title,
  .elementor-element-6b4b306 .elementor-cta__title {
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: #555848 !important;
  }

  /* 4. Footer 區塊 (圖 5 修復：顯現消失的導覽連結) */
  .elementor-element-87e7e46 {
    background-color: #F7F7F5 !important;
  }

  .elementor-element-87e7e46 .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2x2 欄對齊 (對齊圖 4 規範：Brand Info 放入第二行右欄橘色框位置) */
    gap: 16px 12px !important;
    padding: 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-element-87e7e46 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  /* 強制讓消失的導覽選單 100% 顯現並消除左側內距與外距，對齊最左垂直線 */
  .elementor-element-87e7e46 .elementor-column,
  .elementor-element-87e7e46 .elementor-widget-wrap,
  .elementor-element-87e7e46 .elementor-widget-heading,
  .elementor-element-87e7e46 .elementor-widget-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  .elementor-element-87e7e46 .elementor-widget-nav-menu,
  .elementor-element-87e7e46 .elementor-nav-menu--main,
  .elementor-element-87e7e46 .elementor-nav-menu__container,
  .elementor-element-87e7e46 .elementor-widget-text-editor,
  .elementor-element-87e7e46 nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .elementor-element-87e7e46 .elementor-heading-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #002842 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
  }

  .elementor-element-87e7e46 .elementor-nav-menu ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* 連結顏色：沉穩墨灰 #20201F */
  .elementor-element-87e7e46 .elementor-nav-menu a.elementor-item {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #20201F !important;
    /* 沉穩墨灰 #20201F */
    padding: 3px 0 !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
  }

  .elementor-element-87e7e46 .elementor-nav-menu a.elementor-item:hover {
    color: #4E5B04 !important;
  }

  .elementor-element-87e7e46 .elementor-widget-text-editor p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #555848 !important;
    margin: 0 !important;
  }
}

@media (max-width: 400px) {
  .elementor-element-87e7e46 .elementor-heading-title {
    font-size: 11px !important;
  }
}

/* ====================================================
   📱 iPhone 12 Pro (390px 直向) 專用排版優化 (零改動既有功能/Web排版)
   ==================================================== */
@media (max-width: 600px),
(max-width: 767px) and (orientation: portrait) {

  /* 1. 首屏 Banner (Hero Section) 呼吸感優化 */
  .elementor-element-f582ce3 {
    padding: 10px 16px 20px 16px !important;
    margin-top: -45px !important;
    margin-bottom: 20px !important;
    /* 下方留出 20px 白色間隙，增加高雅呼吸感 */
  }

  /* 📱 3. 手機直向 (<= 600px / Portrait)：獨立對齊「島牧拾草」(保持現行正常置中) */
  .elementor-element-91175fb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    /* 👈 直向保持現行 100% 正常置中 */
    width: 100% !important;
  }

  .elementor-element-91175fb svg {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 360px !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 8px !important;
  }

  .elementor-element-91175fb text,
  .elementor-element-91175fb svg text,
  .elementor-element-91175fb textPath {
    font-size: 36px !important;
    font-weight: 700 !important;
    text-anchor: middle !important;
    font-display: swap !important;
    text-rendering: optimizeLegibility !important;
  }

  .elementor-element-91175fb .e-text-path {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 弧形文字與按鈕間距：推開 12px gap */
  .elementor-element-0ae990c {
    margin-bottom: 12px !important;
  }

  .elementor-element-2044447 .elementor-button-wrapper {
    gap: 12px !important;
    /* 按鈕間距 gap: 12px */
    margin-top: 12px !important;
  }

  /* 主按鈕與次按鈕底色精準指定 */
  .elementor-element-2044447 a.elementor-button:not(.btn-friendly-products) {
    background-color: #002842 !important;
    /* 主鈕底：#002842 */
    border-color: #002842 !important;
    color: #FFFFFF !important;
  }

  .elementor-element-2044447 a.btn-friendly-products {
    background-color: #987400 !important;
    /* 次鈕底：#987400 */
    border-color: #987400 !important;
    color: #FFFFFF !important;
  }

  /* 2. 四大特色卡片 (Feature Grid)：2x2 精緻微型化 */
  .elementor-element-721bf80 .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* 2x2 雙欄 */
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  .elementor-element-721bf80 .elementor-widget-icon-box {
    background-color: #FAFCF7 !important;
    /* 奶綠光底 #FAFCF7 */
    border-radius: 12px !important;
    padding: 12px !important;
    /* 內內距 padding: 12px */
    border: 1px solid rgba(78, 91, 4, 0.08) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .elementor-element-721bf80 .elementor-icon {
    font-size: 20px !important;
    /* Icon 降至 20px */
    color: #4E5B04 !important;
    /* Color: #4E5B04 */
    margin-bottom: 6px !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-title span {
    font-size: 13px !important;
    /* 標題 13px (Bold #20201F) */
    font-weight: 800 !important;
    color: #20201F !important;
  }

  .elementor-element-721bf80 .elementor-icon-box-description {
    font-size: 10px !important;
    color: #555848 !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
  }

  /* 3. 分類產品卡片區：瘦身縮微，圖片與容器高度拉小 (圖三紅框修復) */
  .elementor-element-3d41812 .elementor-container,
  .elementor-element-6b4b306 .elementor-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px 12px 0 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-element-3d41812 .elementor-column,
  .elementor-element-6b4b306 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }

  .elementor-element-3d41812 .elementor-cta__bg-wrapper,
  .elementor-element-6b4b306 .elementor-cta__bg-wrapper {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .elementor-element-3d41812 .elementor-cta__bg,
  .elementor-element-6b4b306 .elementor-cta__bg {
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .elementor-element-3d41812 .elementor-cta__content,
  .elementor-element-6b4b306 .elementor-cta__content {
    padding: 6px 4px !important;
    text-align: center !important;
  }

  .elementor-element-3d41812 .elementor-cta__description,
  .elementor-element-6b4b306 .elementor-cta__description {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #20201F !important;
    margin-top: 2px !important;
  }

  .elementor-element-3d41812 .elementor-cta__title,
  .elementor-element-6b4b306 .elementor-cta__title {
    font-size: 9px !important;
    line-height: 1.25 !important;
    color: #555848 !important;
  }

  /* 3.5. 島牧熱銷推薦上方空白縮減 (覆蓋 desktop 250px 大間距) */
  .elementor-element-4e43f41 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .elementor-element-3d41812,
  .elementor-element-6b4b306 {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. 島牧熱銷推薦：解鎖全部父層 overflow，防首張卡片被裁切 */
  /* 解鎖所有 Elementor 父層容器的 overflow hidden */
  .elementor-section,
  .elementor-element-aec6fe1,
  .elementor-element-aec6fe1>.elementor-column-wrap,
  .elementor-element-aec6fe1>.elementor-widget-wrap,
  .elementor-element-eaed2a4,
  .elementor-element-eaed2a4 .elementor-widget-container {
    overflow: visible !important;
  }

  .product-carousel-container {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. 手機直向：島牧熱銷推薦 軸向滾動軌道 (高權重覆蓋 post-600.css) */
  .elementor-600 .elementor-element.elementor-element-eaed2a4.elementor-wc-products ul.products,
  .elementor-element-eaed2a4.elementor-wc-products ul.products,
  .elementor-element-eaed2a4 ul.products,
  .product-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: none;
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    gap: 16px !important;
    padding: 10px 16px 20px 5px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    list-style: none !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    grid-template-columns: none !important;
  }

  /* 隱藏 Webkit 原生滾動軸 */
  .product-carousel-track::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .elementor-element-080ceaa {
    display: none !important;
  }

  /* 卡片高權重鎖定固定寬度 250px，消除 3D transform 歪斜與小數點算錯問題 */
  .elementor-600 .elementor-element.elementor-element-eaed2a4.elementor-wc-products ul.products li.product,
  .elementor-element-eaed2a4 ul.products li.product,
  li.product-card-custom,
  .product-carousel-track .product,
  li.product-card-custom.card-center,
  li.product-card-custom.card-left,
  li.product-card-custom.card-right,
  li.product-card-custom.card-hidden-left,
  li.product-card-custom.card-hidden-right,
  li.product-card-custom.card-invisible {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none !important;
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* 強制確保直向模式下，卡片寬度為 250px，避免被 .products-grid 等規則覆蓋導致無法露出第二張 */
  body .elementor-wc-products ul.products li.product.product-card-custom {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
  }

  /* 4. 卡片精緻縮圖 (Product Thumb)：依圖2精準規範 1:1 滿版預覽圖、高度 140px、圓角 border-radius: 10px、object-fit: cover */
  .product-card-custom .product-card-top {
    height: 140px !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .product-card-custom .product-main-img {
    height: 140px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* 標題允許自動換行完整顯示 (消除 ... 截斷)，價格自動換行，前往查看按鈕絕不換行 */
  .product-card-custom .product-title-custom {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #20201F !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    /* 允許過長時自動換行完整顯示 */
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    word-break: break-word !important;
    width: 100% !important;
    height: auto !important;
  }

  .product-card-custom .product-card-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    /* 按鈕與價格同排，按鈕絕不換行 */
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  .product-card-custom .product-price-custom {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .product-card-custom .product-price-custom .sale-price {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #4E5B04 !important;
    white-space: normal !important;
    /* 價格過長時自動換行 */
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  .product-card-custom .product-price-custom .original-price {
    font-size: 10px !important;
    color: #B5B5B5 !important;
    white-space: nowrap !important;
  }

  .target-group-value {
    display: inline-block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  /* 5. 底部互動按鈕 (Action CTA)：膠囊按鈕防換行擠壓 */
  .product-card-custom .go-detail-btn {
    white-space: nowrap !important;
    /* 前往查看按鈕絕不換行 */
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* 5. 底部互動按鈕 (Action CTA)：膠囊按鈕防換行擠壓 */
  .product-card-custom .go-detail-btn {
    background-color: #2E5B4B !important;
    color: #FFFFFF !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 100px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    /* 👈 強制單行排版，防按鈕變形 */
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
  }

  .product-card-custom .go-detail-btn:hover,
  .product-card-custom .go-detail-btn:active {
    background-color: #203f34 !important;
    color: #FFFFFF !important;
  }

  /* 卡片與下方「探索更多」按鈕間距縮至 16px */
  .explore-more-container {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  /* 縮短頁尾 (Footer) 上方的間距 (覆蓋 style.css 140px 大外距) */
  .main-footer,
  #footer-placeholder {
    margin-top: 10px !important;
  }

  .explore-more-btn {
    border: 1.5px solid #4E5B04 !important;
    /* border: 1.5px solid #4E5B04 */
    font-size: 13px !important;
    /* 字級 13px (Bold) */
    font-weight: 800 !important;
    color: #4E5B04 !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
  }

  .explore-more-btn:active,
  .explore-more-btn:hover {
    transform: scale(1.03) !important;
    /* 點擊/觸控微放大反饋 */
    background-color: rgba(78, 91, 4, 0.05) !important;
  }

  /* 5. Footer 訂閱輸入框與按鈕 (Newsletter Form) */
  .elementor-element-fae01a9 .elementor-form-fields-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    /* 上下 gap: 10px 隔開 */
    width: 100% !important;
  }

  .elementor-element-fae01a9 .elementor-field-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-element-fae01a9 input#form-field-email {
    height: 42px !important;
    /* 42px (rounded-xl) */
    background-color: #FFFFFF !important;
    /* 輸入框底：純白 #FFFFFF */
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    color: #20201F !important;
    box-sizing: border-box !important;
  }

  .elementor-element-fae01a9 button[type="submit"] {
    height: 42px !important;
    background-color: #002842 !important;
    /* 按鈕底：深海藍 #002842 */
    color: #FFFFFF !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
  }

  .elementor-element-fae01a9 button[type="submit"]:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
  }

  /* 6. Footer 頁尾全區塊精減緊湊化，解決拉太長問題 */
  .elementor-location-footer .elementor-section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 6.1. Back to top 區塊緊緻化 */
  .elementor-element-e99dd74 {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
  }

  /* 6.2. 5大承諾區塊 (週一至週五...) 上下內距 */
  .elementor-element-3623a1b {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* 6.3. 4專欄網格 (Customer Service, DaoMu Botanic, etc.) */
  .elementor-element-87e7e46 {
    background-color: #F7F7F5 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .elementor-element-87e7e46 .elementor-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 14px !important;
    /* 縮小行距從 20px -> 12px */
    padding: 12px 16px !important;
    /* 縮小內距從 24px -> 12px */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .elementor-element-87e7e46 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }

  .elementor-element-87e7e46 .elementor-heading-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #002842 !important;
    margin-bottom: 4px !important;
    word-break: keep-all !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
  }

  .elementor-element-87e7e46 .elementor-widget-nav-menu,
  .elementor-element-87e7e46 .elementor-nav-menu--main,
  .elementor-element-87e7e46 .elementor-nav-menu__container,
  .elementor-element-87e7e46 .elementor-widget-text-editor {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  .elementor-element-87e7e46 .elementor-nav-menu ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .elementor-element-87e7e46 .elementor-nav-menu a.elementor-item {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #20201F !important;
    padding: 1px 0 !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
  }

  .elementor-element-87e7e46 .elementor-widget-text-editor p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #555848 !important;
    margin: 0 !important;
    word-break: break-all !important;
  }

  /* 6.4. 底部訂閱與 Social/Copyright 區塊 (7663a07) 緊緻化 */
  .elementor-element-7663a07 {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
    background-color: #F7F7F5 !important;
  }

  .elementor-element-7663a07 .elementor-container {
    padding: 0 16px !important;
  }

  .elementor-element-7663a07 .elementor-widget {
    margin-bottom: 8px !important;
  }

  .elementor-element-7663a07 .elementor-heading-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
  }

  /* 7. product.html 手機直向 (Mobile Portrait 390px) 橫向膠囊篩選列與黃金雙欄網格 */
  .shop-layout {
    padding: 12px 14px !important;
  }

  .shop-header {
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  .shop-header h1 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .shop-header p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* 7.1. 橫向滾動分類標籤列 (極簡下劃線頁籤 - 圖 2 UI 規範) */
  .category-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 28px !important;
    padding: 4px 4px 8px 4px !important;
    margin-bottom: 24px !important;
    justify-content: flex-start !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    /* 隱藏原生滾動軸 Firefox */
    -ms-overflow-style: none !important;
  }

  .category-tabs::-webkit-scrollbar {
    display: none !important;
    /* 隱藏 Webkit 原生滾動軸 */
  }

  .category-tabs li {
    flex: 0 0 auto !important;
    list-style: none !important;
    margin: 0 !important;
  }

  /* 3. 預設標籤 (Default Tab: 下劃線風格) */
  .category-tab-btn,
  .custom-dropdown-container button#petDropdownBtn {
    background: transparent !important;
    color: #555848 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 4px 12px 4px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    box-shadow: none !important;
    position: relative !important;
  }

  /* 4. 懸停互動特效 (Hover State) */
  .category-tab-btn:hover:not(.active),
  .custom-dropdown-container button#petDropdownBtn:hover:not(.active) {
    background: transparent !important;
    color: #4E5B04 !important;
  }

  .category-tab-btn:hover:not(.active) i,
  .custom-dropdown-container button#petDropdownBtn:hover:not(.active) i,
  .category-tab-btn:hover:not(.active) span,
  .custom-dropdown-container button#petDropdownBtn:hover:not(.active) span {
    color: #4E5B04 !important;
  }

  /* 2. 作用中標籤 (Active Tab: 精選下劃線標記) */
  .category-tab-btn.active,
  .custom-dropdown-container button#petDropdownBtn.active {
    background: transparent !important;
    color: #4E5B04 !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .category-tab-btn.active::after,
  .custom-dropdown-container button#petDropdownBtn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #4E5B04 !important;
    border-radius: 2px !important;
  }

  .category-tab-btn.active span,
  .category-tab-btn.active i,
  .custom-dropdown-container button#petDropdownBtn.active i {
    color: #4E5B04 !important;
  }

  /* 下拉選單手感彈出微調 (防止被 overflow 遮擋與左側邊界裁切) */
  .custom-dropdown-menu {
    transform: none !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(78, 91, 4, 0.18) !important;
    z-index: 999999 !important;
    min-width: 140px !important;
    padding: 6px 0 !important;
  }

  /* 7.2. 黃金雙欄商品網格 (Product Grid 2-Col) */
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 強制雙欄 2-Col */
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 日系手帳風格卡片本體 */
  .products-grid .product-card-custom {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .products-grid .product-card-custom:active {
    transform: scale(0.98) !important;
  }

  /* 1:1 正方形商品縮圖 */
  .products-grid .product-card-top {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    /* 1:1 正方形 */
    height: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #F7F9F6 !important;
  }

  .products-grid .product-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  /* 卡片下半部細節與字級 */
  .products-grid .product-card-bottom {
    padding: 6px 2px 2px 2px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
  }

  .products-grid .product-title-brand-wrap {
    height: auto !important;
    min-height: 0 !important;
    gap: 2px !important;
  }

  .products-grid .product-title-custom {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #20201F !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .products-grid .product-brand-info {
    margin-left: 0 !important;
    gap: 6px !important;
  }

  .products-grid .product-brand-info .brand-text {
    font-size: 11px !important;
  }

  .products-grid .product-brand-info img.brand-avatar {
    width: 16px !important;
    height: 16px !important;
  }

  .products-grid .product-sales-volume {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* 價格與前往按鈕 */
  .products-grid .product-card-footer {
    margin-top: 6px !important;
    align-items: flex-end !important;
  }

  .products-grid .product-price-custom .sale-price {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #4E5B04 !important;
  }

  .products-grid .go-detail-btn {
    font-size: 11px !important;
    margin-right: 0 !important;
  }

  /* 購物車圖示按鈕微縮適應 2-Col */
  .products-grid .product-card-top .cart-btn {
    width: 36px !important;
    height: 36px !important;
    top: 6px !important;
    right: 6px !important;
    border-radius: 8px !important;
  }

  .products-grid .product-card-top .cart-btn img {
    width: 20px !important;
    height: 20px !important;
  }

  /* 8. pages/product.html?slug=xxx 商品詳細頁 (Mobile Portrait 390px) 藝廊重構與防裁切鎖定 */
  .product-page {
    padding: 8px 12px !important;
    margin: 8px auto 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 上下堆疊式商品藝廊 (Stacked Product Gallery) */
  .product-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 8.1. 主圖容器 (Mobile Main Image - 100% 滿版正方形大圖盒, 高度 320px) */
  .gallery {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .gallery-main {
    width: 100% !important;
    height: 320px !important;
    border-radius: 14px !important;
    border: 1px solid #DADBD9 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  }

  .gallery-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* 8.2. 縮圖導航列容器 (Thumbnail Track - 水平橫向捲動列) */
  .gallery-thumbs {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .gallery-thumbs::-webkit-scrollbar {
    display: none !important;
  }

  /* 單張小縮圖 (Thumbnail Item: 56px * 56px, 圓角 8px, 邊框 1px #DADBD9) */
  .gallery-thumb {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 8px !important;
    border: 1px solid #DADBD9 !important;
    background: #FFFFFF !important;
    padding: 2px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
  }

  /* 縮圖選中高亮狀態 (Active Thumb: 2px solid #4E5B04 品牌草綠邊框 + 陰影) */
  .gallery-thumb.active {
    border: 2px solid #4E5B04 !important;
    background: rgba(229, 233, 216, 0.4) !important;
    box-shadow: 0 2px 8px rgba(78, 91, 4, 0.15) !important;
  }

  .gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  /* 8.3. 商品詳情資訊與防裁切鎖定 (Overflow Guard) */
  .product-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }

  .product-name {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .price-block {
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .info-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .info-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .info-key {
    width: 76px !important;
    min-width: 76px !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  .info-val {
    padding: 10px 10px !important;
    font-size: 12px !important;
    word-break: break-word !important;
    overflow: hidden !important;
    max-width: calc(100% - 76px) !important;
  }

  /* 按鈕群組彈性自適應 (避免 180px 強制寬度爆版裁切) */
  .cta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
  }

  .product-info .btn-primary,
  .product-info .btn-secondary {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .product-info .btn-secondary {
    padding-left: 0 !important;
    /* 清除 desktop 寫死的 50px padding */
  }

  .product-info .btn-secondary img {
    position: static !important;
    transform: none !important;
    margin-right: 6px !important;
  }

  /* 9. 全域 Toast 提示訊息 (Mobile Top Center - 手機直向頂部中央彈出) */
  #authToast,
  .toast {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    z-index: 99999999 !important;
  }

  #authToast.active,
  .toast.show,
  .toast.active {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
  }

  /* ====================================================
   🔐 手機橫向模式 (Landscape) 專用：會員登入彈窗 100% 完整露出極致覆蓋
   ==================================================== */
  @media (max-height: 500px) and (orientation: landscape),
  (max-width: 950px) and (orientation: landscape),
  (min-width: 601px) and (max-width: 950px) {

    /* 確保彈窗背景遮罩採用 Flex 置中 */
    #loginModal.auth-modal-overlay,
    .auth-modal-overlay {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 6px !important;
      box-sizing: border-box !important;
    }

    /* 彈窗本體：邊框 3px #2E5B4B, 圓角 20px, 限高 86vh 內部順暢滾動 */
    #loginModal .auth-modal-container,
    .auth-modal-container {
      max-height: 86vh !important;
      height: auto !important;
      width: 92% !important;
      max-width: 380px !important;
      padding: 10px 18px !important;
      border-radius: 20px !important;
      border: 3px solid #2E5B4B !important;
      background-color: #FFFFFF !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
      box-sizing: border-box !important;
      margin: auto !important;
      position: relative !important;
    }

    /* 強行擊碎 header.html HTML 內聯 margin-bottom: 25px 的巨額外距 */
    #loginModal .auth-modal-container>div:first-of-type,
    .auth-modal-container>div:first-of-type {
      margin-bottom: 8px !important;
      text-align: center !important;
    }

    /* 強行擊碎 header.html HTML 內聯 height: 50px; margin-bottom: 15px; 的 Logo */
    #loginModal .auth-modal-container img,
    .auth-modal-container img {
      height: 28px !important;
      max-height: 28px !important;
      width: auto !important;
      margin: 0 auto 4px auto !important;
      display: block !important;
      object-fit: contain !important;
    }

    #loginModal h3#authModalTitle,
    .auth-modal-container h3 {
      font-size: 15px !important;
      font-weight: 800 !important;
      margin-bottom: 2px !important;
      margin-top: 0 !important;
      line-height: 1.2 !important;
    }

    #loginModal p#authModalDesc,
    .auth-modal-container p {
      font-size: 10.5px !important;
      margin-top: 2px !important;
      margin-bottom: 6px !important;
      line-height: 1.2 !important;
    }

    /* 輸入框緊湊化 */
    #loginModal .auth-input-group,
    .auth-modal-container .auth-input-group {
      margin-bottom: 6px !important;
      gap: 2px !important;
    }

    #loginModal .auth-input-group label,
    .auth-modal-container .auth-input-group label {
      font-size: 11px !important;
      margin-bottom: 2px !important;
    }

    #loginModal .auth-input-group input,
    .auth-modal-container .auth-input-group input {
      height: 32px !important;
      font-size: 12px !important;
      padding: 0 10px !important;
      border-radius: 8px !important;
    }

    /* 登入按鈕緊湊化 */
    #loginModal button.auth-submit-btn,
    .auth-modal-container button.auth-submit-btn {
      height: 34px !important;
      font-size: 13.5px !important;
      line-height: 34px !important;
      padding: 0 !important;
      border-radius: 100px !important;
      margin-top: 4px !important;
    }

    /* 強行擊碎 header.html HTML 內聯 margin-top: 25px; padding-top: 15px; 的底部註冊區 */
    #loginModal #authFooterLinks,
    .auth-modal-container #authFooterLinks {
      margin-top: 8px !important;
      padding-top: 6px !important;
      font-size: 11.5px !important;
      border-top: 1px dashed #e2e8f0 !important;
      display: block !important;
    }

    /* 右上角 ✕ 關閉按鈕 */
    #loginModal .auth-modal-close,
    .auth-modal-container .auth-modal-close {
      position: absolute !important;
      top: 8px !important;
      right: 12px !important;
      font-size: 22px !important;
      color: #555848 !important;
      cursor: pointer !important;
    }
  }

  /* ====================================================
   📱 story.html 手機直向 (Mobile Portrait 390px / max-width: 767px) 全面優化
   ==================================================== */
  @media (max-width: 767px) {

    /* 1. 攔截並解除垂直直排（Writing Mode Normalization）：全站強制橫向書寫 */
    html,
    body,
    main,
    section,
    div,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    li,
    button,
    td,
    th {
      writing-mode: horizontal-tb !important;
      text-orientation: mixed !important;
    }

    /* 2. 頁面外框與 Section 間距優化 */
    section {
      padding: 44px 16px !important;
      overflow-x: hidden !important;
    }

    .section-container {
      padding: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    /* 3. Hero Banner 手機縮放 */
    .hero-banner {
      padding: 80px 16px 50px 16px !important;
      min-height: auto !important;
    }

    .hero-banner h1 {
      font-size: 24px !important;
      line-height: 1.35 !important;
      margin-bottom: 16px !important;
      letter-spacing: 0.5px !important;
    }

    .hero-banner p.lead {
      font-size: 14px !important;
      line-height: 1.6 !important;
    }

    .section-title-wrap {
      margin-bottom: 28px !important;
    }

    .section-title-wrap h2,
    .section-title-wrap h3 {
      font-size: 22px !important;
      line-height: 1.35 !important;
    }

    .story-p {
      font-size: 14.5px !important;
      line-height: 1.75 !important;
      margin-bottom: 14px !important;
    }

    /* 4. 多欄結構轉為垂直單欄堆疊 (Responsive Stack) */
    .burden-grid,
    .eco-grid,
    .species-grid,
    .highlights-grid,
    .collab-grid,
    .stats-layout {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
      width: 100% !important;
    }

    /* 5. 圖片、影片與 SVG 容器 100% 響應縮放 (防超寬破版) */
    img,
    video,
    svg,
    iframe {
      max-width: 100% !important;
      height: auto !important;
    }

    .diagram-container,
    .route-visual,
    .video-placeholder-container {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .route-visual {
      padding: 16px 12px !important;
    }

    /* 6. 特殊卡片與物種模組優化 */
    .species-card,
    .collab-card,
    .tech-card {
      padding: 24px 20px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .highlights-wrap {
      padding: 30px 18px !important;
    }

    .highlight-item {
      gap: 12px !important;
    }

    /* 7. D2C 訂閱卡片與輪播 (Carousel) 在手機直向的滑展優化 */
    .sub-carousel-container {
      height: auto !important;
      min-height: 660px !important;
      margin: 40px auto 20px auto !important;
    }

    .sub-card {
      width: 90% !important;
      max-width: 340px !important;
    }

    .sub-card .card-icon-wrap { 
      margin: 0 auto 12px auto !important;
    }

    .counter-card {
      text-align: center !important;
      padding: 10px 0 !important;
    }

    .counter-value-wrapper {
      justify-content: center !important;
      font-size: 36px !important;
    }

    /* 8. 比較表格在手機下防溢出 */
    #planComparisonContainer>div {
      padding: 16px 10px !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    /* ====================================================
   10. subscription.html 月配箱頁面手機直向 (390px) 手動滑動卡片與統一尺寸專用重構
   ==================================================== */

    /* 10.1 故事圖文區 (Story Stacked Hero - 圖文並排改為上下堆疊) */
    .intro {
      padding: 24px 16px !important;
    }

    .intro-container {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: none !important;
      gap: 16px !important;
      width: 100% !important;
    }

    .intro-image {
      width: 100% !important;
      height: 200px !important;
      border-radius: 14px !important;
      margin-bottom: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }

    .intro-image img {
      width: 100% !important;
      height: 200px !important;
      object-fit: cover !important;
      border-radius: 14px !important;
    }

    .intro-text {
      padding: 0 4px !important;
    }

    .intro-text h3,
    .intro-text h2 {
      font-size: 20px !important;
      margin-bottom: 8px !important;
      line-height: 1.4 !important;
      color: var(--brand-dark) !important;
    }

    .intro-subtitle {
      font-size: 13.5px !important;
      margin-top: 0 !important;
      margin-bottom: 14px !important;
      color: var(--brand-green) !important;
    }

    .intro-text p {
      font-size: 13.5px !important;
      line-height: 1.7 !important;
      margin-bottom: 14px !important;
      text-align: justify !important;
    }

    /* 10.2 四大核心保障網格 (Core Benefits 2x2 Grid) */
    .benefits {
      padding: 28px 14px !important;
    }

    .benefits .section-title {
      margin-bottom: 24px !important;
    }

    .benefits .section-title h2 {
      font-size: 20px !important;
      margin-bottom: 6px !important;
    }

    .benefits .section-title p {
      font-size: 13px !important;
    }

    .benefits-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
    }

    .benefit-card {
      padding: 16px 12px !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      border-top: 3px solid var(--brand-green) !important;
    }

    .benefit-icon {
      width: 36px !important;
      height: 36px !important;
      font-size: 16px !important;
      margin-bottom: 10px !important;
      border-radius: 50% !important;
    }

    .benefit-card h4,
    .benefit-card h3 {
      font-size: 13.5px !important;
      font-weight: 700 !important;
      margin-bottom: 6px !important;
      line-height: 1.35 !important;
      color: var(--brand-dark) !important;
    }

    .benefit-card p {
      font-size: 11.5px !important;
      line-height: 1.5 !important;
      color: var(--text-secondary) !important;
    }

    /* 10.3 方案滑動軌道 (Manual Track - 橫向捲動 Flex 容器) */
    .plans {
      padding: 30px 0 !important;
      overflow: hidden !important;
    }

    .plans .section-title {
      padding: 0 16px !important;
      margin-bottom: 20px !important;
    }

    .plans .section-title h2 {
      font-size: 20px !important;
      margin-bottom: 6px !important;
    }

    .plans .section-title p {
      font-size: 13px !important;
    }

    .overview-carousel-sec {
      height: auto !important;
      padding: 10px 0 !important;
      perspective: none !important;
    }

    .overview-carousel-container {
      height: auto !important;
      perspective: none !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scroll-snap-type: x mandatory !important;
      padding: 10px 16px 20px !important;
      display: block !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .overview-slider-track {
      position: relative !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      align-items: stretch !important;
      gap: 14px !important;
      width: max-content !important;
      min-width: 100% !important;
      height: auto !important;
      cursor: default !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
    }

    /* 10.4 方案卡片本體 (Uniform Card - 寬度 280px 強制統一, 律般對齊) */
    .overview-card-3d,
    .overview-card-3d.card-left,
    .overview-card-3d.card-right,
    .overview-card-3d.card-center,
    .overview-card-3d.card-hidden-left,
    .overview-card-3d.card-hidden-right {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      display: flex !important;
      flex-direction: column !important;
      filter: none !important;
      z-index: 1 !important;
      flex: 0 0 280px !important;
      width: 280px !important;
      min-width: 280px !important;
      max-width: 280px !important;
      height: auto !important;
      scroll-snap-align: start !important;
      pointer-events: auto !important;
      margin: 0 !important;
    }

    .overview-card-3d.plan-card-wrapper {
      position: relative !important;
      width: 280px !important;
      flex: 0 0 280px !important;
      height: auto !important;
    }

    .plan-card,
    .overview-card-inner {
      background: #FFFFFF !important;
      border: 1px solid rgba(78, 91, 4, 0.15) !important;
      border-radius: 16px !important;
      padding: 20px 16px !important;
      box-sizing: border-box !important;
      box-shadow: 0 8px 24px rgba(0, 40, 66, 0.06) !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
    }

    .plan-card.popular, 
    .overview-card-inner.featured-plan { 
      border: 2px solid #4E5B04 !important; 
      background: var(--brand-dark) !important;
    }

    .overview-card-inner {
      justify-content: flex-start !important;
    }

    .detail-intro-btn-wrap {
      margin-top: auto !important;
    }

    /* 10.5 方案標題與價格 (Price Header: 方案名 14px Bold #20201F, 金額 22px Extrabold #2E5B4B) */
    .plan-title {
      font-size: 14px !important;
      font-weight: 700 !important;
      color: #20201F !important;
      margin-bottom: 4px !important;
    }

    .plan-price .currency {
      font-size: 14px !important;
      font-weight: 700 !important;
      color: #2E5B4B !important;
    }

    .plan-price .amount {
      font-size: 22px !important;
      font-weight: 800 !important;
      color: #2E5B4B !important;
      font-family: 'Noto Sans TC', sans-serif !important;
    }

    .plan-price .period { 
      font-size: 12px !important; 
      color: #77796D !important; 
    } 

    .plan-card.popular .plan-title {
      color: var(--white) !important;
    }
    
    .plan-card.popular .plan-price .currency,
    .plan-card.popular .plan-price .amount {
      color: var(--brand-orange) !important;
    }
    
    .plan-card.popular .plan-price .period {
      color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 10.6 方案規格清單 (Feature Items: 字級 12.5px, 行高 1.5, 色彩 #3A4045) */
    .plan-features li,
    .overview-list-vertical li {
      font-size: 12.5px !important;
      line-height: 1.5 !important;
      color: #3A4045 !important;
      margin-bottom: 6px !important;
    }
    
    .plan-card.popular .plan-features li,
    .plan-card.popular .overview-list-vertical li {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* 10.7 方案主打標籤 (Plan Highlight Badge Tag: 背景 #2E5B4B, 字級 11px Bold #FFFFFF) */
    .plan-badge-tag {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      display: inline-block !important;
      background-color: #2E5B4B !important;
      color: #FFFFFF !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      border-radius: 100px !important;
      padding: 4px 12px !important;
      margin-bottom: 10px !important;
      letter-spacing: 0.5px !important;
      box-shadow: 0 2px 8px rgba(46, 91, 75, 0.2) !important;
      animation: none !important;
      align-self: flex-start !important;
    }

    /* 10.8 訂閱行動按鈕 (Plan Action CTA / Pill Button: 高度 40px, 背景 #2E5B4B, 圓角 100px) */
    .plan-btn,
    .gold-cta-btn,
    .sub-cta-btn {
      width: 100% !important;
      height: 40px !important;
      background-color: #2E5B4B !important;
      color: #FFFFFF !important;
      border-radius: 100px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      border: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-top: 14px !important;
      padding: 0 16px !important;
      box-shadow: 0 4px 14px rgba(46, 91, 75, 0.25) !important;
      transition: background-color 0.2s ease !important;
      cursor: pointer !important;
    }

    .plan-btn:hover,
    .gold-cta-btn:hover,
    .sub-cta-btn:hover {
      background-color: #24483B !important;
      color: #FFFFFF !important;
    }

    /* 10.9 方案比較表格 (Plan Comparison Carousel for Mobile) */
    #planComparisonContainer {
      padding: 0 12px !important;
    }

    #planComparisonContainer>div {
      padding: 16px 12px !important;
      border-radius: 16px !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    #planComparisonContainer table {
      min-width: 580px !important;
      font-size: 12.5px !important;
    }

    #planComparisonContainer th,
    #planComparisonContainer td {
      padding: 10px 10px !important;
    }

    /* ====================================================
   11. subscription.html 月配箱彈窗 (Modal) 手機直向與滑動相容性優化
   ==================================================== */
    .modal-overlay,
    .detail-modal-overlay {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 16px 10px !important;
      align-items: center !important;
      box-sizing: border-box !important;
    }

    .modal-container,
    .detail-modal-container {
      max-height: calc(100vh - 24px) !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      margin: auto !important;
      padding: 22px 18px !important;
      box-sizing: border-box !important;
      width: 92% !important;
    }

    .modal-container .modal-logo img {
      height: 46px !important;
    }

    .modal-container .modal-title {
      font-size: 17px !important;
      margin-bottom: 8px !important;
    }

    .modal-container .qr-container {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      margin: 10px 0 !important;
      justify-content: space-between !important;
      width: 100% !important;
    }

    .modal-container .qr-card-link {
      flex: 1 1 50% !important;
      min-width: 0 !important;
      max-width: none !important;
      width: 50% !important;
    }

    .modal-container .qr-card {
      padding: 6px 4px !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .modal-container .qr-card img {
      width: 100% !important;
      max-width: 110px !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
      margin-bottom: 6px !important;
    }

    .modal-container .qr-card span {
      font-size: 11px !important;
    }
  }

  /* ====================================================
   12. 手機橫向 / 矮螢幕高度 (Mobile Landscape / max-height: 550px) 專用彈窗微調
   ==================================================== */
  @media (max-height: 550px) {

    .modal-overlay,
    .detail-modal-overlay {
      align-items: flex-start !important;
      padding: 8px !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .modal-container {
      max-width: 520px !important;
      width: 95% !important;
      padding: 14px 16px !important;
      max-height: 94vh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      margin: 0 auto !important;
    }

    .modal-container .modal-logo img {
      height: 38px !important;
      margin-bottom: 4px !important;
    }

    .modal-container .modal-title {
      font-size: 15px !important;
      margin-bottom: 6px !important;
    }

    .modal-container .modal-text,
    .modal-container .modal-text2 {
      font-size: 12px !important;
      margin-bottom: 6px !important;
      line-height: 1.35 !important;
    }

    .modal-container .qr-container {
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
      margin: 6px 0 !important;
      justify-content: center !important;
    }

    .modal-container .qr-card-link {
      min-width: 120px !important;
      max-width: 170px !important;
    }

    .modal-container .qr-card {
      padding: 6px 8px !important;
    }

    .modal-container .qr-card img {
      width: 85px !important;
      height: 85px !important;
      margin-bottom: 4px !important;
    }

    .modal-container .modal-cta-btn {
      padding: 8px !important;
      font-size: 13.5px !important;
    }

    .detail-modal-container {
      padding: 16px 18px !important;
      max-height: 94vh !important;
    }
  }

  /* ====================================================
   💻 1. Web 電腦版 (min-width: 1025px) 獨立彩虹弧度與置中對齊
   ==================================================== */
  @media (min-width: 1025px) {
    .elementor-element-91175fb {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      transform: none !important;
      width: -50px !important;
    }


    .elementor-element-91175fb svg {
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      width: 320px !important;
      /* 👈 控制電腦版 SVG 寬度，形成優美的彩虹向下弧度 */
      height: auto !important;
      overflow: visible !important;
      padding-top: 10px !important;
    }

    .elementor-element-91175fb text,
    .elementor-element-91175fb svg text,
    .elementor-element-91175fb textPath {
      font-size: 42px !important;
      /* 👈 電腦版彩虹大標題字級 */
      font-weight: 700 !important;
      text-anchor: middle !important;
      font-display: swap !important;
      text-rendering: optimizeLegibility !important;
    }

    .elementor-element-91175fb .e-text-path {
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

  }

  /* ====================================================
   🔄 補充修正：島牧熱銷推薦防裁切與無縫循環滑動終極修復 (獨立於最外層)
   ==================================================== */
  @media (max-width: 600px),
  (max-width: 767px) and (orientation: portrait) {

    /* 1. 直向軌道：關閉 snap 磁齁，對齊交由 JS 控制，左內距 24px 讓第1張卡片完整露頭 */


    /* 2. 鎖定熱銷推薦卡片固定寬度 250px */
    .product-carousel-track .product,
    li.product-card-custom {
      flex: 0 0 250px !important;
      width: 250px !important;
      max-width: 250px !important;
      min-width: 250px !important;
      box-sizing: border-box !important;
    }

    /* 3. 「島牧食草」字體載入閃爍修復：預先鎖定尺寸 */
    .elementor-element-91175fb svg {
      width: 360px !important;
      height: auto !important;
    }

    .elementor-element-91175fb text,
    .elementor-element-91175fb textPath {
      font-size: 36px !important;
      font-display: swap !important;
    }

    /* ====================================================
     📱 4. 註冊頁面 (register.html) 手機直向視覺重構與防跑版專用樣式
     ==================================================== */
    /* (0) Header 頂部列與 Logo 直向專用切換 (提升層級與點擊穿透保護) */
    .site-header {
      position: relative !important;
      z-index: 10000 !important;
      pointer-events: auto !important;
    }

    .site-header .nav-inner {
      padding: 0 16px !important;
      height: 64px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      position: relative !important;
      z-index: 10001 !important;
      pointer-events: auto !important;
    }

    .site-header .nav-logo {
      display: inline-flex !important;
      align-items: center !important;
      height: 44px !important;
      position: relative !important;
      z-index: 10002 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    .site-header .nav-logo img {
      content: url('../images/2022_03_logo-300x73.png') !important;
      /* 直向切換為 2022_03_logo-300x73.png */
      max-height: 44px !important;
      width: auto !important;
      object-fit: contain !important;
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    .site-header .back-btn {
      white-space: nowrap !important;
      /* 避免「返回首頁」折行 */
      font-size: 13px !important;
      flex-shrink: 0 !important;
      position: relative !important;
      z-index: 10002 !important;
      pointer-events: auto !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      padding: 6px 10px !important;
    }

    /* (1) 主頁面與表單容器邊界鎖定 (Form Container & Padding Guard) */
    .main-container {
      padding: 20px 12px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .register-card {
      padding: 24px 16px !important;
      /* 內距：上下 24px 左右 16px */
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      border-radius: 16px !important;
      /* 圓角：16px */
      border-width: 1.5px !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    .card-header h2 {
      font-size: 20px !important;
    }

    .card-header p {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }

    /* (2) 文字輸入框規格統一 (Text Input Fields) */
    .register-card input[type="text"],
    .register-card input[type="email"],
    .register-card input[type="password"],
    .register-card input[type="tel"],
    .register-card input[type="number"],
    .register-card input[type="date"],
    .register-card select,
    .register-custom-select-header {
      height: 42px !important;
      /* 高度：42px */
      border-radius: 10px !important;
      /* 圓角：10px */
      border: 1px solid #DADBD9 !important;
      /* 邊框：1px solid #DADBD9 */
      font-size: 13.5px !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      background-color: #FFFFFF !important;
    }

    .register-card input:focus,
    .register-card select:focus,
    .register-custom-select-header:hover {
      border-color: #4E5B04 !important;
      /* focus 邊框：#4E5B04 */
      box-shadow: 0 0 0 3px rgba(78, 91, 4, 0.15) !important;
    }

    /* (3) 電子信箱與驗證按鈕區塊重構 (Stacked Verification Button) */
    .email-input-wrap {
      display: flex !important;
      flex-direction: column !important;
      /* 改為上下堆疊，徹底解決按鈕右側裁切缺陷 */
      gap: 8px !important;
      width: 100% !important;
    }

    .email-input-wrap input {
      flex: none !important;
      /* 取消 flex: 1 避免在 column 方向高度被壓縮 */
      width: 100% !important;
      height: 42px !important;
      min-height: 42px !important;
      padding: 12px !important;
      /* 與其他輸入框視覺一致的上下內距 */
      border-radius: 10px !important;
      border: 1px solid #DADBD9 !important;
      font-size: 13.5px !important;
      box-sizing: border-box !important;
    }

    .send-code-btn {
      width: 100% !important;
      /* 下方滿版 */
      height: 38px !important;
      /* 按鈕高度：38px */
      background-color: #2E5B4B !important;
      /* 背景色：#2E5B4B */
      border-radius: 10px !important;
      font-size: 12px !important;
      /* 字級：12px */
      font-weight: 700 !important;
      color: #FFFFFF !important;
      /* 白字 Bold */
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }

    .send-code-btn:disabled {
      background-color: #DADBD9 !important;
      color: #77796D !important;
    }

    /* (4) 密碼雙欄區塊與寵物欄位雙欄自適應 (Grid 2-Columns) */
    .register-card .form-row {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      /* 佈局：grid-template-columns: repeat(2, 1fr) */
      gap: 10px !important;
      /* 間距：gap: 10px */
      width: 100% !important;
    }

    .register-card .form-group {
      margin-bottom: 14px !important;
      gap: 6px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .password-wrapper {
      position: relative !important;
      width: 100% !important;
    }

    .password-wrapper input {
      width: 100% !important;
      padding-right: 34px !important;
      height: 42px !important;
      border-radius: 10px !important;
    }

    .password-wrapper .toggle-password {
      position: absolute !important;
      right: 8px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      height: 100% !important;
      padding: 0 4px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 14px !important;
    }

    /* (5) 新增寵物與寵物資訊區塊自適應 */
    .section-title {
      font-size: 13.5px !important;
      margin: 20px 0 12px 0 !important;
      padding-bottom: 6px !important;
    }

    .add-rabbit-btn {
      padding: 6px 12px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
    }

    .rabbit-entry {
      padding: 12px 10px !important;
      border-radius: 12px !important;
      margin-bottom: 12px !important;
    }

    .pill-btn {
      height: 36px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
    }

    /* (6) 底部送出按鈕 (Submit CTA Button - 黃金膠囊滿版按鈕) */
    .submit-btn {
      width: 100% !important;
      height: 46px !important;
      /* 高度：46px */
      background-color: #2E5B4B !important;
      /* 背景色：#2E5B4B */
      border-radius: 100px !important;
      /* 圓角：100px (白字 Bold) */
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #FFFFFF !important;
      margin-top: 20px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 4px 12px rgba(46, 91, 75, 0.2) !important;
    }

    /* ====================================================
     📱 5. 評估頁面 (assessment.html) 手機直向視覺重構與防跑版專用樣式
     ==================================================== */
    /* (1) 主容器邊界鎖定 (Assessment Wrapper) */
    .assessment-container {
      padding: 16px 14px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }

    /* (2) 英雄首頁區 (Hero Section) */
    .hero-wrap {
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      border-radius: 20px !important;
      border: 1px solid #2E5B4B !important;
      box-shadow: none !important;
    }

    .hero-img-side {
      padding: 0 !important;
      min-height: auto !important;
    }

    .hero-img-side img {
      border-radius: 20px 20px 0 0 !important;
      width: 100% !important;
      object-fit: cover !important;
    }

    .hero-content-side {
      text-align: left !important;
      padding: 20px 16px !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .hero-title,
    .hero-desc {
      text-align: left !important;
    }

    .hero-title {
      margin-bottom: 12px !important;
      font-size: 24px !important;
    }

    .hero-desc {
      margin-bottom: 24px !important;
      font-size: 15px !important;
    }

    /* (3) 多步驟問卷卡片與選項 (Wizard Card & Quiz Options Grid) */
    .wizard-card {
      width: 100% !important;
      box-sizing: border-box !important;
      border-radius: 20px !important;
      border: 1px solid #2E5B4B !important;
    }

    .wizard-header {
      padding: 20px 16px !important;
    }

    .wizard-progress-bar-container {
      height: 6px !important;
      background: #E2E8F0 !important;
      margin: 10px 0 !important;
    }

    .wizard-progress-bar {
      background: #4E5B04 !important;
    }

    .wizard-body {
      padding: 20px 16px !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .question-title {
      font-size: 20px !important;
      margin-bottom: 20px !important;
    }

    .options-grid,
    .options-grid.four-cols {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .card-option {
      border: 1px solid #DADBD9 !important;
      border-radius: 10px !important;
      padding: 8px !important;
      text-align: center !important;
      background: #FFFFFF !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      min-height: auto !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .card-option.active {
      border: 2px solid #4E5B04 !important;
      background-color: #FAFCF7 !important;
    }

    .card-option .option-name {
      color: #20201F !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      margin-bottom: 4px !important;
    }

    .card-option .option-desc {
      color: #555848 !important;
      font-size: 10px !important;
      line-height: 1.3 !important;
    }

    /* (4) 底部互動按鈕 (Action CTAs) */
    .wizard-footer {
      display: flex !important;
      flex-direction: column-reverse !important;
      padding: 20px 16px !important;
      gap: 12px !important;
      box-sizing: border-box !important;
      width: 100% !important;
    }

    .hero-btn,
    .wizard-next-btn,
    .wizard-back-btn,
    .btn-subscribe {
      width: 100% !important;
      height: 38px !important;
      border-radius: 100px !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      box-sizing: border-box !important;
      margin: 0 !important;
    }

    .hero-btn,
    .wizard-next-btn,
    .btn-subscribe {
      background-color: #2E5B4B !important;
      color: #FFFFFF !important;
      border: none !important;
    }

    .wizard-back-btn {
      background-color: #FFFFFF !important;
      color: #2E5B4B !important;
      border: 1px solid #2E5B4B !important;
    }

    /* (5) 雷達圖響應式適配與寵物切換防遮擋 (Radar & Tabs) */
    .pet-tabs-bar {
      display: flex !important;
      position: relative !important;
      z-index: 1000 !important;
      pointer-events: auto !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      box-sizing: border-box !important;
      gap: 12px !important;
    }

    .pet-tab,
    .pet-tab-prefix-label {
      position: relative !important;
      z-index: 1000 !important;
      pointer-events: auto !important;
      flex: 0 0 auto !important;
    }

    .pet-tab {
      height: 44px !important;
      padding: 0 24px !important;
      border-radius: 100px !important;
      border: 1px solid #DADBD9 !important;
      background-color: #FFFFFF !important;
      color: #20201F !important;
      font-size: 14px !important;
    }

    .pet-tab.active {
      background-color: #2E5B4B !important;
      color: #FFFFFF !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      border: 1px solid #2E5B4B !important;
    }

    .pet-tab.active .crown-svg {
      fill: #FFFFFF !important;
    }

    .chart-container {
      width: 100% !important;
      max-width: 320px !important;
      height: 260px !important;
      margin: 0 auto 20px auto !important;
      position: relative !important;
    }

    canvas#healthRadarChart {
      width: 100% !important;
      height: 100% !important;
    }

    .report-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 24px !important;
    }

    .report-card-left,
    .report-card-right {
      width: 100% !important;
      box-sizing: border-box !important;
      padding: 24px 16px !important;
    }

    /* (6) 推薦商品單欄化 (Single-Column Product Cards) */
    .packages-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
    }

    .package-card {
      width: 100% !important;
      background-color: #FFFFFF !important;
      border-radius: 14px !important;
      border: 1px solid rgba(78, 91, 4, 0.15) !important;
      box-sizing: border-box !important;
      margin-bottom: 0 !important;
    }
  }
}

/* ====================================================
   🔔 全裝置瀏覽建議提醒彈窗 (Device Notice Modal - 時尚質感版)
   ==================================================== */
.device-notice-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.device-notice-modal-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.device-notice-modal-card {
  position: relative !important;
  width: 90% !important;
  max-width: 500px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(78, 91, 4, 0.12) !important;
  border-radius: 24px !important;
  padding: 32px 28px 24px 28px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.device-notice-modal-overlay.show .device-notice-modal-card {
  transform: translateY(0) scale(1) !important;
}

.device-notice-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #999999 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 50% !important;
  transition: color 0.2s ease !important;
}

.device-notice-modal-close:hover {
  color: #20201F !important;
}

.device-notice-heading-group {
  margin-bottom: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.device-notice-logo {
  max-width: 170px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.device-notice-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #20201F !important;
  letter-spacing: 0.5px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.device-notice-alert-box {
  background-color: #FAFCF7 !important;
  border: 1px solid rgba(78, 91, 4, 0.15) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.device-notice-alert-top {
  font-size: 12.5px !important;
  color: #4E5B04 !important;
  line-height: 1.55 !important;
}

.device-notice-teaser {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(78, 91, 4, 0.15) !important;
  color: #2E5B4B !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.device-notice-bottom-block {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(78, 91, 4, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.device-notice-bottom-left {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.device-notice-bug-text {
  color: #2E5B4B !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.device-notice-cto-text {
  color: #777777 !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.device-notice-cta-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-top: 18px !important;
  background-color: #2E5B4B !important;
  color: #FFFFFF !important;
  border-radius: 100px !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(46, 91, 75, 0.25) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.device-notice-cta-btn:hover {
  background-color: #203F34 !important;
  box-shadow: 0 6px 18px rgba(46, 91, 75, 0.35) !important;
  transform: translateY(-1px) !important;
}

.device-notice-cta-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.device-notice-egg-enlarged-img {
  height: 72px !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.device-notice-egg-enlarged-img:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 🖼️ 彩蛋貓咪圖片大圖彈窗 (Lightbox Preview Overlay) */
.egg-image-preview-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 10000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.egg-image-preview-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.egg-image-preview-card {
  position: relative !important;
  max-width: 90vw !important;
  max-height: 85vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(0.9) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.egg-image-preview-overlay.show .egg-image-preview-card {
  transform: scale(1) translateY(0) !important;
}

.egg-image-preview-img {
  max-width: 100% !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.egg-image-preview-close {
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.egg-image-preview-close:hover {
  color: #FFFFFF !important;
  transform: scale(1.15) !important;
  background-color: transparent !important;
}

/* ====================================================
   🌸 月配箱/保健組合預覽免責提醒彈窗 (Plan Preview Modal - 防呆質感版)
   ==================================================== */
.plan-preview-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.plan-preview-modal-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.plan-preview-modal-card {
  position: relative !important;
  width: 90% !important;
  max-width: 440px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(78, 91, 4, 0.12) !important;
  border-radius: 24px !important;
  padding: 28px 24px 24px 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.plan-preview-modal-overlay.show .plan-preview-modal-card {
  transform: translateY(0) scale(1) !important;
}

.plan-preview-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  background: transparent !important;
  border: none !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #999999 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 50% !important;
  transition: color 0.2s ease !important;
}

.plan-preview-modal-close:hover {
  color: #20201F !important;
}

.plan-preview-heading-group {
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.plan-preview-logo {
  max-width: 150px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.plan-preview-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #20201F !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

.plan-preview-subtitle {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #4E5B04 !important;
  letter-spacing: 0.5px !important;
}

.plan-preview-status-box {
  background-color: #FAFCF7 !important;
  border: 1px solid rgba(78, 91, 4, 0.15) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  font-size: 12.5px !important;
  color: #096790 !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.plan-preview-disclaimer-box {
  background-color: #FFFBEB !important;
  border: 1px solid #D97706 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
  font-size: 11.5px !important;
  color: #B45309 !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.plan-preview-warm-msg {
  font-size: 12px !important;
  color: #555848 !important;
  line-height: 1.45 !important;
  margin-bottom: 18px !important;
  text-align: center !important;
  font-weight: 500 !important;
}

.plan-preview-cta-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  background-color: #2E5B4B !important;
  color: #FFFFFF !important;
  border-radius: 100px !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(46, 91, 75, 0.25) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.plan-preview-cta-btn:hover {
  background-color: #203F34 !important;
  box-shadow: 0 6px 18px rgba(46, 91, 75, 0.35) !important;
  transform: translateY(-1px) !important;
}

.plan-preview-cta-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ───────────────────────────────────────────────────────────── */
/* 💳 金流維護與導流防呆彈窗 (Payment Notice Modal)             */
/* ───────────────────────────────────────────────────────────── */
.payment-notice-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.payment-notice-modal-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.payment-notice-modal-card {
  max-width: 440px !important;
  width: calc(100% - 32px) !important;
  padding: 28px 24px 24px 24px !important;
  background: #FFFFFF !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important;
  position: relative !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transform: translateY(20px) scale(0.95) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.payment-notice-modal-overlay.show .payment-notice-modal-card {
  transform: translateY(0) scale(1) !important;
}

.payment-notice-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  background: transparent !important;
  border: none !important;
  font-size: 24px !important;
  color: #999B8E !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
  padding: 4px !important;
}

.payment-notice-modal-close:hover {
  color: #20201F !important;
}

.payment-notice-heading-group {
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.payment-notice-logo {
  max-width: 150px !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.payment-notice-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #20201F !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

.payment-notice-subtitle {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #D63900 !important;
  letter-spacing: 0.5px !important;
}

.payment-notice-alert-box {
  background-color: #FFFBEB !important;
  border: 1px solid #D97706 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
  font-size: 12.5px !important;
  color: #B45309 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.payment-notice-cta-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  background-color: #D63900 !important;
  color: #FFFFFF !important;
  border-radius: 100px !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 14px rgba(214, 57, 0, 0.25) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 12px !important;
}

.payment-notice-cta-btn:hover {
  background-color: #B53000 !important;
  box-shadow: 0 6px 18px rgba(214, 57, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

.payment-notice-cta-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.payment-notice-secondary-btn {
  background: transparent !important;
  border: none !important;
  color: #77796D !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 4px 12px !important;
  transition: color 0.2s ease !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.payment-notice-secondary-btn:hover {
  color: #20201F !important;
}

/* ───────────────────────────────────────────────────────────── */
/* 📢 頁面金流維護常駐提示文字框 (Inline Payment Notice Box)     */
/* ───────────────────────────────────────────────────────────── */
.site-inline-payment-notice {
  font-size: 12.5px !important;
  color: #77796D !important;
  line-height: 1.6 !important;
  padding: 12px 14px !important;
  background-color: #FAFAFA !important;
  border: 1px solid #EAEBE8 !important;
  border-radius: 10px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

.site-inline-payment-notice a {
  color: #2E5B4B !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease !important;
}

.site-inline-payment-notice a:hover {
  color: #D63900 !important;
}

/* ====================================================
   iPhone SE / 手機橫向模式 (Landscape) 專用：修復商品倫波卡片無法加載 (版型擠壓) 的問題
   ==================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {

  /* 解除原本為了手機直向 (Portrait) 單卡置中而設定的超大 padding，恢復橫向多卡並排滑動 */
  .elementor-600 .elementor-element.elementor-element-eaed2a4.elementor-wc-products ul.products,
  .elementor-element-eaed2a4.elementor-wc-products ul.products,
  .elementor-element-eaed2a4 ul.products,
  .product-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 16px 20px 16px !important;
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 強制解除所有卡片的 3D/絕對定位，恢復為正常 flex 項目 */
  .elementor-600 .elementor-element.elementor-element-eaed2a4.elementor-wc-products ul.products li.product,
  .elementor-element-eaed2a4 ul.products li.product,
  li.product-card-custom,
  .product-carousel-track .product,
  li.product-card-custom.card-center,
  li.product-card-custom.card-left,
  li.product-card-custom.card-right,
  li.product-card-custom.card-hidden-left,
  li.product-card-custom.card-hidden-right,
  li.product-card-custom.card-invisible {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none !important;
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    height: auto !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(78, 91, 4, 0.15) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* 隱藏由 JS 產生的無限循環分身 (clones)，只顯示原始卡片 */
  .product-carousel-track .carousel-clone {
    display: none !important;
  }
}