/* Styles for sections/category-section.liquid. Moved out of the {% stylesheet %} block
   in Phase 3 so the rules load only on pages that render the section. */

.cf-jc-category-cards-wrapper {
	overflow: hidden;

  .page-width{
    max-width: 100% !important;
    padding: 0 50px;
    @media(max-width:767px){
      padding: 0 20px;
    }
  }

  .head-wrapper{
    .heading{
        font-family: var(--font-heading-family);
        font-weight: 900;
        font-size: 50px;
        line-height: 54px;
        letter-spacing: 0;
        color: var(--color-141414);
        margin: 0 0 42px;
        text-transform: uppercase;
        text-align: center;

        @media(max-width:767px){
          font-size: 27px;
          line-height: 30px;
          margin: 0 0 34px;
        }
    }
  }

	.category-splide {
		@media(max-width: 767px) {
			display: none;
		}

		.splide__track {
			overflow: visible;
		}
	}

  .category-grid{
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    justify-content: center;
    margin-left: -11px;
    margin-right: -11px;
    @media(max-width: 767px) {
			display: none;
		}
    &.category-grid-five{
      .category-grid-item{
        max-width: 20%;
        @media(max-width: 1200px) {
          max-width: 25%;
        }
        @media(max-width: 991px) {
          max-width: 33.33%;
        }
      }
    }
    .category-grid-item{
      max-width: 25%;
      width: 100%;
      padding-left: 11px;
      padding-right: 11px;
      @media(max-width: 991px) {
        max-width: 33.33%;
      }
    }
  }

	.category-card {
		display: block;
		border-radius: 30px;
		height: 385px;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		background: var(--color-FFFFFF);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		background-image: url(/cdn/shop/files/f5898875038fea779ac05e93f9c2e6924a123ab7.png?v=1764248727);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		@media(max-width: 767px) {
      border-radius: 20px;
			min-height: 86px;
			height: auto;
      box-shadow: none;
      /* max-width: calc(50% - 5px); */
      max-width: 100%;
      width: 100%;
		}
    @media(max-width: 767px) {
    }

		.category-img {
			width: 100%;
			height: 100%;

			@media(max-width: 767px) {
				display: flex;
				justify-content: end;
			}

			img {
				width: 100%;
				height: 80%;
				object-fit: contain;
        transition: all .5s cubic-bezier(.6,0,.4,1);

				@media(max-width: 767px) {
					max-width: 40%;
          height: auto;
				}
			}
		}

		.category-content {
			padding: 18px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			bottom: 0;
			width: 100%;

			@media(max-width: 767px) {
				padding: 28px 20px;
				height: 100%;		
        background-size: 110px;
        background-repeat: no-repeat;
        background-position: top right;
        position: initial;

        /* cover */
        background-size: cover;
			}

			h3 {
				font-family: var(--font-heading-family);
				font-size: 28px;
				line-height: 30px;
				letter-spacing: 0;
				color: var(--color-141414);
				text-transform: uppercase;
        @media(max-width: 767px) {
          max-width: 70%;
        }
			}

			.arrow {
        font-size: 22px;
        color: var(--color-141414);
			}
		}

		&.image-cover {
      img {
        height: 100%;
        object-fit: cover;
			}
			.category-content {
        @media(max-width: 767px) {
          background-size: cover;
				}
        h3 {
          color: var(--color-FFFFFF);
        }
        .arrow {
          color: var(--color-FFFFFF);
        }
			}
		}
    &:hover{
      img{
        transform: scale(1.1);
      }
    }
	}

	.category-tab {
		display: none;

		@media(max-width: 767px) {
      display: flex;
      flex-wrap: wrap;
			gap: 12px;
		}
	}
}