/* byg-selv.info design layer: tightens the bygselv theme without redesigning it.
   Loaded after the theme CSS. NOTE: the plugin injects <style id="prInFooter"> after <main>, i.e. later in the DOM than this file,
   so rules that fight it are prefixed with main.post-post (or use !important where the plugin does). */

/* ---- Tokens (colours reuse the theme palette; only the -aa shades are darkened, just far enough for WCAG AA) ---- */
:root {
  --d-space-1: .8rem;
  --d-space-2: 1.6rem;
  --d-space-3: 2.4rem;
  --d-space-4: 4rem;
  --d-radius: 1.6rem;

  --d-ink: #29100A;              /* theme --black: text, dark surfaces */
  --d-ink-soft: #4E4545;         /* theme --gray-dark: secondary text (8:1 on the light surfaces) */
  --d-page: #f2faff;             /* theme --c4: page background */
  --d-card: #fff;
  --d-line: rgba(41, 16, 10, .12);
  --d-line-on-dark: rgba(255, 255, 255, .18);
  --d-shadow: 0 .2rem 1rem rgba(41, 16, 10, .07);

  --d-brand: #E85738;            /* theme --c1: fills, focus ring, large decorative text on dark */
  --d-brand-big: #D9481F;        /* --c1 darkened to 3.3:1 on the grey card: large headings on light surfaces */
  --d-brand-aa: #C33517;         /* --c1 darkened to 4.5:1 on white/grey/blue-white: small text, links, fills under white text */
  --d-brand-deep: #7E0000;       /* theme --c1--: hover, gradient end */
  --d-tint: #fdf1ed;             /* faint brand tint for the winner row */
  --d-green-aa: #48734C;         /* theme --success #629D68 darkened to 5.4:1 under white text */
  --d-green-hover: #375A3B;      /* hover for green buttons (the theme hover is light teal, 2:1 with white text) */
  --d-hero-fallback: #5e2d22;    /* theme --c3: solid colour under hero photos (also what contrast tools see behind white hero text) */
}

/* ---- Global: focus, links ---- */
/* Visible keyboard focus in the brand colour (works on light and dark surfaces); the theme sets outline:0 on .btn */
#masthead a:focus-visible, #masthead button:focus-visible, #masthead input:focus-visible,
main a:focus-visible, main .btn:focus-visible, main button:focus-visible, footer#footer a:focus-visible {
  outline: .3rem solid var(--d-brand);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* Footer links stay white; only their hover gets the brand colour */
footer#footer a.mn-el:hover { color: var(--d-brand); }

/* ---- Buttons: green and brand buttons get AA contrast under white text ---- */
main .btn, main a.btn { background: var(--d-green-aa); }
main .btn:hover, main a.btn:hover, main .bestproducts:hover .btn, main .pr-row:hover .btn { background: var(--d-green-hover); color: #fff; }
main .btn.bg, main a.btn.bg { background: var(--d-brand-aa); }
main .btn.bg:hover, main a.btn.bg:hover { background: var(--d-ink); }
.toc_box .toc_button { background: var(--d-green-aa); border-radius: .8rem; }
.toc_box .toc_button:hover { background: var(--d-green-hover); }
/* Floating "Huskeseddel" pill on phones */
.nav-btn-mob.mee- { background: var(--d-brand-aa); color: #fff; }

/* ---- Orange text on light surfaces (theme .c1 = #E85738 is only 2.9-3.6:1 there) ---- */
section.bg4 .c1, .bg-grey .c1, .bg-wh .c1, .recap-products .c1, .archive .c1 { color: var(--d-brand-aa); }
section.bg4 h1.c1, .bg-grey h1.c1, section.bg4 .f-0.c1, .bg-grey .f-0.c1 { color: var(--d-brand-big); }
/* ...but never on the dark brown price strip, where the theme colour already passes */
section.bg3 .c1 { color: var(--d-brand); }
section.bg3 .bg-wh .c1 { color: var(--d-brand-aa); }
/* "main" in front lifts these above the plugin rule .pricetag a { color: --c1 }, which is printed later in the page */
main .pricetag a, .test-row .highlights a:not(.btn):not(.black), .write a:not(.btn):not(.black), .huskeliste li a { color: var(--d-brand-aa); }
main .pricetag a:hover, .test-row .highlights a:not(.btn):not(.black):hover, .write a:not(.btn):not(.black):hover, .huskeliste li a:hover { color: var(--d-brand-deep); }
.testvinder .pricetag a { color: var(--d-brand); }
.testvinder .pricetag a:hover { color: #fff; }
/* Body links: brand colour with an underline instead of Bootstrap blue (#007bff is 4:1 on the page background) */
.write p a, .write li a { text-decoration: underline; text-decoration-thickness: .1rem; text-underline-offset: .18em; }
.write a.black, .toc_box a.black { color: var(--d-ink); }
.priceTag, .top5row .proDctsRoW .top5Prodct .priceTag { color: var(--d-brand-aa) !important; }

/* ---- Cards: news cards on home and archive ---- */
/* Equal-height cards with the same 4:3 picture so a row of cards ends on one line */
.block-news > .sect { display: flex; flex-direction: column; height: 100%; border-radius: var(--d-radius); overflow: hidden; box-shadow: var(--d-shadow) !important; }
/* !important: the theme puts .h-100 (height and min-height 100% !important) on picture and img, which pushed the caption out of the card */
.block-news picture { flex: none; height: auto !important; min-height: 0 !important; }
.block-news picture img { aspect-ratio: 4 / 3; object-fit: cover; height: auto !important; min-height: 0 !important; }
.block-news .caption { flex: 1 1 auto; padding: var(--d-space-2) !important; }
.block-news .caption h4 { line-height: 1.3; }
/* Hover lift of 1.6rem is jumpy; keep it subtle */
.thumb-hover:hover .h-ll { transform: translateY(-.4rem); }
.block-news, .block-news-archive { margin-bottom: var(--d-space-3) !important; }
/* Tall feature cards on the home page get the same radius and shadow as the news cards */
.block-main { border-radius: var(--d-radius); overflow: hidden; box-shadow: var(--d-shadow) !important; margin-bottom: var(--d-space-3) !important; }

/* ---- Home ---- */
/* Shorter video hero so the intro card and the first articles come higher up */
@media (min-width: 720px) { main#page .hero-img { max-height: 36rem; } }
@media (max-width: 719px) { main#page .hero-img { height: 26rem; max-height: 26rem; } }
main#page .hero { background: var(--d-hero-fallback); }
/* The intro card holds two h1s; the second one (the actual title) is scaled down to a heading rhythm */
main#page .pu-ux .c-mg h1 { font-size: clamp(2.4rem, 3vw, 3.2rem); line-height: 1.2; margin: 0 0 var(--d-space-2); color: var(--d-ink-soft); }
main#page .pu-ux h1.f-0 { margin-bottom: var(--d-space-1); }
main#page .pu-ux { border-radius: var(--d-radius); }
main#page .pu-ux p { line-height: 1.7; }
/* Popular list: hairline dividers instead of stacked tight gaps */
.recap-products { border-radius: var(--d-radius); }
.recap-products article.block-split { margin-bottom: 0 !important; padding: var(--d-space-1) 0; border-bottom: 1px solid var(--d-line); }
.recap-products article.block-split:last-child { border-bottom: 0; }
/* Sections above the footer had 8rem padding plus 4rem container padding, leaving a large empty band */
main#page section.sect.py-6.bg4 { padding-block: var(--d-space-4); }
main#page section.sect.py-6.bg4 .container.pb-4 { padding-bottom: 0 !important; }
/* Price-strip cards: the theme renders an empty image slot and an empty paragraph (no product data), so collapse them */
.SwiperCards .caption > div:empty, .SwiperCards .caption p:empty { display: none; }
.SwiperCards .caption { border-radius: var(--d-radius); }
.SwiperCards .caption h3 { margin-top: var(--d-space-2) !important; }

/* ---- Category / archive ---- */
/* The archive title is white (c-wh) on the white page = invisible; give it the dark hero colour like the other pages */
main.archive .archive-header { background: var(--d-hero-fallback); margin-top: var(--d-space-2); padding: var(--d-space-3) var(--d-space-3) !important; border-radius: var(--d-radius); }
main.archive .archive-header h1 { color: #fff; }
/* Below 980px the theme header is absolutely positioned (86px, 53px on phones), so the title band has to start under it */
@media (max-width: 979px) { main.archive .archive-header { margin-top: 10.2rem; } }
@media (max-width: 699px) { main.archive .archive-header { margin-top: 7rem; } }
main.archive #element-list { margin-top: var(--d-space-3) !important; margin-bottom: var(--d-space-3) !important; }
main.archive .sektion { margin-top: 0 !important; margin-bottom: var(--d-space-4) !important; }

/* ---- Article: hero ---- */
/* Solid fallback under the hero photo (the photo and the overlay still cover it) */
main.post-post .sub-hero, main.post-post .sub-hero-- { background: var(--d-hero-fallback); }
main.post-post .sub-hero h1.f-u { line-height: 1.15; }
main.post-post .sub-hero p.f-3 { max-width: 100ch; line-height: 1.6; }
@media (max-width: 680px) {
  main.post-post h1.f-u { font-size: 2.6rem; line-height: 1.2; }
  main.post-post .sub-hero p.f-3 { font-size: 1.5rem; }
}
/* Photo band above the title card of articles without an intro hero: shorter, the card overlaps it anyway (theme: up to 100vh - 28rem) */
@media (min-width: 720px) { main.post-post .sub-hero-- { max-height: 32rem; } }
@media (max-width: 719px) { main.post-post .sub-hero-- { height: 24rem; max-height: 24rem; } }
/* Author avatar of a post without an author is a broken gravatar image (its alt text is a single space) */
main.post-post .auhtor img.user_image[alt=" "] { display: none; }
/* Title card of articles without a hero photo */
main.post-post .pu-ux.bg-grey { border-radius: var(--d-radius); }
main.post-post .pu-ux h1.f-u { color: var(--d-brand-big); }
main.post-post .pu-ux p.f-3 { line-height: 1.6; }
/* Foldable intro (design.js adds the toggle) */
main.post-post p.f-3.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.intro-toggle {
  appearance: none; background: none; border: 0; padding: .4rem 0; margin: 0 0 var(--d-space-1);
  font: 700 1.5rem/1 var(--fw); color: #fff; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .1rem;
}
.pu-ux .intro-toggle { color: var(--d-brand-aa); }
.intro-toggle:hover { text-decoration-thickness: .2rem; }
/* Empty disclaimer frame (design.js marks it when it has no content) */
#disclaimer.is-empty { display: none; }

/* ---- Article: body ---- */
main.post-post .write { line-height: 1.7; }
main.post-post .write > p, main.post-post .write > ul, main.post-post .write > ol { margin-bottom: var(--d-space-2); }
main.post-post .write > h2 { margin-top: var(--d-space-4); margin-bottom: var(--d-space-2); line-height: 1.2; }
main.post-post .write > h3 { margin-top: var(--d-space-3); line-height: 1.25; }
main.post-post .write > h2:first-child, main.post-post .write > h3:first-child { margin-top: 0; }

/* ---- Winner card ("Vores anbefaling") ---- */
/* One quiet hairline instead of the red 1px frame */
main.post-post .testvinder { border: 1px solid var(--d-line-on-dark); border-radius: var(--d-radius); }
main.post-post .testvinder .row { border-radius: var(--d-radius); }
/* Round #1 stamp (white text on a 3.4:1 gradient) becomes a small pill on a darker brand gradient */
main.post-post .testvinder .shape {
  width: auto; height: auto; top: var(--d-space-2); right: var(--d-space-2);
  padding: .7rem 1.4rem; border-radius: 99px;
  background: linear-gradient(180deg, var(--d-brand-aa), var(--d-brand-deep));
  color: #fff; font-size: 1.3rem !important; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
main.post-post .testvinder .colImg { padding: var(--d-space-3); }
main.post-post .testvinder .conTnt { padding-block: var(--d-space-3) !important; }
main.post-post .testvinder .btn { background: var(--d-green-aa); }
main.post-post .testvinder .btn:hover { background: var(--d-green-hover); }
@media (max-width: 767px) {
  main.post-post .testvinder .colImg { padding: var(--d-space-2); }
  main.post-post .testvinder .colImg img { max-height: 22rem; width: auto; margin-inline: auto; }
  main.post-post .testvinder .shape { top: var(--d-space-1); right: var(--d-space-1); }
}

/* ---- Product overview: one card with hairline dividers instead of separate floating rows ---- */
main.post-post .bestproducts-wrap {
  background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); box-shadow: var(--d-shadow);
  padding: var(--d-space-3) 0 var(--d-space-1);
}
main.post-post .bestproducts-wrap .heaDer { margin-bottom: var(--d-space-3); color: var(--d-ink); }
main.post-post .bestproducts-wrap .heaDer:before { color: var(--d-brand-aa); }
main.post-post .bestproducts-wrap ul.bestproducts-row { margin: 0; border-top: 1px solid var(--d-line); }
main.post-post .bestproducts-wrap li.bestproducts {
  margin: 0 !important; padding: 1rem 0; border: 0 !important; border-bottom: 1px solid var(--d-line) !important;
  border-radius: 0; box-shadow: none !important; background: transparent;
}
main.post-post .bestproducts-wrap li.bestproducts:hover { background: var(--d-page); box-shadow: none !important; }
main.post-post .bestproducts-wrap li.bestproducts:first-of-type { background: var(--d-tint); box-shadow: inset .4rem 0 0 var(--d-brand) !important; }
main.post-post .bestproducts-wrap li.bestproducts:first-of-type:hover { background: var(--d-tint); }
main.post-post .bestproducts-wrap .bestproducts .smAlImg img { width: 4.8rem; height: 4.8rem; object-fit: contain; }
/* Rank discs: solid brand-aa disc with white number instead of the coral medal (white on #FD6363 is 2.9:1) */
main.post-post li.bestproducts .num { width: 3.2rem; height: 3.2rem; border-radius: 50%; font-size: 1.4rem; color: var(--d-ink-soft); }
main.post-post li.bestproducts .num.lbb { background: var(--d-brand-aa); color: #fff; }
/* recommendation label: readable pill straddling the top edge of the winner row */
main.post-post .bestproducts-wrap .bestproducts .promotionLine .winner__ {
  background: var(--d-brand-aa); color: #fff; border-radius: 99px !important; padding: .3rem 1rem .4rem; font-size: 1.2rem; font-weight: 700;
}
main.post-post .bestproducts-wrap .bestproducts:first-of-type .promotionLine { right: var(--d-space-3); top: -.9rem; }
/* Dealer pill: hairline outline instead of the 3px green ring */
main.post-post .bestproducts .dealer-btn { border: .1rem solid var(--d-line) !important; color: var(--d-ink); }
main.post-post .bestproducts:hover .dealer-btn { border-color: var(--d-green-aa) !important; }
main.post-post .bestproducts-wrap i { color: var(--d-ink-soft); padding: var(--d-space-1) var(--d-space-2) 0; }
/* Phones hide the dealer button; a chevron shows that the whole row is a link */
@media (max-width: 767px) {
  main.post-post .bestproducts-wrap li.bestproducts { padding-right: 3.2rem; }
  main.post-post .bestproducts-wrap li.bestproducts::after { content: "\203A"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; line-height: 1; color: var(--d-brand-aa); }
}

/* ---- Product detail blocks ---- */
main.post-post .test-row { margin-top: var(--d-space-3); margin-bottom: var(--d-space-4); padding-block: var(--d-space-3); }
main.post-post .test-row .hLTl { color: var(--d-brand-big); }
main.post-post .test-row .titLe { color: var(--d-brand-big); }
main.post-post .test-row .buyNow .btn, main.post-post .test-row .btn.fb { background: var(--d-green-aa); }
main.post-post .test-row .btn.fb:hover { background: var(--d-green-hover); }
main.post-post .test-row .rou-nd.shadow { box-shadow: none !important; border: 1px solid var(--d-line); }
/* Phones: the image and highlights columns had 4rem padding on every side and a 3.2rem title */
@media (max-width: 767px) {
  main.post-post .test-row h3.titLe { font-size: 2.4rem; line-height: 1.2; }
  main.post-post .test-row .row > .bg-grey { padding: var(--d-space-2) !important; }
  main.post-post .test-row .bIgImg img { padding: var(--d-space-1); }
}

/* ---- also-available-at: one compact card, one line per shop (was a shadowed pill plus a full-width green bar per shop) ---- */
main.post-post .test-row .pr-tabel { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: var(--d-space-2) var(--d-space-2) var(--d-space-1); }
/* !important: the theme sets .f-2 sizes with !important at some breakpoints */
main.post-post .test-row .pr-tabel .tbTitLe { font-size: 2.2rem !important; line-height: 1.25; }
main.post-post .test-row .pr-tabel .tbTitLe + i { color: var(--d-ink-soft); }
main.post-post .test-row .pr-tabel .pr-row-wrap { margin: 0 !important; border-top: 1px solid var(--d-line); }
main.post-post .test-row .pr-tabel .pr-row-wrap:first-of-type { margin-top: var(--d-space-1) !important; }
main.post-post .test-row .pr-tabel .pr-row {
  display: grid; align-items: center; column-gap: var(--d-space-2); row-gap: .4rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo name name name" "stock stock price btn";
  box-shadow: none !important; border-radius: 0; padding: 1rem 0 !important;
}
main.post-post .test-row .pr-tabel .pr-row > * { width: auto; padding: 0; order: 0 !important; text-align: left; }
main.post-post .test-row .pr-tabel .stoCk { white-space: nowrap; }
main.post-post .test-row .pr-tabel .naMe { grid-area: name; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; }
main.post-post .test-row .pr-tabel .loGo { grid-area: logo; }
main.post-post .test-row .pr-tabel .loGo img { max-height: 2rem; max-width: 6.4rem; width: auto; }
main.post-post .test-row .pr-tabel .stoCk { grid-area: stock; }
main.post-post .test-row .pr-tabel .priCe { grid-area: price; text-align: right; font-size: 1.6rem; }
main.post-post .test-row .pr-tabel .offer-btn { grid-area: btn; margin: 0; }
main.post-post .test-row .pr-tabel .offer-btn .btn { padding: .5rem 1.2rem; font-size: 1.2rem; width: auto !important; white-space: nowrap; }
main.post-post .test-row .pr-tabel .pr-row-wrap:hover .pr-row { background: var(--d-page); }
@media (min-width: 768px) {
  main.post-post .test-row .pr-tabel .pr-row { grid-template-columns: 9.6rem minmax(0, 1fr) 10rem 8.4rem 10rem; grid-template-areas: "logo name stock price btn"; }
  main.post-post .test-row .pr-tabel .naMe { -webkit-line-clamp: 1; }
  main.post-post .test-row .pr-tabel .offer-btn .btn { display: block; width: 100% !important; text-align: center; }
}

/* ---- Sidebar popular-products ---- */
aside.sidebar .recap-products { box-shadow: var(--d-shadow); }
aside.sidebar .recap-products h4 { font-size: 1.4rem; line-height: 1.3; }
aside.sidebar .recap-products .rela-ti { margin-bottom: var(--d-space-1) !important; padding-bottom: var(--d-space-1); border-bottom: 1px solid var(--d-line); }
aside.sidebar .recap-products .rela-ti:last-child { border-bottom: 0; }