/**/ #snackys-tpl .wi-marketing-topbar { display: none !important; } #snackys-tpl .to-promo-bar[hidden] { display: none; } #snackys-tpl .to-promo-bar { position: relative; z-index: 19; display: grid; place-items: center; width: 100%; min-height: 54px; overflow: hidden; border: 0; background-color: var(--color-tertiary-50); background-image: var(--to-promo-bar-image); background-repeat: no-repeat; background-position: center; background-size: cover; color: var(--color-primary-100); font-family: var(--font-family-base); } #snackys-tpl .to-promo-bar::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 2px; background: linear-gradient( 90deg, #00aeef 0 58%, var(--color-danger) 58% 76%, var(--color-warning) 76% 100% ); content: ""; } #snackys-tpl .to-promo-bar__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: min(100%, 980px); min-height: 54px; margin: 0 auto; padding: 7px var(--spacing-4) 9px; text-align: center; } #snackys-tpl .to-promo-bar__content > *, #snackys-tpl .to-promo-bar__content p { margin-top: 0; margin-bottom: 0; } #snackys-tpl .to-promo-bar__message, #snackys-tpl .to-promo-bar__content .to-promo-bar__message { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); width: 100%; margin: 0; color: var(--color-primary-100); font-size: 18px; font-weight: var(--font-weight-regular); line-height: 1.15; text-transform: uppercase; } #snackys-tpl .to-promo-bar__message strong { color: inherit; font-weight: var(--font-weight-bold); } #snackys-tpl .to-promo-bar__marketing-content a, #snackys-tpl .to-promo-bar__marketing-content a:visited { color: inherit; text-decoration: underline; } #snackys-tpl .to-promo-bar__marketing-content a:hover, #snackys-tpl .to-promo-bar__marketing-content a:focus { color: inherit; text-decoration-thickness: 2px; } #snackys-tpl .to-promo-bar__code, #snackys-tpl a.to-promo-bar__code, #snackys-tpl a.to-promo-bar__code:visited { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 34px; padding: 5px 16px; border-radius: var(--border-radius-sm); background: var(--color-danger); color: var(--color-white); font-size: 17px; font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none; text-transform: uppercase; } #snackys-tpl a.to-promo-bar__code:hover, #snackys-tpl a.to-promo-bar__code:focus { background: var(--color-danger-hover); color: var(--color-white); } @media (max-width: 767px) { #snackys-tpl .to-promo-bar { min-height: 58px; background-position: center; background-size: auto 58px; } #snackys-tpl .to-promo-bar__content { min-height: 58px; padding: 6px var(--spacing-3) 8px; } #snackys-tpl .to-promo-bar__message, #snackys-tpl .to-promo-bar__content .to-promo-bar__message { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-2); text-align: left; font-size: 12px; line-height: 1.15; } #snackys-tpl .to-promo-bar__code, #snackys-tpl a.to-promo-bar__code, #snackys-tpl a.to-promo-bar__code:visited { min-height: 28px; padding: 4px 9px; font-size: 12px; } } @media (max-width: 479px) { #snackys-tpl .to-promo-bar__message, #snackys-tpl .to-promo-bar__content .to-promo-bar__message { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; font-size: 11px; } #snackys-tpl .to-promo-bar__code, #snackys-tpl a.to-promo-bar__code, #snackys-tpl a.to-promo-bar__code:visited { min-height: 26px; padding-right: 7px; padding-left: 7px; font-size: 11px; } } /**/ #snackys-tpl .to-promo-bar--plp { z-index: 1; min-height: 148px; margin: calc(var(--spacing-4) * -1) 0 var(--spacing-16); border: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm); background-color: var(--color-bg-surface); background-image: none; box-shadow: var(--shadow-sm); } #snackys-tpl .to-promo-bar--plp::after { display: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__content { display: grid; grid-template-columns: 200px minmax(0, 1fr) max-content; gap: var(--spacing-12); width: 100%; min-height: 148px; padding: 0 var(--spacing-6) 0 0; text-align: left; } #snackys-tpl .to-promo-bar__visual { display: flex; align-self: stretch; align-items: flex-end; justify-content: center; position: relative; min-width: 0; overflow: hidden; } #snackys-tpl .to-promo-bar__discount { display: none; } #snackys-tpl .to-promo-bar__visual img, #snackys-tpl .to-promo-bar__visual-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 148px; object-fit: contain; object-position: center bottom; } #snackys-tpl .to-promo-bar__visual .to-promo-bar__visual-img--mobile { display: none; } #snackys-tpl .to-promo-bar__copy { align-self: center; min-width: 0; } #snackys-tpl .to-promo-bar__copy h2 { margin: 0 0 var(--spacing-2); color: var(--color-primary-100); font-family: var(--font-family-base); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: 1.15; } #snackys-tpl .to-promo-bar__copy p { margin: 0; color: var(--color-primary-100); font-size: var(--font-size-h6); line-height: 1.35; } #snackys-tpl .to-promo-bar__voucher { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-4); width: max-content; max-width: 100%; min-height: 80px; padding: var(--spacing-1) var(--spacing-6); border: 1px solid var(--color-tertiary-50); border-radius: var(--border-radius-sm); background: var(--color-white); box-shadow: none; color: var(--color-primary-100); } #snackys-tpl .to-promo-bar__voucher > strong { color: inherit; font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); white-space: nowrap; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__code { min-height: 44px; padding: 7px 10px 7px 14px; border-radius: 9px; font-size: var(--font-size-h5); overflow: visible; gap: 8px; cursor: pointer; } #snackys-tpl .to-promo-bar__voucher .to-promo-bar__code:hover, #snackys-tpl .to-promo-bar__voucher .to-promo-bar__code:focus { background: var(--color-danger-hover); color: var(--color-white); } #snackys-tpl .to-promo-bar__voucher .to-promo-bar__code:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } #snackys-tpl .to-promo-bar__copy-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; pointer-events: none; } #snackys-tpl .to-promo-bar__copy-button svg { display: block; width: 18px; height: 18px; stroke: currentColor; } #snackys-tpl .to-promo-bar__copy-button .to-promo-bar__check-icon, #snackys-tpl .to-promo-bar__code.is-copied .to-promo-bar__copy-icon { display: none; } #snackys-tpl .to-promo-bar__code.is-copied .to-promo-bar__check-icon { display: block; } @media (max-width: 1199px) { #snackys-tpl .to-promo-bar--plp .to-promo-bar__content { grid-template-columns: 160px minmax(0, 1fr) max-content; gap: var(--spacing-4); padding-right: var(--spacing-4); } #snackys-tpl .to-promo-bar__copy h2 { font-size: 20px; } #snackys-tpl .to-promo-bar__copy p { font-size: 14px; } #snackys-tpl .to-promo-bar__voucher > strong { font-size: 18px; } } @media (max-width: 767px) { #snackys-tpl .to-promo-bar--plp { min-height: 0; margin-top: 0; margin-bottom: var(--spacing-8); overflow: hidden; border: 2px solid var(--color-tertiary-75); border-radius: 10px; background-color: var(--color-white); background-image: none; box-shadow: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__content { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-height: 0; padding: 0; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__visual { display: block; flex: 0 0 auto; width: 100%; height: 200px; min-height: 200px; overflow: hidden; background-color: var(--color-tertiary-50); background-image: url("https://cdn.toneroffice.de/templates/toneroffice_new/img/voucher_bg.png"); background-position: right bottom; background-repeat: no-repeat; background-size: cover; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__visual:has(.to-promo-bar__visual-img--mobile) { background-image: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__visual-img--desktop, #snackys-tpl .to-promo-bar--plp .to-promo-bar__visual > img:not(.to-promo-bar__visual-img--mobile) { display: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__visual .to-promo-bar__visual-img--mobile { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; object-position: right bottom; transform: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__discount { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 1; margin: 0; color: var(--color-white); font-family: var(--font-family-base); font-size: 100px; font-weight: 200; letter-spacing: -5px; line-height: 1; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 34, 147, 0.12); } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy { display: flex; flex-direction: column; gap: var(--spacing-4); width: 100%; padding: var(--spacing-6) var(--spacing-6) 0; border-top: 1px solid var(--color-tertiary-100); } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy h2 { margin: 0; font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy p { margin: 0; font-size: var(--font-size-normal); font-weight: var(--font-weight-regular); line-height: 1.35; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__voucher { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--spacing-3); width: auto; max-width: none; min-height: 0; margin: var(--spacing-6); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__voucher > strong { margin: 0; font-size: var(--font-size-normal); font-weight: var(--font-weight-bold); line-height: var(--lh-paragraph); white-space: normal; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__code { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 0; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-sm); font-size: var(--font-size-h5); line-height: var(--lh-h6); gap: var(--spacing-3); } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy-button { flex: 0 0 19px; width: 19px; height: 19px; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy-button svg { width: 19px; height: 19px; } } @media (max-width: 399px) { #snackys-tpl .to-promo-bar--plp .to-promo-bar__discount { font-size: 84px; letter-spacing: -4px; } #snackys-tpl .to-promo-bar--plp .to-promo-bar__copy { padding-right: var(--spacing-4); padding-left: var(--spacing-4); } #snackys-tpl .to-promo-bar--plp .to-promo-bar__voucher { margin: var(--spacing-4); } } /**/ #snackys-tpl .to-promo-bar--plp.to-promo-bar--opc { left: 50%; width: calc(100vw - 128px); max-width: 1406px; margin: 0 0 var(--spacing-16); transform: translateX(-50%); } @media (max-width: 1199px) { #snackys-tpl .to-promo-bar--plp.to-promo-bar--opc { width: calc(100vw - 80px); } } @media (max-width: 767px) { #snackys-tpl .to-promo-bar--plp.to-promo-bar--opc { width: calc(100vw - 32px); margin-bottom: var(--spacing-8); } }