/* Sitewide white header (header.php): logo, categories, then icon-only search, account and cart.
   The search field opens behind the search icon (header-light.js); search.js handles suggestions. */
/* Header */
.site-header.lh {background:#fff;color:var(--ink);border-bottom:1px solid #e6eaee;}
/* Above page content that has its own layers (e.g. the gallery zoom button, z-index 99), so the search sheet,
   suggestions, mobile menu and dimmed background cover it. Still below the full-screen image viewer (PhotoSwipe). */
body .site-header.lh {z-index:200;}
.lh-page .search-backdrop {z-index:150;}
.lh-bar {display:flex;align-items:center;gap:48px;min-height:80px;}
.lh .brand-logo {width:176px;}
body .site-header.lh a {color:var(--ink);}
.lh-nav.primary-nav {display:flex;align-items:center;gap:32px;flex:1;min-width:0;border:0;font-size:15px;font-weight:600;}
.lh-nav a {padding:10px 0;text-decoration:none;white-space:nowrap;}
.lh-nav a:hover {text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:9px;}
.lh-actions.header-actions {display:flex;align-items:center;gap:4px;margin-left:auto;}
.lh .lh-icon, .lh .rt-header-cart {display:grid;place-items:center;width:46px;height:46px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s;}
@media (hover:hover) {.lh .lh-icon:hover, .lh .rt-header-cart:hover {background:#ebebeb;text-decoration:none;} .lh .lh-search-toggle:hover {background:#005694;}}
.lh .lh-icon svg, .lh .rt-header-cart svg {width:24px;height:24px;}
.lh .rt-header-cart > span {display:none;}
.lh .rt-cart-count {box-shadow:0 0 0 2px #fff;}
.lh .menu-toggle {display:none;}
.lh :focus-visible {outline:2px solid var(--ink);outline-offset:2px;}

/* Search: the one accented action in the header. */
.lh .lh-search-toggle {margin-right:6px;background:var(--green);}
/* Icon swap (search ↔ close, menu ↔ close): the two icons share one cell and turn into each other. */
.lh .lh-icon > svg {grid-area:1/1;transition:opacity .18s ease,transform .32s cubic-bezier(.2,.8,.2,1);}
.lh .lh-icon > .lh-close {opacity:0;transform:rotate(-90deg) scale(.6);}
.lh .lh-icon[aria-expanded="true"] > svg:first-child {opacity:0;transform:rotate(90deg) scale(.6);}
.lh .lh-icon[aria-expanded="true"] > .lh-close {opacity:1;transform:none;}
.lh-search {position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #e6eaee;box-shadow:0 24px 40px -28px rgba(16,46,60,.45);padding:20px 0 24px;}
.lh-search[hidden] {display:none;}
.lh-search .search-shell {max-width:780px;margin:0 auto;}
.lh-search .site-search input {height:60px;padding:0 64px 0 28px;border-radius:99px;background:#f0f0f0;border:1px solid #e1e8e4;font-size:17px;}
.lh-search .site-search input::placeholder {color:#6a7a8c;}
.lh-search .site-search input:focus {outline:0;background:#fff;border-color:var(--ink);}
.lh-search .site-search button {top:8px;right:8px;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;}
body .lh-search .site-search button {background:var(--ink);color:#fff;padding:0;}
.lh-search .site-search button svg {width:20px;height:20px;}

/* Tablet and mobile: menu and search left, logo centred, account and cart right. */
@media (max-width:1000px) {
 .lh-bar {display:grid;grid-template-columns:repeat(2,44px) 1fr repeat(2,44px);gap:4px;min-height:64px;padding:0;}
 .lh .menu-toggle {display:grid;grid-column:1;grid-row:1;width:44px;height:44px;color:var(--ink);background:transparent;}
 body .site-header.lh .menu-toggle {color:var(--ink);}
 .lh-actions.header-actions {display:contents;}
 .lh .lh-search-toggle {grid-column:2;grid-row:1;width:44px;height:44px;margin:0;background:transparent;}
 .lh .lh-search-toggle::before {content:"";grid-area:1/1;width:40px;height:40px;border-radius:50%;background:#ebebeb;transition:background-color .15s;}
 .lh .lh-search-toggle > svg {width:21px;height:21px;}
 .lh .brand {grid-column:3;grid-row:1;justify-self:center;}
 .lh .brand-logo {width:150px;}
 .lh .lh-account {grid-column:4;grid-row:1;width:44px;height:44px;}
 .lh .rt-header-cart {grid-column:5;grid-row:1;width:44px;height:44px;}
 .lh .lh-icon svg, .lh .rt-header-cart svg {width:23px;height:23px;}
 .lh-nav.primary-nav {display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;background:#fff;border-bottom:1px solid #e6eaee;box-shadow:0 24px 40px -28px rgba(16,46,60,.45);font-size:17px;}
 .lh-nav.primary-nav.is-open {display:flex;}
 .lh-nav a {padding:14px 4px;border-bottom:1px solid #ebebeb;}
 .lh-search {padding:12px 0 16px;}
 .lh-search .site-search input {height:52px;font-size:16px;padding:0 58px 0 22px;}
 .lh-search .site-search button {top:4px;right:4px;}
}

/* Search motion: fast in, faster out. The row unfolds from under the header, then field, suggestions and backdrop settle in. */
:root {--lh-ease:cubic-bezier(.2,.8,.2,1);}
.lh-search.is-opening {animation:lh-unfold .24s var(--lh-ease);}
.lh-search.is-opening .site-search {animation:lh-rise .34s var(--lh-ease);}
.lh-search.is-closing {animation:lh-fold .16s ease-in forwards;}
/* Suggestions unfold top-down in one smooth movement. When the bar is opening they wait for it to finish:
   the bar clips everything inside it while it unfolds, so starting earlier made the list jump out at the end. */
.lh .search-panel:not([hidden]) {animation:lh-list .42s cubic-bezier(.33,1,.68,1) both;}
@media (min-width:701px) {.lh-search.is-opening .search-panel:not([hidden]) {animation-delay:.24s;}}
.lh-page .search-backdrop:not([hidden]) {animation:lh-fade .24s ease-out;}
@keyframes lh-unfold {from {clip-path:inset(0 0 100% 0);} to {clip-path:inset(0 0 0 0);}}
@keyframes lh-rise {from {opacity:0;transform:translateY(-10px) scale(.97);} to {opacity:1;transform:none;}}
@keyframes lh-fold {from {opacity:1;transform:none;} to {opacity:0;transform:translateY(-8px);}}
@keyframes lh-list {from {opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0 round 14px);} 35% {opacity:1;} to {opacity:1;transform:none;clip-path:inset(0 0 0 0 round 14px);}}
@keyframes lh-fade {from {opacity:0;}}
/* Phones: the search is a full-screen sheet (search.css). The row itself must not animate there, because clipping or
   transforming it would also clip the fixed sheet inside it. The sheet slides up instead. */
@keyframes lh-sheet-in {from {opacity:0;transform:translateY(16px);} to {opacity:1;transform:none;}}
@keyframes lh-sheet-out {from {opacity:1;transform:none;} to {opacity:0;transform:translateY(16px);}}
@media (max-width:700px) {
 .lh-search.is-opening, .lh-search.is-closing, .lh-search.is-opening .site-search {animation:none;}
 body.search-open .lh .search-shell {animation:lh-sheet-in .26s var(--lh-ease);}
 body.search-open .lh .search-shell.is-leaving {animation:lh-sheet-out .18s ease-in forwards;}
 .lh .search-panel:not([hidden]) {animation-delay:.06s;}
}
@media (prefers-reduced-motion:reduce) {
 .lh .lh-icon, .lh .rt-header-cart, .lh .lh-icon > svg {transition:none;}
 .lh-search.is-opening, .lh-search.is-closing, .lh-search.is-opening .site-search, .lh .search-panel:not([hidden]), .lh-page .search-backdrop:not([hidden]), body.search-open .lh .search-shell, body.search-open .lh .search-shell.is-leaving {animation:none;}
}

/* Suggestions and category chips: the hover/selected background is enough, no underline. ("Se alle …" keeps it: it has no background.) */
body .site-header.lh .search-result:hover, body .site-header.lh .search-result[aria-selected=true],
body .site-header.lh .search-category:hover, body .site-header.lh .search-category[aria-selected=true] {text-decoration:none;}

/* Checkout: only the logo (no "Sikker betaling" label since 2026-11-07). */
body:has(.rt-checkout) .lh :is(.lh-nav,.menu-toggle,.lh-actions,.lh-search) {display:none;}
body:has(.rt-checkout) .lh-bar {display:flex;justify-content:space-between;width:min(1160px,calc(100% - 48px));min-height:72px;}
body:has(.rt-checkout) .lh-bar::after {content:none;}
body:has(.rt-checkout) .lh .brand {justify-self:auto;}
@media (max-width:800px) {body:has(.rt-checkout) .lh-bar {width:calc(100% - 32px);min-height:64px;}}


/* Tablet and mobile: quieter search button (grey, 40 px) so it doesn't compete with the logo; desktop keeps the green. */
@media (max-width:1000px) and (hover:hover) {.lh .lh-search-toggle:hover {background:transparent;} .lh .lh-search-toggle:hover::before {background:#e2e9e5;}}

/* Six categories: tighter spacing on small laptops so the links never run into the icons. */
@media (min-width:1001px) and (max-width:1240px) {
 .lh-bar {gap:28px;}
 .lh .brand-logo {width:150px;}
 .lh-nav.primary-nav {gap:20px;font-size:14px;}
}
@media (min-width:1001px) and (max-width:1080px) {.lh-bar {gap:24px;} .lh-nav.primary-nav {gap:16px;}}
/* Phones: the top bar stays on one line (the second part is left out). */
@media (max-width:700px) {.announcement span {display:none;}}

/* Short pages (login, empty cart, 404): the footer sits at the bottom of the window instead of leaving white space
   under it (2026-11-09). The page is a column; the main content takes the free height. */
body {display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
body > main#main {flex:1 0 auto;}