:root { --bg: #ebe4d4; --main: #23412a; --details: #e5cb7e; --mainLight: #3b7248; --beige: #edd8bc; --gradient: #fdfcfb; --text: #1e3932; }
html { margin: 0; padding: 0; font-size: 18px; }
/*---------------------
General
---------------------*/
a { font-weight: normal; color: var(--text); text-decoration: none;}
a:hover					{text-decoration:underline;}

h1, h2, h3 { font: 1rem "EB Garamond", Arial, Sans-serif; color: var(--text); }
h1						{font-size:2rem; margin:0 0 10px 0; font-weight:bold;}
h2						{font-size:1.5rem; margin:25px 0 5px 0;}
h3						{font-size:1.125rem; margin:0px 0 15px 0;}
h4						{margin:25px 0 5px 0; font-weight:bold; line-height:1.5;}
p						{margin:0 0 10px 0;}

::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}


img, table				{border:0;}
body { margin: 0; background: var(--main); padding: 10px; COLOR: var(--text); font-size: 1rem; font-family: "Baskerville", serif; line-height: 1.5; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

.linkBtn { background-color: var(--main); display:inline-block; color: var(--bg); padding: 8px 16px; white-space: nowrap; border:none;  font-size: 1rem;}
    .linkBtn:hover { opacity: 0.9;  text-decoration:none; cursor:pointer;}
.linkBtn.black { background-color: #000;}

.customerTypeWrapper { position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #00000060; z-index: 1001; }
#customerTypePopup { width: 480px; height: 405px; background: #fff; padding: 64px; box-sizing: border-box; }
    #customerTypePopup .popupHeader { font-size: 1.5rem; color: #000000; }
    #customerTypePopup p { font-size: 1rem; text-align: center; color:#00000080; }
    #customerTypePopup .linkBtn {display:block; width: 100%; margin: 0 0 12px 0; padding: 15px 0;}
    #customerTypePopup .buttons {margin: 30px 0 30px 0;}

    
/*---------------------
Body layout
---------------------*/
#wrapper { margin: 0 auto; background: var(--bg); height: 100%; }
.inner                      {max-width: 1300px; margin:0 auto; padding: 0 24px; box-sizing:border-box;}

#topbar {display:flex; justify-content:center; align-items:flex-start; padding: 14px 38px 4px 38px; position:relative;}
    #topbar p { color: var(--beige); font-size: 1rem; font-weight: 600; font-family: "EB Garamond", sans-serif; margin: 0; position:absolute; left: 38px; line-height:1em; }
    #topbar .topbarNav { display: flex; justify-content: space-between; gap: 32px; align-items: center; border-bottom: 1px solid var(--beige); padding: 0 20px 20px 20px; }
        #topbar .topbarNav a,
        #topbar .customerTypeDiv a { font-size: 1rem; color: var(--beige); text-decoration: none; font-family: "EB Garamond", sans-serif; }
    #topbar .customerTypeDiv { display: flex; justify-content: flex-end; gap: 12px; align-items: center; position: absolute; right: 38px; }
        #topbar .customerTypeDiv a.inactive,
        #topbar .topbarNav a:hover,
        #topbar .customerTypeDiv a:hover { color: #e5cb7e50; }

.header { height: 96px; padding: 0 38px; display: flex; justify-content: center; align-items: center; position: relative; background: var(--main); position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s ease, backdrop-filter .2s ease; border-bottom: 5px solid var(--beige); }
#logo { height: 100px; display: inline-block; position: absolute; left: 38px; top: 25px; z-index: 4000; }
#logo img {height:100%; display:block;}
#logo.is-stuck {position:sticky; top: 10px; height: 80px;}
.header.is-stuck { box-shadow: 0 8px 20px rgba(0,0,0,.08); backdrop-filter: saturate(160%) blur(6px); }

.header #responsive-menu-btn { display: none; }

.topmenu { }
    .topmenu ul { margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; }
        .topmenu ul li { position: relative; display: inline-block; border-right: 1px solid #e5cb7e60; margin: 0 5px; }
            .topmenu ul li.webshop { border: 1px solid var(--beige) !important; border-radius: 5px; }
                .topmenu ul li.webshop a { color: var(--beige); padding: 0 10px 10px; }
            .topmenu ul li:last-child { margin: 0 0 0 5px; border-right: none; }
            .topmenu ul li a { font-size: 1.125rem; color: var(--beige); text-decoration: none; font-family: "EB Garamond", sans-serif; display: block; padding: 0 10px 10px 0px; position: relative; top: 5px; font-weight: 400; }
                .topmenu ul li a i { display: inline-flex; margin: 0 0 0 5px; align-items: center; }

            .topmenu ul li ul { display: block; position: absolute; top: calc(100% + 5px); left: 0; white-space: nowrap; background: var(--main); min-width: 100%; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s; }

            .topmenu ul li:hover > ul,
            .topmenu ul li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .18s ease, transform .2s ease; }

            .topmenu ul li ul li { position: relative; display: block; margin: 0; border-bottom: 1px solid var(--beige); }
            .topmenu ul li ul li:last-child {margin:0;}
                .topmenu ul li ul li a,
                .topmenu ul li.webshop ul li a { display: flex; justify-content: space-between; padding: 8px 20px; font-size: 0.875rem; color: var(--beige) !important; text-decoration: none; white-space: nowrap; top: 0; }
                    .topmenu ul li ul li a:hover { background: var(--main); color: #fff !important; }

                .topmenu ul li ul li ul { position: absolute; top: 0; left: calc(100% + 2px); white-space: nowrap; background: var(--main); box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 100; opacity: 0; visibility: hidden; transform: translateX(8px); pointer-events: none; transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s; }

                .topmenu ul li ul li:hover > ul,
                .topmenu ul li ul li:focus-within > ul { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; transition: opacity .18s ease, transform .2s ease; }

                .topmenu ul li ul li ul li { border-bottom: 1px solid var(--beige); }
                    .topmenu ul li ul li ul li a,
                    .topmenu ul li.webshop ul li ul li a { display: block; padding: 8px 20px; font-size: 0.875rem; text-decoration: none; white-space: nowrap; color: var(--beige) !important; }
                        .topmenu ul li ul li ul li a:hover { }

            .topmenu ul li:hover > a i { transform: rotate(180deg); }
            .topmenu ul li:hover ul li:hover a i { transform: rotate(0deg); }
            .topmenu ul li:hover > a:after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .topmenu ul li ul,
    .topmenu ul li ul li ul { transition: none; transform: none; }
}

.header #nav ul#responsive            {display:none;}
.header .right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; position: absolute; right: 38px; }
    .header .right p,
    .header .right .goToCheckoutLink { font-family: "EB Garamond", sans-serif; display: flex; justify-content: flex-end; align-items: center; gap: 12px; color: var(--beige); font-size: 1rem; height: 24px; margin: 0; border-right: 1px solid #e5cb7e60; padding: 0 10px 0 0; }
        .header .right .goToCheckoutLink {  gap: 4px; }
    .header .right .goToCheckoutLink span { font-size: 1.125rem; }
            .header .right .goToCheckoutLink:hover {text-decoration:none;}
    .header #shoppingCartLight p,
    .header .right .goToCheckoutLink { border-right: none; padding:0; gap: 4px;  }
    .header .right p.offerLink a { color:var(--beige); border: 1px solid var(--beige); padding: 5px 10px; border-radius:5px; font-size: 1.125rem; }
    .header .right p.offerLink a:hover { background: var(--beige); color: var(--main); text-decoration:none; }
            #shoppingCartLight { position: relative; }
#shoppingaCartPopup {display:none; background: #fff; padding: 32px; width: 320px; height: auto; box-sizing: border-box; position: absolute; right: 0; top: 50px; }
    #shoppingaCartPopup p { justify-content: center; height: auto; border-right: none; padding: 0; color: #000; margin: 0 0 15px 0; flex-direction: row; } 
#shoppingaCartPopup p:last-child {margin: 0;}
#shoppingaCartPopup .linkBtn {font-size: 1rem;}
/*---------------------
Page layout
---------------------*/
.pageTitle p { text-align: center; color: #000; font-size: 1rem; }
.breadcrumbs span {font-weight: bold; }


.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix 			{height: 1%;}

.content					{ }
.content .inner             {min-height:450px; padding:60px 24px 0;}
.maincontent   			{width:100%; margin:0; padding:0; overflow:hidden;}

/*---------------------
Submenu vertical
---------------------*/ 
.leftmenu                           {float:left; width:25%;}
.leftmenu ul					    {width:90%; margin:0; padding:0 0 10px 0; list-style:none; overflow:hidden;}
.leftmenu ul li				        {width:100%; margin:0; padding:0; border-bottom:1px dotted #999;}
.leftmenu ul li:last-child          {background:none; border:0;}
.leftmenu ul li a				    {width:100%; margin:0; padding:0; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.leftmenu ul li a:hover             {color:#333;}
.leftmenu ul li.on a			    {color:#333; font-weight:bold;}
.leftmenu ul li.on-childs           {background:none; border:0;}
.leftmenu ul li.on-childs a	        {color:#555; font-weight:bold; line-height:30px;}

.leftmenu ul li.on-childs ul            {margin:0 0 0 15px !important;}
.leftmenu ul li.on-childs ul li         {background:none; border:0;}
.leftmenu ul li.on-childs ul li a       {font-weight:normal !important; line-height:24px !important; font-size:0.6rem; color:#555;}
.leftmenu ul li.on-childs ul li a:hover {color:#333;}
.leftmenu ul li.on-childs ul li.on a    {color:#333; font-weight:bold !important;}

/*---------------------
Submenu horizontal
---------------------*/ 
.fullmenu                           {background-color:#cccccc;}
.fullmenu ul					    {width:auto; text-align:center; margin:0; padding:0; list-style:none; overflow:hidden;}
.fullmenu ul li				        {display:inline-block; margin:0 10px; padding:0; }
.fullmenu ul li:last-child          {background:none; border:0;}
.fullmenu ul li a				    {margin:0; padding:5px 10px; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.fullmenu ul li a:hover             {color:#333;}
.fullmenu ul li.on a, .fullmenu ul li.on-childs a			    {color:#333; font-weight:bold;}

/*---------------------
Footer layout
---------------------*/
#footer { padding: 160px 0 120px 0; background: url(/gfx/footerbg-new.jpg) top center no-repeat #18110A; background-size: contain; height: 1905px; box-sizing:border-box; }
#footer .inner          {height:100%; display:flex; justify-content:space-between; flex-direction:column; }
#footer .footerHeader {font-size: 2.75rem; font-weight: 400; line-height:120%; max-width: 940px; margin: 0 auto;}
#footer h4 {font-weight:bold; font-size: 1.125rem; margin: 0 0 12px 0; color:#fff;}
#footer p,
#footer p a {color:#fff;}
#footer .footerBottom {display:flex; justify-content:space-between; width:100%;}

    #footer .footerInfo { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 80px; }
#footer .footerNav {margin: 0 0 48px 0;}
    #footer .footerNav a { font-size: 1rem; color: #fff; text-decoration: none; display: block; margin: 0 0 8px 0; font-weight: 400; }
#footer .footerNav a:hover {text-decoration:underline;}