@charset "UTF-8";
@font-face {
  font-family: "bodoni";
  src: url("/fonts/bodoni-72-book.ttf") format("truetype");
}
/*
 * Set up the keyframes to actually describe the begining and end states of 
 * the animation.  The browser will interpolate all the frames between these 
 * points.  Again, remember your vendor-specific prefixes for now!
 */
@-webkit-keyframes loadingRefresh {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
@-moz-keyframes loadingRefresh {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(180deg);
  }
}
@-o-keyframes loadingRefresh {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(180deg);
  }
}
@keyframes loadingRefresh {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
/* Variables*/
/* Font Families*/
/* Font settings */
/* Color Palette*/
/* Shadows */
/* Max content width and paddings */
/* ============================================
CSS CUSTOM PROPERTIES - BREAKPOINT SYSTEM
============================================
Strategy: Hybrid fluid spatial + discrete font sizing.

Spatial dimensions (padding, widths, gaps) use clamp() to
interpolate linearly from 1200px to 1920px viewport width.
This eliminates jarring spacing jumps and the "zoomed in" feel.

Typography uses @media breakpoints for exact design-specified
font sizes at each breakpoint width.

The carousel uses aspect-ratio for proportional scaling,
ensuring the trust banner stays above the fold.

Key constraint: Nav + Hero + Trust Banner <= Viewport Height

Viewport heights (accounting for OS/browser chrome):
- 1920px wide -> 1080px tall
- 1536px wide -> 864px tall
- 1440px wide -> 900px tall
- 1200px wide -> 800px tall
*/
:root {
  /* === Colors (matched to Figma design tokens) === */
  --color-bg: #FFFFFF;
  --color-promo-bg: #127C95;
  --color-nav-bg: #293343;
  --color-nav-sub-bg: #252F3D;
  --color-ticker-bg: #FFFFFF;
  --color-hero-bg: #FFFFFF;
  --color-carousel-bg: #293343;
  --color-rail-heading: #003871;
  --color-text-primary: #2C3642;
  --color-text-secondary: #555555;
  --color-text-dark: #333333;
  --color-text-white: #FFFFFF;
  --color-text-hero-body: #CBCBCD;
  --color-cta: #EBBC4E;
  --color-cta-hover: #D4A843;
  --color-gold-link: #EEBC4E;
  --color-banner-bg: #F4F4F7;
  --color-border: #F0F2F3;
  --color-card-bg: #FFFFFF;
  --color-green: #00884A;
  --color-red: #CF4055;
  --color-section-bg-alt: #F8F9FA;
  --color-primary-navy: #003871;
  --color-primary-navy-hover: #002c5c;
  --color-secondary-blue: #0680CD;
  /* === Fluid Spatial Dimensions ===
      Each uses: clamp(min, calc(min + (100vw - 1200px) * (max - min) / 720), max)
      Interpolates linearly from value-at-1200 to value-at-1920.
  */
  --page-max-width: 1920px;
  /* Promo bar — 48px at 1920, shrinks to 40px at 1200 to free hero space */
  --promo-height: clamp(28px, calc(28px + (100vw - 1200px) * 20 / 720), 48px);
  --promo-padding-x: 90px;
  /* Nav dimensions — aligned to Figma breakpoints.
      Most values are constant 1200–1536 then ramp to 1920 ("delayed ramp").
      clamp(small-val, calc(small-val + (100vw - 1536px) * delta / 384), large-val)
      ensures constant below 1536 and smooth ramp above. */
  /* Nav main header: padding 12px vertical + content height (input + gap + forgot link) */
  --nav-padding-x: clamp(24px, calc(24px + (100vw - 1536px) * 36 / 384), 60px);
  --nav-content-gap: clamp(24px, calc(24px + (100vw - 1536px) * 16 / 384), 40px);
  --nav-logo-height: clamp(22px, calc(22px + (100vw - 1536px) * 3 / 384), 25px);
  --nav-search-height: clamp(40px, calc(40px + (100vw - 1536px) * 2 / 384), 42px);
  --nav-search-font: 14px;
  --nav-input-height: var(--nav-search-height);
  --nav-forgot-font: clamp(12px, calc(12px + (100vw - 1536px) * 2 / 384), 14px);
  --nav-create-font: clamp(16px, calc(16px + (100vw - 1536px) * 2 / 384), 18px);
  --nav-contact-font: 16px;
  /* Estimated rendered heights for --available-hero-height calculation */
  --nav-main-height: clamp(69px, calc(69px + (100vw - 1536px) * 22 / 384), 91px);
  --nav-sub-height: clamp(51px, calc(51px + (100vw - 1536px) * 29 / 384), 80px);
  --ticker-height: clamp(36px, calc(36px + (100vw - 1200px) * 16 / 720), 52px);
  /* Hero area — reduced vertical padding at small viewports to recover height */
  --hero-wrap-padding-top: clamp(4px, calc(4px + (100vw - 1200px) * 8 / 720), 12px);
  --hero-wrap-padding-bottom: clamp(4px, calc(4px + (100vw - 1200px) * 26 / 720), 30px);
  --hero-wrap-padding-x: clamp(16px, calc(16px + (100vw - 1200px) * 32 / 720), 48px);
  --hero-gap: clamp(8px, calc(8px + (100vw - 1200px) * 12 / 720), 20px);
  --left-rail-width: clamp(248px, calc(248px + (100vw - 1200px) * 220 / 720), 468px);
  /* Trust banner */
  --banner-padding-y: clamp(5px, calc(5px + (100vw - 1200px) * 5 / 720), 10px);
  --banner-padding-x: clamp(60px, calc(60px + (100vw - 1200px) * 92 / 720), 152px);
  /* Trust banner height (padding + content + breathing room) */
  --trust-banner-height: 36px;
  /* Available hero height: viewport minus all header rows and trust banner */
  --available-hero-height: calc(100vh - var(--promo-height) - var(--nav-main-height) - var(--nav-sub-height) - var(--ticker-height) - var(--trust-banner-height));
  /* Section spacing — fluid values for below-fold layout */
  --section-padding-y: clamp(40px, calc(40px + (100vw - 1200px) * 24 / 720), 64px);
  --section-padding-x: clamp(60px, calc(60px + (100vw - 1200px) * 92 / 720), 152px);
  --section-max-width: clamp(1010px, calc(1010px + (100vw - 1200px) * 606 / 720), 1616px);
  --card-gap: 20px;
  /* Typography — Fluid clamp() based on Figma + stakeholder data
      Pattern A (scaling): clamp(val@1200, linear-interp, val@1920)
      Pattern B (delayed): flat until 1536, then ramp to 1920 value
      Carousel heading: stakeholder-aligned 32→48px single smooth clamp
  */
  --font-h1: 42px;
  --font-h2: 32px;
  --font-h3: 24px;
  --font-h4: 20px;
  --font-body: 16px;
  --font-small: 14px;
  --font-xs: 12px;
  --font-ticker: 14px;
  /* Scaling fonts (Pattern A) */
  /* Nav menu font: 16px base at 1440–1536, ramps 16→20 from 1536→1920 */
  --font-nav-link: 16px;
  --font-rail-heading: clamp(20px, calc(20px + (100vw - 1200px) * 6 / 720), 26px);
  --font-rail-desc: clamp(13px, calc(13px + (100vw - 1200px) * 3 / 720), 16px);
  --font-carousel-heading: 48px;
  --font-carousel-body: 16px;
  --font-banner: 14px;
  --font-promo: 16px;
  /* Flat-then-jump fonts (Pattern B — start scaling at 1536) */
  --font-section-heading: clamp(28px, calc(28px + (100vw - 1200px) * 20 / 720), 48px);
  --font-cta-heading: clamp(28px, calc(28px + (100vw - 1200px) * 20 / 720), 48px);
  --font-newsletter-heading: clamp(32px, calc(32px + (100vw - 1200px) * 28 / 720), 60px);
  --font-sell-heading: clamp(32px, calc(32px + (100vw - 1200px) * 16 / 720), 48px);
  /* Static font sizes */
  --font-card-title: 14px;
  --font-card-price: 16px;
  --font-cta-body: 16px;
}

/* === 1536px Breakpoint === */
@media (max-width: 1599px) {
  :root {
    --font-h1: 38px;
    --font-h2: 28px;
    --font-h3: 22px;
    --font-carousel-heading: 40px;
    /* Nav menu font stays 16px at 1440–1536 */
    --font-nav-link: 16px;
  }
}
/* === 1440px Breakpoint === */
@media (max-width: 1479px) {
  :root {
    --font-h1: 36px;
    --font-h2: 26px;
    --font-h4: 18px;
    --font-carousel-heading: 36px;
    /* Nav menu font ramps 14→16 from 1200→1440 */
    --font-nav-link: clamp(14px, calc(14px + (100vw - 1200px) * 2 / 240), 16px);
    /* Nav sub height adjusts for smaller font (14→16px menu items) */
    --nav-sub-height: clamp(66px, calc(66px + (100vw - 1200px) * 4 / 240), 70px);
  }
}
/* === 1200px Breakpoint === */
@media (max-width: 1279px) {
  :root {
    --font-h1: 32px;
    --font-h2: 24px;
    --font-h3: 20px;
    --font-h4: 16px;
    --font-body: 15px;
    --font-small: 13px;
    --font-xs: 11px;
    --font-ticker: 12px;
    --font-carousel-heading: 32px;
    --font-carousel-body: 15px;
    --font-card-title: 13px;
    --font-card-price: 15px;
    /* Nav-specific 1200px overrides per Figma */
    --font-nav-link: 14px;
    --font-promo: 14px;
    --nav-contact-font: 12px;
    --nav-sub-height: 66px;
    --font-cta-body: 15px;
  }
}
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 120%;
  color: #2C3642;
}

/* Hide google recaptcha badge */
.grecaptcha-badge {
  visibility: hidden;
}

main {
  width: 100%;
  text-align: center;
}
main section {
  text-align: left;
  margin: 0 auto;
  padding: 24px;
}
main section .section-content {
  max-width: 1616px;
  margin: 0 auto;
}
main section .section-content.multi-col {
  display: flex;
  gap: 60px;
  width: 100%;
}

@media (min-width: 968px) {
  main section {
    padding: 88px 100px;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: "bodoni", Georgia, serif;
  line-height: 110%;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  color: #293343;
}
h1.primary-navy, h2.primary-navy, h3.primary-navy, h4.primary-navy, h5.primary-navy, h6.primary-navy {
  color: #003871;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

@media (min-width: 1400px) {
  h1 {
    font-size: 4.5rem;
  }
  h2 {
    font-size: 3.75rem;
  }
  h3 {
    font-size: 3rem;
  }
  h4 {
    font-size: 2.25rem;
  }
  h5 {
    font-size: 1.5rem;
  }
  h6 {
    font-size: 1.25rem;
  }
}
/* Utilities */
a {
  color: #003871;
  text-decoration: none;
}
a.light {
  color: #0680CD;
}

.text-error {
  color: #CF4055 !important;
}

.text-title {
  color: #003871 !important;
}

.bg-kitco-dark {
  background-color: #252F3D;
}

.clikable {
  cursor: pointer;
}

.w-max-content {
  width: max-content !important;
}

.box-1 {
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}

.box-2 {
  box-shadow: 7px 10px 30px 0px rgba(0, 0, 0, 0.08);
}

.box-3 {
  box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.15);
}

.icon-bg {
  margin: 0 auto;
  border-radius: 50%;
  background: #003871;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-bg-lg {
  width: 60px;
  height: 60px;
  padding: 10px;
}
.icon-bg-sm {
  width: 32px;
  height: 32px;
  padding: 8px;
}
.icon-bg.light-blue {
  background: rgba(6, 128, 205, 0.12);
}
.icon-bg.pink {
  background: rgba(207, 64, 85, 0.12);
}
.icon-bg.navy {
  background: #003871;
}

hr.light {
  border-top: 1px solid #F0F2F3;
  margin: 0;
}

.icon-alert {
  background-image: url(/images/svg/alert-triangle-red.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 16px;
  margin: 0;
  display: inline-block;
  min-width: 30px;
}

/* Buttons */
.btn {
  padding: 11px 15px; /* mockup is 12px 16px but included border, so -1 for each size for the borders */
  border-radius: 6px;
  color: #ffffff;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  font-size: 1rem;
  font-weight: 700;
  line-height: 125%;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Scroll to Top button */
}
.btn:hover {
  cursor: pointer;
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  opacity: 1;
}
.btn-primary {
  background-color: #003871;
  border-color: #003871;
}
.btn-primary:active {
  background-color: #003871;
  border-color: #003871;
  color: currentColor;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: #00264D;
  border-color: #00264D;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: #CBCBCD;
  border-color: #CBCBCD;
}
.btn-secondary {
  color: #003871;
  border-color: #003871;
}
.btn-secondary:active {
  color: #003871;
  border-color: #003871;
}
.btn-secondary:hover {
  color: #00264D;
  border-color: #00264D;
  background-color: #ffffff;
}
.btn-secondary:disabled, .btn-secondary.disabled {
  color: #CBCBCD;
  border-color: #CBCBCD;
  background: transparent;
}
.btn-tertiary {
  border: none;
  padding: 0;
  font-weight: 400;
  font-size: 1.125rem;
  color: #0680CD;
  column-gap: 8px;
}
.btn-tertiary:active {
  color: #0680CD;
}
.btn-tertiary:active svg {
  stroke: #0680CD;
}
.btn-tertiary:hover {
  color: #003871;
}
.btn-tertiary:hover svg {
  stroke: #003871;
}
.btn-tertiary:hover span.arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33073 8H12.6641' stroke='%23003871' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.9974 12.6666L12.6641 7.99992L7.9974 3.33325' stroke='%23003871' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn-tertiary:disabled, .btn-tertiary.disabled {
  color: #CBCBCD;
}
.btn-tertiary:disabled svg, .btn-tertiary.disabled svg {
  stroke: #CBCBCD;
}
.btn-tertiary svg {
  width: 1rem;
  height: 1rem;
  margin-left: 8px;
  stroke: #0680CD;
}
.btn-tertiary span.arrow-right {
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33073 8H12.6641' stroke='%230680CD' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.9974 12.6666L12.6641 7.99992L7.9974 3.33325' stroke='%230680CD' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.btn.bg_gradient_green {
  background: #90b23c;
  background: -moz-linear-gradient(90deg, #90b23c 0, #548012 100%);
  background: -webkit-linear-gradient(90deg, #548012 0, #90b23c 100%);
  background: -o-linear-gradient(90deg, #90b23c 0, #548012 100%);
  background: -ms-linear-gradient(90deg, #90b23c 0, #548012 100%);
  background: linear-gradient(180deg, #90b23c 0, #548012 100%);
  color: #ffffff;
}
.btn.checkout, .btn.checkout:hover, .btn.checkout:active {
  background: #90B23C;
  border-color: #90B23C;
  color: #ffffff;
}
.btn.checkout:disabled, .btn.bg_gradient_green.disabled, .btn.bg_gradient_grey {
  background: #CBCBCD;
  color: #ffffff;
  border-color: #CBCBCD;
}
.btn.checkout:disabled:hover, .btn.checkout:disabled:active, .btn.bg_gradient_green.disabled:hover, .btn.bg_gradient_green.disabled:active, .btn.bg_gradient_grey:hover, .btn.bg_gradient_grey:active {
  background: #CBCBCD;
  color: #ffffff;
  border-color: #CBCBCD;
}
.btn.bg_gradient_blue {
  background: #296693;
  background: -moz-linear-gradient(top, #296693 0, #003871 100%);
  background: -webkit-linear-gradient(top, #296693 0, #003871 100%);
  background: linear-gradient(to bottom, #296693 0, #003871 100%);
}
.btn-inline {
  display: inline-flex;
}
.btn-scroll-to-top {
  display: none;
  position: fixed;
  width: 42px;
  height: 42px;
  bottom: 120px;
  right: 38px;
  z-index: 99;
  border: none;
  outline: none;
  border-radius: 6px;
  background-color: #003871;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17 11L12 6L7 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 18L12 13L7 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.15);
}
.btn-scroll-to-top:hover, .btn-scroll-to-top:focus-visible, .btn-scroll-to-top:active {
  background-color: #293343 !important;
}

/* Form Controls */
input, input.form-control, textarea, select {
  color: #333;
  padding: 10px 12px;
  border-width: 1px;
  border-style: solid;
  border-color: #CBCBCD;
  border-radius: 4px;
  line-height: 120%;
}
input:focus, input:focus-visible, input.form-control:focus, input.form-control:focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible {
  border-color: #003871;
  outline: none;
  box-shadow: none;
}
input::placeholder, input.form-control::placeholder, textarea::placeholder, select::placeholder {
  color: #555;
}
input.full-width, input.form-control.full-width, textarea.full-width, select.full-width {
  width: 100%;
}

input.form-control {
  padding: 5px 10px;
}

.select-container {
  position: relative;
}
.select-container label {
  color: #555;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 120%;
  background-color: #fff;
  padding: 0 4px;
  position: absolute;
  left: 12px;
  top: -8px;
}

select {
  padding: 12px 36px 12px 16px;
  width: 100%;
  appearance: none;
  background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="%23555555" stroke-width="2.08" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
  background-position: calc(100% - 16px) center;
  color: #333;
  font-size: 1.125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
select.select-short {
  padding: 6px 30px 6px 10px;
  background-position: calc(100% - 10px) center;
  font-size: 1rem;
}
select.select-short.unselected {
  color: #555;
}

/* Checkboxes and radios */
.radio, .checkbox {
  position: relative;
  display: block;
  margin: 0;
}

.radio input[type=radio],
.checkbox input[type=checkbox] {
  position: absolute;
  margin-left: -20px;
  margin: 4px 0 0;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
  border: none;
}

.radio label, .checkbox label {
  padding-left: 26px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  color: #333;
  line-height: 22px;
  display: flex;
  align-items: center;
}

.checkbox label::before {
  content: "";
  width: 19px;
  height: 19px;
  position: absolute;
  left: 0;
  top: 1px;
  background-color: #fff;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.9754 1.52148H6.02885C3.2596 1.52148 1.52344 3.48223 1.52344 6.25698V13.7443C1.52344 16.5191 3.25135 18.4798 6.02885 18.4798H13.9745C16.7529 18.4798 18.4818 16.5191 18.4818 13.7443V6.25698C18.4818 3.48223 16.7529 1.52148 13.9754 1.52148Z" stroke="%23CBCBCD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
}

.checkbox label:hover::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.9754 1.52148H6.02885C3.2596 1.52148 1.52344 3.48223 1.52344 6.25698V13.7443C1.52344 16.5191 3.25135 18.4798 6.02885 18.4798H13.9745C16.7529 18.4798 18.4818 16.5191 18.4818 13.7443V6.25698C18.4818 3.48223 16.7529 1.52148 13.9754 1.52148Z" stroke="%23003871" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.checkbox input[type=checkbox]:checked + label::before {
  background-image: url("/images/checkbox-ticked.png");
}

/* Change the cross button when input is focused */
input[type=search]:focus::-webkit-search-cancel-button, input[type=search]:hover::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background-image: url("/images/svg/icon-x.svg");
  opacity: 0.4;
  cursor: pointer;
}

.form-control-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-group {
  padding: 0;
  background-color: transparent;
  border: none;
}
.form-group label {
  color: #333;
  margin-bottom: 8px;
  line-height: 18px; /* 128.571% */
  letter-spacing: 0.28px;
}
.form-group .fieldset-message {
  font-size: 0.875rem;
  margin-top: 4px;
  line-height: 120%;
  display: none;
}
.form-group:focus-within label {
  color: #003871;
}
.form-group.success label, .form-group.success .fieldset-message {
  color: #00884A;
}
.form-group.success .fieldset-message {
  display: none;
}
.form-group.success input, .form-group.success textarea {
  padding-right: 42px;
  border-color: #00884A;
  background-image: url("/images/svg/check.svg");
  background-position-y: center;
  background-position-x: calc(100% - 12px);
  background-repeat: no-repeat;
}
.form-group.success:focus-within label {
  color: #003871;
}
.form-group.success:focus-within input {
  border-color: #003871;
  background-image: none;
}
.form-group.error label, .form-group.error .fieldset-message {
  color: #CF4055;
}
.form-group.error input, .form-group.error textarea {
  padding-right: 42px;
  border-color: #CF4055;
  background-image: url("/images/svg/alert-circle.svg");
  background-position-y: center;
  background-position-x: calc(100% - 12px);
  background-repeat: no-repeat;
}
.form-group.error .form-group-password img {
  display: none;
}
.form-group.error:focus-within label {
  color: #003871;
}
.form-group.error:focus-within input {
  border-color: #003871;
  background-image: none;
}
.form-group.error:focus-within .form-group-password img {
  display: block;
}
.form-group.error:focus-within .fieldset-message {
  display: none !important;
}

.counter {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  gap: 4px;
}
.counter__input {
  border-radius: 4px;
  border: 1px solid #CBCBCD;
  background: #ffffff;
  -moz-appearance: textfield;
  width: 60px;
  height: 32px;
  text-align: center;
  color: #555;
  /* Chrome, Safari, Edge, Opera */
}
.counter__input::-webkit-outer-spin-button, .counter__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.counter__input.error {
  border-color: #CF4055;
}
.counter__input:disabled {
  color: #CBCBCD;
  cursor: not-allowed;
}
.counter__button {
  height: 2rem;
  width: 2rem;
  position: relative;
  cursor: pointer;
  border-radius: 40px;
  background: #F4F4F7 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32" fill="none"><circle cx="15.5" cy="16" r="15.5" fill="%23F4F4F7"/><path d="M11 16L21 16" stroke="%23293343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  color: #293343;
}
.counter__button.disabled {
  cursor: not-allowed;
  background-color: #F4F4F7;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none"><circle cx="15.5" cy="15.5" r="15.5" fill="%23F4F4F7"/><path d="M11 15.5L21 15.5" stroke="%23CBCBCD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.counter__button-plus {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32" fill="none"><circle cx="15.5" cy="16" r="15.5" fill="%23F4F4F7"/><path d="M16 12.125V19.875" stroke="%23293343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 16L21 16" stroke="%23293343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.counter__button-plus.disabled {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none"><circle cx="15.5" cy="15.5" r="15.5" fill="%23F4F4F7"/><path d="M16 11.625V19.375" stroke="%23CBCBCD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 15.5L21 15.5" stroke="%23CBCBCD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.qty-error {
  display: none;
}
.qty-error-msg {
  color: #CF4055;
  font-weight: 700;
  line-height: 120%;
  font-size: 0.75rem;
}

/* Form Controls and Buttons on Dark Background */
.dark-mode .btn-primary {
  color: #293343;
  background-color: #EBBC4E;
  border-color: #EBBC4E;
}
.dark-mode .btn-primary:active {
  background-color: #EBBC4E;
  border-color: #EBBC4E;
  color: #293343;
}
.dark-mode .btn-primary:hover {
  background-color: #E8AB37;
  border-color: #E8AB37;
}
.dark-mode .btn-primary:disabled, .dark-mode .btn-primary.disabled {
  color: #CBCBCD;
  background-color: #555;
  border-color: #555;
}
.dark-mode .btn-secondary {
  color: #ffffff;
  border-color: #ffffff;
}
.dark-mode .btn-secondary:active {
  border-color: #ffffff;
}
.dark-mode .btn-secondary:hover {
  color: #F0F2F3;
  border-color: #F0F2F3;
  background-color: transparent;
}
.dark-mode .btn-secondary:disabled, .dark-mode .btn-secondary.disabled {
  color: #555;
  border-color: #555;
}
.dark-mode .btn-tertiary {
  color: #ffffff;
}
.dark-mode .btn-tertiary svg {
  stroke: #ffffff;
}
.dark-mode .btn-tertiary:hover {
  color: #F4F4F7;
}
.dark-mode .btn-tertiary:hover svg {
  stroke: #F4F4F7;
}
.dark-mode .btn-tertiary:disabled, .dark-mode .btn-tertiary.disabled {
  color: #555;
}
.dark-mode .btn-tertiary:disabled svg, .dark-mode .btn-tertiary.disabled svg {
  stroke: #555;
}
.dark-mode input {
  color: #F0F2F3;
  background: transparent;
}
.dark-mode input:focus, .dark-mode input:focus-visible {
  border-color: #0680CD;
}
.dark-mode input::placeholder {
  color: #CBCBCD;
}
.dark-mode label {
  color: #F0F2F3;
}
.dark-mode .form-group {
  background: transparent;
}
.dark-mode .form-group:focus-within label {
  color: #0680CD;
}
.dark-mode .form-group.success:focus-within label, .dark-mode .form-group.error:focus-within label {
  color: #0680CD;
}
.dark-mode .form-group.success:focus-within input, .dark-mode .form-group.error:focus-within input {
  border-color: #0680CD;
}

/* Offcanvas - customizing */
.offcanvas .btn-close {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: auto;
  width: 12px;
  height: 12px;
  opacity: 1;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  padding: 6px;
}
.offcanvas .btn-close:hover {
  opacity: 0.5;
}
.offcanvas .dark-bg .btn-close {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* Modal - customizing  */
.modal {
  /* Below styles for mobile only modal (bottom sheet style) */
  /* Information modal without header, 
  modal body contains title section and a separator 
  to separate the body content from title 
  Example: fulfilment center and call to order etc
  */
}
.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}
.modal-content {
  padding: 24px 0;
  row-gap: 40px;
  position: relative;
  box-shadow: 2px 20px 80px 0px rgba(0, 0, 0, 0.08);
}
.modal-header {
  padding: 0 24px 24px 24px;
  border-bottom-width: 2px;
}
.modal-header-empty {
  height: 0;
  padding: 0;
  border: none;
}
.modal-title {
  line-height: 110%;
  color: #2C3642;
  font-size: 1.5rem;
}
.modal-body {
  padding: 0 24px;
}
.modal-body-centered {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  text-align: center;
}
.modal-footer {
  padding: 0 24px;
  border: 0;
  justify-content: center;
  row-gap: 10px;
  flex-wrap: wrap;
}
.modal-footer .btn {
  width: 100%;
  margin: 0;
  flex-grow: 1;
}
.modal-footer .btn-primary {
  color: #ffffff;
  background-color: #003871;
  border-color: #003871;
  order: -1;
}
.modal-footer .btn-primary:active {
  background-color: #003871;
  border-color: #003871;
}
.modal-footer .btn-primary:hover {
  background-color: #00264D;
  border-color: #00264D;
}
.modal-footer .btn-primary:disabled, .modal-footer .btn-primary.disabled {
  background-color: #CBCBCD;
  border-color: #CBCBCD;
}
.modal .btn-close {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: auto;
  width: 24px;
  height: 24px;
  opacity: 1;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1;
}
.modal .btn-close:hover {
  opacity: 0.5;
}
.modal-fullscreen .modal-content {
  padding: 0;
}
.modal-bottom-sheet .modal-content {
  padding: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  gap: 0;
}
.modal-bottom-sheet .modal-header {
  padding: 24px 0px;
  margin: 0 24px;
  border-bottom: 1px solid #CBCBCD;
}
.modal-bottom-sheet .modal-title {
  color: #003871;
}
.modal-bottom-sheet .modal-body {
  padding: 24px;
}
.modal-bottom-sheet .btn-close {
  padding: 0;
}
.modal-bottom-sheet .modal-footer {
  padding: 16px;
  border-top: 1px solid #F4F4F7;
  background: #ffffff;
  box-shadow: 0 -3px 32px 0 rgba(0, 0, 0, 0.06);
}
.modal-information .modal-content {
  row-gap: 0;
  color: #333;
}
.modal-information .modal-title {
  font-size: 1.5rem;
}
.modal-information .modal-title-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-information .modal-title-container .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.modal-information .modal-sub-title {
  font-size: 1rem;
}
.modal-information .modal-body {
  font-size: 0.875rem;
  row-gap: 24px;
}
.modal-information .modal-body-content {
  padding: 24px 0;
  border-top: 2px solid #F4F4F7;
}
.modal-information .btn-close {
  padding: 0;
}
.modal-notification {
  min-width: 320px;
  max-width: 328px;
  margin: 0;
  position: fixed;
  top: 127px;
  right: 36px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}
.modal-notification .modal-content {
  padding: 24px;
  row-gap: 0;
  border: none;
  color: #555;
}
.modal-notification .modal-body {
  padding: 0;
}
.modal-notification .modal-title-heading {
  font-family: "bodoni", Georgia, serif;
  font-size: 2.25rem;
  line-height: 110%;
  margin: 16px 0;
  color: #333;
}
.modal-notification .btn-close {
  /*width: 20px;
  height: 20px;*/
  top: 24px;
  right: 24px;
  z-index: 100;
  background-size: auto;
}
.modal-alert {
  min-width: min-content;
  max-width: 462px;
}
.modal-alert .modal-content {
  padding: 40px;
  gap: 16px;
}
.modal-alert .btn-close {
  top: 24px !important;
  right: 24px !important;
}
.modal-alert .modal-footer .btn-primary {
  width: max-content;
  flex-grow: 0;
}
.modal.fade .modal-notification {
  transform: none;
}
.modal.fade.floating.show {
  pointer-events: none; /* Disable modal interaction */
}

@media (min-width: 744px) {
  .modal-dialog:not(.modal-alert, .modal-notification, .modal-information) {
    min-width: 635px;
  }
  .modal-content {
    padding: 46px 0;
  }
  .modal-header {
    padding: 0 59px 31px 59px;
  }
  .modal-header-empty {
    padding: 0;
  }
  .modal-title {
    font-size: 2.25rem;
  }
  .modal-body {
    padding: 0 59px;
  }
  .modal-footer {
    padding: 0 59px;
    column-gap: 16px;
    flex-wrap: nowrap;
  }
  .modal-footer .btn {
    width: calc(50% - 30px);
    max-width: 50%;
    margin: 0;
    flex-grow: 1;
  }
  .modal-footer .btn.flex-grow-0 {
    width: min-content;
  }
  .modal-footer .btn-primary {
    order: 0;
  }
  .modal .btn-close {
    top: 45px;
    right: 45px;
  }
  .modal-information .modal-content {
    padding: 40px 0;
  }
  .modal-information .modal-body {
    row-gap: 20px;
  }
  .modal-information .modal-body-content {
    padding: 20px 0;
  }
  .modal-information .modal-body, .modal-information .modal-footer {
    padding: 0 40px;
  }
  .modal-information .modal-title {
    font-size: 2.25rem;
  }
  .modal-information .btn-close {
    top: 30px;
    right: 32px;
  }
  .modal-notification .modal-content {
    padding: 24px;
  }
  .modal-notification .modal-body {
    padding: 0;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    position: absolute;
    bottom: 0;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down .modal-content {
    height: auto;
    position: absolute;
    bottom: 0;
  }
}
#errorModal {
  z-index: 2200;
}

/* DROPDOWN Customization */
.dropdown-menu {
  padding: 12px 0;
  min-width: max-content;
  border: none;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}
.dropdown-menu li {
  padding: 0;
  cursor: pointer;
}
.dropdown-menu li:not(:last-of-type) {
  margin-bottom: 12px;
}
.dropdown-menu.sub-menu {
  border: none;
  box-shadow: none;
  position: static !important;
  padding-bottom: 0;
}
.dropdown-menu.sub-menu a {
  color: currentColor;
  text-decoration: none;
  padding: 5px 12px;
  white-space: nowrap;
  text-align: inherit;
  display: block;
}
.dropdown-menu.sub-menu a:focus, .dropdown-menu.sub-menu a:hover {
  background-color: #F4F4F7;
}
.dropdown-item {
  padding: 5px 12px;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
  background-color: #F4F4F7;
}
.dropdown-item > a {
  color: currentColor;
  text-decoration: none;
  padding: 5px 12px;
  white-space: nowrap;
  text-align: inherit;
  display: block;
}
.dropdown-toggle {
  display: flex;
  align-items: center;
}
.dropdown-toggle::after {
  content: url("/images/svg/chevron-down-small.svg");
  border: none;
  margin-left: 5px;
  height: 16px;
}
.dropdown-divider {
  border-top: 2px solid #F4F4F7;
}

@media (min-width: 1920px) {
  .dropdown-toggle::after {
    height: 20px;
  }
}
/* BACKDROP (for modal or offcanvas) */
.modal-backdrop.show, .offcanvas-backdrop.show {
  opacity: 0.2;
}

/* Carousel */
.carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBCBCD;
  border: 0;
  margin-left: 3px;
  margin-right: 3px;
  opacity: 1;
}
.carousel-indicators [data-bs-target].active {
  background: #ffffff;
}
.carousel-item {
  transition: transform 0.6s ease-in-out;
}
.carousel-control-prev, .carousel-control-next {
  width: max-content;
  height: max-content;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}
.carousel-control-prev {
  margin-left: 24px;
}
.carousel-control-next {
  margin-right: 24px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 1;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 3.36px 4.8px 14.4px 0px rgba(0, 0, 0, 0.08);
}
.carousel-control-prev-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none"><path d="M5.21847 9.14294C4.98897 9.37926 4.61689 9.37926 4.3873 9.14294L0.777889 5.42792C0.66337 5.30981 0.60588 5.15498 0.60588 5.00015C0.60588 4.84532 0.663139 4.69052 0.777889 4.57244L4.3873 0.85743C4.61689 0.621091 4.98897 0.621091 5.21847 0.85743C5.44801 1.09371 5.44801 1.47679 5.21847 1.71301L2.02487 5.00013L5.21847 8.28728C5.44789 8.5235 5.44789 8.90672 5.21847 9.14294Z" fill="%232C3642"/></svg>');
}
.carousel-control-next-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none"><path d="M0.781528 0.857063C1.01103 0.620744 1.38311 0.620744 1.6127 0.857063L5.22211 4.57208C5.33663 4.69019 5.39412 4.84502 5.39412 4.99985C5.39412 5.15468 5.33686 5.30948 5.22211 5.42756L1.6127 9.14257C1.38311 9.37891 1.01103 9.37891 0.781528 9.14257C0.551991 8.90629 0.551991 8.52321 0.781528 8.28699L3.97513 4.99987L0.781528 1.71272C0.552106 1.4765 0.552106 1.09328 0.781528 0.857063Z" fill="%232C3642"/></svg>');
}

@media (min-width: 744px) {
  .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 20px;
  }
  .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
  }
  .carousel-control-prev-icon {
    background-image: url("/images/svg/carousel-control-prev-xs.svg");
  }
  .carousel-control-next-icon {
    background-image: url("/images/svg/carousel-control-next-xs.svg");
  }
}
@media (min-width: 1200px) {
  .carousel-control-prev, .carousel-control-next {
    margin: 0;
  }
  .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 50px;
    height: 50px;
  }
  .carousel-control-prev-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18" fill="none"><path d="M9.62572 17.6308C9.1476 18.1231 8.37244 18.1231 7.89411 17.6308L0.374508 9.89114C0.135928 9.64507 0.0161572 9.32252 0.0161572 8.99995C0.0161572 8.67739 0.135448 8.35487 0.374508 8.10889L7.89411 0.36928C8.37244 -0.123093 9.1476 -0.123093 9.62572 0.36928C10.1039 0.86153 10.1039 1.65961 9.62572 2.15173L2.97238 8.99991L9.62572 15.8481C10.1037 16.3403 10.1037 17.1386 9.62572 17.6308Z" fill="%232C3642"/></svg>');
  }
  .carousel-control-next-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18" fill="none"><path d="M0.374276 0.369249C0.852398 -0.123083 1.62756 -0.123083 2.10589 0.369249L9.62549 8.10886C9.86407 8.35493 9.98384 8.67748 9.98384 9.00005C9.98384 9.32261 9.86455 9.64513 9.62549 9.89111L2.10589 17.6307C1.62756 18.1231 0.852398 18.1231 0.374276 17.6307C-0.103925 17.1385 -0.103925 16.3404 0.374276 15.8483L7.02762 9.00009L0.374276 2.15187C-0.103685 1.65974 -0.103685 0.861376 0.374276 0.369249Z" fill="%232C3642"/></svg>');
  }
}
/* Tooltip styling */
.tooltip {
  max-width: 236px;
}
.tooltip.show {
  opacity: 1;
}
.tooltip-inner {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  color: #F4F4F7;
  line-height: 120%;
  background-color: #333;
  border-radius: 4px;
  text-align: left;
  max-width: 236px;
}
.tooltip-inner p {
  padding: 0;
  margin: 0;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #333;
}

/* Navigation List => Mainly left menu navigation on PLP */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
}
.sidebar-banner {
  width: 100%;
}
.sidebar-banner img {
  width: 100%;
}

@media (min-width: 1200px) {
  .sidebar {
    width: 296px;
  }
}
@media (min-width: 1440px) {
  .sidebar {
    width: 330px;
  }
}
@media (min-width: 1920px) {
  .sidebar {
    width: 416px;
  }
}
.navlist {
  border-radius: 4px;
  border: 2px solid #F0F2F3;
  background: #ffffff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.navlist:not(:last-of-type) {
  margin-bottom: 24px;
}
.navlist-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navlist-heading > a {
  font-size: 1.5rem;
  font-family: "bodoni", Georgia, serif;
  line-height: 110%;
  color: #003871;
}
.navlist-subheading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navlist-toggler {
  border: 0;
  background-color: #ffffff;
  width: 24px;
  height: 24px;
}
.navlist-toggler-icon {
  width: 100%;
  height: 100%;
  display: block;
  background: url("/images/svg/chevron-up.svg");
  transition: all 0.5s;
}
.navlist-toggler.collapsed .navlist-toggler-icon {
  transform: rotate(180deg);
}
.navlist-collapse {
  transition: all 0.5s;
}
.navlist-nav {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.navlist-nav > li a {
  font-family: "bodoni", Georgia, serif;
  font-size: 1.25rem;
  line-height: 110%;
  color: #003871;
}
.navlist-nav .navlist-subnav {
  margin-top: 32px;
}
.navlist-subnav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.navlist-subnav > li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 120%;
  color: #333;
}
.navlist-subnav ul {
  list-style: none;
  padding-left: 20px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.navlist-subnav ul a {
  color: #555;
  font-size: 0.875rem;
  text-transform: capitalize;
}
.navlist-divider {
  margin: 24px 0;
  color: #F0F2F3;
  opacity: 1;
}
.navlist a.promo {
  color: #CF4055;
}
.navlist li.active a, .navlist a.active {
  color: #0680CD;
}
.navlist a:hover {
  color: #003871;
}

@media (min-width: 1440px) {
  .navlist-heading > a {
    font-size: 1.75rem;
  }
  .navlist-nav > li a {
    font-size: 1.5rem;
    color: #003871;
  }
  .navlist-subnav > li a {
    font-size: 1.125rem;
    color: #333;
  }
  .navlist-subnav ul a {
    font-size: 1rem;
  }
  .navlist-divider {
    margin: 32px 0;
  }
}
@media (min-width: 1920px) {
  .navlist-heading > a {
    font-size: 2.25rem;
  }
}
/* Accordion */
.accordion-button {
  padding: 0;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 120%;
}
.accordion-button:not(.collapsed) {
  color: #333;
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12H19" stroke="%230680CD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.accordion-button::after {
  position: absolute;
  right: 5px;
  top: 0px;
  background-size: 24px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="%230680CD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: center;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-item {
  border: none;
}
.accordion-body {
  padding: 16px 0 0 0;
  color: #555;
  font-size: 1rem;
  line-height: 120%;
}
.accordion-collapse {
  transition: all 0.5s;
}
.accordion-separator {
  margin: 24px 0;
  color: #F0F2F3;
  opacity: 1;
}

/* END Accordion*/
/* Breadcrumbs for PLP and PDP */
.breadcrumbs {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #293343;
  font-size: 1rem;
  line-height: 120%;
}
.breadcrumbs a {
  color: #0680CD;
}
.breadcrumbs .arrow {
  color: var(--Grey-4, #CBCBCD);
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
}
.breadcrumbs .currentPage {
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Currency selector in PLP, PDP and VIew carts */
.top-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .top-panel {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.custom-selector {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 1.25rem;
  line-height: 120%;
  font-weight: 700;
  color: #333;
}
.custom-selector .dropdown-toggle, .custom-selector .dropdown-toggle:active, .custom-selector .dropdown-toggle.show {
  border-color: #CBCBCD;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 120%;
  padding: 6px 10px;
  color: #333;
  background-color: #ffffff;
  font-weight: 400;
  height: 32px;
  justify-content: space-between;
}
.custom-selector .dropdown-toggle::after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7.5L10 12.5L15 7.5" stroke="%23555555" stroke-width="2.08" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  transition: all 0.5s;
}
.custom-selector .dropdown-toggle.show {
  border-radius: 6px;
  border: 1px solid #003871;
}
.custom-selector .dropdown-toggle.show::after {
  transform: rotate(180deg);
}
.custom-selector .dropdown-toggle.show .dropdown-label {
  color: #0680CD;
}
.custom-selector .dropdown-label {
  position: absolute;
  top: -11px;
  left: 12px;
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
  background-color: #ffffff;
}
.custom-selector .dropdown-menu {
  width: 100%;
  padding: 2px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.05);
  border: 1px solid #CBCBCD;
}
.custom-selector .dropdown-menu li {
  padding: 0px;
}
.custom-selector .dropdown-menu li:not(:last-of-type) {
  margin-bottom: 4px;
}
.custom-selector .dropdown-item {
  padding: 6px 10px;
  border-radius: 4px;
  background-color: transparent;
  font-weight: 700;
  line-height: 120%;
}
.custom-selector .dropdown-item.active {
  background-color: rgba(6, 128, 205, 0.08);
  color: #0680CD;
}
.custom-selector .dropdown-item:hover {
  background-color: rgba(6, 128, 205, 0.04);
  color: #0680CD;
}

.currency-selector .dropdown {
  width: 93px;
}

/* Contact by Phone in modal */
.contact-by-phone-block {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  margin: 0 auto;
  width: max-content;
  align-items: flex-start;
}
.contact-by-phone-info {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  width: max-content;
}
.contact-by-phone-info > span {
  flex-grow: 1;
  text-align: left;
  min-width: 100px;
}
.contact-by-phone-info > span a {
  color: #333;
}

/* Page error messages */
#actiondivs {
  border-radius: 4px;
  background: #ffffff;
  margin-bottom: 40px;
}
#actiondivs #actionerrdiv, #actiondivs #actionmsgdiv {
  background: #F4F4F7;
  padding: 20px;
}
#actiondivs #actionerrdiv {
  background: rgba(252, 209, 209, 0.2);
}
#actiondivs .container_messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#actiondivs .message_headline_2_red, #actiondivs .message_headline_2_green {
  font-family: "bodoni", Georgia, serif;
  font-size: 1.5rem;
  line-height: 110%;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}
#actiondivs .message_headline_2_red {
  color: #CF4055;
}
#actiondivs .message_text {
  padding: 0;
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 120%;
}
#actiondivs a {
  color: #0680CD;
}

/* ALPINE.js x-cloak */
[x-cloak] {
  display: none !important;
}

/* END OF UTILITIES SECTION*/

/*# sourceMappingURL=custom.css.map */