body.products-page {
  overflow-x: hidden;
  background: #f5f5f5;
  color: #222;
}

html:has(body.products-page) {
  overflow-x: clip;
}

.products-page main {
  background: #f5f5f5;
}

.products-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 490px; */
  padding: 330px var(--gutter) 100px;
  text-align: center;
}

.products-title h1 {
  margin: 0;
  color: #222;
  font-family: var(--font-latin);
  font-size: clamp(34px, 3.125vw, 60px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.products-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto;
  padding: 0 var(--gutter) 200px;
}

.product-tabs-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* flex 아이템(.product-tabs)이 내용 폭 아래로 줄어들 수 있게 한다. */
  min-width: 0;
}

/* 탭 줄은 어떤 폭에서도 컨테이너를 넘지 않는다.
   여유가 있으면 탭이 170px 로 벌어지고, 좁아지면 글자 폭까지 자연스럽게 줄었다가,
   더 좁아지면 알약 안에서 가로 스크롤된다. (줄바꿈으로 갑자기 2줄이 되지 않는다) */
.product-tabs {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  /* 탭 하나 170px, 갭 10px, 알약 안쪽 여백 10px.
     --tab-count 는 PHP 가 실제 탭 개수를 넣어준다(기본 7).
     기본 폭 = 7 x 170 + 6 x 10 + 20 = 1270px.

     주의: width: max-content 로는 1270 이 안 나온다.
     .product-tab 이 flex-shrink: 1 이라 flex 컨테이너의 max-content 가
     flex-basis(170px) 가 아니라 "글자 폭 합"(약 769px)으로 계산되기 때문이다.
     그래서 폭을 계산식으로 못박고, 화면이 좁아지면 max-width 로 같이 줄인다. */
  --tab-count: 7;
  --tab-w: 170px;
  --tab-gap: 10px;
  --tab-pad: 10px;
  gap: var(--tab-gap);
  width: calc(var(--tab-count) * var(--tab-w) + (var(--tab-count) - 1) * var(--tab-gap) + var(--tab-pad) * 2);
  max-width: 100%;
  padding: var(--tab-pad);
  /* 스냅이 왼쪽 패딩을 먹지 않도록 스크롤포트 시작을 패딩만큼 밀어 준다. */
  scroll-padding-inline: var(--tab-pad);
  border-radius: 999px;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(8.95px);
}

.product-tabs::-webkit-scrollbar {
  display: none;
}

/* 실제로 넘칠 때만 오른쪽에 버튼 자리를 비운다(JS 가 has-tab-overflow 를 붙인다).
   버튼의 hidden 상태가 아니라 넘침 여부에 묶어야, 끝까지 스크롤했을 때
   패딩이 붙었다 떨어졌다 하며 진동하지 않는다. */
.product-tabs-wrap.has-tab-overflow .product-tabs {
  padding-right: 62px;
}

.product-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 170px 을 기준으로 하되, 폭이 모자라면 글자 폭까지 줄어든다.
     min-width 를 지정하지 않아야 auto(=글자 폭) 아래로는 줄지 않고 스크롤로 넘어간다. */
  flex: 0 1 var(--tab-w);
  width: auto;
  min-height: 50px;
  padding: 15px 20px;
  border-radius: 999px;
  color: #222;
  font-family: var(--font-latin);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background .24s var(--ease), color .24s var(--ease), transform .24s var(--ease);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* nsbs-components.css 에
     body[data-lang="en"|"ja"|"de"] :is(.product-tab, ...) {
       white-space: normal; overflow-wrap: anywhere;
     }
   가 걸려 있다. 특이도가 (0,2,1) 이라 .product-tab (0,1,0) 으로는 못 이긴다.
   그 탓에 탭 글자가 두 줄로 접히고, anywhere 때문에 글자 단위로까지 쪼개져
   탭이 글자 폭보다 훨씬 좁게 눌렸다(알약 전체가 1270 이 아니라 769px 로 보이던 원인).
   탭은 항상 한 줄이어야 하므로 같은 특이도로 되돌린다.
   (이 파일이 nsbs-components.css 보다 뒤에 로드되므로 동점이면 이 규칙이 이긴다) */
/* body[data-lang="en"] .product-tab,
body[data-lang="ja"] .product-tab,
body[data-lang="de"] .product-tab {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
} */

.product-tab.is-active {
  background: var(--primary);
  color: #fff;
}

.product-tab:hover {
  transform: translateY(-1px);
}

/* 넘칠 때만 JS 가 hidden 을 떼어 보여준다. 폭 조건 없이 전 구간에서 동작한다. */
.product-tabs__next {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  transform: translateY(-50%);
}

.product-tabs__next::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, 1px);
}

.product-tabs__next[hidden] {
  display: none;
}

.products-panel {
  width: min(1600px, 100%);
  padding-top: 80px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}

.products-panel.is-changing .product-grid {
  opacity: .35;
  transform: translateY(10px);
}

.product-card {
  display: flex;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  overflow: hidden;
  padding: clamp(28px, 3.125vw, 60px);
  border-radius: 20px;
  background: #fff;
}

.product-card__image {
  position: relative;
  width: min(100%, 400px);
  max-width: none;
  height: auto;
  aspect-ratio: 400 / 243;
  overflow: hidden;
  flex: 0 0 auto;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.product-card__meta {
  display: grid;
  gap: 10px;
  margin-top: 0;
  text-align: left;
}

.product-card__category,
.product-card__name {
  margin: 0;
  font-family: var(--font-latin);
}

.product-card__category {
  color: #888;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}

.product-card__name {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-category-page .products-content {
  min-height: auto;
}

.product-category-page .product-grid {
  width: min(1600px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
}

.product-category-page--incontinence .product-grid {
  width: min(1600px, 100%);
}

.product-category-page--cover .product-grid {
  width: min(1600px, 100%);
}

.product-category-page:not(.product-category-page--cover) .product-card__image {
  aspect-ratio: 400 / 300;
}

.product-card--category {
  aspect-ratio: auto;
  min-height: auto;
  cursor: default;
}

a.product-card--category {
  cursor: pointer;
  text-decoration: none;
}

.product-card__description {
  margin: 14px 0 0;
  color: #555;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  white-space: normal;
  word-break: keep-all;
}

.product-empty {
  display: none;
  margin: 80px 0 0;
  color: #777;
  font-size: 20px;
  text-align: center;
}

.products-panel.is-empty .product-empty {
  display: block;
}

.products-panel--direct {
  width: min(1280px, 100%);
}

.product-direct-view {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(52px, 6vw, 110px);
  align-items: center;
  padding: clamp(34px, 4vw, 72px);
  border-radius: 20px;
  background: #fff;
}

.product-direct-view__media {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
}

.product-direct-view__copy {
  display: grid;
  gap: 22px;
  align-content: center;
  min-width: 0;
}

.product-direct-view__eyebrow {
  margin: 0;
  color: var(--primary);
  font-family: var(--font-latin);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.product-direct-view h2 {
  margin: 0;
  color: #000;
  font-family: var(--font-latin);
  font-size: clamp(28px, 3vw, 56px);
  font-weight: 700;
  line-height: 1.05;
}

.product-direct-view__copy p:last-child {
  max-width: 620px;
  margin: 0;
  color: #333;
  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 500;
  line-height: 1.65;
  word-break: keep-all;
}

@media (max-width: 1180px) {
  .product-grid,
  .product-category-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-direct-view {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .products-title {
    min-height: 320px;
    padding: 260px var(--gutter) 64px;
  }

  .products-title h1 {
    /* font-size: clamp(30px, 8vw, 48px); */
    /* line-height: 1.08; */
  }

  .products-content {
    min-height: auto;
    padding-bottom: 110px;
  }

  /* 1024 이하는 더 줄이지 않고 '글자 폭 그대로 + 가로 스크롤' 모드로 넘어간다. */
  .product-tabs {
    --tab-gap: 8px;
    --tab-pad: 8px;
    width: 100%;
  }

  .product-tab {
    flex: 0 0 auto;
    width: max-content;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 100px;
  }

  .products-panel {
    padding-top: 48px;
  }

  .product-card {
    min-height: 0;
  }

  .product-card__image {
    max-width: 360px;
  }

  .product-card__category {
    font-size: 15px;
    line-height: 1.2;
  }


}

@media (max-width: 768px) {
  /* 1024 구간의 상단 260px 은 좁은 화면에서 과하다. 하단 값은 페이지별로 유지. */
  .products-title {
    padding: 220px var(--gutter) 64px;
  }
    .product-card__name {
    font-size: 16px;
  }
    .product-card__category {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .product-grid,
  .product-category-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-grid {
    gap: 15px;
}

  .product-card {
    gap: 30px;
    padding: 20px;
  }

  .product-direct-view {
    gap: 34px;
    padding: 34px;
  }
}

@media (max-width: 420px) {
  .product-tab {
    padding: 12px 12px;
    font-size: 13px;
  }


}