/* Gastrotid design layer: "tighten, do not redesign". Loaded after the theme CSS.
   The product-row plugin prints its CSS inline in the footer (after this file), so rules that touch
   .bestproducts-wrap, .testvinder, .test-row and .pr-row are scoped with main#post to win on specificity. */

/* ---- Tokens ---- */
:root {
  --d-s1: .8rem;
  --d-s2: 1.6rem;
  --d-s3: 2.4rem;
  --d-s4: 4rem;

  /* Colours: the theme's own palette, only darkened where AA needed it */
  --d-brand: #4256d8;          /* theme --c1: badges, borders, rank accents */
  --d-on-brand: #fff;          /* text on the brand colour (5.9:1) */
  --d-link: #4256d8;           /* links on the page background (5.2:1) and on white (5.9:1) */
  --d-link-tint: #3f52d1;      /* links on the grey #E0DEDC surfaces (4.7:1; the plain brand blue gives 4.4:1) */
  --d-link-hover: #2d3ba8;     /* hover for links (8.0:1); the theme's pink hover is only 3:1 */
  --d-btn-hover: #0060c2;      /* hover for the blue .btn with white text (6.1:1); the theme's hover is 3.5:1 */
  --d-rank-ink: #000;          /* rank number on the coral starburst (7.1:1); white gave 2.9:1 */
  --d-price: #a93800;          /* theme --danger: prices in the Top 5 cards (6.5:1); the coral gave 2.9:1 */
  --d-focus: #4256d8;
  --d-line: rgba(0, 0, 0, .12);
  --d-shadow: 0 .1rem 1rem rgba(0, 0, 0, .07);
  --d-shadow-hover: 0 .4rem 1.6rem rgba(0, 0, 0, .12);
}
/* The theme's dark scheme is a manual toggle: it swaps --black/--white, so the tokens that depend on them follow */
[data-scheme="dark"]:root {
  --d-link: #9aa6ff;
  --d-link-tint: #9aa6ff;
  --d-link-hover: #c3caff;
  --d-focus: #9aa6ff;
  --d-price: #fd6363;          /* the theme's coral is fine on the dark card (5:1) */
  --d-line: rgba(255, 255, 255, .18);
  --d-shadow: 0 .1rem 1rem rgba(0, 0, 0, .5);
  --d-shadow-hover: 0 .4rem 1.6rem rgba(0, 0, 0, .6);
}

/* ---- Global: focus, hover contrast, footer ---- */
/* The theme removes the outline on every link, so give keyboard users one visible ring */
header.container a:focus-visible,
header.container [role="button"]:focus-visible,
header.container input:focus-visible,
main a:focus-visible,
main .btn:focus-visible,
main [role="button"]:focus-visible,
main button:focus-visible,
footer#footer a:focus-visible,
footer#footer .scrollup:focus-visible {
  outline: .3rem solid var(--d-focus);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* Full-card overlay links keep the ring inside the card */
main a.fixD:focus-visible,
main a.fi-xd:focus-visible,
main a.fixed:focus-visible { outline-offset: -.3rem; border-radius: var(--roUnd-); }
/* Menu hover uses the brand blue that is readable on the grey dropdown */
nav.menu-nav a:hover { color: var(--d-link-tint); }
/* Footer fine print was 11px */
footer#footer .enD { font-size: var(--f6); }

/* ---- Cards (home, archive): even images, room between cards ---- */
/* Card photos come in every ratio (some portrait); one ratio keeps rows and captions aligned */
.card__news.big:not(.ol) picture,
.card__news:not(.big):not(.ol) picture { aspect-ratio: 3 / 2; }
.card__news.big:not(.ol) picture img,
.card__news:not(.big):not(.ol) picture img { width: 100%; height: 100%; object-fit: cover; }
/* A short image made the caption of the small cards overlap its own divider */
.card__news:not(.big):not(.ol) .caption { min-width: 0; }
/* Overlay cards: the title sits at the top of the photo and was white on light photos (1.1:1 measured); a scrim at the top and a stronger one at the bottom keep white text readable */
.card__news.ol .caption {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .72) 0, rgba(0, 0, 0, .58) 18%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .8) 100%);
}
/* The wide "most read" card has its title at the bottom, so it only needs the bottom scrim */
.card__news.ol.bi .caption { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, .85) 100%); }
/* Card meta line: keep the read counter on one line under the label chip */
.card__news .inFoBot { row-gap: var(--d-s1); }

/* ---- Archive (category) ---- */
main#archive .mainTop.page { padding-bottom: var(--d-s3); }
main#archive .mainTop .titLe { font-size: clamp(3.4rem, 2.4rem + 2vw, 5rem); line-height: 1.05; }
/* The grid used a 0.1rem gutter, so photos touched; give it a real one */
main#archive #element-list { --gutterX: .8rem; }
@media (min-width: 768px) { main#archive #element-list { --gutterX: 1.2rem; } }
/* An empty text block below the grid still added 9.6rem of margin */
main#archive .txt:empty { display: none; }

/* ---- Article hero ---- */
main#post .mainTop { padding-top: var(--d-s3); padding-bottom: var(--d-s2); }
/* 7.2rem headline used three lines of the first screen */
main#post .mainTop .titLe { font-size: clamp(3.2rem, 2rem + 2.4vw, 5rem); line-height: 1.06; }
main#post .mainTop .teaser { max-width: 78ch; margin-top: var(--d-s2); }
main#post .mainTop .teaser br { display: none; }
/* Foldable intro (design.js adds the toggle) so the winner card 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: 680px) { main#post .mainTop .teaser.is-clamped { -webkit-line-clamp: 4; } }
main#post .intro-toggle {
  appearance: none; background: none; border: 0; padding: .4rem 0; margin-top: var(--d-s1);
  font: 700 1.5rem/1 var(--fw); color: var(--d-link); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
main#post .intro-toggle:hover { color: var(--d-link-hover); }

/* ---- Article: winner card ---- */
/* The round gradient badge ended in cyan (white text 2.1:1) and stuck out of the card; a solid pill on the brand blue is readable */
main#post .testvinder .shape {
  width: auto; height: auto;
  top: -1.4rem; right: var(--d-s3);
  padding: .7rem 1.5rem;
  border-radius: 99px;
  background: var(--d-brand);
  color: var(--d-on-brand);
  font-size: 1.3rem !important;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: var(--d-shadow);
}
/* "Produktoplysninger" label and the shop link sit on the grey card: use the tinted link blue */
main#post .testvinder .txt:before { color: var(--d-link-tint); }
main#post .testvinder a:not(.btn) { color: var(--d-link-tint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
main#post .testvinder a:not(.btn):hover { color: var(--d-link-hover); }
/* One calm shadow instead of the theme's important one */
main#post .testvinder { box-shadow: var(--d-shadow) !important; }
@media (max-width: 979px) {
  /* Mobile: less air around the photo and below the text */
  main#post .testvinder .colImg { padding: var(--d-s2) 3.2rem var(--d-s1); }
  main#post .testvinder .conTnt { padding: 0 var(--d-s1) var(--d-s3) !important; }
}

/* ---- Article: buttons ---- */
/* The theme's hover colour gives white text only 3.5:1 */
main#post .btn:hover,
main#post a.btn:hover,
main#post .pr-row:hover .btn { background: var(--d-btn-hover); }

/* ---- Article: overview list (.bestproducts-wrap) ---- */
/* Rows used negative margins and the first row was 32px wider than the frame; keep every row inside it */
main#post .bestproducts-wrap { padding-inline: var(--d-s1); }
@media (min-width: 768px) { main#post .bestproducts-wrap { padding-inline: var(--d-s2); } }
main#post .bestproducts-wrap li.bestproducts {
  margin: 0 0 var(--d-s1) !important;
  left: auto !important; right: auto !important; width: auto !important;
  padding-block: 1rem;
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow) !important;
}
main#post .bestproducts-wrap li.bestproducts:last-child { margin-bottom: 0 !important; }
main#post .bestproducts-wrap li.bestproducts:first-of-type { border-color: var(--d-brand); }
main#post .bestproducts-wrap li.bestproducts:hover { box-shadow: var(--d-shadow-hover) !important; }
/* Long product names pushed the name below the photo on some rows; let the column shrink so the ellipsis works */
main#post .bestproducts-wrap li.bestproducts > .descR { min-width: 0; }
main#post .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; line-height: 1.3; }
main#post .bestproducts-wrap .moRinfO { font-size: 1.2rem; }
/* Photos come in every ratio, so the thumbnail gets a fixed box and the names line up */
main#post .bestproducts-wrap .smAlImg img { width: 4rem; height: 4rem; object-fit: contain; }
/* Below 992px the one-line ellipsis cut names after 17 characters; allow two lines */
@media (max-width: 991px) {
  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 .price { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Rank discs: white numbers on the coral starburst were 2.9:1; the numbers on rows 4-10 are a touch larger */
main#post li.bestproducts .num.lbb { color: var(--d-rank-ink); }
main#post li.bestproducts .num { font-size: 1.6rem; }
/* The 3px blue outline on the shop button was the heaviest line on the page */
main#post .bestproducts-wrap .dealer-btn { border-width: .15rem; }
main#post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-btn-hover); }
/* recommendation label: same pill as the winner card badge */
main#post .bestproducts-wrap .bestproducts .promotionLine .winner__ {
  background: var(--d-brand); color: var(--d-on-brand);
  border-radius: 99px !important;
  padding: .3rem 1rem .4rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em;
}
main#post .bestproducts-wrap .bestproducts:first-of-type .promotionLine { top: -1.1rem; right: var(--d-s3); width: auto; }
/* From 768px the columns wrapped (price under the name, buy-at on two lines) in the narrower layouts; keep one line */
@media (min-width: 768px) {
  main#post .bestproducts-wrap li.bestproducts { flex-wrap: nowrap; }
  main#post .bestproducts-wrap li.bestproducts > .descR { flex: 1 1 0; width: auto; max-width: none; }
  main#post .bestproducts-wrap li.bestproducts > .offer { flex: 0 0 auto; width: auto; }
  main#post .bestproducts-wrap li.bestproducts > .price { flex: 0 0 auto; width: auto; min-width: 8rem; }
  main#post .bestproducts-wrap .dealer-btn { white-space: nowrap; }
}
/* Between 768px and 991px the column is too narrow for name, shop button and price together (the name got 85px), so the button gives way like it does on phones */
@media (min-width: 768px) and (max-width: 991px) {
  main#post .bestproducts-wrap li.bestproducts > .offer { display: none !important; }
}
/* Whenever the shop button is hidden, show a chevron that says the row is tappable */
@media (max-width: 991px) {
  main#post .bestproducts-wrap li.bestproducts::after {
    content: "\203A"; content: "\203A" / "";
    order: 9; margin-left: auto; padding-inline: var(--d-s1);
    font-size: 2.4rem; line-height: 1; color: var(--d-link);
  }
}

/* ---- Article: product cards and details ---- */
/* Long gap under the shop row and a heavy corner shadow; one hairline and one soft shadow */
main#post .test-row { border: 1px solid var(--d-line); box-shadow: var(--d-shadow) !important; padding-bottom: var(--d-s3); }
/* also-available-at: the button dropped under the logo because the column widths added up to more than 100%.
   From 768px the row is a grid: two lines up to 979px, one line from 980px. Below 768px the plugin's stacked layout is kept. */
@media (min-width: 768px) {
  main#post .pr-row {
    display: grid;
    grid-template-columns: 9.6rem minmax(0, 1fr) auto;
    grid-template-areas: "logo name name" "stock price btn";
    align-items: center;
    gap: var(--d-s1) var(--d-s2);
    padding: 1.2rem var(--d-s2) !important;
    box-shadow: none;
    border: 1px solid var(--d-line);
  }
  main#post .pr-row > * { width: auto !important; min-width: 0; padding: 0; order: 0 !important; margin: 0; }
  main#post .pr-row .loGo { grid-area: logo; }
  main#post .pr-row .naMe { grid-area: name; }
  main#post .pr-row .stoCk { grid-area: stock; }
  main#post .pr-row .priCe { grid-area: price; justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  main#post .pr-row .offer-btn { grid-area: btn; }
}
@media (min-width: 980px) {
  main#post .pr-row {
    grid-template-columns: 9.6rem minmax(0, 1fr) auto auto 10.4rem;
    grid-template-areas: "logo name stock price btn";
  }
}
/* Small shop button was 30px high; give it a proper touch target */
main#post .pr-row .btn { padding-block: .7rem; }
/* The product photo had 4.8rem of padding on every side and shrank to a thumbnail in the narrower columns */
@media (min-width: 768px) { main#post .test-row .bIgImg img { padding: var(--d-s2); } }
/* Details column: hyphenation cut product names mid-word ("Cookwa-re") */
main#post .testRowDesc .titLe { hyphens: manual; word-break: normal; overflow-wrap: break-word; font-size: 2rem; }
main#post .testRowDesc .buyNow a:not(.btn) { color: var(--d-link-tint); }

/* ---- Article: body text ---- */
/* Prose links in the brand blue with an underline (colour alone was 3.6:1 against the black text) */
main#post .txt p a:not(.btn),
main#post .txt li a:not(.btn),
main#post .pricetag a,
main#post .whereTBuy a {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
/* The theme's hover is pink, which is 3:1 on the page background */
main#post .txt p a:not(.btn):hover,
main#post .txt li a:not(.btn):hover,
main#post .pricetag a:hover,
main#post .whereTBuy a:hover,
main#post .toc-box a:hover,
main#post .author a:hover { color: var(--d-link-hover); }
main#post .txt > h2 { font-size: clamp(2.8rem, 2.2rem + 1vw, 3.4rem); line-height: 1.1; }
main#post .txt > hr { border: 0; border-top: 1px solid var(--d-line); margin: var(--d-s3) 0; opacity: 1; }
/* Table of contents: a plain 14px text link became a proper toggle */
main#post .toc-box { margin-block: var(--d-s3); }
main#post .toc-box .toc-button { color: var(--d-link-tint); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
main#post .toc-box .toc-button:hover { color: var(--d-link-hover); }
main#post .toc-box a { color: var(--d-link-tint); }
/* Empty disclaimer frame (design.js hides it when it has no content) */
main#post #disclaimer.is-empty { display: none; }
/* FAQ answers were set in the link blue; keep the blue for the questions only */
main#post .faQs .collapse { color: var(--black-); }

/* ---- Article: sidebar summary ---- */
/* Shop links on the grey summary card were 4.4:1 */
main#post .recap-products a:not(.fixed) { color: var(--d-link-tint); }
main#post .recap-products a:not(.fixed):hover { color: var(--d-link-hover); }
main#post .recap-products .conTn + .conTn { padding-top: var(--d-s1); border-top: 1px solid var(--d-line); }

/* ---- Article: Top 5 block (other posts) ---- */
/* Cyan label 2.2:1 on the light card, coral prices 2.9:1: use the brand blue and the theme's rust red */
main#post .top5row .titLe:before { color: var(--d-link); }
main#post .top5row .proDctsRoW .top5Prodct .priceTag { color: var(--d-price); }
/* The block was pulled 4.8rem left of the text column on desktop; align it to the column */
@media (min-width: 980px) { main#post .top5row { margin-left: 0; } }
main#post .top5row { box-shadow: var(--d-shadow); }
/* The FAQ toggle icon is coral (2.9:1 on white); darkened it reaches 3:1 without changing the hue */
main#post .faQs .titLe:after { filter: brightness(.72); }

/* ---- Dark scheme (manual toggle): grey surfaces the theme forgot to swap ---- */
/* White text was placed on the light grey #E0DEDC in these three boxes (1.3:1) */
[data-scheme="dark"] main#post .testRowDesc .sBar .buyNow,
[data-scheme="dark"] main#post .author,
[data-scheme="dark"] main#post .top5row { background: var(--white-); }
/* Small blue labels were 3.6:1 on black; use the lighter dark-scheme link blue */
main#post .testRowDesc .sub,
main#post .testRowDesc .subTitLe,
main#post .faQs .titLe,
main#post .top5row .titLe { color: var(--d-link); }