:root { --to-header-height: 60px; --to-header-container: 1504px; --to-header-nav-height: 44px; } html#snackys-tpl, html#snackys-tpl body { overscroll-behavior-y: none; } #snackys-tpl .mw-container { padding-left: var(--spacing-16, 64px); padding-right: var(--spacing-16, 64px); max-width: var(--to-header-container, 1504px); } @media (max-width: 1199px) { #snackys-tpl .mw-container { padding-right: var(--spacing-8); padding-left: var(--spacing-8); } } @media (max-width: 991px) { #snackys-tpl .mw-container { padding-right: var(--spacing-4); padding-left: var(--spacing-4); } } #snackys-tpl #top-bar-wrapper { min-height: 28px; border: 0; background: var(--color-primary-100); color: var(--color-white); } #snackys-tpl #top-bar { min-height: 28px; max-width: var(--to-header-container); padding: 0 var(--spacing-16); color: var(--color-white); font-family: var(--font-family-base); font-size: 11px; line-height: 1; } #snackys-tpl #top-bar a, #snackys-tpl #top-bar a:visited, #snackys-tpl #top-bar a:hover, #snackys-tpl #top-bar a:focus, #snackys-tpl #top-bar .active > a { color: var(--color-white); } #snackys-tpl #top-bar .list-inline > li { padding-right: var(--spacing-8); padding-left: var(--spacing-8); } #snackys-tpl #top-bar .list-inline > li:first-child { padding-left: 0; } #snackys-tpl .to-topbar__tools, #snackys-tpl .to-topbar__account { display: flex; align-items: center; } #snackys-tpl .to-topbar__tools { gap: var(--spacing-6); margin-left: auto; } #snackys-tpl .to-topbar__settings { margin: 0; } #snackys-tpl .to-topbar__account { gap: var(--spacing-2); min-height: 28px; font-size: 11px; font-weight: var(--font-weight-bold); text-transform: uppercase; } #snackys-tpl .to-topbar__account .caret { margin: 0 0 0 var(--spacing-1); border-top-color: var(--color-white); } #snackys-tpl #shop-nav { min-height: var(--to-header-height); margin: 0; padding: 0; border: 0; background: var(--color-primary-100); } #snackys-tpl #shop-nav > .mw-container { display: grid; grid-template-areas: "logo reviews actions"; grid-template-columns: minmax(190px, 1fr) minmax(360px, auto) minmax(260px, 1fr); align-items: center; min-height: var(--to-header-height); max-width: var(--to-header-container); margin: 0 auto; padding: 0 var(--spacing-16); } #snackys-tpl #shop-nav > .mw-container > [class*="col-"], #snackys-tpl #shop-nav .to-header__logo, #snackys-tpl #shop-nav .to-header__actions { width: auto; min-height: 0; padding: 0; } #snackys-tpl .to-header__logo { grid-area: logo; display: flex; align-items: center; justify-content: flex-start; height: 35px; text-align: left; } #snackys-tpl .to-header__logo a { display: flex; align-items: center; justify-content: flex-start; width: auto; max-width: 200px; height: 35px; } #snackys-tpl .to-header__logo img { width: auto; max-width: 200px; height: auto; max-height: 35px; margin: 0; object-fit: contain; object-position: left center; } #snackys-tpl .to-header__reviews { grid-area: reviews; display: flex; align-items: center; justify-content: center; min-width: 360px; max-width: 520px; min-height: 1px; color: var(--color-white); } #snackys-tpl .to-header__reviews-data { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-family-base); font-size: 18px; line-height: 1; white-space: nowrap; } #snackys-tpl .to-header__reviews-logo { width: 35px; height: 35px; margin-right: 4px; } #snackys-tpl .to-header__reviews-stars { color: var(--color-warning); font-family: var(--font-family-base); font-size: 17.5px; letter-spacing: .125em; } #snackys-tpl .to-header__reviews-score { color: var(--color-white); font-size: 20px; font-weight: var(--font-weight-bold); } #snackys-tpl .to-header__reviews-label, #snackys-tpl .to-header__reviews-count { font-size: 16px; } @media (max-width: 1399px) { #snackys-tpl .to-header__reviews-count.is-logged-in { display: none; } } #snackys-tpl .to-header__actions { grid-area: actions; justify-self: end; } #snackys-tpl .to-header__search { grid-area: search; } #snackys-tpl #shop-nav .to-header__search form { position: relative; display: flex; width: 100%; max-width: 480px; margin: 0; } #snackys-tpl #shop-nav .to-header__search input { width: 100%; height: 40px; margin: 0; padding: 0 44px 0 var(--spacing-3); border: 0; border-radius: var(--border-radius-sm); background: var(--color-white); color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 15px; line-height: 1; } #snackys-tpl #shop-nav .to-header__search input::placeholder { color: var(--color-secondary-75); opacity: 1; } #snackys-tpl #shop-nav .to-header__search #search-submit-button { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--color-primary-100); } #snackys-tpl #shop-nav .to-header__search .to-header-search__icon { width: 18px; height: 18px; fill: currentColor; } @media (min-width: 768px) { #snackys-tpl #shop-nav .to-header__search { display: none; } #snackys-tpl #shop-nav .wish-list-menu { display: block !important; } } #snackys-tpl #shop-nav .hdr-nav { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--spacing-6); align-items: center; justify-content: flex-end; } #snackys-tpl #shop-nav .hdr-nav > div, #snackys-tpl #shop-nav .hdr-nav > div:not(:first-child) { margin: 0; } #snackys-tpl #shop-nav .hdr-l { color: var(--color-white); } #snackys-tpl #shop-nav .hdr-nav .icon-xl { display: flex; align-items: center; justify-content: center; width: 20px; min-width: 20px; height: 20px; } #snackys-tpl svg.to-ui-icon { display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl #shop-nav .hdr-nav .icon-xl svg, #snackys-tpl #shop-nav .hdr-nav .hdr-l:hover .icon-xl svg, #snackys-tpl #shop-nav .hdr-nav .hdr-l:focus .icon-xl svg { fill: var(--color-white); } #snackys-tpl #shop-nav .hdr-nav svg.to-header-icon { fill: currentColor; stroke: none !important; } #snackys-tpl #shop-nav .hdr-nav .to-header-account svg.to-header-icon { stroke: currentColor !important; stroke-width: .25; paint-order: stroke fill; } #snackys-tpl #shop-nav .hdr-nav .to-header-account > .hdr-l { display: flex; align-items: center; gap: var(--spacing-3); position: relative; } #snackys-tpl #shop-nav .to-header-account__icon-wrap { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; } #snackys-tpl #shop-nav .hdr-nav .to-header-account.dropdown { display: flex; align-items: center; gap: var(--spacing-3); box-sizing: border-box; min-height: 36px; margin-right: -1em; padding: 0 var(--spacing-3); padding-right: 25px; border: 2px solid var(--color-primary-75); border-radius: var(--border-radius-sm); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 1px); background-size: 15px; box-shadow: inset -18px 0 0 #3f5aae45; } #snackys-tpl #shop-nav .hdr-nav .to-header-account.dropdown:not(.is-logged-in) { margin-right: 0; padding: 0; border: 0; background-color: transparent; background-image: none; box-shadow: none; } #snackys-tpl #shop-nav .hdr-nav .to-header-account.is-logged-in > .hdr-l .icon-xl { width: 18px; min-width: 18px; height: 18px; } #snackys-tpl #shop-nav .to-header-account__greeting { display: flex; flex-direction: column; color: var(--color-white); font-size: var(--font-size-xs, 12px); line-height: 1; white-space: nowrap; } #snackys-tpl #shop-nav .to-header-account__greeting-name, #snackys-tpl #shop-nav .to-header-account__greeting-account { display: block; } #snackys-tpl #shop-nav .to-header-account__greeting-name { line-height: 1; } @media (max-width: 991.98px) { #snackys-tpl #shop-nav .to-header-account__greeting { display: none; } #snackys-tpl #shop-nav .hdr-nav .to-header-account.dropdown { padding-right: 30px; } } @media (max-width: 575.98px) { #snackys-tpl #shop-nav .hdr-nav .to-header-account.dropdown { min-height: 33px; } } #snackys-tpl #shop-nav .to-header-account__logged-check { position: absolute; right: -7px; bottom: -5px; z-index: 1; display: block; width: 15px; height: 15px; padding: 1px; border-radius: 7.5px; background: #002293; color: var(--color-white); pointer-events: none; } #snackys-tpl #shop-nav .to-header-account__logged-check svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl #shop-nav .hdr-nav .hdr-l:focus-visible, #snackys-tpl #cat-w .mm-mainlink:focus-visible, #snackys-tpl .to-topbar__account:focus-visible { outline: 2px solid var(--color-warning); outline-offset: 3px; } #snackys-tpl .to-header-clp__tab:focus, #snackys-tpl .to-header-clp__tab:focus-visible, #snackys-tpl .to-home-hero__tab:focus, #snackys-tpl .to-home-hero__tab:focus-visible, #snackys-tpl .to-search-tab:focus, #snackys-tpl .to-search-tab:focus-visible, #snackys-tpl .to-pdp-support__tab:focus, #snackys-tpl .to-pdp-support__tab:focus-visible, #snackys-tpl .to-search-product__variant:focus, #snackys-tpl .to-search-product__variant:focus-visible, #snackys-tpl [role="tab"]:focus, #snackys-tpl [role="tab"]:focus-visible { outline: none; } #snackys-tpl #shop-nav .hdr-nav .badge { top: -9px; right: -9px; background: var(--color-warning); color: var(--color-primary-100); } #snackys-tpl .to-header-cart { display: grid; grid-template-columns: 40px 88px 30px; align-items: center; width: 158px; min-height: 36px; overflow: hidden; border-radius: var(--border-radius-sm); background: var(--color-warning); color: var(--color-primary-100) !important; font-family: var(--font-family-base); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1; text-transform: uppercase; } #snackys-tpl .to-header-cart:hover, #snackys-tpl .to-header-cart:focus { background: var(--color-warning); color: var(--color-primary-100) !important; } #snackys-tpl .to-header-cart__icon { margin: 0 auto; } #snackys-tpl #shop-nav .hdr-nav .to-header-cart .to-header-cart__icon { width: 23px; min-width: 23px; height: 23px; } #snackys-tpl #shop-nav .hdr-nav .to-header-cart .to-header-cart__icon svg.to-header-icon, #snackys-tpl #shop-nav .hdr-nav .to-header-cart:hover .to-header-cart__icon svg.to-header-icon, #snackys-tpl #shop-nav .hdr-nav .to-header-cart:focus .to-header-cart__icon svg.to-header-icon { fill: var(--color-primary-100); } #snackys-tpl .to-header-cart__label { padding: 0; font-size: 16px; white-space: nowrap; } #snackys-tpl .to-header-cart__count { display: flex; align-items: center; align-self: stretch; justify-content: center; min-width: 30px; border-left: 1px solid rgba(0, 34, 147, .16); color: var(--color-primary-100); } /**/ #snackys-tpl .overlay-bg, #snackys-tpl .modal-backdrop { background: color-mix(in srgb, var(--color-primary-100) 75%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /**/ #snackys-tpl #shop-nav .cart-menu > .c-dp { position: fixed !important; top: 0; right: 0; bottom: 0; left: auto; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; transform: none !important; pointer-events: none; visibility: hidden; z-index: 10120; } #snackys-tpl #shop-nav .cart-menu.open > .c-dp { overflow: visible !important; pointer-events: auto; visibility: visible; } /**/ #snackys-tpl #shop-nav .cart-menu > .c-dp > .inside { position: fixed !important; top: 0; right: 0; bottom: 0; left: auto; width: 100%; max-width: 25rem; box-sizing: border-box; display: flex; flex-direction: column; pointer-events: auto; overflow-x: hidden; padding: 0; padding-block: var(--spacing-4) !important; } #snackys-tpl #shop-nav .cart-menu.open > .c-dp > .inside { visibility: visible; } #snackys-tpl #shop-nav .cart-menu .c-dp .sc-item .cols-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } @media screen and (max-width: 767px) { #snackys-tpl #shop-nav .cart-menu > .c-dp > .inside { max-width: min(320px, 100vw); } } /**/ #snackys-tpl body.sidebasket-open #shop-nav { position: relative !important; z-index: 10100 !important; } #snackys-tpl .cart-menu.open .overlay-bg, #snackys-tpl .cart-menu.open .c-dp > .overlay-bg { z-index: 10110 !important; } #snackys-tpl .cart-menu.open .c-dp, #snackys-tpl .cart-menu.open .c-dp > .inside, #snackys-tpl .cart-menu.open .c-dp > .close-sidebar { z-index: 10120 !important; } #snackys-tpl .c-dp .close-sidebar { top: 1rem !important; } .c-dp .close-sidebar, .c-dp .close-btn { outline: none; box-shadow: none; } .c-dp .close-sidebar:focus, .c-dp .close-sidebar:focus-visible, .c-dp .close-btn:focus, .c-dp .close-btn:focus-visible { outline: none; box-shadow: none; } /**/ [id^="trustbadge-container"] { z-index: 40 !important; } #snackys-tpl .c-dp .items-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; overflow: hidden; padding: 0; } .c-dp .items-list, .cart-menu { padding: 0 !important; } .cart-icon-dropdown .alert { margin-top: 0 !important; } #snackys-tpl .c-dp .to-sidebasket-title { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin-bottom: 0; } #snackys-tpl .c-dp .to-sidebasket-title__icon { width: 30px; height: auto; flex: 0 0 auto; fill: currentColor; } /**/ #snackys-tpl .c-dp .to-sidebasket-header { flex: 0 0 auto; padding-inline: var(--spacing-6); margin-bottom: var(--spacing-6); padding: 0 var(--spacing-4) var(--spacing-4) !important; text-align: left !important; border-bottom: 2px solid var(--color-tertiary-75); } #snackys-tpl .c-dp .to-sidebasket-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-inline: var(--spacing-6); } #snackys-tpl .c-dp .to-sidebasket-content .img-ct img { object-fit: contain; } #snackys-tpl .c-dp .to-sidebasket-footer { display: flex; flex-direction: column; flex: 0 0 auto; background: var(--color-white); padding-inline: var(--spacing-6); border-top: 2px solid var(--color-tertiary-75); box-shadow: 0px 5px 20px -5px #0000005e; } /**/ #snackys-tpl .c-dp .to-sidebasket-content:has(.c-empt) ~ .to-sidebasket-footer .add-pays, #snackys-tpl .c-dp .to-sidebasket-content:has(.c-empt) ~ .to-sidebasket-footer .payplan { display: none; } #snackys-tpl .c-dp { --ts-lg: var(--font-size-xs); --ts-md: var(--font-size-xs); --ts-sm: var(--font-size-xs); } #snackys-tpl .c-dp .small, #snackys-tpl .c-dp small { font-size: var(--font-size-xs); } #snackys-tpl .c-dp #cart-form-xs { flex: 1 1 auto; min-height: 0; overflow: auto; margin-bottom: 0; gap: .5em; } .cart-icon-dropdown.c-dp #cart-form-xs { gap: .5em; padding-bottom: var(--spacing-6); } /**/ #snackys-tpl .c-dp .sc-item.dropdown { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; grid-template-areas: "img name name name" "img price qty del"; column-gap: 0.35rem; row-gap: 0.35rem; align-items: center; } .cart-icon-dropdown .sc-item { padding: var(--spacing-3); border: 2px solid #d5d6dd; border-radius: .5em; } .wi-marketing-notice__inner { border-left: none !important; } .wi-marketing-notice__inner .wi-marketing-notice__list { list-style: none; padding: 0; } #snackys-tpl .c-dp .sc-item.dropdown > .flx-ac, #snackys-tpl .c-dp .sc-item.dropdown > .to-sidebasket-edit, #snackys-tpl .c-dp .sc-item.dropdown .collapse, #snackys-tpl .c-dp .sc-item.dropdown .edit-item { display: contents; } #snackys-tpl .c-dp .sc-item .cols-img { grid-area: img; width: 3.5rem; min-width: 3.5rem; align-self: center; } #snackys-tpl .c-dp .sc-item .cols-name { grid-area: name; margin: 0; padding-left: 0.65rem; } #snackys-tpl .c-dp .sc-item .cols-price { grid-area: price; margin-left: 0; padding-left: 0.65rem; font-size: 16px; } #snackys-tpl .c-dp .sc-item .cols-price strong { font-size: 16px; } #snackys-tpl .c-dp .sc-item .to-sidebasket-qty, #snackys-tpl .c-dp .sc-item .qty-wrapper { grid-area: qty; justify-self: end; } #snackys-tpl .c-dp .sc-item .droppos { grid-area: del; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; min-height: 25px; margin-left: 0; padding: 0; box-sizing: border-box; transform: none; } #snackys-tpl .c-dp .sc-item .droppos:hover, #snackys-tpl .c-dp .sc-item .droppos:focus, #snackys-tpl .c-dp .sc-item .droppos:focus-visible, #snackys-tpl .c-dp .sc-item .droppos:active { transform: none; } #snackys-tpl .c-dp .sc-item .droppos .icon.img-ct, #snackys-tpl .c-dp .sc-item .droppos svg { width: 12px; height: 12px; } #snackys-tpl .c-dp .sc-item .to-search-qty.is-loading, #snackys-tpl .c-dp .sc-item .droppos.is-loading { position: relative; overflow: hidden; background: var(--color-tertiary-50); border-color: transparent; color: transparent; pointer-events: none; } #snackys-tpl .c-dp .sc-item .to-search-qty.is-loading > *, #snackys-tpl .c-dp .sc-item .droppos.is-loading > * { visibility: hidden; } #snackys-tpl .c-dp .sc-item .to-search-qty.is-loading::after, #snackys-tpl .c-dp .sc-item .droppos.is-loading::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; } #snackys-tpl .c-dp .sc-item .to-sidebasket-qty { gap: 0.35rem; margin: 0; } #snackys-tpl .c-dp .sc-item .to-search-qty { display: grid; grid-template-columns: 22px 24px 22px; width: 68px; height: 25px; overflow: hidden; border: 1px solid var(--color-tertiary-75); border-radius: 4px; background: var(--color-white); } #snackys-tpl .c-dp .sc-item .to-search-qty__btn, #snackys-tpl .c-dp .sc-item .to-search-qty__input { display: grid; place-items: center; width: 100%; min-width: 0; height: 25px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--color-white); color: var(--color-neutral, #1a1a1a); font-family: inherit; font-size: 13px; font-weight: var(--font-weight-bold, 700); line-height: 1; box-shadow: none; appearance: none; } #snackys-tpl .c-dp .sc-item .to-search-qty__btn { cursor: pointer; } #snackys-tpl:not(.sidebar-cart-optimized) .c-dp .sc-item .to-search-qty { grid-template-columns: 24px !important; width: 24px !important; } #snackys-tpl:not(.sidebar-cart-optimized) .c-dp .sc-item .to-search-qty__btn { display: none !important; } #snackys-tpl .c-dp .sc-item .to-search-qty__btn svg { display: block; width: 12px; height: 12px; } #snackys-tpl .c-dp .sc-item .to-search-qty__btn:hover { background: var(--color-tertiary-50); } #snackys-tpl .c-dp .sc-item .to-search-qty__btn:disabled { opacity: .35; background: var(--color-white); cursor: default; } #snackys-tpl .c-dp .sc-item .to-search-qty__input { border-right: 1px solid var(--color-tertiary-75); border-left: 1px solid var(--color-tertiary-75); text-align: center; -moz-appearance: textfield; } #snackys-tpl .c-dp .sc-item .to-search-qty__input::-webkit-inner-spin-button, #snackys-tpl .c-dp .sc-item .to-search-qty__input::-webkit-outer-spin-button { margin: 0; appearance: none; } #snackys-tpl .c-dp .sc-item .to-search-qty.is-loading .to-search-qty__input { visibility: visible; background: var(--color-tertiary-50); color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; border-right-color: transparent; border-left-color: transparent; } #snackys-tpl .c-dp .sc-item .to-sidebasket-qty__refresh { display: grid; place-items: center; flex: 0 0 25px; width: 25px; min-width: 25px; height: 25px; min-height: 25px; padding: 0; } #snackys-tpl .c-dp .sc-item .to-sidebasket-qty__refresh .img-ct, #snackys-tpl .c-dp .sc-item .to-sidebasket-qty__refresh svg { display: block; width: 14px; height: 14px; } html.sidebar-cart-optimized .to-sidebasket-qty__refresh { display: none !important; } #snackys-tpl .c-dp .sc-sum, #snackys-tpl .c-dp .fixed-btn-group, #snackys-tpl .c-dp .add-pays, #snackys-tpl .c-dp .payplan { flex: 0 0 auto; background: var(--color-white); } #ppc-miniCart-horizontal-container { padding: 0 !important; } #snackys-tpl .c-dp .c-empt + p { font-size: 16px; } #snackys-tpl .c-dp .fixed-btn-group .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 52px; padding: 0.85rem 1.2rem; font-size: var(--tl-lg); font-weight: var(--font-weight-bold, 700); line-height: 1.2; } .cart-icon-dropdown .to-cart-checkout { text-transform: uppercase; } #snackys-tpl .c-dp .sc-sum { padding-top: var(--spacing-4); } #snackys-tpl body.sidebasket-open #cat-w, #snackys-tpl body.sidebasket-open .to-header-clp { z-index: 1; } #snackys-tpl #cat-w { top: 0; margin: 0; border: 0; background: var(--color-white); box-shadow: none; } #snackys-tpl body[data-page="3"] #cat-w { box-shadow: var(--shadow-md); } /**/ @media (min-width: 1200px) { #snackys-tpl:has(.to-header-clp:not([hidden])) #cat-w { position: relative; top: auto; } #snackys-tpl #cat-w > .mgm.mw-container { max-width: var(--to-header-container); margin: 0 auto; padding: 0 var(--spacing-12); } #snackys-tpl #cat-w #cat-ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); align-items: stretch; width: 100%; min-height: var(--to-header-nav-height); margin: 0; } #snackys-tpl #cat-w #cat-ul > li { position: relative; min-width: 0; overflow: visible; } #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--to-header-nav-height); padding: 0 var(--spacing-2); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; background: var(--color-white); color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1; text-align: center; text-transform: uppercase; transition: background-color .3s ease, color .3s ease; } #snackys-tpl #cat-w, #snackys-tpl #cat-w:hover, #snackys-tpl #cat-w:has(#cat-ul > li:hover), #snackys-tpl #cat-w:has(#cat-ul > li:focus-within) { background: var(--color-white); transition: background-color .3s ease; } #snackys-tpl #cat-w:has(#cat-ul > li.active) { background: var(--color-primary-100); } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li > .mm-mainlink { background: transparent; color: var(--color-white); } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.active > .mm-mainlink, #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li:hover > .mm-mainlink, #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li:focus-within > .mm-mainlink { background: var(--color-white); color: var(--color-primary-100); box-shadow: 0px 3px 0px #fff; } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.active > .mm-mainlink { border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw::before, #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw::after { content: ""; position: absolute; bottom: -1.5px; z-index: 0; display: block; width: 15px; height: 15px; pointer-events: none; opacity: 0; background-color: var(--color-white); 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; transition: opacity .3s ease; } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw::before { right: 100%; margin-right: -1px; transform: rotate(180deg); } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw::after { left: 100%; margin-left: -1px; transform: rotate(180deg) scaleX(-1); } #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw:is(:hover, :focus-within, .active)::before, #snackys-tpl #cat-w:has(#cat-ul > li.active) #cat-ul > li.mgm-fw:is(:hover, :focus-within, .active)::after { opacity: 1; } #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink > .caret, #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink > .fa-caret-down, #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink .fa-caret-down.visible-xs, #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink > .ar-r { display: none !important; } } /**/ @media (max-width: 1199px) { #snackys-tpl #top-bar, #snackys-tpl #shop-nav > .mw-container { padding-right: var(--spacing-8); padding-left: var(--spacing-8); } #snackys-tpl #shop-nav > .mw-container { grid-template-areas: "mobile logo reviews actions"; grid-template-columns: 30px minmax(170px, 1fr) minmax(280px, auto) minmax(200px, 1fr); column-gap: var(--spacing-4); align-items: center; } #snackys-tpl .to-header__reviews { min-width: 280px; } #snackys-tpl .to-header__reviews-count { display: none; } #snackys-tpl #shop-nav > .mw-container > .visible-xs { grid-area: mobile; position: relative; display: block !important; width: 30px; min-width: 30px; height: 30px; padding: 0; } #snackys-tpl #shop-nav #mob-nt { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--color-white); } #snackys-tpl #shop-nav #mob-nt .to-ui-icon { width: 25px; height: 25px; } #snackys-tpl #shop-nav #sr-tg-m { display: none !important; } #snackys-tpl .to-header__logo a, #snackys-tpl .to-header__logo img { max-width: 145px; max-height: 25px; } /**/ #snackys-tpl #cat-w { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 70; display: block; width: 20rem; max-width: 85vw; margin: 0; padding: 0; border: 0; background: var(--meg-b, var(--color-white)); box-shadow: none; transform: translateX(-120%); transition: transform .3s ease; visibility: hidden; overflow: hidden; } #snackys-tpl body.shw-sb #cat-w { transform: none; visibility: visible; } #snackys-tpl #cls-catw { display: block; } #snackys-tpl body.shw-sb #cls-catw { z-index: 65; opacity: 1; transform: none; pointer-events: auto; } #snackys-tpl #cat-w > .mgm.mw-container, #snackys-tpl #cat-w > .mw-container { max-width: none; height: 100%; margin: 0; padding: 0; } #snackys-tpl #cat-w #cat-ul, #snackys-tpl #cat-w .blanklist { display: block; position: relative; width: 100%; min-height: 0; height: 100%; margin: 0; padding: 0; } #snackys-tpl #cat-w > .mw-container > .blanklist { top: 5rem; height: calc(100% - 5rem); padding-bottom: 4rem; overflow: auto; } #snackys-tpl #cat-w #cat-ul > li, #snackys-tpl #cat-w li { position: static; width: 100%; min-width: 0; border-bottom: 1px solid var(--hr-li, rgba(0, 0, 0, .08)); box-shadow: none; overflow: visible; } #snackys-tpl #cat-w #cat-ul > li > .mm-mainlink, #snackys-tpl #cat-w .mm-mainlink, #snackys-tpl #cat-w a { position: relative; display: block; width: auto; height: auto; padding: .7rem 2.5rem .7rem 1.25rem; border-radius: 0; background: transparent; color: var(--meg-l, var(--color-primary-100)); font-size: 16px; font-weight: 600; line-height: 1.1; text-align: left; text-transform: none; white-space: normal; } #snackys-tpl #cat-w #cat-ul > li.mgm-fw::before, #snackys-tpl #cat-w #cat-ul > li.mgm-fw::after { content: none !important; display: none !important; } #snackys-tpl #cat-w .mm-mainlink .fa-caret-down.visible-xs, #snackys-tpl #cat-w .fa-caret-down.visible-xs { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: flex !important; align-items: center; justify-content: center; width: 2.5rem; height: 100%; background: none; } #snackys-tpl #cat-w .hidden-xs, #snackys-tpl #cat-w .ar.hidden-xs { display: none !important; } #snackys-tpl #cat-w .home-icon + .visible-xs, #snackys-tpl #cat-w .menu-title { display: flex; } #snackys-tpl #cat-w .mgm-c { height: 100%; max-height: none; margin: 0; padding: 0; transform: none; opacity: 1; } #snackys-tpl #cat-w .dropdown-menu, #snackys-tpl #cat-w .subsub, #snackys-tpl #cat-w .mgm .dropdown-menu { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block !important; max-height: none; margin: 0; padding: 0; visibility: hidden; background: var(--meg-b, var(--color-white)); opacity: 1 !important; pointer-events: auto !important; transform: translateX(-100%); transition: transform .3s ease, visibility .3s ease; } #snackys-tpl #cat-w .open > .dropdown-menu, #snackys-tpl #cat-w .open > .subsub, #snackys-tpl #cat-w .open > .row > .row .col-12 > .subsub { max-height: 100%; overflow: auto; visibility: visible; transform: none; } #snackys-tpl #cat-w .menu-title { position: absolute; top: 0; right: 0; left: 0; height: 5rem; padding: 0 1.25rem; } } @media (max-width: 1199.98px) { #snackys-tpl .to-header__reviews { display: none; } } @media (max-width: 991px) { #snackys-tpl #shop-nav > .mw-container { grid-template-areas: "mobile logo actions"; grid-template-columns: 30px minmax(170px, 1fr) auto; } } @media (max-width: 767px) { :root { --to-header-height: 45px; } #snackys-tpl #shop-nav { z-index: 55; min-height: 45px; height: 45px; max-height: 45px; padding: 0; border-bottom: 0; overflow: visible; } #snackys-tpl #shop-nav > .mw-container { grid-template-areas: "mobile logo actions"; grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr); grid-template-rows: 45px; min-height: 45px; height: 45px; max-height: 45px; padding: 0 var(--spacing-4); column-gap: var(--spacing-4); align-items: center; overflow: hidden; } #snackys-tpl #shop-nav .to-header__search { display: none !important; } #snackys-tpl .to-header__logo { justify-content: flex-start; justify-self: start; width: auto; height: 22px; } #snackys-tpl .to-header__actions { justify-self: end; } #snackys-tpl .to-header__logo a, #snackys-tpl .to-header__logo img { max-width: 140px; max-height: 22px; height: 22px; } #snackys-tpl #shop-nav .hdr-nav { gap: var(--spacing-4); } #snackys-tpl #shop-nav .hdr-nav .to-header-account.dropdown { margin-right: -0.5em; } #snackys-tpl .to-header-cart { position: relative; display: flex; align-items: center; justify-content: center; grid-template-columns: none; width: 28px; min-width: 28px; min-height: 28px; height: 28px; padding: 0; overflow: visible; border-radius: 0; background: transparent; color: var(--color-white) !important; } #snackys-tpl .to-header-cart:hover, #snackys-tpl .to-header-cart:focus { background: transparent; color: var(--color-white) !important; } #snackys-tpl #shop-nav .hdr-nav .to-header-cart .to-header-cart__icon { width: 24px; min-width: 24px; height: 24px; margin: 0; } #snackys-tpl #shop-nav .hdr-nav .to-header-cart .to-header-cart__icon svg.to-header-icon, #snackys-tpl #shop-nav .hdr-nav .to-header-cart:hover .to-header-cart__icon svg.to-header-icon, #snackys-tpl #shop-nav .hdr-nav .to-header-cart:focus .to-header-cart__icon svg.to-header-icon { fill: var(--color-white); stroke: var(--color-primary-100) !important; stroke-width: .4; paint-order: fill stroke; } #snackys-tpl .to-header-cart__label { display: none; } #snackys-tpl .to-header-cart__count { position: absolute; top: -4px; right: 0; display: flex; align-items: center; justify-content: center; align-self: auto; min-width: 16px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--color-warning); color: var(--color-primary-100); font-size: 10px; font-weight: var(--font-weight-bold); line-height: 1; } } @media (max-width: 449px) { #snackys-tpl #shop-nav > .mw-container { grid-template-columns: 30px auto 1fr; padding: 0 var(--spacing-3); column-gap: var(--spacing-4); } #snackys-tpl .to-header__logo a, #snackys-tpl .to-header__logo img { max-width: 116px; } } /**/ #snackys-tpl .to-header-clp-spacer { height: 0; overflow: hidden; pointer-events: none; } #snackys-tpl .to-header-clp { position: relative; z-index: 50; border-bottom: 1px solid rgba(150, 169, 215, .45); background: var(--color-white); box-shadow: var(--shadow-md); font-family: var(--font-family-base); } #snackys-tpl body.to-order-completion-optimized[data-page="33"] .to-header-clp { display: none !important; } #snackys-tpl body.to-order-completion-optimized[data-page="33"] #cat-w { border-bottom: 1px solid var(--color-tertiary-75); } /**/ #snackys-tpl body:not([data-page="2"]) .to-header-clp { box-shadow: inset 0 1.5px 0 0px rgba(150, 169, 215, .45), var(--shadow-md); } #snackys-tpl .to-header-clp.is-stuck { position: fixed; top: 0; right: 0; left: 0; width: 100%; } /**/ #snackys-tpl .to-header-clp__tabs { display: none; } @media (max-width: 991px) { #snackys-tpl #shop-nav { z-index: 55; } #snackys-tpl .to-header-clp.is-stuck { top: var(--to-header-height); } #snackys-tpl .to-header-clp__tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; padding: 0 var(--spacing-2); overflow: visible; background: var(--color-primary-100); } #snackys-tpl .to-header-clp__tabs-list { display: flex; align-items: flex-end; gap: 15px; min-width: 0; padding-left: var(--spacing-2); /**/ overflow: visible; } #snackys-tpl .to-header-clp__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 var(--spacing-3) 2px; border: 0; border-radius: var(--border-radius-xs, 4px) var(--border-radius-xs, 4px) 0 0; background: transparent; color: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-normal, 16px); font-weight: var(--font-weight-bold); line-height: 24.64px; white-space: nowrap; cursor: pointer; } #snackys-tpl .to-header-clp__tab.is-active { z-index: 3; background: var(--color-white); color: var(--color-primary-100); } /**/ #snackys-tpl .to-header-clp__tab.is-active::before, #snackys-tpl .to-header-clp__tab.is-active::after { content: ""; position: absolute; bottom: 0; z-index: 0; display: block; width: 6px; height: 6px; pointer-events: none; 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: 6px 6px; } #snackys-tpl .to-header-clp__tab.is-active::before { right: 100%; transform: rotate(180deg); } #snackys-tpl .to-header-clp__tab.is-active::after { left: 100%; transform: rotate(180deg) scaleX(-1); } #snackys-tpl .to-header-clp__tabs-help { display: inline-flex; flex: 0 0 auto; align-items: center; align-self: center; gap: 5px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-tertiary-50, #96a9d7); font-family: var(--font-family-base); font-size: 13.3px; font-weight: var(--font-weight-regular); line-height: 1; white-space: nowrap; cursor: pointer; } #snackys-tpl .to-header-clp__tabs-help-icon { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl .to-header-clp__tabs-help:hover, #snackys-tpl .to-header-clp__tabs-help:focus { color: var(--color-white); outline: none; } #snackys-tpl .to-header-clp [data-to-clp-panel]:not(.is-clp-panel-active) { display: none !important; } #snackys-tpl .to-header-clp [data-to-clp-panel].is-clp-panel-active { display: block !important; } /**/ #snackys-tpl .to-header-clp .to-header-clp__heading-row, #snackys-tpl .to-header-clp .to-printer-selector__heading-row, #snackys-tpl .to-header-clp .to-header-saved .to-header-clp__heading-row { display: none !important; } /**/ #snackys-tpl .to-header-clp.is-compact .to-printer-selector__border-label, #snackys-tpl .to-header-clp.is-compact .to-header-saved__border-label, #snackys-tpl .to-header-clp.is-compact .to-header-clp__border-label { display: none !important; opacity: 0; visibility: hidden; } } #snackys-tpl .to-header-clp[hidden] { display: none !important; } #snackys-tpl .to-header-clp__inner { --to-header-clp-gap: var(--spacing-16); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--to-header-clp-gap); max-width: var(--to-header-container); min-height: 132px; margin: 0 auto; padding: 0 var(--spacing-16); transition: min-height .25s ease; } #snackys-tpl .to-header-clp__selector, #snackys-tpl .to-header-clp__quick { min-width: 0; transition: padding .25s ease; } #snackys-tpl .to-header-clp__selector, #snackys-tpl .to-header-clp__quick { padding: var(--spacing-6) 0; } #snackys-tpl .to-header-clp.is-compact .to-header-clp__inner { min-height: 0; } #snackys-tpl .to-header-clp.is-compact .to-header-clp__selector, #snackys-tpl .to-header-clp.is-compact .to-header-clp__quick { padding: var(--spacing-4) 0; } #snackys-tpl .to-header-clp .to-printer-selector__heading-row, #snackys-tpl .to-header-clp .to-header-clp__heading-row { overflow: hidden; max-height: 32px; opacity: 1; transition: max-height .25s ease, opacity .25s ease, margin .25s ease; } #snackys-tpl .to-header-clp.is-compact .to-printer-selector__heading-row, #snackys-tpl .to-header-clp.is-compact .to-header-clp__heading-row { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; } #snackys-tpl .to-printer-selector__border-label, #snackys-tpl .to-header-saved__border-label, #snackys-tpl .to-header-clp__border-label { display: none; } #snackys-tpl .to-header-clp .to-printer-selector__steps { position: relative; } #snackys-tpl .to-header-saved__box-wrap { position: relative; } #snackys-tpl .to-header-saved__row { position: relative; display: flex; align-items: stretch; gap: var(--spacing-2); width: 100%; } #snackys-tpl .to-header-saved__box { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 0; min-width: 0; min-height: 42px; padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) 75px; overflow: visible; border: 2px solid var(--color-success); border-radius: var(--border-radius-sm); background: var(--color-success-soft); } #snackys-tpl .to-header-saved__box.is-products-link, #snackys-tpl .to-header-saved__card { cursor: pointer; } #snackys-tpl .to-header-clp .to-header-saved__box { padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) 75px; } #snackys-tpl .to-header-clp .to-printer-selector__border-label, #snackys-tpl .to-header-clp .to-header-saved__border-label, #snackys-tpl .to-header-clp .to-header-clp__border-label { position: absolute; top: 0; left: var(--spacing-2); z-index: 3; display: inline-block; margin: 0; padding: 0 var(--spacing-1); overflow: hidden; background: var(--color-white); color: var(--color-tertiary-100); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-50%); transition: opacity .25s ease, visibility .25s ease; } #snackys-tpl .to-header-clp .to-header-saved__border-label { background: var(--color-success-soft); } #snackys-tpl .to-header-clp.is-compact .to-printer-selector__border-label, #snackys-tpl .to-header-clp.is-compact .to-header-saved__border-label, #snackys-tpl .to-header-clp.is-compact .to-header-clp__border-label { opacity: 1; visibility: visible; } #snackys-tpl .to-header-clp__quick { position: relative; border-left: 0; } #snackys-tpl .to-header-clp__quick::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--to-header-clp-gap) / -2); width: 1px; background: var(--color-tertiary-50); } #snackys-tpl .to-header-clp__heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-4); } #snackys-tpl .to-header-clp__heading { margin: 0; color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1; } #snackys-tpl .to-header-clp__help, #snackys-tpl .to-header-clp__help:visited, #snackys-tpl .to-header-clp__help:hover, #snackys-tpl .to-header-clp__help:focus, #snackys-tpl .to-header-clp__help:active { display: inline-flex; align-items: center; gap: var(--spacing-1); margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-primary-100); font-family: inherit; font-size: 16px; line-height: 1; text-decoration: none !important; cursor: pointer; } #snackys-tpl .to-header-clp__help-icon { flex: 0 0 16px; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl .to-header-clp__quick-form { position: relative; margin: 0; } #snackys-tpl .to-header-clp__quick-row { display: flex; align-items: center; gap: var(--spacing-3, 12px); width: 100%; } #snackys-tpl .to-header-clp__quick-row .to-header-clp__quick-form { flex: 1 1 auto; min-width: 0; } #snackys-tpl .to-header-clp__cart { position: relative; display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; overflow: visible; border-radius: var(--border-radius-sm); background: var(--color-warning); color: var(--color-primary-100) !important; text-decoration: none; } #snackys-tpl .to-header-clp.is-stuck .to-header-clp__cart { display: flex; } #snackys-tpl .to-header-clp__cart:hover, #snackys-tpl .to-header-clp__cart:focus { background: var(--color-warning); color: var(--color-primary-100) !important; } #snackys-tpl .to-header-clp__cart-icon { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; } #snackys-tpl .to-header-clp__cart-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } #snackys-tpl .to-header-clp__cart-count { position: absolute; top: -4px; right: -4px; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 20px; width: auto; height: 20px; padding: 0 4px; border-radius: 50%; background: var(--color-primary-100); color: var(--color-white); font-family: var(--font-family-base); font-size: 13.3px; font-weight: var(--font-weight-bold); letter-spacing: 0; line-height: 1; } #snackys-tpl .to-header-clp__quick-form input { width: 100%; height: 44px; margin: 0; padding: 0 48px 0 var(--spacing-3); border: 2px solid var(--color-tertiary-100); border-radius: var(--border-radius-sm); background: var(--color-white); color: var(--color-primary-100); font-family: var(--font-family-base); font-size: 16px; font-weight: normal; } #snackys-tpl .to-header-clp__quick-form input::placeholder { color: var(--color-tertiary-100); opacity: 1; } #snackys-tpl .to-header-clp__quick-form input:focus { border-color: var(--color-primary-100); outline: 2px solid rgba(45, 84, 175, .18); outline-offset: 1px; } #snackys-tpl .to-header-clp__quick-form button { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-primary-100); } #snackys-tpl .to-header-search__icon, #snackys-tpl .to-header-clp__search-icon { display: block; width: 20px; height: 20px; fill: var(--color-primary-100); stroke: var(--color-primary-100); stroke-width: 1; paint-order: stroke fill; } #snackys-tpl #sr-tg-m .to-header-search__icon { width: 100%; height: 100%; } #snackys-tpl .to-header-clp__quick-form button svg { width: 20px; height: 20px; fill: var(--color-primary-100); } #snackys-tpl .to-header-saved { display: flex; flex-direction: column; width: 100%; } #snackys-tpl .to-header-saved[hidden], #snackys-tpl [data-to-header-selector][hidden] { display: none !important; } #snackys-tpl .to-header-saved .to-header-clp__heading-row { margin-bottom: var(--spacing-4); } #snackys-tpl .to-header-saved .to-header-clp__heading { display: inline-flex; align-items: center; gap: 8px; } #snackys-tpl .to-header-saved__count { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 20px; width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-primary-100, #002293); color: var(--color-white); font-size: 13.3px; font-weight: 700; letter-spacing: 0; line-height: 1; } #snackys-tpl .to-header-saved__count[hidden] { display: none !important; } #snackys-tpl .to-header-saved__heading-actions { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; } #snackys-tpl .to-header-saved__clear-all, #snackys-tpl .to-header-saved__clear-all:hover, #snackys-tpl .to-header-saved__clear-all:focus, #snackys-tpl .to-header-saved__new, #snackys-tpl .to-printer-selector__saved, #snackys-tpl .to-header-saved__new:hover, #snackys-tpl .to-header-saved__new:focus, #snackys-tpl .to-printer-selector__saved:hover, #snackys-tpl .to-printer-selector__saved:focus { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-primary-100, #002293); font-family: inherit; font-size: 16px; font-weight: var(--font-weight-regular); line-height: 1; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #snackys-tpl .to-header-saved__clear-all, #snackys-tpl .to-header-saved__clear-all:hover, #snackys-tpl .to-header-saved__clear-all:focus, #snackys-tpl .to-header-saved__new, #snackys-tpl .to-header-saved__new:hover, #snackys-tpl .to-header-saved__new:focus, #snackys-tpl .to-printer-selector__saved, #snackys-tpl .to-printer-selector__saved:hover, #snackys-tpl .to-printer-selector__saved:focus { gap: 6px; text-decoration: none; } #snackys-tpl .to-header-saved__clear-all, #snackys-tpl .to-header-saved__clear-all:hover, #snackys-tpl .to-header-saved__clear-all:focus, #snackys-tpl .to-header-saved__new, #snackys-tpl .to-header-saved__new:hover, #snackys-tpl .to-header-saved__new:focus { font-size: 13.3px; } #snackys-tpl .to-header-saved__clear-all { color: var(--color-danger); } #snackys-tpl .to-header-saved__clear-all:hover, #snackys-tpl .to-header-saved__clear-all:focus { color: var(--color-danger-hover); } #snackys-tpl .to-header-saved__new-icon { display: block; flex: 0 0 14px; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #snackys-tpl .to-header-saved__new-icon-btn { display: none; } @media (min-width: 768px) { #snackys-tpl .to-header-saved__clear-all, #snackys-tpl .to-header-saved__clear-all:hover, #snackys-tpl .to-header-saved__clear-all:focus, #snackys-tpl .to-header-saved__new, #snackys-tpl .to-header-saved__new:hover, #snackys-tpl .to-header-saved__new:focus { font-size: 16px; } #snackys-tpl .to-header-saved__new-icon { flex-basis: 17px; width: 17px; height: 17px; } } #snackys-tpl .to-header-saved__new[hidden], #snackys-tpl .to-header-saved__clear-all[hidden], #snackys-tpl .to-printer-selector__saved[hidden], #snackys-tpl .to-printer-selector__help[hidden] { display: none !important; } #snackys-tpl .to-header-saved__box:has(.to-header-saved__printer[hidden]) { padding-left: var(--spacing-3); } #snackys-tpl .to-header-saved__printer { position: absolute; left: 7px; top: 50%; width: 45px; height: 45px; object-fit: contain; object-position: center; transform: translate(5px, -50%); mix-blend-mode: darken; pointer-events: none; } #snackys-tpl .to-header-clp .to-header-saved__printer { width: 45px; height: 45px; } #snackys-tpl .to-header-saved__identity { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: var(--spacing-2); } #snackys-tpl .to-header-saved__logo { display: block; width: auto; max-width: calc(55px * var(--brand-logo-scale, 1)); height: calc(17px * var(--brand-logo-scale, 1)); object-fit: contain; } #snackys-tpl .to-header-saved__brand, #snackys-tpl .to-header-saved__name { color: var(--color-success-text); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1.5; white-space: nowrap; } #snackys-tpl .to-header-saved__actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--spacing-2); } #snackys-tpl .to-header-saved__actions[hidden], #snackys-tpl .to-header-saved__products[hidden] { display: none !important; } #snackys-tpl .to-header-saved__reset-icon { display: none; width: 18px; height: 18px; } #snackys-tpl .to-header-saved__reset-label { display: inline; } #snackys-tpl .to-header-saved__switch { position: static; display: flex; flex: 0 0 auto; align-items: stretch; align-self: stretch; margin: 0; font-size: 16px; } #snackys-tpl .to-header-saved__switch[hidden] { display: none !important; } #snackys-tpl .to-header-saved__switch-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; min-height: 42px; height: 100%; margin: 0; padding: 0; border: 2px solid var(--color-tertiary-100); border-radius: var(--border-radius-sm); background: transparent; color: var(--color-primary-100); list-style: none; cursor: pointer; } #snackys-tpl .to-header-saved__switch-count { position: absolute; top: 0; right: 0; z-index: 2; min-width: 20px; max-width: 20px; height: 20px; padding: 0 4px; font-size: 13.3px; pointer-events: none; transform: translate(35%, -35%); } #snackys-tpl .to-header-saved__row:has(.to-header-saved__switch:not([hidden])) .to-header-saved__reset { display: none !important; } #snackys-tpl .to-header-saved__switch-toggle::-webkit-details-marker { display: none; } #snackys-tpl .to-header-saved__switch-chevron { flex-basis: 25px; width: 25px; height: 25px; } #snackys-tpl .to-header-saved__switch[open] .to-header-saved__switch-chevron { transform: rotate(180deg); } #snackys-tpl .to-header-saved__switch[open] .to-header-saved__switch-toggle { background: transparent; color: var(--color-primary-100); border-color: var(--color-tertiary-100); } #snackys-tpl .to-header-saved__switch-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; width: auto; max-height: min(420px, 60vh); overflow: hidden; border: 2px solid var(--color-primary-100, #002293); border-radius: var(--border-radius-sm); background: var(--color-white); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); } #snackys-tpl .to-header-saved__switch-menu { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #snackys-tpl .to-header-saved__clear-all--menu, #snackys-tpl .to-header-saved__clear-all--menu:hover, #snackys-tpl .to-header-saved__clear-all--menu:focus { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 100%; margin: 0; padding: var(--spacing-3) var(--spacing-2); border: 0; border-top: 1px solid var(--color-tertiary-50, #c5c9d4); border-radius: 0; background: var(--color-white); color: var(--color-danger, #ff0059); font-size: 14px; font-weight: var(--font-weight-bold, 700); line-height: 1; text-decoration: none; cursor: pointer; } #snackys-tpl .to-header-saved__clear-all--menu:hover, #snackys-tpl .to-header-saved__clear-all--menu:focus { background: var(--color-danger-soft); color: var(--color-danger); outline: none; } #snackys-tpl .to-header-saved__clear-all--menu[hidden] { display: none !important; } #snackys-tpl .to-header-saved__switch-item { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-primary-100, #002293); box-shadow: none; } #snackys-tpl .to-header-saved__switch-item.is-no-image .to-header-saved__switch-select { padding-left: var(--spacing-3); } #snackys-tpl .to-header-saved__switch-item:hover, #snackys-tpl .to-header-saved__switch-item:focus-within { background: var(--color-tertiary-50); } #snackys-tpl .to-header-saved__switch-item.is-active { background: var(--color-tertiary-50); color: var(--color-primary-100, #002293); } #snackys-tpl .to-header-saved__switch-select, #snackys-tpl .to-header-saved__switch-select:hover, #snackys-tpl .to-header-saved__switch-select:focus, #snackys-tpl .to-header-saved__switch-select:focus-visible { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: var(--spacing-3); min-width: 0; min-height: 42px; margin: 0; padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) 80px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; box-shadow: none; } #snackys-tpl .to-header-saved__switch-select, #snackys-tpl .to-header-saved__switch-select:hover, #snackys-tpl .to-header-saved__switch-select:focus, #snackys-tpl .to-header-saved__switch-select * { text-decoration: none !important; } #snackys-tpl .to-header-saved__switch-select:focus, #snackys-tpl .to-header-saved__switch-select:focus-visible { outline: none; } #snackys-tpl .to-header-saved__switch-remove { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; align-self: center; width: 36px; height: 36px; margin: 0 var(--spacing-2) 0 0; padding: 0; border: 0; border-radius: var(--border-radius-sm); background: transparent; color: var(--color-danger); cursor: pointer; } #snackys-tpl .to-header-saved__switch-remove:hover, #snackys-tpl .to-header-saved__switch-remove:focus, #snackys-tpl .to-header-saved__switch-remove:focus-visible { color: var(--color-danger-hover); background: var(--color-danger-soft); outline: none; } #snackys-tpl .to-header-saved__switch-trash { display: block; width: 16px; height: 16px; stroke: currentColor; } #snackys-tpl .to-header-saved__switch-printer { position: absolute; left: 7px; top: 50%; width: 50px; height: 50px; object-fit: contain; object-position: center; transform: translate(5px, -50%); mix-blend-mode: darken; pointer-events: none; } #snackys-tpl .to-header-saved__switch-identity { display: flex; min-width: 0; align-items: center; gap: var(--spacing-2); } #snackys-tpl .to-header-saved__switch-logo { display: block; width: auto; max-width: calc(55px * var(--brand-logo-scale, 1)); height: calc(17px * var(--brand-logo-scale, 1)); object-fit: contain; } #snackys-tpl .to-header-saved__switch-brand, #snackys-tpl .to-header-saved__switch-name { color: inherit; font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1.5; white-space: nowrap; } #snackys-tpl .to-header-saved__switch-brand[hidden] { display: none !important; } #snackys-tpl .to-header-saved__reset, #snackys-tpl .to-header-saved__products { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; margin: 0; padding: var(--spacing-2) var(--spacing-3); border: 0; border-radius: var(--border-radius-sm); font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; } #snackys-tpl .to-header-saved__reset { position: relative; z-index: 2; background: transparent; color: var(--color-neutral); font-weight: var(--font-weight-regular); } #snackys-tpl .to-header-saved__products { gap: 6px; padding-right: 12px; background: var(--color-success); color: var(--color-white); font-weight: var(--font-weight-bold); } #snackys-tpl .to-header-saved__products:hover, #snackys-tpl .to-header-saved__products:focus, #snackys-tpl .to-header-saved__products:focus-visible { background: var(--color-success-hover); color: var(--color-white); } #snackys-tpl .to-header-saved__products:active { background: var(--color-success); color: var(--color-white); } #snackys-tpl .to-header-saved__products-icon { display: block; width: 15px; height: 15px; } html.to-saved-printer-delete-open, html.to-saved-printer-delete-open body { overflow: hidden; } .to-saved-printer-delete { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: center; justify-content: center; padding: var(--spacing-6, 24px); } .to-saved-printer-delete[hidden] { display: none !important; } .to-saved-printer-delete__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary-100, #002293) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .to-saved-printer-delete__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--spacing-4, 16px); width: min(420px, 100%); padding: var(--spacing-6, 24px); background: var(--color-white, #fff); border-radius: var(--border-radius-md, 12px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1)); } .to-saved-printer-delete__title { margin: 0; color: var(--color-primary-100, #002293); font-family: var(--font-family-base, inherit); font-size: 20px; font-weight: var(--font-weight-bold, 700); line-height: 1.2; } .to-saved-printer-delete__text { margin: 0; color: var(--color-primary-100, #002293); font-size: 16px; line-height: 1.5; } .to-saved-printer-delete__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-3, 12px); } .to-saved-printer-delete__cancel, .to-saved-printer-delete__confirm { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: var(--spacing-2, 8px) var(--spacing-4, 16px); border: 0; border-radius: var(--border-radius-sm); font-family: inherit; font-size: 16px; font-weight: var(--font-weight-bold, 700); line-height: 1; cursor: pointer; } .to-saved-printer-delete__cancel { background: transparent; color: var(--color-primary-100, #002293); } .to-saved-printer-delete__cancel:hover, .to-saved-printer-delete__cancel:focus { background: var(--color-tertiary-50); outline: none; } .to-saved-printer-delete__confirm { background: var(--color-danger, #ff0059); color: var(--color-white, #fff); } .to-saved-printer-delete__confirm:hover, .to-saved-printer-delete__confirm:focus { background: var(--color-danger); outline: none; } .to-saved-printer-toast { position: fixed; left: 50%; bottom: -3px; z-index: 12000; box-sizing: border-box; width: min(420px, calc(100vw - 32px)); padding: 14px 16px 18px; overflow: visible; border-radius: var(--border-radius-sm, 8px) var(--border-radius-sm, 8px) 0 0; background: var(--color-primary-100, #002293); color: var(--color-white, #fff); box-shadow: none; font-family: var(--font-family-base); font-size: var(--font-size-normal, 16px); line-height: 1.35; transform: translate(-50%, calc(100% + 1px)); opacity: 0; pointer-events: auto; cursor: pointer; transition: opacity .3s ease-in-out, transform .3s ease-in-out; } .to-saved-printer-toast::before, .to-saved-printer-toast::after { content: ""; position: absolute; bottom: 0; z-index: 0; display: block; width: 15px; height: 15px; pointer-events: none; background-color: var(--to-toast-ramp-color, var(--color-tertiary-50, #96a9d7)); background-image: radial-gradient(circle at bottom right, transparent 12px, var(--color-danger-soft) 12px); 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; } .to-saved-printer-toast::before { right: 100%; transform: rotate(180deg); } .to-saved-printer-toast::after { left: 100%; transform: rotate(180deg) scaleX(-1); } .to-saved-printer-toast > * { position: relative; z-index: 1; } .to-saved-printer-toast--success, .to-saved-printer-toast--ring { --to-toast-ramp-color: var(--color-success, #00671c); display: flex; flex-direction: column; gap: 12px; padding: var(--spacing-2); border: 2px solid var(--color-success, #00671c); background: var(--color-success-soft); color: var(--color-success-text); box-shadow: none; } .to-saved-printer-toast--limit { --to-toast-ramp-color: var(--color-warning, #ffae00); display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 18px; border: 2px solid var(--color-warning, #ffae00); background: #fff6e0; color: var(--color-warning, #ffae00); box-shadow: none; } .to-saved-printer-toast--removed, .to-saved-printer-toast--removed-all { --to-toast-ramp-color: var(--color-danger); display: flex; flex-direction: column; gap: 12px; padding: var(--spacing-2); border: 2px solid var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); box-shadow: none; } .to-saved-printer-toast__sequence { display: grid; justify-items: center; overflow: hidden; } .to-saved-printer-toast__sequence > * { grid-area: 1 / 1; align-self: center; min-width: 0; } .to-saved-printer-toast__sequence > .to-saved-printer-toast__preview, .to-saved-printer-toast__sequence > .to-saved-printer-toast__text--out { animation: to-saved-printer-toast-preview-out .35s ease-in-out 1.5s both; } .to-saved-printer-toast__sequence > .to-saved-printer-toast__text:not(.to-saved-printer-toast__text--out) { animation: to-saved-printer-toast-text-in .35s ease-out 1.85s both; } @keyframes to-saved-printer-toast-preview-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-100%); } } @keyframes to-saved-printer-toast-text-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .to-saved-printer-toast__sequence > .to-saved-printer-toast__preview { animation: none; visibility: hidden; } .to-saved-printer-toast__sequence > .to-saved-printer-toast__text, .to-saved-printer-toast__sequence > .to-saved-printer-toast__text:not(.to-saved-printer-toast__text--out) { animation: none; } .to-saved-printer-toast__sequence--messages { display: flex; flex-direction: column; gap: var(--spacing-2); } } .to-saved-printer-toast__preview { position: relative; display: flex; align-items: center; min-width: 0; padding: 0 var(--spacing-2) 0 calc(var(--spacing-16) - .5em); border-radius: var(--border-radius-sm, 8px); } .to-saved-printer-toast__printer { position: absolute; left: 10px; top: 50%; width: 30px; height: 30px; object-fit: contain; object-position: center; transform: translateY(-50%); mix-blend-mode: darken; pointer-events: none; } .to-saved-printer-toast__identity { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; } .to-saved-printer-toast__logo { display: block; flex: 0 0 auto; width: auto; max-width: 55px; height: 17px; object-fit: contain; } .to-saved-printer-toast__brand, .to-saved-printer-toast__name { min-width: 0; overflow: hidden; color: var(--color-success-text); font-size: 15px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .to-saved-printer-toast--removed .to-saved-printer-toast__brand, .to-saved-printer-toast--removed .to-saved-printer-toast__name { color: var(--color-danger, #ff0059); } .to-saved-printer-toast__brand { font-weight: 600; } .to-saved-printer-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .to-saved-printer-toast__text { margin: 0; font-weight: 700; } .to-saved-printer-toast__progress { position: absolute; left: 0; bottom: 0; z-index: 1; display: block; width: 100%; height: 3px; background: currentColor; opacity: 0.55; transform: scaleX(1); transform-origin: left center; pointer-events: none; } .to-saved-printer-toast.is-visible .to-saved-printer-toast__progress { animation: to-saved-printer-toast-progress var(--to-toast-duration, 4200ms) linear forwards; } @keyframes to-saved-printer-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (min-width: 768px) { .to-saved-printer-toast { width: min(400px, calc(100vw - 32px)); } } .to-saved-printer-toast--success .to-saved-printer-toast__text, .to-saved-printer-toast--ring .to-saved-printer-toast__text { color: var(--color-success-text); font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; } .to-saved-printer-toast--removed .to-saved-printer-toast__text, .to-saved-printer-toast--removed-all .to-saved-printer-toast__text { color: var(--color-danger, #ff0059); font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; } .to-saved-printer-toast--limit .to-saved-printer-toast__text { color: var(--color-warning, #ffae00); font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; } @media (max-width: 767px) { .to-saved-printer-toast__text, .to-saved-printer-toast--success .to-saved-printer-toast__text, .to-saved-printer-toast--ring .to-saved-printer-toast__text, .to-saved-printer-toast--removed .to-saved-printer-toast__text, .to-saved-printer-toast--removed-all .to-saved-printer-toast__text, .to-saved-printer-toast--limit .to-saved-printer-toast__text { font-size: 13.3px; } } @media (min-width: 1200px) { #snackys-tpl #cat-w { z-index: 60; overflow: visible; } /**/ #snackys-tpl #cat-w .mgm-c, #snackys-tpl #cat-w .mgm-fw > .dropdown-menu, #snackys-tpl #cat-w .dropdown-multi > .dropdown-menu, #snackys-tpl #cat-w .mgm .dropdown-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } @media (max-width: 1199px) { #snackys-tpl .to-header-clp__inner { --to-header-clp-gap: var(--spacing-6); padding: 0 var(--spacing-8); } #snackys-tpl .to-header-clp__help { display: none; } } @media (max-width: 991px) { #snackys-tpl .to-header-clp__inner { grid-template-columns: 1fr; min-height: 0; column-gap: 0; padding: 0; } #snackys-tpl .to-header-clp__quick::before { content: none; } #snackys-tpl .to-header-clp__selector, #snackys-tpl .to-header-clp__quick, #snackys-tpl .to-header-clp.is-compact .to-header-clp__selector, #snackys-tpl .to-header-clp.is-compact .to-header-clp__quick { padding: var(--spacing-3); } #snackys-tpl .to-header-clp__quick { border-top: 0; border-left: 0; padding-top: var(--spacing-3); } #snackys-tpl .to-header-clp__quick-form input { height: 35px; font-size: 13.3px; } #snackys-tpl .to-header-clp__quick-form button { width: 35px; height: 35px; } #snackys-tpl .to-header-clp__cart { width: 35px; min-width: 35px; height: 35px; } #snackys-tpl .to-header-clp__cart-icon { width: 20px; height: 20px; } #snackys-tpl .to-header-clp__quick-row { gap: var(--spacing-2, 8px); } #snackys-tpl .to-header-clp__quick-form button svg, #snackys-tpl .to-header-clp__search-icon { width: 16px; height: 16px; } } @media (max-width: 767px) { html, body { overflow-x: clip; max-width: 100%; } html.snackys #snackys-tpl, body #snackys-tpl, #snackys-tpl, #snackys-tpl #main-wrapper, #snackys-tpl #content-wrapper { overflow-x: clip; max-width: 100%; } #snackys-tpl .to-header-clp, #snackys-tpl .to-header-clp__inner, #snackys-tpl .to-header-clp__selector, #snackys-tpl .to-header-saved { max-width: 100%; overflow: visible; } #snackys-tpl .to-header-saved__box-wrap, #snackys-tpl .to-header-saved__row { max-width: 100%; overflow: visible; } #snackys-tpl .to-header-saved__printer, #snackys-tpl .to-header-clp .to-header-saved__printer { position: static !important; left: auto !important; top: auto !important; transform: none !important; } #snackys-tpl .to-header-saved__switch-count { transform: none; top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: 10px; } #snackys-tpl .to-header-clp { z-index: 50; } #snackys-tpl .to-header-clp__inner { padding: 0; } #snackys-tpl .to-header-clp__selector, #snackys-tpl .to-header-clp__quick, #snackys-tpl .to-header-clp.is-compact .to-header-clp__selector, #snackys-tpl .to-header-clp.is-compact .to-header-clp__quick { padding: var(--spacing-3); } #snackys-tpl .to-header-clp__quick-form input, #snackys-tpl .to-header-clp__quick-form button { height: 35px; } #snackys-tpl .to-header-clp__quick-form button { width: 35px; } #snackys-tpl .to-header-clp__quick-form input { padding-right: 38px; font-size: 13.3px; } /**/ #snackys-tpl .to-header-saved__box { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto auto; grid-template-areas: "img identity reset actions"; align-items: center; column-gap: 0; row-gap: 0; min-height: 49px; padding: 0 var(--spacing-2); overflow: hidden; } #snackys-tpl .to-header-saved__box:has(.to-header-saved__printer[hidden]) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "identity reset actions"; padding: 0 var(--spacing-2); } /**/ #snackys-tpl .to-header-saved__box:has(.to-header-saved__actions[hidden]), #snackys-tpl .to-header-saved__box:has(.to-header-saved__products[hidden]) { grid-template-columns: 45px minmax(0, 1fr) auto; grid-template-areas: "img identity reset"; row-gap: 0; } #snackys-tpl .to-header-saved__box:has(.to-header-saved__printer[hidden]):has(.to-header-saved__actions[hidden]), #snackys-tpl .to-header-saved__box:has(.to-header-saved__printer[hidden]):has(.to-header-saved__products[hidden]) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity reset"; row-gap: 0; } #snackys-tpl .to-header-saved__printer { position: static; grid-area: img; left: auto; top: auto; width: 45px; height: 45px; transform: none; } #snackys-tpl .to-header-saved__identity { grid-area: identity; width: auto; min-width: 0; margin-left: var(--spacing-3); justify-content: flex-start; } #snackys-tpl .to-header-saved__reset { grid-area: reset; align-self: center; justify-self: end; min-height: 0; padding: var(--spacing-1) var(--spacing-3); color: var(--color-danger); } #snackys-tpl .to-header-saved__reset-icon { display: block; } #snackys-tpl .to-header-saved__reset-label { display: none; } #snackys-tpl .to-header-saved__brand, #snackys-tpl .to-header-saved__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.25; } #snackys-tpl .to-header-saved__actions { grid-area: actions; width: auto; justify-content: flex-end; gap: 0; } #snackys-tpl .to-header-saved__products { flex: 0 0 auto; width: 35px; height: 35px; min-height: 0; padding: var(--spacing-1); gap: 0; } #snackys-tpl .to-header-saved__products-label { display: none; } #snackys-tpl .to-header-saved__products-icon { display: block; width: 18px; height: 18px; } #snackys-tpl .to-header-saved__switch { min-height: 49px; } #snackys-tpl .to-header-saved__switch-toggle { width: 40px; min-height: 49px; } /**/ #snackys-tpl .to-header-clp .to-header-saved__box { grid-template-columns: 30px minmax(0, 1fr) auto auto; min-height: 35px; height: 35px; padding: 0 var(--spacing-1) 0 var(--spacing-1); } #snackys-tpl .to-header-clp .to-header-saved__box:has(.to-header-saved__actions[hidden]), #snackys-tpl .to-header-clp .to-header-saved__box:has(.to-header-saved__products[hidden]) { grid-template-columns: 30px minmax(0, 1fr) auto; } #snackys-tpl .to-header-clp .to-header-saved__box:has(.to-header-saved__printer[hidden]) { grid-template-columns: minmax(0, 1fr) auto auto; padding: 0 var(--spacing-1) 0 var(--spacing-1); } #snackys-tpl .to-header-clp .to-header-saved__box:has(.to-header-saved__printer[hidden]):has(.to-header-saved__actions[hidden]), #snackys-tpl .to-header-clp .to-header-saved__box:has(.to-header-saved__printer[hidden]):has(.to-header-saved__products[hidden]) { grid-template-columns: minmax(0, 1fr) auto; } #snackys-tpl .to-header-clp .to-header-saved__printer { width: 28px; height: 28px; } #snackys-tpl .to-header-clp .to-header-saved__identity { margin-left: var(--spacing-2); gap: var(--spacing-1); } #snackys-tpl .to-header-clp .to-header-saved__logo { max-width: 40px; height: 12px; } #snackys-tpl .to-header-clp .to-header-saved__brand, #snackys-tpl .to-header-clp .to-header-saved__name { font-size: 13.3px; line-height: 1.2; } #snackys-tpl .to-header-clp .to-header-saved__reset { padding: var(--spacing-1); } #snackys-tpl .to-header-clp .to-header-saved__reset-icon { width: 16px; height: 16px; } #snackys-tpl .to-header-clp .to-header-saved__products { width: 26px; height: 26px; padding: 0; } #snackys-tpl .to-header-clp .to-header-saved__products-icon { width: 13px; height: 13px; } #snackys-tpl .to-header-clp .to-header-saved__switch { min-height: 35px; } #snackys-tpl .to-header-clp .to-header-saved__switch-toggle { width: 35px; min-height: 35px; } #snackys-tpl .to-header-clp .to-header-saved__switch-chevron { flex-basis: 20px; width: 20px; height: 20px; } #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn, #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn:hover, #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn:focus { display: inline-flex; flex: 0 0 35px; align-items: center; justify-content: center; align-self: stretch; width: 35px; min-height: 35px; height: 100%; margin: 0; padding: 0; border: 2px solid var(--color-tertiary-100); border-radius: var(--border-radius-sm); background: transparent; color: var(--color-primary-100); cursor: pointer; } #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn:hover, #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn:focus { background: transparent; border-color: var(--color-tertiary-100); color: var(--color-primary-100); outline: none; } #snackys-tpl .to-header-clp .to-header-saved__new-icon-btn .to-header-saved__new-icon { flex-basis: 16px; width: 16px; height: 16px; } #snackys-tpl .to-header-saved__switch-dropdown { top: calc(100% + 6px); max-height: min(320px, 55vh); border-width: 1.5px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); } #snackys-tpl .to-header-saved__switch-menu { gap: 0; } #snackys-tpl .to-header-saved__switch-item { min-height: 34px; } #snackys-tpl .to-header-saved__switch-select, #snackys-tpl .to-header-saved__switch-select:hover, #snackys-tpl .to-header-saved__switch-select:focus, #snackys-tpl .to-header-saved__switch-select:focus-visible { gap: var(--spacing-2); min-height: 34px; padding: var(--spacing-2) var(--spacing-1) var(--spacing-2) 48px; } #snackys-tpl .to-header-saved__switch-item.is-no-image .to-header-saved__switch-select { padding-left: var(--spacing-2); } #snackys-tpl .to-header-saved__switch-printer { left: 4px; width: 32px; height: 32px; transform: translate(4px, -50%); } #snackys-tpl .to-header-saved__switch-identity { gap: var(--spacing-1); } #snackys-tpl .to-header-saved__switch-logo { max-width: calc(40px * var(--brand-logo-scale, 1)); height: calc(12px * var(--brand-logo-scale, 1)); } #snackys-tpl .to-header-saved__switch-brand, #snackys-tpl .to-header-saved__switch-name { font-size: 13.3px; line-height: 1.2; } #snackys-tpl .to-header-saved__switch-remove { width: 28px; height: 28px; margin: 0 var(--spacing-1) 0 0; } #snackys-tpl .to-header-saved__switch-trash { width: 14px; height: 14px; } #snackys-tpl .to-header-saved__clear-all--menu, #snackys-tpl .to-header-saved__clear-all--menu:hover, #snackys-tpl .to-header-saved__clear-all--menu:focus { padding: var(--spacing-2) var(--spacing-1); font-size: 13.3px; } } @media (max-width: 449px) { #snackys-tpl .to-header-clp__tabs { padding: 0 var(--spacing-2); gap: 8px; } #snackys-tpl .to-header-clp__tab { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } } #snackys-tpl #search { position: relative; z-index: 1; } #snackys-tpl #km_snackys_search, #snackys-tpl .jtl_search_results { display: none !important; } /**/ #snackys-tpl #shop-nav.to-checkout-header { padding: 0; } #snackys-tpl .to-checkout-header__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: var(--spacing-6, 24px); width: 100%; min-height: var(--to-header-height); max-width: var(--to-header-container); margin: 0 auto; padding: 0 var(--spacing-16, 64px); } #snackys-tpl .to-checkout-header__col { display: flex; align-items: center; min-width: 0; height: var(--to-header-height); } #snackys-tpl .to-checkout-header__logo { justify-content: flex-start; } #snackys-tpl .to-checkout-header__reviews-col { justify-content: center; } #snackys-tpl .to-checkout-header__back-col { justify-content: flex-end; } #snackys-tpl .to-checkout-header__logo a { display: flex; align-items: center; height: 100%; } #snackys-tpl .to-checkout-header #logo img, #snackys-tpl .to-checkout-header__logo img { width: auto; max-width: 200px; height: auto; max-height: 35px; margin: 0; object-fit: contain; object-position: left center; } #snackys-tpl .to-checkout-header .to-header__reviews { justify-content: center; min-width: 0; } #snackys-tpl .to-checkout-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 var(--spacing-4, 16px); overflow: hidden; border: 1px solid var(--color-white); border-radius: var(--border-radius-sm); background: transparent; color: var(--color-white) !important; font-family: var(--font-family-base); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none !important; text-transform: uppercase; white-space: nowrap; } #snackys-tpl .to-checkout-back:hover, #snackys-tpl .to-checkout-back:focus { background: transparent; border-color: var(--color-white); color: var(--color-white) !important; text-decoration: none !important; } #snackys-tpl .to-checkout-back__icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-white); } #snackys-tpl .to-checkout-back__label { padding: 0; font-size: 16px; text-decoration: none; white-space: nowrap; } @media (max-width: 1199px) { #snackys-tpl .to-checkout-header__inner { padding-right: var(--spacing-8, 32px); padding-left: var(--spacing-8, 32px); } #snackys-tpl .to-checkout-header .to-header__reviews { min-width: 0; } } @media (max-width: 991px) { #snackys-tpl .to-checkout-header .to-header__reviews-label, #snackys-tpl .to-checkout-header .to-header__reviews-count { display: none; } } @media (max-width: 767px) { #snackys-tpl #shop-nav.to-checkout-header > .to-checkout-header__inner { grid-template-areas: "checkout-logo checkout-back"; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-3, 12px); padding-right: var(--spacing-4, 16px); padding-left: var(--spacing-4, 16px); } #snackys-tpl .to-checkout-header__logo { grid-area: checkout-logo; } #snackys-tpl .to-checkout-header__back-col { grid-area: checkout-back; } #snackys-tpl .to-checkout-header__logo a { max-width: 100%; } #snackys-tpl .to-checkout-header #logo img { max-width: 100%; max-height: 28px; } #snackys-tpl .to-checkout-header__reviews-col { display: none; } #snackys-tpl .to-checkout-back { min-height: 32px; padding: 0 var(--spacing-3, 12px); font-size: 13px; gap: 6px; } #snackys-tpl .to-checkout-back__icon { width: 14px; height: 14px; } #snackys-tpl .to-checkout-back__label { font-size: 13px; } }