/** Shopify CDN: Minification failed

Line 134:0 Comments in CSS use "/* ... */" instead of "//"
Line 150:0 Unexpected "}"
Line 163:0 Comments in CSS use "/* ... */" instead of "//"
Line 218:0 Comments in CSS use "/* ... */" instead of "//"
Line 224:0 Comments in CSS use "/* ... */" instead of "//"
Line 231:0 Comments in CSS use "/* ... */" instead of "//"
Line 615:4 Comments in CSS use "/* ... */" instead of "//"
Line 816:8 Comments in CSS use "/* ... */" instead of "//"
Line 837:6 Comments in CSS use "/* ... */" instead of "//"
Line 1038:10 Comments in CSS use "/* ... */" instead of "//"
... and 5 more hidden warnings

**/
/*
	You can write your custom SCSS here
*/

.hero.hero--title-large.no--vignette .hero__background.image-fit::after, .hero.hero--title-large.no--vignette .hero__background.image-fit::before  {
  content: unset;
}

.price__discount {
	display: none;
}
.price {
	gap: 0.5ch;
}

@media (max-width: 480px) {
	.hero--plp .hero__title,
	.hero--medium .hero__title {
		margin-bottom: 5px;
		margin-top: 3rem;
	}
}

.footer__copyright a {
	text-decoration: none;
	color: #fff;
}
.product__thumbs {
	transform: translateY(80px);
}
.product__thumbs .slick-prev {
	color: transparent;
	width: 20px;
	height: 20px;
	border: none;
	padding: 0;
	overflow: hidden;
	background: transparent;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	cursor: pointer;
	z-index: 1;
}
.product__thumbs .slick-prev:before {
	content: '‹';
	position: absolute;
	top: 50%;
	left: 68%;
	transform: translate(-50%, -50%) rotate(90deg);
	color: #000;
	font-size: 40px;
	z-index: -1;
}

.product__thumbs .slick-next {
	color: transparent;
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	overflow: hidden;
	padding: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	cursor: pointer;
	z-index: 1;
}
.product__thumbs .slick-next:before {
	content: '›';
	position: absolute;
	top: 50%;
	left: 68%;
	transform: translate(-50%, -50%) rotate(90deg);
	color: #000;
	font-size: 40px;
	z-index: -1;
}
@media only screen and (max-width: 767px) {
	.product__thumbs .slick-next,
	.product__thumbs .slick-prev {
		display: none !important;
	}
	.product__thumbs {
		transform: none;
	}
}

.template-product .section-info {
	background-image: url(/cdn/shop/files/bluePrintBKG.jpg?v=1636056960);
	background-size: cover;
}
.template-product .section-info .section__title {
	color: white;
}

.section-offset--top {
	padding: 0 0 80px;
	margin: 0;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#020202),
		color-stop(49%, #020202),
		color-stop(50%, #020202),
		color-stop(50%, white),
		to(white)
	) !important;
	background: -o-linear-gradient(top, #020202 0%, #020202 49%, #020202 50%, white 50%, white 100%) !important;
	background: linear-gradient(to bottom, #020202 0%, #020202 49%, #020202 50%, white 50%, white 100%) !important;
}

.learn-page .section-offset--top {
	background: #000 !important;
}

// Reviews Related Cards

.card__head .price {
	float: left;
}

.product__body-inner .price__amount .money {
	padding-right: 10px;
}


.cart .cart__total span {
                                                                                                                                                            -webkit-box-pack: end;
                                                                                                                                                            -ms-flex-pack: end;
                                                                                                                                                            justify-content: flex-end;
                                                                                                                                                            color: #eb3300; }
}
@media (max-width: 767px) {
	.price {
		display: flex;
      justify-content: center;
	}
   .cart .cart__total span {
                                                                                                                                                            -webkit-box-pack: end;
                                                                                                                                                            -ms-flex-pack: end;
                                                                                                                                                            justify-content: center;
                                                                                                                                                            color: #eb3300; }
}

// Reviews Tab

.tab.reviews-tab {
	max-width: 100%;
}


.reviews-title {
	font-family: 'Teko', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 32px;
	line-height: 28px;
}


.content-title {
	font-family: 'Teko', sans-serif !important;
	letter-spacing: 1px;
	font-size: 18px !important;
	color: #fff !important;
}

.content-review {
	font-family: 'Source Sans Pro', sans-serif !important;
	color: #fff !important;
}



.share-options .social-link i {
	font-family: 'Source Sans Pro', sans-serif !important;
	color: #ababab !important;
	font-weight: normal;
	font-size: 14px !important;
}


.mock_listing .col_title {
	font-size: 32px;
	line-height: 35px;
}

.mock-topbar {
	border: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin-right: 40px !important;
}

.mock-topbar .sidebar-link {
	min-width: auto !important;
	margin-right: 45px;
}

// Reviews Megamenu

.nav__megamenu__item .relatedReviews {
	display: none !important;
}

// Reviews PLP

.boost-pfs-filter-product-bottom-inner .price {
	float: left;
	padding-top: 3px;
}

// Popup

.white-popup-block {
	background: #fff;
	padding: 20px 30px;
	text-align: left;
	max-width: 650px;
	margin: 40px auto;
	position: relative;
}

.request-title {
	color: #29303d;
	line-height: 1.2;
	padding-bottom: 20px;
}

.form-feedback {
	color: #29303d;
}

.hidden {
	display: none !important;
}

.klaviyo-form-SUNv2i .go2742450065 {
	min-width: 124px;
	border-radius: 0 !important;
	border: 1px solid #da4623 !important;
	font-family: Source Sans Pro, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.43 !important;
	background-color: #da4623 !important;
}

.klaviyo-form-SUNv2i .go2742450065:hover {
	border: 1px solid #2a303c !important;
}

/*
	PDP Table
*/

.product__table-container {
	background: #000;
	position: relative;

	.table__background {
		position: absolute;
		height: 100%;
		width: 100%;
		background: linear-gradient(270deg, #eb3300 0%, #13294b 100%);
		opacity: 0.3;
		z-index: 1;
	}

	.btn--red-alt:before {
		background-position: top;
	}

	@media screen and (max-width: 767px) {
		padding: 0;
	}

	.smokes-it {
		text-align: center;
		color: white;
		font-size: 36px;
		font-weight: 600;
		line-height: 32px;
		letter-spacing: 0em;
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}

	.table__container-inner {
		max-width: 1119px;
		width: 100%;
		display: block;
		margin: auto;
		position: relative;
		z-index: 2;
		padding: 100px 76px;
		@media screen and (max-width: 767px) {
			padding: 25px 10px;
			padding-bottom: 0;
		}

		.column--title--inner {
			width: 100% !important;
			display: block !important;
			height: fit-content !important;
		}

		.table__row {
          width:100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			&.title-row {
				.table__row,
				.feature {
					flex-wrap: wrap;
					border: none;
					display: flex;
					align-items: center;
					h3 {
						font-weight: 600;
						font-size: 30px;
						line-height: 35px;
						text-align: center;
						width: 100%;
						margin-bottom: 0;
						text-transform: none;
						color: #fff;
						@media screen and (max-width: 877px) {
							font-size: 21px;
							line-height: 24px;
						}
						@media screen and (max-width: 767px) {
							font-size: 18px;
							line-height: 21px;
						}
						@media screen and (max-width: 660px) {
							font-size: 16px;
							line-height: 19px;
						}
					}
					p {
						font-family: 'Source Sans Pro', sans-serif;
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						width: 100%;
						margin-bottom: 0;
						font-weight: 400;
						text-transform: capitalize;
						color: #fff;
						@media screen and (max-width: 877px) {
							font-size: 21px;
							line-height: 24px;
						}
						@media screen and (max-width: 767px) {
							font-size: 14px;
							line-height: 21px;
						}
						@media screen and (max-width: 660px) {
							font-size: 16px;
							line-height: 19px;
						}
						@media screen and (max-width: 560px) {
							font-size: 14px;
							line-height: 17px;
						}
						@media screen and (max-width: 460px) {
							font-size: 10px;
							line-height: 10px;
							word-break: break-word;
						}
					}
				}
			}

			> div {
				width: 25%;
				display: flex;
                padding-top:20px;
                padding-bottom:20px;
				height: auto;
				justify-content: center;
				align-items: center;
				font-family: 'Source Sans Pro';
				font-style: normal;
				font-weight: 400;
				font-size: 22px;
				line-height: 24px;
				text-transform: uppercase;
				color: #ffffff;
				text-align: center;
				@media screen and (max-width: 877px) {
					font-size: 18px;
					line-height: 21px;
				}
				@media screen and (max-width: 767px) {
					font-size: 14px;
					line-height: 18px;
					height: 60px;
				}
				@media screen and (max-width: 660px) {
					font-size: 16px;
					line-height: 19px;
				}
				@media screen and (max-width: 560px) {
					font-size: 14px;
					line-height: 17px;
				}
				@media screen and (max-width: 460px) {
					font-size: 10px;
					line-height: 10px;
					word-break: break-word;
				}
			}

			.feature {
                width:25%;
				height:auto;
				border-top: 1px solid #3c3c3b;
				font-size: 16px;
				line-height: 19px;
				display: flex;
				align-items: center;
				text-align: center;
				letter-spacing: 2.5px;
				text-transform: uppercase;

				@media screen and (max-width: 877px) {
					font-size: 18px;
					line-height: 21px;
				}
              
				@media screen and (max-width: 768px) {
					font-size: 12px;
					line-height: 21px;
				}
				@media screen and (max-width: 660px) {
					font-size: 16px;
					line-height: 19px;
				}
				@media screen and (max-width: 560px) {
					font-size: 14px;
					line-height: 17px;
				}
				@media screen and (max-width: 460px) {
					font-size: 10px;
					line-height: 10px;
					word-break: break-word;
				}
			}

			.option--yellow {
                width:25%;
				height:auto;
				border-top: 1px solid #3c3c3b;
				background: #eb3300;
				font-family: 'Teko';
				font-style: normal;
				font-weight: 600;
				font-size: 20px;
				line-height: 25px;

				img {
					@media screen and (max-width: 1200px) {
						transform: scale(0.7);
					}
					@media screen and (max-width: 767px) {
						transform: scale(0.5);
					}
				}
			}

			.option--spacer {
				width: 3vw;
				border-top: 1px solid #3c3c3b;
			}

			.option--regular {
              width:25%;
				height:auto;
				background: #29303d;
				border-top: 1px solid #3c3c3b;
				font-family: 'Teko';
				font-style: normal;
				font-weight: 600;
				font-size: 20px;
				line-height: 25px;

				span {
					border-radius: 100%;
					width: 15.62px;
					height: 15.62px;
					background: #d0d0ce;
					@media screen and (max-width: 877px) {
						height: 12px;
						width: 12px;
					}
					@media screen and (max-width: 767px) {
						height: 9px;
						width: 9px;
					}
				}

				img {
					@media screen and (max-width: 1200px) {
						transform: scale(0.7);
					}
					@media screen and (max-width: 767px) {
						transform: scale(0.5);
					}
				}
			}
		}

		.discount__offer {
			background: #ffb81c;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
			margin-top: 50px;
			margin-bottom: 100px;
			@media screen and (max-width: 767px) {
				width: calc(100% + 20px);
				position: relative;
				left: -10px;
				margin-bottom: 30px;
			}
			p {
				font-family: 'Source Sans Pro';
				font-weight: 600;
				font-size: 24px;
				line-height: 14px;
				text-align: center;
				text-transform: uppercase;
				color: #13294b;
				padding: 20px;
			}
		}

		.actions {
          
			.btn--primary {
				min-width: 193px;
			}
			@media screen and (max-width: 767px) {
				flex-direction: column;
				align-items: center;
				a {
					margin: 30px auto !important;
					max-width: 200px;
				}
			}
		}

		.landing__socials {
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			padding: 0 50px;
			margin-top: 100px;
			border-top: 1px solid white;
			@media screen and (max-width: 767px) {
				background-color: #000;
				border: none;
				margin-top: 30px;
				width: calc(100% + 20px);
				position: relative;
				left: -10px;
				text-align: center;
			}

			img {
				transform: scale(0.5);
				margin: 0;

				@media screen and (max-width: 767px) {
					transform: scale(0.5);
					margin: 0 -23px;
				}

				&:hover {
					mix-blend-mode: overlay;
					@media screen and (max-width: 767px) {
						mix-blend-mode: normal;
					}
				}
			}
		}

		.actions {
			.btn {
				transform: scale(1.4);
				margin: 0 60px;
			}
			.form-product {
				//transform: scale(1.4);
				.gPreorderBtn:hover {
					color: white !important;
				}
			}
		}
	}
}


/* Landing page styles
*
********************************/
.template-page--preorder-landing {
  #main-content {
    margin-top: 0 !important;
  }
  .header.js-header {
    background-color: white;
    height: 122px;
    box-shadow: 0px 12px 12px rgba(0,0,0,0.38);

    @media (max-width: 767px) {
      height: 80px;
    }
  }

  .logo.header__logo {
    opacity: 0 !important;

    &.header__logo--dark {
      display: block !important;
      opacity: 1 !important;
      top: 19px;
      left: 82px;
      @media screen and (max-width: 767px) {
        top: 69%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      @media screen and (max-width: 480px) {
        top: 98%;
      }
      svg {
        width: 207px;
        height: 86px;
      }
    }
  }

  .landing__hero {
    height: 830px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 122px;
    position: relative;
    @media screen and (max-width: 767px) {
      margin-top: 80px;
      height: 308px;
    }

    .btn--primary:hover:not(.disabled):not([disabled]):before {
      background-position: bottom;
    }

    .landing__hero--inner {
      max-width: 1440px;
      margin: 0 auto;
      position: relative;
      padding: 0 21px;
      height: 100%;
    }

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 60%;
      top: 0;
      left: 0;
      background: rgb(2,0,36);
      background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(11,21,57,0.6685049019607843) 59%, rgba(20,41,76,1) 100%);
      @media screen and (max-width: 767px) {
        height: 100%;
      }
    }

    .landing__text-container {
      position: absolute;
      left: 70px;
      top: 32px;
      @media screen and (max-width: 767px) {
        width: 100%;
        left: 0;
      }
      h2 {
        color: white;
        font-size: 121px;
        line-height: 94px;
        font-weight: 600;
        text-shadow: 4px 4px 4px #00000040;
        margin-bottom: 20px;
        @media screen and (max-width: 767px) {
          text-align: center;
          font-size: 44px;
          line-height: 42px;
          margin-bottom: 0;
        }
      }
      h3 {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: 41px;
        letter-spacing: -0.5px;
        text-align: left;
        color: #FFB81C;
        text-shadow: 4px 4px 4px #00000040;
        text-transform: uppercase;
        @media screen and (max-width: 767px) {
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }

  .preorder__product {
    position: absolute;
    right: 102px;
    bottom: 131px;
    width: 411px;
    height: auto;
    background: rgba(255, 255, 255, .85);
    border-radius: 24px;
    text-align: center;
    padding: 42px 0;

    h3 {
      font-family: 'Source Sans Pro';
      font-style: normal;
      font-weight: 700;
      font-size: 36px;
      line-height: 43px;
      text-align: center;
      color: #000000;
    }

    .limited {
      background: #FFB81C;
      width: calc(100% + 16px);
      position: relative;
      left: -8px;
      padding: 10px;
      box-shadow: 0px 4px 4px rgba(0,0,0,0.15);

      p {
        font-size: 18px;
      }
    }

    p.original--price, p.offer--price {
      display: inline-block;
      font-weight: 400;
      font-size: 48px;
      line-height: 35px;
      padding: 39px 5px;
      margin: 0;
    }

    p.offer--price {
      color: #FD0000;
    }

    .gPreorderHidden.btn {
      display: none !important;
    }

    .form-product {
      margin: auto;
      right: 5px;
      position: relative;
    }

    .form__foot {
      margin-top: 0;
    }

    .btn {
      display: block !important;
      max-width: 280px !important;
      margin: auto !important;
      font-style: normal !important;
      font-weight: 700 !important;
      font-size: 24px !important;
      line-height: 43.05px !important;
      height: 73px !important;
      border: transparent !important;
      width: 278px;

      &::before, &::after {
        //height: 73px;
      }
    }
    .btn--primary:hover:not(.disabled):not([disabled]) {
      background-color: transparent !important;
      background-size: 100% !important;
      background-position: center !important;
    }
    .btn--primary:before, .btn--primary:after {
      background-size: 265px 200px !important;
    }
  
    .btn--primary:before, .btn--primary:after {
      height: 73px !important;
      width: 278px;
      background-image: url('/cdn/shop/files/btn-red-bg.png') !important;
      background-size: 100% !important;
      transition: all linear 0s !important;
    }
  
    .btn--red:hover {
      //opacity: .8 !important;
    }
  
    .btn--red:hover:before {
      background-position: center center !important;
    }

    &.mobile-only {
      position: relative;
      width: 100%;
      right: auto;
      height: auto;
      bottom: auto;
    }
  }

  .landing__text-block {
    text-align: center;
    background: white;
    padding: 53px 0;
    display: block;
    h2 {
      font-weight: 600;
      font-size: 96px;
      line-height: 82px;
      color: #EB3200;
      display: block;
      text-align: center;
      margin-bottom: 0;
      text-transform: uppercase;
    }
  }

  .landing__table-container {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 55px 0;

    .btn--red-alt:before {
      background-position: top;
    }

    @media screen and (max-width: 767px) {
      padding: 0;
    }

    .smokes-it {
      text-align: center;
      color: white;
      font-size: 36px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 0em;
      width: 100%;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 40px;

      span {
        height: 1px;
        width: 80%;
        background-color: #00A3E1;
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 0;
        transform: translateX(-50%);
      }
    }

    .table__container-inner {
      max-width: 1119px;
      width: 100%;
      display: block;
      margin: auto;
      padding: 57px 76px;
      background: linear-gradient(180deg, rgba(19, 41, 75, 0.95) 59.58%, rgba(0, 163, 225, 0.95) 100%);
      backdrop-filter: blur(4px);
      @media screen and (max-width: 767px) {
        padding: 25px 10px;
        padding-bottom: 0;
      }

      .table__row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &.title-row {
          .table__row, .feature {
            flex-wrap: wrap;
            border: 2px solid transparent;
            background: transparent;
            h3 {
              font-family: 'Source Sans Pro', sans-serif;
              font-size: 36px;
              font-weight: 700;
              line-height: 36px;
              letter-spacing: 0em;
              text-align: center;
              width: 100%;
              margin-bottom: 0;
              font-weight: 400;
              text-transform: none;
              color: #00A3E1;
              @media screen and (max-width: 877px) {
                font-size: 21px;
                line-height: 24px;
              }
              @media screen and (max-width: 767px) {
                font-size: 18px;
                line-height: 21px;
              }
              @media screen and (max-width: 660px) {
                font-size: 16px;
                line-height: 19px;
              }
            }
            p {
              font-family: 'Source Sans Pro', sans-serif;
              font-size: 24px;
              font-weight: 600;
              line-height: 36px;
              letter-spacing: 0em;
              text-align: center;
              width: 100%;
              margin-bottom: 0;
              font-weight: 400;
              text-transform: none;
              color: #00A3E1;
              @media screen and (max-width: 877px) {
                font-size: 21px;
                line-height: 24px;
              }
              @media screen and (max-width: 767px) {
                font-size: 14px;
                line-height: 21px;
              }
              @media screen and (max-width: 660px) {
                font-size: 16px;
                line-height: 19px;
              }
              @media screen and (max-width: 560px) {
                font-size: 14px;
                line-height: 17px;
              }
              @media screen and (max-width: 460px) {
                font-size: 12px;
                line-height: 15px;
              }
            }
            &.option--yellow {
              h3, p {
                font-weight: bold;
                color: #FFB81C
              }
            }
          }
        }

        > div {
          width: 25%;
          display: flex;
          height: 88px;
          justify-content: center;
          align-items: center;
          margin: 4px;
          font-family: 'Source Sans Pro';
          font-style: normal;
          font-weight: 400;
          font-size: 22px;
          line-height: 24px;
          text-transform: uppercase;
          color: #FFFFFF;
          text-align: center;
          @media screen and (max-width: 877px) {
            font-size: 18px;
            line-height: 21px;
          }
          @media screen and (max-width: 767px) {
            font-size: 14px;
            line-height: 18px;
            height: 60px;
          }
          @media screen and (max-width: 660px) {
            font-size: 16px;
            line-height: 19px;
          }
          @media screen and (max-width: 560px) {
            font-size: 14px;
            line-height: 17px;
          }
          @media screen and (max-width: 460px) {
            font-size: 12px;
            line-height: 15px;
          }
        }

        .feature {
          margin-right: 20px;
          background: rgba(85, 99, 123, .85);
          //background: #54637c;
          //mix-blend-mode: multiply;
          @media screen and (max-width: 877px) {
            font-size: 18px;
            line-height: 21px;
          }
          @media screen and (max-width: 767px) {
            margin-right: 10px;
          }
          @media screen and (max-width: 660px) {
            font-size: 16px;
            line-height: 19px;
          }
          @media screen and (max-width: 560px) {
            font-size: 14px;
            line-height: 17px;
          }
          @media screen and (max-width: 460px) {
            font-size: 12px;
            line-height: 15px;
          }
        }

        .option--yellow {
          border: 2px solid #FFB81C;
          background: rgb(255,184,28);
          background: linear-gradient(0deg, rgba(255,184,28,0.25) 0%, rgba(255,184,28,0.08) 100%);

          img {
            transform: scale(.5);
            @media screen and (max-width: 877px) {
              transform: scale(.4);
            }
            @media screen and (max-width: 767px) {
              transform: scale(.25);
            }
          }
        }

        .option--regular {
          border: 1px solid #00A3E1;

          span {
            border-radius: 100%;
            width: 15.62px;
            height: 15.62px;
            background: #D0D0CE;
            @media screen and (max-width: 877px) {
              height: 12px;
              width: 12px;
            }
            @media screen and (max-width: 767px) {
              height: 9px;
              width: 9px;
            }
          }
        }
      }

      .discount__offer {
        background: #FFB81C;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        margin-top: 50px;
        margin-bottom: 100px;
        @media screen and (max-width: 767px) {
          width: calc(100% + 20px);
          position: relative;
          left: -10px;
          margin-bottom: 30px;
        }
        p {
          font-family: 'Source Sans Pro';
          font-weight: 600;
          font-size: 24px;
          line-height: 14px;
          text-align: center;
          text-transform: uppercase;
          color: #13294B;
          padding: 20px;
        }
      }
    
      .actions {
        display: flex;
        justify-content: center;
        .btn--primary {
          min-width: 193px;
        }
        @media screen and (max-width: 767px) {
          flex-direction: column;
          align-items: center;
          a {
            margin: 30px auto !important;
            max-width: 200px;
          }
        }
    
      }

      .landing__socials {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        padding: 0 50px;
        margin-top: 100px;
        border-top: 1px solid white;
        @media screen and (max-width: 767px) {
          background-color: #000;
          border: none;
          margin-top: 30px;
          width: calc(100% + 20px);
          position: relative;
          left: -10px;
          text-align: center;
        }

        img {
          transform: scale(.5);
          margin: 0;

          @media screen and (max-width: 767px) {
            transform: scale(.5);
            margin: 0 -23px;
          }

          &:hover {
            mix-blend-mode: overlay;
            @media screen and (max-width: 767px) {
              mix-blend-mode: normal;
            }
          }
        }
      }

      .actions {
        .btn {
          transform: scale(1.4);
          margin: 0 60px;
        }
        .form-product {
          //transform: scale(1.4);
          .gPreorderBtn:hover {
            color: white !important;
          }
        }
      }
    }
    
  }

  #shopify-section-footer {
    display: none;
  }
  .desktop-only {
    display: none;
    @media screen and (min-width: 768px){
      display: block;
    }
  }
  .mobile-only {
    display: none;
    @media screen and (max-width: 767px){
      display: block;
    }
  }

  .form-product {
    
    .form__body, .gPreorderTopMessage, .gPreorderBottomMessage, .product__label, .quantity {
      display: none;
    }
    .form__btn {
      background: transparent !important;
      border: none !important;
    }

    .form__foot {
      margin-top: 0;
    }
  }

  .cart-drawer__head {
    svg {
      pointer-events: none;
    }
  }
  .cart-drawer {
    top: 0;
  }
  .header__nav {
    display: none;
  }
}

.gPreorderPartialPaymentWrapper {
  display: none;
}

.preorder--gateform {
  input[type=email] {
    border: none;
    padding: 10px;
    width: 70%;
    margin: 10px auto;
    display: block;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
  }
}

/* ------------------------------------------------------------ *\
	Custom Fonts
\* ------------------------------------------------------------ */
@font-face {
	font-family: 'SourceSansPro-Regular';
	src: url("{{ 'SourceSansPro-Regular.woff2' | asset_url }}") format("woff2"),
	url("{{ 'SourceSansPro-Regular.woff' | asset_url }}") format("woff");
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SourceSansPro-LightItalic';
	src: url("{{ 'SourceSansPro-LightItalic.woff2' | asset_url }}") format("woff2"),
	url("{{ 'SourceSansPro-LightItalic.woff' | asset_url }}") format("woff");
	font-style: italic;
	font-display: swap;
}                        


/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset)
    var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
    rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width)
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > svg {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* Dialog */
.dialog {
  position: fixed;
  top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     background-color: rgba(30, 35, 44, 0.7); /* 半透明背景 */
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 999; /* 确保在最上层 */
}

.dialog-content {
  display: flex;
     width: 95%;
    height: auto;
  background-color: rgba(255, 255, 255, 1); /* 半透明背景 */
    padding:10px 20px;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative; /* 方便定位关闭按钮 */
border-radius: 10px;
box-sizing: border-box;
}
      /* 自定义按钮样式 */
      .dialog-title {
        margin-top:10px;
       margin-bottom:10px;
      font-family: SourceSansPro-Semibold !important;
      font-weight:normal !important;
      color:rgb(41,48,46);
      text-align: center;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 2px !important;

      }

      .dialog-close-wrap{
        display: flex;
        justify-content: flex-end;
        width:100%;
      }
      .dialog-close-button {
      width: 24px;
      height: 24px;
      background-size: cover;
        cursor:pointer;
        
      }

      .dialog-close-button :hover {
      background-image: url{{ 'float-christmas-close.png' | asset_url }}; /* 设置背景图像 */
      }
      .dialog-image-desktop-img {
        height: 411px;
        width: 1117px;
        cursor:pointer;
    }
 
       .dialog-image-mobile-img{
          height: 580.7px;
         width:100%;
           cursor:pointer;
         
        }
        .dialog-image-desktop-img {
          display: none;
        }
        
        .dialog-image-mobile-img {
          display: none;
        }
        
        /* 媒体查询，用于大屏幕设备（如桌面） */
        @media (min-width: 768px) {
          .dialog-image-desktop-img {
            display: block;
          }
         .dialog-content {
     display: flex;
      width: auto;
      height: auto;
               padding:10px 10px;
          }
          .dialog-close-button {
            margin-right: 0px; /* 靠右 */
             }
        }
        
        /* 媒体查询，用于小屏幕设备（如手机） */
        @media (max-width: 767px) {
          .dialog-image-mobile-img {
            display: block;
          }
          .dialog-content {
     display: flex;
      width: 90%;
             height: auto;
        padding: 10px 6.5px;
          }
           .dialog-close-button {
            margin-right: 8px; /* 靠右 */
             }
        }