/*
 * PGE-Tema – sidens ramme: header, menuer, skuffer (mobilmenu og kurv),
 * live-søgning, sidetitel og sidefod.
 */

#wrapper, #main { position: relative; background-color: #fff; }
.page-wrapper { padding-top: 30px; padding-bottom: 30px; }

/* ---------- Header ---------- */

.header, .header-wrapper { position: relative; z-index: 1001; width: 100%; background-position: 50% 0; background-size: cover; transition: background-color .3s, opacity .3s; }
.header-bg-color { background-color: rgba(22, 22, 22, .9); }
.header-bg-image, .header-bg-color { background-position: 50% 0; transition: background .4s; }
.header-main { position: relative; z-index: 10; height: 102px; }
.header-bottom { position: relative; z-index: 9; display: flex; align-items: center; flex-wrap: no-wrap; min-height: 10px; background-color: #9b772d; }
.header-top, .header-bottom, .header-main { }
.header-main .header-inner { height: 100%; }
.top-divider { margin-bottom: -1px; border-top: 1px solid currentColor; opacity: .1; }
.nav-dark .top-divider { display: none; }

#logo { width: 151px; max-height: 100%; }
.logo { line-height: 1; margin: 0; }
.logo a { display: block; margin: 0; font-size: 32px; font-weight: bolder; text-decoration: none; text-transform: uppercase; color: var(--fs-color-primary); }
.logo img { display: block; width: auto; }
#logo img { max-height: 102px; padding: 8px 0; }
.header-logo-dark, .nav-dark .header-logo, .header-logo-sticky, .sticky .dark .header-logo-dark, .sticky .has-sticky-logo .header-logo { display: none !important; }
.nav-dark .header-logo-dark, .stuck .header-logo-sticky { display: block !important; }
.nav-dark .logo a { color: #fff; }
.logo-left .logo { margin-left: 0; margin-right: 30px; }
.header-main .flex-right { }
.hide-for-medium.flex-right { padding-left: 30px; }
.nav-left.header-nav-main, .header-main .flex-left > .nav { }
@media (max-width: 849px) {
	.header-main li.html.custom { display: none; }
	.medium-logo-center .flex-left { order: 1; flex: 1 1 0; }
	.medium-logo-center .logo { order: 2; margin: 0 15px; text-align: center; }
	.medium-logo-center .logo img { margin: 0 auto; }
	.medium-logo-center .flex-right { order: 3; flex: 1 1 0; }
}
@media (max-width: 549px) {
	.header-main { height: 79px; }
	#logo img { max-height: 79px; }
}

/* Fastgjort header ved rul */
.header-wrapper.stuck { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; box-shadow: 1px 1px 10px rgba(0, 0, 0, .15); }
.sticky-fade .header-wrapper.stuck { animation: pge-header-in .6s; }
.stuck .header-main { height: 70px !important; }
.stuck #logo img { max-height: 70px !important; }
.stuck .header-main .nav > li > a { line-height: 50px; }
.stuck .header-inner, .stuck .logo, .stuck .logo img { margin-top: 0; padding-top: 0; }
.stuck .hide-for-sticky { display: none; }
.has-sticky.header--stuck { }
@keyframes pge-header-in { from { opacity: 0; } to { opacity: 1; } }
.admin-bar .header-wrapper.stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .header-wrapper.stuck { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header-wrapper.stuck { top: 0; } }

/* ---------- Navigation ---------- */

.nav { position: relative; display: flex; flex-flow: row wrap; align-items: center; width: 100%; margin: 0; padding: 0; }
.nav, .nav ul:not(.nav-dropdown) { margin: 0; padding: 0; }
.nav form, .nav input, .nav select, .nav button { margin-bottom: 0; }
.mobile-nav { flex-wrap: nowrap; }
.nav > li { position: relative; display: inline-block; margin: 0 7px; padding: 0; list-style: none; transition: background-color .3s; }
.nav > li > a { display: inline-flex; flex-wrap: wrap; align-items: center; padding: 10px 0; font-family: Cinzel, sans-serif; font-size: .8em; font-weight: 400; font-style: normal; text-transform: none; color: rgba(102, 102, 102, .85); transition: all .2s; }
.nav > li > a:hover, .nav > li.active > a, .nav > li.current > a, .nav > li > a.active, .nav-dropdown li.active > a, .nav-column li.active > a, .nav-dropdown > li > a:hover { color: rgba(17, 17, 17, .85); }
.nav-left { justify-content: flex-start; }
.nav-center { justify-content: center; }
.nav-right { justify-content: flex-end; }
.nav li:first-child { margin-left: 0 !important; }
.nav li:last-child { margin-right: 0 !important; }
.nav-uppercase > li > a { letter-spacing: .02em; font-weight: 400; text-transform: none; }
.nav-size-medium > li > a { font-size: .9em; }
.nav > li.html { font-size: .85em; }
.nav > li > a > i + span { margin-left: 5px; }
.nav > li > a > span + i { margin-left: 5px; }
.nav > li.has-icon > a > i { min-width: 1em; }
.nav > li > a > i.icon-menu { font-size: 1.9em; }
.nav > li > a > i.icon-search { font-size: 1.2em; }
.nav > li > a > i.icon-angle-down { margin-left: .2em; opacity: .6; font-size: 16px; }
.nav-small.nav > li.html { font-size: .75em; }
.header-main .nav > li > a { line-height: 25px; }
.header-bottom-nav > li > a { line-height: 19px; }
.header-button { display: inline-block; }
.header-button .button { margin: 0; }
.header-divider { height: 30px; margin: 0 7.5px; vertical-align: middle; border-left: 1px solid rgba(0, 0, 0, .1); }
.nav > li.header-divider { margin: 0 7.5px; }
.nav-dark .header-divider { border-color: rgba(255, 255, 255, .1); }

.nav-dark .nav > li > a, .nav-dark .nav > li > button { color: rgba(255, 255, 255, .8); }
.nav-dark .nav > li > a:hover, .nav-dark .nav > li.active > a, .nav-dark .nav > li > a.active { color: #fff; }
.nav-dark .nav > li.html, .nav-dark .header-button { color: #fff; }
.header-bottom-nav.nav > li > a, .header-bottom-nav.nav > li > a:hover, .header-bottom-nav.nav > li.active > a { color: #fff; }

.header-cart-title { }
.header-cart-link { }
.cart-icon, .header-cart-link i { }
.header-nav .cart-item .header-cart-title + i, .nav > li > a.header-cart-link > span + i { margin-left: 5px; }
i.icon-shopping-bag { font-size: 20px; }
.nav > li.cart-item { }
.header-nav-main > li.cart-item, .header-nav-main > li.header-divider + li { margin-left: 20px; }

/* Rullemenu */
.nav-dropdown {
	position: absolute;
	left: -99999px;
	z-index: 9;
	display: table;
	min-width: 260px;
	max-height: 0;
	margin: 0;
	padding: 20px 0;
	color: #2d2d2d;
	text-align: left;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}
.nav-dropdown::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.nav-dropdown li { display: block; margin: 0; vertical-align: top; }
.nav-dropdown > li > a { display: block; width: auto; padding: 10px 20px; line-height: 1.3; color: rgba(74, 74, 74, .8); }
.nav-dropdown-default { padding: 20px; }
.nav-dropdown-default > li > a { margin: 0 10px; padding-left: 0; padding-right: 0; border-bottom: 1px solid #ececec; }
.nav-dropdown-default > li:last-child > a { border-bottom: 0; }
.nav-dropdown-has-border .nav-dropdown { border: 2px solid #ddd; }
.nav-dropdown-has-shadow .nav-dropdown { box-shadow: 1px 1px 15px rgba(0, 0, 0, .1); }
.nav-right .nav-dropdown, .nav > li.pge-dropdown-right > .nav-dropdown { }
li.has-dropdown:hover > .nav-dropdown, li.has-dropdown:focus-within > .nav-dropdown, li.current-dropdown > .nav-dropdown {
	left: -15px;
	max-height: inherit;
	opacity: 1;
	visibility: visible;
}
.nav-right li.has-dropdown:hover > .nav-dropdown, .nav-right li.current-dropdown > .nav-dropdown { left: auto; right: -15px; }
.nav-dropdown-has-arrow li.has-dropdown::before, .nav-dropdown-has-arrow li.has-dropdown::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	z-index: 10;
	width: 0;
	height: 0;
	border: solid transparent;
	opacity: 0;
	pointer-events: none;
}
.nav-dropdown-has-arrow li.has-dropdown::after { margin-left: -8px; border-width: 8px; border-color: rgba(221, 221, 221, 0); border-bottom-color: #fff; }
.nav-dropdown-has-arrow li.has-dropdown::before { z-index: -999; margin-left: -11px; border-width: 11px; border-bottom-color: #ddd; }
.nav-dropdown-has-arrow li.has-dropdown:hover::before, .nav-dropdown-has-arrow li.has-dropdown:hover::after,
.nav-dropdown-has-arrow li.has-dropdown:focus-within::before, .nav-dropdown-has-arrow li.has-dropdown:focus-within::after { opacity: 1; transition: opacity .25s; }

/* Lodret menu (mobilmenu) */
.nav-vertical { flex-flow: column; }
.nav.nav-vertical li { width: 100%; margin: 0; list-style: none; }
.nav-vertical > li { display: flex; flex-flow: row wrap; align-items: center; }
.nav-vertical > li > a, .nav-vertical > li > ul > li a { display: flex; flex-grow: 1; align-items: center; width: auto; }
.nav-vertical > li.html { padding-top: 1em; padding-bottom: 1em; }
.nav-vertical > li ul { width: 100%; }
.nav-vertical li li { padding-left: .5em; font-size: 1em; }
.nav-vertical > li + li { border-top: 1px solid #ececec; }
.nav-sidebar.nav-vertical > li.menu-item:hover, .nav-sidebar.nav-vertical > li.menu-item.active { background-color: rgba(0, 0, 0, .05); }
.nav-vertical .toggle { width: 45px; height: auto; margin: 0 5px 0 0; padding: 0; line-height: 1; opacity: .6; color: currentColor; box-shadow: none !important; }
.nav-vertical .toggle:hover, .nav-vertical .toggle:focus { color: currentColor; }
.nav-vertical .toggle:hover { opacity: 1; }
.nav-vertical .toggle i { font-size: 1.8em; transition: all .3s; }
.nav-vertical .active > .toggle { transform: rotate(-180deg); }
/* Undermenuen ligger uden for skærmen, til punktet foldes ud – så kan den tone og glide ind. */
.nav-vertical > li > ul.children { position: fixed; left: -99999px; margin: 0; padding: 0; opacity: 0; transform: translateX(-10px); transition: background-color .6s, transform .3s, opacity .3s; }
.nav-vertical > li.active > ul.children { position: inherit; left: auto; padding-bottom: 30px; opacity: 1; transform: translateX(0); }
.nav-vertical > li > ul li a { color: #4a4a4a; transition: color .2s; }
.nav-vertical > li > ul li a:hover { color: #111; opacity: 1; }

/* ---------- Søgefelt og live-søgning ---------- */

.search-form { width: 100%; }
.searchform { position: relative; }
.searchform-wrapper { width: 100%; }
@media (max-width: 849px) { .searchform-wrapper { font-size: 1rem; } }
.searchform .button.icon { margin: 0; }
.searchform .button.icon i { font-size: 1.2em; }
.col .live-search-results, .header .search-form .live-search-results, .header-block .live-search-results { position: absolute; top: 105%; left: 0; right: 0; text-align: left; color: #111; background-color: rgba(255, 255, 255, .95); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); }
.live-search-results { background-color: rgba(255, 255, 255, .9); color: #111; }
.searchform-wrapper .autocomplete-suggestions { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.header .search-form .autocomplete-suggestions, .header-block .autocomplete-suggestions { max-height: 80vh; }
.autocomplete-suggestion { display: flex; align-items: center; width: 100%; padding: 10px .75em; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .05); cursor: default; }
.autocomplete-suggestion:last-child { border-bottom: 0; }
.autocomplete-suggestion img { display: inline-block; width: 40px; height: 40px; margin-right: 10px; border-radius: 99px; }
.autocomplete-suggestion img + .search-name { margin-top: -.15em; padding-left: .5em; }
.autocomplete-suggestion .search-name { flex: 1; }
.autocomplete-suggestion .search-price { margin-left: 5px; padding-top: 3px; font-size: .8em; }
.autocomplete-selected, .autocomplete-suggestion[data-url]:hover { background-color: rgba(0, 0, 0, .05); }

/* ---------- Skuffer: mobilmenu og kurv ---------- */

.pge-drawer-overlay { position: fixed; top: 0; left: 0; z-index: 1042; width: 100%; height: 100%; overflow: hidden; background: #0b0b0b; opacity: 0; transition: opacity .25s; }
.pge-drawer-overlay.is-open { opacity: .6; }
.pge-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1045;
	width: 300px;
	max-width: 100vw;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
	background-color: rgba(255, 255, 255, .95);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	transition: transform .2s;
}
.pge-drawer--left { left: 0; transform: translateX(-100%); }
.pge-drawer--right { right: 0; transform: translateX(100%); }
.pge-drawer.is-open { transform: translateX(0); }
.pge-drawer.off-canvas-cart { width: 360px; }
/* Luk-krydset står i hjørnet af skærmen (uden for skuffen) og tones ind, når skuffen er åben. */
.pge-drawer__close {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1046;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0 !important;
	padding: 0;
	line-height: 40px;
	font-size: 40px;
	font-weight: 300;
	text-align: center;
	color: #fff;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	mix-blend-mode: difference;
	transition: opacity .6s .15s, transform .3s, visibility 0s .75s;
}
.pge-drawer__close svg { pointer-events: none; }
.pge-drawer.is-open + .pge-drawer__close { opacity: .6; visibility: visible; transition: opacity .6s .15s, transform .3s; }
.pge-drawer.is-open + .pge-drawer__close:hover { opacity: 1; }
body.pge-drawer-open { overflow: hidden; }
.admin-bar .pge-drawer, .admin-bar .pge-drawer__close { top: 32px; }

.mobile-sidebar .sidebar-menu { padding: 30px 0; }
.nav-sidebar.nav-vertical > li > a { padding: 15px 0 15px 20px; color: rgba(74, 74, 74, .85); }
.nav-sidebar.nav-vertical > li.active > a, .nav-sidebar.nav-vertical > li > a:hover { color: rgba(18, 18, 18, .85); }
.nav-sidebar.nav-vertical li li > a { padding: 5px 0 5px 20px; }
.nav-sidebar.nav-vertical > li.html { padding: 20px; }
.nav-sidebar.nav-vertical > li.search-form { display: block; }
.nav-sidebar .live-search-results { color: inherit; background-color: transparent; }

.cart-popup-title { }
.cart-popup-title .is-divider { margin-left: auto; margin-right: auto; }

/* ---------- Sidetitel (brødkrumme-linje i butikken) ---------- */

.page-title { position: relative; }
.page-title-inner { position: relative; min-height: 60px; padding-top: 20px; }
.page-title-inner ul, .page-title-inner select, .page-title-inner form, .page-title-inner button, .page-title-inner p { margin-top: 0; margin-bottom: 0; }
.breadcrumbs { margin: 0; padding: 0; font-weight: 700; letter-spacing: 0; color: #222; }
.breadcrumbs .divider, .breadcrumbs .separator { position: relative; top: 0; margin: 0 .3em; font-weight: 300; opacity: .35; }
.breadcrumbs a { font-weight: 400; color: rgba(102, 102, 102, .7); }
.breadcrumbs a:hover, .breadcrumbs a.current { color: #111; }
.breadcrumbs a:first-of-type { margin-left: 0; }
.dark .breadcrumbs { color: #fff; }
.dark .breadcrumbs a { color: #fff; }

/* ---------- Sidefod ---------- */

.footer-wrapper { position: relative; width: 100%; }
.footer { padding: 30px 0 0; }
.absolute-footer { padding: 0; font-size: .9em; color: rgba(0, 0, 0, .5); }
.absolute-footer.dark { color: rgba(255, 255, 255, .5); background-color: rgb(77, 77, 77); }
.absolute-footer.text-center { text-align: center; }
.absolute-footer.text-center .footer-primary { float: none !important; }
.absolute-footer ul { padding-bottom: 5px; opacity: .8; border-bottom: 1px solid #ddd; }
.footer-primary { padding: 0; }
.copyright-footer { }
.footer-wrapper .section.pge-footer-section { padding-top: 60px; padding-bottom: 60px; background-color: rgb(47, 47, 47); }
.footer-wrapper .pge-footer-cards { width: 84%; margin-left: auto; margin-right: auto; }
@media (min-width: 550px) { .footer-wrapper .pge-footer-cards { width: 100%; } }

.social-icons { display: inline-block; vertical-align: middle; font-size: .85em; color: #999; }
.html .social-icons { font-size: 1em; }
.social-icons span { padding-right: 10px; font-weight: 700; }
/* Ikonet står på tekstens grundlinje som et skrifttegn (0,1586em under linjen). */
.social-icons i { min-width: 1em; vertical-align: -.1586em; }
.dark .social-icons, .nav-dark .social-icons { color: #fff; }
.social-icons .button.icon:hover, .social-icons .button.icon:not(.is-outline) { color: #fff !important; background-color: currentColor !important; border-color: currentColor !important; }
.social-icons .button.icon:hover > i, .social-icons .button.icon:not(.is-outline) > i { color: #fff !important; }

.back-to-top { bottom: 20px; right: 20px; margin: 0; opacity: 0; pointer-events: none; transform: translateY(30%); }
.back-to-top.active { opacity: 1; pointer-events: inherit; transform: translateY(0); }

.skip-link:focus { z-index: 100001; }
