.how-to-use{--htu-bg: var(--color-background, #ffffff);--htu-ink: var(--color-headings-text, #111111);--htu-stone: #b5b3b0;--htu-pill-bg: #ffffff;--htu-gap: 10px;--htu-radius: 5px;--htu-pill-radius: 4px;--htu-collapsed-width: 220px;--htu-panel-height: 644px;--htu-mobile-collapsed-height: 96px;--htu-mobile-open-height: 520px;--htu-transition-duration: .5s;--htu-transition-easing: cubic-bezier(.4, 0, .2, 1);background:var(--htu-bg);color:var(--htu-ink)}.how-to-use__header{max-width:var(--site-max-width, 1600px);padding-left:calc(var(--gap, 8px) * 2);padding-right:calc(var(--gap, 8px) * 2);margin:0 auto 24px;box-sizing:border-box}@media(min-width:1200px){.how-to-use__header{padding-left:calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));padding-right:calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2))}}@media(min-width:1800px){.how-to-use__header{max-width:var(--site-max-width-big, 1600px)}}.how-to-use__heading{font-family:BentonModDisp,serif;font-weight:400;font-size:30px;line-height:24px;margin:0}.how-to-use__panels{display:flex;align-items:stretch;gap:var(--htu-gap);max-width:var(--site-max-width, 1600px);padding-left:calc(var(--gap, 8px) * 2);padding-right:calc(var(--gap, 8px) * 2);margin:0 auto;box-sizing:border-box}@media(min-width:1200px){.how-to-use__panels{padding-left:calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));padding-right:calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2))}}@media(min-width:1800px){.how-to-use__panels{max-width:var(--site-max-width-big, 1600px)}}.how-to-use__panel{position:relative;border-radius:var(--htu-radius);overflow:hidden;background:var(--htu-stone);height:var(--htu-panel-height);flex-grow:0;flex-shrink:0;transition:flex-basis var(--htu-transition-duration) var(--htu-transition-easing)}.how-to-use__panel.is-collapsed{flex-basis:var(--htu-collapsed-width)}.how-to-use__panel.is-open{flex-basis:calc(100% - (var(--htu-panel-count, 3) - 1) * (var(--htu-collapsed-width) + var(--htu-gap)))}.how-to-use__media{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:block;width:100%;height:100%}.how-to-use__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:none}.how-to-use__image--placeholder{display:none;align-items:center;justify-content:center;background:var(--htu-stone)}.how-to-use__placeholder-svg{width:100%;height:100%;opacity:.5}.how-to-use__panel.is-open .how-to-use__image--open,.how-to-use__panel.is-open .how-to-use__image--open.how-to-use__image--placeholder,.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-desktop,.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-desktop.how-to-use__image--placeholder{display:block}.how-to-use__toggle{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:var(--htu-pill-radius);background:var(--htu-pill-bg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--htu-ink);cursor:pointer;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:18px;white-space:nowrap}.how-to-use__toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;flex-shrink:0}.how-to-use__toggle-icon .icon-plus,.how-to-use__toggle-icon .icon-minus{display:none}.how-to-use__panel.is-collapsed .how-to-use__toggle-icon .icon-plus,.how-to-use__panel.is-open .how-to-use__toggle-icon .icon-minus{display:block}.how-to-use__content{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;background:var(--htu-bg);border-radius:var(--htu-radius);padding:24px 24px 20px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s}.how-to-use__content-text{min-width:0;flex:1 1 auto}.how-to-use__panel.is-open .how-to-use__content{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.15s}.how-to-use__title{font-family:BentonModDisp,serif;font-weight:400;font-size:24px;line-height:26px;margin:0 0 8px}.how-to-use__description{font-family:Inter,sans-serif;font-weight:300;font-size:14px;line-height:18px;margin:0;max-width:480px}.how-to-use__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:var(--htu-ink);font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:18px;text-decoration:none;white-space:nowrap}.how-to-use__cta span{text-decoration:underline;text-underline-offset:2px}.how-to-use__cta-arrow{flex-shrink:0;height:16px;width:auto}@media screen and (max-width:749px){.how-to-use__panels{flex-direction:column}.how-to-use__panel{height:var(--htu-mobile-collapsed-height);width:100%;transition:height var(--htu-transition-duration) var(--htu-transition-easing)}.how-to-use__panel.is-collapsed{flex:0 0 auto;width:100%;height:var(--htu-mobile-collapsed-height)}.how-to-use__panel.is-open{flex:0 0 auto;width:100%;height:var(--htu-mobile-open-height)}.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-desktop,.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-desktop.how-to-use__image--placeholder{display:none}.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-mobile,.how-to-use__panel.is-collapsed .how-to-use__image--collapsed-mobile.how-to-use__image--placeholder{display:block}.how-to-use__content{left:8px;right:8px;bottom:8px;padding:18px 18px 16px;flex-direction:column;align-items:flex-start;gap:12px}.how-to-use__title{font-size:20px;line-height:22px}}@media screen and (min-width:750px){.how-to-use__image--collapsed-mobile{display:none!important}}@media(prefers-reduced-motion:reduce){.how-to-use__panel,.how-to-use__content{transition-duration:1ms!important}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/gene-how-to-use.css.map */