/* 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: #2f2b2b;            /* text and dark surfaces */
  --d-ink-soft: #5f5757;       /* secondary text */
  --d-line: rgba(47, 43, 43, .14);
  --d-shadow: 0 .2rem 1.2rem rgba(47, 43, 43, .08);
  --d-page: #ffffff;           /* page background */
  --d-accent: #00c598;         /* buttons, badges, rank discs */
  --d-on-accent: #2f2b2b;      /* text on the accent colour */
  --d-on-dark: #ffffff;        /* text on the ink colour */
  --d-accent-tint: #e6faf5;    /* winner row background */
  --d-chip-bg: #c9f2e6;        /* small label chips */
  --d-link: #2039d8;           /* links on white, at least 4.5:1 */
  --d-link-hover: #14237f;
  --d-link-on-dark: #7f95ff;   /* links on the ink colour */
  --d-footer-bg: #2f2b2b;
  --d-footer-link: #ebf6f6;
  --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-focus);   /* 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: babyhelp.dk ---- */
/* The theme widens the first row (left/right offsets, width +3.2rem, border), which the clipped list card would cut off */
main.post-post .bestproducts-wrap li.bestproducts:first-of-type { left: 0; right: 0; width: auto; }
/* The winner box is light tan here, so its links need the normal dark link colour, not the on-dark one */
main.post-post .testvinder a:not([class*="btn"]) { color: var(--d-link); }
main.post-post .testvinder a:not([class*="btn"]):hover { color: var(--d-link-hover); }
/* Keep the site's blue recommendation badge (white on #2742f5, 6.6:1); the theme's gradient would sit under dark text */
main.post-post .testvinder .shape,
main.post-post .bestproducts-wrap .winner__ { background: #2742f5 !important; color: #fff; }
.promotionLine span, .winner__ span, main.post-post .testvinder .shape::before { color: #fff !important; }
main.post-post .testvinder .shape::after,
main.post-post .bestproducts-wrap .winner__::before { background: #fff; }
/* The page background is white here, so the row hover uses the accent tint to stay visible */
main.post-post .bestproducts-wrap li.bestproducts:hover { background: var(--d-accent-tint); }
/* Theme green (#00c598) is 1.9:1 on white; run-in links on the front page and archives use the brand link colour */
main#page .tJ a, main#page .write a:not([class*="btn"]), main.archive .write a:not([class*="btn"]) { color: var(--d-link); text-decoration: underline; text-underline-offset: .18em; }
/* The front page feed lives in section.bg-wh > .col-sm-7.col-md-8 here, not in the section the base targets; give it the same two-column grid */
@media (min-width: 768px) {
  main#page .row > .col-sm-7.col-md-8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); align-content: start; }
  main#page .row > .col-sm-7.col-md-8 > h3 { grid-column: 1 / -1; }
}
/* Front page intro: the theme's mauve (#a0829b, 3.1:1 on pink) and justified text are hard to read */
main#page .tJ, main#page .tJ p { color: var(--d-ink-soft); text-align: left; }
/* All green link buttons (winner box, product cards, pagination): theme has white on #00c598 (2.1:1); use dark text like the other buttons */
main a.btn { color: var(--d-on-accent) !important; font-weight: 700; }
/* Author box link is theme green on pale teal (2:1) */
main aside.author a { color: var(--d-link); text-decoration: underline; text-underline-offset: .18em; }
/* Top-5 carousel cards are narrow on phones: keep the pill button on one line instead of the base's wrapping label */
main.post-post .top5Prodct span.btn { white-space: nowrap; overflow-wrap: normal; padding-inline: 1.2rem; border-radius: 99px; }

/* 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; } }