@charset "UTF-8";
/* ==========================================================================
   GiftYou 禮你客製 — 主題樣式（OpenCart 3.0.6，不依賴 Journal3）
   --------------------------------------------------------------------------
   為什麼重寫：Journal3 每頁注入 660KB inline CSS（整頁 HTML 1MB），
   且顏色藏在 DB 變數、模組樣式用 5 層選擇器 + !important，
   任何調整都要打特異性戰。這支改成：單一外部檔（可快取）、
   零 !important、值全部走 token。

   結構
     1  tokens      設計變數，改這裡就會全站生效
     2  reset/base  基礎排版
     3  layout      容器與網格（含 OpenCart/Bootstrap3 相容 class）
     4  components  按鈕、表單、卡片、徽章、提示、麵包屑、分頁、頁籤
     5  header      頁首、主選單、搜尋、手機抽屜
     6  footer      頁尾
     7  pages       各頁專屬
   ========================================================================== */

/* ==========================================================================
   1  TOKENS
   ========================================================================== */
:root {
  /* 品牌 —— 焦糖棕系。brand 是點綴層，primary 是動作層 */
  --gy-brand: #c87451;
  --gy-brand-soft: #f3dfd2;
  --gy-primary: #9a4b32;
  --gy-primary-hover: #7d3c28;
  --gy-primary-active: #683121;

  /* 文字 */
  --gy-ink: #2f211c;
  --gy-ink-2: #54423a;
  --gy-muted: #76645b;

  /* 底色與線 */
  --gy-canvas: #fbf7f2;
  --gy-paper: #fffdfa;
  --gy-soft: #f6ede6;
  --gy-line: #e8d9ce;
  --gy-line-strong: #d7bbaa;

  /* 深色底（頁尾）上的文字階 */
  --gy-on-dark: #d8c9bf;
  --gy-on-dark-muted: #b5a59a;
  --gy-on-dark-accent: #e2aa8c;
  --gy-dark: #4a2f22;
  --gy-dark-2: #3a241a;

  /* 語意 */
  --gy-success: #047a3a;
  --gy-success-soft: #eef9f2;
  --gy-danger: #ad3f46;
  --gy-danger-soft: #fdf1f1;
  --gy-warning: #b06f1d;
  --gy-warning-soft: #fdf5e8;
  /* LINE 綠。品牌色 #06C755 白字只有 2.26:1，先前加深到 #06a94a 仍是 3.10，
     都不到 AA 的 4.5。這裡取 5.47:1，色相維持 LINE 綠。 */
  --gy-line-green: #057a35;

  /* 尺寸 —— 容器寬度統一由這裡控制，避免各頁各自寫死 */
  --gy-content: 1180px;
  --gy-wide: 1360px;

  /* 圓角 */
  --gy-r-control: 10px;
  --gy-r-card: 16px;
  --gy-r-feature: 24px;
  --gy-r-pill: 999px;

  /* 控制項高度 —— 觸控目標最小 44px */
  --gy-h-sm: 36px;
  --gy-h-md: 40px;
  --gy-h-lg: 44px;

  /* 陰影 —— 同一組暖色基底，不要各寫各的 rgba */
  --gy-shadow-1: 0 3px 14px rgba(70, 42, 29, 0.055);
  --gy-shadow-2: 0 12px 34px rgba(70, 42, 29, 0.09);
  --gy-shadow-3: 0 20px 54px rgba(70, 42, 29, 0.13);

  /* 動效 */
  --gy-ease: 180ms cubic-bezier(0.2, 0.72, 0.2, 1);

  /* 字級 —— clamp 讓手機到桌機連續縮放，不用逐斷點覆寫 */
  --gy-fs-h1: clamp(28px, 3.4vw, 42px);
  --gy-fs-h2: clamp(22px, 2.4vw, 30px);
  --gy-fs-h3: clamp(18px, 1.6vw, 22px);
  --gy-fs-h4: 17px;
  --gy-fs-body: 15px;
  --gy-fs-sm: 13.5px;
  --gy-fs-xs: 12.5px;

  /* 字體 */
  --gy-font-serif: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  --gy-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  /* 間距階 */
  --gy-s1: 4px;
  --gy-s2: 8px;
  --gy-s3: 12px;
  --gy-s4: 16px;
  --gy-s5: 24px;
  --gy-s6: 32px;
  --gy-s7: 48px;
  --gy-s8: 64px;
}

/* ==========================================================================
   2  RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--gy-canvas);
  color: var(--gy-ink);
  font-family: var(--gy-font-sans);
  font-size: var(--gy-fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--gy-primary);
  text-decoration: none;
  transition: color var(--gy-ease);
}

a:hover {
  color: var(--gy-primary-hover);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--gy-s3);
  font-family: var(--gy-font-serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gy-ink);
  text-wrap: balance;
}

h1 { font-size: var(--gy-fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--gy-fs-h2); }
h3 { font-size: var(--gy-fs-h3); }
h4 { font-size: var(--gy-fs-h4); }

p { margin: 0 0 var(--gy-s4); }

ul, ol { margin: 0 0 var(--gy-s4); padding-left: 1.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--gy-line);
  margin: var(--gy-s6) 0;
}

/* 鍵盤焦點 —— 只在鍵盤操作時顯示，滑鼠點擊不出現 */
:focus-visible {
  outline: 2px solid var(--gy-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* 深色底上的焦點環要換成淺色，否則深棕對深棕看不見 */
.gy-header :focus-visible,
.gy-footer :focus-visible {
  outline-color: var(--gy-on-dark-accent);
}

/*
  .sr-only 是 Bootstrap3／OpenCart 原生模板用的名稱（本主題有 37 支模板在用，
  fallback 到 default 的頁面也是）。少了它，本來只給螢幕閱讀器的文字
  會直接顯示在畫面上 —— 實測詢價頁的「彩色陶瓷馬克杯 詢價數量」就是這樣露出來的。
*/
.gy-sr-only,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 跳至主內容 —— 鍵盤使用者第一個 Tab 會拿到 */
.gy-skip {
  position: absolute;
  left: var(--gy-s4);
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--gy-primary);
  color: #fff;
  border-radius: 0 0 var(--gy-r-control) var(--gy-r-control);
  transition: top var(--gy-ease);
}

.gy-skip:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3  LAYOUT
   含 OpenCart / Bootstrap3 相容 class —— 尚未改寫的頁面會 fallback 到
   default 主題，那些模板用的是 Bootstrap3 的 container/row/col-*，
   這裡提供最小可用實作，讓過渡期的頁面也不至於爛版。
   ========================================================================== */
.container,
.gy-container {
  width: 100%;
  max-width: var(--gy-content);
  margin-inline: auto;
  padding-inline: var(--gy-s4);
}

.gy-container--wide { max-width: var(--gy-wide); }
.gy-container--narrow { max-width: 820px; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gy-s4) * -0.5);
}

/*
  Bootstrap3 的 col-* 在最小斷點是滿寬，大螢幕才有欄寬。
  但 `.row > [class*="col-"]` 的特異度是 (0,2,0)，會壓過 `.col-sm-3` 的 (0,1,0) ——
  結果後台 Layout 掛的 #column-left 在桌機也是整排寬，疊在內容上方而不是側欄。
  用 :where() 把 .row 的特異度歸零，讓下面的 .col-sm-* 能正常接手。
*/
:where(.row) > [class*="col-"] {
  padding-inline: calc(var(--gy-s4) * 0.5);
  width: 100%;
}

/* Bootstrap3 12 欄，只實作 OpenCart 實際用到的斷點 */
@media (min-width: 768px) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-6  { width: 50%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-lg-2 { width: 16.6667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-8 { width: 66.6667%; }
  .col-lg-9 { width: 75%; }
}

.gy-main {
  display: block;
  min-height: 50vh;
  padding-bottom: var(--gy-s8);
}

.gy-section {
  padding-block: var(--gy-s7);
}

.gy-section--soft { background: var(--gy-soft); }
.gy-section--paper { background: var(--gy-paper); }

.gy-stack > * + * { margin-top: var(--gy-s4); }

.gy-grid {
  display: grid;
  gap: var(--gy-s4);
}

/* 自動欄數：min 值刻意取小，否則容器算 min-content 時會把版面撐寬 */
.gy-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (min-width: 768px) {
  .gy-grid--auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

.gy-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gy-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gy-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .gy-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gy-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   4  COMPONENTS
   ========================================================================== */

/* --- 按鈕 ---------------------------------------------------------------- */
.btn,
.gy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s2);
  min-height: var(--gy-h-lg);
  padding: 0 var(--gy-s5);
  border: 1px solid transparent;
  border-radius: var(--gy-r-control);
  background: var(--gy-primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--gy-ease), border-color var(--gy-ease),
              color var(--gy-ease), transform var(--gy-ease);
}

.btn:hover,
.gy-btn:hover {
  background: var(--gy-primary-hover);
  color: #fff;
  text-decoration: none;
}

.btn:active,
.gy-btn:active {
  background: var(--gy-primary-active);
  transform: translateY(1px);
}

.btn[disabled],
.gy-btn[disabled],
.gy-btn.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* 次要：白底棕框 */
.btn-default,
.gy-btn--ghost {
  background: var(--gy-paper);
  border-color: var(--gy-line-strong);
  color: var(--gy-primary);
}

.btn-default:hover,
.gy-btn--ghost:hover {
  background: var(--gy-soft);
  border-color: var(--gy-primary);
  color: var(--gy-primary-hover);
}

.btn-default:active,
.gy-btn--ghost:active { background: var(--gy-brand-soft); }

/* 破壞性動作：刪除、清空。不可與主 CTA 同色 */
.btn-danger,
.gy-btn--danger {
  background: var(--gy-danger);
  border-color: var(--gy-danger);
  color: #fff;
}

.btn-danger:hover,
.gy-btn--danger:hover { background: #8f333a; border-color: #8f333a; color: #fff; }

.gy-btn--line {
  background: var(--gy-line-green);
  border-color: var(--gy-line-green);
}

.gy-btn--line:hover { background: #058f3f; border-color: #058f3f; }

.btn-sm, .gy-btn--sm { min-height: var(--gy-h-sm); padding-inline: var(--gy-s4); font-size: var(--gy-fs-sm); }
.btn-lg, .gy-btn--lg { min-height: 50px; padding-inline: var(--gy-s6); font-size: 16px; }
.btn-block, .gy-btn--block { display: flex; width: 100%; }

/* 圖示鈕 */
.gy-btn--icon {
  width: var(--gy-h-lg);
  min-height: var(--gy-h-lg);
  padding: 0;
  border-radius: 50%;
}

/* --- 表單 ---------------------------------------------------------------- */
.form-control,
.gy-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--gy-h-lg);
  padding: 9px var(--gy-s3);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-ink);
  font-family: inherit;
  font-size: var(--gy-fs-body);
  line-height: 1.5;
  transition: border-color var(--gy-ease), box-shadow var(--gy-ease);
}

textarea { min-height: 120px; resize: vertical; }

.form-control:focus,
.gy-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gy-primary);
  box-shadow: 0 0 0 3px rgba(154, 75, 50, 0.14);
  outline: none;
}

::placeholder { color: var(--gy-muted); opacity: 0.75; }

label,
.control-label {
  display: inline-block;
  margin-bottom: var(--gy-s2);
  font-weight: 600;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.form-group { margin-bottom: var(--gy-s4); }

.gy-required { color: var(--gy-danger); margin-left: 2px; }

.text-danger,
.gy-field-error {
  display: block;
  margin-top: var(--gy-s1);
  color: var(--gy-danger);
  font-size: var(--gy-fs-sm);
}

.has-error .form-control,
.form-control[aria-invalid="true"] {
  border-color: var(--gy-danger);
}

/* checkbox / radio 對齊 —— OpenCart 預設會讓它們跟文字錯位 */
.gy-check {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
  font-weight: 400;
  font-size: var(--gy-fs-body);
  color: var(--gy-ink-2);
  cursor: pointer;
}

.gy-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--gy-primary);
}

/* --- 卡片 ---------------------------------------------------------------- */
.gy-card,
.panel {
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
  overflow: hidden;
}

.gy-card__body,
.panel-body { padding: var(--gy-s5); }

.panel-heading {
  padding: var(--gy-s4) var(--gy-s5);
  border-bottom: 1px solid var(--gy-line);
  font-family: var(--gy-font-serif);
  font-weight: 700;
}

/* --- 商品卡 -------------------------------------------------------------- */
.gy-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  overflow: hidden;
  transition: border-color var(--gy-ease), box-shadow var(--gy-ease),
              transform var(--gy-ease);
}

.gy-product:hover,
.gy-product:focus-within {
  border-color: var(--gy-line-strong);
  box-shadow: var(--gy-shadow-2);
  transform: translateY(-2px);
}

.gy-product__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--gy-soft);
  overflow: hidden;
}

.gy-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--gy-ease);
}

.gy-product:hover .gy-product__media img { transform: scale(1.04); }

.gy-product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gy-s2);
  padding: var(--gy-s4);
}

.gy-product__name {
  margin: 0;
  font-family: var(--gy-font-sans);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  line-height: 1.5;
  /* 固定兩行，卡片高度才會一致 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gy-product__name a { color: var(--gy-ink); }
.gy-product__name a:hover { color: var(--gy-primary); text-decoration: none; }

.gy-product__meta {
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-product__price {
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--gy-primary);
}

.gy-product__price del {
  margin-right: var(--gy-s2);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  font-weight: 400;
}

.gy-product__actions {
  display: flex;
  gap: var(--gy-s2);
  margin-top: var(--gy-s3);
}

.gy-product__actions .gy-btn { flex: 1; min-height: var(--gy-h-sm); padding-inline: var(--gy-s3); font-size: var(--gy-fs-sm); }
.gy-product__actions .gy-btn--icon { flex: 0 0 var(--gy-h-sm); min-width: var(--gy-h-sm); padding: 0; }

@media (max-width: 767px) {
  .gy-product__body {
    padding: var(--gy-s3);
    gap: 4px;
  }
  .gy-product__name {
    font-size: 13px;
    line-height: 1.35;
    height: 2.7em;
  }
  .gy-product__price {
    font-size: 15px;
  }
  .gy-product__actions {
    gap: 4px;
    margin-top: var(--gy-s2);
  }
  .gy-product__actions .gy-btn {
    min-height: 34px;
    padding-inline: 6px;
    font-size: 12px;
  }
  .gy-product__actions .gy-btn--icon {
    flex: 0 0 34px;
    min-width: 34px;
    padding: 0;
  }
}

/* --- 徽章 ---------------------------------------------------------------- */
.gy-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
  font-size: var(--gy-fs-xs);
  font-weight: 600;
  line-height: 1.6;
}

.gy-badge--success { background: var(--gy-success-soft); color: var(--gy-success); }
.gy-badge--danger { background: var(--gy-danger-soft); color: var(--gy-danger); }
.gy-badge--warning { background: var(--gy-warning-soft); color: var(--gy-warning); }

.gy-badge--float {
  position: absolute;
  top: var(--gy-s3);
  left: var(--gy-s3);
  z-index: 2;
  box-shadow: var(--gy-shadow-1);
}

/* --- 提示 ---------------------------------------------------------------- */
.alert,
.gy-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s3);
  padding: var(--gy-s4);
  margin-bottom: var(--gy-s4);
  border: 1px solid var(--gy-line);
  border-left-width: 4px;
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  font-size: var(--gy-fs-body);
}

/* 組件自己的 display 會蓋掉 UA 的 [hidden]，這裡把它補回來。
   用屬性選擇器提高特異度，不需要 !important。 */
.gy-alert[hidden],
.alert[hidden],
.gy-minicart__list[hidden],
.gy-drawer[hidden],
.gy-scrim[hidden] { display: none; }

.alert-success, .gy-alert--success { border-left-color: var(--gy-success); background: var(--gy-success-soft); color: #04502a; }
.alert-danger, .gy-alert--danger { border-left-color: var(--gy-danger); background: var(--gy-danger-soft); color: #7d2b31; }
.alert-warning, .gy-alert--warning { border-left-color: var(--gy-warning); background: var(--gy-warning-soft); color: #7a4c14; }
.alert-info, .gy-alert--info { border-left-color: var(--gy-brand); background: var(--gy-soft); color: var(--gy-ink-2); }

/* --- 麵包屑 -------------------------------------------------------------- */
.breadcrumb,
.gy-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2);
  max-width: var(--gy-content);
  margin: var(--gy-s4) auto var(--gy-s3);
  padding: 0 var(--gy-s4);
  list-style: none;
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-breadcrumb li { display: flex; align-items: center; gap: var(--gy-s2); }

.gy-breadcrumb li + li::before {
  content: "›";
  color: var(--gy-line-strong);
}

.gy-breadcrumb a { color: var(--gy-muted); }
.gy-breadcrumb a:hover { color: var(--gy-primary); }
.gy-breadcrumb li:last-child { color: var(--gy-ink-2); font-weight: 600; }

/* --- 頁面標題 ------------------------------------------------------------ */
.gy-page-head {
  max-width: var(--gy-content);
  margin: 0 auto var(--gy-s5);
  padding: 0 var(--gy-s4);
}

.gy-page-head h1 {
  margin-bottom: var(--gy-s2);
  padding-bottom: var(--gy-s3);
  border-bottom: 3px solid var(--gy-brand);
  display: inline-block;
}

.gy-page-head__lead {
  margin: 0;
  color: var(--gy-muted);
  max-width: 70ch;
}

/* --- 分頁 ---------------------------------------------------------------- */
.pagination,
.gy-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  justify-content: center;
  margin: var(--gy-s6) 0 0;
  padding: 0;
  list-style: none;
}

.gy-pagination a,
.gy-pagination span,
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--gy-h-lg);
  min-height: var(--gy-h-lg);
  padding: 0 var(--gy-s3);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

.gy-pagination a:hover,
.pagination a:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-pagination .active span,
.pagination .active span {
  background: var(--gy-primary);
  border-color: var(--gy-primary);
  color: #fff;
}

/* --- 頁籤 ---------------------------------------------------------------- */
.gy-tabs {
  display: flex;
  gap: var(--gy-s1);
  margin: 0 0 calc(var(--gy-s4) * -1);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gy-line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.gy-tabs button,
.gy-tabs a {
  display: block;
  padding: var(--gy-s3) var(--gy-s4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--gy-muted);
  font-family: inherit;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--gy-ease), border-color var(--gy-ease);
}

.gy-tabs button:hover,
.gy-tabs a:hover { color: var(--gy-primary); text-decoration: none; }

.gy-tabs [aria-selected="true"],
.gy-tabs .active a {
  color: var(--gy-primary);
  border-bottom-color: var(--gy-primary);
}

.gy-tabpanel { padding-top: var(--gy-s5); }

/* --- 手風琴 -------------------------------------------------------------- */
.gy-accordion { border: 1px solid var(--gy-line); border-radius: var(--gy-r-card); overflow: hidden; background: var(--gy-paper); }
.gy-accordion + .gy-accordion { margin-top: var(--gy-s3); }

.gy-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding: var(--gy-s4) var(--gy-s5);
  font-weight: 600;
  color: var(--gy-ink);
  cursor: pointer;
  list-style: none;
  transition: background var(--gy-ease);
}

.gy-accordion summary::-webkit-details-marker { display: none; }
.gy-accordion summary:hover { background: var(--gy-soft); }

.gy-accordion summary::after {
  content: "＋";
  color: var(--gy-primary);
  font-size: 18px;
  flex: none;
}

.gy-accordion[open] summary::after { content: "－"; }
.gy-accordion__body { padding: 0 var(--gy-s5) var(--gy-s5); color: var(--gy-ink-2); }

/* --- 表格 ---------------------------------------------------------------- */
.gy-table-wrap { overflow-x: auto; border-radius: var(--gy-r-card); border: 1px solid var(--gy-line); }

.table,
.gy-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gy-paper);
  font-size: var(--gy-fs-sm);
}

.gy-table th,
.gy-table td,
.table th,
.table td {
  padding: var(--gy-s3) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  text-align: left;
  vertical-align: middle;
}

.gy-table th,
.table th {
  background: var(--gy-soft);
  font-weight: 700;
  color: var(--gy-ink-2);
  white-space: nowrap;
}

.gy-table tr:last-child td { border-bottom: 0; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* --- 空狀態 -------------------------------------------------------------- */
.gy-empty {
  padding: var(--gy-s8) var(--gy-s5);
  text-align: center;
  color: var(--gy-muted);
}

.gy-empty__icon { font-size: 40px; color: var(--gy-line-strong); margin-bottom: var(--gy-s3); }
.gy-empty__title { font-size: var(--gy-fs-h3); color: var(--gy-ink); margin-bottom: var(--gy-s2); }
.gy-empty .gy-btn { margin-top: var(--gy-s4); }

/* --- 數量選擇 ------------------------------------------------------------ */
.gy-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-paper);
}

.gy-qty button {
  width: var(--gy-h-lg);
  border: 0;
  background: var(--gy-soft);
  color: var(--gy-primary);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-qty button:hover { background: var(--gy-brand-soft); }

.gy-qty input {
  /* 這站的起訂量常是 300／1000／10000，64px 放不下四位數會被截掉 */
  width: 78px;
  min-height: var(--gy-h-lg);
  border: 0;
  border-inline: 1px solid var(--gy-line);
  border-radius: 0;
  text-align: center;
  font-weight: 600;
}

.gy-qty input:focus { box-shadow: none; }

/* ==========================================================================
   5  HEADER
   ========================================================================== */
.gy-notice {
  position: relative;
  background: var(--gy-brand-soft);
  color: var(--gy-primary-active);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  text-align: center;
}

.gy-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s2);
  /* 右側留出關閉鈕的寬度，否則 320px 下文字會被壓到鈕底下 */
  padding: var(--gy-s2) 52px;
  min-height: 40px;
}

.gy-notice a { color: inherit; text-decoration: underline; }

.gy-notice__close {
  position: absolute;
  top: 50%;
  right: var(--gy-s2);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.gy-notice__close:hover { background: rgba(154, 75, 50, 0.12); }
.gy-notice[hidden] { display: none; }

.gy-header {
  position: relative;
  z-index: 50;
  background: var(--gy-dark);
  color: #fff;
}

.gy-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gy-s4);
  max-width: var(--gy-wide);
  margin-inline: auto;
  padding: var(--gy-s3) var(--gy-s4);
}

.gy-logo { flex: none; display: inline-flex; align-items: center; }
/* 白色橫式 logo 比例 4.54，用高度控制、寬度自適應 */
.gy-logo img { height: 44px; width: auto; max-width: 100%; }
.gy-logo:hover { text-decoration: none; }

@media (max-width: 991px) {
  .gy-logo img { height: 38px; }
}

/* --- 搜尋 ---------------------------------------------------------------- */
.gy-search {
  flex: 1;
  display: flex;
  min-width: 0;
  max-width: 620px;
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-paper);
}

.gy-search select {
  flex: none;
  width: auto;
  min-width: 92px;
  border: 0;
  border-right: 1px solid var(--gy-line);
  border-radius: 0;
  background: var(--gy-soft);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

.gy-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
}

.gy-search select:focus,
.gy-search input:focus { box-shadow: none; }

.gy-search button {
  flex: none;
  width: 52px;
  min-height: var(--gy-h-lg);
  border: 0;
  border-radius: 0;
  background: var(--gy-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-search button:hover { background: var(--gy-primary-hover); }

/* --- 頁首功能鈕 ---------------------------------------------------------- */
.gy-header__tools {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin-left: auto;
}

.gy-tool {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: var(--gy-h-lg);
  min-height: var(--gy-h-lg);
  padding: 0 var(--gy-s2);
  border: 0;
  border-radius: var(--gy-r-control);
  background: transparent;
  color: #fff;
  font-size: var(--gy-fs-xs);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-tool:hover { background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; }

/*
  LINE 詢問。深色頁首上用品牌綠標出圖示，讓它和左邊那組購物流程的按鈕
  一眼分得開 —— 那些是「自己下單」，這個是「問人」。
  不整顆塗綠：頁首有五顆按鈕，多一塊實心色會蓋過詢價車那顆主要轉換入口。
*/
.gy-tool--line .gy-tool__icon { color: #06c755; }
.gy-tool--line:hover { background: rgba(6, 199, 85, 0.18); }
.gy-tool__icon { font-size: 19px; }

.gy-tool__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

/* --- 主選單 -------------------------------------------------------------- */
.gy-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background: var(--gy-dark-2);
}

.gy-nav__list {
  display: flex;
  /*
     允許換行。這站有 8 個分類，名稱都很長（「依最低起訂量分類客製禮品印刷」
     一項就 15 個字），加上「印刷知識」之後整列最窄也要 1296px ——
     在 992～1366 的筆電上一定放不下。
     不能改用 overflow 捲動：那會把 .gy-nav__drop 這個絕對定位的下拉選單裁掉。
     換行後窄螢幕是兩列，所有分類都點得到，下拉也正常。
  */
  flex-wrap: wrap;
  justify-content: center;
  /*
     導覽列比內容區可以再寬一點 —— 它是整條深色橫幅，不是要限制行寬的內文。
     卡在 --gy-wide(1360px) 的話，1440 的視窗會白空 80px，
     整列剛好差幾 px 放不下而被迫換成兩排。
  */
  max-width: min(100%, max(var(--gy-wide), 1440px));
  margin-inline: auto;
  padding: 0 var(--gy-s4);
  list-style: none;
}

.gy-nav__item { position: relative; }

.gy-nav__link {
  display: flex;
  align-items: center;
  gap: var(--gy-s1);
  /*
     左右內距隨視窗縮放。這一列是 nowrap 的 flex，多一個項目就會把整列頂出
     視窗（加上「印刷知識」後在 1440 溢出 8px）—— 不能改成 overflow 捲動，
     那會把 .gy-nav__drop 這個絕對定位的下拉選單一起裁掉。
     用 clamp 讓寬螢幕維持原本的 16px，窄一點就自己收緊。
  */
  padding: var(--gy-s3) clamp(8px, 0.72vw, 16px);
  color: #fff;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--gy-ease), color var(--gy-ease);
}

.gy-nav__link:hover,
.gy-nav__item:focus-within > .gy-nav__link {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gy-on-dark-accent);
  text-decoration: none;
}

.gy-nav__caret { font-size: 10px; opacity: 0.75; }

.gy-nav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  padding: var(--gy-s2);
  margin: 0;
  list-style: none;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: 0 0 var(--gy-r-card) var(--gy-r-card);
  box-shadow: var(--gy-shadow-3);
  /* 用 visibility 而非 display，才能有淡入且仍可被鍵盤走到 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gy-ease), transform var(--gy-ease), visibility var(--gy-ease);
}

/*
  靠選單右側的下拉改成往左展開。

  下拉預設 left:0（貼齊父項左緣）＋ min-width:230px，在右側的項目就會
  推出視窗 —— 加上「依預算」之後 1280px 溢出 45px、1366px 溢出 5px，
  上線閘門的 horizontalOverflow 直接從 0 跳到 166 頁。

  取最後三項而不是只針對「依預算」：選單項目會隨分類增減而變動，
  綁死某一項的話下次加東西又會再壞一次。這幾項一定落在視窗右半邊，
  靠右對齊不會反而溢出左邊。
*/
.gy-nav__item:nth-last-child(-n + 3) > .gy-nav__drop {
  left: auto;
  right: 0;
  border-radius: var(--gy-r-card) 0 var(--gy-r-card) var(--gy-r-card);
}

.gy-nav__item:hover > .gy-nav__drop,
.gy-nav__item:focus-within > .gy-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gy-nav__drop a {
  display: block;
  padding: var(--gy-s2) var(--gy-s3);
  border-radius: var(--gy-r-control);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
}

.gy-nav__drop a:hover { background: var(--gy-soft); color: var(--gy-primary); text-decoration: none; }

/* --- 手機頁首 ------------------------------------------------------------ */
.gy-burger {
  display: none;
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  border: 0;
  border-radius: var(--gy-r-control);
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.gy-burger:hover { background: rgba(255, 255, 255, 0.12); }

.gy-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-3);
  transform: translateX(-100%);
  transition: transform 240ms var(--gy-ease);
}

.gy-drawer.is-open { transform: translateX(0); }

.gy-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding: var(--gy-s3) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-dark);
  color: #fff;
}

.gy-drawer__quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gy-s2);
  padding: var(--gy-s3) var(--gy-s4);
  background: var(--gy-soft);
  border-bottom: 1px solid var(--gy-line);
}

.gy-drawer__quick-item {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  padding: var(--gy-s2) var(--gy-s3);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  color: var(--gy-ink);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--gy-ease), color var(--gy-ease);
}

.gy-drawer__quick-item:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-drawer__quick-item .gy-icon {
  font-size: 16px;
  color: var(--gy-primary);
}

.gy-drawer__close {
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.gy-drawer__body { flex: 1; overflow-y: auto; padding: var(--gy-s3) 0; }

.gy-drawer__list { margin: 0; padding: 0; list-style: none; }

.gy-drawer__list a,
.gy-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  width: 100%;
  min-height: var(--gy-h-lg);
  padding: var(--gy-s3) var(--gy-s5);
  border: 0;
  background: none;
  color: var(--gy-ink);
  font-family: inherit;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.gy-drawer__list a:hover,
.gy-drawer__toggle:hover { background: var(--gy-soft); text-decoration: none; }

.gy-drawer__sub { margin: 0; padding: 0 0 var(--gy-s2); list-style: none; background: var(--gy-canvas); }
.gy-drawer__sub a { padding-left: var(--gy-s7); font-weight: 400; font-size: var(--gy-fs-sm); color: var(--gy-ink-2); }
.gy-drawer__sub[hidden] { display: none; }

.gy-drawer__foot {
  display: grid;
  gap: var(--gy-s2);
  padding: var(--gy-s4) var(--gy-s5);
  border-top: 1px solid var(--gy-line);
}

.gy-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(47, 33, 28, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gy-ease), visibility var(--gy-ease);
}

.gy-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 991px) {
  .gy-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
  }
  .gy-nav { display: none; }
  .gy-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .gy-logo {
    flex: 0 0 auto;
  }
  .gy-logo img {
    height: 32px;
    width: auto;
  }
  .gy-header__tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  /* 手機版頂部只保留高頻動作：詢價車、購物車、LINE；會員與收藏收進抽屜 */
  .gy-tool--account,
  .gy-tool--wishlist {
    display: none !important;
  }
  .gy-tool {
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    font-size: 0;
    gap: 0;
    border-radius: var(--gy-r-control);
  }
  .gy-tool__icon { font-size: 19px; }
  .gy-tool--line {
    background: rgba(6, 199, 85, 0.22);
  }
  /* 手機把搜尋放到第二列，現代膠囊圓角 */
  .gy-search {
    order: 10;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    height: 40px;
    margin-top: 2px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .gy-search input {
    font-size: 13px;
    padding-left: 14px;
  }
  .gy-search button {
    width: 44px;
    min-height: 40px;
    height: 40px;
    font-size: 15px;
  }
}

@media (min-width: 992px) {
  .gy-drawer, .gy-scrim { display: none; }

  /*
    桌機頁首改三欄 grid，讓搜尋真正置中。

    原本是 flex：logo 靠左、搜尋吃掉剩餘空間、功能鈕 margin-left:auto 推到最右，
    搜尋框的位置會隨 logo 與功能鈕的寬度浮動，跟下面那條置中的主選單對不齊，
    整條頁首看起來左右鬆散。

    minmax(0,1fr) auto minmax(0,1fr) 讓左右兩欄等寬，中間的搜尋框固定落在
    視覺中線上；再用 justify-self 把 logo 與功能鈕各自往中間收 ——
    邊緣不再貼死，和下方選單的節奏一致。

    寬度也對齊 .gy-nav__list：頁首卡在 --gy-wide(1360)、選單卻可以到 1440，
    兩條的左右邊界會差一截。
  */
}

/*
  三欄 grid 從 1120 才啟用：992–1119 時 1fr 側欄只剩 200px 上下，
  裝不下 252px 的功能鈕列，會往右溢出畫面 16–32px（全站水平捲軸）。
  這段寬度退回上面的 flex 版——搜尋框會縮短但一切都在畫面內。
*/
@media (min-width: 1120px) {
  .gy-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr);
    max-width: min(100%, max(var(--gy-wide), 1440px));
  }

  .gy-logo { justify-self: end; }

  .gy-search {
    justify-self: stretch;
    max-width: none;
  }

  .gy-header__tools {
    justify-self: start;
    margin-left: 0;
  }
}

/* ==========================================================================
   6  FOOTER
   ========================================================================== */
.gy-footer {
  margin-top: var(--gy-s8);
  background: var(--gy-dark);
  color: var(--gy-on-dark);
  font-size: var(--gy-fs-sm);
}

.gy-footer a { color: var(--gy-on-dark); }
.gy-footer a:hover { color: var(--gy-on-dark-accent); }

.gy-footer__grid {
  display: grid;
  gap: var(--gy-s6);
  max-width: var(--gy-content);
  margin-inline: auto;
  padding: var(--gy-s7) var(--gy-s4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gy-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.gy-footer h3 {
  margin-bottom: var(--gy-s3);
  color: #fff;
  font-size: var(--gy-fs-h4);
}

.gy-footer ul { margin: 0; padding: 0; list-style: none; }
.gy-footer li + li { margin-top: var(--gy-s2); }

.gy-footer__intro p { color: var(--gy-on-dark-muted); }

.gy-footer__cta {
  display: inline-flex;
  margin-top: var(--gy-s3);
}

/* 這顆的底是 --gy-primary，但 `.gy-footer a` 的 on-dark 色會蓋過來（3.80:1）。
   選擇器要同級才壓得住，白字可拉到 6.13:1。 */
.gy-footer a.gy-footer__cta,
.gy-footer a.gy-footer__cta:hover { color: #fff; }

.gy-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gy-on-dark-muted);
  font-size: var(--gy-fs-xs);
}

.gy-footer__bottom > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  max-width: var(--gy-content);
  margin-inline: auto;
  padding: var(--gy-s4);
}

/* 手機固定底部 CTA */
.gy-sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e8dfd7;
  box-shadow: 0 -4px 16px rgba(70, 42, 29, 0.08);
}

.gy-sticky-cta .gy-btn {
  flex: 1;
  min-height: 44px; /* WCAG/行動觸控最低 44px；42px 會被觸控尺寸稽核擋下 */
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--gy-r-control);
}

.gy-sticky-cta .gy-btn--line {
  flex: 0 0 auto;
  padding-inline: 18px;
}

/* 商品詳情頁專屬三鍵配置 */
.gy-sticky-cta--product .gy-btn--quote {
  flex: 1.3;
  background: var(--gy-primary);
  color: #fff;
  border: none;
}

.gy-sticky-cta--product .gy-btn--quote:hover {
  background: var(--gy-primary-hover);
}

.gy-sticky-cta--product .gy-btn--cart {
  flex: 1.1;
  background: #fff;
  color: var(--gy-primary);
  border: 1.5px solid var(--gy-primary);
}

.gy-sticky-cta--product .gy-btn--cart:hover {
  background: #fdf5ee;
}

.gy-sticky-cta--product .gy-btn--line {
  flex: 0 0 46px;
  padding: 0;
}

@media (max-width: 767px) {
  .gy-sticky-cta { display: flex; }
  body { padding-bottom: 76px; }
  html.route-checkout-cart body,
  html.route-checkout-checkout body,
  html.route-extension-module-quote_request-submit body {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   7  PAGES
   ========================================================================== */

/* --- 首頁 ---------------------------------------------------------------- */
.gy-hero {
  background: linear-gradient(135deg, var(--gy-soft), var(--gy-brand-soft));
}

.gy-hero__inner {
  display: grid;
  gap: var(--gy-s6);
  align-items: center;
  max-width: var(--gy-content);
  margin-inline: auto;
  padding: var(--gy-s8) var(--gy-s4);
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .gy-hero__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .gy-hero__inner {
    padding: var(--gy-s5) var(--gy-s4);
    gap: var(--gy-s4);
  }
  .gy-hero h1 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: var(--gy-s2);
  }
  .gy-hero__lead {
    font-size: 13px;
    line-height: 1.5;
  }
  .gy-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gy-s2);
    margin-bottom: var(--gy-s3);
  }
  .gy-hero__actions .gy-btn {
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;
  }
  .gy-hero__points {
    gap: var(--gy-s2) var(--gy-s3);
    font-size: 12px;
  }
}

.gy-hero__kicker {
  display: inline-block;
  margin-bottom: var(--gy-s3);
  color: var(--gy-primary);
  font-size: var(--gy-fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gy-hero h1 { margin-bottom: var(--gy-s4); }
.gy-hero h1 em { font-style: normal; color: var(--gy-primary); }
.gy-hero__lead { max-width: 46ch; color: var(--gy-ink-2); }

.gy-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gy-s3); margin-bottom: var(--gy-s4); }

.gy-hero__points { display: flex; flex-wrap: wrap; gap: var(--gy-s4); margin: 0; padding: 0; list-style: none; font-size: var(--gy-fs-sm); color: var(--gy-ink-2); }
.gy-hero__points li::before { content: "\2713  "; color: var(--gy-success); font-weight: 700; }

.gy-hero__media img { width: 100%; border-radius: var(--gy-r-feature); box-shadow: var(--gy-shadow-2); }

.gy-section__head { max-width: 720px; margin: 0 auto var(--gy-s6); text-align: center; }
.gy-section__head p { margin: 0; color: var(--gy-muted); }

.gy-section__kicker {
  display: block;
  margin-bottom: var(--gy-s2);
  /* --gy-brand 在 paper/canvas 上只有 3.2~3.4:1，未達 AA。primary 是 5.7~6.0 */
  color: var(--gy-primary);
  font-size: var(--gy-fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- 3 大選禮路徑 (Guided Sourcing Cards - Rich Visual) ---------------- */
.gy-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.gy-path-card {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 20px;
  background: var(--gy-paper);
  border: 1.5px solid #e8dfd7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(70, 42, 29, 0.04);
  text-decoration: none;
  transition: all var(--gy-ease);
  position: relative;
  overflow: hidden;
}

.gy-path-card:hover {
  border-color: var(--gy-primary);
  box-shadow: 0 12px 32px rgba(176, 111, 29, 0.14);
  transform: translateY(-4px);
  text-decoration: none;
}

.gy-path-card--highlight {
  background: linear-gradient(180deg, #ffffff 0%, #fdf8f4 100%);
  border-color: rgba(176, 111, 29, 0.4);
  box-shadow: 0 6px 20px rgba(176, 111, 29, 0.08);
}

.gy-path-card__media {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  border-radius: 10px;
  background: #fbf5ef;
  margin-bottom: 16px;
}

.gy-path-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.gy-path-card:hover .gy-path-card__media img {
  transform: scale(1.06);
}

.gy-path-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: rgba(47, 33, 28, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.gy-path-card__tag--highlight {
  background: rgba(192, 90, 48, 0.94);
}

.gy-path-card__body {
  flex: 1;
  margin-bottom: 16px;
}

.gy-path-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--gy-ink);
  transition: color var(--gy-ease);
}

.gy-path-card:hover .gy-path-card__title {
  color: var(--gy-primary);
}

.gy-path-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gy-ink-2);
}

.gy-path-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--gy-primary);
  border-top: 1px dashed #e8dfd7;
  padding-top: 14px;
  margin-top: auto;
  transition: all var(--gy-ease);
}

.gy-path-card__action .gy-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--gy-ease);
}

.gy-path-card:hover .gy-path-card__action {
  color: var(--gy-primary-hover);
}

.gy-path-card:hover .gy-path-card__action .gy-icon {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .gy-path-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gy-path-card__media {
    height: 180px;
  }
  .gy-path-card__title {
    font-size: 17px;
  }
}

/* --- 企業採購 5 大服務承諾 (B2B Trust Grid - Visual 3D Badges) -------- */
.gy-trust-wrap {
  width: 100%;
}

.gy-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.gy-trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px 20px;
  background: var(--gy-paper);
  border: 1.5px solid #e8dfd7;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(70, 42, 29, 0.03);
  transition: all var(--gy-ease);
  height: 100%;
}

.gy-trust-card:hover {
  border-color: rgba(176, 111, 29, 0.4);
  box-shadow: 0 10px 24px rgba(176, 111, 29, 0.12);
  transform: translateY(-3px);
}

.gy-trust-card__badge {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(70, 42, 29, 0.12);
  border: 2.5px solid #ffffff;
  background: #fbf5ee;
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.gy-trust-card__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gy-trust-card:hover .gy-trust-card__badge {
  transform: scale(1.08) rotate(2deg);
}

.gy-trust-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gy-trust-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gy-ink);
  line-height: 1.35;
}

.gy-trust-card__desc {
  margin: 0;
  font-size: 12px;
  color: var(--gy-ink-2);
  line-height: 1.55;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .gy-trust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .gy-trust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gy-trust-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    height: auto;
  }
  .gy-trust-card__badge {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
  }
  .gy-trust-card__title {
    font-size: 14px;
    margin-bottom: 3px;
  }
  .gy-trust-card__desc {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* --- 分類 / 列表 --------------------------------------------------------- */
.gy-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s3);
  padding: var(--gy-s3) var(--gy-s4);
  margin-bottom: var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
}

.gy-toolbar__count { color: var(--gy-muted); font-size: var(--gy-fs-sm); }
.gy-toolbar__spacer { margin-left: auto; }
.gy-toolbar select { width: auto; min-width: 150px; }

.gy-refine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  margin-bottom: var(--gy-s5);
  padding: 0;
  list-style: none;
}

.gy-refine a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gy-h-sm);
  padding: 0 var(--gy-s4);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  background: var(--gy-paper);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

.gy-refine a:hover { border-color: var(--gy-primary); color: var(--gy-primary); text-decoration: none; }

/* --- 商品頁 -------------------------------------------------------------- */
.gy-product-layout {
  display: grid;
  gap: var(--gy-s6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 992px) {
  .gy-product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 主圖現在是 <button>（點開燈箱），瀏覽器預設的 padding/border 要清掉 */
.gy-gallery__main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  overflow: hidden;
  background: var(--gy-paper);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}

/* 放大提示。不做 hover 才出現 —— 觸控裝置沒有 hover，那樣等於藏起來 */
.gy-gallery__zoom {
  position: absolute;
  right: var(--gy-s3);
  bottom: var(--gy-s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--gy-r-pill);
  background: rgba(47, 33, 28, 0.72);
  color: #fff;
  transition: background var(--gy-ease);
}

.gy-gallery__main:hover .gy-gallery__zoom { background: rgba(47, 33, 28, 0.9); }

/*
   捲過主圖之後讓圖跟著浮動，右欄的規格、選項、階梯價都很長，
   使用者往下讀時還看得到自己在買的東西。
   只在桌機雙欄時做：手機是單欄，圖釘住會把內容擠掉。
   top 要讓開頁首那條精簡列（.gy-minibar 約 56px）再加一點呼吸空間。
*/
@media (min-width: 992px) {
  /*
     sticky 的對象改成整個左欄（.gy-product-side）而不是只有圖庫：
     圖庫下面還有 B2B 看板與標籤，只黏圖庫的話那兩塊會捲到它上面重疊。
  */
  .gy-product-layout > .gy-product-side {
    position: sticky;
    top: var(--gy-sticky-top, 76px);
    align-self: start;
  }
}

.gy-gallery__main img { width: 100%; height: 100%; object-fit: contain; }

/* 縮圖排成一列橫捲。原本是自動換行的網格 —— 這站有商品放到 20 幾張圖，
   換行網格會長成一大片，把購買區整個推出第一屏。 */
.gy-gallery__strip {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin-top: var(--gy-s3);
}

.gy-gallery__thumbs {
  display: flex;
  gap: var(--gy-s2);
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 2px;          /* 留給選取邊框，不然捲動時會被裁掉 */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* 有左右鍵了，捲軸只會讓這一列看起來很吵 */
}

.gy-gallery__thumbs::-webkit-scrollbar { display: none; }

.gy-gallery__thumbs > li {
  flex: 0 0 72px;
  scroll-snap-align: start;
}

/* 左右鍵。圖少到不需要捲時 giftyou-gallery.js 會把它們 hidden 掉 */
.gy-gallery__nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-ink-2);
  cursor: pointer;
  transition: background var(--gy-ease), border-color var(--gy-ease);
}

.gy-gallery__nav:hover:not(:disabled) { background: var(--gy-soft); border-color: var(--gy-line-strong); }
.gy-gallery__nav:disabled { opacity: 0.35; cursor: default; }

/* sprite 只有一個 chevron-down，左右各轉一次 */
.gy-gallery__nav--prev .gy-icon { transform: rotate(90deg); }
.gy-gallery__nav--next .gy-icon { transform: rotate(-90deg); }

.gy-gallery__thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.gy-gallery__thumbs button[aria-current="true"] { border-color: var(--gy-primary); }
.gy-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.gy-price { display: flex; align-items: baseline; gap: var(--gy-s3); margin-bottom: var(--gy-s4); }
.gy-price__now { font-size: 30px; font-weight: 700; color: var(--gy-primary); font-family: var(--gy-font-serif); }
.gy-price__was { color: var(--gy-muted); text-decoration: line-through; }

.gy-spec {
  display: grid;
  gap: var(--gy-s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--gy-s4);
  margin-bottom: var(--gy-s5);
  background: var(--gy-soft);
  border-radius: var(--gy-r-card);
}

.gy-spec__label { display: block; font-size: var(--gy-fs-xs); color: var(--gy-muted); }
.gy-spec__value { display: block; font-weight: 700; color: var(--gy-ink); }

.gy-options { display: grid; gap: var(--gy-s4); margin-bottom: var(--gy-s5); }

.gy-buybox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  /*
     底部對齊，不是置中。

     數量那一組是「標籤在上、控制項在下」共 75px，按鈕只有 50px；
     置中會讓 75px 的整組垂直居中，控制項因此比按鈕低 13px ——
     這就是看起來沒對齊的原因。改成 flex-end 讓兩者的底線齊平。
  */
  align-items: flex-end;
  padding: var(--gy-s4);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
}

.gy-buybox .gy-btn { flex: 1; min-width: 150px; }

/* --- 帳號 / 表單頁 ------------------------------------------------------- */
.gy-form-shell {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--gy-s6);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
}

.gy-form-grid { display: grid; gap: var(--gy-s5); grid-template-columns: 1fr; }

@media (min-width: 768px) { .gy-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gy-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--gy-s5);
  padding-top: var(--gy-s5);
  border-top: 1px solid var(--gy-line);
}

/* --- 內容頁 -------------------------------------------------------------- */
.gy-prose { max-width: 72ch; color: var(--gy-ink-2); }
.gy-prose h2 { margin-top: var(--gy-s7); }
.gy-prose h3 { margin-top: var(--gy-s6); }
.gy-prose img { border-radius: var(--gy-r-card); }
.gy-prose blockquote {
  margin: var(--gy-s5) 0;
  padding: var(--gy-s4) var(--gy-s5);
  border-left: 4px solid var(--gy-brand);
  background: var(--gy-soft);
  border-radius: 0 var(--gy-r-control) var(--gy-r-control) 0;
  color: var(--gy-ink-2);
}
.gy-prose table { width: 100%; }

/* --- SVG 圖示 ------------------------------------------------------------ */
/*
   全站圖示統一 1em 見方、吃 currentColor，跟著文字色與字級走。
   不用 emoji：跨平台長相不一致、無法上品牌色、基線也對不齊。
*/
.gy-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  display: inline-block;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}

.gy-tool__icon .gy-icon { width: 22px; height: 22px; }
.gy-burger .gy-icon,
.gy-drawer__close .gy-icon,
.gy-notice__close .gy-icon { width: 20px; height: 20px; }
.gy-search button .gy-icon { width: 19px; height: 19px; }
.gy-nav__caret .gy-icon { width: 14px; height: 14px; }
.gy-path__icon .gy-icon { width: 26px; height: 26px; }
.gy-trust__icon .gy-icon { width: 24px; height: 24px; }
.gy-path__arrow .gy-icon { width: 18px; height: 18px; }
.gy-empty__icon .gy-icon { width: 40px; height: 40px; }
.gy-minicart__remove .gy-icon { width: 16px; height: 16px; }
.gy-btn .gy-icon { width: 18px; height: 18px; }

/* LINE 商標是實心字符，不能套 stroke */
.gy-icon--fill { fill: currentColor; stroke: none; }
/* --- 首頁分類展示區塊 ---------------------------------------------------- */
.gy-showcase {
  padding-block: var(--gy-s7);
}

.gy-showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gy-s3);
  margin-bottom: var(--gy-s5);
  padding-bottom: var(--gy-s3);
  border-bottom: 1px solid var(--gy-line);
}

.gy-showcase__head h2 {
  margin: 0;
}

.gy-showcase__more {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.gy-showcase__more:hover {
  text-decoration: none;
}

/* 箭頭在 hover 時往前挪一點，暗示「還有更多」 */
.gy-showcase__more .gy-icon {
  transition: transform var(--gy-ease);
}

.gy-showcase__more:hover .gy-icon {
  transform: translateX(3px);
}
/* --- 頁首購物車（結構受 common.js 約束，見 cart.twig 抬頭） -------------- */
.gy-minicart { position: relative; }

/*
  common.js 加入購物車成功後會把整顆按鈕的內容換成
  <span id="cart-total"><i class="fa fa-shopping-cart"></i> 1 件商品</span>。
  站上沒有 FontAwesome，所以那顆 <i> 自己畫不出東西 ——
  用 mask 把品牌色塗進購物車形狀，換掉後仍然有圖示、仍然吃 currentColor。
*/
#cart > button #cart-total {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  font-size: var(--gy-fs-xs);
  line-height: 1.25;
}

#cart > button .fa {
  width: 22px;
  height: 22px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--gy-cart-glyph) center / contain no-repeat;
  mask: var(--gy-cart-glyph) center / contain no-repeat;
}

:root {
  --gy-cart-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

.gy-minicart__list {
  position: absolute;
  top: calc(100% + var(--gy-s2));
  right: 0;
  z-index: 70;
  width: min(92vw, 360px);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--gy-s3) var(--gy-s4);
  list-style: none;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-3);
  color: var(--gy-ink);
  text-align: left;
}

.gy-minicart__list[hidden] { display: none; }

.gy-minicart__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s3);
  padding: var(--gy-s3) 0;
  border-bottom: 1px solid var(--gy-line);
}

.gy-minicart__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-soft);
}

.gy-minicart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.gy-minicart__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.gy-minicart__name {
  color: var(--gy-ink);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  line-height: 1.45;
}

.gy-minicart__opt,
.gy-minicart__qty { font-size: var(--gy-fs-xs); color: var(--gy-muted); }

.gy-minicart__remove {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gy-muted);
  cursor: pointer;
  transition: background var(--gy-ease), color var(--gy-ease);
}

.gy-minicart__remove:hover { background: var(--gy-danger-soft); color: var(--gy-danger); }

.gy-minicart__totals { padding: var(--gy-s3) 0; border-bottom: 1px solid var(--gy-line); }
.gy-minicart__totals dl { margin: 0; font-size: var(--gy-fs-sm); }
.gy-minicart__totals > dl > div { display: flex; justify-content: space-between; gap: var(--gy-s3); }
.gy-minicart__totals dt { margin: 0; color: var(--gy-muted); }
.gy-minicart__totals dd { margin: 0; font-weight: 700; }
.gy-minicart__totals > dl > div:last-child dd { color: var(--gy-primary); font-size: 16px; }

.gy-minicart__actions { display: grid; gap: var(--gy-s2); padding-top: var(--gy-s3); }
.gy-minicart__empty { padding: var(--gy-s5) 0; text-align: center; color: var(--gy-muted); }

/* ==========================================================================
   account（由 parts/account.css 併入）
   ========================================================================== */
/*!
 * GiftYou —— 會員帳號區樣式（parts/account.css）
 *
 * 由整合者併入 giftyou.css。這裡只放 giftyou.css 現成組件真的做不到的東西：
 * 帳號總覽的分組導覽、訂單／詢價單詳情的資訊面板、表單頁的欄位骨架、
 * 以及地址卡片列表。所有值一律走 token，無 !important。
 *
 * 命名：帳號區專屬一律 .gy-acct-*，避免和其他組別的組件撞名。
 * 例外是 THEME-GUIDE 已經指定的 .gy-account-nav / .gy-form-shell 系列，
 * 這裡只補它們缺的修飾子。
 */

/* --- 帳號總覽（account.twig） -------------------------------------------- */
/*
   總覽本身就是一張「目錄」，用卡片分組比長長一串 ul 好掃。
   一欄 → 兩欄 → 三欄，靠 auto-fit 自己決定，不必寫三段 media query。
*/
.gy-acct-hub {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gy-acct-hub { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.gy-acct-group__title {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin: 0 0 var(--gy-s3);
  padding: 0 var(--gy-s3);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink);
}

.gy-acct-group__title .gy-icon {
  width: 20px;
  height: 20px;
  color: var(--gy-primary);
}

/*
   導覽項目本身不放圖示：帳號功能名稱（編輯帳號／我的密碼／電子報）沒有一眼就
   看懂的通用圖示，硬配只會變成裝飾。圖示只出現在群組標題上。
   這裡只補一件事：連結撐到 44px 才是合格的觸控目標。用修飾子而不是覆寫
   .gy-account-nav a，避免和 giftyou.css 同特異性互相打架。
*/
.gy-account-nav--tap a {
  display: flex;
  align-items: center;
  min-height: var(--gy-h-lg);
}

/* --- 資訊面板（訂單／退貨／定期付款／詢價單 詳情） ----------------------- */
.gy-acct-panel {
  margin-bottom: var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
  overflow: hidden;
}

.gy-acct-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s3);
  padding: var(--gy-s3) var(--gy-s5);
  background: var(--gy-soft);
  border-bottom: 1px solid var(--gy-line);
}

.gy-acct-panel__title {
  margin: 0;
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink);
}

.gy-acct-panel__body { padding: var(--gy-s5); }

/* 面板裡直接塞表格時不要再加一層內距，讓表格自己貼齊面板邊 */
.gy-acct-panel > .gy-table-wrap {
  border: 0;
  border-radius: 0;
}

/* --- 名稱／值清單 -------------------------------------------------------- */
/*
   訂單編號、日期、付款方式這類資料是「標籤 + 值」，語意上是 dl 不是 table。
   原生模板用 <table> 排版，手機上會被撐出橫向捲動。
*/
.gy-acct-def {
  display: grid;
  gap: var(--gy-s3);
  margin: 0;
}

.gy-acct-def > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s1) var(--gy-s3);
}

.gy-acct-def dt {
  flex: none;
  min-width: 6em;
  margin: 0;
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

.gy-acct-def dd {
  margin: 0;
  color: var(--gy-ink);
  overflow-wrap: anywhere;
}

/* --- 兩欄切分（付款地址／配送地址、詢價資訊／狀態） ---------------------- */
.gy-acct-cols {
  display: grid;
  gap: var(--gy-s5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gy-acct-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gy-acct-cols__label {
  margin: 0 0 var(--gy-s2);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  font-weight: 700;
}

.gy-acct-cols address {
  margin: 0;
  font-style: normal;
  color: var(--gy-ink);
  line-height: 1.7;
}

/* --- 表單骨架 ------------------------------------------------------------ */
/* 欄位多的表單（註冊、地址）給寬一點，兩欄排起來才不會擠成細長條 */
.gy-form-shell--wide { max-width: 940px; }

.gy-acct-lead {
  margin: 0 0 var(--gy-s5);
  color: var(--gy-muted);
}

.gy-acct-fieldset {
  min-width: 0;
  margin: 0 0 var(--gy-s6);
  padding: 0;
  border: 0;
}

.gy-acct-fieldset:last-of-type { margin-bottom: 0; }

.gy-acct-fieldset__legend {
  width: 100%;
  margin-bottom: var(--gy-s4);
  padding: 0 0 var(--gy-s2);
  border-bottom: 1px solid var(--gy-line);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  font-weight: 700;
  color: var(--gy-ink);
}

.gy-acct-field { min-width: 0; }

/* 網址、備註這類長欄位在兩欄格線裡跨滿整列 */
@media (min-width: 768px) {
  .gy-acct-field--full { grid-column: 1 / -1; }
}

.gy-acct-hint {
  display: block;
  margin-top: var(--gy-s1);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

/* --- 選項群（radio / checkbox） ------------------------------------------ */
.gy-acct-choices {
  display: grid;
  gap: var(--gy-s2);
  margin: 0;
  padding: 0;
  border: 0;
}

.gy-acct-choices--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3) var(--gy-s5);
}

/* fieldset 的 legend 要長得跟一般 label 一樣，才不會突兀 */
.gy-acct-choices__legend {
  margin-bottom: var(--gy-s2);
  font-weight: 600;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

/* 每個選項都是觸控目標，撐到 44px 才好點 */
.gy-acct-choices .gy-check { min-height: var(--gy-h-lg); align-items: center; }

/* 同意條款那一列：文字和 checkbox 同一行，按鈕排右邊 */
.gy-acct-agree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2);
  margin-right: auto;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.gy-acct-agree input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--gy-primary);
}

/* --- 表格輔助 ------------------------------------------------------------ */
/* 金額、數量對齊小數位才好比較 */
.gy-acct-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gy-acct-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gy-s2);
  justify-content: flex-end;
}

.gy-acct-actions .gy-btn { white-space: nowrap; }

/* 商品名底下的選項是次要資訊，壓低權重 */
.gy-acct-optlist {
  display: block;
  margin: var(--gy-s1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  line-height: 1.6;
}

.gy-acct-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--gy-r-control);
  border: 1px solid var(--gy-line);
  object-fit: cover;
  background: var(--gy-soft);
}

.gy-table tfoot td {
  background: var(--gy-soft);
  font-weight: 700;
  color: var(--gy-ink);
}

/* --- 列表頁頁尾（分頁 + 筆數） ------------------------------------------- */
.gy-acct-listmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  margin-top: var(--gy-s4);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* --- 地址列表 ------------------------------------------------------------ */
/*
   原生用表格排地址，手機上一定爆版。地址是「一筆一張卡」，用卡片才對。
*/
.gy-acct-address {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gy-acct-address { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.gy-acct-address__card {
  display: flex;
  flex-direction: column;
  gap: var(--gy-s4);
  padding: var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
}

.gy-acct-address__body {
  flex: 1;
  margin: 0;
  font-style: normal;
  color: var(--gy-ink-2);
  line-height: 1.8;
}

.gy-acct-address__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
}

.gy-acct-address__actions .gy-btn { flex: 1; }

/* 收藏清單的商品卡：主要動作要撐滿，旁邊的移除鈕維持正方形。
   giftyou.css 的 .gy-product__actions .gy-btn 是 flex:1，會把圓鈕拉長成長條。
   移除是破壞性動作，觸控目標保持 44×44，別讓人誤點。 */
.gy-product__actions .gy-btn--icon {
  flex: none;
  width: var(--gy-h-lg);
  min-height: var(--gy-h-lg);
}

/* --- 頁尾動作列 ---------------------------------------------------------- */
/* 列表頁的「返回／繼續購物」，跟 .gy-form-actions 同一套視覺但可左右分置 */
.gy-acct-pagefoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--gy-s6);
  padding-top: var(--gy-s5);
  border-top: 1px solid var(--gy-line);
}

.gy-acct-pagefoot__spacer { margin-right: auto; }

/* ==========================================================================
   checkout（由 parts/checkout.css 併入）
   ========================================================================== */
@charset "UTF-8";
/* ==========================================================================
   GiftYou — 購物車 / 結帳流程（checkout 組）
   合併對象：stylesheet/giftyou.css（本檔為 parts/，由整合者合併，不要直接改 giftyou.css）

   涵蓋頁面
     checkout/cart      購物車
     checkout/checkout  結帳（多步驟 accordion）
     checkout/success   訂單完成
     checkout/failure   付款失敗
   以及被塞進結帳 accordion 的 partial：login / payment_method /
   shipping_method / confirm，還有「沒改寫、fallback 到 default 主題」的
   register / guest / guest_shipping / payment_address / shipping_address。

   ⚠️ 為什麼這裡有一整段 Bootstrap3 相容層
     giftyou 主題的 header.twig 沒有載入 bootstrap.css，但結帳流程的 DOM
     （panel accordion、.form-horizontal 地址表單、運費試算 modal）是 OpenCart
     原生 markup，仍然依賴 .collapse / .col-sm-* / .input-group / .modal 這些
     class 的行為。少了它們不是變醜而是「全部展開、選不到、送不出去」。
     所以下面只補「結帳流程用得到的最小集合」，而且全部限定在
     #checkout-cart / #checkout-checkout / #modal-shipping / #modal-agree 之下，
     不會外溢到別組的頁面。
   ========================================================================== */

/* ==========================================================================
   0  BOOTSTRAP3 相容層（僅結帳流程）
   ========================================================================== */

/* --- collapse ------------------------------------------------------------
   Bootstrap 的 class 流轉是 .collapse → .collapsing → .collapse.in，
   展開中只有 .collapsing，所以 display:none 不會卡住動畫。 */
#checkout-cart .collapse,
#checkout-checkout .collapse { display: none; }

#checkout-cart .collapse.in,
#checkout-checkout .collapse.in { display: block; }

#checkout-cart .collapsing,
#checkout-checkout .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height var(--gy-ease);
}

/* --- 浮動與清除 ---------------------------------------------------------- */
#checkout-cart .pull-right,
#checkout-checkout .pull-right { float: right; }

#checkout-cart .pull-left,
#checkout-checkout .pull-left { float: left; }

#checkout-cart .clearfix::after,
#checkout-checkout .clearfix::after,
#checkout-cart .buttons::after,
#checkout-checkout .buttons::after {
  content: "";
  display: table;
  clear: both;
}

#checkout-checkout .buttons { margin-top: var(--gy-s5); }

/* --- 水平表單（payment_address / shipping_address / 運費試算） -----------
   這些檔沒有改寫，會 fallback 到 default 主題，結構是
   .form-group > label.col-sm-2.control-label + .col-sm-10 > input。
   這兩層不能拆：checkout 的 JS 用 input.parent().parent() 找 .form-group
   來掛 required / has-error。這裡只負責讓它在窄螢幕不要爛版。 */
#checkout-cart .form-horizontal .form-group,
#checkout-checkout .form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: var(--gy-s4);
}

/* guest.twig / register.twig 是直式表單（label 在上），不套上面的 flex，
   讓它沿用 giftyou.css 的 .form-group 就好。 */

@media (max-width: 767px) {
  #checkout-cart .form-horizontal .col-sm-2,
  #checkout-cart .form-horizontal .col-sm-10,
  #checkout-checkout .panel-body .col-sm-2,
  #checkout-checkout .panel-body .col-sm-10 { width: 100%; }
}

/* 必填星號。default 模板是 <div class="form-group required">，
   星號原本由 bootstrap 主題畫，這裡自己補。 */
#checkout-cart .form-group.required > .control-label::after,
#checkout-checkout .form-group.required > .control-label::after,
#checkout-checkout .form-group.required > label::after {
  content: "*";
  margin-left: 2px;
  color: var(--gy-danger);
}

#checkout-cart .has-error .form-control,
#checkout-checkout .has-error .form-control { border-color: var(--gy-danger); }

/* --- radio / checkbox 區塊 ------------------------------------------------ */
#checkout-cart .radio,
#checkout-cart .checkbox,
#checkout-checkout .radio,
#checkout-checkout .checkbox { margin-block: var(--gy-s2); }

#checkout-cart .radio > label,
#checkout-cart .checkbox > label,
#checkout-checkout .radio > label,
#checkout-checkout .checkbox > label {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
  margin-bottom: 0;
  font-weight: 400;
  font-size: var(--gy-fs-body);
  color: var(--gy-ink-2);
  cursor: pointer;
}

#checkout-cart .radio input,
#checkout-cart .checkbox input,
#checkout-checkout .radio input,
#checkout-checkout .checkbox input,
#checkout-checkout .gy-step__agree input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: none;
  margin: 4px 0 0;
  accent-color: var(--gy-primary);
}

/* --- input-group（優惠券輸入框＋按鈕、日期選擇） ------------------------- */
#checkout-cart .input-group,
#checkout-checkout .input-group { display: flex; }

#checkout-cart .input-group > .form-control,
#checkout-checkout .input-group > .form-control {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

#checkout-cart .input-group-btn,
#checkout-checkout .input-group-btn { display: flex; flex: none; }

#checkout-cart .input-group-btn > .btn,
#checkout-checkout .input-group-btn > .btn {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* --- 表格容器 ------------------------------------------------------------ */
#checkout-cart .table-responsive,
#checkout-checkout .table-responsive { overflow-x: auto; }

/* --- 關閉鈕（common.js / 各模組注入的 alert 用的是 .close） --------------- */
#checkout-cart .close,
#checkout-checkout .close {
  width: var(--gy-h-sm);
  height: var(--gy-h-sm);
  margin-left: auto;
  flex: none;
  border: 0;
  border-radius: var(--gy-r-pill);
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}

#checkout-cart .close:hover,
#checkout-checkout .close:hover { opacity: 1; }

/* --- 彈窗 modal -----------------------------------------------------------
   兩個來源：
     #modal-shipping  extension/total/shipping.twig 的運費試算結果
     #modal-agree     common.js 點「同意條款」連結時載入的條款內容
   兩者都是用 $('body').append() 塞到 body，掛在 #checkout-* 底下抓不到，
   只能用 modal 自己的 id 限定範圍（不寫成 .modal 是為了不外溢到別組頁面）。 */
#modal-agree,
#modal-shipping {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow-y: auto;
  /* 遮罩沿用 giftyou.css .gy-scrim 的同一組 rgba（目前沒有遮罩 token，
     要新增 --gy-scrim 的話這裡跟 .gy-scrim 一起換） */
  background: rgba(47, 33, 28, 0.5);
}

#modal-agree.in,
#modal-shipping.in { display: block; }

#modal-agree .modal-dialog,
#modal-shipping .modal-dialog {
  width: 100%;
  max-width: 520px;
  margin: var(--gy-s7) auto;
  padding-inline: var(--gy-s4);
}

#modal-agree .modal-content,
#modal-shipping .modal-content {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-3);
  overflow: hidden;
}

#modal-agree .modal-header,
#modal-shipping .modal-header {
  padding: var(--gy-s4) var(--gy-s5);
  border-bottom: 1px solid var(--gy-line);
}

#modal-agree .modal-title,
#modal-shipping .modal-title {
  margin: 0;
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h3);
  color: var(--gy-ink);
}

#modal-agree .modal-body,
#modal-shipping .modal-body {
  padding: var(--gy-s5);
  /* 條款內容可能很長，讓它在 modal 內自己捲，不要把 footer 的按鈕推出畫面 */
  max-height: 60vh;
  overflow-y: auto;
  color: var(--gy-ink-2);
}

#modal-agree .modal-body p { margin-block: 0 var(--gy-s3); }

#modal-agree .modal-footer,
#modal-shipping .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--gy-s3);
  padding: var(--gy-s4) var(--gy-s5);
  border-top: 1px solid var(--gy-line);
  background: var(--gy-soft);
}

#modal-agree .radio > label,
#modal-shipping .radio > label {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
  font-weight: 400;
  cursor: pointer;
}

#modal-agree .radio input,
#modal-shipping .radio input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 4px 0 0;
  flex: none;
  accent-color: var(--gy-primary);
}

/* 有 modal 開著時 body 由 Bootstrap 加上 .modal-open */
body.modal-open { overflow: hidden; }

/* ==========================================================================
   1  購物車頁
   ========================================================================== */

.gy-cart {
  display: grid;
  gap: var(--gy-s5);
  align-items: start;
  margin-bottom: var(--gy-s7);
}

/* 桌機才拆兩欄。摘要欄寬度刻意固定，金額欄位不該隨品名長短跳動。 */
@media (min-width: 992px) {
  .gy-cart { grid-template-columns: minmax(0, 1fr) 320px; }
}

.gy-cart__items { min-width: 0; }

/* --- 品項表格 ------------------------------------------------------------ */
.gy-cart-table { font-size: var(--gy-fs-body); }

.gy-cart-table th { font-size: var(--gy-fs-sm); }

.gy-cart-table td { vertical-align: top; }

.gy-cart-table__img { width: 96px; }

.gy-cart-thumb {
  display: block;
  width: 80px;
  height: 80px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-soft);
}

.gy-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gy-cart-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gy-brand);
}

.gy-cart-thumb--icon .gy-icon { width: 28px; height: 28px; }

.gy-cart-name {
  display: inline-block;
  font-weight: 600;
  color: var(--gy-ink);
}

.gy-cart-name:hover { color: var(--gy-primary); text-decoration: none; }

.gy-cart-opts {
  margin: var(--gy-s1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--gy-fs-xs);
  line-height: 1.6;
  color: var(--gy-muted);
}

.gy-cart-note {
  margin: var(--gy-s1) 0 0;
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-cart-model {
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-cart-total { font-weight: 700; color: var(--gy-ink); white-space: nowrap; }

/* --- 數量 + 移除 ---------------------------------------------------------- */
.gy-cart-qty {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
}

.gy-cart-qty__fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: var(--gy-h-lg);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: var(--gy-soft);
  font-weight: 600;
  color: var(--gy-muted);
}

/* 表格內的數量選擇器縮一號，否則一列會太高 */
.gy-cart-qty .gy-qty button { width: var(--gy-h-md); }
.gy-cart-qty .gy-qty input { width: 52px; min-height: var(--gy-h-md); }

.gy-cart-remove {
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--gy-r-control);
  background: transparent;
  color: var(--gy-muted);
  cursor: pointer;
  transition: background var(--gy-ease), color var(--gy-ease), border-color var(--gy-ease);
}

.gy-cart-remove:hover {
  background: var(--gy-danger-soft);
  border-color: var(--gy-danger);
  color: var(--gy-danger);
}

.gy-cart-remove .gy-icon { width: 18px; height: 18px; }

/* --- 更新數量 ------------------------------------------------------------ */
.gy-cart__update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s3);
  margin-top: var(--gy-s4);
}

.gy-cart__update-hint {
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

/* 送出中：giftyou.css 已定義 .gy-btn.is-loading 的 opacity/cursor，
   這裡只補「不要再接收點擊」。 */
.gy-cart__update .gy-btn.is-loading { pointer-events: none; }

/* --- 優惠券 / 禮券 / 紅利 / 運費試算（extension/total 的 panel） ---------
   {{ module }} 是模組 controller 產生好的 Bootstrap panel 字串，模板改不到，
   只能從外面把它畫成 gy 的手風琴。 */
.gy-cart__extras { margin-top: var(--gy-s6); }

.gy-cart__extras-title {
  margin: 0 0 var(--gy-s3);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h3);
  color: var(--gy-ink);
}

.gy-cart-modules .panel + .panel { margin-top: var(--gy-s3); }

.gy-cart-modules .panel-heading {
  padding: 0;
  border-bottom: 0;
}

.gy-cart-modules .panel-title {
  margin: 0;
  font-size: var(--gy-fs-body);
}

.gy-cart-modules .panel-title > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  width: 100%;
  min-height: var(--gy-h-lg);
  padding: var(--gy-s4) var(--gy-s5);
  color: var(--gy-ink);
  font-family: var(--gy-font-serif);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.gy-cart-modules .panel-title > a:hover,
.gy-step .panel-title > a:hover {
  background: var(--gy-soft);
  color: var(--gy-primary);
  text-decoration: none;
}

/* JS 換上去的 <a> 尾端那顆 chevron（原本是 fa-caret-down，已改成 sprite） */
.gy-cart-modules .panel-title > a .gy-icon,
.gy-step .panel-title > a .gy-icon {
  width: 18px;
  height: 18px;
  color: var(--gy-muted);
  transition: transform var(--gy-ease);
}

.gy-cart-modules .panel-title > a[aria-expanded="true"] .gy-icon,
.gy-step .panel-title > a[aria-expanded="true"] .gy-icon {
  transform: rotate(180deg);
}

.gy-cart-modules .panel-body,
.gy-checkout .panel-body { border-top: 1px solid var(--gy-line); }

/* --- 金額摘要 ------------------------------------------------------------ */
.gy-cart-summary {
  padding: var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-1);
}

@media (min-width: 992px) {
  /* 品項多的時候，結帳鈕要一直看得到。top 要讓開 .gy-slim 那條 60px 的精簡列 */
  .gy-cart__summary { position: sticky; top: var(--gy-sticky-top, 76px); }
}

.gy-cart-summary__title {
  margin: 0 0 var(--gy-s4);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink);
}

.gy-cart-summary__totals { margin: 0 0 var(--gy-s5); }

.gy-cart-summary__totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding-block: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.gy-cart-summary__totals dt { margin: 0; font-weight: 400; }
.gy-cart-summary__totals dd { margin: 0; font-weight: 600; white-space: nowrap; }

.gy-cart-summary__totals > div.is-grand {
  margin-top: var(--gy-s2);
  padding-top: var(--gy-s3);
  border-top: 1px solid var(--gy-line);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink);
}

.gy-cart-summary__totals > div.is-grand dt { font-weight: 600; }
.gy-cart-summary__totals > div.is-grand dd { color: var(--gy-primary); font-weight: 700; }

/* 主 CTA 與次要動作要有明確層級：一個是實心大按鈕，一個是純文字連結 */
.gy-cart-summary__back {
  display: block;
  margin-top: var(--gy-s3);
  text-align: center;
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-cart-summary__back:hover { color: var(--gy-primary); }

/* --- 手機：表格改卡片 ----------------------------------------------------
   .gy-table-wrap 本身可橫捲，但購物車欄位多，橫捲會讓「數量／移除」跑到畫面外，
   所以窄螢幕直接改成一列一張卡。 */
@media (max-width: 767px) {
  .gy-cart-table thead,
  .gy-confirm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gy-cart-table,
  .gy-cart-table tbody,
  .gy-cart-table tr,
  .gy-cart-table td,
  .gy-confirm-table,
  .gy-confirm-table tbody,
  .gy-confirm-table tfoot,
  .gy-confirm-table tr,
  .gy-confirm-table td { display: block; width: 100%; }

  .gy-cart-table tr {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--gy-s2) var(--gy-s4);
    padding: var(--gy-s4);
    border-bottom: 1px solid var(--gy-line);
  }

  .gy-cart-table tr:last-child { border-bottom: 0; }

  .gy-cart-table td {
    padding: 0;
    border-bottom: 0;
    grid-column: 2;
  }

  .gy-cart-table td.gy-cart-table__img {
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 80px;
  }

  .gy-confirm-table tr {
    padding: var(--gy-s4);
    border-bottom: 1px solid var(--gy-line);
  }

  .gy-confirm-table td { padding: 0; border-bottom: 0; }

  /* tfoot 的 colspan 在 display:block 下沒有意義，改成一行「標題 ─ 金額」 */
  .gy-confirm-table tfoot tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gy-s3);
    padding-block: var(--gy-s2);
    border-bottom: 0;
  }

  /* 欄名在手機沒有表頭可對照，改用 data-label 補在值前面。
     品名／圖片／數量選擇器本身已經看得懂，就不加。 */
  .gy-cart-table td[data-label]::before,
  .gy-confirm-table td[data-label]::before {
    content: attr(data-label) "：";
    margin-right: var(--gy-s1);
    font-size: var(--gy-fs-xs);
    color: var(--gy-muted);
  }

  .gy-cart-table td.gy-cart-table__img::before,
  .gy-cart-table td.gy-cart-table__name::before,
  .gy-cart-table td.gy-cart-table__qty::before,
  .gy-confirm-table td.gy-cart-table__name::before { content: none; }

  .gy-cart-table td.text-right,
  .gy-confirm-table td.text-right { text-align: left; }

  .gy-cart-table td.gy-cart-table__model:empty,
  .gy-confirm-table td.gy-cart-table__model:empty { display: none; }
}

/* ==========================================================================
   2  結帳頁（多步驟）
   ========================================================================== */

.gy-checkout { margin-bottom: var(--gy-s7); }

.gy-steps { margin-bottom: 0; }

.gy-step + .gy-step { margin-top: var(--gy-s3); }

/* 還沒輪到的步驟：標題是純文字（JS 還沒把它換成 <a>），要看起來像 disabled，
   不然使用者會一直點它。 */
.gy-step > .panel-heading {
  padding: 0;
  border-bottom: 0;
}

.gy-step .panel-title {
  margin: 0;
  padding: var(--gy-s4) var(--gy-s5);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-body);
  font-weight: 700;
  color: var(--gy-muted);
}

/* 標題被 JS 換成 <a> = 這一步可以打開了。
   刻意不用 :has() 把 padding 移到 <a> 上 —— checkout.twig 的
   input[name=account] change handler 有一條分支會把標題塞回「純文字」，
   那時候沒有 <a> 可以掛 padding。改成 padding 留在 .panel-title、
   <a> 用等量負外距把可點區域撐滿整個標題列，兩種狀態都對得上。 */
.gy-step .panel-title > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  min-height: var(--gy-h-lg);
  margin: calc(var(--gy-s4) * -1) calc(var(--gy-s5) * -1);
  padding: var(--gy-s4) var(--gy-s5);
  color: var(--gy-ink);
  text-decoration: none;
  cursor: pointer;
}

.gy-checkout .panel-body { padding: var(--gy-s5); }

/* --- 第 1 步：結帳選項 ---------------------------------------------------- */
.gy-copt {
  display: grid;
  gap: var(--gy-s5);
}

@media (min-width: 768px) {
  .gy-copt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gy-copt__panel {
  padding: var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-canvas);
}

.gy-copt__title {
  margin: 0 0 var(--gy-s2);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink);
}

.gy-copt__lead {
  margin: 0 0 var(--gy-s3);
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.gy-copt__note {
  margin: var(--gy-s3) 0 var(--gy-s4);
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-copt__forgot {
  display: inline-block;
  margin-top: var(--gy-s1);
  font-size: var(--gy-fs-sm);
}

/* --- 第 4/5 步：運送方式、付款方式 ---------------------------------------- */
.gy-methods {
  margin: 0 0 var(--gy-s5);
  padding: 0;
  border: 0;
}

.gy-methods__legend {
  width: 100%;
  margin-bottom: var(--gy-s3);
  padding: 0;
  border: 0;
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

.gy-methods__group + .gy-methods__group { margin-top: var(--gy-s4); }

.gy-methods__carrier {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-method {
  margin-block: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  transition: border-color var(--gy-ease), background var(--gy-ease);
}

.gy-method + .gy-method { margin-top: var(--gy-s2); }

.gy-method:hover { border-color: var(--gy-line-strong); background: var(--gy-soft); }

.gy-method:focus-within { border-color: var(--gy-primary); }

/* :has 不支援時退回一般外框，選取狀態只靠 radio 本身，不影響可用性 */
.gy-method:has(input:checked) {
  border-color: var(--gy-primary);
  background: var(--gy-brand-soft);
}

.gy-method > .gy-check {
  align-items: center;
  padding: var(--gy-s3) var(--gy-s4);
  min-height: var(--gy-h-lg);
}

.gy-method__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gy-s2);
  flex: 1;
}

.gy-method__name { color: var(--gy-ink); font-weight: 600; }
.gy-method__price { color: var(--gy-primary); font-weight: 700; white-space: nowrap; }
.gy-method__terms { font-size: var(--gy-fs-xs); color: var(--gy-muted); }

.gy-methods__comment { margin-bottom: var(--gy-s5); }

/* --- 步驟底部動作列 ------------------------------------------------------- */
.gy-step__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gy-s4);
  padding-top: var(--gy-s4);
  border-top: 1px solid var(--gy-line);
}

.gy-step__agree {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
  margin-right: auto;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

/* label 只放給螢幕閱讀器的純文字版，視覺尺寸靠 checkbox 本身 */
.gy-step__agree-label { margin: 0; }

.gy-step__agree-text a { font-weight: 600; }

/* --- 第 6 步：確認訂單 ---------------------------------------------------- */
.gy-confirm-table tfoot td {
  background: var(--gy-soft);
  font-weight: 600;
}

.gy-confirm-table tfoot tr.is-grand td {
  font-size: var(--gy-fs-h4);
  color: var(--gy-primary);
}

.gy-confirm-name { font-weight: 600; color: var(--gy-ink); }
.gy-confirm-name:hover { color: var(--gy-primary); text-decoration: none; }

/* {{ payment }} 由各金流模組產生，內容不可控（通常是一顆 #button-confirm）。
   只給它一個靠右的動作列位置，不去干涉裡面的 markup。 */
.gy-confirm__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gy-s3);
  margin-top: var(--gy-s5);
  padding-top: var(--gy-s4);
  border-top: 1px solid var(--gy-line);
}

.gy-confirm__pay .btn[disabled] { pointer-events: none; }

/* ==========================================================================
   3  訂單完成 / 付款失敗
   ========================================================================== */

.gy-result {
  margin-block: var(--gy-s6) var(--gy-s8);
  padding: var(--gy-s7) var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-feature);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-1);
  text-align: center;
}

.gy-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--gy-s4);
  border-radius: var(--gy-r-pill);
}

.gy-result__icon .gy-icon { width: 30px; height: 30px; }

.gy-result--success .gy-result__icon { background: var(--gy-success-soft); color: var(--gy-success); }
.gy-result--failure .gy-result__icon { background: var(--gy-danger-soft); color: var(--gy-danger); }

/* 這裡的 .gy-page-head 只借它的 h1 排版，不要再吃它的外距與置左 */
.gy-result__head { margin: 0 0 var(--gy-s4); padding: 0; text-align: center; }

.gy-result__body {
  max-width: 60ch;
  margin-inline: auto;
  text-align: left;
  color: var(--gy-ink-2);
}

.gy-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s3);
  margin-top: var(--gy-s6);
}

@media (max-width: 575px) {
  .gy-result__actions { flex-direction: column; align-items: stretch; }
  .gy-result__actions .gy-btn { width: 100%; }
}

/* ==========================================================================
   content（由 parts/content.css 併入）
   ========================================================================== */
@charset "UTF-8";
/* ==========================================================================
   parts/content.css — 內容頁 / 錯誤頁 / 部落格
   --------------------------------------------------------------------------
   由整合者合併進 giftyou.css。只放 giftyou.css 現成組件做不到的東西：
   凡是能用 .gy-card / .gy-grid / .gy-btn / .gy-prose / .gy-empty /
   .gy-accordion / .gy-table-wrap / .gy-page-head 表達的，這裡一律不重寫。

   零 !important、零硬編色值與尺寸（全部走 token）。

   區塊
     1  內容頁共用
     2  聯絡我們
     3  網站地圖
     4  配送進度查詢
     5  404
     6  部落格列表
     7  文章內頁
   ========================================================================== */

/* ==========================================================================
   1  內容頁共用
   ========================================================================== */

/*
   資訊頁（購物須知、隱私權、退換貨…）。

   .gy-prose 的 72ch 是給「一般字級的連續段落」用的閱讀寬度，
   但這些頁面是文件型內容：後台貼進來的字級多半是 24px（購物須知有 322 個
   元素是 24px），而且大量是手風琴卡片與編號清單、不是連續文章。
   72ch 換算成 599px，配上 24px 的字等於一行放不到 25 個字 ——
   在 1440 的螢幕上看起來就是一條手機寬的窄欄浮在中間。

   改成 880px：清單與卡片排得開，一般字級的段落也還在舒適的閱讀行寬內。
   部落格文章仍走 .gy-prose 的 72ch，不受影響。
*/
.gy-doc {
  max-width: min(100%, 880px);
  margin-inline: auto;
}

/* 內容頁尾註（最後更新、客服補充） */
.gy-doc__note {
  margin-top: var(--gy-s7);
  padding-top: var(--gy-s5);
  border-top: 1px solid var(--gy-line);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* 頁尾轉單區塊。內容頁、文章頁、404 共用同一塊視覺，
   不要各頁各做一個 CTA。 */
.gy-cta-band {
  display: grid;
  gap: var(--gy-s5);
  margin-top: var(--gy-s7);
  padding: var(--gy-s6);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-feature);
  background: var(--gy-soft);
}

@media (min-width: 820px) {
  .gy-cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.gy-cta-band h2 {
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-h3);
}

.gy-cta-band p {
  margin: 0;
  max-width: 52ch;
  color: var(--gy-ink-2);
}

.gy-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
}

/* 小標題上方的分類提示字 */
.gy-kicker {
  display: block;
  margin-bottom: var(--gy-s2);
  color: var(--gy-primary);
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   2  聯絡我們
   ========================================================================== */

.gy-contact {
  display: grid;
  gap: var(--gy-s6);
  align-items: start;
}

@media (min-width: 900px) {
  /* 表單是主要動作，給它較寬的一欄；門市資訊靠右當參考資料 */
  .gy-contact {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.gy-contact__aside {
  display: grid;
  gap: var(--gy-s4);
}

/* 門市／總部資料卡 */
.gy-store {
  display: grid;
  gap: var(--gy-s4);
}

.gy-store__media {
  margin: 0;
}

.gy-store__media img {
  width: 100%;
  height: auto;
  border-radius: var(--gy-r-card);
  border: 1px solid var(--gy-line);
}

.gy-store__name {
  margin: 0;
  font-size: var(--gy-fs-h4);
}

/* 名稱／地址／電話／營業時間用 dl，讀屏軟體才讀得出配對關係 */
.gy-deflist {
  display: grid;
  gap: var(--gy-s3);
  margin: 0;
}

.gy-deflist > div {
  display: grid;
  gap: 2px;
}

.gy-deflist dt {
  margin: 0;
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  font-weight: 600;
}

.gy-deflist dd {
  margin: 0;
  color: var(--gy-ink);
  font-style: normal;
  line-height: 1.6;
}

.gy-deflist a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   3  網站地圖
   ========================================================================== */

.gy-sitemap {
  display: grid;
  gap: var(--gy-s6);
}

@media (min-width: 760px) {
  .gy-sitemap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gy-sitemap__group + .gy-sitemap__group {
  margin-top: var(--gy-s6);
}

.gy-sitemap__group h2 {
  margin: 0 0 var(--gy-s3);
  padding-bottom: var(--gy-s2);
  border-bottom: 1px solid var(--gy-line);
  font-size: var(--gy-fs-h4);
}

.gy-tree,
.gy-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gy-tree > li + li {
  margin-top: var(--gy-s1);
}

.gy-tree a {
  display: inline-block;
  padding: var(--gy-s1) 0;
  color: var(--gy-ink-2);
}

.gy-tree a:hover {
  color: var(--gy-primary);
}

.gy-tree > li > a {
  color: var(--gy-ink);
  font-weight: 600;
}

/* 子層用左側線標示階層，不用 bullet —— 中文字前面的點狀噪點很吵 */
.gy-tree ul {
  margin: var(--gy-s1) 0 var(--gy-s2);
  padding-left: var(--gy-s4);
  border-left: 1px solid var(--gy-line);
}

.gy-tree ul a {
  font-size: var(--gy-fs-sm);
}

/* ==========================================================================
   4  配送進度查詢
   ========================================================================== */

.gy-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  align-items: flex-start;
}

.gy-track__field {
  flex: 1 1 240px;
  min-width: 0;
}

/* .gy-alert 是 display:flex，特異性高於 UA 的 [hidden]{display:none}，
   所以要明寫一條，否則 hidden 的錯誤訊息會一直看得見。
   （giftyou.css 對 .gy-notice / .gy-drawer__sub / .gy-minicart__panel 也是這樣處理） */
.gy-alert[hidden] {
  display: none;
}

.gy-track__note {
  margin-top: var(--gy-s4);
  margin-bottom: 0;
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* ==========================================================================
   5  404
   ========================================================================== */

.gy-404 {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

/* 大數字是裝飾層，壓低對比避免搶走 h1 的視覺重量 */
.gy-404__code {
  margin: 0 0 var(--gy-s3);
  color: var(--gy-line-strong);
  font-family: var(--gy-font-serif);
  font-size: clamp(64px, 14vw, 120px);
  line-height: 1;
}

.gy-404__lead {
  margin: 0 auto var(--gy-s5);
  max-width: 46ch;
  color: var(--gy-ink-2);
}

.gy-404__search {
  display: flex;
  gap: var(--gy-s2);
  margin: 0 auto var(--gy-s6);
  max-width: 460px;
}

.gy-404__search .form-control {
  flex: 1;
  min-width: 0;
}

.gy-404__group + .gy-404__group {
  margin-top: var(--gy-s5);
}

.gy-404__group h2 {
  margin: 0 0 var(--gy-s3);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  font-weight: 700;
}

.gy-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   6  部落格列表
   ========================================================================== */

.gy-blog-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s4);
  align-items: flex-end;
  justify-content: space-between;
}

.gy-blog-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
}

.gy-post-grid {
  display: grid;
  gap: var(--gy-s5);
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

@media (max-width: 480px) {
  .gy-post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gy-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
  transition: box-shadow var(--gy-ease), border-color var(--gy-ease), transform var(--gy-ease);
}

.gy-post:hover,
.gy-post:focus-within {
  border-color: var(--gy-line-strong);
  box-shadow: var(--gy-shadow-2);
  transform: translateY(-2px);
}

.gy-post__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gy-soft);
}

.gy-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gy-ease);
}

.gy-post:hover .gy-post__media img {
  transform: scale(1.04);
}

.gy-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gy-s2);
  padding: var(--gy-s5);
}

.gy-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

.gy-post__title {
  margin: 0;
  font-size: var(--gy-fs-h4);
  line-height: 1.45;
}

.gy-post__title a {
  color: var(--gy-ink);
}

.gy-post__title a:hover {
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-post__excerpt {
  margin: 0;
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  line-height: 1.7;
}

.gy-post__more {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  margin-top: auto;
  padding-top: var(--gy-s3);
  font-size: var(--gy-fs-sm);
  font-weight: 700;
}

.gy-post__more .gy-icon {
  width: 16px;
  height: 16px;
}

/* 分頁與筆數同一列 */
.gy-post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gy-s6);
}

.gy-post-foot__count {
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* ==========================================================================
   7  文章內頁
   ========================================================================== */

/* 閱讀進度條。giftyou_blog.js 只改 span 的 width */
.gy-reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}

.gy-reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gy-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .gy-reading-progress span {
    transition: width 90ms linear;
  }
}

.gy-article__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  margin-bottom: var(--gy-s3);
}

.gy-article__cats a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gy-h-sm);
  padding: 0 var(--gy-s4);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  background: var(--gy-paper);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
}

.gy-article__cats a:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-article__lead {
  max-width: 62ch;
  color: var(--gy-ink-2);
  font-size: 16px;
}

.gy-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

.gy-article__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
}

/* 作者／日期／閱讀時間之間的分隔點。用 ::before 而不是在模板裡打「·」，
   讀屏軟體才不會把裝飾符號念出來 */
.gy-article__meta li + li::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-line-strong);
  vertical-align: middle;
}

/*
  封面不做滿版：內容欄 1170px 下 3:2 圖會高到 780px，一開頁整屏都是圖
  （2026-09-02 Jason 反饋「圖太大」）。限寬置中讓它回到「配圖」的份量，
  高度再設上限，超寬圖用 cover 裁掉多餘高度。
*/
.gy-article__cover {
  margin: var(--gy-s5) auto 0;
  max-width: 780px;
}

.gy-article__cover img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--gy-r-feature);
  box-shadow: var(--gy-shadow-1);
}

.gy-article__layout {
  display: grid;
  gap: var(--gy-s6);
}

@media (min-width: 1000px) {
  .gy-article__layout {
    grid-template-columns: 236px minmax(0, 1fr);
  }
}

.gy-article__aside {
  display: grid;
  gap: var(--gy-s4);
  align-self: start;
}

@media (min-width: 1000px) {
  /* 讓開捲動後出現的 .gy-slim（fixed，60px），否則目錄頂端會被它蓋掉 */
  .gy-article__aside {
    position: sticky;
    top: var(--gy-sticky-top, 76px);
  }
}

/* 目錄 —— 桌機固定在側欄，手機折進 details */
.gy-article-toc {
  padding: var(--gy-s4);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
}

.gy-article-toc__title {
  margin: 0 0 var(--gy-s2);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.gy-article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gy-toc;
}

.gy-article-toc li {
  counter-increment: gy-toc;
}

.gy-article-toc a {
  display: block;
  padding: var(--gy-s2) 0;
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  line-height: 1.5;
}

.gy-article-toc a::before {
  content: counter(gy-toc) ". ";
  color: var(--gy-line-strong);
}

.gy-article-toc a:hover {
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-article-toc a.is-active {
  color: var(--gy-primary);
  font-weight: 700;
}

.gy-article-toc[hidden] {
  display: none;
}

.gy-article-toc--mobile > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.gy-article-toc--mobile > summary::-webkit-details-marker {
  display: none;
}

.gy-article-toc--mobile > summary::after {
  content: "＋";
  float: right;
  color: var(--gy-muted);
}

.gy-article-toc--mobile[open] > summary::after {
  content: "－";
}

.gy-article-toc--mobile > summary:hover {
  color: var(--gy-primary);
}

.gy-article-toc--mobile ol {
  margin-top: var(--gy-s2);
}

@media (min-width: 1000px) {
  .gy-article-toc--mobile {
    display: none;
  }
}

@media (max-width: 999px) {
  .gy-article-toc--desktop {
    display: none;
  }
}

/* 側欄詢價小卡 */
.gy-article-help {
  padding: var(--gy-s4);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-soft);
  font-size: var(--gy-fs-sm);
}

.gy-article-help p {
  margin: 0 0 var(--gy-s3);
  color: var(--gy-ink-2);
}

@media (max-width: 999px) {
  /* 手機已有底部固定 CTA，側欄小卡再出現一次是重複 */
  .gy-article-help {
    display: none;
  }
}

.gy-article__body {
  min-width: 0;
}

/* 文章插圖 */
.gy-article__figure {
  margin: var(--gy-s6) 0;
}

.gy-article__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--gy-r-card);
}

.gy-article__figure figcaption {
  margin-top: var(--gy-s2);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* 內文寬表格：giftyou_blog.js 會自動包這一層 */
.gy-table-scroll {
  overflow-x: auto;
  margin: var(--gy-s5) 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
}

.gy-table-scroll__hint {
  display: block;
  padding: var(--gy-s2) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

@media (min-width: 760px) {
  .gy-table-scroll__hint {
    display: none;
  }
}

.gy-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.gy-table-scroll th,
.gy-table-scroll td {
  padding: var(--gy-s3) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  text-align: left;
  vertical-align: top;
}

.gy-table-scroll th {
  background: var(--gy-soft);
  color: var(--gy-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* 標籤 */
.gy-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  align-items: center;
  margin-top: var(--gy-s6);
  padding-top: var(--gy-s5);
  border-top: 1px solid var(--gy-line);
}

.gy-article__tags-label {
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

.gy-article__tags a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gy-h-sm);
  padding: 0 var(--gy-s3);
  border-radius: var(--gy-r-control);
  background: var(--gy-soft);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
}

.gy-article__tags a:hover {
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
  text-decoration: none;
}

/* 分享 */
.gy-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  align-items: center;
  margin-top: var(--gy-s4);
}

.gy-share__label {
  margin-right: var(--gy-s1);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* 案例預覽 */
.gy-case {
  display: grid;
  gap: var(--gy-s5);
  margin-top: var(--gy-s7);
  padding: var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-feature);
  background: var(--gy-paper);
}

@media (min-width: 720px) {
  .gy-case {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: center;
  }
}

.gy-case__media img {
  width: 100%;
  height: auto;
  border-radius: var(--gy-r-card);
}

.gy-case h2 {
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-h3);
}

.gy-case p {
  color: var(--gy-ink-2);
}

/* 文章底部的延伸區塊（相關商品等） */
.gy-article__section {
  margin-top: var(--gy-s7);
}

.gy-article__section > h2 {
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-h3);
}

.gy-article__section > p {
  color: var(--gy-muted);
}

/* ==========================================================================
   product（由 parts/product.css 併入）
   ========================================================================== */
@charset "UTF-8";
/* ==========================================================================
   GiftYou —— 商品與目錄組（product / search / special / compare / manufacturer）
   --------------------------------------------------------------------------
   規則：只放 giftyou.css 現成組件真的做不到的東西。
   凡是 .gy-btn / .gy-card / .gy-table / .gy-grid / .gy-product / .gy-qty /
   .gy-tabs / .gy-empty / .gy-alert 能處理的，這裡一律不重造。
   值全部走 token，沒有任何 important 宣告。

   合併給整合者：這支要「接在 giftyou.css 之後」。
   有幾條（.gy-searchbox__field / .gy-option-set 的 margin）跟 .form-group 同特異度，
   靠出現順序取勝 —— 這是刻意的，才不用把選擇器堆長或動用 important。
   ========================================================================== */

/* --------------------------------------------------------------------------
   共用小件
   -------------------------------------------------------------------------- */

/* .gy-page-head 本來是整頁寬的區塊（自帶 max-width 與左右 padding）。
   商品頁的 H1 長在右欄裡面，那組寬度限制會多出一段縮排，這裡取消掉。 */
.gy-page-head--inline {
  max-width: none;
  margin: 0 0 var(--gy-s4);
  padding: 0;
}

/* 特價徽章要浮在卡片角落；.gy-badge--float 是 absolute，需要一個定位父層。
   .gy-product 原本沒有 position，補上不影響既有版面（它本來就 overflow:hidden）。 */
.gy-product {
  position: relative;
}

/* 排序列裡的「商品比較 (2)」連結 */
.gy-toolbar__link {
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

/* 表單欄位下的補充說明（跟 .gy-field-error 同一階，但不是錯誤色） */
.gy-field-note {
  display: block;
  margin-top: var(--gy-s1);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* --------------------------------------------------------------------------
   評價顯示
   --------------------------------------------------------------------------
   沒有用星星圖示：sprite（common/icons.twig）目前沒有 star，
   而本組不動 common 的檔案。改成「數字 + 比例條」，
   語意由 role="img" + aria-label 帶，跨平台一致也吃得到品牌色。
   條子的填色用 --gy-primary 而非 --gy-brand：
   brand 對 line-strong 只有 1.x:1，達不到 UI 元件 3:1 的門檻。
   -------------------------------------------------------------------------- */
.gy-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  margin-bottom: var(--gy-s3);
}

.gy-rating__value {
  font-size: var(--gy-fs-sm);
  font-weight: 700;
  color: var(--gy-ink);
  white-space: nowrap;
}

.gy-rating__bar {
  display: inline-block;
  width: 88px;
  height: 8px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-line-strong);
  overflow: hidden;
}

.gy-rating__fill {
  display: block;
  height: 100%;
  background: var(--gy-primary);
}

.gy-rating__count {
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-rating__count:hover { color: var(--gy-primary); }

.gy-rating--sm { margin-bottom: 0; }
.gy-rating--sm .gy-rating__bar { width: 56px; height: 6px; }

/* --------------------------------------------------------------------------
   商品詳情頁
   -------------------------------------------------------------------------- */
.gy-product-status:empty { display: none; }
.gy-product-status { margin-bottom: var(--gy-s4); }

.gy-gallery { min-width: 0; }

.gy-buy { min-width: 0; }

.gy-buy__brand {
  margin-bottom: var(--gy-s3);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* 稅／點數這種次要價格資訊，不跟主價格搶視覺 */
.gy-price-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2) var(--gy-s4);
  margin: calc(var(--gy-s4) * -1) 0 var(--gy-s4);
  padding: 0;
  list-style: none;
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

/* .gy-spec 用 <dl>，dd 的預設縮排要清掉 */
.gy-spec dd { margin: 0; }
.gy-spec dt { font-weight: 400; }

/* --- 數量階梯參考價 ------------------------------------------------------ */
.gy-tiers { margin-bottom: var(--gy-s5); }

.gy-tiers__title {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin-bottom: var(--gy-s3);
  font-size: var(--gy-fs-h4);
  color: var(--gy-ink-2);
}

.gy-tiers__title .gy-icon { color: var(--gy-brand); }

/* --- 商品選項 ------------------------------------------------------------
   這站幾乎每個商品都有必填的「印刷LOGO方式」，選項壞掉等於不能下單，
   所以每一種型別都給明確的標題、必填記號與 44px 的觸控目標。
   -------------------------------------------------------------------------- */
.gy-options__title {
  margin-bottom: var(--gy-s4);
  padding-bottom: var(--gy-s2);
  border-bottom: 1px solid var(--gy-line);
  font-size: var(--gy-fs-h4);
}

.gy-option-set {
  margin: 0 0 var(--gy-s4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.gy-option-set__legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: var(--gy-s2);
  padding: 0;
  border: 0;
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

/*
   選項排成多欄。

   一個選項佔一整列太浪費 —— 這站的商品常有三四組選項，全部單欄會把
   購買按鈕推到第一屏以外。

   用 auto-fill 而不是 auto-fit：奇數個選項時 auto-fit 會把最後一格
   拉寬成整列（看起來像排壞了），auto-fill 讓它維持正常寬度、右邊留白。
   價格改成跟名稱同一行靠右，每一格高度才會一致。
*/
.gy-option-set__list {
  display: grid;
  gap: var(--gy-s2);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* 選項做成可點的整塊，命中區域比原生 radio 大得多 */
.gy-option-choice {
  display: flex;
  align-items: center;
  gap: var(--gy-s3);
  min-height: var(--gy-h-lg);
  margin: 0;
  padding: var(--gy-s2) var(--gy-s3);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  font-size: var(--gy-fs-body);
  font-weight: 400;
  color: var(--gy-ink-2);
  cursor: pointer;
  transition: border-color var(--gy-ease), background var(--gy-ease);
}

.gy-option-choice:hover {
  border-color: var(--gy-primary);
  background: var(--gy-soft);
}

.gy-option-choice:focus-within {
  outline: 2px solid var(--gy-primary);
  outline-offset: 2px;
}

/* 選中狀態。原生 accent-color 已經標出來了，這裡再補整塊底色，
   讓「已選了哪個印刷方式」在長清單裡一眼看得到 */
.gy-option-choice:has(input:checked) {
  border-color: var(--gy-primary);
  background: var(--gy-brand-soft);
}

.gy-option-choice input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  flex: none;
  accent-color: var(--gy-primary);
}

.gy-option-choice__img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--gy-r-control);
  object-fit: cover;
  background: var(--gy-soft);
}

/* 名稱與價格同一行（價格靠右），每一格才等高 */
.gy-option-choice__text {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gy-s2);
  min-width: 0;
  line-height: 1.4;
}

.gy-option-choice__name {
  min-width: 0;
  color: var(--gy-ink);
}

.gy-option-choice__price {
  flex: none;
  font-size: var(--gy-fs-xs);
  color: var(--gy-primary);
  font-weight: 600;
}

/* 檔案型選項：沒有 <label for>，用一段文字 + aria-describedby 綁到按鈕 */
.gy-option-file__label {
  display: block;
  margin-bottom: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

.gy-option-file__name {
  display: block;
  margin-top: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  color: var(--gy-success);
  word-break: break-all;
}

.gy-option-file__name:empty { display: none; }

/* --- 數量 + 加入購物車 --------------------------------------------------- */
.gy-buybox__qty {
  display: flex;
  flex-direction: column;
  gap: var(--gy-s1);
  flex: none;
}

.gy-buybox__qty-label {
  margin: 0;
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

/* quote_request.js 會把「加入詢價」插進這一層，所以它要能裝下兩顆按鈕 */
.gy-buybox .buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  flex: 1;
  min-width: 200px;
}

.gy-buybox .buttons-wrapper .gy-btn,
.gy-buybox .buttons-wrapper .btn {
  flex: 1;
  min-width: 150px;
}

.gy-buy-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
  margin-top: var(--gy-s4);
}

/* --- 標籤 ---------------------------------------------------------------- */
.gy-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gy-s2);
  margin-top: var(--gy-s5);
  font-size: var(--gy-fs-sm);
}

.gy-tags__label { color: var(--gy-muted); }

.gy-tags__item {
  padding: 2px var(--gy-s3);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  color: var(--gy-ink-2);
}

.gy-tags__item:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

/* --- 分頁籤 -------------------------------------------------------------- */
.gy-product-tabs { margin-top: var(--gy-s7); }

/* 屬性表的 caption 當小標題用，比再包一層 h3 少一個層級 */
.gy-attr-group + .gy-attr-group { margin-top: var(--gy-s4); }

.gy-attr-group__caption {
  padding: var(--gy-s3) var(--gy-s4);
  background: var(--gy-soft);
  border-bottom: 1px solid var(--gy-line);
  font-weight: 700;
  color: var(--gy-ink);
  text-align: left;
}

.gy-attr-group .gy-table th { background: transparent; white-space: normal; width: 38%; }

/* --- 評論 ---------------------------------------------------------------- */
.gy-reviews__list {
  margin: 0 0 var(--gy-s5);
  padding: 0;
  list-style: none;
}

.gy-review {
  padding: var(--gy-s4) 0;
  border-bottom: 1px solid var(--gy-line);
}

.gy-review:first-child { padding-top: 0; }

.gy-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2) var(--gy-s4);
  margin-bottom: var(--gy-s2);
}

.gy-review__author { font-weight: 700; color: var(--gy-ink); }

.gy-review__date {
  margin-left: auto;
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-review__text { margin: 0; color: var(--gy-ink-2); }

.gy-reviews__empty,
.gy-reviews__results {
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

.gy-review-form {
  margin-top: var(--gy-s5);
  padding: var(--gy-s5);
  background: var(--gy-soft);
  border-radius: var(--gy-r-card);
}

.gy-review-form h2 { font-size: var(--gy-fs-h3); }

.gy-review-form__lead { color: var(--gy-ink-2); }

.gy-review-form__result { margin-bottom: var(--gy-s4); }

/* 評分輸入：一樣不用星星，用 1-5 的數字按鈕，兩端標「差評 / 好評」 */
.gy-rating-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2);
  margin: 0 0 var(--gy-s4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.gy-rating-input legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: var(--gy-s2);
  padding: 0;
  border: 0;
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

.gy-rating-input__end {
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.gy-rating-input__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  min-height: var(--gy-h-sm);
  margin: 0;
  padding: 0 var(--gy-s3);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  font-weight: 600;
  cursor: pointer;
}

.gy-rating-input__item:hover { border-color: var(--gy-primary); }

.gy-rating-input__item:has(input:checked) {
  border-color: var(--gy-primary);
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
}

.gy-rating-input__item input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: var(--gy-primary);
}

/* --- 相關商品 ------------------------------------------------------------ */
.gy-related { margin-top: var(--gy-s7); }
.gy-related h2 { margin-bottom: var(--gy-s5); }

/* --------------------------------------------------------------------------
   搜尋頁
   -------------------------------------------------------------------------- */
.gy-searchbox {
  margin-bottom: var(--gy-s6);
  padding: var(--gy-s5);
  background: var(--gy-soft);
  border-radius: var(--gy-r-card);
}

.gy-searchbox__row {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gy-searchbox__row { grid-template-columns: 2fr 1fr; }
}

.gy-searchbox__field { margin-bottom: 0; }

.gy-searchbox__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s4);
  margin-top: var(--gy-s4);
}

.gy-searchbox__opts .gy-btn { margin-left: auto; }

.gy-searchbox__results-title {
  margin-bottom: var(--gy-s4);
  font-size: var(--gy-fs-h3);
}

/* --------------------------------------------------------------------------
   商品比較
   --------------------------------------------------------------------------
   欄數會隨比較的商品數增加，手機一定要橫捲（外層是 .gy-table-wrap）。
   第一欄黏住，捲到第 4 個商品時還知道自己在看「重量」還是「尺寸」。
   -------------------------------------------------------------------------- */
.gy-compare__table th,
.gy-compare__table td {
  min-width: 180px;
  vertical-align: top;
}

.gy-compare__table th[scope="row"],
.gy-compare__corner {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 120px;
  background: var(--gy-soft);
}

.gy-compare__thumb {
  display: block;
  width: 120px;
  margin-bottom: var(--gy-s2);
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-paper);
}

.gy-compare__thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gy-compare__name {
  display: block;
  font-weight: 700;
  white-space: normal;
}

.gy-compare__reviews {
  display: block;
  margin-top: var(--gy-s1);
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-compare__summary {
  min-width: 240px;
  color: var(--gy-ink-2);
  font-weight: 400;
}

.gy-compare__group-head {
  position: static;
  background: var(--gy-brand-soft);
  color: var(--gy-ink);
  text-align: left;
}

.gy-compare__actions {
  display: table-cell;
}

.gy-compare__actions .gy-btn + .gy-btn {
  margin-top: var(--gy-s2);
}

/* --------------------------------------------------------------------------
   品牌列表
   -------------------------------------------------------------------------- */
.gy-brand-index {
  margin-bottom: var(--gy-s6);
  padding: var(--gy-s4);
  background: var(--gy-soft);
  border-radius: var(--gy-r-card);
}

.gy-brand-index__label {
  display: block;
  margin-bottom: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

.gy-brand-index .gy-refine { margin-bottom: 0; }

.gy-brand-group + .gy-brand-group { margin-top: var(--gy-s6); }

.gy-brand-group__title {
  margin-bottom: var(--gy-s3);
  padding-bottom: var(--gy-s2);
  border-bottom: 1px solid var(--gy-line);
  font-size: var(--gy-fs-h3);
  /* 錨點跳過來時不要被 sticky 的頁首吃掉標題 */
  scroll-margin-top: var(--gy-s7);
}

.gy-brand-list {
  display: grid;
  gap: var(--gy-s2) var(--gy-s4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gy-brand-list a {
  display: block;
  padding: var(--gy-s2) 0;
  color: var(--gy-ink-2);
}

.gy-brand-list a:hover { color: var(--gy-primary); }
/* --- 分類頁子分類篩選 ---------------------------------------------------- */
/*
   桌機：子分類直接以 pill 列出。
   手機：收進由下滑出的面板，開關鈕顯示數量。
   斷點取 767px，與 .gy-grid 的行為一致。
*/
.gy-filter-open {
  display: none;
  align-items: center;
  gap: var(--gy-s2);
  width: 100%;
  min-height: var(--gy-h-lg);
  margin-bottom: var(--gy-s4);
  padding: 0 var(--gy-s4);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-ink-2);
  font-family: inherit;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  cursor: pointer;
}

.gy-filter-open:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
}

.gy-filter-open__count {
  margin-left: auto;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
  font-size: var(--gy-fs-xs);
}

.gy-filter__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding: var(--gy-s3) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-dark);
  color: #fff;
}

@media (max-width: 767px) {
  .gy-filter-open { display: inline-flex; }

  .gy-filter {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: var(--gy-paper);
    border-radius: var(--gy-r-feature) var(--gy-r-feature) 0 0;
    box-shadow: var(--gy-shadow-3);
    /* 用 translate 收起而不是 display:none，才有滑出動畫且仍可被讀取 */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 240ms var(--gy-ease), visibility 240ms var(--gy-ease);
  }

  .gy-filter.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .gy-filter__head {
    display: flex;
    border-radius: var(--gy-r-feature) var(--gy-r-feature) 0 0;
  }

  .gy-filter .gy-refine {
    margin: 0;
    padding: var(--gy-s4);
    overflow-y: auto;
    /* 底部留出手勢區，最後一顆才不會貼著螢幕邊 */
    padding-bottom: calc(var(--gy-s5) + env(safe-area-inset-bottom));
  }

  .gy-filter .gy-refine a {
    min-height: var(--gy-h-lg);
  }
}
/* ==========================================================================
   舊擴充的 FontAwesome 圖示補救
   --------------------------------------------------------------------------
   quote_request.js、common.js 這些既有腳本會在執行期插入
   <i class="fa fa-xxx"></i>，而新主題沒有載入 FontAwesome ——
   那些 <i> 會變成看不見的空元素（實測：商品頁「加入詢價」按鈕的圖示不見了）。

   改 JS 會動到詢價模組的共用程式碼（ymshop 也在用），風險比較高。
   這裡改用 CSS mask 把圖形畫出來：吃 currentColor，跟著按鈕文字色走，
   尺寸也和 .gy-icon 對齊。日後若那些腳本改成輸出 SVG，這段可以直接刪掉。
   ========================================================================== */
:root {
  --gy-fa-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  --gy-fa-times: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --gy-fa-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --gy-fa-exchange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5'/%3E%3C/svg%3E");
  --gy-fa-paper-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  --gy-fa-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
  --gy-fa-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
}

.fa {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fa.fa-clipboard { display: inline-block; -webkit-mask-image: var(--gy-fa-clipboard); mask-image: var(--gy-fa-clipboard); }
.fa.fa-times, .fa.fa-close, .fa.fa-remove { display: inline-block; -webkit-mask-image: var(--gy-fa-times); mask-image: var(--gy-fa-times); }
.fa.fa-heart, .fa.fa-heart-o { display: inline-block; -webkit-mask-image: var(--gy-fa-heart); mask-image: var(--gy-fa-heart); }
.fa.fa-exchange { display: inline-block; -webkit-mask-image: var(--gy-fa-exchange); mask-image: var(--gy-fa-exchange); }
.fa.fa-paper-plane, .fa.fa-paper-plane-o { display: inline-block; -webkit-mask-image: var(--gy-fa-paper-plane); mask-image: var(--gy-fa-paper-plane); }
.fa.fa-home { display: inline-block; -webkit-mask-image: var(--gy-fa-home); mask-image: var(--gy-fa-home); }
.fa.fa-trash, .fa.fa-trash-o { display: inline-block; -webkit-mask-image: var(--gy-fa-trash); mask-image: var(--gy-fa-trash); }

/* 沒有對應圖形的 fa 就整個不佔位，免得留一塊看不出是什麼的色塊。
   有對應圖形的 .fa-* 會在下方的相容層把 display 開回來。 */
.fa { display: none; }

/* --- 由 JS 插入的「加入詢價」按鈕 ---------------------------------------- */
/*
   quote_request.js 插進商品頁的是 <button class="btn btn-quote-product">，
   跟旁邊 .gy-btn--lg 的「加入購物車」高度差 6px、樣式也是兩套。
   這裡把它拉齊成次要按鈕（白底棕框），和主要 CTA 形成明確的層級差。
*/
.btn-quote-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s2);
  min-height: 50px;
  padding: 0 var(--gy-s5);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-primary);
  font-family: inherit;
  font-size: var(--gy-fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--gy-ease), border-color var(--gy-ease), color var(--gy-ease);
}

.btn-quote-product:hover {
  background: var(--gy-soft);
  border-color: var(--gy-primary);
  color: var(--gy-primary-hover);
}

.btn-quote-product:active {
  background: var(--gy-brand-soft);
  transform: translateY(1px);
}

.btn-quote-product .fa {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.quote-btn-wrapper {
  display: flex;
  flex: 1;
  min-width: 150px;
}

.quote-btn-wrapper .btn-quote-product { flex: 1; }

/* --- 舊模板的頁面標題 ---------------------------------------------------- */
/*
   default 與 journal3 的模板普遍用 <h1 class="title page-title">，
   而且它常常直接掛在 <main> 底下、沒有任何容器 —— 新主題沒有這個 class 的
   樣式時，標題會貼齊視窗最左邊（實測詢價頁就是這樣跑掉的）。
   給它和 .gy-page-head 一樣的容器與字級，fallback 到 default 的頁面也一併受惠。
*/
.title.page-title,
h1.page-title {
  display: block;
  max-width: var(--gy-content);
  margin: var(--gy-s5) auto var(--gy-s5);
  padding: 0 var(--gy-s4);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--gy-ink);
}

.title.page-title > span,
h1.page-title > span {
  display: inline-block;
  padding-bottom: var(--gy-s3);
  border-bottom: 3px solid var(--gy-brand);
}

.title.page-title .fa,
h1.page-title .fa {
  width: 0.8em;
  height: 0.8em;
  color: var(--gy-brand);
}
/* ==========================================================================
   詢價單頁（extension/module/quote_request_*）
   --------------------------------------------------------------------------
   模板是從 journal3 移植的，結構與 JS 鉤子都不能動（那是轉換路徑）。
   這裡只用 CSS 把它拉進新的設計系統：分區卡片化、商品列改成網格、
   數量框限寬、按鈕套用 .gy-btn 的外觀、表單在桌機分兩欄。
   ========================================================================== */

#quote-submit,
#quote-cart,
#quote-success {
  max-width: var(--gy-content);
  margin-inline: auto;
  padding-inline: var(--gy-s4);
}

/* --- 頁首簡介 ------------------------------------------------------------ */
/*
   改成單列：圖示｜標題＋說明｜SLA 標籤靠右。
   原本圖示、fs-h1 大標＋底線、說明、SLA 各佔一行，加上麵包屑要吃掉
   264px（1280×800 下第一屏 60% 都不是內容）—— 這頁是流程頁不是著陸頁，
   標題只要能定位「我在詢價單」就夠，版面要留給清單與表單。
*/
.quote-hero-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2) var(--gy-s3);
  margin-bottom: var(--gy-s4);
}

.quote-hero-compact > div {
  display: flex;
  /* basis 給小一點：手機 343px 也要讓標題留在圖示旁邊，不然圖示自己佔一行 */
  flex: 1 1 200px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gy-s1) var(--gy-s3);
  min-width: 0;
}

.quote-hero-compact .hero-title {
  margin: 0;
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h2);
  line-height: 1.2;
}

.quote-hero-compact p {
  margin: 0;
  color: var(--gy-muted);
  max-width: 60ch;
}

/* 單列版不畫標題底線，也不讓圖示往下掉 */
.quote-hero-compact .hero-icon { margin-bottom: 0; flex: none; }
.quote-hero-compact .quote-hero-sla { margin-left: auto; flex: none; }

@media (max-width: 767px) {
  /* 手機寬度塞不下 SLA 靠右，讓它自然換行接在說明後面 */
  .quote-hero-compact .quote-hero-sla { margin-left: 0; }
}

/* --- 送出頁雙欄版面 ------------------------------------------------------ */
/*
   主題切換時漏搬的版面。.quote-layout 在 journal3 期就是雙欄：
   清單矮、表單高，所以窄欄給清單並讓它 sticky（跟結帳頁摘要同一套邏輯），
   寬欄給表單 —— 否則整頁攤成 1150px 直堆，欄位半寬、右邊全是空白。
   比例沿用舊主題實測調好的 0.66/1.34（這裡取 0.72/1.28，新主題卡片留白較大）。
*/
@media (min-width: 992px) {
  .quote-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--gy-s5);
    align-items: start;
  }

  .quote-col-left {
    position: sticky;
    top: var(--gy-sticky-top, 76px);
  }

  /* 窄欄塞不下桌機的五欄商品列（84+160+120+44 就超過欄寬），
     改成兩行緊湊排法：上行名稱＋移除、下行數量＋小計 */
  .quote-col-left .quote-product-row {
    grid-template-columns: 64px minmax(0, 1fr) 96px;
    grid-template-areas:
      "image info  remove"
      "image qty   price";
    align-items: start;
  }

  .quote-col-left .qp-image a { width: 64px; height: 64px; }
  .quote-col-left .qp-qty input { max-width: 120px; }
  .quote-col-left .qp-price { text-align: right; align-self: center; }
  .quote-col-left .qp-remove { align-self: start; }
}

/* --- 區塊卡片 ------------------------------------------------------------ */
.quote-section {
  margin-bottom: var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
  overflow: hidden;
}

.quote-section .section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gy-s3);
  margin: 0;
  padding: var(--gy-s4) var(--gy-s5);
  border-bottom: 1px solid var(--gy-line);
  background: var(--gy-soft);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  font-weight: 700;
}

.quote-section .section-header > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
}

.quote-section .section-header .fa { color: var(--gy-brand); }

.quote-section .section-header .product-count {
  font-family: var(--gy-font-sans);
  font-size: var(--gy-fs-sm);
  font-weight: 500;
  color: var(--gy-muted);
}

.quote-section .section-content { padding: var(--gy-s5); }

/* --- 商品列 -------------------------------------------------------------- */
#quote-product-list { padding: 0 var(--gy-s5); }

.quote-product-item {
  padding: var(--gy-s4) 0;
  border-bottom: 1px solid var(--gy-line);
}

.quote-product-item:last-child { border-bottom: 0; }

/* 圖 / 資訊 / 數量 / 小計 / 移除，一列排完；手機才換行 */
.quote-product-row {
  display: grid;
  gap: var(--gy-s3) var(--gy-s4);
  align-items: center;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "image info"
    "qty   qty"
    "price remove";
}

@media (min-width: 768px) {
  .quote-product-row {
    grid-template-columns: 84px minmax(0, 1fr) 160px 120px 44px;
    grid-template-areas: "image info qty price remove";
  }
}

.qp-image { grid-area: image; }

.qp-image a {
  display: block;
  width: 84px;
  height: 84px;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  overflow: hidden;
  background: var(--gy-soft);
}

.qp-image img { width: 100%; height: 100%; object-fit: cover; }

.qp-info { grid-area: info; min-width: 0; }

.qp-info a,
.qp-name {
  display: block;
  color: var(--gy-ink);
  font-weight: 600;
  line-height: 1.5;
}

.qp-info a:hover { color: var(--gy-primary); text-decoration: none; }

.qp-option,
.qp-info small,
.qp-meta {
  display: block;
  margin-top: 2px;
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

/* 數量：輸入框不該吃掉整行寬度 */
.qp-qty { grid-area: qty; }

.qp-qty label,
.quote-product-row .control-label {
  display: block;
  margin-bottom: var(--gy-s1);
  font-size: var(--gy-fs-xs);
  font-weight: 600;
  color: var(--gy-muted);
}

.quote-product-row input[type="number"],
.quote-product-row input[type="text"],
.qp-qty input {
  max-width: 160px;
  text-align: center;
  font-weight: 600;
}

.qp-price,
.qp-subtotal {
  grid-area: price;
  font-size: 16px;
  font-weight: 700;
  color: var(--gy-primary);
}

@media (min-width: 768px) {
  .qp-price, .qp-subtotal { text-align: right; }
}

/* 移除鈕：原生是一顆看不出用途的小方塊 */
.qp-remove { grid-area: remove; justify-self: end; }

.qp-remove button,
.btn-remove-item,
.quote-product-row .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gy-line);
  border-radius: 50%;
  background: var(--gy-paper);
  color: var(--gy-muted);
  cursor: pointer;
  transition: background var(--gy-ease), color var(--gy-ease), border-color var(--gy-ease);
}

.qp-remove button:hover,
.btn-remove-item:hover,
.quote-product-row .btn-danger:hover {
  background: var(--gy-danger-soft);
  border-color: var(--gy-danger);
  color: var(--gy-danger);
}

/* --- 數量提醒與快速選數量（主題切換漏搬，之前吃到通用 .btn 變深色實心大塊） --- */
.qp-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s2);
  padding-top: var(--gy-s2);
}

.qty-warn-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  min-height: 28px;
  padding: 2px var(--gy-s3);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-pill);
  background: var(--gy-soft);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-xs);
  font-weight: 600;
}

.qty-chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
}

/* 用 #quote-submit 拉高權重：這些按鈕帶 .btn .btn-xs，
   不加 id 會被檔案後面的通用 .btn（實心主色）蓋回去 */
#quote-submit .btn-chip-inline {
  min-width: 56px;
  min-height: 32px;
  padding: 0 var(--gy-s3);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-pill);
  background: var(--gy-paper);
  color: var(--gy-primary);
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--gy-ease), border-color var(--gy-ease);
}

#quote-submit .btn-chip-inline:hover,
#quote-submit .btn-chip-inline:focus-visible {
  border-color: var(--gy-primary);
  background: var(--gy-soft);
  color: var(--gy-primary-hover);
}

/* 觸控裝置維持 44px 觸控高度（46ef17a 的無障礙基準） */
@media (pointer: coarse) {
  #quote-submit .btn-chip-inline { min-height: 44px; }
}

/* --- 清單頁尾 ------------------------------------------------------------ */
.quote-products-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding: var(--gy-s4) var(--gy-s5);
  border-top: 1px solid var(--gy-line);
  background: var(--gy-soft);
}

.btn-clear-all {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  min-height: var(--gy-h-sm);
  padding: 0 var(--gy-s4);
  border: 1px solid var(--gy-line-strong);
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  color: var(--gy-muted);
  font-family: inherit;
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gy-ease), color var(--gy-ease), border-color var(--gy-ease);
}

.btn-clear-all:hover {
  background: var(--gy-danger-soft);
  border-color: var(--gy-danger);
  color: var(--gy-danger);
}

.quote-total-line {
  display: flex;
  align-items: baseline;
  gap: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

.quote-total-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--gy-primary);
  font-family: var(--gy-font-serif);
}

/*
   詢價流程的三個步驟。原本是沒套任何樣式的 <ul> —— 瀏覽器預設的圓點清單
   夾在兩張卡片中間，跟這頁其他區塊完全不是同一套語言。
   改成三欄一列、有底有框，跟商品頁的 B2B 採購看板同一個做法。
*/
.quote-service-note {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gy-s3);
  margin: 0 0 var(--gy-s5);
  padding: var(--gy-s4);
  list-style: none;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-soft);
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.quote-service-note > li {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  min-width: 0;
}

.quote-service-note .fa {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gy-primary);
}

@media (max-width: 767px) {
  /* 三欄在手機上每格只剩 100px，字會斷成兩三行 —— 直接改直排 */
  .quote-service-note { grid-template-columns: 1fr; gap: var(--gy-s2); }
}

/*
   預估金額的但書。原本沒有樣式，緊貼在卡片下緣、圖示跟文字黏在一起，
   看起來像漏掉的斷句。給它縮排與行距，讓它讀起來像註腳。
*/
.quote-price-note {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
  margin: 0;
  padding: var(--gy-s3) var(--gy-s5) var(--gy-s4);
  font-size: var(--gy-fs-xs);
  line-height: 1.7;
  color: var(--gy-muted);
}

.quote-price-note .fa {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
}

/* --- 表單 ---------------------------------------------------------------- */
/* 姓名／Email／電話這種短欄位，滿版 1150px 只是讓眼睛跑很遠 */
@media (min-width: 768px) {
  .quote-section .section-content {
    display: grid;
    gap: 0 var(--gy-s5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 需求說明、Logo 上傳這類要整行 */
  .quote-section .section-content > .form-group:has(textarea),
  .quote-section .section-content > .form-group:has(.upload-box),
  .quote-section .section-content > .form-group--full,
  .quote-section .section-content > .alert,
  .quote-section .section-content > p {
    grid-column: 1 / -1;
  }
}

.quote-section .form-group { margin-bottom: var(--gy-s4); }

.quote-section .control-label {
  display: block;
  margin-bottom: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink-2);
}

.quote-section .form-group.required .control-label::after {
  content: " *";
  color: var(--gy-danger);
}

/* --- Logo 上傳 ----------------------------------------------------------- */
.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gy-s2);
  padding: var(--gy-s6) var(--gy-s4);
  border: 2px dashed var(--gy-line-strong);
  border-radius: var(--gy-r-card);
  background: var(--gy-canvas);
  text-align: center;
  transition: border-color var(--gy-ease), background var(--gy-ease);
}

.upload-box:hover {
  border-color: var(--gy-brand);
  background: var(--gy-soft);
}

.upload-icon { font-size: 24px; color: var(--gy-clay); }
.upload-hint { font-size: var(--gy-fs-xs); color: var(--gy-muted); }

/* --- 送出列 -------------------------------------------------------------- */
#sticky-submit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  margin: var(--gy-s5) 0 var(--gy-s8);
  padding: var(--gy-s4) var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-2);
}

.sticky-total { display: flex; align-items: baseline; gap: var(--gy-s2); font-size: var(--gy-fs-sm); color: var(--gy-muted); }
.sticky-total-amount { font-size: 22px; font-weight: 700; color: var(--gy-primary); font-family: var(--gy-font-serif); }

.btn-submit-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s2);
  min-height: 52px;
  min-width: 200px;
  padding: 0 var(--gy-s6);
  border: 1px solid transparent;
  border-radius: var(--gy-r-control);
  background: var(--gy-primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--gy-ease), transform var(--gy-ease);
}

.btn-submit-quote:hover { background: var(--gy-primary-hover); color: #fff; }
.btn-submit-quote:active { background: var(--gy-primary-active); transform: translateY(1px); }
.btn-submit-quote[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 767px) {
  #sticky-submit-bar { flex-direction: column; align-items: stretch; }
  .btn-submit-quote { width: 100%; }
}

/* --- 成功頁 -------------------------------------------------------------- */
.quote-success-page { text-align: center; padding-block: var(--gy-s7); }
.quote-number {
  display: inline-block;
  margin: var(--gy-s4) 0;
  padding: var(--gy-s3) var(--gy-s6);
  border-radius: var(--gy-r-pill);
  background: var(--gy-success-soft);
  color: var(--gy-success);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 詢價流程的三步驟說明：原本是裸的 <ul>，改成有節奏的橫列 */
.quote-hero-compact ul,
.quote-service-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3) var(--gy-s5);
  margin: 0 0 var(--gy-s5);
  padding: 0;
  list-style: none;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.quote-hero-compact ul li,
.quote-service-steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
}

.quote-hero-compact ul li::before,
.quote-service-steps li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--gy-success);
  -webkit-mask: var(--gy-check-glyph) center / contain no-repeat;
  mask: var(--gy-check-glyph) center / contain no-repeat;
}

:root {
  --gy-check-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* 商品列的數量 label 太長會擠成兩行，只保留「詢價數量」語意給讀屏 */
.quote-product-row .qp-qty label,
.quote-product-row label[for^="quantity"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 麵包屑第一項是 fa-home 圖示，給它和文字一致的視覺重量 */
.gy-breadcrumb .fa-home,
.breadcrumb .fa-home {
  width: 15px;
  height: 15px;
  vertical-align: -0.15em;
}

/* --- 登入／註冊欄位寬度 --------------------------------------------------- */
/*
   帳號密碼這類短欄位不該橫跨整個版面 —— 眼睛從 label 走到輸入框末端太遠，
   也讓兩欄看起來不像一組。桌機限一個舒服的閱讀寬度。
*/
@media (min-width: 992px) {
  .gy-auth__panel .form-group input,
  .gy-auth__panel .form-control,
  .gy-form-shell .form-group > input:not([type="checkbox"]):not([type="radio"]),
  .gy-form-shell .form-group > select {
    max-width: 460px;
  }
}

/* 手機的首頁分類區塊：每區只留 4 件。
   桌機一行 5-6 件、6 件剛好排滿；手機兩欄的話 6 件要 3 行，
   七個區塊疊起來首頁會超過 13000px，使用者根本捲不到底。
   被藏起來的卡片本來就是 lazy 載入，不會白花頻寬。 */
@media (max-width: 767px) {
  .gy-showcase .gy-grid > .gy-product:nth-child(n + 5) { display: none; }
}

/* --- 精選案例（合作客戶 logo 牆） ---------------------------------------- */
.gy-clients {
  padding-block: var(--gy-s7);
  background: var(--gy-paper);
  border-block: 1px solid var(--gy-line);
}

.gy-clients__grid {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

@media (min-width: 768px) {
  .gy-clients__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 767px) {
  .gy-clients {
    padding-block: var(--gy-s5);
  }
  .gy-clients__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gy-s2);
  }
  .gy-clients__logo {
    padding: var(--gy-s2);
    min-height: 48px;
  }
  .gy-clients__work {
    padding: 3px var(--gy-s2);
    font-size: 11px;
  }
}

.gy-clients__item {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: #fff;
  overflow: hidden;
}

.gy-clients__item > a {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}

/* logo 區維持原本的比例，下面才接品項名稱 */
.gy-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gy-s3);
  aspect-ratio: 5 / 3;
}

/*
  做過的品項。字級刻意比 logo 小很多 —— 它是佐證，不是標題；
  兩行截斷，長品名（「彩色陶瓷馬克杯 客製印刷質感咖啡水杯」）
  不會把每張卡撐成不同高度。
*/
.gy-clients__work {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: var(--gy-s2) var(--gy-s3) var(--gy-s3);
  border-top: 1px solid var(--gy-line);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  line-height: 1.5;
  text-align: center;
}

/* 沒有對應品項的只有 logo，補一點下緣留白讓它跟有文字的卡片視覺等重 */
.gy-clients__item--logo-only .gy-clients__logo { padding-bottom: var(--gy-s4); }

.gy-clients__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /*
    一路從 grayscale(1) 改到 opacity .72，還是「灰灰的」——
    這一區是 B2B 最重要的信任證明，客戶的品牌識別就是它的價值，
    不該被壓暗。原色全彩呈現，靠白底卡片與統一的 logo 尺寸收齊，
    不靠減飽和度來避免視覺打架。
  */
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gy-clients__item img { transition: none; }
}

/* --- 精選案例卡（實拍情境照 × 客戶名 × 品項，2026-09） -------------------- */
.gy-cases__grid {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--gy-s5);
  padding: 0;
  list-style: none;
}

@media (max-width: 991px) {
  .gy-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gy-s3); }
}

.gy-cases__item {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  background: #fff;
  overflow: hidden;
}

.gy-cases__item > a {
  display: block;
  height: 100%;
  color: inherit;
}

.gy-cases__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gy-cases__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gy-cases__item:hover .gy-cases__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .gy-cases__media img { transition: none; }
  .gy-cases__item:hover .gy-cases__media img { transform: none; }
}

.gy-cases__meta {
  display: block;
  padding: var(--gy-s2) var(--gy-s3) var(--gy-s3);
  border-top: 1px solid var(--gy-line);
}

.gy-cases__client {
  display: block;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink);
}

.gy-cases__work {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  line-height: 1.5;
}

/* 統計列：三個有出處的數字（出處見 controller 註解），置中一排 */
.gy-cases__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gy-s3) var(--gy-s7);
  margin: 0 0 var(--gy-s6);
  padding: var(--gy-s4) 0;
  list-style: none;
  border-block: 1px solid var(--gy-line);
}

.gy-cases__stats li { text-align: center; }

.gy-cases__stats strong {
  display: block;
  font-size: var(--gy-fs-h3);
  color: var(--gy-primary);
  font-family: var(--gy-font-serif);
  font-variant-numeric: tabular-nums;
}

.gy-cases__stats span {
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

/* --- 客戶 logo 牆跑馬燈（2026-09） ---------------------------------------- */
/*
  清單在 twig render 兩次接成一條 track，位移 -50% 無縫循環。
  gap 改用 margin-right 落在每個 item 上，兩段的總寬才會嚴格相等，
  -50% 才不會跳針。hover 暫停方便點擊；prefers-reduced-motion 退回
  靜態橫向捲動（不是塞回 grid——內容超寬，捲動比擠壓誠實）。
*/
.gy-clients__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.gy-clients__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: gy-clients-marquee 45s linear infinite;
}

.gy-clients__track .gy-clients__item {
  flex: 0 0 168px;
  margin-right: var(--gy-s3);
}

.gy-clients__marquee:hover .gy-clients__track,
.gy-clients__track:focus-within {
  animation-play-state: paused;
}

@keyframes gy-clients-marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .gy-clients__track .gy-clients__item { flex-basis: 128px; }
  .gy-clients__track { animation-duration: 32s; }
}

@media (prefers-reduced-motion: reduce) {
  .gy-clients__track { animation: none; }
  .gy-clients__marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --- 頁尾 NAP（名稱／地址／電話／營業時間） ------------------------------ */
/*
   Local SEO 與 B2B 信任的基本訊號，每一頁都要看得到 ——
   只放在「聯絡我們」那一頁等於沒有。
*/
.gy-footer__nap {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--gy-s5);
}

.gy-footer__nap dl {
  display: grid;
  gap: var(--gy-s4);
  margin: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gy-footer__nap dl { grid-template-columns: 1.6fr 1fr 1fr 2fr; }
}

.gy-footer__nap dt {
  margin-bottom: 2px;
  color: var(--gy-on-dark-accent);
  font-size: var(--gy-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.gy-footer__nap dd {
  margin: 0;
  color: var(--gy-on-dark);
  font-size: var(--gy-fs-sm);
  line-height: 1.6;
}

.gy-footer__nap a { color: var(--gy-on-dark); }
.gy-footer__nap a:hover { color: var(--gy-on-dark-accent); }

/* 借用 404 模板的空狀態（例如空購物車）：沒有錯誤代碼，上方留白也不必那麼多 */
.gy-404--empty { padding-top: var(--gy-s6); }

/* --- 商品卡的動作列 ------------------------------------------------------ */
/*
   主要動作（加入詢價）吃剩餘空間，購物車與 LINE 收成正方形圖示鈕。
   三顆同寬會讓「加入詢價」失去主次之分 —— 這站的主要轉換是詢價，不是結帳。
*/
.gy-product__actions .gy-card-quote {
  flex: 1;
  min-width: 0;
  padding-inline: var(--gy-s3);
}

.gy-product__actions .gy-btn--icon {
  flex: none;
  width: var(--gy-h-sm);
  min-height: var(--gy-h-sm);
  padding: 0;
  border-radius: var(--gy-r-control);
}

.gy-product__actions .gy-btn--line.gy-btn--icon:hover { background: #058f3f; }

/* --- 動作結果提示 -------------------------------------------------------- */
/*
   從列表頁加入詢價不會換頁，需要一個明確的回饋，
   否則使用者不知道到底有沒有加進去。
*/
/* --- 全站提示條 ---------------------------------------------------------
   加入詢價、加入購物車、收藏、比較、表單結果都走這一個。
   左邊掛品牌 logo（footer.twig 輸出，路徑來自後台設定）——
   提示是站上少數會突然出現在畫面中央的東西，帶著品牌走比較不像系統警告。
   ------------------------------------------------------------------------ */
.gy-toast {
  position: fixed;
  left: 50%;
  bottom: var(--gy-s6);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--gy-s3);
  max-width: min(92vw, 460px);
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(47, 33, 28, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  /* 起點稍微縮小，進場時帶一點回彈 —— 比單純滑上來更有精神 */
  transform: translate(-50%, 14px) scale(0.96);
  transition:
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.25),
    visibility 180ms ease;
}

.gy-toast.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

/* 品牌標記：白色 logo 需要深底才看得見，所以用比提示條更深的一圈 */
.gy-toast__mark {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

/*
  logo 是 600x132 的橫式版：左邊 156px 是緞帶符號，右邊是「禮你客製」。
  圓形裡只要那個符號。

  整張縮到 100px 寬時符號落在 0–26px、中心在 13px；圓形半徑 19px，
  所以往右推 6px 就讓符號正好置中，文字的部分被 overflow 裁掉。
  （用負的 margin-left 會反過來把圖往左拉、露出右邊的文字。）
*/
.gy-toast__mark img {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 100px;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
}

.gy-toast__mark .gy-icon { width: 20px; height: 20px; }

.gy-toast__text { min-width: 0; }

/*
  訊息裡的連結（加入購物車成功會帶商品名與「購物車」）。
  站上的連結色是橘紅，放在這塊深棕底上對比只有 2.4:1 —— 深底上就用白字加底線。
*/
.gy-toast a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gy-toast a:hover { color: #fff; opacity: 0.85; }

.gy-toast--error { background: var(--gy-danger); }

@media (prefers-reduced-motion: reduce) {
  .gy-toast { transition: opacity 120ms ease, visibility 120ms ease; transform: translate(-50%, 0); }
  .gy-toast.is-open { transform: translate(-50%, 0); }
}

@media (max-width: 767px) {
  /* 手機底部有 sticky CTA，提示要往上挪，不然會疊在一起 */
  .gy-toast { bottom: calc(72px + var(--gy-s3)); }
}

/* --- OpenCart 與詢價模組的提示，收進同一個視覺 --------------------------

   common.js 把 .alert 插在 #content 的上一層之前（也就是 .row 前面），
   人在商品頁中段按下「加入購物車」時它出現在捲軸上方，等於沒有回饋。

   giftyou-toast.js 會把這些動態插入的提示搬到 body 底下並掛上
   .gy-toast--legacy，這裡只補它們與樣板版本的差異：
   沒有品牌標記那一格，所以內距左右一致、文字置中。
   ------------------------------------------------------------------------ */
.gy-toast--legacy {
  display: block;
  padding: var(--gy-s3) var(--gy-s5);
  border: 0;
  text-align: center;
}

.gy-toast--legacy a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gy-toast--legacy .close {
  margin-left: var(--gy-s3);
  color: inherit;
  opacity: 0.7;
  text-shadow: none;
}

/* 這些提示裡的 FontAwesome 圖示站上畫不出來，留著只會多一塊空白 */
.gy-toast--legacy > .fa { display: none; }

/* ==========================================================================
   右上角即時清單快顯 (Top-Right Quick Cart / Quote Flyout Drawer)
   ========================================================================== */
.gy-flyout {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 99999;
  width: min(92vw, 390px);
  pointer-events: none;
}

.gy-flyout:not([hidden]) {
  display: block;
}

.gy-flyout__card {
  background: #ffffff;
  border: 1px solid #e8dfd7;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(70, 42, 29, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
  transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gy-flyout.is-open .gy-flyout__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gy-flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fbf8f5;
  border-bottom: 1px solid #f0e7df;
}

.gy-flyout__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gy-flyout__badge-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2e7d32;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gy-flyout__badge-icon .gy-icon {
  width: 14px;
  height: 14px;
}

.gy-flyout__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #2f211c;
  line-height: 1.25;
}

.gy-flyout__count {
  display: block;
  font-size: 12px;
  color: #76645b;
  margin-top: 1px;
}

.gy-flyout__close {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #76645b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  padding: 0;
}

.gy-flyout__close:hover {
  background: #eedfd2;
  color: #2f211c;
}

.gy-flyout__close .gy-icon {
  width: 16px;
  height: 16px;
}

.gy-flyout__body {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gy-flyout__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gy-flyout__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f5ede6;
}

.gy-flyout__item:last-child {
  border-bottom: none;
}

.gy-flyout__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fbf8f5;
  border: 1px solid #f0e7df;
  overflow: hidden;
  flex-shrink: 0;
}

.gy-flyout__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gy-flyout__info {
  flex: 1;
  min-width: 0;
}

.gy-flyout__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2f211c;
  line-height: 1.35;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.gy-flyout__name:hover {
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-flyout__opt {
  display: block;
  font-size: 11px;
  color: #8c786e;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gy-flyout__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #55443d;
}

.gy-flyout__qty {
  font-weight: 600;
}

.gy-flyout__price {
  font-weight: 700;
  color: var(--gy-primary);
}

.gy-flyout__footer {
  padding: 14px 16px;
  background: #fbf8f5;
  border-top: 1px solid #f0e7df;
}

.gy-flyout__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: #55443d;
}

.gy-flyout__total-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--gy-primary);
}

.gy-flyout__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gy-flyout__actions .gy-btn {
  min-height: 38px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .gy-flyout {
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
/* =========================================================================
   product-extra.css —— 商品頁補件（parity-check-2026-08-30.md #6 #7 #8 #10 #11）

   對應模板：catalog/view/theme/giftyou/template/product/product.twig
             catalog/view/theme/giftyou/template/common/trust.twig

   新增的四塊：
     .gy-line-cta      加LINE詢問（#6）
     .gy-b2b-panel     B2B 採購看板 4 條（#7）
     .gy-faq-lead      常見問題分頁的引言（#8，問答本體沿用既有 .gy-accordion）
     .gy-flow          詢價流程 8 步（#8）
     .gy-product-trust 商品頁信任列的外框（#10，內容沿用既有 .gy-trust）
   規格欄位（#11）沿用既有 .gy-spec，不需要新樣式。

   規範：全部用 giftyou.css :root 的 token，無 !important、無寫死色值。
   這支檔案還沒被 header.twig 載入 —— 依 THEME-GUIDE 由整合者併回 giftyou.css。
   ========================================================================= */


/* --- 加LINE詢問 ---------------------------------------------------------
   模板把 .extra-group.gy-line-cta 放在 .buttons-wrapper 的第二個位置，
   但 quote_request.js 的 injectProductButton() 在本主題會走
   $buttonsWrapper.append()，把「加入詢價」接在最後面。
   要拿回正式機的「購物車 → 詢價車 → LINE」順序，只能靠 CSS order：
   動 DOM 位置會讓 JS 插入點跟著跑，order 不會。
   （.quote-btn-wrapper 與 #button-cart 都是預設 order 0，排在 1 前面。） */
.gy-buybox .buttons-wrapper .gy-line-cta {
  order: 2;
  display: flex;
  flex: 0 0 auto;
}

/*
   CTA 層級（改前：購物車是實心主鈕、加LINE詢問整條 344px 最搶眼、
   加入詢價是最小的白底鈕 —— 跟這站的商業目標剛好相反）。

   這站的主要轉換是詢價單，所以：
     加入詢價   整列實心主鈕
     加入購物車 次要白底鈕（GMC 政策要求保留，不能拿掉）
     加LINE詢問 只佔內容寬度的小鈕

   都用 order 控制順序，不動 DOM —— quote_request.js 的 injectProductButton()
   是 append 進來的，改 DOM 位置會讓它的插入點跟著跑。
*/
.gy-buybox .buttons-wrapper .quote-btn-wrapper {
  order: 0;
  /*
     三顆同一列。basis 用 auto（照內容）而不是 0：
     用 0 的話剩餘空間會照比例分掉，詢價拿到 150px（比它需要的多 40px）
     而「加入購物車」只剩 144px、差 6px 就被截成「加入購物…」。
     照內容起算、再讓詢價一個人吸收剩餘空間，兩顆的字就都完整。
  */
  flex: 1 1 auto;
  min-width: 0;
}

.gy-buybox .buttons-wrapper .quote-btn-wrapper .btn-quote-product {
  width: 100%;
  border-color: var(--gy-primary);
  background: var(--gy-primary);
  color: #fff;
}

.gy-buybox .buttons-wrapper .quote-btn-wrapper .btn-quote-product:hover {
  background: var(--gy-primary-hover);
  border-color: var(--gy-primary-hover);
  color: #fff;
}

.gy-buybox .buttons-wrapper .quote-btn-wrapper .btn-quote-product:active {
  background: var(--gy-primary-active);
  border-color: var(--gy-primary-active);
}

.gy-buybox .buttons-wrapper #button-cart {
  order: 1;
  /* 不吸收剩餘空間 —— 它是次要動作，照內容寬度就好 */
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid var(--gy-line-strong);
  background: var(--gy-paper);
  color: var(--gy-primary);
}

.gy-buybox .buttons-wrapper #button-cart:hover {
  background: var(--gy-soft);
  border-color: var(--gy-primary);
  color: var(--gy-primary-hover);
}

/*
   LINE 是輔助管道。三顆同一列時它若照內容寬度撐開會變成 144px、
   跟主要動作「加入詢價」的 150px 幾乎一樣寬，層級就被拉平了。
   讓它一起參與壓縮，但權重最低。
*/
.gy-buybox .buttons-wrapper .gy-line-cta {
  flex: 0 0 auto;
  min-width: 0;
}

.gy-buybox .buttons-wrapper .gy-line-cta .gy-btn {
  flex: 1;
  min-width: 0;
  padding-inline: var(--gy-s4);
}

/*
   購買區這一列同時要放 詢價 / 購物車 / LINE，加上左邊的數量框之後
   只剩約 360px —— 三個完整標籤放不下，LINE 會被截成「加LINE詢」。
   這裡把它收成純圖示（跟旁邊的收藏／比較同一種處理），
   名稱留在 aria-label 與 title。綠底 + LINE 圖示在台灣辨識度夠高。
   欄位夠寬（例如沒有側欄的版面）時再把標籤放出來。
*/
.gy-buybox .buttons-wrapper .gy-line-cta .gy-btn {
  width: var(--gy-h-lg);
  padding-inline: 0;
}

/*
   LINE 這顆的標籤分三段給，因為按鈕區的可用寬度差很多：

     < 1200px   純圖示            按鈕區只有 266px，放不下第三個標籤
     1200–1499  「LINE」          按鈕區 344px，完整標籤會把購物車擠到截字
     >= 1500px  「加LINE詢問」     按鈕區 504px，三顆都放得下完整文字

   實測 1440 給完整標籤時：詢價 150 + 購物車 115（截字）+ LINE 136 = 401
   塞進 344px。短標籤把它壓到 78px 左右，三顆就都完整。
   aria-label 與 title 一直是完整名稱，螢幕閱讀器不受影響。
*/
.gy-buybox .buttons-wrapper .gy-line-cta__label { display: none; }
.gy-buybox .buttons-wrapper .gy-line-cta__full { display: none; }

@media (min-width: 1200px) {
  .gy-buybox .buttons-wrapper .gy-line-cta .gy-btn {
    width: auto;
    padding-inline: var(--gy-s3);
  }
  .gy-buybox .buttons-wrapper .gy-line-cta__label { display: inline; }
}

@media (min-width: 1500px) {
  .gy-buybox .buttons-wrapper .gy-line-cta__short { display: none; }
  .gy-buybox .buttons-wrapper .gy-line-cta__full { display: inline; }
}

/*
   三顆 CTA 排成一列（詢價 / 購物車 / LINE）。
   .buttons-wrapper 預設 flex-wrap: wrap，這裡改成不換行並讓前兩顆可壓縮，
   否則購買區只有 550px 寬時它們會各自跳成一列、疊成三層。
   按鈕文字加 nowrap + ellipsis：寬度不夠時寧可截字，也不要讓某一顆
   突然變兩行、把整列高度拉高。
*/
.gy-buybox .buttons-wrapper {
  flex-wrap: nowrap;
  gap: var(--gy-s2);
}

.gy-buybox .buttons-wrapper > *,
.gy-buybox .buttons-wrapper .btn-quote-product,
.gy-buybox .buttons-wrapper #button-cart {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  /*
     很窄的手機一列塞三顆會每顆都不到 100px，字全被截掉。
     這裡讓它換行：詢價獨佔一列（主要動作），購物車與 LINE 共用第二列。
  */
  .gy-buybox .buttons-wrapper { flex-wrap: wrap; }
  .gy-buybox .buttons-wrapper .quote-btn-wrapper { flex: 1 1 100%; }
}

/* 收藏／比較改成純圖示的方形鈕 */
.gy-buy-secondary .gy-btn--icon {
  flex: 0 0 auto;
  width: var(--gy-h-lg);
  min-width: 0;
  padding: 0;
}


/* --- B2B 採購看板 -------------------------------------------------------
   <dl>：四條都是「名稱 → 說明」的成對資料。
   dt/dd 用 grid 排成「圖示 ｜ 名稱＋說明」，dd 要清掉瀏覽器預設縮排。 */
.gy-b2b-panel {
  display: grid;
  gap: var(--gy-s3);
  margin: var(--gy-s5) 0 0;
  padding: var(--gy-s4);
  background: var(--gy-soft);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
}

@media (min-width: 560px) {
  .gy-b2b-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gy-s4); }
}

.gy-b2b-panel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--gy-s3);
  row-gap: 2px;
}

.gy-b2b-panel__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gy-r-pill);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  color: var(--gy-brand);
}

.gy-b2b-panel__icon .gy-icon { width: 18px; height: 18px; }

.gy-b2b-panel dt {
  font-weight: 700;
  color: var(--gy-ink);
  font-size: var(--gy-fs-sm);
}

.gy-b2b-panel dd {
  margin: 0;
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  line-height: 1.6;
}


/* --- 常見問題分頁 -------------------------------------------------------
   問答本體用既有的 .gy-accordion（<details>），這裡只補引言。 */
.gy-faq-lead {
  margin: 0 0 var(--gy-s4);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-body);
}


/* --- 詢價流程分頁 -------------------------------------------------------
   <ol> 保留序號語意；視覺上的號碼用 counter 產生，不另外寫死在 HTML。 */
.gy-flow {
  counter-reset: gy-flow;
  display: grid;
  gap: var(--gy-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) { .gy-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .gy-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gy-flow__step {
  counter-increment: gy-flow;
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gy-s1);
  padding: var(--gy-s5) var(--gy-s4) var(--gy-s4);
  text-align: center;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
}

/* 步驟號碼。aria-hidden 不需要——它是 CSS 產生的內容，不進無障礙樹的可讀文字流，
   而 <ol> 本身已經帶了順序語意。 */
.gy-flow__step::before {
  content: counter(gy-flow);
  position: absolute;
  top: var(--gy-s3);
  left: var(--gy-s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--gy-s1);
  border-radius: var(--gy-r-pill);
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  line-height: 1;
}

.gy-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--gy-s1);
  border-radius: var(--gy-r-pill);
  background: var(--gy-soft);
  color: var(--gy-brand);
}

.gy-flow__icon .gy-icon { width: 22px; height: 22px; }

.gy-flow__title {
  font-family: var(--gy-font-serif);
  font-weight: 700;
  color: var(--gy-ink);
  font-size: var(--gy-fs-h4);
}

.gy-flow__desc {
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  line-height: 1.6;
}

.gy-flow__cta { margin: var(--gy-s5) 0 0; }

/* 手機改成橫向一列（圖示｜文字），八張置中卡片會拉得太長 */
@media (max-width: 559px) {
  .gy-flow__step {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: var(--gy-s4);
    padding: var(--gy-s3) var(--gy-s4) var(--gy-s3) var(--gy-s6);
    text-align: left;
  }

  .gy-flow__step::before { top: 50%; left: var(--gy-s2); transform: translateY(-50%); }
  .gy-flow__icon { grid-row: 1 / span 2; margin-bottom: 0; }
}


/* --- 商品頁信任列 -------------------------------------------------------
   內容與首頁共用 common/trust.twig；首頁那份外面是整段 .gy-section--soft，
   商品頁在 #content 裡面，所以自己畫一個同色的框，不去改 .gy-trust 本身。 */
.gy-product-trust {
  margin-top: var(--gy-s7);
  padding: var(--gy-s5);
  background: var(--gy-soft);
  border-radius: var(--gy-r-card);
}

/* --- 商品頁推薦區 -------------------------------------------------------- */
.gy-recommend {
  padding-block: var(--gy-s7);
  border-top: 1px solid var(--gy-line);
}

.gy-recommend__title {
  margin-bottom: var(--gy-s5);
  padding-bottom: var(--gy-s3);
  border-bottom: 3px solid var(--gy-brand);
  display: inline-block;
}

.gy-recommend .gy-tabs { margin-bottom: 0; }
.gy-recommend__panel { padding-top: var(--gy-s5); }
.gy-recommend__panel[hidden] { display: none; }

/* ==========================================================================
   會員中心
   ========================================================================== */
.gy-acct-hub {
  display: grid;
  gap: var(--gy-s4);
  grid-template-columns: 1fr;
  margin-bottom: var(--gy-s6);
}

@media (min-width: 768px) {
  .gy-acct-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .gy-acct-hub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 每一組是一張卡，而不是四欄裸清單 —— 沒有邊界時很難看出哪些項目是一組 */
.gy-acct-hub > section,
.gy-acct-hub > div,
.gy-acct-group {
  display: flex;
  flex-direction: column;
  padding: var(--gy-s5);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  box-shadow: var(--gy-shadow-1);
}

.gy-acct-group__title {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  margin: 0 0 var(--gy-s3);
  padding-bottom: var(--gy-s3);
  border-bottom: 1px solid var(--gy-line);
  font-family: var(--gy-font-serif);
  font-size: var(--gy-fs-h4);
  font-weight: 700;
}

.gy-acct-group__title .gy-icon { color: var(--gy-brand); }

.gy-acct-hub ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gy-acct-hub li + li { margin-top: 2px; }

/* 整列可點，不是只有幾個字 —— 觸控目標也才夠大 */
.gy-acct-hub li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s2);
  min-height: var(--gy-h-lg);
  padding: var(--gy-s2) var(--gy-s3);
  margin-inline: calc(var(--gy-s3) * -1);
  border-radius: var(--gy-r-control);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  font-weight: 500;
}

.gy-acct-hub li a:hover {
  background: var(--gy-soft);
  color: var(--gy-primary);
  text-decoration: none;
}

.gy-acct-hub li a::after {
  content: "›";
  color: var(--gy-line-strong);
  font-size: 16px;
}

.gy-acct-hub li a:hover::after { color: var(--gy-primary); }

/*
  頁面底部那排文字連結是 OpenCart 原生的重複導覽（上面的卡片已經有全部項目）。
  收起來當作次要的快速列，不要和卡片搶注意力。
*/
/* 這個 class 也被掛在 hub 內的每一組上，若無條件套用會把整組排成橫向 pill
   並讓標題垂直置中。只有獨立出現（頁面底部的快速列）時才用橫向排法。 */
.gy-account-nav--tap:not(.gy-acct-hub *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  padding: var(--gy-s4);
  border-top: 1px solid var(--gy-line);
  font-size: var(--gy-fs-xs);
}

.gy-account-nav--tap:not(.gy-acct-hub *) a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gy-h-sm);
  padding: 0 var(--gy-s3);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  color: var(--gy-muted);
}

.gy-account-nav--tap:not(.gy-acct-hub *) a:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

/* --- 帳號區的表格頁（訂單／退貨／點數…） -------------------------------- */
.gy-acct-table-wrap {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  overflow: hidden;
  background: var(--gy-paper);
}

/* 原生帳號頁的表格沒有主題 class，直接補上讓它們不至於是裸表格 */
#content table.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gy-paper);
  font-size: var(--gy-fs-sm);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  overflow: hidden;
}

#content table.table th,
#content table.table td {
  padding: var(--gy-s3) var(--gy-s4);
  border-bottom: 1px solid var(--gy-line);
  text-align: left;
  vertical-align: middle;
}

#content table.table thead th {
  background: var(--gy-soft);
  font-weight: 700;
  color: var(--gy-ink-2);
  white-space: nowrap;
}

#content table.table tbody tr:last-child td { border-bottom: 0; }

/* --- Bootstrap3 的 list-group（default 主題的側欄與清單大量使用） -------- */
/*
   帳號子頁的側欄、以及其他還沒改寫、fallback 到 default 的頁面都用這組 class。
   沒有樣式時會變成一排擠在一起的純文字連結。
*/
.list-group {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--gy-s5);
  padding: var(--gy-s2);
  list-style: none;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
}

.list-group-item {
  display: flex;
  align-items: center;
  min-height: var(--gy-h-lg);
  padding: var(--gy-s2) var(--gy-s3);
  border: 0;
  border-radius: var(--gy-r-control);
  background: transparent;
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
}

a.list-group-item:hover {
  background: var(--gy-soft);
  color: var(--gy-primary);
  text-decoration: none;
}

.list-group-item.active,
a.list-group-item.active {
  background: var(--gy-brand-soft);
  color: var(--gy-primary);
  font-weight: 700;
}

/* --- 帳號頁底部的原生快速導覽 -------------------------------------------- */
/*
   OpenCart 原生會在帳號頁尾再列一次所有連結（上面的卡片已經有全部項目）。
   收成一排 pill 當次要導覽，不要和卡片搶注意力，也不要是一串擠在一起的裸文字。
*/
#content > p:last-of-type > a,
.gy-acct-hub ~ p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gy-h-sm);
  margin: 0 var(--gy-s1) var(--gy-s2) 0;
  padding: 0 var(--gy-s3);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

#content > p:last-of-type > a:hover,
.gy-acct-hub ~ p a:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

/* 詢價頁 hero 的說明句 —— 單列版裡跟標題同行（基線對齊），不再自己佔一行 */
.quote-hero-compact .hero-desc {
  margin-bottom: 0;
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  max-width: 60ch;
}

.quote-hero-sla {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  padding: var(--gy-s2) var(--gy-s4);
  border-radius: var(--gy-r-pill);
  background: var(--gy-success-soft);
  color: var(--gy-success);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

/* fa-clock-o 現在有自己的圖形了（見 Font Awesome 相容層第二批），
   不必再借 i-check 的勾當替身，只要統一尺寸即可 */
.quote-hero-sla .fa { width: 16px; height: 16px; }

/* 404 的大字代碼是純裝飾（模板上已 aria-hidden），但它在畫面上仍是資訊層級的
   一部分，1.70:1 太淡到像沒印出來。加深到接近 UI 元件的 3:1。 */
.gy-404__code { color: var(--gy-line-strong); }

@supports (color: color-mix(in srgb, red, blue)) {
  .gy-404__code { color: color-mix(in srgb, var(--gy-line-strong) 55%, var(--gy-ink-2)); }
}

/* ==========================================================================
   詢價送出成功頁 —— 這站的主要轉換終點
   （原本這段是 quote_request_success.twig 的 inline <style>，用舊主題色 +
     Font Awesome 圖示。搬進來改走 token，圖示改 sprite。）
   ========================================================================== */

.gy-done {
  max-width: 600px;
  margin: var(--gy-s6) auto;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
  text-align: center;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-feature);
  box-shadow: var(--gy-shadow-2);
}

/* 打勾章。用實心圓底而不是只有一個線條勾，送出成功要一眼看得出來 */
.gy-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--gy-s4);
  color: #fff;
  background: var(--gy-success);
  border-radius: 50%;
  animation: gy-done-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.gy-done__mark .gy-icon {
  width: 32px;
  height: 32px;
  stroke-width: 2.4;
}

@keyframes gy-done-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.gy-done__title {
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-h2);
  color: var(--gy-ink);
}

.gy-done__desc {
  margin: 0 0 var(--gy-s5);
  color: var(--gy-muted);
  font-size: var(--gy-fs-body);
}

/* 單號 —— 這頁最需要被記住的資訊，所以給它自己的一塊 */
.gy-done__number {
  margin-bottom: var(--gy-s5);
  padding: var(--gy-s3) var(--gy-s5);
  background: var(--gy-soft);
  border-radius: var(--gy-r-control);
}

.gy-done__number-label {
  display: block;
  margin-bottom: var(--gy-s1);
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-done__number-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gy-primary);
}

/* LINE CTA。左圖示、中文字、右箭頭；文字靠左才讀得順，整塊置中會像標語 */
.gy-done__line {
  display: flex;
  align-items: center;
  gap: var(--gy-s3);
  margin-bottom: var(--gy-s5);
  padding: var(--gy-s3) var(--gy-s4);
  text-align: left;
  color: #fff;
  background: var(--gy-line-green);
  border-radius: var(--gy-r-control);
  min-height: var(--gy-h-lg);
  transition: background var(--gy-ease);
}

.gy-done__line:hover,
.gy-done__line:focus-visible {
  color: #fff;
  background: #04672c;
  text-decoration: none;
}

.gy-done__line-icon { flex: none; width: 28px; height: 28px; }
.gy-done__line-go   { flex: none; margin-left: auto; }

.gy-done__line-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gy-done__line-text strong { font-size: var(--gy-fs-body); }
.gy-done__line-text small  { font-size: var(--gy-fs-sm); opacity: 0.92; }

/*
   桌機限定的 LINE QR code 面板。預設不顯示：
   手機直接點上面的按鈕就好，QR 是給「人在電腦前、LINE 在手機上」的情境。
   .is-ready 由頁內 script 在 QR 產生成功後才加 —— 不用 hidden 屬性是因為
   author 樣式的 display 會蓋過 UA 的 [hidden]，反而失效。
*/
.gy-done__qr { display: none; }

@media (min-width: 992px) {
  .gy-done__qr.is-ready {
    display: flex;
    align-items: center;
    gap: var(--gy-s4);
    margin-bottom: var(--gy-s5);
    padding: var(--gy-s3) var(--gy-s4);
    text-align: left;
    background: var(--gy-soft);
    border: 1px solid var(--gy-line);
    border-radius: var(--gy-r-control);
  }
}

.gy-done__qr-code {
  flex: none;
  padding: 6px;
  background: #fff; /* QR 四周要留白色靜區，掃描器才好辨識 */
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  line-height: 0;
}

.gy-done__qr-code img,
.gy-done__qr-code canvas { display: block; width: 132px; height: 132px; }

.gy-done__qr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gy-done__qr-text strong { font-size: var(--gy-fs-body); color: var(--gy-ink); }
.gy-done__qr-text small  { font-size: var(--gy-fs-sm); color: var(--gy-muted); }

.gy-done__contact {
  margin-bottom: var(--gy-s5);
  padding: var(--gy-s4);
  background: var(--gy-canvas);
  border-radius: var(--gy-r-control);
}

.gy-done__contact-title {
  margin: 0 0 var(--gy-s2);
  font-weight: 600;
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.gy-done__contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gy-s2) var(--gy-s5);
  margin: 0;
}

.gy-done__contact-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  font-size: var(--gy-fs-sm);
  color: var(--gy-primary);
}

.gy-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gy-s3);
}

.gy-done__actions .gy-btn { min-width: 150px; }

@media (max-width: 767px) {
  .gy-done { margin: var(--gy-s4) auto; }
  .gy-done__mark { width: 56px; height: 56px; }
  /* 手機上兩顆並排會各自太窄，改成整寬堆疊 */
  .gy-done__actions .gy-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   Font Awesome 相容層（第二批）

   這個主題不載入 Font Awesome，但站上仍有 37 個模板寫著 <i class="fa fa-*">
   （詢價表單頁一頁就佔 20 個）。原本只有 8 個圖示做了 mask 補丁，其餘靠一條
   越來越長的 :not() 鏈整個隱藏 —— 結果是那些位置直接空白，看不出原本想表達
   什麼，而且每補一個圖示就得回頭改那條鏈。

   改成反向邏輯：.fa 預設不顯示，有對應圖形的 .fa-* 各自把自己開回來。
   之後新增圖示只要加一條規則，不必再動別人。
   筆畫參數與 icons.twig 的 sprite 一致（1.8 / round），兩套混在同一頁才不會
   一邊粗一邊細。
   ========================================================================== */

:root {
  --gy-fa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --gy-fa-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --gy-fa-times-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --gy-fa-exclamation-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.5' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
  --gy-fa-info-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-5'/%3E%3Ccircle cx='12' cy='7.8' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
  --gy-fa-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --gy-fa-angle-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  --gy-fa-angle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --gy-fa-angle-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --gy-fa-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --gy-fa-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --gy-fa-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --gy-fa-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --gy-fa-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --gy-fa-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
  --gy-fa-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h10M18 18h2'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E");
  --gy-fa-shopping-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.4 12.2a1.6 1.6 0 0 0 1.6 1.3h9.2a1.6 1.6 0 0 0 1.6-1.3L21 7H5'/%3E%3C/svg%3E");
  --gy-fa-shopping-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.1a1.6 1.6 0 0 1-1.6 1.4H7.8a1.6 1.6 0 0 1-1.6-1.4Z'/%3E%3Cpath d='M9 11V6a3 3 0 0 1 6 0v5'/%3E%3C/svg%3E");
  --gy-fa-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1.6'/%3E%3Cpath d='M3 13h18M12 9v12'/%3E%3Cpath d='M12 9S10.8 3.6 8.2 4.3 9.6 9 12 9Zm0 0s1.2-5.4 3.8-4.7S14.4 9 12 9Z'/%3E%3C/svg%3E");
  --gy-fa-file-text-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --gy-fa-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --gy-fa-calendar-check-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4m-7 9 2 2 4-4'/%3E%3C/svg%3E");
  --gy-fa-clock-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
  --gy-fa-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2l1.4-2.2h7.8L17.3 7h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E");
  --gy-fa-cloud-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V6m0 0-3.5 3.5M12 6l3.5 3.5M5 18h14'/%3E%3C/svg%3E");
  --gy-fa-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v10m0 0-3.5-3.5M12 15l3.5-3.5M5 19h14'/%3E%3C/svg%3E");
  --gy-fa-commenting-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3 1.2-4.3A8 8 0 1 1 21 12Z'/%3E%3C/svg%3E");
  --gy-fa-headphones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13.5' width='4.5' height='7' rx='1.8'/%3E%3Crect x='17' y='13.5' width='4.5' height='7' rx='1.8'/%3E%3C/svg%3E");
  --gy-fa-lightbulb-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18h5.6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.4 10.9c.5.4.9 1 .9 1.7v.4h5v-.4c0-.7.4-1.3.9-1.7A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
  --gy-fa-paint-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 3.5 6 6L9 21H3v-6Z'/%3E%3Cpath d='m12.5 5.5 6 6'/%3E%3C/svg%3E");
  --gy-fa-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1.6'/%3E%3Cpath d='M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01M10 21v-3h4v3'/%3E%3C/svg%3E");
  --gy-fa-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.4 3 8.1 7 9 4-.9 7-4.6 7-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --gy-fa-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E");
  --gy-fa-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3Z'/%3E%3Cpath d='M14 9h4l3 3v4h-7Z'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E");
  --gy-fa-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  --gy-fa-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
  --gy-fa-map-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --gy-fa-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --gy-fa-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.6 2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.42l-5.8 3.05 1.1-6.46-4.69-4.58 6.48-.95Z'/%3E%3C/svg%3E");
  --gy-fa-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='m12 2.6 2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.42l-5.8 3.05 1.1-6.46-4.69-4.58 6.48-.95Z'/%3E%3C/svg%3E");
  --gy-fa-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
}

.fa.fa-check {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-check);
  mask-image: var(--gy-fa-check);
}

.fa.fa-check-circle,
.fa.fa-check-circle-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-check-circle);
  mask-image: var(--gy-fa-check-circle);
}

.fa.fa-times-circle,
.fa.fa-times-circle-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-times-circle);
  mask-image: var(--gy-fa-times-circle);
}

.fa.fa-exclamation-circle,
.fa.fa-exclamation-triangle,
.fa.fa-warning {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-exclamation-circle);
  mask-image: var(--gy-fa-exclamation-circle);
}

.fa.fa-info-circle,
.fa.fa-question-circle {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-info-circle);
  mask-image: var(--gy-fa-info-circle);
}

.fa.fa-angle-down,
.fa.fa-caret-down,
.fa.fa-chevron-down,
.fa.fa-sort-desc {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-angle-down);
  mask-image: var(--gy-fa-angle-down);
}

.fa.fa-angle-up,
.fa.fa-caret-up,
.fa.fa-chevron-up,
.fa.fa-sort-asc {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-angle-up);
  mask-image: var(--gy-fa-angle-up);
}

.fa.fa-angle-right,
.fa.fa-caret-right,
.fa.fa-chevron-right {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-angle-right);
  mask-image: var(--gy-fa-angle-right);
}

.fa.fa-angle-left,
.fa.fa-caret-left,
.fa.fa-chevron-left {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-angle-left);
  mask-image: var(--gy-fa-angle-left);
}

.fa.fa-plus,
.fa.fa-plus-circle {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-plus);
  mask-image: var(--gy-fa-plus);
}

.fa.fa-minus,
.fa.fa-minus-circle {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-minus);
  mask-image: var(--gy-fa-minus);
}

.fa.fa-search {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-search);
  mask-image: var(--gy-fa-search);
}

.fa.fa-user,
.fa.fa-user-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-user);
  mask-image: var(--gy-fa-user);
}

.fa.fa-lock {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-lock);
  mask-image: var(--gy-fa-lock);
}

.fa.fa-list,
.fa.fa-list-ul,
.fa.fa-bars,
.fa.fa-navicon {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-list);
  mask-image: var(--gy-fa-list);
}

.fa.fa-sliders,
.fa.fa-filter {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-sliders);
  mask-image: var(--gy-fa-sliders);
}

.fa.fa-shopping-cart {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-shopping-cart);
  mask-image: var(--gy-fa-shopping-cart);
}

.fa.fa-shopping-bag,
.fa.fa-shopping-basket {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-shopping-bag);
  mask-image: var(--gy-fa-shopping-bag);
}

.fa.fa-gift {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-gift);
  mask-image: var(--gy-fa-gift);
}

.fa.fa-file-text-o,
.fa.fa-file-text,
.fa.fa-file-o,
.fa.fa-file {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-file-text-o);
  mask-image: var(--gy-fa-file-text-o);
}

.fa.fa-calendar,
.fa.fa-calendar-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-calendar);
  mask-image: var(--gy-fa-calendar);
}

.fa.fa-calendar-check-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-calendar-check-o);
  mask-image: var(--gy-fa-calendar-check-o);
}

.fa.fa-clock-o,
.fa.fa-clock {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-clock-o);
  mask-image: var(--gy-fa-clock-o);
}

.fa.fa-camera,
.fa.fa-image,
.fa.fa-picture-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-camera);
  mask-image: var(--gy-fa-camera);
}

.fa.fa-cloud-upload,
.fa.fa-upload {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-cloud-upload);
  mask-image: var(--gy-fa-cloud-upload);
}

.fa.fa-download {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-download);
  mask-image: var(--gy-fa-download);
}

.fa.fa-commenting-o,
.fa.fa-comment,
.fa.fa-comment-o,
.fa.fa-comments,
.fa.fa-comments-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-commenting-o);
  mask-image: var(--gy-fa-commenting-o);
}

.fa.fa-headphones,
.fa.fa-support,
.fa.fa-life-ring {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-headphones);
  mask-image: var(--gy-fa-headphones);
}

.fa.fa-lightbulb-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-lightbulb-o);
  mask-image: var(--gy-fa-lightbulb-o);
}

.fa.fa-paint-brush,
.fa.fa-magic,
.fa.fa-pencil,
.fa.fa-edit {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-paint-brush);
  mask-image: var(--gy-fa-paint-brush);
}

.fa.fa-building,
.fa.fa-building-o,
.fa.fa-industry {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-building);
  mask-image: var(--gy-fa-building);
}

.fa.fa-shield {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-shield);
  mask-image: var(--gy-fa-shield);
}

.fa.fa-refresh,
.fa.fa-repeat,
.fa.fa-undo,
.fa.fa-reply {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-refresh);
  mask-image: var(--gy-fa-refresh);
}

.fa.fa-truck {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-truck);
  mask-image: var(--gy-fa-truck);
}

.fa.fa-envelope,
.fa.fa-envelope-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-envelope);
  mask-image: var(--gy-fa-envelope);
}

.fa.fa-phone {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-phone);
  mask-image: var(--gy-fa-phone);
}

.fa.fa-map-marker {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-map-marker);
  mask-image: var(--gy-fa-map-marker);
}

.fa.fa-eye {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-eye);
  mask-image: var(--gy-fa-eye);
}

.fa.fa-star-o {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-star-o);
  mask-image: var(--gy-fa-star-o);
}

.fa.fa-star {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-star);
  mask-image: var(--gy-fa-star);
}

.fa.fa-spinner,
.fa.fa-circle-o-notch,
.fa.fa-cog,
.fa.fa-gear {
  display: inline-block;
  -webkit-mask-image: var(--gy-fa-spinner);
  mask-image: var(--gy-fa-spinner);
}

/* fa-spinner 在 Font Awesome 裡是靠 fa-spin 轉的，這裡讓它自己轉，
   否則看起來像一個卡住不動的圓弧。 */
.fa.fa-spinner,
.fa.fa-circle-o-notch,
.fa.fa-spin {
  animation: gy-fa-spin 900ms linear infinite;
}

@keyframes gy-fa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fa.fa-spinner,
  .fa.fa-circle-o-notch,
  .fa.fa-spin { animation: none; }
}

/* 詢價車底部的動作列。原本是 quote_request_cart.twig 的 inline <style>，
   搬進來改用間距 token（原本寫死 10px / 15px）。 */
.quote-cart-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s3);
  padding: var(--gy-s4) 0;
}

.quote-cart-buttons .btn-group-left {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s3);
}

.quote-cart-buttons .btn { white-space: nowrap; }

/* Font Awesome 的尺寸／對齊工具類別。mask 圖示的寬高是 1.15em，
   所以放大只要改 font-size，跟 FA 原本的行為一致。 */
.fa.fa-lg { font-size: 1.33em; vertical-align: -0.24em; }
.fa.fa-2x { font-size: 2em; }
.fa.fa-3x { font-size: 3em; }
.fa.fa-4x { font-size: 4em; }
.fa.fa-5x { font-size: 5em; }

/* fa-fw 是固定寬度，讓並排的清單項圖示對齊 */
.fa.fa-fw { width: 1.28em; }

/* ==========================================================================
   分類頁的說明文字

   這段是寫給搜尋引擎與 AI 的關鍵字段落，對讀者沒有價值 ——
   來分類頁的人要的是商品。現在 twig 直接掛 .gy-sr-only 輸出，
   HTML 還在、螢幕閱讀器也讀得到，畫面上不佔位置。

   原本收在 3 行裡再配一顆「展開完整說明」，那組樣式（.gy-cat-desc*）
   連同 giftyou.js 的展開邏輯都不再有人用了，一併移除。
   ========================================================================== */

/* ym_reviews 擴充自帶的樣式表把星等連結寫死 #555（theme/journal3/stylesheet/
   ym_reviews.css:111）。那支是擴充的檔案，改了會在更新時被蓋掉，
   所以在這裡覆寫成主題的次要文字色。 */
/* a.ymr-trust 而不是 .ymr-trust：擴充自己的 ym_reviews.css 也是 .ymr-trust
   （同特異度），而且載入順序在 giftyou.css 之後，同級的話它會贏。
   多一個元素選擇器就壓得住，也不必動到擴充的檔案。 */
a.ymr-trust,
a.ymr-trust b { color: var(--gy-muted); }

/* ==========================================================================
   燈箱 / 回到頂部 / 商品頁優惠提示
   ========================================================================== */

/* --- 燈箱 --------------------------------------------------------------- */
/* 沒有引入套件：這裡只需要「放大一張圖、左右換、關掉」。 */

html.gy-lightbox-open { overflow: hidden; }

.gy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--gy-s3);
  padding: clamp(12px, 4vw, 40px);
  background: rgba(28, 20, 16, 0.92);
}

.gy-lightbox.is-open { display: flex; }

.gy-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
}

.gy-lightbox__stage img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
}

.gy-lightbox__close,
.gy-lightbox__nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--gy-r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-lightbox__close:hover,
.gy-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }

.gy-lightbox__close { position: absolute; top: var(--gy-s4); right: var(--gy-s4); }

.gy-lightbox__nav--prev .gy-icon { transform: rotate(90deg); }
.gy-lightbox__nav--next .gy-icon { transform: rotate(-90deg); }

.gy-lightbox__count {
  position: absolute;
  left: 50%;
  bottom: var(--gy-s4);
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--gy-fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
  /* 手機把左右鍵壓到底部兩側，才不會蓋住圖本身 */
  .gy-lightbox__nav { position: absolute; bottom: calc(var(--gy-s4) + 40px); }
  .gy-lightbox__nav--prev { left: var(--gy-s4); }
  .gy-lightbox__nav--next { right: var(--gy-s4); }
}

/* --- 回到頂部 ------------------------------------------------------------ */
.gy-to-top {
  position: fixed;
  right: var(--gy-s4);
  bottom: var(--gy-s4);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  padding: 0;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-pill);
  background: var(--gy-paper);
  color: var(--gy-primary);
  box-shadow: var(--gy-shadow-2);
  cursor: pointer;
  transition: background var(--gy-ease), transform var(--gy-ease);
}

.gy-to-top:hover { background: var(--gy-soft); transform: translateY(-2px); }
.gy-to-top .gy-icon { transform: rotate(180deg); }

@media (max-width: 767px) {
  /* 手機下方有一條固定的詢價 CTA，往上讓開它 */
  .gy-to-top { bottom: calc(var(--gy-h-lg) + var(--gy-s5) + env(safe-area-inset-bottom)); }
}

/* --- 商品頁的目前優惠 ---------------------------------------------------- */
/* 頁首公告可以被關掉，但這一行就在下單決策的位置上，關不掉也不該關 */
.gy-promo-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  margin: 0 0 var(--gy-s4);
  padding: var(--gy-s3) var(--gy-s4);
  border: 1px dashed var(--gy-brand);
  border-radius: var(--gy-r-control);
  background: var(--gy-soft);
  font-size: var(--gy-fs-sm);
  color: var(--gy-ink-2);
}

.gy-promo-inline .gy-icon { flex: none; color: var(--gy-primary); }
.gy-promo-inline > span { flex: 1; min-width: 0; }

.gy-promo-inline a {
  flex: none;
  font-weight: 600;
  color: var(--gy-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 商品描述裡的圖片 ---------------------------------------------------- */
/*
   後台貼進來的描述圖多半沒有任何對齊設定，靠左貼邊在寬版面上很難看。
   置中並限制寬度，長圖也不會撐破欄位。
*/
.gy-prose img {
  display: block;
  margin-inline: auto;
  height: auto;
}

.gy-prose p:has(> img) { text-align: center; }

/* ==========================================================================
   置頂精簡列的讓位，以及大螢幕的版面寬度
   ========================================================================== */

/*
   .gy-slim（misc-fixes.css）是 position:fixed、top:0、高 60px 的精簡列，
   捲動後才出現。它會蓋住任何靠頁面頂端定位的東西：
     - 錨點跳轉（分頁籤、目錄連結）的目標會被壓在列子底下
     - sticky 元素若 top:0 也會被蓋住
   統一用一個 token 讓位，改高度時只要改這裡。
*/
:root {
  --gy-slim-h: 60px;
  --gy-sticky-top: calc(var(--gy-slim-h) + var(--gy-s4));
}

/* 只有桌機才有那條列（misc-fixes.css 的 @media >=992px） */
@media (max-width: 991px) {
  :root { --gy-sticky-top: var(--gy-s4); }
}

/* 錨點跳轉時預留出精簡列的高度，不然標題會剛好被蓋掉 */
:target,
[id] { scroll-margin-top: var(--gy-sticky-top); }

/*
   大螢幕加寬。原本固定 1180px，在 1920 的螢幕上左右各空 370px，
   商品格線每列少放一張卡、商品頁的兩欄也擠。
   內文另有 .gy-prose 的 72ch 上限，加寬不會讓段落變得難讀。
*/
@media (min-width: 1500px) {
  :root { --gy-content: 1340px; --gy-wide: 1500px; }
}

@media (min-width: 1800px) {
  :root { --gy-content: 1500px; --gy-wide: 1680px; }
}

/* 商品描述欄置中。.gy-prose 有 72ch 的閱讀寬度上限，在寬螢幕上原本整欄
   靠左，圖片跟著偏左看起來像沒排版。整欄置中就對齊版面中線了。 */
.gy-tabpanel.gy-prose { margin-inline: auto; }

/* 詢價單頁標題上的禮物圖示。原本沒有任何規則，只吃到 .fa 的 1.15em ——
   單獨一個 16px 的小圖掛在大標題上方，看起來像掉出來的字元。
   放大並染成品牌色，讓它像標題的一部分。 */
.quote-hero .hero-icon,
.hero-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--gy-s2);
  color: var(--gy-brand);
}

/* ==========================================================================
   分類頁／搜尋頁的版面

   改前是三欄互相擠壓：
     #column-left（OpenCart 分類模組，291px、31 個連結）
     .gy-listing__aside（我們的篩選面板，260px）
     .gy-listing__main（商品，只剩 565px → 一排只放得下 2 張卡）

   而那三個區塊裡有兩個講的是同一件事：左欄的分類連結、篩選面板的「分類目錄」、
   商品區上方的子分類標籤雲 —— 同一組子分類在一頁出現三次。

   留下篩選面板（有勾選與件數，能真的篩）與標籤雲（是內部連結，對 SEO 有用），
   把重複的左欄收掉，空間還給商品。
   ⚠️ 只在列表頁收，其他頁面的 #column-left 不受影響。
   要還原：把下面這段 display:none 拿掉即可，模組本身沒有被停用。
   ========================================================================== */

html.route-product-category #column-left,
html.route-product-search #column-left,
html.route-product-catalog #column-left {
  display: none;
}

html.route-product-category #content.col-sm-9,
html.route-product-search #content.col-sm-9,
html.route-product-catalog #content.col-sm-9 {
  width: 100%;
}

/*
   子分類標籤雲。
   桌機：精緻藥丸標籤，預設限制兩排可展開。
   手機：單列橫向滑動晶片（Scrollable Chips），不佔垂直屏寬。
*/
.gy-subcats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gy-s2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(var(--gy-h-sm) * 2 + var(--gy-s2));
  overflow: hidden;
}

.gy-subcats__list.is-expanded {
  max-height: none;
  overflow: visible;
}

.gy-subcats__more {
  margin: calc(var(--gy-s2) * -1) 0 var(--gy-s5);
  padding: var(--gy-s1) 0;
  border: 0;
  background: none;
  color: var(--gy-primary);
  font: inherit;
  font-size: var(--gy-fs-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gy-subcats__more:hover { color: var(--gy-primary-hover); }
.gy-subcats.is-short .gy-subcats__more { display: none; }

@media (max-width: 767px) {
  .gy-subcats {
    margin-inline: calc(var(--gy-s4) * -1);
    padding-inline: var(--gy-s4);
    margin-bottom: var(--gy-s3);
  }
  .gy-subcats__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-height: none;
    padding-bottom: var(--gy-s2);
  }
  .gy-subcats__list::-webkit-scrollbar { display: none; }
  .gy-subcats__list li { flex: 0 0 auto; }
  .gy-subcats__list li a {
    white-space: nowrap;
    background: #fff;
    border-color: #e5ded7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .gy-subcats__more { display: none !important; }
}

/* 工具列排成一列：件數／比較在左，排序與每頁筆數在右 */
.gy-toolbar { flex-wrap: nowrap; }
.gy-toolbar select { flex: 0 0 auto; max-width: 180px; }

@media (max-width: 767px) {
  .gy-toolbar { flex-wrap: wrap; gap: var(--gy-s2); }
  .gy-toolbar select { flex: 1; min-width: 130px; }
}

/* ==========================================================================
   小型文字連結的點擊區域

   「立即下單」「查看全部」「商品比較(0)」「N 筆商品評論」這幾個都是獨立的
   動作連結，但只有文字高度（23px）。它們不是段落裡的內文連結，
   所以 WCAG 2.5.8 的最小尺寸是適用的 —— 手指點不準。

   用 padding 把命中區域撐開，而不是改 min-height：後者會把這些連結
   在 flex 列裡撐開、影響旁邊元素的對齊。
   ========================================================================== */
.gy-notice__inner a,
.gy-showcase__more,
.gy-toolbar__link,
.gy-rating__count {
  padding-block: var(--gy-s2);
}

@media (pointer: coarse) {
  /* 觸控裝置再放寬一點，湊到 44px 的建議值 */
  .gy-notice__inner a,
  .gy-showcase__more,
  .gy-toolbar__link,
  .gy-rating__count {
    padding-block: var(--gy-s3);
  }
}

/* 網站地圖的分組標題。其中「會員中心」的文字包在 <a> 裡（連到會員中心），
   其餘三個是純文字 —— 結果只有它繼承了連結色，四個標題兩種顏色。
   標題就該長得一樣，可點的用底線表示，不用換色。 */
.gy-sitemap__group h2 a {
  color: inherit;
  text-decoration: none;
}

.gy-sitemap__group h2 a:hover,
.gy-sitemap__group h2 a:focus-visible {
  color: var(--gy-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 有對應商品的 logo 是連結，要看得出可點 */
.gy-clients__item > a { cursor: pointer; }

/* 這一格裡的 logo 是客戶的品牌，不能拿來當 hover 效果的變化對象
   （放大、變色都會動到別人的識別），所以回饋做在格子本身 */
.gy-clients__item:has(> a):hover {
  border-color: var(--gy-brand);
  box-shadow: var(--gy-shadow-2);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .gy-clients__item:has(> a):hover { transform: none; }
}

.gy-clients__item > a:focus-visible {
  outline: 2px solid var(--gy-primary);
  outline-offset: 2px;
  border-radius: var(--gy-r-control);
}

/* ==========================================================================
   分類頁的大標題：留在 HTML 裡，但畫面上不顯示

   為什麼這不算隱藏文字作弊：
   Google 針對的是「給爬蟲看的內容使用者看不到」。這裡同一串分類名稱
   **在麵包屑上是看得見的**（首頁 › 餐飲廚具禮品客製印刷 › 圍裙印刷禮品客製），
   所以沒有任何資訊只給爬蟲。純粹是不在同一頁把同一句話印兩次。

   用 sr-only 而不是 display:none —— 後者會把 H1 一起從無障礙樹上拿掉，
   螢幕閱讀器使用者就失去了「用標題導覽」這個最主要的定位方式。
   sr-only 只是視覺上不佔位，輔助技術照樣讀得到。

   ⚠️ 如果哪天分類敘述改成「只給爬蟲看的關鍵字」，那才會變成真的作弊。
   判準是：H1 的內容必須在畫面上其他地方也讀得到（現在是麵包屑）。
   ========================================================================== */
html.route-product-category .gy-page-head > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 標題收起來之後，麵包屑就是唯一的「你在哪」指示，給它多一點呼吸空間 */
html.route-product-category .gy-page-head {
  margin-bottom: var(--gy-s4);
}

/* ==========================================================================
   資訊頁：中和後台貼進來的版面殘留

   購物須知的內容欄位裡被貼進了整段 Journal3 的版面 HTML —— 包含
   col-sm-9、#content-top、grid-rows / grid-cols / grid-items 那一整串巢狀 div，
   還有數百個只裝一個空白的 <span style="font-size:24px">。

   後果：col-sm-9 是 Bootstrap 的 9/12 欄，內容會再被縮到容器的 75%
   （880px → 660px），看起來就是一條手機寬的窄欄。

   這裡把那些殘留的版面容器攤平。根本解是清掉貼錯的 HTML（屬內容變更），
   但在那之前不該讓讀者看到破版。
   ⚠️ 只在 .gy-doc 底下生效，不會影響頁面本身真正的 Bootstrap 欄位。
   ========================================================================== */
.gy-doc .col-sm-9,
.gy-doc .col-sm-12,
.gy-doc [class*="grid-row"],
.gy-doc [class*="grid-col"],
.gy-doc [class*="grid-item"],
.gy-doc [class*="grid-cols"],
.gy-doc [class*="grid-rows"] {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  float: none;
}

/* 資訊頁的標題不必像首頁那樣大 —— 這是文件，讓內容早一點進入視線 */
html.route-information-information .gy-page-head h1 {
  font-size: var(--gy-fs-h2);
}

html.route-information-information .gy-page-head {
  margin-bottom: var(--gy-s4);
}

html.route-information-information .gy-breadcrumb {
  margin-block: var(--gy-s2);
}

/* ==========================================================================
   登入頁的兩欄（新會員 / 已是會員）

   login.twig 早就寫了 .gy-auth 的兩欄結構，但這個 class 從來沒有樣式 ——
   所以兩塊是上下堆疊的，看起來像一長串沒有分組的表單。
   ========================================================================== */
.gy-auth {
  display: grid;
  gap: var(--gy-s5);
  align-items: start;
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  /* 「已是會員」是這頁的主要動作，給它多一點寬度 */
  .gy-auth { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
}

.gy-auth__panel {
  padding: var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
}

.gy-auth__panel--primary {
  border-color: var(--gy-line-strong);
  box-shadow: var(--gy-shadow-1);
}

.gy-auth__panel > h2 {
  margin-top: 0;
  margin-bottom: var(--gy-s2);
  font-size: var(--gy-fs-h3);
}

.gy-auth__panel > p {
  margin-bottom: var(--gy-s4);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

.gy-auth__panel .gy-btn { width: 100%; }

/*
   未登入的帳號頁不顯示右側的會員選單。

   那份選單有 13 個項目（我的帳號／常用地址／收藏清單／歷史訂單／下載商品／
   定期付款／紅利點數／購物抵用金…），**幾乎全部都要登入才進得去**。
   對還沒登入的人來說是一整排點了會被踢回登入頁的連結 —— 是雜訊不是導覽，
   還把主要的登入表單擠到只剩 2/3 寬。

   登入之後的會員頁仍然照常顯示（那時候它才有意義）。
   模組本身沒有停用，拿掉這段就還原。
*/
html.route-account-login #column-right,
html.route-account-register #column-right,
html.route-account-forgotten #column-right {
  display: none;
}

html.route-account-login #content.col-sm-9,
html.route-account-register #content.col-sm-9,
html.route-account-forgotten #content.col-sm-9 {
  width: 100%;
}

/* 購買區的數量框要跟旁邊的按鈕一樣高。
   .gy-qty 的高度是由內容撐出來的（按鈕 44px + 上下框線 = 46px），
   而 .gy-btn--lg 與 .btn-quote-product 都是 50px —— 差 4px，
   三個控制項並排時看得出來一格比較矮。 */
.gy-buybox .gy-qty {
  min-height: 50px;
}

.gy-buybox .gy-qty button {
  height: auto;
}

/* ==========================================================================
   帳號表單的垂直節奏

   註冊表單有 10 個控制項，1000px 的視窗本來就放不下一頁；
   但原本的間距是照「內容頁」的節奏排的，白白多佔了約 200px：
     H1 42px（這是表單頁不是首頁）
     每個 fieldset 底下 32px
     欄位格線 gap 24px
     姓名獨佔一整列（與 Email 併排就省下一整列 ≈ 101px）
   ========================================================================== */
html[class*="route-account-"] .gy-page-head h1 {
  font-size: var(--gy-fs-h2);
}

html[class*="route-account-"] .gy-page-head {
  margin-bottom: var(--gy-s4);
}

html[class*="route-account-"] .gy-acct-fieldset {
  margin-bottom: var(--gy-s5);
}

html[class*="route-account-"] .gy-form-grid {
  gap: var(--gy-s4);
}

/* 說明文字是輔助資訊，不需要跟正文一樣的份量 */
html[class*="route-account-"] .gy-page-head > p {
  margin-bottom: 0;
  font-size: var(--gy-fs-sm);
  color: var(--gy-muted);
}

/* 手機上數量區只佔左半邊，右邊空一大片。
   讓「數量」與數量框排成一列、撐滿寬度，視覺重量才跟底下的按鈕一致。 */
@media (max-width: 767px) {
  .gy-buybox__qty {
    flex-direction: row;
    align-items: center;
    gap: var(--gy-s3);
    flex: 1 1 100%;
  }

  .gy-buybox__qty-label {
    flex: none;
  }

  .gy-buybox .gy-qty {
    flex: 1;
    justify-content: space-between;
  }
}

/* ==========================================================================
   空的詢價車

   走到詢價單頁卻空著的人，多半是還沒搞懂怎麼把商品加進來。
   所以這一塊不是「錯誤訊息」而是入門說明：先講加進來會發生什麼，
   再把三個步驟拆開，最後給兩條路（自己逛 / 直接問人）與分類捷徑。

   置中限寬 —— 原本靠左展開到 1148px，一行說明配一顆按鈕撐在整片空白裡，
   看起來像頁面壞了。
   ========================================================================== */

.gy-quote-empty {
  max-width: 640px;
  margin: var(--gy-s6) auto;
  padding: var(--gy-s6) var(--gy-s5);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
  text-align: center;
}

.gy-quote-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--gy-s3);
  border-radius: 50%;
  background: var(--gy-soft);
  color: var(--gy-primary);
}

.gy-quote-empty__icon .gy-icon { width: 30px; height: 30px; }

.gy-quote-empty h2 {
  margin: 0 0 var(--gy-s2);
  font-size: var(--gy-fs-h3);
}

.gy-quote-empty__lead {
  max-width: 46ch;
  margin: 0 auto var(--gy-s5);
  /* 讓瀏覽器把幾行的長度分得平均一點，避免最後一行只剩兩三個字 */
  text-wrap: pretty;
  color: var(--gy-ink-2);
  line-height: 1.75;
}

/* --- 三個步驟 --- */
.gy-quote-steps {
  display: grid;
  gap: var(--gy-s3);
  margin: 0 0 var(--gy-s5);
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 640px) {
  .gy-quote-steps { grid-template-columns: repeat(3, 1fr); }
}

.gy-quote-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'n title'
    'n desc';
  gap: 2px var(--gy-s2);
  align-items: start;
  padding: var(--gy-s3);
  border-radius: var(--gy-r-control);
  background: var(--gy-soft);
}

.gy-quote-steps__n {
  grid-area: n;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gy-primary);
  color: #fff;
  font-size: var(--gy-fs-xs);
  font-weight: 700;
}

.gy-quote-steps strong { grid-area: title; font-size: var(--gy-fs-sm); }

.gy-quote-steps li > span:last-child {
  grid-area: desc;
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
  line-height: 1.6;
}

/* --- 兩條路 --- */
.gy-quote-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gy-s3);
}

/* --- 分類捷徑 --- */
.gy-quote-empty__cats {
  margin-top: var(--gy-s5);
  padding-top: var(--gy-s4);
  border-top: 1px solid var(--gy-line);
}

.gy-quote-empty__cats-label {
  display: block;
  margin-bottom: var(--gy-s2);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
}

.gy-quote-empty__cats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gy-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gy-quote-empty__cats a {
  display: inline-block;
  padding: 6px var(--gy-s3);
  border: 1px solid var(--gy-line);
  border-radius: 999px;
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  transition: border-color var(--gy-ease), color var(--gy-ease);
}

.gy-quote-empty__cats a:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
  text-decoration: none;
}

/* ==========================================================================
   資訊頁：收拾從舊主題貼進來的 inline 樣式

   這幾頁的內容是 Journal3 時代整段複製到後台編輯器的 HTML。
   實測 6 頁都中：購物須知 324 個、常見問題 317 個 font-size 宣告，
   每一個換行位置都夾著 <span style="font-size: 24px;">，
   標題還帶 <font face="Arial Black"> 與 36px —— 比頁面的 H1 還大。

   後果是內文字級失控、段落起始位置各自不同（那些 span 之間的空白
   被算進行首），看起來像整頁沒套到樣式。

   inline style 的特異度蓋不過，只能用 !important 把字級與字體收回主題的
   尺度。這是針對「別人貼進來的 HTML」的防護，不是自己寫的樣式在打架 ——
   主題自己的元素都不帶 inline style，不會被影響。

   治本是清掉 oc_information_description 裡的那些標籤，屬於內容整理，
   要另外提案。
   ========================================================================== */

.gy-doc [style*="font-size"],
.gy-doc font[size] {
  font-size: inherit !important;
}

.gy-doc [style*="font-family"],
.gy-doc font[face] {
  font-family: inherit !important;
}

/*
  inline 的文字顏色也收掉。

  貼進來的內容帶著舊主題的品牌橘 #b06f1d，在這裡的暖白底 #fbf7f2 上
  對比只有 3.83:1（AA 要 4.5）—— 上線閘門在常見問題與另一個資訊頁都抓到。

  這些顏色是裝飾，不是資訊：內容的層次應該由標題階層與 strong 表達，
  顏色一旦低於對比門檻就是把字變得難讀而已。
  警示色系不需要特例 —— 這幾頁沒有靠顏色傳達的警語。
*/
.gy-doc [style*="color"],
.gy-doc font[color] {
  color: inherit !important;
}

/* 標題仍要有階層 —— 上面那條會把 h2~h4 裡的 inline 字級也壓掉，
   這裡讓標題回到主題自己的尺寸 */
.gy-doc h2 [style*="font-size"] { font-size: var(--gy-fs-h3) !important; }
.gy-doc h3 [style*="font-size"],
.gy-doc h4 [style*="font-size"] { font-size: var(--gy-fs-lg) !important; }

/* 貼進來的內容帶著 Journal3 的 col-sm-9，讓正文只剩 75% 寬 */
.gy-doc .col-sm-9,
.gy-doc .col-sm-12,
.gy-doc [class*="grid-col"],
.gy-doc [class*="grid-item"] {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  float: none;
}

/* 那些 <span> 之間的換行會變成行首空白，讓每一段的起點都不一樣 */
.gy-doc p { text-indent: 0; }

/*
  這幾頁的條列是用表格排版的：每一項一個 <table class="table table-bordered">，
  文字左右各夾一個空的 <td width="0%"> 當縮排。
  空 td 的寬度由瀏覽器按剩餘空間分配，所以每一列的起點都不一樣
  （「1.檔案格式」比「3.非向量圖形」多縮了將近 100px，看起來像排版壞掉）。

  不改內容，讓這些純排版用的表格退成一般段落：拿掉框線與內距，
  空欄不佔位置，每一項就對齊在同一條左邊界上。
*/
.gy-doc table.table-bordered,
.gy-doc table.table-bordered > tbody > tr > td {
  border: 0;
  padding: 0;
}

.gy-doc table.table-bordered {
  width: 100%;
  margin: 0 0 var(--gy-s2);
}

.gy-doc table.table-bordered td:empty { display: none; }

/*
  三顆 CTA 的內距與字級統一。

  量測 1440px：按鈕區 372px，但三顆的內容需求是 148 + 159 + 86 + 16(gap) = 409。
  差額幾乎全來自不一致的內距 —— 加入購物車左右各 32px（來自 Bootstrap 的
  .btn-lg），加入詢價各 24px，LINE 各 12px；字級也是 16 / 15 / 16 三種。

  收成同一組（12px + 15px）後需求降到約 345px，三顆都放得下完整文字，
  視覺上也終於像同一組按鈕。
*/
.gy-buybox .buttons-wrapper .btn-quote-product,
.gy-buybox .buttons-wrapper #button-cart,
.gy-buybox .buttons-wrapper .gy-line-cta .gy-btn {
  padding-inline: var(--gy-s3);
  font-size: var(--gy-fs-sm);
}

/*
  992–1199px（小筆電與橫向平板）：按鈕區只剩 294px。

  這個寬度下 LINE 已經是純圖示，但詢價 + 購物車仍需要 154 + 120 + 44 + gap
  才放得下 —— 差 36px，「加入購物車」會被截成「加入購物…」。

  收掉這兩顆的圖示（各省 30px：22px 圖示 + 8px 間距）。
  文字本身就說明了動作，圖示在這裡是裝飾；LINE 相反 —— 它的綠色圖示
  才是辨識點，文字反而可以省，所以留圖示。
*/
@media (max-width: 1199px) {
  .gy-buybox .buttons-wrapper .btn-quote-product > .gy-icon,
  .gy-buybox .buttons-wrapper .btn-quote-product > i,
  .gy-buybox .buttons-wrapper #button-cart > .gy-icon {
    display: none;
  }
}

/*
  推薦區（相似禮品／同分類／熱銷）的欄數。

  這一區固定取 6 件，但外面的 .gy-grid--auto 是 auto-fill minmax(210px)
  —— 1440px 下算出 5 欄，6 件就排成 5 + 1，最後那張孤零零掛在第二列。

  改成只用能整除 6 的欄數，每一列都是滿的：
    >= 1200px  6 欄（一列放完）
    768–1199   3 欄（3 + 3）
    < 768      2 欄（2 + 2 + 2）
*/
.gy-recommend .gy-grid--auto {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .gy-recommend .gy-grid--auto { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .gy-recommend .gy-grid--auto { grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================================
   頁首搜尋的即時建議

   .gy-search 本身是 overflow:hidden 的圓角容器（為了讓輸入框與按鈕貼齊），
   下拉面板若放在裡面會被裁掉 —— 所以用絕對定位掛在表單下緣，
   並把表單改成 overflow visible 的定位基準。
   ========================================================================== */

/*
  .gy-search 原本靠 overflow:hidden 讓輸入框與按鈕的方角被容器的圓角切齊，
  但那也會把下拉面板一起裁掉（面板絕對定位在 top:100%）。

  改成 overflow:visible，圓角交給兩端的子元素自己做 ——
  左端是輸入框、右端是送出鈕，中間沒有其他東西。
*/
.gy-search {
  position: relative;
  overflow: visible;
}

.gy-search input[type="search"] {
  border-start-start-radius: var(--gy-r-control);
  border-end-start-radius: var(--gy-r-control);
}

.gy-search button {
  border-start-end-radius: var(--gy-r-control);
  border-end-end-radius: var(--gy-r-control);
}

.gy-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: var(--gy-s2);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
  background: var(--gy-paper);
  box-shadow: var(--gy-shadow-3);
  color: var(--gy-ink);
  text-align: left;
}

.gy-suggest[hidden] { display: none; }

.gy-suggest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gy-suggest__item > a {
  display: flex;
  align-items: center;
  gap: var(--gy-s3);
  padding: var(--gy-s2);
  border-radius: var(--gy-r-control);
  color: var(--gy-ink);
}

.gy-suggest__item > a:hover,
.gy-suggest__item.is-active > a {
  background: var(--gy-soft);
  text-decoration: none;
}

.gy-suggest__item img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--gy-r-control);
  object-fit: cover;
  background: var(--gy-soft);
}

.gy-suggest__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gy-suggest__name {
  /* 商品名很長（含規格與起訂量），兩行就夠認出是不是要找的東西 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--gy-fs-sm);
  line-height: 1.4;
}

.gy-suggest__meta {
  color: var(--gy-muted);
  font-size: var(--gy-fs-xs);
}

.gy-suggest__more {
  display: block;
  margin-top: var(--gy-s2);
  padding: var(--gy-s2);
  border-top: 1px solid var(--gy-line);
  color: var(--gy-primary);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  text-align: center;
}

.gy-suggest__empty {
  margin: 0;
  padding: var(--gy-s4) var(--gy-s3);
  color: var(--gy-muted);
  font-size: var(--gy-fs-sm);
  line-height: 1.7;
  text-align: center;
}

/*
  抽屜開著的時候把手機底部的 sticky CTA 收起來。

  抽屜的 z-index 比它高，所以不是被蓋住 —— 是那條 CTA 佔掉螢幕底部
  約 60px，抽屜最後一兩個項目（「500 元以上」「印刷知識」）就按不到。
  抽屜本身就是導覽，同時出現一個「取得客製報價」也沒有意義。
*/
body.gy-drawer-open .gy-sticky-cta { display: none; }

/* ==========================================================================
   商品詳情頁：把購買動線拉回第一屏

   改版前實測 1440x1000（商品 5607）：
     H1 42px 佔 3 行、高 179px
     標題 y=240 → 購買按鈕 y=1290，中間隔了 1050px
     第一屏只看得到 麵包屑／標題／評分／價格／規格表，
     選項與「加入詢價」都在視窗之外

   規格表與階梯價已經在 twig 裡移到購買動作之後（見那邊的說明），
   這裡處理標題與上半部的密度。
   ========================================================================== */

/* ==========================================================================
   商品詳情頁 (Product Detail Page) 重構樣式
   ========================================================================== */

.gy-page-head--inline h1,
.gy-product-title {
  margin-bottom: var(--gy-s2);
  padding-bottom: 0;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--gy-ink);
  border-bottom: none;
}

.gy-product-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gy-s3);
  margin-bottom: var(--gy-s3);
}

.gy-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.gy-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--gy-fs-xs);
  border-radius: var(--gy-r-pill);
  background: var(--gy-soft);
  color: var(--gy-ink-2);
  border: 1px solid transparent;
}

.gy-meta-badge a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.gy-meta-badge--model {
  background: var(--gy-soft);
  border-color: var(--gy-line);
  color: var(--gy-ink);
}

.gy-meta-badge--moq {
  background: #fdf5ef;
  color: var(--gy-primary);
  border-color: rgba(176, 111, 29, 0.25);
  font-weight: 600;
}

.gy-meta-badge--stock {
  background: #eef8f2;
  color: var(--gy-line-green);
  border-color: rgba(5, 122, 53, 0.2);
  font-weight: 600;
}

.gy-meta-badge--brand {
  background: #f4f6fa;
  color: #2b4c7e;
  border-color: rgba(43, 76, 126, 0.2);
}

/* 評分列 */
.gy-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  font-size: var(--gy-fs-xs);
}

/* 價格與階梯價區塊 (一體化卡片) */
.gy-pricing-box {
  background: #fbf8f5;
  border: 1px solid #e8dfd7;
  border-radius: var(--gy-r-card);
  padding: 14px 18px;
  margin-bottom: var(--gy-s3);
}

.gy-pricing-box__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s2);
}

.gy-pricing-box .gy-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.gy-pricing-box .gy-price__now {
  font-size: 28px;
  font-weight: 800;
  color: var(--gy-primary);
  line-height: 1;
}

.gy-pricing-box .gy-price__unit {
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-pricing-box .gy-price__was {
  color: var(--gy-muted);
  text-decoration: line-through;
  font-size: var(--gy-fs-sm);
}

.gy-pricing-box .gy-promo-inline {
  border: 0;
  padding: 3px 10px;
  background: #faede2;
  color: var(--gy-primary);
  font-weight: 600;
  font-size: var(--gy-fs-xs);
  border-radius: var(--gy-r-pill);
}

/* 階梯價格表 */
.gy-tiers {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2d7ce;
}

.gy-tiers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.gy-tiers__title {
  margin: 0;
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  color: var(--gy-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gy-tiers__note {
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-table--tiers {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  overflow: hidden;
}

.gy-table--tiers th,
.gy-table--tiers td {
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
}

.gy-table--tiers th[scope="row"] {
  text-align: left;
  color: var(--gy-muted);
  font-weight: 600;
  background: #f7f3ee;
  border-right: 1px solid var(--gy-line);
}

.gy-table--tiers thead th {
  background: #f7f3ee;
  color: var(--gy-ink-2);
  font-weight: 600;
}

.gy-table--tiers tbody td {
  font-weight: 700;
  color: var(--gy-primary);
  background: var(--gy-paper);
}

.gy-table--tiers tbody tr {
  border-top: 1px solid var(--gy-line);
}

/* 客製選項 */
.gy-options {
  display: grid;
  gap: var(--gy-s2);
  margin-bottom: var(--gy-s3);
}

.gy-option-set {
  margin: 0;
  padding: 0;
  border: none;
}

.gy-option-set__legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--gy-ink);
  margin-bottom: 6px;
  padding: 0;
  border: none;
  display: block;
}

.gy-option-set__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gy-option-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--gy-line-strong);
  background: var(--gy-paper);
  cursor: pointer;
  transition: all var(--gy-ease);
  user-select: none;
  font-size: 13px;
  font-weight: 600;
}

.gy-option-choice input[type="radio"],
.gy-option-choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gy-option-choice:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
}

.gy-option-choice:has(:checked) {
  border-color: var(--gy-primary);
  background: #fdf5ee;
  color: var(--gy-primary);
  box-shadow: 0 0 0 1px var(--gy-primary);
}

.gy-qty-min-tag {
  font-size: 12px;
  color: var(--gy-primary);
  font-weight: 600;
}

/* 購買控制卡片 (Buybox) */
.gy-buybox {
  background: var(--gy-paper);
  border: 1px solid #e8dfd7;
  border-radius: var(--gy-r-card);
  padding: 14px 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.gy-buybox__controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;
}

.gy-buybox__qty {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gy-buybox__qty-label {
  font-size: var(--gy-fs-xs);
  font-weight: 600;
  color: var(--gy-muted);
  margin: 0;
}

.gy-buy-secondary {
  display: flex;
  gap: var(--gy-s2);
}

.gy-buy-secondary .gy-btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--gy-r-control);
  border: 1px solid var(--gy-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gy-buy-secondary .gy-btn--icon:hover {
  border-color: var(--gy-primary);
  color: var(--gy-primary);
}

.gy-buybox .buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gy-buybox .buttons-wrapper .gy-btn {
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
}

.gy-buybox .gy-stockline {
  margin-top: 8px;
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gy-buybox .gy-stockline__value {
  color: var(--gy-ink);
  font-weight: 600;
}

/* 左欄 B2B 採購看板 (精簡化 2x2 格局) */
.gy-b2b-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gy-s3);
  margin-top: var(--gy-s4);
  padding: var(--gy-s4);
  background: var(--gy-soft);
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-card);
}

.gy-b2b-panel__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gy-s2);
}

.gy-b2b-panel__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--gy-r-control);
  background: var(--gy-paper);
  border: 1px solid var(--gy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gy-primary);
}

.gy-b2b-panel__content dt {
  font-size: var(--gy-fs-xs);
  font-weight: 700;
  color: var(--gy-ink);
  margin: 0;
}

.gy-b2b-panel__content dd {
  font-size: 11px;
  color: var(--gy-muted);
  margin: 0;
  line-height: 1.35;
}

/* 標籤 */
.gy-tags {
  margin-top: var(--gy-s3);
  font-size: var(--gy-fs-xs);
  color: var(--gy-muted);
}

.gy-tags__item {
  display: inline-block;
  margin: 2px 4px;
  padding: 2px 8px;
  background: var(--gy-soft);
  border-radius: var(--gy-r-pill);
  color: var(--gy-ink-2);
}

/* 手機響應式調整 */
@media (max-width: 991px) {
  .gy-product-side { display: contents; }
  .gy-product-layout > .gy-product-side > .gy-gallery { order: 1; }
  .gy-product-layout > .gy-buy { order: 2; }
  .gy-product-layout > .gy-product-side > .gy-b2b-panel { order: 3; }
  .gy-product-layout > .gy-product-side > .gy-tags { order: 4; }

  .gy-b2b-panel {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================================
   猜你喜歡（商品頁右欄填白）— 只在桌機雙欄顯示，把購買區下方的空白補滿，
   讓右欄長度接近左欄（圖庫＋B2B 看板），兩欄視覺平衡。資料同 .gy-related。
   ========================================================================== */
.gy-buy__rec { display: none; }

/* :not([hidden]) 讓 JS 的 rec.hidden 能真正收起（否則 display:block 會蓋過
   [hidden] 屬性，平衡腳本量不到購買區淨高） */
@media (min-width: 992px) {
  .gy-buy__rec:not([hidden]) {
    display: block;
    margin-top: var(--gy-s5);
    padding-top: var(--gy-s5);
    border-top: 1px solid var(--gy-line);
  }
}

.gy-buyrec__item[hidden] { display: none; }

.gy-buy__rec-title {
  margin: 0 0 var(--gy-s3);
  font-size: var(--gy-fs-lg);
  font-weight: 700;
  color: var(--gy-ink);
}

.gy-buyrec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gy-s2);
}

.gy-buyrec__link {
  display: flex;
  gap: var(--gy-s3);
  align-items: center;
  padding: var(--gy-s2);
  border-radius: var(--gy-r-control);
  transition: background var(--gy-ease);
}

.gy-buyrec__link:hover { background: var(--gy-soft); text-decoration: none; }

.gy-buyrec__thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--gy-r-control);
  border: 1px solid var(--gy-line);
  flex: none;
}

.gy-buyrec__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.gy-buyrec__name {
  font-size: var(--gy-fs-sm);
  font-weight: 600;
  color: var(--gy-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gy-buyrec__price { font-size: var(--gy-fs-sm); font-weight: 700; color: var(--gy-primary); }

/* ==========================================================================
   浮動「猜你喜歡」側欄（商品頁，桌機）—— 購買區捲出畫面後從右側滑入，可關閉。
   ========================================================================== */
.gy-floatrec { display: none; }

@media (min-width: 992px) {
  .gy-floatrec {
    display: block;
    position: fixed;
    right: 0;
    bottom: 24px;
    z-index: 65;
    width: 288px;
    max-width: 90vw;
    background: var(--gy-paper);
    border: 1px solid var(--gy-line);
    border-right: 0;
    border-radius: var(--gy-r-card) 0 0 var(--gy-r-card);
    box-shadow: var(--gy-shadow-3, 0 10px 30px rgba(47,33,28,.18));
    transform: translateX(110%);
    transition: transform var(--gy-ease);
    overflow: hidden;
  }
  .gy-floatrec.is-visible { transform: translateX(0); }
}

.gy-floatrec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s2);
  padding: var(--gy-s2) var(--gy-s3);
  background: var(--gy-soft);
  border-bottom: 1px solid var(--gy-line);
}

.gy-floatrec__title { font-size: var(--gy-fs-sm); font-weight: 700; color: var(--gy-ink); }

.gy-floatrec__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--gy-r-control);
  background: transparent;
  color: var(--gy-ink-2);
  cursor: pointer;
  transition: background var(--gy-ease);
}
.gy-floatrec__close:hover { background: rgba(47, 33, 28, 0.08); }
.gy-floatrec__close .gy-icon { width: 16px; height: 16px; }

.gy-floatrec__list { list-style: none; margin: 0; padding: var(--gy-s2); display: grid; gap: 2px; }

.gy-floatrec__item {
  display: flex;
  gap: var(--gy-s2);
  align-items: center;
  padding: var(--gy-s2);
  border-radius: var(--gy-r-control);
  transition: background var(--gy-ease);
}
.gy-floatrec__item:hover { background: var(--gy-soft); text-decoration: none; }
.gy-floatrec__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--gy-r-control); border: 1px solid var(--gy-line); flex: none; }
.gy-floatrec__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gy-floatrec__name { font-size: var(--gy-fs-xs); font-weight: 600; color: var(--gy-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gy-floatrec__price { font-size: var(--gy-fs-xs); font-weight: 700; color: var(--gy-primary); }


/* ====================================================================
   商品描述收合（商品頁描述分頁）
   ====================================================================
   描述很長時預設收合到固定高度、下緣漸層淡出，點「展開看詳細」才全開。
   .is-collapsible / .is-collapsed 由 giftyou-misc.js 依實際高度判定後才加：
   短描述不會有這兩個 class，按鈕維持 hidden、樣式完全不介入。 */
.gy-desc { position: relative; }

.gy-desc__inner {
  position: relative;
  transition: max-height var(--gy-ease);
}

/* 收合狀態：限高＋裁切。max-height 的數值要和 JS 的 COLLAPSED 一致（320）。 */
.gy-desc.is-collapsible.is-collapsed .gy-desc__inner {
  overflow: hidden;
}

/* 下緣漸層：暗示還有內容。淡到頁面底色（描述面板無自訂背景，吃 body 的 --gy-canvas）。 */
.gy-desc.is-collapsible.is-collapsed .gy-desc__inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--gy-canvas) 0%, transparent),
    var(--gy-canvas)
  );
  pointer-events: none;
}

/* 按鈕：預設不顯示，只有 JS 判定過長（.is-collapsible）才露出。 */
.gy-desc__toggle { display: none; }
.gy-desc.is-collapsible .gy-desc__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s2);
  margin-top: var(--gy-s4);
  padding: var(--gy-s2) var(--gy-s4);
  font: inherit;
  font-size: var(--gy-fs-sm);
  line-height: 1;
  color: var(--gy-primary);
  background: transparent;
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-r-control);
  cursor: pointer;
  transition: background var(--gy-ease), border-color var(--gy-ease);
}
.gy-desc__toggle:hover {
  background: var(--gy-soft);
  border-color: var(--gy-primary);
}
.gy-desc__toggle:focus-visible {
  outline: 2px solid var(--gy-primary);
  outline-offset: 2px;
}
.gy-desc__toggle .gy-icon {
  width: 1em;
  height: 1em;
  transition: transform var(--gy-ease);
}

/* 文案／箭頭跟著 aria-expanded 切換 */
.gy-desc__toggle .gy-desc__toggle-less { display: none; }
.gy-desc__toggle[aria-expanded="true"] .gy-desc__toggle-more { display: none; }
.gy-desc__toggle[aria-expanded="true"] .gy-desc__toggle-less { display: inline; }
.gy-desc__toggle[aria-expanded="true"] .gy-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .gy-desc__inner,
  .gy-desc__toggle .gy-icon { transition: none; }
}


/* === 詢價：補充資訊（選填）摺疊區 + 統編帶入狀態列 ===================== */
details.quote-optional { display: block; }
.quote-optional > .quote-optional__summary {
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--gy-ease);
}
.quote-optional > .quote-optional__summary::-webkit-details-marker { display: none; }
.quote-optional > .quote-optional__summary:hover { background: var(--gy-line); }
.quote-optional > .quote-optional__summary:focus-visible {
  outline: 2px solid var(--gy-primary);
  outline-offset: -2px;
}
/* 收合時不顯示 header 底線，避免像一條斷線 */
details.quote-optional:not([open]) > .quote-optional__summary { border-bottom: 0; }
.quote-optional__summary .quote-optional__title { flex: 0 0 auto; }
.quote-optional__summary .quote-optional__hint {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--gy-s2);
  font-family: var(--gy-font-sans);
  font-size: var(--gy-fs-xs);
  font-weight: 500;
  color: var(--gy-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-optional__summary .quote-optional__chev {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--gy-primary);
  transition: transform var(--gy-ease);
}
details.quote-optional[open] > .quote-optional__summary .quote-optional__chev { transform: rotate(180deg); }

/* 統編 → 公司名稱 自動帶入的狀態提示（非阻擋、aria-live） */
.tax-id-status {
  display: block;
  margin-top: 4px;
  min-height: 1em;
  font-size: var(--gy-fs-xs);
  line-height: 1.4;
}
.tax-id-status--loading { color: var(--gy-muted); }
.tax-id-status--ok { color: var(--gy-line-green); }
.tax-id-status--warn { color: var(--gy-muted); }

/* === 頁尾社群連結 =================================================== */
.gy-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gy-s4);
  flex-wrap: wrap;
}

.gy-social {
  display: flex;
  align-items: center;
  gap: var(--gy-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gy-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gy-on-dark, #fff);
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--gy-ease), color var(--gy-ease);
}

.gy-social__link:hover {
  background: var(--gy-primary);
  color: #fff;
}

.gy-social__link .gy-icon { width: 18px; height: 18px; }