/* =============================================
   南風一 haeichi — nagi.css
   凪（CLEAN）ページ専用スタイル
   products.css を継承し、上書き・追加定義

   カラーアクセント:
     Nagi (凪) Blue  : #4A7F8C  ← メインアクセント（深海の静けさ）
     Nagi Light      : #7AACB5
     Nagi Dark       : #2D5C66
     Mist White      : #F4F8F9  ← 背景トーン（清潔な白みがかった水色）
     Mist Dark       : #E2EEF1
============================================= */

/* ===== NAGIページ カラー変数 ===== */
.page--nagi {
  --nagi-main:       #4A7F8C;
  --nagi-light:      #7AACB5;
  --nagi-dark:       #2D5C66;
  --nagi-mist:       #F4F8F9;
  --nagi-mist-dark:  #E2EEF1;
  --nagi-gray:       #6A8690;
}

/* ===== ベース背景 ===== */
.page--nagi {
  background: var(--nagi-mist);
}

/* ===== HERO — NAGIアクセント ===== */
.page-hero--nagi .page-hero__overlay--nagi {
  background: linear-gradient(
    to top,
    rgba(10, 35, 45, 0.80) 0%,
    rgba(20, 50, 65, 0.32) 55%,
    rgba(30, 60, 75, 0.08) 100%
  );
}

.page-hero--nagi .page-hero__subtitle {
  color: rgba(180, 225, 235, 0.88);
  font-family: var(--font-serif);
}

/* ===== CONCEPT — NAGIアクセント ===== */
.concept--nagi {
  background: var(--nagi-mist);
  border-bottom: 1px solid var(--nagi-mist-dark);
}

.concept__line--nagi {
  background: var(--nagi-main);
}

/* ===== KEYWORDS — NAGI版 ===== */
.keywords--nagi {
  background: var(--nagi-mist-dark);
}

.keyword--nagi {
  color: var(--nagi-dark);
  background: rgba(74, 127, 140, 0.08);
  border-color: rgba(74, 127, 140, 0.28);
}

.keyword--nagi:hover {
  background: rgba(74, 127, 140, 0.16);
  border-color: rgba(74, 127, 140, 0.52);
}

/* ===== PRODUCT CARD — NAGI ===== */

.page--nagi .product-card__category--nagi {
  color: var(--nagi-main);
}

.page--nagi .product-card--nagi:hover .product-card__more {
  color: var(--nagi-main);
  border-color: var(--nagi-main);
}

.product-card__badge--nagi {
  background: var(--nagi-main) !important;
}

/* ===== SHOP CTA — NAGI ===== */
.shop-cta--nagi {
  background: linear-gradient(
    160deg,
    #0A1E26 0%,
    #1E4A56 40%,
    #2D5C66 100%
  );
}

.shop-cta--nagi::before {
  background: radial-gradient(ellipse at center, rgba(74, 127, 140, 0.20) 0%, transparent 65%);
}

.shop-cta__label--nagi {
  color: var(--nagi-light);
}

/* ===== PRODUCTS SECTION 背景 ===== */
.page--nagi .products {
  background: var(--nagi-mist);
}

.page--nagi .products__header {
  background: var(--nagi-mist);
}

.page--nagi .products__header-inner {
  border-bottom-color: var(--nagi-mist-dark);
}

.page--nagi .products__header-label {
  color: var(--nagi-main);
}

/* ===== BREADCRUMB 背景 ===== */
.page--nagi .breadcrumb {
  background: var(--nagi-mist);
  border-bottom-color: var(--nagi-mist-dark);
}

/* ===== CONCEPT テキストカラー ===== */
.page--nagi .concept__eyebrow {
  color: var(--nagi-main);
}

/* ===== PRODUCT CARD 背景調整 ===== */
.page--nagi .product-card {
  background: #fff;
}

.page--nagi .product-card__img-wrap {
  background: var(--nagi-mist-dark);
}

.page--nagi .product-card__info {
  border-top-color: var(--nagi-mist-dark);
}

/* ===== HERO FALLBACK (JS連携) ===== */
.page--nagi .page-hero__bg {
  background: linear-gradient(135deg, #0A1E26 0%, #1E4A56 50%, #4A7F8C 100%);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .keyword--nagi {
    font-size: 0.72rem;
    padding: 4px 11px;
  }
}