.ingredients{padding-block:var(--ingredients-padding-top, 40px) var(--ingredients-padding-bottom, 40px);background:var(--yope-color-white);color:var(--yope-color-brown)}.ingredients__inner{display:flex;flex-direction:column;gap:40px;grid-column:1 / -1;padding-inline:12px}.ingredients__header{padding-block:22px;border-block-end:1px solid var(--yope-color-grey-3)}.ingredients__tagline{margin:0;color:var(--yope-color-grey-5);text-transform:uppercase}.ingredients__intro{display:flex;flex-direction:column;gap:18px}.ingredients__heading{margin:0;color:inherit}.ingredients__text{max-width:634px}.ingredients__text p{margin:0}.ingredients__text>*+*{margin-block-start:1em}.ingredients__body{display:flex;flex-direction:column;gap:21px}.ingredients__toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px}.ingredients__tabs{display:flex;flex-wrap:wrap;align-items:center;gap:17px}.ingredients__separator{color:var(--yope-color-grey-5)}.ingredients__tab{padding:0;border:0;background:none;color:var(--yope-color-grey-5);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;cursor:pointer;transition:color var(--animation-speed, .2s) var(--animation-easing, ease),text-decoration-color var(--animation-speed, .2s) var(--animation-easing, ease)}.ingredients__tab:hover,.ingredients__tab.is-active{color:var(--yope-color-brown)}.ingredients__tab.is-active{text-decoration-color:currentcolor}.ingredients__button{flex-shrink:0;text-transform:uppercase}.ingredients__media{position:relative;aspect-ratio:1416 / 720;overflow:hidden;border-radius:2px;background:#e8e8e8}.ingredients__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.ingredients__hotspot{--point-size: 70px;position:absolute;top:clamp(var(--point-size) / 2,var(--y),100% - var(--point-size) / 2);left:clamp(var(--point-size) / 2,var(--x),100% - var(--point-size) / 2);width:var(--point-size);height:var(--point-size);translate:-50% -50%}.ingredients__hotspot.is-active{z-index:1}.ingredients__point{position:relative;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:#ffffff80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;transition:background-color var(--animation-speed, .2s) var(--animation-easing, ease)}.ingredients__point:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:43%;height:43%;margin:auto;border-radius:50%;background:var(--yope-color-white)}.ingredients__point:hover{background:#fffc}.ingredients__hotspot.is-active .ingredients__point{background:var(--yope-color-grey-4)}.ingredients__card{position:absolute;top:50%;left:calc(100% + 16px);display:flex;flex-direction:column;gap:16px;width:max-content;max-width:440px;padding:12px;border:0;background:#fff9;-webkit-backdrop-filter:blur(21px);backdrop-filter:blur(21px);color:var(--yope-color-brown);text-align:start;translate:0 -50%;cursor:pointer}.ingredients__hotspot--flipped .ingredients__card{right:calc(100% + 16px);left:auto}.ingredients__card-description{display:none}.ingredients__hotspot.is-active .ingredients__card{width:440px}.ingredients__hotspot.is-active .ingredients__card-description{display:block}.ingredients__descriptions{display:none}.ingredients__description{margin:0}.ingredients-modal{position:fixed;inset:0 0 0 auto;width:539px;max-width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow-y:auto;overscroll-behavior:contain;background:var(--yope-color-white);color:var(--yope-color-brown)}.ingredients-modal[open]{animation:ingredients-modal-in var(--animation-speed, .3s) var(--animation-easing, ease) both}.ingredients-modal.is-closing{animation:ingredients-modal-out var(--animation-speed, .3s) var(--animation-easing, ease) both}.ingredients-modal::backdrop{background:#21212199;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}html:has(.ingredients-modal[open]){overflow:hidden}@keyframes ingredients-modal-in{0%{translate:100% 0}}@keyframes ingredients-modal-out{to{translate:100% 0}}.ingredients-modal__header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px;border-block-end:1px solid var(--yope-color-grey-2);background:inherit}.ingredients-modal__title{margin:0;font-family:var(--yope-heading-font-family);font-size:var(--body-l--font-size);font-weight:var(--yope-font-weight-medium);line-height:var(--body--line-height);color:inherit}.ingredients-modal__close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;color:inherit;cursor:pointer}.ingredients-modal__close svg{width:16px;height:16px}.ingredients-modal__list{display:flex;flex-direction:column;gap:40px;margin:0;padding:20px 32px;list-style:none}.ingredients-modal__item{display:flex;flex-direction:column;gap:6px}.ingredients-modal__name,.ingredients-modal__description{margin:0}@media screen and (max-width:749px){.ingredients{padding-block:var(--ingredients-padding-top-mobile, 0) var(--ingredients-padding-bottom-mobile, 16px)}.ingredients__inner{gap:16px;padding-inline:0}.ingredients__header{margin-inline:12px;padding-block:16px}.ingredients__tagline.body-m{font-size:var(--body-s--font-size)}.ingredients__intro{gap:19px;padding-inline:12px}.ingredients__text.body-m{max-width:none;font-size:var(--body-s--font-size)}.ingredients__body{gap:24px}.ingredients__toolbar{display:contents}.ingredients__media{order:1;aspect-ratio:360 / 221;border-radius:0}.ingredients__tabs{order:2;flex-wrap:nowrap;gap:8px;margin-block-end:-4px;padding-inline:12px;overflow-x:auto;scrollbar-width:none}.ingredients__tabs::-webkit-scrollbar{display:none}.ingredients__separator{display:none}.ingredients__tab.body-m{flex-shrink:0;padding:3px 8px;border:1px solid var(--yope-color-grey-3);font-size:var(--body-s--font-size);color:var(--yope-color-brown);text-decoration:none;white-space:nowrap}.ingredients__tab.body-m.is-active{border-color:var(--yope-color-brown)}.ingredients__descriptions{display:block;order:3;padding-inline:12px}.ingredients__button{order:4;margin-inline:12px}.ingredients__hotspot{--point-size: 32px}.ingredients__card{display:none}.ingredients-modal{width:100%}.ingredients-modal__header,.ingredients-modal__list{padding:20px 16px}}@media(prefers-reduced-motion:reduce){.ingredients-modal[open],.ingredients-modal.is-closing{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/ingredients.css.map */