/* ==========================================================================
   整合版 CSS 檔案 - 畜牧網站所有樣式（已完整修正層級與下拉選單樣式）
   ========================================================================== */

/* ==========================================================================
   CSS 變數與基礎樣式
   ========================================================================== */
   :root{
    --brand:#D0D0D0;
    --text:#333;
    --muted:#666;
    --bg:#fff;
    --light:#f6f6f6;
    --shadow:0 2px 12px rgba(0,0,0,.08);
    --radius:14px;
    --onbrand:#fff;
  
    /* Hero 高度變數 */
    --hero-min:320px;
    --hero-h:56vh;
    --hero-max:560px;
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  
  body{
    /* 完整繁中＋系統字型堆疊 */
    font-family:
      "Microsoft JhengHei","PingFang TC","Heiti TC","Hiragino Sans TC",
      "Noto Sans TC","Source Han Sans TC",
      system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
  }
  a{ color:var(--brand); text-decoration:none; }
  img{ max-width:100%; height:auto; display:block; }
  .container{ width:100%; max-width:1100px; margin:0 auto; padding:0 16px; }
  
  /* ==========================================================================
     通用工具類別
     ========================================================================== */
  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  
  .page-hero{ padding:18px 0 8px; }
  
  .badge{
    display:inline-block;
    background:var(--brand);
    color:var(--onbrand);
    font-size:12px;
    padding:4px 8px;
    border-radius:999px;
    margin-right:6px;
  }
  
  .meta{ font-size:14px; color:var(--muted); }
  
  .note{
    padding:10px 12px;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow);
    border:1px solid #eee;
  }
  .note.error{ border-color:#f2caca; background:#fff5f5; color:#a40000; }
  .note.info{ border-color:#e5e5e5; }
  
  /* ==========================================================================
     Header 與導航
     ========================================================================== */
  header.site-header{
    position:sticky; top:0;
    z-index:1000;
    background:#fff;
    box-shadow:var(--shadow);
    isolation:isolate;
    overflow:visible !important;
  }
  
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:10px 0;
    position:relative; z-index:1001;
    overflow:visible !important;
  }
  
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ width:120px; height:auto; border-radius:8px; }
  
  .hamburger{
    display:none; width:42px; height:38px;
    border:1px solid #ddd; border-radius:10px;
    background:#fff; cursor:pointer;
  }
  .hamburger span{
    display:block; width:70%; height:2px; background:#333; margin:7px auto;
  }
  
  nav.site-nav{
    display:flex; align-items:center; gap:10px;
    position:relative; z-index:1002;
    overflow:visible !important;
  }
  
  .menu{
    list-style:none; margin:0; padding:0;
    display:flex; align-items:center;
    position:relative; z-index:1003;
    overflow:visible !important;
  }
  
  .menu>li{
    position:relative !important;
    z-index:1004 !important;
    overflow:visible !important;
  }
  
  .menu>li>a,
  .menu>li>button{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 14px; color:#222;
    border-radius:10px; border:0; background:transparent;
    cursor:pointer; font-size:15px; font-family:inherit;
    position:relative; z-index:1005;
  }
  
  /* 下拉選單 */
  .dropdown-menu{
    position:absolute; left:0; top:100% !important;
    min-width:200px;
    background:#fff; border:1px solid #eee; border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.15) !important;
    padding:8px; display:none;
    z-index:1006 !important; margin-top:6px !important;
    overflow:visible !important;
  }
  
  /* 顯示控制 */
  .dropdown.open .dropdown-menu{ display:block !important; }
  
  /* ====== 關鍵修正：確保選單項目呈深色字，沒有透明 ====== */
  header.site-header .dropdown-menu a,
  header.site-header .dropdown-menu button{
    display:block !important;
    width:100% !important;
    padding:10px 12px !important;
    text-align:left !important;
    white-space:nowrap !important;
    color:#222 !important;              /* 文字固定深色 */
    background:transparent !important;
    border:0 !important;
    border-radius:8px !important;
    font:inherit !important;
    cursor:pointer !important;
    opacity:1 !important;               /* 避免被父層透明度影響 */
    filter:none !important;             /* 避免任何濾鏡變淡 */
  }
  @media (hover:hover){
    header.site-header .dropdown-menu a:hover,
    header.site-header .dropdown-menu button:hover{
      background:var(--light) !important;
    }
  }
  
  /* 搜尋 */
  .search{ display:flex; align-items:center; gap:10px; position:relative; z-index:1002; }
  .search input[type="search"]{
    width:220px; padding:9px 12px; border:1px solid #ddd; border-radius:10px;
    font-family:inherit; font-size:15px;
  }
  .search button{
    padding:10px 12px; border:0; border-radius:10px;
    background:#333; color:#fff; cursor:pointer; transition:background .2s ease;
    font-family:inherit; font-size:15px;
  }
  #search-results{
    display:none; background:#fff; border:1px solid #eee; border-radius:12px;
    box-shadow:var(--shadow); padding:12px; margin:10px 0 0;
    position:relative; z-index:1008 !important;
  }
  
  /* ==========================================================================
     Banner / Hero
     ========================================================================== */
  .banner{
    position:relative; overflow:hidden;
    border-radius:18px; margin:14px 0 8px; height:400px;
    z-index:10 !important; /* 低於 dropdown */
  }
  .banner .slide{
    position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
    width:100%; height:100%; object-fit:cover; z-index:10;
  }
  .banner .slide.active{ opacity:1; }
  
  /* 輪播文字覆蓋層與控制 */
  .banner-overlay{
    position:absolute; inset:0; z-index:12;
    pointer-events:none; display:flex; align-items:flex-end;
    padding:16px; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
    padding-left:300px !important;      /* 只移動覆蓋層的文字，圖不動 */
  }
  @media (max-width:480px){
    .banner-overlay{ padding-left:12px !important; }
  }
  
  .banner-slogan{
    /* 口號專用字型：英文字更俐落、中文仍兼容 */
    font-family: system-ui,-apple-system,"Segoe UI",Arial,
                 "Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;
    font-weight:800; color:#fff;
    font-size:clamp(28px,6vw,72px); line-height:1.08;
    text-shadow:0 3px 10px rgba(0,0,0,.5), 0 0 1px rgba(0,0,0,.45);
    letter-spacing:.5px; user-select:none; max-width:22ch;
  }
  @media (min-width:1200px){ .banner-slogan{ font-size:78px; } }
  
  /* 控制箭頭 */
  .banner-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; border:0;
    display:grid; place-items:center; background:rgba(0,0,0,.42); color:#fff;
    font-size:28px; line-height:1; cursor:pointer; z-index:14;
    box-shadow:0 4px 14px rgba(0,0,0,.2);
    transition:background .2s ease, transform .2s ease;
  }
  .banner-prev{ left:10px; } .banner-next{ right:10px; }
  .banner-nav:focus{ outline:2px solid rgba(255,255,255,.8); outline-offset:2px; }
  @media (hover:hover){
    .banner-nav:hover{ background:rgba(0,0,0,.55); transform:translateY(-50%) scale(1.04); }
  }
  
  /* 圓點指示 */
  .banner-dots{
    position:absolute; left:0; right:0; bottom:10px; z-index:13;
    display:flex; gap:8px; justify-content:center; pointer-events:auto;
  }
  .banner-dot{
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,.55); border:0; cursor:pointer;
    box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
  }
  .banner-dot.is-active{ background:#fff; }
  
  /* 滿版 Hero */
  .hero{
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw; z-index:10 !important;
  }
  .hero-media{
    position:relative; height:clamp(var(--hero-min),var(--hero-h),var(--hero-max));
    overflow:hidden; background:#f2f2f2; z-index:10;
  }
  .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); z-index:11; }
  .hero-caption{ position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:18px; z-index:12; }
  .hero-caption .container{ color:#fff; }
  .hero-title{ font-size:clamp(24px,4vw,42px); font-weight:800; letter-spacing:.5px; margin:0 0 6px; }
  .hero-sub{ font-size:clamp(14px,2.2vw,18px); opacity:.95; margin:0 0 4px; }
  
  /* 影片 Banner */
  .banner--bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; z-index:10 !important; }
  .banner .yt{
    position:absolute; left:50%; top:50%;
    width:100vw; height:calc(100vw * 9 / 16);
    transform:translate(-50%,-50%); border:0; pointer-events:none; z-index:10;
  }
  .banner .banner-fallback{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:10; }
  
  /* ==========================================================================
     按鈕
     ========================================================================== */
  .btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 16px; line-height:1; border-radius:999px;
    background:transparent; color:var(--brand); border:2px solid var(--brand);
    white-space:nowrap; transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
    text-decoration:none; font-family:inherit; font-size:15px; cursor:pointer;
  }
  .btn-fill{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 16px; line-height:1; border-radius:999px;
    background:var(--brand); color:#fff; border:2px solid var(--brand);
    white-space:nowrap; transition:filter .2s, box-shadow .2s; text-decoration:none; font-family:inherit; font-size:15px; cursor:pointer;
  }
  .btn[disabled]{ opacity:.55; pointer-events:none; cursor:not-allowed; }
  
  /* ==========================================================================
     區塊標題與卡片
     ========================================================================== */
  .section-title{
    position:relative; display:inline-block; background:#fff; box-shadow:var(--shadow);
    padding:8px 14px; border-radius:999px; margin-bottom:14px; font-weight:700;
    font-size:clamp(20px, 2.2vw + 8px, 24px); z-index:1;
  }
  .section-title::after{
    content:""; position:absolute; top:50%; left:100%;
    width:1000px; height:2px; background:#E0E0E0; transform:translateY(-50%); margin-left:12px; z-index:-1;
  }
  .card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; position:relative; z-index:1; }
  
  /* ==========================================================================
     首頁 Grid
     ========================================================================== */
  .news{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px; }
  .column{ display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; }
  .products{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .partners{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; width:100%; }
  
  /* ==========================================================================
     產品圓形卡片
     ========================================================================== */
  .product-card{ text-align:center; transition:transform .3s ease; position:relative; z-index:1; }
  .product-card__thumb{
    width:100%; aspect-ratio:1/1; background:#fff; border-radius:50%;
    display:grid; place-items:center; box-shadow:var(--shadow);
    overflow:hidden; transition:box-shadow .3s, transform .3s; position:relative; z-index:1;
  }
  .product-card__thumb img{
    width:100%; height:100%; object-fit:cover; border-radius:50%;
    padding:8%; transition:transform .4s;
  }
  .partners a{ display:block; background:#fff; padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; position:relative; z-index:1; }
  
  /* ==========================================================================
     Footer
     ========================================================================== */
  footer{ background:#DCDCDC; border-top:2px solid #eee; padding:40px 16px; margin-top:24px; position:relative; z-index:1; }
  .footer-container{
    max-width:1100px; margin:0 auto; display:flex; flex-direction:row; flex-wrap:nowrap;
    justify-content:space-between; align-items:flex-start; gap:24px;
  }
  .footer-left{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 1 33%; }
  .footer-left .logo{ width:140px; }
  .footer-left .brand-cn{ font-size:22px; font-weight:700; color:#222; }
  .footer-mid{ flex:1 1 33%; font-size:16px; line-height:1.9; color:#333; }
  .footer-divider{ width:2px; background:#cfcfcf; align-self:stretch; }
  .footer-right{ flex:1 1 33%; text-align:center; }
  .footer-right h4{ margin:0 0 12px; font-size:24px; font-weight:700; color:#222; }
  .footer-logos{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
  .footer-logos .partner{ text-align:center; }
  .footer-logos .partner a{ display:inline-block; }
  .footer-logos img{ height:70px; width:auto; object-fit:contain; margin-bottom:6px; }
  .footer-logos .caption{ font-size:14px; color:#333; line-height:1.4; }
  
  /* ==========================================================================
     關於我們
     ========================================================================== */
  .info-card{
    width:min(800px,92%); margin:20px auto 24px; background:#fff; border-radius:var(--radius);
    box-shadow:var(--shadow); padding:16px; position:relative; z-index:1;
  }
  .info-card h2{ margin:.2em 0 .4em; }
  .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
  .kv{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .kv div{ background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:10px; font-size:14px; }
  
  /* 時間軸 */
  .timeline-wrap{ position:relative; }
  .timeline{
    position:relative; max-height:520px; overflow-y:auto; scroll-behavior:smooth;
    background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:12px 12px 12px 32px; z-index:1;
  }
  .timeline::before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:3px; background:#e9e9e9; border-radius:2px; }
  .timeline::-webkit-scrollbar{ width:10px; }
  .timeline::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }
  .timeline-mask{ position:relative; }
  .timeline-mask::before,
  .timeline-mask::after{
    content:""; position:absolute; left:0; right:0; height:18px; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .timeline-mask::before{ top:0; }
  .timeline-mask::after{ bottom:0; transform:rotate(180deg); }
  .tl-item{ position:relative; margin:0 0 14px; }
  .tl-item:last-child{ margin-bottom:0; }
  .tl-dot{
    position:absolute; left:12px; transform:translateX(-50%);
    top:2px; width:14px; height:14px; border:3px solid var(--brand); background:#fff; border-radius:50%;
  }
  .tl-year{
    display:inline-block; background:#fafafa; border:1px solid #eee; border-radius:999px;
    padding:4px 10px; font-weight:700; margin-bottom:6px;
  }
  .tl-card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); }
  .tl-card h4{ margin:.2em 0; }
  .tl-meta{ font-size:13px; color:var(--muted); }
  .tl-more{ margin-top:6px; font-size:14px; }
  
  /* ==========================================================================
     文章與專欄
     ========================================================================== */
  .page-column-post .layout{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
  .page-column-post .toc{
    position:sticky; top:76px; background:#fff; border:1px solid #eee; border-radius:14px;
    box-shadow:var(--shadow); padding:12px; z-index:2;
  }
  .page-column-post .toc h4{ margin:.2em 0 .4em; }
  .page-column-post .toc .mini{ font-size:13px; color:#888; margin-bottom:6px; }
  .page-column-post .toc ul{ list-style:none; margin:0; padding:0; }
  .page-column-post .toc li{ margin:4px 0; }
  .page-column-post .toc a{ display:block; padding:6px 8px; border-radius:8px; color:#333; transition:background .2s ease; }
  .page-column-post .toc a.active{ background:var(--brand); color:var(--onbrand); }
  .page-column-post .toc .h3{ padding-left:16px; opacity:.9; }
  
  .page-column .blog-board{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:8px; position:relative; z-index:1; }
  .page-column .blog-list{ list-style:none; margin:0; padding:0; }
  .page-column .post-card{
    display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:center;
    padding:16px; border-bottom:1px solid #eee; position:relative; z-index:1;
  }
  .page-column .post-card:last-child{ border-bottom:0; }
  .page-column .post-card__thumb{
    width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#f0f0f0; box-shadow:var(--shadow); position:relative; z-index:1;
  }
  .page-column .post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
  .page-column .post-meta{ font-size:14px; color:var(--muted); margin-bottom:6px; }
  .page-column .post-title{ margin:.1em 0 .3em; font-size:20px; font-weight:800; color:#222; line-height:1.35; }
  .page-column .post-excerpt{ color:#333; }
  .page-column .post-actions{ margin-top:10px; display:flex; justify-content:flex-end; }
  
  .post-body h2, .post-body h3, .post-body h4{ scroll-margin-top:90px; }
  .post-body figure{ margin:12px 0; }
  .post-body figcaption{ color:#666; font-size:14px; margin-top:6px; }
  .post-body pre{ background:#0b0b0b; color:#eee; border-radius:12px; padding:12px; overflow:auto; font-family:monospace; }
  .post-body code:not(pre code){
    background:#f2f2f2; border-radius:6px; padding:2px 6px; font-family:monospace; font-size:.9em;
  }
  .post-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-top:16px; }
  .post-nav .btn{
    display:inline-block; padding:10px 12px; border-radius:999px; border:1px solid #ddd; background:#fff; color:#333; transition:background .2s ease;
  }
  .post-nav .btn-ghost{ border-color:var(--brand); }
  
  /* ==========================================================================
     列表頁面
     ========================================================================== */
  .news-board{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:6px 0; position:relative; z-index:1; }
  .news-list{ list-style:none; margin:0; padding:0; }
  .news-item{
    display:grid; grid-template-columns:120px 1fr 140px; gap:14px; align-items:center;
    padding:14px 18px; border-bottom:1px solid #e6e6e6; position:relative; z-index:1;
  }
  .news-item:last-child{ border-bottom:0; }
  .ni-date{ color:#222; font-weight:700; }
  .ni-text{ color:#333; }
  .ni-text .meta{ color:#666; font-size:14px; margin-top:4px; }
  .ni-actions{ display:flex; justify-content:flex-end; }
  
  .board{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:6px 0; position:relative; z-index:1; }
  .list{ list-style:none; margin:0; padding:0; }
  .item{
    display:grid; grid-template-columns:120px 1fr 140px; gap:14px; align-items:center;
    padding:14px 18px; border-bottom:1px solid #e6e6e6; position:relative; z-index:1;
  }
  .item:last-child{ border-bottom:0; }
  .i-date{ color:#222; font-weight:700; }
  .i-text{ color:#333; }
  .i-text .meta{ color:#666; font-size:14px; margin-top:4px; }
  .i-actions{ display:flex; justify-content:flex-end; }
  
  .service-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 22px; }
  .service-card{
    background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
    display:flex; gap:16px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; position:relative; z-index:1;
  }
  .service-card__thumb{ flex:0 0 220px; position:relative; z-index:1; }
  .service-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
  .service-card .body{ padding:16px; }
  .service-card h3{ margin:2px 0 6px; font-size:20px; }
  .service-card p{ margin:0 0 12px; color:#444; }
  
  /* ==========================================================================
     產品頁面
     ========================================================================== */
  .product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin:8px 0 24px; }
  .sidebar{
    background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:12px;
    position:sticky; top:76px; z-index:2;
  }
  .sidebar h3{ margin:0 0 8px; font-size:18px; }
  .cat-list{ list-style:none; margin:0; padding:0; }
  .cat-list li{ margin:2px 0; }
  .cat-list a{
    display:block; padding:10px 12px; border-radius:10px; color:#333; transition:background .2s ease;
  }
  .cat-list a.active{ background:var(--brand); color:var(--onbrand); }
  
  .main{ min-width:0; }
  
  .filters{ display:flex; gap:10px; align-items:center; margin:2px 0 14px; flex-wrap:wrap; }
  .filters input[type="search"], .filters select{
    padding:9px 12px; border:1px solid #ddd; border-radius:10px; font-family:inherit; font-size:15px;
  }
  .result-meta{ color:var(--muted); font-size:14px; margin-top:-6px; margin-bottom:8px; }
  
  .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .p-card{
    background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease; position:relative; z-index:1;
  }
  .p-card__thumb{ aspect-ratio:4/3; background:#fff; display:block; overflow:hidden; position:relative; z-index:1; }
  .p-card__thumb img{
    width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .25s ease; background:#fff;
  }
  .p-body{ padding:14px; }
  .p-title{ margin:0 0 4px; font-weight:700; }
  .p-meta{ color:var(--muted); font-size:14px; margin:0; }
  
  /* 產品詳情 */
  .breadcrumb{ font-size:14px; color:var(--muted); padding:10px 0; position:relative; z-index:1; }
  .breadcrumb a{ color:inherit; }
  
  .gallery{ display:flex; flex-direction:column; gap:12px; }
  .mainImg,.zoom-wrap{
    position:relative; border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow); aspect-ratio:4/3; z-index:1; width:100%;
  }
  .mainImg img,.zoom-wrap img{
    width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important;
    transition:transform .15s ease, transform-origin .1s ease; cursor:zoom-in; background:#fff; display:block;
  }
  .mainImg.zoomed img,.zoom-wrap.zoomed img{ transform:scale(2.2); cursor:zoom-out; }
  
  .product-gallery__thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
  .product-gallery__thumb-btn{
    appearance:none; border:1px solid #e5e5e5; background:#fff; border-radius:10px; overflow:hidden; cursor:pointer; padding:0;
    transition:border-color .2s ease; position:relative; z-index:1; width:96px; height:72px;
  }
  .product-gallery__thumb-btn.active{ border-color:var(--brand); }
  .product-gallery__thumb-btn img{
    width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; display:block !important; background:#fff;
  }
  
  .info h1{ margin:.1em 0 .3em; }
  .lead{ margin:.4em 0 1em; }
  .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
  
  /* 規格表格 */
  .table{ width:100%; border-collapse:collapse; }
  .table th,.table td{ border-bottom:1px solid #eee; padding:10px 8px; text-align:left; }
  .table th{ width:30%; color:#444; background:#fafafa; font-weight:600; }
  
  .grid-layout{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  
  /* ==========================================================================
     聯絡我們
     ========================================================================== */
  .contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  
  label{ display:block; font-weight:700; margin:.3em 0 .2em; }
  input,select,textarea{
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-size:15px; font-family:inherit;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  input:focus,select:focus,textarea:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(208,208,208,0.2);
  }
  textarea{ min-height:140px; resize:vertical; }
  
  .form-actions{ display:flex; gap:10px; align-items:center; margin-top:10px; }
  .notice{ margin-top:10px; font-size:14px; }
  .notice.ok{ color:#107a2a; } .notice.err{ color:#b42318; }
  
  .contacts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .contact-item{
    padding:12px; border:1px solid #eee; border-radius:12px; transition:border-color .2s ease; position:relative; z-index:1;
  }
  .contact-item h4{ margin:.2em 0 .4em; }
  
  .map-wrap{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative; z-index:1; }
  .map-wrap iframe{ width:100%; height:380px; border:0; }
  
  .details{ margin-top:10px; }
  details{
    background:#fff; border:1px solid #eee; border-radius:12px; padding:10px; box-shadow:var(--shadow); position:relative; z-index:1;
  }
  details+details{ margin-top:10px; }
  summary{ cursor:pointer; font-weight:700; transition:color .2s ease; }
  
  /* ==========================================================================
     Modal
     ========================================================================== */
  .modal{
    position:fixed; inset:0; background:rgba(0,0,0,.5); display:none;
    align-items:center; justify-content:center; padding:20px; z-index:1500;
  }
  .modal.show{ display:flex; }
  .modal-card{
    background:#fff; border-radius:16px; box-shadow:var(--shadow);
    max-width:980px; width:100%; overflow:hidden; max-height:90vh; overflow-y:auto; position:relative; z-index:1501;
  }
  .modal-head{
    display:flex; justify-content:space-between; align-items:center; padding:14px 16px;
    border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:1502;
  }
  .modal-title{ font-weight:700; }
  .modal-close{ appearance:none; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:#666; transition:color .2s ease; }
  .modal-body{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
  
  /* ==========================================================================
     Skeleton Loading
     ========================================================================== */
  .skeleton{ position:relative; overflow:hidden; background:#eee; }
  .skeleton::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    transform:translateX(-100%); animation:shimmer 1.4s infinite;
  }
  @keyframes shimmer{ 100%{ transform:translateX(100%); } }
  
  .s-card{ border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; background:#fff; position:relative; z-index:1; }
  .s-thumb{ aspect-ratio:4/3; }
  .s-line{ height:14px; margin:10px 14px; border-radius:8px; }
  .s-line.w60{ width:60%; } .s-line.w40{ width:40%; }
  
  .loading-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 24px; }
  .s-main{ aspect-ratio:4/3; border-radius:16px; }
  .s-kv{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:.6em 0; }
  .s-box{ height:56px; border-radius:12px; }
  .state{ padding:24px; text-align:center; font-size:15px; color:#666; }
  
  /* ==========================================================================
     分頁
     ========================================================================== */
  .pager{ text-align:center; margin:18px 0 6px; position:relative; z-index:1; }
  .pager a{
    display:inline-block; margin:0 6px; padding:6px 12px; border:1px solid #ddd; border-radius:999px; color:#333; transition:all .2s ease;
  }
  .pager a.active{ background:var(--brand); border-color:var(--brand); color:var(--onbrand); }
  .pager a[aria-disabled="true"]{ pointer-events:none; opacity:.45; }
  
  /* ==========================================================================
     Hover 效果（僅桌機）
     ========================================================================== */
  @media (hover:hover){
    .menu>li>a:hover,.menu>li>button:hover{ background:var(--light); }
    .dropdown-menu a:hover{ background:var(--light); }
    .search button:hover{ background:#555; }
    .btn:hover{ background:var(--brand); color:#fff; }
    .btn-fill:hover{ filter:brightness(1.05); }
    .partners a:hover{ transform:translateY(-2px); }
    .toc a:hover{ background:var(--light); }
    .post-nav .btn:hover{ background:var(--light); }
    .post-card:hover{ background:#fafafa; }
    .post-card__thumb:hover img{ transform:scale(1.05); }
    .news-item:hover,.item:hover{ background:#fafafa; }
    .service-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
    .service-card:hover .service-card__thumb img{ transform:scale(1.05); }
    .p-card:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
    .p-card:hover .p-card__thumb img{ transform:scale(1.04); }
    .cat-list a:hover{ background:var(--light); }
    .product-gallery__thumb-btn:hover{ border-color:var(--brand); }
    .contact-item:hover{ border-color:var(--brand); }
    summary:hover{ color:var(--brand); }
    .modal-close:hover{ color:#333; }
    .pager a:hover{ background:var(--light); border-color:var(--brand); }
    .product-card:hover .product-card__thumb img{ transform:scale(1.1); }
    .product-card:hover .product-card__thumb{ box-shadow:0 4px 16px rgba(0,0,0,.2); transform:translateY(-4px); }
  }
  
  /* ==========================================================================
     響應式
     ========================================================================== */
  /* 平板 ≤768 */
  @media (max-width:768px){
    .products{ grid-template-columns:repeat(2,1fr); }
    .partners{ grid-template-columns:repeat(3,1fr); }
    .news{ grid-template-columns:1fr; }
    .column{ grid-template-columns:1fr; }
    .service-grid{ grid-template-columns:1fr; }
    .service-card{ flex-direction:column; }
    .service-card__thumb{ flex-basis:auto; height:180px; }
    .grid-layout{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
    .contacts{ grid-template-columns:1fr; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
  
    .page-column-post .layout{ grid-template-columns:1fr; }
    .page-column-post .toc{ position:static; }
    .page-column .post-card{ grid-template-columns:1fr; }
    .page-column .post-actions{ justify-content:flex-start; }
  
    .contact-grid{ grid-template-columns:1fr; }
    .banner{ height:300px; }
  }
  
  /* 手機 ≤480 */
  @media (max-width:480px){
    .products{ grid-template-columns:1fr; }
    .partners{ grid-template-columns:repeat(2,1fr); }
    .product-grid{ grid-template-columns:1fr; }
    .grid-layout{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
    .banner{ height:220px; border-radius:14px; }
  }
  
  /* 導航選單 RWD */
  @media (max-width:720px){
    .hamburger{ display:inline-block; }
    .menu{
      display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0;
      background:#fff; box-shadow:var(--shadow); padding:16px; z-index:1002;
      max-height:calc(100vh - 100px); overflow-y:auto;
    }
    .menu.show{ display:flex; }
    .section-title{ font-size:22px; }
  
    .news-item,.item{ grid-template-columns:1fr; gap:6px; align-items:flex-start; }
    .ni-actions,.i-actions{ justify-content:flex-start; }
  
    .product-layout,.loading-wrap{ grid-template-columns:1fr; }
    .modal-body{ grid-template-columns:1fr; }
    .sidebar{ position:static; }
  }
  
  /* Footer RWD */
  @media (max-width:768px){
    .footer-container{ flex-direction:column; text-align:center; gap:16px; }
    .footer-left{ align-items:center; }
    .footer-mid{ text-align:center; }
    .footer-divider{ display:none; }
  }
  
  /* 992 以下 */
  @media (max-width:992px){
    .product-grid{ grid-template-columns:repeat(3,1fr); }
    .grid-layout{ grid-template-columns:repeat(3,1fr); }
    .news-item,.item{ grid-template-columns:110px 1fr 130px; }
    .banner{ height:300px; }
    .page-column-post .layout{ grid-template-columns:200px 1fr; }
    .page-column .post-card{ grid-template-columns:220px 1fr; }
  }
  
  /* 720 以下 */
  @media (max-width:720px){
    .banner{ height:220px; border-radius:14px; }
    .banner--bleed{ border-radius:0; }
  }
  
  /* 減少動態偏好 */
  @media (prefers-reduced-motion:reduce){
    .banner .slide{ transition:none; }
    .banner .yt{ display:none; }
    .banner .banner-fallback{ display:block; }
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
    .skeleton::after{ animation:none; }
  }
  
  /* ==========================================================================
     下拉選單層級最終保險
     ========================================================================== */
  main{ position:relative !important; z-index:1 !important; }
  .container{ position:relative !important; z-index:auto !important; overflow:visible !important; }
  header.site-header *{ overflow:visible !important; }
  nav.site-nav *{ overflow:visible !important; }
  .menu *{ overflow:visible !important; }
  .dropdown-menu{ z-index:9999 !important; }
  
  /* ==========================================================================
     產品縮圖樣式補強
     ========================================================================== */
  .product-grid .p-card__thumb{ aspect-ratio:4/3; background:#fff; display:block; overflow:hidden; position:relative; z-index:1; width:100%; height:auto; }
  .product-grid .p-card__thumb img{
    width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; transition:transform .25s ease; background:#fff; display:block;
  }
  
  .gallery .mainImg, .gallery .zoom-wrap{
    position:relative; border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow); aspect-ratio:4/3; z-index:1; width:100%;
  }
  .gallery .mainImg img, .gallery .zoom-wrap img{
    width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important;
    transition:transform .15s ease, transform-origin .1s ease; cursor:zoom-in; background:#fff; display:block;
  }
  
  /* 小縮圖 */
  .product-gallery__thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
  .product-gallery__thumb-btn{ appearance:none; border:1px solid #e5e5e5; background:#fff; border-radius:10px; overflow:hidden; cursor:pointer; padding:0; transition:border-color .2s ease; position:relative; z-index:1; width:96px; height:72px; }
  .product-gallery__thumb-btn.active{ border-color:var(--brand); }
  .product-gallery__thumb-btn img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; display:block !important; background:#fff; }
  
  /* 圓形卡片縮圖 */
  .product-card__thumb{ width:100% !important; aspect-ratio:1/1 !important; background:#fff; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .3s, transform .3s; position:relative; z-index:1; }
  .product-card__thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50%; padding:8%; transition:transform .4s; display:block; }
  
  /* 響應式調整 */
  @media (max-width:768px){
    .product-grid .p-card__thumb{ aspect-ratio:4/3; }
    .product-gallery__thumb-btn{ width:80px; height:60px; }
  }
  @media (max-width:480px){
    .product-gallery__thumb-btn{ width:70px; height:52px; }
  }
  
  /* 強制重置可能衝突的樣式 */
  .p-card__thumb img,
  .mainImg img,
  .zoom-wrap img,
  .product-gallery__thumb-btn img,
  .product-card__thumb img{
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  
  /* ==========================================================================
     桌面版專用樣式
     ========================================================================== */
  @media (min-width:1024px){
    .page-column .blog-list{ display:block !important; }
    .page-column .post-card{
      display:grid !important; grid-template-columns:260px 1fr !important;
      gap:20px !important; padding:20px !important; align-items:center !important;
    }
    .page-column .post-card__thumb{ width:100% !important; height:auto !important; aspect-ratio:16/9 !important; }
    .page-column-post .layout{ grid-template-columns:300px 1fr !important; gap:30px !important; }
  
    .ni-actions,.i-actions,.page-column .post-actions{ display:flex !important; justify-content:flex-end !important; }
  
    .container{ max-width:1200px !important; margin:0 auto !important; }
  
    .menu{ display:flex !important; flex-direction:row !important; position:static !important; }
    .hamburger{ display:none !important; }
  
    .news-item,.item{ grid-template-columns:120px 1fr 140px !important; gap:20px !important; }
  }
  
  @media (min-width:1200px){
    .product-grid{ grid-template-columns:repeat(4,1fr) !important; }
    .news{ grid-template-columns:1.2fr .8fr !important; }
    .column{ grid-template-columns:.9fr 1.1fr !important; }
    .products{ grid-template-columns:repeat(4,1fr) !important; }
  }
  
  @media (min-width:768px) and (max-width:1023px){
    .page-column .post-card{ grid-template-columns:200px 1fr !important; gap:16px !important; }
    .product-grid{ grid-template-columns:repeat(3,1fr) !important; }
    .page-column-post .layout{ grid-template-columns:250px 1fr !important; }
  }
  
  /* 修復行動版媒體查詢潛在衝突 */
  @media (max-width:720px){
    .page-column .post-card{ grid-template-columns:1fr !important; }
    .news-item,.item{ grid-template-columns:1fr !important; gap:10px !important; }
    .ni-actions,.i-actions{ justify-content:flex-start !important; }
    .page-column .post-actions{ justify-content:flex-start !important; }
  }
  
  /* ==========================================================================
     最新消息封面圖片統一設定
     ========================================================================== */
  .news-item img,
  .cover img{
    width:100%; max-width:100%; height:auto; object-fit:cover; border-radius:8px;
  }
  /* 列表頁特定尺寸 */
  .news-list .news-item img{ max-height:150px; min-height:120px; }
  /* 文章內頁特定尺寸 */
  .page-news-post .cover img{ max-height:400px; }
  /* 響應式調整 */
  @media (max-width:768px){
    .news-list .news-item img{ max-height:120px; min-height:100px; }
    .page-news-post .cover img{ max-height:250px; }
  }
  
  /* 首頁最新內容 hover 微動效 */
  #latest-news-container, #latest-column-container{ transition:all .3s ease; }
  #latest-news-container:hover, #latest-column-container:hover{
    transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.15);
  }
  .latest-content h3, .column-text h3{ color:#2c3e50; font-weight:600; }
  .latest-meta, .column-meta{ font-size:14px; color:#7f8c8d; font-weight:500; }
  @media (max-width:768px){
    .news{ grid-template-columns:1fr !important; }
    .column-content{ grid-template-columns:1fr !important; text-align:center; }
    .latest-cover img{ height:150px !important; }
  }
  @media (max-width:480px){
    .latest-content h3, .column-text h3{ font-size:16px; }
    .btn{ padding:8px 12px; font-size:14px; }
  }