/**/ #snackys-tpl .pl-heading, #snackys-tpl #plh { padding-top: 0; background: none !important; color: var(--color-primary-100); } #snackys-tpl #plh h1, #snackys-tpl .pl-heading h1 { color: var(--color-primary-100); } #snackys-tpl #plh .item_desc.custom_content.to-guide-intro { margin: 0 0 var(--spacing-8); } #snackys-tpl .to-guide-list { display: grid; grid-column: 1 / -1; gap: var(--spacing-6); width: 100%; } #snackys-tpl .to-guide-list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-8); padding: var(--spacing-6); border: 2px solid var(--color-primary-100); border-radius: var(--border-radius-sm); background: var(--color-white); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } #snackys-tpl .to-guide-list__item:hover, #snackys-tpl .to-guide-list__item:focus-within { background: var(--color-bg-surface); box-shadow: var(--shadow-md); } #snackys-tpl .to-guide-list__title { grid-column: 1; margin: 0 0 var(--spacing-3); font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); line-height: var(--lh-heading); } #snackys-tpl .to-guide-list__title a { color: var(--color-primary-100); text-decoration: none !important; } #snackys-tpl .to-guide-list__title a:hover, #snackys-tpl .to-guide-list__title a:focus-visible { color: var(--color-primary-100); } #snackys-tpl .to-guide-list__summary { grid-column: 1; margin: 0; color: var(--color-neutral); font-size: var(--font-size-normal); line-height: var(--lh-paragraph); } #snackys-tpl .to-guide-list__link { grid-column: 2; grid-row: 2; align-self: start; display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-primary-100); font-weight: var(--font-weight-bold); text-decoration: none !important; font-size: var(--font-size-normal); line-height: var(--lh-paragraph); height: calc(var(--font-size-normal) * var(--lh-paragraph)); } #snackys-tpl .to-guide-list__link::after { flex: 0 0 30px; width: 30px; height: 30px; background: currentColor; content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 767px) { #snackys-tpl .to-guide-list__item { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-4); } #snackys-tpl .to-guide-list__link { grid-column: 1; grid-row: auto; justify-self: end; margin-top: var(--spacing-4); min-height: 44px; height: auto; } } #p-l.list, #result-wrapper #p-l, .opc-ProductStream.list, .product-list.list { position: relative; display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--spacing-6); margin-right: 0; margin-left: 0; } #p-l.list > .pagination-url, #result-wrapper #p-l > .pagination-url, .opc-ProductStream.list > .pagination-url, .product-list.list > .pagination-url { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } #p-l.list > .el-sc, #result-wrapper #p-l > .el-sc, .opc-ProductStream.list > .el-sc, .product-list.list > .el-sc { grid-column: 1 / -1; } #p-l.list > .p-w, #p-l.list > .p-w[class*='col-'], #result-wrapper #p-l > .p-w, #result-wrapper #p-l > .p-w[class*='col-'], .opc-ProductStream.list > .product-wrapper, .opc-ProductStream.list > .product-wrapper[class*='col-'], .product-list.list > .product-wrapper, .product-list.list > .product-wrapper[class*='col-'] { flex: none !important; width: 100% !important; max-width: 100% !important; display: flex !important; align-self: stretch; min-width: 0 !important; padding: 0 !important; } #p-l.list > .to-listing-group-break, #result-wrapper #p-l > .to-listing-group-break, .opc-ProductStream.list > .to-listing-group-break, .product-list.list > .to-listing-group-break { grid-column: 1 / -1; height: 0; } #p-l.list > .to-listing-group-wrap, #result-wrapper #p-l > .to-listing-group-wrap, .opc-ProductStream.list > .to-listing-group-wrap, .product-list.list > .to-listing-group-wrap { display: flex; align-self: stretch; grid-column: 1; } .to-listing-group { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 1 auto; width: 100%; min-height: 252px; padding: var(--spacing-8); overflow: hidden; color: var(--color-white); background-color: var(--color-white); border-radius: var(--border-radius-sm) 0 var(--border-radius-sm) var(--border-radius-sm); } .to-listing-group > *:not(.to-listing-group__motif):not(.to-listing-group__count) { position: relative; z-index: 1; } .to-listing-group__count { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2rem; height: 2rem; min-width: 2rem; padding: 0; border: none; border-radius: 0 0 0 var(--border-radius-sm); color: var(--color-primary-100); background: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-h6); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap; } .to-listing-group--original .to-listing-group__count { color: var(--color-primary-100); background: var(--color-white); } .to-listing-group--refill .to-listing-group__count { color: var(--color-neutral); background: var(--color-white); } .to-listing-group__count::before, .to-listing-group__count::after { content: ""; position: absolute; z-index: -1; display: block; width: 5px; height: 5px; pointer-events: none; background-color: var(--color-white); -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: 5px 5px; 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: 5px 5px; } .to-listing-group__count::before { top: 0; right: 100%; transform: rotate(90deg); } .to-listing-group__count::after { bottom: -5px; left: calc(100% - 5px); transform: rotate(90deg); } .to-listing-group__motif { position: absolute; inset: 0 40%; z-index: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 15%, var(--color-neutral) 75%); mask-image: linear-gradient(to right, transparent 0%, transparent 15%, var(--color-neutral) 75%); } .to-listing-group__motif-spin { transform-box: fill-box; transform-origin: center; } .to-listing-group__logo { display: block; width: auto; max-width: calc(140px * var(--brand-logo-scale, 1)); height: auto; object-fit: contain; object-position: left center; } .to-listing-group--original { background-color: var(--to-listing-group-bg, var(--color-neutral)); } .to-listing-group--refill { background-color: var(--to-listing-group-bg, var(--to-search-green, #00B831)); } .to-listing-group--original::before, .to-listing-group--original::after, .to-listing-group--refill::after, .to-listing-group--compatible::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .to-listing-group--original::before { background-image: var(--to-listing-group-image, ___SLOT7___); background-repeat: no-repeat; background-size: 105%; background-position: center center; filter: saturate(1.5); } .to-listing-group.has-bg-image:not(.to-listing-group--original)::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--to-listing-group-image); background-repeat: no-repeat; background-size: cover; background-position: center center; } .to-listing-group--original::after, .to-listing-group--refill::after, .to-listing-group--compatible::after { background: url("https://cdn.toneroffice.de/templates/toneroffice_new/img/listing-group-grain.svg") 0 0 / 200px 200px repeat; mix-blend-mode: color-burn; opacity: 0.85; filter: invert(1); } .to-listing-group--original .to-listing-group__logo { max-width: calc(100px * var(--brand-logo-scale, 1)); margin-bottom: var(--spacing-2); } .to-listing-group--original .to-listing-group__text { margin-bottom: 0; } .to-listing-group__logo--wordmark, .to-listing-group--original .to-listing-group__logo { filter: brightness(0) invert(1); } .to-listing-group__brand, .to-listing-group__title { margin: 0; color: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: 1; } .to-listing-group__text { margin: var(--spacing-6) 0; color: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-normal); font-weight: var(--font-weight-regular); line-height: var(--lh-paragraph); } .to-listing-group__usps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3) var(--spacing-4); width: 100%; margin: var(--spacing-4) 0 0; padding: 0; list-style: none; } .to-listing-group__usps li { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-4); border: 1.5px solid var(--color-tertiary-50); border-radius: var(--border-radius-lg); color: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-normal); font-weight: var(--font-weight-regular); line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(var(--spacing-4)); transition: opacity 400ms ease-out, transform 400ms ease-out; } .to-listing-group.is-inview .to-listing-group__usps li { opacity: 1; transform: translateY(0); } .to-listing-group.is-inview .to-listing-group__usps li:nth-child(2) { transition-delay: 140ms; } .to-listing-group.is-inview .to-listing-group__usps li:nth-child(3) { transition-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .to-listing-group__usps li { opacity: 1; transform: none; transition: none; } } .to-listing-group__usp-icon { flex-shrink: 0; width: 16px; height: 16px; } .to-product-card { position: relative; display: grid !important; grid-template-columns: var(--to-card-media-col) minmax(0, 1fr); grid-template-areas: 'visual rating' 'visual title' 'visual commerce'; grid-template-rows: auto auto 1fr; column-gap: var(--to-card-gap); row-gap: var(--spacing-2); width: 100%; min-height: 252px; padding: var(--to-card-padding); overflow: visible !important; color: var(--color-neutral); font-family: var(--to-card-font, var(--font-family-base)); background: var(--color-white); border: var(--to-card-border-width) solid var(--to-card-border); border-radius: var(--to-card-radius); box-shadow: none; } #snackys-tpl .to-product-card:hover { border-color: var(--color-primary-100); } #snackys-tpl .to-product-card, #snackys-tpl .to-product-card *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class^="fa-"]):not([class*=" fa-"]), #snackys-tpl .to-product-card *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class^="fa-"]):not([class*=" fa-"])::before, #snackys-tpl .to-product-card *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class^="fa-"]):not([class*=" fa-"])::after { font-family: var(--to-card-font, var(--font-family-base)) !important; } /**/ #p-l.list .to-product-card, #result-wrapper #p-l .to-product-card, .opc-ProductStream.list .to-product-card, .product-list.list .to-product-card { flex: 1 1 auto; align-items: stretch !important; height: 100%; } .to-product-card a { text-decoration: none !important; } .to-product-card__visual, .to-product-card__media, .to-product-card__commerce { min-width: 0; } .to-product-card__visual { position: relative; display: flex; flex-direction: column; align-self: stretch; grid-area: visual; gap: 0; width: 100%; height: 100%; overflow: visible; } .to-product-card__main { display: contents; } .to-product-card__media { position: relative; display: flex; flex-direction: column; align-self: start; width: 100%; aspect-ratio: 1 / 1; min-height: 0; overflow: visible; background: transparent; border-radius: var(--border-radius-sm); } .to-product-card__kind-logo { max-width: calc(65px * var(--brand-logo-scale, 1)); height: calc(15px * var(--brand-logo-scale, 1)); } .to-product-card__image { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0 !important; padding: var(--spacing-6); overflow: hidden; border-radius: var(--border-radius-sm); } .to-product-card__facts { position: relative; z-index: 2; align-self: start; width: 100%; max-width: 100%; margin: auto 0 0; } #snackys-tpl .to-product-card .to-search-product__meta, #snackys-tpl .to-product-card .to-search-product__meta.is-end { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: visible; color: var(--color-neutral); background: transparent; border: 0; } #snackys-tpl .to-product-card .to-search-product__tabs, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: flex-end; align-self: start; width: auto; max-width: 100%; min-width: 0; margin-top: -20px; } #snackys-tpl .to-product-card .to-search-product__panels { position: relative; z-index: 1; display: block; width: 100%; min-width: 0; } #snackys-tpl .to-product-card .to-search-product__variant, #snackys-tpl .to-product-card .to-search-product__variant.is-active, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant.is-active { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: 40px; padding: var(--spacing-1); overflow: visible; color: inherit; background: var(--color-white); border: 2px solid var(--color-tertiary-75); border-bottom: 0; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .2); margin-bottom: -2px; } #snackys-tpl .to-product-card .to-search-product__variant:not(.is-active) { z-index: 1; box-shadow: none; } #snackys-tpl .to-product-card .to-search-product__variant.is-active { z-index: 2; } #snackys-tpl .to-product-card .to-search-product__tabs:not(.is-solo) .to-search-product__variant.is-active::before { content: ""; position: absolute; left: 100%; bottom: 0; z-index: 0; display: block; width: 15px; height: 15px; pointer-events: none; background-color: var(--color-tertiary-75); 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='%23fff'/%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; box-shadow: 0 -2px 0 0 var(--color-white); transform: rotate(180deg) scaleX(-1); } #snackys-tpl .to-product-card .to-search-product__variant.is-active::after { content: ""; position: absolute; display: block; bottom: -2px; left: 0; width: calc(100% + 2px); height: 2px; background: var(--color-white); } #snackys-tpl .to-product-card:not(:has(.to-search-product__stats.is-active)) .to-search-product__variant.is-active::after { background: transparent; } #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant.is-active { border-bottom: 2px solid var(--color-tertiary-75); border-radius: var(--border-radius-sm); } #snackys-tpl .to-product-card .to-search-swatch, #snackys-tpl .to-product-card .to-search-swatch.is-group, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) { justify-content: center; gap: var(--spacing-1); padding: 0; } #snackys-tpl .to-product-card .to-search-swatch i, #snackys-tpl .to-product-card .to-search-swatch.is-group i, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) i { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: var(--border-radius-sm); font-size: 20px; font-style: normal; font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-product-card .to-search-swatch.is-group i, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) i { flex: 0 0 auto; width: auto; white-space: nowrap; } #snackys-tpl .to-product-card .to-search-swatch i.is-black { background: var(--color-ink-black); color: var(--color-white); } #snackys-tpl .to-product-card .to-search-swatch i.is-cyan { background: var(--color-ink-cyan); color: var(--color-white); } #snackys-tpl .to-product-card .to-search-swatch i.is-magenta { background: var(--color-ink-magenta); color: var(--color-white); } #snackys-tpl .to-product-card .to-search-swatch i.is-yellow { background: var(--color-ink-yellow); color: var(--color-white); } #snackys-tpl .to-product-card .to-search-swatch i.is-info { background: var(--color-tertiary-50); color: var(--color-neutral); } #snackys-tpl .to-product-card .to-search-swatch i.is-info svg { display: block; width: 16px; height: 16px; } #snackys-tpl .to-search-swatch i.is-blue { background: var(--color-ink-blue); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-photo-cyan { background: var(--color-ink-photo-cyan); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-photo-magenta { background: var(--color-ink-photo-magenta); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-light-cyan { background: var(--color-ink-light-cyan); color: var(--color-ink-light-cyan-text); } #snackys-tpl .to-search-swatch i.is-light-magenta { background: var(--color-ink-light-magenta); color: var(--color-ink-light-magenta-text); } #snackys-tpl .to-search-swatch i.is-green { background: var(--color-ink-green); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-red { background: var(--color-ink-red); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-orange { background: var(--color-ink-orange); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-grey { background: var(--color-ink-grey); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-dark-grey { background: var(--color-ink-dark-grey); color: var(--color-white); } #snackys-tpl .to-search-swatch i.is-light-grey { background: var(--color-ink-light-grey); color: var(--color-neutral); } #snackys-tpl .to-search-swatch i.is-white { background: var(--color-white); color: var(--color-neutral); box-shadow: inset 0 0 0 1px var(--color-tertiary-50); } #snackys-tpl .to-search-swatch i.is-dots { background-color: var(--color-white); background-image: url("https://cdn.toneroffice.de/templates/toneroffice_new/img/swatch-dots.svg"); background-repeat: no-repeat; background-position: center; background-size: 60%; box-shadow: inset 0 0 0 1px var(--color-tertiary-50); } #snackys-tpl .to-search-swatch i.is-clear { background: var(--color-bg-surface); color: var(--color-neutral); box-shadow: inset 0 0 0 1px var(--color-tertiary-50); } #snackys-tpl .to-search-swatch i.is-gloss { padding: 0; overflow: hidden; background: var(--color-bg-surface); } #snackys-tpl .to-search-swatch i.is-silver { background: var(--color-tertiary-50); color: var(--color-neutral); } #snackys-tpl .to-search-swatch i.is-gloss img { display: block; width: 100%; height: 100%; object-fit: cover; } #snackys-tpl .to-search-swatch__times { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 30px; height: 30px; box-sizing: border-box; padding: 0 6px 0 6px; margin-left: -3px; margin-right: -6px; border: none; border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); background: transparent; color: var(--color-neutral); font-style: normal; font-weight: var(--font-weight-bold, 700); font-size: 13.3px; line-height: 1; white-space: nowrap; } #snackys-tpl .to-product-card .to-search-swatch__times { font-size: 20px; } #snackys-tpl .to-pdp__facts-and-actions .to-search-swatch__times, #snackys-tpl .product-attributes.p-att .to-search-swatch__times { height: 28px; font-size: 20px; } #snackys-tpl .to-product-card .to-search-swatch i.is-wide, #snackys-tpl .to-pdp__facts-and-actions .to-search-swatch i.is-wide, #snackys-tpl .product-attributes.p-att .to-search-swatch i.is-wide, #snackys-tpl .to-pdp-comparison .to-search-swatch i.is-wide, #snackys-tpl .wi-crossselling-slider .to-crossselling-card__facts .to-search-swatch i.is-wide, #snackys-tpl .wi-crossselling-list .to-product-card__facts .to-search-swatch i.is-wide, #snackys-tpl #stck-bskt .to-stck-bskt__facts .to-search-swatch i.is-wide { flex: 0 0 auto; width: auto; min-width: 30px; padding: 0 6px; white-space: nowrap; } #snackys-tpl .to-product-card .to-search-swatch i.is-tri, #snackys-tpl .to-pdp__facts-and-actions .to-search-swatch i.is-tri, #snackys-tpl .product-attributes.p-att .to-search-swatch i.is-tri, #snackys-tpl .to-pdp-comparison .to-search-swatch i.is-tri, #snackys-tpl .wi-crossselling-slider .to-crossselling-card__facts .to-search-swatch i.is-tri { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: auto; min-width: 30px; padding: 0 5px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-tertiary-50); } #snackys-tpl .to-search-swatch i.is-tri span { display: block; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; } #snackys-tpl .to-search-swatch i.is-tri span:nth-child(1) { background: var(--color-ink-cyan); } #snackys-tpl .to-search-swatch i.is-tri span:nth-child(2), #snackys-tpl .to-search-swatch i.is-tri span:nth-child(3) { mix-blend-mode: darken; margin-left: -5px; background: var(--color-ink-magenta); } #snackys-tpl .to-search-swatch i.is-tri span:nth-child(3) { background: var(--color-ink-yellow); } #snackys-tpl .wi-crossselling-slider .to-search-swatch i.is-tri span { flex: 0 0 15px; width: 15px; height: 15px; } #snackys-tpl .wi-crossselling-slider .to-search-swatch i.is-tri span:nth-child(2), #snackys-tpl .wi-crossselling-slider .to-search-swatch i.is-tri span:nth-child(3) { margin-left: -5px; } #snackys-tpl #stck-bskt .to-stck-bskt__container .to-search-swatch i.is-tri span { flex: 0 0 12px; width: 12px; height: 12px; } #snackys-tpl #stck-bskt .to-stck-bskt__container .to-search-swatch i.is-tri span:nth-child(2), #snackys-tpl #stck-bskt .to-stck-bskt__container .to-search-swatch i.is-tri span:nth-child(3) { margin-left: -4px; } #snackys-tpl .to-product-card .to-search-product__stats, #snackys-tpl .to-product-card .to-search-product__meta.is-end .to-search-product__stats { display: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; width: 100%; min-height: 52px; margin: 0; padding: 0 var(--spacing-4); background: var(--color-white); border: 2px solid var(--color-tertiary-75); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm); } #snackys-tpl .to-product-card .to-search-product__stats.is-active, #snackys-tpl .to-product-card .to-search-product__meta.is-end .to-search-product__stats.is-active { display: flex; border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm); } #snackys-tpl .to-product-card button.to-search-product__variant { cursor: pointer; font: inherit; appearance: none; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch { display: inline-flex; align-items: center; gap: var(--spacing-1); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch i { box-sizing: border-box; border: 1.5px solid transparent; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i { background: none; box-shadow: none; border-style: dashed; border-color: currentColor; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-black { color: var(--color-ink-black); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-cyan { color: var(--color-ink-cyan); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-magenta { color: var(--color-ink-magenta); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-yellow { color: var(--color-ink-yellow); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-blue { color: var(--color-ink-blue); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-photo-cyan { color: var(--color-ink-photo-cyan); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-photo-magenta { color: var(--color-ink-photo-magenta); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-light-cyan { color: var(--color-ink-light-cyan); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-light-magenta { color: var(--color-ink-light-magenta); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-green { color: var(--color-ink-green); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-red { color: var(--color-ink-red); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-orange { color: var(--color-ink-orange); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-grey { color: var(--color-ink-grey); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-dark-grey { color: var(--color-ink-dark-grey); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-light-grey { color: var(--color-ink-light-grey); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-silver { color: var(--color-ink-silver); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-white, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-dots, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-clear, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-gloss { color: var(--color-ink-gloss); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-tri { color: var(--color-tertiary-100); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-tri span { background: none; border: 1.5px dashed currentColor; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-tri span:nth-child(1) { color: var(--color-ink-cyan); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-tri span:nth-child(2) { color: var(--color-ink-magenta); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-fact-swatch:not(.is-active) i.is-tri span:nth-child(3) { color: var(--color-ink-yellow); } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-search-product__panels { display: grid; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-search-product__stats, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-search-product__meta.is-end .to-search-product__stats { display: flex; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-search-product__stats.is-active, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling .to-search-product__meta.is-end .to-search-product__stats.is-active { opacity: 1; visibility: visible; pointer-events: auto; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy strong, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy > span { position: relative; display: inline-block; overflow: hidden; color: transparent; background: var(--color-tertiary-50); border-radius: 4px; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy > span span { color: transparent; } #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy strong::after, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy > span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-140%); animation: to-card-fact-shimmer .85s ease-in-out infinite; pointer-events: none; } @keyframes to-card-fact-shimmer { 100% { transform: translateX(280%); } } @media (prefers-reduced-motion: reduce) { #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy strong::after, #snackys-tpl .to-product-card .to-product-card__facts.is-cycling.is-fact-skeleton .to-search-product__stats.is-active .to-search-product__stat-copy > span::after { animation: none; display: none; } } #snackys-tpl .to-product-card .to-search-product__meta:not(:has(.to-search-product__tabs)) .to-search-product__stats.is-active { border-radius: var(--border-radius-sm); } #snackys-tpl .to-product-card .to-search-product__stat { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-start; gap: var(--spacing-2); min-width: 0; overflow: visible; } #snackys-tpl .to-product-card .to-search-product__stat-divider { flex: 0 0 auto; width: 1px; height: 30px; margin: 0 var(--spacing-3); align-self: center; background: var(--color-tertiary-50); } #snackys-tpl .to-product-card .to-search-product__stat-icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; color: var(--color-neutral); } #snackys-tpl .to-product-card .to-search-product__stat-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: var(--color-neutral); font-size: var(--font-size-xs); line-height: 13px; } #snackys-tpl .to-product-card .to-search-product__stat-copy strong { color: var(--color-neutral); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 13px; } @media (min-width: 768px) { #snackys-tpl .to-product-card .to-search-product__stat-copy strong { font-size: 16px; line-height: 16px; } } #snackys-tpl .to-product-card .to-search-product__stat-copy span { color: var(--color-neutral); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: 13px; } /**/ #p-l.list .to-product-card__image, #result-wrapper #p-l .to-product-card__image, .opc-ProductStream.list .to-product-card__image, .product-list.list .to-product-card__image { width: 100%; min-width: 0; margin: 0 !important; } .to-product-card__image picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; } .to-product-card__image img, .to-product-card__product-image { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; object-position: center; transition: transform var(--transition-fast); } .to-product-card:hover .to-product-card__image img, .to-product-card:hover .to-product-card__product-image { transform: scale(1.05); } .to-product-card__rating { display: flex; align-items: center; grid-area: rating; justify-self: start; gap: var(--to-card-rating-gap, 7px); min-height: 22px; max-width: 100%; margin-bottom: 0; color: var(--to-card-rating-color, var(--color-tertiary-100)) !important; font-size: var(--font-size-xs); } .to-product-card__xl-badges { top: -1px; right: -1px; left: auto; bottom: auto; display: inline-flex; flex-direction: row; align-items: stretch; position: absolute; z-index: 2; gap: 0; pointer-events: none; } .to-product-card__xl-badge { top: -1px; right: -1px; left: auto; bottom: auto; --shimmer-hue-1: 213deg; --shimmer-hue-2: 248deg; display: inline-flex; align-items: center; position: absolute; isolation: isolate; z-index: 2; overflow: hidden; padding: var(--spacing-2) var(--spacing-3); border: none; border-radius: 0 var(--to-card-radius, var(--border-radius-xs)) 0 var(--border-radius-xs); background: var(--color-tertiary-75); color: var(--color-neutral); font-size: 13.3px; font-weight: var(--font-weight-bold); line-height: 1.2; text-transform: uppercase; pointer-events: none; } .to-product-card:hover .to-product-card__xl-badge:not(.to-product-card__xl-badge--alternative), .to-search-product:hover .to-product-card__xl-badge:not(.to-product-card__xl-badge--alternative) { background: var(--color-primary-100); color: var(--color-white); } .to-product-card__xl-badges .to-product-card__xl-badge { position: relative; top: auto; right: auto; left: auto; bottom: auto; border-radius: 0; } .to-product-card__xl-badges .to-product-card__xl-badge:only-child { border-radius: 0 var(--to-card-radius, var(--border-radius-xs)) 0 var(--border-radius-xs); } .to-product-card__xl-badges .to-product-card__xl-badge:first-child:not(:only-child) { border-radius: 0 0 0 var(--border-radius-xs); } .to-product-card__xl-badges .to-product-card__xl-badge:last-child:not(:only-child) { border-radius: 0 var(--to-card-radius, var(--border-radius-xs)) 0 0; } .to-product-card__xl-label { display: inline-flex; align-items: center; position: relative; z-index: 1; line-height: 1; } .to-product-card__xl-label-short { display: none; } @media (max-width: 575px) { .to-product-card__xl-badge--multipack .to-product-card__xl-label-full { display: none; } .to-product-card__xl-badge--multipack .to-product-card__xl-label-short { display: inline; } } .to-product-card__xl-shimmer { position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(90deg, transparent 15%, var(--color-neutral) 45%, var(--color-neutral) 55%, transparent 85%); mask-image: linear-gradient(90deg, transparent 15%, var(--color-neutral) 45%, var(--color-neutral) 55%, transparent 85%); -webkit-mask-size: 200% 200%; mask-size: 200% 200%; -webkit-mask-position: center; mask-position: center; animation: to-xl-wave 3s linear infinite both -0.5s; } .to-product-card__xl-shimmer::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; z-index: 2; box-shadow: inset 0 0 0 1px hsl(var(--shimmer-hue-2) 70% 95%), inset 0 0 1px 1px hsl(var(--shimmer-hue-2) 100% 80%), inset 0 0 3px 1px hsl(var(--shimmer-hue-2) 100% 70%); } @keyframes to-xl-wave { 0% { -webkit-mask-position: 200% center; mask-position: 200% center; } 100% { -webkit-mask-position: 0% center; mask-position: 0% center; } } @media (prefers-reduced-motion: reduce) { .to-product-card__xl-shimmer { animation: none; -webkit-mask-image: none; mask-image: none; } } .to-product-card__rating .rating { gap: 2px; } .to-product-card__title { display: -webkit-box; grid-area: title; flex-shrink: 0; min-width: 0; margin: 0 !important; overflow: hidden; font-family: var(--to-card-font, var(--font-family-base)); font-size: var(--to-card-title-size, var(--font-size-h6)) !important; font-weight: var(--to-card-title-weight, var(--font-weight-regular)); line-height: var(--to-card-title-line, 1.35) !important; letter-spacing: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .to-product-card__title a { display: inline; overflow: visible; color: var(--to-card-title-color) !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit; } .to-product-card__commerce { position: relative; display: flex; flex-direction: column; justify-content: flex-end; grid-area: commerce; gap: var(--to-card-commerce-gap, 16px); min-width: 0; padding-top: var(--spacing-2); } .to-product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); width: 100%; } .to-product-card__wishlist-form { flex-shrink: 0; z-index: 2; margin: 0; } .to-product-card__wishlist-form .to-product-card__wishlist { width: 20px; height: 20px; padding: 0; color: var(--color-neutral); background: transparent; border: 0; box-shadow: none !important; transition: transform var(--transition-fast); } .to-product-card__wishlist-form .to-product-card__wishlist:hover, .to-product-card__wishlist-form .to-product-card__wishlist:focus, .to-product-card__wishlist-form .to-product-card__wishlist:active { box-shadow: none !important; transform: scale(1.12); } .to-product-card__wishlist-form .fa-heart { display: block; width: 20px; height: 20px; margin: auto; font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z'/%3E%3C/svg%3E") center / contain no-repeat; } .to-product-card__wishlist-form .fa-heart::before { content: none; } #p-l .to-product-card, #result-wrapper .to-product-card, .opc-ProductStream .to-product-card, .product-list .to-product-card { --to-card-price-bg: var(--color-secondary-50); --to-card-price-divider: var(--color-tertiary-100); --to-card-price-accent: var(--color-danger); } .to-product-card__price-box { position: relative; width: 100%; margin: 0; padding: 0; overflow: visible; background: transparent; border-radius: 0; } .to-product-card__price-box:not(.to-product-card__price-box--single)::before { display: none; } .to-product-card__price { position: relative; z-index: 1; display: block; height: auto; margin: 0; min-width: 0; align-items: flex-start; justify-content: flex-start; padding: 0; font-family: var(--to-card-font, var(--font-family-base)); font-size: var(--to-card-price-size, 24px); font-weight: var(--to-card-price-weight, 700); line-height: 1; text-align: left; color: var(--color-neutral); background: transparent; border-radius: 0; } #p-l .to-product-card__price-box:not(.to-product-card__price-box--single) .to-product-card__price, #result-wrapper .to-product-card__price-box:not(.to-product-card__price-box--single) .to-product-card__price, .opc-ProductStream .to-product-card__price-box:not(.to-product-card__price-box--single) .to-product-card__price, .product-list .to-product-card__price-box:not(.to-product-card__price-box--single) .to-product-card__price { display: inline-block; width: auto; overflow: visible; padding: var(--spacing-2) var(--spacing-3) var(--spacing-2); background: var(--to-card-price-bg); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .to-product-card__price sup { position: relative; top: -1.125em; margin-left: 1px; font-size: .4em; line-height: 0; vertical-align: baseline; } .to-product-card__main-price-wrap { position: relative; display: inline-block; flex: 0 0 auto; } .to-product-card__main-price-wrap .to-product-card__main-price-corner { position: absolute; right: -10px; bottom: -1px; z-index: 2; display: block; width: 10px; height: 10px; pointer-events: none; transform: rotate(180deg) scaleX(-1); } @media (min-width: 768px) { .to-product-card__price sup { top: -1.4em; } } .to-product-card__price-box--single { width: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; } .to-product-card__price-box--single .to-product-card__price { display: block; height: auto; margin: 0; min-width: 0; padding: 0; text-align: left; background: transparent; border-radius: 0; } #p-l .to-product-card__bulk-prices, #result-wrapper .to-product-card__bulk-prices, .opc-ProductStream .to-product-card__bulk-prices, .product-list .to-product-card__bulk-prices { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); background: var(--to-card-price-bg); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm); } .to-product-card__bulk-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--to-card-bulk-gap); color: var(--color-neutral); font-size: var(--to-card-bulk-size); font-weight: var(--font-weight-regular); line-height: 1.2; white-space: nowrap; transition: opacity var(--transition-fast); } .to-product-card__bulk-window { display: block; } .to-product-card__bulk-track { display: flex; flex-direction: column; gap: var(--spacing-2); } .to-product-card__bulk-row[data-to-bulk-clone] { display: none; } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"] { --to-bulk-row-height: var(--spacing-6); } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"] .to-product-card__bulk-window { height: var(--to-bulk-row-height); overflow: hidden; } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"] .to-product-card__bulk-track { gap: 0; height: var(--to-bulk-row-height); animation: to-bulk-price-cycle var(--to-bulk-duration, 5.6s) var(--to-bulk-easing, linear) infinite; } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"] .to-product-card__bulk-row { flex: 0 0 auto; } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"] .to-product-card__bulk-row[data-to-bulk-clone] { display: grid; } .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"]:hover .to-product-card__bulk-track, .to-product-card__bulk-prices.has-cycle[data-to-bulk-slider="carousel"]:focus-within .to-product-card__bulk-track { animation-play-state: paused; } @keyframes to-bulk-price-cycle { from { transform: translateY(0); } to { transform: translateY(var(--to-bulk-distance, -200%)); } } @media (max-width: 767px) { .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle { --to-bulk-row-height: var(--spacing-4); } #p-l .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-window, #result-wrapper .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-window, .opc-ProductStream .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-window, .product-list .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-window { height: var(--to-bulk-row-height); overflow: hidden; } #p-l .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-track, #result-wrapper .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-track, .opc-ProductStream .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-track, .product-list .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-track { gap: 0; height: var(--to-bulk-row-height); animation: to-bulk-price-cycle var(--to-bulk-duration, 5.6s) var(--to-bulk-easing, linear) infinite; } #p-l .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-row, #result-wrapper .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-row, .opc-ProductStream .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-row, .product-list .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-row { flex: 0 0 auto; height: var(--to-bulk-row-height); line-height: var(--to-bulk-row-height); } .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle .to-product-card__bulk-row[data-to-bulk-clone] { display: grid; } #p-l .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:hover .to-product-card__bulk-track, #result-wrapper .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:hover .to-product-card__bulk-track, .opc-ProductStream .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:hover .to-product-card__bulk-track, .product-list .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:hover .to-product-card__bulk-track, #p-l .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:focus-within .to-product-card__bulk-track, #result-wrapper .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:focus-within .to-product-card__bulk-track, .opc-ProductStream .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:focus-within .to-product-card__bulk-track, .product-list .to-product-card__bulk-prices[data-to-bulk-slider="listing"].has-cycle:focus-within .to-product-card__bulk-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .to-product-card__bulk-prices.has-cycle .to-product-card__bulk-track { height: auto !important; gap: var(--spacing-2); animation: none !important; transform: none !important; } .to-product-card__bulk-prices.has-cycle .to-product-card__bulk-window { height: auto !important; overflow: visible; } .to-product-card__bulk-row[data-to-bulk-clone] { display: none !important; } } .to-product-card__bulk-row.is-inactive { opacity: 0.5; } .to-product-card__bulk-prices strong { display: inline-flex; justify-self: center; align-items: center; justify-content: center; gap: var(--spacing-1); min-width: 100px; padding: var(--spacing-1); color: var(--color-neutral); background: var(--color-secondary-100); border-radius: var(--border-radius-sm); font-weight: var(--font-weight-regular); line-height: 1; } .to-product-card__bulk-row.is-active strong { color: var(--to-card-bulk-save); background: var(--to-card-price-accent); box-shadow: none; } .to-product-card__bulk-prices strong svg { flex-shrink: 0; } .to-product-card__bulk-prices span:last-child { text-align: right; font-weight: var(--font-weight-regular); } .to-product-card__bulk-prices span:last-child b { font-weight: var(--font-weight-bold); } .opc-ProductStream .to-product-card__alt-offer, .wi-crossselling-list .to-product-card__alt-offer { display: none; } #p-l .to-product-card--model-listing .to-product-card__alt-offer, #result-wrapper .to-product-card--model-listing .to-product-card__alt-offer { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: end; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); background: var(--to-card-price-bg); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm); } .to-product-card__alt-offer-copy { flex: 1 1 auto; min-width: 0; } .to-product-card__alt-offer h6 { margin: 0 0 var(--spacing-1); color: var(--color-neutral); font-size: var(--font-size-normal); font-weight: var(--font-weight-bold); line-height: var(--lh-h6); overflow-wrap: break-word; } .to-product-card__alt-offer-mobile { display: none; } .to-product-card__alt-offer-badge { display: inline-flex; align-items: center; color: var(--to-card-price-accent); line-height: 1; } .to-product-card__alt-offer p { margin: 0; color: var(--color-neutral); font-size: var(--to-card-bulk-size); font-weight: var(--font-weight-regular); line-height: 1.3; overflow-wrap: break-word; } .to-product-card__alt-offer-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--spacing-1); min-height: 32px; padding: var(--spacing-1) var(--spacing-3); color: var(--color-white) !important; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none !important; background: var(--color-primary-100); border-radius: var(--border-radius-sm); } .to-product-card__alt-offer-btn svg { flex-shrink: 0; width: 15px; height: 15px; } .to-product-card__basket { display: flex; flex-direction: column; align-items: stretch; gap: var(--to-card-basket-gap, 7px); width: 100%; margin: 0; } #p-l.list .to-product-card__basket, #result-wrapper #p-l .to-product-card__basket, .opc-ProductStream.list .to-product-card__basket, .product-list.list .to-product-card__basket { margin-top: 0; } .to-product-card__shipping-delivery { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2) var(--spacing-3); width: 100%; } .to-product-card__shipping-delivery > .to-shipping-info, .to-product-card__shipping-delivery > .to-product-card__delivery { display: flex; align-items: center; align-self: center; margin: 0; line-height: 1.25; } .to-product-card__delivery { display: flex; align-items: center; justify-content: flex-start; gap: var(--to-card-delivery-gap, 8px); margin-bottom: 0; color: var(--to-card-delivery-color, var(--color-success)); font-size: var(--to-card-delivery-size, var(--font-size-xs)); line-height: 1; } .to-product-card__delivery.is-out { color: var(--color-danger) !important; } .to-product-card__delivery.is-out .to-product-card__delivery-text { color: var(--color-danger) !important; } .to-product-card__delivery-time { display: inline-flex; align-items: center; gap: var(--spacing-1); } .to-product-card__delivery-text, .to-product-card__delivery-text strong, .to-product-card__delivery .to-search-product__delivery-zip, .to-product-card__delivery .to-delivery-zip { color: inherit !important; } .to-product-card__delivery-text { line-height: 1.25; } .to-product-card__delivery-text strong { font-weight: var(--font-weight-bold); } .to-product-card__delivery-icon { flex: 0 0 16px; width: 16px; height: 16px; overflow: visible; fill: none !important; stroke: currentColor !important; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .to-product-card__delivery-icon polyline { fill: none !important; stroke: currentColor !important; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .to-product-card .to-product-card__buy-row { --to-card-qty-width: 36px; display: grid; grid-template-columns: calc(56px + var(--to-card-qty-width, 36px)) minmax(0, 1fr); align-items: center; gap: var(--spacing-2); width: 100%; } #snackys-tpl .btn-group .btn:first-child, #snackys-tpl .modal-dialog .answer > a:first-child, #snackys-tpl .btn-group > .form-control:first-child { border-top-left-radius: var(--border-radius-sm); border-bottom-left-radius: var(--border-radius-sm); } #snackys-tpl .btn-group .btn:last-child, #snackys-tpl .modal-dialog .answer > a:last-child, #snackys-tpl .btn-group > .form-control:last-child { border-top-right-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); } .to-product-card__quantity, .to-product-card__quantity.btn-group { display: grid !important; grid-template-columns: 28px var(--to-card-qty-width, 44px) 28px; width: calc(56px + var(--to-card-qty-width, 44px)); height: var(--to-card-add-height, 40px); margin: 0; overflow: hidden; border: 2px solid var(--to-card-qty-border, #9cb7ee); border-radius: var(--border-radius-sm); } .to-product-card__quantity .btn, .to-product-card__quantity .quantity { display: flex; align-items: center; justify-content: center; flex: none !important; min-width: 0; min-height: 0; margin: 0; padding: 0; color: var(--color-neutral); background: var(--color-white); border: 0; border-radius: 0; box-shadow: none; } .to-product-card__quantity .btn { width: 28px; } .to-product-card__quantity .quantity { width: 100%; } .to-product-card__quantity .btn svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; } .to-product-card__quantity .qty-sub:disabled, .to-product-card__quantity .qty-add:disabled { opacity: 0.4; pointer-events: none; } .to-product-card__quantity .quantity:disabled { color: color-mix(in srgb, var(--color-neutral) 40%, transparent); -webkit-text-fill-color: currentColor; background: var(--color-white); opacity: 1; } .to-product-card__quantity .qty-sub svg { transform: translateX(1px); } .to-product-card__quantity .qty-add svg { transform: translateX(-1px); } .to-product-card__quantity .btn + .quantity, .to-product-card__quantity .quantity + .btn { margin-left: 0 !important; } .to-product-card__quantity .quantity { border-right: 2px solid var(--to-card-qty-border, #9cb7ee); border-left: 2px solid var(--to-card-qty-border, #9cb7ee); text-align: center; font-size: var(--to-card-qty-size, var(--font-size-h6)); font-weight: var(--font-weight-bold); -moz-appearance: textfield; } .to-product-card__quantity .quantity::-webkit-inner-spin-button, .to-product-card__quantity .quantity::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .to-product-card__add { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); min-height: var(--to-card-add-height, 40px); height: var(--to-card-add-height, 40px); width: 100%; max-width: none; padding: var(--spacing-2) var(--spacing-3); color: var(--color-white) !important; font-size: var(--to-card-add-size, var(--font-size-h6)); font-weight: var(--to-card-add-weight, var(--font-weight-bold)); background: var(--to-card-add-bg, var(--color-success)) !important; border-color: var(--to-card-add-bg, var(--color-success)) !important; border-radius: var(--border-radius-sm); } #snackys-tpl .wi-crossselling-list .to-product-card__add { gap: 0; } #snackys-tpl .wi-crossselling-list .to-product-card__basket .to-product-card__add .to-product-card__add-label { display: none !important; } .to-product-card__cart-icon, .to-product-card__cart-icon svg { display: block; flex: 0 0 auto; width: 23px; height: 23px; } .to-product-card__cart-icon svg, .to-product-card__cart-icon path { fill: currentColor !important; stroke: none !important; stroke-width: 0 !important; } .to-product-card__sold-out, .to-product-card__details { display: flex; width: 100%; min-height: var(--to-card-add-height, 40px); align-items: center; justify-content: center; color: var(--to-card-soldout-color) !important; font-weight: var(--font-weight-bold); background: var(--color-white); border: var(--to-card-border-width) solid var(--to-card-soldout-border); border-color: var(--color-tertiary-75); border-radius: var(--to-card-radius); } .to-product-card__sold-out { font-weight: var(--font-weight-regular, 400); font-size: var(--font-size-normal); background: var(--color-danger-soft); color: var(--color-danger) !important; border: 0; opacity: 1; } .to-product-card__sold-out > svg { display: block; flex: 0 0 23px; width: 23px; height: 23px; fill: currentColor; stroke: none; } .to-product-card__sold-out-icon { display: none; flex: 0 0 auto; width: 22px; height: 22px; } .to-product-card__sold-out-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; } .to-product-card__sold-out-label { min-width: 0; overflow: hidden; white-space: nowrap; } .to-product-card__sold-out-track { display: inline-block; width: max-content; white-space: nowrap; } .to-product-card__sold-out-label.is-marquee .to-product-card__sold-out-track { animation: to-product-card-sold-out-marquee var(--to-marquee-duration, 5s) ease-in-out infinite alternate; } @keyframes to-product-card-sold-out-marquee { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(calc(-1 * var(--to-marquee-shift, 0px))); } } @media (max-width: 1199px) { #p-l.list, #result-wrapper #p-l, .opc-ProductStream.list, .opc-ProductStream.opc-ProductStream-list, .product-list.list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .to-product-card { --to-card-media-col: 140px; --to-card-gap: var(--spacing-4); max-width: 100%; } .to-product-card__title { font-size: var(--font-size-h6) !important; } } @media (max-width: 991px) { .to-product-card { --to-card-media-col: 120px; } } @media (max-width: 1199px) { #p-l.list, #result-wrapper #p-l, .opc-ProductStream.list, .opc-ProductStream.opc-ProductStream-list, .product-list.list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); width: 100%; margin-right: 0; margin-left: 0; } #p-l.list > .to-listing-group-wrap, #result-wrapper #p-l > .to-listing-group-wrap, .opc-ProductStream.list > .to-listing-group-wrap, .product-list.list > .to-listing-group-wrap { grid-column: 1 / -1; } #p-l.list > .to-listing-group-break, #result-wrapper #p-l > .to-listing-group-break, .opc-ProductStream.list > .to-listing-group-break, .product-list.list > .to-listing-group-break { height: 0; } #p-l.list > .p-w, #p-l.list > .p-w.col-12, #result-wrapper #p-l > .p-w, #result-wrapper #p-l > .p-w.col-12, .opc-ProductStream.list > .product-wrapper, .product-list.list > .product-wrapper { flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; } .to-listing-group { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: var(--spacing-2); min-height: 0; padding: var(--spacing-3) var(--spacing-4); text-align: left; } .to-listing-group__count { position: absolute; top: 0; right: 0; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; padding: 0; border-radius: 0 0 0 var(--border-radius-sm); color: var(--color-primary-100); background: var(--color-white); font-size: 16px; } .to-listing-group__text, .to-listing-group__usps { display: none; } .to-listing-group__logo, .to-listing-group--original .to-listing-group__logo { max-width: calc(100px * var(--brand-logo-scale, 1)); margin-bottom: 0; } .to-listing-group__brand, .to-listing-group__title { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-h6); } /**/ .to-product-card, #p-l .to-product-card, #p-l.list .to-product-card, #result-wrapper #p-l .to-product-card, #result-wrapper .to-product-card, .opc-ProductStream .to-product-card, .product-list .to-product-card { display: flex !important; flex-direction: column; align-items: stretch !important; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; column-gap: 0; row-gap: 0; gap: 0; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0; padding: var(--spacing-3); border-width: 1px; --to-card-title-size: 16px; --to-card-media-col: auto; } .to-product-card__media { display: flex; width: 100%; aspect-ratio: 1 / 1; min-height: 0; overflow: visible; background: transparent; } .to-product-card__visual { order: 1; grid-area: auto; width: 100%; height: auto; min-height: 0; align-self: stretch; } .to-product-card__visual:not(.to-product-card__visual--facts) { margin-bottom: var(--spacing-3); } .to-product-card__image { padding: var(--spacing-3); background: transparent; overflow: hidden; border-radius: var(--border-radius-sm); } .to-product-card__rating { display: flex; order: 2; grid-area: auto; max-width: 100%; } .to-product-card__rating-word { display: none; } .to-product-card__xl-badge { top: -1px; right: -1px; } #p-l .to-product-card, #result-wrapper .to-product-card, .opc-ProductStream .to-product-card, .product-list .to-product-card { --to-card-title-size: 16px; --to-card-title-line: 1.35; } /**/ #snackys-tpl #p-l h2.to-product-card__title, #snackys-tpl #result-wrapper h2.to-product-card__title, #snackys-tpl .opc-ProductStream h2.to-product-card__title, #snackys-tpl .product-list h2.to-product-card__title, #p-l .to-product-card__title, #result-wrapper .to-product-card__title, .opc-ProductStream .to-product-card__title, .product-list .to-product-card__title { display: -webkit-box !important; flex: 0 0 auto; order: 3; grid-area: auto; box-sizing: border-box; width: 100%; height: auto !important; min-height: calc(16px * 1.35 * 2); max-height: calc(16px * 1.35 * 2); margin: var(--spacing-2) 0 var(--spacing-2) !important; overflow: hidden; font-size: 16px !important; line-height: 1.35 !important; letter-spacing: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } #snackys-tpl #p-l h2.to-product-card__title a, #snackys-tpl #result-wrapper h2.to-product-card__title a, #snackys-tpl .opc-ProductStream h2.to-product-card__title a, #snackys-tpl .product-list h2.to-product-card__title a, #p-l .to-product-card__title a, #result-wrapper .to-product-card__title a, .opc-ProductStream .to-product-card__title a, .product-list .to-product-card__title a { display: inline; overflow: visible; font-size: 16px !important; line-height: 1.35 !important; letter-spacing: normal; } .to-product-card__facts { position: relative; right: auto; bottom: auto; left: auto; margin: var(--spacing-3) 0; } #snackys-tpl .to-product-card .to-search-product__variant, #snackys-tpl .to-product-card .to-search-product__variant.is-active, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant, #snackys-tpl .to-product-card .to-search-product__tabs.is-solo .to-search-product__variant.is-active { height: 30px; padding: 3px; } #snackys-tpl .to-product-card .to-search-swatch, #snackys-tpl .to-product-card .to-search-swatch.is-group, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) { gap: 2px; } #snackys-tpl .to-product-card .to-search-swatch i, #snackys-tpl .to-product-card .to-search-swatch.is-group i, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) i { width: 22px; min-width: 22px; height: 22px; font-size: 14px; } #snackys-tpl .to-product-card .to-search-swatch.is-group i, #snackys-tpl .to-product-card .to-search-swatch:has(i + i + i + i) i { flex: 0 0 auto; width: auto; white-space: nowrap; } #snackys-tpl .to-product-card .to-search-swatch__times, #snackys-tpl .wi-crossselling-slider .to-crossselling-card__facts .to-search-swatch__times, #snackys-tpl .wi-crossselling-list .to-product-card__facts .to-search-swatch__times { height: 22px; min-width: 22px; font-size: 14px; } #snackys-tpl .to-pdp__facts-and-actions .to-search-swatch__times, #snackys-tpl .product-attributes.p-att .to-search-swatch__times { height: 25px; min-width: 25px; font-size: 16px; } #snackys-tpl .to-product-card .to-search-swatch i.is-tri span, #snackys-tpl .wi-crossselling-list .to-search-swatch i.is-tri span { flex: 0 0 15px; width: 15px; height: 15px; } #snackys-tpl .to-product-card .to-search-swatch i.is-tri span:nth-child(2), #snackys-tpl .to-product-card .to-search-swatch i.is-tri span:nth-child(3), #snackys-tpl .wi-crossselling-list .to-search-swatch i.is-tri span:nth-child(2), #snackys-tpl .wi-crossselling-list .to-search-swatch i.is-tri span:nth-child(3) { margin-left: -5px; } .to-product-card__commerce { display: flex; order: 4; grid-area: auto; width: 100%; flex-direction: column; align-items: stretch; gap: var(--spacing-1); padding: 0; } .to-product-card__basket { width: 100%; min-width: 0; align-items: stretch; order: 2; } .to-product-card__wishlist-form { display: none; } .to-product-card__price-box, .to-product-card__price-box--single { order: 1; width: 100%; margin: 0; padding: 0; background: transparent; } .to-product-card__price { display: block; height: auto; margin: 0; min-width: 0; padding: 0; font-size: var(--font-size-h6); text-align: left; background: transparent; } .to-product-card__price::after { display: none; } .to-product-card__price-box--single .to-product-card__price { display: block; text-align: right; } #p-l .to-product-card--model-listing .to-product-card__alt-offer, #result-wrapper .to-product-card--model-listing .to-product-card__alt-offer { flex-direction: column; align-items: stretch; gap: var(--spacing-3); } #p-l .to-product-card--model-listing .to-product-card__alt-offer-btn, #result-wrapper .to-product-card--model-listing .to-product-card__alt-offer-btn { align-self: stretch; width: 100%; } .to-product-card__alt-offer-only { display: none; } .to-product-card__alt-offer-desktop { display: none; } .to-product-card__alt-offer-mobile { display: inline; } #p-l .to-product-card__bulk-row, #result-wrapper .to-product-card__bulk-row, .opc-ProductStream .to-product-card__bulk-row, .product-list .to-product-card__bulk-row { grid-template-columns: minmax(0, 1fr) auto; } #p-l .to-product-card__bulk-prices strong, #result-wrapper .to-product-card__bulk-prices strong, .opc-ProductStream .to-product-card__bulk-prices strong, .product-list .to-product-card__bulk-prices strong { display: none; } #p-l .to-product-card__bulk-prices span:last-child, #result-wrapper .to-product-card__bulk-prices span:last-child, .opc-ProductStream .to-product-card__bulk-prices span:last-child, .product-list .to-product-card__bulk-prices span:last-child { justify-self: end; text-align: right; } #p-l .to-product-card__buy-row, #result-wrapper .to-product-card__buy-row, .opc-ProductStream .to-product-card__buy-row, .product-list .to-product-card__buy-row { display: flex; flex: 0 0 auto; align-items: stretch; justify-content: flex-start; gap: var(--spacing-2); width: 100%; min-width: 0; } #p-l .to-product-card__quantity, #p-l .to-product-card__quantity.btn-group, #result-wrapper .to-product-card__quantity, #result-wrapper .to-product-card__quantity.btn-group, .opc-ProductStream .to-product-card__quantity, .opc-ProductStream .to-product-card__quantity.btn-group, .product-list .to-product-card__quantity, .product-list .to-product-card__quantity.btn-group { display: grid !important; flex: 0 0 auto; grid-template-columns: 24px 36px 24px; width: 88px; height: 34px; min-height: 34px; margin: 0; overflow: hidden; border: 2px solid var(--to-card-qty-border, var(--color-tertiary-75)); border-radius: var(--border-radius-sm); } #p-l .to-product-card__quantity .btn, #result-wrapper .to-product-card__quantity .btn, .opc-ProductStream .to-product-card__quantity .btn, .product-list .to-product-card__quantity .btn { display: flex !important; align-items: center; justify-content: center; width: 24px; height: 100%; margin: 0; padding: 0; border: 0; background: var(--color-white); } #p-l .to-product-card__quantity .quantity, #result-wrapper .to-product-card__quantity .quantity, .opc-ProductStream .to-product-card__quantity .quantity, .product-list .to-product-card__quantity .quantity { display: flex; width: 100%; height: 100%; border-right: 2px solid var(--to-card-qty-border, #9cb7ee); border-left: 2px solid var(--to-card-qty-border, #9cb7ee); font-size: 16px !important; } #p-l .to-product-card__quantity .btn svg, #result-wrapper .to-product-card__quantity .btn svg, .opc-ProductStream .to-product-card__quantity .btn svg, .product-list .to-product-card__quantity .btn svg { width: 14px; height: 14px; } .to-product-card__sold-out, .to-product-card__details { width: 100%; max-width: none; min-height: var(--to-card-add-height, 40px); font-size: var(--to-card-add-size, var(--font-size-h6)); } .to-product-card__sold-out { flex: 1 1 auto; width: auto; min-width: 0; height: 34px; min-height: 34px; max-height: 34px; padding: 0; font-size: 16px; } .to-product-card__sold-out { gap: var(--spacing-1); } .to-product-card__sold-out-icon { display: block; } .to-product-card__sold-out-label { flex: 1 1 auto; width: auto; height: auto; margin: 0; clip: auto; border: 0; } #p-l .to-product-card__add, #result-wrapper .to-product-card__add, .opc-ProductStream .to-product-card__add, .product-list .to-product-card__add { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: 34px; min-height: 34px; margin: 0; padding: 0 var(--spacing-2); gap: var(--spacing-2); font-size: 13.3px; } #p-l .to-product-card__add .to-product-card__cart-icon, #p-l .to-product-card__add .to-product-card__cart-icon svg, #result-wrapper .to-product-card__add .to-product-card__cart-icon, #result-wrapper .to-product-card__add .to-product-card__cart-icon svg, .opc-ProductStream .to-product-card__add .to-product-card__cart-icon, .opc-ProductStream .to-product-card__add .to-product-card__cart-icon svg, .product-list .to-product-card__add .to-product-card__cart-icon, .product-list .to-product-card__add .to-product-card__cart-icon svg { width: 22px; height: 22px; } #p-l .to-product-card__add-label, #result-wrapper .to-product-card__add-label, .opc-ProductStream .to-product-card__add-label, .product-list .to-product-card__add-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } @media (max-width: 767px) { #p-l.list, #result-wrapper #p-l, .opc-ProductStream.list, .opc-ProductStream.opc-ProductStream-list, .product-list.list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 575px) { #p-l.list, #result-wrapper #p-l, .opc-ProductStream.list, .opc-ProductStream.opc-ProductStream-list, .product-list.list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #snackys-tpl .pl-heading .sc-w.row-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-6); width: 100%; margin: 0 0 var(--spacing-8); } #snackys-tpl .pl-heading .sc-w.row-multi > [class*="col-"] { float: none; width: auto; min-width: 0; max-width: none; padding: 0; } #snackys-tpl .pl-heading .sc-w .thumbnail { display: flex; flex-direction: column; height: 100%; margin: 0; padding: var(--spacing-4) var(--spacing-6); overflow: hidden; border: 2px solid var(--color-primary-100); border-radius: var(--border-radius-sm); background: var(--color-white); } #snackys-tpl .pl-heading .sc-w .thumbnail:hover, #snackys-tpl .pl-heading .sc-w .thumbnail:focus-within { background: var(--color-bg-surface); } #snackys-tpl .pl-heading .sc-w .img-w { display: block; margin-bottom: var(--spacing-4); } #snackys-tpl .pl-heading .sc-w .img-ct { overflow: hidden; border: 0; border-radius: var(--border-radius-sm); background: var(--color-white); } #snackys-tpl .pl-heading .sc-w .img-ct img { display: block; width: 100%; height: auto; object-fit: contain; } #snackys-tpl .pl-heading .sc-w .thumbnail .title, #snackys-tpl .pl-heading .sc-w .thumbnail a.title { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin: 0; color: var(--color-primary-100) !important; font-family: var(--font-family-base); font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); line-height: 1.2; text-align: left; text-decoration: none !important; } #snackys-tpl .pl-heading .sc-w .thumbnail .title::after { flex: 0 0 30px; width: 30px; height: 30px; background-color: var(--color-primary-100); content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h7'/%3E%3C/svg%3E") center / contain no-repeat; } #snackys-tpl .pl-heading .sc-w .item_desc { margin: var(--spacing-2) 0 0; color: var(--color-primary-100); font-size: var(--font-size-normal); } @media (max-width: 767px) { #snackys-tpl .pl-heading .sc-w.row-multi { gap: var(--spacing-4); } #snackys-tpl .pl-heading .sc-w .thumbnail { padding: var(--spacing-4); } #snackys-tpl .pl-heading .sc-w .thumbnail .title, #snackys-tpl .pl-heading .sc-w .thumbnail a.title { font-size: var(--font-size-normal); } } /**/ #snackys-tpl .to-listing-pagination { display: flex; justify-content: center; width: 100%; margin: var(--spacing-8) 0 var(--spacing-12); } #snackys-tpl .to-listing-pagination:not(.is-paged) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; pointer-events: none; } #snackys-tpl .to-listing-pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; } #snackys-tpl .to-listing-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--spacing-2); border: 1.5px solid var(--color-primary-100); border-radius: var(--border-radius-sm); color: var(--color-primary-100) !important; font-family: var(--font-family-base); font-size: var(--font-size-normal); font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none !important; background: var(--color-white); } #snackys-tpl .to-listing-pagination__link:hover, #snackys-tpl .to-listing-pagination__link:focus, #snackys-tpl .to-listing-pagination__link.is-active, #snackys-tpl .to-listing-pagination__item.is-active .to-listing-pagination__link { color: var(--color-white) !important; background: var(--color-primary-100); } /**/ #p-l > .to-listing-load-marker { display: none; } #p-l.is-endless-loading > .to-listing-load-marker ~ .p-w:not(.to-listing-skel-wrap), #p-l.is-endless-loading > .to-listing-load-marker ~ .to-listing-group-break, #p-l.is-endless-loading > .to-listing-load-marker ~ .pagination-url { visibility: hidden !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; } .to-listing-skel { display: block; position: relative; overflow: hidden; background: var(--color-tertiary-50); border-radius: 4px; } .to-listing-skel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-140%); animation: to-listing-shimmer 0.85s ease-in-out infinite; pointer-events: none; } @keyframes to-listing-shimmer { 100% { transform: translateX(280%); } } .to-listing-group--skeleton { gap: var(--spacing-3); background: var(--color-tertiary-50) !important; color: transparent !important; pointer-events: none; } .to-listing-group--skeleton::before, .to-listing-group--skeleton::after { display: none !important; } .to-listing-skel--logo { width: min(140px, 42%); height: 22px; } .to-listing-skel--title { width: min(280px, 70%); height: 28px; margin-top: var(--spacing-2); } .to-listing-skel--text { width: min(420px, 88%); height: 12px; } .to-listing-skel--text-short { width: min(260px, 55%); } .to-listing-skel--usp { width: min(320px, 72%); height: 14px; margin-top: var(--spacing-2); } .to-listing-skel--count { position: absolute; top: var(--spacing-6); right: var(--spacing-6); width: 2rem; height: 2rem; border-radius: 50%; } .to-product-card--skeleton { pointer-events: none; cursor: default; grid-template-areas: "visual commerce"; grid-template-rows: minmax(0, 1fr); } .to-product-card--skeleton .to-product-card__visual, .to-product-card--skeleton .to-product-card__commerce { display: flex; flex-direction: column; gap: var(--spacing-2); } .to-product-card--skeleton .to-product-card__commerce { grid-area: commerce; justify-content: flex-start; } .to-product-card--skeleton .to-product-card__media { position: relative; width: 100%; aspect-ratio: 1 / 1; background: transparent; } .to-listing-skel--kind { position: absolute; top: 0; left: 0; z-index: 1; width: 110px; height: 22px; border-radius: var(--border-radius-sm) 0 var(--border-radius-xs) 0; } .to-listing-skel--image { position: absolute; inset: var(--spacing-6); width: auto; height: auto; border-radius: var(--border-radius-sm); } .to-listing-skel--rating { width: 88px; height: 12px; } .to-listing-skel--card-title { width: 100%; height: 14px; } .to-listing-skel--card-title-short { width: 68%; } .to-listing-skel--facts { width: 70%; height: 28px; margin-top: var(--spacing-2); } .to-listing-skel--price { width: 96px; height: 24px; margin-top: auto; } .to-listing-skel--buy { width: 100%; height: 40px; border-radius: var(--border-radius-sm); } @media (prefers-reduced-motion: reduce) { .to-listing-skel::after { animation: none; } } /**/ @media (max-width: 1199px) { #snackys-tpl .to-product-card, #snackys-tpl #p-l .to-product-card, #snackys-tpl #p-l.list .to-product-card, #snackys-tpl #result-wrapper #p-l .to-product-card, #snackys-tpl #result-wrapper .to-product-card, #snackys-tpl .opc-ProductStream .to-product-card, #snackys-tpl .product-list .to-product-card { border-width: 2px !important; } html#snackys-tpl .opc-ProductStream-list, #snackys-tpl #p-l.list, #snackys-tpl #result-wrapper #p-l, #snackys-tpl .opc-ProductStream.list, #snackys-tpl .opc-ProductStream-list, #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 991px) { html#snackys-tpl .opc-ProductStream-list, #snackys-tpl #p-l.list, #snackys-tpl #result-wrapper #p-l, #snackys-tpl .opc-ProductStream.list, #snackys-tpl .opc-ProductStream-list, #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list, html#snackys-tpl .opc-ProductStream-list, #snackys-tpl #p-l.list, #snackys-tpl #result-wrapper #p-l, #snackys-tpl .opc-ProductStream.list, #snackys-tpl .opc-ProductStream-list, #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 575px) { #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list, html#snackys-tpl .opc-ProductStream-list, #snackys-tpl #p-l.list, #snackys-tpl #result-wrapper #p-l, #snackys-tpl .opc-ProductStream.list, #snackys-tpl .opc-ProductStream-list, #snackys-tpl .opc-ProductStream.opc-ProductStream-list, #snackys-tpl .product-list.list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 575px) { .to-product-card, #p-l .to-product-card, #p-l.list .to-product-card, #result-wrapper #p-l .to-product-card, #result-wrapper .to-product-card, .opc-ProductStream .to-product-card, .product-list .to-product-card { padding: var(--spacing-2); } } @media (max-width: 575px) { #snackys-tpl .to-product-card .to-product-card__delivery:not(.is-out) { display: none !important; } } @media (max-width: 575px) { /**/ #snackys-tpl #p-l .to-product-card:has(.wi-marketing-badge) :is(.to-product-card__commerce, .to-product-card__price-box, .to-product-card__price-row, .to-product-card__main-price-wrap, .wi-marketing-price-meta) { position: static; } #snackys-tpl #p-l .to-product-card .wi-marketing-badge { position: absolute; top: -1px; left: -1px; right: auto; bottom: auto; z-index: 4; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--border-radius-sm) 0 var(--border-radius-xs) 0; } #snackys-tpl #p-l .to-product-card:has(.wi-marketing-badge) .to-product-card__kind { margin-top: calc(1.2 * var(--font-size-xs, 13.3px) + 2 * var(--spacing-1)); } } @media (max-width: 1199px) { #result-wrapper { margin-top: var(--spacing-4); } } /**/ @media (max-width: 767px) { #snackys-tpl #p-l .to-product-card .to-search-product__stats { min-height: 40px; padding: 0 var(--spacing-2); } #snackys-tpl #p-l .to-product-card .to-search-product__stat-icon { flex: 0 0 16px; width: 16px; height: 16px; } #snackys-tpl #p-l .to-product-card .to-search-product__stat-divider { height: 22px; margin: 0 var(--spacing-2); } #snackys-tpl #p-l .to-product-card .to-search-product__stat-copy, #snackys-tpl #p-l .to-product-card .to-search-product__stat-copy strong, #snackys-tpl #p-l .to-product-card .to-search-product__stat-copy span { font-size: var(--font-size-xs, 13.3px); line-height: 13px; } } @media (max-width: 575px) { #snackys-tpl #p-l .to-product-card .to-search-product__stat { gap: var(--spacing-1); } }