/* Design layer for the best-* themes. Loaded after the theme CSS. The colour tokens below are the only per-site part. */

/* ---- Tokens ---- */
:root {
  --space-1: .8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 4rem;
  --card-radius: 1.6rem;
  --fu: 4rem;
  --f3: 1.9rem;

  /* Site colours (per site) */
  --d-ink: #253946;            /* text and dark surfaces */
  --d-ink-soft: #4a5a64;       /* secondary text */
  --d-line: rgba(37, 57, 70, .16);
  --d-shadow: 0 .2rem 1.2rem rgba(37, 57, 70, .10);
  --d-page: #e3e3df;           /* page background */
  --d-accent: #eefb13;         /* buttons, badges, rank discs */
  --d-on-accent: #253946;      /* text on the accent colour */
  --d-on-dark: #fff;           /* text on the ink colour */
  --d-accent-tint: #f8fdc0;    /* winner row background */
  --d-chip-bg: #f1f9a8;        /* small label chips */
  --d-link: #00693c;           /* links on white, at least 4.5:1 */
  --d-link-hover: #004d2b;
  --d-link-on-dark: #eefb13;   /* links on the ink colour */
  --d-footer-bg: #50606A;
  --d-footer-link: #FFDF41;
  --d-footer-hover: var(--d-accent);   /* footer link hover, at least 4.5:1 on the footer */
  --d-focus: var(--d-ink);        /* focus outline on light surfaces */
  --d-focus-winner: var(--d-link-on-dark);   /* focus outline on the winner card */
  --d-focus-header: var(--d-focus);   /* focus outline in the header and hero */
}
@media (max-width: 680px) { :root { --fu: 3.2rem; --f3: 1.7rem; } }

/* ---- Global: hairlines, header, footer, focus ---- */
header.head, header.head.border-bottom { border-bottom: 1px solid var(--d-line) !important; }
header.head nav.menuelements { padding-right: var(--space-2); }
footer#footer.bg3 { background: var(--d-footer-bg); }
footer#footer a.mn-el { color: var(--d-footer-link); }
footer#footer a.mn-el:hover { color: var(--d-footer-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: .3rem solid var(--d-focus); outline-offset: .2rem; border-radius: .4rem; }
header.head :focus-visible, .sub-hero :focus-visible { outline-color: var(--d-focus-header); }
main.post-post .testvinder :focus-visible { outline-color: var(--d-focus-winner); }
footer#footer :focus-visible { outline-color: var(--d-footer-link); }

/* ---- Category badge on cards ---- */
.bbl {
  right: var(--space-1) !important;
  top: var(--space-1) !important;
  background: var(--d-ink) !important;
  color: var(--d-on-dark) !important;
  font-size: 1.2rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem 1rem .3rem !important;
  border-radius: .6rem !important;
}

/* ---- Cards (front page, archives, search) ---- */
.card__element picture.bFv img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__element p.f-5, .card__element p.f-5 span:not(.c3) { color: var(--d-ink-soft); font-size: 1.4rem; }
.card__element:hover h4 { color: var(--d-link); }

/* ---- Front page ---- */
@media (min-width: 768px) {
  main#page > section.sect.py-4 .col-sm-7 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
    align-content: start;
  }
  main#page > section.sect.py-4 .col-sm-7 > h3 { grid-column: 1 / -1; }
}
main#page .col-sm-7 .card__element { margin-bottom: var(--space-3) !important; }
main#page .col-sm-7 .card__element h4.f-1 { font-size: var(--f3); line-height: 1.25; }
main#page .col-sm-7 .card__element .caption { padding-block: var(--space-1) 0 !important; }
main#page .col-sm-7 .card__element picture,
main#page .col-sm-7 .card__element img { border-radius: var(--card-radius); }
main#page .col-sm-5 > * {
  background: #fff;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--d-shadow);
}
/* The popular strip repeats the sidebar list, so it only shows where there is no sidebar */
main#page > section.sect.border-bottom { border-bottom: 1px solid var(--d-line) !important; }
main#page > section.sect.border-bottom .carO {
  padding-block: var(--space-2) !important;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
main#page > section.sect.border-bottom .carO::-webkit-scrollbar { display: none; }
main#page .carO .card__element { margin-bottom: 0 !important; }
@media (min-width: 1024px) { main#page > section.sect.border-bottom { display: none; } }

/* ---- Hero areas (articles and archives) shrink to their content ---- */
.sub-hero, .sub-hero .overlay { height: auto !important; min-height: 0 !important; }
.sub-hero .caption { height: auto !important; min-height: 0 !important; margin-block: 0 !important; padding-block: var(--space-3); }
.sub-hero .caption > div { margin-bottom: 0 !important; }
.sub-hero h1.f-u { font-size: var(--fu); line-height: 1.12; max-width: 24ch; }
.sub-hero p.f-3 { font-size: 1.8rem; line-height: 1.6; max-width: 68ch; }
@media (max-width: 680px) { .sub-hero p.f-3 { font-size: 1.6rem; } }
main.post-post .sub-hero .caption { padding-bottom: var(--space-3) !important; }
main.archive .sub-hero .caption { padding-block: var(--space-4) var(--space-1); }
main.archive section.sect.bg-wh { background: var(--d-page); padding-top: var(--space-2) !important; }
main.archive section.sect.bg-wh .row.my-5 { margin-top: var(--space-2) !important; }

/* Foldable intro text (design.js adds the toggle) so the winner card comes higher up */
.sub-hero p.f-3.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 680px) { .sub-hero p.f-3.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.post-post section.sect.bg-wh { background: var(--d-page); padding-top: var(--space-2); }
/* The theme pulls the winner card and the sidebar 100px up over the hero and gives them a -100px bottom margin; keep them in normal flow */
main.post-post .pu-ux { top: 0 !important; margin-bottom: 0 !important; }
main.post-post .testvinder { margin-top: 0; }
aside.sidebar .overflow-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }

main.post-post .write > h2 { margin-top: var(--space-4); font-size: clamp(2.4rem, 3vw, 3rem); line-height: 1.2; }
main.post-post .write > h3 { margin-top: var(--space-3); font-size: 2.2rem; line-height: 1.25; }
main.post-post .write > h2:first-child,
main.post-post .write > h3:first-child { margin-top: 0; }
main.post-post .write > p, main.post-post .write > ul, main.post-post .write > ol { max-width: 70ch; }
main.post-post .write > p { margin-bottom: var(--space-2); }

/* Links in the brand colour (about 5.3:1 on white) instead of green */
main.post-post .write p a:not([class*="btn"]),
main.post-post .write li a,
main.post-post .pricetag a,
main.post-post aside.sidebar a:not(.fixed):not([class*="btn"]),
main.post-post .pr-row-wrap a.fi-xd,
main.post-post .test-row a:not([class]),
main.post-post .test-row a[class=""] {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main.post-post .write p a:not([class*="btn"]):hover,
main.post-post .write li a:hover,
main.post-post .pricetag a:hover,
main.post-post aside.sidebar a:not(.fixed):hover,
main.post-post .pr-row-wrap a.fi-xd:hover { color: var(--d-link-hover); }
/* On the dark winner card the links use the light brand orange (5:1 on dark brown) */
main.post-post .testvinder a:not([class*="btn"]) { color: var(--d-link-on-dark); }
main.post-post .testvinder a:not([class*="btn"]):hover { color: var(--d-on-dark); }

/* Buttons: orange with dark text; labels may wrap instead of being cut */
main.post-post span.btn,
main.post-post .toc-button { background: var(--d-accent); color: var(--d-ink); font-weight: 700; border-radius: .8rem; }
main.post-post span.btn { white-space: normal; line-height: 1.15; text-align: center; padding-inline: .6rem; font-size: 1.2rem; overflow-wrap: anywhere; }
/* Link buttons: the theme's white text on the accent colour is below 4.5:1; the table-of-contents label and its green text likewise */
main.post-post a.btn { color: var(--d-on-accent); }
main.post-post .write .toc-box strong.tocBefore, .toc-box .tocBefore { color: var(--d-link); }
/* The intro's author link used the theme's bright green (about 2:1 on light backgrounds) */
p.f-3.fX a.d-inline-block { color: var(--d-link); }
main.post-post .toc-button:hover { background: var(--d-link); color: var(--d-on-dark); }
.priceTag { color: var(--d-link) !important; }

/* Detail cards: one calm border instead of the hand-drawn 1/4/5/1px one */
main.post-post .test-row {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow);
}

/* Empty disclaimer frame (design.js hides it when it has no content) */
#disclaimer { border-color: var(--d-line) !important; border-radius: var(--card-radius) !important; }
#disclaimer.is-empty { display: none; }

/* ---- Recommendation badge: a small badge with a star, readable text on the accent colour ---- */
.promotionLine span, .winner__ span { color: var(--d-on-accent) !important; }
/* The theme puts the discount-code and low-stock chips (span.promotion) on a dark background, so they keep light text */
.promotionLine span.promotion { color: var(--d-on-dark) !important; }
main.post-post .testvinder .shape,
main.post-post .bestproducts-wrap .winner__ {
  background-color: var(--d-accent);
  color: var(--d-on-accent);
  border-radius: 99px;
  box-shadow: 0 .3rem 1rem color-mix(in srgb, var(--d-ink) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .35);
  font: 700 1.3rem/1 var(--fw);
  letter-spacing: .02em;
  white-space: nowrap;
}
main.post-post .testvinder .shape::after,
main.post-post .bestproducts-wrap .winner__::before {
  content: "";
  position: absolute; top: 50%; left: 1.1rem; width: 1.3rem; height: 1.3rem; transform: translateY(-50%);
  background: var(--d-on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%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'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
}
main.post-post .testvinder .shape {
  width: auto; height: auto;
  top: var(--space-2); left: auto; right: var(--space-2);
  padding: .7rem 1.4rem .7rem 3.2rem;
  display: flex; align-items: center; justify-content: center;
}
main.post-post .testvinder .shape::before { color: var(--d-on-accent); }
/* The theme sets its own background, radius and padding on the row label, so these need !important */
main.post-post .bestproducts-wrap .winner__ {
  position: relative;
  background: var(--d-accent) !important;
  border-radius: 99px !important;
  padding: .4rem 1rem .4rem 2.6rem !important;
  font-size: 1.1rem;
}
main.post-post .bestproducts-wrap .winner__::before { left: .9rem; width: 1.1rem; height: 1.1rem; }

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

main.post-post .num.lbb { background: var(--d-accent) !important; color: var(--d-ink) !important; border-radius: 50%; }
main.post-post .bestproducts-wrap .num {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  font: 700 1.4rem/1 var(--fw); color: var(--d-ink-soft);
}
main.post-post .bestproducts-wrap .num.lbb { color: var(--d-ink) !important; }
main.post-post .bestproducts-wrap .img, main.post-post .bestproducts-wrap .smAlImg img { width: 5.6rem; }
main.post-post .bestproducts-wrap .smAlImg img { height: 5.6rem; object-fit: contain; }
main.post-post .bestproducts-wrap .descR .overflow-txt { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
main.post-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-post .bestproducts-wrap .cta {
  background: var(--d-chip-bg); border: 0 !important; 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-post .bestproducts-wrap .dealer-btn {
  width: 100%; justify-content: space-between; white-space: nowrap; background: #fff; color: var(--d-ink);
  border: 1px solid var(--d-line) !important; border-radius: .8rem !important;
  padding: .6rem 1.2rem !important; font-size: 1.3rem !important;
}
main.post-post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-accent) !important; }

/* Rows stay one line high on wide screens. The dealer column keeps its 16.4rem: at 14.4rem "* Køb hos" plus the logo is wider than the button, and the logo sticks out of it */
@media (min-width: 992px) {
  main.post-post .bestproducts-wrap .moRinfO { flex-wrap: nowrap; white-space: nowrap; }
  main.post-post .bestproducts-wrap li.bestproducts { padding-inline: var(--space-2); }
  main.post-post .bestproducts-wrap li.bestproducts > .price { width: 8rem; }
}
/* Below 768px the theme hides the dealer button, so the row shows a chevron instead */
@media (max-width: 767px) {
  main.post-post .bestproducts-wrap li.bestproducts::after { content: "\203A"; margin-left: auto; font-size: 2.4rem; line-height: 1; color: var(--d-link); }
}
@media (max-width: 575px) {
  main.post-post .bestproducts-wrap li.bestproducts { padding: 1.2rem var(--space-2); gap: 1.2rem; }
  main.post-post .bestproducts-wrap .num { width: 2.8rem; height: 2.8rem; }
  main.post-post .bestproducts-wrap .img, main.post-post .bestproducts-wrap .smAlImg img { width: 4.8rem; }
  main.post-post .bestproducts-wrap .smAlImg img { height: 4.8rem; }
  main.post-post .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; }
}

/* ---- Site-specific: findformen.dk ---- */
/* The theme gives the winner card and sidebar margin-bottom -100px to match their 100px pull-up, which the base removes; without this the product list overlaps the winner card */
/* "Begrænset lager" sits on a dark pill here; the base's dark-on-accent rule for .promotionLine spans made it invisible, so keep it light */
main.post-post .promotionLine .promotion { color: var(--d-on-dark) !important; }
/* The sidebar card sits 32px lower than its column top (the theme offsets it to line up with the winner card's margin, which the base removes), so pull it back up beside the winner card */
@media (min-width: 1060px) { main.post-post aside.sidebar .sidebar-inner { margin-top: -32px; } }

/* Below 768px the dealer column is hidden: the whole row is the link and shows a chevron */
@media (max-width: 767px) { main.post-post .bestproducts-wrap li.bestproducts > .offer { display: none !important; } }