html {font-size: clamp(15px, 0.85vw, 17px); box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: 7rem;}
* {padding: 0; margin: 0; box-sizing: inherit;}
body {color: #000; font-family: 'Jost', sans-serif; line-height: 1.5; font-weight: 400; overflow-y: scroll; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; }

:root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1rem;
    --font-size-body: 1rem;

    --max-width-wide: 120rem;
    --max-width: 75rem;
    --max-width-narrow: 50rem;
}
h1,h2,h3 { line-height: 1.1;}
h1 {font-size: var(--font-size-h1); font-weight: 700; margin: 0.4rem 0 1rem;}
h2 {font-size: var(--font-size-h2); font-weight: 600; margin: 3rem 0 0.75rem;}
h3 {font-size: var(--font-size-h3); font-weight: 600; margin: 2rem 0 0.25rem;}
h1 + h2 {margin-top: 1.2rem;}
h1 + h3 {margin-top: 0;}
a {color: black; text-decoration: underline;}
p a, a[href^="mailto:"] {text-decoration: underline; color: #000;}
p.error {color: #ed1c24;}
p.error:empty { display: none; }
strong {font-weight: 600;}

.container {max-width: var(--max-width-wide); margin: 0 auto; padding: 0 1rem; position: relative; width: 100%;}
.container .container {padding: 0;}
.container .hassubnav .container {padding: 0 1rem;}

.single.textcolumn {max-width: var(--max-width-narrow); margin: 0 auto;}
.double.textcolumn {display: flex; flex-wrap: wrap; gap: 4rem;}
.double.textcolumn > div {flex-grow: 1; width: calc(var(--max-width-narrow) / 2);}
.textcolumn h1 {line-height: 1; padding: 0 0 1.5rem; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 2rem;}
.textcolumn h1 span {display: block;opacity: 0.4; padding: 0.25rem 0 0;}
p,
.textcolumn ol,
.textcolumn ul,
.textcolumn p {margin-bottom: 1.4rem;}
.textcolumn ol {margin-left: 2rem;}
.textcolumn ul {margin-left: 1.4rem;}
.smallcolumn {max-width: calc(var(--max-width-narrow) / 2); margin: 0 auto;}
img {max-width: 100%; height: auto;}

.body {padding-top: 3rem;}
.body > .container > ul {margin-left: 1rem;}

.admintable {border-spacing: 0; padding: 0; margin: 1.5rem 0; width: 100%;}
.admintable tr td, .admintable tr th {padding: 0.25rem 0.75rem; text-align: left;}
.admintable tr td:not(:last-child) a,
.admintable tr th a {color: #000;}
.admintable tr.inactive td:not(:last-child), .admintable tr.inactive td:not(:last-child) a {
    color: silver!important; 
    text-decoration: line-through;
    text-decoration-color: silver;
}
.admintable tr:nth-child(odd) td {background: #f6f6f6;}
.admintable a {color: rgba(0,0,0,0.5); text-decoration: none;}
.admintable tr.deleted td:not(.actions) {text-decoration: line-through;}

.dotcontainer .dot {width: 2rem; height: 2rem; background: gray; border-radius: 100%; position: absolute; margin-top: 0.25rem;}
.dotcontainer .dotcontent {max-width: 50rem;  margin-left: 15%;}
.dotbar {background: gray; margin-block: 2.5rem -1.25rem; padding-inline: 0.5rem; color: white; padding-block: 0.25rem; font-size: 0.9rem;}
.dotbar strong {font-weight: 600;}

.readmore-link {display: inline-block; margin-left: 0.25em;}

/* The category intro shows its first 80 words; the rest is in the page as hidden
   .longtext-rest nodes that js/readmore.js reveals. The toggle is a <button> so it can
   never navigate (the page has a <base href>, against which an <a href="#"> lands on
   the home page), dressed as the plain black underlined link on line 21. It sits inline
   as the last word of the teaser, so it also resets whatever the cut landed in - italics
   inside an <em>, bold inside a <strong>. The underline needs !important only because
   the shared input/button rule below sets text-decoration: none that way. */
.longtext-toggle {display: inline; margin-left: 0.25em; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; font: inherit; font-style: normal; font-weight: 400; color: black; text-decoration: underline!important; cursor: pointer; vertical-align: baseline; white-space: nowrap;}
.longtext-rest[hidden] {display: none;}

body.home #breadcrumbs {display: none;}
#breadcrumbs {background: #fff; font-size: 0.9rem; color: rgba(0, 0, 0, 0.35);}
#breadcrumbs ul {height: 2.5rem; display: flex; align-items: center; padding-bottom: 0.25rem; overflow-x: auto; scrollbar-width: none;}
#breadcrumbs ul li {list-style: none; padding-right: 0.5rem; white-space: nowrap;}
#breadcrumbs ul li::before {content: "/"; display: inline-block; color: rgba(0, 0, 0, 0.35);; margin-right: 0.5rem;}
#breadcrumbs ul li:first-child::before {content: none;}
#breadcrumbs ul li a {color: rgba(0, 0, 0, 0.35);; text-decoration: none;}
#breadcrumbs ul li a img {width: 1.1rem; vertical-align: middle; position: relative; top: 0.1rem;}
#breadcrumbs ul li.active a {color: rgba(0, 0, 0, 0.35);;}
#breadcrumbs ul:has(:nth-child(6)) li:nth-child(2) {display: inline-block; max-width: 4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

@media only screen and (max-width: 600px) {
#breadcrumbs ul li:last-child {display: none;}
}

p.small {margin-bottom: 1rem;}

form > div {display: flex; margin-bottom: 1rem; position: relative;}
form > div label {line-height: 2rem; min-width: 8rem; white-space: nowrap; text-overflow: ellipsis; color: rgba(0,0,0,0.5); position: relative;}
form > div input:not([type="submit"],[type="checkbox"]), form > div textarea, div.disabledinput {height: 2.4rem; line-height: 2.4rem; border: 1px solid rgba(0,0,0,0.15); flex-grow: 1; padding: 0 0.5rem;}
form > div textarea {height: 25rem; line-height: 1.4; padding: 0.5rem;}
form > div input[disabled], div.disabledinput, form > div select[disabled] {color: rgba(0,0,0,0.25); background: rgba(0,0,0,0.05);}
form > div input[type="checkbox"], form > div input[type="radio"] {height: 1rem;}

form .form-group {display: grid; grid-template-columns: 10rem auto;}
form .form-group .help-block {display: block; grid-column-start: 1; grid-column-end: 3; color: #ed1c24;}
form .form-group .help-block:empty {display: none;}
form .form-group:has(.help-block:not(:empty)) :is(label,input,select) {border-color: #ed1c24; color: #ed1c24;}


input[type="checkbox"], input[type="checkbox"] + *::before {width: 0.95rem; height: 100%; overflow: hidden; left: 0; opacity: 0; display: inline-block; vertical-align: top; border: 0; padding: 0; margin: 0 0.35rem 0 0;}
input[type="checkbox"] + *::before {content: ""; position: absolute; background: url('../img/square-light.svg') center center / contain no-repeat; opacity: 1; cursor: pointer;}
input[type="checkbox"]:focus-visible + *::before { outline: 2px solid blue; }
input[type="checkbox"]:checked + *::before {background: url('../img/check-square.svg') center center / contain no-repeat;}

input[type="radio"], input[type="radio"] + *::before {width: 1rem; height: 100%; overflow: hidden; left: 0; opacity: 0; display: inline-block; vertical-align: top; border: 0; padding: 0; margin: 0 0.35rem 0 0;}
input[type="radio"] + *::before {content: ""; position: absolute; background: url('../img/circle-light.svg') center center / contain no-repeat; opacity: 1; cursor: pointer;}
input[type="radio"]:checked + *::before {background: url('../img/dot-circle.svg') center center / contain no-repeat;}

.form-group.checkbox > div {flex-grow: 1;}
.form-group.checkbox > div > div {position: relative; display: flex;}
.form-group.checkbox > div > div > label {display: flex; margin-left: 0.3rem;}
.form-group.checkbox > div > div > a {line-height: 2.4rem; cursor: pointer;}

form div[style*="flex-direction: column"] input {flex-grow: unset; width: 100%;}
form div[style*="flex-direction: column"] input[type="radio"],
form div[style*="flex-direction: column"] input[type="checkbox"] {width: auto;}
form .error input, form .error :not(label){color: #ed1c24;}
form .error input {border: 1px solid #ed1c24!important;}

form > div input:not([type="submit"],[type="checkbox"]):user-invalid, form select:user-invalid, form textarea:user-invalid {border-color: #ed1c24; color: #ed1c24;}
form div:has(> input:user-invalid) label,
form div:has(> select:user-invalid) label,
form div:has(> textarea:user-invalid) label,
form .form-group:has(> input:user-invalid) label,
form .form-group:has(> select:user-invalid) label {color: #ed1c24;}
input[type="checkbox"]:user-invalid + *,
input[type="radio"]:user-invalid + *,
input[type="checkbox"]:user-invalid + * a,
input[type="radio"]:user-invalid + * a {color: #ed1c24;}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
dl {position: relative; display: flex; flex-wrap: wrap;}
dl dt {clear: left; width: 40%; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
dl dd {width: 60%;}

select, input[type="date"] {
    height: 2.4rem;
    line-height: 2.4rem;
    width: 4.5rem;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 0 0.5rem;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 0rem;
    background: transparent;
    width: 100%;
    color: #000;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 1.8rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.7rem;
}
input, button, .button, textarea, .disabledinput {
    font-family: 'Jost', sans-serif;
    font-size: 1rem; 
    font-weight: 400; 
    color: #000; 
    background: white; 
    border: 1px solid rgb(0,0,0,0.1);
    text-decoration: none!important;
}
.disabledinput {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
button, .button {cursor: pointer;}
.button.arrow::after {content: ">"; color: #ed1c24; display: inline-block; margin-left: 0.5rem; font-weight: 700;}
input[type='checkbox'], input[type='radio'] {position: relative; top: 0.1rem; margin-right: 0.2rem;}
.adminform.search {max-width: 100%;}
.adminform.search label {display: none;}
.adminform.search + p, .adminform.search + script + p {opacity: 0.5; position: relative; bottom: 0.75rem;}

.button {
    font-size: 1.1rem; 
    border: 0; 
    cursor: pointer; 
    background: #000; 
    color: white; 
    display: block;
    line-height: 2.3rem; 
    text-align: center; 
    text-decoration: none;
    width: 100%; 
    display: block;
    border: 0;
    font-weight: 600;
    height: 2.8rem;
    line-height: 2.8rem;
}
.button img {height: 1.4rem; width: 1.4rem; vertical-align: middle; position: relative; bottom: 0.15rem; object-fit: contain; margin-right: 0.15rem;}
.button.primary {background: #000; color: white; font-size: 1.3rem; font-weight: bold;}
.button.primary img {height: 1.75rem; width: 1.75rem; bottom: 0.2rem;}
.button.disabled, .button[disabled] {background: #bbb; pointer-events: none; border-color: #999;}


.well {border: 1px solid rgba(0,0,0,0.15); padding: 2rem 1.75rem 2.5rem;}
.well.active {background: #f5f5f5;border: 0;}
.well *:first-child {padding-top: 0; margin-top: 0;}
.well *:last-child {margin-bottom: 0; padding-bottom: 0;}
div.well + .well {border-top: 0;}

.well.medium {padding: 1.5rem 1.75rem 1.65rem 1.75rem; position: relative;}
.floatlink {position: absolute; top: 0; right: 0; text-decoration: none; color: rgba(0, 0, 0, 0.5); z-index: 1;}
.well .floatlink {top: 1rem; right: 1.75rem;}

label.well {border-radius: 0.3rem; padding: 1rem 1.25rem 1.2rem 3rem; margin-bottom: 0.5rem; cursor: pointer; position: relative; line-height: 1.4; color: black;}
label.well span:first-child {float: right; font-weight: 600; color: black;}
label.well .optionprice {float: right; font-weight: 600; color: black;}
label.well.active {border: 1px solid black;}
label.well input {position: absolute; margin: 1.1rem 0 0 -1.75rem;}
label.well img {vertical-align: middle; display: inline-block; width: 2rem; margin-right: 0.3rem;}

label.well input[type="radio"] + *::before {top: 0; left: 1.2rem; background-position: center 1.25rem;}

hr {height: 1px; border: 0; background: rgba(0,0,0,0.15);}
h1.small {font-size: 2rem;}

th {font-weight: 600;}

body.bare { grid-template-rows: auto 1fr auto;}
body.bare #menutoggle, body.bare #nav, body.bare #breadcrumbs {display: none!important;}
body.bare #header {height: 4rem; margin-bottom: 1rem;}
body.bare form > div {margin-bottom: 0.75rem;}
body.bare #header #brand .container { display: flex; justify-content: center; }
body.bare #header #brand .container #logo { margin: 0;  }
body.bare #footer { padding-block: 1rem;}
body.bare #footer .menus { padding: 0; margin: 0 auto;  }
body.bare #footer .menus > div:first-of-type ul { display: flex; margin: 0;  flex-wrap: wrap; justify-content: center; gap: 1rem; }
body.bare #footer .menus > div:first-of-type h3,
body.bare #footer .container  > div:not(.menus),
body.bare #footer .menus > div:not(:first-of-type),
body.bare #header #brand .container > ul, 
body.bare #header #brand .container > ul, 
body.bare #header #brand #search, 
body.bare #prefooter,
body.bare #footersettings,
body.bare #afterfooter { display: none; }
body.bare form > div { flex-direction: column;}
.backlink-bare { max-width: 25rem; margin: 0 auto; width: 100%; display: block; margin-block: -2rem 2rem; padding-inline: 1.4rem 0;  text-decoration: none; background: url('../img/chevron-left-black.svg') 0% 50% / .7em .7em no-repeat }   


#checkout_steps {display: block; text-align: center; color: rgba(0,0,0,0.5); font-size: 0.9rem; margin-left: 0;}
#checkout_steps li {width: 110px; text-align: left; display: inline-block; border-top: 1px solid rgba(0,0,0,0.15); padding-top: 8px;}
#checkout_steps li.past {border-color: #000;}
#checkout_steps li:last-child {border: 0; width: 0px;}
#checkout_steps li > span > * {
    white-space: nowrap;
    display: inline-block;
    -ms-transform: translateX(-50%); /* IE 9 */
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    transform: translateX(-50%);
    padding-top: 0.1rem;
}
#checkout_steps li > span > a {color: #000; text-decoration: none;}
#checkout_steps li > span > a:before {content: ""; position: absolute; bottom: 0; width: 100%; height: 3.5rem;}
#checkout_steps li > *:before {position: absolute; margin: -16px 0 0 -5px; width: 11px; height: 11px; content: ""; 
    border-radius: 99px; border: 2px solid white; 
    box-shadow: 0px 0px 0.1px 1px #bbb; background: white;
}
#checkout_steps li.past > span:before,
#checkout_steps li.current > span:before {box-shadow: 0px 0px 0.1px 1px #000; background: #000;}

.hidden {display: none!important;}

.accountpage {display: flex; flex-direction: row-reverse;}
.accountpage .accountcontent {flex-grow: 1; padding-right: 3rem; width: 100%;}
.accountpage .accountcontent h2 {margin-top: 0;}
.accountpage .accountmenu {padding-top: 0.85rem; position: relative; width: 15rem; border-left: 1px solid rgba(0,0,0,0.15); padding-left: 2.25rem;}
.accountpage .accountmenu ul {margin-left: 0!important;}
.accountpage .accountmenu ul li {list-style: none;}
.accountpage .accountmenu ul li a {color:rgba(0, 0, 0, 0.5); text-decoration: none;}
.accountpage .accountmenu ul li.selected a { color: #000;}




ul.paginationlinks {margin: 50px 0 0; padding: 0; text-align: center;}
ul.paginationlinks li {list-style: none; display: none;}
ul.paginationlinks li a {display: block; padding: 0 7px 2px; border: 1px solid #dcdcdc; line-height: 1.4em;}
ul.paginationlinks li:last-child,
ul.paginationlinks li:first-child {display: inline-block;}
ul.paginationlinks li.visible {display: inline-block;}
ul.paginationlinks li.current a {background: #009ac7; border-color: #009ac7;}
ul.paginationlinks li.current a {color: white;}

.mobileonly {display: none;}

@media only screen and (max-width: 600px) {
    ul.paginationlinks li.visible {display: none;}
    ul.paginationlinks li.current,
    ul.paginationlinks li.isnearmobile,
    ul.paginationlinks li:last-child,
    ul.paginationlinks li:first-child {display: inline-block;}
    .mobileonly {display: block;}
}

@media only screen and (max-width: 1024px) {
    #header #breadcrumbs {margin-top: 0;}
    .imagemap .area:hover {box-shadow: 0px 0px 1.5vw rgba(0,0,0,0.5);}

    .accountpage {display: block;}
    .accountpage .accountcontent {padding-right: 0;}
    .accountpage .accountmenu {padding-left: 0; border: 0; padding-top: 0;}
}
@media only screen and (max-width: 600px) {
    .well.medium {padding-left: 0rem; padding-right: 0rem; border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid rgba(0,0,0,0.15)!important;}
    .well .floatlink {right: 0rem;}
    #checkout_steps {margin: 0 auto; width: 9rem;}
    #checkout_steps li {display: block; width: auto; border-top: none; border-left: 1px solid rgba(0,0,0,0.15); margin-left: 8px;}
    #checkout_steps li > ::before {margin: -16px 0 0 -8px;}
    #checkout_steps li > span > * {transform: translate(17px, -20px);}
    #checkout_steps li > span > a:before {height: 100%; left: 0; width: 2rem; margin-left: -2rem;}
}


/* ======================== WISHLIST ========================= */
a.button.wishlist { background:  none; width: 2.5rem;  }
a.button.wishlist img { width: 2.5rem; height: auto; }
ul.wishlist { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem 1rem; list-style: none; margin: 1rem 0 0 !important; padding: 0;  }
ul.wishlist li { position: relative; }
ul.wishlist a.delete {  display: none; }

/*------------------------*/
/* prefooter
/*------------------------*/
.prefooter { padding: 0;  font-size: .9rem;}
.prefooter .usps { 
    padding: 4rem 1rem; 
    & h2 { font-size: 1.25rem; text-align: center; margin-bottom: 2rem; font-weight: 700; }
    & ul {  display: grid; grid-auto-flow: column; grid-gap: 2rem; list-style: none;  overflow: auto; max-width: 100vw; scroll-snap-type: x mandatory; margin-inline: -1rem;   -ms-overflow-style: none; scrollbar-width: none;  padding-inline: 1rem;}
    & ul::-webkit-scrollbar { display: none; }
    & ul li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 13rem; max-width: 13rem; margin-inline: auto; line-height: 1.4; scroll-snap-align: center;}
    & ul li h3 { font-size: inherit; font-weight: 700; margin-top: 0; padding-top: 0;}
    & ul li img { max-width: 7rem;  order: -1;}
}

.prefooter .newsletter { position: relative;  isolation: isolate; padding: 2rem 1rem; display: flex; align-items: center; gap: 10%; width: 100%; flex-wrap: wrap; 
    &::before { position: absolute; left: 50%; max-width: 100vw; right: 50%; width: 100vw; margin-inline: -50vw;  content: ""; top: 0; background: #edf7fa; height: 100%; z-index: -1; }
    h2 { margin: 0; padding: 0 0 .2em;  font-size: inherit;}
    p { padding: 0; margin: 0;  }
    form { width: 100%; max-width: 35rem;}
    input { padding: .5em 1em;  border-radius: .5em; border: none; grid-column: -1/1; width: 100%;  }
}  
body:has(.prefooter .newsletter) #footer { margin-top: 1.5rem; }

/* ==================== POPUP ==================== */
#popup .popup { position: fixed; z-index: 1000; width: min(32rem, calc(100vw - 2.5rem)); background: #fff; color: #000; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.25); padding: 1.5rem 1.25rem 1.25rem; font-family: 'Jost', sans-serif; }
#popup.popup--bottom_left .popup { left: 1.25rem; bottom: 1.25rem; }
#popup.popup--center { position: fixed; inset: 0; z-index: 1000; display: flex; background: rgba(0,0,0,0.5); }
#popup.popup--center .popup { position: relative; margin: auto; }
#popup .popup__close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; line-height: 1; font-size: 1.5rem; background: none; border: 0; color: #000; cursor: pointer; }
#popup .popup__close:hover { color: #ed1c24; }
#popup .popup__title { font-size: 1.9rem; font-weight: 700; padding: 0 2rem 0.5rem 0; }
#popup .popup__body { margin: 0 0 1.25rem; }
#popup .popup__body > *:first-child { margin-top: 0; }
#popup .popup__body img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
#popup .popup__body table { width: 100%; border-collapse: collapse; }
#popup .popup__body th { text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid #000; }
#popup .popup__body td { padding: 0.5rem 0.75rem; }
#popup .popup__body td:is(:nth-of-type(2),:nth-of-type(3)) { white-space: nowrap;}
#popup .popup__body tbody tr:nth-child(odd) { background: #f3f3f3; }
#popup .popup__actions { display: flex; justify-content: flex-end; }
#popup .popup__ok { font-size: 1.25rem; font-weight: bold; border: 0; border-radius: 0; background: #000; color: #fff; padding: 0.6rem 1.5rem; cursor: pointer; }
#popup .popup__ok::after { content: ">"; color: #ed1c24; display: inline-block; margin-left: 0.5em; transition: color 250ms; }
#popup .popup__ok:hover { background: #000; }
#popup h2 {margin-top: 1rem;}