/* Gavehylden design layer ("tighten, do not redesign"). Loaded after the theme CSS (theme.min.css, responsive.min.css).
   Keeps the theme's fonts, brand colours (navy #0b2d39, orange #faa63f, yellow #ffc107) and layout structure.
   Only the colour tokens below are site specific. Every rule is scoped to a class/id that exists in this theme. */

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

  /* Brand colours (unchanged) */
  --d-navy: #0b2d39;            /* text, dark surfaces (theme --black) */
  --d-orange: #faa63f;          /* buttons, badges, scroll-up (theme --c1-) */
  --d-yellow: #ffc107;          /* primary buttons (theme --c3) */
  --d-peach: #ffd497;           /* soft accent (theme --c1) */

  /* Darkened only as far as AA needs */
  --d-link: #14738d;            /* theme link blue #1b98ba darkened: 4.5:1 on #edecf1 and white */
  --d-link-hover: #0b2d39;
  --d-orange-text: #a45b05;     /* orange text at 4.5:1 on white and #f2f2f2 (small text) */
  --d-orange-large: #cb7006;    /* orange text at 3:1+ on white (large bold text only) */
  --d-green-text: #147d4f;      /* in-stock green, 4.5:1 on white */
  --d-grey-text: #55656b;       /* replaces #888 grey meta text, 5:1 on white */
  --d-footer-link: #9aa8ad;     /* replaces #868686 on navy, 5.9:1 */
  --d-footer-muted: #9aa8ad;
  --d-footer-hover: #ffd497;

  /* Lines and shadows */
  --d-line: rgba(11, 45, 57, .12);
  --d-shadow: 0 .2rem 1.2rem rgba(11, 45, 57, .08);
  --d-shadow-hover: 0 .6rem 2rem rgba(11, 45, 57, .14);
  --d-focus: #0b2d39;
  --d-focus-on-dark: #ffd497;
}

/* ---- Focus: the theme sets outline:0 on buttons and never styles focus ---- */
#wrapper a:focus-visible,
#wrapper [tabindex]:focus-visible,
#wrapper .ms-btn:focus-visible,
#wrapper .c-btn:focus-visible,
#wrapper .searchB:focus-visible,
.mobilmenu-ms a:focus-visible,
.scrollup:focus-visible {
  outline: .3rem solid var(--d-focus) !important;
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* The tile overlay links cover a whole picture, so the ring goes inside */
#wrapper a.fixed:focus-visible { outline-offset: -.6rem; border-radius: 0; }
#ms-fod a:focus-visible { outline: .3rem solid var(--d-focus-on-dark) !important; outline-offset: .2rem; border-radius: .4rem; }

/* ---- Links in running text: brand blue darkened for AA, underlined so colour is not the only cue ---- */
.tekst a:not(.ms-btn):not(.c-btn),
.write a:not(.ms-btn):not(.c-btn),
.tekst a:not(.ms-btn):not(.c-btn):visited,
.write a:not(.ms-btn):not(.c-btn):visited {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: .1rem;
  text-underline-offset: .2em;
}
.tekst a:not(.ms-btn):not(.c-btn):hover,
.write a:not(.ms-btn):not(.c-btn):hover { color: var(--d-link-hover); }
/* The purple home intro has its own white links (theme .bg-purple a) */
.bg-purple .tekst a:not(.ms-btn):not(.c-btn), .bg-purple .tekst a:not(.ms-btn):not(.c-btn):visited,
.bg-purple .tekst a:not(.ms-btn):not(.c-btn):hover { color: #fff; }

/* ---- Header ---- */
/* Hairline under the header instead of the theme's grey band */
#masthead .head.bg-white { border-bottom: 1px solid var(--d-line); }
/* Top menu wrapped onto a second row ("Jul 2024" fell under the others); keep it on one line */
@media (min-width: 768px) {
  #masthead .mainmenu .ms_menu { display: flex; flex-wrap: nowrap; justify-content: center; }
  #masthead .mainmenu .ms_menu > li { float: none; }
  #masthead .mainmenu .ms_menu > li > span > a,
  #masthead .mainmenu .ms_menu > li > a { font-size: 1.8rem; white-space: nowrap; }
  #masthead .mainmenu .ms_menu > li:not(:first-child) { margin-left: 2.4rem; }
  #masthead .mainmenu .ms_menu > li:not(:first-child):before { left: -1.4rem; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #masthead .mainmenu .ms_menu > li > span > a,
  #masthead .mainmenu .ms_menu > li > a { font-size: 1.5rem; }
  #masthead .mainmenu .ms_menu > li:not(:first-child) { margin-left: 1.6rem; }
  #masthead .mainmenu .ms_menu > li:not(:first-child):before { left: -1rem; }
  #masthead .head .logo img { width: 15rem; }
}
/* Dropdown: 12 entries at 25px padding made a 900px tall list; hard offset shadow made soft like the rest of the site */
#masthead .ms_menu li ul { box-shadow: var(--d-shadow-hover); border-radius: 0 0 var(--space-1) var(--space-1); }
#masthead .ms_menu li ul li a { padding: 1.1rem 0; border-top-color: rgba(11, 45, 57, .12); }
/* Phone menu reuses the desktop dropdown rules: it inherited the hard orange offset shadow and centred sub-items under a left-aligned parent */
.mobilmenu-ms .ms_menu li ul { box-shadow: none; }
.mobilmenu-ms .ms_menu li ul li a { text-align: left; padding-left: var(--space-2); }
/* Search button: white on orange was 2:1; navy on orange is 7:1. Hard offset shadow softened. */
#masthead .searchB.btn { color: var(--d-navy); box-shadow: var(--d-shadow); border-radius: .4rem; }
#masthead .searchB.btn:hover { color: #fff; box-shadow: var(--d-shadow-hover); }

/* ---- Buttons: comfortable tap size, no forced 12px text on phones, focus handled above ---- */
.ms-btn, a.ms-btn, .c-btn, a.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.4rem; line-height: 1.2;
  box-shadow: var(--d-shadow);
}
.ms-btn:hover, a.ms-btn:hover, .c-btn:hover, a.c-btn:hover { box-shadow: none; }
@media (max-width: 668px) {
  .ms-btn, a.ms-btn, .c-btn, a.c-btn { font-size: 1.4rem; padding: 1.2rem 2.4rem; }
}
.c-btn.full { display: flex; }

/* Scroll-up button: white chevron on orange was 2:1; soft shadow instead of the hard offset */
.scrollup, a.scrollup { color: var(--d-navy) !important; box-shadow: var(--d-shadow); border-radius: .4rem; }

/* ---- Badges on picture tiles (home) and hero circle ---- */
/* White 11px on the orange gradient was 2:1; navy is 5.6:1 or better */
.cta-small.color-white, .cta-round.color-white { color: var(--d-navy); }
.cta-small { border-radius: .4rem; padding: .5rem 1rem; }
.cta-small.font11 { font-size: 1.2rem; letter-spacing: .04em; }
.cta-small { margin: var(--space-1); }
/* Grey "Kreative gaver til" line above the hero heading was #888 */
.home h1 span, .home h2 span { color: var(--d-grey-text); }

/* ---- Home page ---- */
/* Tile titles were orange on white (2:1); same hue darkened to the 3:1 large-text minimum */
.home .single_post h3 span { color: var(--d-orange-large); }
.home .single_post a.post-content:hover h3 span { color: var(--d-navy); }
.home .single_post > a.overflow, .single_post.news > a.overflow { border-radius: var(--card-radius); }
.home .single_post .post-header { margin-top: 0 !important; margin-bottom: var(--space-1) !important; }
.home article.content { margin-bottom: var(--space-3) !important; }
/* Phone: eight full-width tiles made a 7800px page; two per row */
@media (max-width: 575.98px) {
  #forside article.content { flex: 0 0 50%; max-width: 50%; padding-left: .8rem; padding-right: .8rem; }
  #forside article.content .f-3 { font-size: 1.5rem !important; line-height: 1.25; }
  /* At 15px the title is no longer large text, so it needs the 4.5:1 orange */
  .home .single_post h3 span { color: var(--d-orange-text); }
  #forside .ms_sektion .height400 { min-height: 30rem; }
  #forside .col-md-12 > .row { margin-left: -.8rem; margin-right: -.8rem; }
}
/* The SEO text ran the full 1140px container (about 140 characters per line) */
#forside section.bg-grey .tekst.write { max-width: 84rem; margin-left: auto; margin-right: auto; }
#forside section.bg-grey.py-5 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

/* ---- Category / archive page ---- */
/* Cards sat in a 3/4 column with an empty quarter on the right; use the width and a 3-up grid */
#arkiv section.bg-lightgrey { padding-top: var(--space-3); padding-bottom: var(--space-4); }
#arkiv .col-sm-9 { flex: 0 0 100%; max-width: 100%; }
#arkiv #postrow { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; }
@media (min-width: 576px) { #arkiv #postrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { #arkiv #postrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#arkiv #postrow > article.content { flex: none; width: auto; max-width: none; padding: 0; margin: 0 !important; }
#arkiv .single_post.news {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--d-shadow);
  transition: box-shadow .2s ease-in-out;
}
#arkiv .single_post.news:hover { box-shadow: var(--d-shadow-hover); }
#arkiv .single_post.news > a.overflow { border-radius: 0; }
#arkiv .single_post.news img.ms-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Posts without a featured image print <img src=""> (template issue); hide the broken box so the card starts at the title */
#arkiv .single_post.news img.ms-img[src=""] { display: none; }
/* ...and give those cards a brand-coloured picture area of the same 4:3 size so the grid stays even */
#arkiv .single_post.news > a.overflow:has(img.ms-img[src=""]) { display: block; aspect-ratio: 4 / 3; background: linear-gradient(185deg, var(--d-peach), var(--d-orange)); }
#arkiv .single_post.news .post-content { flex: 1; display: flex; flex-direction: column; margin-top: 0 !important; padding: var(--space-2) var(--space-3) var(--space-3); }
#arkiv .single_post.news h4 { font-size: 2rem; line-height: 1.25; margin: 0 0 var(--space-1) !important; }
#arkiv .single_post.news .post-header { margin-bottom: var(--space-1); }
#arkiv .single_post.news .post-entry { margin: auto 0 0 !important; padding-top: var(--space-1); }
#arkiv .single_post.news .post-entry p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-bottom: var(--space-2); font-size: 1.5rem; line-height: 1.55;
}

@media (max-width: 575.98px) { #arkiv .single_post.news > a.overflow:has(img.ms-img[src=""]) { aspect-ratio: 5 / 2; } }

/* ---- Article page ---- */
/* Theme puts a 5px grey border on top of the article section (border-bold) */
main#pager > section.border-bold { border-width: 0 !important; border-top: 1px solid var(--d-line) !important; }
@media (min-width: 576px) { main#pager > section.mai-n { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; } }
main#pager > section.mai-n > .container > .row > div > .ms_sektion.bg-white { border-radius: var(--card-radius); box-shadow: var(--d-shadow); }
.subheader-img { border-radius: var(--card-radius); }
@media (max-width: 679px) {
  .subheader-img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; padding-top: 0 !important; }
  /* mt-5 above the picture left a 90px white gap at the top of the card on phones */
  main#pager section.section.col-12.mt-5 { margin-top: var(--space-2) !important; }
}
/* Orange 12px breadcrumb was 2:1 */
.breadcrumbs.f-5 { font-size: 1.3rem !important; }
.breadcrumbs .breadcrumb_cco, .breadcrumbs a.breadcrumb_cco, .breadcrumbs .breadcrumb_cco.n1:after { color: var(--d-orange-text); }
/* Hero title: 40px/34px wrapped to three or four lines */
.intro-name h1.f-0 { font-size: clamp(2.8rem, 2.2vw + 1.6rem, 3.6rem) !important; line-height: 1.15; }
.write.tekst h2:first-of-type { font-size: 2.5rem; line-height: 1.25; }
@media (max-width: 650px) { .write.tekst h2:first-of-type { font-size: 2.3rem; } }
.write.tekst h2, .write.tekst h3 { line-height: 1.25; }

/* Top-10 list */
.bestproducts-wrap h2.f-0 { font-size: 3.6rem !important; line-height: 1.1; }
.bestproducts-wrap span.like { width: 4.4rem; height: 4.4rem; background-size: contain; background-repeat: no-repeat; vertical-align: middle; }
@media (max-width: 680px) {
  .bestproducts-wrap h2.f-0 { font-size: 3rem !important; }
  .bestproducts-wrap span.like { width: 4rem; height: 4rem; margin-bottom: var(--space-1); }
}
.bestproducts-row .bestproducts { border: 1px solid var(--d-line); box-shadow: var(--d-shadow) !important; border-radius: var(--card-radius) !important; margin-bottom: var(--space-2) !important; }
.bestproducts-row .bestproducts:hover { box-shadow: var(--d-shadow-hover) !important; }
@media (min-width: 576px) {
  /* A long price ("3.000 kr.") wrapped a row onto two lines and broke its alignment */
  .bestproducts-row .bestproducts { flex-wrap: nowrap; margin-bottom: var(--space-1) !important; }
  /* The price is repeated in the right column at this width; drop the small duplicate under the title */
  .bestproducts-row .bestproducts .col-txt p.f-5 > span.mr-1 { display: none; }
  .bestproducts-row .bestproducts > .col.fb, .bestproducts-row .bestproducts > .col-sm.fb { flex: 0 0 9rem; max-width: 9rem; white-space: nowrap; padding-left: 0; padding-right: 1.2rem; }
}
/* recommendation is white text meant for the medal image; it spilled out of the row (23px sideways scroll on phones) */
.bestproducts .winner__ > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Stock text: #20cc82 green on white was 2:1 */
.stockStatus.in-stock { color: var(--d-green-text); font-weight: 600; }
/* Detail listing under the top-10 */
h2.gTitle { text-shadow: none; margin-top: var(--space-4); margin-bottom: var(--space-3) !important; line-height: 1.2; }
/* The "48" in yellow on white was 1.6:1; keep the yellow as a highlight behind navy text */
h2.gTitle .c-suc { color: var(--d-navy); background: var(--d-yellow); border-radius: .6rem; padding: 0 .6rem; }
.gave-ide .gInner { padding: var(--space-3) 0; border-bottom: 1px solid var(--d-line); }
/* Hover zoom shifted the whole block and its neighbours; keep the soft shadow only */
.gave-ide:hover .gInner { transform: none; box-shadow: var(--d-shadow-hover) !important; }
.gave-ide .gName { font-size: clamp(2rem, 1.4vw + 1.4rem, 2.6rem); }

/* ---- Footer ---- */
#ms-fod .footer_menu li a { color: var(--d-footer-link); }
#ms-fod .footer_menu li a:hover { color: var(--d-footer-hover); }
#ms-fod .color-grey, #ms-fod .ms-revoke .color-grey { color: var(--d-footer-muted); }
#ms-fod .ms-revoke a, #ms-fod .ms-revoke a.color-white { color: var(--d-footer-link) !important; }
#ms-fod .ms-revoke a:hover { color: var(--d-footer-hover) !important; }
#ms-fod .fod-midt .row.py-4 { padding-bottom: var(--space-3) !important; }
#ms-fod .fod-midt .row.mt-5 { margin-top: var(--space-2) !important; padding-bottom: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--space-2); }
@media (max-width: 767.98px) { #ms-fod .fod-midt .col-6 { margin-bottom: var(--space-3) !important; } }

@media (prefers-reduced-motion: reduce) {
  .ms-img, .bestproducts, .gave-ide .gInner, .ms-btn, .c-btn, .dealer-btn, .scrollup, #arkiv .single_post.news { transition: none !important; }
  .ms-img:hover, .ms-btn:hover, .c-btn:hover, .bestproducts:hover .dealer-btn { transform: none !important; }
}