/**
 * WASAI × WooCommerce 上書きスタイル（新規）
 *
 * 対象: TOP Shop セクション / /shop/ 一覧 / 商品詳細（アップロード欄含む）
 *       / カート / チェックアウト
 * 方針: 既存トーン（モノクローム #000 / #fff、グレー #aaa・#ddd、
 *       背景 #f5f5f5・#f3f3f3、Vollkorn / Noto Serif JP / Noto Sans JP）を継承。
 *       サイズ指定は page-wasai.css と同じ流儀
 *       （ min(calc(N * 100vw / 1280), Npx) ・基準幅 1280px ）にそろえる。
 *
 * functions/washi_woocommerce.php から読み込まれる。
 */

/* ----------------------------------------
 * 共通：Sold out バッジ
 * （washi_helpers.php / front-page.php が .p-wasai-badge を出力）
 * ---------------------------------------- */
.p-wasai-badge {
  position: absolute;
  top: min(calc(12 * 100vw / 1280), 12px);
  left: min(calc(12 * 100vw / 1280), 12px);
  z-index: 2;
  padding: 4px 10px;
  background: #000;
  color: #fff;
  font-family: 'Vollkorn', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* カード側に位置の基準を持たせる */
.p-front__shop-item,
.p-wasai-works__item {
  position: relative;
}

.p-wasai-works__link {
  position: relative;
}

/* ----------------------------------------
 * TOP：Shop セクションのカードメタ
 * （front-page.php が .p-front__shop-meta 等を出力）
 * ---------------------------------------- */
.p-front__shop-meta {
  margin-top: min(calc(20 * 100vw / 1280), 20px);
}

.p-front__shop-name {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(14 * 100vw / 1280), 14px);
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #000;
}

.p-front__shop-price {
  margin: min(calc(6 * 100vw / 1280), 6px) 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(14 * 100vw / 1280), 14px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #666;
}

.p-front__shop-link {
  display: inline-block;
  margin-top: min(calc(10 * 100vw / 1280), 10px);
  padding-bottom: 2px;
  border-bottom: 1px solid #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(13 * 100vw / 1280), 13px);
  letter-spacing: 0.06em;
  color: #000;
  text-decoration: none;
}

/* ----------------------------------------
 * TOP：Prints & Works セクション（v2仕様）
 * 見出し / リード / タブフィルター / 横スライダー / カテゴリバッジ
 * （front-page.php が .p-front__shop-tabs 等を出力、
 *   挙動は assets/js/page-front-shop.js）
 * 確定プレビュー top-shop-preview.html v2 の見た目を再現する。
 * ---------------------------------------- */

/* 見出しは文言が長いため、このセクションだけ少し小さくする */
.p-front__shop .c-section-title {
  font-size: min(calc(72 * 100vw / 1280), 72px);
}

.p-front__shop-lead {
  max-width: min(calc(730 * 100vw / 1280), 730px);
  margin: 0 0 min(calc(44 * 100vw / 1280), 44px);
}

/* カテゴリバッジ（カード内のみ、プレビューのタイポグラフィに合わせる） */
.p-front__shop-item .p-wasai-badge {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
}

.p-wasai-badge--work {
  background: #fff;
  color: #000;
  border: 1px solid #000;
}

/* フィルタータブ */
.p-front__shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: min(calc(10 * 100vw / 1280), 10px);
  margin-bottom: min(calc(28 * 100vw / 1280), 28px);
}

.p-front__shop-tab {
  appearance: none;
  padding: 8px 20px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(13 * 100vw / 1280), 13px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #000;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.p-front__shop-tab:hover {
  background: #f0f0f0;
}

.p-front__shop-tab.is-active {
  background: #000;
  color: #fff;
}

/* 横スライダー（scroll-snap） */
.p-front__shop-slider {
  --shop-gap: min(calc(20 * 100vw / 1280), 20px);
  position: relative;
}

.p-front__shop-track {
  display: flex;
  gap: var(--shop-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.p-front__shop-track::-webkit-scrollbar {
  display: none;
}

.p-front__shop-track .p-front__shop-item {
  flex: 0 0 calc((100% - 2 * var(--shop-gap)) / 3.15);
  scroll-snap-align: start;
}

.p-front__shop-item.is-hidden {
  display: none;
}

.p-front__shop-nav {
  position: absolute;
  top: 34%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(44 * 100vw / 1280), 44px);
  height: min(calc(44 * 100vw / 1280), 44px);
  border: 1px solid #000;
  border-radius: 999px;
  background: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 1;
  color: #000;
  cursor: pointer;
}

.p-front__shop-nav--prev {
  left: calc(-1 * min(calc(22 * 100vw / 1280), 22px));
}

.p-front__shop-nav--next {
  right: calc(-1 * min(calc(22 * 100vw / 1280), 22px));
}

@media (max-width: 768px) {
  .p-front__shop .c-section-title {
    font-size: min(calc(44 * 100vw / 414), 44px);
  }

  .p-front__shop-track .p-front__shop-item {
    flex-basis: 72%;
  }

  .p-front__shop-nav {
    display: none;
  }
}

/* ----------------------------------------
 * 商品詳細：アップロード欄（File Uploads Addon）
 *
 * プラグインのラッパークラスに依存しないよう、
 * form.cart 内の file input を対象にする。
 * ※ 実装時に本番 HTML でプラグインの出力構造を確認し、
 *   必要ならラッパー用の指定をここへ追加すること。
 * ---------------------------------------- */
body.single-product form.cart input[type='file'] {
  display: block;
  width: 100%;
  margin: 0 0 min(calc(16 * 100vw / 1280), 16px);
  padding: min(calc(20 * 100vw / 1280), 20px);
  border: 1px dashed #aaa;
  background: #f5f5f5;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #333;
  cursor: pointer;
}

body.single-product form.cart input[type='file']::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #000;
  cursor: pointer;
}

/* アップロード注記（washi_woocommerce.php が出力） */
.p-wasai-upload-note {
  margin: 0 0 min(calc(24 * 100vw / 1280), 24px);
  padding-top: min(calc(16 * 100vw / 1280), 16px);
  border-top: 1px solid #ddd;
}

.p-wasai-upload-note__title {
  margin: 0 0 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #000;
}

.p-wasai-upload-note__body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: #666;
}

/* 商品詳細：価格・カートボタン */
body.single-product .summary .price {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.05em;
  color: #000;
}

body.single-product form.cart .quantity .qty {
  border: 1px solid #aaa;
  border-radius: 0;
  font-family: 'Noto Sans JP', sans-serif;
}

body.single-product form.cart .single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  border: 1px solid #000;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.08em;
  font-weight: 400;
}

body.single-product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #333;
  color: #fff;
}

/* ----------------------------------------
 * /shop/ 一覧（WC 標準ループのグリッド化）
 * ---------------------------------------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(calc(48 * 100vw / 1280), 48px) min(calc(32 * 100vw / 1280), 32px);
  margin: 0;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(14 * 100vw / 1280), 14px);
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #000;
}

.woocommerce ul.products li.product .price {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(14 * 100vw / 1280), 14px);
  letter-spacing: 0.05em;
  color: #666;
}

.woocommerce ul.products li.product .button {
  margin-top: min(calc(12 * 100vw / 1280), 12px);
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------
 * カート / チェックアウト（最小限の統一）
 * ---------------------------------------- */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: #000;
  background: #f5f5f5;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid #aaa;
  border-radius: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
}

/* ----------------------------------------
 * /wasai/：商品行・作品グリッドの「2列」維持
 *
 * 実テーマ page-wasai.css はモバイル（max-width: 768px）で
 * .p-front__shop-list / .p-wasai-ec-row を flex-direction: column に、
 * .p-wasai-works__grid を 1fr に切り替えて 1列化してしまう。
 * 確定仕様（2列グリッド／モバイルでも2列維持）に合わせ、
 * 詳細度を上げて上書きする（読み込み順に依存しない）。
 * ---------------------------------------- */

/* Print 行：全幅で2列に折り返す */
.p-wasai-page .p-front__shop-list.p-wasai-ec-row {
  flex-wrap: wrap;
}

.p-wasai-page .p-front__shop-list.p-wasai-ec-row .p-front__shop-item {
  flex: 0 1 calc(50% - min(calc(10 * 100vw / 1280), 10px));
}

@media (max-width: 768px) {
  /* Print 行：縦積み（column）を打ち消して2列を維持 */
  .p-wasai-page .p-front__shop-list.p-wasai-ec-row {
    flex-direction: row;
    align-items: flex-start;
    gap: min(calc(16 * 100vw / 414), 16px);
  }

  .p-wasai-page .p-front__shop-list.p-wasai-ec-row .p-front__shop-item {
    flex: 0 1 calc(50% - min(calc(8 * 100vw / 414), 8px));
    width: auto;
  }

  /* Artwork グリッド：1fr を打ち消して2列を維持 */
  .p-wasai-page .p-wasai-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: min(calc(32 * 100vw / 414), 32px) min(calc(16 * 100vw / 414), 16px);
  }
}