/* =============================================================
   cps-header-footer.css
   Stripped stylesheet — header & footer only
   Extracted from cps.css (~12,900 lines → ~350 lines)
   ============================================================= */


/* ── 1. CSS CUSTOM PROPERTIES (design tokens) ─────────────────
   All vars used by header/footer components via var(--...)     */

:root, .color-scheme--main {
  --primary-hex: #40C11F;
  --primary: #40C11F;
  --primary-hover: #4cdc28;
  --primary-ultra-light: #edfbe9;
  --primary-light: #c8f4bd;
  --primary-semi-light: #7fe665;
  --primary-semi-dark: #339a19;
  --primary-dark: #246e12;
  --primary-ultra-dark: #0e2c07;
  --accent: #d44d4d;
  --neutral: #232622;
  --neutral-ultra-light: #f2f3f1;
  --neutral-light: #d8dbd6;
  --neutral-semi-light: #a3aba0;
  --neutral-semi-dark: #575f54;
  --neutral-dark: #3e443c;
  --neutral-ultra-dark: #191b18;
  --white: #fff;
  --black: #000;
  --neutral-trans-20: rgba(35, 38, 34, 0.2);
  --neutral-trans-40: rgba(35, 38, 34, 0.4);
  --black-trans-10: rgba(0, 0, 0, 0.1);
  --black-trans-20: rgba(0, 0, 0, 0.2);
  --black-trans-40: rgba(0, 0, 0, 0.4);
  --black-trans-90: rgba(0, 0, 0, 0.9);
  --white-trans-20: rgba(255, 255, 255, 0.2);
  --neutral-light-trans-80: rgba(216, 219, 214, 0.8);
  --neutral-ultra-dark-trans-80: rgba(25, 27, 24, 0.8);
  --bg-ultra-dark: var(--neutral-ultra-dark);
  --text-light: var(--neutral-ultra-light);
  --text-light-muted: var(--neutral-light-trans-80);
  --text-dark: var(--neutral-ultra-dark);
  --text-dark-muted: var(--neutral-ultra-dark-trans-80);
}

:root {
  --gutter: 1.25rem;
  --text-xs: 1.26rem;
  --text-s: 1.42rem;
  --text-m: 1.8rem;
  --text-l: 2.025rem;
  --text-xl: 2.28rem;
  --h6: 1.26rem;
  --h5: 1.42rem;
  --h4: 1.8rem;
  --h3: 2.025rem;
  --h2: 2.28rem;
  --h1: 2.565rem;
  --space-xs: 1.896rem;
  --space-s: 2.133rem;
  --space-m: 2.4rem;
  --space-l: 2.7rem;
  --space-xl: 3.038rem;
  --content-width: 80rem;
  --radius: 1rem;
  --radius-circle: 50vw;
  --radius-s: 0.6666666667rem;
  --border-width: 1px;
  --border-style: solid;
  --border-color-dark: var(--black-trans-20);
  --card-padding: var(--space-l);
  --card-radius: var(--radius);
  --card-border-width: var(--border-width);
  --btn-padding-block: 0.75em;
  --btn-padding-inline: 1.5em;
  --btn-font-weight: 700;
  --btn-border-width: 2px;
  --btn-border-radius: var(--radius-circle);
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --header-height: 10.1875rem;
  --header-height-s: 7rem;
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-gap: var(--space-m);
  --space-gap: var(--space-m);
}

@media (max-width: 480px) {
  :root { --header-height: var(--header-height-s); }
}

body {
  margin-top: 143px;
}


/* ── 2. BRICKS FRAMEWORK BASE (header/footer elements only) ─── */

@layer bricks {
  /* Section / Container / Block */
  .brxe-section {
    align-items: center; display: flex; flex-direction: column;
    margin-left: auto; margin-right: auto; width: 100%;
  }
  @media (max-width: 767px) { .brxe-section { flex-wrap: wrap; } }

  .brxe-container {
    align-items: flex-start; display: flex; flex-direction: column;
    margin-left: auto; margin-right: auto; width: 1100px;
  }
  @media (max-width: 767px) { .brxe-container { flex-wrap: wrap; } }

  .brxe-block {
    align-items: flex-start; display: flex; flex-direction: column; width: 100%;
  }
  @media (max-width: 767px) { .brxe-block { flex-wrap: wrap; } }

  [class*=brxe-] { max-width: 100%; }
  svg:not([width]) { min-width: 1em; }
  svg:not([height]) { min-height: 1em; }

  /* Logo */
  .brxe-logo {
    color: currentcolor; font-size: 20px; font-weight: 600; line-height: 1;
  }
  .brxe-logo img { display: block; height: auto; width: auto; }
  .brxe-logo a { color: currentcolor; display: inline-block; }

  /* SVG */
  :where(.brxe-svg) { height: auto; width: auto; }
  :where(.brxe-svg) svg { height: auto; max-width: 100%; overflow: visible; width: auto; }

  /* Text link */
  .brxe-text-link { gap: 5px; }
  .brxe-text-link, .brxe-text-link span { align-items: center; display: inline-flex; }
  .brxe-text-link span { justify-content: center; }

  /* Button */
  .brxe-button { width: auto; }
  .bricks-button {
    align-items: center; border-width: 0; display: inline-flex; gap: 10px;
    justify-content: center; letter-spacing: .5px; padding: .5em 1em; text-align: center;
  }

  /* Nav nested */
  .brxe-nav-nested { align-items: center; display: inline-flex; }
  .brxe-nav-nested .brx-toggle-div, .brxe-nav-nested .brxe-toggle { display: none; }
  .brx-nav-nested-items {
    align-items: center; display: flex; flex-direction: row;
    flex-wrap: wrap; gap: 30px; list-style-type: none; margin: 0; padding: 0;
  }

  /* #brx-header */
  #brx-header {
    background-position: 50%; background-size: cover; position: relative; width: 100%;
  }
  #brx-header.brx-sticky {
    left: 0; position: fixed; right: 0; top: 0;
    transition: background-color .2s, transform .4s; width: 100%; z-index: 998;
  }

  /* #brx-footer */
  #brx-footer {
    background-position: 50%; background-size: cover;
    flex-shrink: 0; margin-top: auto; position: relative; width: 100%;
  }
}


/* ── 3. BUTTON STYLES (btn--primary used in nav & footer CTA) ─ */

.btn--primary {
  background-color: var(--primary);
  color: var(--white);
  border-radius: var(--btn-border-radius);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  font-weight: var(--btn-font-weight);
  border: var(--btn-border-width) solid var(--primary);
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing),
              border var(--transition-duration) var(--transition-timing);
}
.btn--primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }

.btn--primary.btn--outline {
  background-color: transparent;
  color: var(--primary);
  border: var(--btn-border-width) solid var(--primary);
}
.btn--primary.btn--outline:hover {
  background-color: var(--primary);
  color: var(--white);
}

.btn--m:not(.wp-block-button) {
  font-size: var(--text-m);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
}

.bricks-background-primary { background-color: var(--primary); }
.bricks-background-btn--primary { background-color: var(--primary); color: var(--white); }


/* ── 4. ICON UTILITIES ──────────────────────────────────────── */

.icon--inherit path { stroke: currentcolor !important; }
.icon--transform-right svg { transform: translate(0px); transition: ease-in-out 0.2s; }
.icon--transform-right:hover svg { transform: translate(4px); transition: ease-in-out 0.2s; }


/* ── 5. HEADER — USP STRIP (top bar) ─────────────────────────
   #brxe-dgpxsa section + #brxe-neonuc container + .brxe-lhmbtw items */

#brxe-dgpxsa {
  display: flex; row-gap: 0px;
  background-color: var(--primary-light); padding-top: 0; padding-bottom: 0;
}

#brxe-neonuc {
  justify-content: space-between; align-items: center;
  padding-top: 12px; padding-bottom: 12px;
  flex-direction: row; column-gap: 16px; row-gap: 16px;
  align-self: center !important;
}
@media (max-width: 768px) { #brxe-neonuc { flex-wrap: nowrap; } }
@media (max-width: 480px) { #brxe-neonuc { padding-top: 8px; padding-bottom: 8px; } }
@media (max-width: 360px) { #brxe-neonuc { justify-content: center; } }

.brxe-lhmbtw.brxe-block {
  flex-direction: row; width: fit-content; column-gap: 8px; row-gap: 8px;
}
.brxe-lhmbtw .brxe-zbiisx.brxe-svg { height: 24px; width: 24px; flex-shrink: 0; }

@media (max-width: 768px) {
  .brxe-lhmbtw .brxe-fownke.brxe-text-basic { text-wrap: nowrap; }
  .brxe-lhmbtw.brxe-block { flex-wrap: nowrap; }
  .brxe-lhmbtw:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
  .brxe-lhmbtw:nth-child(4) { display: none; }
  .brxe-lhmbtw:nth-child(3) { display: none; }
}
@media (max-width: 360px) {
  .brxe-lhmbtw:nth-child(4) { display: none; }
  .brxe-lhmbtw:nth-child(3) { display: none; }
  .brxe-lhmbtw:nth-child(2) { display: none; }
}


/* ── 6. HEADER — MAIN NAV BAR ─────────────────────────────────
   #brxe-snbtge section + #brxe-ulcqmj container                */

#brxe-snbtge {
  display: flex; row-gap: 0px;
  padding-top: var(--space-xs); padding-bottom: var(--space-xs);
  top: 0px; position: sticky; background-color: var(--white);
}
@media (max-width: 480px) { #brxe-snbtge { padding-top: 12px; padding-bottom: 12px; } }

#brxe-ulcqmj {
  margin-right: 0; margin-left: 0;
  flex-direction: row; justify-content: space-between; align-items: center;
}
@media (max-width: 480px) { #brxe-ulcqmj { column-gap: 8px; flex-wrap: nowrap; } }

/* Logo */
#brxe-qxauix .bricks-site-logo { height: 64px; }
@media (max-width: 480px) { #brxe-qxauix .bricks-site-logo { height: 48px; } }
@media (max-width: 360px) { #brxe-qxauix .bricks-site-logo { height: 48px; } }

/* Nav wrapper */
#brxe-cggltn {
  display: flex; align-items: flex-end;
  margin-right: 0; margin-left: 0;
  width: auto; row-gap: 16px; flex-direction: row;
}
@media (max-width: 992px) { #brxe-cggltn { width: auto; flex-direction: row; } }
@media (max-width: 768px) { #brxe-cggltn { width: auto; } }
@media (max-width: 480px) { #brxe-cggltn { width: auto; } }
@media (max-width: 360px) { #brxe-cggltn { width: fit-content; } }

/* Nav list */
#brxe-nlojdt {
  row-gap: 0px; align-items: center; flex-wrap: nowrap; column-gap: 0px;
}
#brxe-nlojdt > li:not(:nth-last-child(-n+2)) a { color: var(--text-dark); }
#brxe-nlojdt > li:not(:nth-last-child(-n+2)) a:hover { color: var(--primary); }

/* Basket/Account button (#brxe-dbkgnr) */
#brxe-dbkgnr svg { height: 20px; width: 20px; }
#brxe-dbkgnr {
  gap: 0px;
  padding-top: 12px; padding-right: 12px; padding-bottom: 12px; padding-left: 12px;
  font-size: 0px;
}
@media (max-width: 480px) {
  #brxe-dbkgnr { padding-top: 12px; padding-right: 12px; padding-bottom: 12px; padding-left: 12px; gap: 0px; }
}
@media (max-width: 360px) {
  #brxe-dbkgnr { padding-top: 8px; padding-right: 4px; padding-bottom: 8px; padding-left: 4px; }
}

/* Nav toggle for mobile breakpoint */
@layer bricks {
  @media (max-width: 768px) {
    #brxe-tycggn .brx-toggle-div { display: inline-flex; }
    #brxe-tycggn .brxe-toggle { display: inline-flex; }
    [data-script-id="tycggn"] .brx-nav-nested-items {
      opacity: 0; visibility: hidden; gap: 0;
      position: fixed; z-index: 1001;
      top: 0; right: 0; bottom: 0; left: 0;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; background-color: #fff;
      overflow-y: scroll; flex-wrap: nowrap;
    }
    #brxe-tycggn.brx-open .brx-nav-nested-items { opacity: 1; visibility: visible; }
  }
}

#brxe-tycggn .brx-nav-nested-items > .brxe-dropdown.open > .brx-dropdown-content { transform: translateY(8px); }
#brxe-tycggn .brx-nav-nested-items > .brxe-dropdown > .brx-dropdown-content { transform: translateY(0px); }
#brxe-tycggn .brx-nav-nested-items { gap: 8px; }
#brxe-tycggn .brx-nav-nested-items > li > [aria-current="page"] { color: var(--primary); }


/* ── 7. HEADER — NAV LINK & BUTTON UTILITY CLASSES ──────────── */

.shadow__400 {
  box-shadow: 0px 10px 15px -3px rgba(0,0,0, 0.1), 0px 4px 6px -4px rgba(0,0,0, 0.1);
}
@media (max-width: 768px) { .shadow__400 { flex-direction: row; } }

.text--header-menu {
  color: var(--text-dark); font-size: var(--h6);
  padding-right: 8px; padding-left: 8px;
}
.text--header-menu .brx-submenu-toggle button > svg { height: 24px; width: 24px; }
.text--header-menu .icon > svg { height: 24px; width: 24px; }
@media (max-width: 1280px) {
  .text--header-menu { padding-right: 4px; padding-left: 4px; }
}


/* ── 8. HEADER — MOBILE MENU (custom JS-driven dropdown) ─────── */

@media (min-width: 994px) {
  .mobile-menu { display: none !important; }
  #brxe-nlojdt { display: flex !important; gap: 18px; align-items: center; }
  #brxe-nlojdt > li { margin: 0; }
}

@media (max-width: 993px) {
  #brxe-dgpxsa { display: none !important; }

  #brx-header, #brxe-snbtge, #brxe-ulcqmj, #brxe-cggltn, #brxe-tycggn {
    overflow: visible !important;
  }

  #brxe-ulcqmj {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; position: relative !important;
  }

  #brxe-cggltn { display: flex !important; align-items: center !important; gap: 12px !important; }

  .mobile-menu {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; cursor: pointer !important;
    user-select: none !important; padding: 10px 12px !important;
    border-radius: 10px !important; border: 1px solid rgba(0,0,0,0.12); line-height: 1;
  }
  .mobile-menu:focus, .mobile-menu:focus-visible {
    outline: 2px solid currentColor !important; outline-offset: 2px !important;
  }

  #brxe-nlojdt { display: none !important; }

  #brx-header.is-menu-open #brxe-nlojdt {
    display: block !important; position: absolute !important;
    top: calc(100% + 10px) !important; left: 0 !important; width: 100% !important;
    background: #ffffff !important; padding: 18px !important;
    border-radius: 16px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    z-index: 999999 !important; margin: 0 !important; list-style: none !important;
  }

  #brx-header.is-menu-open #brxe-nlojdt > li { margin: 0 0 12px 0 !important; }
  #brx-header.is-menu-open #brxe-nlojdt > li:last-child { margin-bottom: 0 !important; }

  #brx-header.is-menu-open #brxe-nlojdt a.brxe-text-link,
  #brx-header.is-menu-open #brxe-nlojdt a.text--header-menu {
    display: block !important; width: 100% !important;
    padding: 10px 12px !important; border-radius: 10px !important;
    text-decoration: none !important;
  }

  #brx-header.is-menu-open #brxe-nlojdt .brxe-button,
  #brx-header.is-menu-open #brxe-nlojdt .bricks-button {
    width: 100% !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    gap: 10px !important; padding: 12px 14px !important; box-sizing: border-box !important;
  }

  #brx-header.is-menu-open #brxe-nlojdt .brxe-button svg {
    width: 22px !important; height: 22px !important;
  }
}


/* ── 9. FOOTER — SECTION & CONTAINER ─────────────────────────
   #brxe-lnqqpb section + #brxe-krnlnd container               */

#brxe-lnqqpb {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background-color: var(--bg-ultra-dark); position: relative; overflow: clip;
}

#brxe-krnlnd { column-gap: var(--space-xl); row-gap: var(--space-xl); }

/* Footer grid */
#brxe-fvfbzu {
  display: grid; align-items: initial; z-index: 1; grid-gap: var(--space-xl);
}
@media (max-width: 992px) { #brxe-fvfbzu { grid-gap: var(--space-m); } }
@media (max-width: 768px) { #brxe-fvfbzu { grid-template-columns: var(--grid-2); grid-gap: var(--space-xl); } }
@media (max-width: 480px) { #brxe-fvfbzu { grid-template-columns: var(--grid-1); } }

/* Footer nav columns */
#brxe-nmsmux { grid-column: 1; }
@media (max-width: 768px) { #brxe-nmsmux { grid-column: 1; grid-row: 1; } }
@media (max-width: 480px) { #brxe-nmsmux { grid-column: 1; grid-row: 1; } }

#brxe-qiejre { grid-column: 2; }
@media (max-width: 480px) { #brxe-qiejre { grid-column: 1; grid-row: 2; } }

#brxe-thdrme { grid-column: 3; max-width: 240px; }
@media (max-width: 768px) { #brxe-thdrme { grid-column: 3; grid-row: 1; } }
@media (max-width: 480px) { #brxe-thdrme { grid-column: 1; grid-row: 3; } }

/* Contact block */
#brxe-izktch { margin-left: auto; }
#brxe-sqcazz { align-items: center; text-align: center; }
#brxe-wvnugf { font-size: var(--h2); }
#brxe-hewciq svg { height: 20px; width: 20px; }

/* Footer bottom bar */
#brxe-cgwhwl {
  background-color: var(--neutral);
  padding-top: var(--card-padding); padding-right: var(--card-padding);
  padding-bottom: var(--card-padding); padding-left: var(--card-padding);
  border-radius: var(--card-radius); flex-direction: row;
  align-items: center; justify-content: space-between; z-index: 1;
}
#brxe-rfrkty .bricks-site-logo { height: 64px; }
#brxe-rfrkty { flex-shrink: 0; }
#brxe-bcyzbn { color: var(--text-light); }

/* Decorative SVG watermark */
#brxe-gsukau { width: 50%; position: absolute; top: 5%; left: 10%; opacity: 0.5; }


/* ── 10. FOOTER — COMPONENT UTILITY CLASSES ──────────────────  */

.footer-nav { column-gap: var(--space-m); row-gap: var(--space-m); width: 100%; }
.footer-nav__title { font-size: var(--h3); color: var(--text-light); font-weight: 700; }
.footer-nav__list { column-gap: 12px; row-gap: 12px; }
.footer-nav__link { color: var(--text-light-muted); }

.contact-block {
  background-color: var(--white);
  padding-top: var(--card-padding); padding-right: var(--card-padding);
  padding-bottom: var(--card-padding); padding-left: var(--card-padding);
  border-radius: var(--card-radius); grid-column: 4; max-width: 440px; height: fit-content;
}
@media (max-width: 768px) { .contact-block { grid-column: 1 / 4; grid-row: 2; max-width: unset; } }
@media (max-width: 480px) { .contact-block { grid-column: 1; grid-row: 4; } }

.text-wrapper { column-gap: var(--space-xs); row-gap: var(--space-xs); }
.text-wrapper__title { font-weight: 700; color: var(--text-dark); line-height: 120%; }
.text-wrapper__text { font-size: var(--text-m); color: var(--text-dark-muted); }
.button-wrapper { align-items: center; column-gap: var(--space-xs); row-gap: var(--space-xs); }

.social-list { width: fit-content; flex-direction: row; column-gap: var(--space-xs); row-gap: var(--space-xs); }
.social-list__icon :not([fill="none"]) { fill: var(--text-light) !important; }
.social-list__icon { height: 32px; width: 32px; flex-shrink: 0; }
.social-list__icon { scale: 1.0; transition: ease-in-out 0.2s; }
.social-list__icon:hover { scale: 1.2; }

/* Slide duration animation */

.fr-slide {
  transition-duration: calc(var(--fr-slide-transition-duration) * 1ms);
  transition-property: background-color, transform, opacity, color, font-family, font-weight, font-size, line-height, text-align, text-transform, text-decoration, letter-spacing, word-spacing, text-indent, border, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-radius;
}

/* TTB pagination */

.splide__pagination--ttb {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  inset-block-start:0;
  inset-block-end: 0;
  inset-inline-start:auto;
  inset-inline-end:.5em;
  padding:1em 0;
}




/* =========================================================
   HEADER MOBILE DROPDOWN (works with your JS)
   Breakpoint: 993px
   HTML refs: #brx-header, #brxe-ulcqmj, #brxe-cggltn, #brxe-nlojdt, .mobile-menu
   ========================================================= */

/* Desktop defaults (above 993px) */
@media (min-width: 994px) {
  .mobile-menu {
    display: none !important;
  }

  /* Let your normal desktop nav behave normally */
  #brxe-nlojdt {
    display: flex !important;
    gap: 18px;
    align-items: center;
  }

  #brxe-nlojdt > li {
    margin: 0;
  }
}

/* Mobile styles (993px and below) */
@media (max-width: 993px) {

  /* 1) Hide the USP strip on mobile */
  #brxe-dgpxsa {
    display: none !important;
  }

  /* 2) Ensure dropdown is not clipped */
  #brx-header,
  #brxe-snbtge,
  #brxe-ulcqmj,
  #brxe-cggltn,
  #brxe-tycggn {
    overflow: visible !important;
  }

  /* 3) Make header row: logo left, trigger right */
  #brxe-ulcqmj {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important; /* anchor absolute dropdown */
  }

  /* 4) Right side wrapper */
  #brxe-cggltn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 5) Mobile trigger button */
  .mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;

    padding: 10px 12px !important;
    border-radius: 10px !important;

    /* optional visuals */
    border: 1px solid rgba(0,0,0,0.12);
    line-height: 1;
  }

  .mobile-menu:focus,
  .mobile-menu:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
  }

  /* 6) Base state: hide the UL on mobile */
  #brxe-nlojdt {
    display: none !important;
  }

  /* 7) Open state: dropdown panel */
  #brx-header.is-menu-open #brxe-nlojdt {
    display: block !important;

    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    width: 100% !important;

    background: #ffffff !important;
    padding: 18px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;

    z-index: 999999 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* 8) Menu item spacing */
  #brx-header.is-menu-open #brxe-nlojdt > li {
    margin: 0 0 12px 0 !important;
  }

  #brx-header.is-menu-open #brxe-nlojdt > li:last-child {
    margin-bottom: 0 !important;
  }

  /* 9) Links */
  #brx-header.is-menu-open #brxe-nlojdt a.brxe-text-link,
  #brx-header.is-menu-open #brxe-nlojdt a.text--header-menu {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
  }

  /* 10) Buttons full width */
  #brx-header.is-menu-open #brxe-nlojdt .brxe-button,
  #brx-header.is-menu-open #brxe-nlojdt .bricks-button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  /* 11) Reduce huge SVGs in those buttons */
  #brx-header.is-menu-open #brxe-nlojdt .brxe-button svg {
    width: 22px !important;
    height: 22px !important;
  }
}

.shadow__400 {box-shadow: 0px 10px 15px -3px rgba(0,0,0, 0.1), 0px 4px 6px -4px rgba(0,0,0, 0.1)}@media (max-width: 768px) {.shadow__400 {flex-direction: row}}.text--header-menu {color: var(--text-dark); font-size: var(--h6); padding-right: 8px; padding-left: 8px}.text--header-menu .brx-submenu-toggle button > svg {height: 24px; width: 24px}@media (max-width: 1280px) {.text--header-menu {padding-right: 4px; padding-left: 4px}}.text--header-menu {color: var(--text-dark); font-size: var(--h6); padding-right: 8px; padding-left: 8px}.text--header-menu .icon > svg {height: 24px; width: 24px}@media (max-width: 1280px) {.text--header-menu {padding-right: 4px; padding-left: 4px}}.dropdown__hover {padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; align-items: center; background-color: rgba(0, 0, 0, 0)}.dropdown__content {padding-top: var(--space-m); padding-right: var(--gutter); padding-bottom: var(--space-m); padding-left: var(--gutter); margin-top: var(--space-m); background-color: var(--white); border-radius: 0 0 var(--radius) var(--radius); background-image: linear-gradient(var(--neutral-trans-20) 0%, var(--white) 6%)}.menu-block {display: grid; align-items: initial; grid-gap: 0px; grid-template-columns: var(--grid-2-3); position: relative; border-radius: 8px; background-color: var(--white)}.menu-block img{ scale: 1.0; transition: ease-in-out 0.2s;} .menu-block:hover img{ scale: 1.05;}.menu-block__image-wrapper {min-height: 120px; border-radius: 8px; overflow: clip}.image__remove-border {border-radius: 0}.image__remove-border img{ border-radius: 0 !important;} .image__remove-border { border-radius: 0 !important;}.menu-block__image {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%}.menu-block__text-wrapper {column-gap: 12px; row-gap: 12px; flex-shrink: 0; padding-top: var(--space-xs); padding-right: var(--space-xs); padding-bottom: var(--space-xs); padding-left: var(--space-xs); justify-content: center}.menu-block__title {color: var(--text-dark); font-size: var(--text-l); font-weight: 700; line-height: 110%}.icon--inherit path{ stroke: currentcolor !important;}.icon--transform-right svg{ transform: translate(0px); transition: ease-in-out 0.2s;} .icon--transform-right:hover svg{ transform: translate(4px); transition: ease-in-out 0.2s;}.offcanvas-heading {color: var(--text-dark); font-size: var(--h4); line-height: var(--text-l); font-weight: 700}.menu-block-mobile {display: grid; align-items: initial; grid-gap: 0px; grid-template-columns: var(--grid-1-2); position: relative; margin-bottom: var(--space-m)}.text-wrapper__text {font-size: var(--text-m); color: var(--text-dark-muted)}.content-wrapper {column-gap: var(--space-xl); row-gap: var(--space-xl)}.text-wrapper {column-gap: var(--space-xs); row-gap: var(--space-xs)}.text-wrapper__tag {font-size: var(--text-l); font-weight: 700; text-transform: capitalize; color: var(--primary)}.text-wrapper__title {font-weight: 700; color: var(--text-dark); line-height: 120%}.button-wrapper {align-items: center; column-gap: var(--space-xs); row-gap: var(--space-xs)}.fr-feature-romeo {flex-direction: row; flex-wrap: nowrap; border-radius: var(--radius); overflow: hidden; padding-left: 0; column-gap: 0px}@media (max-width: 768px) {.fr-feature-romeo {flex-direction: row; row-gap: var(--grid-gap)}}@media (max-width: 480px) {.fr-feature-romeo {flex-direction: column}}.fr-feature-block-romeo {flex-direction: column; flex-grow: 1}.fr-feature-block-romeo { --card-width-collapsed: 20%; --card-padding: var(--space-m); --card-min-height: 24em; --card-content-width: 24ch; --transition-duration: .3s; --transition-function: ease-in-out; --overlay-color: var(--black-trans-40); --overlay-color-hover: var(--black-trans-90);}.fr-feature-block-romeo { flex-basis: var(--card-width-collapsed); transition: flex-basis var(--transition-duration) var(--transition-function); min-height: var(--card-min-height); isolation: isolate; position: relative; overflow: hidden; height: 100%;} .fr-feature-block-romeo.is-hover,.fr-feature-block-romeo:focus-within {flex-basis: 100%; cursor: pointer;} .fr-feature-block-romeo:focus-within :focus {outline: 0; box-shadow: none;}@media (max-width: 767px) { .fr-feature-block-romeo { border-radius: var(--radius); }}@media (min-width: 767px) { .fr-feature-block-romeo__heading {  display: flex; align-items: center; width: var(--card-content-width); max-width: var(--card-content-width); opacity: 0; } .fr-feature-block-romeo__lede { width: var(--card-content-width); max-width: var(--card-content-width); opacity: 0; translate: 0% 200%; transition: opacity var(--transition-duration) var(--transition-function), translate var(--transition-duration) var(--transition-function); } .fr-feature-block-romeo__heading::before { content: '›'; order: 1; margin-left: .25em; } .fr-feature-block-romeo.is-hover .fr-feature-block-romeo__heading, .fr-feature-block-romeo:focus-within .fr-feature-block-romeo__heading { opacity: 1; } .fr-feature-block-romeo.is-hover .fr-feature-block-romeo__lede, .fr-feature-block-romeo:focus-within .fr-feature-block-romeo__lede { translate: 0% 0%; opacity: 1; }}.fr-feature-block-romeo__media,.fr-feature-block-romeo__media img {position: absolute; height: 100%; width: 100%; z-index: -1; min-width: 100%; min-height: 100%;}.fr-feature-block-romeo__overlay{opacity: 1; transition: opacity var(--transition-duration) var(--transition-function);} .fr-feature-block-romeo.is-hover .fr-feature-block-romeo__overlay,.fr-feature-block-romeo:focus-within .fr-feature-block-romeo__overlay {opacity: 0;}.fr-feature-block-romeo__inner { position: absolute; background-image: linear-gradient(180deg, transparent 40%, var(--overlay-color-hover)); width: 100%; height: 100%; display: flex; flex-direction: column; z-index: 1; padding: var(--card-padding); justify-content: flex-end; align-items: flex-start; gap: calc(var(--content-gap) / 2); transition: opacity var(--transition-duration) var(--transition-function);} .fr-feature-block-romeo:focus-within .fr-feature-block-romeo__inner,.fr-feature-block-romeo.is-hover .fr-feature-block-romeo__inner {opacity: 1;}@media (min-width: 767px) { .fr-feature-block-romeo__inner { opacity: 0; }}.fr-feature-block-romeo__heading--vert { writing-mode: vertical-lr; text-orientation: mixed; white-space: nowrap; rotate: 180deg;} .fr-feature-block-romeo__heading--vert { position: absolute; left: var(--card-padding); bottom: var(--card-padding); translate: 0% 0%; line-height: 1; opacity: 1; transition: opacity var(--transition-duration) var(--transition-function), translate var(--transition-duration) var(--transition-function);} .fr-feature-block-romeo:focus-within .fr-feature-block-romeo__heading--vert,.fr-feature-block-romeo.is-hover .fr-feature-block-romeo__heading--vert { opacity: 0; translate: -500% 0%;}@media (max-width: 767px) { .fr-feature-block-romeo__overlay, .fr-feature-block-romeo__heading--vert { display: none; }}.fr-feature-block-romeo__media:not(.tag), .fr-feature-block-romeo__media img {object-fit: cover}.fr-feature-block-romeo__overlay {top: 0px; right: 0px; bottom: 0px; left: 0px; position: absolute; z-index: -1; background-color: var(--overlay-color)}.fr-feature-block-romeo__heading--vert {font-weight: 500; font-size: var(--h3); color: var(--white)}.fr-feature-block-romeo__heading {z-index: 1; color: var(--white)}.fr-feature-block-romeo__lede {color: var(--white)}.usp-block {background-color: var(--white); border: var(--card-border-width) solid var(--primary-semi-light); border-radius: var(--card-radius); flex-direction: row; overflow: clip; column-gap: 0px; row-gap: 0px; display: grid; align-items: initial; grid-template-columns: var(--grid-3-2); z-index: 1}.usp-block img{ scale: 1.0; transition: ease-in-out 0.3s;} .usp-block:hover img{ scale: 1.1;}@media (max-width: 768px) {.usp-block {grid-template-columns: var(--grid-2-1)}}.list-item {column-gap: var(--space-xs); row-gap: var(--space-xs); flex-direction: row}@media (max-width: 1280px) {.list-item {column-gap: 12px; row-gap: 12px}}@media (max-width: 768px) {.list-item {flex-wrap: nowrap}}.list-item__text-wrapper {column-gap: 4px; row-gap: 4px}.list-item__title {font-size: var(--text-l); color: var(--text-dark); font-weight: 700; text-transform: capitalize}.list-item__text {font-size: var(--text-m); color: var(--text-dark-muted)}@media (max-width: 480px) {.list-item__text {font-size: var(--text-s)}}.industry-block {border-radius: var(--card-radius); flex-direction: row; display: grid; align-items: initial; grid-template-columns: var(--grid-3-2); padding-top: var(--card-padding); padding-right: var(--card-padding); padding-bottom: var(--card-padding); padding-left: var(--card-padding); grid-gap: var(--space-xl); position: relative; overflow: clip}.industry-block img{ scale: 1.0; transition: ease-in-out 0.3s;} .industry-block:hover img{ scale: 1.06;}@media (max-width: 768px) {.industry-block {grid-template-columns: var(--grid-1)}}.industry-block__title {color: var(--text-light); font-size: var(--h2)}@media (max-width: 768px) {.industry-block__image-wrapper {align-items: center}}@media (max-width: 768px) {.industry-block__image {width: 50%}}@media (max-width: 480px) {.industry-block__image {width: 70%}}.footer-nav {column-gap: var(--space-m); row-gap: var(--space-m); width: 100%}.footer-nav__title {font-size: var(--h3); color: var(--text-light); font-weight: 700}.footer-nav__list {column-gap: 12px; row-gap: 12px}.footer-nav__link {color: var(--text-light-muted)}.contact-block {background-color: var(--white); padding-top: var(--card-padding); padding-right: var(--card-padding); padding-bottom: var(--card-padding); padding-left: var(--card-padding); border-radius: var(--card-radius); grid-column: 4; max-width: 440px; height: fit-content}@media (max-width: 768px) {.contact-block {grid-column: 1 / 4; grid-row: 2; max-width: unset}}@media (max-width: 480px) {.contact-block {grid-column: 1; grid-row: 4}}.social-list {width: fit-content; flex-direction: row; column-gap: var(--space-xs); row-gap: var(--space-xs)}.social-list__icon :not([fill="none"]) {fill: var(--text-light) !important}.social-list__icon {height: 32px; width: 32px; flex-shrink: 0}.social-list__icon { scale: 1.0; transition: ease-in-out 0.2s;} .social-list__icon:hover { scale: 1.2;}.form-dialog__close-btn { position: absolute; top: calc(var(--space-xs) * -1); right: calc(var(--space-xs) * -1); width: 2em; height: 2em; background-color: var(--primary); border-radius: 50%; padding: 0.2em; transition: transform 0.2s ease-in-out;} .form-dialog__close-btn svg path { stroke: var(--white);} .form-dialog__close-btn:is(:hover, :focus-visible) { transform: scale(1.1);}.form-dialog__close-icon { width: 100%; height: auto;}.list-wrapper {column-gap: var(--space-xs); row-gap: var(--space-xs)}.contact-list-item {display: grid; align-items: initial; grid-gap: 0px var(--space-xs); width: fit-content; position: relative}.contact-list-item svg{ scale: 1.0; transition: ease-in-out 0.2s;} .contact-list-item:hover svg{ scale: 1.1;}.list-item__icon {flex-shrink: 0}.list-item__title-wrapper {column-gap: 8px; row-gap: 8px; justify-content: center; grid-column: 2; grid-row: 1; width: 100%; height: fit-content}.contact-list-item__title {font-size: var(--h4); font-weight: 700; color: var(--text-dark)}.contact-list-item__title a {font-size: var(--h4); font-weight: 700; color: var(--text-dark); font-size: inherit}.contact-list-item__text-wrapper {grid-column: 2; grid-row: 2; width: 100%}.contact-list-item__text {font-size: var(--text-m); color: var(--text-dark-muted)}.contact-list-item__text {font-size: var(--text-m); color: var(--text-dark-muted)}.contact-list-item__text a {font-size: var(--text-m); color: var(--text-dark-muted); font-size: inherit}

/* same as .software-block on CPS website */
.page-catalog-product .additional-description-section .additional-description-wrapper{
    background: var(--primary-ultra-light);
    transition: ease-in-out 0.2s;
    padding-top: var(--card-padding);
  padding-right: var(--card-padding);
  padding-bottom: var(--card-padding);
  padding-left: var(--card-padding);
  border: var(--card-border-width) solid var(--primary);
  border-radius: var(--card-radius);
  align-items: center;
  position: relative;
}

.login-block tr,
.layout--accountPage tr {
  display: flex !important;
  flex-direction: row !important;
}

.login-block .item-name,
.layout--accountPage .item-name {
  display: flex !important;
  min-width: 16ch !important;
  display: flex !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}

.login-block .item-value,
.layout--accountPage .item-value {
  min-width: calc(100% - 16ch) !important;
}

@media only screen and (max-width: 767px) {
  .login-block tr,
  .layout--accountPage tr {
      flex-direction: column !important;
    }

  .login-block .item-name,
  .layout--accountPage .item-name  {
    align-self: start !important;
    margin-bottom: 0.5rem !important;
  }
}
#priceHide {
  display: none;
}