/*
 * 品牌形象版的全站樣式（首頁以外）。首頁專用的在 views/partials/home-style.php，色票相同。
 * 方向：不用固定背景海報、不用卡片陰影；頁首一條深綠色帶（或照片）＋宋體標題，內容白底留白。
 */
:root {
    --sn-ink: #1c2b22;        /* 墨苗綠：色帶、標題 */
    --sn-leaf: #4e7661;       /* 品牌主色（同 --bs-primary） */
    --sn-sprout: #b9d77e;     /* 新芽綠：深色底上的小字 */
    --sn-mist: #f3f5f1;       /* 淡霧綠：頁尾、區塊底色 */
    --sn-line: #dde3da;
    --sn-gutter: clamp(20px, 4vw, 48px);
}

/* 頁首白底（原本全站 #eee 灰底）、頁尾淡霧綠 */
#header { background: #fff; border-bottom: 1px solid var(--sn-line); }
/* 版型在頁首固定（捲動後）時會改成 #eee 灰底，跟白色頁首不一致 */
.sticky .main-header { background-color: #fff !important; }
footer.footer { background: var(--sn-mist); }

/* ── 列表類頁面的頁首色帶（partials/page-breadcrumb.php，有 $pageHero 時） ── */
.sn-page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    /* 還沒有頁首照片時：深綠底＋一畦一畦的斜紋，和首頁田間救援同一個語彙 */
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 46px),
        var(--sn-ink);
}
.sn-page-hero.has-photo { background: var(--sn-ink); }
.sn-page-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-page-hero.has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, rgba(18, 30, 23, .78) 0%, rgba(18, 30, 23, .35) 55%, rgba(18, 30, 23, .1) 100%),
        linear-gradient(0deg, rgba(18, 30, 23, .55) 0%, rgba(18, 30, 23, 0) 60%);
}
.sn-page-hero-inner {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) var(--sn-gutter) clamp(44px, 6vw, 76px);
}
.has-photo .sn-page-hero-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(280px, 38vh, 440px); }
.sn-page-hero .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .75);
    justify-content: flex-start;
    margin-bottom: 1.4rem;
    padding: 0;
    font-size: .86rem;
    letter-spacing: .12em;
}
.sn-page-hero .breadcrumb a { color: #fff; text-decoration: none; }
.sn-page-hero .breadcrumb a:hover { color: var(--sn-sprout); }
/* 內頁大標題（文章、消息、商品名）用宋體；字型用 serifFontLink() 載入 */
.sn-serif { font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-weight: 600; letter-spacing: .04em; }

.sn-page-title {
    margin: 0;
    color: #fff;
    font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .08em;
}
.sn-page-lead { max-width: 42em; margin: 1.25rem 0 0; color: rgba(255, 255, 255, .86); font-size: 1.02rem; line-height: 1.9; }
.sn-page-hero a:focus-visible { outline: 2px solid var(--sn-sprout); outline-offset: 3px; }

/* 後台「頁面橫幅」的圖當底（PAGE_HERO_USE_BANNER）：整頁只鋪一張（.sn-page-backdrop），頁首透明共用同一張，
   上下連成一片、沒有接縫。原圖是淺色海報，蓋一層白、改深色字 */
.sn-page-hero.is-poster { color: var(--sn-ink); background: transparent; }
.is-poster .sn-page-title { color: var(--sn-ink); }
.is-poster .sn-page-lead { color: #3a403c; }
.is-poster .breadcrumb { --bs-breadcrumb-divider-color: #9aa39c; --bs-breadcrumb-item-active-color: #3a403c; }
.is-poster .breadcrumb a { color: var(--sn-leaf); }
.is-poster a:focus-visible { outline-color: var(--sn-leaf); }

/* 內容區後面的淡底圖：用固定定位的元素而不是 background-attachment: fixed（iOS Safari 不支援） */
.sn-page-backdrop {
    /* 往上多出 18vh：原圖左上角的 logo 與手寫標語推到視窗外（頁首已經有 logo），右上的標語留在畫面裡 */
    position: fixed; top: -18vh; right: 0; bottom: 0; left: 0; z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)),
        var(--sn-poster) 88% center / cover no-repeat;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    /* 手機只看得到圖的一小段：取中間的田野與霧氣，避開圖上的文字（只露半截會疊在標題後面） */
    .sn-page-backdrop { background-position: 0 0, 45% center; }
}

/* ── 內頁、會員、結帳：只有一條細麵包屑 ── */
.sn-crumbs { border-bottom: 1px solid var(--sn-line); }
.sn-crumbs .breadcrumb { justify-content: flex-start; margin: 0; padding: 1rem 0; font-size: .86rem; letter-spacing: .08em; }
.sn-crumbs .breadcrumb a { color: var(--sn-leaf); text-decoration: none; }

/* 內容區：原本的白卡片（壓在背景海報上用的）改成平面，頁面本身就是白底 */
.content-sheet { position: relative; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }

/* 購物車側欄：內容區在電腦版會縮成內容寬度（me-xl-auto），空購物車的訊息因此偏左；空的時候讓它佔滿側欄寬度 */
#shoppingCart .offcanvas-body:has(.cart-empty) { margin-right: 0 !important; }

/* ── 分類標籤列（商品、農事知識、常見問題）：電腦換行排列；手機一排左右滑，不換行、不擠成兩三排 ── */
.sn-chips { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.75rem; padding: 0; list-style: none; }
.sn-chips a {
    display: inline-flex; align-items: center; min-height: 42px; padding: .45rem 1.15rem;
    color: var(--sn-ink); font-size: .95rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-decoration: none;
    background: #fff; border: 1px solid var(--sn-line); border-radius: 999px;
    transition: color .2s, border-color .2s, background-color .2s;
}
.sn-chips a:hover { color: var(--sn-leaf); border-color: var(--sn-leaf); }
.sn-chips a[aria-current="page"] { color: #fff; background: var(--sn-ink); border-color: var(--sn-ink); }
.sn-chips a:focus-visible { outline: 2px solid var(--sn-leaf); outline-offset: 2px; }
@media (max-width: 767.98px) {
    .sn-chips {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        /* 貼齊螢幕兩側滑動，右緣淡出提示還有更多 */
        margin-right: -.75rem; margin-left: -.75rem; padding: 0 .75rem 2px;
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
        mask-image: linear-gradient(90deg, #000 92%, transparent);
    }
    .sn-chips::-webkit-scrollbar { display: none; }
    .sn-chips li { flex: 0 0 auto; scroll-snap-align: start; }
}

/* 分類列捲動時固定在頁首下方（頁首往下捲會藏起來，這時貼到畫面最上緣）：
   --sn-sticky-top 由 footer.php 的程式依頁首狀態設定，transition 時間和頁首的滑動一致 */
.sn-chips-bar { position: sticky; top: var(--sn-sticky-top, 0px); z-index: 4; margin-bottom: 2.25rem; padding: .7rem 0; transition: top .5s; }
.sn-chips-bar::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; width: 100vw; margin-left: -50vw;
    background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .25s;
}
.sn-chips-bar.is-stuck::before { opacity: 1; box-shadow: 0 1px 0 var(--sn-line); }
.sn-chips-bar .sn-chips { margin-bottom: 0; }
/* 底色用 100vw 撐滿，但 100vw 含捲軸寬度，有常駐捲軸的瀏覽器（Windows）會多出捲軸寬、整頁可以左右滑：
   在 main 把橫向超出的部分裁掉（clip 不會變成捲動容器，sticky 照常作用） */
#content:has(.sn-chips-bar) { overflow-x: clip; }
/* 頁首的下拉選單（z-index 5）要能蓋過分類列，所以分類列是 4 */

/* ── 影片頁（partials/video-page.php）：最新一支放大＋其餘靠左的格狀排列 ── */
.sn-video-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sn-ink); border-radius: 2px; }
.sn-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .6, .2, 1); }
.sn-video-thumb:hover img { transform: scale(1.04); }
.sn-video-play {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
    width: 60px; height: 60px; margin: -30px 0 0 -30px;
    color: var(--sn-ink); background: rgba(255, 255, 255, .92); border-radius: 50%;
    transition: transform .3s, background-color .3s;
}
.sn-video-thumb:hover .sn-video-play { transform: scale(1.08); background: var(--sn-sprout); }
.sn-video-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(48px, 6vw, 80px); margin-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--sn-line); }
.sn-video-feature .sn-video-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.sn-video-label { display: flex; align-items: center; gap: .9em; margin-bottom: 1rem; color: #56731f; font-size: .82rem; font-weight: 600; letter-spacing: .3em; }
.sn-video-label::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sn-video-feature-title { margin-bottom: 1.25rem; color: var(--sn-ink); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.4; }
.sn-video-desc { color: #5d635f; line-height: 1.85; overflow-wrap: anywhere; }
.sn-clamp-2, .sn-clamp-5 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.sn-clamp-2 { -webkit-line-clamp: 2; }
.sn-clamp-5 { -webkit-line-clamp: 5; }
.sn-video-desc.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.sn-more-toggle { margin: -.25rem 0 .75rem; padding: 0; color: var(--sn-leaf); font-size: .88rem; font-weight: 600; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.sn-more-toggle:hover { color: var(--sn-ink); }
.sn-video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.sn-text-link { display: inline-flex; gap: .5em; color: var(--sn-leaf); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.sn-text-link::after { content: "→"; }
.sn-video-count { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 2rem; color: var(--sn-ink); font-size: 1.35rem; font-weight: 700; }
.sn-video-count span { color: #6e6e6e; font-size: .95rem; font-weight: 400; }
.sn-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 0; padding: 0; list-style: none; }
.sn-video-title { display: -webkit-box; margin: 1.1rem 0 .5rem; overflow: hidden; color: var(--sn-ink); font-size: 1.08rem; font-weight: 700; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sn-video-grid .sn-video-desc { margin-bottom: .75rem; font-size: .92rem; }
@media (max-width: 991.98px) {
    .sn-video-feature { grid-template-columns: 1fr; }
    .sn-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
}
@media (max-width: 575.98px) {
    /* 手機兩欄、只留標題，影片多時才不會拉得很長 */
    .sn-video-grid { gap: 28px 12px; }
    .sn-video-grid .sn-video-title { margin-top: .7rem; font-size: .95rem; }
    /* 說明預設收起，按「看完整說明」才展開；展開的那一格橫跨兩欄，文字才不會擠在半個螢幕寬裡 */
    .sn-video-grid .sn-video-desc:not(.is-open) { display: none; }
    .sn-video-grid li:has(.is-open) { grid-column: 1 / -1; }
    .sn-video-grid .sn-more-toggle { margin-top: 0; font-size: .82rem; }
    .sn-video-grid .sn-text-link { font-size: .85rem; }
    .sn-video-grid .sn-video-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) {
    .sn-video-thumb img, .sn-video-play { transition: none; }
    .sn-video-thumb:hover img { transform: none; }
}

/* ── 關於我們（views/pages/about.php）：一頁往下讀，左邊段落名稱（宋體）、右邊內文；
   很短的項目（營業項目）宋體大字一列，媒體報導淡霧綠底，隱私權條文排最後、收合 ── */
.sn-about-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sn-gutter); }
.sn-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 6vw, 96px); }
.sn-about-sec { padding: clamp(56px, 8vw, 112px) 0; }
/* 兩段白底相鄰時中間一條細線，不重複留兩倍空白 */
.sn-about-sec:not(.is-tinted) + .sn-about-sec:not(.is-tinted) { padding-top: 0; }
.sn-about-sec:not(.is-tinted) + .sn-about-sec:not(.is-tinted) .sn-about-grid { padding-top: clamp(56px, 8vw, 112px); border-top: 1px solid var(--sn-line); }
.sn-about-sec.is-tinted { background: var(--sn-mist); }

.sn-about-no { display: flex; align-items: center; gap: .9em; margin-bottom: 1rem; color: var(--sn-leaf); font-size: .8rem; font-weight: 600; letter-spacing: .3em; }
.sn-about-no::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sn-about-title { margin: 0; color: var(--sn-ink); font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.35; letter-spacing: .1em; }
.sn-about-body { max-width: 40em; }
.sn-about-body p { margin: 0 0 1.4em; color: #3a403c; font-size: 1.04rem; line-height: 2.05; text-align: justify; }
.sn-about-body > p:last-child { margin-bottom: 0; }
.sn-about-body .sn-about-lead { color: var(--sn-ink); font-size: clamp(1.1rem, 1.6vw, 1.26rem); font-weight: 600; line-height: 1.95; }
.sn-about-body h3 { margin: 2.2em 0 .8em; color: var(--sn-ink); font-size: 1.04rem; font-weight: 700; letter-spacing: .04em; }

/* 很短的項目（營業項目）：宋體大字一列，細線分隔 */
.sn-about-items { display: flex; flex-wrap: wrap; align-items: center; align-self: end; margin: 0; padding: 0; list-style: none; }
.sn-about-items li { padding: .1rem clamp(1rem, 3vw, 2.5rem); color: var(--sn-ink); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.3; letter-spacing: .14em; white-space: nowrap; }
.sn-about-items li:first-child { padding-left: 0; }
.sn-about-items li + li { border-left: 1px solid var(--sn-line); }

.sn-about-media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.75rem; align-items: center; }
.sn-about-media + .sn-about-media { margin-top: 2.5rem; }
.sn-about-media-photo { display: block; overflow: hidden; border-radius: 2px; }
.sn-about-media-photo img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sn-about-media-photo:hover img { transform: scale(1.03); }
.sn-about-media-meta { margin-bottom: .5rem; color: #6e6e6e; font-size: .85rem; letter-spacing: .06em; }
.sn-about-media-title { margin-bottom: .75rem; font-size: 1.15rem; font-weight: 700; line-height: 1.6; }
.sn-about-media-title a { color: var(--sn-ink); text-decoration: none; }
.sn-about-media-title a:hover { color: var(--sn-leaf); }
.sn-about-media p:last-child { color: #3a403c; font-size: .95rem; line-height: 1.9; }

.sn-about-legal-title { margin: 0; color: var(--sn-ink); font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; }
.sn-about-legal .sn-about-body p { color: #5d635f; font-size: .92rem; line-height: 1.95; text-align: left; }
.sn-about-legal .sn-about-body h3 { font-size: .96rem; }
.sn-about-more { margin-top: 1.25rem; }
.sn-about-more summary { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; color: var(--sn-leaf); font-weight: 600; letter-spacing: .06em; cursor: pointer; list-style: none; }
.sn-about-more summary::-webkit-details-marker { display: none; }
.sn-about-more summary::after { content: "+"; font-size: 1.2em; line-height: 1; }
.sn-about-more[open] summary::after { content: "−"; }
.sn-about-more summary:hover { color: var(--sn-ink); }
.sn-about-more summary:focus-visible, .sn-about-media a:focus-visible { outline: 2px solid var(--sn-leaf); outline-offset: 3px; }
.sn-about-more[open] summary { margin-bottom: .5rem; }
/* 從其他頁連到某一段（about.php#privacy）時，標題不被頁首蓋住 */
[data-about-title] { scroll-margin-top: 90px; }

@media (max-width: 767.98px) {
    .sn-about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .sn-about-body p { text-align: left; }
    .sn-about-media { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sn-about-media-photo img { transition: none; }
    .sn-about-media-photo:hover img { transform: none; }
}

/* ── 右下浮動按鈕（footer.php .floating-actions）：按鈕寬度不同（結帳是膠囊形），全部靠右對齊 ── */
.floating-actions { display: flex; flex-direction: column; align-items: flex-end; }
/* 結帳：墨綠膠囊＋新芽綠件數（原本是紅色圓圈＋右上角綠色角標，和品牌色不搭） */
.sn-fab-cart {
    align-items: center; gap: .5rem;
    height: var(--floating-size); padding: 0 .45rem 0 1rem;
    color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-decoration: none;
    background: var(--sn-ink); border-radius: 999px;
    box-shadow: 0 6px 18px rgba(28, 43, 34, .22);
    transition: background-color .2s, box-shadow .2s;
}
.sn-fab-cart:hover, .sn-fab-cart:focus-visible { color: #fff; background: var(--sn-leaf); box-shadow: 0 8px 22px rgba(28, 43, 34, .28); }
.sn-fab-cart:focus-visible { outline: 2px solid var(--sn-leaf); outline-offset: 3px; }
.sn-fab-cart-icon { width: 18px; height: 18px; flex: none; }
.sn-fab-cart-count {
    display: grid; place-items: center; min-width: calc(var(--floating-size) - 16px); height: calc(var(--floating-size) - 16px); padding: 0 .35em;
    color: var(--sn-ink); font-size: .85rem; font-weight: 700; letter-spacing: 0;
    background: var(--sn-sprout); border-radius: 999px;
}

/* ── 「已加入購物車」提示（index.js #addCart 的 Swal toast）：單行、從頁首下緣出現（top 由 willOpen 設定），不蓋住選單鈕；
   只淡入淡出，不用 SweetAlert 預設會旋轉晃動的 toast 動畫 ── */
/* 容器改成整列寬再置中：原本 left:50% 搭配 width:auto，可用寬度只剩半個畫面，內容會被擠成兩行（容器本身 pointer-events: none，不會擋點擊） */
body.swal2-toast-shown .swal2-container.sn-cart-toast-wrap { left: 0; right: 0; width: 100%; max-width: none; padding: 0 12px; transform: none; justify-items: center; }
.swal2-popup.swal2-toast.sn-cart-toast {
    --swal2-toast-show-animation: sn-toast-in .18s ease-out;
    --swal2-toast-hide-animation: sn-toast-out .15s ease-in forwards;
    grid-template-columns: auto auto; align-items: center; column-gap: .75rem;
    max-width: 100%; padding: .45rem .5rem .45rem .85rem; border-radius: .6rem;
}
.swal2-popup.swal2-toast.sn-cart-toast > * { grid-column: auto; }
.sn-cart-toast .swal2-title { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--sn-ink); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.sn-cart-toast .sn-toast-check { width: 18px; height: 18px; flex: none; color: var(--sn-leaf); }
.sn-cart-toast .swal2-actions { margin: 0; padding: 0; flex-wrap: nowrap; }
.sn-cart-toast .swal2-actions .btn { margin: 0; white-space: nowrap; }
@keyframes sn-toast-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sn-toast-out { from { opacity: 1; } to { opacity: 0; } }

/* 沒有商品時的提示（分類空了） */
.sn-empty-list { margin: 1rem 0 3rem; color: #5b6560; font-size: 1rem; letter-spacing: .04em; }