/* ============================================================
   vintagecarpet — catalog.css（一覧・商品詳細）
   tokens.css → app.css の後に読み込む。
   ============================================================ */
@layer page {
  /* —— 一覧ヘッダー —— */
  .cat-head { padding-block: var(--s-xl) var(--s-md); }
  .cat-head h1 { font-size: var(--t-xl); }
  .cat-head .lead { color: var(--ink-2); max-width: 60ch; margin-block-start: var(--s-xs); }
  .cat-head .count { font-family: var(--grotesk); font-weight: 600; color: var(--red);
    letter-spacing: .1em; font-size: var(--t-sm); }

  /* —— ファセットバー —— */
  .facets { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center;
    padding-block: var(--s-sm); border-block: var(--rule); margin-block-end: var(--s-lg); }
  .facets form { display: contents; }
  .facets .group { display: flex; gap: var(--s-2xs); align-items: center; flex-wrap: wrap; }
  .facets label { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3); }
  .facets select, .facets input[type="search"] {
    font: inherit; font-size: var(--t-sm); padding: .5em .8em; border: var(--hair-2);
    background: var(--paper); color: var(--ink); border-radius: 0; }
  .facets input[type="search"] { min-width: 200px; }
  .facets .spacer { flex: 1; }

  /* —— グリッド（一覧） —— */
  .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--s-lg) var(--s-md); }
  @media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr 1fr; gap: var(--s-md) var(--s-sm); } }

  /* —— ページャ —— */
  .pager { display: flex; justify-content: center; gap: var(--s-2xs); margin-block-start: var(--s-2xl);
    font-family: var(--grotesk); }
  .pager a, .pager strong { display: inline-grid; place-items: center; min-inline-size: 2.6em; block-size: 2.6em;
    border: var(--hair-2); color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); }
  .pager strong { background: var(--red); color: var(--paper); border-color: var(--red); }
  .pager a:hover { border-color: var(--red); color: var(--red); }

  .empty { text-align: center; padding-block: var(--s-2xl); color: var(--ink-3); }

  /* —— 商品詳細 —— */
  .pd { padding-block: var(--s-lg) var(--s-2xl); }
  .pd__crumbs { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); margin-block-end: var(--s-md); display: flex; gap: .6em; flex-wrap: wrap; }
  .pd__crumbs a:hover { color: var(--red); }
  .pd__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 880px) { .pd__grid { grid-template-columns: 1fr; } }

  .gallery__main { position: relative; border: var(--rule); padding: 14px; background: var(--paper); }
  .gallery__main::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--red); opacity: .25; pointer-events: none; }
  .gallery__main img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
  .gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2xs); margin-block-start: var(--s-2xs); }
  .gallery__thumbs button { border: var(--hair); padding: 3px; background: var(--paper); cursor: pointer; aspect-ratio: 1; }
  .gallery__thumbs button[aria-current="true"] { border-color: var(--red); }
  .gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .pd__origin { font-family: var(--grotesk); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    font-size: var(--t-xs); color: var(--red); }
  .pd h1 { font-size: var(--t-lg); margin-block: var(--s-2xs) var(--s-sm); }
  .pd__price { font-family: var(--grotesk); font-weight: 700; font-size: var(--t-xl); color: var(--ink);
    font-variant-numeric: tabular-nums; }
  .pd__price small { font-size: .4em; color: var(--ink-3); letter-spacing: .1em; margin-left: .6em; font-family: var(--sans); font-weight: 500; }
  .pd__stock { display: inline-flex; align-items: center; gap: .5em; font-family: var(--grotesk); font-size: var(--t-sm);
    margin-block: var(--s-sm); padding: .3em .9em; }
  .pd__stock--in { color: var(--ok, #4a6b3f); }
  .pd__stock--sold { background: var(--ink); color: var(--paper); }
  .pd__spec { width: 100%; border-collapse: collapse; margin-block: var(--s-md); }
  .pd__spec th, .pd__spec td { text-align: start; padding: .7em 0; border-block-end: var(--hair); font-size: var(--t-sm); vertical-align: top; }
  .pd__spec th { font-family: var(--grotesk); font-weight: 600; letter-spacing: .08em; color: var(--ink-3);
    text-transform: uppercase; font-size: var(--t-2xs); inline-size: 9em; }
  .pd__cta { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-block-start: var(--s-md); }
  .pd__desc { margin-block-start: var(--s-lg); padding-block-start: var(--s-lg); border-block-start: var(--rule);
    max-width: var(--measure); white-space: pre-line; color: var(--ink-2); }
}