/* Loaded after JTL's cached plugin CSS so search-modal changes appear immediately. */
#snackys-tpl .to-search-modal .to-search-product-group__items,
html .to-search-modal .to-search-product-group__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#snackys-tpl .to-search-printer.to-search-printer--featured,
html .to-search-printer.to-search-printer--featured {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

#snackys-tpl .to-search-sidebar .to-search-printer.to-search-printer--featured,
html .to-search-sidebar .to-search-printer.to-search-printer--featured {
    margin-top: 0;
}

#snackys-tpl .to-search-board.is-split .to-search-tabs.has-one-tab,
html .to-search-board.is-split .to-search-tabs.has-one-tab {
    width: 100%;
    justify-self: stretch;
}

#snackys-tpl .to-search-overlay:not(.has-suggestions) .to-search-sidebar:not(:has(> .to-search-searchhelp:not([hidden]))) .to-search-recent-block:not([hidden]) .to-search-bar--recent,
html .to-search-overlay:not(.has-suggestions) .to-search-sidebar:not(:has(> .to-search-searchhelp:not([hidden]))) .to-search-recent-block:not([hidden]) .to-search-bar--recent {
    margin-top: 0;
}

#snackys-tpl .to-search-recent-block:not([hidden]),
html .to-search-recent-block:not([hidden]) {
    margin-bottom: var(--spacing-4);
}

#snackys-tpl .to-search-recent-block .to-search-bar--recent,
html .to-search-recent-block .to-search-bar--recent {
    margin-top: 0;
}

#snackys-tpl .to-search-modal .to-search-sidebar .to-search-bar,
html .to-search-modal .to-search-sidebar .to-search-bar {
    margin-top: 0;
}

#snackys-tpl .to-search-board,
html .to-search-board {
    margin-top: 0;
}

#snackys-tpl .to-search-faq-block,
html .to-search-faq-block {
    margin-bottom: var(--spacing-4);
}

#snackys-tpl .to-search-results-head,
html .to-search-results-head {
    margin-bottom: var(--spacing-2);
}

#snackys-tpl .to-search-help__block,
html .to-search-help__block {
    border-color: var(--color-tertiary-75);
}

#snackys-tpl .to-search-faq li:not(:has(> .to-search-faq__hit)),
html .to-search-faq li:not(:has(> .to-search-faq__hit)),
#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit),
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit) {
    box-shadow: inset calc(-1 * var(--spacing-8)) 0 0 var(--color-secondary-50);
    transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit),
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit) {
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
}

#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit),
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit),
#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit):hover,
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit):hover,
#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit):focus,
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit):focus {
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
}

#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit):hover,
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit):hover {
    border-color: var(--color-primary-100);
}

#snackys-tpl .to-search-faq li:not(:has(> .to-search-faq__hit)),
html .to-search-faq li:not(:has(> .to-search-faq__hit)) {
    overflow: hidden;
    border-radius: var(--border-radius-sm, 8px);
}

#snackys-tpl .to-search-faq__arrow,
html .to-search-faq__arrow {
    display: block;
    flex: 0 0 var(--spacing-4);
    width: var(--spacing-4);
    height: var(--spacing-4);
    color: currentColor;
    pointer-events: none;
}

#snackys-tpl .to-search-faq__tip,
html .to-search-faq__tip {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 3px 0 3px;
    background: var(--color-tertiary-75);
    color: var(--color-neutral);
    font-size: 13.3px;
}

#snackys-tpl .to-search-faq__hit,
html .to-search-faq__hit {
    position: relative;
    align-items: center;
}

#snackys-tpl .to-search-faq__title,
html .to-search-faq__title {
    padding-right: var(--spacing-10);
}

#snackys-tpl .to-search-faq li:hover .to-search-faq__arrow,
html .to-search-faq li:hover .to-search-faq__arrow,
#snackys-tpl .to-search-faq a:hover .to-search-faq__arrow,
html .to-search-faq a:hover .to-search-faq__arrow {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transition-property: color, fill, stroke !important;
}

#snackys-tpl .to-search-modal .to-product-card__xl-badges,
html .to-search-modal .to-product-card__xl-badges {
    right: -1px;
    left: auto;
}

#snackys-tpl .to-search-modal .to-search-product__xl-badge.to-product-card__xl-badge,
html .to-search-modal .to-search-product__xl-badge.to-product-card__xl-badge {
    background: var(--color-tertiary-75);
    right: -1px;
    left: auto;
    border-radius: 0 var(--border-radius-xs, 4px) 0 var(--border-radius-sm, 8px);
}

#snackys-tpl .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:only-child,
html .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:only-child {
    border-radius: 0 var(--border-radius-sm, 8px) 0 var(--border-radius-xs, 4px);
}

#snackys-tpl .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:first-child:not(:only-child),
html .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:first-child:not(:only-child) {
    border-radius: 0 0 0 var(--border-radius-xs, 4px);
}

#snackys-tpl .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:last-child:not(:only-child),
html .to-search-modal .to-product-card__xl-badges .to-search-product__xl-badge.to-product-card__xl-badge:last-child:not(:only-child) {
    border-radius: 0 var(--border-radius-sm, 8px) 0 0;
}

#snackys-tpl .to-search-modal .to-search-recent,
html .to-search-modal .to-search-recent {
    padding: var(--spacing-2) var(--spacing-3);
}

#snackys-tpl .to-search-modal .to-search-recent > li + li,
html .to-search-modal .to-search-recent > li + li {
    margin: var(--spacing-2) calc(-1 * var(--spacing-3)) 0;
    padding: var(--spacing-2) var(--spacing-3) 0;
    border-top: 1px solid var(--color-tertiary-75);
}

#snackys-tpl .to-search-modal button.to-search-recent__clear,
html .to-search-modal button.to-search-recent__clear {
    padding: var(--spacing-1) var(--spacing-2);
}

#snackys-tpl .to-search-recent__image,
html .to-search-recent__image {
    padding: var(--spacing-1);
}

#snackys-tpl .to-search-recent .to-search-faq__arrow,
html .to-search-recent .to-search-faq__arrow {
    color: currentColor;
}

#snackys-tpl .to-search-recent button:hover .to-search-faq__arrow,
html .to-search-recent button:hover .to-search-faq__arrow,
#snackys-tpl .to-search-recent button:focus-visible .to-search-faq__arrow,
html .to-search-recent button:focus-visible .to-search-faq__arrow {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
}

#snackys-tpl .to-search-group-label--type:hover,
html .to-search-group-label--type:hover {
    transform: none;
}

#snackys-tpl .to-search-board.is-split .to-search-tabs.has-one-tab .to-search-tab:not([hidden]),
html .to-search-board.is-split .to-search-tabs.has-one-tab .to-search-tab:not([hidden]),
#snackys-tpl .to-search-board:not(.is-split).has-one-tab .to-search-tab:not([hidden]),
html .to-search-board:not(.is-split).has-one-tab .to-search-tab:not([hidden]) {
    min-width: 50%;
}

#snackys-tpl .to-search-article__bar, html .to-search-article__bar,
#snackys-tpl .to-search-modal .to-search-bar, html .to-search-modal .to-search-bar,
#snackys-tpl .to-search-group-label--model, html .to-search-group-label--model {
    background: var(--color-secondary-50);
}

#snackys-tpl .to-search-group-label--model::after, html .to-search-group-label--model::after {
    border-left-color: var(--color-secondary-50);
}

#snackys-tpl .to-search-filter-toggle, html .to-search-filter-toggle {
    font-size: 16px;
}

#snackys-tpl .to-search-filter-card, html .to-search-filter-card {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

#snackys-tpl .to-search-board.is-split, html .to-search-board.is-split {
    padding: var(--spacing-3) var(--spacing-3) 0 0;
    padding-top: 0;
}

#snackys-tpl .to-search-tab__count, html .to-search-tab__count {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    min-width: 20px;
    height: 20px;
    border-radius: 0 var(--border-radius-xs, 4px) 0 var(--border-radius-xs, 4px);
    background: var(--color-tertiary-50);
    color: var(--color-neutral);
    font-size: var(--font-size-xs, 13.3px);
    transform: none;
}

#snackys-tpl .to-search-printer-tabs .to-search-tab__count,
html .to-search-printer-tabs .to-search-tab__count {
    display: none;
}

#snackys-tpl .to-search-board .to-search-tab__label, html .to-search-board .to-search-tab__label {
    text-transform: uppercase;
    letter-spacing: -0.025em;
    font-weight: bold;
}

#snackys-tpl .to-search-product-group__head, html .to-search-product-group__head {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-sm, 8px);
    background: var(--color-secondary-50);
}

#snackys-tpl .to-search-tab[data-tab="compatible"] .to-search-brand--mask, html .to-search-tab[data-tab="compatible"] .to-search-brand--mask {
    width: 88px;
    height: 18px;
    background: var(--color-primary-100);
    -webkit-mask: var(--to-search-brand-mask) center / cover no-repeat;
    mask: var(--to-search-brand-mask) center / cover no-repeat;
}

#snackys-tpl .to-search-tab[data-tab="compatible"] .to-search-tab__label, html .to-search-tab[data-tab="compatible"] .to-search-tab__label {
    color: var(--color-primary-100);
}

#snackys-tpl .to-search-tab--refill .to-search-brand--mask, html .to-search-tab--refill .to-search-brand--mask {
    width: 88px;
    height: 18px;
    background: var(--color-success);
    -webkit-mask: var(--to-search-brand-mask) center / cover no-repeat;
    mask: var(--to-search-brand-mask) center / cover no-repeat;
}

#snackys-tpl .to-search-tab--refill .to-search-tab__label, html .to-search-tab--refill .to-search-tab__label {
    color: var(--color-success);
}

#snackys-tpl .to-search-tab img, html .to-search-tab img {
    height: calc(16px * var(--brand-logo-scale, 1));
}

#snackys-tpl .to-search-tab__label,
html .to-search-tab__label {
    font-size: 13.3px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -0.025em;
}

#snackys-tpl .to-search-printer-tabs .to-search-tab[data-printer-category^="product-number-"] .to-search-tab__label,
#snackys-tpl .to-search-printer-tabs .to-search-tab[data-printer-category^="article-number-"] .to-search-tab__label,
html .to-search-printer-tabs .to-search-tab[data-printer-category^="product-number-"] .to-search-tab__label,
html .to-search-printer-tabs .to-search-tab[data-printer-category^="article-number-"] .to-search-tab__label {
    font-size: 16px;
}

#snackys-tpl .to-search-query-highlight,
html .to-search-query-highlight {
    padding: 0;
    background: color-mix(in srgb, var(--color-warning) 75%, transparent);
    color: var(--color-neutral);
}

#snackys-tpl .to-search-printer-tab__logo,
html .to-search-printer-tab__logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: calc(60px * var(--brand-logo-scale, 1));
    height: calc(15px * var(--brand-logo-scale, 1));
    object-fit: contain;
}

#snackys-tpl .to-search-printers-section .to-search-bar__count-text,
html .to-search-printers-section .to-search-bar__count-text {
    display: inline;
}

#snackys-tpl .to-search-printers-section .to-search-summary__item,
html .to-search-printers-section .to-search-summary__item {
    display: inline;
    border-bottom: 1px dotted currentColor;
}

#snackys-tpl .to-search-printers-section .to-search-summary__query strong,
html .to-search-printers-section .to-search-summary__query strong {
    font-weight: 700;
}

#snackys-tpl .to-search-tab-hint--compatible .to-search-brand--mask, html .to-search-tab-hint--compatible .to-search-brand--mask {
    width: 88px;
    height: 18px;
    background: var(--color-primary-100);
    -webkit-mask: var(--to-search-brand-mask) center / cover no-repeat;
    mask: var(--to-search-brand-mask) center / cover no-repeat;
}

#snackys-tpl .to-search-tab-hint--refill .to-search-brand--mask, html .to-search-tab-hint--refill .to-search-brand--mask {
    width: 88px;
    height: 18px;
    background: var(--color-success);
    -webkit-mask: var(--to-search-brand-mask) center / cover no-repeat;
    mask: var(--to-search-brand-mask) center / cover no-repeat;
}
#snackys-tpl .to-search-faq li:not(:has(> .to-search-faq__hit)),
html .to-search-faq li:not(:has(> .to-search-faq__hit)),
#snackys-tpl .to-search-modal .to-search-faq a:not(.to-search-faq__hit),
html .to-search-modal .to-search-faq a:not(.to-search-faq__hit) {
    font-size: 16px !important;
}

#snackys-tpl .to-search-searchhelp__content, html .to-search-searchhelp__content {
    border: 2px solid var(--color-primary-50);
    box-shadow: inset 0px 90px 0px -17px var(--color-primary-100), inset -20px -20px 60px -60px var(--color-primary-100);
}

#snackys-tpl .to-search-searchhelp__brand, html .to-search-searchhelp__brand {
    background: var(--color-white);
}

#snackys-tpl .to-search-searchhelp__intro-label, html .to-search-searchhelp__intro-label {
    color: var(--color-white) !important;
}

#snackys-tpl .to-search-searchhelp.has-selection .to-search-searchhelp__result-header,
html .to-search-searchhelp.has-selection .to-search-searchhelp__result-header {
    margin: 0;
}

#snackys-tpl .to-search-modal .to-search-searchhelp__choices button,
html .to-search-modal .to-search-searchhelp__choices button {
    border-bottom-width: 4px;
}

#snackys-tpl .to-search-modal .to-search-searchhelp__choices button:hover,
html .to-search-modal .to-search-searchhelp__choices button:hover,
#snackys-tpl .to-search-modal .to-search-searchhelp__choices button.is-active,
html .to-search-modal .to-search-searchhelp__choices button.is-active {
    border-color: var(--color-primary-50);
}

#snackys-tpl .to-search-modal .to-search-product__sold-out,
html .to-search-modal .to-search-product__sold-out {
    font-size: 16px;
    background: var(--color-danger-soft);
    color: var(--to-card-soldout-color, var(--color-danger));
    border: 0;
}

#snackys-tpl .to-search-modal .to-search-product__title,
html .to-search-modal .to-search-product__title {
    font-size: 16px;
}

#snackys-tpl .to-search-printer-tab-body[hidden],
html .to-search-printer-tab-body[hidden] {
    display: none !important;
}

/* Constrain the grid item before calculating either carousel's overflow. */
#snackys-tpl .to-search-printer,
html .to-search-printer {
    min-height: 190px;
}

#snackys-tpl .to-search-printers-section,
html .to-search-printers-section {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

#snackys-tpl .to-search-printers-section > .to-search-reveal,
html .to-search-printers-section > .to-search-reveal {
    min-width: 0;
    max-width: 100%;
}

#snackys-tpl .to-search-printer-tabs-shell,
html .to-search-printer-tabs-shell {
    display: block;
    min-width: 0;
    max-width: 100%;
}

#snackys-tpl .to-search-printer-tabs-shell .to-search-printer-tabs,
html .to-search-printer-tabs-shell .to-search-printer-tabs {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: -2px;
    z-index: 1;
}

#snackys-tpl .to-search-printer-tabs .to-search-tab:not(.is-active),
html .to-search-printer-tabs .to-search-tab:not(.is-active) {
    z-index: 1;
    box-shadow: inset 0 -2px 0 0 var(--color-tertiary-75), inset 0 -6px 10px -1px rgba(0, 0, 0, .1);
}

#snackys-tpl .to-search-printer-tabs .to-search-tab,
html .to-search-printer-tabs .to-search-tab {
    flex: 0 0 auto;
    width: max-content;
    min-width: 130px;
    white-space: nowrap;
}

#snackys-tpl .to-search-overlay:not(.has-products) .to-search-printer-tabs .to-search-tab[data-printer-category^="series-"],
html .to-search-overlay:not(.has-products) .to-search-printer-tabs .to-search-tab[data-printer-category^="series-"] {
    min-width: 160px;
}

#snackys-tpl .to-search-printer-tabs .to-search-tab__inner,
html .to-search-printer-tabs .to-search-tab__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#snackys-tpl .to-search-printer-tabs.has-one-tab .to-search-tab,
html .to-search-printer-tabs.has-one-tab .to-search-tab {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
}

#snackys-tpl .to-search-printer-tabs-shell::before,
#snackys-tpl .to-search-printer-tabs-shell::after,
html .to-search-printer-tabs-shell::before,
html .to-search-printer-tabs-shell::after {
    z-index: 3;
}

#snackys-tpl .to-search-printer-tabs-prev,
#snackys-tpl .to-search-printer-tabs-next,
html .to-search-printer-tabs-prev,
html .to-search-printer-tabs-next {
    width: calc(var(--spacing-6) + var(--spacing-1));
    height: calc(var(--spacing-6) + var(--spacing-1));
    z-index: 4;
    color: var(--color-primary-100);
}

#snackys-tpl .to-search-printer-tabs-prev svg,
#snackys-tpl .to-search-printer-tabs-next svg,
#snackys-tpl .to-search-printers-wrap > .to-search-prev svg,
#snackys-tpl .to-search-printers-wrap > .to-search-next svg,
html .to-search-printer-tabs-prev svg,
html .to-search-printer-tabs-next svg,
html .to-search-printers-wrap > .to-search-prev svg,
html .to-search-printers-wrap > .to-search-next svg {
    display: block;
    width: var(--spacing-4);
    height: var(--spacing-4);
}

/* Keep printer cards stationary; only their product photo gets the hover zoom. */
#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton),
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton) {
    transform: none;
    transition: border-color .2s ease, background-color .2s ease;
}

#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):hover,
#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):focus-visible,
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):hover,
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):focus-visible {
    transform: none;
}

#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton) .to-search-printer__image img,
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton) .to-search-printer__image img {
    transform: scale(1);
    transition: transform .2s ease;
}

#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):hover .to-search-printer__image img,
#snackys-tpl .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):focus-visible .to-search-printer__image img,
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):hover .to-search-printer__image img,
html .to-search-printer:not(.to-search-printer--featured):not(.to-search-printer--skeleton):focus-visible .to-search-printer__image img {
    transform: scale(1.04);
}

#snackys-tpl .to-search-printers.is-dragging .to-search-printer__image img,
html .to-search-printers.is-dragging .to-search-printer__image img {
    transform: none;
    transition: none;
}

#snackys-tpl .to-search-overlay:not(.has-suggestions) .to-search-modal .to-search-sidebar .to-search-bar--faq,
html .to-search-overlay:not(.has-suggestions) .to-search-modal .to-search-sidebar .to-search-bar--faq {
    margin-top: 0;
}

#snackys-tpl .to-search-overlay.has-products .to-search-printer:not(.to-search-printer--featured) .to-search-printer__brand,
#snackys-tpl .to-search-overlay.has-featured .to-search-printer:not(.to-search-printer--featured) .to-search-printer__brand,
html .to-search-overlay.has-products .to-search-printer:not(.to-search-printer--featured) .to-search-printer__brand,
html .to-search-overlay.has-featured .to-search-printer:not(.to-search-printer--featured) .to-search-printer__brand {
    height: calc(10px * var(--brand-logo-scale, 1));
}

#snackys-tpl .to-search-close.is-loading,
html .to-search-close.is-loading {
    color: var(--color-primary-100);
}

#snackys-tpl .to-search-close.is-loading svg,
html .to-search-close.is-loading svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
    animation: to-search-spinner-rotate .75s linear infinite;
}

#snackys-tpl .to-search-close.is-loading .to-search-spinner__track,
html .to-search-close.is-loading .to-search-spinner__track {
    opacity: .25;
}

@keyframes to-search-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Keep sale and reference prices separated at every card width. */
#snackys-tpl .to-search-modal .to-search-product__price:has(> .to-search-product__discount),
html .to-search-modal .to-search-product__price:has(> .to-search-product__discount) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
    min-width: 0;
}
#snackys-tpl .to-search-modal .to-search-product__price > .to-search-product__discount,
html .to-search-modal .to-search-product__price > .to-search-product__discount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    max-width: 100%;
    white-space: normal;
}

/* Use the group's real width: split views can be narrow even on a desktop. */
#snackys-tpl .to-search-modal .to-search-product-group,
html .to-search-modal .to-search-product-group {
    container: to-search-product-group / inline-size;
}
@container to-search-product-group (max-width: 560px) {
    #snackys-tpl .to-search-modal .to-search-product-group__items,
    html .to-search-modal .to-search-product-group__items {
        grid-template-columns: minmax(0, 1fr);
    }
    #snackys-tpl .to-search-modal .to-search-product,
    html .to-search-modal .to-search-product {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}
