/* ==========================================================================
   Basketball Freak SHOP

   方針
   - テーマのヘッダー・フッターの中に入るので、body や見出しの既定は触らない。
     すべて .bf-shop-* / .bf-review 配下に閉じる。
   - モバイルファースト。min-width のメディアクエリだけを使う。
   - SOLNOVA ブランドサイトと地続きに見えるよう、夜のトーンを共有する。
     ただし BF 側は「店」なので、商品が見やすい明度を優先する。
   - このファイルは SHOP 関連ページでしか読み込まれない（class-bf-shop-assets.php）。
   ========================================================================== */

.bf-shop-landing {
  --bf-ink: #0B0D10;
  --bf-night: #14171D;
  --bf-night-2: #1C2028;
  --bf-paper: #F4F2ED;
  --bf-fg: #F1EDE6;
  --bf-fg-dim: #A9AEB7;
  --bf-fg-mute: #767C86;
  --bf-accent: #F5D98B;
  --bf-accent-deep: #C9A863;
  --bf-line: rgba(241, 237, 230, 0.13);
  --bf-gutter: clamp(1rem, 5vw, 2.5rem);
  --bf-maxw: 1200px;

  background: var(--bf-ink);
  color: var(--bf-fg);
  font-feature-settings: "palt" 1;
  /* 横スクロールを構造的に防ぐ */
  overflow-x: hidden;
}

.bf-shop-wrap {
  width: 100%;
  max-width: var(--bf-maxw);
  margin-inline: auto;
  padding-inline: var(--bf-gutter);
}
.bf-shop-wrap--text > * { max-width: 44rem; }

.bf-shop-section { padding-block: clamp(2.5rem, 8vw, 5rem); }
.bf-shop-section--solnova {
  background: radial-gradient(90% 100% at 50% 0%, var(--bf-night-2), var(--bf-ink));
  border-block: 1px solid var(--bf-line);
}
.bf-shop-section--story { background: var(--bf-night); }
.bf-shop-section--story p {
  color: var(--bf-fg-dim);
  line-height: 2;
  font-size: 0.9375rem;
  margin: 0 0 1.25rem;
}
.bf-shop-section--story strong { color: var(--bf-fg); }

/* ----------------------------------------------------------------- HERO */
.bf-shop-hero {
  background:
    radial-gradient(60% 60% at 18% 0%, rgba(245, 217, 139, 0.08) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, var(--bf-night-2) 0%, var(--bf-ink) 60%);
  padding-block: clamp(2.5rem, 9vw, 5.5rem);
  border-bottom: 1px solid var(--bf-line);
}
.bf-shop-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--bf-fg-mute);
  text-transform: uppercase;
}
.bf-shop-hero__title {
  margin: 0;
  font-size: clamp(3rem, 15vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--bf-fg);
}
.bf-shop-hero__lines {
  margin: clamp(1rem, 4vw, 1.75rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1em;
  font-size: clamp(0.9rem, 3.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bf-accent);
}
.bf-shop-hero__lead {
  margin: clamp(1rem, 4vw, 1.5rem) 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--bf-fg-dim);
}
.bf-shop-hero__cta {
  margin: clamp(1.25rem, 5vw, 2rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bf-shop-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--bf-line);
  border-radius: 999px;
  color: var(--bf-fg) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.bf-shop-chip:hover { border-color: var(--bf-accent); background: rgba(245, 217, 139, 0.08); }

/* --------------------------------------------------------------- 見出し */
.bf-shop-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--bf-line);
}
.bf-shop-head__index {
  flex: none;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--bf-fg-mute);
}
.bf-shop-head__title {
  margin: 0;
  font-size: clamp(1.25rem, 4.6vw, 2rem);
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--bf-fg);
}
.bf-shop-head__more {
  margin-left: auto;
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--bf-fg-dim) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bf-shop-head__more:hover { color: var(--bf-accent) !important; }
.bf-shop-section__lead {
  margin: 0 0 1.5rem;
  max-width: 44rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--bf-fg-dim);
}

/* ------------------------------------------------------------ 商品カード */
.bf-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 3vw, 1.25rem);
}
@media (min-width: 46rem) { .bf-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .bf-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .bf-shop-grid--picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bf-shop-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(241, 237, 230, 0.035);
  border: 1px solid var(--bf-line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 200ms ease, transform 200ms ease;
}
.bf-shop-card:hover { border-color: var(--bf-fg-mute); transform: translateY(-2px); }
.bf-shop-card__fig {
  display: block;
  aspect-ratio: 1;
  background: var(--bf-night-2);
  overflow: hidden;
}
.bf-shop-card__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-shop-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem; }
.bf-shop-card__cat {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--bf-accent-deep);
  font-weight: 700;
}
.bf-shop-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bf-fg);
}
.bf-shop-card__price { font-size: 0.875rem; color: var(--bf-fg-dim); }
.bf-shop-card__price del { opacity: 0.55; margin-right: 0.35em; }
.bf-shop-card__price ins { text-decoration: none; color: var(--bf-fg); }
.bf-shop-card__badge {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bf-accent-deep);
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--bf-accent);
}

.bf-shop-pick { display: flex; flex-direction: column; gap: 0.6rem; }
.bf-shop-pick__verdict {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--bf-fg-dim);
  border-left: 2px solid var(--bf-accent-deep);
  padding-left: 0.75rem;
}

/* ---------------------------------------------------------------- 記事 */
.bf-shop-article-list { margin: 0; padding: 0; list-style: none; }
.bf-shop-article-list li { border-bottom: 1px solid var(--bf-line); }
.bf-shop-article-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 0;
  min-height: 44px;
  text-decoration: none !important;
  color: inherit !important;
}
.bf-shop-article-list__date { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--bf-fg-mute); }
.bf-shop-article-list__title { font-size: 0.875rem; line-height: 1.6; color: var(--bf-fg); }
.bf-shop-article-list a:hover .bf-shop-article-list__title { color: var(--bf-accent); }
@media (min-width: 46rem) {
  .bf-shop-article-list--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.25rem; }
}

/* ----------------------------------------------------------------- FAQ */
.bf-shop-faq { border-top: 1px solid var(--bf-line); }
.bf-shop-faq__item { border-bottom: 1px solid var(--bf-line); }
.bf-shop-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bf-fg);
  position: relative;
}
.bf-shop-faq__item summary::-webkit-details-marker { display: none; }
.bf-shop-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bf-fg-mute);
  font-size: 1.1rem;
}
.bf-shop-faq__item[open] summary::after { content: "\2212"; }
.bf-shop-faq__item p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--bf-fg-dim);
}

.bf-shop-legal-links {
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
}
.bf-shop-legal-links a {
  color: var(--bf-fg-mute) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.bf-shop-legal-links a:hover { color: var(--bf-fg) !important; }

/* --------------------------------------------------------------- 空状態 */
.bf-shop-empty {
  padding: clamp(2.5rem, 10vw, 5rem) var(--bf-gutter);
  border: 1px dashed var(--bf-line);
  border-radius: 4px;
  text-align: center;
  color: var(--bf-fg-dim);
}
.bf-shop-empty__title { font-size: 1rem; font-weight: 700; color: var(--bf-fg); margin: 0 0 0.5rem; }
.bf-shop-empty__admin a { color: var(--bf-accent) !important; }

/* ===================================================== カテゴリページ */
.bf-shop-cat-intro { margin-bottom: 1.5rem; }
.bf-shop-cat-intro__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  opacity: 0.6;
}
.bf-shop-cat-intro__title { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 6vw, 2.5rem); }
.bf-shop-cat-intro__lead { margin: 0; max-width: 44rem; line-height: 1.9; opacity: 0.8; }

/* ================================================== 記事下の関連商品 */
.bf-shop-article-products {
  margin: 3rem 0 1rem;
  padding: 1.5rem;
  background: #14171D;
  border: 1px solid rgba(241, 237, 230, 0.13);
  border-radius: 4px;
  color: #F1EDE6;
}
.bf-shop-article-products__title {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: #A9AEB7;
  font-weight: 700;
}
.bf-shop-grid--article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 46rem) { .bf-shop-grid--article { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bf-shop-article-products .bf-shop-card {
  --bf-line: rgba(241, 237, 230, 0.13);
  --bf-fg: #F1EDE6;
  --bf-fg-dim: #A9AEB7;
  --bf-accent-deep: #C9A863;
  --bf-night-2: #1C2028;
  background: rgba(241, 237, 230, 0.035);
  border-color: rgba(241, 237, 230, 0.13);
}

/* ======================================================== BF REVIEW */
.bf-review {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid rgba(20, 23, 29, 0.14);
  border-radius: 4px;
  background: #FAF9F6;
}
.bf-review__title {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.bf-review__verdict {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 600;
}
.bf-review__cols { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .bf-review__cols { grid-template-columns: repeat(3, 1fr); } }
.bf-review__col h3 {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.bf-review__col--good h3 { color: #1f7a3d; }
.bf-review__col--watch h3 { color: #8a6100; }
.bf-review__col--for h3 { color: #2271b1; }
.bf-review__col ul { margin: 0; padding-left: 1.1rem; }
.bf-review__col li { font-size: 0.875rem; line-height: 1.8; margin-bottom: 0.25rem; }
.bf-review__meta {
  margin: 1.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(20, 23, 29, 0.1);
  font-size: 0.75rem;
  color: #646970;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.bf-review__note { margin: 0.5rem 0 0; font-size: 0.7rem; color: #8a8f94; }

/* =============================================== 商品ページの補助表示 */
.bf-shop-customizer-link { margin: 0 0 1rem; }
.bf-shop-customizer-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.bf-shop-related-articles { margin: 2.5rem 0; }
.bf-shop-related-articles h2 { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.bf-shop-related-articles .bf-shop-article-list li { border-bottom-color: rgba(20, 23, 29, 0.12); }
.bf-shop-related-articles .bf-shop-article-list__title { color: inherit; }
.bf-shop-related-articles .bf-shop-article-list__date { color: #646970; }

/* ローディング中のガタつきを防ぐ */
.bf-shop-landing img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .bf-shop-card, .bf-shop-chip { transition: none; }
}

/* ==========================================================================
   ローンチ初期（商品が SOLNOVA だけ）の主役表示
   ========================================================================== */
.bf-shop-section--feature {
  background: radial-gradient(90% 100% at 50% 0%, var(--bf-night-2), var(--bf-ink));
  border-block: 1px solid var(--bf-line);
}
.bf-shop-feature { display: grid; gap: clamp(1.25rem, 5vw, 2.5rem); align-items: center; }
@media (min-width: 46rem) { .bf-shop-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bf-shop-feature__fig {
  display: block; border-radius: 4px; overflow: hidden;
  background: var(--bf-night-2); border: 1px solid var(--bf-line);
}
.bf-shop-feature__fig img { width: 100%; height: auto; display: block; }
.bf-shop-feature__body { min-width: 0; }
.bf-shop-feature__eyebrow {
  margin: 0 0 .5rem; font-size: .68rem; letter-spacing: .2em;
  color: var(--bf-accent-deep); font-weight: 700;
}
.bf-shop-feature__title {
  margin: 0 0 .75rem; font-size: clamp(1.4rem, 5vw, 2.25rem);
  line-height: 1.2; font-weight: 700; color: var(--bf-fg);
}
.bf-shop-feature__lead { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.95; color: var(--bf-fg-dim); }
.bf-shop-feature__price {
  margin: 0 0 1.25rem; font-size: 1.375rem; color: var(--bf-fg);
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.bf-shop-feature__price del { opacity: .5; font-size: 1rem; }
.bf-shop-feature__price ins { text-decoration: none; }
.bf-shop-feature__actions { margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }

.bf-shop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.75rem; border-radius: 2px;
  background: var(--bf-accent); color: #08090B !important;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-decoration: none !important; border: 1px solid var(--bf-accent);
}
.bf-shop-btn:hover { background: #FFE9A6; }
.bf-shop-btn--ghost {
  background: none; color: var(--bf-fg) !important; border-color: var(--bf-line);
}
.bf-shop-btn--ghost:hover { border-color: var(--bf-fg); background: rgba(241,237,230,.06); }

/* ============================================== COMING SOON ============== */
.bf-shop-section--soon { border-top: 1px solid var(--bf-line); }
.bf-shop-soon { display: grid; gap: .75rem; }
@media (min-width: 46rem) { .bf-shop-soon { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf-shop-soon__item {
  padding: 1.25rem; border: 1px dashed var(--bf-line); border-radius: 4px;
  background: rgba(241,237,230,.02);
}
.bf-shop-soon__name {
  margin: 0 0 .4rem; font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; color: var(--bf-fg-mute);
}
.bf-shop-soon__desc { margin: 0; font-size: .8125rem; line-height: 1.85; color: var(--bf-fg-mute); }

/* カテゴリページが0件のとき */
.bf-shop-comingsoon {
  margin: 2rem 0; padding: clamp(2rem, 8vw, 4rem) 1.5rem;
  border: 1px dashed rgba(20,23,29,.18); border-radius: 4px; text-align: center;
}
.bf-shop-comingsoon__label { margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .24em; opacity: .55; }
.bf-shop-comingsoon__title { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 700; }
.bf-shop-comingsoon__desc { margin: 0 auto .75rem; max-width: 34rem; line-height: 1.9; opacity: .8; }
.bf-shop-comingsoon__note { margin: 0 0 1.5rem; font-size: .8125rem; opacity: .65; }
.bf-shop-comingsoon__links { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.bf-shop-comingsoon .bf-shop-chip {
  --bf-line: rgba(20,23,29,.2); --bf-fg: #14171D; --bf-accent: #C9A863;
  color: #14171D !important;
}

/* ==================================== レジの最終確認 ==================== */
.bf-checkout-confirm {
  margin: 2rem 0; padding: 1.5rem;
  border: 1px solid rgba(20,23,29,.14); border-radius: 4px; background: #FAF9F6;
}
.bf-checkout-confirm__title {
  margin: 0 0 1rem; font-size: 1rem; font-weight: 700; letter-spacing: .04em;
}
.bf-checkout-confirm__block { margin-bottom: 1.5rem; }
.bf-checkout-confirm__block h3 {
  margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .14em;
  font-weight: 700; color: #646970;
}
.bf-checkout-confirm__block p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.9; }
.bf-checkout-confirm__product { margin: 0 0 .25rem !important; font-size: .9375rem !important; }
.bf-checkout-confirm__spec { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.bf-checkout-confirm__spec dt { font-size: .8125rem; color: #646970; }
.bf-checkout-confirm__spec dd { margin: 0; font-size: .8125rem; font-weight: 600; }
.bf-checkout-confirm__note {
  padding: .75rem; border-left: 3px solid #dba617; background: #fff8e5;
  font-size: .8125rem !important; line-height: 1.8 !important;
}
.bf-checkout-confirm__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; }
.bf-checkout-confirm__links a { text-decoration: underline; text-underline-offset: 3px; }
.bf-checkout-confirm__back { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(20,23,29,.1); }
.bf-checkout-confirm__back a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.bf-cart-note {
  margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid #dba617;
  background: #fff8e5; font-size: .875rem; line-height: 1.8;
}

/* ==================================== 法務ページ ======================== */
.bf-legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.bf-legal-table th, .bf-legal-table td {
  padding: .85rem .75rem; border-bottom: 1px solid rgba(20,23,29,.1);
  text-align: left; vertical-align: top; font-size: .9375rem; line-height: 1.9;
}
.bf-legal-table th { width: 12rem; font-weight: 600; color: #646970; }
@media (max-width: 40rem) {
  .bf-legal-table, .bf-legal-table tbody, .bf-legal-table tr, .bf-legal-table th, .bf-legal-table td { display: block; width: auto; }
  .bf-legal-table th { border-bottom: 0; padding-bottom: 0; font-size: .8125rem; }
  .bf-legal-table td { padding-top: .25rem; }
}
.bf-legal h2 { font-size: 1rem; margin: 2rem 0 .5rem; }
.bf-legal p { line-height: 1.95; }
.bf-legal-pending {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  background: #fde8e8; color: #a01c1c; font-size: .7rem; font-weight: 700;
}
.bf-legal-pending-note { display: block; margin-top: .25rem; font-size: .75rem; color: #a01c1c; }
.bf-legal-updated { margin-top: 2rem; font-size: .75rem; color: #8a8f94; }