.category-section__container {
  display: flex;
  gap: clamp(0.8rem, 1vw, 2.4rem); }
  @media (max-width: 1099px) {
    .category-section__container {
      flex-direction: column;
      gap: 24px; } }
  @media (max-width: 767px) {
    .category-section__container {
      gap: 20px; } }

.category-section__header {
  width: clamp(260px, 30%, 432px);
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(1.4rem, 0.8vw, 2rem); }
  @media (max-width: 1559px) {
    .category-section__header {
      gap: clamp(0.8rem, 1.2vw, 2.4rem); } }
  @media (max-width: 1099px) {
    .category-section__header {
      width: auto;
      flex: 0 0 auto;
      gap: 12px; } }

.category-section__inner {
  display: flex;
  flex-grow: 1; }

.category-section__title {
  position: relative;
  max-width: fit-content;
  padding: 0 16px 0 0;
  white-space: nowrap; }
  @media (max-width: 1099px) {
    .category-section__title {
      margin-bottom: 8px; } }

.category-section__icon {
  position: absolute;
  z-index: -1;
  top: 84%;
  right: 0;
  width: 45%;
  display: flex;
  align-items: center; }
  @media (max-width: 1249px) {
    .category-section__icon {
      top: 70%; } }
  .category-section__icon .lazy-img-wrap {
    opacity: 0; }
    .category-section__icon .lazy-img-wrap img {
      width: 100%;
      height: auto;
      display: block; }

.category-section__title.fadeInUpAnimate .category-section__icon .lazy-img-wrap {
  animation: category-icon-fade-in 1s ease-in-out 0.8s forwards; }

.category-section__title.fadeInUpAnimate .category-section__icon .icon-anim__reveal {
  animation: category-wave-reveal 1.3s cubic-bezier(0.48, 0, 0.28, 1) var(--category-wave-delay, 0ms) forwards; }

.category-section .icon-anim__svg {
  width: 100%;
  height: auto;
  display: block; }

.category-section .icon-anim__shape {
  fill: #7b2027; }

.category-section .icon-anim__reveal {
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box; }

@keyframes category-icon-fade-in {
  to {
    opacity: 1; } }

@keyframes category-wave-reveal {
  to {
    transform: scaleX(1); } }

.category-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.6vw, 1.2rem); }
  @media (max-width: 1249px) {
    .category-list {
      gap: clamp(0.3rem, 0.3vw, 1rem); } }
  @media (max-width: 1099px) {
    .category-list {
      gap: 10px; } }
  @media (max-width: 767px) {
    .category-list {
      gap: 8px; } }
  .category-list__item {
    display: flex;
    align-items: center;
    gap: .8rem; }
    @media (min-width: 1100px) {
      .category-list__item:hover {
        color: var(--theme-base-color-light); }
        .category-list__item:hover .icon {
          fill: var(--theme-base-color-light); } }
    .category-list__item:active {
      color: var(--theme-base-color-dark); }
      .category-list__item:active .icon {
        fill: var(--theme-base-color-dark); }
  .category-list .icon {
    max-width: clamp(1.4rem, 1.3vw, 2.4rem);
    max-height: clamp(1.4rem, 1.3vw, 2.4rem);
    fill: #1A1A1A; }

.category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }
  .category-card__title {
    position: absolute;
    inset: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; }
    @media (max-width: 1099px) {
      .category-card__title {
        inset: 0.8rem; } }
  .category-card__image .lazy-img-wrap img {
    transition: transform .3s ease;
    will-change: transform; }
  @media (min-width: 1100px) {
    .category-card {
      cursor: pointer; }
      .category-card:hover .lazy-img-wrap img {
        transform: scale(1.05); } }