/* scroll-padding-top clears the sticky header: brand row (scrolled state) plus the blue shop bar */
html {font-size: 15px; box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: 10rem;}
* {padding: 0; margin: 0; box-sizing: inherit;}
body {color: var(--main-color, #404042); font-family: 'Lato', system-ui, sans-serif; line-height: 1.5; font-weight: var(--font-weight-body, 300); overflow-y: scroll;}
h1 {font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0.4rem 0 0.4rem;}
h2 {font-size: 1.25rem; font-weight: 700; line-height: 1.1; margin: 3rem 0 0.75rem;}
h3 {font-size: 1rem; font-weight: 700; line-height: 1.1; margin: 2rem 0 0.25rem;}
h1 + h2 {margin-top: 1.2rem;}
h1 + h3 {margin-top: 0;}
a {color: #00a8e9; text-decoration: none;}
#specificaties ~ * a,
p a, a[href^="mailto:"] {text-decoration: underline; color: #404042;}
p.error {color: red;}
#specificaties ~ * a {text-decoration-color: rgba(0,0,0,0.5);}

.container {max-width: 82rem; margin: 0 auto; padding: 0 1rem; position: relative;}
.container .container {padding: 0;}
.container .hassubnav .container {padding: 0 1rem;}
.notification {background: #404042; display: block; color: white; top: 0; margin-top: -0.2rem; font-size: 0.7rem; width: 1rem; height: 1rem; line-height: 1rem; border-radius: 100%; text-align: center; position: absolute; right: 0; margin-right: -0.2rem;}
.notification.alert {background: red;}

.single.textcolumn {max-width: 58rem; margin: 0 auto;}
.double.textcolumn {display: flex; flex-wrap: wrap; gap: 4rem;}
.double.textcolumn > div {flex-grow: 1; width: 25rem;}
.textcolumn h1 {line-height: 1; padding: 3rem 0 1.5rem; font-weight: 700; font-size: 3rem;}
.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: 25rem; margin: 0 auto;}
img {max-width: 100%; height: auto;}

.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: #404042;}
.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: #edf7fa;}
.admintable a {color: rgb(0, 204, 255);}
.admintable tr.deleted td:not(.actions) {text-decoration: line-through;}

/* =========================================================== */
/* ===== BLUE BAR: shop/category navigation (KEPT) =========== */
/* The header, #preheader, #breadcrumbs and #afterfooter are now */
/* owned by the botiss website /p/css/header-footer.css. Only the */
/* blue shop bar lives here, re-scoped from the old #header #nav. */
/* It sits inside <header>, which is sticky, so it stays visible  */
/* while scrolling; the z-index keeps it under the mobile menu.   */
#shopnav {background: rgb(0, 204, 255); font-size: 0.9rem; width: 100%; position: relative; z-index: 1;}
@media only screen and (max-width: 1150px) {
    /* the botiss header is not sticky at this width, so pull it up by the height of everything above */
    /* the blue bar: the bar itself stays pinned. stickyShopnav() in includes/header.php measures the */
    /* offset at runtime, the fallback below is the height of the mobile preheader plus brand row. */
    body:not(.checkout) header {position: sticky; top: calc(-1 * var(--shopnav-offset, 9.75rem));}
}
#shopnav > .container > ul {height: 3rem; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden;}
#shopnav > .container > ul > li {list-style: none; padding-right: 2rem; height: 3rem; line-height: 3rem; position: relative; white-space: nowrap;}
#shopnav > .container > ul > li > a {color: white; text-decoration: none; display: block; font-weight: 700; transition: color 0.15s ease-in-out; position: relative;}

#shopnav > .container > ul > li.active > a::after {
    content: "";
    height: 3px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: white;;
    left: 0;
    opacity: 1;
}
#shopnav > .container > ul > li.active > a {color: white;}
#shopnav > .container > ul > li:not(.active) > a:hover,
#shopnav > .container > ul > li:not(.active):hover > a {color: #fffa;}

/* botiss loads a global `img {display:block}` in style.css (not loaded here); match it for the breadcrumb home icon */
#breadcrumbs ul li a img {display: block;}

/* The "Shop botiss" action is the botiss website's .button (style.css is not loaded here, and the
   .button below is the catalog's own filled, square, bold one), but pinned to the website button's
   hovered look — filled with primary — so it stays that way at rest and on hover. */
header #brand ul.actions .button {
    /* font-size: the `input, button, .button` reset below pins 1rem, which the website's button
       never gets — it inherits #brand's 0.9rem, and --btn-padding is in em, so it must match. */
    font-size: inherit; height: auto; line-height: unset; font-weight: var(--font-weight-body, 300);
    padding: var(--btn-padding); border-radius: var(--btn-border-radius);
    border-top: var(--btn-border-top); border-right: var(--btn-border-right);
    border-bottom: var(--btn-border-bottom); border-left: var(--btn-border-left);
    background: var(--primary-color); color: #fff;
    text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff;
    text-align: center; text-decoration: none;
}
/* The word order of the shop action differs per language ("botiss kaufen"), so the whole label is
   translated and the narrow screens get a short one. The .mobile/.desktop pair comes from the
   website's style.css, which is not loaded here, so repeat the rules for this button. */
header #brand ul.actions .button .mobile {display: none;}
@media only screen and (max-width: 40rem) {
    header #brand ul.actions .button .mobile {display: inline;}
    header #brand ul.actions .button .desktop {display: none;}
}

.anchor {position: absolute; height: 9rem; width: 1px; transform: translateY(-100%); opacity: 0; pointer-events: none;}
@media only screen and (max-width: 950px) {
    .anchor {height: 2rem;}
}

.trustbar, .small {font-size: 0.8rem;}
p.small {margin-bottom: 1rem;}
.trustbar em {font-style: normal; color: #6dc148; font-weight: 700;}
.trustbar ul {padding-top: 0.75rem; height: 3rem; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; justify-content: center; width: 100%;}
.trustbar ul li {list-style: none; padding-right: 1.5rem; white-space: nowrap; height: 2.25rem;}
.trustbar ul li::before {content: "✔"; color: #6dc148; display: inline-block; margin-right: .1rem; font-size: 1.5rem; vertical-align: middle; position: relative; bottom: 0.1rem; line-height: 1.4;}
.trustbar ul.vertical {padding-top: 0; height: auto; display: block; align-items: left; width: auto; text-align: left; margin-bottom: 1.4rem;}
.trustbar ul.vertical li {height: 1.4rem;}
.trustbar ul.vertical li::before {line-height: 1.4rem;}

#brandimage {margin-top: 1.5rem;}
#brandimage .container > div {padding-bottom: 37%; width: 100%; position: relative; border-radius: 0.3rem; overflow: hidden; background: url('/p/uploads/banners/lifetime-smiles.jpg') left center / cover no-repeat;}

.fullscreen {height: 100lvh; width: 100%; top: 0; position: relative; overflow: hidden;}
.fullscreen > div {background: rgba(0,0,0,0.5); width: 100%; height: calc(100% - 7rem); position: relative; top: 7rem; display: flex; background-attachment: fixed; backdrop-filter: blur(1px);}
.fullscreen > div > div {margin: auto; color: white; text-align: center; font-size: 105%; position: relative; padding-block: 0 3rem;}
.fullscreen > div > div::before {
    content: ""; 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    filter: blur(2rem);
    border-radius: 100%;
    animation: appearfrombottom 3s both; 
    animation-delay: 0.5s;
    z-index: -1;
}
.fullscreen > div > div h1 {font-weight: 900; font-size: 2.9rem; line-height: 1.1; display: flex; justify-content: center; flex-wrap: wrap; margin-inline: 1rem;}
.fullscreen > div > div h1 span {margin-inline: 0.45rem; white-space: nowrap;}
.fullscreen > div > div ul {display: flex; justify-content: center; gap: 1.5rem 3.75rem; padding: 4rem 2rem 0; flex-wrap: wrap;}
.fullscreen > div > div ul li {list-style: none; text-align: center;}
.fullscreen > div > div ul li img {height: 5rem;}
.fullscreen > div > div ul li a > * {display: inline-block; color: white; font-weight: 900; font-size: 85%; line-height: 1.7;}
.fullscreen > div > div ul li a {display: block; width: 7rem;}
.fullscreen > div > div ul li a img {transition: all 0.3s ease-in-out; display: inline-block; margin-bottom: 0.1rem;}
.fullscreen > div > div ul li a:hover img {transform: translateY(-0.6rem);}
.fullscreen > div > div ul li a span:last-child {opacity: 0.5; font-weight: 600; font-size: 70%; margin: 0.5rem -0.5rem; line-height: 1.45;}
/* The headerbar mirrors the hero of the botiss website (section.bg-image.intro */
/* in /p/css/style.css, which the catalog does not load): the same photo behind */
/* the same dark, desaturated overlay, titled in light uppercase Lato.          */
.fullscreen.headerbar {min-height: 12rem; height: auto; background: url(/p/uploads/fill_hu_2185c875a9990d17.webp) var(--almost-black, #111) center center / cover no-repeat;}
/* per category header images can be added here, e.g.
body.bu_membranes .fullscreen.headerbar {background-image: url(/img/membranes.jpg);} */

.fullscreen.headerbar > div {top: 0; height: 100%; position: absolute; background: var(--overlay-dark, rgba(0,0,0,0.6)); backdrop-filter: grayscale(1) brightness(0.4);}
.fullscreen.headerbar > div > div {padding-bottom: 1rem;}
/* the website hero has no blurred blob behind the title, just the flat overlay above */
.fullscreen.headerbar > div > div::before {display: none;}
.fullscreen.headerbar > div > div h1 {
    font-family: var(--h1-font, 'Lato', system-ui, sans-serif);
    font-size: var(--font-size-h1, 3rem);
    font-weight: var(--font-weight-header, 300);
    line-height: var(--line-height-small, 1.2);
    text-transform: uppercase;
}
.fullscreen.headerbar > div > div h1 strong {font-weight: 900;}
@media only screen and (max-width: 500px) {
    .fullscreen > div > div > :nth-child(1) {font-size: 90%;}
    .fullscreen > div > div ul {display: none;}
    .fullscreen.headerbar {min-height: 8rem;} 
    .fullscreen.headerbar  > div > div h1 {font-size: 2rem;}
}

form > div {display: flex; margin-bottom: 1rem; position: relative;}
form > div label {line-height: 2.4rem; min-width: 8rem; white-space: nowrap; text-overflow: ellipsis;}
form div.checkbox label {white-space: wrap!important; line-height: 1.2; display: flex; gap: 0.3rem;}
form div.checkbox input {min-width: 1rem;}
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 {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 > div.form-group {display: grid; grid-template-columns: 10rem auto;}
form > div.form-group .help-block {display: none;}
div.form-group.has-error .help-block {display: block; margin-top: 1rem; grid-column-start: 1; grid-column-end: 3; color: red;}

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"]:checked + *::before {background: url('/img/fontawesome-solid/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/fontawesome-solid/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;}
form .error input, form .error :not(label){color: red;}
form .error input {border: 1px solid red!important;}

.fakeselect a {
    display: block;
    height: 2.4rem;
    line-height: 2.4rem;
    border: 1px solid rgba(0,0,0,0.15);
    width: 100%;
    border-radius: 0.3rem;
    padding: 0 0.5rem;
    color: #404042;
}
.fakeselect + * {margin-top: 0.5rem;}

[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%;}



.imagemap {position: relative;}
.imagemap img {display: block;}
.imagemap .area {display: block; position: absolute; transition: box-shadow 0.15s ease-in-out;}
.imagemap .area.disabled {background: rgba(255,255,255,0.75); pointer-events: none;}
.imagemap .area:hover {background: rgb(0, 168, 233, 0); box-shadow: 0px 0px 0.5rem rgba(0,0,0,0.5);}

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: 'Lato', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.3rem;
    background: transparent;
    width: 100%;
    color: #404042;
}
input, button, .button, textarea, .disabledinput {
    font-family: 'Lato', system-ui, sans-serif; 
    font-size: 1rem; 
    font-weight: 500; 
    border-radius: 0.3rem; 
    color: #404042; 
    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;}
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 {
    border: 0; cursor: pointer; background: #edf7fa; color: #00a8e9; display: block; height: 2.5rem; 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.55rem; border-bottom: 2px solid #cbe1e7;}
.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: #67b938; color: white; height: 3rem; line-height: 2.75rem; border-bottom: 3px solid #4d9c20;}
.button.primary img {height: 1.75rem; width: 1.75rem; bottom: 0.2rem;}
.button.disabled, .button[disabled] {background: #bbb; pointer-events: none; border-color: #999;}


#footer {background: rgb(0, 204, 255); color: white; padding: 2.5rem 0 0.5rem; margin-top: 6rem;}
#footer .trustbar {position: relative; bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.25);}
#footer .trustbar ul li::before, #footer .trustbar em {color: white;}
#footer .trustbar ul {padding: 0.5rem 0 0.3rem;}
#footer .container {display: flex; flex-wrap: wrap;}
#footer .container > div {flex-grow: 1; font-size: 0.8rem; width: 12rem;}
#footer .container > div h3 {margin-block: 0.5rem;}
#footer .container > div ul {margin-bottom: 3rem;}
#footer .container > div ul li {list-style: none; line-height: 2;}
#footer .container > div ul li a {color: white;text-decoration: none;}

#afterfooter {text-align: center; padding-bottom: 3rem; font-size: 0.8rem; color: gray; clear: both;}
#afterfooter .icons {border-bottom: 1px solid rgba(0,0,0,0.15); margin-bottom: 1.3rem;}
#afterfooter .icons img {display: inline-block; vertical-align: middle; margin: 0.8rem;}

.well {border: 1px solid rgba(0,0,0,0.15); padding: 2rem 1.75rem 2.5rem;}
.well.blue {background: #edf7fa;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; font-weight: bold;}
.well .floatlink {top: 1.5rem; 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;}
label.well span:first-child {float: right; font-weight: bold; color: rgb(0, 204, 255);}
label.well.blue {border: 1px solid rgb(0, 204, 255);}
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;}

.checkout #menutoggle, .checkout #nav, .checkout #shopnav, .checkout #breadcrumbs, .checkout header ul.actions {display: none!important;}
.checkout #preheader {margin-bottom: 4rem; position: relative!important;}
.checkout header {position: relative!important; margin-bottom: 2rem;}
.checkout header #brand {position: absolute; top: 0; width: auto; margin-top: -0.5rem;}
.checkout header #brand #logo img {transform: translateY(-8rem); opacity: 0;}
.checkout header #brand #logo img + img {transform: translateY(0); opacity: 1;}
.checkout form > div {margin-bottom: 0.5rem;}

@media only screen and (max-width: 450px) {
    .checkout header {margin-bottom: 4rem;}
    .checkout header #brand {margin-top: 1rem;}
}
@media only screen and (max-width: 460px) {
    #preheader nav ul li:nth-child(2) {display: none;}  
}

#checkout_steps {display: block; text-align: center; color: rgba(0,0,0,0.25);}
#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: rgb(0, 204, 255);}
#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%);
}
#checkout_steps li > span > a {color: #00a8e9;}
#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 rgb(0, 204, 255); background: rgb(0, 204, 255);}

.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;}
.accountpage .accountmenu ul li {list-style: none;}
.accountpage .accountmenu ul li.selected a {color: #404042;}



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;}


@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;}
}

@media only screen and (max-width: 1100px) {
    #preheader nav ul li.management {display: none;}
}


@media only screen and (max-width: 975px) {
    html {scroll-padding-top: 0;}
    /* Blue shop bar becomes a horizontally scrollable strip on mobile. */
    #shopnav > .container > ul {flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;}
    .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;}
}