/** Shopify CDN: Minification failed Line 426:0 Expected "}" to go with "{" **/ .gk-srch { position: fixed; inset: 0; z-index: 1000; } .gk-srch__overlay { position: absolute; inset: 0; background: rgba(59,52,43,.42); opacity: 0; transition: opacity var(--dur) var(--ease); } .gk-srch.is-open .gk-srch__overlay { opacity: 1; } .gk-srch__panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--nq-kalk); color: var(--nq-muld); opacity: 0; transform: translateY(-0.75rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .gk-srch.is-open .gk-srch__panel { opacity: 1; transform: none; } /* Search bar */ .gk-srch__bar { position: relative; flex: 0 0 auto; border-block-end: 1px solid var(--nq-linje); } .gk-srch__bar-inner { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-3); } .gk-srch__form { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); background: var(--nq-sand-200); border: 1px solid transparent; border-radius: 2px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .gk-srch__form:focus-within { border-color: var(--nq-terrakotta); box-shadow: 0 0 0 2px var(--nq-terrakotta); } .gk-srch__icon { flex: 0 0 auto; display: inline-flex; color: var(--nq-daempet); } .gk-srch__input { flex: 1 1 auto; min-width: 0; padding-block: var(--space-3); background: transparent; border: 0; color: var(--nq-muld); font-family: var(--nq-font-body); font-size: var(--font-size-body); } .gk-srch__input:focus { outline: none; } .gk-srch__input::-webkit-search-cancel-button, .gk-srch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .gk-srch__clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 2px; color: var(--nq-daempet); background: color-mix(in srgb, var(--nq-muld) 8%, transparent); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .gk-srch__clear:hover { color: var(--nq-muld); background: color-mix(in srgb, var(--nq-muld) 14%, transparent); } .gk-srch__clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nq-terrakotta); } .gk-srch__close { flex: 0 0 auto; color: var(--nq-muld); } /* Indeterminate loading line under the bar */ .gk-srch__bar::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--nq-terrakotta); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .gk-srch.is-loading .gk-srch__bar::after { opacity: 1; animation: gk-srch-load 1.1s var(--ease) infinite; } @keyframes gk-srch-load { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 51% { transform: scaleX(1); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } } /* Results */ .gk-srch__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .gk-srch__inner { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-4) var(--space-8); } .gk-srch__hint, .gk-srch__message, .gk-srch__empty { color: var(--nq-daempet); font-size: var(--font-size-small); } .gk-srch__listbox { display: flex; flex-direction: column; gap: var(--space-2); } .gk-srch__group-title { margin-block-start: var(--space-3); font-family: var(--nq-font-body); font-size: var(--font-size-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nq-daempet); } .gk-srch__group-title:first-child { margin-block-start: 0; } .gk-srch__grid, .gk-srch__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .gk-srch__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: 2px; color: var(--nq-muld); transition: background-color var(--dur-fast) var(--ease); } .gk-srch__opt:hover { background: var(--nq-sand-200); color: var(--nq-muld); } .gk-srch__opt.is-active { background: var(--nq-sand-200); color: var(--nq-muld); box-shadow: inset 0 0 0 2px var(--nq-terrakotta); } .gk-srch__opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--nq-terrakotta); } .gk-srch__thumb { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: 2px; background: var(--nq-sand-100); color: var(--nq-terrakotta); } .gk-srch__img { width: 100%; height: 100%; object-fit: cover; } .gk-srch__ph { display: inline-flex; opacity: .8; } .gk-srch__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .gk-srch__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: var(--lh-tight); } .gk-srch__meta { font-size: var(--font-size-small); color: var(--nq-daempet); } .gk-srch__opt .geckio-price { gap: var(--space-1); } .gk-srch__opt .geckio-price--sm .geckio-price__now, .gk-srch__opt .geckio-price--sm .geckio-price__was { font-size: var(--font-size-small); } .gk-srch__opt--all { grid-template-columns: minmax(0, 1fr) auto; margin-block-start: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--nq-linje); font-weight: 500; color: var(--nq-terrakotta); } .gk-srch__opt--all .icon { color: var(--nq-terrakotta); } .gk-srch__all-label { min-width: 0; overflow-wrap: break-word; } @media (prefers-reduced-motion: reduce) { .gk-srch__overlay, .gk-srch__panel, .gk-srch__opt, .gk-srch__form { transition: none; } .gk-srch__panel { transform: none; } .gk-srch.is-loading .gk-srch__bar::after { animation: none; transform: scaleX(1); } } /* Tablet+ : show the buy CTA */ @media (min-width: 768px) { .geckio-header__cta { display: inline-flex; } } /* Desktop layout */ @media (min-width: 1024px) { .geckio-header__burger { display: none; } .geckio-header__nav { display: block; } .geckio-header__account { display: inline-flex; } .geckio-drawer { display: none; } /* Layout: logo left, menu right next to it */ .geckio-header--layout-logo-venstre .geckio-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-8); } .geckio-header--layout-logo-venstre .geckio-header__col--center { grid-column: 1; grid-row: 1; justify-content: flex-start; } .geckio-header--layout-logo-venstre .geckio-header__col--start { grid-column: 2; grid-row: 1; } .geckio-header--layout-logo-venstre .geckio-header__col--end { grid-column: 3; grid-row: 1; } /* Layout: logo centred, menu split left/right. WHY THREE TRACKS AND NOT FOUR -- do not add the fourth one back. A logo is centred only when the two regions flanking it are exactly equal, and the one width CSS can be made to guarantee equal is an fr share. The old rule was minmax(0,1fr) auto minmax(0,1fr) auto and gave the actions column (icons + CTA) a FOURTH track of its own, sitting OUTSIDE the pair the logo was centred between. That column took its width off the inline-end, so the whole 1-2-3 group was pushed inline-start by exactly (actions width + column gap) / 2 -- 146px on a default shop, and more the longer the CTA label. That is why no fixed nudge could ever have fixed it: the error was half a width the merchant controls. Menu group 2 shares the trailing track with the actions column inside .geckio-header__grp, so both fr tracks stay identical and the logo lands on the exact centre of .geckio-header__inner whatever that column holds. Measured offset is 0.008px. Nothing below is allowed to change this rule. */ .geckio-header--layout-logo-midt .geckio-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } /* Last line of defence, and the only unconditional one: whatever the merchant's font, root size, or an app's injected CSS does to the Liquid estimate below, nothing in this header may lengthen the document. clip is the only value that lets the block axis stay visible, which is what keeps the mega and dropdown panels hanging out of the bar. It clips the inline axis only, where the mega panel is already exactly inset-inline: 0 of this same element, and a dropdown panel (13-20rem, anchored at its own item's inline-start) sits well inside it, because the item it hangs from is always at least the width of the actions column away from this edge. The predictive-search overlay is rendered after the closing header tag, so it is not a descendant and cannot be clipped. */ .geckio-header--layout-logo-midt { overflow-x: clip; overflow-y: visible; } .geckio-header--layout-logo-midt .geckio-header__col--start { display: contents; } .geckio-header--layout-logo-midt .geckio-header__nav--g1 { grid-column: 1; grid-row: 1; min-width: 0; } .geckio-header--layout-logo-midt .geckio-header__nav--g1 .geckio-header__menu { justify-content: flex-end; } .geckio-header--layout-logo-midt .geckio-header__col--center { grid-column: 2; grid-row: 1; } /* Group 2 and the actions column are FLEX SIBLINGS here, not two items dropped in the same grid cell -- grid cannot make two items in one cell push each other apart, so sharing the track without this wrapper would only trade the off-centre logo for an overlap. */ .geckio-header--layout-logo-midt .geckio-header__grp { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; } .geckio-header--layout-logo-midt .geckio-header__grp .geckio-header__nav--g2 { min-width: 0; } /* THE ORDER IN WHICH THINGS GIVE, and why it is this order. flex: none here was the cause of the worst regression: the actions column could not compress, so the overrun left the document instead and took the cart with it -- up to 132px off screen, with the page refusing to scroll far enough to reveal it. It can compress now, but the compression must land on the CTA LABEL and never on a tap target, so the icon buttons are pinned at --tap and only the CTA has a floor it can reach. Note what is deliberately NOT here: min-width: 0. Leaving the automatic min-content minimum in place is what guarantees the icons and a 72px stub of CTA can never be squeezed out of this column -- group 2 carries min-width: 0 and is therefore the half that yields. margin-inline-start: auto still keeps the column flush when group 2 is absent or has been stood down by the gate. */ .geckio-header--layout-logo-midt .geckio-header__grp .geckio-header__col--end { flex: 0 1 auto; margin-inline-start: auto; } .geckio-header--layout-logo-midt .geckio-header__grp .geckio-header__icon-btn { flex: none; min-width: var(--tap); } /* 72px and 256px in px, not rem: --tap is a px token, so at a 32px root the icon strip does NOT grow, and rem bounds here would push this column past its track. The max-width is load-bearing, not cosmetic -- the Liquid budget prices the CTA at exactly this number, so a 60-character label costs the menu 256px instead of 444px, and the links that fit beside it stay on the bar. Change one and you must change the other. */ .geckio-header--layout-logo-midt .geckio-header__grp .geckio-header__cta { flex: 0 1 auto; min-width: 72px; max-width: 256px; overflow: hidden; overflow: clip; overflow-clip-margin: 4px; } .geckio-header--layout-logo-midt .geckio-header__grp .geckio-header__cta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* settings.logo_width is a max-width on .logo__img only (base.css), so a wordmark -- the DEFAULT, since logo_image is blank on a new install -- is unbounded and eats the bar before any menu does: 60 characters is 745px of a 976px bar at 1024px. The cap is generous enough that real shop names never reach it (a 25-character Danish name is 289px) and tight enough that no name can starve the cart. The padding/margin pair is not decoration: .logo sets line-height: 1, so the clip edge would otherwise land exactly on the baseline and shave the descenders off every shop name containing g, j, p, q or y -- always, not only when the name is long enough to truncate. The negative margin hands the padding back to the layout, so the bar height does not move. */ .geckio-header--layout-logo-midt .logo__word { display: block; max-width: min(22rem, 34vw); padding-block: .22em; margin-block: -.22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* One group only -- a one-link menu, or the built-in fallback menu. There is no group 2 to balance it, so leading the row reads better than hugging the logo. :has() is already relied on in this file (the transparent-header mega rule); where it is unsupported this rule simply does not apply and the menu keeps the end-aligned position it has today. */ .geckio-header--layout-logo-midt .geckio-header__inner:not(:has(.geckio-header__nav--g2)) .geckio-header__nav--g1 .geckio-header__menu { justify-content: flex-start; } /* THE LAST-RESORT NET, and why the floor is 1.5rem and not --tap. The Liquid gate at the end of this style block is what is supposed to keep a menu legible: it splits by room instead of by count, and where no split fits it removes whole links from layout AND from the tab order rather than crushing them. Everything from here down only runs when that estimate is beaten -- an unusually wide font, an app's injected CSS, a root size set in CSS rather than in browser settings. min-width: 0 was what let the menu absorb the entire mismatch and collapse to 0px while staying focusable; 1.5rem is the WCAG 2.5.8 target-size floor at the default root and grows with the text. It is deliberately NOT --tap: a 44px floor gives out sooner, and when this net gives out the flex line overflows the track and the inline-axis clip above takes the CART with it. A 24px link is ugly; an unreachable cart is broken. The lower floor protects the harder guarantee. */ .geckio-header--layout-logo-midt .geckio-header__menu-item { min-width: 1.5rem; } /* WHERE THE ELLIPSIS IS ALLOWED TO LIVE, and why it is fiddly: - Plain links truncate on their
  • . The is an inline box and overflow does nothing on one; making it a block instead grows the bar by 1.6px and drops the hover underline, in this layout only. - A mega or drop item must NEVER get overflow on its
  • . .geckio-drop is positioned against that
  • , so clipping it would clip the open dropdown away. Those truncate the label inside the trigger instead, and the trigger itself is capped at max-width: 100% so it can never paint past its own
  • -- the chevron's flex: none is an irreducible width, and letting it escape is what printed "Kontakt" across the search icon. - Nothing may go on the nav or on .geckio-header__inner: .geckio-mega escapes its menu item to resolve against .geckio-header, and would be clipped. WHY clip WITH A MARGIN AND NOT PLAIN hidden. The global ring is box-shadow: 0 0 0 3px var(--nq-ler) (base.css, --focus-ring) -- entirely OUTSIDE the element's box -- and overflow: hidden clipped 98% of it away, in this layout only. The is inline, so its padding-block bleeds 8px past the
  • it lives in; 0.75rem is that 8px plus the 3px ring, and it scales with the text. overflow: hidden is declared first as the fallback for engines without overflow-clip-margin, where the ring clips as it did before and nothing else changes. Neither value creates scrollable overflow, so neither can lengthen the document. */ .geckio-header--layout-logo-midt .geckio-header__menu-item:not(.geckio-header__menu-item--mega):not(.geckio-header__menu-item--drop) { overflow: hidden; overflow: clip; overflow-clip-margin: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .geckio-header--layout-logo-midt .geckio-header__link--mega, .geckio-header--layout-logo-midt .geckio-header__link--drop { max-width: 100%; min-width: 1.5rem; overflow: hidden; overflow: clip; overflow-clip-margin: 4px; } .geckio-header--layout-logo-midt .geckio-header__link--mega > span:first-child, .geckio-header--layout-logo-midt .geckio-header__link--drop > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .geckio-header--layout-logo-midt .geckio-mega__chevron { flex: none; } /* Layout: logo on its own row, menu centred underneath */ .geckio-header--layout-logo-over .geckio-header__inner { row-gap: var(--space-2); } .geckio-header--layout-logo-over .geckio-header__col--center { grid-column: 2; grid-row: 1; } .geckio-header--layout-logo-over .geckio-header__col--end { grid-column: 3; grid-row: 1; } .geckio-header--layout-logo-over .geckio-header__col--start { grid-column: 1 / -1; grid-row: 2; justify-content: center; } .geckio-header--layout-logo-over .geckio-header__menu { justify-content: center; } /* Predictive search drops out of the header instead of covering the screen. The scrim still catches every click, but it starts below the header so the header itself stays legible while the panel is open. */ .gk-srch__overlay { background: linear-gradient( to bottom, transparent 0, transparent var(--header-height, 4.5rem), rgba(59,52,43,.42) var(--header-height, 4.5rem) ); } .gk-srch__panel { inset-block-start: var(--header-height, 4.5rem); inset-block-end: auto; max-height: 32rem; max-height: min(32rem, calc(100svh - var(--header-height, 4.5rem) - var(--space-8))); border-block-end: 1px solid var(--nq-linje); box-shadow: 0 24px 60px rgba(59,52,43,.14); } .gk-srch__bar-inner { padding-block: var(--space-4); } .gk-srch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .gk-srch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }