/*
 * Category page 2026 (mockups/category-page/index.html), staging only.
 * Loaded by lib/category-2026.php when body.cat-2026 is set. A plain CSS file,
 * not built by gulp. The site font is kept on purpose.
 *
 * The product cards keep their existing markup (PHP in archive-product.php and
 * proBuildProductGrid() in common.js build the same HTML), so the mockup's
 * card is made here with CSS grid: the photo, the colour dots over its corner,
 * the "24 Hr Express" and "Free Freight" tabs above it, then name, price and
 * minimum order.
 */

body.cat-2026 {
  --c26-blue: #214fff;
  --c26-blue-soft: #f1f3ff;
  --c26-ink: #14161a;
  --c26-ink-2: #4a4f57;
  --c26-ink-3: #8a8f98;
  --c26-line: #ececec;
  --c26-tile: #f1ede8;
  --c26-radius: 16px;
}

/* ── Old pieces the new intro replaces ─────────────────────────────── */
.cat-2026 .woocommerce-products-header,
.cat-2026 .subcat-links,
.cat-2026 .pg-cat-seo,
.cat-2026 .product-tp-stars { display: none !important; }

/* ── Intro ─────────────────────────────────────────────────────────── */
.cat-2026 .c26-intro { padding: 18px 0 0; color: var(--c26-ink); }
.cat-2026 .c26-crumbs { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13.5px; color: var(--c26-ink-3); }
.cat-2026 .c26-crumbs a { color: inherit; text-decoration: none; }
.cat-2026 .c26-crumbs a:hover { color: var(--c26-ink); }
.cat-2026 .c26-crumbs .sep { margin: 0 8px; }
.cat-2026 .c26-crumbs .here { color: var(--c26-ink); }
.cat-2026 .c26-trust { display: flex; align-items: center; gap: 8px; color: var(--c26-ink-2); white-space: nowrap; }
.cat-2026 .c26-trust b { color: var(--c26-ink); font-weight: 600; }
.cat-2026 .c26-trust .stars { color: #00b67a; letter-spacing: 1px; font-size: 15px; }

.cat-2026 .c26-hero { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 36px; align-items: center; margin-top: 14px; padding: 28px 34px 22px; border-radius: 20px; background-color: #f2efea; }
.cat-2026 .c26-eyebrow { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c26-blue); }
.cat-2026 .c26-hero h1 { margin: 0 0 8px; max-width: 520px; font-size: 36px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--c26-ink); text-transform: none; }
.cat-2026 .c26-lead { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--c26-ink-2); }
.cat-2026 .c26-lead a { color: var(--c26-blue); font-weight: 500; white-space: nowrap; }
.cat-2026 .c26-ticks { display: none; } /* the mockup's final round drops them */

.cat-2026 .c26-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.cat-2026 .c26-stats div { border: 1px solid #d9d2c6; border-radius: 14px; padding: 13px 16px; }
.cat-2026 .c26-stats dt { margin-bottom: 4px; font-size: 11.5px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--c26-ink-3); }
.cat-2026 .c26-stats dd { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.05; letter-spacing: -.025em; white-space: nowrap; color: var(--c26-ink); }
.cat-2026 .c26-stats dd small { font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--c26-ink-3); }

.cat-2026 .c26-types { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2ddd4; }
.cat-2026 .c26-types::-webkit-scrollbar { display: none; }
.cat-2026 .c26-types span { flex: none; margin-right: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c26-ink-3); }
.cat-2026 .c26-types a { flex: none; padding: 7px 14px; border-radius: 999px; background-color: #fff; font-size: 14px; color: var(--c26-ink-2); text-decoration: none; white-space: nowrap; transition: box-shadow .15s, color .15s; }
.cat-2026 .c26-types a:hover, .cat-2026 .c26-types a.on { color: var(--c26-ink); box-shadow: inset 0 0 0 1px var(--c26-ink); }

/* ── The controls row and the filter column: no white boxes ────────── */
.cat-2026 .product-grid-sidebar,
.cat-2026 .product-grid-filters { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* The band above the grid held show and sort; they moved into the bar. On
   desktop it has nothing left to show (the help tile replaces "Can't find"). */
.cat-2026 .product-grid-sidebar { display: none !important; }

/* ── The bar over the grid: count left, show and sort right ────────── */
.cat-2026 .c26-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; min-height: 40px; font-size: 14px; color: var(--c26-ink-3); }
.cat-2026 .c26-count { font-size: 15px; color: var(--c26-ink-2); }
.cat-2026 .c26-count b { font-weight: 600; color: var(--c26-ink); }
.cat-2026 .c26-sort { display: flex; align-items: center; gap: 18px; }
.cat-2026 .c26-sort form, .cat-2026 .c26-sort .woocommerce-ordering { display: flex; align-items: center; gap: 18px; margin: 0 !important; float: none !important; }
.cat-2026 .c26-sort, .cat-2026 .c26-sort * { font-size: 14px !important; font-weight: 400; }
.cat-2026 .c26-sort b, .cat-2026 .c26-sort strong, .cat-2026 .c26-sort .current, .cat-2026 .c26-sort .active { font-weight: 600 !important; color: var(--c26-ink) !important; }
.cat-2026 .c26-sort a { color: var(--c26-ink-3); text-decoration: none; }
.cat-2026 .c26-sort .show-per-page { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; float: none !important; line-height: 1; }
.cat-2026 .c26-sort .show-per-page-label, .cat-2026 .c26-sort .show-per-page a { position: static !important; top: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle !important; }
.cat-2026 .c26-sort .show-per-page a:not(.active) { opacity: .55; }
.cat-2026 .c26-sort select { width: auto !important; min-width: 0 !important; margin: 0 !important; float: none !important; line-height: 1.2 !important; background-position: right 14px center !important; height: auto !important; padding: 8px 34px 8px 14px !important; border: 1px solid var(--c26-line) !important; border-radius: 999px !important; background-color: #fff; color: var(--c26-ink); box-shadow: none !important; }

/* ── Filters: one quiet panel ──────────────────────────────────────── */
.cat-2026 .product-grid-wrap { margin-top: 0; padding-top: 0; background-color: #fff !important; }
.cat-2026 .product-grid-container { padding-top: 32px !important; background-color: #fff !important; }
.cat-2026 .product-grid-filters-sidebar { padding: 20px 18px 6px !important; border: 1px solid #ecebe7 !important; border-radius: var(--c26-radius) !important; background-color: #fafaf8 !important; box-shadow: none !important; }
.cat-2026 .product-grid-filters, .cat-2026 .product-grid-filters > * { background-color: transparent; }
.cat-2026 .product-filter { padding: 14px 0; border-bottom: 1px solid var(--c26-line); }
.cat-2026 .product-filter:last-child { border-bottom: 0; }
.cat-2026 .product-filter__header { margin: 0 !important; padding-right: 20px; font-size: 15.5px; font-weight: 600 !important; color: var(--c26-ink); text-transform: none; letter-spacing: 0 !important; }
/* + and minus, as the mockup, instead of the caret. */
.cat-2026 .product-filter__header::after { content: "+" !important; width: auto !important; height: auto !important; margin-top: 0 !important; top: 0 !important; background: none !important; transform: none !important; font-weight: 400; color: var(--c26-ink-3); }
.cat-2026 .product-filter.d-open > .product-filter__header::after,
.cat-2026 .product-filter.open > .product-filter__header::after { content: "\2013" !important; }
.cat-2026 .product-filter__options-list { display: grid; gap: 5px; padding-top: 12px !important; }
.cat-2026 .product-filter__options { padding-bottom: 0 !important; }
.cat-2026 .product-filter__item { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; font-size: 14.5px; font-weight: 400 !important; line-height: 1.35 !important; color: var(--c26-ink-2); }
/* The theme places the box absolutely (top: 10px) and pads the text 30px.
   Here the box sits in the row, on the first line of text, flush left with
   the heading. */
.cat-2026 label.product-filter__item input { position: static !important; top: auto !important; left: auto !important; flex: none; width: 16px; height: 16px; margin: 2px 0 0 !important; accent-color: var(--c26-blue); }
.cat-2026 label.product-filter__item span { padding-left: 0 !important; }
.cat-2026 .product-filter__item .facet-count { margin-left: auto; font-size: 13px; color: var(--c26-ink-3); }
.cat-2026 .clear-filter-selection { order: 99; font-size: 13px; font-style: normal !important; font-weight: 400; color: var(--c26-blue); }

/* ── Product cards ─────────────────────────────────────────────────── */
/* No white box: the photo tile is the card. */
.cat-2026 ul.products li.product.alt-loop-display,
.cat-2026 ul.products li.product.c26-help {
  position: relative; min-width: 0; margin-top: 44px !important; margin-bottom: 4px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.cat-2026 ul.products li.product.alt-loop-display > a {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "photo photo" "name name" "price moq";
  padding: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--c26-ink); text-decoration: none;
}
/* The badges' wrapper gives up its box, so price and badges place freely. */
.cat-2026 ul.products li.product.alt-loop-display .pricing-info { display: contents; }

/* The photo, on its tile. */
.cat-2026 ul.products li.product.alt-loop-display .product-loop-thumb { grid-area: photo; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1; margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: var(--c26-radius); background-color: var(--c26-tile); }
.cat-2026 ul.products li.product.alt-loop-display .product-loop-thumb img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cat-2026 ul.products li.product.alt-loop-display:hover .product-loop-thumb img { transform: scale(1.035); }

/* Colour dots in a pill over the photo's bottom-left corner. */
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours {
  grid-area: photo; align-self: end; justify-self: start; z-index: 1;
  display: inline-flex !important; align-items: center; gap: 4px; min-height: 0 !important;
  margin: 0 0 12px 12px; padding: 5px 8px; border-radius: 999px;
  background-color: rgba(255, 255, 255, .85); backdrop-filter: blur(4px);
}
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours:not(:has(.swatch)) { display: none !important; }
.cat-2026 ul.products li.product.alt-loop-display .swatch { width: 11px; height: 11px; min-width: 0; margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); border: 0; }
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours > div:not(.swatch) { display: flex !important; align-items: center; height: 11px; margin-left: 2px !important; line-height: 1 !important; }
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours > div:not(.swatch) span { line-height: 1 !important; font-size: 11px !important; font-weight: 600; color: var(--c26-ink-2) !important; }
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours .hide-mobile { display: none !important; }
.cat-2026 ul.products li.product.alt-loop-display .swatch_colours > div:not(.swatch) > span { display: block; }

/* Tabs on top of the photo: 24 hour express, free freight. They sit in the
   gap above the card, so a card without them takes no extra height. */
.cat-2026 ul.products li.product.alt-loop-display .ready-in,
.cat-2026 ul.products li.product.alt-loop-display .free-shipping {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 24px; margin: 0; padding: 0 10px; transform: translateY(-100%);
  font-size: 0; font-weight: 600; white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1;
}
.cat-2026 ul.products li.product.alt-loop-display .ready-in { display: none; } /* only 24 hour is a tab */
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24 { display: inline-flex; justify-content: flex-start; width: 92px; padding: 0 0 0 10px; background-color: var(--c26-ink); color: #fff; }
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24 .ready-in-label { display: none; }
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24::before { content: "24 Hr Express"; font-size: 11.5px; }
.cat-2026 ul.products li.product.alt-loop-display .free-shipping { gap: 0; padding-left: 9px; background-color: #d9f5e5; color: #0d6b3c; }
.cat-2026 ul.products li.product.alt-loop-display .free-shipping::after { content: "Free Freight"; font-size: 11.5px; }
.cat-2026 ul.products li.product.alt-loop-display .free-shipping img { display: none !important; }
/* A truck in the tab's own colour, centred on the text (the theme's image sat high). */
.cat-2026 ul.products li.product.alt-loop-display .free-shipping::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; margin-right: 4px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3.5V16h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3.5V16h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Both tabs: Free Freight sits after the 24 hour one. */
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24 ~ .free-shipping { left: 92px; }
/* The photo's top-left corner squares off under a tab. */
.cat-2026 ul.products li.product.alt-loop-display:has(.is-24) .product-loop-thumb,
.cat-2026 ul.products li.product.alt-loop-display:has(.free-shipping) .product-loop-thumb,
.cat-2026 ul.products li.product.alt-loop-display:has(.ready-in.is-24) .product-loop-thumb { border-top-left-radius: 0; }
/* The tabs read as one shape: 8px on its two outer top corners, square
   where the two tabs meet and where they sit on the photo. */
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24,
.cat-2026 ul.products li.product.alt-loop-display .free-shipping { border-radius: 8px 8px 0 0; }
.cat-2026 ul.products li.product.alt-loop-display:has(.free-shipping) .ready-in.is-24 { border-top-right-radius: 0; }
.cat-2026 ul.products li.product.alt-loop-display .ready-in.is-24 ~ .free-shipping { border-top-left-radius: 0; }

/* Name, then price left and minimum order right. */
.cat-2026 ul.products li.product.alt-loop-display .woocommerce-loop-product__title_container { grid-area: name; padding: 14px 2px 0; min-height: 0 !important; }
.cat-2026 ul.products li.product.alt-loop-display .woocommerce-loop-product__title { margin: 0 0 6px; padding: 0; font-size: 15.5px; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.35; color: var(--c26-ink); text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-2026 ul.products li.product.alt-loop-display:hover .woocommerce-loop-product__title { color: var(--c26-blue); }
.cat-2026 ul.products li.product.alt-loop-display .pricing_from,
.cat-2026 ul.products li.product.alt-loop-display .enquire-for-pricing { grid-area: price; align-self: baseline; margin: 0; padding-left: 2px; font-size: 13.5px; color: var(--c26-ink-3); white-space: nowrap; }
.cat-2026 ul.products li.product.alt-loop-display .pricing_from .from { display: inline; text-transform: capitalize; }
.cat-2026 ul.products li.product.alt-loop-display .pricing_from .amount { display: inline; margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--c26-ink); }
.cat-2026 ul.products li.product.alt-loop-display .min-qty-allowed { grid-area: moq; align-self: baseline; justify-self: end; margin: 0; padding: 0; font-size: 13px; color: var(--c26-ink-3); white-space: nowrap; }
.cat-2026 ul.products li.product.alt-loop-display .min-qty-allowed-amount { color: var(--c26-ink-3); }
.cat-2026 ul.products li.product.alt-loop-display .mq-word { display: none; }

/* The sell line, as a "hot tip" under the price: warm amber with a bulb. */
.cat-2026 ul.products li.product.alt-loop-display .product-sell {
  display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  position: relative; width: auto !important; max-width: 100%; margin: 10px 0 0 !important; padding: 6px 10px 6px 31px !important; border-radius: 8px; border: 1px solid #f6dfa4 !important;
  background-color: #fff7e0; color: #7a4f00; font-size: 12.5px; font-weight: 500; font-style: normal !important; line-height: 1.35; text-align: left !important;
}
.cat-2026 ul.products li.product.alt-loop-display .product-sell::before {
  /* Outside the text, centred on its height: lines of text start on one edge. */
  content: ""; position: absolute; left: 9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background-color: #d98a00;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Help tile ─────────────────────────────────────────────────────── */
.cat-2026 .c26-help-tile { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; padding: 24px 22px; border-radius: var(--c26-radius); background-color: var(--c26-blue); color: #fff; text-decoration: none; }
.cat-2026 .c26-help-top, .cat-2026 .c26-help-bottom { display: flex; flex-direction: column; gap: 6px; }
.cat-2026 .c26-help-kicker { font-size: 13px; opacity: .8; }
.cat-2026 .c26-help-title { font-size: 20px; font-weight: 600; line-height: 1.25; }
.cat-2026 .c26-help-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.cat-2026 .c26-help-cta svg { width: 16px; height: 16px; }
.cat-2026 .c26-help-phone { font-size: 13px; opacity: .75; }
.cat-2026 .c26-help-tile { position: relative; overflow: hidden; isolation: isolate; }
.cat-2026 .c26-help-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(135deg, #3d63ff 0%, var(--c26-blue) 55%, #1238d6 100%); opacity: 0; transition: opacity .25s; }
.cat-2026 .c26-help-tile, .cat-2026 .c26-help-tile:hover, .cat-2026 .c26-help-tile:focus, .cat-2026 .c26-help-tile * { color: #fff !important; text-decoration: none !important; }
.cat-2026 .c26-help-tile:hover::before, .cat-2026 .c26-help-tile:focus-visible::before { opacity: 1; }
.cat-2026 .c26-help-cta svg { transition: transform .2s; }
.cat-2026 .c26-help-tile:hover .c26-help-cta svg { transform: translateX(3px); }

/* ── Pager ─────────────────────────────────────────────────────────── */
.cat-2026 .woocommerce-pagination-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 40px 0 10px; padding-top: 24px; border-top: 1px solid var(--c26-line); font-size: 14px; color: var(--c26-ink-3); }
.cat-2026 .woocommerce-pagination-wrapper .woocommerce-pagination { margin: 0 !important; }
/* The pager markup nests one wrapper in another: only the outer one draws the line. */
.cat-2026 .woocommerce-pagination-wrapper > .woocommerce-pagination-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 1; margin: 0; padding: 0; border: 0; }
.cat-2026 .woocommerce-pagination-wrapper .woocommerce-result-count { margin: 0 0 0 auto !important; text-align: right; padding: 0 !important; border: 0 !important; }
/* Flex-row fillers from the old layout. In the grid they add an empty row. */
.cat-2026 .product-grid-products ul.products li.product.spacer { display: none !important; }
.cat-2026 .woocommerce-pagination ul.page-numbers { display: flex; align-items: center; gap: 6px; border: 0; }
.cat-2026 .woocommerce-pagination ul.page-numbers li { border: 0; }
.cat-2026 .woocommerce-pagination ul.page-numbers li a,
.cat-2026 .woocommerce-pagination ul.page-numbers li span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; font-weight: 500; color: var(--c26-ink-2); }
.cat-2026 .woocommerce-pagination ul.page-numbers li a { border: 1px solid var(--c26-line); background-color: #fff; }
.cat-2026 .woocommerce-pagination ul.page-numbers li a:hover { border-color: var(--c26-ink); color: var(--c26-ink); }
.cat-2026 .woocommerce-pagination ul.page-numbers li span.current { background-color: var(--c26-ink); color: #fff; }

/* ── About and FAQs ────────────────────────────────────────────────── */
.cat-2026 .cat-seo-block { color: var(--c26-ink); }
.cat-2026 .cat-seo-block h2 { margin: 0 0 12px; font-size: 26px; font-weight: 600; text-transform: none; }
.cat-2026 .cat-seo-text p { font-size: 15.5px; line-height: 1.65; color: var(--c26-ink-2); }
.cat-2026 .category-faqs__item { border-bottom: 1px solid var(--c26-line); }
.cat-2026 .category-faqs__q { position: relative; padding: 18px 32px 18px 0; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
.cat-2026 .category-faqs__q::-webkit-details-marker { display: none; }
/* Plus and minus, centred on the question. The theme draws a rotating
   chevron with borders on the same element, so all of that is reset. */
.cat-2026 .category-faqs__q::after { content: "+"; position: absolute; right: 4px; top: 50%; width: auto; height: auto; margin: 0; border: 0 !important; transform: translateY(-50%) !important; font-size: 22px; font-weight: 300; line-height: 1; color: var(--c26-ink-3); }
.cat-2026 .category-faqs__item[open] > .category-faqs__q::after { content: "\2212"; margin: 0; transform: translateY(-50%) !important; }
.cat-2026 .category-faqs__a { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--c26-ink-2); }

/* ── Smaller screens ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cat-2026 .c26-hero { grid-template-columns: 1fr; row-gap: 12px; }
  /* The stats as one line of small text, as on mobile. */
  .cat-2026 .c26-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .cat-2026 .c26-stats div { display: flex; align-items: baseline; gap: 4px; padding: 0; border: 0; }
  .cat-2026 .c26-stats dt, .cat-2026 .c26-stats dd, .cat-2026 .c26-stats dd small { margin: 0; font-size: 13.5px; letter-spacing: 0; text-transform: none; }
  .cat-2026 .c26-stats dd { font-weight: 600; }
}
@media (max-width: 820px) {
  .cat-2026 .c26-crumbs .c26-trust { display: none; }
  .cat-2026 .c26-hero { row-gap: 10px; margin-top: 10px; padding: 16px 16px 14px; border-radius: 16px; }
  .cat-2026 .c26-eyebrow { display: none; }
  .cat-2026 .c26-hero h1 { margin: 0 0 6px; font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
  .cat-2026 .c26-lead { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cat-2026 .c26-types { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 10px 16px 0; scrollbar-width: none; }
  .cat-2026 .c26-types::-webkit-scrollbar { display: none; }
  .cat-2026 .c26-types span { display: none; }
  .cat-2026 .c26-types a { flex: none; padding: 6px 12px; font-size: 13px; }
  .cat-2026 .c26-help-tile { padding: 16px; }
  .cat-2026 .c26-help-title { font-size: 16px; }
  .cat-2026 .c26-help-kicker, .cat-2026 .c26-help-phone { display: none; }
}

/* Grid gaps as in the mockup: 24px between columns, 36px between rows. */
.cat-2026 .product-grid-products ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.cat-2026 .product-grid-products ul.products::before, .cat-2026 .product-grid-products ul.products::after { display: none !important; }
.cat-2026 .product-grid-products ul.products li.product { float: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 1100px) { .cat-2026 .product-grid-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .cat-2026 .product-grid-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } }

/* ── Filters button and drawer (tablet and mobile) ─────────────────── */
.cat-2026 .c26-fbtn { display: none; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--c26-ink); border-radius: 999px; background-color: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--c26-ink); cursor: pointer; }
.cat-2026 .c26-fbtn svg { width: 16px; height: 16px; }
.cat-2026 .c26-fhead, .cat-2026 .c26-ffoot, .cat-2026 .c26-fback { display: none; }
@media (max-width: 900px) {
  .cat-2026 .c26-fbtn { display: inline-flex; flex: none; }
  .cat-2026 .c26-bar { gap: 12px; }
  .cat-2026 .c26-count { margin-right: auto; }
  .cat-2026 .c26-sort .show-per-page { display: none !important; }

  .cat-2026 .product-grid-filters, .cat-2026 .product-grid-container .product-grid-filters {
    display: block !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 2147483001;
    width: min(400px, 88vw); margin: 0 !important; overflow-y: auto; overscroll-behavior: contain;
    background-color: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s .28s;
  }
  .cat-2026 .product-grid-filters.m-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
  .cat-2026 .product-grid-filters-sidebar { display: flex; flex-direction: column; min-height: 100%; padding: 0 18px !important; border: 0 !important; border-radius: 0 !important; background-color: #fff !important; }
  .cat-2026 .c26-fhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -18px; padding: 16px 18px; border-bottom: 1px solid var(--c26-line); background-color: #fff; font-size: 17px; }
  .cat-2026 .c26-fclose { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background-color: #f2efea; font-size: 22px; line-height: 1; color: var(--c26-ink); cursor: pointer; }
  .cat-2026 .c26-ffoot { position: sticky; bottom: 0; z-index: 2; display: block; margin: auto -18px 0; padding: 14px 18px; border-top: 1px solid var(--c26-line); background-color: #fff; }
  .cat-2026 .c26-fdone { width: 100%; padding: 13px 18px; border: 0; border-radius: 999px; background-color: var(--c26-ink); font: inherit; font-size: 15px; font-weight: 500; color: #fff; cursor: pointer; }
  .cat-2026 .c26-fback:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 2147483000; background-color: rgba(10, 12, 16, .4); }
  body.cat-2026.c26-filters-open { overflow: hidden; }
}
@media (max-width: 560px) {
  .cat-2026 .c26-count { display: none; }
  .cat-2026 .c26-bar { justify-content: space-between; }
  .cat-2026 .c26-sort select { max-width: 200px; }
}

/* ── Ticked filters as pills, under the bar ────────────────────────── */
.cat-2026 .c26-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.cat-2026 .c26-chips[hidden] { display: none; }
.cat-2026 .c26-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border: 0; border-radius: 999px; background-color: var(--c26-blue-soft); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--c26-blue); cursor: pointer; transition: background-color .15s; }
.cat-2026 .c26-chip span[aria-hidden] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; line-height: 1; }
.cat-2026 .c26-chip:hover span[aria-hidden] { background-color: rgba(33, 79, 255, .15); }
.cat-2026 .c26-chips-clear { padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--c26-ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cat-2026 .c26-chips-clear:hover { color: var(--c26-ink); }

/* Cards have 44px above them so a row with tabs still has space under the
   row before. The first row gives the extra 14px back, to stay close to the bar. */
.cat-2026 .product-grid-products ul.products { margin-top: -14px !important; }

/* Options flush left with the filter heading. */
.cat-2026 .product-filter__options, .cat-2026 .product-filter__options-list { margin-left: 0 !important; padding-left: 0 !important; }
.cat-2026 .product-filter .clear-filter-selection { margin-left: 0 !important; padding-left: 0 !important; }