/* 口味分类宫格（Figma 23:976）—— 1176px 内容宽，两列 583px、间距 10px */
.flavour-tiles {
  padding: var(--ft-padding-top) 32px var(--ft-padding-bottom);
  font-family: 'Manrope', var(--body-font), sans-serif;
  -webkit-font-smoothing: antialiased;
}

.flavour-tiles__inner {
  max-width: 1176px;
  margin: 0 auto;
}

.flavour-tiles__eyebrow {
  margin: 0;
  padding: 6.5px 0 2.5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ft-eyebrow-color);
}

.flavour-tiles__heading {
  margin: 0;
  padding-top: 7px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: -1.2px;
  color: var(--ft-heading-color);
}

.flavour-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.flavour-tiles__tile {
  display: block;
  text-decoration: none;
}

.flavour-tiles__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 583 / 171.47;
  border-radius: 14px;
}

/* 图片比格子略大（设计稿 615×180 放在 583×171 里）：
   把素材四周的留白和圆角裁掉，格子自己的 14px 圆角才是唯一的边 */
.flavour-tiles__media img {
  position: absolute;
  left: -2.75%;
  top: -2.75%;
  width: 105.5%;
  height: 105.5%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.flavour-tiles__tile:hover img {
  transform: scale(1.03);
}

/* 桌面端名称已印在图上 */
.flavour-tiles__label {
  display: none;
}

/* ---- 移动端（Figma 移动稿 2:127）—— 方图横向滑动，名称在图下 --------------- */
@media screen and (max-width: 959px) {
  .flavour-tiles {
    padding: var(--ft-padding-top-mobile) 18px var(--ft-padding-bottom-mobile);
    background: var(--ft-bg-mobile);
  }

  .flavour-tiles__eyebrow--desktop-only {
    display: none;
  }

  .flavour-tiles__heading {
    padding-top: 0;
    font-size: 23px;
    line-height: 25.3px;
    letter-spacing: -0.025em;
    text-transform: uppercase;
  }

  /* 横向滑动：一直延伸到屏幕右边缘，第四张露出约 40%，提示还能往右滑 */
  .flavour-tiles__grid {
    display: flex;
    gap: 11px;
    margin: 18px -18px 0 0;
    padding: 0 18px 4px 0;
    scroll-padding-left: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .flavour-tiles__grid::-webkit-scrollbar {
    display: none;
  }

  /* 平台会给每个 block 套一层 shopline-block 包装 div，真正的 flex 子项是它 */
  /* 宽度按「一屏 3.4 张」算：屏宽 − 左边距 18 − 三个间隔 33，再除以 3.4 */
  .flavour-tiles__grid > * {
    flex: 0 0 clamp(88px, calc((100vw - 51px) / 3.4), 140px);
    scroll-snap-align: start;
  }

  .flavour-tiles__media {
    aspect-ratio: 1 / 1;
  }

  /* 方图素材四周自带一圈白边和圆角，在浅灰底上会露出来 —— 和桌面端一样放大一点裁掉 */
  .flavour-tiles__media img {
    left: -3%;
    top: -3%;
    width: 106%;
    height: 106%;
  }

  .flavour-tiles__label {
    display: block;
    padding-top: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #1d1d1f;
  }
}