/* ========================================
   product-hero
   ======================================== */

.product-hero {
  width: 100%;
  height: clamp(12.5rem, 31.25vw, 37.5rem); /* 200px–600px, scales with viewport */
  overflow: hidden;
}

.product-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ========================================
   product-ctg
   ======================================== */

.product-ctg__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 105rem; /* 1680px */
  margin-inline: auto;
  padding: 4.375rem 7.5rem; /* 70px 120px */
  border-bottom: 0.0625rem solid var(--color-grey-300); /* 1px */
}

.product-ctg__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.0625rem; /* 65px */
}

.product-ctg .btn-tab-ctg.is-active {
  border-color: var(--color-brand-dark);
}

.product-ctg .btn-tab-ctg__media {
  overflow: hidden;
  background-color: transparent;
}

.product-ctg .btn-tab-ctg__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ========================================
   product-list
   ======================================== */

.product-list {
  padding-top: 8.75rem; /* 140px — ctg ↔ title */
  padding-bottom: 5rem; /* 80px */
}

.product-list__panel:not(.is-active) {
  display: none;
}

.product-list__title {
  margin: 0 0 7.5rem; /* 120px — title ↔ cards */
  letter-spacing: 0.1em; /* 10% */
  text-align: center;
  color: var(--color-text-dark);
}

.product-list__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.25rem; /* row 32px / column 20px */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-list__item {
  display: flex;
}

.product-list__item .card-product,
.product-list__item .card-product__media {
  width: 100%;
}

.product-list__item .card-product {
  flex: 1;
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .product-ctg__inner {
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }

  .product-ctg__tabs {
    gap: 1.25rem; /* 20px */
  }

  .product-list {
    padding-top: 5rem; /* 80px */
    padding-bottom: 4rem; /* 64px */
  }

  .product-list__title {
    margin-bottom: 3.75rem; /* 60px */
    font-size: clamp(1.313rem, 2.737vw, 1.75rem); /* 28px, ta/subtitle01 */
  }

  .product-list__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6rem; /* 32px */
    width: 100%;
  }

  .product-list__item {
    width: 100%;
    max-width: 30.125rem; /* 482px */
    min-width: 0;
  }

  .product-list__item .card-product,
  .product-list__item .card-product__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-list__item .card-product__media {
    height: 13.75rem; /* 220px */
  }

  .product-list__item .card-product__body {
    width: 100%;
    min-width: 0;
  }

  .product-list__item .card-product__title,
  .product-list__item .card-product__name {
    font-size: clamp(0.844rem, 1.76vw, 1.125rem); /* 18px */
  }

  .product-list__item .card-product__text {
    font-size: clamp(0.75rem, 1.564vw, 1rem); /* 16px */
  }

  .product-list__item .card-product__sizes {
    font-size: clamp(0.75rem, 1.368vw, 0.875rem); /* 14px */
  }
}

@media (max-width: 47.9375rem) {
  .product-ctg__inner {
    padding: 1.875rem 1.25rem; /* 30px 20px */
  }

  .product-ctg__tabs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 0.75rem; /* 12px */
  }

  .product-list {
    padding-top: 3.75rem; /* 60px */
    padding-bottom: 3.75rem; /* 60px */
  }

  .product-list__title {
    margin-bottom: 2.5rem; /* 40px */
    font-size: clamp(1.091rem, 5.455vw, 1.5rem); /* 24px, mo/subtitle01 */
  }

  .product-list__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 4rem; /* 64px */
    width: 100%;
  }

  .product-list__item {
    width: 100%;
    max-width: 25rem; /* 400px */
    min-width: 0;
  }

  .product-list__item .card-product,
  .product-list__item .card-product__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-list__item .card-product__media {
    height: 12.5rem; /* 200px */
  }

  .product-list__item .card-product__body {
    width: 100%;
    min-width: 0;
  }

  .product-list__item .card-product__title,
  .product-list__item .card-product__name {
    font-size: clamp(0.818rem, 4.091vw, 1.125rem); /* 18px */
  }

  .product-list__item .card-product__text {
    font-size: clamp(0.75rem, 3.636vw, 1rem); /* 16px */
  }

  .product-list__item .card-product__sizes {
    font-size: clamp(0.75rem, 3.182vw, 0.875rem); /* 14px */
  }
}