/* Techfindr design layer. Loaded after the theme CSS and the plugin CSS that the theme prints in the footer, so plugin rules are beaten with the #post / #archive / #page ids. Colour tokens are the only per-site part. */

/* ---- Tokens ---- */
:root {
  --space-1: .8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 4rem;
  --d-radius: 1.6rem;
  --d-fu: clamp(3.4rem, 5.2vw, 5.6rem);   /* hero title: theme goes up to 10rem */
  --d-f3: 1.9rem;

  /* Site colours: the theme's own tokens where the dark scheme must flip, new ones only where contrast needs it */
  --d-ink: var(--black);               /* #222728 */
  --d-ink-soft: var(--black-);         /* #454e52, 7.6:1 on the page */
  --d-surface: var(--white);           /* cards */
  --d-page: var(--gray);               /* #eef3f5 */
  --d-tint-bg: var(--gray-light);      /* #F8FAFB hover / quiet fills */
  --d-line: rgba(34, 39, 40, .14);
  --d-control-line: rgba(34, 39, 40, .6);   /* form control edge, 3:1 or better */
  --d-shadow: 0 .2rem 1.2rem rgba(34, 39, 40, .08);
  --d-accent: #006BFF;                 /* brand blue (theme --c1): badges, buttons, rank discs */
  --d-accent-hover: #0052cc;
  --d-on-accent: #fff;                 /* 4.6:1 on the accent */
  --d-accent-tint: #e5f0ff;            /* winner row background */
  --d-chip-bg: #dbe9ff;                /* small label chips */
  --d-link: #0064F0;                   /* brand blue darkened just enough for 4.5:1 on the #eef3f5 page */
  --d-link-hover: #0047b3;
  --d-focus: #0064F0;
  --d-danger: #A93800;                 /* theme --danger */
  --d-stock: #04910f;                  /* theme --stock */
}
[data-scheme="dark"]:root {
  --d-line: rgba(255, 255, 255, .18);
  --d-control-line: rgba(255, 255, 255, .6);
  --d-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .35);
  --d-accent-tint: #1d2a45;
  --d-chip-bg: #22355c;
  --d-link: #8db8ff;
  --d-link-hover: #c2d8ff;
  --d-focus: #8db8ff;
  --d-tint-bg: #2c3234;
}
@media (max-width: 767px) { :root { --d-f3: 1.7rem; } }

/* ---- Global: hairlines, header, footer, focus ---- */
/* The theme draws every rule in #798990; one soft hairline instead */
nav.menu-parents,
.secTitLe,
footer .inner,
footer .enD,
.card__news .inFoBot { border-top-color: var(--d-line); }
header .searchBar input[type="text"] { border-color: var(--d-control-line); }
/* Links in the footer and mega menu turn brand blue on hover; the theme's hover blue is 4.1:1 on the page */
footer .fMenus a:hover,
nav.menu-nav a:hover { color: var(--d-link); }
footer .enD { font-size: 1.2rem; }
/* The theme removes the outline on every link; show a clear ring for keyboard users */
:is(header.container, nav.menu-nav, main, footer#footer) :is(a, button, input, .btn, .toc-button, .menuParent, .scheme-toggle, .notifications, .burger-toggle):focus-visible {
  outline: .3rem solid var(--d-focus);
  outline-offset: .2rem;
  border-radius: .4rem;
}

/* ---- Category badge on cards: solid brand blue instead of the blue to cyan gradient (white on cyan is about 2:1) ---- */
.card__news .cat {
  background: var(--d-accent);
  color: var(--d-on-accent);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: .3rem .9rem;
  border-radius: .6rem;
}
[data-scheme="dark"] .card__news .cat { color: #fff; }

/* ---- Cards (front page, archives) ---- */
/* Thumbnails follow the photo's own ratio, so rows differ in height; give them one ratio */
.card__news:not(.ol) picture img { aspect-ratio: 3 / 2; object-fit: cover; }
.card__news .inFoBot { font-size: 1.2rem; }
.card__news:hover .titLe { color: var(--d-link); }
/* Stronger fade behind white text on the photo cards */
.card__news.ol .caption { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .78) 100%); }
.card__news.ol .caption .inFoBot { border-top-color: rgba(255, 255, 255, .3); }

/* ---- Front page ---- */
/* The favourites section prints a heading over an empty row when no posts are chosen in ACF (needs a template guard to remove the markup) */
section.highlights:not(:has(.card__news)) { display: none; }
/* The stacked small cards should end where the big card ends, not leave a gap under it */
main#page section.trending .row > .col,
main#page section.latest .row > .col { display: flex; flex-direction: column; justify-content: space-between; }
main#page section.trending .row > .col > .card__news:last-child,
main#page section.latest .row > .col > .card__news:last-child { margin-bottom: 0 !important; }
@media (max-width: 767px) {
  /* Small cards become thumbnail + text rows, so the front page is not five screens of full-width photos */
  main#page .card__news:not(.big):not(.ol) .inner { flex-wrap: nowrap; align-items: flex-start; column-gap: var(--space-2); }
  main#page .card__news:not(.big):not(.ol) picture { flex: 0 0 36%; width: 36%; max-width: 36%; }
  main#page .card__news:not(.big):not(.ol) .caption { min-width: 0; padding-block: 0; }
  main#page .card__news:not(.big):not(.ol) .titLe { font-size: 2rem; line-height: 1.12; }
  main#page .card__news:not(.big):not(.ol) .inFoBot { margin-top: var(--space-1); padding-top: var(--space-1); }
  main#page .card__news:not(.big):not(.ol) .cat { margin-bottom: .6rem; }
  main#page .card__news:not(.big):not(.ol).mb-4 { margin-bottom: var(--space-3) !important; }
}

/* ---- Archive (category) ---- */
/* The row uses a 4px gutter, so the cards touch; give them air */
main#archive #element-list { --gutterX: 1.2rem; }
main#archive .mainTop.page { padding-bottom: var(--space-3); }
main#archive div.txt.my-5 { margin-top: var(--space-2) !important; margin-bottom: 0 !important; }

/* ---- Article hero ---- */
.mainTop .titLe { font-size: var(--d-fu); line-height: 1.06; }
main#post .mainTop { padding-bottom: var(--space-1); }
main#post .mainTop .teaser { max-width: 78ch; line-height: 1.6; }
/* Foldable intro (design.js adds the toggle) so the overview table comes higher up */
main#post .mainTop .teaser.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 767px) { main#post .mainTop .teaser.is-clamped { -webkit-line-clamp: 4; } }
.intro-toggle {
  appearance: none; background: none; border: 0; padding: .4rem 0; margin-top: var(--space-1);
  font: 700 1.5rem/1 var(--fw); color: var(--d-link); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.intro-toggle:hover { color: var(--d-link-hover); }

/* ---- Article page ---- */
/* Main column and sidebar started 8px apart (mt-5 vs mt-4) */
main#post .row > .txt.mt-5 { margin-top: var(--space-3) !important; }
main#post .row > .col-md.mt-4 { margin-top: var(--space-3) !important; }
main#post .txt > p { max-width: 74ch; }
main#post .txt > h2 { margin-top: var(--space-4); }
main#post .txt > h2:first-child { margin-top: 0; }

/* Text links: brand blue at 4.5:1 or better on the grey page, underlined so they do not rely on colour alone */
main#post .txt p a:not(.btn):not(.black),
main#post .txt li a:not(.btn),
main#post .txt td a:not(.btn),
main#post .test-row .pricetag a,
main#post .test-row .whereTBuy a,
main#post .recap-products .pricetag a,
main#post .testvinder .pricetag a,
main#post aside.author a {
  color: var(--d-link);
}
main#post .txt p a:not(.btn):not(.black),
main#post .txt li a:not(.btn),
main#post .txt td a:not(.btn),
main#post .test-row .pricetag a,
main#post .test-row .whereTBuy a,
main#post .recap-products .pricetag a,
main#post .testvinder .pricetag a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main#post .txt p a:not(.btn):not(.black):hover,
main#post .txt li a:not(.btn):hover,
main#post .txt td a:not(.btn):hover,
main#post .test-row .pricetag a:hover,
main#post .test-row .whereTBuy a:hover,
main#post .recap-products .pricetag a:hover,
main#post .testvinder .pricetag a:hover,
main#post aside.author a:hover { color: var(--d-link-hover); }
/* The theme's link hover is purple (#9755de, 3.8:1) */
main#post .txt a:hover { color: var(--d-link-hover); }

/* Small labels that were brand blue on the grey page (4.1:1) */
main#post .testRowDesc .sub,
main#post .testRowDesc .subTitLe,
main#post .bestproducts-wrap .heaDer:before { color: var(--d-link); }
main#post .testvinder .txt:before { color: var(--d-ink-soft); }   /* was #798990, 3.6:1 */

/* Buttons: brand blue with white text, and a hover that stays readable (theme hover is #0093c8, 3.5:1) */
main#post .btn,
main#archive .btn {
  background: var(--d-accent);
  color: var(--d-on-accent);
  border-radius: 99px;
}
main#post .btn:hover,
main#archive .btn:hover { background: var(--d-accent-hover); color: var(--d-on-accent); }

/* Detail cards: one calm border and radius instead of a bare shadow */
main#post .test-row {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow) !important;
  padding: 4.8rem var(--space-3) var(--space-3);
}
main#post .test-row .nuM { border-radius: var(--d-radius) 0 3.2rem; }
/* An empty spacer row left 80px under the button */
main#post .test-row > .row:last-child:has(> [class*="col-"]:empty) { display: none; }
main#post .test-row .note { color: var(--d-ink-soft); }
main#post .testRowDesc .buyNow.bg-lg { border: 1px solid var(--d-line); border-radius: var(--d-radius); background: var(--d-surface); }
main#post .testRowDesc { margin-bottom: var(--space-3); }

/* Table of contents and author box: white cards with dark text instead of #798990 slabs (light text on it was 3.5:1, blue on it 1.3:1) */
main#post .toc-box,
main#post aside.author {
  background: var(--d-surface);
  color: var(--d-ink);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
}
main#post .toc-box { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); }
main#post .toc-box a { color: var(--d-link); }
main#post .toc-box a:hover { color: var(--d-link-hover); }
main#post .toc-box .toc-button { color: var(--d-link); font-weight: 700; margin-top: .4rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
main#post .toc-box .toc-button:hover { color: var(--d-link-hover); }
main#post .txt .toc-box ul li:before { color: var(--d-ink-soft); }
main#post aside.author { margin-top: var(--space-4); }
main#post aside.author .f-5 { color: var(--d-ink-soft); }
/* The disclaimer frame is empty on most posts (design.js hides it then) and its border is the page colour */
#disclaimer { border-color: var(--d-line); border-radius: var(--d-radius); }
#disclaimer.is-empty { display: none; }

/* Sidebar summary */
main#post .recap-products { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-radius); box-shadow: var(--d-shadow); padding: var(--space-2) !important; }
main#post .recap-products .pricetag,
main#post .recap-products .stockStatus { font-size: 1.2rem; }

/* Stock state: give out-of-stock a dot too (the plugin only colours the in-stock one) */
.stockStatus.in-stock:before { background: var(--d-stock); }
.stockStatus.no-stock:before { background: var(--d-danger); }

/* ---- Winner card ("Testvinder"): pill with readable text instead of the cyan gradient disc ---- */
main#post .testvinder {
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow) !important;
}
main#post .testvinder .row { border-radius: var(--d-radius); }
main#post .testvinder .txt:after,
main#post .testvinder .txtSub:before { background: var(--d-line); }
main#post .testvinder .shape {
  width: auto; height: auto;
  top: var(--space-2); right: var(--space-2);
  padding: .8rem 1.6rem;
  border-radius: 99px;
  background: var(--d-accent);
  color: var(--d-on-accent);
  font: 700 1.3rem/1 var(--fw);
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 .3rem 1rem rgba(0, 107, 255, .25);
}
main#post .testvinder .shape:before { color: var(--d-on-accent); }

/* ---- Product rows: one card, hairline dividers, fixed columns ---- */
main#post .bestproducts-wrap {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  overflow: hidden;
  padding-bottom: 0;
}
main#post .bestproducts-wrap .heaDer { margin-bottom: var(--space-2); }
main#post .bestproducts-wrap ul.bestproducts-row { margin: 0 !important; border-top: 1px solid var(--d-line); }
main#post .bestproducts-wrap ul.bestproducts-row + * { padding: var(--space-1) var(--space-2) var(--space-2); margin: 0; }
main#post .bestproducts-wrap li.bestproducts,
main#post .bestproducts-wrap li.bestproducts:first-of-type {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2);
  position: relative; left: auto; right: auto; width: auto;
  margin: 0 !important;
  padding: 1.2rem var(--space-3);
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--d-line) !important;
  border-radius: 0;
  box-shadow: none !important;
  transition: background-color .15s;
}
main#post .bestproducts-wrap li.bestproducts:last-child { border-bottom: 0 !important; }
main#post .bestproducts-wrap li.bestproducts:hover { background: var(--d-tint-bg); box-shadow: none !important; }
main#post .bestproducts-wrap li.bestproducts:first-child { background: var(--d-accent-tint); box-shadow: inset .4rem 0 0 var(--d-accent) !important; }
main#post .bestproducts-wrap li.bestproducts > div { flex: none; width: auto; max-width: none; padding: 0; margin: 0; order: 0 !important; }
main#post .bestproducts-wrap li.bestproducts > .descR { flex: 1 1 auto; min-width: 0; }
main#post .bestproducts-wrap li.bestproducts > .offer { width: 16.4rem; }
main#post .bestproducts-wrap li.bestproducts > .price { width: 9rem; text-align: right !important; font-size: 1.8rem; }
main#post .bestproducts-wrap .promotionLine,
main#post .bestproducts-wrap li.bestproducts:first-of-type .promotionLine {
  left: auto; right: var(--space-3); top: 0; width: auto;
  transform: translateY(-50%);
  gap: .4rem;
  font-size: 1.2rem;
}
main#post .bestproducts-wrap .promotionLine > * { border-radius: 99px !important; background: var(--d-accent); color: var(--d-on-accent); padding: .4rem 1rem .5rem; font-weight: 600; }

/* Rank: brand disc for the top three, plain number below (white on the red seal was 2.9:1) */
main#post .bestproducts-wrap .num {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  border-radius: 50%; background: transparent;
  font: 700 1.4rem/1 var(--fw); color: var(--d-ink-soft);
}
main#post .bestproducts-wrap .num.lbb { background: var(--d-accent); color: var(--d-on-accent); }
main#post .bestproducts-wrap .img,
main#post .bestproducts-wrap .smAlImg img { width: 5.6rem; }
main#post .bestproducts-wrap .smAlImg img { height: 5.6rem; max-height: none; object-fit: contain; }
main#post .bestproducts-wrap .descR .overflow-txt { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
main#post .bestproducts-wrap .moRinfO { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .4rem; color: var(--d-ink-soft); font-size: 1.3rem; }
main#post .bestproducts-wrap .moRinfO .cta,
main#post .bestproducts-wrap .cta {
  background: var(--d-chip-bg); border: 0; color: var(--d-link-hover);
  font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 99px;
}
main#post .bestproducts-wrap .dealer-btn {
  width: 100%; justify-content: space-between; white-space: nowrap; background: var(--d-surface); color: var(--d-ink);
  border: 1px solid var(--d-control-line) !important; border-radius: 99px !important;
  padding: .6rem 1.4rem !important; font-size: 1.3rem !important;
}
main#post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-accent) !important; }
main#post .bestproducts-wrap i,
main#post .bestproducts-wrap i a { color: var(--d-ink-soft); }

/* Rows stay one line high on wide screens */
@media (min-width: 992px) {
  main#post .bestproducts-wrap .moRinfO { flex-wrap: nowrap; white-space: nowrap; }
  main#post .bestproducts-wrap li.bestproducts,
  main#post .bestproducts-wrap li.bestproducts:first-of-type { padding-inline: var(--space-2); }
  main#post .bestproducts-wrap li.bestproducts > .price { width: 8rem; }
  main#post .bestproducts-wrap .promotionLine,
  main#post .bestproducts-wrap li.bestproducts:first-of-type .promotionLine { right: var(--space-2); }
}
/* Below 768px the theme hides the dealer button, so the row shows a chevron instead */
@media (max-width: 767px) {
  /* Product names may wrap to two lines instead of being cut at the chevron */
  main#post .bestproducts-wrap .descR .overflow-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
  main#post .bestproducts-wrap li.bestproducts::after { content: "\203A"; margin-left: auto; font-size: 2.4rem; line-height: 1; color: var(--d-link); display: block !important; }
}
@media (max-width: 575px) {
  main#post .bestproducts-wrap li.bestproducts,
  main#post .bestproducts-wrap li.bestproducts:first-of-type { padding: 1.2rem var(--space-2); gap: 1.2rem; }
  main#post .bestproducts-wrap .num { width: 2.8rem; height: 2.8rem; }
  main#post .bestproducts-wrap .img,
  main#post .bestproducts-wrap .smAlImg img { width: 4.8rem; }
  main#post .bestproducts-wrap .smAlImg img { height: 4.8rem; }
  main#post .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; }
  main#post .bestproducts-wrap .promotionLine,
  main#post .bestproducts-wrap li.bestproducts:first-of-type .promotionLine { right: var(--space-2); }
  main#post .test-row { padding-inline: var(--space-2); }
}