/* Header and navigation (.hdr-*). Load shop-base.css first.
   The whole <header> is sticky with a negative top, so the USP row (and the logo row on phones) scrolls away.
   Link text sits in .hdr-t spans, because the brand CSS colors links with !important.
   z-index: 1020 header, 1025 mega menu, 1030 basket/search panel, 1035 backdrop, 1040 drawer (Bootstrap modals: 1050).
   .hdr-dim is -1 inside the header's stacking context: above the page, below the header.
   This file is in both whitelabelshop-logitrade-dk (the original) and basket-logitrade-dk (a copy): change the original, then copy it. */

/* Header heights. --hdr-hide-h is the part that scrolls away (USP row + border) and the negative sticky top.
   Change heights here, never in the rules: the header must take the same space stuck and unstuck,
   or Chrome's scroll anchoring makes it flicker at the switch point. On :root because .hdr-gap uses them too. */
:root {
	--hdr-hide-h: 33px;
	--hdr-row-h: 76px;
	--hdr-row-h-stuck: 58px;
	--hdr-bar-h: 48px;
	--hdr-bar-h-stuck: 42px;
}

.hdr {
	position: sticky;
	top: calc(-1 * var(--hdr-hide-h));
	z-index: 1020;
	font-size: 14px;
	line-height: 1.5;
	background: #fff;
}
/* Makes up for the shrink when stuck. A block, not a margin: a margin would collapse with the content below. */
.hdr-gap { height: 0; margin: 0; }
.hdr.is-stuck + .hdr-gap {
	height: calc((var(--hdr-row-h) - var(--hdr-row-h-stuck)) + (var(--hdr-bar-h) - var(--hdr-bar-h-stuck)));
}
.hdr-wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }
:where(.hdr) ul { margin: 0; padding: 0; list-style: none; }
:where(.hdr) p { margin: 0; }
:where(.hdr) hr { border: 0; border-top: 1px solid var(--sk-line); margin: 14px 0; }
:where(.hdr) input { font: inherit; }
/* Real specificity, not :where(): shop-base.css loads again after this file and would
   underline every header link on hover. Underlines go on the inner .hdr-t spans instead. */
.hdr a { text-decoration: none; }
.hdr a:hover { text-decoration: none; }
.hdr svg { flex: 0 0 auto; }
html.hdr-lock { overflow: hidden; }

/* Row 1: USPs + service links */
.hdr-usp { background: var(--sk-soft); border-bottom: 1px solid var(--sk-line); }
.hdr-usp .hdr-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 32px; }
.hdr-usp-list { display: flex; gap: 20px; min-width: 0; overflow: hidden; white-space: nowrap; }
.hdr-usp-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.hdr-usp-item svg { color: var(--sk-green); }
/* hdr.js hides the USPs that don't fit on phones */
.hdr-usp-item.is-hidden { display: none; }
.hdr-usp-item .hdr-t { color: var(--sk-text); }
.hdr-usp-list:hover .hdr-t { color: var(--sk-ink); }
.hdr-service { display: flex; gap: 18px; flex: 0 0 auto; }
.hdr-service a { font-size: 12px; }
.hdr-service .hdr-t { color: var(--sk-text); }
.hdr-service a:hover .hdr-t { color: var(--sk-ink); text-decoration: underline; }

/* Row 2: logo, search, basket */
.hdr-row { background: #fff; }
.hdr-row-inner { display: flex; align-items: center; gap: 40px; height: var(--hdr-row-h); }
.hdr-logo { display: block; flex: 0 0 auto; }
.hdr-logo img { width: 150px; height: auto; display: block; }
.hdr-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--sk-ink); border-radius: var(--sk-radius-sm); }
.hdr-burger:hover { background: var(--sk-soft); }

/* Search (shared by both fields) */
.hdr-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 4px 0 16px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); background: #fff; outline: 0; }
.hdr-search:hover { border-color: var(--sk-muted); }
.hdr-search:focus-within { border-color: var(--sk-ink); box-shadow: 0 0 0 1px var(--sk-ink); }
.hdr-search-input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font-size: 14px; color: var(--sk-ink); outline: 0; }
.hdr-search-input::placeholder { color: var(--sk-muted); opacity: 1; }
.hdr-search-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--sk-radius-sm); color: var(--sk-ink); }
.hdr-search-btn:hover { background: var(--sk-soft); }
.hdr-search-mobile-icon, .hdr-search-cancel { display: none; }

/* Panel with Algolia's three lists. Shown only while the field has focus and at least one list has items. */
.hdr-search-panel { display: none; position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 1030; padding: 8px 0; background: #fff; border-radius: var(--sk-radius-sm); box-shadow: 0 16px 32px rgba(42, 49, 64, .18); max-height: 72vh; overflow: auto; text-align: left; }
.hdr-search:focus-within .hdr-search-panel:has(.list-group-item) { display: grid; }
.hdr-search-panel { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 0; }
.hdr-search-cats { grid-column: 1; grid-row: 1; }
.hdr-search-brands { grid-column: 1; grid-row: 2; }
.hdr-search-products { grid-column: 2; grid-row: 1 / span 2; }
.hdr-search-all { grid-column: 2; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 16px; height: 42px; border-radius: var(--sk-radius-sm); background: var(--sk-ink); color: #fff; font-size: 14px; font-weight: 500; }
.hdr-search-all:hover { background: var(--sk-accent-dark); }
.hdr-search-cats, .hdr-search-brands { background: var(--sk-soft-2); }
.hdr-search-cats { border-right: 1px solid var(--sk-line); }
.hdr-search-brands { border-right: 1px solid var(--sk-line); padding-bottom: 8px; }
/* Markup inserted by algolia.js (list-group); its classes can't be renamed, so they are styled here */
.hdr-search-panel .list-group-item { display: block; padding: 7px 16px; border: 0; background: none; font-size: 14px; color: var(--sk-ink); line-height: 1.4; }
.hdr-search-panel a.list-group-item:hover { background: var(--sk-soft); text-decoration: none; }
.hdr-search-panel div.list-group-item { padding: 8px 16px 4px; font-size: 12px; font-weight: 500; color: var(--sk-muted); }
.hdr-search-panel .list-group-item .media { display: flex; align-items: center; gap: 12px; }
.hdr-search-panel .list-group-item img { width: 48px; height: 48px; border-radius: var(--sk-radius-sm); background: var(--sk-soft); object-fit: cover; margin: 0; }
.hdr-search-panel .media-body { min-width: 0; }
.hdr-search-panel .media-body .text-muted { font-size: 12px; color: var(--sk-muted); }
.hdr-search-panel .text-accent { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sk-ink); }
.hdr-search-panel .text-accent del { font-size: 12px; font-weight: 400; color: var(--sk-muted); }
.hdr-search-panel .list-group-item a[role="button"] { margin-left: 6px; }

/* Skeleton while Algolia responds (hdr.js builds it and sets .is-loading on the panel).
   Each line has the height of a real result line, with a thinner bar inside, so the results land without a jump. */
.hdr-skel { display: none; }
.hdr-search:focus-within .hdr-search-panel.is-loading { display: grid; }
.hdr-search-panel.is-loading > .hdr-skel { display: contents; }
.hdr-search-panel.is-loading > .hdr-search-cats, .hdr-search-panel.is-loading > .hdr-search-brands,
.hdr-search-panel.is-loading > .hdr-search-products, .hdr-search-panel.is-loading > .hdr-search-all { display: none; }
.hdr-skel-cats { grid-column: 1; grid-row: 1 / span 2; background: var(--sk-soft-2); border-right: 1px solid var(--sk-line); }
.hdr-skel-products { grid-column: 2; grid-row: 1 / span 2; }
.hdr-skel-label { padding: 8px 16px; }
.hdr-skel-cat { padding: 7px 16px; }
.hdr-skel-product { display: flex; align-items: center; gap: 12px; padding: 7px 16px; }
.hdr-skel-img { flex: 0 0 auto; width: 50px; height: 50px; border-radius: var(--sk-radius-sm); background: var(--sk-soft); }
.hdr-skel-body { flex: 1 1 auto; min-width: 0; }
.hdr-skel-line { display: block; height: 19.6px; padding: 4.3px 0; }
.hdr-skel-label .hdr-skel-line { height: 16.8px; padding: 3.4px 0; }
.hdr-skel-line--sub { height: 16.8px; padding: 3.9px 0; }
.hdr-skel-line--price { height: 18.2px; margin-top: 2px; padding: 4.1px 0; }
.hdr-skel-bar { display: block; height: 100%; border-radius: 3px; background: var(--sk-soft); }
.hdr-skel-cats .hdr-skel-bar { background: var(--sk-line); }
/* Varied lengths like real text; equal bars look like a table */
.hdr-skel-label .hdr-skel-bar { width: 72px; }
.hdr-skel-cat:nth-child(2) .hdr-skel-bar { width: 80%; }
.hdr-skel-cat:nth-child(3) .hdr-skel-bar { width: 58%; }
.hdr-skel-cat:nth-child(4) .hdr-skel-bar { width: 70%; }
.hdr-skel-body > .hdr-skel-line:first-child .hdr-skel-bar { width: 78%; }
.hdr-skel-product:nth-child(odd) .hdr-skel-body > .hdr-skel-line:first-child .hdr-skel-bar { width: 64%; }
.hdr-skel-line--sub .hdr-skel-bar { width: 52%; }
.hdr-skel-line--price .hdr-skel-bar { width: 26%; }
.hdr-skel-img, .hdr-skel-bar { animation: hdr-skel-pulse 1.4s ease-in-out infinite; }
@keyframes hdr-skel-pulse { 50% { opacity: .5; } }

/* Basket */
.hdr-cart-wrap { position: relative; flex: 0 0 auto; }
.hdr-cart { display: flex; align-items: center; gap: 11px; padding: 7px 12px 7px 10px; margin-right: -12px; border-radius: var(--sk-radius); color: var(--sk-ink); }
.hdr-cart:hover { background: var(--sk-soft); }
.hdr-cart-icon { position: relative; display: inline-flex; color: var(--sk-ink); }
.hdr-cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sk-green); color: #fff; font-size: 11px; font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; }
.hdr-cart-text { display: flex; flex-direction: column; line-height: 1.25; }
.hdr-cart-label { font-size: 11px; color: var(--sk-muted); }
.hdr-cart-total { font-size: 14px; font-weight: 500; color: var(--sk-ink); white-space: nowrap; }

/* Mini basket on hover/focus (desktop). padding-top bridges the gap, so it doesn't close on the way down. */
.hdr-cart-panel { display: none; position: absolute; right: 0; top: 100%; z-index: 1030; width: 372px; padding-top: 8px; }
.hdr-cart-wrap:hover .hdr-cart-panel, .hdr-cart-wrap:focus-within .hdr-cart-panel { display: block; }
.hdr-cart-card { background: #fff; border-radius: var(--sk-radius); box-shadow: 0 16px 32px rgba(42, 49, 64, .18); overflow: hidden; }
.hdr-cart-lines { max-height: 328px; overflow-y: auto; }
/* The line itself isn't a link, only the image and the name are */
.hdr-cart-line { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sk-line); }
.hdr-cart-thumb { display: block; flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--sk-radius-sm); background: var(--sk-soft); overflow: hidden; }
.hdr-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hdr-cart-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hdr-cart-line-name .hdr-t { font-size: 13.5px; line-height: 1.35; color: var(--sk-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hdr-cart-line-name:hover .hdr-t { text-decoration: underline; }
.hdr-cart-line-meta { font-size: 13px; color: var(--sk-muted); }
.hdr-cart-line-price { color: var(--sk-ink); font-weight: 500; }
.hdr-cart-foot { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.hdr-cart-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--sk-text); }
.hdr-cart-sum-total { font-size: 19px; font-weight: 700; color: var(--sk-ink); white-space: nowrap; }
.hdr-cart-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: var(--sk-radius-sm); background: var(--sk-accent); font-size: 15px; font-weight: 500; }
.hdr-cart-cta .hdr-t, .hdr-cart-cta svg { color: #fff; }
.hdr-cart-cta:hover { background: var(--sk-accent-dark); }
.hdr-cart-note { font-size: 13px; line-height: 1.45; color: var(--sk-text); text-align: center; }
.hdr-cart-note strong { color: var(--sk-ink); font-weight: 500; }
.hdr-cart-note--free, .hdr-cart-note--free strong { color: var(--sk-save); }

/* Row 3: menu bar */
.hdr-bar { position: relative; background: #fff; border-bottom: 1px solid var(--sk-line); color: var(--sk-ink); }
.hdr-bar-inner { display: flex; align-items: center; min-height: var(--hdr-bar-h); }
.hdr-bar .hdr-burger-bar, .hdr-bar .hdr-cart-bar { display: none; }

.hdr-nav { display: flex; align-items: center; margin-left: -16px; }
.hdr-nav-item { position: static; }
.hdr-nav-link { display: flex; align-items: center; height: var(--hdr-bar-h); padding: 0 16px; font-size: 15px; font-weight: 500; border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0; white-space: nowrap; }
.hdr-nav-link .hdr-t { color: var(--sk-ink); }

/* Mega menu: full width below the bar; the open item gets an underline */
.hdr-mega { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 1025; background: #fff; box-shadow: 0 16px 32px rgba(42, 49, 64, .18); }
/* Dims the page while a mega menu is open; moving the mouse onto the page closes it */
.hdr-dim { display: none; }
.hdr-mega-cols { display: flex; gap: 30px; width: 100%; max-width: 1170px; margin: 0 auto; padding: 28px 15px 24px; }
.hdr-mega-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hdr-group { display: flex; flex-direction: column; gap: 9px; }
.hdr-group-title { font-size: 14px; font-weight: 500; color: var(--sk-ink); }
.hdr-list { display: flex; flex-direction: column; gap: 7px; }

/* Menu icons (group titles, and the top items in the phone drawer); the backend only adds them when every item has one.
   Each icon is a mask filled with currentColor. ?v=4 busts the 30-day file cache: bump it whenever an icon is redrawn.
   New icon: SVG in static/img/hdr-icons/ plus a line here. */
.hdr-ico { display: inline-block; flex: 0 0 auto; width: 26px; height: 26px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.hdr-ico--alpinski { -webkit-mask-image: url(../img/hdr-icons/alpinski.svg?v=4); mask-image: url(../img/hdr-icons/alpinski.svg?v=4); }
.hdr-ico--andet { -webkit-mask-image: url(../img/hdr-icons/andet.svg?v=4); mask-image: url(../img/hdr-icons/andet.svg?v=4); }
.hdr-ico--born { -webkit-mask-image: url(../img/hdr-icons/born.svg?v=4); mask-image: url(../img/hdr-icons/born.svg?v=4); }
.hdr-ico--brands { -webkit-mask-image: url(../img/hdr-icons/brands.svg?v=4); mask-image: url(../img/hdr-icons/brands.svg?v=4); }
.hdr-ico--bukser { -webkit-mask-image: url(../img/hdr-icons/bukser.svg?v=4); mask-image: url(../img/hdr-icons/bukser.svg?v=4); }
.hdr-ico--camping { -webkit-mask-image: url(../img/hdr-icons/camping.svg?v=4); mask-image: url(../img/hdr-icons/camping.svg?v=4); }
.hdr-ico--cykling { -webkit-mask-image: url(../img/hdr-icons/cykling.svg?v=4); mask-image: url(../img/hdr-icons/cykling.svg?v=4); }
.hdr-ico--dame { -webkit-mask-image: url(../img/hdr-icons/dame.svg?v=4); mask-image: url(../img/hdr-icons/dame.svg?v=4); }
.hdr-ico--flasker { -webkit-mask-image: url(../img/hdr-icons/flasker.svg?v=4); mask-image: url(../img/hdr-icons/flasker.svg?v=4); }
.hdr-ico--herre { -webkit-mask-image: url(../img/hdr-icons/herre.svg?v=4); mask-image: url(../img/hdr-icons/herre.svg?v=4); }
.hdr-ico--jagt { -webkit-mask-image: url(../img/hdr-icons/jagt.svg?v=4); mask-image: url(../img/hdr-icons/jagt.svg?v=4); }
.hdr-ico--jakker { -webkit-mask-image: url(../img/hdr-icons/jakker.svg?v=4); mask-image: url(../img/hdr-icons/jakker.svg?v=4); }
.hdr-ico--langrend { -webkit-mask-image: url(../img/hdr-icons/langrend.svg?v=4); mask-image: url(../img/hdr-icons/langrend.svg?v=4); }
.hdr-ico--lob { -webkit-mask-image: url(../img/hdr-icons/lob.svg?v=4); mask-image: url(../img/hdr-icons/lob.svg?v=4); }
.hdr-ico--mellemlag { -webkit-mask-image: url(../img/hdr-icons/mellemlag.svg?v=4); mask-image: url(../img/hdr-icons/mellemlag.svg?v=4); }
.hdr-ico--outdoor { -webkit-mask-image: url(../img/hdr-icons/outdoor.svg?v=4); mask-image: url(../img/hdr-icons/outdoor.svg?v=4); }
.hdr-ico--populaert { -webkit-mask-image: url(../img/hdr-icons/populaert.svg?v=4); mask-image: url(../img/hdr-icons/populaert.svg?v=4); }
.hdr-ico--regntoj { -webkit-mask-image: url(../img/hdr-icons/regntoj.svg?v=4); mask-image: url(../img/hdr-icons/regntoj.svg?v=4); }
.hdr-ico--rejsetasker { -webkit-mask-image: url(../img/hdr-icons/rejsetasker.svg?v=4); mask-image: url(../img/hdr-icons/rejsetasker.svg?v=4); }
.hdr-ico--rygsaekke { -webkit-mask-image: url(../img/hdr-icons/rygsaekke.svg?v=4); mask-image: url(../img/hdr-icons/rygsaekke.svg?v=4); }
.hdr-ico--saet { -webkit-mask-image: url(../img/hdr-icons/saet.svg?v=4); mask-image: url(../img/hdr-icons/saet.svg?v=4); }
.hdr-ico--sikkerhed { -webkit-mask-image: url(../img/hdr-icons/sikkerhed.svg?v=4); mask-image: url(../img/hdr-icons/sikkerhed.svg?v=4); }
.hdr-ico--skibriller { -webkit-mask-image: url(../img/hdr-icons/skibriller.svg?v=4); mask-image: url(../img/hdr-icons/skibriller.svg?v=4); }
.hdr-ico--skiferie { -webkit-mask-image: url(../img/hdr-icons/skiferie.svg?v=4); mask-image: url(../img/hdr-icons/skiferie.svg?v=4); }
.hdr-ico--skihjelme { -webkit-mask-image: url(../img/hdr-icons/skihjelme.svg?v=4); mask-image: url(../img/hdr-icons/skihjelme.svg?v=4); }
.hdr-ico--skistave { -webkit-mask-image: url(../img/hdr-icons/skistave.svg?v=4); mask-image: url(../img/hdr-icons/skistave.svg?v=4); }
.hdr-ico--skistovler { -webkit-mask-image: url(../img/hdr-icons/skistovler.svg?v=4); mask-image: url(../img/hdr-icons/skistovler.svg?v=4); }
.hdr-ico--skitasker { -webkit-mask-image: url(../img/hdr-icons/skitasker.svg?v=4); mask-image: url(../img/hdr-icons/skitasker.svg?v=4); }
.hdr-ico--skiudstyr { -webkit-mask-image: url(../img/hdr-icons/skiudstyr.svg?v=4); mask-image: url(../img/hdr-icons/skiudstyr.svg?v=4); }
.hdr-ico--skivoks { -webkit-mask-image: url(../img/hdr-icons/skivoks.svg?v=4); mask-image: url(../img/hdr-icons/skivoks.svg?v=4); }
.hdr-ico--solbriller { -webkit-mask-image: url(../img/hdr-icons/solbriller.svg?v=4); mask-image: url(../img/hdr-icons/solbriller.svg?v=4); }
.hdr-ico--storestr { -webkit-mask-image: url(../img/hdr-icons/storestr.svg?v=4); mask-image: url(../img/hdr-icons/storestr.svg?v=4); }
.hdr-ico--tasker { -webkit-mask-image: url(../img/hdr-icons/tasker.svg?v=4); mask-image: url(../img/hdr-icons/tasker.svg?v=4); }
.hdr-ico--taskertilbehor { -webkit-mask-image: url(../img/hdr-icons/taskertilbehor.svg?v=4); mask-image: url(../img/hdr-icons/taskertilbehor.svg?v=4); }
.hdr-ico--tilbehor { -webkit-mask-image: url(../img/hdr-icons/tilbehor.svg?v=4); mask-image: url(../img/hdr-icons/tilbehor.svg?v=4); }
.hdr-ico--udsalg { -webkit-mask-image: url(../img/hdr-icons/udsalg.svg?v=4); mask-image: url(../img/hdr-icons/udsalg.svg?v=4); }
.hdr-ico--underoj { -webkit-mask-image: url(../img/hdr-icons/underoj.svg?v=4); mask-image: url(../img/hdr-icons/underoj.svg?v=4); }
.hdr-ico--vandring { -webkit-mask-image: url(../img/hdr-icons/vandring.svg?v=4); mask-image: url(../img/hdr-icons/vandring.svg?v=4); }
.hdr-ico--varme { -webkit-mask-image: url(../img/hdr-icons/varme.svg?v=4); mask-image: url(../img/hdr-icons/varme.svg?v=4); }
.hdr-group--ico { gap: 8px; }
.hdr-nav-link .hdr-ico { display: none; } /* Top-level icons show on phones only */
.hdr-group--ico .hdr-group-title { display: flex; align-items: center; gap: 10px; }
.hdr-group--ico .hdr-list { padding-left: 36px; }
.hdr-link { display: inline-flex; align-items: center; font-size: 14px; }
.hdr-link .hdr-t { color: var(--sk-text); }
.hdr-link:hover .hdr-t { color: var(--sk-ink); text-decoration: underline; }
.hdr-badge { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: var(--sk-ink); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; vertical-align: middle; }
.hdr-badge-hot { background: var(--sk-green); }
.hdr-text { font-size: 13px; line-height: 1.55; color: var(--sk-text); }
/* Button in a mega menu panel (e.g. the ski holiday search).
   The menu source has <a><button>, so both get styled. */
.hdr-link .hdr-btn { margin-top: 4px; }
.hdr-link:hover .hdr-t .hdr-btn { text-decoration: none; }
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--sk-radius-sm); background: var(--sk-accent); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.hdr-btn:hover { background: var(--sk-accent-dark); }

/* Top banner
   In the page flow right below the header, so it scrolls away when the header sticks.
   Colors are set in admin and arrive as --hdr-tb-bg/--hdr-tb-fg; everything in the banner follows the text color.
   Links in the admin text use -webkit-text-fill-color, because the brand CSS forces link colors with !important. */
/* .sk.hdr-tb, not .hdr-tb: shop-base.css sets .sk { background: #fff } and loads again after this file */
.sk.hdr-tb { --hdr-tb-bg: var(--sk-ink); --hdr-tb-fg: #fff; position: relative; background: var(--hdr-tb-bg); color: var(--hdr-tb-fg); }
.hdr-tb-inner { position: relative; max-width: 1170px; margin: 0 auto; padding: 0 52px; }
.hdr-tb-text { display: block; padding: 9px 0; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.45; text-wrap: balance; }
.hdr-tb-t { color: var(--hdr-tb-fg); }
a.hdr-tb-text:hover .hdr-tb-t { text-decoration: underline; text-underline-offset: 3px; }
.hdr-tb-t a { color: var(--hdr-tb-fg); -webkit-text-fill-color: var(--hdr-tb-fg); text-decoration: underline; text-decoration-color: var(--hdr-tb-fg); text-underline-offset: 2px; }
/* Countdown: one line is reserved before it loads and the digits are fixed width, so the banner neither grows nor wobbles */
.hdr-tb #topbannercountdown { display: inline-block; min-width: 1px; min-height: 1.45em; vertical-align: top; font-variant-numeric: tabular-nums; }
.hdr-tb-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--sk-radius-sm); color: var(--hdr-tb-fg); opacity: .85; }
.hdr-tb-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.hdr-tb-close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }

/* Level 2 header and "See all" row are built by hdr.js and only used on phones */
.hdr-mega-head, .hdr-mega-all { display: none; }
.hdr-drawer-head, .hdr-drawer-foot, .hdr-backdrop { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hdr-drawer, .hdr-mega, .hdr-backdrop { transition: none; }
	.hdr-skel-img, .hdr-skel-bar { animation: none; }
}

/* Desktop (>= 992px): menu bar with hover mega menu, sticky header */
@media (min-width: 992px) {
	.hdr-search-mobile { display: none; }

	/* Open item gets a dark underline, hover alone a lighter one. hdr.js sets .is-open with hover intent;
	   without JS the menu opens on :hover. No :focus-within: a click focuses the link and kept the menu open. */
	.hdr-nav-link:hover { box-shadow: inset 0 -2px 0 var(--sk-line-strong); }
	.hdr-nav-item.is-open > .hdr-nav-link,
	.hdr:not(.hdr-js) .hdr-nav-item:hover > .hdr-nav-link {
		box-shadow: inset 0 -2px 0 var(--sk-ink);
	}
	.hdr-nav-item.is-open > .hdr-mega,
	.hdr:not(.hdr-js) .hdr-nav-item:hover > .hdr-mega { display: block; }
	/* Travel item (set by the backend): divider and accent color, as travel stands apart from clothing and gear.
	   Desktop only; on phones it has an icon like the others. */
	.hdr-nav-item--travel { display: flex; align-items: center; }
	.hdr-nav-item--travel::before { content: ''; flex: 0 0 auto; width: 1px; height: 18px; margin: 0 6px 0 2px; background: var(--sk-line-strong); }
	.hdr-nav-item--travel > .hdr-nav-link .hdr-t { color: var(--sk-accent); }
	/* Max height: even the Brands panel leaves a strip of page to move the mouse onto */
	.hdr-mega { max-height: calc(100vh - 220px); overflow-y: auto; overscroll-behavior: contain; }

	/* pointer-events, not visibility, decides whether the dim catches the mouse:
	   it switches instantly instead of waiting for the transition */
	.hdr-dim { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(42, 49, 64, .28); opacity: 0; pointer-events: none; transition: opacity .18s ease-out; }
	.hdr.is-mega-open .hdr-dim { opacity: 1; pointer-events: auto; }

	/* After scrolling: the USP row is gone, and row 2 and the bar shrink.
	   Heights come from the variables, so .hdr-gap matches. */
	.hdr.is-stuck { box-shadow: 0 6px 20px rgba(42, 49, 64, .14); }
	.hdr.is-stuck .hdr-row-inner { height: var(--hdr-row-h-stuck); gap: 28px; }
	.hdr.is-stuck .hdr-logo img { width: 118px; }
	.hdr.is-stuck .hdr-search { height: 38px; }
	.hdr.is-stuck .hdr-search-btn { width: 32px; height: 30px; }
	.hdr.is-stuck .hdr-cart { padding-top: 4px; padding-bottom: 4px; }
	.hdr.is-stuck .hdr-bar-inner { min-height: var(--hdr-bar-h-stuck); }
	.hdr.is-stuck .hdr-nav-link { height: var(--hdr-bar-h-stuck); }
}

/* Phone and tablet (< 992px): logo row, search in the bar, drawer menu */
@media (max-width: 991.98px) {
	/* No shrinking here: stuck and unstuck heights are equal, so .hdr-gap stays 0.
	   The bar is a fixed 58px (44px content + 7px padding) whether or not the buttons show. */
	:root {
		--hdr-hide-h: 85px;
		--hdr-row-h: 56px;
		--hdr-row-h-stuck: 56px;
		--hdr-bar-h: 58px;
		--hdr-bar-h-stuck: 58px;
	}

	/* Centered, as the service links are hidden. The list must still be able to shrink,
	   or hdr.js can't measure which items don't fit. */
	.hdr-usp .hdr-wrap { height: 28px; justify-content: center; }
	.hdr-usp-list { flex: 0 1 auto; justify-content: center; }
	/* At most the first three USPs and no horizontal scroll; hdr.js also hides any that don't fit, so none is cut off. */
	.hdr-usp .hdr-wrap { padding: 0 8px; }
	.hdr-usp-list { gap: 8px; overflow: hidden; }
	.hdr-usp-item:nth-child(n+4) { display: none; }
	.hdr-usp-item { font-size: 10.5px; gap: 4px; }
	.hdr-service { display: none; }

	.hdr-row-inner { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0; height: var(--hdr-row-h); padding: 0 6px; }
	.hdr-burger { display: flex; }
	.hdr-logo { justify-self: center; }
	.hdr-logo img { width: 116px; }
	.hdr-search-desktop { display: none; }
	.hdr-row .hdr-cart { width: 44px; height: 44px; justify-content: center; gap: 0; padding: 0; margin: 0; }
	.hdr-cart-text { display: none; }
	.hdr-cart-count { top: -5px; right: -7px; min-width: 17px; height: 17px; }
	/* No mini basket on phones: the icon goes straight to the basket */
	.hdr-cart-wrap:hover .hdr-cart-panel, .hdr-cart-wrap:focus-within .hdr-cart-panel { display: none; }

	/* The bar: always the search field; menu button and basket once the header is stuck */
	.hdr-bar-inner { gap: 4px; min-height: var(--hdr-bar-h); padding: 7px 14px; }
	.hdr.is-stuck .hdr-bar-inner { padding: 7px 6px; }
	.hdr.is-stuck .hdr-bar { box-shadow: 0 6px 20px rgba(42, 49, 64, .2); }
	.hdr.is-stuck .hdr-bar .hdr-burger-bar { display: flex; color: var(--sk-ink); }
	.hdr.is-stuck .hdr-bar .hdr-burger-bar:hover { background: var(--sk-soft); }
	.hdr.is-stuck .hdr-bar .hdr-cart-bar { display: flex; width: 44px; height: 44px; justify-content: center; padding: 0; margin: 0; border-radius: var(--sk-radius-sm); }
	.hdr.is-stuck .hdr-bar .hdr-cart-bar:hover { background: var(--sk-soft); }
	.hdr.is-stuck .hdr-bar .hdr-cart-bar .hdr-cart-icon { color: var(--sk-ink); }

	/* The form is transparent and .hdr-search-field is the white box, so Cancel can sit beside it in the bar */
	.hdr-search-mobile { height: 44px; padding: 0; border: 0; gap: 8px; background: transparent; }
	.hdr-search-mobile:hover, .hdr-search-mobile:focus-within { border: 0; box-shadow: none; }
	.hdr-search-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: #fff; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); }
	.hdr-search-field:focus-within { border-color: var(--sk-ink); box-shadow: 0 0 0 1px var(--sk-ink); }
	/* 16px, or iOS zooms in on focus. iOS only checks the field's own font size, so the placeholder can be smaller. */
	.hdr-search-mobile .hdr-search-input { font-size: 16px; }
	.hdr-search-mobile .hdr-search-input::placeholder { font-size: 14px; }
	.hdr-search-mobile .hdr-search-btn { display: none; }
	.hdr-search-mobile-icon { display: inline-flex; color: var(--sk-ink); }
	.hdr-search-mobile .hdr-search-panel { grid-template-columns: minmax(0, 1fr); padding: 0 0 20px; }
	.hdr-search-mobile .hdr-search-cats, .hdr-search-mobile .hdr-search-brands { grid-column: 1; grid-row: auto; border: 0; background: none; }
	.hdr-search-mobile .hdr-search-products, .hdr-search-mobile .hdr-search-all { grid-column: 1; grid-row: auto; }
	.hdr-search-mobile .hdr-search-all { margin: 14px 20px 0; height: 46px; font-size: 15px; }
	.hdr-search-mobile .list-group-item { padding: 9px 20px; font-size: 15px; }
	.hdr-search-mobile div.list-group-item { padding: 12px 20px 4px; font-size: 12px; }
	/* Phone skeleton: one column, sized like the phone result rows */
	.hdr-search-mobile .hdr-skel-cats, .hdr-search-mobile .hdr-skel-products { grid-column: 1; grid-row: auto; border: 0; background: none; }
	/* The panel fills the screen; without align-content: start the grid stretches the rows apart */
	.hdr-search-mobile .hdr-search-panel.is-loading { align-content: start; }
	.hdr-search-mobile .hdr-skel-cats .hdr-skel-bar { background: var(--sk-soft); }
	.hdr-search-mobile .hdr-skel-label { padding: 8px 20px; }
	.hdr-search-mobile .hdr-skel-cat, .hdr-search-mobile .hdr-skel-product { padding: 9px 20px; }
	.hdr-search-mobile .hdr-skel-cat .hdr-skel-line, .hdr-search-mobile .hdr-skel-body > .hdr-skel-line:first-child { height: 21px; padding: 5px 0; }

	/* Searching on mobile: the bar is fixed to the top, Cancel shows and the panel fills the screen */
	.hdr.is-searching .hdr-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
	.hdr.is-searching .hdr-search-cancel { display: flex; align-items: center; flex: 0 0 auto; height: 44px; margin-right: -8px; padding: 0 8px 0 6px; font-size: 15px; color: var(--sk-ink); }
	.hdr.is-searching .hdr-search-cancel svg { color: var(--sk-ink); }
	.hdr.is-searching .hdr-search-mobile .hdr-search-panel { display: grid; position: fixed; left: 0; right: 0; top: var(--hdr-bar-h); bottom: 0; max-height: none; border-radius: 0; box-shadow: none; }

	/* Drawer menu (same markup as the desktop menu bar) */
	.hdr-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(42, 49, 64, .5); opacity: 0; visibility: hidden; transition: opacity .25s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .25s; }
	/* overflow hides the closed level 2 panels parked at translateX(100%).
	   clip also stops focus from scrolling them in; hidden is the fallback. */
	.hdr-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; width: min(360px, 88vw); display: flex; flex-direction: column; overflow: hidden; overflow: clip; background: #fff; transform: translateX(-100%); visibility: hidden; transition: transform .25s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .25s; }
	.hdr.is-open .hdr-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
	.hdr.is-open .hdr-drawer { transform: none; visibility: visible; transition-delay: 0s; }
	.hdr-drawer-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; height: 56px; padding: 0 6px 0 20px; background: #fff; border-bottom: 1px solid var(--sk-line); color: var(--sk-ink); }
	.hdr-drawer-title { font-size: 17px; font-weight: 500; }
	.hdr-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--sk-ink); border-radius: var(--sk-radius-sm); }
	.hdr-close:hover, .hdr-mega-back:hover { background: var(--sk-soft); }
	/* No position here: level 2 panels are positioned against .hdr-drawer, so they cover
	   the drawer header and always start at the top, even when the list is scrolled. */
	.hdr-drawer-body { flex: 1 1 auto; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.hdr-drawer-body.has-open { overflow: hidden; }

	.hdr-nav { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
	.hdr-nav-link { justify-content: space-between; height: 54px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--sk-line); border-radius: 0; font-size: 17px; white-space: normal; }
	.hdr-nav-link .hdr-t { color: var(--sk-ink); }
	.hdr-nav-link:hover { background: var(--sk-soft-2); }
	.hdr-nav-link--ico { justify-content: flex-start; gap: 14px; }
	.hdr-nav-link--ico .hdr-ico { display: inline-block; }
	.hdr-nav-link--ico .hdr-t { flex: 1 1 auto; min-width: 0; }
	.hdr-nav-link.hdr-has-mega::after { content: ''; width: 9px; height: 9px; margin-left: 10px; border-right: 2px solid var(--sk-muted); border-bottom: 2px solid var(--sk-muted); transform: rotate(-45deg); }

	/* Level 2: the panel slides in over the list */
	.hdr-mega { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 2; overflow-y: auto; box-shadow: none; transform: translateX(100%); visibility: hidden; transition: transform .25s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .25s; }
	.hdr-nav-item.is-open > .hdr-mega { transform: none; visibility: visible; transition-delay: 0s; }
	.hdr-mega-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; flex: 0 0 auto; position: sticky; top: 0; z-index: 1; height: 56px; padding: 0 6px; background: #fff; border-bottom: 1px solid var(--sk-line); color: var(--sk-ink); }
	.hdr-mega-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--sk-ink); border-radius: var(--sk-radius-sm); }
	.hdr-mega-title { font-size: 17px; font-weight: 500; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.hdr-mega-all { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; height: 50px; padding: 0 18px 0 20px; border-bottom: 1px solid var(--sk-line); font-size: 15px; font-weight: 500; }
	.hdr-mega-all .hdr-t, .hdr-mega-all svg { color: var(--sk-accent); }
	.hdr-mega-cols { flex-direction: column; gap: 0; padding: 0; }
	.hdr-mega-col { gap: 0; }
	.hdr-group { gap: 0; border-bottom: 1px solid var(--sk-line); }
	.hdr-group-title { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 18px 0 20px; font-size: 16px; cursor: pointer; }
	.hdr-group-title::after { content: ''; width: 9px; height: 9px; margin-left: 10px; border-right: 2px solid var(--sk-muted); border-bottom: 2px solid var(--sk-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
	.hdr-group.is-open .hdr-group-title::after { transform: rotate(-135deg) translate(-3px, -1px); }
	.hdr-list { display: none; padding: 0 20px 10px 32px; background: var(--sk-soft-2); gap: 0; }
	.hdr-group.is-open .hdr-list { display: flex; }
	/* With icon: icon, name and arrow on one line; the links align with the name */
	.hdr-group--ico { gap: 0; }
	.hdr-group--ico .hdr-group-title { justify-content: flex-start; gap: 12px; }
	.hdr-group-name { flex: 1 1 auto; min-width: 0; }
	.hdr-group--ico .hdr-list { padding-left: 58px; }
	.hdr-link { padding: 9px 0; font-size: 15px; }
	.hdr-text { padding: 12px 20px 0; }
	.hdr-link .hdr-btn { margin: 12px 20px 16px; }
	:where(.hdr) hr { margin: 14px 20px; }

	/* Top banner on phones: smaller text, full-size close button */
	.hdr-tb-inner { padding: 0 44px; }
	.hdr-tb-text { padding: 8px 0; font-size: 13px; }
	.hdr-tb-close { right: 0; width: 44px; height: 44px; }

	.hdr-drawer-foot { display: flex; flex-direction: column; margin-top: auto; padding: 12px 0; background: var(--sk-soft); }
	.hdr-drawer-foot > a { padding: 10px 20px; font-size: 14px; }
	.hdr-drawer-foot > a .hdr-t { color: var(--sk-text); }
	.hdr-drawer-usp { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 14px 20px 0; border-top: 1px solid var(--sk-line); }
	.hdr-drawer-usp .hdr-usp-item { font-size: 12px; }
}