/**
 * 検索結果ページ専用スタイル
 */

/* ========== レイアウト ========== */
.main {
  min-height: calc(100vh - var(--header-height));
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-2xl);
}

.content {
  min-width: 0; /* グリッドオーバーフロー防止 */
}

/* ========== パンくずリスト ========== */
.breadcrumb {
  margin-bottom: var(--spacing-lg);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
  content: '›';
  margin-left: var(--spacing-xs);
  color: var(--color-text-light);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-base);
}

.breadcrumb__link:hover {
  color: var(--color-text-primary);
}

.breadcrumb__current {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* ========== ページヘッダー ========== */
.page-header {
  margin-bottom: var(--spacing-xl);
}

.page-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.page-header__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.page-header__count-num {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ========== ツールバー ========== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
}

.toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.toolbar__select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-primary);
  cursor: pointer;
  transition: border-color var(--transition-base);
}

.toolbar__select:hover,
.toolbar__select:focus {
  border-color: var(--color-primary);
  outline: none;
}

.toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.toolbar__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.toolbar__view-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.toolbar__view-btn--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

/* ========== 商品エリア ========== */
.products {
  margin-bottom: var(--spacing-2xl);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* リスト表示 */
.products__grid[data-view="list"] {
  grid-template-columns: 1fr;
}

.products__grid[data-view="list"] .card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-lg);
}

.products__grid[data-view="list"] .card__img-wrapper {
  padding-top: 100%;
}

.products__grid[data-view="list"] .card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.products__grid[data-view="list"] .card__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.products__grid[data-view="list"] .card__price {
  font-size: var(--font-size-xl);
}

/* ========== ページネーション拡張 ========== */
.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* ========== レスポンシブ ========== */
@media (max-width: 1024px) {
  :root {
    --grid-columns: 3;
  }
  
  .products__grid[data-view="list"] .card {
    grid-template-columns: 150px 1fr;
  }
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  
  :root {
    --grid-columns: 2;
  }
  
  .toolbar {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .toolbar__left,
  .toolbar__right {
    width: 100%;
    justify-content: space-between;
  }
  
  .toolbar__select {
    flex: 1;
  }
  
  .products__grid[data-view="list"] .card {
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-md);
  }
  
  .page-header__title {
    font-size: var(--font-size-2xl);
  }
}

@media (max-width: 640px) {
  :root {
    --grid-columns: 1;
  }
  
  .products__grid[data-view="list"] .card {
    grid-template-columns: 1fr;
  }
  
  .products__grid[data-view="list"] .card__img-wrapper {
    padding-top: 100%;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
  
  .pagination__btn {
    width: 36px;
    height: 36px;
  }
}