.hero-toggle-icons{--toggle-switch-bg-color: var(--toggle-switch-bg-color);--toggle-active-text-color: var(--toggle-active-text-color);--toggle-1-bg: var(--toggle-1-bg);--toggle-2-bg: var(--toggle-2-bg);--toggle-1-inactive: var(--toggle-1-inactive);--toggle-2-inactive: var(--toggle-2-inactive);--overlay-color: var(--overlay-color);position:relative;display:flex;align-items:center;justify-content:center;width:100%;color:#fff;background-color:var(--background-color)}@media (min-width: 768px){.hero-toggle-icons{min-height:var(--desktop-height);margin:var(--section-margin-top) 0 var(--section-margin-bottom);padding:var(--section-padding-top-desktop) 0 var(--section-padding-bottom-desktop)}}@media (max-width: 767px){.hero-toggle-icons{min-height:var(--mobile-height);padding:var(--section-padding-top-mobile) 0 var(--section-padding-bottom-mobile)}}.hero-toggle-icons:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-color);pointer-events:none;z-index:1}.hero-toggle-icons .hero-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}@media (min-width: 768px){.hero-toggle-icons .mobile-video{display:none}}@media (max-width: 767px){.hero-toggle-icons .desktop-video{display:none}}.hero-toggle-icons[data-bg-image]{background:var(--bg-image) center/cover no-repeat}@media (max-width: 767px){.hero-toggle-icons[data-mobile-bg-image]{background-image:var(--mobile-bg-image)}}.hero-toggle-icons .inner-content{position:relative;z-index:2;max-width:1400px;width:100%;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}.hero-toggle-icons .heading-text{font-size:var(--heading-size-desktop);font-weight:var(--heading-weight);color:var(--heading-color);line-height:1.1}.hero-toggle-icons .subheading-text{font-size:var(--subheading-size-desktop);font-weight:var(--subheading-weight);color:var(--subheading-color)}@media (max-width: 767px){.hero-toggle-icons .heading-text{font-size:var(--heading-size-mobile)!important;max-width:26rem;white-space:normal}.hero-toggle-icons .subheading-text{font-size:var(--subheading-size-mobile)!important}}@media (min-width: 768px){.hero-toggle-icons .heading-text{white-space:nowrap}}.hero-toggle-icons.outline-toggle .toggle-switch{background:transparent;border:2.75px solid var(--toggle-switch-bg-color)}.hero-toggle-icons .paint-radio{position:absolute;opacity:0;width:0;height:0;margin:0}.hero-toggle-icons .toggle-switch{display:grid;grid-template-columns:repeat(2,1fr);position:relative;border-radius:50px;width:30rem;max-width:100%;background:var(--toggle-switch-bg-color);overflow:visible}@media (max-width: 767px){.hero-toggle-icons .toggle-switch{width:26rem}}.hero-toggle-icons .toggle-option{padding:.75rem 1.5rem;font-weight:700;cursor:pointer;text-align:center;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;overflow:visible;color:var(--toggle-1-inactive);transition:color .2s ease-in-out}.hero-toggle-icons .toggle-option[data-value=permanent]{color:var(--toggle-2-inactive)}.hero-toggle-icons .toggle-option.active{color:var(--toggle-active-text-color)}.hero-toggle-icons .toggle-option:active{transform:scale(.98)}@media (max-width: 767px){.hero-toggle-icons .toggle-option{font-size:14px}}@supports (mask: url()) or (-webkit-mask: url()){.hero-toggle-icons .toggle-option:before{content:"";position:absolute;top:-16px;left:50%;transform:translate(-50%);width:22px;height:14px;opacity:0;pointer-events:none;z-index:3;transition:opacity .18s ease;background-color:transparent;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14">  <path d="M11 14c-.6 0-1.2-.2-1.7-.6L2.4 4.2A2.2 2.2 0 0 1 3.9 0h14.2a2.2 2.2 0 0 1 1.5 4.2l-6.9 9.2c-.5.4-1.1.6-1.7.6Z"/></svg>') center / contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14">  <path d="M11 14c-.6 0-1.2-.2-1.7-.6L2.4 4.2A2.2 2.2 0 0 1 3.9 0h14.2a2.2 2.2 0 0 1 1.5 4.2l-6.9 9.2c-.5.4-1.1.6-1.7.6Z"/></svg>') center / contain no-repeat;border:none}.hero-toggle-icons .toggle-option.active:before{opacity:1}.hero-toggle-icons .toggle-option[data-value=peelable].active:before{background-color:var(--toggle-1-bg)}.hero-toggle-icons .toggle-option[data-value=permanent].active:before{background-color:var(--toggle-2-bg)}}@supports not (mask: url()) and not (-webkit-mask: url()){.hero-toggle-icons .toggle-option:before{content:"";position:absolute;top:-14px;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:11px solid transparent;opacity:0;transition:opacity .18s ease;pointer-events:none;z-index:3}.hero-toggle-icons .toggle-option.active:before{opacity:1}.hero-toggle-icons .toggle-option[data-value=peelable].active:before{border-bottom-color:var(--toggle-1-bg)}.hero-toggle-icons .toggle-option[data-value=permanent].active:before{border-bottom-color:var(--toggle-2-bg)}}.hero-toggle-icons .toggle-indicator{position:absolute;top:0;right:50%;bottom:0;left:0;border-radius:50px;z-index:0;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1)!important}.paint-radio[value=peelable]:checked~.toggle-switch .toggle-indicator{transform:translate(0);background:var(--toggle-1-bg)}.paint-radio[value=permanent]:checked~.toggle-switch .toggle-indicator{transform:translate(100%);background:var(--toggle-2-bg)}.paint-radio[value=peelable]:checked~.toggle-switch .toggle-indicator,.paint-radio[value=permanent]:checked~.toggle-switch .toggle-indicator{animation:none!important}.hero-toggle-icons .toggle-switch.dragging{cursor:grabbing}.hero-toggle-icons .toggle-switch.dragging .toggle-indicator{transition:none!important;animation-play-state:paused}.hero-toggle-icons .icon-grid{width:100%;margin-top:.75rem;position:relative;overflow:visible}.hero-toggle-icons .icon-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.5rem;justify-items:center;list-style:none;margin:0;padding:0}@media (min-width: 768px) and (max-width: 1199px){.hero-toggle-icons .icon-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}}@media (max-width: 767px){.hero-toggle-icons .icon-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}.hero-toggle-icons .icon-list.hidden{opacity:0;pointer-events:none;position:absolute;left:-999rem;transition:opacity .25s ease}.hero-toggle-icons .icon-item{display:flex;flex-direction:column;align-items:center;text-align:-webkit-center;gap:1rem;height:100%;transition-delay:calc(var(--stagger,0)*.05s)}.hero-toggle-icons .icon-item a{text-decoration:none;color:inherit}.hero-toggle-icons .image-wrapper{position:relative;width:10rem;aspect-ratio:1/1}@media (min-width: 768px) and (max-width: 1199px){.hero-toggle-icons .image-wrapper{width:8rem}}@media (max-width: 767px){.hero-toggle-icons .image-wrapper{width:6rem}}.hero-toggle-icons .icon-item img{width:100%;height:100%;object-fit:contain}.hero-toggle-icons .icon-item span{font-family:Montserrat,sans-serif;font-weight:700;font-size:1rem;line-height:1.25;letter-spacing:.02em;color:#2a2a2a;word-break:break-word;width:100%}.hero-toggle-icons .image-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#ffffff14;transform:scale(.9);transition:transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none}.hero-toggle-icons .icon-item:hover .image-wrapper:after{transform:scale(.8)}.hero-toggle-icons .icon-grid:after{content:"";position:absolute;bottom:-24px;left:50%;transform:translate(-50%);width:50%;height:3px;border-radius:70px;pointer-events:none;transition:background-color .3s ease}.hero-toggle-icons .icon-grid[data-active=peelable]:after{background-color:var(--toggle-1-bg)}.hero-toggle-icons .icon-grid[data-active=permanent]:after{background-color:var(--toggle-2-bg)}.hero-toggle-icons .hero-bullets{list-style:none;display:flex;gap:3rem;flex-wrap:wrap;justify-content:center;margin:2rem 0 0;padding:0}@media (max-width: 767px){.hero-toggle-icons .hero-bullets{gap:1.5rem 3rem}}.hero-toggle-icons,.hero-toggle-icons .icon-grid{content-visibility:auto;contain-intrinsic-size:800px}.hero-toggle-icons .inner-content,.hero-toggle-icons .icon-grid{contain:layout paint}.hero-toggle-icons .toggle-indicator{will-change:transform}@media (prefers-reduced-motion: reduce){.hero-toggle-icons *{animation:none!important;transition:none!important}}.hero-toggle-icons .image-wrapper:after{content:none!important}.hero-toggle-icons .icon-item:hover .image-wrapper:after{transform:none!important}
/*# sourceMappingURL=/cdn/shop/t/205/assets/hero-toggle-icons.css.map */