/* 購買部ページ固有スタイル */

.page-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  border-bottom: 1px solid var(--brass);
}

.page-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brass);
  margin: 0 0 0.75rem;
}

.page-hero__desc {
  font-size: 1rem;
  color: color-mix(in oklch, var(--brass) 82%, transparent);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.shop-categories {
  max-width: 1020px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.category-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.category-card__link {
  display: block;
  color: var(--brass);
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in oklch, var(--brass) 35%, transparent);
  transition: border-color 0.2s;
}

.category-card__link:hover {
  border-color: var(--brass);
}

.category-card__visual {
  height: 140px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--emerald) 25%, var(--ink));
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    color-mix(in srgb, var(--brass) 8%, transparent) 8px,
    color-mix(in srgb, var(--brass) 8%, transparent) 9px
  );
}

.category-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.category-card__name {
  font-size: 1.1rem;
  color: var(--brass);
  margin: 0 0 0.5rem;
}

.category-card__desc {
  font-size: 0.9rem;
  color: color-mix(in oklch, var(--brass) 80%, transparent);
  margin: 0;
  line-height: 1.6;
}

/* カテゴリ固有アクセント: border-top (baseを全て先に、hoverを後にまとめる) */
.category-card--uniforms .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--ember);
}

.category-card--tools .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--azure);
}

.category-card--books .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--silver);
}

.category-card--groceries .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--emerald);
}

.category-card--souvenirs .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--arcane);
}

.category-card--alchemy-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--ember);
}

.category-card--alchemy-tools .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--azure);
}

.category-card--airship-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--azure);
}

.category-card--airship-gear .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--ember);
}

.category-card--clock-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--silver);
}

.category-card--clock-accessories .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--silver);
}

.category-card--library-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--emerald);
}

.category-card--library-tools .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--emerald);
}

.category-card--dueling-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--crimson);
}

.category-card--dueling-gear .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--crimson);
}

.category-card--summoning-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--arcane);
}

.category-card--summoning-circle .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--arcane);
}

.category-card--observatory-shop .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--azure);
}

.category-card--observatory-goods .category-card__link {
  border-top-width: 3px;
  border-top-color: var(--azure);
}

.category-card--uniforms .category-card__link:hover {
  border-color: var(--ember);
}

.category-card--tools .category-card__link:hover {
  border-color: var(--azure);
}

.category-card--books .category-card__link:hover {
  border-color: var(--silver);
}

.category-card--groceries .category-card__link:hover {
  border-color: var(--emerald);
}

.category-card--souvenirs .category-card__link:hover {
  border-color: var(--arcane);
}

/* カテゴリ固有ビジュアル */
.category-card--uniforms .category-card__visual {
  background-color: color-mix(in srgb, var(--ember) 20%, var(--ink));
  background-image: url('../assets/images/shop/hero-uniforms.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--tools .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 18%, var(--ink));
  background-image: url('../assets/images/shop/hero-tools.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--books .category-card__visual {
  background-color: color-mix(in srgb, var(--emerald) 28%, var(--ink));
  background-image: url('../assets/images/shop/hero-books.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--groceries .category-card__visual {
  background-color: color-mix(in srgb, var(--emerald) 35%, var(--ink));
  background-image: url('../assets/images/shop/hero-groceries.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--souvenirs .category-card__visual {
  background-color: color-mix(in srgb, var(--arcane) 16%, var(--ink));
  background-image: url('../assets/images/shop/hero-souvenirs.jpg');
  background-size: cover;
  background-position: center;
}

/* エリアタブ */
.shop-tabs {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.tab-nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 2px solid color-mix(in oklch, var(--brass) 28%, transparent);
  margin-bottom: 2rem;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

/* JS無効時のエリア別店舗フォールバック */
.shop-noscript {
  border: 1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.shop-noscript__notice {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--brass) 80%, transparent);
}

.shop-noscript__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.shop-noscript__area {
  display: inline-block;
  min-width: 9em;
  font-weight: 700;
  color: var(--brass);
}

.shop-noscript__list a {
  color: color-mix(in oklch, var(--brass) 85%, transparent);
}

/* タブボタン — base → --soon base → :hover → .is-active → --soon:hover → --soon.is-active */
.tab-btn {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 2px solid;
  border-bottom-color: transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 700;
  color: color-mix(in oklch, var(--brass) 68%, transparent);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tab-btn--soon {
  color: color-mix(in oklch, var(--brass) 42%, transparent);
}

.tab-btn:hover {
  color: var(--brass);
}

.tab-btn.is-active {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.tab-btn--soon:hover {
  color: color-mix(in oklch, var(--brass) 58%, transparent);
}

.tab-btn--soon.is-active {
  color: color-mix(in oklch, var(--brass) 58%, transparent);
  border-bottom-color: color-mix(in oklch, var(--brass) 40%, transparent);
}

.tab-panel__soon {
  padding: 2rem 0;
  font-size: 0.9rem;
  color: color-mix(in oklch, var(--brass) 55%, transparent);
  font-style: italic;
}

/* エリア別ショップカード: hover */
.category-card--alchemy-shop .category-card__link:hover {
  border-color: var(--ember);
}

.category-card--alchemy-tools .category-card__link:hover {
  border-color: var(--azure);
}

.category-card--airship-shop .category-card__link:hover {
  border-color: var(--azure);
}

.category-card--airship-gear .category-card__link:hover {
  border-color: var(--ember);
}

.category-card--clock-shop .category-card__link:hover {
  border-color: var(--silver);
}

.category-card--clock-accessories .category-card__link:hover {
  border-color: var(--silver);
}

.category-card--library-shop .category-card__link:hover {
  border-color: var(--emerald);
}

.category-card--library-tools .category-card__link:hover {
  border-color: var(--emerald);
}

.category-card--dueling-shop .category-card__link:hover {
  border-color: var(--crimson);
}

.category-card--dueling-gear .category-card__link:hover {
  border-color: var(--crimson);
}

.category-card--summoning-shop .category-card__link:hover {
  border-color: var(--arcane);
}

.category-card--summoning-circle .category-card__link:hover {
  border-color: var(--arcane);
}

.category-card--observatory-shop .category-card__link:hover {
  border-color: var(--azure);
}

.category-card--observatory-goods .category-card__link:hover {
  border-color: var(--azure);
}

/* エリア別ショップカード: visual */
.category-card--alchemy-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--ember) 22%, var(--ink));
  background-image: url('../assets/images/shop/hero-alchemy-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--alchemy-tools .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 20%, var(--ink));
  background-image: url('../assets/images/shop/hero-alchemy-tools.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--airship-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 24%, var(--ink));
  background-image: url('../assets/images/shop/hero-airship-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--airship-gear .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 18%, var(--ink));
  background-image: url('../assets/images/shop/hero-airship-gear.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--clock-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--silver) 20%, var(--ink));
  background-image: url('../assets/images/shop/hero-clock-tower-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--clock-accessories .category-card__visual {
  background-color: color-mix(in srgb, var(--silver) 16%, var(--ink));
  background-image: url('../assets/images/shop/hero-clock-accessories.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--library-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--emerald) 32%, var(--ink));
  background-image: url('../assets/images/shop/hero-library-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--library-tools .category-card__visual {
  background-color: color-mix(in srgb, var(--emerald) 24%, var(--ink));
  background-image: url('../assets/images/shop/hero-library-tools.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--dueling-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--crimson) 20%, var(--ink));
  background-image: url('../assets/images/shop/hero-dueling-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--dueling-gear .category-card__visual {
  background-color: color-mix(in srgb, var(--crimson) 16%, var(--ink));
  background-image: url('../assets/images/shop/hero-dueling-gear.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--summoning-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--arcane) 18%, var(--ink));
  background-image: url('../assets/images/shop/hero-summoning-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--summoning-circle .category-card__visual {
  background-color: color-mix(in srgb, var(--arcane) 14%, var(--ink));
  background-image: url('../assets/images/shop/hero-summoning-circle.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--observatory-shop .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 20%, var(--ink));
  background-image: url('../assets/images/shop/hero-observatory-shop.jpg');
  background-size: cover;
  background-position: center;
}

.category-card--observatory-goods .category-card__visual {
  background-color: color-mix(in srgb, var(--azure) 16%, var(--ink));
  background-image: url('../assets/images/shop/hero-observatory-goods.jpg');
  background-size: cover;
  background-position: center;
}

@media (width <= 600px) {
  .page-hero {
    padding: 2rem 1rem 1.5rem;
  }

  .page-hero__title {
    font-size: 1.6rem;
  }

  .shop-categories {
    padding: 1.5rem 1rem 2rem;
  }

  .shop-tabs {
    padding: 0 1rem 2rem;
  }

  .category-cards {
    grid-template-columns: 1fr;
  }
}