/* ========== Tokens ========== */
:root {
    --paper: #FDFBF7;      /* 水彩紙米白（背景基底） */
    --surface: #FFFFFF;    /* 純白（卡片、頁首） */
    --ink: #1D2B23;        /* 主要文字 */
    --orange: #FF8C00;     /* 主色調：活力橙 */
    --green: #4CAF50;      /* 輔助色：清新嫩綠 */
    --gold: #FFD700;       /* 點綴色：金 */
    --leaf: #2E7D32;       /* 嫩綠的深色版，給文字連結用（白底對比足夠） */
    --leaf-soft: #E6F4E3;
    --media-bg: /* 產品圖展示台：宣紙紋理，中心壓白讓水果乾淨 */
        radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.85) 0%, rgba(253,250,244,.6) 55%, rgba(244,238,227,.35) 100%),
        url("../images/hueiji/decor/paper.jpg") center / 600px auto repeat,
        #FBF8F2;
    --sun: #FFAD4D;        /* 淺橙：產季、主要按鈕、本月 */
    --sun-soft: #FFEBD1;
    --sun-deep: #B35F00;   /* 盛產月份 */
    --navy: #2C4A72;       /* 取自 Logo 的字母藍，用於主標題 */
    --line: #E4DED2;
    --mute: #5E6660;
    --danger: #A33A2B;
    /* 以下由後台「網站設定」覆寫 */
    --header-bg: var(--surface);  /* 頁首底色 */
    --hero-bg: var(--paper);      /* 首頁大圖區底色 */
    --page-bg: var(--paper);      /* 頁面底色 */
    --section-bg: var(--surface); /* 交錯區塊底色 */
    --footer-bg: #F8F5EF;         /* 頁尾底色 */
    --footer-accent: #C8A45D;     /* 頁尾點綴金（分隔線、圖示、連結底線） */
    --footer-logo-scale: 1;       /* 頁尾 LOGO 比例 */
    /* 頁尾各區塊（公司名稱 brand、標語 tagline、聯絡我們 heading、內文 body、版權列 base）：顏色、比例、粗細、字型 */
    --footer-brand-text: #5A5A5A;
    --footer-brand-scale: 1;
    --footer-brand-weight: 700;
    --footer-brand-font: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
    --footer-brand-en-text: #5A5A5A;
    --footer-brand-en-scale: 1;
    --footer-brand-en-weight: 400;
    --footer-brand-en-font: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
    --footer-en-brand-text: #5A5A5A;
    --footer-en-brand-scale: 1;
    --footer-en-brand-weight: 700;
    --footer-tagline-text: #C8A45D;
    --footer-tagline-scale: 1;
    --footer-tagline-weight: 600;
    --footer-tagline-font: "Noto Serif TC", Georgia, serif;
    --footer-heading-text: #5A5A5A;
    --footer-heading-scale: 1;
    --footer-heading-weight: 700;
    --footer-heading-font: "Noto Serif TC", Georgia, serif;
    --footer-body-text: #5A5A5A;
    --footer-body-scale: 1;
    --footer-body-weight: 400;
    --footer-body-font: var(--font);
    --footer-base-text: #5A5A5A;
    --footer-base-scale: 1;
    --footer-base-weight: 400;
    --footer-base-font: var(--font);
    --strip-bg: #FFFFFF;          /* 月份帶底色（輸出時 72% 不透明） */
    --strip-border: #4CAF50;      /* 月份帶框線 */
    --strip-text: #2C4A72;        /* 月份文字 */
    --strip-now-bg: var(--sun);   /* 本月底色 */
    --strip-now-text: var(--ink); /* 本月文字 */
    --strip-font: var(--font);    /* 月份帶字型 */
    --strip-line-top: 2px;        /* 月份帶上緣線粗細 */
    --strip-line-divider: 1px;    /* 月份分隔線粗細 */
    --strip-font-scale: 1;        /* 月份文字比例 */
    --day-text: #2C4A72;          /* 日期列文字 */
    --day-ring: #C0C9D5;          /* 日期圓圈框線 */
    --day-ring-width: 1px;        /* 日期圓圈框線粗細 */
    --day-fill: #FFFFFF;          /* 日期圓圈填色 */
    --day-fill-opacity: 0;        /* 日期圓圈填色濃度（0＝透明） */
    --day-today-bg: var(--sun);   /* 今天底色 */
    --day-today-text: var(--ink); /* 今天文字 */
    --weekday-text: #2C4A72;      /* 星期列文字 */
    --weekday-font-scale: 1;      /* 星期列文字比例 */
    --weekday-font-weight: 400;   /* 星期列文字粗細 */
    --header-img: none;           /* 頁首背景圖 */
    --header-overlay: #FFFFFF;    /* 頁首背景圖上的疊色 */
    --header-overlay-opacity: .55; /* 疊色濃度（0＝不疊色） */
    --header-brand-text: #2C4A72;         /* 頁首公司名稱 Huei Ji（LOGO 是圖片，不受影響） */
    --header-brand-font: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
    --header-brand-weight: 700;
    --header-tag-text: #8A6A1F;           /* 頁首副標 International Trading Co., Ltd. */
    --header-tag-font: var(--font);
    --header-tag-weight: 600;
    --header-logo-bg: #FFFFFF;            /* 頁首小 LOGO 底色 */
    --header-logo-bg-opacity: 0;          /* LOGO 底色濃度（0＝透明，原本外觀） */
    --header-logo-radius: .5;             /* LOGO 底圓角（.5＝圓形） */
    --hero-img: none;             /* 首頁大圖區背景圖 */
    --hero-title-text: var(--navy);       /* 首頁大標題 */
    --hero-title-font: "Noto Serif TC", Georgia, serif;
    --hero-title-weight: 700;
    --hero-title-scale: 1;
    --hero-lead-text: #3B4A5C;            /* 首頁大標題下方說明 */
    --hero-lead-font: var(--font);
    --hero-lead-weight: 400;
    --hero-lead-scale: 1;
    --hero-mark-color: #FFE27A;           /* 首頁大圖區文字 ==螢光標記== */
    --about-bg: var(--paper);             /* 關於我們底色 */
    --about-card-border: var(--ink);      /* 卡片框線顏色 */
    --about-card-border-top: 2px;         /* 卡片上緣線粗細 */
    --about-card-border-side: 0px;        /* 卡片左右下框線粗細（全框時才有） */
    --about-card-radius: 0px;             /* 卡片圓角 */
    --about-card-fill: #FFFFFF;           /* 卡片填色 */
    --about-card-fill-opacity: 0;         /* 卡片填色濃度（0＝透明） */
    --about-card-pad: 1rem 0 0;           /* 卡片內距（全框或有填色時四周留白） */
    --about-title-text: var(--ink);       /* 標題顏色 */
    --about-title-font: var(--font);
    --about-title-weight: 700;
    --about-title-scale: 1;
    --about-heading-text: var(--ink);     /* 小標題（願景、使命） */
    --about-heading-font: var(--font);
    --about-heading-weight: 800;
    --about-heading-scale: 1;
    --about-body-text: var(--mute);       /* 簡介與卡片內文 */
    --about-body-font: var(--font);
    --about-body-weight: 400;
    --about-body-scale: 1;
    --rfq-bg: var(--paper);               /* 詢價單／感謝頁底色 */
    --rfq-card-bg: var(--surface);        /* 產品框、詢價編號框 */
    --rfq-title-text: var(--ink);         /* 「詢價單」大標題 */
    --rfq-title-font: var(--font);
    --rfq-title-weight: 700;
    --rfq-title-scale: 1;
    --rfq-heading-text: var(--ink);       /* 分段標題與產品名稱 */
    --rfq-heading-font: var(--font);
    --rfq-heading-weight: 700;
    --rfq-heading-scale: 1;
    --rfq-body-text: var(--ink);          /* 欄位名稱與輸入框文字 */
    --rfq-body-font: var(--font);
    --rfq-body-weight: 500;
    --rfq-body-scale: 1;
    --rfq-hint-text: var(--mute);         /* 說明、必填提示 */
    --process-bg: var(--paper);           /* 首頁詢價流程底色 */
    --process-card-border: var(--ink);    /* 步驟框線顏色 */
    --process-card-border-top: 2px;       /* 步驟上緣線粗細 */
    --process-card-border-side: 0px;      /* 步驟左右下框線粗細（全框時才有） */
    --process-card-radius: 0px;           /* 步驟圓角 */
    --process-card-fill: #FFFFFF;         /* 步驟填色 */
    --process-card-fill-opacity: 0;       /* 步驟填色濃度（0＝透明） */
    --process-card-pad: 1rem 0 0;         /* 步驟內距（全框或有填色時四周留白） */
    --process-title-text: var(--ink);     /* 「詢價流程」標題 */
    --process-title-font: var(--font);
    --process-title-weight: 700;
    --process-title-scale: 1;
    --process-number-text: var(--leaf);   /* 步驟編號 */
    --process-number-font: var(--font);
    --process-number-weight: 800;
    --process-number-scale: 1;
    --process-heading-text: var(--ink);   /* 步驟標題 */
    --process-heading-font: var(--font);
    --process-heading-weight: 700;
    --process-heading-scale: 1;
    --process-body-text: var(--mute);     /* 步驟說明 */
    --process-body-font: var(--font);
    --process-body-weight: 400;
    --process-body-scale: 1;

    --font: "Archivo", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; /* 中文用裝置內建黑體，不下載 */
    --radius-s: 4px;
    --radius-m: 10px;
    --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--page-bg);
}
img { max-width: 100%; display: block; }
a { color: var(--leaf); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

h1, h2, h3 {
    font-stretch: 112%;
    font-weight: 750;
    line-height: 1.2;
    margin: 0 0 .6em;
}
h2 { font-size: 1.6rem; }
h3 { font-size: 1.1rem; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 760px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--surface); padding: .5rem 1rem; }

/* ========== Header（水彩高級感） ========== */
.site-header {
    --h-navy: #2C4A72;
    --h-navy-deep: #1F3654;
    --h-gold: #C9A24A;
    --h-gold-ink: #8A6A1F;
    --h-amber: #F2A65A;
    --h-amber-deep: #E08A2E;
    --h-sage: #5E8F55;
    --h-sage-deep: #3F6E3A;
    /* 捲動時固定在視窗頂部 */
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow .25s ease;
    background:
        radial-gradient(ellipse 28% 140% at 6% 50%, rgba(242, 166, 90, .10), transparent 70%),
        radial-gradient(ellipse 22% 120% at 98% 30%, rgba(94, 143, 85, .09), transparent 70%),
        var(--header-bg);
}
/* 後台上傳的背景圖：cover 鋪滿不重複，上面蓋一層疊色（顏色、濃度在後台設定）讓 Logo、選單清楚 */
.site-header.has-bg-image {
    --header-veil: color-mix(in srgb, var(--header-overlay) calc(var(--header-overlay-opacity) * 100%), transparent);
    background:
        radial-gradient(ellipse 28% 140% at 6% 50%, rgba(242, 166, 90, .10), transparent 70%),
        radial-gradient(ellipse 22% 120% at 98% 30%, rgba(94, 143, 85, .09), transparent 70%),
        linear-gradient(var(--header-veil), var(--header-veil)),
        var(--header-img) center / cover no-repeat,
        var(--header-bg);
}
.site-header.is-scrolled { box-shadow: 0 6px 18px -10px rgba(31, 54, 84, .35); }
/* 底部一抹水彩金線 */
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, rgba(242,166,90,0) 0%, rgba(242,166,90,.55) 18%, rgba(201,162,74,.75) 50%, rgba(94,143,85,.5) 82%, rgba(94,143,85,0) 100%);
    filter: blur(.4px);
}
.header-row { display: flex; align-items: center; gap: 1.5rem 2rem; min-height: 88px; flex-wrap: wrap; padding-block: .6rem; }

/* 公司名稱、副標的顏色／粗細／字型在後台「網站設定 → 頁首文字」調整；hover 不變色，只有 LOGO 微轉 */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
/* LOGO 底色（後台設定）：用 box-shadow 往外多鋪 4px，LOGO 本身大小與排版不變；濃度 0 時完全透明。頁尾 LOGO 共用同一組設定 */
.brand-mark { width: 56px; height: 56px; flex: none; transition: transform .4s ease; }
.brand-mark, .footer-seal img {
    --logo-fill: color-mix(in srgb, var(--header-logo-bg) calc(var(--header-logo-bg-opacity) * 100%), transparent);
    background: var(--logo-fill);
    box-shadow: 0 0 0 4px var(--logo-fill);
    border-radius: calc(var(--header-logo-radius) * 100%);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
    font-family: var(--header-brand-font);
    font-weight: var(--header-brand-weight); font-size: 1.95rem; letter-spacing: .03em;
    color: var(--header-brand-text);
}
.brand-tag {
    margin-top: .3rem; padding-top: .3rem;
    border-top: 1px solid rgba(201, 162, 74, .55);
    font-family: var(--header-tag-font);
    font-size: .66rem; font-weight: var(--header-tag-weight); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    color: var(--header-tag-text);
}

/* 選單按鍵 */
.main-nav { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.main-nav a {
    --tint: 44, 74, 114;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.25rem;
    font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; line-height: 1.3;
    color: var(--h-navy);
    text-decoration: none;
    border: 1px solid rgba(var(--tint), .22);
    border-radius: 999px;
    background:
        radial-gradient(ellipse 70% 90% at 25% 30%, rgba(var(--tint), .10), transparent 70%),
        radial-gradient(ellipse 60% 80% at 85% 80%, rgba(var(--tint), .07), transparent 70%),
        rgba(255, 255, 255, .7);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.main-nav a:hover {
    color: #FDFBF7; background: var(--h-navy); border-color: var(--h-navy);
    box-shadow: 0 6px 16px -8px rgba(31, 54, 84, .55); transform: translateY(-1px);
}
.main-nav a[aria-current="page"] {
    border-color: rgba(var(--tint), .45);
    box-shadow: inset 0 -3px 0 rgba(201, 162, 74, .8);
}

/* 聯絡我們：鼠尾草綠 */
.main-nav a.nav-contact { --tint: 94, 143, 85; color: var(--h-sage-deep); }
.main-nav a.nav-contact:hover { color: #FDFBF7; background: var(--h-sage); border-color: var(--h-sage); box-shadow: 0 6px 16px -8px rgba(63, 110, 58, .6); }

/* 詢價單：主要按鍵，琥珀水彩漸層 */
.main-nav a.nav-cta {
    color: var(--h-navy-deep);
    border-color: transparent;
    background:
        radial-gradient(ellipse 60% 90% at 20% 25%, rgba(255, 236, 190, .65), transparent 70%),
        radial-gradient(ellipse 70% 90% at 90% 90%, rgba(224, 138, 46, .55), transparent 70%),
        linear-gradient(120deg, #F7C27A, var(--h-amber) 55%, var(--h-amber-deep));
    box-shadow: 0 4px 14px -8px rgba(224, 138, 46, .9);
}
.main-nav a.nav-cta:hover {
    color: #FDFBF7; background: var(--h-navy); border-color: var(--h-navy);
}
.main-nav a.nav-cta[aria-current="page"] { box-shadow: inset 0 -3px 0 rgba(31, 54, 84, .55), 0 4px 14px -8px rgba(224, 138, 46, .9); }

.nav-home svg { flex: none; position: relative; top: -1px; }
.count {
    display: inline-block; min-width: 1.5em; padding: 0 .45em;
    border-radius: 999px; background: var(--h-navy-deep); color: #FDFBF7;
    font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.5em; letter-spacing: 0;
}
.main-nav a.nav-cta:hover .count { background: #FDFBF7; color: var(--h-navy-deep); }

.lang { display: flex; gap: .25rem; font-size: .9rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); }
.lang a { color: var(--mute); text-decoration: none; padding: .2rem .65rem; border-radius: 999px; }
.lang a:hover { color: var(--h-navy); }
.lang a[aria-current] { color: #FDFBF7; background: var(--h-navy); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .brand-mark, .main-nav a { transition: none; }
    .main-nav a:hover, .brand:hover .brand-mark { transform: none; }
}
/* RWD：桌機一列；平板縮小；手機收合為漢堡選單 */
.main-nav { order: 2; }
.header-tools { order: 3; display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; }

@media (max-width: 1180px) {
    .header-row { gap: 1rem 1.25rem; }
    .main-nav { gap: .45rem; }
    .main-nav a { font-size: 1.05rem; padding: .5rem 1rem; }
}
@media (max-width: 1020px) {
    .brand-mark { width: 50px; height: 50px; }
    .brand-name { font-size: 1.7rem; }
    .main-nav a { font-size: 1rem; padding: .45rem .85rem; letter-spacing: .02em; }
}
@media (max-width: 900px) {
    .header-row { flex-wrap: wrap; gap: 0 .75rem; min-height: 72px; }
    .brand { gap: .5rem; }
    .brand-mark { width: 46px; height: 46px; }
    .brand-name { font-size: 1.5rem; }
    .brand-tag { font-size: .56rem; letter-spacing: .08em; }
    .header-tools { margin-left: auto; order: 2; }
    .lang { font-size: .85rem; }
    .lang a { padding: .15rem .55rem; }

    .nav-toggle {
        display: inline-grid; place-items: center;
        width: 46px; height: 46px; padding: 0; cursor: pointer;
        color: var(--h-navy);
        border: 1px solid rgba(44, 74, 114, .22); border-radius: 999px;
        background: radial-gradient(ellipse 70% 90% at 30% 30%, rgba(44, 74, 114, .10), transparent 70%), rgba(255, 255, 255, .8);
        transition: background-color .25s ease, color .25s ease;
    }
    .nav-toggle:hover, .nav-open .nav-toggle { background: var(--h-navy); color: #FDFBF7; border-color: var(--h-navy); }
    .nav-toggle-bars { position: relative; width: 20px; height: 14px; }
    .nav-toggle-bars span {
        position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
        transition: transform .3s ease, opacity .2s ease, top .3s ease;
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 6px; }
    .nav-toggle-bars span:nth-child(3) { top: 12px; }
    .nav-open .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

    /* 收合的選單面板 */
    .main-nav {
        order: 3; width: 100%; margin: 0;
        display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
        max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
        transition: max-height .35s ease, opacity .25s ease, padding .35s ease, visibility 0s linear .35s;
    }
    .nav-open .main-nav {
        max-height: 420px; opacity: 1; visibility: visible; padding: .5rem 0 1.1rem;
        transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
    }
    .main-nav a { justify-content: center; font-size: 1.1rem; padding: .75rem 1rem; white-space: nowrap; }
    .main-nav a:hover { transform: none; }
}
@media (max-width: 380px) {
    .brand-tag { letter-spacing: .04em; white-space: normal; line-height: 1.25; }
    .lang a { padding: .15rem .45rem; }
    .main-nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .main-nav, .nav-toggle-bars span { transition: none !important; }
}

.flash { background: var(--leaf-soft); padding: .75rem 0; font-weight: 500; }
.flash-warn { background: #FFF3D6; }

/* ========== Hero（水彩風格 + Logo） ========== */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--navy);
    padding: 3.5rem 0 0;
    background-color: var(--hero-bg);
    /* 紙紋 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .35  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
/* 後台上傳的背景圖：cover 鋪滿不重複（取代會拼貼的紙紋），蓋一層底色紗，底部淡出到底色接月份帶 */
.hero.has-bg-image {
    background-image:
        linear-gradient(to bottom, transparent 55%, var(--hero-bg)),
        linear-gradient(color-mix(in srgb, var(--hero-bg) 35%, transparent), color-mix(in srgb, var(--hero-bg) 35%, transparent)),
        var(--hero-img);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* 橙、綠、金三色水彩暈染 */
.hero-wash {
    position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 42% at 10% 14%, rgba(255, 140, 0, .13), transparent 70%),
        radial-gradient(ellipse 30% 36% at 4% 88%, rgba(76, 175, 80, .18), transparent 70%),
        radial-gradient(ellipse 34% 44% at 74% 34%, rgba(255, 215, 0, .20), transparent 70%),
        radial-gradient(ellipse 30% 34% at 94% 82%, rgba(76, 175, 80, .22), transparent 72%),
        radial-gradient(ellipse 22% 26% at 56% 92%, rgba(255, 140, 0, .10), transparent 70%);
    filter: blur(6px);
}
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 2rem;
    padding-bottom: 2.5rem;
}
.hero-title {
    font-family: var(--hero-title-font);
    font-size: calc(clamp(2.2rem, 4.8vw, 3.6rem) * var(--hero-title-scale));
    font-weight: var(--hero-title-weight);
    font-stretch: normal;
    letter-spacing: .01em;
    line-height: 1.15;
    margin-bottom: .45em;
    color: var(--hero-title-text);
    text-wrap: balance;
}
.hero-title::after {
    content: ""; display: block; width: 5rem; height: 4px; margin-top: .4em;
    background: linear-gradient(90deg, var(--orange), var(--gold) 60%, rgba(255, 215, 0, 0));
    border-radius: 4px;
}
.hero-lead {
    font-family: var(--hero-lead-font); font-weight: var(--hero-lead-weight); color: var(--hero-lead-text);
    font-size: calc(1.15rem * var(--hero-lead-scale)); max-width: 32em;
}
/* 首頁大圖區與輪播文字的 **粗體**、*斜體*、==螢光標記==（App\Support\RichText） */
:where(.hero-title, .hero-lead, .hs-title, .hs-lead) strong { font-weight: 800; }
:where(.hero-title, .hs-title) strong { font-weight: 900; }
:where(.hero-title, .hero-lead, .hs-title, .hs-lead) em { font-style: italic; }
:where(.hero-title, .hero-lead, .hs-title, .hs-lead) mark {
    color: inherit; padding: 0 .12em; border-radius: .15em;
    background: linear-gradient(transparent 52%, var(--rt-mark) 52%, var(--rt-mark) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:where(.hero-title, .hero-lead) { --rt-mark: var(--hero-mark-color); }
:where(.hs-title, .hs-lead) { --rt-mark: var(--hs-mark-color, #FFE27A); }
/* 首頁主視覺輪播（版型 hero，partials/hero-main）：這張輪播的 --hs-* 樣式換成上面用的 --hero-* 變數 */
.hs-main {
    --hero-title-text: color-mix(in srgb, var(--hs-title-color) var(--hs-title-opacity), transparent);
    --hero-title-font: var(--hs-title-font);
    --hero-title-weight: var(--hs-title-weight);
    --hero-title-scale: var(--hs-title-scale);
    --hero-lead-text: color-mix(in srgb, var(--hs-lead-color) var(--hs-lead-opacity), transparent);
    --hero-lead-font: var(--hs-lead-font);
    --hero-lead-weight: var(--hs-lead-weight);
    --hero-lead-scale: var(--hs-lead-scale);
    --hero-mark-color: var(--hs-mark-color);
}
.hs-main .hero-lead { white-space: pre-line; }
.hs-main [hidden], .hs-main[data-image="none"] .hero-logo { display: none !important; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero .btn-ghost-green { background: rgba(255, 255, 255, .7); border-color: var(--green); color: var(--leaf); }
.hero .btn-ghost-green:hover { background: var(--green); border-color: var(--green); color: var(--ink); }

/* 靠右但往左內縮一點，不貼齊版心右緣 */
.hero-logo { margin: 0 clamp(0px, 4vw, 4rem) 0 0; justify-self: end; width: min(100%, 440px); }
/* 圖的紙底已去背（透明），原圖顏色不變，直接透出底下的水彩暈染；不加框、底色或圓角盒子 */
.hero-logo img {
    display: block; width: 100%; height: auto; max-height: 520px;
    object-fit: contain; background: none; border: 0; border-radius: 0; box-shadow: none;
}

@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 1rem; }
    .hero-logo { order: -1; justify-self: center; width: min(78vw, 340px); margin-right: 0; }
    .hero-copy { text-align: left; }
}

/* ========== 首頁輪播（第 1 張＝原本大圖，後面是後台「首頁輪播」新增的） ========== */
/* 所有張疊在同一格：高度取最高那張，換張時版面不跳動 */
.hero-track { display: grid; touch-action: pan-y; }
.hero-slide-item {
    grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0;
    opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.hero-slide-item.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.hero-slide-item > .hero-inner { flex: 1; }
.hs-wrap { flex: 1; display: flex; padding-bottom: 2.5rem; }

/* 一張輪播：顏色、尺寸、字型來自 style 屬性的 --hs-* 變數；版型、邊框、位置用 data-* */
.hs {
    --hs-pad: clamp(1.25rem, 4vw, 3rem);
    flex: 1; min-width: 0; position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: 2rem; padding: var(--hs-pad);
    min-height: clamp(300px, 36vw, 480px);
    background: var(--hs-bg-color);
    border: var(--hs-border-width) solid var(--hs-border-color);
    border-radius: var(--hs-border-radius);
}
.hs[data-border="none"] { border-width: 0; }
.hs[data-border="double"] { border-style: double; border-width: max(3px, var(--hs-border-width)); }
.hs[data-border="dashed"] { border-style: dashed; }
.hs[data-border="dotted"] { border-style: dotted; }
.hs[data-border="groove"] { border-style: groove; }
.hs[data-border="ridge"] { border-style: ridge; }
/* 漸層雙色邊框：底色畫在內框、漸層畫在邊框區，圓角也適用 */
.hs[data-border="gradient"] {
    border-color: transparent;
    background:
        linear-gradient(var(--hs-bg-color), var(--hs-bg-color)) padding-box,
        linear-gradient(135deg, var(--hs-border-color), var(--hs-border-color2)) border-box;
}

.hs-media { margin: 0; min-width: 0; }
.hs-media img { display: block; }
.hs [hidden] { display: none !important; }
/* 滿版：圖鋪滿整張、蓋一層疊色，文字在九宮格位置 */
.hs[data-layout="cover"] { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.hs[data-layout="cover"] .hs-media { position: absolute; inset: 0; z-index: -1; }
.hs[data-layout="cover"] .hs-media img { width: 100%; height: 100%; object-fit: cover; }
.hs[data-layout="cover"] .hs-media::after {
    content: ""; position: absolute; inset: 0;
    background: color-mix(in srgb, var(--hs-overlay-color) var(--hs-overlay-opacity), transparent);
}
/* 側邊插圖：文字＋插圖兩欄，插圖可在左或右 */
.hs[data-layout="side"] { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
.hs[data-layout="side"][data-side="left"] .hs-media { order: -1; }
.hs[data-layout="side"] .hs-media { display: grid; place-items: center; }
.hs[data-layout="side"] .hs-media img { width: 100%; height: auto; max-height: 440px; object-fit: contain; }
/* 沒有圖片：只剩底色＋文字（滿版不蓋疊色、側邊版不留空欄） */
.hs[data-image="none"] .hs-media { display: none; }
.hs[data-layout="side"][data-image="none"] { grid-template-columns: minmax(0, 1fr); }

/* 文字位置：九宮格＋微調（left/top 的 % 以文字所在的格子為準） */
.hs-copy {
    position: relative; min-width: 0;
    width: min(100%, var(--hs-text-width));
    left: var(--hs-text-offset-x); top: var(--hs-text-offset-y);
    align-self: center; justify-self: start;
}
.hs[data-pos^="t"] .hs-copy { align-self: start; }
.hs[data-pos^="b"] .hs-copy { align-self: end; }
.hs[data-pos$="c"] .hs-copy { justify-self: center; }
.hs[data-pos$="r"] .hs-copy { justify-self: end; }
.hs[data-align="center"] .hs-copy { text-align: center; }
.hs[data-align="right"] .hs-copy { text-align: right; }
.hs-title {
    margin: 0 0 .45em;
    font-family: var(--hs-title-font); font-weight: var(--hs-title-weight);
    font-size: calc(clamp(1.8rem, 4.2vw, 3.2rem) * var(--hs-title-scale));
    line-height: 1.15; letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere;
    color: color-mix(in srgb, var(--hs-title-color) var(--hs-title-opacity), transparent);
}
.hs-lead {
    margin: 0; white-space: pre-line; overflow-wrap: anywhere;
    font-family: var(--hs-lead-font); font-weight: var(--hs-lead-weight);
    font-size: calc(clamp(1rem, 1.5vw, 1.15rem) * var(--hs-lead-scale));
    color: color-mix(in srgb, var(--hs-lead-color) var(--hs-lead-opacity), transparent);
}
.hs-actions { margin: 1.5rem 0 0; }

/* 疊加圖片：--hl-* 變數；x／y 是中心點，下層在文字後面、上層蓋在文字上 */
.hs-layers { position: absolute; inset: 0; pointer-events: none; }
.hs-layers[data-layer="above"] { z-index: 2; }
.hs-layer {
    position: absolute; margin: 0; box-sizing: border-box;
    left: var(--hl-x); top: var(--hl-y); width: var(--hl-width);
    transform: translate(-50%, -50%) rotate(var(--hl-rotate));
    padding: var(--hl-frame-padding);
    background: color-mix(in srgb, var(--hl-frame-color) var(--hl-frame-opacity), transparent);
    border: var(--hl-border-width) solid var(--hl-border-color);
    border-radius: var(--hl-border-radius);
    box-shadow: 0 .35em var(--hl-shadow-blur) color-mix(in srgb, var(--hl-shadow-color) var(--hl-shadow-opacity), transparent);
    opacity: var(--hl-opacity);
}
.hs-layer img {
    display: block; width: 100%; height: auto;
    border-radius: max(0px, calc(var(--hl-border-radius) - var(--hl-border-width) - var(--hl-frame-padding)));
    filter: brightness(var(--hl-brightness)) contrast(var(--hl-contrast)) saturate(var(--hl-saturate));
}
.hs-layer[data-border="none"] { border-width: 0; }
.hs-layer[data-border="double"] { border-style: double; border-width: max(3px, var(--hl-border-width)); }
.hs-layer[data-border="dashed"] { border-style: dashed; }
.hs-layer[data-border="dotted"] { border-style: dotted; }
.hs-layer[data-border="groove"] { border-style: groove; }
.hs-layer[data-border="ridge"] { border-style: ridge; }
/* 漸層雙色：漸層畫在邊框區，內框用不透明的相框底色蓋住（否則漸層會透到圖片後面） */
.hs-layer[data-border="gradient"] {
    border-color: transparent;
    background:
        linear-gradient(var(--hl-frame-color), var(--hl-frame-color)) padding-box,
        linear-gradient(135deg, var(--hl-border-color), var(--hl-border-color2)) border-box;
}

/* 翻頁：箭頭＋圓點，放在大圖與月份帶之間（不蓋到內容） */
.hero-nav { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: -1.5rem; padding-bottom: .75rem; position: relative; z-index: 1; }
.hero-arrow {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
    border: 1px solid color-mix(in srgb, var(--navy) 30%, transparent); border-radius: 50%;
    background: rgba(255, 255, 255, .75); color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.hero-arrow:hover { background: #fff; border-color: var(--navy); }
.hero-dots { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
/* 可點範圍 44px，看得到的圓點 10px */
.hero-dots button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-dots button::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid var(--navy); background: transparent; transition: background .2s, transform .2s;
}
.hero-dots button[aria-current="true"]::before { background: var(--navy); transform: scale(1.2); }
.hero-arrow:focus-visible, .hero-dots button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 860px) {
    .hs { gap: 1rem; min-height: clamp(320px, 88vw, 460px); }
    /* 側邊插圖改成上圖下文 */
    .hs[data-layout="side"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .hs[data-layout="side"][data-image="none"] { grid-template-rows: minmax(0, 1fr); }
    .hs[data-layout="side"] .hs-media { order: -1; }
    .hs[data-layout="side"] .hs-media img { max-height: 240px; }
    /* 手機：微調減半、文字區至少 80% 寬、放大比例收斂，避免跑出畫面 */
    .hs-copy {
        width: min(100%, max(80%, var(--hs-text-width)));
        left: calc(var(--hs-text-offset-x) / 2); top: calc(var(--hs-text-offset-y) / 2);
    }
    .hs-title { font-size: calc(clamp(1.6rem, 7vw, 2.4rem) * min(var(--hs-title-scale), 1.4)); }
    .hs-lead { font-size: calc(1rem * min(var(--hs-lead-scale), 1.3)); }
    /* 疊加圖片：手機版有自己的位置與大小（--hl-m-*） */
    .hs-layer {
        left: var(--hl-m-x); top: var(--hl-m-y); width: var(--hl-m-width);
        transform: translate(-50%, -50%) rotate(var(--hl-m-rotate));
    }
    .hs-layer[data-mobile="hide"] { display: none; }
    .hs-wrap { padding-bottom: 2rem; }
    .hero-nav { margin-top: -1rem; }
    .hero-arrow { width: 2.25rem; height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide-item, .hero-slide-item.is-active, .hero-dots button::before { transition: none; }
}

/* 年度產季帶：整個網站最有辨識度的元素 */
.hero-strip { position: relative; z-index: 1; }
/* 框線疊在格子上畫、行高固定：後台調粗細或字級時，格子尺寸不變 */
.year-strip {
    --strip-size: .85rem;
    position: relative;
    list-style: none; margin: 0; padding: 2px 0 0;
    display: grid; grid-template-columns: repeat(12, 1fr);
    background: color-mix(in srgb, var(--strip-bg) 72%, transparent);
    font-family: var(--strip-font);
}
/* 上緣線比 2px 粗時疊在格子的上 padding 上，也不會被本月底色蓋住 */
.year-strip::before {
    content: ""; position: absolute; inset: 0 0 auto; z-index: 1;
    height: var(--strip-line-top);
    background: color-mix(in srgb, var(--strip-border) 45%, transparent);
    pointer-events: none;
}
.year-strip li {
    padding: .9rem 0 1rem;
    text-align: center;
    white-space: nowrap;
    font-size: calc(var(--strip-size) * var(--strip-font-scale));
    line-height: calc(var(--strip-size) * 1.65);
    color: color-mix(in srgb, var(--strip-text) 78%, transparent);
    box-shadow: inset calc(-1 * var(--strip-line-divider)) 0 0 color-mix(in srgb, var(--strip-border) 20%, transparent);
}
.year-strip li:last-child { box-shadow: none; }
/* 月份可點：按鈕延伸到整個格子，格子的 padding、字級設定照舊 */
.year-strip li { position: relative; }
.year-strip button {
    all: unset;
    cursor: pointer;
}
.year-strip button::after { content: ""; position: absolute; inset: 0; }
.year-strip button:focus-visible::after { outline: 2px solid var(--leaf); outline-offset: -3px; }
.year-strip li:hover:not(.is-now) { background: color-mix(in srgb, var(--sun-soft) 70%, transparent); }
/* 下方水果月曆正在顯示的 4 個月 */
.year-strip li.is-window { background: color-mix(in srgb, var(--sun-soft) 85%, transparent); color: var(--strip-text); }
.year-strip li.is-now { background: var(--strip-now-bg); color: var(--strip-now-text); font-weight: 700; }

/* 今天星期幾：月份帶上方整條，底色、字型與月份帶一致；顏色、字級、粗細可在後台單獨調，行高跟著字級 */
.weekday-bar {
    --strip-size: .85rem;
    margin: 0; padding: .45rem 0;
    text-align: center;
    font-family: var(--strip-font);
    font-size: calc(var(--strip-size) * var(--weekday-font-scale));
    font-weight: var(--weekday-font-weight);
    line-height: 1.65;
    letter-spacing: .08em;
    color: var(--weekday-text);
    background: color-mix(in srgb, var(--strip-bg) 72%, transparent);
}

/* 本月日期列：接在月份帶下方，不畫格線；每個日期一個圓圈，今天實心；字型、字級跟月份帶一致 */
.day-strip {
    --strip-size: .85rem;
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(var(--days, 31), 1fr);
    background: color-mix(in srgb, var(--strip-bg) 72%, transparent);
    font-family: var(--strip-font);
    font-variant-numeric: tabular-nums;
}
.day-strip li {
    display: flex; justify-content: center; align-items: center;
    padding: .5rem 0 .55rem;
    white-space: nowrap;
    font-size: calc(var(--strip-size) * var(--strip-font-scale));
    line-height: 1;
    color: color-mix(in srgb, var(--day-text) 78%, transparent);
}
/* 圓圈直徑 = 原本的行高，格子高度不變；格子比圓圈窄時等比縮小，維持正圓。框線粗細、顏色、填色由後台設定 */
.day-strip li span {
    display: inline-grid; place-items: center;
    box-sizing: border-box;
    width: min(calc(var(--strip-size) * 1.65), 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: var(--day-ring-width) solid var(--day-ring);
    background: color-mix(in srgb, var(--day-fill) calc(var(--day-fill-opacity) * 100%), transparent);
}
.day-strip li.is-today span {
    background: var(--day-today-bg); border-color: var(--day-today-bg);
    color: var(--day-today-text); font-weight: 700;
}
/* 平板以下一列放不下整個月：拆成兩列 */
@media (max-width: 860px) {
    .day-strip { grid-template-columns: repeat(var(--days-half, 16), 1fr); }
}

/* 水果產季月曆：本月起 4 個月的水彩小水果，窄版置中，一眼看完 */
.fruit-cal {
    max-width: 42rem;
    margin: .9rem auto 0;
    padding: .65rem .9rem .8rem;
    border-radius: var(--radius-s, 10px);
    background: color-mix(in srgb, var(--strip-bg) 78%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--strip-border) 25%, transparent), 0 6px 18px -12px rgba(29, 43, 35, .35);
}
.fruit-cal-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem;
    margin: 0 0 .45rem;
}
.fruit-cal-title { font-weight: 700; font-size: .9rem; color: var(--navy); letter-spacing: .04em; }
.fruit-cal-hint { font-size: .72rem; color: var(--mute); }
/* 欄間虛線：每欄都畫左線、往左推 1px，最左欄的線被裁掉（月份順序由 JS 換，不能靠 DOM 相鄰） */
.fruit-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.fruit-cal-month {
    min-width: 0; padding: 0 .2rem; margin-left: -1px;
    border-left: 1px dashed color-mix(in srgb, var(--strip-border) 35%, transparent);
    animation: fruit-cal-in .35s ease-out;
}
.fruit-cal-month[hidden] { display: none; }
.fruit-cal-label {
    display: flex; justify-content: center; align-items: center; gap: .3rem;
    margin: 0 0 .35rem;
    font-size: .8rem; font-weight: 700; color: var(--strip-text);
}
.fruit-cal-now {
    padding: .05rem .4rem; border-radius: 99px;
    background: var(--sun); color: var(--ink);
    font-size: .62rem; font-weight: 700;
}
.fruit-cal-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 0;
}
.fruit-cal-item {
    display: flex; flex-direction: column; align-items: center;
    width: 3rem;
    color: var(--ink); text-decoration: none;
    border-radius: 8px;
}
.fruit-cal-icon { position: relative; display: block; width: 2.25rem; height: 2.25rem; transition: transform .2s ease, filter .2s ease; }
.fruit-cal-icon svg, .fruit-cal-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 盛產：圖右上角一顆小金點 */
.fruit-cal-item.is-peak .fruit-cal-icon::after {
    content: ""; position: absolute; top: 0; right: -.05rem;
    width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--sun-deep); box-shadow: 0 0 0 2px var(--surface);
}
.fruit-cal-name {
    max-width: 100%;
    font-size: .66rem; line-height: 1.2; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fruit-cal-item:hover .fruit-cal-icon, .fruit-cal-item:focus-visible .fruit-cal-icon {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 3px 4px rgba(179, 95, 0, .3));
}
.fruit-cal-item:hover .fruit-cal-name { color: var(--leaf); }
.fruit-cal-item:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.fruit-cal-empty { margin: .6rem 0; text-align: center; color: var(--mute); }
@keyframes fruit-cal-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .fruit-cal-month { animation: none; }
    .fruit-cal-icon { transition: none; }
}
@media (max-width: 600px) {
    .fruit-cal { padding: .55rem .5rem .65rem; }
    .fruit-cal-month { padding: 0 .2rem; }
    .fruit-cal-item { width: 2.6rem; }
    .fruit-cal-icon { width: 1.75rem; height: 1.75rem; }
    .fruit-cal-name { font-size: .6rem; }
}
/* 很窄的手機：兩欄兩列 */
@media (max-width: 400px) {
    .fruit-cal-grid { grid-template-columns: repeat(2, 1fr); row-gap: .6rem; }
}

.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;
}

/* ========== Buttons & links ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .7rem 1.3rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-s);
    background: var(--ink); color: var(--paper);
    font: inherit; font-weight: 700; text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--leaf); border-color: var(--leaf); color: var(--paper); }
.btn-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #FF9A26; border-color: #FF9A26; color: var(--ink); }
.btn-ghost-light { background: transparent; border-color: rgba(244, 245, 239, .6); color: var(--paper); }
.btn-ghost-light:hover { background: rgba(244, 245, 239, .12); border-color: var(--paper); }
.btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }
.link { font-weight: 500; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--mute); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--danger); }

/* ========== Sections ========== */
.section { padding: 3.5rem 0; }
.section-alt { background: var(--section-bg); border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }
.page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.lead { font-size: 1.1rem; color: var(--mute); max-width: 40em; }
.empty { color: var(--mute); max-width: 40em; }
.legend, .results, .hint { color: var(--mute); font-size: .9rem; }
h2.results { margin: 1em 0; font-weight: inherit; font-stretch: inherit; line-height: inherit; }

/* ========== Product cards ========== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--media-bg); display: block; overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 透明背景的水彩插圖：整張放進框裡，不裁切 */
.card-media img.is-art { object-fit: contain; padding: 6%; box-sizing: border-box; }
.placeholder {
    display: grid; place-items: center; width: 100%; height: 100%;
    font-size: 3rem; font-weight: 800; color: var(--leaf); opacity: .45;
}
.placeholder-lg { font-size: 6rem; aspect-ratio: 1; }
.tag-season {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--sun); color: var(--ink);
    padding: .1rem .6rem; border-radius: var(--radius-s);
    font-size: .8rem; font-weight: 700;
}
/* 停用但仍列出的產品：灰色、不可點、不可詢價 */
.card.is-unavailable { background: #F3F2EF; border-color: var(--line); }
.card.is-unavailable .card-media { background: #E6E5E1; }
.card.is-unavailable .card-media img,
.card.is-unavailable .placeholder { filter: grayscale(1); opacity: .55; }
.card.is-unavailable .placeholder { color: var(--mute); }
.card.is-unavailable .card-body { filter: grayscale(1); opacity: .7; }
.card.is-unavailable .card-title { color: var(--mute); }
.tag-unavailable { background: #6F7570; color: #fff; }
.card-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .45rem; }
.card-cat { margin: 0; font-size: .82rem; color: var(--mute); }
.card-cat a { color: inherit; }
.card-title { margin: 0; font-size: 1.1rem; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-meta { margin: 0; font-size: .88rem; color: var(--mute); }

/* 種類卡片：疊兩層邊框表示裡面還有多個品種 */
.card-group { box-shadow: 4px 4px 0 -1px var(--surface), 4px 4px 0 0 var(--line), 8px 8px 0 -1px var(--surface), 8px 8px 0 0 var(--line); margin: 0 8px 8px 0; }
.tag-varieties {
    position: absolute; right: .75rem; bottom: .75rem;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    padding: .1rem .6rem; border-radius: var(--radius-s);
    font-size: .8rem; font-weight: 700;
}
.card-varieties { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-more { font-size: .9rem; font-weight: 700; margin-top: .2rem; }

/* 產季條 */
.season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: .2rem 0; }
.season span { height: 7px; background: var(--line); border-radius: 1px; }
.season span.on { background: var(--sun); }
.season span.peak { background: var(--sun-deep); }
.season span.now { box-shadow: 0 0 0 1.5px var(--ink); }
.season--labeled span {
    height: auto; padding: .5rem 0;
    font-size: .78rem; text-align: center; color: var(--mute);
}
.season--labeled span.on { color: var(--ink); font-weight: 700; }
.season--labeled span.peak { color: #fff; }

/* ========== Category list ========== */
.category-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 2px solid var(--ink); }
.category-list a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 1.1rem .25rem; border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--ink);
}
.category-list a:hover .category-name { text-decoration: underline; }
.category-name { font-weight: 700; font-size: 1.1rem; }
.category-count { color: var(--mute); font-size: .88rem; }

/* ========== Process (真實的先後順序，所以用編號) ========== */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; counter-reset: step; }
.process-section { background: var(--process-bg); }
.process-title {
    font-family: var(--process-title-font); font-weight: var(--process-title-weight); color: var(--process-title-text);
    font-size: calc(1.6rem * var(--process-title-scale));
}
.process li {
    counter-increment: step;
    border: solid var(--process-card-border);
    border-width: var(--process-card-border-top) var(--process-card-border-side) var(--process-card-border-side);
    border-radius: var(--process-card-radius);
    background: color-mix(in srgb, var(--process-card-fill) calc(var(--process-card-fill-opacity) * 100%), transparent);
    padding: var(--process-card-pad);
}
.process li::before {
    content: counter(step); display: block; font-stretch: 125%; margin-bottom: .3rem;
    font-family: var(--process-number-font); font-weight: var(--process-number-weight); color: var(--process-number-text);
    font-size: calc(1.8rem * var(--process-number-scale));
}
.process h3 {
    font-family: var(--process-heading-font); font-weight: var(--process-heading-weight); color: var(--process-heading-text);
    font-size: calc(1.1rem * var(--process-heading-scale));
}
.process p {
    margin: 0;
    font-family: var(--process-body-font); font-weight: var(--process-body-weight); color: var(--process-body-text);
    font-size: calc(1rem * var(--process-body-scale));
}

/* ========== About（願景／使命） ========== */
/* 底色、卡片框線／填色、標題／小標題／內文的字型粗細大小用 :root 的 --about-* 預設值 */
.about-section { background: var(--about-bg); }
.about-title {
    font-family: var(--about-title-font); font-weight: var(--about-title-weight); color: var(--about-title-text);
    font-size: calc(1.6rem * var(--about-title-scale));
}
.page-title.about-title { font-size: calc(clamp(1.8rem, 4vw, 2.6rem) * var(--about-title-scale)); }
.about-intro {
    margin-bottom: 2.5rem;
    font-family: var(--about-body-font); font-weight: var(--about-body-weight); color: var(--about-body-text);
    font-size: calc(1.1rem * var(--about-body-scale));
}
.about-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 0; }
.about-pillar {
    border: solid var(--about-card-border);
    border-width: var(--about-card-border-top) var(--about-card-border-side) var(--about-card-border-side);
    border-radius: var(--about-card-radius);
    background: color-mix(in srgb, var(--about-card-fill) calc(var(--about-card-fill-opacity) * 100%), transparent);
    padding: var(--about-card-pad);
}
.about-pillar h2, .about-pillar dt {
    margin: 0 0 .5rem;
    font-family: var(--about-heading-font); font-weight: var(--about-heading-weight); color: var(--about-heading-text);
    font-size: calc(1.35rem * var(--about-heading-scale));
}
.about-pillar p, .about-pillar dd {
    margin: 0; line-height: 1.75;
    font-family: var(--about-body-font); font-weight: var(--about-body-weight); color: var(--about-body-text);
    font-size: calc(1.05rem * var(--about-body-scale));
}
.about-teaser .lead { margin-bottom: 2rem; }

/* 市場：亞洲（目前）→ 歐洲（下一步）；地圖下方的兩格當圖例 */
.market-map { margin: 1.5rem 0 0; border: 1px solid var(--line); border-radius: var(--radius-m); background: #F4F8FB; overflow: hidden; }
.market-map svg { display: block; width: 100%; height: auto; aspect-ratio: 960 / 420; }
.market-map .media-credit { border-top: 1px solid var(--line); background: var(--surface); }
.market-route-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.market-route.is-now .market-route-line { stroke: var(--leaf); }
.market-route.is-next .market-route-line { stroke: var(--sun-deep); stroke-dasharray: 7 7; animation: market-dash 1.2s linear infinite; }
.market-route.is-now .market-dot { fill: var(--leaf); }
.market-route.is-next .market-dot { fill: var(--surface); stroke: var(--sun-deep); stroke-width: 2.5; }
.market-plane { fill: var(--navy); scale: 1.15; }
.market-plane--static { display: none; }
.market-label { font: 600 15px var(--font); fill: var(--navy); paint-order: stroke; stroke: #F4F8FB; stroke-width: 4px; stroke-linejoin: round; }
.market-label--origin { font-size: 19px; font-weight: 700; }
.market-label--region { display: none; font-size: 26px; font-weight: 700; fill: var(--sun-deep); }
.market-origin-dot { fill: var(--gold); stroke: var(--sun-deep); stroke-width: 2.5; }
.market-origin-pulse { fill: var(--sun); transform-box: fill-box; transform-origin: center; animation: market-pulse 2.4s ease-out infinite; }
@keyframes market-dash { to { stroke-dashoffset: -14; } }
@keyframes market-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

.about-markets { list-style: none; margin: 1rem 0 2rem; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.about-markets li { display: grid; gap: .15rem; min-width: 150px; padding: .8rem 1.3rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); }
.about-markets span { font-size: .82rem; color: var(--mute); letter-spacing: .04em; }
.about-markets strong { font-size: 1.4rem; color: var(--navy); }
.about-markets .is-now { border-color: var(--leaf); box-shadow: inset 0 3px 0 var(--leaf); }
.about-markets .is-next { border-style: dashed; border-color: var(--sun-deep); box-shadow: inset 0 3px 0 var(--sun); }

/* ========== Filters & forms ========== */
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 2rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.filter-actions { display: flex; gap: 1rem; align-items: center; }
.field-grow { flex: 1 1 14rem; }
.filter-checks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-bottom: .65rem; font-size: .9rem; }
.check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; white-space: nowrap; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }

/* 首頁日期列下方的產品搜尋：底色接續年度產季帶，不加外框 */
.hero-search {
    margin: 0; padding: 1rem 1.2rem 1.1rem;
    background: color-mix(in srgb, var(--strip-bg) 72%, transparent);
    border: 0; border-radius: 0 0 var(--radius-m) var(--radius-m);
}
@media (max-width: 860px) {
    .hero-search { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .9rem 1rem 1rem; }
    .hero-search .field-grow, .hero-search .filter-checks, .hero-search .filter-actions { grid-column: 1 / -1; }
    .hero-search .filter-checks { padding-bottom: 0; }
    .hero-search .filter-actions .btn { width: 100%; }
}
.field { display: grid; gap: .3rem; font-size: .9rem; font-weight: 500; }
.field input, .field select, .field textarea {
    font: inherit; font-weight: 400; color: var(--ink);
    padding: .6rem .7rem; min-width: 0;
    border: 1px solid #AEB6A6; border-radius: var(--radius-s);
    background: var(--surface);
}
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.error { color: var(--danger); font-size: .9rem; margin: .3rem 0 0; width: 100%; }
.error-box { border-left: 4px solid var(--danger); background: #F8E5E1; padding: .75rem 1rem; margin-bottom: 1.5rem; }
.error-box ul { margin: 0; padding-left: 1.2rem; }

/* ========== Product page ========== */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
.product-media { background: var(--media-bg); border-radius: var(--radius-m); overflow: hidden; }
.product-media img { display: block; width: 100%; }
.media-credit { margin: 0; padding: .35rem .75rem; font-size: .75rem; line-height: 1.4; color: var(--mute); }
.media-credit a { color: inherit; }
.credit-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.credit-list li { display: flex; gap: .75rem; align-items: center; }
.credit-list img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-m); flex: none; }
.credit-list .media-credit { padding: 0; }
.footer-credits { color: inherit; }
.product-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .3em; }
.product-summary { font-size: 1.1rem; color: var(--mute); margin-top: 0; }

/* 種類介紹頁：沿用產品頁左圖右文；品種列在介紹下方 */
.prose.group-description { margin: 1rem 0 1.5rem; }
.group-varieties { margin-top: 3.5rem; }

/* 規格表：出口紙箱標籤 */
.spec { margin: 1.5rem 0; border: 2px solid var(--ink); background: var(--surface); }
.spec div { display: grid; grid-template-columns: 9.5em 1fr; border-bottom: 1px solid var(--line); }
.spec div:last-child { border-bottom: 0; }
.spec dt { padding: .6rem .8rem; font-size: .85rem; color: var(--mute); border-right: 1px solid var(--line); }
.spec dd { margin: 0; padding: .6rem .8rem; font-weight: 500; }

.product-latin { margin: -.2rem 0 .8rem; color: var(--mute); font-size: 1.05rem; }
.key-facts { list-style: none; margin: 1.2rem 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.key-facts li { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: .92rem; }
.key-facts span { color: var(--mute); font-weight: 400; margin-right: .25em; }
.sheet-jump { margin: 0 0 1.5rem; font-size: .92rem; }

/* 產品資料表 */
.data-sheet { margin-top: 3rem; scroll-margin-top: 1rem; }
.sheet-groups { columns: 2; column-gap: 1.75rem; }
.sheet-group { break-inside: avoid; margin-bottom: 1.5rem; }
.sheet-group h3 { font-size: 1rem; margin-bottom: .5rem; padding-left: .6rem; border-left: 4px solid var(--green); }
.sheet-group .spec { margin: 0; border-width: 1px; border-color: var(--line); border-radius: var(--radius-s); }
.sheet-group .spec dt { background: #FAF7F0; }
.sheet-group .spec dd.on-request { color: var(--mute); font-weight: 400; font-style: italic; }
.sheet-group--spec h3, .sheet-group--supply h3 { border-left-color: var(--orange); }
.data-sheet .legend { margin-top: 1rem; }

.small-heading { font-size: .95rem; margin-bottom: .4rem; }
.harvest { margin-bottom: 1.8rem; }
/* 訂購數量／單位（在「包裝規格」卡片內，或在下方加入詢價單列） */
.rfq-qty { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.rfq-qty .error { flex-basis: 100%; margin: 0; }
.spec-card .spec-group-name { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .04em; color: var(--leaf); font-weight: 700; }
.spec-card .spec-pick + .spec-pick { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.rfq-qty .field input { width: 8.5em; }
.spec-submit form { margin: 0; }

/* 出口規格子項目 */
.export-specs { margin-top: 3rem; }
.spec-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.spec-tabs a { padding: .35rem .9rem; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: .9rem; background: var(--surface); }
.spec-tabs a:hover { background: var(--sun-soft); }
.spec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.spec-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--leaf); border-radius: var(--radius-s); padding: 1.1rem 1.3rem; scroll-margin-top: 6rem; }
.spec-card:target { border-top-color: var(--sun); box-shadow: 0 0 0 2px var(--sun-soft); }
.spec-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.spec-card p { margin: 0; line-height: 1.8; }
.spec-card .muted { color: var(--mute); font-size: .95rem; }
.spec-pick-hint { margin-top: -.4rem; }
.add-rfq-hint { flex-basis: 100%; margin: 0; font-size: .9rem; }

/* 規格需求選項（按鈕式勾選） */
.spec-pick { margin-top: .9rem; display: grid; gap: .8rem; }
.spec-card p + .spec-pick { padding-top: .9rem; border-top: 1px dashed var(--line); }
.spec-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.spec-q legend { font-weight: 700; font-size: .92rem; margin-bottom: .4rem; padding: 0; }
.spec-q legend small { font-weight: 400; color: var(--mute); margin-left: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: .38rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; line-height: 1.3; transition: background .12s, border-color .12s; }
.chip:hover span { border-color: var(--sun-deep); }
.chip input:checked + span { background: var(--sun-soft); border-color: var(--sun-deep); color: var(--ink); font-weight: 650; }
/* 唯讀（後台檢視客戶需求）：不可點，已選的保持橘色 */
.chip input:disabled + span { cursor: default; }
.chip:hover input:disabled:not(:checked) + span { border-color: var(--line); }
.review-banner .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.review-banner .muted { color: var(--mute); font-size: .9rem; }
.chip input[type="checkbox"]:checked + span::before { content: "✓ "; color: var(--sun-deep); }
.chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.chip-none span { color: var(--mute); border-style: dashed; }
.chip-none input:checked + span { background: var(--page-bg); border-color: var(--mute); color: var(--ink); font-weight: 400; }
.spec-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: 1rem 1.2rem; background: var(--sun-soft); border-radius: var(--radius-m); position: sticky; bottom: .8rem; box-shadow: 0 4px 16px rgba(29, 43, 35, .12); }

.prose { max-width: 720px; margin-top: 3rem; }
.prose p { line-height: 1.85; }

/* ========== RFQ ========== */
/* 詢價單頁與感謝頁：底色、字型、文字顏色／大小／粗細用 :root 的 --rfq-* 預設值 */
.rfq-page { background: var(--rfq-bg); font-family: var(--rfq-body-font); }
.rfq-title {
    overflow-wrap: anywhere;
    font-family: var(--rfq-title-font); font-weight: var(--rfq-title-weight); color: var(--rfq-title-text);
    font-size: calc(clamp(1.8rem, 4vw, 2.6rem) * var(--rfq-title-scale));
}
.rfq-page .lead { color: var(--rfq-hint-text); font-size: calc(1.1rem * var(--rfq-body-scale)); }
.rfq-page .hint, .rfq-page .empty, .rfq-page .reference-label, .rfq-specs-count { color: var(--rfq-hint-text); font-size: calc(.9rem * var(--rfq-body-scale)); }
.rfq-page .field { color: var(--rfq-body-text); font-weight: var(--rfq-body-weight); font-size: calc(.9rem * var(--rfq-body-scale)); }
.rfq-page .field input, .rfq-page .field select, .rfq-page .field textarea { color: var(--rfq-body-text); }
.rfq-page .reference { background: var(--rfq-card-bg); }
.rfq-page .reference-code { font-family: var(--rfq-heading-font); color: var(--rfq-heading-text); }
.rfq-form fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; }
.rfq-form legend {
    font-stretch: 112%; margin-bottom: .8rem;
    font-family: var(--rfq-heading-font); font-weight: var(--rfq-heading-weight); color: var(--rfq-heading-text);
    font-size: calc(1.3rem * var(--rfq-heading-scale));
}
/* 每個產品一個獨立框，多個產品時加上編號 */
.rfq-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rfq-line {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--rfq-card-bg);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sun);
    border-radius: var(--radius-m);
}
.rfq-line-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.rfq-line-title { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.rfq-num {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--sun); color: var(--ink); font-weight: 800; font-size: .9rem;
}
.rfq-name {
    overflow-wrap: anywhere;
    font-family: var(--rfq-heading-font); font-weight: var(--rfq-heading-weight); color: var(--rfq-heading-text);
    font-size: calc(1rem * var(--rfq-heading-scale));
}
.rfq-line-fields { display: grid; grid-template-columns: 8em 10em 1fr; gap: .8rem; }
.rfq-specs { margin-top: .8rem; padding: .7rem 1rem; background: #FAF7F0; border-radius: var(--radius-s); }
.rfq-specs summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.rfq-specs-count { font-weight: 400; margin-left: .4rem; }
.rfq-specs .spec-group-name { margin: .4rem 0 -.3rem; font-size: .8rem; letter-spacing: .04em; color: var(--leaf); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reference { border: 2px solid var(--ink); background: var(--surface); padding: 1.2rem 1.4rem; margin: 2rem 0; max-width: 420px; }
.reference-label { margin: 0; color: var(--mute); font-size: .9rem; }
.reference-code { margin: .2rem 0; font-stretch: 118%; font-weight: 800; font-size: 1.8rem; letter-spacing: .02em; }

/* ========== Pagination ========== */
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.pager-btn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--ink); border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-size: 1.2rem; }
.pager-btn.is-disabled { opacity: .3; }
.pager-info { color: var(--mute); }

/* ========== Footer ========== */
/* 奶油米白底＋金色點綴：文字中灰 #5A5A5A、標語/分隔線金 #C8A45D、icon 淺金（點綴色調淡）、
   淺橄欖綠 #A8B59E 柔光暈染增加層次。LOGO 大小與各區塊的字型、顏色、字級、粗細由後台「網站設定」覆寫 */
.site-footer {
    --f-bg: var(--footer-bg);
    --f-text: var(--footer-body-text);
    --f-gold: var(--footer-accent);
    --f-gold-soft: color-mix(in srgb, var(--f-gold) 78%, #fff);
    --f-olive: #A8B59E;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 3rem;
    padding: 5rem 0 1.8rem;
    font-family: var(--footer-body-font);
    font-size: calc(1rem * var(--footer-body-scale));
    font-weight: var(--footer-body-weight);
    color: var(--f-text);
    background:
        radial-gradient(ellipse 45% 70% at 8% 100%, rgba(168, 181, 158, .28), transparent 70%),
        radial-gradient(ellipse 35% 60% at 96% 10%, rgba(168, 181, 158, .2), transparent 70%),
        var(--f-bg);
    border-top: 1px solid color-mix(in srgb, var(--f-gold) 45%, transparent);
}
.site-footer a { color: var(--f-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--f-gold) 40%, transparent); transition: color .15s, border-color .15s; }
.site-footer a:hover, .site-footer a:focus-visible { color: color-mix(in srgb, var(--f-gold) 65%, #000); border-bottom-color: var(--f-gold); }
.site-footer a:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 3px; border-radius: 2px; }

.footer-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem 4rem; align-items: start; }
/* LOGO 只佔第一列，和公司名稱置中對齊；LOGO 較高時英文名、標語排在下方第二欄 */
.footer-brand-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.footer-brand-sub { grid-column: 2; }
.footer-seal {
    display: grid; place-items: center; flex-shrink: 0;
    width: calc(3.6rem * var(--footer-logo-scale)); height: calc(3.6rem * var(--footer-logo-scale));
}
.footer-seal img { width: calc(2.9rem * var(--footer-logo-scale)); height: calc(2.9rem * var(--footer-logo-scale)); }
.footer-brand {
    margin: 0;
    font-family: var(--footer-brand-font);
    font-size: calc(1.9rem * var(--footer-brand-scale)); font-weight: var(--footer-brand-weight); letter-spacing: .02em; line-height: 1.15;
    color: var(--footer-brand-text);
}
/* 英文頁的公司名稱（顯示英文名）：字型沿用中文名稱，顏色、大小、粗細可另外設定 */
/* 英文名較長：字級以頁尾左欄寬度為上限（cqi），調大時「International」等長字也不會超出欄位；過長單字仍可斷行 */
.footer-about { container-type: inline-size; }
.footer-brand.is-en {
    font-size: calc(1.9rem * var(--footer-en-brand-scale));
    font-size: min(calc(1.9rem * var(--footer-en-brand-scale)), 13cqi);
    font-weight: var(--footer-en-brand-weight); color: var(--footer-en-brand-text);
    overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
.footer-brand-en {
    margin: .2rem 0 0;
    font-family: var(--footer-brand-en-font);
    font-size: calc(1.05rem * var(--footer-brand-en-scale)); font-weight: var(--footer-brand-en-weight); letter-spacing: .04em; line-height: 1.3;
    color: var(--footer-brand-en-text);
}
.footer-tagline {
    margin: .3rem 0 0;
    font-family: var(--footer-tagline-font);
    font-size: calc(.95rem * var(--footer-tagline-scale)); font-weight: var(--footer-tagline-weight); letter-spacing: .14em;
    color: var(--footer-tagline-text);
}
.footer-address { display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0 0; line-height: 1.8; color: var(--f-text); }
.footer-heading {
    margin: 0 0 1.1rem;
    font-family: var(--footer-heading-font);
    font-size: calc(1.25rem * var(--footer-heading-scale)); font-weight: var(--footer-heading-weight); letter-spacing: .08em;
    color: var(--footer-heading-text);
}
.footer-heading::after {
    content: ""; display: block; width: 2.6rem; height: 2px; margin-top: .55rem;
    background: linear-gradient(90deg, var(--f-gold), transparent);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: calc(1rem * var(--footer-body-scale)); }
.contact-list li { display: flex; align-items: center; gap: .7rem; line-height: 1.6; color: var(--f-text); overflow-wrap: anywhere; }
.ci { width: 1.15em; height: 1.15em; flex-shrink: 0; color: var(--f-gold-soft); }
/* 聯絡資料的區域標籤（後台設定，例如「台灣」），排在號碼前面 */
.contact-label { margin-right: .5em; font-size: .85em; font-weight: 600; letter-spacing: .04em; color: var(--footer-accent); white-space: nowrap; }
.footer-address .ci { margin-top: .3rem; }

.footer-base {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
    margin-top: 3rem; padding-top: 1.1rem;
    border-top: 1px solid var(--f-gold);
    font-family: var(--footer-base-font);
    font-size: calc(.85rem * var(--footer-base-scale)); font-weight: var(--footer-base-weight); color: var(--footer-base-text);
}
.footer-en { font-family: var(--footer-brand-en-font); font-size: calc(.95rem * var(--footer-base-scale)); letter-spacing: .06em; color: var(--footer-brand-en-text); }

/* ========== Responsive ========== */
@media (max-width: 860px) {
    .product { grid-template-columns: 1fr; gap: 2rem; }
    .main-nav { margin-left: 0; order: 3; width: 100%; padding-bottom: .6rem; }
    .header-row { gap: .5rem 1.5rem; padding-top: .6rem; }
    .lang { margin-left: auto; }
}
@media (max-width: 600px) {
    .site-footer { padding-top: 3.8rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .footer-brand { font-size: calc(1.6rem * var(--footer-brand-scale)); }
    .footer-brand.is-en { font-size: calc(1.6rem * var(--footer-en-brand-scale)); font-size: min(calc(1.6rem * var(--footer-en-brand-scale)), 13cqi); }
    .footer-tagline { letter-spacing: .08em; }
    .footer-en { letter-spacing: .04em; font-size: calc(.88rem * var(--footer-base-scale)); }
    .hero { padding-top: 1.5rem; }
    .year-strip { --strip-size: .62rem; }
    /* 字放大時以畫面寬度為上限，「12月」不會超出格子 */
    .year-strip li { padding: .7rem 0; font-size: min(calc(var(--strip-size) * var(--strip-font-scale)), 3.2vw); }
    .weekday-bar { --strip-size: .72rem; padding: .35rem 0; }
    .day-strip { --strip-size: .62rem; }
    .day-strip li { padding: .45rem 0 .5rem; font-size: min(calc(var(--strip-size) * var(--strip-font-scale)), 3.2vw); }
    /* 手機圓圈小，框線最粗 2px，數字才不會被擠掉 */
    .day-strip li span { border-width: min(var(--day-ring-width), 2px); }
    .rfq-line { padding: .85rem .85rem 1rem; }
    .rfq-line-fields { grid-template-columns: 1fr 1fr; }
    .rfq-line-fields .field-wide { grid-column: 1 / -1; }
    /* 詢價單：後台調大的字以畫面寬度為上限、調小的字有下限，手機上不會超出畫面或小到看不清 */
    .rfq-title { font-size: clamp(1.4rem, calc(1.8rem * var(--rfq-title-scale)), 11vw); }
    .rfq-form legend { font-size: clamp(1.05rem, calc(1.2rem * var(--rfq-heading-scale)), 7.5vw); }
    .rfq-name { font-size: clamp(.9rem, calc(1rem * var(--rfq-heading-scale)), 6vw); }
    .rfq-page .lead { font-size: clamp(1rem, calc(1rem * var(--rfq-body-scale)), 5.5vw); }
    .rfq-page .hint, .rfq-page .empty, .rfq-page .reference-label, .rfq-specs-count { font-size: clamp(1rem, calc(.88rem * var(--rfq-body-scale)), 4.8vw); }
    .rfq-page .field { font-size: clamp(1rem, calc(.9rem * var(--rfq-body-scale)), 5vw); }
    /* 輸入框至少 16px，iPhone 點選時不會自動放大畫面 */
    .rfq-page .field :is(input, select, textarea) { font-size: max(16px, 1em); }
    .rfq-page .reference { max-width: none; }
    .rfq-page .reference-code { font-size: clamp(1.3rem, 7vw, 1.8rem); }
    .spec div { grid-template-columns: 7.5em 1fr; }
    .spec-cards { grid-template-columns: 1fr; }
    .sheet-groups { columns: 1; }
}
/* 手機（768px 以下）：內文至少 16px、可點範圍至少 44px、內容欄位改單欄、不出現固定寬度。
   放在 600px 區塊之後，同權重時以這裡為準；頁首、輪播箭頭、月份帶等本來就橫排的元件不改方向 */
@media (max-width: 768px) {
    /* 頁首第一列：LOGO＋公司名可縮、副標可斷兩行，語言切換與選單鈕固定寬度，三者維持同一列 */
    .header-row { gap: 0 .6rem; }
    .brand { flex: 1 1 0; min-width: 0; gap: .45rem; }
    .brand-mark { width: 40px; height: 40px; }
    .brand-text { min-width: 0; }
    .brand-name { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }
    .brand-tag { font-size: .5rem; letter-spacing: .04em; white-space: normal; line-height: 1.25; }
    .header-tools { flex: none; gap: .4rem; }
    .lang { padding: .1rem; gap: .1rem; }
    .lang a { padding: 0 .4rem; }
    .nav-toggle { width: 44px; height: 44px; }

    /* 單欄 */
    .section-head, .filters, .filter-actions, .rfq-qty, .spec-submit,
    .about-markets, .rfq-line-head, .footer-base { flex-direction: column; align-items: stretch; }
    .about-pillars, .process, .form-grid { grid-template-columns: 1fr; }
    /* 產品卡：平板直式一列兩張，480px 以下才改單欄 */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn, .filter-actions .btn, .spec-submit .btn { width: 100%; }
    .rfq-line-fields { grid-template-columns: 1fr; }
    .spec div { grid-template-columns: 1fr; }
    .spec dt { border-right: 0; border-bottom: 1px solid var(--line); }

    /* 內文 16px；後台可調比例的以 1rem 為下限 */
    .field, .legend, .results, .hint, .card-meta, .card-cat, .key-facts li, .sheet-jump,
    .spec dt, .spec-card .muted, .chip span, .spec-tabs a, .spec-q legend, .filter-checks,
    .category-count, .add-rfq-hint, .error, .reference-label, .lang, .maint-notice { font-size: 1rem; }
    .media-credit { font-size: .875rem; }
    :where(input, select, textarea) { font-size: max(16px, 1em); }
    .process p { font-size: max(1rem, calc(1rem * var(--process-body-scale))); }
    .about-pillar p, .about-pillar dd { font-size: max(1rem, calc(1.05rem * var(--about-body-scale))); }
    .about-intro { font-size: max(1rem, calc(1.1rem * var(--about-body-scale))); }
    .hero-lead { font-size: max(1rem, calc(1.15rem * var(--hero-lead-scale))); }
    .hs-lead { font-size: max(1rem, calc(1rem * min(var(--hs-lead-scale), 1.3))); }
    .site-footer, .contact-list { font-size: max(1rem, calc(1rem * var(--footer-body-scale))); }
    .footer-base { font-size: max(1rem, calc(.85rem * var(--footer-base-scale))); }
    .footer-en { font-size: max(1rem, calc(.88rem * var(--footer-base-scale))); }

    /* 水果月曆：兩欄兩列，圖示與名稱放大 */
    .fruit-cal-grid { grid-template-columns: repeat(2, 1fr); row-gap: .8rem; }
    .fruit-cal-title { font-size: 1rem; }
    .fruit-cal-hint { font-size: .875rem; }
    .fruit-cal-label { font-size: 1rem; }
    .fruit-cal-item { width: 4.5rem; min-height: 44px; }
    .fruit-cal-icon { width: 2.5rem; height: 2.5rem; }
    .fruit-cal-name { font-size: .875rem; }

    /* 航線地圖縮到約 0.4 倍：字、點、線、飛機放大；歐洲三城只標「歐洲」 */
    .market-label { font-size: 32px; stroke-width: 7px; }
    .market-label--origin { font-size: 38px; text-anchor: end; translate: -30px 50px; }
    .is-next .market-label--city { display: none; }
    .is-now .market-label--city { text-anchor: middle; translate: 0 30px; }
    .market-label--region { display: inline; font-size: 40px; }
    .market-route-line { stroke-width: 5; }
    .market-route.is-next .market-route-line { stroke-dasharray: 12 10; }
    .market-dot { r: 8px; }
    .market-origin-dot, .market-origin-pulse { r: 11px; }
    .market-plane { scale: 2.2; }

    /* 可點範圍 44px */
    .lang a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
    .hero-arrow, .pager-btn { width: 2.75rem; height: 2.75rem; }
    .chip span, .spec-tabs a { display: inline-flex; align-items: center; min-height: 44px; }
    .btn, .link-button { min-height: 44px; }
    .check { min-height: 44px; }
    .check input { width: 1.25rem; height: 1.25rem; }
    .site-footer a { display: inline-block; padding-block: .5rem; }
    .card-more, .sheet-jump a { display: inline-block; padding-block: .6rem; }
    .year-strip li { display: flex; align-items: center; justify-content: center; min-height: 44px; }

    /* 不出現固定寬度 */
    :where(img, video, iframe) { max-width: 100%; height: auto; }
    .about-markets li { min-width: 0; }
    .rfq-qty .field input { width: 100%; }
    .reference, .narrow, .prose, .lead, .empty, .hero-lead { max-width: 100%; }

    /* 滿版輪播：高度降低，寬圖左右少裁一些；疊加圖不超過整張寬 */
    .hs[data-layout="cover"] { min-height: clamp(260px, 60vw, 420px); }
    .hs[data-layout="cover"] .hs-media img { object-position: center; }
    .hs-layer { max-width: 100%; }
}
@media (max-width: 480px) {
    .grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 380px) {
    /* 很窄的手機：詢價欄位改一欄，字放大時也不會擠在一起 */
    .rfq-line-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    /* 飛機是 SVG 動畫，不受上面規則影響：改顯示停在航線中點的飛機 */
    .market-plane--flying, .market-origin-pulse { display: none; }
    .market-plane--static { display: inline; }
}

/* ========== 維護模式提醒（只有持維護通行 cookie 的瀏覽器看得到） ========== */
.maint-notice { padding: .5rem 1rem; background: var(--sun); color: var(--ink); font-size: .9rem; font-weight: 600; text-align: center; }
.maint-notice a { color: inherit; margin-left: .5rem; }