#snackys-tpl .to-related-printers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8); width: 100%; margin: var(--spacing-16) 0 var(--spacing-20); color: var(--color-primary-100); font-family: var(--font-family-base); } #snackys-tpl .to-related-printers__guarantee, #snackys-tpl .to-related-printers__finder { min-width: 0; height: 336px; border-radius: var(--border-radius-md); } #snackys-tpl .to-related-printers__guarantee { position: relative; display: grid; grid-template-columns: minmax(190px, 35%) minmax(0, 1fr); overflow: hidden; background: var(--color-tertiary-50); border: 1px solid var(--color-tertiary-100); } #snackys-tpl .to-related-printers__seal { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: repeating-radial-gradient(circle at center, transparent 0 42px, rgba(0, 34, 147, .08) 43px 44px), linear-gradient(90deg, var(--color-tertiary-50) 0%, var(--color-tertiary-50) 100%); } #snackys-tpl .to-related-printers__seal img { position: relative; z-index: 1; display: block; width: min(210px, 86%); height: auto !important; filter: grayscale(1); } #snackys-tpl .to-related-printers__copy { align-self: center; padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-3); } #snackys-tpl .to-related-printers__copy h2, #snackys-tpl .to-related-printers__tab { color: var(--color-primary-100); font-family: var(--font-family-base); font-weight: var(--font-weight-bold); line-height: var(--lh-heading); } #snackys-tpl .to-related-printers__copy h2 { margin: 0 0 var(--spacing-3); font-size: var(--font-size-h4); } #snackys-tpl .to-related-printers__copy p { margin: 0 0 var(--spacing-4); color: var(--color-primary-100); font-size: var(--font-size-normal); line-height: 1.4; } #snackys-tpl .to-related-printers__copy p:last-child { margin-bottom: 0; } #snackys-tpl .to-related-printers__copy strong { color: inherit; } #snackys-tpl .to-related-printers__finder { position: relative; padding-top: 44px; } #snackys-tpl .to-related-printers__tab { position: absolute; z-index: 2; top: 0; left: 0; min-width: 210px; height: 45px; margin: 0; padding: var(--spacing-3) var(--spacing-6); font-size: var(--font-size-h6); background: var(--color-white); border: 2px solid var(--color-tertiary-50); border-bottom: 0; border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } #snackys-tpl .to-related-printers__finder-body { display: flex; height: 292px; min-height: 0; flex-direction: column; padding: var(--spacing-6); background: var(--color-white); border: 2px solid var(--color-tertiary-50); border-radius: 0 var(--border-radius-md) var(--border-radius-md) var(--border-radius-md); } #snackys-tpl .to-related-printers__search { position: relative; flex: 0 0 auto; margin-bottom: var(--spacing-6); } #snackys-tpl .to-related-printers__search input { width: 100%; height: 42px; margin: 0; padding: 8px 48px 8px 14px; color: var(--color-primary-100); font-family: var(--font-family-base); font-size: var(--font-size-normal); background: var(--color-white); border: 2px solid var(--color-tertiary-50); border-radius: var(--border-radius-sm); outline: 0; } #snackys-tpl .to-related-printers__search input:focus { border-color: var(--color-primary-100); box-shadow: 0 0 0 3px rgba(0, 34, 147, .12); } #snackys-tpl .to-related-printers__search input::placeholder { color: var(--color-primary-75); opacity: 1; } #snackys-tpl .to-related-printers__search-icon { position: absolute; top: 50%; right: 17px; width: 17px; height: 17px; border: 3px solid var(--color-primary-100); border-radius: 50%; pointer-events: none; transform: translateY(-58%); } #snackys-tpl .to-related-printers__search-icon::after { position: absolute; right: -6px; bottom: -4px; width: 8px; height: 3px; background: var(--color-primary-100); border-radius: 2px; content: ''; transform: rotate(45deg); transform-origin: center; } #snackys-tpl .to-related-printers__list { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: var(--spacing-3); padding-right: var(--spacing-3); overflow-y: auto; scrollbar-color: var(--color-primary-100) var(--color-tertiary-50); scrollbar-width: thin; } #snackys-tpl .to-related-printers__list::-webkit-scrollbar { width: 8px; } #snackys-tpl .to-related-printers__list::-webkit-scrollbar-track { background: var(--color-tertiary-50); border-radius: 8px; } #snackys-tpl .to-related-printers__list::-webkit-scrollbar-thumb { background: var(--color-primary-100); border-radius: 8px; } #snackys-tpl .to-related-printers__item { display: flex; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding: 8px 12px; color: var(--color-primary-100) !important; font-size: var(--font-size-normal); line-height: 1.25; text-decoration: none !important; background: var(--color-white); border: 2px solid var(--color-primary-100); border-radius: var(--border-radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } #snackys-tpl .to-related-printers__item:hover, #snackys-tpl .to-related-printers__item:focus-visible { color: var(--color-white) !important; background: var(--color-primary-100); } #snackys-tpl .to-related-printers__item[hidden], #snackys-tpl .to-related-printers__empty[hidden] { display: none; } #snackys-tpl .to-related-printers__arrow { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; font-size: 18px; line-height: 1; border: 2px solid currentColor; border-radius: 50%; } #snackys-tpl .to-related-printers__empty { margin: 0; padding: var(--spacing-6) var(--spacing-3); color: var(--color-primary-75); text-align: center; } @media (max-width: 1399px) { #snackys-tpl .to-related-printers { gap: var(--spacing-6); } #snackys-tpl .to-related-printers__guarantee, #snackys-tpl .to-related-printers__finder { height: 392px; } #snackys-tpl .to-related-printers__finder-body { height: 348px; } } @media (max-width: 1199px) { #snackys-tpl .to-related-printers { grid-template-columns: minmax(0, 1fr); } #snackys-tpl .to-related-printers__guarantee { grid-template-columns: 170px minmax(0, 1fr); } #snackys-tpl .to-related-printers__guarantee, #snackys-tpl .to-related-printers__finder { height: auto; min-height: 320px; } #snackys-tpl .to-related-printers__finder-body { height: 320px; } #snackys-tpl .to-related-printers__copy { padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) var(--spacing-3); } #snackys-tpl .to-related-printers__copy h2 { font-size: var(--font-size-h5); } #snackys-tpl .to-related-printers__copy p { font-size: .9375rem; } } @media (max-width: 575px) { #snackys-tpl .to-related-printers { gap: var(--spacing-8); margin: var(--spacing-12) 0 var(--spacing-16); } #snackys-tpl .to-related-printers__guarantee { display: block; } #snackys-tpl .to-related-printers__seal { height: 190px; } #snackys-tpl .to-related-printers__seal img { width: 150px; } #snackys-tpl .to-related-printers__copy { padding: var(--spacing-6); } #snackys-tpl .to-related-printers__copy h2 { font-size: var(--font-size-h5); } #snackys-tpl .to-related-printers__finder-body { padding: var(--spacing-4); } #snackys-tpl .to-related-printers__tab { min-width: 190px; padding-right: var(--spacing-4); padding-left: var(--spacing-4); } } /**/ #snackys-tpl .to-related-printers--series { display: block !important; grid-column: 1 / -1; width: 100%; max-width: none; margin: var(--spacing-12) 0 var(--spacing-20); } #snackys-tpl .to-related-printers--series .to-clp-selector { max-width: none; } #snackys-tpl .to-related-printers--series .to-clp-selector__tab { margin: 0; } #snackys-tpl .to-related-printers--series .to-clp-series { grid-template-columns: repeat(2, minmax(0, 1fr)); } #snackys-tpl .to-related-printers--series .to-clp-series__item { min-width: 0; } #snackys-tpl .to-related-printers--series .to-clp-series__empty { grid-column: 1 / -1; } @media (min-width: 768px) { #snackys-tpl .to-related-printers--series .to-clp-series { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { #snackys-tpl .to-related-printers--series .to-clp-series { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 575px) { #snackys-tpl .to-related-printers--series { margin-top: var(--spacing-8); } }