#snackys-tpl .to-pdp__compat { display: flex; flex-direction: column; gap: var(--spacing-8, 32px); width: 100%; margin: var(--spacing-8, 32px) 0 0; padding: 0; overflow: visible; color: var(--color-neutral, #242424); } #snackys-tpl .to-pdp__compat--guarantee { position: absolute; z-index: 2; bottom: 0; width: 100%; padding: 0; margin: 0; opacity: 0; pointer-events: none; transform: translateY(28px); transition: opacity .5s ease, transform .5s ease; } #snackys-tpl .to-pdp__compat--guarantee.is-in { opacity: 1; pointer-events: auto; transform: translateY(0); } #snackys-tpl .to-pdp__compat--guarantee.is-below-gallery { position: relative; inset: auto; width: 100%; margin-top: var(--spacing-4, 16px); opacity: 0; transform: none; } #snackys-tpl .to-pdp__compat--guarantee.is-below-gallery.is-in { opacity: 1; pointer-events: auto; transform: none; } #snackys-tpl .to-pdp__compat--guarantee.is-below-gallery:not(.is-in) { display: none; } #snackys-tpl .to-pdp__compat--guarantee[hidden] { display: none; } #snackys-tpl .to-pdp__compat--finder { margin-top: var(--spacing-8, 32px); } #snackys-tpl .to-pdp-support__guarantee { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; overflow: visible; background: transparent; border: 0; } #snackys-tpl .to-pdp-support__tab { position: absolute; z-index: 2; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; overflow: visible; border: 2px solid var(--color-success, #00b831); border-bottom: 0; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; background: var(--color-success-soft); cursor: pointer; appearance: none; transform: translateY(calc(-100% + 2px)); } #snackys-tpl .to-pdp-support__tab::before { content: ""; position: absolute; right: 100%; bottom: 0; width: 15px; height: 15px; pointer-events: none; background-color: var(--color-success, #00b831); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23e5f7ea'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 12px 12px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3Cpath d='M15 0A15 15 0 0 0 0 15' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 15px 15px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M15 0L0 0L0 15A15 15 0 0 1 15 0Z' fill='%23fff'/%3E%3Cpath d='M15 0A15 15 0 0 0 0 15' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: 15px 15px; transform: rotate(180deg); } #snackys-tpl .to-pdp-support__tab svg { display: block; width: 17px; height: 17px; } #snackys-tpl .to-pdp-support__body { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--spacing-6); min-height: 0; padding: var(--spacing-3) var(--spacing-6) var(--spacing-3) 7.5em; overflow: hidden; background: var(--color-success-soft); border: 2px solid var(--color-success, #00b831); border-radius: var(--border-radius-sm) 0 var(--border-radius-sm) var(--border-radius-sm); } #snackys-tpl .to-pdp-support__guarantee.has-no-printer-image .to-pdp-support__body, #snackys-tpl .to-pdp-support__body:not(:has(.to-pdp-support__printer-image)) { padding-left: var(--spacing-6); } #snackys-tpl .to-pdp-support__guarantee-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--spacing-2); width: 100%; } #snackys-tpl .to-pdp-support__guarantee-copy p { margin: 0; color: var(--color-success-text); font-size: 16px; font-weight: var(--font-weight-regular, 400); line-height: var(--lh-paragraph, 1.5); } #snackys-tpl .to-pdp-support__guarantee-copy strong, #snackys-tpl .to-pdp-support__model { color: inherit; font-weight: var(--font-weight-bold, 700); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } #snackys-tpl .to-pdp-support__printer-image { position: absolute; z-index: 2; left: var(--spacing-3); display: block; width: auto; height: auto; max-width: 100px; max-height: 70px; flex: 0 0 auto; object-fit: contain; mix-blend-mode: darken; } #snackys-tpl .to-pdp-support__finder { width: 100%; min-width: 0; } #snackys-tpl .to-pdp-support__finder .to-clp-selector { width: 100%; max-width: none; } #snackys-tpl .to-pdp-support__finder .to-clp-series__item.is-current { background: var(--color-primary-100, #002293); color: var(--color-white) !important; cursor: default; pointer-events: none; } #snackys-tpl .to-pdp-support__finder .to-clp-series__item.is-current .to-clp-series__printer { mix-blend-mode: normal; } #snackys-tpl .to-pdp-support__finder .to-clp-series__item.is-current:hover, #snackys-tpl .to-pdp-support__finder .to-clp-series__item.is-current:focus { background: var(--color-primary-100, #002293); } #snackys-tpl .to-pdp-support__finder .to-clp-series__check[hidden], #snackys-tpl .to-pdp-support__finder .to-clp-series__arrow[hidden] { display: none !important; } #snackys-tpl .to-pdp-support__finder .to-clp-series__check { display: flex; flex: 0 0 25px; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: var(--color-white); } #snackys-tpl .to-pdp-support__finder .to-clp-series__check svg { display: block; width: 16px; height: 16px; stroke-width: 2.5; } @media (prefers-reduced-motion: reduce) { #snackys-tpl .to-pdp__compat--guarantee { opacity: 1; transform: none; transition: none; } } @media (max-width: 767px) { #snackys-tpl .to-pdp__compat--guarantee { bottom: 0; padding: 0; } #snackys-tpl .to-pdp-support__printer-image { display: none; } #snackys-tpl .to-pdp-support__lead { display: none; } #snackys-tpl .to-pdp-support__body { padding: var(--spacing-3); } }