/* 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 (the site's --black) */
  --d-ink-soft: #5f5a5a;       /* secondary text */
  --d-line: rgba(47, 43, 43, .14);
  --d-shadow: 0 .2rem 1.2rem rgba(47, 43, 43, .08);
  --d-page: #fff;              /* page background */
  --d-accent: #00c598;         /* buttons, badges, rank discs (the site's mint green button colour) */
  --d-on-accent: #2f2b2b;      /* text on the accent colour, 6.3:1 (white would only give 2.2:1) */
  --d-on-dark: #fff;           /* text on the ink colour */
  --d-accent-tint: #e6f7f2;    /* winner row background */
  --d-chip-bg: #d3f1e8;        /* small label chips */
  --d-link: #007a5e;           /* links on white, at least 4.5:1 */
  --d-link-hover: #00594a;
  --d-link-on-dark: #00c598;   /* links on the ink colour */
  --d-footer-bg: #4b4a54;      /* the site's grey footer (--c2) */
  --d-footer-link: #e6ecee;
  --d-footer-hover: #ffffff;   /* 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: kitchy.dk / kitchyy.se (same theme, same file) ---- */
/* The footer here is .bg2, not .bg3 as in the base */
footer#footer.bg2 { background: var(--d-footer-bg); }
/* The home card list lives in a .bg-wh section here, so the base two-column grid selector does not match */
@media (min-width: 768px) {
  main#page > section.sect.bg-wh .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.bg-wh .col-sm-7 > h3 { grid-column: 1 / -1; }
}
/* With the popular strip hidden the cards would touch the header */
@media (min-width: 1024px) { main#page > section.sect.bg-wh { padding-top: var(--space-3); } }
/* The card image has a hover transform that paints over the badge, so lift the badge; the light hairline keeps it visible on dark photos */
.bbl { z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
/* The "visninger" counts use the pale blue-grey --c3 (2.8:1 on white), so darken them */
.card__element p.f-5 span.c3 { color: #4a6a75; }
/* The "Spar 20%" label has a dark theme background, but the base forces dark text on every .promotionLine span */
main.post-post .bestproducts-wrap .promotionLine .discountPercent { color: var(--d-on-dark) !important; background: var(--d-ink); border-radius: 99px; padding: .4rem 1rem; font-size: 1.1rem; font-weight: 700; }
/* The theme makes the first row 3.2rem wider and shifts it sideways, which pushed its price outside the clipped card */
main.post-post .bestproducts-wrap li.bestproducts:first-of-type { left: 0; right: auto; width: auto; }
/* The theme paints the badges with a cyan gradient that differs from the button green */
main.post-post .testvinder .shape { background-image: none; }
/* The coral "Oversigt" eyebrow is only 2.9:1 on the light box */
main.post-post .bestproducts-wrap h2.heaDer::before { color: var(--d-link); }
/* The link-style buttons (a.btn) keep the theme's white text on the light green, only 2.2:1 */
main.post-post a.btn, main.archive a.btn { color: var(--d-on-accent); font-weight: 700; }
/* The author name link uses the light --c5 green (2.1:1 on the box) */
main.post-post aside.author a { color: var(--d-link); }
/* On articles without a winner card the intro sits in a grey .bg2 box, but the text stays dark on it (1.6:1) */
main.post-post .pu-ux.bg2 p, main.post-post .pu-ux.bg2 a:not([class*="btn"]) { color: var(--d-on-dark); }
/* On phones the theme runs the review text edge to edge without a frame; its -3.2rem side margins overshoot the 2.4rem page gutter by 8px (horizontal scroll, also present before the layer), so match the gutter and drop the base card frame to keep the text column wide */
@media (max-width: 767px) {
  main.post-post .test-row { margin-left: -2.4rem; margin-right: -2.4rem; padding-inline: 2.4rem; border: 0; border-bottom: 1px solid var(--d-line); border-radius: 0; box-shadow: none; }
}
/* kitchyy.se renders the "most read" heading empty, which leaves a blank gap at the top of the box */
h2.titLe:empty { display: none; }

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