.elementor-49 .elementor-element.elementor-element-504e604{height:70px;line-height:0px;}
.elementor-231 .elementor-element.elementor-element-7ba9a31 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:30px !important;}
.right_img{width:7%;right:0;top:20%;position:absolute;}
.main{margin-top:1rem;max-width:1400px;margin:0px auto;padding-left: 2%;padding-right: 2%;}
.main_title{font-size:20px;color:#3a5a4c;position:relative;text-align:center;width: 100%;display: block;margin-bottom:.3rem;font-family: Lora,Bold;}
.main_title img{position: absolute;top: -0.13rem;left: .2rem;width: 100%;z-index: -1;}
.js{font-size:.45rem;color:#2A2A2A;font-weight:bold;font-family:Helvetica,Bold;}
.from_text{margin-top:.5rem;font-size:18px;color:#2A2A2A;font-weight: normal;}
.main_box{width:100%;}
.from_text2{margin-top:.2rem;font-size:18px;color:#2A2A2A;margin-bottom:.4rem;}
.main_from{margin-top:.8rem;width:100%;}
.name_box{display:flex;justify-content:space-between;}
.tx_title{font-size:.15rem;margin-bottom:.1rem;}
.name_item{font-size:.15rem;width:49%;}
.name_input{width:100% !important;height:40px;line-height:40px;background:rgb(247,247,247) !important;border-radius:3px;border:none !important;}
.name_item_full{width:100%;position:relative;}
.name_item_full input{width:100% !important;max-width:100% !important;}
.tx_title2{margin-top:.1rem;}
.tx_title2 .tx_title2_checbox{background:none;}
.tx_title span{color:#999;}
.xia_jian{position: absolute;width:10px;height:10px;top:10px; right:15px;border-top:1px solid #999;border-right:1px solid #999;transform:rotate(135deg);}
.name_item_full select{padding:0;padding-left:1.1em;}
.name_item_full span{border:1px solid #2A2A2A;padding:.025rem .08rem;color:#333;margin-right:.05rem;cursor:pointer;}
.name_item_full .active,.name_item_full .active2 ,.name_item_full .active3{background:#000;border:1px solid #000;color:#fff;}
.tx_btn{color:#2A2A2A;width:200px;text-align:center;border:1px solid #2A2A2A;padding:.1rem 0;margin:0px auto;border-radius:3px;cursor:pointer;}
.ge1{height:.2rem;}.ge3{height:.4rem;}
.tx_btn:hover{border:1px solid #2A2A2A;background:#2A2A2A;color:#fff;}
.bottom_mess_box{background:#D8E3DA;padding:.3rem 0 .6rem 0;margin:1.5rem 0;position:relative;}
.bottom_mess{width:1400px;margin:0px auto;}
.item_box{display:flex;justify-content:space-between;}
.bottom_mess_title{font-size:.4rem;padding:.3rem 0 .6rem 0;text-align:center;}
.mess_item_title{font-size:.3rem}
.mess_item_text{font-size:.2rem;text-decoration:underline;margin-top:.25rem;}
.mess_item{width:330px;}
.ys_font{position: absolute;top: -0.7rem;left: 1.8rem;}
.success-message{color: #46b450;font-size: .3rem;width: 1400px;margin: 0px auto;}
.error-message{color:red;font-size: .3rem;width: 1400px;margin: 0px auto;}
.main_title2{width:120px;}
.main_title2 img {position: absolute;top: 7px;left: 0;width: 100%;z-index: -1;}
.filter_box{width:100%;display:flex;justify-content:space-between;margin-bottom:1.8rem;}
.filter_item{font-size:15px;text-align:center;color:#1B3B2A;border-bottom:2px solid #1B3B2A;padding-bottom:.1rem;position:relative;cursor:pointer;}
.filter_item_all{color:#A7A7A7;border-bottom:2px solid #A7A7A7;}
.filter_item:hover img{transform:rotate(-135deg);}
.filter_item_child_box{position:absolute;top:.35rem;left:0;width:100%;background:#fff;z-index:999;}
.filter_item_child{border-bottom: 1px dashed;padding: .1rem 0;width:100%;cursor:pointer;background:#fff;font-size:17px;}
.filter_item_child_box{display:none;}
.filter_item:hover .filter_item_child_box{display:unset;}
.filter_item_child:hover{background:#1B3B2A;color:#fff;}
.product_pic{width:269px;height:303px;overflow:hidden;margin-left:-10%;}
.product_pic img{max-width:140%;padding:0 10%;}
.main_product_item{height:335px;margin-right: 7%;margin-bottom:66px;cursor:pointer;width:269px;}
.product_title{text-align:center;font-size:.22rem;color:#333;margin-left:-10%;padding:0 15px;}
.main_product_box{display:flex;flex-wrap:wrap;}
.main_product_item:nth-child(4n){margin-right:0;}
.product_more{margin-bottom:1rem;color:#a7a7a7;font-size:26px;text-align:center;cursor:pointer;margin-top:90px;}
.product_more img{
  width: clamp(18px, 2vw, 22px) !important;
  height: auto !important;
  vertical-align: middle;
  margin-left: 8px;
}
.filter_item_child_checkbox{float: left;transform: scale(1.2);margin-top: .09rem;cursor:pointer;position: relative;left: .1rem;appearance: none;-webkit-appearance: none;width: 10px;height: 10px;border-radius: 3px;outline: none;cursor: pointer;
  background-color:#D7D7D7; /* 默认背景色 */;}
  .filter_item_child_checkbox:checked{background-color:#2a2a2a;}
  #clear_all{cursor:pointer;}
  .load_gif_box{width:100%;text-align:center;display:none;}
  .banner{margin-bottom:.35rem;margin-top:-105px;}
  .elementor-139 .elementor-element.elementor-element-b33a2a8{font-weight:normal;}
  .elementor-139 .elementor-element.elementor-element-3b8d307{line-height:0;}
  .elementor-231 .elementor-element.elementor-element-cace142{top:0 !important;}
  #offcart{display:none;}
  .main_product_box a{width:264px;height:auto;}

/* =========================================================
   PRODUCT FILTER (Clean Unified Version)
   - Product grid: 5 / 2 / 1
   - Filter: >1024 one row aligned with Filter title (left edge)
            <=1024 stack aligned left, NOT full width
   - Clear All: not full width on tablet/mobile
   - Dropdown: stable under each filter item
   - Typography: px-based (avoid rem issues from html font-size JS)
   ========================================================= */


/* =========================
   PRODUCT GRID (5 / 2 / 1)
   ========================= */
.main_product_box,
.main_product_box * { box-sizing: border-box; }

.main_product_box{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.main_product_box a{
  width: auto !important;
  display: block;
  margin: 0 !important;
}

.main_product_item{
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  cursor: pointer;
}

.product_pic{
  width: 100% !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0 !important;
}

.product_pic img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: 100% !important;
  padding: 0 !important;
}

.product_title{
  margin: 12px 0 0 0 !important;
  padding: 0 8px;
  text-align: center;
}

/* Tablet: 2 columns */
@media (max-width:1024px){
  .main_product_box{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column */
@media (max-width:768px){
  .main_product_box{
    grid-template-columns: 1fr;
  }
  .product_title{
    font-size: 20px !important;
    line-height: 1.4;
  }
}


/* =========================
   FILTER LAYOUT (Unified)
   ========================= */

/* 避免 template 用 div[style*="display:flex"] + font-size:0 造成怪對齊 */
.main .main_box > div[style*="display:flex"]{
  font-size: initial !important;
}

/* Filter items 基準（dropdown 需要） */
.filter_item{
  position: relative;
  margin-right: 0 !important; /* 壓掉 inline margin-right:30px */
}

/* Desktop (>1024): one row, align with main_title2 left edge */
@media (min-width:1025px){
  .filter_box{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:flex-end;
    gap: 48px;
    width: 100%;
    margin: 0 0 40px 0 !important;
    padding-left: 0 !important;
  }

  .filter_item{
    flex: 0 0 auto !important;
    width: 320px;          /* 可調 280~360 */
    text-align: left;      /* 想置中就改 center */
  }
}

/* Tablet/iPad (<=1024): stack aligned left, NOT full width */
@media (max-width:1024px){

  /* 確保 main_box / main_from 左右同線（避免 title 與 filter 不對齊） */
  .main_box,
  .main_from{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .filter_box{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important; /* ✅跟 main_title2 同左線 */
    justify-content:flex-start !important;
    gap: 18px;
    margin: 0 0 30px 0 !important;
  }

  .filter_item{
    flex: 0 0 auto !important;
    width: min(420px, 100%) !important; /* ✅不滿寬但不爆 */
    text-align: left;
  }

  /* Clear All 不要全寬 */
  #clear_all{
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* =========================
   FILTER DROPDOWN (Unified)
   ========================= */

.filter_item_child_box{
  position: absolute;
  top: calc(100% + 10px);
  left: 0 !important;
  width: 100% !important;
  min-width: 220px;
  background: #fff;
  z-index: 9999;
  display: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* hover 展開（iPad 若 hover 行為怪，可再改 click） */
.filter_item:hover .filter_item_child_box{
  display: block;
}

.filter_item_child{
  padding: 12px 14px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
  background: #fff;
}

.filter_item_child_checkbox{
  margin-right: 10px;
  position: static;
  transform: scale(1.1);
}


/* =========================
   FILTER TYPOGRAPHY (px-based)
   ========================= */

/* Filter 標題 */
.main_title2{
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
}

/* Filter Item */
.filter_item{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}

/* Clear All */
#clear_all{
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
}

/* Dropdown */
.filter_item_child{
  font-size: 18px;
  line-height: 1.4;
}

/* Tablet typography */
@media (max-width:1024px){
  .main_title2{ font-size: 26px; }
  .filter_item{ font-size: 18px; }
  #clear_all{ font-size: 18px; }
  .filter_item_child{ font-size: 16px; }
}

/* Mobile typography */
@media (max-width:768px){
  .main_title2{ font-size: 26px; }
  .filter_item{ font-size: 18px; }
  #clear_all{ font-size: 18px; }
  .filter_item_child{ font-size: 16px; }
}

/* ==========================================
   Dropdown behavior:
   Desktop (>1024) = hover open
   Tablet/Mobile (<=1024) = click toggle via .is-open
   ========================================== */

/* 基本：dropdown 預設關閉 */
.filter_item_child_box{
  display: none;
}

/* Desktop: hover 開啟 */
@media (min-width:1025px){
  .filter_item:hover .filter_item_child_box{
    display: block;
  }
}

/* Tablet/Mobile: 禁用 hover，改用 is-open */
@media (max-width:1024px){
  .filter_item:hover .filter_item_child_box{
    display: none; /* 關掉 hover，避免觸控抖動不好選 */
  }
  .filter_item.is-open .filter_item_child_box{
    display: block;
  }

  /* 觸控更好點（可選） */
  .filter_item_child{
    padding: 14px 16px;
  }
}


/* ===== Desktop hover: keep dropdown open when mouse moves into it ===== */
@media (min-width:1025px){

  /* 取消空隙，避免滑鼠移過去瞬間失去 hover */
  .filter_item_child_box{
    top: 100% !important;   /* 原本 calc(100% + 10px) 會有空隙 */
    margin-top: 2px;        /* 想要距離用 margin 做，不會斷 hover 區域 */
  }

  /* hover 到 item 或 dropdown 本身都保持展開 */
  .filter_item:hover .filter_item_child_box,
  .filter_item_child_box:hover{
    display: block;
  }
}




/* =========================
   Arrow icon behavior
   Desktop: hover rotates
   Tablet/Mobile: .is-open rotates
   ========================= */

/* 先限制 hover 旋轉只在桌機生效 */
@media (min-width:1025px){
  .filter_item:hover img{
    transform: rotate(-135deg);
  }
}

/* iPad/手機：取消 hover（可選），改用 is-open */
@media (max-width:1024px){
  .filter_item:hover img{
    transform: none; /* 避免觸控 hover 抖動 */
  }
  .filter_item.is-open img{
    transform: rotate(-135deg);
  }
}


/* ==========================================
   Clear All (unified)
   - underline length = text length
   - consistent hover
   ========================================== */

/* 基本外觀：只跟文字同寬 */
#clear_all,
.filter_item_all#clear_all{
  display: inline-block !important;   /* ✅不要 block */
  width: auto !important;             /* ✅不要 100% */
  max-width: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;               /* 各頁若需要距離，用容器 gap 來控 */
  border: 0 !important;
  border-bottom: 2px solid #a7a7a7 !important;
  background: transparent !important;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #a7a7a7;
  line-height: 1.4;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* 桌機 hover */
@media (hover:hover) and (pointer:fine){
  #clear_all:hover{
    color: #2a2a2a;
    border-bottom-color: #2a2a2a;
    opacity: .9;
  }
}

/* 觸控裝置：不要靠 hover（避免怪異狀態） */
@media (hover:none) and (pointer:coarse){
  #clear_all:hover{
    color: #a7a7a7;
    border-bottom-color: #a7a7a7;
    opacity: 1;
  }
}

/* 小螢幕字稍微小一點 */
@media (max-width:1024px){
  #clear_all{
    font-size: 18px;
    border-bottom-width: 1.5px;
  }
}
@media (max-width:768px){
  #clear_all{
    font-size: 16px;
  }
}