/* =========================================================
   2026CNY v9 - CLEAN CSS (整理合併版)
   - YT 影片：方案2（滿版背景條 + 中間置中）
   - 商品區塊：間距/陰影統一、RWD 768/480 皆 1 欄
   - 保留你原本的視覺與結構，不亂刪減
   ========================================================= */

/* -------------------------
   Base / Layout
   ------------------------- */
:root{
  --cny-block-gap: 18px;

  --cny-border-color: rgba(248, 242, 93, 0.8);
  --cny-border-width: 2px;

  --cny-shadow: 0 6px 18px rgba(0,0,0,.08);
  --cny-shadow-hover: 0 12px 28px rgba(0,0,0,.14);

  --brand-yellow: #f3c233;
  --brand-orange: #ff6f1c;
  --brand-red: #c8262b;
  --title-bg: #f79b32;
  --title-text: #7f0d0d;

  /* EDM 文字微調 */
  --edm-text-x: 0px;
  --edm-text-y: 4px;
  --gold-top-m: 50px;
}

html, body{ min-height: 100%; }
html{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

.m-55{ margin-top: 55px; }
#s00,#s01,#s02,#s03,#s04{margin:0 !important; padding:0 !important; height:0 !important;}

/* 每塊區塊間距統一 */
.cny-block{ margin: var(--cny-block-gap) 0 !important; }

/* 固定導覽列錨點避免被蓋住 */
#s02,#s03,#s04{ scroll-margin-top: 90px; }

/* -------------------------
   Background
   ------------------------- */
.cny-banner{ background: none !important; }

/* 桌機背景 */
body{
  background: url("../img/BG01.jpg") center top / cover no-repeat;
  background-attachment: fixed;
  background-color: #7f0d0d;
}

/* 768 / 480 都用 BG02 */
@media (max-width: 768px){
  body{
    background: url("../img/BG02.jpg") center top / cover no-repeat;
    background-attachment: fixed;
  }
}
@media (max-width: 480px){
  body{
    background: url("../img/BG02.jpg") center top / cover no-repeat;
    background-attachment: fixed;
  }
}

/* -------------------------
   Navbar / Menu
   ------------------------- */
.navbar.cny-banner{
  background: var(--brand-orange) !important;
  background-image: none !important;
}

.btn-cny.active{
  background-color: rgba(148, 28, 97, 0.47);  /* ✅ 修正錯誤語法 */
  border: var(--cny-border-width) solid rgba(252, 249, 191, 0.5);
  font-size: 1.5em !important;
}

.btn-cny a.active{ color: #fff !important; }

.nav-item a:hover{ color: #000 !important; }

.btn-cny:hover{
  background-color: rgba(255, 217, 7, 0.88);
  font-size: 1.5em !important;
  color: #000 !important;
}

div ul li a i{
  margin-left: 20px;
  width: 10%;
  text-align: center;
}

/* 通用黃框 */
.border-cny{
  border: var(--cny-border-width) solid var(--cny-border-color) !important;
}

/* 區塊標題條 */
.cny-w{
  width: 100%;
  background: var(--title-bg);
  background-image: none !important;
  color: var(--title-text);
  text-align: center;
}

.btn-cnyb{
  background: var(--brand-yellow) !important;
  background-image: none !important;
  color: var(--title-text) !important;
}

/* -------------------------
   Hero Banner (YearHorse + Shining04)
   ------------------------- */
.hero-picture,
.hero-picture img{
  display: block;
}

/* 桌機刊頭比例 1200x462；手機改 1:1 對應 1080x1080 */
.cny-hero{
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 462;
  overflow: hidden;
}

/* 讓桌機/手機 BN 都能填滿且等比裁切 */
.hero-picture{
  position: absolute;
  inset: 0;
  display: block;
  z-index: 4;
}

.hero-banner-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 手機：改成 1:1，吃 YearHorse1080 */
@media (max-width: 768px){
  .cny-hero{ aspect-ratio: 1 / 1; }
  .hero-banner-img{ object-position: center top; }
}

/* 刊頭底圖/影片都疊滿版 */
.cny-hero > img,
.cny-hero > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 火花特效（透明度可改：0.1~1） */
.cny-hero .hero-shine{
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.40; /* ✅ 40% 透明度（可自行改 0.6=60%） */
}

/* -------------------------
   ✅ YT 影片（方案2：滿版背景條 + 中間置中）
   HTML 對應：
   <div id="ytVideo" class="cny-block yt-strip">
     <div class="yt-inner"> ... </div>
   </div>
   ------------------------- */
#ytVideo.yt-strip{
  width: 100%;
  margin: var(--cny-block-gap) 0 !important;
  padding: 0;
  background: transparent; /* 想要一條底色可改成 #fff */
}

#ytVideo.yt-strip .yt-inner{
  max-width: 1200px;     /* 中間置中寬度 */
  margin: 0 auto;
  padding: 0 12px;       /* 小螢幕左右留邊 */
}

#ytVideo.yt-strip iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* -------------------------
   Sale01 / Salebox (取消透明陰影)
   ------------------------- */
.sale-block{ margin: var(--cny-block-gap) 0 !important; }

/* sale 區塊不要陰影/框 */
.sale-block .product-tile{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sale-block .product-tile:hover{
  box-shadow: none !important;
  filter: brightness(1.02);
}

/* 下方 3 塊：一排三欄，手機改一欄 */
.sale-boxes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cny-block-gap);
  margin-top: var(--cny-block-gap);
}
@media (max-width: 480px){
  .sale-boxes{ grid-template-columns: 1fr; }
}

/* -------------------------
   Titlebox01
   ------------------------- */
.titlebox{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 18px 0 14px;
}

.titlebox-img{
  display: block;
  width: min(600px, 100%);
  height: auto;
}

/* -------------------------
   Products (上方6塊：詳細卡 + Hover)
   ------------------------- */
.product-section{
  padding: 0 0 10px;
}

/* 你之前有設定 product-section.bg-light 取消底色，保留 */
.product-section.bg-light{
  background-color: transparent !important;
}

.product-grids{ padding: 16px; margin-top: 12px; }

.product-grid{
  display: grid;
  gap: 18px;
}

/* 上方 6 塊：桌機 2 欄；<=768 全部 1 欄 */
.product-grid--2col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px){
  .product-grid--2col{ grid-template-columns: 1fr !important; }
}

/* 共用卡片 hover（上6/輪播共用） */
.product-card{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  text-decoration: none;
  cursor: default; /* 不要手指 */
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--cny-shadow-hover);
  filter: brightness(1.03);
}

.product-img{ width: 100%; height: auto; display: block; }

/* 上方 6 塊：白色圓角容器襯底（保留 LOGO＋文字） */
.product-card--detailed{
  background: #fffedb;
  border: 3px solid rgba(0,0,0,.08);
  box-shadow: var(--cny-shadow);
}

/* LOGO + 文字（桌機：左右） */
.product-meta{
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #fffedb;
}

.product-logo{ flex: 0 0 120px; max-width: 120px; }
.product-logo img{ width: 100%; height: auto; display: block; }

.product-copy .card-title{
  font-size: 20px;
  margin: 0 0 6px;
  line-height: 1.25;
  color: #9c0606;
  font-weight: 800;
}
.product-copy .card-text{
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.55;
}

/* 手機：logo 在上、文字在下 + 距離更近 */
@media (max-width: 480px){
  .product-card--detailed .product-meta{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px !important;
  }
  .product-card--detailed .product-logo{
    flex: 0 0 auto !important;
    max-width: 100px;
    margin: 0 auto !important;
  }
  .product-card--detailed .product-copy{ width: 100%; }
  .product-card--detailed .product-copy .card-text{ margin-top: 4px !important; }
}

/* -------------------------
   product-tile（通用 hover）
   ------------------------- */
.product-tile{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--cny-shadow);
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.product-tile img{ width: 100%; height: auto; display: block; }
.product-tile:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--cny-shadow-hover);
  filter: brightness(1.03);
}
.product-tile:active{ transform: translateY(-1px) scale(0.995); }
.product-tile:focus-visible{
  outline: 3px solid rgba(255, 217, 7, 0.88);
  outline-offset: 3px;
}

/* -------------------------
   Carousel (下方8塊輪播)
   ------------------------- */
.product-carousel-wrap{margin-top:0 !important;}

.product-carousel{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 54px;
  --per-view: 3;
}

.pc-viewport{ overflow: hidden; }
.pc-track{
  display: flex;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.pc-item{
  flex: 0 0 calc((100% - (18px * (var(--per-view) - 1))) / var(--per-view));
}

/* 輪播內圖片：不要白卡底，只留圖片圓角 */
.product-card--simple{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.product-card--simple:hover{
  box-shadow: none !important;
  transform: translateY(-4px);
}
.product-card--simple .product-img{ border-radius: 22px; }

.pc-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 5;
}
.pc-btn:hover{ background: rgba(0,0,0,.5); }
.pc-prev{ left: 8px; }
.pc-next{ right: 8px; }

.pc-prev::before,
.pc-next::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  mask-size: 18px 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  background: #fff;
}
.pc-prev::before{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M12.7 3.3a1 1 0 0 1 0 1.4L8.4 9l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
}
.pc-next::before{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M7.3 16.7a1 1 0 0 1 0-1.4L11.6 11 7.3 6.7A1 1 0 0 1 8.7 5.3l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0z'/%3E%3C/svg%3E");
}

.pc-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.pc-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.pc-dot.is-active{ background: rgba(255,255,255,.95); }

@media (max-width: 768px){
  .product-carousel{ --per-view: 2; }
}
@media (max-width: 480px){
  .product-carousel{ --per-view: 1; padding: 0 46px; }
  .pc-item{ flex-basis: 100%; }
}

/* -------------------------
   Promo Cards (年菜認購 / 新春刮刮樂)
   ------------------------- */
.promo-card{
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: var(--cny-shadow);
}
.promo-card:hover{ box-shadow: var(--cny-shadow-hover); }
.promo-card img{ display: block; width: 100%; height: auto; }

.section-hero-link{ display: block; }
.section-hero-link img{ display: block; width: 100%; height: auto; }

/* -------------------------
   Footer text align
   ------------------------- */
.text-light{ text-align: center; }
.text-light2{ text-align: center; }

/* -------------------------
   EDM Floating Button (PNG + Text overlay)
   ------------------------- */
.edm-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  z-index: 3000;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.edm-float-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.edm-float-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 23px;
  line-height: 1.1;
  color: #fffffd;
  text-shadow: 0 2px 8px rgba(138, 5, 5, 0.55);
}

.edm-float-text > span{
  display: block;
  transform: translate(var(--edm-text-x), var(--edm-text-y));
  text-align: center;
}

.edm-float:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  filter: brightness(1.02);
}
.edm-float:active{
  transform: translateY(-1px) scale(0.99);
}

.cny-hero{
  --gold-x: 65%;
  --gold-y: 18%;
  --gold-w: 980px;
  --gold-scale: 1;
}

/* ✅ 手機版：金字置中到「馬」上方 */
@media (max-width: 768px){
  .cny-hero .hero-goldtype{
    left: 50% !important;
    right: auto !important;
    top: var(--gold-top-m, 78px) !important;      /* 你要往下就加大 */
    width: min(620px, 92%) !important;            /* 手機縮放 */
    transform: translate(-50%, 0) !important;      /* ✅ 置中 */
  }
}

/* =========================
   GOLD TYPE：置中用 transform，漂浮用 translate（不打架）
   ========================= */
.cny-hero .hero-goldtype{
  position: absolute;
  z-index: 7;
  left: var(--gold-x, 65%);
  top:  var(--gold-y, 18%);
  width: min(var(--gold-w, 980px), 52%);
  height: auto;

  /* 置中/定位：固定用 transform（不拿來做動畫） */
  transform: translateX(-50%) scale(var(--gold-scale, 1));

  /* ✅ 漂浮：用 translate（不會跟 transform 打架） */
  --gt-x: 0px;
  --gt-y: 0px;
  translate: var(--gt-x) var(--gt-y);

  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  animation: goldFloatTranslate 3.2s ease-in-out infinite;
  transition: translate .28s ease, filter .28s ease;
}

@keyframes goldFloatTranslate{
  0%,100%{ translate: var(--gt-x) var(--gt-y); }
  50%    { translate: var(--gt-x) calc(var(--gt-y) - 8px); }
}

/* ✅ 手機：置中在馬上方 */
@media (max-width: 768px){
  .cny-hero .hero-goldtype{
    left: 50% !important;
    top: var(--gold-top-m, 78px) !important;
    width: min(620px, 92%) !important;

    /* 手機置中只用 transform，不要再寫 transform: translate(-50%,0) 這種會打架的 */
    transform: translateX(-50%) scale(var(--gold-scale, 1));
  }
}

/* =========================
   GOLD TYPE：只自動漂浮（不吃 hover）
   ========================= */
.cny-hero{
  --gold-x: 65%;
  --gold-y: 18%;
  --gold-w: 980px;
  --gold-scale: 1;
}

/* 金字本體 */
.cny-hero .hero-goldtype{
  position: absolute;
  z-index: 7;
  left: var(--gold-x);
  top:  var(--gold-y);
  width: min(var(--gold-w), 52%);
  height: auto;

  /* 置中/定位 */
  transform: translateX(-50%) scale(var(--gold-scale));

  /* 漂浮用 translate（不打架） */
  --gt-x: 0px;
  --gt-y: 0px;
  translate: var(--gt-x) var(--gt-y);

  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));

  /* ✅ 只自動漂浮 */
  animation: goldFloatTranslate 3.2s ease-in-out infinite;
}

/* 漂浮動畫 */
@keyframes goldFloatTranslate{
  0%,100%{ translate: var(--gt-x) var(--gt-y); }
  50%    { translate: var(--gt-x) calc(var(--gt-y) - 8px); }
}

/* ✅ 手機：置中到馬上方 */
@media (max-width: 768px){
  .cny-hero .hero-goldtype{
    left: 50% !important;
    top: var(--gold-top-m, 120px) !important;
    width: min(620px, 92%) !important;
    transform: translateX(-50%) scale(var(--gold-scale));
  }
}


/* v9 spacing fix: unify mobile section gaps */
@media (max-width: 768px){
  /* anchors should not create visual gaps */
  #s00,#s01,#s02,#s03,#s04{margin:0 !important; height:0 !important;}
  /* avoid double top-gap on carousel wrap */
  .product-carousel-wrap{margin-top:0 !important;}
}