/* Shared responsive UI. Product image blocks are intentionally untouched. */
:root{--todo-ink:#15364a;--todo-blue:#087daf;--todo-blue-deep:#05638e;--todo-green:#20a75b;--todo-soft:#f3f8fa;--todo-border:rgba(21,54,74,.12);--todo-shadow:0 18px 50px rgba(12,54,78,.13)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;color:var(--todo-ink);background:#fff;font-family:"Noto Sans",Arial,sans-serif;text-rendering:optimizeLegibility}
body :where(h1,h2,h3,h4){color:var(--todo-ink);letter-spacing:-.025em;text-wrap:balance}
body h1{font-size:clamp(2.35rem,5vw,5.25rem);line-height:1.02}
body h2{font-size:clamp(1.8rem,3.4vw,3.5rem);line-height:1.12}
body h3{line-height:1.25}body :where(p,li){line-height:1.75}body a{text-underline-offset:.18em}
#header{position:fixed;top:0;right:0;left:0;width:100%;z-index:900;background:rgba(255,255,255,.94);border-bottom:1px solid var(--todo-border);box-shadow:0 8px 30px rgba(12,54,78,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#header .header-announcement-bar-wrapper{padding-top:0!important;padding-bottom:0!important}#header .header-inner{min-height:84px;padding-top:12px!important;padding-bottom:12px!important}
#header .header-title-logo img{width:auto;max-height:58px}
#header .header-nav-item a,#header .header-nav-folder-title{position:relative;padding:10px 6px;color:var(--todo-ink)!important;font-size:1.08rem;font-weight:700;letter-spacing:.01em;transition:color 180ms ease}
#header .header-nav-item a::after,#header .header-nav-folder-title::after{position:absolute;right:6px;bottom:4px;left:6px;height:2px;content:"";background:linear-gradient(90deg,var(--todo-blue),var(--todo-green));border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform 180ms ease}
#header .header-nav-item a:hover,#header .header-nav-item a:focus-visible,#header .header-nav-folder-title:hover{color:var(--todo-blue-deep)!important}
#header .header-nav-item a:hover::after,#header .header-nav-item a:focus-visible::after,#header .header-nav-folder-title:hover::after{transform:scaleX(1)}
#header .header-nav-folder-content{overflow:hidden;padding:8px;background:rgba(255,255,255,.98);border:1px solid var(--todo-border);border-radius:14px;box-shadow:var(--todo-shadow)}
#header .header-nav-folder-item a{border-radius:9px}#header .header-nav-folder-item a:hover{background:var(--todo-soft)}
.page-section>.content-wrapper{width:min(calc(100% - 40px),1240px)!important;margin-inline:auto}
.page-section:not(.has-background)>.content-wrapper{padding-top:clamp(54px,7vw,104px)!important;padding-bottom:clamp(54px,7vw,104px)!important}
.page-section.has-background .section-background-overlay{background:linear-gradient(90deg,rgba(7,34,48,.64),rgba(7,34,48,.18));opacity:1!important}
.page-section.has-background .sqs-block-content :where(h1,h2,h3,p){max-width:760px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.22)}
.sqs-block-html .sqs-block-content>:first-child{margin-top:0}.sqs-block-html .sqs-block-content>:last-child{margin-bottom:0}
.sqs-block-button-element,.language-btn,button[type="submit"],input[type="submit"]{min-height:48px;padding:.85rem 1.35rem!important;color:#fff!important;font-weight:700!important;line-height:1.2!important;background:linear-gradient(135deg,var(--todo-blue),var(--todo-blue-deep))!important;border:0!important;border-radius:999px!important;box-shadow:0 10px 24px rgba(8,125,175,.24);transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease}
.sqs-block-button-element:hover,.language-btn:hover,button[type="submit"]:hover,input[type="submit"]:hover{filter:brightness(1.06);box-shadow:0 14px 30px rgba(8,125,175,.3);transform:translateY(-2px)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid rgba(32,167,91,.5);outline-offset:3px}
:where(input,textarea,select){max-width:100%}.form-wrapper :where(input:not([type="submit"]),textarea,select){min-height:48px;padding:12px 14px!important;background:#fff;border:1px solid rgba(21,54,74,.2)!important;border-radius:10px!important;transition:border-color 180ms ease,box-shadow 180ms ease}
.form-wrapper textarea{min-height:140px}.form-wrapper :where(input,textarea,select):focus{border-color:var(--todo-blue)!important;box-shadow:0 0 0 4px rgba(8,125,175,.12)}
#footer-sections .page-section{color:rgba(255,255,255,.82);background:#102f40!important}#footer-sections>.page-section{min-height:0!important}#footer-sections>.page-section:first-of-type>.content-wrapper{padding-top:44px!important;padding-bottom:28px!important}#footer-sections>.page-section:last-of-type>.content-wrapper{padding-top:12px!important;padding-bottom:18px!important}#footer-sections section section{height:auto!important;min-height:0!important}#footer-sections section section>.content-wrapper{height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important}#footer-sections :where(h1,h2,h3,h4){color:#fff}#footer-sections a{color:rgba(255,255,255,.9);transition:color 180ms ease}#footer-sections a:hover{color:#68d891}
.language-modal{box-sizing:border-box;padding:20px;background:rgba(6,29,42,.72)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.language-modal-content{box-sizing:border-box;flex:0 1 480px;min-width:0!important;width:calc(100vw - 48px)!important;max-width:480px!important;overflow:hidden;padding:clamp(28px,6vw,46px)!important;border:1px solid rgba(255,255,255,.65);border-radius:22px!important;box-shadow:0 28px 80px rgba(0,0,0,.3)}
.language-modal-content h3{max-width:100%;white-space:normal!important;text-wrap:wrap;overflow-wrap:anywhere;margin:0 0 24px;color:var(--todo-ink)!important;font-size:clamp(1.35rem,4vw,1.75rem)}.language-options{flex-wrap:wrap}.language-btn{min-width:120px}
@media(max-width:799px){#header .header-inner{min-height:70px;padding:9px 18px!important}#header .header-title-logo img{max-width:min(58vw,220px);max-height:46px}#header .burger-inner>div{height:2px;border-radius:2px}.header-menu-nav-item a{padding-block:11px;font-size:clamp(1.15rem,5vw,1.55rem);font-weight:700}.page-section>.content-wrapper{width:min(calc(100% - 32px),1240px)!important}.page-section[style*="min-height: 100vh"]{min-height:calc(100svh - 70px)!important}.page-section:not(.has-background)>.content-wrapper{padding-top:52px!important;padding-bottom:52px!important}.page-section.has-background .section-background-overlay{background:linear-gradient(180deg,rgba(7,34,48,.28),rgba(7,34,48,.7))}.sqs-row{margin-right:0!important;margin-left:0!important}.sqs-col-1,.sqs-col-2,.sqs-col-3,.sqs-col-4,.sqs-col-5,.sqs-col-6,.sqs-col-7,.sqs-col-8,.sqs-col-9,.sqs-col-10,.sqs-col-11,.sqs-col-12{float:none!important;width:100%!important}.sqs-block{height:auto!important}.sqs-block-button-container{text-align:left!important}.language-options{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}.language-btn{width:100%;min-width:0}#footer-sections .content-wrapper{padding-top:48px!important;padding-bottom:48px!important}}
@media(max-width:420px){body h1{font-size:clamp(2.05rem,11vw,2.8rem)}.page-section>.content-wrapper{width:min(calc(100% - 24px),1240px)!important}.language-modal{padding:14px}.language-modal-content{width:calc(100vw - 28px)!important;padding:28px 20px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:799px){body.header--menu-open{overflow:hidden}body.header--menu-open #header .header-inner{z-index:3}#header .header-menu{pointer-events:none}body.header--menu-open #header .header-menu{z-index:2!important;top:0!important;bottom:auto!important;height:100dvh!important;min-height:100vh!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:none!important}#header .header-menu-nav{padding-top:70px}}

/* Reference-matched open mobile navigation. */
@media (max-width: 799px) {
  body.header--menu-open #header,
  body.header--menu-open #header .header-announcement-bar-wrapper,
  body.header--menu-open #header .header-background,
  body.header--menu-open #header .header-menu,
  body.header--menu-open #header .header-menu-bg {
    background: #fff !important;
  }

  body.header--menu-open #header .header-inner {
    min-height: 116px;
    padding: clamp(22px, 4.4vw, 28px) clamp(22px, 4.4vw, 28px) !important;
    box-sizing: border-box;
  }

  body.header--menu-open #header .header-display-mobile,
  body.header--menu-open #header .header-title-nav-wrapper {
    width: 100%;
  }

  body.header--menu-open #header .header-title-logo img {
    width: auto;
    max-width: min(50vw, 300px);
    max-height: 64px;
  }

  body.header--menu-open #header .header-burger {
    position: absolute;
    top: clamp(20px, 4.4vw, 28px);
    right: clamp(22px, 4.4vw, 28px);
  }

  body.header--menu-open #header .header-burger-btn {
    display: flex;
    width: clamp(54px, 11vw, 72px);
    height: clamp(54px, 11vw, 72px);
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff !important;
    border: 2px solid #666 !important;
    border-radius: 0;
  }

  body.header--menu-open #header .burger-box,
  body.header--menu-open #header .burger-inner {
    width: 30px;
    height: 30px;
  }

  body.header--menu-open #header .burger-inner > div {
    height: 1px;
    background-color: #5e5e5e !important;
  }

  body.header--menu-open #header .header-menu {
    padding-top: 116px !important;
    color: #5b5b5b;
    text-align: left !important;
  }

  body.header--menu-open #header .header-menu-nav {
    height: 100%;
    padding-top: clamp(28px, 5vw, 42px) !important;
    box-sizing: border-box;
  }

  body.header--menu-open #header .header-menu-nav-list {
    transform: none !important;
  }

  body.header--menu-open #header .header-menu-nav-folder-content {
    justify-content: flex-start;
    padding-bottom: 40px;
    box-sizing: border-box;
  }

  body.header--menu-open #header .header-menu-nav-item {
    padding-right: clamp(28px, 6vw, 40px);
    padding-left: clamp(28px, 6vw, 40px);
  }

  body.header--menu-open #header .header-menu-nav-item a {
    margin: 0 0 clamp(24px, 5vw, 36px);
    padding: 0;
    color: #5b5b5b !important;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
  }

  body.header--menu-open #header .header-menu-controls {
    opacity: 1;
  }

  body.header--menu-open #header .header-menu-controls a {
    font-size: clamp(1.25rem, 5vw, 1.8rem);
  }
}

/* Keep mobile identity and close control above the menu panel. */
@media (max-width: 799px) {
  body.header--menu-open #header .header-inner {
    position: fixed !important;
    z-index: 10001 !important;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    bottom: auto !important;
    height: 116px !important;
    max-height: 116px !important;
    background: #fff !important;
  }

  body.header--menu-open #header .header-display-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.header--menu-open #header .header-menu {
    z-index: 10000 !important;
  }
}
@media (max-width: 799px) {
  body.header--menu-open #header .header-inner,
  body.header--menu-open #header .header-display-mobile,
  body.header--menu-open #header .header-display-mobile .header-title-nav-wrapper,
  body.header--menu-open #header .header-display-mobile .header-title,
  body.header--menu-open #header .header-display-mobile .header-title-logo,
  body.header--menu-open #header .header-display-mobile .header-burger {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.header--menu-open #header .header-display-mobile {
    position: relative !important;
    height: 60px !important;
    min-height: 60px !important;
    align-items: center !important;
  }

  body.header--menu-open #header .header-display-mobile .header-title-nav-wrapper,
  body.header--menu-open #header .header-display-mobile .header-title,
  body.header--menu-open #header .header-display-mobile .header-title-logo {
    display: block !important;
  }

  body.header--menu-open #header .header-display-mobile .header-burger {
    display: block !important;
    z-index: 2 !important;
  }
}
/* Menu-layer branding avoids legacy header stacking conflicts. */
.todo-mobile-menu-chrome { display: none; }
@media (max-width: 799px) {
  body.header--menu-open #header .header-inner {
    display: none !important;
  }

  body.header--menu-open #header .todo-mobile-menu-chrome {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 116px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: clamp(22px, 4.4vw, 28px);
    background: #fff;
  }

  body.header--menu-open #header .todo-mobile-menu-brand {
    display: block;
    width: min(50vw, 300px);
    line-height: 0;
  }

  body.header--menu-open #header .todo-mobile-menu-brand img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    object-position: left center;
  }

  body.header--menu-open #header .todo-mobile-menu-close {
    position: relative;
    flex: 0 0 auto;
    width: clamp(54px, 11vw, 72px);
    height: clamp(54px, 11vw, 72px);
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: 2px solid #666;
    border-radius: 0;
  }

  body.header--menu-open #header .todo-mobile-menu-close::before,
  body.header--menu-open #header .todo-mobile-menu-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 1px;
    content: "";
    background: #5e5e5e;
  }

  body.header--menu-open #header .todo-mobile-menu-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  body.header--menu-open #header .todo-mobile-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
}
@media (max-width: 799px) {
  body.header--menu-open #header .header-menu-nav {
    padding-top: clamp(54px, 10vw, 68px) !important;
  }
}
/* Keep mobile navigation typography consistent with desktop. */
@media (max-width: 799px) {
  body.header--menu-open #header .header-menu-nav-item a {
    margin: 0 0 8px;
    padding: 10px 0;
    color: var(--todo-ink) !important;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
  }

  body.header--menu-open #header .header-menu-controls a {
    font-size: 1.08rem;
  }
}
/* Use a consistent white canvas for content sections without background media. */
#page .page-section:not(.has-background),
#page .page-section:not(.has-background) > .section-border,
#page .page-section:not(.has-background) > .section-border > .section-background {
  background-color: #fff !important;
}

#page .page-section:not(.has-background) .sqs-block-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--todo-ink) !important;
  text-shadow: none !important;
}

#page .page-section:not(.has-background) .sqs-block-content :where(p, li, label) {
  color: #334e5d !important;
  text-shadow: none !important;
}
/* Simple interaction for footer Products and Quick Links. */
#footer-sections .sqs-block-html a {
  display: inline-block;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

#footer-sections .sqs-block-html a:hover,
#footer-sections .sqs-block-html a:focus-visible {
  color: #fff !important;
  transform: translateX(4px);
}
/* Center labels consistently inside every site button. */
.sqs-block-button-element,
.language-btn,
button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center !important;
}

input[type="submit"] {
  box-sizing: border-box;
  text-align: center !important;
}
/* Consistent responsive product-gallery cards across all seven product pages. */
.product-gallery-page #page .sqs-col-4 .sqs-block-image {
  box-sizing: border-box;
  height: 100%;
  padding: 12px !important;
}

.product-gallery-page #page .sqs-col-4 .image-block-outer-wrapper,
.product-gallery-page #page .sqs-col-4 .sqs-block-image-figure,
.product-gallery-page #page .sqs-col-4 .sqs-block-image-link {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  margin: 0 !important;
}

.product-gallery-page #page .sqs-col-4 .image-block-wrapper {
  position: relative !important;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  background: #fff;
  border: 1px solid rgba(21, 54, 74, .12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(21, 54, 74, .10);
}

.product-gallery-page #page .sqs-col-4 .sqs-image-shape-container-element {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

.product-gallery-page #page .sqs-col-4 .sqs-image-shape-container-element img {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  padding: clamp(10px, 1.5vw, 18px);
  object-fit: contain !important;
  object-position: center !important;
  background: #fff;
  transition: transform 220ms ease;
}

.product-gallery-page #page .sqs-col-4 .sqs-block-image:hover img {
  transform: scale(1.025);
}

@media (min-width: 640px) and (max-width: 1024px) {
  .product-gallery-page #page .sqs-row > .sqs-col-4:has(.sqs-block-image) {
    float: left !important;
    width: 50% !important;
  }
}

@media (max-width: 639px) {
  .product-gallery-page #page .sqs-col-4 .sqs-block-image {
    padding: 9px 0 !important;
  }

  .product-gallery-page #page .sqs-col-4 .image-block-wrapper {
    border-radius: 12px;
  }
}