/* ===========================================================
   PCM 視覺優化層 v2  (附加層,不改原始結構;可整檔移除還原)
   品味框架:緩動 cubic-bezier(.16,1,.3,1) / 只動 transform·opacity /
            紅色降飽和 / 陰影帶色不發光 / :active 觸覺
   =========================================================== */
:root{
  --pcm-red:#d11f17;          /* 降飽和的品牌紅 */
  --pcm-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- 0) 全域平滑過渡 ---- */
a,.nectar-button,button,input[type=submit]{
  transition:color .25s var(--pcm-ease),background-color .3s var(--pcm-ease),
             border-color .3s var(--pcm-ease),transform .35s var(--pcm-ease),
             box-shadow .35s var(--pcm-ease);
}

/* ---- 1) 捲動進場:以「整列 row」為單位 → 並排文字/圖片同步,不錯開 ---- */
.pcm-anim .pcm-reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--pcm-ease),transform .7s var(--pcm-ease);
  will-change:opacity,transform;
}
.pcm-anim .pcm-reveal.pcm-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .pcm-anim .pcm-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* 1b) 讓 Salient 自帶的「逐元素進場動畫」一律可見(改由整列進場統一處理:
       避免在靜態/未觸發時卡在隱藏,也避免並排內容各自進場而錯開)*/
.pcm-anim .has-animation,
.pcm-anim .img-with-aniamtion-wrap,
.pcm-anim .wpb_animate_when_almost_visible{opacity:1!important;transform:none!important;}

/* ---- 2) 內容圖片 / logo:hover 微縮放 + 收邊 ---- */
.img-with-aniamtion-wrap,.nectar-image{overflow:hidden;border-radius:8px;}
.img-with-aniamtion-wrap img{transition:transform .6s var(--pcm-ease)!important;backface-visibility:hidden;}
.img-with-aniamtion-wrap:hover img{transform:scale(1.045);}

/* ---- 3) footer 社群圖示 ---- */
/* 3a) 解決點擊被擋:footer 容器層一律點擊穿透,只有真正的連結/按鈕可點 */
#footer-outer .wpb_wrapper,#footer-outer .wpb_text_column,
#footer-outer .vc_column-inner,#footer-outer .col,#footer-outer .row-bg,
#footer-outer .row-bg-wrap,#footer-outer .inner-wrap{pointer-events:none;}
#footer-outer a,#footer-outer button,#footer-outer .nectar-button,
#footer-outer input,#footer-outer .social a{pointer-events:auto!important;}
/* 3b) 最小干預:不改 Salient 的尺寸與置中,只放大字符 + 紅圈 hover */
.social a{border-radius:50%!important;transition:background-color .3s var(--pcm-ease),border-color .3s var(--pcm-ease),box-shadow .35s var(--pcm-ease)!important;}
.social a .fa,.social a i{font-size:24px!important;transition:color .3s var(--pcm-ease)!important;}
.social a:hover{background-color:var(--pcm-red)!important;border-color:var(--pcm-red)!important;box-shadow:0 8px 22px -6px rgba(209,31,23,.55);}
.social a:hover .fa,.social a:hover i{color:#fff!important;}

/* ---- 4) 購物按鈕(蝦皮/月付/Coupang):整齊等寬 2×2 網格(JS 加 .pcm-shop-grid)---- */
.pcm-shop-grid{
  display:grid!important;grid-template-columns:1fr 1fr;gap:14px;
  max-width:460px;margin:20px auto 0!important;
}
.pcm-shop-grid .nectar-button{
  width:100%!important;min-width:0!important;margin:0!important;
  display:flex!important;align-items:center;justify-content:center;
  padding-left:16px!important;padding-right:16px!important;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.4);
}
.pcm-shop-grid .nectar-button:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(209,31,23,.5);}
.pcm-shop-grid .nectar-button:active{transform:translateY(-1px) scale(.985);}
@media (max-width:480px){ .pcm-shop-grid{grid-template-columns:1fr;max-width:320px;} }

/* ---- 5) 滑動列 → 平滑無限持續滾動(marquee);分類頁=商品照, 首頁=品牌 logo 白帶 ---- */
/* 共用:slider 連續滾動 */
.pcm-marquee .flickity-slider{
  position:relative!important;left:auto!important;top:auto!important;
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;width:max-content!important;
  animation:pcm-marquee var(--pcm-marquee-dur,55s) linear infinite;
}
.pcm-marquee:hover .flickity-slider{animation-play-state:paused;}
.pcm-marquee .cell{position:relative!important;left:auto!important;top:auto!important;transform:none!important;flex:0 0 auto!important;overflow:hidden;}
@keyframes pcm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pcm-marquee .flickity-slider{animation:none!important;}}

/* 5a) 分類頁=商品照片帶(固定高度、寬度貼合圖片、無縫連續滾動,圖與圖之間無空隙)*/
.pcm-marquee:not(.pcm-marquee-logos) .flickity-viewport{overflow:hidden!important;height:200px!important;}
.pcm-marquee:not(.pcm-marquee-logos) .cell{
  width:auto!important;min-width:auto!important;max-width:none!important;
  height:200px!important;margin:0!important;padding:0!important;border-radius:0!important;
}
.pcm-marquee:not(.pcm-marquee-logos) .cell a,.pcm-marquee:not(.pcm-marquee-logos) .cell .img-with-aniamtion-wrap,.pcm-marquee:not(.pcm-marquee-logos) .cell > div{
  display:block!important;height:100%!important;width:auto!important;
}
.pcm-marquee:not(.pcm-marquee-logos) .cell img{
  width:auto!important;height:200px!important;max-width:none!important;object-fit:cover!important;display:block!important;
}

/* 5b) 首頁=品牌 logo 白帶(等比置中,連續無間隔)*/
.pcm-marquee-logos .flickity-viewport{
  overflow:hidden!important;height:190px!important;
  background:#fff!important;border-radius:0;
  width:100vw!important;position:relative;left:50%;transform:translateX(-50%);
}
.pcm-marquee-logos .cell{
  width:auto!important;min-width:auto!important;max-width:none!important;
  height:190px!important;margin:0!important;padding:0 34px!important;
  background:transparent!important;display:flex!important;align-items:center;justify-content:center;
}
.pcm-marquee-logos .cell a,.pcm-marquee-logos .cell .img-with-aniamtion-wrap,.pcm-marquee-logos .cell > div{
  display:flex!important;align-items:center;justify-content:center;width:auto!important;height:100%;
}
.pcm-marquee-logos .cell img{
  width:auto!important;height:auto!important;max-width:none!important;max-height:128px!important;object-fit:contain!important;
}

/* 非 marquee 的保底 */
.nectar-flickity:not(.pcm-marquee) .cell img{object-fit:cover!important;}

/* ---- 6) LINE 浮動鈕 ---- */
.chaty-widget a,.chaty-channel a{transition:transform .3s var(--pcm-ease)!important;}
.chaty-widget a:hover,.chaty-channel a:hover{transform:scale(1.08);}