
  .tl-switcher-container.hidden {
      display: none;
      height: 0;
      overflow: hidden;
      opacity: 0;
  }
  .tl-switcher-container {
      position: relative;
      z-index: 1;
      line-height: normal;
  }
  .tl-switcher-container.desktop {
      display: inline-flex;
      align-items: center;
  }
  .tl-switcher-container.mobile {
      display: block;
  }
  .tl-custom-position {
      position: absolute;
      z-index: 9999;
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);
      border-radius: 3px;
      background-color: #fff;
  }
  .tl-wrapper {
      position: relative;
  }
  .tl-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
      min-width: 100%;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .15);
      background-color: #fff;
      padding: 16px 15px 17px;
      font-weight: normal;
      color: #000;
  }
  .tl-dropdown.active {
      display: block;
  }
  .tl-overlay {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, .5);
      align-items: center;
      justify-content: center;
  }
  .tl-overlay.active {
      display: flex;
  }
  .tl-overlay .tl-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      width: 400px;
      max-width: 95%;
      min-height: 150px;
      border-radius: 5px;
      box-shadow: 0 0 15px rgba(0, 0, 0, .15);
      background-color: #fff;
      padding: 25px 5%;
  }
  .tl-switcher {
      position: relative;
  }
  .tl-switcher form {
      margin: 0;
      overflow: visible;
  }
  .tl-select,
  .tl-selection,
  .tl-option {
      display: flex;
      align-items: center;
      column-gap: 7px;
      white-space: nowrap;
  }
  .tl-select {
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 3px;
      padding: 8px 10px;
      text-align: left;
      font-size: 14px;
      text-transform: capitalize;
      cursor: pointer;
  }
  .tl-select:after {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      margin: 0 5px 0 auto;
      border-width: 0 1px 1px 0;
      border-style: solid;
      border-color: #000;
      opacity: 0.9;
      transform: rotate(45deg) translate(0, -40%);
      transition: 0.3s ease;
  }
  .tl-select.open:after {
      transform: rotate(-135deg) translate(-2px, 0);
  }
  .tl-flag {
      width: 18px;
      max-width: none;
      border-radius: 1px;
      vertical-align: middle;
      transition: 0.2s ease;
  }
  .tl-label {
      display: inline-block;
      vertical-align: middle;
      overflow-x: hidden;
      text-overflow: ellipsis;
  }
  .tl-name {
      text-transform: capitalize;
  }
  .tl-code {
      text-transform: uppercase;
  }
  .tl-selections {
      display: flex;
      align-items: center;
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 3px;
  }
  .tl-selections:hover {
      cursor: pointer;
  }
  .tl-selection {
      padding: 8px 10px;
  }
  .tl-selection + .tl-selection {
      margin-left: -8px;
  }
  .tl-invert {
      filter: invert(100%);
  }
  .tl-select:has(.tl-icon):after {
      display: none;
  }
  .tl-close-btn {
      display: none;
  }
  .tl-title {
      margin: 0 0 7px;
      text-align: left;
      font-size: 14px;
  }
  .tl-switcher + .tl-title {
      margin-top: 14px;
  }
  .tl-options {
      display: none;
      list-style: none;
      position: absolute;
      bottom: auto;
      top: 100%;
      left: 0;
      z-index: 1;
      min-width: 100%;
      max-height: 170px;
      margin: 0 0;
      border-radius: 3px;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, .15);
      overflow-y: auto;
      background-color: #fff;
      padding: 6px 1px;
      text-align: left;
      font-size: 14px;
      font-weight: normal;
      color: #000;
  }
  .tl-options.open {
      display: block;
  }
  .tl-option {
      padding: 5px 10px;
      text-transform: capitalize;
      cursor: pointer;
      transition: 0.2s ease;
  }
  .tl-option::before,
  .tl-option::after {
      content: none !important;
  }
  .tl-select:focus-visible,
  .tl-option:focus-visible,
  .tl-selections:focus-visible,
  .tl-close-btn:focus-visible,
  .tl-submit-btn:focus-visible {
      outline: 2px solid #b3b3b3;
      outline-offset: -2px;
      /* Blends with the theme text colour where supported, so a dark header keeps
         a visible ring. The flat grey above stays the fallback. */
      outline-color: color-mix(in srgb, currentColor 40%, transparent);
  }
  .tl-option:hover img {
      opacity: 0.75;
  }
  .tl-btn-container {
      margin-top: 18px;
      text-align: center;
  }
  .tl-submit-btn {
      border: none;
      border-radius: 3px;
      outline: none;
      box-shadow: none;
      background-color: #333;
      padding: 9px 35px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.2s ease;
  }
  .tl-submit-btn:hover {
      background-color: #222;
  }
  .tl-overlay .tl-close-btn {
      display: block;
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
  }
  .tl-overlay .tl-switcher {
      margin-bottom: 5px;
  }
  .tl-overlay .tl-options {
      padding: 8px 1px;
  }
  @supports (-webkit-hyphens:none) {
      .tl-select,
      .tl-selection,
      .tl-option {
          column-gap: 0;
      }
      .tl-select img + .tl-label,
      .tl-selection img + .tl-label,
      .tl-option img + .tl-label,
       div.tl-select:after {
          margin-left: 7px;
      }
  }
  .tl-switcher-container.tl-custom-position {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #ffffff;
  }
  .tl-custom-position.top-right {
    top: 0px;
    right: 100px;
    bottom: auto;
    left: auto;
  }
  .tl-custom-position.top-left {
    top: 0px;
    right: auto;
    bottom: auto;
    left: 20px;
  }
  .tl-custom-position.bottom-left {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 30px;
    left: 20px;
  }
  .tl-custom-position.bottom-right {
    position: fixed;
    top: auto;
    right: 100px;
    bottom: 30px;
    left: auto;
  }
  .tl-custom-position > div {
    font-size: 14px;
    color: #5c5c5c;
  }
  .tl-custom-position .tl-label {
    color: #5c5c5c;
  }
  .tl-dropdown.bottom-right,
  .tl-dropdown.bottom-left {
    bottom: 100%;
    top: auto;
  }
  .tl-dropdown.top-right,
  .tl-dropdown.bottom-right {
    right: 0;
    left: auto;
  }
  .tl-options.bottom-right,
  .tl-options.bottom-left {
    bottom: 100%;
    top: auto;
  }
  .tl-options.top-right,
  .tl-options.bottom-right {
    right: 0;
    left: auto;
  }
  div:not(.tl-inner) > .tl-switcher .tl-select,
  div.tl-selections {
    border-width: 0px;
  }
  
  
  .tl-switcher .tl-options { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .tl-switcher .tl-option .tl-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  

  /* ---- Local rebuild: make the switcher a visible fixed capsule ---------- */
  /* The Shopify app adds .hidden + positions via JS; we show it directly and
     anchor it bottom-right to match the live storefront. */
  .tl-switcher-container.wb-lang {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: auto;
    right: 24px;
    bottom: 24px;
    left: auto;
    z-index: 9998;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    font-size: 14px;
    color: #5c5c5c;
  }
  .tl-switcher-container.wb-lang .tl-label { color: #5c5c5c; }
  .tl-switcher-container.wb-lang .tl-selections { border: 0; }
  .tl-switcher-container.wb-lang .tl-language-dropdown {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    left: auto;
    z-index: 1;
    min-width: 170px;
    margin: 0;
    padding: 6px 1px;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .15);
    background: #fff;
    list-style: none;
    text-align: left;
    font-size: 14px;
    color: #000;
    max-height: 260px;
    overflow-y: auto;
  }
  .tl-switcher-container.wb-lang .tl-language-dropdown.open { display: block; }
  .tl-switcher-container.wb-lang .tl-option {
    display: flex;
    align-items: center;
    column-gap: 7px;
    padding: 6px 10px;
    white-space: nowrap;
    cursor: pointer;
  }
  .tl-switcher-container.wb-lang .tl-option:hover { background: #f5f5f5; }
  .tl-switcher-container.wb-lang .tl-option.current { font-weight: 700; }
  .tl-switcher-container.wb-lang .tl-flag { width: 18px; height: auto; }
  @media (max-width: 749px) {
    .tl-switcher-container.wb-lang { right: 12px; bottom: 12px; }
  }
