/* =============================================================
   Freshop 2026 — index.css
   曲有誤，周郎顧；碼有錯，我心痛。
   純粹的 CSS，框架？那是弱者才需要的束縛。
   ============================================================= */

/* ── CSS Custom Properties ─── */
:root {
    --color-primary:        #44a38c;
    --color-primary-dark:   #2a7a65;
    --color-accent:         #ea5504;
    --color-warm:           #a04d1a;
    --color-warm-gold:      #d77d00;
    --color-blue-cyan:      #00a0e9;
    --color-blue-btn:       #0091e9;
    --color-text:           #333333;
    --color-text-light:     #888888;
    --color-text-muted:     #b0b0b0;
    --color-white:          #ffffff;
    --color-bg-dark:        #1e4a3c;
    --color-bg-concept:     #2c1a0e;
    --color-accent-brown:   #7a5230;
    --color-accent-amber:   #c8922a;

    --font-base: 'Noto Sans TC', system-ui, sans-serif;

    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 1000px;

    --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 36px rgba(68, 163, 140, 0.18);

    --transition-base: 0.25s ease;

    --max-width: 1440px;
    --gutter:    60px;
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background: no-repeat center bottom / 100% url(/img/there-is-jet-that-is-flying-through-air-with-smoke-1.png);
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

img,
svg {
    display: block;
}

/* ── 共用：雙色 Section Heading ── */
.section-heading__text {
    font-size: 70px;
    font-weight: 900;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.section-heading__first {
    color: #a04d1a;
    font-size: 70px;
    font-weight: 900;
}

.section-heading__rest {
    color: #d77d00;
    font-size: 58px;
    font-weight: 900;
}

/* 理念合作 heading — 白色系 */
.concept-heading__text {
    font-size: 70px;
    font-weight: 900;
    line-height: normal;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.concept-heading__first {
    color: var(--color-white);
    font-size: 70px;
    font-weight: 900;
}

.concept-heading__rest {
    color: rgba(255, 255, 255, 0.85);
    font-size: 58px;
    font-weight: 900;
}

/* ── 共用 MORE 按鈕 ── */
.more-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    font-size: 20px;
    font-weight: 900;
    font-family: var(--font-base);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.more-text:hover {
    transform: translateY(-2px);
}

/* teal stroke，白色填字 */
.more-text--stroke {
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-white);
    -webkit-text-stroke: 2px var(--color-primary);
}

.more-text--stroke:hover {
    background-color: var(--color-primary);
    -webkit-text-stroke: 0;
    color: var(--color-white);
}

/* 鮮活優選 MORE：白底 stroke */
.more-text--stroke-white {
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-white);
    -webkit-text-stroke: 2px var(--color-primary);
}

.more-text--stroke-white:hover {
    background-color: var(--color-primary);
    -webkit-text-stroke: 0;
    color: var(--color-white);
}

/* 理念合作 MORE：warm border */
.more-text--concept {
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: var(--color-white);
}

.more-text--concept:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* =========================================
   PAGE ROOT
   ========================================= */
.page-root {
    position: relative;
    overflow-x: clip;
}

/* =========================================
   HERO 背景圖層（全頁背景，僅裝飾）
   ========================================= */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(700px, 88vw, 1584px);
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-bg__farm {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: auto;
    filter: contrast(1.25) saturate(1.5) brightness(0.88);
    /* 右側漸出、底部漸出 */
    -webkit-mask-image:
        linear-gradient(to right,  black 0%, black 55%, transparent 88%),
        linear-gradient(to bottom, black 0%, black 42%, transparent 65%);
    mask-image:
        linear-gradient(to right,  black 0%, black 55%, transparent 88%),
        linear-gradient(to bottom, black 0%, black 42%, transparent 65%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-bg__side {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    max-width: 717px;
    height: auto;
    filter: contrast(1.1) saturate(1.3) brightness(1.08);
    /* 左側漸入、上方漸入、底部漸出，右側不羽化 */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, black 28%),
        linear-gradient(to bottom, transparent 0%, black 12%);
    mask-image:
        linear-gradient(to right,  transparent 0%, black 28%),
        linear-gradient(to bottom, transparent 0%, black 12%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-bg__gradient {
    position: absolute;
    inset: 0;
    /* 下方淡出白色：60% 以前完全不遮擋，92% 才全白 */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 92%);
}

/* =========================================
   HEADER
   ========================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px clamp(16px, 2.5vw, 48px);
    gap: 0;
}

.header--scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Logo — Figma vector 組件疊合 */
.header__logo-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
}

.header__logo {
    position: relative;
    width: clamp(140px, 9.65vw, 185px);
    height: clamp(66px, 4.58vw, 88px);
}

.freshop-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

/* 主選單 */
.header__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 32px;
    flex-shrink: 0;
}

.nav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 64px;
    gap: 4px;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base), transform var(--transition-base);
}

.nav-item:hover {
    background-color: rgba(68, 163, 140, 0.08);
    transform: translateY(-2px);
}

.nav-item__icon {
    width: 28px;
    height: 28px;
}

.nav-item__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* 工具列 — #eeeeee 底色 + teal 邊框膠囊（忠實還原 Figma） */
.header__toolbar-wrap {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 32px;
}

.toolbar-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 1000px;
    border: none;
    background-color: #44a38c;
    overflow: hidden;
}

.toolbar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.toolbar-divider {
    align-self: stretch;
    width: 2px;
    border-radius: 2px;
    opacity: 0.3;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* =========================================
   MAIN
   ========================================= */
.main {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background-image: url(/img/1-1.png), url(/img/bg-main-bottom.svg);
    background-repeat: no-repeat;
    background-position: bottom right, bottom center;
    background-size: auto, 100%;
    padding: 64px 0;
}


section {
    padding: 64px min(5vw, 64px);
}

/* =========================================
   SECTION 1 — 當季鮮報 (.view)
   ========================================= */
.view {
    background: none;
    padding: clamp(32px, 3.33vw, 64px) 0 0;
    position: relative;
    align-self: stretch;
    width: 100%;
    grid-column: 1 / -1;
}

/* 裝飾 vector 圖（有機造型） */
.view__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.view__deco-inner {
    position: absolute;
    left: clamp(10px, 2.76vw, 53px);
    top: clamp(60px, 7.29vw, 140px);
    width: clamp(250px, 34.4vw, 660px);
    display: flex;
    flex-direction: column;
}

.deco-v11 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.deco-v12 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.view__content {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 1;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4.17vw, 80px);
    min-height: clamp(400px, 42vw, 650px);
    overflow: visible;
}

/* 左欄（隱藏） */
.view__left {
    display: none;
}

.view__main-img-wrap {
    position: relative;
    width: clamp(260px, 33.3vw, 640px);
}

.view__main-img {
    width: 100%;
    margin-bottom: -12px;
    margin-left: -12px;
    aspect-ratio: 1.14;
    object-fit: cover;
}

/* TOPIC 膠囊（Figma：絕對定位於主圖底部） */
.topic-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2a7a65;
    border-radius: 1000px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90%;
}

/* 「TOPIC」字樣：隱藏 */
.topic-badge__label {
    display: none;
    font-family: var(--font-base);
    font-weight: 900;
    color: var(--color-white);
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: normal;
    background-color: #2a7a65;
    padding: 8px 20px;
    flex-shrink: 0;
    border-radius: 1000px 0 0 1000px;
    letter-spacing: 0.05em;
}

/* 跑馬燈文字：深色背景 */
.topic-badge__text {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-white);
    background-color: #2a7a65;
    font-size: clamp(13px, 1.04vw, 20px);
    line-height: normal;
    padding: 8px 24px 8px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 摘要文字區（主圖下方，Figma frame-13） */
.view__summary-wrap {
    width: clamp(260px, 33.3vw, 640px);
    padding: 0 32px;
    display: block;
}

.view__summary p {
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--color-text);
    font-size: 20px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 101px;
}

/* 右欄（左欄移除後獨佔全寬，置中靠上） */
.view__right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 32px;
    flex: 0 0 62%;
    min-width: 0;
    background: none;
    padding: 16px 24px 0;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-start;
}

.view__right > *:not(.deco-v11):not(.deco-v12) {
    position: relative;
    z-index: 1;
}

.view__header {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.more-btn-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.more-btn-img {
    width: clamp(60px, 5vw, 90px);
    height: auto;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.more-btn-img:hover {
    transform: scale(1.08);
}

/* MORE 箭頭裝飾圖（Figma：87.5x100px，rotate 180deg） */
.more-arrows {
    position: relative;
    width: 87.5px;
    height: 100px;
    transform: rotate(180deg);
    flex-shrink: 0;
}

.more-arrows img {
    position: absolute;
}

.more-arrows img:nth-child(1) { width: 100%;   height: 86.92%; top: 13.08%; left: 0;      transform: rotate(-180deg); }
.more-arrows img:nth-child(2) { width: 87.95%; height: 100%;   top: 0;      left: 12.05%; transform: rotate(-180deg); }
.more-arrows img:nth-child(3) { width: 76.64%; height: 66.24%; top: 33.76%; left: 23.36%; transform: rotate(-180deg); }
.more-arrows img:nth-child(4) { width: 89.55%; height: 31.56%; top: 68.44%; left: 10.45%; transform: rotate(-180deg); }

.more-arrow-img {
    position: relative;
    width: 100px;
    flex-shrink: 0;
    margin-top: -73px;
    margin-bottom: -72px;
    margin-right: -99px;
}

/* 文章列 */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.article-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.article-divider {
    width: 100%;
    height: auto;
    display: block;
}

/* 日期圖示區（Figma：日曆 icon + 年份框 + 日期框疊合） */
.article-item__date-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    border-radius: 100px;
}

.article-item__date-icon {
    width: 40px;
    height: 43px;
    aspect-ratio: 0.93;
}

.article-item__date-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 5px;
    margin-top: -35px;
    background-color: #44a38c;
    border-radius: 8px;
}

.article-item__year {
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--color-white);
    font-size: 13px;
    line-height: normal;
    white-space: nowrap;
}

.article-item__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    background-color: #fff;
    border-radius: 4px;
    font-family: var(--font-base);
    font-weight: 700;
    color: #333;
    font-size: 15px;
    line-height: normal;
    white-space: nowrap;
}

.article-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.article-item__title {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-text);
    line-height: 1.4;
}

.article-item__summary {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================
   SECTION 2 — 鮮活優選 (.view-2)
   ========================================= */
.view-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 48px 0;
    align-self: stretch;
    width: 100%;
    background-color: var(--color-white);
    background-image: url(/img/cute-watercolor-farmer-girl-overalls-straw-hat-1.png), url(/img/soy-beans-1.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left bottom;
    background-size: clamp(200px, 28vw, 500px) auto, clamp(400px, 53.3vw, 1024px) auto;
    overflow: hidden;
    grid-column: 1 / -1;
}

/* 裝飾：水彩農夫（右上角） */
.v2-deco-watercolor {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.v2-deco-watercolor img {
    width: clamp(200px, 28vw, 500px);
    mix-blend-mode: multiply;
    display: block;
}

/* 裝飾：大豆（左側，mix-blend-mode: multiply） */
.v2-deco-soybeans {
    position: absolute;
    bottom: 1px;
    left: 0;
    pointer-events: none;
    z-index: 0;
    width: 1px;
    height: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 320px;
}

.v2-deco-soybeans img {
    width: clamp(400px, 53.3vw, 1024px);
    mix-blend-mode: multiply;
    margin-top: -490px;
    margin-bottom: -490px;
    margin-right: -1023px;
}

/* 裝飾：全頁紋理 */
.v2-deco-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.v2-deco-texture__abstract {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    mix-blend-mode: multiply;
    object-fit: cover;
}

/* 糖果特寫：置中 */
.v2-deco-texture__candies {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: 1400px;
    height: auto;
    mix-blend-mode: darken;
}

/* 標題列 */
.v2-header {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 0 clamp(16px, 3.33vw, 64px);
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 鮮活優選輪播（carousel-3）*/
.carousel-3 {
    position: relative;
    width: 100%;
    z-index: 1;
}

.carousel-3__viewport {
    overflow: hidden;
    width: 100%;
}

.carousel-3__track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}

.carousel-3__slide {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-3__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, opacity 0.2s;
    z-index: 10;
    padding: 0;
}

.carousel-3__nav:hover {
    background: #ffffff;
}

.carousel-3__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel-3__prev {
    left: clamp(4px, 1.5vw, 24px);
}

.carousel-3__next {
    right: clamp(4px, 1.5vw, 24px);
}

/* 箭頭圖示（CSS border chevron） */
.carousel-3__prev::before,
.carousel-3__next::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #44a38c;
    border-right: 2px solid #44a38c;
}

.carousel-3__prev::before {
    transform: rotate(-135deg) translate(-2px, 2px);
}

.carousel-3__next::before {
    transform: rotate(45deg) translate(-2px, 2px);
}

/* 商品列 */
.product-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

.product-row--3 {
    padding-left: clamp(16px, 10.42vw, 200px);
    padding-right: clamp(16px, 10.42vw, 200px);
}

.product-row--5 {
    padding-left: clamp(16px, 2.5vw, 48px);
    padding-right: clamp(16px, 2.5vw, 48px);
}

/* 商品卡（忠實還原 Figma figure / figure-2） */
.figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 12px;
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.figure-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px;
    align-self: stretch;
    width: 100%;
    border-radius: 12px;
    border: 2px solid white;
    position: relative;
    background-color: transparent;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.figure-2:hover {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.15);
    border-color: #44a38c;
    transform: translateY(-3px);
}

/* 商品封面圖（Figma：aspect-ratio 1.33，背景圖） */
.cover {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1.33;
    background-image: url(/img/cover-7.png);
    background-size: cover;
    background-position: 50% 50%;
    align-self: stretch;
    width: 100%;
}

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

/* figcaption 商品資訊 */
.figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    width: 100%;
    background-color: var(--color-white);
    padding: 12px;
}

.figcaption__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    width: 100%;
}

.product-unit {
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--color-text);
    font-size: 16px;
    opacity: 0.95;
    white-space: nowrap;
    line-height: normal;
}

.product-title {
    font-family: var(--font-base);
    font-weight: 700;
    color: #44a38c;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.4;
    height: calc(1.4em * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-row--5 .figure {
    display: flex;
    flex-direction: column;
}

.product-row--5 .figure-2 {
    flex: 1;
}

.figcaption__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 12px;
    align-self: stretch;
    width: 100%;
}

.price-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.price-original {
    display: none;
}

.price-sale {
    font-family: var(--font-base);
    font-weight: 700;
    color: #ea5504;
    font-size: 20px;
    white-space: nowrap;
    line-height: normal;
}

/* 前往選購按鈕（Figma：藍色 #0091e9 實心填充） */
.moreprototype {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #0091e9;
    position: relative;
    transition: background-color var(--transition-base);
}

.moreprototype:hover {
    background-color: #0071c9;
}

.moreprototype__bg {
    display: none;
}

.moreprototype__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    width: 100%;
    background-color: transparent;
    position: relative;
}

.moreprototype__text {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-white);
    font-size: 20px;
    white-space: nowrap;
    line-height: normal;
}

.moreprototype__icon {
    align-self: stretch;
    aspect-ratio: 1;
    flex-shrink: 0;
    max-height: 24px;
}

/* =========================================
   SECTION 3 + 4 — 小農故事 + 理念合作
   ========================================= */
.frame-40 {
    display: flex;
    align-items: flex-end;
    gap: 64px;
    padding: 32px 0 20px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.frame-40 > *:not(.mountain-deco) {
    position: relative;
    z-index: 1;
}

/* =========================================
   SECTION 3 — 小農故事 (.view-3)
   ========================================= */
.view-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0 24px;
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-lg);
}

/* 標題列：小農故事標題 + MORE 按鈕並排 */
.v3-heading-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 50%;
    grid-column: 1;
    grid-row: 1;
}

.v3-heading-wrap .v3-more {
    margin-top: 68px;
    margin-left: -28px;
}

/* 內容橫排：左大圖 + 右側錯落卡片，對齊頂部 */
.v3-content {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-left: clamp(16px, 3.33vw, 64px);
    align-self: stretch;
    width: 100%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
}

/* 左側：大圖（已隱藏，改由 .v3-side 顯示3筆小農） */
.v3-main-figure {
    display: none;
}

.v3-main-figure__inner {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    position: relative;
    z-index: 2;
}

.v3-main-img {
    width: 100%;
    aspect-ratio: 1.09;
    object-fit: cover;
}

.v3-main-caption {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.v3-main-title {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-text);
    font-size: 24px;
    line-height: normal;
}

.v3-main-summary {
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--color-text);
    font-size: 18px;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: normal;
}

/* 右側：3 篇小故事（flex 直欄，文章橫排由 .v3-articles-row 控制） */
.v3-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 32px 32px 0;
    flex: 1;
    align-self: stretch;
    min-width: 0;
    position: relative;
}

/* 3 篇文章橫排容器 */
.v3-articles-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* 三篇文章：各佔等寬 */
.v3-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* 高低高錯落：第2篇往下偏移 */
.v3-articles-row .v3-article:nth-child(2) {
    margin-top: 64px;
}

.v3-article__title {
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-text);
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.4;
    align-self: stretch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v3-article__figure {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 8px 8px 12px #bbc9c6;
}

/* 預設封面（帶 Freshop logo） */
.v3-article__cover {
    flex-shrink: 0;
    width: 100%;
    height: clamp(150px, 14vw, 240px);
}

.v3-article__cover--default {
    background: #eeeeee;
}

.default-cover {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.default-cover__logo {
    flex: 1;
    position: relative;
    aspect-ratio: 2.11;
}

.default-cover__logo img { position: absolute; }
.default-cover__logo img:nth-child(1) { width: 100.35%; height: 19.09%; top: 80.91%; left: 0; }
.default-cover__logo img:nth-child(2) { width: 88.81%;  height: 40.44%; top: 59.56%; left: 11.19%; }
.default-cover__logo img:nth-child(3) { width: 15.65%;  height: 76.19%; top: 23.81%; left: 84.35%; }
.default-cover__logo img:nth-child(4) { width: 31.54%;  height: 81.03%; top: 18.97%; left: 68.46%; }
.default-cover__logo img:nth-child(5) { width: 46.6%;   height: 100.74%; top: 0;    left: 53.4%; }
.default-cover__logo img:nth-child(6) { width: 57.54%;  height: 78.9%;  top: 21.1%;  left: 42.46%; }
.default-cover__logo img:nth-child(7) { width: 70.81%;  height: 77.9%;  top: 22.1%;  left: 29.19%; }
.default-cover__logo img:nth-child(8) { width: 82.87%;  height: 75.61%; top: 24.39%; left: 17.13%; }
.default-cover__logo img:nth-child(9) { width: 98.59%;  height: 100.35%; top: 0;    left: 0; }

.default-cover__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-base);
    font-weight: 700;
    color: var(--color-white);
    font-size: 24px;
    text-align: center;
    text-shadow: 0 0 4px #333333;
    opacity: 0.3;
    line-height: normal;
}

.v3-article__cover--photo {
    background-image: url(/img/cover-8.png);
    background-size: cover;
    background-position: 50% 50%;
}

.v3-article__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 20px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.v3-article__summary {
    font-family: var(--font-base);
    font-weight: 400;
    color: var(--color-text);
    font-size: 18px;
    line-height: normal;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    align-self: stretch;
}

/* MORE 按鈕區 */
.v3-more {
    display: flex;
    align-items: flex-end;
}

.v3-more__arrow {
    width: 48px;
    height: auto;
    flex-shrink: 0;
}

/* =========================================
   SECTION 4 — 理念合作 (.view-5)
   ========================================= */
.view-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    border-radius: 1000px 0 0 0;
    flex-shrink: 0;
}

/* 圖標橫排 */
.concept-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    width: clamp(240px, 18.23vw, 350px);
}

.concept-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

/* 新版：直接用圖片當圖示 */
.concept-item__icon {
    width: clamp(60px, 5.5vw, 90px);
    height: clamp(60px, 5.5vw, 90px);
    object-fit: contain;
    display: block;
}

/* figure-5：正方形圖示容器（舊版保留，避免衝突） */
.concept-item__icon-wrap {
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 圖示容器內的圖片填滿 */
.concept-item__icon-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 帶背景圖的圖示（Figma 使用 background-image） */
.concept-item__icon-wrap--bg1 {
    background-image: url(/img/view-6.png);
    background-size: 100% 100%;
}

.concept-item__icon-wrap--bg2 {
    background-image: url(/img/view-7.png);
    background-size: 100% 100%;
}

/* 相對定位，用於多個 vector 疊合 */
.concept-item__icon-wrap--rel {
    position: relative;
}

.concept-item__icon-wrap--rel img,
.concept-item__icon-wrap--rel > div {
    position: absolute;
}

/* 個別 vector 位置（從 Figma 提取） */
.ci-v27 { width: 87.26%; height: 86.86%; top: 13.14%; left: 12.74%; }
.ci-v28 { width: 89.30%; height: 87.80%; top: 12.20%; left: 10.70%; }
.ci-v29 { width: 83.05%; height: 72.80%; top: 27.20%; left: 16.95%; }
.ci-v30 { width: 49.10%; height: 64.72%; top: 35.28%; left: 50.90%; }
.ci-v31 { width: 29.17%; height: 73.74%; top: 26.26%; left: 70.83%; }
.ci-v32 { width: 67.29%; height: 26.78%; top: 73.22%; left: 32.71%; }
.ci-group6 {
    width: 25.50%;
    height: 33.18%;
    top: 0;
    left: 0;
    background-image: url(/img/vector-37.svg);
    background-size: 100% 100%;
}
.ci-v35 { width: 44.20%; height: 99.53%; top: 0; left: 55.80%; }
.ci-v36 { width: 99.75%; height: 44.11%; top: 55.89%; left: 0; }
.ci-group7,
.ci-group8,
.ci-group9,
.ci-group10,
.ci-v38,
.ci-v39,
.ci-v40,
.ci-v41,
.ci-v42,
.ci-v43,
.ci-v44,
.ci-group11,
.ci-group12,
.ci-group13 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}
.ci-group7 img,
.ci-group12 img,
.ci-group13 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 圖示下方標籤 */
.concept-item__label {
    font-size: clamp(13px, 1.04vw, 20px);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    line-height: normal;
    padding: 8px 0;
}

/* 分隔線：teal 2px */
.concept-divider {
    align-self: stretch;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    opacity: 0.75;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

/* 中間：標題 + MORE */
.concept-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
}

.concept-heading {
    display: flex;
    flex-direction: column;
    width: clamp(160px, 12.08vw, 232px);
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
}

.concept-heading__text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    position: relative;
}

.concept-heading__first {
    font-size: clamp(36px, 5.21vw, 100px);
    font-weight: 900;
    color: var(--color-accent-brown);
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 0;
    line-height: normal;
}

.concept-heading__rest {
    font-size: clamp(20px, 2.6vw, 50px);
    font-weight: 900;
    color: var(--color-accent-amber);
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 0;
    line-height: normal;
}

.concept-more {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
}

.concept-more__arrow {
    width: 32px;
    height: auto;
}

/* =========================================
   底部山形裝飾（設計稿：藍綠色波浪山形，位於 footer 上方）
   ========================================= */
.mountain-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.15;
}

.mountain-deco__svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px min(5vw, 64px);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    transform: translateY(-100%);
    z-index: -1;
    pointer-events: none;
    background-image: url("/img/footer-wave.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Footer logo：frame-58，欄式置中 */

.footer__logo-wrap {
    position: relative;
    z-index: 2;
    margin: -7% 0 0%;
}

.footer__logo {
    position: relative;
    width: 100%;
}

.freshop-logo-2 {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(2px 0 0 white)
            drop-shadow(-2px 0 0 white)
            drop-shadow(0 2px 0 white)
            drop-shadow(0 -2px 0 white);
}

/* 水平分隔線：teal 2px */
.footer__divider {
    align-self: stretch;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    opacity: 0.75;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.footer__info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 clamp(16px, 3.33vw, 64px) 48px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 16px;
}

.footer__nav {
    display: flex;
    gap: clamp(16px, 2.08vw, 40px);
}

.footer__nav-link {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    transition: opacity var(--transition-base);
}

.footer__nav-link:hover {
    opacity: 0.7;
}

.footer__company {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 2.08vw, 40px);
    mix-blend-mode: multiply;
}

.footer__contact-item {
    display: inline-flex;
    align-items: flex-start;
    gap: clamp(8px, 0.83vw, 16px);
    font-family: "Noto Sans TC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.footer__contact-item img {
    align-self: stretch;
    aspect-ratio: 1;
    position: relative;
    flex-shrink: 0;
    height: 1.2em;
    width: auto;
}

.footer__copyright {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0;
    line-height: normal;
}

/* =========================================
   RWD 響應式斷點
   ========================================= */

/* 1300px 以下：主圖縮小，讓文章有更多空間 */
@media (max-width: 1300px) {
    .v3-article__cover {
        height: 160px;
    }

    .v3-main-figure {
        width: clamp(200px, 24vw, 420px);
    }
}

/* 1100px 以下：小農故事與理念合作改為上下排列 */
@media (max-width: 1100px) {
    .frame-40 {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .view-3 {
        flex: 0 0 auto;
        width: 100%;
    }

    .view-5 {
        padding: 0 clamp(16px, 4.17vw, 80px) 32px;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        width: 100%;
    }

    .concept-row {
        width: auto;
        flex: 1;
        justify-content: space-evenly;
    }

    .concept-divider {
        display: none;
    }

    .concept-title-block {
        flex-shrink: 0;
    }
}

/* 900px 以下：header 換行 + v3-content 改為上下排列 */
@media (max-width: 900px) {
    .header {
        flex-wrap: wrap;
        gap: 8px;
        overflow: hidden;
    }

    .header__nav {
        order: 3;
        width: 100%;
        padding: 0 16px 8px;
        justify-content: space-evenly;
    }

    .v3-content {
        flex-direction: column;
    }

    .v3-main-figure {
        width: 100%;
        max-width: 480px;
        padding-top: 32px;
    }

    .v3-side {
        padding: 16px 16px 32px 16px;
        width: 100%;
    }
}

/* 768px 以下：鮮活優選改為 2 欄 */
@media (max-width: 768px) {
    .product-row {
        flex-wrap: wrap;
    }

    .product-row--3 .figure,
    .product-row--5 .figure {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .view__content {
        flex-direction: column;
    }

    /* 手機版裝飾 SVG 置底顯示，寬度撐滿 view__right */
    .deco-v11,
    .deco-v12 {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* 手機版 view__right 改為撐滿容器，覆蓋桌機版的 align-self: flex-start */
    .view__right {
        width: 100%;
        align-self: stretch;
    }

    /* 手機版標題列與文章列改為全寬，移除桌機版的偏右 margin */
    .view__header,
    .article-list {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* 手機版縮小文章列字級 */
    .article-item__title {
        font-size: 15px;
    }

    .article-item__summary {
        font-size: 13px;
    }

    .view__left,
    .view__main-img-wrap,
    .view__summary-wrap {
        width: 100%;
        max-width: 100%;
    }

    /* v3-side 改為上下排列 */
    .v3-side {
        display: flex;
        flex-direction: column;
        padding: 0 16px 32px;
    }

    /* 手機版文章改為直向排列，各自一列 */
    .v3-articles-row {
        flex-direction: column;
    }

    /* 移除桌機版的錯落偏移 */
    .v3-articles-row .v3-article:nth-child(2) {
        margin-top: 0;
    }

    .v3-article {
        min-width: 0;
        width: 100%;
    }

    /* 手機版 footer 聯絡資訊改為直向排列 */
    .footer__company {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__contact-item {
        white-space: normal;
    }

    /* 手機版 farmers 與 concept 各自獨佔一列 */
    .view-3,
    .view-5 {
        grid-column: 1 / -1;
    }

    /* view-5 改回垂直排列，避免水平三塊超出螢幕 */
    .view-5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 16px clamp(16px, 4.17vw, 80px) 32px;
    }

    .concept-row {
        width: 100%;
        max-width: 400px;
        justify-content: space-around;
    }

    .concept-title-block {
        width: 100%;
        max-width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

}