@charset "UTF-8";
/* ==========================================================================
   GiftYou — 補件層（misc-fixes）
   --------------------------------------------------------------------------
   對等性稽核 docs/parity-check-2026-08-30.md 補回來的零件樣式。
   刻意不寫進 giftyou.css：那支多人共改，分開才不會每次都撞衝突。
   規則同 THEME-GUIDE：零 !important、值一律走 token、觸控目標 >= 44x44。

   目錄
     1  聯絡表單的隱私權同意（#17）
     2  部落格列表的留言數／瀏覽數（#18）
     3  桌機捲動後的精簡列（#20）
     4  快速檢視 quickview（#19）
   ========================================================================== */

/* ==========================================================================
   1  隱私權同意（information/contact.twig）
   --------------------------------------------------------------------------
   checkbox 與 label 疊在同一個 grid 格：label 撐滿 44x44 當觸控目標，
   說明文字（含連結）放右欄，用 aria-describedby 綁回 checkbox。
   連結不放在 label 裡，否則點連結會順帶勾／取消勾選。
   ========================================================================== */
.gy-consent {
  display: grid;
  grid-template-columns: var(--gy-h-lg) minmax(0, 1fr);
  align-items: center;
  margin-top: var(--gy-s5);
}

.gy-consent__box {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--gy-primary);
}

/* 空 label：只負責把可點區域撐到 44x44，文字給 sr-only */
.gy-consent__hit {
  grid-area: 1 / 1;
  display: block;
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  margin: 0;
  border-radius: var(--gy-r-control);
  cursor: pointer;
}

.gy-consent__hit:hover {
  background: var(--gy-soft);
}

.gy-consent__text {
  grid-area: 1 / 2;
  padding-left: var(--gy-s2);
  color: var(--gy-ink-2);
  font-size: var(--gy-fs-sm);
  line-height: 1.6;
}

.gy-consent__text a {
  color: var(--gy-primary);
  font-weight: 600;
  text-decoration: underline;
}

.gy-consent__box:focus-visible + .gy-consent__hit {
  outline: 2px solid var(--gy-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   2  部落格列表的留言數／瀏覽數（journal3/blog/post_card.twig）
   ========================================================================== */
.gy-post__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--gy-s1);
  font-variant-numeric: tabular-nums;
}

.gy-post__stat .gy-icon {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* ==========================================================================
   3  桌機捲動後的精簡列（common/header.twig + js/giftyou-misc.js）
   --------------------------------------------------------------------------
   手機刻意不做：已經有 .gy-sticky-cta 常駐在底部，再疊一條會把內容擠掉。
   所以 .gy-slim 只在 >=992px（與主選單同一個斷點）才有版面，
   JS 也用同一組 matchMedia 判斷，兩邊不會各說各話。
   ========================================================================== */
.gy-slim-sentinel {
  height: 1px;
  margin-top: -1px;
}

.gy-slim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 比 .gy-header 的 50 與 .gy-nav__drop 的 60 高，才不會被主選單子選單蓋住 */
  z-index: 70;
  display: none;
  background: var(--gy-dark);
  /* 深底上的文字沒有對應 token（--gy-on-dark 是次要文字階），
     giftyou.css 的 .gy-header 同樣用 #fff，這裡跟著同一套 */
  color: #fff;
  box-shadow: var(--gy-shadow-2);
  transform: translateY(-100%);
  transition: transform var(--gy-ease);
}

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

@media (min-width: 992px) {
  .gy-slim {
    display: block;
  }
}

.gy-slim.is-visible {
  transform: translateY(0);
}

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

.gy-slim__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.gy-slim__brand img {
  height: 28px;
  width: auto;
}

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

/* --- 精簡列主選單（內容由 JS 從頁首 .gy-nav__list 複製，不含子選單） ----- */
/* 七個頂層分類名稱很長（合計約 1150px），任何桌機寬度都排不完，
   所以讓它自己橫向捲動；右緣用遮罩淡出，讓「還有更多」看起來是刻意的而不是被切斷。
   捲軸會把 60px 的列撐高，隱藏它 —— 鍵盤 Tab 到被遮住的項目時瀏覽器仍會自動捲過去。 */
.gy-slim__nav {
  flex: 1 1 auto;
  min-width: 0;
  /* overflow 必須 visible：頂層改精簡短標籤後八個入口在所有桌機寬度都排得下，
     不再需要橫向捲動；而只要有 overflow(auto/hidden)，絕對定位的 .gy-nav__drop
     子選單就會被切掉。改回 visible 後置頂列的子選單能正常展開，與主選單一致。 */
  overflow: visible;
}

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

.gy-slim__nav .gy-nav__list {
  padding: 0;
  margin: 0;
}

.gy-slim__nav .gy-nav__link {
  padding: var(--gy-s2) var(--gy-s3);
  min-height: var(--gy-h-lg);
  font-size: var(--gy-fs-sm);
}

/* 搜尋與功能鈕沿用頁首的 .gy-search / .gy-tool（配色、hover、focus 都已經定好），
   這裡只改精簡列需要的版面 —— 這樣就沒有第二套顏色要維護。
   搜尋給固定基準寬，否則會被長選單擠成 0 寬。 */
.gy-slim__search {
  flex: 0 0 200px;
  max-width: 200px;
}

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

/* 頁首的 .gy-tool 是上圖示下文字的直式，精簡列高度不夠，改成橫式 */
.gy-slim__tool {
  flex-direction: row;
  gap: var(--gy-s2);
  padding-inline: var(--gy-s3);
  font-size: var(--gy-fs-sm);
  font-weight: 600;
}

/* 精簡列裡的件數徽章是行內的，不是頁首那種右上角浮標 */
.gy-slim__tool .gy-tool__count {
  position: static;
  margin-left: var(--gy-s1);
}

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

@media (prefers-reduced-motion: reduce) {
  .gy-slim {
    transition: none;
  }
}

/* ==========================================================================
   4  快速檢視 quickview（common/product_card.twig + js/giftyou-misc.js）
   --------------------------------------------------------------------------
   刻意不含「加入購物車」：本站幾乎每個商品都有必填的「印刷LOGO方式」，
   小視窗選規格體驗差，且那條 options_popup iframe 正是 GA4 add_to_cart
   系統性漏發的根因。要下單一律導回商品頁。
   ========================================================================== */
/* 卡片本身沒有定位脈絡，浮動鈕要靠它定位 */
.gy-product {
  position: relative;
}

.gy-product__qv {
  position: absolute;
  top: var(--gy-s2);
  right: var(--gy-s2);
  z-index: 2;
  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-ink-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--gy-ease), color var(--gy-ease), border-color var(--gy-ease);
}

/* 觸控裝置沒有 hover，直接常駐顯示 */
@media (hover: none) {
  .gy-product__qv {
    opacity: 1;
  }
}

.gy-product:hover .gy-product__qv,
.gy-product__qv:focus-visible {
  opacity: 1;
}

.gy-product__qv:hover {
  color: var(--gy-primary);
  border-color: var(--gy-line-strong);
}

/* --- 對話框 -------------------------------------------------------------- */
.gy-qv {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gy-s4);
  /* 與 giftyou.css 的 .gy-scrim（rgba(47, 33, 28, 0.5)）同一組遮罩色，
     對話框比抽屜更需要壓暗，所以透明度稍高一點。半透明遮罩沒有 token。 */
  background: rgba(47, 33, 28, 0.55);
}

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

.gy-qv__dialog {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(88vh, 720px);
  background: var(--gy-paper);
  border-radius: var(--gy-r-feature);
  box-shadow: var(--gy-shadow-3);
  overflow: hidden;
}

.gy-qv__head {
  display: flex;
  align-items: center;
  gap: var(--gy-s3);
  padding: var(--gy-s4) var(--gy-s5);
  border-bottom: 1px solid var(--gy-line);
}

.gy-qv__head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--gy-fs-h4);
  line-height: 1.4;
}

.gy-qv__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gy-h-lg);
  height: var(--gy-h-lg);
  border: 0;
  border-radius: var(--gy-r-pill);
  background: transparent;
  color: var(--gy-ink-2);
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-qv__close:hover {
  background: var(--gy-soft);
  color: var(--gy-ink);
}

.gy-qv__body {
  flex: 1;
  display: grid;
  gap: var(--gy-s5);
  padding: var(--gy-s5);
  overflow-y: auto;
}

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

.gy-qv__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--gy-r-card);
  background: var(--gy-soft);
  overflow: hidden;
}

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

.gy-qv__info {
  display: flex;
  flex-direction: column;
  gap: var(--gy-s3);
  min-width: 0;
}

.gy-qv__price {
  margin: 0;
  color: var(--gy-primary);
  font-size: 20px;
  font-weight: 700;
}

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

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

.gy-qv__specs {
  display: grid;
  gap: var(--gy-s2);
  margin: 0;
  font-size: var(--gy-fs-sm);
}

.gy-qv__specs > div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: var(--gy-s2);
}

.gy-qv__specs dt {
  color: var(--gy-muted);
  font-weight: 400;
}

.gy-qv__specs dd {
  margin: 0;
  color: var(--gy-ink);
  /* 屬性值常帶換行（例：「合起：23*14 / 展開：30.5*16*42」），保留它才讀得懂 */
  white-space: pre-line;
}

/* 必填選項提示：告知「進商品頁還要選什麼」，不在這裡讓人選。
   配色與間距直接吃現成的 .gy-alert--warning（THEME-GUIDE：現成組件不要重造），
   這裡只把外距歸零，讓它貼齊 .gy-qv__info 的 gap。 */
.gy-qv__required {
  margin: 0;
  font-size: var(--gy-fs-sm);
  line-height: 1.6;
}

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

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

/* 精簡列裡的選單是從頁首 .gy-nav__list 複製過來的。頁首那份允許換行
   （窄螢幕放不下 9 個長分類名），但精簡列本身已經是橫向捲動容器，
   跟著換行只會讓這條列變成兩排、佔掉 104px。這裡強制單排。 */
.gy-slim__nav .gy-nav__list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: none;
  padding: 0;
}

/* ==========================================================================
   精簡列：把空間讓給主選單

   實測（捲動後）：選單內容需要 1196px，但可視寬只有
     1920 → 1086px（切掉「依最低起訂量分類」「印刷知識」）
     1440 → 766px （再切掉「鑰匙圈/門禁卡印刷禮品客製」）
     1280 → 686px （再切掉「快速出貨禮品專區」）
   而且桌機沒有觸控，橫向捲動的內容等於**點不到** —— 不只是看不到。

   Logo 127 + 搜尋 200 + 詢價車/購物車（含文字）約 320，這三塊吃掉了大半。
   在 1600px 以下把搜尋收成圖示、工具列只留圖示（名稱留在 aria-label），
   選單就拿得回約 330px。
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1599px) {
  /* 搜尋收成圖示，聚焦時才展開 —— 想搜尋的人點一下就有，不搶選單的位置 */
  .gy-slim__search {
    flex: 0 0 44px;
    max-width: 44px;
    transition: flex-basis var(--gy-ease), max-width var(--gy-ease);
  }

  .gy-slim__search:focus-within {
    flex-basis: 240px;
    max-width: 240px;
  }

  .gy-slim__search input {
    width: 0;
    min-width: 0;
    padding-inline: 0;
    border: 0;
  }

  .gy-slim__search:focus-within input {
    width: auto;
    min-width: 0;
    flex: 1;
    padding-inline: var(--gy-s3);
  }

  /* 詢價車／購物車只留圖示。名稱本來就在 aria-label，件數徽章照常顯示 */
  .gy-slim__tool > span:not(.gy-tool__count) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gy-slim__tool {
    position: relative;
  }
}

/* 精簡列選單的左右鍵。放不下時才出現（giftyou-misc.js 控制），捲到底自動停用 */
.gy-slim__navbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--gy-r-control);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--gy-ease);
}

.gy-slim__navbtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.gy-slim__navbtn:disabled { opacity: 0.3; cursor: default; }

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

/* ⚠️ .gy-slim__navbtn 有 display:inline-flex，特異度蓋過瀏覽器對 [hidden] 的
   display:none —— 標記成 hidden 之後仍然佔位。要明確關掉。 */
.gy-slim__navbtn[hidden] { display: none; }

/*
  快速檢視的品牌標記。

  沿用提示條的 .gy-toast__mark（同一種裁切：白色 logo 放深色圓底、
  只露左邊的緞帶符號），這裡只補彈窗標題列需要的差異 ——
  提示條的底是深棕，彈窗的底是暖白，圓形要自己帶顏色才看得見 logo。
*/
.gy-qv__mark {
  background: var(--gy-dark);
}