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

.cf-jc-collection-tabs {
  margin-bottom: 100px;
  @media(max-width:1199px){
    margin-bottom: 70px;
  }
  @media(max-width:767px){
    margin-bottom: 50px;
  }
  .collection-tabs-wrapper{
    @media(max-width:767px){
      padding: 0 0 0 20px;
      overflow: hidden;
    }
    .page-width {
      @media(max-width:767px){
        padding: 0;
      }
    }
    .collection-tabs {
      white-space: nowrap;
      display: flex;
      justify-content: center;
      gap: 10px 35px;
      padding: 30px 0 0;
      @media(max-width:767px){
        gap: 10px 19px;
        justify-content: start;
        overflow: auto;
        padding-right: 10px;
      }
      .collection-tab-button {
        padding: 11px 35px;
        border-radius: 20px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: .3s;
        font-family: var(--font-body-family);
        font-weight: 700;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0;
        text-align: center;
        color: var(--color-1A1A1A);
        opacity: 0.42;
        &.active,
        &:hover{
          background: var(--color-EC881D);
          color: var(--color-FFFFFF);
          opacity: 1;
        }
        @media(max-width:767px){
          background: var(--color-E3E3E3);
          padding: 10px 25px;
        }
      }
    }
  }
  .collection-tab-panel {
    padding-top: 60px;
    &:first-child{
      padding-top: 30px;
    }
    @media(max-width:1023px) {
      padding-top: 60px;
    }
    @media(max-width:767px) {
      padding-top: 50px;
    }
    .tab-content-wrapper{
      display: flex;
      background-color: var(--color-E3E3E3);
      background-image: url(/cdn/shop/files/collection-bg-pattern.png?v=1765263548);
      background-size: cover;
      border-radius: 30px;
      box-shadow: 0 0 0 1px #0000000f, 0 1px 1px -.5px #0000000f, 0 3px 3px -1.5px #0000000f, 0 6px 6px -3px #0000000f, 0 12px 12px -6px #0000000f, 0 24px 24px -12px #0000000f;
      justify-content: space-between;
      padding: 16px 16px 16px 60px;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      @media(max-width:1199px) {
        padding: 16px 17px 16px 15px;
      }
      @media(max-width:991px) {
        display: flex;
        padding: 16px 17px 25px;
        flex-direction: column-reverse;
        margin-bottom: 15px;
      }
      @media(max-width:767px) {
        padding: 12px 12px 20px;
      }
      .tab-content-inner {
          text-align: left;
          padding-right: 40px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          @media(max-width:991px) {
            margin-top: 20px;
            text-align: center;
            padding-right: 0;
            align-items: center;
          }
          .tab-banner-label{
            background-color: var(--color-EC881D);
            font-family: var(--font-dm-mono-family);
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            letter-spacing: 0;
            color: var(--color-FFFFFF);
            padding: 2px 11px;
            margin-bottom: 15px;
            display: inline-block;
            width: fit-content;
            text-transform: uppercase;
          }
          h5 {
            font-family: var(--font-heading-family);
            font-weight: 900;
            font-size: 40px;
            line-height: 45px;
            letter-spacing: 0;
            color: var(--color-141414);
            margin-bottom: 0;
            text-transform: uppercase;
            display: none;
          }
          h3 {
            font-family: var(--font-heading-family);
            font-weight: 900;
            font-size: 60px;
            line-height: 54px;
            letter-spacing: 0;
            color: var(--color-141414);
            margin-bottom: 25px;
            text-transform: uppercase;
            @media(max-width:1199px) {
              margin-bottom: 16px;
            }
            @media(max-width:767px) {
              font-size: 40px;
              line-height: 35px;
            }
          }
          .tab-banner-table-wrapper{
            .tab-banner-table {
              width: 100%;
              border: 1px solid #00000061;
              display: flex;
              flex-direction: column;
              border-bottom: none;
              text-align: left;
              margin-bottom: 22px;
              .banner-table-row {
                display: flex;
                width: 100%;
                .banner-table-cell {
                  flex: 1;
                  border-right: 1px solid #00000061;
                  border-bottom: 1px solid #00000061;
                  font-family: var(--font-dm-mono-family);
                  font-weight: 300;
                  font-size: 12px;
                  line-height: 20px;
                  letter-spacing: 0;
                  padding: 16px 18px;
                  color: var(--color-141414);
                  min-height: 62px;
                  display: flex;
                  @media(max-width:767px) {
                    padding: 10px;
                  }
                  &:last-child {
                    border-right: none;
                  }
                  &.banner-table-heading {
                    font-family: var(--font-dm-mono-family);
                    font-weight: 500;
                    font-size: 17px;
                    line-height: 20px;
                    padding: 6px 18px;
                    color: var(--color-141414);
                    min-height: auto;
                    text-transform: capitalize;
                    @media(max-width:767px) {
                      padding: 6px 10px;
                      font-size: 16px;
                    }
                  }
                }
              }
            }
            p{
              font-family: var(--font-dm-mono-family);
              font-weight: 300;
              font-size: 12px;
              line-height: 20px;
              letter-spacing: 0;
              color: var(--color-141414);
              padding: 0;
              max-width: 100%;
            }
          }
          p {
              font-weight: 400;
              font-size: 17px;
              line-height: 24px;
              letter-spacing: 0;
              color: var(--color-141414);
              max-width: 335px;
              width: 100%;
              padding-right: 10px;
              font-family: var(--font-body-family);
              @media(max-width:767px) {
                  max-width: 100%;
                  width: 100%;
              }
          }
      }
      .tab-image {
        max-width: 600px;
        width: 100%;
        display: inline-flex;
        justify-content: end;
        @media(max-width:991px) {
          max-width: 100%;
          width: 100%;
        }
        img {
            width: 100%;
            border-radius: 22px;
            object-fit: cover;
            object-position: center;
            display: block;
            @media(max-width:767px) {
                width: 100%;
            }
        }
      }
    }
    .banner-default{
    		.description{
						display: none !important;
				}
    }
    .banner-dark{
    		background-image: url(/cdn/shop/files/Pattern_Dark.png?v=1765458068) !important;
    		span.tab-banner-label {
			    display: none !important;
				}
				h3{
						color: #fff !important;
				}
				.tab-banner-table-wrapper{
					.tab-banner-table{
						border: none !important;
						 .banner-table-cell{
              font-family: var(--font-body-family) !important;
						   border: none !important;
						   color: #fff !important;
               padding: 16px 16px 16px 0 !important;
						  }
						  .banner-table-heading{
						    color: #fff !important;
                padding: 6px 16px 6px 0 !important;
                font-weight: 700;
                font-family: var(--font-body-family) !important;
              }
					}
					.short-desc{
						display: none !important;
					}
				}
				.description{
						display: none !important;
				}
    }
    .banner-normal {
    	span.tab-banner-label{
    		display: none !important;
    	}
    	.tab-banner-table-wrapper{
    		display: none !important;
    	}
    }
    .banner-small{
      justify-content: center;
      min-width: 557px;
      max-width: 100%;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      padding: 16px 30px;
      @media (max-width: 767px) {
        /* min-width: 100%; */
        min-width: fit-content;
        border-radius: 22px;

      }
      .tab-content-inner{
        text-align: center;
        padding-right: 0;
        @media (max-width: 991px) {
          margin-top: 0;
        }
        .tab-banner-label{
          display: none;
        }
        h5{
          display: block;
          @media (max-width: 767px) {
            font-size: 20px;
            line-height: 24px;
          }
        }
        h3{
          margin-bottom: 0;
          font-size: 70px;
          line-height: 84px;
          @media (max-width: 767px) {
            font-size: 40px;
            line-height: 35px;
          }
        }
        .tab-banner-table-wrapper{
          display: none;
        }
        .description{
          display: none;
        }
      }
      .tab-image{
        display: none;
      }
    }
    .products-grid-wrap{
      .products-grid {
        display:grid;
        /* minmax(0,1fr): a plain 1fr column can't shrink below its content's
           min-width, so the nowrap rating row blows the grid past the right
           edge of phone screens and the page scrolls sideways. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:22px;
        @media (max-width: 767px) {
          gap: 10px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /* .product-card-wrapper .card__inner{
          @media (max-width: 991px) {
            max-height: 250px;
          }
          @media (max-width: 767px) {
            max-height: 149px;
          }
        } */
        &.two-banners{
          .banner-fill {
            display: block !important;
            grid-column: span 2;
            &.desktop-banner {
              @media (max-width: 767px) {
                display: none !important;
              }
            }
            &.mobile-banner {
              display: none !important;
              @media (max-width: 767px) {
                display: block !important;
                grid-column: span 1;
              }
            }
          }
          &.highlight-show{
            .desktop-banner {
              display: block !important;
              grid-column: span 1;
              @media (max-width: 767px) {
                display: none !important;
              }
            }
          }
        }
        &.one-banner{
          .banner-fill {
            display: block !important;
            &.desktop-banner {
              @media (max-width: 767px) {
                display: none !important;
              }
            }
            &.mobile-banner {
              display: none !important;
              @media (max-width: 767px) {
                display: block !important;
                grid-column: span 1;
              }
            }
          }
          &.one-banner-m{
            &.mobile-banner.mobile-banner2 {
              @media (max-width: 767px) {
                display: none !important;
              }
            }
          }
          &.highlight-show{
            .banner-fill {
              &.mobile-banner,
              &.desktop-banner{
                display: none !important;
                @media (max-width: 767px) {
                  display: none !important;
                }
              }
            }
          }
        }

        &.one-banner-m{
          .banner-fill{
            &.mobile-banner{
              @media (max-width: 767px) {
                display: block !important;
              }
            }
            &.mobile-banner.mobile-banner2{
              @media (max-width: 767px) {
                display: none !important;
              }
            }
          }
        }
        .banner-fill {
          display: none;
          background: var(--color-FFFFFF);
          padding: 7px;
          border-radius: 26px;
          position: relative;
          box-shadow: 0 0 0 1px #0000000f, 0 1px 1px -.5px #0000000f, 0 3px 3px -1.5px #0000000f, 0 6px 6px -3px #0000000f, 0 12px 12px -6px #0000000f, 0 24px 24px -12px #0000000f;
          overflow: hidden;
          @media (max-width: 767px) {
            padding: 4px;
          }

          img {
            position: absolute;
            inset: 7px;
            width: calc(100% - 14px);
            height: calc(100% - 14px);
            object-fit: cover;
            border-radius: 22px;
            display: block;
            @media (max-width: 767px) {
              inset: 4px;
              width: calc(100% - 8px);
              height: calc(100% - 8px);
              border-radius: 23px;
            }
          }
        }
        .highlight-material{
          padding: 7px;
          box-shadow: 0 0 0 1px #0000000f, 0 1px 1px -.5px #0000000f, 0 3px 3px -1.5px #0000000f, 0 6px 6px -3px #0000000f, 0 12px 12px -6px #0000000f, 0 24px 24px -12px #0000000f;
          background-color: var(--color-FFFFFF) !important;
          border-radius: 25px;
          @media (max-width: 767px) {
            padding: 4px;
          }
          .highlight-material-wrap{
            display: flex;
            flex-direction: column;
            position: relative;
            height: 100%;
            img{
              width: 100%;
              height: calc(100% - 100px);
              border-radius: 22px 22px 0 0;
              object-fit: cover;
            }
            .highlight-content{
              position: absolute;
              bottom: 0;
              width: 100%;
              padding: 10px;
              min-height: 118px;
              border-radius: 0 0 22px 22px;
              background-color: var(--color-000000);
              h5{
                font-family: var(--font-heading-family);
                font-weight: 900;
                font-size: 18px;
                line-height: 100%;
                letter-spacing: 0%;
                color: var(--color-FFFFFF);
                margin: 0 0 8px;
                text-transform: uppercase;
              }
              p{
                font-family: var(--font-body-family);
                font-size: 12px;
                line-height: 16px;
                letter-spacing: 0%;
                color: var(--color-FFFFFF);
              }
            }
          }
        }
      }
    }
  }
}