/* ============================================================
   qu-custom.css
   quオンラインショップ専用のカスタムスタイル
   Blushテーマ本体を直接編集せず、ここに差分を集約する。
   ============================================================ */


/* ------------------------------------------------------------
   フォント: 明朝体（エレガント）への置き換え
   - 英文: Cormorant Garamond（細く繊細・上品）
   - 和文: Noto Serif JP（細明朝）
   - フォールバック: Hiragino Mincho ProN / 游明朝
   ボタン・ヘッダーUI・価格・カートなど機能要素は除外し、
   読み物（タイトル・本文・見出し）に絞って適用する。
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=DM+Sans:wght@300;400&family=Noto+Serif+JP:wght@300;400;500&display=swap');

:root {
  --qu-font-serif: 'Cormorant Garamond', 'Noto Serif JP', 'Hiragino Mincho ProN', '游明朝', YuMincho, 'MS PMincho', serif;
}

/* ------------------------------------------------------------
   数字の可読性: ライニング数字（ベースライン揃い）へ統一
   Cormorant Garamond は標準で「オールドスタイル数字」を使うため、
   郵便番号・住所・価格・電話番号などで数字が沈んだり伸びたりして
   読みにくい。htmlに指定して継承させ、サイト全体の数字を
   ベースライン揃いのライニング数字に統一する。
   DM Sans 等のUIフォントは元々ライニング数字のため影響なし。
   ※ lnum 以外のデフォルト機能（合字・カーニング等）は無効化されない。
   ------------------------------------------------------------ */
html {
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1;
  font-feature-settings: "lnum" 1;
}

/* 商品タイトル・コレクションタイトル・見出し */
.product__title,
.product__title h1,
.product-title,
.heading-style,
h1, h2, h3,
.page-title,
.collection__title,
.section__heading,
.rte h1, .rte h2, .rte h3 {
  font-family: var(--qu-font-serif) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* 商品説明・固定ページ本文（読み物部分） */
.product__description,
.product__description p,
.product__description li,
.rte,
.rte p,
.rte li,
.page-content,
.product-info .product__text {
  font-family: var(--qu-font-serif) !important;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

/* 価格・ボタン・ヘッダーUI は明朝にしない（既存sans-serifを維持）
   → 上のセレクタで意図的に対象外にしているが、念のため明示 */
.button,
.btn,
.product__price,
.price,
.site-header,
.cart,
.form__input,
input, select, textarea {
  font-family: inherit;
}

/* ------------------------------------------------------------
   商品カードのタイトルを明朝に統一（詳細ページH1とブランド書体を揃える）
   - ホーム/コレクションの product-item カード、および詳細ページ「関連商品」の
     compact カードのタイトルは、テーマ標準のサンセリフ太字(text-weight--bold)
     のままで、詳細ページH1(.product__title=明朝)や各セクション見出しと書体が
     ズレていた（同一画面で見出し＝明朝／商品名＝サンセリフ太字の不統一）。
   - ここでカードのタイトルも --qu-font-serif（Cormorant Garamond）に統一する。
   - 太さは 500（import済み）。詳細ページH1の400は小サイズのカードでは線が細く
     弱く見えるため半段だけ重くする。700は未importでfaux boldになり、かつ
     ブランドの静けさに対して強すぎるため避ける。
   ------------------------------------------------------------ */
.product-item__title,
.product-item__title span,
.product-item-compact__details a,
.product-item-compact__details a span {
  font-family: var(--qu-font-serif) !important;
}
.product-item__title span,
.product-item-compact__details a span {
  font-weight: 500 !important;        /* テーマの text-weight--bold(700) を上書き */
  letter-spacing: 0.02em;             /* 詳細ページH1と字間を揃える */
}

/* 商品名のサイズを拡大して「名前＝主役／価格＝従」の階層を明確化
   - 現状は text-size--large = 16px(モバイル)/18px(PC)。明朝はx-heightが小さく
     同じpxでも小さく見えるため、価格(下のB案)との差が弱かった。
   - clampでモバイル約19px〜PC 21pxへ。テーマのブレークポイントに依存しない。
   - 対象はホーム/コレクションのカードのみ（compactの関連商品は据え置き）。 */
.product-item__title span {
  font-size: clamp(19px, 1rem + 0.5vw, 21px) !important;
  line-height: 1.3;
}

/* ------------------------------------------------------------
   カード価格を「静かな従」に整える（B案・池田さん承認）
   - 価格は機能情報。明朝にはせずDM Sans（本文/UIと同じ）を維持しつつ、
     細字(300)＋字間＋淡色で一段引かせ、明朝の商品名を主役に立てる。
   - DM Sans 300 は上の@importで読み込み済み（faux lightを避けるため明示）。
   - スコープはカードの価格(.product-item__price)のみ。商品詳細ページの
     メイン価格(.product__price等)には影響させない。
   ------------------------------------------------------------ */
.product-item__price,
.product-item__price .product-price,
.product-item__price .product-price--original {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em;
  color: #6b6b6b !important;
}


/* ------------------------------------------------------------
   カラースワッチ: 日本語カラー名 → 実色（HEX）マッピング
   Shopify標準のvalue.swatch.colorが空の場合、テーマは
   `background-color: <カラー名そのまま>` を出力するため、
   日本語名（ゴールド/シルバー等）だとCSS不正値で白丸になる。
   ここで [value=...] 属性セレクタで実色を上書きする。
   ------------------------------------------------------------ */

/* スワッチ表示の前提として、Blush側で .product-variant__item-swatch--image
   または --color クラスが付いた要素に背景色を当てる */
.product-variant__input[value="ゴールド"] + .product-variant__label .product-variant__item-swatch {
  background-color: #C9A227 !important; /* 落ち着いたゴールド */
  background-image: linear-gradient(135deg, #E0BE5A 0%, #B8861E 100%) !important;
}

.product-variant__input[value="シルバー"] + .product-variant__label .product-variant__item-swatch {
  background-color: #C0C5C8 !important;
  background-image: linear-gradient(135deg, #E6E8EA 0%, #A8AEB2 100%) !important;
}

.product-variant__input[value="ローズゴールド"] + .product-variant__label .product-variant__item-swatch {
  background-color: #C99888 !important;
  background-image: linear-gradient(135deg, #E5B6A4 0%, #B07F6F 100%) !important;
}

.product-variant__input[value="ホワイトゴールド"] + .product-variant__label .product-variant__item-swatch {
  background-color: #E8E5DA !important;
  background-image: linear-gradient(135deg, #F2EFE6 0%, #D4CFC0 100%) !important;
  border: 1px solid #cfcabb !important;
}

/* ------------------------------------------------------------
   商品説明（description）の見出しスタイル
   - 大きな h3 + ■ 記号の組み合わせはギャップが大きく洗練感を損なうため、
     記号は HTML 側で削除し、見出しは「本文比 1.05〜1.15倍 + 字間広め」に絞る
   - セクション間に余白を設けて「ひと呼吸」を作る
   ------------------------------------------------------------ */

.product__description h3,
.rte h3 {
  font-family: var(--qu-font-serif) !important;
  font-size: 0.95rem !important;          /* 本文とほぼ同サイズに抑制 */
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;      /* 字間を広めにとって存在感を出す */
  line-height: 1.6 !important;
  margin-top: 2.8em !important;           /* セクション間の呼吸 */
  margin-bottom: 1.1em !important;
  padding-top: 1.6em !important;          /* 罫線と見出し文字の間隔 */
  padding-bottom: 0 !important;
  color: #2a2a2a;
  border: none !important;
  border-top: 1px solid #e8e8e8 !important;  /* セクション区切りの極薄罫線 */
}

/* description 内ボールド解除（洗練のため強調をやめる） */
.product__description strong,
.product__description b,
.rte strong,
.rte b {
  font-weight: 400 !important;
}

/* description 内の箇条書きを廃止し、リストマーカーを完全に消す
   （旧データ互換用。今後の生成は <p> 中心、ul/li は使わない方針） */
.product__description ul,
.product__description ol,
.rte ul,
.rte ol {
  list-style: none !important;
  padding-left: 0 !important;
}
.product__description li,
.rte li {
  list-style: none !important;
}

/* キャッチコピー（先頭の <p class="catch">）も控えめに整える */
.product__description p.catch,
.rte p.catch {
  font-family: var(--qu-font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.8;
  margin-bottom: 2em;
  color: #1f1f1f;
}

/* 本文・リストの行間と余白を読みやすく */
.product__description p,
.product__description li,
.rte p,
.rte li {
  line-height: 1.95 !important;
  margin-bottom: 0.7em;
}

.product__description ul,
.rte ul {
  margin-bottom: 1.6em;
  padding-left: 1.2em;
}


/* 在庫切れバリアントの視覚表現: グレーアウト + 斜線 */
.product-variant__item--color.disabled .product-variant__label,
.product-variant__input.disabled + .product-variant__label {
  opacity: 0.4;
  cursor: not-allowed;
  position: relative;
}

.product-variant__item--color.disabled .product-variant__label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #888;
  transform: rotate(-30deg);
  pointer-events: none;
}



/* ------------------------------------------------------------
   ヘッダー: ロゴサイズの微調整
   参考（eclat / UNIQLO / MUJI）の余白感に寄せて、
   画像ロゴ／テキストロゴ両方を控えめに。
   ------------------------------------------------------------ */

/* 画像ロゴが使われた場合の高さ（CSS変数） */
.header__top,
.header__bottom {
  --header-logo: 32px !important;
  --header-vertical-space: 42px !important;
}

@media screen and (max-width: 767px) {
  .header__top,
  .header__bottom {
    --header-logo: 24px !important;
    --header-vertical-space: 28px !important;
  }
}

/* ------------------------------------------------------------
   ヘッダー両端詰め（bonaventura/ÉCLAT流）
   既存6列グリッド（menu search logo wishlist account cart）はそのまま使い、
   コンテナの左右paddingを「端の余白」にして、最外アイコン（左=ハンバーガー / 右=カート）
   の端側内側paddingを0にして端へ寄せる。通常ヘッダーとスティッキー複製の両方に適用。
   ------------------------------------------------------------ */
/* ヘッダー本文を横幅いっぱいに広げ、アイコンを端へ。
   .container--large（max-width=--theme-max-width・中央寄せ・theme.css:1086）がアイコンを端に届かせない原因。
   ヘッダー内だけ max-width を解除し、端余白を padding で持たせる。 */
main-header .header-container--top .container--large,
.sticky-header .header-container--top .container--large {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 26px !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  main-header .header-container--top .container--large,
  .sticky-header .header-container--top .container--large {
    padding-inline: 16px !important;
  }
}
/* header__top 自体の左右paddingは0（端余白は container--large が担う・二重余白回避） */
main-header .header__top,
.sticky-header .header__top {
  padding-inline: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
/* 最左（ハンバーガー）の端側padding=0、最右（カート）の端側padding=0 */
main-header .area--menu .mobile-menu-button,
main-header .area--menu .icon-button,
.sticky-header .area--menu .mobile-menu-button,
.sticky-header .area--menu .icon-button {
  padding-inline-start: 0 !important;
}
main-header .area--cart .icon-button,
.sticky-header .area--cart .icon-button {
  padding-inline-end: 0 !important;
}

/* テキストロゴ（shop.name が直接表示される）を小さく・細く・ゆとりある字間に
   右側アイコン（22x22）と同等の視覚的高さを目標に、font-size を抑える */
.site-header .logo-txt {
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em;
  line-height: 1;
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  .site-header .logo-txt {
    font-size: 11px !important;
  }
}

@media screen and (min-width: 1024px) {
  .site-header .logo-txt {
    font-size: 12px !important;
  }
}

/* ロゴ周りの余白を詰めて、よりコンパクトな印象に */
.site-header .logo {
  padding: 2px 0;
}


/* ------------------------------------------------------------
   ヘッダー: アイコンボタン統一（検索・お気に入り・カート・ハンバーガー）
   テーマ本体の以下の構造的不整合を吸収して、すべてのアイコンを
   同一の inline-flex ボックスに揃える:
     - .icon-button が display: inline-block 固定高さ → flex化
     - .area--cart のみ margin-inline-end が効いている → 解除
     - ハンバーガーSVGに .button__icon ラッパーがない → 個別対応
     - ハンバーガーの SVG viewBox が 22×14 → 24×24正方形版に作り直し済み
   ------------------------------------------------------------ */

/* 0. ロゴ(absolute, top:50%)とアイコン(grid 行中央)の整列基準を一致させる。
   .area--account の min-height:44px が grid 行を44pxに引き上げる一方、
   .header__top には inline style で固定高さ（--header-logo + --header-vertical-space）が当たっており、
   ロゴはコンテナ中央(=固定高さの50%)、アイコンは行中央(=44pxの50%)を基準にして数pxズレる。
   コンテナ高をコンテンツに追従させることで両者の基準が一致し、視覚的に完全整列する。
   タップ領域 44px は area--account の min-height で維持される。 */
main-header .header__top {
  height: auto !important;
  min-height: calc(var(--header-logo) + var(--header-vertical-space)) !important;
}

/* 1. すべてのヘッダーアイコンボタンを同一の flex 中央寄せボックスにする */
main-header .icon-button,
main-header .mobile-menu-button,
main-header .button--solid.button--icon,
main-header .button--icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  padding-block: 8px !important;
  padding-inline: 12px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text-header, #111) !important;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  main-header .icon-button,
  main-header .mobile-menu-button {
    padding-block: 7px !important;
    padding-inline: 10px !important;
  }
}

main-header .icon-button:hover,
main-header .mobile-menu-button:hover {
  opacity: 0.65;
}

/* 2. カート専用に効いているズレ要因 margin を相殺 */
main-header .header__top .area--cart .button__icon {
  margin-inline-end: 0 !important;
}

/* 3. .button__icon ラッパーも flex で中央寄せ。これでSVGがピクセル単位で中央に来る */
main-header .icon-button .button__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
}

/* 4. SVGサイズ統一: 22×22（mobileは20×20）。
   ハンバーガーは viewBox 22×14 だが preserveAspectRatio=meet（既定）で
   3本線が同じ高さの中で縦中央に letterbox される */
main-header .icon-button .button__icon svg,
main-header .mobile-menu-button > svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

@media screen and (max-width: 767px) {
  main-header .icon-button .button__icon,
  main-header .icon-button .button__icon svg,
  main-header .mobile-menu-button > svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* 5. ストローク太さ統一（やや太めにして視認性UP・参考2サイトと同等の存在感） */
main-header .icon-button svg path,
main-header .icon-button svg circle,
main-header .mobile-menu-button > svg path {
  stroke-width: 1.5 !important;
}

/* カート個数バッジ: 黒丸＋白数字・白縁つきでアイコン右上に小さく配置
   ※従来は数字色を濃色にしていたため「黒背景に黒字＝数字が見えず黒丸がアイコンに被る」不具合だった */
main-header .icon-button__label,
.sticky-header .icon-button__label {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  font-size: 0.625rem;
  line-height: 1;
  top: -3px;
  right: -3px;
  left: auto;
  transform: none;
  background-color: var(--color-text-header, #111);
  color: var(--color-foreground-header, #fff);
  border: 2px solid var(--color-background-header, #fff);
  box-sizing: border-box;
}
html[dir=rtl] main-header .icon-button__label,
html[dir=rtl] .sticky-header .icon-button__label {
  right: auto;
  left: -3px;
}

/* カートに商品が入っていないとき、黒丸バッジを非表示にする
   qu-custom.js が item_count を監視してクラスを切り替える */
.icon-button__label--empty {
  display: none !important;
}


/* ------------------------------------------------------------
   PC のヘッダー構成（パターンA: UNIQLO / MUJI 流の集約型）
     - PCでもハンバーガーボタンを表示
     - PCの中央ナビリンク（menu-classic）は非表示にし、ナビは全部ハンバーガーへ集約
     - 結果: PC は「ハンバーガー（左） / ロゴ（中央） / 検索・お気に入り・カート（右）」
       の左右対称3ブロック構成になる
   モバイル（<=1023px）は Blush 既定の grid（menu 含む）でそのまま動くため変更不要。
   ----
   重要: Blush 本体の正規セレクタは
     .site-header--style-one-row .header__top--logo-center.no-custom-link.site-header--menu-classic
   （特異度 0,4,0）。ここに `!important` 付きで上書きしないと、`.area--menu-classic` 用の
   PC専用 grid-template-areas や `.mobile-menu-button { display: none }` に勝てない。
   ------------------------------------------------------------ */

/* mobile/PC ともに同一の6列グリッド:
     menu(ハンバーガー) | search | logo(中央) | wishlist(♡) | account(人型) | cart
   左2 + 中央 + 右3 で左右対称感を保つ。
   `!important` で Blush 既定を上書き（mobileは3クラスルールに、PCは4クラスルールに同特異度で勝つ） */
.site-header--style-one-row
.header__top--logo-center.no-custom-link.site-header--menu-classic {
  grid-template-columns:
    repeat(2, minmax(max-content, 0))
    auto
    repeat(3, minmax(max-content, 0)) !important;
  grid-template-areas: "menu search logo wishlist account cart" !important;
}

/* wishlist 用の grid-area を新規割り当て（Blush 本体には wishlist 領域がない） */
main-header .area--wishlist {
  grid-area: wishlist;
  justify-self: end;
  display: inline-flex;
  align-items: center;
}

@media screen and (min-width: 768px) {
  /* PC ではナビリンク（menu-classic）を非表示にし、メニューはハンバーガーに集約 */
  .site-header--style-one-row
  .header__top--logo-center.no-custom-link.site-header--menu-classic
  .area--menu-classic {
    display: none !important;
  }

  /* Blush が PC で hide にしていたハンバーガーを表示する */
  .site-header--style-one-row
  .header__top--logo-center.no-custom-link.site-header--menu-classic
  .mobile-menu-button {
    display: inline-flex !important;
  }

  /* ハンバーガーは grid セル内で左端寄せ（既定の justify-self:end を上書き） */
  .site-header--style-one-row
  .header__top--logo-center.no-custom-link.site-header--menu-classic
  .area--menu {
    justify-self: start !important;
  }
}


/* ------------------------------------------------------------
   ヘッダー: ナビゲーションリンクの印象を軽く
   ------------------------------------------------------------ */

.site-nav .site-nav__item > a,
.site-nav__link {
  font-weight: 400;
  letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   ヘッダー: お気に入り（♡）・アカウント（人型）アイコンの整え
   どちらも背景なしの線画スタイルに揃える（search / cart と同系統）。
   お気に入りは grid-area: wishlist、アカウントは grid-area: account に配置。
   ------------------------------------------------------------ */

.area--wishlist .icon-button,
.area--account .icon-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text-header, #111) !important;
  padding-inline: 8px;
}

.area--wishlist .icon-button:hover,
.area--account .icon-button:hover {
  background: transparent !important;
  opacity: 0.65;
}

.area--wishlist .button__icon,
.area--account .button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ヘッダーアイコン（Phosphor thin・fill方式）を currentColor で塗る。
   ※以前は旧ストロークアイコンの黒塗り防止で fill:none にしていたが、
     Phosphorは塗りで細線を描くため反転（fill:none のままだとアイコンが消える）。 */
.area--wishlist svg, .area--wishlist svg path,
.area--account svg, .area--account svg path,
.area--cart svg, .area--cart svg path,
.area--search svg, .area--search svg path {
  fill: currentColor !important;
  color: var(--color-text-header, #111);
}


/* ------------------------------------------------------------
   スティッキーヘッダー（スクロールで再出現する固定ヘッダー）のパリティ
   ----
   section-header.js は data-sticky-header 有効時、ヘッダーを複製して
   document.body 直下に <div class="sticky-header ...">（=main-header の外）を
   生成する。one-row 設定では .header__top を丸ごと複製するため HTML は揃うが、
   上で定義した `main-header ...` スコープの調整は複製版に一切効かない。その結果:
     - ♡(お気に入り) が grid-area: wishlist を失い、定位置から外れて消える
       （検索・人型・カート等はテーマ本体側 `.header__top .area--xxx` で
        grid-area が付くため複製版でも残る。♡だけが main-header スコープ依存）
     - .header__top が height:auto を失い、インライン固定高さで縦が詰まって
       スマホで「ヘッダーが細くなる」ように見える
     - アイコンの寸法・余白がテーマ既定に戻る
   そこで上の `main-header ...` 調整と同内容を .sticky-header にも適用し、
   通常ヘッダーと見た目を一致させる（複製版と通常版は同一要素に同居しないため
   両ルールが競合することはない）。
   ------------------------------------------------------------ */

/* 高さをコンテンツ追従に（インライン固定高さの上書き）。通常版の 307 行に対応 */
.sticky-header .header__top {
  height: auto !important;
  min-height: calc(var(--header-logo) + var(--header-vertical-space)) !important;
}

/* ♡ の grid 配置を復活（通常版の 423 行に対応）。
   grid-template-areas "... wishlist ..." は .site-header--style-one-row 側で
   定義済みのため、ここで grid-area を割り当てれば定位置に戻る */
.sticky-header .area--wishlist {
  grid-area: wishlist;
  justify-self: end;
  display: inline-flex;
  align-items: center;
}

/* アイコンボタンの統一（通常版の 313-316 行に対応） */
.sticky-header .icon-button,
.sticky-header .mobile-menu-button,
.sticky-header .button--solid.button--icon,
.sticky-header .button--icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  padding-block: 8px !important;
  padding-inline: 12px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text-header, #111) !important;
  box-sizing: border-box;
}

.sticky-header .icon-button:hover,
.sticky-header .mobile-menu-button:hover {
  opacity: 0.65;
}

/* カート専用 margin の相殺（通常版の 344 行に対応） */
.sticky-header .header__top .area--cart .button__icon {
  margin-inline-end: 0 !important;
}

/* .button__icon ラッパーの中央寄せ・寸法（通常版の 349 行に対応） */
.sticky-header .icon-button .button__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
}

/* SVG 寸法統一: 22×22（通常版の 360-361 行に対応） */
.sticky-header .icon-button .button__icon svg,
.sticky-header .mobile-menu-button > svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* ストローク太さ統一（通常版の 377-379 行に対応） */
.sticky-header .icon-button svg path,
.sticky-header .icon-button svg circle,
.sticky-header .mobile-menu-button > svg path {
  stroke-width: 1.5 !important;
}

@media screen and (max-width: 767px) {
  /* アイコン余白とSVG寸法のモバイル調整（通常版の 331-335 / 367-373 行に対応） */
  .sticky-header .icon-button,
  .sticky-header .mobile-menu-button {
    padding-block: 7px !important;
    padding-inline: 10px !important;
  }

  .sticky-header .icon-button .button__icon,
  .sticky-header .icon-button .button__icon svg,
  .sticky-header .mobile-menu-button > svg {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ------------------------------------------------------------
   お気に入りドロワー
   - 未ログイン時のみ上部にログインCTA
   - 待機中はスケルトンを表示
   ------------------------------------------------------------ */

#site-wishlist-sidebar .sidebar__body {
  padding: 24px 20px;
}

/* 未ログインユーザー向けログインCTA */
.wishlist-login-cta {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background-color: #fafafa;
  text-align: center;
}

.wishlist-login-cta__text {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-main, #111);
  letter-spacing: 0.04em;
}

.wishlist-login-cta__button {
  display: inline-block;
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #111;
  border: 1px solid #111;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.wishlist-login-cta__button:hover {
  opacity: 0.78;
  text-decoration: none;
}

.wishlist-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wishlist-skeleton__line {
  height: 12px;
  width: 60%;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 0%, #f6f6f6 50%, #eee 100%);
  background-size: 200% 100%;
  animation: qu-skeleton-shimmer 1.4s linear infinite;
}

.wishlist-skeleton__line--short {
  width: 35%;
}

.wishlist-skeleton__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.wishlist-skeleton__card {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 0%, #f6f6f6 50%, #eee 100%);
  background-size: 200% 100%;
  animation: qu-skeleton-shimmer 1.4s linear infinite;
}

@keyframes qu-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-skeleton__line,
  .wishlist-skeleton__card {
    animation: none;
  }
}

/* フェッチ失敗時のフォールバック表示 */
.wishlist-fallback {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-main, #444);
  line-height: 1.7;
}

.wishlist-fallback a {
  text-decoration: underline;
}

/* 注入後の中身（Wishlist King側のテンプレート）が画面幅いっぱいに広がりすぎないよう微調整 */
#site-wishlist-sidebar .sidebar__body > *:first-child {
  margin-top: 0;
}


/* ------------------------------------------------------------
   ハンバーガーメニュー下部: アカウント関連リンク
   ログイン状態に応じて「ログイン/新規会員登録」または
   「マイページ/ログアウト」を表示
   ------------------------------------------------------------ */

.site-menu-account-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 0;
  border-top: none;
}

.site-menu-account-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-main, #111);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-menu-account-link:hover {
  opacity: 0.65;
  text-decoration: none;
}

/* ハンバーガーメニュー下部フッターの上ボーダー（テーマ既定）を無効化
   .site-menu-sidebar-footer はサイトメニューのsidebar__footerにのみ付く識別クラス */
.site-menu-sidebar-footer {
  border-top: none !important;
}

/* ============================================================
   Amazon型ギャラリー（PC 1024px以上）

   qu-custom.js が独自DOMを構築し、元の .grid（css-slider配下）は
   .qu-original-hidden で視覚的に隠す（DOMは残しSEO/構造化データ維持）。

   構造:
     .product-gallery.qu-amazon-gallery
       .qu-gallery-wrapper（grid 88px 1fr）
         .qu-thumbs（縦並びサムネ・最大80vhで内部スクロール）
           .qu-thumb / .qu-thumb-more
         .qu-main（aspect-ratio 1:1, max-height 80vh）
           img.qu-main__img
       .qu-original-hidden（旧 .grid + css-slider）

   ねらい:
     - 19枚スタックで縦に伸びていた問題を解消（gallery列高 ≤ 80vh）
     - 右テキスト列が常に画面内に届く
     - css-slider の inert 問題を根本回避（独自DOMでクリックを直結）
   ============================================================ */
@media (min-width: 1024px) {
  /* 元の .grid（css-slider配下）と標準サムネ列を視覚的に隠す。
     visibility:hidden + position:absolute でDOMは残しつつ操作不可に */
  .qu-amazon-gallery .qu-original-hidden,
  .qu-amazon-gallery .product-gallery__thumbnails {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* ギャラリー親 */
  .qu-amazon-gallery {
    position: relative;
  }

  /* wrapper: 88px サムネ + 1fr メイン
     親 .product-gallery は qu-custom.js で has-thumbnails クラスを剥がし、
     通常のblock要素に戻している。wrapperは100%幅を取って広くなれる。 */
  .qu-amazon-gallery .qu-gallery-wrapper {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
  }

  /* サムネ列: 縦並び・メイン画像の高さに合わせて内部スクロール */
  .qu-amazon-gallery .qu-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(80vh, calc(88px * 6 + 8px * 5 + 8px));
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  .qu-amazon-gallery .qu-thumbs::-webkit-scrollbar { width: 4px; }
  .qu-amazon-gallery .qu-thumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
  }

  /* サムネボタン: 88x88 正方形 */
  .qu-amazon-gallery .qu-thumb {
    width: 88px;
    height: 88px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
    display: block;
  }
  .qu-amazon-gallery .qu-thumb:hover {
    border-color: rgba(0, 0, 0, 0.5);
  }
  .qu-amazon-gallery .qu-thumb--active {
    border-color: #000;
    border-width: 2px;
  }
  .qu-amazon-gallery .qu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .qu-amazon-gallery .qu-thumb--hidden {
    display: none;
  }

  /* +N ボタン */
  .qu-amazon-gallery .qu-thumb-more {
    width: 88px;
    height: 88px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .qu-amazon-gallery .qu-thumb-more:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
  }

  /* メインビューア: 正方形（aspect-ratio 1:1）+ max-width で過大化を防ぐ
     max-height だけだと width が縮まず aspect-ratio が壊れて横長になるため
     max-width: 80vh を併用して「viewport高 を辺長とする正方形」を上限にする */
  .qu-amazon-gallery .qu-main {
    width: 100%;
    max-width: 80vh;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qu-amazon-gallery .qu-main__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* ============================================================
   商品カード改修（2026-06-10）
   1) サムネイルを角丸にしてやわらかい印象に
   2) quick_buyボタン廃止に伴うカラースウォッチ表示
   ============================================================ */

/* 商品カードのサムネイル角丸（テーマ変数を上書き） */
.product-item {
  --border-radius-product-card: 14px;
}

/* カードのカラースウォッチ */
.qu-card-swatches {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.qu-card-swatch {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform 0.15s ease;
}
.qu-card-swatch:hover {
  transform: scale(1.18);
}
.qu-card-swatch[data-color="ゴールド"] {
  background: linear-gradient(135deg, #f3e3b8, #d9b56b 55%, #c39c4f);
}
.qu-card-swatch[data-color="シルバー"] {
  background: linear-gradient(135deg, #f4f4f4, #cfd2d6 55%, #aeb3b9);
}
.qu-card-swatch[data-color="ローズゴールド"] {
  background: linear-gradient(135deg, #f7dcd3, #e0a98f 55%, #cd9275);
}
.qu-card-swatch[data-color="ホワイトゴールド"] {
  background: linear-gradient(135deg, #fafafa, #e3e2dd 55%, #cfcdc4);
}
/* 選択中のカラー: 内側の白枠は残しつつ、外側に細いダークリングを足す */
.qu-card-swatch--active {
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   カードのバッジ（売り切れ／セール）を左上へ
   - 既定は右上（component-product-item.css）だが、お気に入り♡を
     画像右上(Swish: top-end)に出すため、バッジ側を左上に逃がして棲み分ける
   - LTR(日本語)のみ上書き。RTLは既定のまま
   ------------------------------------------------------------ */
html[dir=ltr] .product-item__badges {
  right: auto;
  left: var(--gutter-small);
}
html[dir=ltr] .product-item__badge {
  float: left;
}


/* ------------------------------------------------------------
   お気に入り♡（Swishコレクションボタン）を白ベースに
   ♡は <wk-button>（Lit製WebコンポーネントでShadow DOM）で描画されるため、
   中の svg を外部CSSで直接いじれない。Swishが内部で使う色変数を上書きする。
   - --wk-color-accent-1/2 は「RGBトリプレット」形式（内部で rgb(var(--…)) として使用）。
     グローバルは 0,0,0（黒）。カード（.product-item）内だけ 255,255,255（白）に上書き。
     CSS変数はShadow境界を貫通するので中の svg まで白くなる
     （plain_accent_1: 未登録=白い輪郭 / selected=白塗り）。
   - 商品ページ/お気に入り一覧/ヘッダーの♡はスコープ外＝据え置き。
   - 太さ(icon_stroke_width)・影(show_shadow)は config/settings_data.json 側で調整。
   ------------------------------------------------------------ */
.product-item {
  --wk-color-accent-1: 255, 255, 255;
  --wk-color-accent-2: 255, 255, 255;
}
/* 白が明るい背景でも沈まないよう、ボタン要素に極薄シャドウ（届く範囲で保険） */
.product-item wk-button,
.product-item [class*="wishlist" i] {
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
}


/* ------------------------------------------------------------
   フッター: ブランドロックアップ（左）＋ナビ2列（Shop / Information）
   - 左カラム: ロゴ → タグライン(セリフ) → SNS を縦に束ねる
   - 右側: Shop / Information の2列（テキストは左揃え）
   - 法務リンクと決済アイコンは最下部バー(footer-bottom)へ集約し、縦の間延びを防ぐ
   - PC(≥1024px)=3列 / タブレット=既存2列 / スマホ(≤767px)=ブランド中央＋ナビ2列
   ------------------------------------------------------------ */

/* タグライン（セリフは既存の --qu-font-serif） */
#footer-block-text_pxUweR .footer-item__content,
#footer-block-text_pxUweR .footer-item__content p {
  font-family: var(--qu-font-serif) !important;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Shop / Information の見出し */
.footer-top .footer-item__title {
  font-size: 1.15rem;
}

/* フッターのSNSアイコン（Instagram / LINE・モノクロ・墨色）
   ※ SVGは snippets/qu-social-icons.liquid で描画（richtextにSVGを入れられないため）。
   ※ リンク先はテーマ設定 social_instagram / social_custom。空のうちは '#' プレースホルダ */
.qu-social {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin: 0;
}
.qu-social__link {
  display: inline-flex;
  color: #2b2b2b;            /* 墨色 */
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.qu-social__link:hover { opacity: 0.55; }
.qu-social svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* =========================================================================
   フッター刷新（2026-07-30）
   買う前に気になること（お支払い・お届け・返品）をフッターの主役にする構成。
   ・列1 = ブランド（ロゴ／タグライン／SNS）＋ SHOP ＋ ご案内
   ・列2 = お支払いについて（決済アイコン）
   ・列3 = お届けについて ＋ 返品・交換について
   背景色はテーマ設定 color_background_footer の初期値 #DFE2E3（青みグレー）が
   ブランドのベージュと合わないため、ここで上書きする。
   ＝管理画面で背景色を変えても効かなくなる。色を変えるときはこのCSSを直す。
   ========================================================================= */

.main-footer {
  --qu-footer-bg: #f4f1ec;              /* 温かいオフホワイト */
  --qu-footer-ink: #33302b;             /* 本文 */
  --qu-footer-muted: #6e665c;           /* ラベル・アイコン */
  --qu-footer-rule: rgba(0, 0, 0, 0.14); /* 見出しの罫線 */
  --qu-footer-accent: #b4544d;          /* 送料無料の差し色（ドロワーの送料バナーと同色） */

  background: var(--qu-footer-bg);
  color: var(--qu-footer-ink);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.main-footer a { color: var(--qu-footer-ink); }

/* 見出し: 和文セリフ＋右へ伸びる細い罫線。
   テーマ既定の太字ゴシックだと既製テーマ感が出るため上書きする */
.main-footer .footer-item__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--qu-font-serif) !important;
  font-size: 0.92rem;
  font-weight: 400 !important;
  letter-spacing: 0.09em;
  color: #3a342e;
  margin: 0 0 0.95rem;
}
.main-footer .footer-item__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--qu-footer-rule);
}
/* 同じ列に続く2つ目の見出し（返品・交換について）は上に間隔を空ける */
.main-footer .qu-f-subhead { margin-top: 2.2rem; }

/* 本文 */
.main-footer .qu-f-lead,
.main-footer .qu-f-body p,
.main-footer .qu-f-line .rte p {
  font-size: 0.775rem;
  line-height: 2;
  color: #4e4842;
  margin: 0 0 0.5em;
}
.main-footer .qu-f-lead { margin-bottom: 0.9rem; }
.main-footer .qu-f-body p:last-child,
.main-footer .qu-f-line .rte p:last-child { margin-bottom: 0; }

/* richtext で太字にした部分を差し色にする（送料無料のライン） */
.main-footer .qu-f-line .rte strong,
.main-footer .qu-f-body strong {
  color: var(--qu-footer-accent);
  font-weight: 500;
}

/* アイコン＋文章の1行 */
.main-footer .qu-f-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.main-footer .qu-f-icon {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.3em;
  color: var(--qu-footer-muted);
  fill: currentColor;
  stroke: none;
}

/* 「≫ 配送について」などの補足リンク */
.main-footer .qu-f-more {
  display: block;
  text-align: right;
  font-size: 0.735rem;
  letter-spacing: 0.04em;
  color: var(--qu-footer-muted);
  border-bottom: none;
  margin-top: 0.7rem;
}
.main-footer .qu-f-more::before { content: "\00BB"; margin-right: 0.45em; }
.no-touchevents .main-footer .qu-f-more:hover { opacity: 0.62; }

/* 決済カード（白い枠でまとめると、背景のベージュから浮いて安心感が出る） */
.main-footer .qu-pay-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  padding: 0.8rem 0.85rem 0.72rem;
  margin-bottom: 0.5rem;
}
.main-footer .qu-pay-card:last-child { margin-bottom: 0; }
.main-footer .qu-pay-card__label {
  font-size: 0.685rem;
  letter-spacing: 0.05em;
  color: var(--qu-footer-muted);
  margin: 0 0 0.55rem;
}
.main-footer .qu-pay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.main-footer .qu-pay-icon {
  width: 38px;
  height: 24px;
  display: block;
}

/* メニュー項目（SHOP／ご案内）。ご案内だけ行頭にアイコンが付く */
.main-footer .footer-item__menu span { margin-bottom: 0.5rem; }
.main-footer .footer-item__menu a {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  border-bottom: none;
}
.main-footer .footer-item__menu .qu-f-navitem {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

/* タグライン */
.main-footer #footer-block-text_pxUweR .footer-item__content p {
  font-family: var(--qu-font-serif) !important;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #4a443d;
}

/* 最下部バー: 左=法務リンク / 右=コピーライト */
.footer-bottom__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.3rem;
  font-size: 0.725rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.52);
}
.footer-bottom__legal a {
  color: rgba(0, 0, 0, 0.52);
  border-bottom: none;
}
.no-touchevents .footer-bottom__legal a:hover { opacity: 0.6; }
.footer-bottom__copy {
  font-size: 0.725rem;
  color: rgba(0, 0, 0, 0.52);
}
.footer-bottom__copy a { color: inherit; border-bottom: none; }

@media screen and (min-width: 1024px) {
  /* 3列。行は列1のブロック(ロゴ／タグライン／SHOP／ご案内)だけが占め、
     列2・列3は 4行ぶんをまたぐ1ブロックにしてある。
     こうしないと、片方の列の高さがもう片方の行を押し広げて項目の間が空く */
  .footer-top .grid--layout {
    grid-template-columns: 1.05fr 1.3fr 1.15fr;
    column-gap: var(--col-gap, 3.4rem);
    row-gap: 0;
    align-items: start;
  }

  #footer-block-image_G3EqHg { grid-column: 1; grid-row: 1; margin-bottom: 0.35rem; }
  #footer-block-text_pxUweR  { grid-column: 1; grid-row: 2; max-width: 22rem; margin-bottom: 1.9rem; }
  #footer-block-menu_qYig9B  { grid-column: 1; grid-row: 3; margin-bottom: 2.2rem; }
  #footer-block-menu_mijHcU  { grid-column: 1; grid-row: 4; }

  #footer-block-qu_payment   { grid-column: 2; grid-row: 1 / span 4; }
  #footer-block-qu_delivery  { grid-column: 3; grid-row: 1 / span 4; }

  /* ご案内は項目が多いので2列に折る。
     列1だけが縦に伸びて、右の2列の下に大きな空白ができるのを防ぐ */
  #footer-block-menu_mijHcU .footer-item__menu {
    column-count: 2;
    column-gap: 1.4rem;
  }
  #footer-block-menu_mijHcU .footer-item__menu span {
    break-inside: avoid;
  }
}

/* タブレット（768〜1023px）: 2列。決済とお届けを横に並べる */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .footer-top .grid--layout {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
    row-gap: 2.2rem;
    align-items: start;
  }
  #footer-block-image_G3EqHg,
  #footer-block-text_pxUweR { grid-column: 1 / -1; }
}

/* スマホ(≤767px): 1列。ロゴ → お支払い → お届け/返品 → ご案内 → SHOP の順
   （並び順は sections/footer-group.json の block_order で決めている） */
@media screen and (max-width: 767px) {
  .footer-top .grid--layout.grid-lap-1 {
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
  }
  #footer-block-image_G3EqHg { margin-bottom: -1.4rem; }

  /* 最下部バー: 縦積み（法務 → ©）。縦積み自体は section-footer.css が担う */
  .footer-bottom__inner { align-items: flex-start; gap: 0.6rem; }
}


/* =========================================================================
   ハンバーガードロワー（ÉCLAT風）
   ドロワー内だけ明朝/セリフ。区切り線を消し・余白を詰め・アイコン＋ラベルを左寄せ。
   スコープは #site-menu-sidebar に限定し、サイト本文(DM Sans)には影響させない。
   ========================================================================= */

/* ドロワー内だけ明朝/セリフ（和文=明朝・欧文=セリフ） */
#site-menu-sidebar {
  font-family: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", "Times New Roman", serif;
}

/* 上部「HOME」（タイトル位置のリンク） */
#site-menu-sidebar .sidebar__title {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-main);
  text-decoration: none;
}

/* 区切り線を消し・余白を詰め・左寄せ（component-mobile-navigation.css の既定を上書き）
   ※ id 付きセレクタで詳細度を上げ、!important なしで上書き */
#site-menu-sidebar mobile-navigation .site-nav ul a:not(.button):not(.menu-promotion-background-image) {
  padding: 0.42rem 0;
  border-bottom: none;
  justify-content: flex-start;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
}

/* セクション見出し（CATEGORY / SHOP INFO）
   階層差別化（案D・2026-06-22）: 見出しを少し大きく・少し濃くして、
   ぶら下がりリンク(下の .link-list 指定で右インデント)との差を明確にする。 */
.qu-drawer-heading {
  font-family: "Times New Roman", "Hiragino Mincho ProN", serif;
  font-size: 0.98rem;
  letter-spacing: 0.11em;
  font-weight: 600;
  color: #3d3d3d;
  margin: 1.85em 0 0.55em;
  /* 見出し<p>は項目<ul>の外にあるため、同じ gutter を当てて左端の基準を揃える
     （リンク側はこの基準から +0.7rem 右へインデントする）。 */
  padding-inline: var(--sidebar-gutter, 20px);
}

/* 案D: ぶら下がりリンク（CATEGORY/SHOP INFO の各項目）を見出しより少し右へ。
   gutter基準 +0.7rem インデントして「見出しが束ねている」階層を出す。
   ドロワー内の上位リンクリスト(.link-list)のみが対象（#id でスコープ）。 */
#site-menu-sidebar .link-list {
  padding-inline: calc(var(--sidebar-gutter, 20px) + 0.7rem) var(--sidebar-gutter, 20px);
}

/* 送料無料バナー（点線枠・中央寄せ・コンパクト） */
.qu-drawer-ship {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  text-align: center;
  border: 1px dashed #d4d4d4;
  border-radius: 2px;
  padding: 0.75em 0.6em;
  /* 項目と左右端を揃えるため gutter 分インセット */
  margin: 0.9em var(--sidebar-gutter, 20px) 0.3em;
  line-height: 1.5;
}
.qu-drawer-ship__lead { font-size: 0.8rem; color: #555; letter-spacing: 0.02em; }
.qu-drawer-ship__free {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1rem;
  color: #b4544d; /* ÉCLAT風の差し色（やや抑えた赤） */
  letter-spacing: 0.03em;
}
.qu-drawer-ship__icon { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.qu-drawer-ship__icon path { stroke: none !important; }

/* SHOP INFO・送料バナーのアイコン（Phosphor thin・fill方式）
   テーマ既定（component-mobile-navigation.css の .menu-link svg path{stroke}）を打ち消し、
   塗りで細線描画する。黒い面塗りにならないよう stroke は無効化。 */
#site-menu-sidebar .qu-drawer-info .menu-link svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: currentColor; opacity: 0.78;
}
#site-menu-sidebar .qu-drawer-info .menu-link svg path { fill: currentColor; stroke: none !important; }

/* ============================================================
   スクロールreveal（全ページ共通）
   スクロールに合わせて見出し・商品カード・記事内画像が
   フェードしながら少し上に動いて現れる、控えめな演出。
   - 初期状態の非表示は .qu-reveal-ready（qu-custom.js が付与）配下のみ。
     JSが動かない環境ではコンテンツは常時表示され消えない。
   - prefers-reduced-motion（動きを減らす設定）では完全無効。
   ============================================================ */
:root {
  --qu-reveal-rise: 18px;                          /* 立ち上がりの移動量 */
  --qu-reveal-dur: 0.7s;                           /* フェードの所要時間 */
  --qu-reveal-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
.qu-reveal-ready .qu-reveal {
  opacity: 0;
  transform: translateY(var(--qu-reveal-rise));
  will-change: opacity, transform;
}
.qu-reveal-ready .qu-reveal.qu-reveal--in {
  opacity: 1;
  transform: none;
  transition: opacity var(--qu-reveal-dur) var(--qu-reveal-ease),
              transform var(--qu-reveal-dur) var(--qu-reveal-ease);
}
@media (prefers-reduced-motion: reduce) {
  .qu-reveal-ready .qu-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   Picks（featured_collection_CUWeNz）限定のカード調整
   池田さんの意図（2026-06-16）:
   - カラースワッチを Picks では出さない
   - 商品名のフォントを一段下げる
   - カード内の縦余白を詰め、間延びをなくしてサムネを詰めて見せる
   スコープは Picks セクションのみ。All Items・商品一覧ページには非干渉。
   liquid 本体は触らず CSS だけでセクション限定に上書きする。
   （OS2.0のテンプレJSONでは section.id が template--<番号>__<キー> の複合IDになり
     ラッパーは id="shopify-section-template--<番号>__featured_collection_CUWeNz"。
     <番号>はテーマ複製等で変わるためハードコードせず、安定なキーで後方一致させる）
   ※ フォント/余白の数値は第一弾。ライブで見ながら微調整する前提。
   ------------------------------------------------------------ */
/* ① カラースワッチを非表示（機能自体は商品ページ等で従来どおり生きる） */
[id$="__featured_collection_CUWeNz"] .qu-card-swatches {
  display: none;
}
/* ② 商品名のフォントを一段下げる
   （全体カードの clamp(19px,1rem+0.5vw,21px) を Picks だけ上書き） */
[id$="__featured_collection_CUWeNz"] .product-item__title span {
  font-size: clamp(14px, 0.8rem + 0.4vw, 16px) !important;
  line-height: 1.25;
}
/* ③ カード内の縦余白を詰める
   - 画像↔テキスト間（既定 padding-top: --gutter-regular = PC25px/SP15px）
   - 要素間（既定 .spacing--xlarge > * margin-bottom: 1em） */
[id$="__featured_collection_CUWeNz"] .product-item__text.gutter-top--regular {
  padding-top: 0.55rem;
}
[id$="__featured_collection_CUWeNz"] .product-item__text.spacing--xlarge > * {
  margin-bottom: 0.3em;
}
/* ④ Picksは8点だが、4×2の2段グリッドはPC（デスクトップ≥1024px）専用。
   タブレット/スマホ（≤1023px）は7・8番目を隠して6点（SP=3列で3×2）を維持する。
   （池田さん: SPは6点のままが良い／PCだけ全幅4列×2段にする方針 2026-06-16） */
@media screen and (max-width: 1023px) {
  [id$="__featured_collection_CUWeNz"] .grid--layout > .product-item:nth-child(n+7) {
    display: none;
  }
}


/* ------------------------------------------------------------
   商品ページ「素材・サイズ・お手入れ」アコーディオン
   qu_product メタフィールド（material / size / care）を
   ラベル＋値の行で表示。値が空の項目は Liquid 側で非表示。
   ------------------------------------------------------------ */
.qu-spec {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.qu-spec__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.2rem 1rem;
  align-items: baseline;
}
.qu-spec__label {
  margin: 0;
  font-weight: 600;
  opacity: 0.65;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.qu-spec__value {
  margin: 0;
  line-height: 1.7;
}
@media screen and (max-width: 600px) {
  .qu-spec__row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

/* ------------------------------------------------------------
   残りわずか表示（商品ページ）を上品なピルバッジに
     - 実在庫連動の低在庫サインを購入エリア直前で視認性UP
     - 赤い煽りは使わず、背景=オフホワイト/ドット=落ち着いたゴールド(#C9A227)/文字=墨色
     - show_quantities=below のため、表示される時点で「低在庫」＝常にバッジ化でよい
   ------------------------------------------------------------ */
.product-variant__quantity-holder .product-variant__quantity:not(:empty) {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin-top: 0.75rem;
  padding: 9px 16px;
  background-color: #F6F0E4;
  border: 1px solid #EADFC9;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #2B2B2B;
}
.product-variant__quantity:not(:empty)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #C9A227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
  flex: 0 0 auto;
}
/* 在庫0（売り切れ）はボタンの「売り切れ」に任せ、低在庫ピルは出さない（情報の重複回避）。
   JSが付ける data-stock="out-of-stock" を狙う。残りわずか(little-stock)/残り1点(one-item-stock)は表示。 */
.product-variant__quantity[data-stock="out-of-stock"] {
  display: none !important;
}
/* 「残り1点」は最後の山場。墨色のダークピル＋白文字で「残りわずか」(淡ベージュ)と一目で差別化（赤は不使用・動きなし）。ドットはゴールドのまま墨地に映える */
.product-variant__quantity-holder .product-variant__quantity[data-stock="one-item-stock"]:not(:empty) {
  background-color: #2B2B2B;
  border-color: #2B2B2B;
  color: #FFFFFF;
}

/* お気に入り♡（Swish・商品ページ）色未選択ガード
   色展開あり商品では色を選ぶまで♡を薄く＋無効化し、誤って既定色（ゴールド）が
   保存されるのを防ぐ。色を選ぶと親 <product-page> に .variant-selected が付き解除される
   （テーマ純正機構に相乗り）。クラス付与は main-product.liquid の @app ラッパー側で制御。
   ※pointer-events:none はSwishボタン側で上書きされ効かない（見た目だけ薄く・クリックは通る）ため不採用。
     クリックの停止は qu-custom.js のキャプチャ段ガードで確実に行う。ここは見た目（薄さ＋無効カーソル）専用。 */
.product-component--default-to-first-variant-false:not(.variant-selected) .qu-wishlist-gate {
  opacity: 0.4;
}
.product-component--default-to-first-variant-false:not(.variant-selected) .qu-wishlist-gate,
.product-component--default-to-first-variant-false:not(.variant-selected) .qu-wishlist-gate * {
  cursor: not-allowed !important;
}
/* 色未選択時のヒント文。show-block-if-variant-not-selected-yet により色選択で自動的に消える */
.qu-wishlist-hint {
  margin-top: 6px;
}

/* ------------------------------------------------------------
   カート割引コードの「適用」ボタンが日本語2文字で縦書き（縦折返し）に
   なる不具合の修正。
   原因: component-cart.css の `.cart__coupons-form{display:flex}` ＋
         `.cart__coupons-form input{width:100%}` で入力欄が幅を占有し、
         `width:auto` のボタンが1文字幅まで潰れて「適用」が縦に折り返す。
   対処: ボタンを縮ませない(flex-shrink:0)＋折り返さない(white-space:nowrap)。
         入力欄は min-width:0 で正しく縮ませる。後ロードの component-cart.css に
         勝てるよう親(.cart__details)を足して詳細度を一段上げる。
   ------------------------------------------------------------ */
.cart__details .cart__coupons-form .button {
  flex-shrink: 0;
  white-space: nowrap;
  width: auto;
}
.cart__details .cart__coupons-form input {
  min-width: 0;
}

/* ===== 梱包セレクタ（packaging-selector） ===== */
.pkg {
  display: block;
  --pkg-ink: #2b2b2b;
  --pkg-muted: #8c867b;
  --pkg-line: #e3ded3;
  --pkg-surface: #ffffff;
  --pkg-gold: #b79e74;
}
.pkg--product { margin-top: 18px; border-top: 1px solid var(--pkg-line); padding-top: 14px; }
.pkg--sidebar, .pkg--page { margin-top: 16px; }

/* 商品ページの折りたたみ */
.pkg-wrap { display: block; }
.pkg-wrap__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.pkg-wrap__summary::-webkit-details-marker { display: none; }
.pkg-wrap__ttl { font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.pkg-wrap__tag { font-size: 10px; letter-spacing: .06em; color: var(--pkg-muted); border: 1px solid var(--pkg-line); border-radius: 2px; padding: 1px 7px; }
.pkg-wrap__chev { margin-left: auto; color: var(--pkg-muted); font-size: 12px; transition: transform .2s ease; }
.pkg-wrap[open] .pkg-wrap__chev { transform: rotate(180deg); }

/* カートの見出し */
.pkg__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; }
.pkg__title { font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.pkg__hint { font-size: 11px; color: var(--pkg-muted); }
.pkg__helper { font-size: 11.5px; color: var(--pkg-muted); line-height: 1.6; margin: 8px 0 12px; }

/* 2軸のグループ見出し（2026-07-28）
   「箱を選ぶ」「手提げ袋を添える」の2グループに分けたため。
   それぞれ2択なので、グリッドは2列に固定する（auto-fit だと幅によって間延びする）。 */
.pkg-group__ttl {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #4a4642;
  margin: 14px 0 7px;
}
.pkg-group__ttl:first-of-type { margin-top: 2px; }
.pkg__grid--box, .pkg__grid--bag { grid-template-columns: repeat(2, 1fr); }
.pkg-opt__media--none { background: #fbfaf7; }

/* カードグリッド */
.pkg__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pkg-opt {
  position: relative; cursor: pointer; background: var(--pkg-surface);
  border: 1px solid var(--pkg-line); border-radius: 4px;
  padding: 11px 10px 10px; display: flex; flex-direction: column; gap: 7px;
  transition: border-color .16s ease, box-shadow .16s ease; margin: 0;
}
.pkg-opt:hover { border-color: #cfc7b7; }
.pkg-opt.is-selected { border-color: var(--pkg-ink); box-shadow: 0 0 0 1px var(--pkg-ink) inset; }
.pkg-opt__radio { position: absolute; top: 9px; right: 9px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #c7bfaf; background: #fff; }
.pkg-opt.is-selected .pkg-opt__radio { border-color: var(--pkg-ink); background: radial-gradient(circle, var(--pkg-ink) 0 40%, #fff 46%); }
/* 画像枠は写真と同じ正方形にする（2026-07-30）
   以前は height:72px 固定だった。梱包の写真は1024×1024の正方形なので、
   横長の枠に object-fit:cover で入れると縦の中央4割しか出ず、
   ネイビーケースは「蓋と底が切れた帯」、手提げ袋は「持ち手とリボンが切れた面」になり、
   何の商品なのか判別できなかった（池田さん指摘）。枠を1:1にすれば1pxも切れない。
   実測＝この枠の幅はPC(1920px)で166px・スマホ(390px)で154px。
   テーマが商品情報カラムに最大幅を設けているためPCでも大きくなりすぎず、PC/SPで分ける必要はない。 */
.pkg-opt__media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fbfaf7, #f1ece2); border-radius: 3px; overflow: hidden; }
.pkg-opt__media svg { width: 96px; height: 96px; display: block; }
/* 「付けない」の記号だけは少し小さくする。
   ★この行は必ず上の .pkg-opt__media svg より後ろに置くこと。
   詳細度が同じ（クラス1＋要素1）なので、前に置くと上の96pxに上書きされて効かない
   （2026-07-30に実際にそうなり、実機で96pxで表示された）。
   72px は枠154px（スマホ）に対して実機で40/56/72を見比べて選んだ値。 */
.pkg-opt__media--none svg { width: 72px; height: 72px; }
.pkg-opt__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg-opt__name { font-size: 12.5px; font-weight: 500; line-height: 1.35; padding-right: 15px; }
.pkg-opt__sub { font-size: 10.5px; color: var(--pkg-muted); margin-top: -2px; }
.pkg-opt__price { font-size: 12px; color: var(--pkg-ink); letter-spacing: .02em; }
.pkg-opt__free { font-weight: 500; }
.pkg-opt__was { color: var(--pkg-muted); text-decoration: line-through; font-size: 10.5px; margin-right: 4px; }
.pkg-badge { display: inline-block; font-size: 9.5px; letter-spacing: .06em; color: var(--pkg-gold); border: 1px solid var(--pkg-gold); border-radius: 2px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }

@media (max-width: 480px) {
  .pkg__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Judge.me レビューウィジェット — quトーン調整
   （商品下の全幅appsセクションに配置・2026-07-24 / polish 07-24）
   レビュー本体 #judgeme_product_reviews と、タイトル下の星バッジ
   .jdgm-preview-badge の星色をquトーンへ調整する。
   ============================================================ */

/* 0件時に出る重複メッセージ「アイテムが見つかりません」を隠す
   （.jdgm-empty-state はレビュー0件時のみ描画される要素。
   すぐ上の「最初のレビューを書きましょう」と重複するため非表示にする） */
#judgeme_product_reviews .jdgm-empty-state {
  display: none !important;
}

/* ローディングオーバーレイの薄さ（半透明）を解消し、文字をはっきり見せる（墨色 #2b2b2b） */
#judgeme_product_reviews .jm-loading-overlay {
  opacity: 1 !important;
}
#judgeme_product_reviews .jm-review-widget__header,
#judgeme_product_reviews .jm-no-reviews-state__text,
#judgeme_product_reviews .jm-text {
  color: #2b2b2b !important;
}

/* 見出し・案内文・ボタンを左寄せに統一（quは左寄せ基調） */
#judgeme_product_reviews .jm-no-reviews-state {
  text-align: left !important;
  align-items: flex-start !important;
  --jm-center-max: none !important;
  margin-inline: 0 !important;
}
#judgeme_product_reviews .jm-no-reviews-state__action-buttons {
  --cluster-justify: flex-start !important;
  justify-content: flex-start !important;
}

/* 「レビューを書く」ボタン＝Judge.me既定のティール緑をやめ、quゴールド背景＋白文字・角丸8pxに
   （2026-07-24 池田さん選択＝案③。0件時の大ボタンとレビュー有時の右上ボタンの両方に適用される） */
#judgeme_product_reviews .jm-button--primary {
  background: #b79e74 !important;
  border: 1px solid #b79e74 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: .02em;
  transition: background .2s ease, border-color .2s ease;
}
#judgeme_product_reviews .jm-button--primary:hover {
  background: #a68c60 !important;   /* 少し濃いゴールドで押下感を出す */
  border-color: #a68c60 !important;
  color: #ffffff !important;
}

/* 星マークの色をquのゴールド #b79e74 に（Judge.me既定ティール #108474 を上書き）。
   【2026-07-24 修正】旧CSSは新widgetの星を #judgeme_product_reviews 配下に限定していたが、
   実レビューカードの星はそのidの外にあり当たっていなかった（サンプル表示で判明）。
   id限定を外し、点灯（塗り fill）＝ゴールド／消灯・半分（輪郭 stroke）＝淡いグレーに直す。 */

/* classic .jdgm-star（スニペット等）の点灯＝ゴールド＋変数の保険 */
.jdgm-preview-badge .jdgm-star.jdgm--on,
.jdgm-preview-badge .jdgm-star.jdgm--on-half,
#judgeme_product_reviews .jdgm-star.jdgm--on,
#judgeme_product_reviews .jdgm-star.jdgm--on-half {
  color: #b79e74 !important;
}
:root { --jdgm-star-color: #b79e74 !important; }

/* 新widget .jm-star-rating（レビュー本体・バッジ共通）。id限定を外して確実に当てる。
   点灯（塗り）＝quゴールド／消灯・半分（輪郭線）＝淡いグレー（ティール既定をquのライン色へ） */
.jm-star-rating__filled svg path {
  fill: #b79e74 !important;
}
.jm-star-rating__empty svg path,
.jm-star-rating__half svg path {
  stroke: #d8d2c4 !important;
}