[xo-pfs]{--pfs-min: 10;--pfs-max: 60;--min-viewport: 40;--max-viewport: 120;--m: (var(--pfs-max) - var(--pfs-min)) / (var(--max-viewport) - var(--min-viewport));--size: clamp( calc(var(--pfs-min) * 1rem), calc( var(--m) * 100vw + var(--pfs-min) * 1rem - var(--m) * var(--min-viewport) * 1rem ), calc(var(--pfs-max) * 1rem) )}.best-before-text svg{display:block}.best-before-text span{padding-top:2px}@media (min-width: 768px){.best-before-text{transform:none;bottom:2rem;position:absolute;right:var(--xo-container-gap);bottom:50%;transform:translateY(50%)}}.best-before-text__btn{display:flex;align-items:center;justify-content:center;gap:4px;background:#f1f1f1;min-height:3rem;min-width:9rem;color:var(--Black, #000);font-size:18px;line-height:22px;letter-spacing:-.36px;cursor:pointer}.best-before-text__btn:hover~.best-before-text__wrapper{pointer-events:all}.best-before-text__btn:hover~.best-before-text__wrapper .best-before-text__inner{transform:translate(0)}.best-before-text__btn--sm{font-size:16px;line-height:20px;letter-spacing:-.32px}.best-before-text__wrapper{position:absolute;width:100%;height:100%;right:0;bottom:0;overflow:hidden;pointer-events:none}.best-before-text__wrapper:hover,.best-before-text__wrapper[xo-active]:not([xo-active=false]),.best-before-text__wrapper.best-before-text__wrapper--active{pointer-events:all}.best-before-text__wrapper:hover .best-before-text__inner,.best-before-text__wrapper[xo-active]:not([xo-active=false]) .best-before-text__inner,.best-before-text__wrapper.best-before-text__wrapper--active .best-before-text__inner{transform:translate(0)}@media (min-width: 768px){.best-before-text__wrapper{right:0;bottom:0;width:270px;height:auto}}.best-before-text__inner{display:flex;align-items:center;gap:3rem;background:linear-gradient(90deg,#e8e8e8,#c9c9c9 7%,#e2e2e2 19%,#f1f1f1 27% 100%);padding:1rem 1.2rem;transition:.3s;height:100%;transform:translateY(100%)}@media (min-width: 768px){.best-before-text__inner{gap:4px;flex-direction:column;transform:translate(100%,100%);background:#f1f1f1}}.best-before-text__header{color:var(--Black, #000);text-align:center;font-size:18px;line-height:22px;letter-spacing:-.36px;display:flex;align-items:center;gap:4px}@media (min-width: 768px){.best-before-text__header{justify-content:center}}.best-before-text__body{color:#000;font-size:14px;line-height:18px;letter-spacing:-.28px;text-align:center}.best-before-text__body a{text-decoration:underline;transition:.3s}.best-before-text__body a:hover{color:var(--color-branding)}
/*# sourceMappingURL=/cdn/shop/t/3/assets/best-before-text.css.map */