/* ===============================
   商品詳細頁：相簿大圖/小圖「完整顯示」(不裁切)
   目標：.pdpage__gallery（你目前 products_info.html 用的結構）
   =============================== */

/* 外框 */
.products_info .pdpage__gallery .up_swiper,
.products_info .pdpage__gallery .down_swiper{
  background:#fff !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* 大圖：固定高度 + 置中 */
.products_info .pdpage__gallery .up_swiper{ height:520px !important; }
.products_info .pdpage__gallery .up_swiper .swiper-slide{
  height:520px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important; /* 若圖片是用背景圖，也不裁切 */
}

/* 小圖：固定高度 + 置中 */
.products_info .pdpage__gallery .down_swiper{ margin-top:12px !important; height:110px !important; }
.products_info .pdpage__gallery .down_swiper .swiper-slide{
  height:110px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
}

/* 不管 Photo1~4 輸出是 img / a>img / picture，都完整顯示 */
.products_info .pdpage__gallery .swiper-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:#fff !important;
}
.products_info .pdpage__gallery .swiper-slide > a,
.products_info .pdpage__gallery .swiper-slide > picture,
.products_info .pdpage__gallery .swiper-slide > svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

/* RWD 高度 */
@media (max-width: 992px){
  .products_info .pdpage__gallery .up_swiper{ height:420px !important; }
  .products_info .pdpage__gallery .up_swiper .swiper-slide{ height:420px !important; }
  .products_info .pdpage__gallery .down_swiper{ height:96px !important; }
  .products_info .pdpage__gallery .down_swiper .swiper-slide{ height:96px !important; }
}
@media (max-width: 576px){
  .products_info .pdpage__gallery .up_swiper{ height:260px !important; }
  .products_info .pdpage__gallery .up_swiper .swiper-slide{ height:260px !important; }
  .products_info .pdpage__gallery .down_swiper{ height:78px !important; }
  .products_info .pdpage__gallery .down_swiper .swiper-slide{ height:78px !important; }
}

/* PC：商品圖與資訊欄各佔 50% */
@media (min-width: 992px){
  .products_info .pdpage{
    display:flex !important;
    gap:32px !important;          /* 你想要的左右間距，可調 */
    align-items:flex-start !important;
  }
  .products_info .pdpage__gallery{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .products_info .pdpage__info{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* 手機：維持上下堆疊 */
@media (max-width: 991.98px){
  .products_info .pdpage{
    display:block !important;
  }
  .products_info .pdpage__gallery,
  .products_info .pdpage__info{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ===============================
   商品列表頁：圖片不裁切 + 置中（覆蓋 products.css）
   =============================== */
.products .pd_picture{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
}

/* 若外層有固定高度 + overflow:hidden，也不會裁切 */
.products .pd_picture img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

/* 某些樣式會把 img 當 inline 造成偏上，這裡強制置中 */
@media (max-width: 768px){
  .products .pd_picture img{ margin:auto !important; }
}
/* 手機：商品列表圖片「水平置中」 */
@media (max-width: 768px){
  .products .pd_picture{
    display:flex !important;
    justify-content:center !important; /* 水平置中 */
    align-items:center !important;
    text-align:center !important;      /* 保險 */
  }

  .products .pd_picture img{
    width:auto !important;             /* 讓圖片不要硬撐滿寬，才看得出置中 */
    max-width:100% !important;
    margin-left:auto !important;       /* 保險：即使 flex 被蓋掉也能置中 */
    margin-right:auto !important;
    object-position:center center !important;
  }
}
/* ===============================
   商品列表頁（手機）：圖片容器滿寬 + 水平置中
   解決：pd_picture 被 float/固定寬度卡左
   =============================== */
@media (max-width: 768px){
  .products a.pd_picture{
    float: none !important;          /* 解除 float 靠左 */
    width: 100% !important;          /* 讓容器滿寬，才能置中 */
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important; /* 水平置中 */
    align-items: center !important;
    text-align: center !important;      /* 保險 */
  }

  /* 圖片本體置中：不撐滿寬，才看得出居中 */
  .products a.pd_picture img{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;       /* 保險：就算 flex 被蓋掉也置中 */
    display: block !important;
  }
}
/* 手機商品列表：不裁切 + 水平置中（覆蓋前面的 width/height:auto 設定） */
@media (max-width: 768px){
  .products a.pd_picture{
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;   /* 水平置中 */
    text-align: center !important;
    overflow: hidden !important;          /* 容器若本來就 hidden，這裡保持一致 */
  }

  .products a.pd_picture img{
    width: auto !important;               /* 讓圖不要硬撐滿寬 */
    height: 100% !important;              /* 依容器高度縮放 => 不會被裁切 */
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;       /* 保證不裁切 */
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
  }
}
/* 平板(751~1023)：商品詳細頁大圖 不裁切 + 置中（修正高度不一致造成跑版） */
@media (min-width: 751px) and (max-width: 1023px){

  /* up_swiper 高度固定，wrapper/slide 全部跟著 100% */
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper{
    height: 420px !important;
  }
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper .swiper-wrapper{
    height: 100% !important;
  }
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper .swiper-slide{
    height: 100% !important;                 /* ✅ 不要用 clamp，避免高度不一致 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 如果有包 a 標籤，也讓它撐滿 + 置中 */
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper .swiper-slide > a{
    width: 100% !important;
    height: 100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* 核心：zoomable 圖片完整顯示、不裁切、置中 */
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper .swiper-slide img.zoomable,
  .products_info .pdpage__gallery.pd_info_pic .swiper.up_swiper .swiper-slide img{
    width: auto !important;                  /* ✅ 用高度縮放更穩 */
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 1 !important;                   /* ✅ 防止被外部樣式變透明 */
    visibility: visible !important;
    display: block !important;
  }

  .products_info .up_swiper .swiper-wrapper{
    max-width: none !important;
    width: 100% !important;
  }
}



/* 首頁手機版 Banner：完整顯示圖片，不讓文案卡片蓋住主視覺 */
@media (max-width: 768px){
  .pagecm.hero_slider{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  .pagecm.hero_slider .hero_slide{
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    display: none !important;
  }

  .pagecm.hero_slider .hero_slide.is-active{
    display: block !important;
  }

  .pagecm.hero_slider .hero_slide img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
    aspect-ratio: 1920 / 650;
    background: #ffffff;
  }

  .pagecm.hero_slider .hero_overlay{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    margin-top: 10px !important;
    padding: 0 14px !important;
    pointer-events: auto !important;
  }

  .pagecm.hero_slider .hero_overlay_inner{
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .pagecm.hero_slider .hero_kicker{
    margin-bottom: 8px !important;
    font-size: .88rem !important;
    line-height: 1.2rem !important;
  }

  .pagecm.hero_slider .hero_h1{
    margin-bottom: 8px !important;
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }

  .pagecm.hero_slider .hero_sub{
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .pagecm.hero_slider .hero_cta{
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .pagecm.hero_slider .hero_btn{
    flex: 1 1 calc(50% - 5px) !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .pagecm.hero_slider .hero_chips{
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .pagecm.hero_slider .hero_chip{
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: .95rem !important;
    line-height: 1.25rem !important;
    text-align: center !important;
  }

  .pagecm.hero_slider .hero_dots{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding-bottom: 6px !important;
  }
}