/* ---------------------------------------------------------------------------
   Knowledge Hub
   ---------------------------------------------------------------------------
   A standalone sheet, loaded only by knowledge-hub.aspx. Same reasoning as
   help-centre.css: the blog styles live in scss/modules/_blog.scss, which
   compiles into main.css and is shared by every page on the site. Keeping this
   separate means it cannot regress anything else and reverts by removing one
   <link>. Everything is prefixed .kh-.

   Both files are registered in EcommerceBase.Site.csproj - without that the
   deploy publishes the markup and leaves the stylesheet behind.

   Tokens follow _common/scss/base/_variables.scss so the hub still looks like
   the rest of the site.
   --------------------------------------------------------------------------- */

.kh {
  --kh-red: #ff0801;
  --kh-red-dark: #d40600;
  --kh-ink: #202020;
  --kh-body: #5b6068;
  --kh-soft: #878d97;
  --kh-line: #e9ebf0;
  --kh-grey: #f5f6f8;
  --kh-head: "Montserrat", "Inter", Helvetica, Arial, sans-serif;
  --kh-sans: "Inter", Helvetica, Arial, sans-serif;
  --kh-wrap: 1500px;

  font-family: var(--kh-sans);
  color: var(--kh-body);
}
.kh *,
.kh *::before,
.kh *::after { box-sizing: border-box; }

/* main.css underlines every link on hover. Nothing in the hub that behaves
   like a button or a card should pick that up; the few prose links that should
   opt back in below. */
.kh a,
.kh a:hover,
.kh a:focus { text-decoration: none; }
.kh-result a,
.kh-result a:hover,
.kh-empty a,
.kh-empty a:hover { text-decoration: underline; text-underline-offset: 3px; }

.kh__wrap {
  width: 100%;
  max-width: var(--kh-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.kh-body { padding: 28px 0 60px; background: #fff; }
@media (min-width: 1024px) { .kh-body { padding: 34px 0 76px; } }

/* --------------------------------------------------------------- search */

/* The first thing after the page's title, and the one control that reaches
   every guide. The query is answered on the server, so a search can be
   linked, shared and paged through.

   The search and the topics under it are one block: the field is no use to
   somebody who does not yet know what to type, and the topics are no use
   without the field to type the next thing into. */
/*
 * The page's own title, and the search beside it.
 *
 * The two sit on one line and share a baseline. The search is capped rather
 * than stretched to the column: a field the width of the page invites a
 * sentence, and this one takes two or three words.
 */
.kh-top {
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
}
@media (min-width: 860px) {
  .kh-top {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 580px);
    align-items: center;
    gap: 34px;
  }
}
.kh-top__title {
  margin: 0;
  padding: 0;
  color: var(--kh-ink);
  font-family: var(--kh-head);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kh-find { margin: 0; }

.kh-search { margin: 0; }
.kh-search__row { position: relative; }
.kh .kh-search__input { box-sizing: border-box; }
.kh-search__input {
  width: 100%;
  height: 68px;
  padding: 0 148px 0 62px;
  border: 1.5px solid #c9ced8;
  /* a pill, not a box: the one control on the page that invites typing */
  border-radius: 999px;
  background: #fff;
  font-family: var(--kh-sans);
  font-size: 17px;
  line-height: 68px;
  color: var(--kh-ink);
  -webkit-appearance: none;
  appearance: none;
}
.kh-search__input::placeholder { color: var(--kh-soft); }
.kh-search__input:hover { border-color: #aeb4c0; }
.kh-search__input:focus {
  outline: none;
  border-color: var(--kh-red);
  box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.14);
}
.kh-search__input::-webkit-search-decoration,
.kh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kh-search__icon {
  position: absolute;
  top: 50%;
  left: 26px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: var(--kh-soft);
  pointer-events: none;
}
.kh-search__row:focus-within .kh-search__icon { color: var(--kh-red); }
.kh-search__go {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  margin-top: -26px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--kh-red);
  color: #fff;
  font-family: var(--kh-head);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.kh-search__go:hover { background: var(--kh-red-dark); }
.kh-search__arrow { font-size: 17px; line-height: 1; }
@media (max-width: 767px) {
  .kh-search__input { height: 58px; padding: 0 62px 0 48px; font-size: 15px; line-height: 58px; }
  .kh-search__icon { left: 18px; width: 19px; height: 19px; margin-top: -9.5px; }
  /* no room for the word beside a placeholder this long - the arrow says it */
  .kh-search__go { gap: 0; height: 46px; margin-top: -23px; padding: 0 16px; font-size: 0; }
  .kh-search__arrow { font-size: 19px; }
}

/* what the search found, and the way back out of it */
.kh-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--kh-body);
}
.kh-result b { color: var(--kh-ink); }
.kh-result a { color: var(--kh-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ tabs */

/*
 * The categories in a line, under a rule that the current one sits on.
 *
 * This replaces a rail of eleven photo tiles: the same eleven names, a tenth
 * of the height, and unlike the rail it says which one is being read. It
 * scrolls sideways on a phone rather than wrapping to four rows.
 */
.kh-tabs {
  margin: 0 0 30px;
  border-bottom: 1px solid var(--kh-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kh-tabs::-webkit-scrollbar { display: none; }
.kh-tabs ul {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.kh-tab {
  display: block;
  padding: 0 0 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kh-body);
}
.kh-tab:hover { color: var(--kh-ink); }
.kh-tab--on { color: var(--kh-red); border-bottom-color: var(--kh-red); font-weight: 700; }

/* ------------------------------------------------------------------ bands */

.kh-band { margin: 0 0 44px; }
.kh-band:last-child { margin-bottom: 0; }
.kh-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.kh-band__title {
  margin: 0;
  padding: 0;
  color: var(--kh-ink);
  font-family: var(--kh-head);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.kh-band__all {
  flex: none;
  color: var(--kh-red);
  font-family: var(--kh-head);
  font-size: 13.5px;
  font-weight: 800;
}

/* the newest guide, given the room a front page gives its lead story */
.kh-lead { display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) {
  .kh-lead { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px; }
}
.kh-lead__image {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--kh-grey);
  aspect-ratio: 16 / 10;
}
.kh-lead__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-lead__body { min-width: 0; }
.kh-lead__title {
  margin: 9px 0 12px;
  padding: 0;
  font-family: var(--kh-head);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.kh-lead__title a { color: var(--kh-ink); }
.kh-lead__title a:hover { color: var(--kh-red); }
.kh-lead__excerpt { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; }


/* ---------------------------------------------------------------- layout */

/*
 * A category page is the guides, and nothing beside them.
 *
 * It had a column of five popular guides and a panel of quick checks down
 * one side. The hub is the page that recommends things now; a category page
 * is the answer to "show me the ones about brands", and a rail of guides
 * from other categories beside it is the page arguing with the question.
 */
.kh-layout { display: block; }
.kh-main { min-width: 0; }

/* --------------------------------------------------------- section labels */

/* The small capitalised heading over a block - the tiles rail, the popular
   list. Named for the sidebar it was written for. */
.kh-side__label {
  margin: 0 0 12px;
  padding: 0 4px;
  font-family: var(--kh-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kh-ink);
}

/* ------------------------------------------------------------------ cards */

.kh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-bottom: 14px;
  margin: 0 0 20px;
  border-bottom: 2px solid var(--kh-line);
}
.kh-head__title {
  margin: 0;
  font-family: var(--kh-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kh-ink);
}
.kh-head__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kh-head__note { font-size: 13.5px; font-weight: 600; color: var(--kh-soft); }

.kh-sort { display: inline-flex; align-items: center; gap: 8px; }
.kh-sort__label {
  font-family: var(--kh-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kh-soft);
}
.kh .kh-sort__select { box-sizing: border-box; }
.kh-sort__select {
  height: 36px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--kh-line);
  border-radius: 5px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878d97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
  font-family: var(--kh-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kh-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.kh-sort__select:focus { outline: none; border-color: var(--kh-red); box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.12); }

/* Two a row, not four. The middle column shares the page with a sidebar and
   the popular list, so four cards left each image about 130px wide - too small
   to be worth loading. Two gives roughly 380px, which the 16:10 crop can
   actually use. A third only appears when the window is wide enough to keep
   them that size. */
/* As many across as keep a card at least 340px wide - two on most screens,
   three on a big one - so a card is never a tall thin column. */
.kh-grid {
  display: grid;
  gap: 24px 22px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 419px) { .kh-grid { grid-template-columns: 1fr; } }
/* Four across, on the hub and on a category alike - one card shape and one
   row length, so moving between them is not a change of scenery. Four and no
   more however wide the window gets: the room a bigger screen gives goes
   into the cards rather than into more of them. */
@media (min-width: 700px) and (max-width: 1119px) {
  .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .kh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A card, not a stack: a border to hold it, the image edge to edge along the
   top, and a foot that says where the card goes. */
.kh-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--kh-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kh-card:hover {
  border-color: #d3d8e0;
  box-shadow: 0 10px 28px rgba(20, 22, 26, 0.09);
}
.kh-card__image {
  display: block;
  margin: 0;
  overflow: hidden;
  background: var(--kh-grey);
  aspect-ratio: 16 / 9;
}
.kh-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.kh-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--kh-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--kh-red);
}
.kh-card:hover .kh-card__more span { transform: translateX(3px); }
.kh-card__more span { display: inline-block; transition: transform 0.15s ease; }
.kh-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.kh-card:hover .kh-card__image img { transform: scale(1.03); }

.kh-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 9px; }
.kh-card__cat {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--kh-red);
  color: #fff;
  font-family: var(--kh-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
}
.kh-card__cat:hover { background: var(--kh-red-dark); color: #fff; }
.kh-card__date { font-size: 12.5px; color: var(--kh-soft); }

.kh-card__title {
  margin: 0 0 6px;
  font-family: var(--kh-head);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.kh-card__title a { color: var(--kh-ink); text-decoration: none; }
.kh-card__title a:hover { color: var(--kh-red); }
/* Three lines, and a height that holds exactly three. Without the max-height
   the box was tall enough for a fourth, so the line the clamp had cut showed
   through underneath the ellipsis. */
.kh-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-height: 3.2em;
  color: var(--kh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------- popular */

.kh-pop { min-width: 0; }
/* not sticky: with the picks, the checks and the search card it runs longer
   than most windows, and a pinned column that tall hides its own foot */
/* below three columns it sits under the cards, with a rule to separate it */
@media (max-width: 1299px) {
  .kh-pop { padding-top: 26px; border-top: 2px solid var(--kh-line); }
}

.kh-pop__list { margin: 0; padding: 0; list-style: none; counter-reset: pop; }
@media (max-width: 1299px) {
  .kh-pop__list { display: grid; gap: 0 30px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.kh-pop__item { counter-increment: pop; border-bottom: 1px solid var(--kh-line); }
.kh-pop__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  color: var(--kh-ink);
  text-decoration: none;
}
.kh-pop__link:hover .kh-pop__title { color: var(--kh-red); }
.kh-pop__rank {
  flex: 0 0 auto;
  min-width: 26px;
  font-family: var(--kh-head);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  color: #d7dae1;
  /* two digits, so 01 sits under 10 without the column jumping */
  font-variant-numeric: tabular-nums;
}
.kh-pop__item:nth-child(-n+3) .kh-pop__rank { color: var(--kh-red); }
.kh-pop__thumb {
  flex: 0 0 auto;
  width: 62px;
  height: 46px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kh-grey);
}
.kh-pop__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-pop__body { display: block; min-width: 0; }
.kh-pop__cat {
  display: block;
  margin-bottom: 3px;
  font-family: var(--kh-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kh-red);
}
.kh-pop__cat:empty { display: none; }
.kh-pop__title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; }

/* --------------------------------------------------------------- nothing */

.kh-empty {
  margin: 6px 0 0;
  padding: 22px 24px;
  background: var(--kh-grey);
  border-left: 3px solid var(--kh-red);
  border-radius: 0 4px 4px 0;
}
.kh-empty h2 {
  margin: 0 0 6px;
  font-family: var(--kh-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--kh-ink);
}
.kh-empty p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.kh-empty a { color: var(--kh-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- pagination */

/* One row: arrows, a window of pages, gaps where pages are skipped. */
.kh-pages { margin-top: 36px; display: flex; justify-content: center; }
.kh-pages ol {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--kh-line);
  border-radius: 999px;
  background: #fff;
}
.kh-pages li { display: block; margin: 0; padding: 0; }
.kh-pages a,
.kh-pages span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--kh-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kh-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.kh-pages a:hover { background: var(--kh-grey); color: var(--kh-red); }
.kh-pages .active a { background: var(--kh-red); color: #fff; }
.kh-pages .gap span { min-width: 26px; padding: 0; color: var(--kh-soft); }
.kh-pages .prev a,
.kh-pages .next a { font-size: 22px; line-height: 1; padding-bottom: 3px; }
@media (max-width: 479px) {
  .kh-pages a, .kh-pages span { min-width: 34px; height: 34px; padding: 0 6px; font-size: 13px; }
}

.kh a:focus-visible,
.kh button:focus-visible { outline: 2px solid var(--kh-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .kh * { transition: none !important; } }

/* --------------------------------------------------------------- explore */

/* Every category on one rail. A finger swipes it, a mouse drags it or
   steps it with the arrows (see knowledge-hub.js), and it snaps tile to
   tile. The scrollbar is hidden because the arrows and the cut-off tile at
   the edge already say there is more. */
.kh-explore { margin: 0 0 36px; }
.kh-explore__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.kh-explore__head .kh-side__label { margin: 0; }
.kh-explore__arrows { display: flex; gap: 6px; }
.kh-explore--fits .kh-explore__arrows { display: none; }
.kh-explore__arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--kh-line);
  border-radius: 50%;
  background: #fff;
  color: var(--kh-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.kh-explore__arrow:hover { border-color: var(--kh-red); color: var(--kh-red); }
.kh-explore__arrow:disabled { opacity: 0.35; cursor: default; }
.kh-explore__arrow:disabled:hover { border-color: var(--kh-line); color: var(--kh-ink); }
.kh-explore__arrow:focus-visible { outline: 2px solid var(--kh-red); outline-offset: 2px; }

.kh-tiles {
  display: flex;
  gap: 16px;
  margin: 0 -20px;
  padding: 4px 20px 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
}
.kh-tiles::-webkit-scrollbar { display: none; }
/* while the mouse holds it the rail follows the hand; it snaps on release */
.kh-tiles.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
.kh-tiles a, .kh-tiles img { -webkit-user-drag: none; }
.kh-tiles > li { flex: 0 0 300px; scroll-snap-align: start; min-width: 0; }
@media (max-width: 639px) { .kh-tiles > li { flex-basis: 78%; } }

.kh-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--kh-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  color: var(--kh-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kh-tile__link:hover { border-color: #d3d8e0; box-shadow: 0 10px 28px rgba(20, 22, 26, 0.09); color: var(--kh-ink); }
.kh-tile__media { position: relative; order: -1; height: 150px; overflow: hidden; background: var(--kh-grey); }
.kh-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.kh-tile__link:hover .kh-tile__media img { transform: scale(1.04); }
.kh-tile__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 15px 16px 14px; }
.kh-tile__name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--kh-head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.kh-tile__name::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: var(--kh-red);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.kh-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.kh-tile__go { font-family: var(--kh-head); font-size: 12.5px; font-weight: 800; color: var(--kh-red); }
.kh-tile__count { font-size: 12px; font-weight: 600; color: var(--kh-soft); }

.kh-tile--all .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h7a2.5 2.5 0 0 1 2.5 2.5v11a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M20 5.5h-4.5a2.5 2.5 0 0 0-2 1'/%3E%3Cpath d='M20 5.5V17h-5.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h7a2.5 2.5 0 0 1 2.5 2.5v11a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M20 5.5h-4.5a2.5 2.5 0 0 0-2 1'/%3E%3Cpath d='M20 5.5V17h-5.5'/%3E%3C/svg%3E"); }
.kh-tile--buying-guides .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.2A4.5 4.5 0 0 0 8 5H3.5v13H8a4.5 4.5 0 0 1 4 2.2'/%3E%3Cpath d='M12 7.2A4.5 4.5 0 0 1 16 5h4.5v13H16a4.5 4.5 0 0 0-4 2.2z'/%3E%3Cpath d='M12 7.2v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.2A4.5 4.5 0 0 0 8 5H3.5v13H8a4.5 4.5 0 0 1 4 2.2'/%3E%3Cpath d='M12 7.2A4.5 4.5 0 0 1 16 5h4.5v13H16a4.5 4.5 0 0 0-4 2.2z'/%3E%3Cpath d='M12 7.2v13'/%3E%3C/svg%3E"); }
.kh-tile--brands-reviews .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
.kh-tile--sizes-markings .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.6'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.6'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/svg%3E"); }
.kh-tile--safety-damage .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.4-3.1 7.9-7.5 9-4.4-1.1-7.5-4.6-7.5-9V6z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.4-3.1 7.9-7.5 9-4.4-1.1-7.5-4.6-7.5-9V6z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
.kh-tile--repairs-emergencies .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.7 3.6a5.4 5.4 0 0 0-6.9 6.7L3.6 15.5a2 2 0 0 0 2.9 2.9l5.2-5.2a5.4 5.4 0 0 0 6.7-6.9l-3 3-2.7-.7-.7-2.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.7 3.6a5.4 5.4 0 0 0-6.9 6.7L3.6 15.5a2 2 0 0 0 2.9 2.9l5.2-5.2a5.4 5.4 0 0 0 6.7-6.9l-3 3-2.7-.7-.7-2.7z'/%3E%3C/svg%3E"); }
.kh-tile--pressure-maintenance .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a9 9 0 1 1 16 0'/%3E%3Cpath d='m12 15 3.5-4.5'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a9 9 0 1 1 16 0'/%3E%3Cpath d='m12 15 3.5-4.5'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E"); }
.kh-tile--wheels-alignment .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v5M12 15.5v5M3.5 12h5M15.5 12h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v5M12 15.5v5M3.5 12h5M15.5 12h5'/%3E%3C/svg%3E"); }
.kh-tile--tyre-laws-mot .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m8.8 14.2 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m8.8 14.2 2 2 4-4'/%3E%3C/svg%3E"); }
.kh-tile--tyre-types .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 3v5.6M12 15.4V21M3 12h5.6M15.4 12H21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 3v5.6M12 15.4V21M3 12h5.6M15.4 12H21'/%3E%3C/svg%3E"); }
.kh-tile--general-knowledge .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17a6 6 0 1 1 5.6 0'/%3E%3Cpath d='M9.5 17h5v2a2.5 2.5 0 0 1-5 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17a6 6 0 1 1 5.6 0'/%3E%3Cpath d='M9.5 17h5v2a2.5 2.5 0 0 1-5 0z'/%3E%3C/svg%3E"); }
.kh-tile--seasonal-advice .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8 6 18M18 6l1.8-1.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8 6 18M18 6l1.8-1.8'/%3E%3C/svg%3E"); }
.kh-tile--ev-hybrid-tyres .kh-tile__name::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v5M16 3v5'/%3E%3Cpath d='M5.5 8h13v2.5a6.5 6.5 0 0 1-13 0z'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v5M16 3v5'/%3E%3Cpath d='M5.5 8h13v2.5a6.5 6.5 0 0 1-13 0z'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- quick */

/* Six checks on a light panel, each row a white pill with a red glyph. Sits
   between the picks and the dark search card, so the column goes
   white - grey - dark rather than two dark blocks in a row. */
.kh-quick {
  margin-top: 26px;
  padding: 16px;
  border-radius: 10px;
  background: var(--kh-grey);
}
.kh-quick__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--kh-head);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--kh-ink);
}
.kh-quick__head::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--kh-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-8 12h6l-1 8 8-12h-6z'/%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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-8 12h6l-1 8 8-12h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kh-quick__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
/* The rows ran wider than the panel: an implicit grid track sizes to its
   content, and a nowrap title made that content wide. minmax(0, 1fr) lets
   the track shrink to the panel and the title ellipsise inside it. */
.kh-quick__list { grid-template-columns: minmax(0, 1fr); }
.kh-quick__list > li { display: block; min-width: 0; margin: 0; padding: 0; }
.kh .kh-quick__link { box-sizing: border-box; width: 100%; }
.kh-quick__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--kh-ink);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.kh-quick__link:hover { border-color: var(--kh-red); color: var(--kh-ink); }
.kh-quick__link::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background-color: var(--kh-red);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 20px;        mask-size: 20px;
}
.kh-quick__body { flex: 1 1 auto; min-width: 0; }
.kh-quick__label { display: block; font-family: var(--kh-head); font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.kh-quick__title {
  display: -webkit-box;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  max-height: 4.05em;
  color: var(--kh-soft);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-quick__go { flex: 0 0 auto; color: var(--kh-red); font-size: 20px; font-weight: 800; line-height: 1; }

.kh-quick__link--pressure::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a9 9 0 1 1 16 0'/%3E%3Cpath d='m12 15 3.5-4.5'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a9 9 0 1 1 16 0'/%3E%3Cpath d='m12 15 3.5-4.5'/%3E%3Ccircle cx='12' cy='16' r='1.4'/%3E%3C/svg%3E"); }
.kh-quick__link--tread::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 5v14M11 5v14M15 5v14M19 5v14' stroke-dasharray='2 2.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 5v14M11 5v14M15 5v14M19 5v14' stroke-dasharray='2 2.2'/%3E%3C/svg%3E"); }
.kh-quick__link--age::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h3M13 14h3M8 17.5h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h3M13 14h3M8 17.5h3'/%3E%3C/svg%3E"); }
.kh-quick__link--size::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.6'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.6'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/svg%3E"); }
.kh-quick__link--speed::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18a8.5 8.5 0 1 1 14 0'/%3E%3Cpath d='m12 16 4-6'/%3E%3Ccircle cx='12' cy='16.5' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18a8.5 8.5 0 1 1 14 0'/%3E%3Cpath d='m12 16 4-6'/%3E%3Ccircle cx='12' cy='16.5' r='1.5'/%3E%3C/svg%3E"); }
.kh-quick__link--load::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3Cpath d='M6.5 8.5h11l2 12h-15z'/%3E%3Cpath d='M9.5 12.5h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3Cpath d='M6.5 8.5h11l2 12h-15z'/%3E%3Cpath d='M9.5 12.5h5'/%3E%3C/svg%3E"); }
.kh-quick__link--mot::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m8.8 14.2 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m8.8 14.2 2 2 4-4'/%3E%3C/svg%3E"); }
.kh-quick__link--flat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5c0 2 4 3.5 9 3.5s9-1.5 9-3.5'/%3E%3Cpath d='M4.5 12.5C5.5 9 8.3 6 12 6s6.5 3 7.5 6.5'/%3E%3Cpath d='M12 9.5v3'/%3E%3Cpath d='M12 15h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5c0 2 4 3.5 9 3.5s9-1.5 9-3.5'/%3E%3Cpath d='M4.5 12.5C5.5 9 8.3 6 12 6s6.5 3 7.5 6.5'/%3E%3Cpath d='M12 9.5v3'/%3E%3Cpath d='M12 15h.01'/%3E%3C/svg%3E"); }