/* Zetronix Refresh v0.16.12 - category pages (Shop by type panel, Must-have row, product cards, phone bar; filters off) */
:root { --zxr-cat-css: 1; }

/* Keep the old layout out of sight while the script rebuilds it (at most 2.5 s). */
body.catalog-category-view:not(.zxr-cat):not(.zxr-cat-off) #maincontent .columns {
    visibility: hidden;
    animation: zxr-cat-reveal 0s linear 2.5s forwards;
}
@keyframes zxr-cat-reveal { to { visibility: visible; } }
/* v0.16.12: no jump on first load. The breadcrumbs move into the new header band and the old theme's
   "below menu" boxes (130-144 px) are hidden on category pages, so neither may take any space before
   the script runs. They come back only if the rebuild is switched off (.zxr-cat-off). */
body.catalog-category-view:not(.zxr-cat):not(.zxr-cat-off) .page-wrapper > .breadcrumbs { display: none !important; }
body.catalog-category-view:not(.zxr-cat-off) .belowMenuBoxes { display: none !important; }

body.zxr-cat {
    --zc-navy: #0b1830;
    --zc-blue: #0d4dad;
    --zc-sky: #9fc5ff;
    --zc-cta: #f26a00;
    --zc-orange: #fe7209;
    --zc-ink: #c85000;
    --zc-peach: #fff1e6;
    --zc-peach-line: #ffd9bf;
    --zc-text: #0e1726;
    --zc-muted: #566378;
    --zc-muted-d: #aebad0;
    --zc-paper: #f1f3f6;
    --zc-line: #e3e7ee;
    --zc-line-h: #cfd8e6;
    --zc-div: #edf0f4;
    --zc-field: #7d889c;
    --zc-shadow: 0 1px 2px rgba(11, 24, 48, .04), 0 10px 26px -20px rgba(11, 24, 48, .32);
    --zc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--zc-paper);
}

/* ---------- old pieces that the new layout replaces ---------- */
body.zxr-cat .belowMenuBoxes,
body.zxr-cat #maincontent .page-title-wrapper,
body.zxr-cat #maincontent .category-view,
body.zxr-cat .column.main > h2.d-md-none,
body.zxr-cat .column.main .categoryFilters,
body.zxr-cat .column.main .OtherFilters,
body.zxr-cat .ToggleFilters,
body.zxr-cat .wp-ln-overlay,
body.zxr-cat .wp-filters,
body.zxr-cat #zxr-results .toolbar-products,
body.zxr-cat #zxr-results .toolbar-top,
body.zxr-cat #zxr-results .toolbar-bottom,
body.zxr-cat #zxr-filters .block-title.filter-title,
body.zxr-cat #zxr-filters .filter-subtitle,
body.zxr-cat #zxr-filters .filter-current,
body.zxr-cat #zxr-filters .filter-actions,
body.zxr-cat #zxr-filters .wp-ln-actions,
body.zxr-cat #zxr-filters .filter-options-item.zxr-hide,
body.zxr-cat #zxr-filters .filter-options-content li.item.zxr-hide {
    display: none !important;
}
body.zxr-cat.wp-ln-open { overflow: auto !important; height: auto !important; }

/* ---------- page width: up to 1600px with 40px margins ---------- */
body.zxr-cat #maincontent > .columns > .container {
    max-width: 1600px !important;
    width: 100% !important;
    padding: 0 40px !important;
    margin: 0 auto !important;
}
body.zxr-cat #maincontent > .columns > .container > .row { margin: 0 !important; display: block !important; }
body.zxr-cat #maincontent > .columns > .container > .row > [class*="col-"] {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
}
body.zxr-cat #maincontent .column.main { padding: 0 !important; width: 100% !important; float: none !important; }

/* ---------- shared ---------- */
.zxr-kit {
    font-family: var(--zc-font);
    color: var(--zc-text);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 0 64px;
    line-height: 1.45;
}
.zxr-kit *, .zxr-kit *::before, .zxr-kit *::after { box-sizing: border-box; }
.zxr-kit[hidden], .zxr-kit [hidden] { display: none !important; }
.zxr-card {
    background: #fff;
    border: 1px solid var(--zc-line);
    box-shadow: var(--zc-shadow);
    border-radius: 24px;
}
.zxr-eyebrow {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zc-blue);
    padding-left: 26px;
    background: linear-gradient(var(--zc-orange), var(--zc-orange)) left center / 18px 3px no-repeat;
    line-height: 1.3;
}
.zxr-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.zxr-ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.zxr-star { width: 18px; height: 18px; fill: #ff9a1f; flex: none; }

/* Buttons: undo the parent theme's grey button look (base, focus, active) */
body.zxr-cat .zxr-kit button,
body.zxr-cat .zxr-kit button:hover,
body.zxr-cat .zxr-kit button:focus,
body.zxr-cat .zxr-kit button:active {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--zc-font);
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    line-height: 1.2;
    margin: 0;
    min-height: 0;
    cursor: pointer;
}

/* Product-type icons (48px grid, navy line + orange mark) */
.zxr-ti { width: 34px; height: 34px; display: block; }
.zxr-ti path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zxr-ti .n { stroke: var(--zc-navy); }
.zxr-ti .o { stroke: var(--zc-ink); }
.zxr-ti .of { fill: var(--zc-ink); stroke: none; }

/* ---------- navy band ---------- */
.zxr-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 48px;
    align-items: center;
    background: radial-gradient(circle at 100% 0, rgba(159, 197, 255, .16), rgba(159, 197, 255, 0) 42%), var(--zc-navy);
    color: #fff;
    border-radius: 28px;
    padding: 34px 40px;
    box-shadow: 0 24px 48px -32px rgba(11, 24, 48, .7);
}
.zxr-band__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body.zxr-cat .zxr-band .breadcrumbs { margin: 0 !important; padding: 0 !important; background: none !important; max-width: none !important; width: auto !important; }
body.zxr-cat .zxr-band .breadcrumbs .container { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
body.zxr-cat .zxr-band .breadcrumbs .items {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 13.5px !important;
    color: var(--zc-muted-d) !important;
    list-style: none;
}
body.zxr-cat .zxr-band .breadcrumbs .item { color: #fff !important; font-size: 13.5px !important; display: inline-flex; align-items: center; margin: 0 !important; }
body.zxr-cat .zxr-band .breadcrumbs .item a { color: var(--zc-sky) !important; text-decoration: none !important; font-size: 13.5px !important; }
body.zxr-cat .zxr-band .breadcrumbs .item a:hover { text-decoration: underline !important; }
body.zxr-cat .zxr-band .breadcrumbs .item:not(:last-child)::after {
    content: "\203A" !important;
    color: var(--zc-muted-d) !important;
    margin: 0 8px !important;
    font-family: var(--zc-font) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
}
body.zxr-cat .zxr-band .page-title,
body.zxr-cat .zxr-band h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--zc-font) !important;
    font-size: 52px !important;
    line-height: 1.04 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    color: #fff !important;
    text-align: left !important;
    text-transform: none !important;
    display: block !important;
}
body.zxr-cat .zxr-band h1 .base { font: inherit !important; color: inherit !important; }
.zxr-band__intro {
    margin: 0;
    max-width: 720px;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--zc-muted-d);
}
.zxr-band__intro span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zxr-band__intro a { color: var(--zc-sky) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.zxr-band__promise {
    list-style: none;
    margin: 0;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 14.5px;
    color: #fff;
}
.zxr-band__promise li { display: flex; align-items: center; gap: 12px; margin: 0; }
.zxr-band__promise li:first-child { padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.zxr-band__promise .zxr-ico { width: 20px; height: 20px; color: var(--zc-orange); }
.zxr-band__promise b { font-size: 16px; }
.zxr-band__promise .zxr-band__muted { color: var(--zc-muted-d); }
.zxr-band__strip { display: none; }
.zxr-band a:focus-visible { outline: 3px solid var(--zc-sky) !important; outline-offset: 2px; }

/* ---------- Shop by type ---------- */
.zxr-types {
    padding: 22px 24px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 18px;
    align-items: center;
}
.zxr-types__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 16px 24px; min-width: 0; }
.zxr-types__must { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.zxr-types__grid { grid-column: 1 / -1; grid-row: 2; }
.zxr-types__intro { display: flex; flex-direction: column; gap: 6px; }
.zxr-types__help { margin: 0; font-size: 15px; color: var(--zc-muted); }
.zxr-types__mustlabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zc-muted); margin-right: 4px; }
.zxr-types__pills { display: flex; gap: 10px; flex-wrap: wrap; }
body.zxr-cat .zxr-kit button.zxr-types__all,
body.zxr-cat .zxr-kit button.zxr-types__all:focus,
body.zxr-cat .zxr-kit button.zxr-types__all:active {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 2px;
    background: none;
    border: 0;
    padding: 6px 0;
    color: var(--zc-blue);
    font-size: 14px;
    font-weight: 700;
}
.zxr-types__grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; }

body.zxr-cat .zxr-kit button.zxr-tile,
body.zxr-cat .zxr-kit button.zxr-tile:hover,
body.zxr-cat .zxr-kit button.zxr-tile:focus,
body.zxr-cat .zxr-kit button.zxr-tile:active {
    position: relative;
    background: #fff;
    border: 1px solid var(--zc-line);
    border-radius: 18px;
    padding: 14px 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--zc-navy);
    width: auto;
    height: auto;
}
body.zxr-cat .zxr-kit button.zxr-tile:hover { border-color: var(--zc-line-h); }
body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"],
body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:focus,
body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:active {
    border: 2px solid var(--zc-orange);
    background: #fff6ef;
    padding: 13px 5px 11px;
}
.zxr-tile__box { width: 56px; height: 56px; border-radius: 16px; background: var(--zc-paper); display: flex; align-items: center; justify-content: center; }
.zxr-tile[aria-pressed="true"] .zxr-tile__box { background: var(--zc-navy); }
.zxr-tile[aria-pressed="true"] .zxr-ti .n { stroke: #fff; }
.zxr-tile[aria-pressed="true"] .zxr-ti .o { stroke: var(--zc-orange); }
.zxr-tile[aria-pressed="true"] .zxr-ti .of { fill: var(--zc-orange); }
.zxr-tile__name { font-size: 13px; font-weight: 700; line-height: 1.25; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.zxr-tile__count { font-size: 12px; color: var(--zc-muted); line-height: 1; }
.zxr-tile__check {
    display: none;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--zc-orange);
    align-items: center;
    justify-content: center;
}
.zxr-tile__check svg { width: 13px; height: 13px; fill: none; stroke: var(--zc-navy); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.zxr-tile[aria-pressed="true"] .zxr-tile__check { display: flex; }
.zxr-types:not(.is-open) .zxr-tile.is-extra { display: none !important; }
body.zxr-cat .zxr-kit button.zxr-tile--more,
body.zxr-cat .zxr-kit button.zxr-tile--more:focus,
body.zxr-cat .zxr-kit button.zxr-tile--more:active { border-style: dashed; border-color: #c9d2df; }
.zxr-tile--more .zxr-tile__box { background: var(--zc-peach); color: var(--zc-ink); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.zxr-tile--more .zxr-tile__box .zxr-ico { width: 24px; height: 24px; stroke-width: 2.4; }

body.zxr-cat .zxr-kit button.zxr-pill,
body.zxr-cat .zxr-kit button.zxr-pill:hover,
body.zxr-cat .zxr-kit button.zxr-pill:focus,
body.zxr-cat .zxr-kit button.zxr-pill:active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 15px 0 9px;
    border: 1px solid var(--zc-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-navy);
    white-space: nowrap;
}
body.zxr-cat .zxr-kit button.zxr-pill:hover { border-color: var(--zc-line-h); }
body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"],
body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"]:focus,
body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"]:active {
    border-color: var(--zc-orange);
    background: #fff6ef;
    box-shadow: inset 0 0 0 1px var(--zc-orange);
}
.zxr-pill .zxr-ti { width: 26px; height: 26px; }
.zxr-pill__count { font-size: 12.5px; font-weight: 600; color: var(--zc-muted); }

/* ---------- filters + results ---------- */
.zxr-cols { display: flex; gap: 24px; align-items: flex-start; }
.zxr-results { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.zxr-results__bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-height: 48px; }
.zxr-results__count { margin: 0; font-size: 20px; font-weight: 800; color: var(--zc-navy); }
.zxr-applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.zxr-cat .zxr-kit button.zxr-chip,
body.zxr-cat .zxr-kit button.zxr-chip:hover,
body.zxr-cat .zxr-kit button.zxr-chip:focus,
body.zxr-cat .zxr-kit button.zxr-chip:active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px 0 15px;
    border-radius: 999px;
    border: 1px solid var(--zc-peach-line);
    background: var(--zc-peach);
    color: var(--zc-navy);
    font-size: 14px;
    font-weight: 700;
}
.zxr-chip .zxr-ico { width: 15px; height: 15px; stroke-width: 2.4; }
body.zxr-cat .zxr-kit button.zxr-linkbtn,
body.zxr-cat .zxr-kit button.zxr-linkbtn:hover,
body.zxr-cat .zxr-kit button.zxr-linkbtn:focus,
body.zxr-cat .zxr-kit button.zxr-linkbtn:active {
    background: none;
    border: 0;
    padding: 6px 2px;
    color: var(--zc-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zxr-sort { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--zc-muted); white-space: nowrap; }
body.zxr-cat .zxr-sort select {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    min-width: 200px;
    padding: 0 40px 0 16px;
    border-radius: 12px;
    border: 1px solid var(--zc-field);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1830' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px 16px no-repeat;
    color: var(--zc-navy);
    font-family: var(--zc-font);
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: none;
    margin: 0;
}

/* Filter column on PC */
.zxr-filters {
    width: 268px;
    flex: none;
    border-radius: 24px;
    padding: 20px 20px 12px;
    position: sticky;
    top: calc(var(--zxr-stick, 0px) + 16px);
    max-height: calc(100vh - var(--zxr-stick, 0px) - 32px);
    overflow: auto;
    overscroll-behavior: contain;
}
.zxr-filters__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.zxr-filters__head h2 { margin: 0; font-family: var(--zc-font); font-size: 18px; font-weight: 800; color: var(--zc-navy); }
.zxr-filters__state { margin-left: auto; font-size: 13px; color: var(--zc-muted); }
body.zxr-cat .zxr-kit button.zxr-x,
body.zxr-cat .zxr-kit button.zxr-x:hover,
body.zxr-cat .zxr-kit button.zxr-x:focus,
body.zxr-cat .zxr-kit button.zxr-x:active {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--zc-line);
    background: #fff;
    color: var(--zc-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
body.zxr-cat .zxr-kit .zxr-filters__head button.zxr-x,
body.zxr-cat .zxr-kit .zxr-sheet__head button.zxr-x { margin: 0 0 0 auto !important; }
.zxr-filters__close { display: none !important; }
.zxr-kit .zxr-filters .zxr-filters__foot { display: none; }
body.zxr-cat #zxr-filters .zxr-fprice { font-size: 14px !important; font-weight: inherit !important; color: inherit !important; }

/* WeltPixel filters inside the column */
body.zxr-cat #zxr-filters .block.filter,
body.zxr-cat #zxr-filters #layered-filter-block {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.zxr-cat #zxr-filters .block-content,
body.zxr-cat #zxr-filters .filter-options { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; }
body.zxr-cat #zxr-filters .filter-options-item {
    border: 0 !important;
    border-top: 1px solid var(--zc-div) !important;
    margin: 0 !important;
    padding: 16px 0 6px !important;
    background: none !important;
}
body.zxr-cat #zxr-filters .filter-options-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-family: var(--zc-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--zc-navy) !important;
    pointer-events: none;
}
body.zxr-cat #zxr-filters .filter-options-title::after,
body.zxr-cat #zxr-filters .filter-options-title::before { display: none !important; content: none !important; }
body.zxr-cat #zxr-filters .filter-options-content { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.zxr-cat #zxr-filters .filter-options-content ol.items,
body.zxr-cat #zxr-filters .filter-options-content ul.items { margin: 0 !important; padding: 0 !important; list-style: none !important; max-height: none !important; overflow: visible !important; }
body.zxr-cat #zxr-filters .filter-options-content li.item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    width: auto !important;
    float: none !important;
}
body.zxr-cat #zxr-filters .filter-options-content li.item > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 0 !important;
    margin: 0 !important;
    color: var(--zc-text) !important;
    font-family: var(--zc-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: none !important;
    border: 0 !important;
}
body.zxr-cat #zxr-filters .filter-options-content li.item > a::before {
    content: "" !important;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--zc-field);
    border-radius: 5px;
    background: #fff;
    display: block !important;
    position: static !important;
    margin: 0 !important;
}
body.zxr-cat #zxr-filters .filter-options-content li.item.wp-ln-selected > a { font-weight: 700 !important; color: var(--zc-navy) !important; }
body.zxr-cat #zxr-filters .filter-options-content li.item.wp-ln-selected > a::before {
    border-color: var(--zc-navy);
    background: var(--zc-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
body.zxr-cat #zxr-filters .filter-options-content li.item > a:hover::before { border-color: var(--zc-navy); }
body.zxr-cat #zxr-filters .filter-options-content li.item > a .count {
    margin-left: auto !important;
    font-size: 12.5px !important;
    color: var(--zc-muted) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: 400 !important;
}
body.zxr-cat #zxr-filters .filter-options-content li.item > a .count::before,
body.zxr-cat #zxr-filters .filter-options-content li.item > a .count::after { content: none !important; display: none !important; }
body.zxr-cat #zxr-filters .filter-count-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
body.zxr-cat #zxr-filters .zxr-fsub { display: block; font-size: 12px; color: var(--zc-muted); font-weight: 400; }
body.zxr-cat #zxr-filters .zxr-flabel { display: flex; flex-direction: column; }
body.zxr-cat #zxr-filters .wp-filter-disabled,
body.zxr-cat #zxr-filters li.item > span { opacity: .55; }

/* ---------- product cards ---------- */
body.zxr-cat #zxr-results .products-grid,
body.zxr-cat #zxr-results .products.wrapper { margin: 0 !important; padding: 0 !important; }
body.zxr-cat #zxr-results ol.product-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
}
body.zxr-cat #zxr-results ol.product-items::before,
body.zxr-cat #zxr-results ol.product-items::after { content: none !important; display: none !important; }
body.zxr-cat #zxr-results li.product-item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: none !important;
    display: block !important;
    border: 0 !important;
    background: none !important;
}
body.zxr-cat #zxr-results li.product-item .item-inner { height: 100%; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.zxr-cat #zxr-results li.product-item,
body.zxr-cat #zxr-results .product-item-info { min-height: 0 !important; }
body.zxr-cat #zxr-results .product-item-info {
    position: relative;
    height: 100%;
    width: auto !important;
    display: flex !important;
    flex-direction: column;
    background: #fff !important;
    border: 1px solid var(--zc-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--zc-shadow) !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--zc-font);
}
body.zxr-cat #zxr-results .product-item-info:hover { border-color: var(--zc-line-h) !important; }
body.zxr-cat #zxr-results .product-item-info > .product-item-name {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
body.zxr-cat #zxr-results .product-item-info > .product-item-name > a.product-item-link { display: none !important; }
body.zxr-cat #zxr-results .product-item-image {
    position: relative;
    display: block !important;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-bottom: 1px solid var(--zc-div);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
body.zxr-cat #zxr-results .product-item-image .button-top,
body.zxr-cat #zxr-results .product-item-image .product-labels,
body.zxr-cat #zxr-results .product-item-image .wp-product-label { display: none !important; }
body.zxr-cat #zxr-results .product-item-photo,
body.zxr-cat #zxr-results .product-image-container,
body.zxr-cat #zxr-results .product-image-wrapper {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    overflow: visible !important;
}
body.zxr-cat #zxr-results .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    padding: 14px;
    position: static !important;
    margin: 0 !important;
    transform: none !important;
}
body.zxr-cat #zxr-results .product-image-photo:not(.default_image) { display: none !important; }
.zxr-save {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    background: var(--zc-orange);
    color: var(--zc-navy);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1.2;
    pointer-events: none;
}
body.zxr-cat #zxr-results .product-item-details {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 14px 16px 16px !important;
    margin: 0 !important;
    text-align: left !important;
}
body.zxr-cat #zxr-results .product-item-details > .product-item-name {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.zxr-cat #zxr-results .product-item-details .product-item-link {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--zc-font) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--zc-navy) !important;
    line-height: 1.3 !important;
    min-height: 39px;
    text-decoration: none !important;
    text-align: left !important;
    margin: 0 !important;
}
body.zxr-cat #zxr-results .product-item-details .product-item-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
body.zxr-cat #zxr-results .product-item-details .product-item-link:focus-visible { outline: none !important; }
body.zxr-cat #zxr-results .product-item-info:focus-within { outline: 3px solid var(--zc-navy); outline-offset: 2px; }
body.zxr-cat #zxr-results .product-item-details .yotpo-widget-instance { min-height: 20px; margin: 0 !important; }
body.zxr-cat #zxr-results .product-item-details .bullets { display: none !important; }
.zxr-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--zc-paper);
    border-radius: 12px;
    padding: 9px 2px;
    margin: 0;
}
.zxr-specs__c { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; border-left: 1px solid #dfe3ea; min-width: 0; padding: 0 2px; }
.zxr-specs__c:first-child { border-left: 0; }
.zxr-specs__l { font-size: 11.5px; color: var(--zc-muted); white-space: nowrap; line-height: 1.2; }
.zxr-specs__v { font-size: 13.5px; letter-spacing: -.01em; font-weight: 800; color: var(--zc-navy); white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zxr-specs__v.is-na { font-weight: 600; color: var(--zc-muted); }
.zxr-standout { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--zc-navy); white-space: nowrap; overflow: hidden; min-height: 20px; line-height: 1.3; }
.zxr-standout span:last-child { overflow: hidden; text-overflow: ellipsis; }
.zxr-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--zc-peach);
    border: 1px solid var(--zc-peach-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.zxr-dot svg { width: 11px; height: 11px; fill: none; stroke: var(--zc-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.zxr-cat #zxr-results .price-box {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: auto 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--zc-div);
    text-align: left !important;
}
body.zxr-cat #zxr-results .price-box .price-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
body.zxr-cat #zxr-results .price-box .special-price,
body.zxr-cat #zxr-results .price-box .price-final_price,
body.zxr-cat #zxr-results .price-box .old-price { display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
body.zxr-cat #zxr-results .price-box .price {
    font-family: var(--zc-font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--zc-navy) !important;
    letter-spacing: -.01em;
}
body.zxr-cat #zxr-results .price-box .old-price .price { font-size: 14px !important; font-weight: 400 !important; color: var(--zc-muted) !important; text-decoration: line-through; }
body.zxr-cat #zxr-results .product-item-details .sku,
body.zxr-cat #zxr-results .product-item-details .product-item-inner,
body.zxr-cat #zxr-results .product-item .onsale { display: none !important; }
.zxr-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--zc-navy);
    color: var(--zc-navy);
    font-size: 14.5px;
    font-weight: 800;
    transition: background-color .15s, color .15s;
}
.zxr-view .zxr-ico { width: 16px; height: 16px; }
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { background: var(--zc-navy); color: #fff; }

/* infinite scroll bits */
body.zxr-cat #zxr-results .ias-spinner,
body.zxr-cat #zxr-results .ias-noneleft,
body.zxr-cat #zxr-results .ias-trigger { text-align: center; padding: 16px 0; font-family: var(--zc-font); color: var(--zc-muted); grid-column: 1 / -1; }

/* ---------- about + promise ---------- */
.zxr-about { padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.zxr-about h2 { margin: 0; font-family: var(--zc-font); font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: var(--zc-navy); }
body.zxr-cat .zxr-about .category-description { margin: 0 !important; padding: 0 !important; }
body.zxr-cat .zxr-about .category-description [data-content-type="row"],
body.zxr-cat .zxr-about .category-description [data-element="inner"] { margin: 0 !important; padding: 0 !important; }
.zxr-promise { padding: 30px 32px 32px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.zxr-promise__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.zxr-promise__head h2 { margin: 0; font-family: var(--zc-font); font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: var(--zc-navy); line-height: 1.15; }
.zxr-promise__grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.zxr-promise__grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px; margin: 0; }
.zxr-promise__circ { width: 48px; height: 48px; border-radius: 50%; background: var(--zc-navy); display: flex; align-items: center; justify-content: center; color: #ff9433; }
.zxr-promise__circ .zxr-ico { width: 22px; height: 22px; }
.zxr-promise__grid b { font-size: 16px; color: var(--zc-navy); }
.zxr-promise__grid span { font-size: 14px; color: var(--zc-muted); }

/* ---------- phone bar, drawers, sheet ---------- */
.zxr-mbar { display: none; }
.zxr-scrim { display: none; }
.zxr-sheet { padding: 0; border: 0; margin: 0; max-width: none; max-height: none; background: transparent; }
.zxr-sheet::backdrop { background: rgba(11, 24, 48, .58); }
.zxr-sheet[open] {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: calc(100% - 56px);
    display: flex;
}
.zxr-sheet__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(11, 24, 48, .35);
    overflow: hidden;
    font-family: var(--zc-font);
    color: var(--zc-text);
}
.zxr-sheet__head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--zc-div); }
.zxr-sheet__head h2 { margin: 0; font-family: var(--zc-font); font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--zc-navy); }
.zxr-sheet__head p { margin: 2px 0 0; font-size: 13.5px; color: var(--zc-muted); }
.zxr-sheet__head .zxr-x { margin-left: auto; }
.zxr-sheet__body { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.zxr-sheet__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.zxr-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zxr-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 18px; border-top: 1px solid var(--zc-line); background: #fff; box-shadow: 0 -8px 20px -14px rgba(11, 24, 48, .4); }
body.zxr-cat .zxr-kit button.zxr-clear,
body.zxr-cat .zxr-kit button.zxr-clear:hover,
body.zxr-cat .zxr-kit button.zxr-clear:focus,
body.zxr-cat .zxr-kit button.zxr-clear:active {
    height: 56px;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--zc-navy);
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.zxr-cat .zxr-kit button.zxr-show,
body.zxr-cat .zxr-kit button.zxr-show:hover,
body.zxr-cat .zxr-kit button.zxr-show:focus,
body.zxr-cat .zxr-kit button.zxr-show:active {
    flex: 1;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background: var(--zc-cta);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    box-shadow: 0 10px 20px -12px rgba(242, 106, 0, .8);
}

/* ---------- PC widths: fewer tiles in one row ---------- */
@media (min-width: 1240px) and (max-width: 1399px) {
    .zxr-types__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

/* ---------- tablets and phones: drawer filters, swipe strip ---------- */
@media (max-width: 1239px) {
    .zxr-band { grid-template-columns: 1fr; gap: 20px; }
    .zxr-band__promise { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
    .zxr-band__promise li:first-child { padding-bottom: 0; border-bottom: 0; }
    .zxr-types__help { display: none; }
    .zxr-types { grid-template-columns: minmax(0, 1fr); }
    .zxr-types__must { grid-column: 1; grid-row: 3; justify-content: flex-start; }
    .zxr-types__mustlabel { display: none; }
    body.zxr-cat .zxr-kit button.zxr-types__all,
    body.zxr-cat .zxr-kit button.zxr-types__all:focus,
    body.zxr-cat .zxr-kit button.zxr-types__all:active { display: inline-flex; }
    .zxr-types__grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 24px;
        scrollbar-width: none;
        margin: 0 -24px;
        padding: 0 24px 2px;
    }
    .zxr-types__grid::-webkit-scrollbar { display: none; }
    body.zxr-cat .zxr-kit button.zxr-tile,
    body.zxr-cat .zxr-kit button.zxr-tile:hover,
    body.zxr-cat .zxr-kit button.zxr-tile:focus,
    body.zxr-cat .zxr-kit button.zxr-tile:active { flex: none; width: 92px; scroll-snap-align: start; }
    .zxr-types .zxr-tile.is-extra { display: flex !important; }
    .zxr-tile--more { display: none !important; }
    .zxr-sort { display: none; }

    .zxr-mbar {
        display: flex;
        align-items: center;
        position: sticky;
        top: var(--zxr-stick, 0px);
        z-index: 30;
        height: 52px;
        background: var(--zc-navy);
        color: #fff;
        border-radius: 16px;
        padding: 0 6px 0 4px;
        font-size: 14.5px;
        font-weight: 700;
        box-shadow: 0 10px 24px -18px rgba(11, 24, 48, .9);
    }
    body.zxr-cat .zxr-kit button.zxr-mbar__btn,
    body.zxr-cat .zxr-kit button.zxr-mbar__btn:hover,
    body.zxr-cat .zxr-kit button.zxr-mbar__btn:focus,
    body.zxr-cat .zxr-kit button.zxr-mbar__btn:active {
        background: none;
        border: 0;
        color: #fff;
        height: 52px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14.5px;
        font-weight: 700;
    }
    .zxr-mbar__sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .2); }
    .zxr-mbar__sort { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; color: #fff; }
    body.zxr-cat .zxr-mbar__sort select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        font-size: 16px;
    }
    .zxr-mbar__count { margin-left: auto; padding-right: 10px; font-weight: 600; font-size: 13.5px; color: var(--zc-muted-d); }
    .zxr-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--zc-orange);
        color: var(--zc-navy);
        font-size: 12px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .zxr-mbar button:focus-visible,
    .zxr-mbar__sort:focus-within { outline: 3px solid var(--zc-sky) !important; outline-offset: -3px; border-radius: 12px; }

    .zxr-cols { display: block; }
    .zxr-filters {
        position: fixed !important;
        z-index: 100000;
        left: 0;
        right: 0;
        bottom: 0;
        top: 56px;
        width: auto;
        max-height: none;
        border-radius: 24px 24px 0 0 !important;
        padding: 0 !important;
        display: none;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -12px 40px rgba(11, 24, 48, .35) !important;
    }
    .zxr-filters.is-open { display: flex; }
    .zxr-filters__head { padding: 16px 16px 12px; border-bottom: 1px solid var(--zc-div); }
    .zxr-filters__head h2 { font-size: 21px; }
    .zxr-filters__close { display: inline-flex !important; }
    .zxr-filters__state { margin-left: 0; }
    .zxr-filters__head .zxr-x { margin-left: auto; }
    .zxr-filters__body { flex: 1; overflow: auto; padding: 4px 16px 12px; overscroll-behavior: contain; }
    .zxr-kit .zxr-filters .zxr-filters__foot { display: flex; }
    body.zxr-cat #zxr-filters .filter-options-content li.item > a { min-height: 48px; font-size: 15px !important; }
    .zxr-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 99999; background: rgba(11, 24, 48, .58); }
    body.zxr-lock { overflow: hidden !important; }

    .zxr-promise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
    body.zxr-cat #maincontent > .columns > .container { padding: 0 !important; }
    .zxr-kit { padding: 0 0 40px; gap: 0; }
    .zxr-band { border-radius: 0; padding: 14px 18px 40px; gap: 8px; box-shadow: none; }
    .zxr-band__main { gap: 8px; }
    body.zxr-cat .zxr-band .breadcrumbs .items,
    body.zxr-cat .zxr-band .breadcrumbs .item,
    body.zxr-cat .zxr-band .breadcrumbs .item a { font-size: 12.5px !important; }
    body.zxr-cat .zxr-band .page-title,
    body.zxr-cat .zxr-band h1 { font-size: 33px !important; line-height: 1.06 !important; }
    .zxr-band__intro { font-size: 14.5px; line-height: 1.5; }
    .zxr-band__promise { display: none; }
    .zxr-band__strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 0; font-size: 12.5px; color: #dfe6f2; }
    .zxr-band__strip b { color: #fff; }
    .zxr-band__strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--zc-orange); display: inline-block; }
    .zxr-band__strip .zxr-star { width: 14px; height: 14px; }

    .zxr-types { margin-top: -24px; position: relative; border-radius: 20px 20px 0 0; border: 0; box-shadow: none; padding: 16px 0 14px; row-gap: 12px; }
    .zxr-types__head { padding: 0 16px; gap: 12px; }
    .zxr-types__must { padding: 0 16px; min-width: 0; }
    .zxr-types__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .zxr-types__pills::-webkit-scrollbar { display: none; }
    .zxr-types__grid { margin: 0; padding: 0 16px 2px; scroll-padding-inline: 16px; }
    body.zxr-cat .zxr-kit button.zxr-tile,
    body.zxr-cat .zxr-kit button.zxr-tile:hover,
    body.zxr-cat .zxr-kit button.zxr-tile:focus,
    body.zxr-cat .zxr-kit button.zxr-tile:active { width: 80px; padding: 10px 4px 9px; gap: 6px; border-radius: 16px; }
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"],
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:active { padding: 9px 3px 8px; }
    .zxr-tile__box { width: 46px; height: 46px; border-radius: 13px; }
    .zxr-tile .zxr-ti { width: 30px; height: 30px; }
    .zxr-tile__name { font-size: 12px; min-height: 29px; line-height: 1.22; }
    .zxr-tile__count { font-size: 11.5px; }
    .zxr-tile__check { width: 18px; height: 18px; right: 5px; top: 5px; }
    .zxr-tile__check svg { width: 11px; height: 11px; }
    body.zxr-cat .zxr-kit button.zxr-pill,
    body.zxr-cat .zxr-kit button.zxr-pill:hover,
    body.zxr-cat .zxr-kit button.zxr-pill:focus,
    body.zxr-cat .zxr-kit button.zxr-pill:active { height: 38px; padding: 0 12px 0 7px; font-size: 13.5px; gap: 6px; flex: none; }
    .zxr-pill .zxr-ti { width: 22px; height: 22px; }

    .zxr-mbar { border-radius: 0; }
    .zxr-results { gap: 0; }
    .zxr-results__bar { display: none; }
    .zxr-results__bar.has-chips { display: flex; background: #fff; padding: 10px 16px; border-bottom: 1px solid var(--zc-div); min-height: 0; }
    .zxr-results__bar.has-chips .zxr-results__count { display: none; }

    body.zxr-cat #zxr-results ol.product-items { grid-template-columns: 1fr; gap: 0; }
    body.zxr-cat #zxr-results .product-item-info {
        border: 0 !important;
        border-bottom: 1px solid var(--zc-div) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body.zxr-cat #zxr-results .product-item-info > .product-item-name {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 14px;
        padding: 14px 16px !important;
        align-items: start;
    }
    body.zxr-cat #zxr-results .product-item-image { width: 112px; height: 112px; border: 1px solid var(--zc-line); border-radius: 14px; }
    body.zxr-cat #zxr-results .product-image-photo { padding: 8px; }
    .zxr-save { left: 6px; top: 6px; font-size: 10.5px; padding: 3px 7px; }
    body.zxr-cat #zxr-results .product-item-details { padding: 0 !important; gap: 6px; }
    body.zxr-cat #zxr-results .product-item-details .product-item-link { font-size: 14.5px !important; min-height: 0; line-height: 1.28 !important; }
    .zxr-specs { border-radius: 10px; padding: 6px 0; }
    .zxr-specs__l { font-size: 11px; }
    .zxr-specs__v { font-size: 13px; }
    .zxr-standout { font-size: 12.5px; gap: 7px; min-height: 0; }
    .zxr-dot { width: 16px; height: 16px; }
    body.zxr-cat #zxr-results .price-box { border-top: 0; padding: 0 !important; margin: 0 !important; }
    body.zxr-cat #zxr-results .price-box .price { font-size: 18px !important; }
    body.zxr-cat #zxr-results .price-box .old-price .price { font-size: 12.5px !important; }
    .zxr-view { display: none; }
    body.zxr-cat #zxr-results .product-item-info:focus-within { outline-offset: -3px; }

    .zxr-about, .zxr-promise { margin: 16px 16px 0; border-radius: 20px; padding: 22px 18px; }
    .zxr-about h2 { font-size: 24px; }
    .zxr-promise__head h2 { font-size: 26px; }
    .zxr-filters, .zxr-sheet[open] { top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .zxr-view { transition: none; }
}

/* All-types sheet: tiles fill their grid column (the fixed widths above are for the swipe strip) */
body.zxr-cat .zxr-kit .zxr-sheet__grid button.zxr-tile,
body.zxr-cat .zxr-kit .zxr-sheet__grid button.zxr-tile:hover,
body.zxr-cat .zxr-kit .zxr-sheet__grid button.zxr-tile:focus,
body.zxr-cat .zxr-kit .zxr-sheet__grid button.zxr-tile:active { width: auto; min-width: 0; flex: initial; }

/* honour the hidden attribute inside the kit (button display rules would otherwise override it) */
body.zxr-cat .zxr-kit [hidden] { display: none !important; }

/* =====================================================================
   v0.14.0 · PC, 1240px and wider: calmer layout (Oct 28, 2026)
   Edward: the PC page is a bit too busy.
   - header: no navy block; breadcrumbs, title, one-line intro, quiet trust list
   - Shop by type: no outer card or help text; borderless tiles with icon circles
   - filter column without its card
   - cards: no "View details" button (the whole card is the link), a lighter
     spec row, review count on the same line as the stars
   Tablets and phones keep the v0.13 layout.
   ===================================================================== */
@media (min-width: 1240px) {
    .zxr-kit { gap: 28px; padding-top: 26px; }

    /* header */
    body.zxr-cat .zxr-band {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 48px;
        align-items: end;
        background: none;
        color: var(--zc-text);
        border-radius: 0;
        padding: 0 0 24px;
        box-shadow: none;
        border-bottom: 1px solid var(--zc-line);
    }
    .zxr-band__main { gap: 10px; }
    body.zxr-cat .zxr-band .breadcrumbs .items { color: var(--zc-muted) !important; }
    body.zxr-cat .zxr-band .breadcrumbs .item { color: var(--zc-muted) !important; font-size: 13px !important; }
    body.zxr-cat .zxr-band .breadcrumbs .item a { color: var(--zc-blue) !important; font-size: 13px !important; }
    body.zxr-cat .zxr-band .breadcrumbs .item:not(:last-child)::after { color: #9aa5b8 !important; }
    body.zxr-cat .zxr-band .page-title,
    body.zxr-cat .zxr-band h1 {
        font-size: 38px !important;
        line-height: 1.1 !important;
        letter-spacing: -.025em !important;
        color: var(--zc-navy) !important;
        text-align: left !important;
    }
    body.zxr-cat .zxr-band h1 .base { display: inline !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
    .zxr-band__intro { display: flex; align-items: baseline; gap: 8px; max-width: 860px; font-size: 15px; line-height: 1.5; color: var(--zc-muted); }
    .zxr-band__intro span { -webkit-line-clamp: 1; min-width: 0; }
    .zxr-band__intro a { flex: none; color: var(--zc-blue) !important; font-weight: 700; }
    .zxr-band__promise {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        gap: 8px;
        font-size: 13.5px;
        color: var(--zc-text);
    }
    .zxr-band__promise li:first-child { padding-bottom: 0; border-bottom: 0; }
    .zxr-band__promise .zxr-ico { width: 17px; height: 17px; color: var(--zc-ink); }
    .zxr-band__promise .zxr-star { width: 17px; height: 17px; }
    .zxr-band__promise b { font-size: 14px; color: var(--zc-navy); }
    .zxr-band__promise .zxr-band__muted { color: var(--zc-muted); }
    body.zxr-cat .zxr-band a:focus-visible { outline-color: var(--zc-blue) !important; }

    /* Shop by type */
    body.zxr-cat .zxr-types.zxr-card {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        row-gap: 16px;
    }
    .zxr-types__help { display: none; }
    .zxr-types__mustlabel { font-size: 11.5px; }
    body.zxr-cat .zxr-kit button.zxr-pill,
    body.zxr-cat .zxr-kit button.zxr-pill:hover,
    body.zxr-cat .zxr-kit button.zxr-pill:focus,
    body.zxr-cat .zxr-kit button.zxr-pill:active {
        height: 36px;
        padding: 0 13px 0 8px;
        gap: 7px;
        border-color: transparent;
        background: var(--zc-paper);
        font-size: 13.5px;
    }
    body.zxr-cat .zxr-kit button.zxr-pill:hover { background: #e7ebf1; }
    body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"],
    body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit button.zxr-pill[aria-pressed="true"]:active {
        border-color: var(--zc-orange);
        background: #fff6ef;
        box-shadow: inset 0 0 0 1px var(--zc-orange);
    }
    .zxr-pill .zxr-ti { width: 22px; height: 22px; }
    .zxr-types__grid { gap: 4px; }
    body.zxr-cat .zxr-kit button.zxr-tile,
    body.zxr-cat .zxr-kit button.zxr-tile:hover,
    body.zxr-cat .zxr-kit button.zxr-tile:focus,
    body.zxr-cat .zxr-kit button.zxr-tile:active,
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"],
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:active,
    body.zxr-cat .zxr-kit button.zxr-tile--more,
    body.zxr-cat .zxr-kit button.zxr-tile--more:focus,
    body.zxr-cat .zxr-kit button.zxr-tile--more:active {
        background: none;
        border: 0;
        border-radius: 14px;
        padding: 4px 4px 6px;
        gap: 9px;
    }
    .zxr-tile__box {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--zc-paper);
        transition: background-color .15s, box-shadow .15s;
    }
    body.zxr-cat .zxr-kit button.zxr-tile:hover .zxr-tile__box { box-shadow: inset 0 0 0 1.5px var(--zc-navy); background: #fff; }
    .zxr-tile[aria-pressed="true"] .zxr-tile__box,
    body.zxr-cat .zxr-kit button.zxr-tile[aria-pressed="true"]:hover .zxr-tile__box { background: var(--zc-navy); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--zc-orange); }
    .zxr-tile__name { font-size: 13px; font-weight: 600; min-height: 32px; color: var(--zc-navy); }
    .zxr-tile[aria-pressed="true"] .zxr-tile__name { font-weight: 800; }
    .zxr-tile__count { font-size: 11.5px; }
    .zxr-tile[aria-pressed="true"] .zxr-tile__check { display: none; }
    .zxr-tile--more .zxr-tile__box { font-size: 18px; }

    /* filter column */
    body.zxr-cat .zxr-filters.zxr-card {
        width: 236px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 4px 12px 0;
    }
    .zxr-filters__head { padding-bottom: 8px; min-height: 40px; }
    .zxr-filters__head h2 { font-size: 17px; }
    .zxr-cols { gap: 32px; }

    /* results bar */
    .zxr-results__bar { min-height: 40px; }
    .zxr-results__count { font-size: 17px; }
    body.zxr-cat .zxr-sort select { height: 40px; min-width: 190px; border-color: var(--zc-line-h); font-size: 14px; }

    /* product cards */
    body.zxr-cat #zxr-results ol.product-items { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 20px; }
    body.zxr-cat #zxr-results .product-item-info {
        border-color: #e7ebf1 !important;
        border-radius: 18px !important;
        box-shadow: none !important;
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    body.zxr-cat #zxr-results .product-item-info:hover {
        border-color: var(--zc-line-h) !important;
        box-shadow: 0 16px 32px -20px rgba(11, 24, 48, .38) !important;
    }
    body.zxr-cat #zxr-results .product-item-image { border-bottom: 0; }
    body.zxr-cat #zxr-results .product-image-photo { padding: 16px; }
    body.zxr-cat #zxr-results .product-item-details { gap: 9px; padding: 4px 18px 18px !important; }
    body.zxr-cat #zxr-results .product-item-details > .product-item-name { gap: 6px; }
    body.zxr-cat #zxr-results .product-item-info:hover .product-item-link { text-decoration: underline !important; text-underline-offset: 3px; }
    .zxr-save { font-size: 11.5px; padding: 4px 9px; }
    .zxr-view { display: none !important; }

    /* stars, score and review count on one line */
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-summary { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-right-panel { display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-text { font-size: 13px !important; color: var(--zc-muted) !important; margin: 0 !important; white-space: nowrap; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-right-panel::before { content: "\00B7"; margin-right: 6px; color: #9aa5b8; }

    /* spec row: same order on every card, no grey box */
    .zxr-specs {
        background: none;
        border-radius: 0;
        padding: 10px 0;
        border-top: 1px solid var(--zc-div);
        border-bottom: 1px solid var(--zc-div);
        column-gap: 10px;
    }
    .zxr-specs__c { align-items: flex-start; text-align: left; border-left: 0; padding: 0; gap: 2px; }
    .zxr-specs__l { font-size: 11.5px; }
    .zxr-specs__v { font-size: 13.5px; }
    .zxr-standout { font-size: 13px; font-weight: 600; gap: 6px; }
    .zxr-dot { width: 16px; height: 16px; background: none; border: 0; }
    .zxr-dot svg { width: 14px; height: 14px; }
    body.zxr-cat #zxr-results .price-box { border-top: 0; padding-top: 2px !important; }
}

/* =====================================================================
   v0.14.1 · lighter type and a visible "More info" button (Oct 28, 2026)
   Edward: too much black and bold text; cards need a visible More info button.
   - softer ink (#2a3446) and semibold (600) instead of near-black 800
   - spec labels small caps-style, values semibold
   - filter group titles as small grey labels
   - "More info" solid brand-blue button on PC and tablet (the whole card stays clickable)
   - product photo on a soft grey panel inside the card (PC)
   ===================================================================== */
body.zxr-cat { --zc-ink2: #2a3446; --zc-ink3: #4a5568; }
.zxr-view {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--zc-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
}
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { background: var(--zc-navy); color: #fff; }

@media (min-width: 1240px) {
    .zxr-view { display: flex !important; margin-top: 4px; }

    /* header */
    body.zxr-cat .zxr-band .page-title,
    body.zxr-cat .zxr-band h1 { font-weight: 700 !important; }
    .zxr-band__intro { color: var(--zc-ink3); }
    .zxr-band__intro a { font-weight: 600; }
    .zxr-band__promise { color: var(--zc-ink3); }
    .zxr-band__promise b { font-weight: 700; }

    /* Shop by type */
    .zxr-tile__name { font-weight: 500; color: var(--zc-ink3); }
    .zxr-tile[aria-pressed="true"] .zxr-tile__name { font-weight: 700; color: var(--zc-navy); }
    body.zxr-cat .zxr-kit button.zxr-pill,
    body.zxr-cat .zxr-kit button.zxr-pill:hover,
    body.zxr-cat .zxr-kit button.zxr-pill:focus,
    body.zxr-cat .zxr-kit button.zxr-pill:active { font-weight: 600; color: var(--zc-ink2); }

    /* filters */
    .zxr-filters__head h2 { font-size: 16px; font-weight: 700; color: var(--zc-ink2); }
    body.zxr-cat #zxr-filters .filter-options-title {
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
        color: var(--zc-muted) !important;
        margin-bottom: 4px !important;
    }
    body.zxr-cat #zxr-filters .filter-options-content li.item > a { color: var(--zc-ink2) !important; }
    body.zxr-cat #zxr-filters .filter-options-content li.item.wp-ln-selected > a { font-weight: 600 !important; }

    /* results bar */
    .zxr-results__count { font-size: 15px; font-weight: 600; color: var(--zc-ink3); }
    body.zxr-cat .zxr-sort select { font-weight: 600; color: var(--zc-ink2); }

    /* cards */
    body.zxr-cat #zxr-results .product-item-image { margin: 10px 10px 0 !important; border-radius: 12px; background: #f4f6f9 !important; }
    body.zxr-cat #zxr-results .product-image-photo { mix-blend-mode: multiply; }
    body.zxr-cat #zxr-results .product-item-details { padding-top: 12px !important; }
    body.zxr-cat #zxr-results .product-item-details .product-item-link {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--zc-ink2) !important;
        line-height: 1.35 !important;
        min-height: 40px;
    }
    .zxr-save { top: 10px; left: 10px; }
    .zxr-specs__l { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #7b8597; }
    .zxr-specs__v { font-size: 13.5px; font-weight: 600; color: var(--zc-ink2); }
    .zxr-specs__v.is-na { font-weight: 500; color: #9aa5b8; }
    .zxr-standout { font-weight: 500; color: var(--zc-ink3); }
    body.zxr-cat #zxr-results .price-box .price { font-size: 20px !important; font-weight: 700 !important; }
}

/* ===== v0.15.0 · card bullets: the product's first 3 bullet points + "See all N features" (Oct 28) ===== */
.zxr-bul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.zxr-bul li { display: flex; gap: 7px; align-items: flex-start; margin: 0 !important; padding: 0; font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--zc-ink3); }
.zxr-bul li[hidden] { display: none !important; }
.zxr-bul li > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.zxr-bul.is-open li > span:last-child { display: block; -webkit-line-clamp: unset; overflow: visible; }
.zxr-bul .zxr-dot { width: 16px; height: 19px; background: none; border: 0; border-radius: 0; }
.zxr-bul .zxr-dot svg { width: 14px; height: 14px; stroke: var(--zc-ink); stroke-width: 2.6; }
body.zxr-cat #zxr-results button.zxr-bul__more,
body.zxr-cat #zxr-results button.zxr-bul__more:hover,
body.zxr-cat #zxr-results button.zxr-bul__more:focus,
body.zxr-cat #zxr-results button.zxr-bul__more:active {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    align-self: flex-start;
    width: auto !important;
    min-height: 28px;
    margin: -2px 0 0 !important;
    padding: 2px 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--zc-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--zc-blue) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
body.zxr-cat #zxr-results button.zxr-bul__more:hover { color: var(--zc-navy) !important; }
body.zxr-cat #zxr-results button.zxr-bul__more:focus-visible { outline: 2px solid var(--zc-navy) !important; outline-offset: 2px; }
.zxr-bul__more .zxr-ico { width: 15px; height: 15px; transition: transform .15s; }
.zxr-bul__more[aria-expanded="true"] .zxr-ico { transform: rotate(180deg); }
@media (max-width: 767px) {
    .zxr-bul { gap: 4px; }
    .zxr-bul li { font-size: 12.5px; line-height: 1.35; gap: 6px; }
    .zxr-bul .zxr-dot { height: 17px; }
    .zxr-bul .zxr-dot svg { width: 13px; height: 13px; }
    body.zxr-cat #zxr-results button.zxr-bul__more { font-size: 12.5px !important; min-height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .zxr-bul__more .zxr-ico { transition: none; } }

/* =====================================================================
   v0.16.0 · Oct 29, 2026 (Edward and his reviewers)
   - Shop by type on its own tinted panel with white tiles (PC, tablet, phone)
   - Must-have on its own row at the left, apart from Shop by type
   - filters off for now (SHOW_FILTERS = false in category-extras.phtml)
   - calmer cards on PC and tablet: one frame, quieter bullets
   - v0.16.1 (Oct 29, 1 PM): Must-have in its own peach box; sale prices and Save tags in green,
     regular prices navy; full-width More info button along the bottom of every card (PC, tablet, phone)
   - v0.16.2 (Oct 29, 1:30 PM): phones get the same card as PC, with a big square photo on top
     instead of a 112 px thumbnail on the left
   ===================================================================== */
body.zxr-cat { --zc-tint: #eef3f9; --zc-tint-line: #d9e2ee; }

/* no filters: the product grid takes the full width; the chip row only shows when something is picked */
.zxr-nofilters .zxr-cols { display: block; }
.zxr-results__bar:not(.has-chips) { display: none !important; }

/* ---------- Shop by type: tinted panel, white tiles ---------- */
body.zxr-cat .zxr-types.zxr-card {
    background: var(--zc-tint);
    border: 1px solid var(--zc-tint-line);
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr);
}
body.zxr-cat .zxr-types #zxr-types-h {
    padding-left: 0;
    background: none;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--zc-navy);
}
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:focus,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:active {
    background: #fff;
    border: 1px solid var(--zc-tint-line);
    box-shadow: 0 1px 2px rgba(11, 24, 48, .06);
}
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:hover {
    background: #fff;
    border: 1px solid #a9bbd3;
    box-shadow: 0 8px 18px -12px rgba(11, 24, 48, .5);
}
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"],
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:hover,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:focus,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:active {
    background: #fff;
    border: 1px solid var(--zc-navy);
    box-shadow: inset 0 0 0 1px var(--zc-navy);
}
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more:focus,
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more:active { border-style: dashed; border-color: #b7c5d8; }
body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:focus-visible { outline: 3px solid var(--zc-blue) !important; outline-offset: 2px; }
.zxr-types .zxr-tile:not([aria-pressed="true"]) .zxr-tile__box { background: var(--zc-tint); }

/* ---------- Must-have row ---------- */
.zxr-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.zxr-must {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    background: #fff4ea;
    border: 1px solid #ffd2b0;
    border-radius: 12px;
    padding: 8px 10px 8px 14px;
}
.zxr-must__label { font-size: 13.5px; font-weight: 800; color: var(--zc-navy); white-space: nowrap; }
.zxr-must__pills { display: flex; gap: 8px; flex-wrap: wrap; position: relative; min-width: 0; }
.zxr-strip .zxr-pill { position: relative; }
.zxr-strip__count { margin: 0 0 0 auto; font-size: 14px; font-weight: 600; color: var(--zc-muted); white-space: nowrap; }
.zxr-strip .zxr-sort { margin-left: 0; }
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill,
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:focus,
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:active {
    height: 38px;
    padding: 0 14px 0 9px;
    gap: 7px;
    background: #fff;
    border: 1px solid #c9d4e3;
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--zc-navy);
}
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:hover { background: #fff; border-color: #8fa3bf; }
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill[aria-pressed="true"],
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill[aria-pressed="true"]:hover,
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill[aria-pressed="true"]:focus,
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill[aria-pressed="true"]:active {
    border-color: var(--zc-orange);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--zc-orange);
}
body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:focus-visible { outline: 3px solid var(--zc-blue) !important; outline-offset: 2px; }
.zxr-strip .zxr-pill .zxr-ti { width: 22px; height: 22px; }

/* ---------- cards: green sale price, full-width More info (all sizes) ---------- */
body.zxr-cat { --zc-sale: #0a7d3c; }
body.zxr-cat #zxr-results .price-box {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: auto 0 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
}
body.zxr-cat #zxr-results .price-box .price { font-size: 20px !important; font-weight: 700 !important; color: var(--zc-navy) !important; line-height: 1.15; }
body.zxr-cat #zxr-results li.zxr-sale .price-box [data-price-type="finalPrice"] .price { color: var(--zc-sale) !important; }
body.zxr-cat #zxr-results .price-box .old-price .price { font-size: 13px !important; font-weight: 400 !important; color: var(--zc-muted) !important; text-decoration: line-through; }
body.zxr-cat #zxr-results .zxr-save { background: var(--zc-sale); color: #fff; }
body.zxr-cat #zxr-results .zxr-view,
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 42px;
    margin: 0 16px 16px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--zc-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { background: var(--zc-navy); }
body.zxr-cat #zxr-results .zxr-view .zxr-ico { width: 16px; height: 16px; }

/* ---------- one frame per card, quieter text (all sizes since v0.16.2; phones were rows before) ---------- */
@media all {
    body.zxr-cat #zxr-results ol.product-items { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 28px 22px; }
    body.zxr-cat #zxr-results .product-item-info {
        border: 1px solid #e3e8ef !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    body.zxr-cat #zxr-results .product-item-info:hover {
        border-color: #c5d0de !important;
        box-shadow: 0 14px 30px -20px rgba(11, 24, 48, .4) !important;
    }
    body.zxr-cat #zxr-results .product-item-image {
        margin: 0 !important;
        border-radius: 0;
        border-bottom: 0;
        background: #f5f6f8 !important;
    }
    body.zxr-cat #zxr-results .product-image-photo { padding: 18px; mix-blend-mode: multiply; }
    body.zxr-cat #zxr-results .product-item-details { gap: 8px; padding: 16px 16px 14px !important; }
    body.zxr-cat #zxr-results .product-item-details > .product-item-name { gap: 5px; }
    body.zxr-cat #zxr-results .product-item-details .product-item-link {
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: var(--zc-ink2) !important;
        line-height: 1.35 !important;
        min-height: 39px;
    }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-summary { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-right-panel { display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-text { font-size: 12.5px !important; color: var(--zc-muted) !important; margin: 0 !important; white-space: nowrap; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-right-panel::before { content: "\00B7"; margin-right: 6px; color: #9aa5b8; }
    .zxr-save { left: 10px; top: 10px; font-size: 11px; font-weight: 700; padding: 3px 8px; }

    /* bullets: one line each until "See all" opens them; small grey dots instead of checks */
    .zxr-bul { gap: 5px; }
    .zxr-bul li { font-size: 13px; line-height: 1.35; color: #4f5a6b; gap: 8px; }
    .zxr-bul:not(.is-open) li > span:last-child { -webkit-line-clamp: 1; }
    .zxr-bul .zxr-dot { width: 5px; height: 5px; border-radius: 50%; background: #a7b0bd; margin-top: 7px; }
    .zxr-bul .zxr-dot svg { display: none; }
    body.zxr-cat #zxr-results button.zxr-bul__more,
    body.zxr-cat #zxr-results button.zxr-bul__more:focus,
    body.zxr-cat #zxr-results button.zxr-bul__more:active { font-size: 12.5px !important; color: var(--zc-muted) !important; text-decoration: none; min-height: 24px; margin: 0 !important; }
    body.zxr-cat #zxr-results button.zxr-bul__more:hover { color: var(--zc-blue) !important; text-decoration: underline; }
}

/* ---------- PC: wider tiles row, Must-have row ---------- */
@media (min-width: 1240px) {
    .zxr-kit { gap: 22px; }
    body.zxr-cat .zxr-types.zxr-card { border-radius: 16px; padding: 18px 20px 20px; row-gap: 14px; }
    .zxr-types__grid { gap: 10px; }
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:hover,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:active,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"],
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:hover,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:active,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile--more:active {
        border-radius: 12px;
        padding: 12px 6px 10px;
        gap: 7px;
    }
    .zxr-types .zxr-tile__box { width: 52px; height: 52px; }
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:hover .zxr-tile__box { box-shadow: none; background: var(--zc-tint); }
    .zxr-types .zxr-tile__name { min-height: 32px; }
    .zxr-strip { min-height: 40px; }
}

/* ---------- tablets and phones: count and sort live in the navy bar ---------- */
@media (max-width: 1239px) {
    .zxr-strip__count { display: none; }
    .zxr-strip:not(.has-must) { display: none; }
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"],
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:active { padding: 14px 6px 12px; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
    body.zxr-cat .zxr-types.zxr-card { border: 0; border-bottom: 1px solid var(--zc-tint-line); }
    body.zxr-cat .zxr-types #zxr-types-h { font-size: 17px; }
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"],
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile[aria-pressed="true"]:active { padding: 10px 4px 9px; }
    .zxr-strip { padding: 12px 16px; background: #fff; }
    .zxr-must { width: 100%; }
    .zxr-must__label { font-size: 13px; }
    .zxr-must__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .zxr-must__pills::-webkit-scrollbar { display: none; }
    body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill,
    body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:hover,
    body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:focus,
    body.zxr-cat .zxr-kit .zxr-strip button.zxr-pill:active { flex: none; height: 36px; padding: 0 12px 0 7px; font-size: 13px; }
    .zxr-must { padding: 7px 0 7px 12px; }
    body.zxr-cat #zxr-results .price-box { padding-top: 6px !important; }
    body.zxr-cat #zxr-results .price-box .price { font-size: 18px !important; }
    body.zxr-cat #zxr-results .price-box .old-price .price { font-size: 12.5px !important; }
    /* v0.16.2: big photo on top, text under it, one card per row */
    body.zxr-cat #zxr-results ol.product-items { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 16px 6px !important; }
    body.zxr-cat #zxr-results .product-item-info > .product-item-name { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; padding: 0 !important; }
    body.zxr-cat #zxr-results .product-item-image { width: auto; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 0; }
    body.zxr-cat #zxr-results .product-image-photo { padding: 14px; }
    body.zxr-cat #zxr-results .product-item-details { padding: 14px 16px 12px !important; }
    body.zxr-cat #zxr-results .product-item-details .product-item-link { font-size: 16px !important; line-height: 1.32 !important; min-height: 0; }
    .zxr-save { font-size: 12px; padding: 4px 9px; }
    body.zxr-cat #zxr-results .zxr-view,
    body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { height: 44px; margin: 0 16px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { body.zxr-cat #zxr-results .product-item-info { transition: none; } }

/* =====================================================================
   v0.16.3 · Oct 29, 2026 · phones (and tablets): the light desktop look
   - the header band is white like on PC (navy title, muted intro, small trust line)
   - Shop by type and Must-have are inset panels with 16 px margins
   - white sticky bar: product count at the left, Sort as a pill at the right
   - product cards: white cards on a soft grey page, photo edge to edge on white,
     bigger text, roomier price and button
   ===================================================================== */
@media (max-width: 1239px) {
    body.zxr-cat .zxr-band {
        background: #fff;
        color: var(--zc-text);
        box-shadow: none;
    }
    body.zxr-cat .zxr-band .breadcrumbs .items,
    body.zxr-cat .zxr-band .breadcrumbs .item { color: var(--zc-muted) !important; }
    body.zxr-cat .zxr-band .breadcrumbs .item a { color: var(--zc-blue) !important; }
    body.zxr-cat .zxr-band .breadcrumbs .item:not(:last-child)::after { color: #9aa5b8 !important; }
    body.zxr-cat .zxr-band .page-title,
    body.zxr-cat .zxr-band h1 { color: var(--zc-navy) !important; text-align: left !important; }
    body.zxr-cat .zxr-band h1 .base { display: inline !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
    /* the header keeps its height while its bars are pinned (category-extras.phtml); the empty part stays white */
    body.zxr-cat .page-wrapper > .page-header { background-color: #fff; }
    .zxr-band__intro { color: var(--zc-muted); }
    .zxr-band__intro a { color: var(--zc-blue) !important; }
    body.zxr-cat .zxr-band a:focus-visible { outline-color: var(--zc-blue) !important; }
    .zxr-band__promise { background: none; border: 0; padding: 0; color: var(--zc-text); }
    .zxr-band__promise .zxr-ico { color: var(--zc-ink); }
    .zxr-band__promise b { color: var(--zc-navy); }
    .zxr-band__promise .zxr-band__muted { color: var(--zc-muted); }
}

@media (max-width: 767px) {
    .zxr-kit { background: #f3f5f8; }

    /* header */
    body.zxr-cat .zxr-band { padding: 14px 16px 18px; gap: 6px; border-bottom: 1px solid var(--zc-line); }
    body.zxr-cat .zxr-band .page-title,
    body.zxr-cat .zxr-band h1 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.02em !important; }
    .zxr-band__intro { font-size: 14.5px; line-height: 1.5; }
    .zxr-band__strip { margin-top: 4px; font-size: 13px; color: var(--zc-muted); gap: 6px 10px; }
    .zxr-band__strip b { color: var(--zc-navy); }
    .zxr-band__strip i { width: 3px; height: 3px; background: #b4bdca; }
    .zxr-band__strip .zxr-star { width: 15px; height: 15px; }

    /* Shop by type: inset panel */
    body.zxr-cat .zxr-types.zxr-card {
        margin: 16px 16px 0;
        border: 1px solid var(--zc-tint-line);
        border-radius: 18px;
        padding: 14px 0 14px;
        row-gap: 12px;
        background: var(--zc-tint);
    }
    .zxr-types__head { padding: 0 14px; }
    .zxr-types__grid { padding: 0 14px 2px; scroll-padding-inline: 14px; gap: 8px; }
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:hover,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:focus,
    body.zxr-cat .zxr-kit .zxr-types button.zxr-tile:active { width: 86px; border-radius: 14px; }

    /* Must-have: inset row under the panel */
    .zxr-strip { padding: 12px 16px 0; background: none; }
    .zxr-must { border-radius: 14px; }

    /* sticky bar: white, count left, Sort pill right */
    .zxr-mbar {
        margin-top: 14px;
        height: 56px;
        padding: 0 16px;
        background: rgba(255, 255, 255, .97);
        color: var(--zc-navy);
        border-top: 1px solid var(--zc-line);
        border-bottom: 1px solid var(--zc-line);
        box-shadow: 0 6px 16px -14px rgba(11, 24, 48, .6);
        -webkit-backdrop-filter: saturate(1.4) blur(8px);
        backdrop-filter: saturate(1.4) blur(8px);
    }
    .zxr-mbar__count { order: 1; margin-left: 0; padding: 0; font-size: 15px; font-weight: 700; color: var(--zc-navy); }
    .zxr-mbar__sort {
        order: 2;
        margin-left: auto;
        height: 38px;
        padding: 0 14px 0 12px;
        gap: 6px;
        border: 1px solid #cfd8e6;
        border-radius: 999px;
        background: #fff;
        color: var(--zc-navy);
        font-size: 14px;
        font-weight: 700;
    }
    .zxr-mbar__sort .zxr-ico { width: 16px; height: 16px; }
    .zxr-mbar__sort::after {
        content: "";
        width: 7px;
        height: 7px;
        margin: -3px 0 0 4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }
    .zxr-mbar button:focus-visible,
    .zxr-mbar__sort:focus-within { outline: 3px solid var(--zc-blue) !important; outline-offset: 2px; border-radius: 999px; }

    /* product cards: white cards on the soft grey page */
    body.zxr-cat #zxr-results { background: none; }
    body.zxr-cat #zxr-results ol.product-items { gap: 18px; padding: 16px 16px 8px !important; }
    body.zxr-cat #zxr-results .product-item-info,
    body.zxr-cat #zxr-results .product-item-info:hover {
        border: 0 !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(11, 24, 48, .05), 0 12px 28px -20px rgba(11, 24, 48, .45) !important;
    }
    body.zxr-cat #zxr-results .product-item-image { background: #fff !important; }
    body.zxr-cat #zxr-results .product-image-photo { padding: 0; mix-blend-mode: normal; }
    .zxr-save { left: 14px; top: 14px; font-size: 12.5px; padding: 5px 10px; }
    body.zxr-cat #zxr-results .product-item-details { gap: 10px; padding: 6px 18px 14px !important; }
    body.zxr-cat #zxr-results .product-item-details .product-item-link { font-size: 17px !important; font-weight: 700 !important; color: var(--zc-navy) !important; }
    body.zxr-cat #zxr-results .yotpo-sr-bottom-line-text { font-size: 13.5px !important; }
    .zxr-bul { gap: 7px; }
    .zxr-bul li { font-size: 14.5px; line-height: 1.4; color: #3f4a5c; gap: 10px; }
    .zxr-bul .zxr-dot { width: 6px; height: 6px; margin-top: 8px; background: #9aa5b8; }
    body.zxr-cat #zxr-results button.zxr-bul__more,
    body.zxr-cat #zxr-results button.zxr-bul__more:focus,
    body.zxr-cat #zxr-results button.zxr-bul__more:active { font-size: 14px !important; color: var(--zc-blue) !important; font-weight: 600 !important; }
    body.zxr-cat #zxr-results .price-box { padding-top: 4px !important; }
    body.zxr-cat #zxr-results .price-box .price { font-size: 23px !important; letter-spacing: -.01em; }
    body.zxr-cat #zxr-results .price-box .old-price .price { font-size: 14px !important; }
    body.zxr-cat #zxr-results .zxr-view,
    body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { height: 50px; margin: 0 18px 18px; border-radius: 14px; font-size: 16px; }
    .zxr-results__bar.has-chips { margin: 12px 16px 0; border: 1px solid var(--zc-line); border-radius: 14px; }

    .zxr-about, .zxr-promise { margin: 16px 16px 0; }
}

/* =====================================================================
   v0.16.4 · Oct 29, 2026 · product name in two parts, like the product page title
   model name big and navy, its last word in brand blue ("Koios 4K"); description smaller and grey under it
   ===================================================================== */
body.zxr-cat #zxr-results .product-item-details .product-item-link.zxr-nm {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    -webkit-line-clamp: unset;
    overflow: visible;
    min-height: 0;
    text-decoration: none !important;
}
body.zxr-cat #zxr-results .product-item-info:hover .product-item-link.zxr-nm { text-decoration: none !important; }
.zxr-nm__t {
    display: block;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--zc-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zxr-nm__t--long {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 16px;
    line-height: 1.3;
}
.zxr-nm__hi { color: var(--zc-blue); }
.zxr-nm__s {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--zc-ink3);
}
body.zxr-cat #zxr-results .product-item-info:hover .zxr-nm__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 767px) {
    .zxr-nm__t { font-size: 24px; }
    .zxr-nm__t--long { font-size: 18px; }
    .zxr-nm__s { font-size: 15px; line-height: 1.4; min-height: 0; }
}

/* =====================================================================
   v0.16.5 · Oct 29, 2026
   - the whole model name in one blue: the product page's sky blue, deepened to read on white (4.9:1)
   - no model name: the name line stays blank (PC keeps its height so rows line up; phones drop it)
   - photos: white-background shots are scaled so the product fills the same share of every frame
     (script adds .zxr-fit + an inline transform); lifestyle photos fill the frame (.zxr-fill)
   ===================================================================== */
body.zxr-cat { --zc-sky-ink: #1f6fd6; }
.zxr-nm__t { color: var(--zc-sky-ink); }
.zxr-nm__t--empty { visibility: hidden; }
body.zxr-cat #zxr-results .product-image-photo.zxr-fit,
body.zxr-cat #zxr-results .product-image-photo.zxr-fill { padding: 0 !important; }
body.zxr-cat #zxr-results .product-image-photo.zxr-fill { object-fit: cover; }
@media (max-width: 767px) {
    .zxr-nm__t--empty { display: none; }
}

/* =====================================================================
   v0.16.6 · Oct 29, 2026
   - model name: darker blue with a slight navy-to-blue gradient (lightest end 6.3:1 on white)
   - More info: dark orange with a slight top-to-bottom gradient, so it no longer clashes
     with the blue name (lightest end 4.6:1 with white text); darker on hover
   ===================================================================== */
body.zxr-cat {
    --zc-name-a: #0d2f73;
    --zc-name-b: #1f5bc4;
    --zc-btn-a: #c85000;
    --zc-btn-b: #a84100;
    --zc-btn-ha: #ad4400;
    --zc-btn-hb: #8a3600;
}
.zxr-nm__t {
    align-self: flex-start;
    max-width: 100%;
    color: #163f95;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .zxr-nm__t:not(.zxr-nm__t--long) {
        background: linear-gradient(100deg, var(--zc-name-a) 0%, var(--zc-name-b) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
@media (forced-colors: active) {
    .zxr-nm__t:not(.zxr-nm__t--long) { background: none; -webkit-text-fill-color: currentColor; }
}
body.zxr-cat #zxr-results .zxr-view,
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view {
    background: linear-gradient(180deg, var(--zc-btn-a) 0%, var(--zc-btn-b) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(122, 48, 0, .25);
}
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view {
    background: linear-gradient(180deg, var(--zc-btn-ha) 0%, var(--zc-btn-hb) 100%);
}
@media (forced-colors: active) {
    body.zxr-cat #zxr-results .zxr-view { border: 1px solid ButtonText; }
}

/* =====================================================================
   v0.16.7 · Oct 29, 2026 · More info: sharper and tighter
   - shorter (36 px on PC, 44 px on phones), square-ish corners (6 px / 8 px)
   - flatter: a barely-there gradient, no glossy highlight, hairline shadow only
   - smaller, tighter label with a small chevron
   ===================================================================== */
body.zxr-cat {
    --zc-btn-a: #bd4b00;
    --zc-btn-b: #ad4500;
    --zc-btn-ha: #9a3c00;
    --zc-btn-hb: #8a3600;
}
body.zxr-cat #zxr-results .zxr-view,
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view {
    height: 36px;
    margin: 0 16px 16px;
    padding: 0 12px;
    gap: 3px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    box-shadow: 0 1px 1px rgba(90, 36, 0, .18);
}
body.zxr-cat #zxr-results .zxr-view .zxr-ico { width: 14px; height: 14px; stroke-width: 2.6; }
@media (max-width: 767px) {
    body.zxr-cat #zxr-results .zxr-view,
    body.zxr-cat #zxr-results .product-item-info:hover .zxr-view {
        height: 44px;
        margin: 0 18px 18px;
        border-radius: 8px;
        font-size: 15px;
    }
    body.zxr-cat #zxr-results .zxr-view .zxr-ico { width: 15px; height: 15px; }
}

/* =====================================================================
   v0.16.8 · Oct 29, 2026 · More info in black (same slim shape as v0.16.7)
   near-black with a barely-there gradient; a touch lighter on hover
   ===================================================================== */
body.zxr-cat {
    --zc-btn-a: #1d2026;
    --zc-btn-b: #0d0f12;
    --zc-btn-ha: #343842;
    --zc-btn-hb: #1f2228;
}
body.zxr-cat #zxr-results .zxr-view,
body.zxr-cat #zxr-results .product-item-info:hover .zxr-view { box-shadow: 0 1px 1px rgba(0, 0, 0, .2); }

/* =====================================================================
   v0.16.9 · Oct 29, 2026 · photos exactly as uploaded
   no zooming or cropping: every photo fills the same square frame the same way
   ===================================================================== */
body.zxr-cat #zxr-results .product-image-photo,
body.zxr-cat #zxr-results .product-image-photo.zxr-fit,
body.zxr-cat #zxr-results .product-image-photo.zxr-fill {
    padding: 0 !important;
    object-fit: contain;
    transform: none !important;
}

/* =====================================================================
   v0.16.10 · Oct 29, 2026 · infinite scroll fills whole rows
   - cards of an unfinished last row wait (script adds .zxr-row-wait) until the next batch arrives
   - the module's loader ("Loading - please wait...") spans the full row as one slim line
     (its class is .iass-spinner, which the older rule above missed, so it sat in one card slot)
   - the odd "You've reached the end of the item." line is not shown
   ===================================================================== */
body.zxr-cat #zxr-results li.product-item.zxr-row-wait { display: none !important; }
body.zxr-cat #zxr-results .iass-spinner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 8px;
    font-family: var(--zc-font);
    font-size: 14px;
    color: var(--zc-muted);
}
body.zxr-cat #zxr-results .iass-spinner img { width: 22px; height: 22px; margin: 0 !important; }
body.zxr-cat #zxr-results .iass-spinner em { display: none; }
body.zxr-cat #zxr-results .iass-spinner span::after { content: "Loading more products\2026"; }
body.zxr-cat #zxr-results .ias-noneleft { display: none !important; }

/* ---------- v0.16.16: fewer products than fit in one row (PC and tablet) ----------
   The script adds .zxr-few and --zxr-few (the number of products) when every product fits in one row
   with room to spare. The cards then share the full width, and wide cards turn sideways (photo left,
   details right) instead of leaving an empty gap at the right. Phones (one card per row) are unchanged. */
body.zxr-cat #zxr-results ol.product-items.zxr-few { grid-template-columns: repeat(var(--zxr-few, 1), minmax(0, 1fr)); }
body.zxr-cat #zxr-results ol.product-items.zxr-few > li.product-item { container-type: inline-size; }
/* v0.16.17: under 5 products with one card left alone on the last row (tablets): that card takes the whole row */
body.zxr-cat #zxr-results ol.product-items > li.product-item.zxr-span { grid-column: 1 / -1; container-type: inline-size; }
@container (min-width: 420px) {
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-info > .product-item-name {
        display: grid !important;
        grid-template-columns: min(42%, 400px) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        grid-template-areas: "img det" "img cta";
        height: 100%;
    }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image {
        grid-area: img;
        align-self: stretch;
        display: flex !important;
        align-items: center;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        border-right: 1px solid #edf0f4;
    }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image .product-item-photo,
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image .product-image-wrapper,
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image img { width: 100% !important; height: auto !important; max-width: 100% !important; }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image .product-item-photo { display: block; aspect-ratio: 1 / 1; }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image img { height: 100% !important; object-fit: contain; }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-details { grid-area: det; min-width: 0; padding: 22px 24px 12px !important; }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .zxr-view { grid-area: cta; width: auto !important; margin: 0 24px 22px !important; }
}
@container (min-width: 760px) {
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-details { padding: 30px 40px 14px !important; }
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .zxr-view { max-width: 340px; margin: 0 40px 30px !important; }
}
@media (forced-colors: active) {
    body.zxr-cat #zxr-results :is(ol.zxr-few > li, li.zxr-span) .product-item-image { border-right: 1px solid CanvasText; }
}