/*
Theme Name: Smageriet
Author: Codepilots ApS
Author URI: http://codepilots.io
Version: 1.0
*/

@import url('editor-style.css?ts=2');

/* Vars */
:root { 
    --primary: #183f38; 
    --secondary: #eb5f4f;
    --tertiary: #555555;
    --quaternary: #0f3d37;
    --bg-primary: #183f38;
    --bg-secondary: #38564f;
    --bg-tertiary: #f1e4db;
    --bg-quaternary: #eddcd0;
    --bg-quinary: #dfcfc3;
    --bg-senary: #fcf4ef;
    --highlight-color-primary: #cee3ba;
    --highlight-colot-secondary: #ecde87;
    --box-shadow-color: #00000005;
    --font-primary: #0f3d37;
    --font-secondary: #eddcd0;
    --font-tertiary: #fff;
    --font-family-primary: 'Montserrat';
    --font-family-secondary: 'canelabold';
    --input-bg: #f4eae3;
    /* --input-bg: #f8efe9; */
    --input-bg-secondary: #5f726d;
    --input-focus: #0f3d370a;
    --button-color: #183f38;
    --button-color-disabled: #5e4c3d;

    --theme-bg-primary1: #183f38;
    --theme-bg-primary2: #f1e4db;
    --theme-bg-secondary1: #142f2a;
    --theme-bg-secondary2: #3c514c;
    --theme-bg-secondary3: #6f7974;
    --theme-bg-secondary4: #ead9cf;
    --theme-bg-spring: #d0e3cb;
    --theme-bg-summer: #ebf0d9;
    --theme-bg-easter: #fcf1ca;
    --theme-bg-wedding: #e9b696;
    --theme-bg-student: #9bc1bf;
    --theme-bg-latesummer: #bcd3d4;

    --theme-color-primary1: #eddcd0;
    --theme-color-primary2: #183f38;
    --theme-color-secondary1: #eddcd0;
    --theme-color-secondary2: #eddcd0;
    --theme-color-secondary3: #eddcd0;
    --theme-color-secondary4: #183f38;
    --theme-color-spring: #183f38;
    --theme-color-summer: #183f38;
    --theme-color-easter: #183f38;
    --theme-color-wedding: #183f38;
    --theme-color-student: #183f38;
    --theme-color-latesummer: #183f38;
} 

.theme.primary1:not(.color) { background-color:var(--theme-bg-primary1) !important; color:var(--theme-color-primary1) !important; }
.theme.primary2:not(.color) { background-color:var(--theme-bg-primary2) !important; color:var(--theme-color-primary2) !important; }
.theme.secondary1:not(.color) { background-color:var(--theme-bg-secondary1) !important; color:var(--theme-color-secondary1) !important; }
.theme.secondary2:not(.color) { background-color:var(--theme-bg-secondary2) !important; color:var(--theme-color-secondary2) !important; }
.theme.secondary3:not(.color) { background-color:var(--theme-bg-secondary3) !important; color:var(--theme-color-secondary3) !important; }
.theme.secondary4:not(.color) { background-color:var(--theme-bg-secondary4) !important; color:var(--theme-color-secondary4) !important; }
.theme.spring:not(.color) { background-color:var(--theme-bg-spring) !important; color:var(--theme-color-spring) !important; }
.theme.summer:not(.color) { background-color:var(--theme-bg-summer) !important; color:var(--theme-color-summer) !important; }
.theme.easter:not(.color) { background-color:var(--theme-bg-easter) !important; color:var(--theme-color-easter) !important; }
.theme.wedding:not(.color) { background-color:var(--theme-bg-wedding) !important; color:var(--theme-color-wedding) !important; }
.theme.student:not(.color) { background-color:var(--theme-bg-student) !important; color:var(--theme-color-student) !important; }
.theme.latesummer:not(.color) { background-color:var(--theme-bg-latesummer) !important; color:var(--theme-color-latesummer) !important; }

.theme.color.primary1 { color:var(--theme-color-primary1) !important; }
.theme.color.primary2 { color:var(--theme-color-primary2) !important; }
.theme.color.secondary1 { color:var(--theme-color-secondary1) !important; }
.theme.color.secondary2 { color:var(--theme-color-secondary2) !important; }
.theme.color.secondary3 { color:var(--theme-color-secondary3) !important; }
.theme.color.secondary4 { color:var(--theme-color-secondary4) !important; }
.theme.color.spring { color:var(--theme-color-spring) !important; }
.theme.color.summer { color:var(--theme-color-summer) !important; }
.theme.color.easter { color:var(--theme-color-easter) !important; }
.theme.color.wedding { color:var(--theme-color-wedding) !important; }
.theme.color.student { color:var(--theme-color-student) !important; }
.theme.color.latesummer { color:var(--theme-color-latesummer) !important; }

.theme.border.primary1 { border-color:var(--theme-bg-primary1) !important; }
.theme.border.primary2 { border-color:var(--theme-bg-primary2) !important; }
.theme.border.secondary1 { border-color:var(--theme-bg-secondary1) !important; }
.theme.border.secondary2 { border-color:var(--theme-bg-secondary2) !important; }
.theme.border.secondary3 { border-color:var(--theme-bg-secondary3) !important; }
.theme.border.secondary4 { border-color:var(--theme-bg-secondary4) !important; }
.theme.border.spring { border-color:var(--theme-bg-spring) !important; }
.theme.border.summer { border-color:var(--theme-bg-summer) !important; }
.theme.border.easter { border-color:var(--theme-bg-easter) !important; }
.theme.border.wedding { border-color:var(--theme-bg-wedding) !important; }
.theme.border.student { border-color:var(--theme-bg-student) !important; }
.theme.border.latesummer { border-color:var(--theme-bg-latesummer) !important; }

.theme.leaves { background-image:url('/wp-content/themes/smageriet/_img/pattern_leaf.svg'); background-repeat: repeat; }

/* General */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: none; outline: none; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; } 
::-webkit-scrollbar-track { background-color: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background-color: var(--primary); }
::selection { background: #0f3d3726; }
::placeholder { color:#0005; }
.dark::placeholder { color:#fff5; }
[data-lastpass-icon-root] { display: none !important; }
.observerAnchor { position: absolute; width: 0px; height: 0px; top: 85px; left: 0; }
.pagewidth { width:100%; max-width: 1480px; margin:0 auto; }
.pagewidth.padding { padding-left:24px; padding-right:24px; padding-top:3em; padding-bottom:3em; }
.maxpagewidth { width:100%; max-width: 1680px; margin:0 auto; }

/* Utils */
.clear { clear: both; }
.clickable { opacity:1; transition: opacity .3s ease-in-out; user-select: none; }
.clickable:hover { opacity: .85; cursor:pointer; }
.clickable:active { opacity: .5; }
.unclickable { pointer-events: none; }
.d-none { display:none !important; }
.d-block { display:block !important; }
.d-inline-block { display:inline-block; }
.p-relative { position: relative; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.w-100 { width:100%; }
.min-w-100 { min-width:100%; }
.max-w-100 { max-width:100%; }
.h-auto { height:auto !important; overflow:visible !important; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.flex-center { display:flex; align-items:center; }
.gap-2 { gap:2em; }
.opacity-0 { opacity: 0;}
.opacity-25 { opacity: .25;}
.opacity-50 { opacity: .5;}
.opacity-75 { opacity: .75;}
.mt-0 { margin-top:0; } .mt-1 { margin-top:.5em; } .mt-2 { margin-top:1em; } .mt-3 { margin-top:1.5em; } .mt-4 { margin-top:2em; }
.mb-0 { margin-bottom:0; } .mb-1 { margin-bottom:.5em; } .mb-2 { margin-bottom:1em; } .mb-3 { margin-bottom:1.5em; } .mb-4 { margin-bottom:2em; }
.pt-0 { margin-top:0 !important; } .pt-1 { padding-top:1em; } .pt-2 { padding-top:2em; } .pt-3 { padding-top:3em; } .pt-4 { padding-top:4em; }
.pb-0 { padding-bottom:0 !important; } .pb-1 { padding-bottom:1em; } .pb-2 { padding-bottom:2em; } .pb-3 { padding-bottom:3em; } .pb-4 { padding-bottom:4em; }
.m-0-auto { margin:0 auto; }
.justify-content-center { justify-content: center; }
.pull-right { float:right; }
.small { font-size:.8em; }
.smaller { font-size:.7em; }
.large { font-size:1.2em; }
.grid { display: grid; grid-gap:1em; grid-template-columns: repeat(auto-fit,minmax(0%,1fr)); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-3 { grid-template-columns: 1fr 3fr; }
.content .box { border-radius: .5em; padding:24px; background:var(--bg-quinary); min-height:100px; box-shadow: 0 0 38px var(--box-shadow-color);  }
.content .box h1, .content .box h2, .content .box h3, .content .box h4 { margin-top:0; }

/* Busy & unavailable */
.busy { position: relative !important; pointer-events: none !important; }
.busy { opacity: .5; }
a.busy:not(:empty), button.busy:not(:empty) { color:#ffffff00; }
a.busy:not(:empty):after, button.busy:not(:empty):after { background:none; }
a.busy:not(:empty):before, button.busy:not(:empty):before {   
    content:'';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 60px;
    height:20px;
    color: inherit !important;
    display: flex !important;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#fffc 90%,#fff0);
    background: var(--_g) 0%   50%, var(--_g) 50%  50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: busydots 1s infinite linear;
}
.unavailable { opacity: .5; position: relative !important; }
.unavailable:after { content:''; width:100%; height:100%; top:0; left:0; position: absolute; }

/* Loading */
.loading { position: relative; }
.loading:empty { min-height:100px; }
.loading:after { content:''; position: absolute; top: 50%; left: 50%; margin-top:-32px; margin-left:-32px; border-radius: 50%; width: 64px; height: 64px; padding:0; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.1); border-top: 2px solid #808080; animation: rotating 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86); }
div:has(>input).loading:after { content: '';
    position: absolute;
    bottom: 11px;
    top: auto;
    left: 8px;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--input-bg);
    background: var(--input-bg);
    width: 20px;
    height: 20px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-top: 2px solid var(--bg-primary);
    animation: rotating 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86); }

/* Icons */
.infoicon { display:inline-block; width:10px; height:10px; background: url('/wp-content/themes/smageriet/_img/icon_info.svg') no-repeat center center; background-size:contain; } 
.infoicon.white { background-image: url('/wp-content/themes/smageriet/_img/icon_info_white.svg'); }
.plusicon { display:inline-block; width:12px; height:12px; background: url('/wp-content/themes/smageriet/_img/icon_plus.svg') no-repeat center center; background-size:12px 12px; } 
.deleteicon { display:inline-block; width:1em; height:1em; background: url('/wp-content/themes/smageriet/_img/i_delete.svg') no-repeat center center; background-size:1em 1em; } 
.closeicon { display:inline-block; width:.8em; height:.8em; background: url('/wp-content/themes/smageriet/_img/i_close.svg') no-repeat center center; background-size:.8em .8em; } 
.linkicon { display:inline-block; width:.8em; height:.8em; background: url('/wp-content/themes/smageriet/_img/icon_link.svg') no-repeat center center; background-size:.8em .8em; } 
.editicon { display:inline-block; width:.8em; height:.8em; background: url('/wp-content/themes/smageriet/_img/i_edit.svg') no-repeat center center; background-size:.8em .8em; } 
.checkicon { display:inline-block; width:.8em; height:.8em; background: url('/wp-content/themes/smageriet/_img/i_check.svg') no-repeat center center; background-size:.8em .8em; filter:brightness(0) invert(1); } 
.specialcaseicon { display:inline-block; width:.8em; height:.8em; background: url('/wp-content/themes/smageriet/_img/icon_specialcase_white.svg') no-repeat center center; background-size:.8em .8em; } 
.successicon { display:inline-block; width:100px; height:100px; background: url('/wp-content/themes/smageriet/_img/icon_success.svg') no-repeat center center; background-size:contain; }

/* Body */
body { background:var(--bg-quaternary); color:var(--font-primary); font-size:14px; margin:0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; overflow-x: hidden; /* overflow-y: scroll;*/ }
body.blocked { pointer-events:none; }
/* body.test:after { content:''; position: fixed; width:100%; height:5px; background:#ffbf00; top:0; left:0; z-index:1000; } */
main { padding-top:146px; min-height:600px; transition: padding-top .3s cubic-bezier(0.075, 0.82, 0.165, 1); overflow-x:hidden; }

/* Elements */
main .elements .element:empty { position:relative; min-height: 200px; margin-bottom:64px; padding:64px 32px; opacity: .25; background: url('/wp-content/themes/smageriet/_img/icon_ribboncut.svg') no-repeat center center; background-origin: content-box; background-size:contain; }
main .elements .element:empty:after { content:'Elementet er under udarbejdelse'; position: absolute; width:100%; height:calc(100% - 24px); top:0; left:0; color:#000; justify-content: center; display: flex; align-items: end; }
main .elements { padding-bottom:2em; }
main .elements .element .wrapper { padding-top:5em; padding-bottom:5em; }
main .elements .element .wrapper:first-child { padding-top:3em; }
main .elements .element:first-child .wrapper { padding-bottom:3em; }

main .elements .element .padding { padding-left:24px; padding-right:24px; }    
main .elements .element .content { padding:0 24px; /*overflow-x:hidden;*/ }
main .elements .element .content .Overskrift-1, main .elements .element .content .Overskrift-2 { font-family: 'canelabold'; font-weight: 400; line-height: 1; }
/* main .elements .element .content .Overskrift-1 { font-family: 'canelabold'; font-weight: 400; line-height: 1; } */
main .elements .element .content .text>*:not(h1[title],h2[title],.linkbutton):first-child { margin-top:0; }
main .elements .element .content .text>*:last-child:not(.linkbutton) { margin-bottom:0; }
main .elements .element .content .badge { margin:0 .5em .5em 0; }
main .elements .element .content img { max-width: 100%; }
    
    /* Sitemap */
    main .elements .element.sitemap ul li { padding:5px 0; }
    main .elements .element.sitemap ul li ul { padding-top:5px; padding-bottom:15px; }
    main .elements .element.sitemap ul li a:not([href]):hover { color:inherit; }

    /* Std */
    main .elements .element.std .background.theme { padding:7em 0; }
    main .elements .element.std .content .img { width:100%; max-width: 33%; float:left; margin: 0 3em 3em 0; border-radius: .75em; overflow:hidden; }
    main .elements .element.std .content .img.right { float:right; margin: 0 0 3em 3em;  }
    main .elements .element.std .content .img img { width:100%; }
    main .elements .element.std .content p { line-height: 1.8;}
    main .elements .element.std .content .img + .text [title] { display: inline-block; }

    /* Std 50-50 */
    main .elements .element.std_50-50 .wrapper { padding:3em 0; }
    main .elements:first-child .element.std_50-50:first-child .wrapper { padding:3em 0; }
    main .elements .element.std_50-50 .content { display: grid; grid-template-columns: 1fr 1fr; grid-gap:4em; }
    main .elements .element.std_50-50 .content p { line-height: 1.8;}
    main .elements .element.std_50-50 .content .img>div { width:100%; height:100%; background-size: cover; border-radius: 1em; background-position: center center; background-repeat: no-repeat; }
    main .elements .element.std_50-50 .content .pricetag { display:none; }
    main .elements .element.std_50-50 .content.right .img { order: 1; }
    main .elements .element.std_50-50:first-child .content .img { margin: -3em 0; border-radius: 0 0 1em 1em; position: relative; overflow:hidden; background-position: center center; background-size: cover; }
    main .elements .element.std_50-50:first-child .content .img>div { border-radius: 0 0 1em 1em; }
    main .elements .element.std_50-50:first-child .content .img:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover; transform-origin: center; transition: transform 0.4s ease-in-out; transform:scale(1.05); }

    /* Std 50-50 Picmobile */
    main .elements .element.std_50-50_picmobile .wrapper { padding:3em 0; }
    main .elements:first-child .element.std_50-50_picmobile:first-child .wrapper { padding:3em 0; }
    main .elements .element.std_50-50_picmobile .content { display: grid; grid-template-columns: 1fr 1fr; grid-gap:4em; }
    main .elements .element.std_50-50_picmobile .content p { line-height: 1.8;}
    main .elements .element.std_50-50_picmobile .content .img>div { width:100%; height:100%; background-size: cover; border-radius: 1em; background-position: center center; background-repeat: no-repeat; }
    main .elements .element.std_50-50_picmobile .content .pricetag { display:none; }
    main .elements .element.std_50-50_picmobile .content.right .img { order: 1; }
    main .elements .element.std_50-50_picmobile:first-child .content .img { margin: -3em 0; border-radius: 0 0 1em 1em; position: relative; overflow:hidden; background-position: center center; background-size: cover; }
    main .elements .element.std_50-50_picmobile:first-child .content .img>div { border-radius: 0 0 1em 1em; }
    main .elements .element.std_50-50_picmobile:first-child .content .img:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover; transform-origin: center; transition: transform 0.4s ease-in-out; transform:scale(1.05); }
    
    /* Std Swiper */
    main .elements .element.std_swiper { padding-top:3em; padding-bottom:3em; }
    main .elements .element.std_swiper .pagewidth { display:grid; grid-template-columns: minmax(300px,25%) 1fr; }
    main .elements .element.std_swiper .carrusel { position: relative; margin-right:3em; }
    main .elements .element.std_swiper .carrusel.confetti:before { content:''; position: absolute; top:-40%; left:-25%; z-index:-1; width:150%; height:130%; background-image: url('/wp-content/themes/smageriet/_img/konfetti.svg'); background-position: right top; }
    main .elements .element.std_swiper .carrusel .swiper { position:absolute; width:100%; top:-4em; aspect-ratio: 4/6; max-height: calc(100% + 8em); }
    main .elements .element.std_swiper .carrusel .swiper .swiper-slide { width:100%; height:100%; }
    main .elements .element.std_swiper .carrusel .swiper .swiper-slide > div:first-child { width:100%; height:100%; border-radius: 1em; background-size: cover; background-repeat: no-repeat; background-position: center center; }
    main .elements .element.std_swiper .carrusel .swiper .swiper-slide .ribbon { position: absolute; top:4em; left:0; background:var(--bg-tertiary); padding:1em 1.5em; border-radius: 0 .5em .5em 0; }
    main .elements .element.std_swiper .carrusel .swiper .swiper-slide-shadow { border-radius: 1em !important; }
    main .elements .element.std_swiper .carrusel .swiper .prev, 
    main .elements .element.std_swiper .carrusel .swiper .next { position: absolute; top:50%; background:var(--bg-primary); width:50px; height:50px; margin-top:-25px; border-radius: .25em; z-index:99; background-position: center center; background-repeat: no-repeat; }
    main .elements .element.std_swiper .carrusel .swiper .prev { left:-.5em; background-image: url('/wp-content/themes/smageriet/_img/slideshow_left.svg'); }
    main .elements .element.std_swiper .carrusel .swiper .next { right:-.5em; background-image: url('/wp-content/themes/smageriet/_img/slideshow_right.svg'); }
    main .elements .element.std_swiper .carrusel .swiper .prev.swiper-button-disabled,
    main .elements .element.std_swiper .carrusel .swiper .next.swiper-button-disabled { filter:brightness(200%) grayscale(1); }
    main .elements .element.std_swiper .content .padding { padding:5em 0 5em 3em; }
    main .elements .element.std_swiper .content p { line-height: 1.8;}

    /* Newsletter */
    main .elements .element.newsletter .background { padding:7em 0; }
    main .elements .element.newsletter .content { background:var(--bg-tertiary); border-radius: 1em; padding:3em; overflow-x:hidden; }
    main .elements .element.newsletter .content p { line-height: 1.8; }       
    main .elements .element.newsletter .content form { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:1em; padding:1em 5em; max-width:800px; margin:0 auto; }
    main .elements .element.newsletter .content form input:not([type=checkbox]), main .elements .element.newsletter .content form a { height:48px; }
    main .elements .element.newsletter .content form a { padding-top:15px; padding-bottom:15px; }
    main .elements .element.newsletter .content .terms { text-align: center; grid-column:1 / span 4; display: flex; justify-content: center; }
    
    /* Footnote */
    main .elements .element.footnote .wrapper { padding:2em 0; }
    main .elements .element.category:has(+.footnote) .wrapper { padding-bottom:0; }
    main .elements .element.specificmenus:has(+.footnote) .wrapper { padding-bottom:0; }

    /* Widgets */
    main .elements .element.widgets .widgets { display:grid; grid-template-columns: 1fr 1fr; grid-gap:4em; }
    main .elements .element.widgets .widgets .widget { display:grid; grid-template-columns: 128px 1fr; background:var(--bg-quinary); border-radius: 1.5em; padding:2em; }
    main .elements .element.widgets .widgets .widget .text p { font-size: .9em; }
    main .elements .element.widgets .widgets .widget .text a,
    main .elements .element.widgets .widgets .widget .text button { font-size: 14px; }
    main .elements .element.widgets .widgets .widget .icon { margin: -3em 1em -3em -4em; background-repeat:no-repeat; background-size:contain; }
    main .elements .element.widgets .widgets .widget .transportprice .result .grid { height:39px; align-items: center; animation:fadeInLeft .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
    
    /* Filters */
    main .elements .element.menufilters .filters { display: flex; gap:2em; }
    main .elements .element.menufilters .filter { display: grid; grid-template-columns: 1fr auto; grid-gap:1em; align-items: center; }
    main .elements .element.menufilters .controls { display: inline-grid; grid-template-columns: 1fr auto auto; grid-gap:.5em; align-items: center; }
    main .elements .element.menufilters .controls input,
    main .elements .element.menufilters .controls button { width:36px; height:36px; padding:0; text-align: center; }
    main .elements .element.menufilters:has(+.element.category) .wrapper { padding-bottom:0; }

    /* Boxed */    
    main .elements .element.boxed .content { background:#fff; border-radius: 1em; padding:3em; }
    main .elements .element.boxed .content p { line-height: 1.8; }    
    main .elements .element.boxed .content .img { width:100%; max-width: 40%; float:left; margin: 0 3em 0 0; border-radius: 1.5em; }
    main .elements .element.boxed .content .img.right { float:right; margin: 0 0 0 3em;  }
    main .elements .element.boxed .content .img img { width:100%; }

    /* Boxed tilted */    
    main .elements .element.boxed_tilted.wrapper { padding-top:0; padding-bottom: 0; }    
    main .elements .element.boxed_tilted .background { position: relative; padding-top:10em; padding-bottom:10em; }
    main .elements .element.boxed_tilted .content { display: grid; grid-template-columns: 40% 1fr; }
    main .elements .element.boxed_tilted .content .box { position: relative; background:#fff; border-radius: 1em; padding:3em;  }
    main .elements .element.boxed_tilted .content .box.confetti:before { content:''; position: absolute; top:-4em; right:-4em; z-index:-1; width:100%; height:100%; background-image: url('/wp-content/themes/smageriet/_img/konfetti.svg'); background-position: right top; }
    main .elements .element.boxed_tilted .content .box h2 { font-size:2.8em; }    
    main .elements .element.boxed_tilted .content .box p { line-height: 1.8; }    
    main .elements .element.boxed_tilted .content .img { position: relative; }    
    main .elements .element.boxed_tilted .content .img div { width:140%; height:100%; border-radius: 1.5em; background-size:cover; background-position: center center; background-repeat: no-repeat; z-index: 0; animation:tilted 1s ease-in-out forwards; }

    /* Boxed shifted */    
    main .elements .element.boxed_shifted.wrapper { padding-top:0; padding-bottom: 0; }    
    main .elements .element.boxed_shifted .background { position: relative; }
    main .elements .element.boxed_shifted .content { display: grid; grid-template-columns: 40% 1fr; }
    main .elements .element.boxed_shifted .content .box { position: relative; background:#fff; border-radius: 1.5em; padding:6em 6em 6em 8em;  }
    main .elements .element.boxed_shifted .content .box.confetti:before { content:''; position: absolute; top:-4em; right:-4em; z-index:-1; width:100%; height:100%; background-image: url('/wp-content/themes/smageriet/_img/konfetti.svg'); background-position: right top; }
    main .elements .element.boxed_shifted .content .box h1 { margin-top:1.2em; }
    main .elements .element.boxed_shifted .content .box h2 { font-size:2.5em; }    
    main .elements .element.boxed_shifted .content .box h3 { font-size:1.2em; margin:2em 0; font-size: 600; }    
    main .elements .element.boxed_shifted .content .box p { line-height: 1.8; }    
    main .elements .element.boxed_shifted .content .img { position: relative; }    
    main .elements .element.boxed_shifted .content .img div { width: 110%; position: absolute; /* height: calc(100% - 6em); */ top: 50%; transform: translateY(-50%); border-radius: 1.5em; background-size: contain; background-position: right center; background-repeat: no-repeat; z-index: 1; }
    
    main .elements .element.boxed_shifted .content.right { display: grid; grid-template-columns: 1fr 40%; }
    main .elements .element.boxed_shifted .content.right .box { grid-column: 1; grid-row: 1; }
    main .elements .element.boxed_shifted .content.right .img { grid-column: 2; grid-row: 1; }
    main .elements .element.boxed_shifted .content.right .box { padding:6em 8em 6em 6em; }
    main .elements .element.boxed_shifted .content.right .box.confetti:before { top:-4em; left:-4em; background-position: left top; }
    main .elements .element.boxed_shifted .content.right .img { position: relative; }    
    main .elements .element.boxed_shifted .content.right .img div { background-position: left center; right:0; }

    /* Boxed gallery */    
    main .elements .element:first-child.boxed_gallery, main .elements .element.mobilonly_boxedimg ~ .element.boxed_gallery { margin-top:2em; }
    main .elements .element.boxed_gallery { max-width: 100vw; overflow-x: hidden; }
    main .elements .element.boxed_gallery .background { position: relative; }
    main .elements .element.boxed_gallery .background .filler { position: absolute; top:0; right:0; width:50%; height:100%; z-index: -1; }
    main .elements .element.boxed_gallery .pagewidth { border-radius: 2em 0 0 2em; display: grid; grid-template-columns: 1fr 40%; }
    main .elements .element.boxed_gallery .content { padding: 5em 4em; }    
    main .elements .element.boxed_gallery .content .padding { height: 100%; display: flex; align-items: center; }    
    main .elements .element.boxed_gallery .content p { line-height: 1.8; }    
    main .elements .element.boxed_gallery .gallery { aspect-ratio: 1/1; position: relative; margin-top: -3em; margin-bottom: -3em; align-self:center; }
    main .elements .element.boxed_gallery .gallery>div { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; position: relative; height: 100%; }    
    main .elements .element.boxed_gallery .gallery .img { border-radius: 1.5em; width:100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center center; box-shadow: 0px 3px 20px #00000033; }    
    main .elements .element.boxed_gallery .linkbuttons { display:inline-grid; grid-template-columns: 1fr 1fr; grid-gap:1em; }
    main .elements .element.boxed_gallery .linkbutton { background:#00000022; border-color:#333333aa; color:#fff; width:100%; transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), transform .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
    main .elements .element.boxed_gallery .linkbutton:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; right:.75em; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_right_white.svg') no-repeat left center; margin-left:.8em; }
    
    /* Boxed background */
    main .elements .element.boxed_background .padding { padding-left:24px; padding-right:24px; }    
    main .elements .element.boxed_background .background { padding:7% 9%; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; }
    main .elements .element.boxed_background .content { background:var(--input-bg); padding:2em 3em; }
    main .elements .element.boxed_background .content p { line-height: 1.8; }    
    main>.elements:only-child .element:first-child.boxed_background .pagewidth { max-width:1680px; } /* Has subnav*/
    main>.elements .element:first-child.boxed_background .wrapper { padding-top:0; }
    main>.elements .element:first-child.boxed_background .wrapper .background { padding:7% 7% 0 7%; border-radius: 0 0 .75em .75em; }
    main>.elements .element:first-child.boxed_background .wrapper .content { padding-bottom:4em; position: relative; bottom:-3em; animation:fadeIn 1s ease-in-out .5s forwards; opacity: 0; border-radius: .5em; }

    /* Boxed Mobile only image */
    main .elements .element.mobilonly_boxedimg { display:none; }    

    /* USP */
    main .elements .element.usp { position: relative; }
    main .elements .element.usp .wrapper { padding-top:0; }
    main .elements .element.usp .pagewidth:before { content:''; position: absolute; top:calc(50% - 4em); left:0; width:100%; height:1px; background: #ddd; z-index: -2;}
    main .elements .element.usp .swiper-slide { height:200px; display: grid; grid-template-rows: 1fr 50px; }
    main .elements .element.usp .swiper-slide>div:first-child{ background-repeat:no-repeat; background-position: center bottom; background-size: contain; }
    main .elements .element.usp .swiper-slide>div:last-child{ justify-content: center; display: flex; align-items: center; text-align: center; }
    
    /* Trustpilot */    
    main .elements .element.tp .trustpilot-widget { transition: opacity 1s ease-in-out 1s; }
    main .elements .element.tp_small .trustpilot-widget { transition: opacity 1s ease-in-out 1s; }
    .bottom .trustpilot-widget { filter: brightness(0) saturate(100%) invert(90%) sepia(21%) saturate(260%) hue-rotate(327deg) brightness(101%) contrast(86%); }

    /* Backdrop */
    main .elements .element.backdrop { z-index: -1; position: relative; }
    main .elements .element.backdrop .backdrop { left: -10em; width:50%; max-width:400px; height:400px; position: absolute; background-position: top left; background-repeat: no-repeat; background-size: contain; }
    main .elements .element.backdrop .backdrop.right { right:-10em; left:auto; background-position: top right; }
    
    /* Separator */
    main .elements .element.separator .separator { width:100%; height:10px; background:linear-gradient(to bottom, #cccccc00 calc(50% - 1px), #ccc calc(50% + 1px), #cccccc00 calc(50% + 2px)); }

    /* Linkbuttons */
    main .elements .element.linkbuttons .content .linkbutton { width:100%; transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), transform .3s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow .5s ease-in-out;  }
    main .elements .element.linkbuttons .content { width: auto; display: inline-grid; grid-template-columns: repeat(5,1fr); grid-gap: 2em; align-items: center; }

    /* Inactive menu */    
    main .elements .element.inactivemenu .text { display:flex; flex-direction:column; justify-content: center; align-items: center; min-height: 200px; }    

    /* Month filter */
    main .elements .element.monthfilterlink .content>.filter>.grid select, main .elements .element.monthfilterlink .content>.filter>.grid .linkButton { height: 42px; }
    
    /* Dishtypes */    
    main .elements .element.dishtypes .padding { padding-left:24px; padding-right:24px; }
    main .elements .element.dishtypes .dishtype { position: relative; }
    main .elements .element.dishtypes .dishtype .anchor{ position:absolute; top:-84px; }
    main .elements .element.dishtypes h2 { font-family: 'canelabold'; font-size:2.5em; font-weight: 400; }

    main .elements .element.dishtypes h3.toggle:before { content:''; width:10px; height:10px; position: absolute; right:0; padding-left:1.2em; top:50%; transform: translateY(-50%); background: var(--bg-quaternary) url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat right center; background-size: contain; }
    main .elements .element.dishtypes h3.toggle:has(+ .d-none):before { background-image:url('/wp-content/themes/smageriet/_img/menu_down.svg'); }
    main .elements .element.dishtypes h3.toggle + .layer:not(.d-none) { animation:fadeInDownSmall .3s cubic-bezier(0.075, 0.82, 0.165, 1); }

    main .elements .element.dishtypes .dishtype .requirements .badge { transition: background 1s ease-in-out; background:#0000; border: 1px solid var(--bg-primary); color:var(--font-primary); font-size:.6em; text-transform: none; line-height:normal; }
    main .elements .element.dishtypes .dishtype.validated .requirements .badge { background: var(--primary); color:#fff; border-color:var(--primary); transition: background 1s ease-in-out; padding-right:2.5em; }
    main .elements .element.dishtypes .dishtype.validated .requirements .badge:after { content: ''; position: absolute; height: 8px; width: 34px; top:50%; transform: translateY(-50%); right: 0; background: url(/wp-content/themes/smageriet/_img/i_check.svg) no-repeat center center; filter:brightness(0) invert(1); background-size:contain; }
    main .elements .element.dishtypes .dishtype .requirements { display: inline-block; font-weight: 600; position: absolute; right:0; background:var(--bg-quaternary); padding-left:1.2em; animation: fadeInLeft .3s ease-in-out; }
    main .elements .element.dishtypes .dishtype .requirements:empty { display: none; }
    
    main .elements .element.dishtypes .dishtype + .dishtype { margin-top:3em; }

    main .elements .element.dishtypes .dishtype>.info { padding: 0 0 0 1.5em; position: relative; font-size: .9em; line-height: 1.5; }
    main .elements .element.dishtypes .dishtype>.info:before { content: ''; position: absolute; width: 3px; height: 100%; border-radius: 2px; top: 0; left: 0; background: #ddd; z-index: 3; }
    main .elements .element.dishtypes .dishtype>.info p { margin:0; }
    
    main .elements .element.dishtypes .dishtype>.info .pricerules { padding:.5em 0; }
    main .elements .element.dishtypes .dishtype>.info .pricerules + .notices { margin:.5em 0 1em 0; }
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed .notices { opacity: 0; box-shadow:none; }
    main .elements .element.dishtypes .dishtype>.info .notices { opacity:1; display: flex; gap:2em; background-color: #fff; border-radius: .5em; padding:1em; margin:1em 0; box-shadow: 0 5px 12px #00000011; transition: opacity .3s ease-in-out, box-shadow .5s ease-in-out .5s; }
    main .elements .element.dishtypes .dishtype>.info .notices:before { content:''; width:2.5em; background: url('/wp-content/themes/smageriet/_img/icon_info.svg') no-repeat center top; background-size: contain; }
    main .elements .element.dishtypes .dishtype>.info .notices p { display: grid; grid-template-columns: auto 1fr; grid-gap:1em; padding:.25em 0; }
    main .elements .element.dishtypes .dishtype>.info .notices p + p { margin:.5em 0 0; }
    main .elements .element.dishtypes .dishtype>.info .notices p .icon { width:1.25em; height:1.25em; background-repeat: no-repeat; background-position: center center; background-size:contain; } 
    main .elements .element.dishtypes .dishtype>.info .notices p.extraprice .icon { background-image: url('/wp-content/themes/smageriet/_img/icon_plus.svg'); } 
    main .elements .element.dishtypes .dishtype>.info .notices p.specialcase .icon { background-image: url('/wp-content/themes/smageriet/_img/icon_specialcase.svg'); } 
    
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed[data-numpricerules="1"] { max-height: 30px !important; }
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed[data-numpricerules="2"] { max-height: 50px !important; }
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed[data-numpricerules="3"] { max-height: 68px !important; }
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed[data-numpricerules="4"] { max-height: 68px !important; }
    
    main .elements .element.dishtypes .dishtype>.info button[data-readmore] { display:block; font-size:.8em; padding-right:32px; background:var(--bg-quaternary); color:#555; margin-bottom:1em; }    
    main .elements .element.dishtypes .dishtype>.info button[data-readmore]:before { content:'Læs mindre'; }
    main .elements .element.dishtypes .dishtype>.info button[data-readmore]:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat left center; margin-left:.8em; }    
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed + button[data-readmore]:before { content:'Læs mere'; }
    main .elements .element.dishtypes .dishtype>.info .readmore.collapsed + button[data-readmore]:after { background: url('/wp-content/themes/smageriet/_img/menu_down.svg') no-repeat left center; }

    main .elements .element.dishtypes.extradishtypes .wrapper { padding-top:0; }

    /* FAQ */
    main .elements .element.faq .wrapper { padding-top:0; }
    
    main .elements .element.faq .boxed h2 {font-size: 1.2em; font-weight: 700; }
    main .elements .element.faq .boxed .question { border-radius: 1.5em; margin:2em 0; padding:12px 24px; background:#fff; box-shadow: 0 0 38px var(--box-shadow-color); }    
    main .elements .element.faq .boxed .question h3.toggle { padding-left:1.3em; font-size:1.2em; font-weight: 400; }
    main .elements .element.faq .boxed .question h3.toggle:before { content:''; width:12px; height:12px; position: absolute; left:0; top:50%; transform: translateY(-50%); background: #fff url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat right center; background-size: contain; }
    main .elements .element.faq .boxed .question h3.toggle + .layer:not(.d-none) { animation:fadeInDownSmall .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
    main .elements .element.faq .boxed .question .layer { line-height: 1.5; padding:1em 0; }

    main .elements .element.faq .inline h2 { font-family: 'canelabold'; font-weight: 400; margin-bottom:1em; }
    main .elements .element.faq .inline .question h3.toggle { font-family: 'Montserrat'; display: flex; gap: 1em; position: relative; font-size:1.25em; }
    main .elements .element.faq .inline .question h3.toggle:after { content: ''; flex-grow: 1; background:linear-gradient(to bottom, #cccccc00 calc(50% - 1px), #ccc calc(50% + 1px), #cccccc00 calc(50% + 2px)); }
    main .elements .element.faq .inline .question h3.toggle:before { content:''; width:8px; height:8px; position: absolute; right:0; padding-left:1.2em; top:50%; transform: translateY(-50%); background: var(--bg-quaternary) url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat right center; background-size: contain; }
    main .elements .element.faq .inline .question h3.toggle + .layer:not(.d-none) { animation:fadeInDownSmall .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
    main .elements .element.faq .inline .question .layer { line-height: 1.5; padding:.25em 0; }
    
    main .elements .element.faq .question h3.toggle:has(+ .d-none):before { background-image:url('/wp-content/themes/smageriet/_img/menu_down.svg'); }
    
    /* Orderform */    
    main .elements .element.orderform .content { text-align: center; }
    main .elements .element.orderform .content .box { width:100%; max-width:480px; background:#fff; border-radius: 1em; padding:2em; box-shadow: 0px 3px 20px #00000033; display: inline-block; }
    main .elements .element.orderform .content .box th, main .elements .element.orderform .content .box td { text-align: left; }
    main .elements .element.orderform .content p { line-height: 1.8; }        
    main .elements .element.orderform .content a { text-decoration: none; font-weight: 700; }        
    main .elements .element.orderform .content a:hover { color:#3dc194; }        
    main .elements .element.orderform .content table { width:100%; }
    main .elements .element.orderform .content table tr { position: relative; }
    main .elements .element.orderform .content table tr th, main .elements .element.orderform .content table tr td { border-bottom:1px solid #00000011; }
    main .elements .element.orderform .content table tr th { padding: 0 0 1em 0; }
    main .elements .element.orderform .content table tr td { padding:1em 1em; }
    main .elements .element.orderform .content table tr:first-child td { padding:0 1em 1em 1em; }
    main .elements .element.orderform .content table tr td:last-child { width:1px; }
    main .elements .element.orderform .content table tr th:first-child,  main .elements .element.orderform .content table tr td:first-child { padding-left:0; }
    main .elements .element.orderform .content table tr th:last-child,  main .elements .element.orderform .content table tr td:last-child { padding-right:0; text-align: end; }
    
    main .elements .element.orderform .content table { position: relative; }    
    main .elements .element.orderform .content table tr[data-menuid="2564"] td { padding-bottom:1.8em; }
    main .elements .element.orderform .content table tr[data-menuid="2564"] + tr td { padding-top:2.5em; }
    main .elements .element.orderform .content table tr[data-menuid="2564"] td:first-child:after { content: 'Mulighed for tilvalg'; position: absolute; left: 50%; top:57px; background: #eee; border-radius: 5px; padding: .5em 1em; transform: translate(-50%, 50%); white-space: nowrap; }

    main .elements .element.orderform .content .orderform_price { display: flex; align-items: center; }
    main .elements .element.orderform .content .small { font-size: .8em;}
    main .elements .element.orderform .content .beforeprice { display: block; font-size: .7em; font-weight: 400; margin: .5em 0 0 0; text-align: center; line-height: 1; margin: 0; }
    main .elements .element.orderform .content .price { position: relative; background: #3dc194; display: inline-block; color: #fff; padding: .25em .5em; transform: rotate(-3deg); border-radius: .25em; font-weight: 700; }    
    main .elements .element.orderform .content .orderform_addbutton { width: 100%; height: 50px; padding-right: 32px; overflow: visible; transition: all .3s ease-in-out; }
    main .elements .element.orderform .content .orderform_addbutton:after { opacity: 1; content: ''; position: absolute; top: 50%; transform: translate(0%, -50%); width: 32px; height: 100%; margin-bottom: 1px; background: url(/wp-content/themes/smageriet/_img/icon_shoppingbag_plus_white.svg) no-repeat left center; background-size: contain; margin-left: .8em; }
    main .elements .element.orderform .controls { display: grid; grid-template-columns: auto auto auto; grid-gap:.5em; align-items: center; }
    main .elements .element.orderform .controls input,
    main .elements .element.orderform .controls button { width:36px; height:36px; padding:0; text-align: center; }            
    main .elements .element.orderform .controls button.addtobasket { width:100%; height:50px; padding-right:32px; overflow: visible; transition:all .3s ease-in-out; }    
    main .elements .element.orderform .controls .addtobasketwrapper { width:100%; grid-column:1 / span 4; margin-top:16px; position: relative; }
    main .elements .element.orderform .controls .addtobasketwrapper:before { content:''; position: absolute; width:100%; height:1px; background:#ddd; top:-12px; left:0; }
    main .elements .element.orderform .controls button.addtobasket:after{ filter: brightness(0) invert(1); opacity: 1; content: ''; position: absolute; top: 50%; transform: translate(0%, -50%); width: 32px; height: 100%; margin-bottom: 1px; background: url('/wp-content/themes/smageriet/_img/icon_shoppingbag_plus_white.svg') no-repeat left center; background-size: contain; margin-left: .8em; }
    main .elements .element.orderform .controls_description { font-size: .8em; margin:.5em 0 0 0; text-align: center; }

    /* Orders */
    main .elements .element.orders .wrapper { padding-top:0; }
    main .elements .element.orders .head { display:grid; grid-template-columns: 1fr auto; }
    main .elements .element.orders .actions { display:inline-grid; grid-template-columns: auto auto auto; grid-gap:.5em; }
    main .elements .element.orders .resendconfirmation { width:32px; height:32px; background: url('/wp-content/themes/smageriet/_img/icon_email.svg') no-repeat center center; background-size: 16px 16px; border:1px solid #aaa; border-radius: .5em; }
    main .elements .element.orders .downloadconfirmation { width:32px; height:32px; background: url('/wp-content/themes/smageriet/_img/icon_download.svg') no-repeat center center; background-size: 16px 16px; border:1px solid #aaa; border-radius: .5em; }
    main .elements .element.orders .deleteorder { width:32px; height:32px; background: url('/wp-content/themes/smageriet/_img/i_delete.svg') no-repeat center center; background-size: 16px 16px; border:1px solid #aaa; border-radius: .5em; }
    main .elements .element.orders .box + .box { margin-top:1em; }

    main .elements .element.orders .toggle:before { content:''; width:8px; height:8px; position: absolute; right:0; padding-left:1.2em; top:50%; transform: translateY(-50%); background: #fff url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat right center; background-size: contain; }
    main .elements .element.orders .toggle:has(+ .d-none):before { background-image:url('/wp-content/themes/smageriet/_img/menu_down.svg'); }
    main .elements .element.orders .toggle + .ordercontent:not(.d-none) { animation:fadeInDownSmall .3s cubic-bezier(0.075, 0.82, 0.165, 1); }

    main .elements .element.orders ul { list-style: none; padding-left: 0; margin:1em 0; }
    main .elements .element.orders ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; }
    main .elements .element.orders ul li:after { content: ''; position: absolute; left: 0; top: .2em; width: 1em; height: 1em; background-repeat: no-repeat; background-image: url('/wp-content/themes/smageriet/_img/i_check.svg'); background-size: contain; }
    main .elements .element.orders .ordermenu + .ordermenu { border-top: 1px solid #ddd; padding-top: 1em; margin-top: 1.5em;  }
    main .elements .element.orders .orderextras { border-top: 1px solid #ddd; padding-top: 1em; margin-top: 1.5em;  }
    main .elements .element.orders .ordertotals { border-top: 1px solid #ddd; padding-top: 1em; margin-top: 1em;  }
    main .elements .element.orders .ordertotals table { width:100%; border-spacing: 0px; border-collapse: separate; }
    main .elements .element.orders .ordertotals table tr td:last-child { text-align: right; }
    main .elements .element.orders .ordertotals .unpaid table tr td { color:#cc0000; }

    /* Profile */
    main .elements .element.profile .wrapper { padding-top:0; }    
    main .elements .element.profile .content { min-height: 300px; width:100%;}
    main .elements .element.profile .content .box, main .elements .element.profile .content button { animation:fadeIn .3s ease-in-out forwards; }
    main .elements .element.profile form .grid { max-width: 640px; }
    main .elements .element.profile form input:not([type=checkbox]):not([type=radio]), main .elements .element.profile form textarea, main .elements .element.profile form select { max-width: 640px; }

/* Readmore */

    button[data-readmore] { padding:10px 16px; display:none; }
    .readmore { max-height:0; transition: max-height .5s cubic-bezier(0,1,0,1); position: relative; }
    .readmore.collapsed { max-height: 100% !important; overflow:hidden; }
    
/* Menus */
.menus:not(.resize) { min-height: 360px; }
.menus.resize { height:360px; overflow:hidden; transition: height .5s ease-in-out; opacity:0;}
.menus .notfound { width:100%; height:100%; min-height: 300px; display: flex; align-items: center; justify-content: center; animation:fadeIn 1s cubic-bezier(0.075, 0.82, 0.165, 1); }
.menus .wrapper, main .elements .element .menus .wrapper { display:grid; width:100%; grid-template-columns: 1fr 1fr 1fr; grid-gap:3em; margin:0; padding:5px 0; }

.menus .menu { background: var(--input-bg); border-radius: 1em; display: grid; grid-template-rows:minmax(100px, 1fr) 1fr; box-shadow: 0; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow .5s ease-in-out; }
.menus .menu.filtered { opacity:0; animation:fadeFlipIn .3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; }
.menus .menu .content, main .elements .element .menus .menu .content { padding:1.5em; display: grid; grid-template-rows: 1fr auto; }
.menus .menu .name { color:var(--quaternary); font-family: var(--font-family-secondary); font-size:1.5em; margin-top:0; }
.menus .menu .teaser { font-size:.9em; line-height: 1.5; margin-bottom:0; }
.menus .menu .img { background: var(--bg-tertiary); border-radius: 1em 1em 0 0; min-width: 100%; }
.menus .menu .img .badges { position: absolute; top:24px; right:24px; z-index: 9; text-align: end; }
.menus .menu .img .badge, main .elements .element .content .menus .menu .img .badge { margin:0 0 .5em .5em; }
.menus .menu .img .swiper { width:100%; height:100%; border-radius: 1em 1em 0 0; overflow:hidden; }
.menus .menu .img .swiper .swiper-slide { background-size: cover; background-position: center center; background-repeat: no-repeat; padding:24px; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1);}
/* .menus .menu .img .swiper .swiper-slide:hover { transform: scale(1.1); } */
.menus .menu .img .swiper .prev, 
.menus .menu .img .swiper .next { position: absolute; bottom:24px; background:var(--bg-primary); filter:grayscale(1); width:24px; height:24px; border-radius:2px; z-index:99; background-size:5px; background-position: center center; background-repeat: no-repeat; }
.menus .menu .img .swiper .prev { left:24px; border-radius: 3px 0 0 3px; background-image: url('/wp-content/themes/smageriet/_img/slideshow_left.svg'); }
.menus .menu .img .swiper .next { left:52px; border-radius: 0 3px 3px 0; background-image: url('/wp-content/themes/smageriet/_img/slideshow_right.svg'); }
.menus .menu .img .swiper .prev.swiper-button-disabled,
.menus .menu .img .swiper .next.swiper-button-disabled { filter:brightness(200%) grayscale(1); }
.menus .menu .gutter { display: grid; grid-template-columns: 1fr auto; padding-top:1.5em; align-items: end; }
.menus .menu .gutter .pricing .beforeprice { margin:0; font-size:.9em; opacity: .5; text-decoration: line-through; }
.menus .menu .gutter .pricing .price { margin:0; font-size:1.3em; font-weight: 600; color:var(--quaternary); }
.menus .menu .gutter .pricing .description { margin:0; font-size:.9em; opacity: .5; }

/* Dish details */
.dishdetails { display:grid; grid-template-rows: auto 1fr; margin:-24px; border-radius: .75em; }
.dishdetails .name { margin:0 0 1em; }
.dishdetails .img { aspect-ratio: 16 / 9; overflow:hidden; background: #f5f5f5; border-radius: .75em .75em 0 0; }
.dishdetails .img>div { width:100%; height:100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.dishdetails .content { padding:24px; }
.dishdetails .content .info { display: grid; grid-template-columns: 1fr 2em 1fr; grid-gap:1em; }
.dishdetails .content .info .instructions:empty { display:none; }
.dishdetails .content .info .instructions:empty + .separator { display:none; }
.dishdetails .content .info .separator:has(+ .allergens:empty) { display:none; }
.dishdetails .content .info .allergens:empty { display:none; }
.dishdetails .content .info:has(.allergens:empty) { grid-template-columns: 1fr; }
.dishdetails .content .info .separator { position: relative; }
.dishdetails .content .info .separator:before { content: ''; width: 1px; height: calc(100% - 3em); left: 50%; top: 50%; position: absolute; background: #0002; display: block; transform: translate(-50%, -50%); }

/* Search */
main.search h1 { font-family: 'canelabold'; font-weight: 400; line-height: 1;}
main.search .box { border-radius: 1.5em; margin:2em 0; padding:24px; background:#fff; min-height:100px; box-shadow: 0 0 38px var(--box-shadow-color);  }
main.search .searchresult.notfound { text-align: center; animation:fadeIn .4s; }

/* Nav basket */
nav .cartcontent table { width:100%; font-size:.9em; border-spacing: 0px; border-collapse: separate; }
nav .cartcontent table th, nav .cartcontent table td { padding:1em; vertical-align: top; }
nav .cartcontent table th { border-bottom: 1px solid var(--bg-secondary); padding-top:2em; }
nav .cartcontent table th, nav .cartcontent table td, nav .cartcontent table td:first-child:last-child { text-align: left; padding-left:0; } 
nav .cartcontent table th:last-child, nav .cartcontent table td:last-child { text-align: right; padding-right:0; }
nav .cartcontent table td.total { border-top: 1px solid var(--bg-secondary); font-size:1.2em; font-weight: 600; padding-bottom: 0; }
nav .cartcontent table td.total div:first-child { float:right; }

/* Checkout */
main.checkout .progress { display: grid; width:71%; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; grid-gap:2em; padding:3em 3em 0; align-items: center; transition: all .3s ease-in-out; }
main.checkout .progress > div.clickable { padding-left:48px; position: relative; animation:fadeInUpSmall 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; opacity: 0; line-height: 1.4; }
main.checkout .progress > div.clickable:before { content:''; position: absolute; left:0; top:50%; transform: translateY(-50%); width:32px; height:32px; border-radius:50%; border:1px solid var(--bg-primary);  }
main.checkout .progress > div.clickable.active:before, main.checkout .progress > div:has( ~ .active):before { background:var(--bg-primary); }
main.checkout .progress > div.clickable:after { content: ''; font-size: 1.5em; font-weight: 600; padding-top:1px; letter-spacing: -2px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; justify-content: center; }
main.checkout .progress > div.clickable.active:after, main.checkout .progress > div:has( ~ .active):after { color:#fff; }
main.checkout .progress > div[data-step="1"]:after { content:'1'; } main.checkout .progress > div[data-step="1"] { animation-delay:.3s; }
main.checkout .progress > div[data-step="2"]:after { content:'2'; } main.checkout .progress > div[data-step="2"] { animation-delay:.4s; }
main.checkout .progress > div[data-step="3"]:after { content:'3'; } main.checkout .progress > div[data-step="3"] { animation-delay:.5s; }
main.checkout .progress > div[data-step="4"]:after { content:'4'; } main.checkout .progress > div[data-step="4"] { animation-delay:.6s; }
main.checkout .progress > div.separator { background:url('/wp-content/themes/smageriet/_img/icon_longarrow.svg') no-repeat right center; background-size:auto 8px; height: 100%; animation:fadeIn .4s ease-in-out forwards 1s; opacity: 0; }
main.checkout .layers { height: 25vh; overflow:hidden; transition: height .5s ease-in-out; }
main.checkout .layer { display:none; }
main.checkout .layer.left { animation:fadeInLeft .5s cubic-bezier(0.075, 0.82, 0.165, 1); }
main.checkout .layer.right { animation:fadeInRight .5s cubic-bezier(0.075, 0.82, 0.165, 1); }
main.checkout .empty { position:relative; min-height: 200px; margin-bottom:64px; padding:64px 32px; background: url('/wp-content/themes/smageriet/_img/icon_ribboncut.svg') no-repeat center center; background-origin: content-box; background-size:contain; }
main.checkout .empty:after { content:'Checkout trin er under udarbejdelse'; position: absolute; width:100%; height:calc(100% - 24px); top:0; left:0; color:#000; justify-content: center; display: flex; align-items: end; }
main.checkout .layer .pagewidth { display:grid; grid-template-columns: 5fr minmax(300px, 2fr); grid-gap:2em; }
main.checkout .layer .pagewidth .content .box { border-radius: .5em; margin-bottom:.5em; padding:24px; background:var(--bg-quinary); min-height:100px; box-shadow: 0 0 38px var(--box-shadow-color); }
/* main.checkout .layer .pagewidth .content .box:first-child { border-top-left-radius: .5em; }
main.checkout .layer .pagewidth .content .box:last-child { border-bottom-left-radius: .5em; } */
main.checkout .layer .pagewidth .content + div .box { border-radius: 0; padding:24px; background:var(--bg-quinary); min-height:100px; box-shadow: 0 0 38px var(--box-shadow-color); }
main.checkout .layer .pagewidth .content + div .box:first-child { border-top-right-radius: .5em; }
main.checkout .layer .pagewidth .content + div .box:not(:first-child) { margin-top:1em; }
main.checkout .layer .pagewidth .content + div .box:nth-last-child(2) { border-radius: .5em; }
main.checkout .layer .pagewidth .content + div .box h3 { margin:0; }
main.checkout .layer .pagewidth .content + div .actions { margin-top:2em; }

/* main.checkout .layer .pagewidth .content .box { animation:fadeInUpSmall .5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; opacity: 0; } */
main.checkout .layer .pagewidth .content .box { position: relative; }
main.checkout .layer .pagewidth .content .box:nth-child(1) { animation-delay: .2s }
main.checkout .layer .pagewidth .content .box:nth-child(2) { animation-delay: .3s }
main.checkout .layer .pagewidth .content .box:nth-child(3) { animation-delay: .4s }
main.checkout .layer .pagewidth .content .box:nth-child(4) { animation-delay: .5s }
main.checkout .layer .pagewidth .content .box:nth-child(5) { animation-delay: .6s } 
main.checkout .layer .pagewidth .content .box:nth-child(n+6) { animation-delay: .7s }

main.checkout .layer .pagewidth .content .box h3 { color:var(--bg-primary); font-size: 1.2em; }
main.checkout .layer .pagewidth .content .cartcontent { min-height: 200px; transition: opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1); }

main.checkout .layer .pagewidth .content .cartcontent.empty { opacity:0; animation:fadeIn 1s ease-in-out forwards; position:relative; margin-bottom:64px; padding:64px 32px; background: url('/wp-content/themes/smageriet/_img/i_pose.svg') no-repeat center center; background-origin: content-box; background-size:contain; }
main.checkout .layer .pagewidth .content .cartcontent.empty:after { content:'Indkøbskurven er tom'; position: absolute; width:100%; height:calc(100% - 24px); top:0; left:0; color:var(--bg-tertiary); justify-content: center; display: flex; align-items: end;  }

main.checkout .busy:not(button):not(a) { opacity: .5; }
main.checkout .busy:not(button):not(a):before { display: none; }

main.checkout .layer .pagewidth .content .cartcontent .editicon { width:1.2em; height:1.2em; background-size:12px; vertical-align: text-bottom; background-image:url(/wp-content/themes/smageriet/_img/i_edit_green.svg); }
main.checkout .layer .pagewidth .content .cartcontent .deleteicon { width:1.2em; height:1.2em; background-size:12px; vertical-align: text-bottom; background-image:url(/wp-content/themes/smageriet/_img/i_delete_green.svg); }

main.checkout .layer .pagewidth .content .cartcontent .dishes { padding:1em 0 0; }
main.checkout .layer .pagewidth .content .cartcontent .extradishes li + li { margin-top:3em; }

main.checkout .layer .pagewidth .content .cartcontent ul { list-style: none; padding-left: 0; margin:1em 0; }
main.checkout .layer .pagewidth .content .cartcontent ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; }
main.checkout .layer .pagewidth .content .cartcontent ul li:after { content: ''; position: absolute; left: 0; top: .2em; width: 1em; height: 1em; background-repeat: no-repeat; background-image: url('/wp-content/themes/smageriet/_img/i_check_green.svg'); background-size: contain; }

main.checkout .layer .pagewidth .content .box .menusummary { display: inline-grid; grid-template-columns: 1fr 32px 1fr; padding:1em 0; }
/* main.checkout .layer .pagewidth .content .box .menusummary .separator { position: relative; }
main.checkout .layer .pagewidth .content .box .menusummary .separator:before { content: ''; width: 1px; height: calc(100% - 1em); left: 50%; top: 50%; position: absolute; background: var(--bg-secondary); display: block; transform: translate(-50%, -50%); } */
main.checkout .layer .pagewidth .content .box .menusummary .price { display:block; font-size:1.2em; font-weight: 600; margin:.25em 0 0; line-height: 36px; }

main.checkout .layer .pagewidth .content .box .controls { display: inline-grid; grid-template-columns: 1fr auto auto auto; grid-gap:.5em; align-items: center; }
main.checkout .layer .pagewidth .content .box .controls span { grid-column:1 / span 4; }
main.checkout .layer .pagewidth .content .box .controls input,
main.checkout .layer .pagewidth .content .box .controls button { width:36px; height:36px; padding:0; text-align: center; }            

main.checkout .layer .pagewidth .box.summary table { width:100%; border-spacing: 0px; border-collapse: separate; }
main.checkout .layer .pagewidth .box.summary table tr td { line-height: 1.5;}
main.checkout .layer .pagewidth .box.summary table tr td, main.checkout .layer .pagewidth .box.summary table tr td:first-child:last-child { text-align: left; padding-left:0; vertical-align: top; } 
main.checkout .layer .pagewidth .box.summary table tr td:last-child { text-align: right; padding-right:0; }

main.checkout .layer .pagewidth .box.summary table:has([data-placeholder="LateFee"]:empty) { display: none; }

/* main.checkout .layer .pagewidth .box table { border-spacing:0; border-collapse: separate; }
main.checkout .layer .pagewidth .box table td { padding:0; } */

main.checkout .layer form .grid { max-width: 640px; }
main.checkout .layer form input:not([type=checkbox]):not([type=radio]), main.checkout .layer form textarea, main.checkout .layer form select { max-width: 640px; }

/* main.checkout .layer .pagewidth .actions button { transition:all .3s ease-in-out; } */
main.checkout .layer .open365 { position: absolute;
    right: 1em;
    top: 4em;
    width: 10em;
    height: 10em;
    background: url(/wp-content/themes/smageriet/_img/badge_open365.svg) no-repeat center center;
    background-size: contain; }
main.checkout .layer .deliveryinfo { line-height: 1.5; }
main.checkout .box.voucher>div.voucherform { animation:fadeInRight .3s forwards cubic-bezier(0.075, 0.82, 0.165, 1); }
main.checkout .box.voucher>div.voucherinfo { animation:fadeInRight .3s forwards cubic-bezier(0.075, 0.82, 0.165, 1); }
main.checkout .box.coop>div.coopform { animation:fadeInLeft .3s forwards cubic-bezier(0.075, 0.82, 0.165, 1); }
main.checkout .box.voucher { overflow:hidden; animation:fadeIn .3s ease-in-out; }
main.checkout .box.coop { overflow:hidden; animation:fadeIn .3s ease-in-out; }

main.checkout #deliveryinfo_time:not(:empty) { opacity: 0; transform-origin: 25% 50%; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0,1,0,1); animation-name: fadeFlipIn; }
main.checkout #deliveryinfo_time:not(:empty)>span {
    font-size: .8em;
    display: block;
    border-radius: .5em;
    border:1px solid #80808022;
    height: 42px;
    line-height: 1;
    padding: 9px 8px 6px 36px;
    background-color: #80808011;
    background-image:url('/wp-content/themes/smageriet/_img/i_check_green.svg'); 
    background-position: left 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    color:#555;    
    opacity: 0; transform-origin: 25% 50%; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0,1,0,1); animation-name: fadeFlipIn; 
}

main.checkout #deliveryinfo_msg:not(:empty) {     
    display: block;
    padding: 1em 0 0;
    font-size: .8em;
    opacity: 0;
    background: #80808011;
    padding: 10px;
    border: 1px solid #80808022;
    border-radius: .5em;
    animation: fadeIn .5s ease-in-out forwards;
    margin: 1em 0 0;
    max-width: 640px;
}

main.checkout .paymentmethod { width:100%; }
main.checkout .paymentmethodlogos { gap:1em; margin-bottom:1em; }
main.checkout .paymentmethodlogo { width:48px; aspect-ratio: 16 / 9; background-size:contain; background-repeat: no-repeat; background-position: center center; }

main.checkout label:has(~select[data-numoptions="1"]):before, main.checkout label:has(~select[data-numoptions="1"]):after { display:none !important; }
main.checkout select[data-numoptions="1"] { background:#0000; border:0; padding:0; pointer-events: none !important; font-weight: 700; }
main.checkout select[data-numoptions="1"]:focus { box-shadow: none;  }

/* HR & lists  */
hr { height:0px; border:0; border-top:1px solid var(--bg-tertiary); margin:1em 0; }
ul { padding-left: 1.5em; }

/* Badges */
.badge, .badge.primary { display: inline-flex; padding:.5em 1em; color:var(--font-tertiary); background:var(--bg-primary); border-radius: .5em; margin-right:.25em; align-items: center; }
.badge.secondary { background:var(--bg-primary); color:#fff; border:1px solid var(--bg-primary); }

/* Linkbutton */
.linkbutton { display:inline-grid; grid-template-columns: auto 1fr; align-items: center; border-radius: .5em; background:var(--input-bg); position: relative; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow .5s ease-in-out; }
.linkbutton:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; right:.75em; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_right.svg') no-repeat left center; margin-left:.8em; }
.linkbutton div.img { background-repeat: no-repeat; background-position: center left; background-size: contain; width: 36px; height: 36px; margin: 1em 1em 1em 2em;}
.linkbutton div.text { padding:1em 3.2em 1em 0em; text-align: left; }

/* Inputs */
input:not([type='checkbox']):not([type='radio']), textarea, select { font-family: 'Montserrat'; color:var(--font-primary); width:100%; min-height: 42px; background:var(--input-bg); border:0; border-radius: .5em; padding:0 10px;box-shadow:none; }
input:not([type='checkbox']):not([type='radio']).dark, textarea.dark, select.dark { color:var(--font-secondary); background:var(--input-bg-secondary); }

input:not([type='checkbox']):not([type='radio']), select  { height:36px; }
input:not([type='checkbox']):not([type='radio']):focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--input-focus); transition: box-shadow .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
input[type=search] { padding-right:38px !important; }
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    width: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
    background-size: 10px 10px;
    cursor: pointer;
    filter:invert(1);
}
input[type=search] ~ span { display:inline-block; position:absolute; top:0px; right:0px; width:42px; height:42px; border-radius:.5em; background:#fff0 url('/wp-content/themes/smageriet/_img/i_search.svg') no-repeat center center; background-size:14px; z-index: 2; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=checkbox], input[type=radio] { animation: fadeIn 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; border-radius: .25em; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1.25em; height: 1.25em; margin-top: -0.125em; margin-right: 0.375em; margin-left: 0; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0.375em; margin-inline-end: 0.375em; border-width: 2px; font-size: inherit; vertical-align: middle; cursor: pointer; background-color: #00000011; border: 0; color: #000; background-position: center; background-size: 0.75em auto; background-repeat: no-repeat; box-shadow: inset 0 0 2px #0002; }
input[type=checkbox]:checked, input[type=radio]:checked { background-color:var(--button-color); background-image: url('/wp-content/themes/smageriet/_img/i_check.svg'); background-size:10px; animation: fadeZoomIn 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; }
input[type=checkbox] + label, input[type=radio] + label { cursor:pointer; margin:0; user-select: none; }
textarea { padding:10px; }
label { font-size:.9em; margin:5px 0; display:inline-block; user-select: none; }

.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; border:0; }  
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-quinary); -webkit-transition: .4s; transition: .4s; border-radius: 28px; }  
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: var(--input-bg); -webkit-transition: .4s; transition: .4s; border-radius: 50%; }  

button { font-family: 'Montserrat'; background-repeat: no-repeat; background-position: center center; background-size: 10px; }
button.add { background-image:url('/wp-content/themes/smageriet/_img/icon_plus_white.svg'); }
button.subtract { background-image:url('/wp-content/themes/smageriet/_img/icon_minus_white.svg'); }

/* Input states */
input:checked + .slider { background-color: var(--button-color); }  
input:focus + .slider { box-shadow: 0 0 2px var(--bg-primary); }  
input:checked + .slider:before { transform: translateX(calc(100% + 2px)); background-color:var(--input-bg); }
input:not([type='checkbox']):not([type='radio']):not(:disabled).error, textarea:not(:disabled).error, select:not(:disabled).error { border-color:#cc0000; }
div:has(>input),div:has(>select),div:has(>textarea) { position: relative; }

/* Input custom appearances */
select { appearance: none; background-image:url('/wp-content/themes/smageriet/_img/menu_down.svg'); background-position: right 10px center; background-repeat: no-repeat; background-size: 8px 8px; padding-right:50px; cursor:pointer; }
select:active:hover { background-image:url('/wp-content/themes/smageriet/_img/menu_up.svg'); }
select.timepicker, select.timepicker:active:hover { appearance: none; background-image:url('/wp-content/themes/smageriet/_img/icon_clock.svg'); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px 16px; padding-right:50px; cursor:pointer; }
input:not([type='checkbox']):not([type='radio']).datepicker, input:not([type='checkbox']):not([type='radio']).datepicker:active:hover { appearance: none; background-image:url('/wp-content/themes/smageriet/_img/icon_calendar.svg'); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px 16px; padding-right:50px; cursor:pointer; }

/* Input validation */
div:has(>.validated)>label, div:has(>.error)>label, div:has(>.required)>label { position: relative; }
div:has(>.validated)>label:before, div:has(>.error)>label:before, div:has(>.required)>label:after { content:''; position: absolute; background-size:contain; background-repeat: no-repeat; }
div:has(>.required)>label:after { width:6px; height:6px; top:0; right:auto; margin-left:.25em; background-image: url('/wp-content/themes/smageriet/_img/icon_required_red.svg'); animation: fadeIn .3s ease-in-out forwards; }
form:not(.unavailable) div:has(>.validated)>label:before { width:10px; height:10px; bottom:0; right:0; background-image: url('/wp-content/themes/smageriet/_img/i_check_green.svg'); background-size:contain;  animation: fadeIn .3s ease-in-out forwards; }
form:not(.unavailable) div:has(>.error)>label:before { width:10px; height:8px; bottom:0; right:0; background-image: url('/wp-content/themes/smageriet/_img/icon_close_red_thick.svg'); animation: fadeZoomIn .3s ease-in-out forwards; }

/* Nav */
nav { position: absolute; top:0; width:100%; transition: box-shadow .5s ease-in-out; box-shadow:0 0 25px #00000022; z-index: 999;}
nav div.top { background: var(--bg-primary); color:var(--font-secondary); height:98px; box-shadow: inset 0 -32px 32px -16px #0002; }
nav div.top .pagewidth { height:100%; display:grid; grid-template-columns: auto auto 1fr auto; }
nav div.top .logo { width:298px; padding:0 24px 17px; background: url('/wp-content/themes/smageriet/_img/smageriet_logo_beige.svg') no-repeat center center; background-size:contain; background-origin: content-box; }

    nav div.top .pagewidth>div.info, nav div.top .pagewidth>div.actions { display:grid; grid-template-columns: auto auto auto; align-items: center; }
    nav div.top .pagewidth>div>.item                { display:flex; height:100%; align-items: center; position: relative; }
    nav div.top .pagewidth>div>.item                >.clickable { display: flex; flex-direction:row; align-items: center; padding:0 1.5em; position: relative; }
    nav div.top .pagewidth>div>.item                >.clickable:before { content:''; height:50%; width:1px; background: var(--font-secondary); position: absolute; left:0; top:50%; transform: translateY(-50%) rotate(30deg); }    
    nav div.top .pagewidth>div>.item                >.clickable:after { display:inline-block; margin-left:.5em; content:''; width:28px; height:34px; background-repeat:no-repeat; background-position: center right; animation:fadeIn .5s forwards; transition: transform .1s ease-in;  background-size: contain; }    
    nav div.top .pagewidth>div>.item                >.clickable:hover:after, nav div.top .pagewidth>div>.item>.clickable:hover .numitems { transform: scale(1.1); }
    nav div.top .pagewidth>div>.item:first-child    >.clickable:before { display:none; }
    nav div.top .pagewidth>div>.item                >.clickable>span { white-space: nowrap; animation:fadeIn 1s forwards; }
    nav div.top .pagewidth>div>.item                .submenu { box-shadow: inset 0 32px 32px -16px #0004;  overflow-x:hidden; min-width:100%; visibility: hidden; opacity:0; padding:0 24px 24px 24px; transition: visibility .2s, opacity .2s ease-in-out; position: absolute; top:100%; background:var(--bg-primary); z-index: 999; border-bottom-left-radius: .75em; border-bottom-right-radius: .75em; }
    nav div.top .pagewidth>div>.item                .submenu .fadeInLeft { animation:fadeInLeft .2s forwards cubic-bezier(0.075, 0.82, 0.165, 1); }
    nav div.top .pagewidth>div>.item                .submenu .fadeInRight { animation:fadeInRight .3s forwards cubic-bezier(0.075, 0.82, 0.165, 1); }
    nav div.top .pagewidth>div>.item                .submenu h3 { font-size:1.5em; } 
    nav div.top .pagewidth>div>.item                .submenu p:last-child { margin-bottom:0; }            
    nav div.top .pagewidth>div>.item                .submenu a { text-decoration: none; }            
    nav div.top .pagewidth>div>.item                .submenu hr { border-color: var(--bg-secondary); }            
    nav div.top .pagewidth>div>.item.phone          >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_phone.svg'); width:20px; }
    nav div.top .pagewidth>div>.item.openinghours   >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_clock.svg'); width:22px; }
    nav div.top .pagewidth>div>.item.search         >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_search.svg'); width:14px; margin-left:.66em; }
    nav div.top .pagewidth>div>.item.customerlogin  >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_user.svg'); width:19px; }    
    nav div.top .pagewidth>.actions>.item           .submenu { right:0; width: 360px; }
    nav div.top .pagewidth>.actions>.menutrigger    { display:none; width: 32px; height: 100%; background: url(/wp-content/themes/smageriet/_img/menu_trigger.svg) no-repeat center right; background-size: 22px; margin:6px 24px 0 0; }
    .sidr-open nav div.top .pagewidth>.actions>.menutrigger { background-image: url(/wp-content/themes/smageriet/_img/i_close.svg); background-size: 20px; }

    /* Basket */
    nav div.top .pagewidth>div>.item.cart           >.clickable { position: relative; }
    nav div.top .pagewidth>div>.item.cart           >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_pose.svg'); width:21px; background-size: contain; }
    nav div.top .pagewidth>div>.item.cart           >.clickable .numitems { position: absolute; right: 20px; top: 9px; width: 22px; height: 20px; display: flex; justify-content: center; z-index: 10; font-size: 1em; align-items: center; color: var(--font-primary); font-weight: 600; /* transform-origin: 100% 50%; */ transition: transform .1s ease-in; }
    nav div.top .pagewidth>div>.item.cart           .submenu .deletecart { float:right; width:32px; height:32px; background: url('/wp-content/themes/smageriet/_img/i_delete.svg') no-repeat center right; background-size: 16px 16px; }
    nav div.top .pagewidth>div>.item.cart           .submenu .editcart { float:right; width:32px; height:32px; background: url('/wp-content/themes/smageriet/_img/i_edit.svg') no-repeat center right; background-size: 16px 16px; }
    nav div.top .pagewidth>div>.item.cart           .submenu .cartcontent:empty { min-height:200px; position:relative; padding:32px; opacity: .25; background: url('/wp-content/themes/smageriet/_img/i_pose.svg') no-repeat center center; background-origin: content-box; background-size:contain; }
    nav div.top .pagewidth>div>.item.cart           .submenu .cartcontent:empty:after { content:'Indkøbskurven er tom'; position: absolute; width:100%; height:100%; top:0; left:0; color:var(--bg-tertiary); justify-content: center; display: flex; align-items: end; }
    nav div.top .pagewidth>div>.item.cart           .submenu .transportpricewrapper { background: #0003; padding:6px 24px 24px; margin:12px -24px -24px; }
    nav div.top .pagewidth>div>.item.cart           .submenu .transportprice .result span { text-align: end; }
        
    /* Sidr */
    .sidr { background: var(--bg-quaternary); display:none; position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 300px; overflow-x: hidden; overflow-y: auto; border-left:1px solid var(--input-bg-secondary); user-select: none; padding:2em; }
    .sidr .sidr-inner { padding: 0 0 15px; }
    .sidr.right { left: auto; right: -300px; }
    .sidr ul { display: block; margin: 0; padding: 0; font-size:12px; }
    .sidr ul li { display: block; margin: 0; }
    .sidr ul li a { display: block; text-decoration: none; line-height: 32px; }
    .sidr ul li a.active { color: var(--primary); }
    .sidr ul li ul li ul li { padding-left:10px; }
    .sidr .submenu_trigger { display:block; background: url('/wp-content/themes/smageriet/_img/menu_down.svg') no-repeat right center; background-repeat: no-repeat; background-size: 8px; cursor:pointer; }
    .sidr ul>li>.submenu_trigger { font-size:1.1em; font-weight: 600; background-size: 10px; }    
    .sidr .submenu_trigger + ul { display:none; }
    .sidr .submenu_trigger.shown { background-image: url('/wp-content/themes/smageriet/_img/menu_up.svg'); }
    .sidr .submenu_trigger.shown + ul { display:block; animation:fadeInSubmenu .3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; }  

    .sidr input[type=search] ~ span { background: #fff0 url(/wp-content/themes/smageriet/_img/i_search_green.svg) no-repeat center center; background-size:14px; }

nav div.bottom { background: var(--bg-secondary); height:48px; }
.scrolled nav div.bottom { background: var(--bg-primary); }

    nav div.bottom .pagewidth { height:100%; position: relative; padding:0 24px; display: grid; grid-template-columns: auto 1fr; }
    nav div.bottom .pagewidth>div.logo { width:0; background:url('/wp-content/themes/smageriet/_img/smageriet_logo_beige.svg') no-repeat left 6px; background-size: auto 24px; transition: width .2s cubic-bezier(0.075, 0.82, 0.165, 1); }
    nav div.bottom .sf-menu { height:100%; }    
    nav div.bottom .sf-menu>li>a { transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); padding-bottom: 10px; }
    nav div.bottom .sf-menu>li:first-child>a { padding-left:0; }
    nav div.bottom .sf-menu>li:hover>a { opacity: .75; }
    nav div.bottom .sf-menu a { color: var(--font-secondary); height: 100%; box-sizing: border-box; display: flex; align-items: center; }
    nav div.bottom .sf-menu .sf-with-ul:after { border:0; width:8px; height:8px; background: url('/wp-content/themes/smageriet/_img/menu_down_white.svg') no-repeat center center; background-size: contain; top:50%; transform:translateY(-50%); margin:0; }
    nav div.bottom .sf-menu .sf-mega { width:100%; left:0; border-radius: 0 0 .75em .75em; }
    nav div.bottom .sf-menu li.sf-with-mega { position: static; }
    nav div.bottom .sf-menu ul.submenu, nav div.bottom .sf-menu ul.submenu ul { box-shadow: inset 0 32px 32px -16px #0002; padding:16px 48px 32px 16px; background:var(--bg-secondary); color:var(--font-secondary); border-radius: 0 0 .5em .5em; }    
    nav div.bottom .sf-menu ul.submenu { margin-left:-16px; }
    nav div.bottom .sf-menu ul.submenu ul { border-radius: .5em; top:0; padding: 16px; }
    nav div.bottom .sf-menu ul li a.sf-with-ul:after { right: -1em; background: url('/wp-content/themes/smageriet/_img/menu_right.svg') no-repeat center center; }
    /* nav div.bottom .sf-menu ul li a { color:#555; } */
    nav div.bottom .sf-menu ul li a:hover { opacity: .85; }
    nav div.bottom .sf-menu .sf-mega>a.Link-knap { position:absolute !important; width:150px; height:auto; left:50%; bottom:-20px; transform: translateX(-50%); box-shadow: 0 0 38px #00000033; padding:10px 32px 10px 16px; }
    nav div.bottom .sf-menu .sf-mega>a.Link-knap:hover { padding-left:24px; padding-right:24px; }
    nav div.bottom .sf-menu .sf-mega>a.Link-knap:after { right:0; position: absolute; background-image: url('/wp-content/themes/smageriet/_img/button_right.svg'); margin-top:-10px; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-grid { display:grid; grid-template-columns: 2fr 3fr 3.5fr; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section { padding:32px; box-shadow: inset 0 32px 32px -16px #0002; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section:nth-child(1) { background: var(--bg-primary); border-bottom-left-radius: .5em; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section:nth-child(2) { background: var(--bg-secondary); }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section:nth-child(3) { background: var(--bg-secondary); border-bottom-right-radius: .5em; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section ul { column-count: 2; column-gap: 32px; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-section ul.mega-seasons { column-count: 1; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-section ul li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-section ul li a { padding-left:0; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section ul li a.toggler { font-style: italic; font-weight: 700; }
    nav div.bottom .sf-menu .sf-mega .sf-mega-section p { font-family:'canelabold'; color:var(--font-secondary); font-size:1.2em; font-weight: 600; display: table; white-space: nowrap; width: calc(100% - 20px); margin-bottom: 1.5em; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-section p:after { border-top: 1px solid var(--font-secondary); content: ''; display: table-cell; position: relative; top: 0.6em; width: 100%; }    
    nav div.bottom .sf-menu .sf-mega .sf-mega-section p:after { left: 20px; }        
    nav div.bottom .sf-menu .sf-mega .sf-mega-section li.hiddenLink { transition: all .3s ease-in-out; }

    /* Subnav */
    main .subnav { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); }
    main .subnav .submenu { position: absolute; width:240px; top:42px; left:24px; }    
    main .subnav + .elements>.element .pagewidth { padding-left: 286px; }
    main .elements + .subnav + .elements>.element .pagewidth { padding-left: 0px; }
    main .elements:has(+ .subnav) .element .pagewidth { padding-right: 286px; }

    main .subnav .box { background:var(--input-bg); border-radius: 0 1.5em 1.5em 1.5em; padding:24px 24px 24px 42px; box-shadow: none; transition: box-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1); }
    main .subnav .box > p.title { font-size:1.5em; font-weight: 700; margin:0; }
    main .subnav .box ul { list-style: none; padding:0; }
    main .subnav .box ul ul { padding:.5em 0 .25em 1em; }
    main .subnav .box ul > li { padding:.25em 0; position: relative; }    
    main .subnav .box ul > li a { line-height:1.4; text-decoration: none; }
    main .subnav .box ul > li.current_page_item:before { content:''; background:var(--bg-primary); height:5px; width:24px; position: absolute; left:-42px; top:50%; margin-top:-2.5px; border-radius: 0; animation:swingInLeft 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }
    main .subnav .box ul ul > li.current_page_item:before { left:calc(-1em + -42px); }

    /* Selection */
    main .subnav .selection { position: absolute; width:240px; top:42px; right:24px; }
    main .subnav .selection .pricetag { transform: rotate(0); animation: fadeIn .5s ease-in-outforwards; display:grid; align-content: center; width:calc(100% - 32px); margin:0 auto -40% auto; aspect-ratio: 1/1; background:url('/wp-content/themes/smageriet/_img/i_splash3.svg') no-repeat center center; background-size: contain; position: relative; color:#fff; z-index: 2;}
    main .subnav .selection .pricetag span { display: block; text-align: center; }
    main .subnav .selection .pricetag span:nth-child(1) { font-size:1.2em; margin-top:-.5em; font-weight: 600; }
    main .subnav .selection .pricetag span:nth-child(2) { font-size:3em; font-weight: 600; font-family: 'canelabold'; }
    main .subnav .selection .pricetag span:nth-child(3) { font-size:1.2em; margin:5px 0 10px; }
    main .subnav .selection .pricetag span:nth-child(4) { font-size:.8em; opacity: .75; }
    main .subnav .selection .pricetag span:nth-child(5) { font-size:.8em; opacity: .75; }
    
    main .subnav .selection .box { border-radius: .5em .5em 1.5em 1.5em; padding:100px 24px 0 24px; background:var(--input-bg); min-height:200px; z-index: 0; position: relative; z-index: 1; }
    main .subnav .selection .saveforlaterseparator { height:32px; margin:0 -24px 24px; border-radius: 0 0 1.5em 1.5em; background:var(--input-bg); }
    main .subnav .selection .saveforlater { border-radius: 0 0 1.5em 1.5em; padding: 0 24px 24px; background: var(--bg-quaternary); margin:0 -24px; }
    main .subnav .selection .saveforlater .Link { display:none; }
    main .subnav .selection .box .controls .infoicon { width:7px; height:7px;}

    main .subnav .selection .dishtypes { padding: 1em 0; }
    main .subnav .selection .dishtypes .trigger { display:none; position: relative; text-transform: uppercase; background: var(--bg-primary); color:var(--font-secondary); margin:-1em -1em 0; height:32px; align-items: center; justify-content: center; border-radius: .33em .33em 0 0; }
    main .subnav .selection .dishtypes .trigger:hover:not(:active) { opacity: 1; }
    main .subnav .selection .dishtypes .trigger:before { content:''; position: absolute; top:-20px; left:50%; width:50px; height:20px; border-radius: .5em .5em 0 0; background-color: var(--bg-primary); background-image: url(/wp-content/themes/smageriet/_img/menu_up_white.svg); background-repeat: no-repeat; background-position: center 10px; background-size: 10px; transform:translateX(-50%); }
    main .subnav .selection .dishtypes.shown .trigger:before { background-image: url(/wp-content/themes/smageriet/_img/menu_down_green.svg); }
    main .subnav .selection .dishtypes .trigger>span { font-size:.9em; }
    main .subnav .selection .dishtypes .trigger>span:before { content:'Se din samlede menu'; }
    main .subnav .selection .dishtypes.shown .trigger>span:before { content:'Skjul oversigt'; }
    main .subnav .selection .dishtypes .dishtype { position: relative; padding: 0.5em 2em 0.5em 1em; background: #8f7c5911; border-radius: 0.4em; margin-bottom: 0.5em; font-size: .9em; }
    main .subnav .selection .dishtypes .dishtype>span { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    main .subnav .selection .dishtypes .dishtype:after { content: ''; position: absolute; height: 8px; width: 32px; top:10px; right: 0; background: url(/wp-content/themes/smageriet/_img/menu_right.svg) no-repeat center center; }
    main .subnav .selection .dishtypes .dishtype[data-required="1"].validated, main .subnav .selection .dishtypes .dishtype:not([data-numselected="0"]).validated { background-color: var(--primary); color:#fff; animation:flipIn .3s ease-in-out; }
    main .subnav .selection .dishtypes .dishtype[data-required="1"].validated:after, main .subnav .selection .dishtypes .dishtype:not([data-numselected="0"]).validated:after { background: url(/wp-content/themes/smageriet/_img/i_check.svg) no-repeat center center; filter:brightness(0) invert(1); background-size:contain; }
    main .subnav .selection .dishtypes .dishtype[data-required="1"]:not(.validated):before { animation:fadeIn .5s ease-in-out; content: ''; position: absolute; height: 16px; width: 16px; top: 5px; left: -8px; background: var(--secondary) url(/wp-content/themes/smageriet/_img/i_exclamation.svg) no-repeat center center; background-size: contain; border-radius: 50%; }        
    main .subnav .selection .dishtypes:has(.dishtype[data-required="1"]:not(.validated)) .trigger:after { content:''; margin-left:.5em; height: 16px; width: 16px; background: url(/wp-content/themes/smageriet/_img/i_exclamation.svg) no-repeat center center; background-size: contain; }
    
    /* main .subnav .selection .controls { display: grid; grid-template-columns: auto 1fr; grid-gap:1em; align-items: center; } */
    main .subnav .selection .controls select { padding-right:28px; background-color: var(--bg-senary); }
    main .subnav .selection .controls input,
    main .subnav .selection .controls button { width:36px; height:36px; padding:0; text-align: center; }            
    main .subnav .selection .controls button.addtobasket { width:100%; height:50px; padding-right:32px; overflow: visible; transition:all .3s ease-in-out; }    
    main .subnav .selection .controls .addtobasketwrapper { width:100%; grid-column:1 / span 2; margin-top:16px; position: relative; }
    main .subnav .selection .controls .addtobasketwrapper:before { content:''; position: absolute; width:100%; height:1px; background:#ddd; top:-12px; left:0; }
    /* main .subnav .selection .controls button.addtobasket:disabled:before { background:#555; } */
    main .subnav .selection .controls button.addtobasket:after{ filter:brightness(0) invert(1); opacity: 1; content: ''; position: absolute; top: 50%; transform: translate(0%, -50%); width: 20px; height: 100%; right:36px; margin-bottom: 1px; background: url('/wp-content/themes/smageriet/_img/i_pose.svg') no-repeat left center; background-size: contain; margin-left: .8em; }

/* Footer */
footer .bottom { background: var(--bg-primary); min-height:200px; padding:16px 50px 40px; color:var(--font-secondary); font-size:1.1em; line-height: 1.8;}
footer .bottom .pagewidth { padding:0 24px; }
footer .bottom .pagewidth>.grid { grid-gap: 10%; }
footer .bottom .pagewidth>.grid:first-child>div { display: flex; align-items: end; }
footer .bottom .logo { height:40px; background:url('/wp-content/themes/smageriet/_img/smageriet_logo_beige.svg') no-repeat left 0; background-size:contain; }

footer .bottom hr { border-color:#ffffff22; margin-left:-24px; margin-right:-24px; }
footer .bottom h4 { margin:0; }
footer .bottom ul { padding:0 0 0 1em; margin:0; }
footer .bottom ul li a, footer .bottom a { color:var(--font-secondary); text-decoration: none; }
footer .bottom ul li a:hover { color:var(--input-bg); }

footer .bottom .country { display: flex; align-items: end; justify-content: center; min-height: 320px; background-size: contain; background-repeat: no-repeat; background-position: center center; }
footer .bottom .smiley { display: grid; grid-template-columns: auto 1fr; }
footer .bottom .smiley .icon { width:48px; height:32px; background:url('/wp-content/themes/smageriet/_img/icon_smiley.svg') no-repeat left center; background-size:contain; }
footer .bottom .smiley span { display:flex; align-items: center; }
footer .bottom .somelink { display: inline-block; width:32px; height:32px; background-size:32px 32px; background-repeat: no-repeat; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
footer .bottom .somelink:hover { transform: translateY(-3px); }
footer .bottom .somelink + .somelink { margin-left:1em; }

footer .end { min-height:50px; background:var(--bg-secondary); color:var(--font-secondary); box-shadow:0 0 25px #00000022; }
footer .end .pagewidth { padding:15px 24px; display: flex; }
footer .end .pagewidth a:before { content:'•'; text-decoration:none !important; color:#555 !important; margin:0 .5em; display:inline-block; }
footer .end .paymentlogos { margin-left: auto; }
footer .end .paymentlogo { display: inline-block; width:28px; height:20px; background-size:contain; background-repeat: no-repeat; background-position: center center; margin-left:.5em; filter: brightness(0) saturate(100%) invert(90%) sepia(21%) saturate(260%) hue-rotate(327deg) brightness(101%) contrast(86%); /* transition: filter .3s cubic-bezier(0.075, 0.82, 0.165, 1); */ }
/* footer .end .paymentlogo:hover { filter: grayscale(0); } */

/* Hero */
.herobg { position: relative; }
.herobg:before { content:''; position: absolute; width: 100vw; height:100%; background:linear-gradient(to bottom, var(--bg-quinary), #0000); z-index: -1; left:0; top:0; }
.hero { min-height:100px; display:grid; grid-template-columns: minmax(380px, 25%) 1fr; position: relative; border-radius: 0 0 .75em .75em; }
.hero .content { background:var(--bg-primary); color:var(--font-secondary); font-size:1.1em; line-height: 1.8; padding:50px; display:flex; align-items: center; flex-direction: row; border-radius: 0 0 0 .75em; }
.hero .content [title] { font-family: 'canelabold'; white-space: nowrap; }
.hero .content [title]:before { mix-blend-mode: overlay; left: -8%; top:0; transform-origin: 0 100%; mask-image: none; padding-bottom:0; }
.hero .slideshow { position: relative; min-width:100%; border-radius: 0 0 .75em; }
.hero .slideshow:before { padding-bottom: 56%; content: ''; float: left; } /* Min 16/9 aspect ratio = 56% - but allow to grow beyond */
.hero .slideshow:after { display: table; content: ''; clear: both; }
.hero .slideshow .prev, .hero .slideshow .next {  display:none; position: absolute; width:80px; height:64px; top:calc(100% - 64px); background:var(--bg-secondary); z-index: 1; background-repeat: no-repeat; background-size:8px;background-position: center center; transition:background-position-x .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
.hero .slideshow .prev { left:-81px; background-image: url('/wp-content/themes/smageriet/_img/slideshow_left.svg'); }
.hero .slideshow .prev:hover { background-position-x: 45%; }
.hero .slideshow .next { left:0; background-image: url('/wp-content/themes/smageriet/_img/slideshow_right.svg'); }
.hero .slideshow .next:hover { background-position-x: 55%; }
.hero .slideshow .pagination { margin-left:-190px; text-align: center; padding-top:10px; }
.hero .slideshow .pagination .swiper-pagination-bullet { background: var(--bg-primary); border-radius: 0; opacity: 1; height:4px; opacity: .25; }
.hero .slideshow .pagination .swiper-pagination-bullet-active { background: var(--bg-primary); opacity: 1;}
.hero .swiper { width:100%; height:100%; overflow:hidden; background: var(--bg-quaternary); opacity: 0; animation: lazyFadeIn 1s forwards ease-in-out; }
.hero .swiper .swiper-wrapper { overflow:hidden; border-radius: 0 0 .75em 0; }
.hero .swiper .swiper-slide { background:var(--bg-quaternary); background-size: cover; border-radius: 0 0 .75em; container-type: inline-size;}

.hero .swiper .swiper-slide>div.herotext { border-radius: .25em; position: absolute; min-width: 30%; bottom:3em; right:3em; padding:24px 36px; opacity: 0; animation: fadeInLeft 1s forwards ease-in-out; animation-delay: 1s; }
.hero .swiper .swiper-slide>div.herotext:before { 
    content: ''; 
    position: absolute; 
    left: 80%; 
    width: 0; 
    height: 0; 
    bottom: -20px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top-width: 20px;
    border-top-style: solid; 
    border-top-color: inherit;
}
.hero .swiper .swiper-slide>div.herotext:after { 
    content: ''; 
    position: absolute; 
    left: 80%; 
    width: 0; 
    height: 0; 
    bottom: -20px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #00000008; /* Adjust color as needed */
}

.hero .swiper .swiper-slide>div.herobadge { container-type: inline-size; opacity:0; animation: fadeFlipIn .3s ease-in-out forwards; animation-delay:1s; position: absolute; width: 25cqw; min-width: 150px; max-width: 300px; font-size:2.2cqw; top:3em; right:3em; transform: rotate(0); display:grid; align-content: center; aspect-ratio: 1/1; background:url('/wp-content/themes/smageriet/_img/i_splash3.svg') no-repeat center center; background-size: contain; color:#fff; z-index: 2;}
.hero .swiper .swiper-slide>div.herobadge.theme.primary1 { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_primary1.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.primary2 { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_primary2.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.spring { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_spring.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.summer { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_summer.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.easter { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_easter.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.wedding { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_wedding.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.student { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_student.svg'); }
.hero .swiper .swiper-slide>div.herobadge.theme.latesummer { background-image: url('/wp-content/themes/smageriet/_img/i_splash3_latesummer.svg'); }

.hero .swiper .swiper-slide>div.herobadge span { display: block; text-align: center; }
.hero .swiper .swiper-slide>div.herobadge span:nth-child(1) { font-size:1em; margin-bottom:-.75em; margin-top:.75em; font-weight: 500; }
.hero .swiper .swiper-slide>div.herobadge span:nth-child(2) { font-size:3em; font-weight: 500; font-family: 'canelabold'; }
.hero .swiper .swiper-slide>div.herobadge span:nth-child(3) { font-size:.8em; margin:5px 0 10px; font-weight: 500;  }
.hero .swiper .swiper-slide>div.herobadge span:nth-child(4) { font-size:.8em; opacity: .75; }
.hero .swiper .swiper-slide>div.herobadge span:nth-child(5) { font-size:.8em; opacity: .75; }

/* .hero .swiper .swiper-slide>div.herobadge { position: absolute; min-width: 30%; top:2em; right:2em; padding:24px 36px; background:var(--highlight-color-primary); opacity: 0; animation: lazyFadeIn 1s forwards ease-in-out; animation-delay: 1s; } */


.hero .swiper .swiper-slide>div.swiper-slide-shadow { background:var(--bg-quaternary); animation:none; }

/* Menupage */
main .menupage { display: grid; grid-template-columns: 1fr 240px;}

    /* Dishes */
    main.menupage .dishes { display:grid; width:100%; grid-template-columns: 1fr 1fr 1fr; grid-gap:1em; margin:1em 0 0; padding:5px 0; }
    main.menupage .dishes .dish { background: var(--input-bg); border-radius: 1em; display: grid; grid-template-rows:minmax(100px, 1.2fr) 1fr; box-shadow: 0 15px 12px #180b0b05; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow .5s ease-in-out; }
    main.menupage .dishes .dish .img { overflow:hidden; background: var(--bg-tertiary); border-radius: 1em 1em 0 0; position: relative; }
    main.menupage .dishes .dish .img .background { width:100%; height:100%; background-size: cover; background-position: center center; background-repeat: no-repeat; padding:24px; transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
    main.menupage .dishes .dish .img .badges { position: absolute; bottom:24px; left:24px; font-size:.9em; }
    main.menupage .dishes .dish .img .badges .badge { background:#333333cc; border-color: #333; color:#fff; padding:.5em .75em; }
    main.menupage .dishes .dish .content { padding:1.5em; display: grid; grid-template-rows: 1fr auto; }
    main.menupage .dishes .dish .content .name { margin:0; }    
    main.menupage .dishes .dish .content .info { padding-bottom:1.5em; }
    main.menupage .dishes .dish .gutter { display: grid; grid-template-columns: 50px 1fr auto; align-items: end; }
    main.menupage .dishes .dish .gutter>div:first-child { height:100%; background: url('/wp-content/themes/smageriet/_img/icon_info.svg') no-repeat center left; background-size:auto calc(100% - 5px); }
    main.menupage .dishes .dish .gutter>div:nth-child(2) { height:36px; text-align: end; }
    main.menupage .dishes .dish .gutter>div:last-child { text-align: end; }
    main.menupage .dishes .dish .gutter input[type=checkbox] { margin:0 0 0 1em; width:36px; height:36px; border-radius: .5em; background-color:var(--bg-quinary); border:0; background-image: url('/wp-content/themes/smageriet/_img/i_check.svg'); background-size:1em auto; }
    main.menupage .dishes .dish .gutter input[type=checkbox]:checked { background-image: url('/wp-content/themes/smageriet/_img/i_check.svg'); filter:brightness(0) invert(1); background-color:var(--button-color); border-color:var(--button-color); filter:grayscale(0); animation-name: fadeZoomOutXl; }
    main.menupage .dishes .dish .gutter input[type=checkbox]:disabled { background-image: url('/wp-content/themes/smageriet/_img/icon_lock_white.svg'); }
    main.menupage .dishes .dish .gutter .controls { display: inline-grid; align-items: center; grid-template-columns: 1fr auto auto auto; grid-gap:.5em; /* pointer-events: none; filter:grayscale(1); opacity:.5; transition: filter .3s ease-in-out, opacity .3s ease-in-out; */ }    
    /* main.menupage .dishes .dish .gutter>div:nth-child(2):has(+ div input:checked) .controls { pointer-events: all; filter:none; opacity: 1; } */
    main.menupage .dishes .dish .gutter .controls button { min-height: 36px; width:36px; height:36px; padding:0; }
    main.menupage .dishes .dish .gutter .controls input { min-height: 36px; width:36px; text-align: center; background: var(--bg-senary); }

    main.menupage .textboxes { display: grid; grid-gap:1em; grid-template-columns: repeat(auto-fit,minmax(0%,1fr)); }
    main.menupage .textboxes .textbox { background: #f0f0f0; padding:.5em 1.5em; border-radius: .5em; }
    
    main.menupage .beforeprice { margin:0 0 1em 0; text-decoration: line-through; }

    .addtobasketConfirmation { display:grid; grid-template-rows: minmax(auto,200px) 1fr; margin:-24px; border-radius: 1em; }
    .addtobasketConfirmation .name { margin:0 0 1em; }
    .addtobasketConfirmation .img { overflow:hidden; background: #f5f5f5; border-radius: 1em 1em 0 0; }
    .addtobasketConfirmation .img>div { width:100%; height:100%; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
    .addtobasketConfirmation .img>div:before { content:''; width:100%; height:100%; position: absolute; top:0; left:0; background:linear-gradient(to bottom, #00000000, #00000033); }
    .addtobasketConfirmation .img>div h1 { position: absolute; left:24px; bottom:-.12em; margin:0; color:var(--bg-tertiary); font-family: 'canelabold'; font-size:3.5em; font-weight: 400; line-height: 1; }
    .addtobasketConfirmation .content { padding:24px; }
    .addtobasketConfirmation .Link-knap, .addtobasketConfirmation .Link-knap.reverse { padding-top:16px; padding-bottom:16px; }
    .addtobasketConfirmation .extradishtypes { display: grid; grid-template-columns: 1fr; grid-gap:.5em; }
    .addtobasketConfirmation .extradishtypes .extradishtype { display: grid; grid-template-columns: 1fr auto; padding:0.75em 0.75em 0.75em 1.5em; border-radius: .5em; align-items: center; background:var(--bg-quinary); }

    .cancellationInsuranceConfirmation { display:grid; grid-template-rows: minmax(auto,200px) 1fr; margin:-24px; border-radius: 1em; }
    .cancellationInsuranceConfirmation .img { overflow:hidden; background: #f5f5f5; border-radius: 1em 1em 0 0; }
    .cancellationInsuranceConfirmation .img>div { width:100%; height:100%; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
    .cancellationInsuranceConfirmation .content { padding:24px; }

/* Contact form */
form input { max-width:240px; }
form textarea { max-width:640px; }
form label { display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:1px; padding-bottom:1px; }
form .terms { display: flex; }
form label .required { color:#cc0000; }

/* Datepicker */
body>.ui-datepicker { border: 1px solid #555; padding: 1.5em; box-sizing: content-box; border-radius: 0.5em; background: #fff; font-family: 'Montserrat'; min-width: 360px; }
body>.ui-datepicker td span, body>.ui-datepicker td a { font-size:1.2em; border-radius: .25em; }
body>.ui-datepicker .ui-widget-content { color:#555; }
body>.ui-datepicker .ui-widget-header { border:0; background:#fff; color:#555; }
body>.ui-datepicker th { font-weight: 400; padding:1em 0; }
body>.ui-datepicker tr:first-child th:first-child { text-align: start; }
body>.ui-datepicker .ui-datepicker-prev span { background:url('/wp-content/themes/smageriet/_img/menu_left.svg') no-repeat center center; }
body>.ui-datepicker .ui-datepicker-next span { background:url('/wp-content/themes/smageriet/_img/menu_right.svg') no-repeat center center; }
body>.ui-datepicker .ui-datepicker-prev, body>.ui-datepicker .ui-datepicker-next, body>.ui-datepicker .ui-datepicker-prev-hover, body>.ui-datepicker .ui-datepicker-next-hover { border:inherit; background:none; padding:inherit; margin:inherit; left:inherit; top:inherit; cursor:pointer; }
body>.ui-datepicker .ui-datepicker-next, body>.ui-datepicker .ui-datepicker-next.ui-datepicker-next-hover { right:2px; }
body>.ui-datepicker .ui-state-default, body>.ui-datepicker .ui-widget-content .ui-state-default { background:#fff; border-color:#555; font-size:.9em; font-weight: 400; color:#555; aspect-ratio: 5 / 4; }
body>.ui-datepicker .ui-datepicker-today>span { border-color: var(--button-color); }
body>.ui-datepicker .ui-state-disabled>span, body>.ui-datepicker .ui-widget-content .ui-state-disabled>span { background:#ddd; border-color:#ddd; }
body>.ui-datepicker .ui-state-active, body>.ui-datepicker .ui-widget-content .ui-state-active { background:var(--button-color); color:#fff; border-color:var(--button-color); }

/* Media queries */

    /* Desktop only */
    @media only screen and (min-width: 799px) {        
        .scrolled main { padding-top:126px; }
        .scrolled nav { position: fixed; box-shadow: 0 5px 0 #00000011; }
        .scrolled nav div.top { height:0; overflow:hidden; }
        .scrolled nav div.top .pagewidth>div.actions .item.cart { position: absolute; top:0; z-index: 1000; margin-left:-20px; }
        .scrolled nav div.top .pagewidth>div.actions .item.cart .submenu { right:5px; }
        .scrolled nav div.top .pagewidth>div.actions .item.cart >.clickable { border-left:0; color:#fff; animation:fadeIn 1s forwards; margin-bottom:4px; }
        .scrolled nav div.top .pagewidth>div>.item.cart >.clickable:before { display: none;}
        .scrolled nav div.top .pagewidth>div>.item.cart >.clickable:after { background-image: url('/wp-content/themes/smageriet/_img/i_pose.svg'); transform:scale(.8); } 
        .scrolled nav div.top .pagewidth>div>.item.cart >.clickable .numitems { transform:scale(.8); }
        .scrolled nav div.top .pagewidth>div>.item.cart >.clickable:hover:after, .scrolled nav div.top .pagewidth>div>.item.cart >.clickable:hover .numitems { transform:none; }
        .scrolled nav div.bottom .pagewidth>div.logo { width:180px; animation:fadeIn 1s forwards; }

        .scrolled .subnav { position: fixed; top:42px; }
        .scrolled .subnav .box .saveforlaterseparator { box-shadow: 0 5px 0 #00000011; } 
        .subnav .box .saveforlaterseparator ~ div { margin:0 -24px; text-align: center; color:#000a; }       
        .subnav .box .saveforlaterseparator ~ button { margin:1em auto; }       
        .scrolled .subnav.locked { position: absolute; }
        .scrolled .subnav.locked .box { box-shadow: none; }        

        /* Submenu logic */
        nav div.top .pagewidth>div>.item .submenu { transition-delay:.75s; }
        body:not(.sidr-open) nav div.top .pagewidth>div>.item:hover .submenu, 
        body:not(.sidr-open) nav div.top .pagewidth>div>.item .submenu:hover, body:not(.sidr-open) nav div.top .pagewidth>div>.item .submenu:has(input:focus) { visibility: visible; opacity: 1;  transition: visibility 0s, opacity .2s ease-in-out .25s; z-index:999; }
        nav div.top .pagewidth>div>.item:hover ~ .item .submenu { visibility: hidden; opacity:0; z-index:-1; transition: visibility 0s, opacity 0s; transition-delay: 0s; }
        nav div.top .pagewidth>div>.item:has(~ .item:hover) .submenu { visibility: hidden; opacity:0; z-index:-1; transition: visibility 0s, opacity 0s; transition-delay: 0s; }    

        main .elements .element.boxed_shifted .content .img { position: relative; aspect-ratio: auto !important; }
        main.checkout .layer:not(.right):not(.visited) .pagewidth .content .box { animation:fadeIn .5s ease-in-out forwards; animation-iteration-count: 1; opacity:0; }

        .scrolled main .elements .element.std_50-50:first-child .content .img:after { transform:scale(1); }
        .scrolled main .elements .element.std_50-50_picmobile:first-child .content .img:after { transform:scale(1); }
        .menus .menu:hover { box-shadow: 0 5px 0 #00000011; transform:translateY(-3px); }
        .dishes .dish:hover { box-shadow: 0 5px 0 #00000011; transform:translateY(-3px); } 
        .linkbutton:hover { transform:translateY(-3px); }
        .linkbutton.fadeFlipIn:hover { box-shadow: 0 5px 0 #00000011; margin-top:-3px; margin-bottom:3px; }        
    }

    /* Below 1920px */
    @media only screen and (max-width: 1920px) {
        main .elements .element.backdrop .backdrop { width:300px; height:300px; left: calc(-300px + 5vw); }
        main .elements .element.backdrop .backdrop.right { right: calc(-300px + 5vw); }
    }

    /* Below 1200px */
    @media only screen and (max-width: 1200px) {
        nav div.top .pagewidth>div>div>.clickable span { display:none; }    
        nav div.top .pagewidth>div>.item>.clickable:after { margin-left:0; animation:fadeIn 1s forwards; }    
        nav div.bottom .sf-menu .sf-mega .sf-mega-section ul { column-count: 1; column-gap: 48px; }  
        .hero { grid-template-columns: minmax(300px, 25%) 1fr; }
        .hero .content { padding:50px 32px; }
        .hero .slideshow .prev, .hero .slideshow .next { width:64px; height:48px; top:calc(100% - 48px); }
        .hero .slideshow .prev { left:-65px; }
        
        main .elements .element.dishtypes .dishtype .Menuoverskrift { height:inherit; }
        main .elements .element.linkbuttons .content { grid-template-columns: repeat(4,1fr); }

        main .elements .element.widgets .widgets { display:grid; grid-template-columns: 1fr;}
        main .elements .element.widgets .widgets .widget { width:100%; display: block; position: relative; }
        main .elements .element.widgets .widgets .widget .icon { position: absolute; left: 50%; top: 0; margin: 0; width: 150px; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
        main .elements .element.widgets .widgets .widget .text { padding-top:64px; }

        nav div.top .pagewidth>div.info, nav div.top .pagewidth>div.actions { padding-right:5px; }
    }

    /* Below 1024px */
    @media only screen and (max-width: 1024px) {
        main .elements .element .menus .wrapper, .menus .wrapper { grid-template-columns:1fr 1fr; }
        
        main .elements .element.dishtypes .wrapper { padding-top:0; } 
        main.menupage .elements .element.std_50-50 .content { grid-template-columns: 1fr; }
        main.menupage .elements .element.std_50-50 .content .img { position: absolute; z-index:0; top:0; left:0; width:100%; height: 100vw; max-height: 480px; display: block;}        
        main.menupage .elements .element.std_50-50 .content .text { background:var(--bg-senary); border-radius: 1em; position: relative; z-index: 10; width: 100%; padding: 1.5em; display: block; text-align: center; box-shadow: 0 -10px 25px #00000022; }
        main.menupage .elements .element.std_50-50 .content .text button[data-readmore],
        main.menupage .elements .element.std_50-50 .content .text button[data-readmore]:hover { position: relative; box-shadow:none; display:block; margin:1em auto 0; background:transparent; border-color:transparent; color:#555; padding-right:32px; }
        main.menupage .elements .element.std_50-50 .content .text button[data-readmore]:before { content:'Læs mindre'; }
        main.menupage .elements .element.std_50-50 .content .text button[data-readmore]:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat left center; margin-left:.8em; }
        main.menupage .elements .element.std_50-50 .content .text .readmore.collapsed:after { content:''; position: absolute; background:linear-gradient(to bottom, #ffffff00, var(--bg-senary)); width:100%; height:50px; bottom:0; left:0; }
        main.menupage .elements .element.std_50-50 .content .text .readmore.collapsed + button[data-readmore]:before { content:'Læs mere'; }
        main.menupage .elements .element.std_50-50 .content .text .readmore.collapsed + button[data-readmore]:after { background: url('/wp-content/themes/smageriet/_img/menu_down.svg') no-repeat left center; }
        main.menupage .elements .element.std_50-50 .content .text .readmore.collapsed { max-height:100px !important; position: relative; }
        main.menupage .elements .element.std_50-50 .content .text h1 { font-size:1.5em; color:var(--bg-primary); font-weight: 600; }
        main.menupage .elements .element.std_50-50 .content .text h1:before { display:none; }

        main.menupage .elements .element.std_50-50_picmobile .content { grid-template-columns: 1fr; }
        main.menupage .elements .element.std_50-50_picmobile .content .img { position: absolute; z-index:0; top:0; left:0; width:100%; height: 100vw; max-height: 480px; display: block;}        
        main.menupage .elements .element.std_50-50_picmobile .content .text { background: var(--bg-senary); border-radius: 1em; position: relative; z-index: 10; width: 100%; padding: 1.5em; display: block; text-align: center; box-shadow: 0 -10px 25px #00000022; }
        main.menupage .elements .element.std_50-50_picmobile .content .text button[data-readmore],
        main.menupage .elements .element.std_50-50_picmobile .content .text button[data-readmore]:hover { position: relative; box-shadow:none; display:block; margin:1em auto 0; background:transparent; border-color:transparent; color:#555; padding-right:32px; }
        main.menupage .elements .element.std_50-50_picmobile .content .text button[data-readmore]:before { content:'Læs mindre'; }
        main.menupage .elements .element.std_50-50_picmobile .content .text button[data-readmore]:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat left center; margin-left:.8em; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .readmore.collapsed:after { content:''; position: absolute; background:linear-gradient(to bottom, #ffffff00, var(--bg-senary)); width:100%; height:50px; bottom:0; left:0; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .readmore.collapsed + button[data-readmore]:before { content:'Læs mere'; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .readmore.collapsed + button[data-readmore]:after { background: url('/wp-content/themes/smageriet/_img/menu_down.svg') no-repeat left center; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .readmore.collapsed { max-height:100px !important; position: relative; }
        main.menupage .elements .element.std_50-50_picmobile .content .text h1 { font-size:1.5em; color:var(--bg-primary); font-weight: 600; }
        main.menupage .elements .element.std_50-50_picmobile .content .text h1:before { display:none; }

        main .elements .element .dishes { grid-template-columns: 1fr 1fr; }
        main .elements .element.linkbuttons .content { grid-template-columns:repeat(3,1fr); grid-gap:1.5em; }

        main .elements .element.std_50-50 .content.collapsable .text button[data-readmore],
        main .elements .element.std_50-50 .content.collapsable .text button[data-readmore]:hover { position: relative; box-shadow:none; display:block; margin:1em auto 0; background:transparent; border-color:transparent; color:#555; padding-right:32px; }
        main .elements .element.std_50-50 .content.collapsable .text button[data-readmore]:before { content:'Læs mindre'; }
        main .elements .element.std_50-50 .content.collapsable .text button[data-readmore]:after { opacity: 1; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1); content:''; position:absolute; top:50%; transform:translate(0%, -50%); width:20px; height:8px; margin-bottom:1px; background: url('/wp-content/themes/smageriet/_img/menu_up.svg') no-repeat left center; margin-left:.8em; }
        main .elements .element.std_50-50 .content.collapsable .text .readmore.collapsed:after { content:''; position: absolute; background:linear-gradient(to bottom, #ffffff00, var(--bg-quaternary)); width:100%; height:50px; bottom:0; left:0; }
        main .elements .element.std_50-50 .content.collapsable .text .readmore.collapsed + button[data-readmore]:before { content:'Læs mere'; }
        main .elements .element.std_50-50 .content.collapsable .text .readmore.collapsed + button[data-readmore]:after { background: url('/wp-content/themes/smageriet/_img/menu_down.svg') no-repeat left center; }
        main .elements .element.std_50-50 .content.collapsable .text .readmore.collapsed { max-height:256px !important; position: relative; }

        main.checkout .layer .open365 { width:100px; height:100px; right:.5em; top:.5em; }
    }

    /* Below 800px */
    @media only screen and (max-width: 800px) {
        
        main { padding-top:64px; overflow:hidden; }
        main.menupage + footer { padding-bottom:64px; }
        
        .pagewidth.padding { padding-top: 2em; padding-bottom: 2em; }
        .grid:not(.grid-persistant) { grid-template-columns: 1fr; }
        body>.ui-datepicker { min-width: 300px; }
        
        .scrolled nav { box-shadow: 0 19px 38px #00000022, 0 15px 12px #00000011; }
        nav { position: fixed; width:100%; }        
        nav div.bottom { display: none; }
        nav div.top, .scrolled nav div.top { height:64px; overflow:visible; }    
        nav div.top .pagewidth>div>.item.phone { display:none; }
        nav div.top .pagewidth>div>.item.openinghours { display:none; }
        nav div.top .pagewidth>div>.item.search { display:none; }
        nav div.top .logo { width:180px; padding:0; background-size: auto 24px; background-position: 24px 15px; }
        nav div.top .pagewidth>div>.item .submenu { position: fixed; left:0; top:64px; right:auto; width:100%; min-width: 100%; padding-top: 16px; box-shadow: inset 0 25px 25px -25px #00000033, 0 19px 38px #00000011, 0 15px 12px #00000005; }        
        nav div.top .pagewidth>div>.item >.clickable { padding:0 1em; }
        nav div.top .pagewidth>.actions>.menutrigger { display:block; }        
        nav div.top .pagewidth>div>.item.cart >.clickable .numitems { right: 31px; top: 12px; width: 21px; height: 21px; }
        
        /* Submenu logic */
        body:not(.sidr-open) nav div.top .pagewidth>div>.item:has(.clickable.focused) .submenu { visibility: visible; opacity: 1; transition: visibility 0s, opacity .2s ease-in-out; z-index:999; }
        body:not(.sidr-open) nav div.top .pagewidth>div>.item:has(.clickable.focused):after { content:''; position: fixed; top:0; left:0; width:100%; height:100%; background:#00000022; z-index: -1; }
        body:not(.sidr-open) nav div.top .pagewidth>div>.item .clickable.focused:before { content:''; position: absolute; top:-15px; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius: 0 0 .5em .5em; background:var(--primary); }
        body:not(.sidr-open) nav div.top .pagewidth>.actions>.item .submenu { max-width: 100%; }
         
        main .subnav { position: fixed; top:auto; bottom:0; width:100%; left:0; right:auto; transform:none; z-index: 999; }
        main .subnav .selection { position: static; width:100%; height:auto; top:0; left:0; right:auto; }       
        main .subnav .selection .box { position:static; padding:1em; box-shadow: 0 -10px 25px #00000022; min-height: auto; border-radius: .5em .5em 0 0; z-index:1; }        
        main .subnav .selection .box .dishtypes { position: absolute; width:100%; top:-32px; bottom:90px; left:0; background:var(--bg-quaternary); padding:1em 1em 1em; z-index:-1; }
        main .subnav .selection .box .dishtypes .dishtype { max-width: 240px; margin:0 auto .5em; }
        main .subnav .selection .box .dishtypes .trigger { background:var(--bg-secondary); display:flex; margin-bottom:1em; border-radius: 0; }
        main .subnav .selection .box .dishtypes .trigger::before { background-color:var(--bg-secondary); }
        main .subnav .selection .box .dishtypes .trigger:active { display:flex; margin-bottom:1em; opacity: 1; }
        main .subnav .selection .box .dishtypes.shown { top:auto; }
        main .subnav .selection .dishtypes .trigger>span { font-size: .8em; }
        

        main .subnav .selection .controls { display:grid; grid-template-columns: auto auto auto 1fr; grid-gap:.2em; width: calc(100% - 80px); align-items: center; }
        main .subnav .selection .controls span:first-child { display:none !important; }
        main .subnav .selection .controls button.add { margin-right:1em; }
        main .subnav .selection .controls .addtobasketwrapper { grid-column:4; margin-top:0; }   
        main .subnav .selection .controls .addtobasketwrapper:before { display:none; } 
        main .subnav .selection .controls button.addtobasket { height:28px; min-height: 28px; padding:0; } 
        main .subnav .selection .controls button.addtobasket:after { display:none; } 
        main .subnav .selection .controls select { width:auto; height:28px; min-height: 28px; }

        main .subnav .selection .pricetag { position: absolute; bottom:54px; right:0; margin:0 5px 5px 0; width:80px; font-size:.5em; color: var(--font-secondary); }
        main .subnav .selection .pricetag span:nth-child(3) { margin:0; }
        main .subnav .selection .pricetag span:nth-child(1n+4) { display:none; /* position: absolute; bottom:0; right:0; margin:0 10px 0 0; width:100px; font-size:.6em; */ }
        main .subnav .selection .pricetag span:nth-child(2) { font-size: 2.5em; }
        

        main .subnav .selection .saveforlaterseparator { display:none; }
        main .subnav .selection .saveforlater {display: flex; height: 33px; margin: 16px -16px -14px; padding: 10px 16px; border-radius: 0; overflow: hidden; box-shadow: inset 0 10px 20px #00000005; font-size: .8em; }
        main .subnav .selection .saveforlater .Link-knap { display:none; }
        main .subnav .selection .saveforlater .Link { display:inline; margin-left:1em; }
        main .subnav + .elements>.element .pagewidth { padding-left: 0; }     
        main .elements:has(+.subnav)>.element .pagewidth { padding-right: 0; }
        main .elements:has(+ .subnav) .element .pagewidth { padding-right: 0; }
        
        footer .bottom .logo { background-position: bottom center;}
        footer .bottom .pagewidth>.grid { grid-template-columns: 1fr; }
        footer .bottom .pagewidth>.grid>div { justify-content: center; }
        footer .bottom .pagewidth>.grid:last-child>div:nth-child(1) { display:none !important; }
        footer .bottom .pagewidth>.grid:last-child>div:nth-child(2) { display:none !important; }
        footer .bottom .smiley { display:flex; justify-content: center; }
        footer .bottom ul { list-style: none; padding:0; }
        footer .bottom ul li { text-align: center; }
        footer .end .pagewidth { text-align: center; flex-direction: column; }        
        footer .end .pagewidth a:first-child:before { display: none;}
        footer .end .links { margin:1em 0 0 0; }
        footer .end .paymentlogos { margin:2em 0 0 0; }

        main .elements .element .wrapper { padding-top:3em; padding-bottom:3em; }
        main>.elements .element:first-child.boxed_background .wrapper .content { padding-bottom:28px; margin-bottom: 3em; }
        
        main .elements .element.backdrop .backdrop { width:200px; height:200px; left:calc(-200px + 5vw); }
        main .elements .element.backdrop .backdrop.right { right:calc(-200px + 5vw); }

        main .elements .element.std .content .img, main .elements .element.std .content .img.right { max-width: 100%; margin:0 0 2em 0; }
        main .elements .element:first-child.std .content .img, main .elements .element:first-child.std .content .img.right { max-width:calc(100% + 48px); width:calc(100% + 48px); height:200px; overflow:hidden; margin:-3em -24px 2em -24px; position: relative; border-radius: 0 0 1em 1em; }
        main .elements .element:first-child.std .content .img img, main .elements .element:first-child.std .content .img.right img { position: absolute; top:0; }

        main .elements .element.std_50-50 .content { display: block;}
        main .elements .element.std_50-50 .content .pricetag { display: block;}
        main .elements .element.std_50-50 .content .img { display:none; } 
        main.menupage .elements .element.std_50-50 .content .text { margin:4em 0 -5em; }
        
        main .elements .element.std_50-50_picmobile .content { display: block;}
        main .elements .element.std_50-50_picmobile .content div:first-child { margin-bottom:1em; }
        main .elements .element.std_50-50_picmobile .content .pricetag { display: block;}
        /* main .elements .element.std_50-50_picmobile .content .img { display:none; }      */
        main.menupage .elements .element.std_50-50_picmobile .content .text { margin:5em 0 -5em; }

        main .elements .element.boxed .content .img, main .elements .element.boxed .content .img.right { max-width: 100%; margin:0 0 2em 0; }

        main .elements .element.boxed_background .padding { padding:0; }  
        main .elements .element.boxed_background .background { border-radius: 0 0 .75em .75em; padding:48px 24px; }
        main .elements .element:first-child.boxed_background .wrapper { padding-bottom:0; }
                
        main .elements .element.boxed_gallery .background { padding-left:0; padding-right:0; }
        main .elements .element.boxed_gallery .background .pagewidth { border-radius: 0; display: block; }
        main .elements .element.boxed_gallery .wrapper { margin-bottom:4em; }
        main .elements .element.boxed_gallery .content { padding:3em 0;}
        main .elements .element.boxed_gallery .gallery { width:calc(100% - 4em); margin:-3em auto -3em auto; }
        main .elements .element.boxed_gallery .gallery>div { bottom:-3em; }
        main .elements .element.boxed_gallery .linkbuttons { display: grid; }
        
        main .elements .element.boxed_tilted .background { padding:0 0 5em 0; }        
        main .elements .element.boxed_tilted .padding { padding-left:0; padding-right:0; }
        main .elements .element.boxed_tilted .content { grid-template-columns: 1fr; }
        main .elements .element.boxed_tilted .content .img { width:calc(100% + 48px); aspect-ratio: 3 / 2; margin:0 -24px; }
        main .elements .element.boxed_tilted .content .img div { width:100%; transform:none; border-radius: 0; animation:none; }
        main .elements .element.boxed_tilted .content .box { margin:-5em 0 0; }
        main .elements .element.boxed_tilted .content .box h2 { font-size: 2em; }
        main .elements .element.boxed_tilted .content .box.confetti:before { display:none; }

        main .elements .element.boxed_shifted .padding { padding-left:0; padding-right:0; }
        main .elements .element.boxed_shifted .content, main .elements .element.boxed_shifted .content.right { grid-template-columns: 1fr; }
        main .elements .element.boxed_shifted .content .img, main .elements .element.boxed_shifted .content.right .img { z-index:2; padding: 0; margin: 0 auto; border-radius: 0; top: 0; bottom: 0; width: calc(100% - 4em); position: relative; }
        main .elements .element.boxed_shifted .content .img div, main .elements .element.boxed_shifted .content.right .img div { background-position: center bottom;  background-size: contain; border-radius: 1.5em; width:100%; margin: 0; left: 0; top: 50%; bottom:0; height: 100%; }
        main .elements .element.boxed_shifted .content .box, main .elements .element.boxed_shifted .content.right .box { padding: 4em 2em 2em; margin: -2em 0 0; }        
        main .elements .element.boxed_shifted .content .box h2 { font-size: 2em; }
        main .elements .element.boxed_shifted .content .box.confetti:before { display:none; }

        main .elements .element.boxed_shifted .content.right .box { grid-row: 2; grid-column: 1; }
        main .elements .element.boxed_shifted .content.right .img { grid-row: 1; grid-column: 1; }
                
        main .elements .element.std_swiper .wrapper { margin-top:4em; padding-bottom:0; }        
        main .elements .element.std_swiper .background.padding { padding:0; }
        main .elements .element.std_swiper .pagewidth { display: block; }
        main .elements .element.std_swiper .carrusel { width: 100%; padding:0 2em; margin:-3em 0 -8em 0;  }
        main .elements .element.std_swiper .carrusel .swiper { position: relative; height:300px; width:100%; max-height:300px; }
        main .elements .element.std_swiper .carrusel .swiper .prev, main .elements .element.std_swiper .carrusel .swiper .next { display:none; }
        main .elements .element.std_swiper .content .padding { padding:5em 0 3em 0; }

        main .elements .element.newsletter .background { padding:4em 0; }
        main .elements .element.newsletter .content form { grid-template-columns: 1fr; padding: 1em 0; }
        main .elements .element.newsletter .content form input { max-width: 100%;}
        main .elements .element.newsletter .content form input[type=checkbox] { min-width:1.25em;}
        main .elements .element.newsletter .content .terms { grid-column: 1; text-align: left; justify-content: left; }
        main .elements .element.newsletter .content .terms label { white-space: normal; }

        main .elements .element.linkbuttons .content { grid-template-columns: repeat(2,1fr); grid-gap:1em; font-size: .8em; }
        main .elements .element.linkbuttons .content .linkbutton .img { width:24px; height:24px; margin-left:1em; }
        main .elements .element.linkbuttons .content .linkbutton:after { right:.5em; }
        
        main .elements .element:first-child.boxed_gallery, main .elements .element.mobilonly_boxedimg ~ .element.boxed_gallery { margin-top:0; }
        main .elements .element.mobilonly_boxedimg { display:block; }
        main .elements .element.mobilonly_boxedimg .wrapper { padding:0; margin:0 0 -3em 0; }  
        main .elements .element.mobilonly_boxedimg .wrapper .background { padding:2em 0 0 0; }
        main .elements .element.mobilonly_boxedimg img { border-radius: 1.5em; }

        main .elements .element.orderform .content { padding: 0 .5em; }
        main .elements .element.orderform .content .box { padding:1em 1em; }

        main .elements .element.orders .head { display:block; }

        main .elements .element .menus .wrapper, .menus .wrapper { grid-template-columns:1fr; }
        .menus .menu { grid-template-rows: auto 1fr; }
        .menus:not(.resize) { min-height: 100px; }
        .menus.resize { height:100px; }
        .menus .menu .menus .menu .name { font-size:1em; }
        .menus .menu .gutter .pricing .price { font-size:1em; }
        .menus .menu .img { aspect-ratio: 16 / 8; }
        
        main .elements .element.menufilters .filters { padding-top:2em; display: grid; grid-gap:.5em; grid-template-columns: 1fr; }
                
        main .elements .element.dishtypes .wrapper { padding-top:3em; }
        main .elements .element.dishtypes .dishtype .Menuoverskrift { height:24px; line-height: 24px; }
        main .elements .element .dishes .dish { grid-template-rows: minmax(64px, 120px) 1fr; }        
        main .elements .element .dishtypes .dishtype>.info .notices:before { display:none; }
        
        main.menupage .elements .element.std_50-50 .content .text .pricetag { position: absolute; top:-80px; left:-2em; width:128px; font-size:.6em; animation: fadeIn .5s ease-in-out; display:grid; align-content: center; margin:0 auto -40% auto; aspect-ratio: 1/1; background:url('/wp-content/themes/smageriet/_img/i_splash3.svg') no-repeat center center; background-size: contain; color:var(--font-secondary); }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span { display: block; text-align: center; }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span:nth-child(1) { font-size:1.2em; margin-top:-.5em; }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span:nth-child(2) { font-size:3em; font-family: 'canelabold'; font-weight: 600; }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span:nth-child(3) { font-size:1.2em; margin:5px 0 10px; }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span:nth-child(4) { font-size:.8em; opacity: .75; }
        main.menupage .elements .element.std_50-50 .content .text .pricetag span:nth-child(5) { font-size:.8em; opacity: .75; }

        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag { position: absolute; top:-90px; left:-1em; width:128px; font-size:.6em; animation: fadeIn .5s ease-in-out; display:grid; align-content: center; margin:0 auto -40% auto; aspect-ratio: 1/1; background:url('/wp-content/themes/smageriet/_img/i_splash3.svg') no-repeat center center; background-size: contain; color:var(--font-secondary); }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span { display: block; text-align: center; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span:nth-child(1) { font-size:1.2em; margin-top:-.5em; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span:nth-child(2) { font-size:3em; font-family: 'canelabold'; font-weight: 600; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span:nth-child(3) { font-size:1.2em; margin:5px 0 10px; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span:nth-child(4) { font-size:.8em; opacity: .75; }
        main.menupage .elements .element.std_50-50_picmobile .content .text .pricetag span:nth-child(5) { font-size:.8em; opacity: .75; }

        main.menupage .textboxes { grid-template-columns: 1fr 1fr; }
    
        /* .dishdetails { grid-template-rows: minmax(100px, 140px) 1fr; }         */
        .modal_window.fixed .dishdetails .img { border-radius: 0; }
        .dishdetails .content .info { grid-template-columns: 1fr;}
        .dishdetails .content .info .separator:before { content: ''; width: 100%; height: 1px; left: 50%; top: 50%; position: absolute; background: #ddd; display: block; transform: translate(-50%, -50%); }
        .dishdetails .content .name { font-size:1.2em; }

        .addtobasketConfirmation .img>div h1 { font-size:2em; }
    
        .hero { display: block; }
        .hero .content { padding-top:420px; padding-bottom:24px; line-height: 1.5; }
        .hero .slideshow { position: absolute; width:100%; left:0; top:0; height:400px; padding:20px 16px 16px; }
        .hero .slideshow .swiper, .hero .slideshow .swiper .swiper-slide { border-radius: 1em; border-bottom-right-radius: 1em; }
        .hero .slideshow .prev, .hero .slideshow .next { display:none; }
        .hero .slideshow .pagination { display:block; }
        
        .hero .swiper .swiper-slide>div:not(.herobadge) { width:calc(100% - 40px); right:20px; bottom:20px; padding:20px; }
        .hero .swiper .swiper-slide>div *:first-child { margin-top:0; }
        .hero .swiper .swiper-slide>div *:last-child { margin-bottom:0; }     
        .hero .swiper .swiper-slide>div.herobadge { min-width: 100px; top:1em; right:1em; }
        .hero .swiper .swiper-slide>div.herobadge { font-size:3cqw; }
        
        .hero .swiper .swiper-slide>div.herobadge span:nth-child(3) { margin:0 0 10px 0;}
        .hero .swiper .swiper-slide>div.herotext { left:2em;  right:auto; width:calc(100% - 4em); bottom:2em; }
        
        main.checkout .progress { grid-template-columns: auto 1fr auto 1fr auto 1fr auto; width:100%; padding: 2em 2em 0; grid-gap: 0; }
        main.checkout .progress .clickable.active { width:140px; text-align: center; }
        main.checkout .progress .clickable:not(.active) { overflow: hidden; width: 34px; height: 34px; padding-left: 34px; }
        main.checkout .progress > div.separator { background:url('/wp-content/themes/smageriet/_img/menu_right.svg') no-repeat center center; background-size:auto 6px; }

        main.checkout .layer .open365 { width:100px; height:100px; right:.5em; top:.5em; }
        main.checkout .layer .grid + .grid { margin-top:1em; }
        main.checkout .layer .content { overflow-x:hidden; }
        main.checkout .layer h2 { font-size:1.5em; }
        main.checkout .layer h3 { font-size:1.2em; }

        /* main.checkout .layer .pagewidth .box:first-child, main.checkout .layer .pagewidth div:last-child .box { border-radius: 1em 1em 1em 1em; min-height:64px; } */
        main.checkout .layers { height: 100vh; }
        main.checkout .layer .pagewidth { grid-template-columns: 1fr; grid-gap:0; }
        main.checkout .layer .pagewidth .content .box:first-child { border-top-right-radius: 1.5em; }
        main.checkout .layer .pagewidth .content .box:last-child { border-bottom-left-radius: 0; }
        main.checkout .layer .pagewidth .box.summary { border-radius: 0 0 1.5em 1.5em; opacity: 0; animation:fadeInUp .3s forwards cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay:1s; }
                
        main.checkout .layer .pagewidth form label:has(input[type="radio"]) { white-space: initial; display: grid; grid-template-columns: auto 1fr; grid-gap:.5em; }
        main.checkout .layer .pagewidth form label:has(input[type="radio"]) input[type="radio"] { margin-top:0; margin-bottom: 0.5em; }

        main.checkout .paymentmethodlogos { max-width: 240px; }
        
    } 

    /* Below 640px */
    @media only screen and (max-width: 640px) { 
        .menus .wrapper { grid-template-columns: 1fr; }
        main .elements .element .dishes { grid-template-columns: 1fr; } 
        main .elements .element.boxed_gallery .linkbuttons { grid-template-columns: 1fr; }
    }

    /* Below 350px */
    @media only screen and (max-width: 350px) { main .subnav .selection .controls button.addtobasket { padding:0 5px; } main .subnav .selection .controls button.addtobasket:after { display: none; } }

    /* Special rules for touch devices */
    @media (hover: none) { * { user-select: none; } nav div.top .pagewidth>div>.item .submenu { transition-delay: 0s; } /* On touch devices. eleminate mouseout timeout before starting to hide submenu */ }    

    /* Height under 768px */
    @media only screen and (min-width: 799px) and (max-height: 768px) { .selection .dishtypes { display: none; } }

/* Animations */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInLeft { 0% { opacity: 0; transform:translateX(50%); } 100% { opacity: 1; transform:translateX(0%); } }
@keyframes fadeInRight { 0% { opacity: 0; transform:translateX(-50%); } 100% { opacity: 1; transform:translateX(0%); } }
@keyframes fadeInUp { 0% { opacity: 0; transform:translateY(50%); } 100% { opacity: 1; transform:translateY(0%); } }
@keyframes fadeInUpSmall { 0% { opacity: 0; transform:translateY(50px); } 100% { opacity: 1; transform:translateY(0%); } }
@keyframes fadeInDown { 0% { opacity: 0; transform:translateY(-50%); } 100% { opacity: 1; transform:translateY(0%); } }
@keyframes fadeInDownSmall { 0% { opacity: 0; transform:translateY(-50px); } 100% { opacity: 1; transform:translateY(0%); } }
@keyframes fadeInSubmenu { 0% { opacity: 0; transform:translateY(-8px); } 100% { opacity: 1; transform:translateY(0%); } }
@keyframes fadeInTitle { 0% { opacity:0; } 100% { } }
@keyframes swingInLeft { 0% { transform: rotateY(100deg); transform-origin: left; opacity: 0; } 100% { transform: rotateY(0); transform-origin: left; opacity: 1; } }  
@keyframes fadeZoomIn { 0% { transform: scale(.5) translateZ(0); opacity: 0; } 100% { transform: scale(1) translateZ(0); opacity: 1; } }  
@keyframes fadeZoomOut { 0% { transform: scale(1.5) translateZ(0); opacity: 0; } 100% { transform: scale(1) translateZ(0); opacity: 1; } }  
@keyframes fadeZoomOutXl { 0% { transform: scale(1.5) translateZ(0); opacity: 0; } 100% { transform: scale(1) translateZ(0); opacity: 1; } }  
@keyframes flipIn { 0% { transform: rotateX(-80deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes tilt { 0% { transform:rotate(0deg); } 100% { transform:rotate(10deg); } }
@keyframes tilted { 0% { transform:rotate(0deg); } 100% { transform:rotate(-10deg); } }
@keyframes click { 0% { opacity:.8; } 100% { opacity: 1; } }
@keyframes fadeFlipIn { 0% { transform: translateY(0) perspective(400px) rotate3d(0,1,0,45deg) scale(.8); opacity: 0; } 100% { transform: translateY(0) perspective(400px) rotate3d(0,1,0,0) scale(1); opacity: 1; } }
@keyframes rotating { 100% { transform: rotate(360deg); } }
@keyframes shake { 0% { transform: translateX(0) } 25% { transform: translateX(5px) } 50% { transform: translateX(-5px) } 75% { transform: translateX(5px) } 100% { transform: translateX(0) } }
@keyframes busydots { 20%{background-position:0%   0%, 50%  50%,100%  50%} 40%{background-position:0% 100%, 50%   0%,100%  50%} 60%{background-position:0%  50%, 50% 100%,100%   0%} 80%{background-position:0%  50%, 50%  50%,100% 100%} }

.fadeFlipIn { opacity: 0; transform-origin: 25% 50%; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0,1,0,1); animation-name: fadeFlipIn; }
.shake { animation: shake .3s 3 ease-in-out forwards; }
.shake:nth-child(1) { animation-delay: .05s; }
.shake:nth-child(2) { animation-delay: .1s; }
.shake:nth-child(3) { animation-delay: .15s; }
.shake:nth-child(4) { animation-delay: .2s; }
.shake:nth-child(5) { animation-delay: .25s; }

/* Tooltips */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:after { text-align: center; background: #333333dd; border:1px solid #333; color:#fff; content: attr(data-tooltip); position: absolute; left: 50%; transform: translateX(-50%); margin: 0 auto; opacity: 0; visibility: hidden; transition: 0.6s ease-in-out 0.4s; display:none; box-shadow: 0 0 25px #00000022; padding: 1em; bottom: calc(100% + 5px); border-radius: .5em; z-index: 10000; white-space: pre-line; min-width:100%; font-size:12px; font-weight: 400; }
[data-tooltip][data-tooltip-width="100"]:after { width:100px; min-width: auto; max-width: auto; }
[data-tooltip][data-tooltip-width="200"]:after { width:200px; min-width: auto; max-width: auto; }
[data-tooltip][data-tooltip-maxwidth="200"]:after { width:200px; min-width: auto; max-width: 200px; }
[data-tooltip][data-tooltip-textalign="left"]:after { text-align: left; }
[data-tooltip][data-tooltip-textalign="right"]:after { text-align: right; }
[data-tooltip][data-tooltip-whitespace="nowrap"]:after { white-space: nowrap; }
[data-tooltip]:hover:after { visibility: visible; display:block; animation:fadeIn 1s forwards cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay:.5s; }
[data-tooltip][data-placement=bottom]:after { bottom:auto; top:calc(100% + 5px); }
[data-tooltip][data-placement=left]:after { bottom:auto; top:50%; height:auto; right:calc(100% + 5px); left:auto; transform: translateY(-50%); }
[data-tooltip][data-placement=right]:after { bottom:auto; top:50%; height:auto; left:calc(100% + 5px); transform: translateY(-50%); }
[data-tooltip][data-placement=topleft]:after { min-width:auto; width:fit-content !important; max-width: fit-content; bottom: auto; top:-100%; height:auto; left:0; transform: translateY(-50%); }

/* Ninja forms */
.nf-form-content { padding:0 !important; font-size:12px !important; }
.nf-form-content label { font-size:1.1em !important; font-weight: 400 !important; }
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea { font-family: 'Montserrat' !important; color:#555 !important; width:100% !important; background:#ffffff !important; border:1px solid #aaa !important; border-radius: .5em !important; padding:0 10px !important; box-shadow:none !important; }
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input { height:36px !important; font-size:1em !important; }
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content textarea { padding:10px !important; }
.nf-field-container { margin-bottom:.5em !important; }
.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type='checkbox']):not([type='radio']):focus, .nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content textarea:focus, .nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content select:focus { box-shadow: 0 0 0 3px #3dc19466 !important; transition: box-shadow .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
.nf-error.field-wrap .nf-field-element:after { display:none !important; }
.nf-error .nf-field-element textarea.ninja-forms-field { border-color:#aaa !important; }
.nf-after-field { height:.5em; }
.nf-after-field .nf-error-msg { position: absolute; background: #cc0000; color: #fff !important; border-radius: 0.5em; padding: 5px 8px; top: -18px; left: 15px; font-size:.9em; animation:flipIn .3s ease-in-out; }
.nf-form-fields-required { display: none !important;}
.nf-form-content .nf-field-element:has(>input[type=submit]) { position: relative; display: inline-block !important; width:auto !important; }
.nf-form-content input[type=submit] { border:0 !important; opacity: 1 !important; transition:padding .3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; display:inline-block; overflow:hidden !important; position:relative !important; text-decoration:none !important; font-size: 1em !important; padding:10px 32px 10px 16px !important; border-radius: .33em !important; background:#3dc194 !important; color:#fff !important; }
.nf-form-content input[type=submit]:hover { box-shadow: 0 2px 0 0 #00000022; transform: translateY(-1px); cursor:pointer; }
.nf-form-content .nf-field-element:has(>input[type=submit]):after { left: calc(100% - 30px) !important; opacity: 1 !important; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; content:'' !important; position:absolute; top:50% !important; transform:translate(0%, -50%) !important; width:20px !important; height:8px !important; margin-bottom:1px !important; background: url('/wp-content/themes/smageriet/_img/button_right.svg') no-repeat left center !important; margin-left:.8em !important; }
.nf-form-content .nf-field-element:has(>input[type=submit]):hover:after { transform:translate(32px, -50%) !important; opacity: 0 !important; transition:all .3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; }

/* Lazyloaded bg */
.lazyloadedbg { animation: lazyFadeIn 1s forwards ease-in-out; }
@keyframes lazyFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Modal */
body .modal_window { background: var(--bg-tertiary); }

/* Youtube */
iframe[src*="youtube"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 768px;
}