/* ============================================================
   果蘊 FRUYUN 品牌覆蓋樣式 v2(2026-08-02)
   目的:與 fruyun.tw/preview 風格統一(淺色為主+preview 語彙:
        大襯線標題、細線分隔、蜜金點綴、留白)
        + 老花友善(17px 內文、52px 觸控、對比補強)
   原則:只覆蓋,不改 base.css;此檔由 theme.liquid 最後載入
   對比依據(claude/高齡閱讀評估_2026-08-02.md):
     淺底次要字 #5D5142 = 6.97:1、深底次要字 #CFC6B6 = 9.16:1
     蜜金 #C29B4A 在淺底僅 2.35:1 —— 只做裝飾線與點,絕不當文字色
   ============================================================ */

/* ---------- 品牌變數 ---------- */
:root {
  --fy-cream: #F6F3EE;
  --fy-ink: #26241F;
  --fy-tea: #7A6A54;
  --fy-sand: #B9AE9C;
  --fy-gold: #C29B4A;
  --fy-gold-soft: #D9BC85;
  --fy-plum: #5C4356;
  --fy-txt-2nd: #5D5142;      /* 淺底次要文字(6.97:1) */
  --fy-txt-2nd-dark: #CFC6B6; /* 深底次要文字(9.16:1) */
  --fy-line: rgba(38, 36, 31, .14);   /* 細線分隔(preview 語彙) */

  /* 覆蓋主題字體變數(蓋掉 EasyStore 字型庫的選擇) */
  --font-heading-family: 'Noto Serif TC', 'Palatino Linotype', 'PMingLiU', serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;         /* preview 大標 = Noto Serif TC 400 */
  --font-body-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-latin-family: 'EB Garamond', 'Palatino Linotype', serif; /* FRUYUN 字標用 */
}

/* ---------- 基礎:17px 內文(html 62.5% → 1.7rem)---------- */
body {
  font-size: 1.7rem;          /* 高齡讀中文「精讀 17px」,蓋掉 1.5/1.6rem */
  letter-spacing: .05em;
  line-height: 1.95;
  color: var(--fy-ink);
  background-color: var(--fy-cream);
}
@media screen and (min-width: 750px) {
  body { font-size: 1.7rem; }
}

/* 段落與商品描述:精讀字級 */
.rte, .rte p, .product__description, .product__description p {
  font-size: 1.7rem;
  line-height: 2;
}

/* 小字最低限(caption 12–13px → 14px)+ 對比補強,不用半透明灰 */
.caption,
.caption-large,
.caption-with-letter-spacing,
small,
.tax-note {
  font-size: 1.4rem !important;
  color: var(--fy-txt-2nd);
  opacity: 1 !important;
}
.text-muted, .text-secondary { color: var(--fy-txt-2nd) !important; }

/* ---------- 標題:大襯線+寬字距(preview 語彙) ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.title, .collection-hero__title, .banner__heading {
  font-family: var(--font-heading-family);
  letter-spacing: .12em;
  color: var(--fy-ink);
}
h1, h2, .h1, .h2, .title, .collection-hero__title { font-weight: 400; } /* 大標細襯線 */
h3, h4, .h3, .h4 { font-weight: 600; letter-spacing: .08em; }           /* 小標加重保可讀 */

/* 例外:橫幅(hero)壓在照片上的字回歸主題的前景色機制 ——
   深色照片上主題會給米白(--color-foreground),不能被上面的深炭鎖死
   (2026-08-02 修:深底橫幅標題被鎖成深炭,深色照片上讀不到) */
.banner__box .banner__heading,
.banner__box h1, .banner__box h2, .banner__box .h0, .banner__box .h1,
.banner__box .banner__text, .banner__box .banner__text p {
  color: rgb(var(--color-foreground));
}
/* 照片上的字加一層極淡的暗暈,亮部照片上也讀得到(老花) */
.banner--desktop-transparent .banner__box .banner__heading,
.banner--desktop-transparent .banner__box .banner__text {
  text-shadow: 0 1px 26px rgba(0, 0, 0, .38);
}
/* 橫幅副標:別小於精讀字級 */
.banner__text, .banner__text p { font-size: 1.7rem; }

/* 區塊標題底線:細線+蜜金短段(金只做裝飾,不做文字) */
.title-wrapper-with-link .title,
.collection-hero__title,
.title--primary {
  position: relative;
  padding-bottom: .55em;
}
.title-wrapper-with-link .title::after,
.collection-hero__title::after,
.title--primary::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--fy-gold) 0 2.8rem, var(--fy-line) 2.8rem 100%);
}

/* ---------- 連結與焦點 ---------- */
a { text-underline-offset: .18em; }
a:not(.button) { text-decoration-color: rgba(122, 106, 84, .5); }
.link, .underlined-link { color: var(--fy-ink); }
.underlined-link:hover { color: var(--fy-tea); }
:focus-visible {
  outline: 2px solid var(--fy-gold) !important;
  outline-offset: 3px;
}

/* ---------- 按鈕:52px 觸控+官網樣式 ---------- */
.button, .btn, .challenge__button, .customer button {
  border-radius: 0 !important;
  min-height: 5.2rem;
  min-width: 14rem;
  font-family: var(--font-body-family);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-indent: .14em;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
/* 實心(加入購物車/結帳):深炭底、米白字(base.css 走 CSS 變數) */
:root, .color-background-1 {
  --color-button: 38, 36, 31;          /* --fy-ink */
  --color-button-text: 246, 243, 238;  /* --fy-cream */
}
.button--primary,
.button:not(.button--secondary):not(.button--tertiary) {
  background-color: var(--fy-ink);
  color: var(--fy-cream);
}
.button--primary:hover,
.button:not(.button--secondary):not(.button--tertiary):hover {
  background-color: var(--fy-tea);
  box-shadow: 0 0 0 .1rem var(--fy-tea);
}
/* 線框按鈕:1px 深炭框,hover 反轉(同官網) */
.button--secondary, .button--tertiary {
  background: transparent;
  border: 1px solid var(--fy-ink);
  box-shadow: none;
  color: var(--fy-ink);
}
.button--secondary:hover, .button--tertiary:hover {
  background: var(--fy-ink);
  color: var(--fy-cream);
}

/* ---------- 表單:輸入框可讀、可點 ---------- */
input, select, textarea, .field__input, .select__select, .quantity {
  border-radius: 0 !important;
}
.field__input, .search__input,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  font-size: 1.6rem;
  min-height: 4.8rem;
}
.field__label, .form__label { font-size: 1.5rem; color: var(--fy-txt-2nd); }
.field__input:focus, .select__select:focus, input:focus, textarea:focus {
  border-color: var(--fy-tea);
}

/* ---------- 數量選擇器:放大到可按 ---------- */
.quantity { height: 5.2rem; width: 16rem; border: 1px solid var(--fy-ink); }
.quantity__button { width: 5.2rem; }
.quantity__button svg { width: 1.4rem; }
.quantity__input { font-size: 1.8rem; font-weight: 500; opacity: 1; }

/* ---------- 商品頁 ---------- */
.product__title {
  font-size: 2.8rem;
  line-height: 1.4;
  letter-spacing: .1em;
}
@media screen and (min-width: 750px) {
  .product__title { font-size: 3.2rem; }
}
.price { font-family: var(--font-heading-family); letter-spacing: .08em; font-size: 1.8rem; color: var(--fy-ink); }
.price .price-item { font-weight: 500; }
.price--large, .price--large .price-item--regular, .price--large .price-item--sale { font-size: 2.4rem; }
.price--on-sale s.price-item--regular { color: var(--fy-txt-2nd); font-size: .75em; }

/* 促銷/售完徽章:果紫與茶褐,不用刺眼紅;方角 */
.badge, .card__badge { border-radius: 0; border: none; letter-spacing: .1em; font-size: 1.3rem; }
.color-accent-2, .price__badge-sale { background-color: var(--fy-plum) !important; color: #F6F3EE !important; }
.price__badge-sold-out { background-color: var(--fy-txt-2nd); color: #F6F3EE; }

/* 加入購物車按鈕:滿版、醒目 */
.product-form__submit {
  min-height: 5.6rem;
  font-size: 1.8rem;
}

/* 出貨備註(main-product 新增區塊) */
.fy-purchase-note {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--fy-line);
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--fy-txt-2nd);
}

/* 手機黏底購買列(main-product 新增) */
.fy-sticky-atc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom));
  background: rgba(246, 243, 238, .96);
  border-top: 1px solid var(--fy-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fy-sticky-atc.is-visible { display: flex; }
/* 左:規格/數量摘要鈕(點了捲回選擇區) */
.fy-sticky-atc__opts {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .1rem;
  min-height: 5.2rem;
  padding: .4rem 1.2rem;
  background: transparent;
  border: 1px solid var(--fy-line);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-body-family);
  max-width: 45%;
}
.fy-sticky-atc__opts-label { font-size: 1.2rem; color: var(--fy-txt-2nd); letter-spacing: .08em; }
.fy-sticky-atc__opts-value { font-size: 1.5rem; font-weight: 500; color: var(--fy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 右:購買鈕內含小計(窄空間:收內距與字距,禁止折行) */
.fy-sticky-atc .button {
  flex: 1; min-height: 5.2rem; min-width: 0; margin: 0;
  gap: .8rem;
  padding: 0 1.2rem;
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-indent: 0;
  white-space: nowrap;
}
.fy-sticky-atc__amount { font-weight: 500; white-space: nowrap; }
@media screen and (max-width: 360px) { .fy-sticky-atc .button { font-size: 1.5rem; gap: .5rem; } }
@media screen and (min-width: 750px) { .fy-sticky-atc { display: none !important; } }

/* ---------- 商品卡:方角、米白層次、細邊框(同官網產品三卡) ---------- */
.card, .card--product, .product-card, .card .media, .card__inner {
  border-radius: 0 !important;
}
.card--product, .product-card {
  background: linear-gradient(175deg, #FBF8F3, #F4EFE6);
  border: 1px solid #E6DFD1;
  transition: transform .4s ease, box-shadow .4s ease;
}
.card--product:hover, .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(60, 52, 38, .22);
}
.card-information__text {
  font-size: 1.7rem;
  font-family: var(--font-heading-family);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--fy-ink);
}
.card-information .price { font-size: 1.7rem; letter-spacing: .04em; }
/* 版面承受放大:手機商品格用 rem 定欄寬 —— 系統字級放大到 200% 時自動降為單欄,不擠爆價格 */
@media screen and (max-width: 749px) {
  .product-grid.grid--2-col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
}
/* 卡上快速加購圓鈕:放大到可按(圓形保留) */
.badge-circle { width: 4.8rem !important; height: 4.8rem !important; }

/* ---------- 麵包屑(新增 snippet) ---------- */
.fy-breadcrumb {
  padding: 1.2rem 0 0;
  font-size: 1.4rem;
  color: var(--fy-txt-2nd);
}
.fy-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; }
.fy-breadcrumb li { display: flex; align-items: center; }
.fy-breadcrumb a, .fy-breadcrumb [aria-current="page"] {
  color: var(--fy-txt-2nd);
  text-decoration: none;
  padding: .6rem .2rem;          /* 連結與現在頁面同高,才不會一高一低 */
  display: inline-block;
  line-height: 1.4;
}
.fy-breadcrumb a:hover { color: var(--fy-ink); text-decoration: underline; }
.fy-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--fy-sand); }
.fy-breadcrumb [aria-current="page"] { color: var(--fy-ink); }

/* ---------- 購物車 ---------- */
.cart-items th { font-size: 1.4rem; color: var(--fy-txt-2nd); border-bottom: 1px solid var(--fy-line); }
.cart-item__name { font-size: 1.7rem; line-height: 1.6; }
.cart-item .price { font-size: 1.7rem; }
.totals__subtotal { font-size: 1.8rem; font-weight: 500; }
.totals__subtotal-value { font-size: 2.2rem; font-weight: 500; font-family: var(--font-heading-family); }
.cart__checkout-button {
  min-height: 5.6rem;
  font-size: 1.8rem;
  letter-spacing: .18em;
}
.cart-item__remove-button, .cart-remove-button { min-width: 4.4rem; min-height: 4.4rem; }

/* 加入購物車通知:字級與按鈕放大 */
.cart-notification__heading { font-size: 1.6rem !important; color: var(--fy-ink); }
.cart-notification .button { min-height: 5.2rem; }
.cart-notification__close { min-width: 4.4rem; min-height: 4.4rem; }
.cart-notification, .quick-add-modal__content, .modal__content { border-radius: 0 !important; }

/* ---------- 導覽列 ---------- */
.header a, .header__menu-item { letter-spacing: .12em; }
.header__menu-item { font-size: 1.6rem; padding: 1.2rem 1.6rem; }
.header__heading-link {
  font-family: var(--font-latin-family);
  letter-spacing: .3em;
  font-weight: 500;
}
.header__icon { width: 4.8rem; height: 4.8rem; }
.header__icon svg { width: 2.2rem; height: 2.2rem; }

/* ---------- 頁尾:深炭底(同官網 footer) ---------- */
.footer, footer.footer, .section-footer .footer {
  background-color: var(--fy-ink);
  color: var(--fy-txt-2nd-dark);
}
.footer .footer-block__heading, .footer h2, .footer .h4 {
  color: var(--fy-cream);
  font-family: var(--font-heading-family);
  font-weight: 400;
  letter-spacing: .14em;
}
.footer a, .footer .link { color: var(--fy-txt-2nd-dark); }
.footer a:hover { color: var(--fy-cream); }
.footer .list-social__link svg { width: 2rem; height: 2rem; }

/* ---------- 分頁 ---------- */
.pagination__item { min-width: 4.4rem; min-height: 4.4rem; font-size: 1.6rem; border-radius: 0 !important; }
.article-card, .collection-card { border-radius: 0 !important; }

/* ---------- 動態收斂 ---------- */
@media (prefers-reduced-motion: reduce) {
  .card--product, .product-card, .card-wrapper .media img, .button, .btn { transition: none !important; }
  .card--product:hover, .product-card:hover { transform: none; }
}