.explainer-video{display:block;width:100%}.explainer-video__frame{position:relative;width:100%;aspect-ratio:var(--explainer-video-ratio, 1 / 1);background:#f1f1ef}.explainer-video video,.explainer-video__poster{display:block;width:100%;height:100%;object-fit:contain}.explainer-video__toggle{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#1c1c1c;cursor:pointer;box-shadow:0 1px 4px #0003}.explainer-video [hidden]{display:none}.explainer-video__toggle:focus-visible{outline:3px solid #1c1c1c;outline-offset:3px}.explainer-video__toggle svg{width:20px;height:20px}.explainer-video__icon-pause,.explainer-video[playing] .explainer-video__icon-play{display:none}.explainer-video[playing] .explainer-video__icon-pause{display:block}.explainer-video__caption,.explainer-video__error{padding:12px 16px;margin:0;color:#1c1c1c;background:#f1f1ef;font-size:1rem;line-height:1.5}.explainer-video__placeholder{position:absolute;inset-block-end:0;padding:12px;margin:0;background:#fffffff2;color:#1c1c1c;width:100%;text-align:center}.citytins-restaurant-preview{display:none;width:100%}.citytins-restaurant-preview img{display:block;width:100%;height:auto}.product-gallery--explainer .product-gallery__thumbnail-list{position:relative;top:0!important}@media(min-width:1000px){.citytins-restaurant-preview{display:block}.product-gallery--explainer:has(.product-gallery__thumbnail[data-media-position="2"][aria-current=true]) .citytins-restaurant-preview{display:none}}.citytins-how-it-works{padding-block:48px}.citytins-how-it-works__panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.citytins-how-it-works__photo{position:relative;background:#f4f4f4}.citytins-how-it-works__photo img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover}.citytins-how-it-works__video .explainer-video{display:flex;flex-direction:column;height:100%}.citytins-how-it-works__video .explainer-video__frame{aspect-ratio:4 / 5;background:#262a28;flex:1}.citytins-how-it-works__copy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px 28px;background:#f4f4f4;text-align:center}.citytins-how-it-works__copy>*{margin:0}.citytins-how-it-works__eyebrow,.citytins-how-it-works__link{font-family:var(--heading-font-family);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}.citytins-how-it-works__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-block-start:32px;list-style:none;counter-reset:steps}.citytins-how-it-works__steps li{counter-increment:steps}.citytins-how-it-works__steps li:before{content:counter(steps,decimal-leading-zero);display:block;margin-block-end:12px;font-size:1.5rem}.citytins-how-it-works__steps h3{margin-block-end:12px}@media(max-width:999px){.citytins-how-it-works__panels{grid-template-columns:repeat(2,minmax(0,1fr))}.citytins-how-it-works__photo{display:none}}@media(max-width:699px){.citytins-how-it-works{padding-block:32px}.citytins-how-it-works__panels{grid-template-columns:minmax(0,1fr);gap:0;width:100%;max-width:none;margin-inline:0;padding-inline:0}.citytins-how-it-works__video .explainer-video__frame{aspect-ratio:1 / 1}.citytins-how-it-works__steps{grid-template-columns:minmax(0,1fr);gap:24px}}.product-gallery__media>video-media.citytins-media-frame{aspect-ratio:var(--citytins-media-ratio, 1 / 1);background:#f1f1ef}.product-gallery__media>video-media.citytins-media-frame>video,.product-gallery__media>video-media.citytins-media-frame>img{object-fit:contain}.product-gallery--fit-cover .product-gallery__media>video-media.citytins-media-frame>video,.product-gallery--fit-cover .product-gallery__media>video-media.citytins-media-frame>img,.product-gallery--fit-cover .explainer-video video,.product-gallery--fit-cover .explainer-video__poster,.citytins-how-it-works--fit-cover .explainer-video video,.citytins-how-it-works--fit-cover .explainer-video__poster{object-fit:cover}
/*# sourceMappingURL=/cdn/shop/t/20/assets/gallery-explainer-video.css.map */
