@import url("https://fonts.googleapis.com/css2?family=Belleza:wght@400&display=swap");

:root {
  --hh-color-paper: #FFFEF2;
  --hh-color-ink: #333333;
  --hh-color-muted: #666666;
  --hh-color-dark: #252525;
  --hh-color-black: #000000;
  --hh-color-line: #D8D8D8;
  --hh-color-gold: #945C26;
  --hh-font-wordmark: "Belleza", "Times New Roman", serif;
  --hh-font-serif: "Shippori Mincho B1", serif;
  --hh-font-sans-tc: "Noto Sans TC", sans-serif;
  --hh-layout-max: 1440px;
  --hh-layout-pad: clamp(20px, 4vw, 60px);
  /* 首頁圖文列／場景區的「編輯型」左右留白：比頁首頁尾的 gutter 深一倍，
     文字才不會貼著螢幕邊。數值對齊 aesop.co.jp（2026-08-08 實測其內文左緣
     在 1905px 視窗為 112px，頁首為 52px——他們的內文本來就比頁首深）。
     只用在滿版出血區塊內的文字，不影響 .wrap。 */
  --hh-content-pad: clamp(24px, 5.9vw, 112px);
  /* 內容欄上限：容器內的閱讀／表單欄寬，全站在此集中管理，各頁不得再寫裸數字。 */
  --hh-read-max: 1200px;   /* 長文閱讀欄：服務條款／隱私權政策／特定商取引法標示 */
  --hh-form-max: 720px;    /* 單欄表單／清單頁：賣場「我的訂單」 */
}

/* 預留垂直捲軸槽：長頁與短頁切換時，置中的頁首與內容不左右跳動。 */
html {
  scrollbar-gutter: stable;
}

/* overflow-x:hidden 會讓 sticky 頁首黏在錯誤的 scroll container；支援 clip 的瀏覽器
   改用 clip，舊瀏覽器仍保留 hidden 防止滿版出血造成水平捲動。 */
html,
body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* 全站版面容器唯一來源（官網與賣場共用）。
   各頁不得再自行定義 .wrap 的 max-width／padding——
   2026-07-31 之前 index／about／help／store 與 legal.css 各寫一份，
   其中 legal.css 是 1120px，導致三個法務頁的頁首、頁尾與內容整體比其他頁窄，
   點頁時 HIKARINOHOUSE 字標會左右跳動。改寬窄只改上面的 --hh-layout-* token。
   scripts/tests/layout-container.test.mjs 有防回歸鎖。 */
.wrap {
  max-width: var(--hh-layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hh-layout-pad);
  padding-right: var(--hh-layout-pad);
}

/* 全站 HIKARINOHOUSE 視覺字標唯一來源：尺寸與行高仍由各元件負責。 */
.hh-wordmark {
  font-family: var(--hh-font-wordmark);
  font-weight: 400;
  letter-spacing: normal;
}

/* 首頁／關於我們共用品牌語句：保留明體感，但使用繁中字形與標點。 */
.hh-brand-tagline {
  font-family: "Noto Serif TC", serif;
  font-weight: 400;
}

/* 官網共用頁首。 */
.hh-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
}

.hh-marketing-bar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.hh-marketing-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-size: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hh-marketing-current {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.hh-mobile-menu {
  display: none;
  position: relative;
  flex: 0 0 auto;
}

.hh-mobile-menu summary {
  min-width: 64px;
  min-height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .08em;
  list-style: none;
}

.hh-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.hh-mobile-menu summary::after {
  content: "＋";
  width: 1em;
  margin-left: 8px;
  color: var(--hh-color-muted);
  text-align: center;
}

.hh-mobile-menu[open] summary::after {
  content: "−";
}

.hh-mobile-menu__links {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(320px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  background: var(--hh-color-paper);
  border: 1px solid var(--hh-color-line);
  color: var(--hh-color-ink);
}

.hh-mobile-menu__links a,
.hh-mobile-menu__links span {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--hh-color-line);
  color: var(--hh-color-ink);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

.hh-mobile-menu__links > :first-child {
  border-top: 0;
}

.hh-mobile-menu__links span[aria-current="page"] {
  color: var(--hh-color-muted);
}

/* 關於我們／常見問題共用頁尾。 */
.hh-compact-footer {
  background: var(--hh-color-dark);
  color: #FFFEF2;
}

.hh-compact-footer__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: #FFFEF2;
  letter-spacing: .04em;
  border-top: 1px solid #FFFEF2;
}

.hh-compact-footer__nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  font-size: 11px;
  line-height: 1.2;
}

.hh-compact-footer__nav a {
  color: #FFFEF2;
}

.hh-compact-footer__nav a + a::before {
  content: "・";
  color: #FFFEF2;
  padding: 0 9px;
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 860px) {
  .hh-site-header > .wrap {
    height: 56px;
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
  }

  .hh-desktop-nav {
    display: none !important;
  }

  .hh-mobile-menu {
    display: block;
  }

  .hh-marketing-bar {
    height: 56px;
    min-height: 56px;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
}