body { --logo-h-desktop: 80px; }

  [data-widget-wrapper] {
    flex: 1;
  }

  [data-widget-weather] {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 0.875rem;
    color: var(--color-typ-tone);
    max-width: 16rem;
    width: 100%;
    cursor: pointer;

    &:hover > div:after { 
      opacity: 1;
    }

    &:hover .tides-widget__container {
      background-color: var(--color-bgr-tone);    
    }

    & > div:after {
      opacity: 0.6;
      position: absolute;
      right: 12px;
      top: 12px;
      content: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-plus%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22%20/%3E%3Cpath%20d=%22M12%205l0%2014%22%20/%3E%3Cpath%20d=%22M5%2012l14%200%22%20/%3E%3C/svg%3E');
      display: block;
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
      z-index: 30;
    }
    
    .tides-widget__copyright { 
      display: none; 
      font-size: 0.7rem;
      margin-top: 1rem;
      white-space: break-spaces;
      line-height: 1.25;
    }
    
    table { display: none; }
    
    .tides-widget__weather { 
      background-repeat: no-repeat;       
      height: 40px;
      line-height: 1;
      justify-content: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tides-widget__caption, table caption { font-style: italic; opacity: 0.6; font-weight: 500; }
    .tides-widget__weather .title { margin-left: 2.75rem; font-weight: 600; }
    .tides-widget__weather .min-max { margin-left: 2.75rem; font-weight: 500; }
    .tides-widget__container {
      background: var(--color-bgr);
      border: 1px solid var(--color-brd-soft);
      padding: 8px 12px;
      border-radius: var(--radius-md);
      transition: all 0.3s ease;
      width: 100%;
    }

    table { 
      margin-top: 0.5rem; 
      text-align: center;
      
      caption { margin-bottom: 0.25rem; }
      thead { border-bottom: 2px solid var(--color-brd-soft); }
      tbody tr { border-bottom: 1px solid var(--color-brd-soft); }
      th, td { padding: 0.25rem; }
    }

    a { text-decoration: underline; }
  }

  @media (max-width: 600px) {
    [data-widget-weather] {
      justify-content: flex-end;
      margin-left: auto;
    }
    [data-header-brand] { order: -1; }
    [data-header-actions] { flex: 0; }
    .tides-widget__caption { display: none; }
    .tides-widget__weather * { display: none; }
    [data-widget-weather] > div:after { display: none; }
    [data-widget-weather] .tides-widget__container { 
      border: none;
      background: transparent;
      width: 4rem;
    }
    [data-widget-weather="active"] .tides-widget__container { left: -5rem; }
  }
  
  [data-widget-weather="active"] {
    & > div:after {
      content: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-minus%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22%20/%3E%3Cpath%20d=%22M5%2012l14%200%22%20/%3E%3C/svg%3E');
    }

    .tides-widget__container {
      position: absolute;
      box-shadow: 
        0 10px 15px -3px rgb(0 0 0 / 0.1), 
        0 4px 6px -4px rgb(0 0 0 / 0.1);
      top: 0;
      left: 0;
      z-index: 20;
    }
    

    & > div:after { display: block!important; }
    .tides-widget__weather * { display: block; }
    .tides-widget__caption { display: block; }
    .tides-widget__copyright { display: block; }
    table { display: block; }
    .tides-widget__container { 
      border: 1px solid var(--color-brd-soft)!important;
      background: var(--color-bgr)!important;
      width: 100%!important;
      min-width: 15rem!important;
    }
  }