/* SEATA HOME固有: ヒーローカルーセル / カテゴリ行 */

/* ---- ヒーローカルーセル ---- */
.hero-carousel {
  overflow: hidden;
  padding: 24px 0 32px;
}

.hero-carousel__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 300ms var(--carousel-easing); /* 原本実測(2026-09-07): 0.3s */
}

.hero-carousel__slide {
  /* 原本実測: アクティブスライド幅はビューポート幅からコンテナ左右マージン(40px×2)を引いた値。
     見切れ(ピーク)は、隣接スライドの余白(padding)を除いた部分のみがコンテナ外に露出することで生じる。 */
  flex: 0 0 calc(100vw - 80px);
  padding: 0 20px;
  outline-offset: -4px;
}

.hero-carousel__slide:focus {
  outline: none;
}

.hero-carousel__slide:focus-visible {
  outline: 2px solid #000;
}

.hero-carousel__frame {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}

.hero-carousel__frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width: 840px) {
  .hero-carousel__frame {
    border-radius: 6px;
  }
}

@media screen and (max-width: 540px) {
  .hero-carousel__slide {
    /* ≤540pxではコンテナの左右マージンが20pxに縮小する */
    flex-basis: calc(100vw - 40px);
    padding: 0 10px;
  }
}

/* ---- カテゴリ行（共通） ----
   1280px以上は原本どおりの固定幅+space-between。
   幅不足帯(841〜1279px)のみ、2026-09-01クライアント要望「見切れないように」で
   可変縮小する(下の中間帯メディアクエリ)。375/600/1280の検収済み見た目は不変。 */
.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 30px 60px;
  overflow-x: clip;
}

.category-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: none;
  width: 622px;
}

.category-row--goods .category-row__body {
  width: 635px;
}

.category-row--accessories .category-row__body {
  width: 607px;
}

.category-row__title {
  color: var(--color-primary);
  font-family: var(--font-playfair);
  font-weight: 200;
  font-size: 90px;
  line-height: 95px;
}

.category-row--goods .category-row__title {
  line-height: 106px;
}

.category-row--accessories .category-row__title {
  line-height: 97px;
}

.category-row__text {
  color: var(--color-primary);
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 35px;
}

.category-row--apparel .category-row__text,
.category-row--fragrance .category-row__text {
  font-size: 18px;
}

.category-row__image {
  flex: none;
  width: 446px;
  height: 398px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--color-placeholder);
}

.category-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-row__image--mobile {
  display: none;
}

/* 中間帯(841〜1279px): 原本は固定幅の右あふれをクリップしていたが、
   2026-09-01クライアント要望「見切れないように」で可変縮小に変更。
   本文・画像ともflex縮小を許可し、タイトルは7.03vw(=90px/1280)で
   本文幅の縮小率とほぼ一致させ折返し行数を保つ。画像は縦横比維持。
   1279→1280の境界は89.9px→90pxでシームレス。 */
@media screen and (min-width: 841px) and (max-width: 1279px) {
  .category-row__body,
  .category-row--goods .category-row__body,
  .category-row--accessories .category-row__body {
    flex-shrink: 1;
    min-width: 0;
  }

  .category-row__image {
    flex-shrink: 1;
    min-width: 0;
    height: auto;
    aspect-ratio: 446 / 398;
  }

  .category-row__title {
    font-size: 7.03vw;
    line-height: 1.056;
  }

  .category-row--goods .category-row__title {
    line-height: 1.178;
  }

  .category-row--accessories .category-row__title {
    line-height: 1.078;
  }
}

@media screen and (max-width: 840px) {
  .category-row {
    flex-direction: column;
    gap: 30px 0;
    padding: 30px 38px;
  }

  .category-row__body {
    gap: 15px;
    width: 100%;
  }

  .category-row--goods .category-row__body,
  .category-row--accessories .category-row__body {
    width: 100%;
  }

  .category-row__title,
  .category-row--goods .category-row__title,
  .category-row--accessories .category-row__title {
    font-size: 64px;
    line-height: 1;
  }

  .category-row__text {
    font-size: 18px;
    line-height: 1.5;
  }

  .category-row__image {
    width: 100%;
    height: 330px;
  }

  /* 原本はこの帯でfragrance/goods行だけ画像高340px(他行は330px) */
  .category-row--fragrance .category-row__image,
  .category-row--goods .category-row__image {
    height: 340px;
  }

  .category-row__image--desktop {
    display: none;
  }

  .category-row__image--mobile {
    display: block;
  }
}

@media screen and (max-width: 540px) {
  /* 原本実測(375px): 本文と画像の間のgap 30pxは維持したまま、外側余白だけ行ごとに
     微妙に違う(apparel下26 / fragrance上26 / accessories左28)。原本の癖をそのまま転記 */
  .category-row {
    padding: 30px;
  }

  .category-row--apparel {
    padding-bottom: 26px;
  }

  .category-row--fragrance {
    padding-top: 26px;
  }

  .category-row--accessories {
    padding-left: 28px;
  }

  .category-row__body {
    gap: 20px;
  }

  /* 基底の行別ルール(0,2,0)に負けないよう同じ詳細度で列挙する */
  .category-row__title,
  .category-row--goods .category-row__title,
  .category-row--accessories .category-row__title {
    font-size: 54px;
    line-height: 1;
  }

  .category-row__text,
  .category-row--apparel .category-row__text,
  .category-row--fragrance .category-row__text {
    font-size: 15px;
    line-height: 1.5;
  }

  .category-row__image,
  .category-row--fragrance .category-row__image,
  .category-row--goods .category-row__image {
    height: 230px;
  }
}